html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip;
}
canvas {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

#canvas1 {
  top: 0;
}
.nana{transition-delay: 5s;
padding-top: 100vh;
position: relative;
opacity: 0;
transition: all 1s;
transition-delay: 3s;
margin-top: -168vh;
}

.nanax{background: linear-gradient(
  to bottom,
  rgba(0,0,0,0) 0%,
  rgba(0,0,0,0.6) 60%,
  rgba(0,0,0,0.8) 100%
);
  opacity: 1;
}
.video2{position: sticky!important;
  height: 250vh!important;
top: 100vh!important;}

.map{width: 100%;}

#canvas2 {
  top: 0;
}
.daddy1{aspect-ratio: 1 / 2;}

#sec3{position: relative;
  width: 100vw;
  color: white;
  z-index: 2;
  height: 50%;
}


.zutto{opacity: 1!important;}



.blur-wrap {
  filter: blur(20px);
  overflow: clip;
}

section {
  position: fixed; /* 固定表示 */
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 50px;
  transition: opacity 0.5s;
  display: block;
  z-index: 4;
  width: 100%;
}



.ss1 {
  position: relative;
}

.lz{line-height:0;}

#tec1{width: 100%;

display: grid;
place-items: center;
justify-content: center;
transition: all 1s;

top: 0;
}
img{width: 100%;}

.logo{width: 71vw;
    aspect-ratio: 0.49 / 0.174;
    position: relative;
filter:

drop-shadow(0 0 0.5px rgba(255,255,255,0.3))
drop-shadow(0 0 2px rgba(255,255,255,0.5))
drop-shadow(0 0 1px rgba(255,255,255,0.5));
}

.logo img{position: absolute;
left: 0;
top: 0;
opacity: 0;
filter: blur(100px);
animation: logo 1 2s;
animation-fill-mode: forwards;
transform: skewX(55deg); /* X方向に傾ける（-15deg を調整） */
transform-origin: center;
}

.delay1{animation-delay: 0.3s!important;}
.delay2{animation-delay: 0.8s!important;}
.delay3{animation-delay: 1.3s!important;}


.three{position: relative;
margin: auto;
overflow-x: clip;
display: grid;
justify-content: center;
place-items: center;
height: 100vh;
width: 100vw;


}

.three1{
  position: relative;
  width: 90vw;
aspect-ratio: 0.729 / 0.276;
}

.three2{aspect-ratio: 0.729 / 0.206;}


#sec44{ background: black; color: white;
height: 100vh;
position: relative;
width: 100vw;}

.header img {
  transition: filter 0.3s ease;
}

.black .yonkan{color: black;}

.header.black img {
  filter: invert(1) !important;
}

.header.black .rms5{background-color: black;}

.three img{position: absolute;
    left: 0;
    top: 0;
}

    .opa{opacity: 0;
      transition: all 1s;
    }

    .opax{opacity: 1;
   
    }


    .kako1x,.kako2x,.kako3x{opacity: 1;}


      .delay4{transition-delay: 0s!important;}
      .delay5{transition-delay: 0.5s!important;}
      .delay6{transition-delay: 1s!important;}


.yoko{opacity: 0;
transform: translateX(30%);
transition: all 1s;
filter: blur(50px);
}

.yokox{opacity: 1;
    transform: translateX(0%);
    filter: blur(0px);
 }



    .hineri{opacity: 0;
        filter: blur(100px);
        transform: rotate(360deg);
        transition: all 2s;

    }

    .hinerix{
    opacity: 1;
    filter: blur(0px);
    transform: rotate(0deg);

    }

    .fade{opacity: 0;
        filter: blur(100px);
        transition: all 2s;

    }

    .fadex{
    opacity: 1;
    filter: blur(0px);


    }




    @keyframes logox{

      0%{opacity: 0;
          filter: blur(100px);
          transform: skewX(55deg);
      }

      100%{
      opacity: 1;
      filter:

      drop-shadow(0 0 0.5px rgba(255,255,255,0.3))
      drop-shadow(0 0 2px rgba(255,255,255,0.3))
      drop-shadow(0 0 1px rgba(255,255,255,0.3));
      transform: skewX(0deg);

      }

      }


@keyframes logo{

0%{opacity: 0;
    filter: blur(100px);
    transform: skewX(55deg);
}

100%{
opacity: 1;
filter: blur(0px);
transform: skewX(0deg);

}

}

@keyframes logo2{



    0%{
    opacity: 1;
    filter: blur(0px);
    transform: skewX(0deg);

    }

    100%{opacity: 0;
        filter: blur(100px);
        transform: skewX(-55deg);
    }

    }



.header{position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: ;
z-index: 101;
opacity: 0;
animation: fadein 1 2s 2s forwards;
mix-blend-mode: normal !important;
}

.byon{position: absolute;
width: 1px;
height: 5vw;
right: 2.9vw;
bottom: 5vw;
opacity: 0;
background-color: white;
animation: logo 1 2s 4s forwards
,byon infinite 2s;

}

@keyframes byon {

    0%{transform: translateY(0);}
    50%{transform: translateY(50%);}
    100%{transform: translateY(0);}
}

.yonkan{
    transform: skewX(55deg); /* X方向に傾ける（-15deg を調整） */
    opacity: 0;
    animation: logo 1 2s 4s forwards;
    transform-origin: center;
    position: fixed;
    left: 2vw;
    bottom: 2vw;
    z-index: 2;
}

@keyframes fadein {

    0%{opacity: 0;}

    100%{opacity: 1;}


}

.yonkan{  font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    font-size: 1.8vw;
    letter-spacing: 0.5vw;
    -webkit-font-smoothing: antialiased;
position: fixed;
bottom:3.1vw ;
left: 2.9vw;

}

.sc5_1{width: 17.4vw;
margin: auto;
padding-top: 6.3vw;}

.sc5_2{width:54.2vw ;
margin: auto;
margin-top: 3.9vw;
position: relative;
aspect-ratio: 0.542 / 0.551;
}

.maru{width: 19.3vw;}
.maru{opacity: 0;
  transition: all 2s;
transform-origin: center;
}
.maru1{top: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition-delay: 0.1s;
  transform: translateY(-50%) translateX(-30%) rotate(-180deg);
}

.maru2{top: 8.2vw;
right: 0;
transition-delay: 0.5s;
transform: translateY(-50%) translateX(-20%) rotate(-180deg);
}



.maru3{top: 27.55vw;
right: 0;
transition-delay: 0.9s;
transform: translateY(-50%) translateX(-10%) rotate(-180deg);
}
.maru4{bottom: 0;
left: 0;
right: 0;
margin: auto;
transition-delay: 1.3s;
transform: translateY(-50%) translateX(0%) rotate(-180deg);
}
.maru5{top: 27.55vw;
 left: 0;
 transition-delay: 1.3s;
 transform: translateY(50%) translateX(10%) rotate(-180deg);
}

 .maru6{top: 8.2vw;
  transition-delay: 2.3s;
  left: 0;
  transform: translateY(50%) translateX(20%) rotate(-180deg);
}

.maou {
  position: relative;
}

.marux{opacity: 1;

  transform: translateY(0%) translateX(0%) rotate(0deg);
}

.sc5_2 div{position: absolute;}

.con1{color: white;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    line-height: 6.1vw;
    font-size: 2.8vw;
    letter-spacing: 0.5vw;

}
body{-webkit-font-smoothing: antialiased;}


.wrap {
	display: flex;
	align-items: center;
  height: auto;
  overflow: clip;


  }


.fs{
    width: 100%!important;
}

.fs .content{width: 190vw;
}

  .slideshow {
	display: flex;
	padding: 0;
	margin: 0;
  color: white;
  font-weight: bold;
  font-family: "Zen Kaku Gothic New", sans-serif;
  }
  .content {
	width: 45vw;
font-size: 4vw;
	list-style: none;
margin-right: 0.5%;
text-shadow: 1px 2px 3px #5d5d5d;
  }

  .vin{width: 40vw;
overflow: clip;}

.guru{position: absolute;
left: 2.9vw;
top: 1.3vw;
font-size: 2rem;
}

.right{position: absolute;
right:6vw ;
top: 3.1vw;
}


video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画面いっぱいに表示、アスペクト比保持 */
}

.video1{position: absolute;
  height: 100%;
  width: 100%;
top: 0;}

.video1 video{object-fit: cover;
height: 100%;}

.video1 img{object-fit: cover;
  height: 100%!important;}
.form-group label{font-size: 1.3vw;}

.rm{display:flex;
justify-content: center;}

.rm a{color: white;
text-decoration: none;
font-size: 1.6vw;
}

.video1{height: 100%;
object-fit: cover;}

.rms{margin-right: 1.6vw;
line-height: 0;
display: grid;
place-items: center;
font-weight: bold;
font-family: "Zen Kaku Gothic New", sans-serif;
text-shadow: 1px 2px 3px #5d5d5d;
}

.rms6{width: 6.9vw;}
.rms5{width: 4.4vw;
margin-right: 0;
border-radius: 15px;
background-color: white;
background: rgba(255,255,255,0.35);
-webkit-backdrop-filter: blur(12px) saturate(120%);
        backdrop-filter: blur(12px) saturate(120%);
/* 見た目の仕上げ */
border: 1px solid rgba(255,255,255,0.18);
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}


.sns1{width: 2.3vw;}
.sns{position: fixed;
top: 50%;
transform: translateY(-50%);
right: 2.9vw;
z-index: 2;
}

html, body {
  margin: 0;
  padding: 0;
}

.spacer {
  height: 1px; /* または微調整で余白を消す */
}

body {
  min-height: auto; /* または height: auto; */
}

body > *:last-child {
  margin-bottom: 0;
}

html {
  overflow-x: hidden; /* 横スクロールだけ防ぐ */
}
body {
  margin: 0;
  padding: 0;
  /* overflow-y は指定しない */
}



.sns1_1{margin-bottom: 1.3vw;}




  .slideshow {
	display: flex;
	animation: loop-slide 30s infinite linear  both;
  }

  .fs .slideshow {
	display: flex;
	animation: loop-slide 70s infinite linear  both;
  }

  @keyframes loop-slide {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-100%);
	}
  }

  .lang {
    display: none;
  }
  .lang.active {
    display: block;
  }
  .lang-switch {


    cursor: pointer;

    border: none;


  }

  .s3_1{width: 27vw;
margin: auto;
padding-top: 5vw;
}

.heikou{display: flex;
justify-content: space-between;
width: 105%;
}

.s3_2{width: 47vw;
margin: auto;
margin-top: -7vw;
}

.heikou2{margin-top: -6vw;}

.s3_3,.s3_4,.s3_5,.s3_6{
  width: 35vw;
}

.con1 .en{font-size: 6vw;
letter-spacing: 0;}



.s3_4 .en{width: 34.1vw;}


.contact{color: white;
border: white 1px solid;
display: grid;
justify-content: center;
place-items: center;
width: 65vw;
line-height: normal;
margin: auto;
height: 8vw;
font-family: "Shippori Mincho", serif;
font-size: 2vw;
}


.lang { display: none; }
.lang.active { display: block; }

    .s3_7{font-size: 2.2vw;
    line-height: 4.7vw;
color: white;
margin: auto;
font-family: "Shippori Mincho", serif;
font-weight: 400;
font-style: normal;
display: inline-block;
margin-top: 5vw;
text-align: center;
}


.s3cen{width: 80vw;
margin: auto;
margin-top: 2.6vw;
text-align: center;
padding-bottom: 11.9vw;
}

#sec5{width: 100%;
padding-top: 10vw;
padding-bottom: 10vw;
position: relative;}

#sec4{background-color: white;
position: relative;
padding-bottom: 15vw;
}

#footer{width: 100%;
    height: ;

    position: relative;}

.sc4_1{width: 100%;
height: 100%;


display: grid;
place-items: center;
justify-content: center;
transform: translateZ(0);
}



.sc4_1x{width: 100%;
    height: 100%;
    background-color: black;
    mix-blend-mode: multiply;
    display: grid;
    place-items: center;
    justify-content: center;
    padding-top: 10vw;
    padding-bottom: 10vw;
    transform: translateZ(0);
    }


.sc4_2{display: flex;
  justify-content: space-between;
    width: 65vw;}

.sc4_3{color: white;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
  width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
}

  .daai{width: 54%;
  justify-content: space-between;}

  .way1{width: 30vw;}

  .contact a{color: white;
  text-decoration: none;}

  .contact:hover{background-color: rgba(255,255,255,0.2);}


    .sc4_4{padding-left: 1.5vw;
      padding-right: 1.5vw;
    
      padding-bottom: 0.2vw;
    margin-left: auto;
    margin-right: 0;
    margin-top: 0.2vw;
    background-color: white;
    border-radius: 15px;
    font-size: 2.5vw;
    font-weight: bold;
    font-family: "Zen Kaku Gothic New", sans-serif;
    display: inline-block;
    float: right;
    line-height:3vw;
    }
    
    .sc4_4 a{color: black;
    text-decoration: none;
    
    text-align: right;
    }

    .sc4_5{font-size: 1.5vw;
    margin-bottom: 2.4vw;}

    .sc4_6{font-size: 2vw;
    line-height:2.5vw;}

    .sc4_7{
    display: grid;
    justify-content: center;
    place-items: center
    }


    #sec5{  background-color: black;
    padding-bottom: 10vw;
    background-color: black;
    }

    #sec5x{  background-color: white;
      padding-bottom: 10vw;
      background-color: white;
      }

      .nai{display: none;}


    #sec6{background-color: black;
    color: white;
    position: relative;
    z-index: 2;
    margin-top: -2px;
    }


.yonkan .en{font-size: ;
letter-spacing: 0.2vw;}

#tec2{width: 100%;

justify-content: center;
position: relative;
padding-top: 0vh;
}



.lang-toggle {
    text-align: right;
    margin-bottom: 10px;
  }
  #news-list {
    margin: 20px 0;
    color: white;
  }
  .news-item {
    margin-bottom: 2.9vw;
    cursor: pointer;
  }
  .title-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
  }

.oshitai{font-size: 1.7vw;
    line-height: normal;
    color: white;
margin-bottom: 2.9vw;}

  .title {
    font-size: 1.2vw;
    color: white;
  }
  .line {
    flex-grow: 1;
    height: 1px;
    background: #DDDDDD;
    margin: 0 10px;
  }
  .date {
    white-space: nowrap;
    color: white;
    font-size: 1vw;
    font-family: "Hanken Grotesk", sans-serif;
    font-optical-sizing: auto;
  }
  .body {
    margin-top: 8px;
    line-height: 1.6;
    font-size: 1vw;
    color: white;
  }
  #viewMoreContainer {
    text-align: right;
    margin-top: 20px;

  }
  #viewMoreBtn {
    font-family: "Hanken Grotesk", sans-serif;
    background: none;
    border: none;
    border-bottom: 1px solid #DDDDDD;
  padding-bottom: 5px;
color: white;
font-size: 1vw;
    cursor: pointer;
  }
  #viewMoreBtn:hover {
    background: #f0f0f0;
  }
  .oshi{width: 47.4vw;
margin: auto;
font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
    padding-top: 3.6vw;
}

	/* セクション全体 */
    #contact {
      margin: auto;
        max-width: 500px;
        padding: 20px;
        padding-bottom: 15vw;

        border-radius: 8px;
        font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
      }

      .ja{ }

      #contact h2 {
        text-align: center;
        margin-bottom: 20px;
      }

      /* 各フォームグループ */
      .form-group {
        margin-bottom: 15px;
      }

      .form-group label {
        display: block;
        margin-bottom: 5px;
      line-height: normal;
      }

      .form-group input,
      .form-group textarea {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 14px;
      }

      .form-group textarea {
        resize: vertical;
      }

      /* 送信ボタン */
     .submit{
        font-family: "Shippori Mincho", serif;
        display: block;
        width: 100%;
        padding: 10px;
        background-color: #888888;
        color: white;
        font-size: 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      .submit .en{   font-family: "Hanken Grotesk", sans-serif;}

      button[type="submit"]:hover {
       opacity: 0.6;
      }

      .sc4_5x{font-family: "Hanken Grotesk", sans-serif;
    font-size: 1.3vw;
margin-bottom: 1.6vw;
color: white;
}


.sc4_6x{font-size: 1.7vw;
line-height: 2.5vw;}

.gmm{display: flex;
    font-family: "Hanken Grotesk", sans-serif;
    line-height: normal;
font-size: 1.9vw;
}

.gm{border: 1px solid white;
  padding: 1vw;
  padding-top: 0.5vw;
  padding-bottom: 0.5vw;
display: inline-block;
margin-top: 1.3vw;
margin-left: 0;
width: 30%;
text-align: center;
border-radius: 5px;
}

.way2{margin-left: 3vw;}

.gm a{text-decoration: none;
color: white;}

.yaji{width: 1vw;
flex-shrink: 0;
overflow: clip;
margin-left: 10px;
}

.jimmy{justify-content: center;
font-size: 1.5vw;}


.yaji img{animation: yaji infinite 2s;}

@keyframes yaji{
    0%{transform: translateX(-100%);}
    50%{transform: translateX(0%);}
    100%{transform: translateX(100%);}
}

.way{line-height: 1vw;
    font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 1vw;
color: white;
}

.snsy1  .gmm{font-size: 1.3vw!important;
width: 10.4vw;
border-bottom: 1px solid white;
}

.snsy1 .yaji{width: 1.4vw;}

.snsy1{margin-bottom: 1.6vw;}

.snsy1 .gmm{justify-content: space-between;}

.snsy1 a{text-decoration: none;
color: white;}

.sc4_7x{display: none;
width: 27.6vw;
justify-content: space-between;}

.sonota a{text-decoration: none;
color: white;}

.sonota{font-size: 1vw;
    font-family: "Zen Kaku Gothic New", sans-serif;
line-height: 2.2vw;}

.foot{
    display: flex;
    justify-content: space-between;
}

.foot0{margin-bottom: 3vw;
justify-content: left;
margin-top: 5vw;
}

.foot1{margin-bottom: 3vw;
justify-content: left;
}

    .shin{flex-direction: column;}



    .foot2{display: flex;
    justify-content: space-between;
    width: 100%;
}

.resa{width: 14.6vw;}

.rms3{margin-right: 0;}

.resa1{padding-left: 1.5vw;
  padding-right: 1.5vw;

  padding-bottom: 0.2vw;
margin-left: auto;
margin-right: 0;
margin-top: 1.1vw;
background-color: white;
border-radius: 15px;
font-size: 2.5vw;
font-weight: bold;
font-family: "Zen Kaku Gothic New", sans-serif;
display: inline-block;
float: right;
line-height:3vw;
}

.resa1 a{color: black;
text-decoration: none;

text-align: right;
}

.wrapper{width: 100%;
overflow: clip;
}

body{width: 100%;
}

html, body {
    width: 100%;
    overflow-x: clip;
  }

  html {
    scroll-behavior: smooth;
  }

  #menu{display: none;
  z-index: 2;}

  #menuBtn{display: none;}


.white{font-size: 20px;}

  @media screen and (max-width: 768px) {

#menu{display: block;}
#menuBtn{display: block;}

.logo{width: 80vw;}



.subr{font-size: 16px;
background-color: white;
color: black;}


.slideshow {
	animation: loop-slide 60s infinite linear  both;
  }

  .vin{width: 50vw;}

  .yonkan{font-size: 15px;
bottom:7vw;
left: 7vw;
}

.sns{top: 15%;}

.sns1{width: 6vw;}

.sns1_1{margin-bottom: 5vw;}

.con1{font-size: 25px;
    letter-spacing: 2px;
line-height: 40px;
}


.fs .content{width: 450vw;}

.s3_1{width: 60vw;}

.s3cen{width: 90vw;}

.s3_2{width: 60vw;
margin: auto;
margin-top: -2vw;
}

.heikou2{margin-top: 4vw;}

.heikou{width: 115%;}






.s3_7{font-size: 14px;
line-height: 28px;
margin-top: 10vw;}

.maru{width: 26.5vw;}

.maru2{top:11.5vw;}
.maru6{top: 11.5vw;}

.maru3{top: 38.2vw;}
.maru5{top: 38.2vw;}




.sc4_2{width: 90vw;}

.s3_3, .s3_4, .s3_5, .s3_6{width: 50vw;}

.sc4_2{flex-direction: column;}

.sc4_5{font-size: 18px;
margin-bottom: 7vw;}

.sc4_6{font-size: 15px;
line-height: 28px;
text-align: center;
}

.sc4_3{width: 100%;}

.sc4_4{font-size: 6vw;
line-height: 8vw;
padding-left: 3vw;
padding-right: 3vw;}

.sc4_7{justify-content: center;
margin-top: 5vw;}

.sc5_1{width: 30vw;
padding-top: 10vw;}

.sc5_2{width: 75%;
margin-top: 8vw;}

.oshi{width: 85vw;
}

.oshitai{font-size: 18px;}

.title{font-size: 14px;}

.title-date{padding-bottom: 25px;}

.date{font-size: 12px;}

.body{font-size: 13px;
padding-bottom: 20px;}

#viewMoreBtn{font-size: 13px;}

.resa1{width: 30vw;
margin-top: 4vw;}


.foot{flex-direction: column;}

.sc4_6x{font-size: 17px;
line-height: 34px;}

.ss2{bottom:-200vh!important;}

.sc4_5x{font-size: 13px;}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: clip; /* 横スクロールを完全に止める */
  }


  .way{font-size: 12px;
line-height: 15px;
margin-top: 10vw;
}

.gmm{font-size: 16px;
margin-left: 0;
padding: 3vw;
padding-top: 2vw;
padding-bottom: 2vw;
}

.shin{width: 85vw!important;}

.yaji{width: 4vw;
margin-left: 15px;}

.way1{width: 100%;}

.way2{margin-top: 0;
margin-left: 0;}


.resa1{font-size: 20px;}
.gm{margin-top: 5vw;
margin-left: 0;}

.sc4_7x{width: 100%;
flex-direction: column;}

.snsy1 .gmm{font-size: 15px!important;}

.snsy1 .yaji{width: 5vw;}

.snsy1 .gmm{width: 30vw;
padding-left: 0;
padding-bottom: 0;
}

.snsy{margin-top: 7vw;}

.snsy1{margin-bottom: 5vw;}

.sonota{font-size: 14px;
line-height: 30px;
}

.sc4_1x{padding-bottom: 20vw;}

.foot2{flex-direction: column;}


.resa{width: 30vw;
margin-top: 15vw;
}

#pc{display:none;}

.rms5{width: 15vw;}

.rms4{width: 12vw;
margin-right: 5vw;}

.map{width: 100%;
margin-top: 15%;}

.content{font-size: 30px;
width: 340px;
line-height: 12vw;
text-shadow: 1px 1px 1px #5d5d5d;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip;
}

.resa1{font-size: 6vw;
line-height: 8vw;}

.resa1 a{text-align: center;}

.guru{top: 3vw;}


.menu-button{
  width:44px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  position: absolute;
  right: 3vw;
  top: 2vw;
  z-index: 100;
}

.menu-lines{
  position:relative;
  width:28px;
  height:18px;
}

.menu-lines span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:white;
  border-radius:2px;
  transition:transform 0.4s ease, top 0.4s ease, opacity 0.3s ease;
}
.white{font-size: 18px;}

.menu-lines span:nth-child(1){top:0}
.menu-lines span:nth-child(2){top:8px}
.menu-lines span:nth-child(3){top:16px}

/* 開くアニメーション後にバツマークに */
.menu-button.open .menu-lines span:nth-child(1){
  top:8px;
  transform:rotate(45deg);
   background:#111827;
}
.menu-button.open .menu-lines span:nth-child(2){
  opacity:0;
}
.menu-button.open .menu-lines span:nth-child(3){
  top:8px;
  background:#111827;
  transform:rotate(-45deg);
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s;
}

.overlay.open{opacity:1;pointer-events:auto}

nav{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: bold;
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:80vw;
  max-width:320px;
  background:#fff;
  transform:translateX(100%);
  transition:transform 0.3s ease;
  display:flex;
  flex-direction:column;
  padding:28px 18px;
  gap:18px;
}

nav.open{transform:translateX(0)}

nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

nav a{
  text-decoration:none;
  color:#111827;
  font-size:18px;
 
  border-radius:8px;
  transition: 0.2s;
}

nav a:hover{background:rgba(0,0,0,0.05)}

main{padding:24px}

button{
  cursor:pointer;
  background:transparent;
  border:none;
}

.gm{width: 60%;}

.lang-wrap{margin-right: 10vw!important;}

.lang-btn{padding: 3px 12px!important;}

.slideshow{margin-top: -3vw;}


.video2{height: 130vh!important;}

.contact{font-size: 18px;
width: 70vw;
height: 40px;}

.sc4_7{text-align: center;}

.con1 .en{font-size: 35px;}
  }