/*
          以下の3種類にCSSスタイルを指定できる。
          ・body, p, h1, h2 などタグ自体に指定できるもの。
          ・#about, #works など任意の文言に#をつけたもの。idと呼ばれる。
          ・.about, .works など任意の文言に.をつけたもの。classと呼ばれる。
        */

    /*
        以下はあまり気にせずそのままいつもコピペしてください。
        */

        
    body,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    a {
      margin: 0;
      padding: 0;
    }

    

    ul {
      list-style-type: none;
    }

    /*ページ内をスムーズにスクロールする*/
    html {
      scroll-behavior: smooth;
    }

    h3 {
      scroll-margin-top: 3vw;
    }

    /*メニューやメールのリンクを貼るさいの指定*/
    a {
      text-decoration: none;
      color: #000000;
      /*色指定*/
    }

    /*メニューやに触ったさいの指定*/
    a:hover {
      color: #febe00;
      /*色指定*/
    }

    /*フォントの指定　自分の好きなフォントをgoogle web fontから選びましょう*/
    .webfont {
      /* Google Webフォントのclass作成 */
      font-family: "Barlow Condensed", sans-serif;
      /*フォントの種類*/
      font-weight: 100;
      /*文字の太さ*/
      font-style: normal;
      /*フォントのスタイル。bold太字、italic斜体などがあります*/
      /* Google Webフォントのclass作成完了*/
    }

    /* vw はブラウザの横幅に対する割合 1vw は横幅に対して10% */

    /*PC版*/
    @media (min-width: 769px) {
      /* 横幅が320px以下の場合に適用するスタイル */

      .fugaz-one-regular {
        font-family: "Fugaz One", sans-serif;
        font-weight: 400;
        font-style: normal;
      }
  
      h1 {
        color: #000000;
        font-size: 1.5vw;
      }
  
      h2 {
        color: #000000;
        font-size: 1.1vw;
        margin-left: 3.7vw;
      }
      h3{
        color: #ffe600;
        font-size: 8vw;
      }
      h4{
        color: #000000;
        font-size: 4vw;
      }
      h5{
        font-size: 2.5vw;
      }



  
      .sakamotodays {
        position: fixed;
        margin-top: 4vw;
        margin-left: 2.5vw;
        width: 14vw;
        height: 2.5vw;
        border: 0.15vw solid rgb(0, 0, 0);
        z-index: 10;
      }
  
      .text1 {
        position: fixed;
        top: 0;
        left: 0;
        margin-left: 3.5vw;
        margin-top: 3.4vw;
        z-index: 10;
      }
  
      .text2 {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        margin-top: 6vw;
      }
  
      .text3 {
        position: fixed;
        left: 0;
        top: 0;
        transform: rotate(270deg);
        z-index: 10; 
        top: 50%;
        margin-left: -2vw;
      }
  
      .text4 {
        position: fixed;
        transform: rotate(90deg);
        top: 0;
        right: 0;
        top: 50%;
        z-index: 10; 
        margin-right: -2vw ;
      }


  

      .menu-btn {
        position: fixed;
        width: 12vw;
        height: 3vw;
        border-radius: 30px;
        border: 0.15vw solid #000000;
        box-sizing: border-box;
        top: 3vw;
        margin-right: 3vw;
        right: 0vw;
        z-index: 30;
      }



   /* 変化前 */
   .menu-btn {
    transition: all .3s;
    }
    
    /* 変化後 */
    .menu-btn:hover {
    width: 12vw;
    height: 16vw;
    border-radius: 19px;
    background-color: #ffffffd8;
    }
    
    
      .globalMenu {
        position: fixed;
        justify-items: center;
        z-index: 10;
        top: 0;
        margin-top: 4.5vw;
        opacity:		0;	/* マスクを表示する */
        transition: all .3s;
        z-index: 40;
      }  
    
    /* 変化後 */
    .globalMenu:hover {
    color: #000000;
    }
    .globalMenu:hover::after {
    background: #ffc400; 
    }
    

/* 変化後 */
.menu-btn:hover .globalMenu{
  width: 12vw;
 opacity:		1;	/* マスクを表示する */
 padding-top:		2vw;	/* ホバーで下にずらす */  
  }

      ul {
        list-style: none;
      }
  
  
      .menu-btn span {
        margin-top: 1.3vw;
        margin-left: 5vw;
      }
  
  
      .menu-btn span,
      .menu-btn span:before,
      .menu-btn span:after {
        content: '';
        display: block;
        height: 0.15vw;
        width: 2vw;
        border-radius: 3px;
        background-color: #000000;
        position: absolute;
  
      }


      .menu-btn span:before {
          bottom: 0.5vw;
      }
      .menu-btn span:after {
          top: 0.5vw;
      }


  
      #menu-btn-check {
        display: none;
      }
  

      .top_kv {
        margin-top: -1vw;
        position: relative;
      }
  
      .top_kv img {
        position: absolute;
        width: 45%;
        margin-top: 4vw;
        margin-left: 28vw;
        z-index: 1;
        opacity: 0;
        animation: change-img-anim 10s infinite;
      }
  
  
  
      .kv:nth-of-type(1) {
        animation-delay: 0s;
      }
  
      .kv:nth-of-type(2) {
        animation-delay: 5s;
      }
  
  
      @keyframes change-img-anim {
  
        0% {
          transform: rotateZ(30deg);
          opacity: 0;
        }
  
        1% {
          transform: rotateZ(-10deg);
          opacity: 1;
        }
  
        2% {
          transform: rotateZ(1deg);
          opacity: 1;
        }
  
        4% {
          transform: rotateZ(0deg);
          opacity: 1;
        }
  
        49% {
          transform: rotateZ(0deg);
          opacity: 1;
        }
  
        50% {
          transform: rotateZ(-5deg);
          opacity: 1;
        }
  
        51% {
          opacity: 0;
        }
      }
  
      .top_back img {
        width: 62%;
        top: 0;
        top: 50%;
        transform:  translateY(47%) ;
        margin-left: 18vw;
        z-index: 0;
      }
  
  
  
      .top_kvtext {
        position: relative;
        z-index:3;
      }
  
      .top_kvtext img {
        position: absolute;
        width: 60%;
        top: 0;
        top: 50%;
        transform: translateY(-47%) translateX(30%);
        z-index: 1;
      }

      .top_kvtext picture{
        opacity: 0;
        animation: change-text-anim 10s infinite;
      }
  
      .top_kvtext picture:nth-of-type(1) {
        animation-delay: 0s;
      }
  
      .top_kvtext picture:nth-of-type(2) {
        animation-delay: 5s;
      }
  
      @keyframes change-text-anim {
  
        0% {
          opacity: 1;
        }
  
        50% {
          opacity: 1;
        }
  
        50.1% {
          opacity: 0;
        }
      }

.kyomu{
  margin-top: -1vw;
  color: #ffffff00;
}

.about_text{
  margin-top:-1vw;
  margin-left: 15vw;
  position: absolute;
  top: 20%;
}
      .about_text1{
        margin-left: 4vw;
    }
    .about_text2{
        margin-top: -7.5vw;
        margin-left:9.3vw;
    }


    
    .about_kv{
        position: relative;
        text-align: right;
    margin-left: 38vw;
    margin-top: -40vw;
    }
    
    .about_kv1{
      width: 100%;
        position: absolute;
          margin-left: -20vw;
          margin-top: 0%;
          transform: rotate(8deg);
          z-index: 3;
          animation: anim1 0.8s;
    }

    .about_kv1 img{
      width: 80%;
  }
    
    .about_kv2{
        position: absolute;
        width: 100%;
        margin-left: -12vw;
        margin-top: 3%;
          transform: rotate(-5deg);
          z-index: 2;
          animation: anim2 1s;

    }
    
    .about_kv2 img{
      width: 80%;
  }
    .about_kv3{
      width: 100%;
      top: 0;
      margin-top: 3%;
        margin-left: 3vw;
        transform: rotate(3deg);
        z-index: 3;
        animation: anim3 1.3s;
    }

    .about_kv3 img{
      width: 80%;
  }

    @keyframes anim1 {
      0% {
      transform: translateX(400px) rotate(5deg);
      }
    
      100% {
      transform: translateX(0px);
      transform: rotate(8deg);
      }
    }

    
    @keyframes anim2 {
      0% {
      transform: translateX(500px) rotate(-2deg);
      }
    
      100% {
      transform: translateX(0px) rotate(-5deg);
      }
    }

    
    @keyframes anim3 {
      0% {
      transform: translateX(700px) rotate(5deg);
      }
    
      100% {
      transform: translateX(0px)  rotate(3deg);
      }
    }





.character_text{
padding-left: 53vw;
margin-top: 6vw;
z-index: 10;
position: relative;
}

.character_text1{
  margin-top: 4vw;
  margin-left: 1vw;
}

.character_text2{
  margin-top: -7.7vw;
  margin-left: 6.3vw;
}


li {
  list-style: none;
}
/* ↓ スライドの外枠 */
.slide-wrapper {
  width: 90%;
  position: relative;
  overflow: hidden; /* はみ出したスライドを隠す */
  margin-left: -54vw;
  margin-top: -12vw;
  z-index: 2;
  position: absolute;
}
/*  ↓ スライド（コンテンツ） */
.slide { /*スライド全体 */
  width: 400%;
  height: 100%;
  display: flex;
  transition: all 0.3s;
}

.slide img{
  margin-top: 6vw;
  width: 90%;
  margin-left: 0vw;
}
.slide div { /* スライド */
  width: 25%;
  height: 100%;
  font-size: 16px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.slide1 { /* スライドさせるために必要なクラス */
  transform: translateX(0);
}

.slide2 { /* スライドさせるために必要なクラス */
  transform: translateX(-25%);
}


.slide3 { /* スライドさせるために必要なクラス */
  transform: translateX(-50%);
}


.slide4 { /* スライドさせるために必要なクラス */
  transform: translateX(-75%);
}


/* ↓ 左右のボタン */
.next {
  position: absolute;
  width: 25px;
  height: 25px;
  right: 10px;
  bottom: 50%;
  z-index: 5;
  cursor: pointer;
  border-top: solid 4px #000;
  border-right: solid 4px #000;
  -webkit-transform: rotate(45deg) translateY(50%);
  transform: rotate(45deg) translateY(50%);
  margin-right: 3vw;
}
.prev {
  position: absolute;
  width: 25px;
  height: 25px;
  left: 25px;
  bottom: 50%;
  z-index: 5;
  cursor: pointer;
  border-top: solid 4px #000;
  border-right: solid 4px #000;
  -webkit-transform: rotate(-135deg) translateY(-50%);
  transform: rotate(-135deg) translateY(-50%);
}






/* ↓ インジケーター */
.indicator {
  width: 100%;
  position: absolute;
  bottom: 20px;
  display: flex;
  column-gap: 18px;
  z-index: 10;
  justify-content: center;
  align-items: center;
}
.indicator li {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  list-style: none;
  background-color: #fff;
  border: 4px #000000 solid;
  cursor: pointer;
}
.indicator li:first-of-type {
  background-color: #000000;
}






.content_text{
  margin-top: 7vw;
  text-align: center;
} 
.content_text1{
  margin-right: 13.5vw;
}
.content_text2{
  margin-top: -7.5vw;
  margin-left: 8vw;
}

.slideShow {
  position: relative;
  width: 70vw;
  height: 20vw;
  margin-left: 15vw;
}

.slides {
  list-style-type: none;
  margin: 0;
  padding: 0;
}


.contents_slide img{
  width: 8%;
  height: 8%;
}

.content_link{
  margin-top: 0vw;
   color: #000000;
}

.content_GO {
  text-decoration: none;
  font-size: 1.6vw;
  display: inline-block;
  position: relative;
  overflow: hidden;
}



.content_GO:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ffc400;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  content: "";
}

.content_GO:hover::after{
  transform: scale(1,1);
}



.contents_youtube{
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.content_buttons{
  margin-top: 2vw;
  Border:none;
  display:block;
  border:0;
  outline: none;
text-align: center;
}


.prevButton{
  display:flex;
  background-color: #ffffff00;
  border: #ffffff00;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
}


.nextButton{
  display:flex;
  background-color: #ffffff00;
  border: #ffffff00;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
}


.prevButton{
  color: #000000;
}

 .prevButton :hover{
  color: #ffc400; 
}


.nextButton{
  color: #000000;
}

 .nextButton :hover{
  color: #ffc400; 
}



.offical_text1{
  margin-top: 8vw;
  margin-left: 21vw;
}
.offical_text2{
margin-top: -7.6vw;
margin-left: 26.3vw;
}


.official_kv{
  margin-top: 0vw;
    margin-left: 15vw;
}
.official_kv img{
  width: 70%;

}

.offical_text3{
  margin-top: 3vw;
    line-height:1.5;
  text-align: center;
  }

  .offical_text3{
    color: #000000;
  }

   .offical_text3 :hover{
    color: #ffc400; 
  }
      
 

      .kaiten {
        position: fixed;
        bottom: 0;
        right: 0;
        z-index: 10;   
     margin-bottom: 1vw;
        margin-right: 3vw;
      }
  
      .kaiten img {
        width: 8vw;
        animation: rotation 4s linear infinite;
      }
  
      @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
  
        100% {
          transform: rotate(360deg);
        }
      }
  
      .juudan {
       position: fixed;
        bottom: 0;
        left: 0;
        margin-left: 1vw;
        margin-bottom: 1.5vw;
        z-index: 10; 
      }
  
      .juudan img {
        width: 7vw;
        margin-left: 2vw;
        margin-top: -3vw;
      }
    }





   


















    




















  /*SP版*/
  @media (max-width: 767px) {
    /* 横幅が320px以下の場合に適用するスタイル */

    .fugaz-one-regular {
      font-family: "Fugaz One", sans-serif;
      font-weight: 400;
      font-style: normal;
    }

    h1 {
      color: #000000;
      font-size: 4vw;
    }

    h2 {
      color: #000000;
      font-size: 3.5vw;
      margin-left: 3.7vw;
    }
    h3{
      color: #ffe600;
      font-size: 20vw;
    }
    h4{
      color: #000000;
      font-size: 10vw;
    }
    h5{
      color: #000000;
      font-size: 7vw;
    }


    .sakamotodays {
      position: fixed;
      margin-top: 7vw;
      margin-left: 4.5vw;
      width: 38vw;
      height: 6vw; 
      background-color: #ffffffca;
      border: 0.5vw solid rgb(0, 0, 0);
      z-index: 15;
    }

    .text1 {
      position: fixed;
      top: 0;
      margin-left: 1vw;
      margin-top: 7vw;
      z-index: 10;
    }

    .text2 {
      position: fixed;
      top: 0;
      margin-left: -2.3vw;
      margin-top: 14vw;
      z-index: 10;
    }

    .text3 {
      position: fixed;
      left: 0;
      top: 0;
      top: 50%;
      transform: rotate(270deg) translateY(50%);
      z-index: 10; 
      margin-left: -8vw;
    }

    .text4 {
      position: fixed;
      top: 0;
      right: 0;
      top: 50%;
      transform: rotate(90deg)translateY(50%);
      margin-right: -16vw;
      z-index: 15; 
    }


    .menu-btn { 
     position: fixed;
      top: 0;
      right: 0;
      width: 30vw;
      height:8vw;
      border-radius: 30px;
      border: 0.5vw solid #000000;
      background-color: #ffffff;
      box-sizing: border-box;
      z-index: 9;
      margin-top: 5.5vw;
      margin-right: 5vw;
      z-index: 30;
    }

 /* 変化後 */
 .menu-btn:hover {
  color: #ffffff00;
  }


 /* 変化前 */
 .menu-btn {
  transition: all .3s;
  }
  
  /* 変化後 */
  .menu-btn:hover {
  width: 30vw;
 height: 50vw;
 border-radius: 19px;
 background-color: #ffffffd8;
  }
  
  
    .globalMenu {
      position: fixed;
      justify-items: center;
      opacity:		0;	/* マスクを表示する */
      transition: all .3s;
      z-index: 40;
      margin-left: 9vw;
      margin-top: 10vw;
    } 
  
  /* 変化後 */
  .globalMenu:hover {
  color: #000000;
  }
  .globalMenu:hover::after {
  background: #ffc400; 
  
  }
  

/* 変化後 */
.menu-btn:hover .globalMenu{
width: 12vw;
 height: 16vw;
  border-radius: 19px;
  opacity:		1;	/* マスクを表示する */
  padding-top:2vw;	/* ホバーで下にずらす */  

}

    ul {
      list-style: none;
    }


    .menu-btn span {
      margin-top: 3.5vw;
      margin-left: 12vw;
    }


    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
      content: '';
      display: block;
      height: 0.3vw;
      width: 5vw;
      border-radius: 3px;
      background-color: #000000;
      position: absolute;
    }


    .menu-btn span:before {
        bottom: 8px;
    }
    .menu-btn span:after {
        top: 8px;
    }


    #menu-btn-check {
      display: none;
    }

    .top_kv {
      position: relative;
    }

    .top_kv img {
      position: absolute;
      width: 100%;
      margin-left: -2vw;
      margin-top: 36vw;
      z-index: 1;
      opacity: 0;
      animation: change-img-anim 10s infinite;
    }



    .kv:nth-of-type(1) {
      animation-delay: 0s;
    }

    .kv:nth-of-type(2) {
      animation-delay: 5s;
    }


    @keyframes change-img-anim {

      0% {
        transform: rotateZ(30deg);
        opacity: 0;
      }

      1% {
        transform: rotateZ(-10deg);
        opacity: 1;
      }

      2% {
        transform: rotateZ(1deg);
        opacity: 1;
      }

      4% {
        transform: rotateZ(0deg);
        opacity: 1;
      }

      49% {
        transform: rotateZ(0deg);
        opacity: 1;
      }

      50% {
        transform: rotateZ(-5deg);
        opacity: 1;
      }

      51% {
        opacity: 0;
      }
    }

    .top_back img {
      position: relative;
      width: 67%;
      top: 0;
      top: 50%;
      transform: translateY(26%);
      margin-left: 18vw;
      z-index: 0;
    }


    .top_kvtext {
      position: relative;
      z-index:3;
    }

    .top_kvtext img {
      position: absolute;
      width: 85%;
      top: 0;
      top: 50%;
      transform: translateY(-71%) translateX(5%);
      z-index: 1;
    }

    .top_kvtext picture{
      opacity: 0;
      animation: change-text-anim 10s infinite;
    }

    .top_kvtext picture:nth-of-type(1) {
      animation-delay: 0s;
    }

    .top_kvtext picture:nth-of-type(2) {
      animation-delay: 5s;
    }

    @keyframes change-text-anim {

      0% {
        opacity: 1;
      }

      50% {
        opacity: 1;
      }

      50.1% {
        opacity: 0;
      }
    }

.kyomu{
margin-top: -1vw;
color: #ffffff00;
}
.kyomu2{
  margin-top: -50vw;
}

.about_text{
  top: 0;
top: 37%;
margin-left: 18vw;
position: absolute;
}
    .about_text1{
      position: absolute;
      z-index: 5;
      margin-top: -29vw;
      margin-left: 2vw;
  }
  .about_text2{
    position: absolute;
    z-index: 5;
      margin-top: -18.8vw;
      margin-left:14.8vw;
  }

  .about_text3{
    position: absolute;
    margin-top: -3vw;
    z-index: 10;
  }

  
  .about_kv{
    top: 0;
    margin-top: -80vw;
  width: 100%;
  height: 730px;
overflow: hidden; /* はみ出したスライドを隠す */
  }
  


  .about_kv1{
      margin-top: 15vw;
        margin-left: 10vw;
  padding-left: 20vw;
        transform: rotate(-10deg);
        z-index: 2;
        animation: anim1 0.8s;
          position: relative;
  }

  .about_kv1::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: linear-gradient(90deg, #ffffff, transparent);
}

 .about_kv1 img{
    width: 145%; 
  }



  .about_kv2{
        margin-top: -50vw;
        margin-right: 5vw;
        transform: rotate(20deg);
        z-index: 3;
        animation: anim2 1s;
        position: relative;
          margin-left: 30vw;
  }


  .about_kv2::before {
    content: "";
    position: absolute;
    width: 150%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #ffffff, transparent);
} 
.about_kv2 img{
  width: 155%;
}
  
  .about_kv3{
    margin-top: -40vw;
    padding-left: 25vw;
      transform: rotate(-25deg);
      z-index: 0;
      animation: anim3 1.3s;
      position: relative;
  }

  .about_kv3 img{
    width: 130%;
  }
  .about_kv3::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #ffffff, transparent);
}


  @keyframes anim1 {
    0% {
    transform: translateX(200px)translateY(-200px)  rotate(-15deg);
    }
  
    100% {
    transform: translateX(0px)rotate(-10deg);

    }
  }

  
  @keyframes anim2 {
    0% {
    transform: translateX(500px) translateY(-200px) rotate(15deg);
    }
  
    100% {
      transform: translateX(0px)rotate(20deg);
    }
  }

  
  @keyframes anim3 {
    0% {
    transform: translateX(700px)translateY(-200px)  rotate(-20deg);
    }
  
    100% {
    transform: translateX(0px)  rotate(-25deg);
    }
  }





.character_text{
  top: 0;
padding-left: 23vw;
margin-top: 15vw;
position: relative;
}

.character_text1{
margin-left: 1vw;
position: absolute;
z-index: 5;
}

.character_text2{
margin-top: 10vw;
margin-left: 14.5vw;
position: absolute;
z-index: 5;
}


li {
list-style: none;
}
/* ↓ スライドの外枠 */
.slide-wrapper {
width: 150%;
height: 100%;
position: relative;
overflow: hidden; /* はみ出したスライドを隠す */
margin-left: -34vw;
z-index: 2;
position: relative;

}
/*  ↓ スライド（コンテンツ） */
.slide { /*スライド全体 */
width: 400%;
height: 100%;
display: flex;
transition: all 0.3s;
}

.slide img{
margin-left: 10vw;
width: 77%;
}
.slide div { /* スライド */
width: 100%;
height: 100%;
font-size: 16px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.slide1 { /* スライドさせるために必要なクラス */
transform: translateX(0);
}

.slide2 { /* スライドさせるために必要なクラス */
transform: translateX(-25%);
}


.slide3 { /* スライドさせるために必要なクラス */
transform: translateX(-50%);
}


.slide4 { /* スライドさせるために必要なクラス */
transform: translateX(-75%);
}


/* ↓ 左右のボタン */
.next {
position: absolute;
width: 25px;
height: 25px;
right: 10px;
bottom: 18%;
z-index: 5;
cursor: pointer;
border-top: solid 3px #000;
border-right: solid 3px #000;
-webkit-transform: rotate(45deg) translateY(50%);
transform: rotate(45deg) translateY(50%);
}
.prev {
position: absolute;
width: 25px;
height: 25px;
left: 25px;
bottom: 18%;
z-index: 5;
cursor: pointer;
border-top: solid 3px #000;
border-right: solid 3px #000;
-webkit-transform: rotate(-135deg) translateY(-50%);
transform: rotate(-135deg) translateY(-50%);
}
/* ↓ インジケーター */
.indicator {
width: 100%;
position: absolute;
bottom: 0;
display: flex;
column-gap: 15px;
z-index: 10;
justify-content: center;
}
.indicator li {
width: 10px;
height: 10px;
border-radius: 50%;
list-style: none;
background-color: #fff;
border: 2px #000000 solid;
cursor: pointer;
}
.indicator li:first-of-type {
background-color:  #000000; 
}





.content_text{
margin-top: 48vw;
position: relative;
} 
.content_text1{
  position: absolute;
  z-index: 3;
margin-left: 36vw;
margin-top: -29vw;
}
.content_text2{
  position: absolute;
  z-index: 3;
margin-top: -18.5vw;
right: 0vw;
margin-right: 10vw;
}

.slideShow {
position: relative;
}

.slides {
list-style-type: none;
margin: 0;
padding: 0;
}

.contents_slide{
  position: relative;
  margin-top: -10vw;
  
}
.contents_comic{ 
   width: 100%;
  aspect-ratio: 9.6 / 8;
    overflow: hidden;
margin-left: -30vw;
  margin-top: 1vw;
  z-index: 0;
}

.contents_comic::before {
  content: "";
  position: absolute;
  width: 85%;
  height: 100%;
  margin-left: -10vw;
  top: 0;
  background: linear-gradient(90deg, #ffffff, transparent);
}
.contents_comic img{
width: 16.7%;
}


.content_youtube{
  position: relative;
aspect-ratio: 16 / 9;
margin-top: 3vw;
margin-bottom: 10vw;
text-align: center;
}

.content_youtube iframe {
  margin-top: 3vw;
  width: 60%;
  height: 60%;
}


.content_link{
  margin-top: 2vw;
  margin-left:34vw;
}

.content_GO {
  text-decoration: none;
  font-size: 1.6vw;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.content_GO:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ffc400;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  content: "";
}

.content_GO:hover::after{
  transform: scale(1,1);
}



.content_buttons{
  position: fixed;
  bottom: 0;
  right: 0;
margin-bottom: 20%;
margin-right: 10%;
Border:none;
display:block;
border:0;
color: #000000;
}

.nextButton{
  display:flex;
  background-color: #ffffff00;
  border: #ffffff00;
}


.prevButton{
   
  background-color: #ffffff00;
  border: #ffffff00;
}


.prevButton{
  color: #000000;
}

 .prevButton :hover{
  color: #ffc400; 
}


.nextButton{
  color: #000000;
}

 .nextButton :hover{
  color: #ffc400; 
}



.offical_text1{
margin-top: 20vw;
margin-left: 25vw;
}
.offical_text2{
margin-top: -19vw;
margin-left: 38.5vw;
}


.official_kv{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
text-align: center;
}

.official_kv img{
width: 60%;
}

.offical_text3{
  position: absolute;
  line-height:1.8;
  margin-top: 3vw;
  top:76%;
  transform: translateY(-50%) translateX(25%);
text-align: center;
}


.offical_text3{
  color: #000000;
}

 .offical_text3 :hover{
  color: #ffc400; 
}
    



    .kaiten {
      position: fixed;
      bottom: 0;
      right: 0;
   margin-bottom: 5vw;
      margin-right: 3vw;   
      z-index: 15;       
    }

    .kaiten img {
      width: 15vw;
      z-index: 10;
      animation: rotation 4s linear infinite;
    }

    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .juudan {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 15; 
      margin-left: 5vw;
      margin-bottom: 8vw;
    }

    .juudan img {
      width: 15vw;
    }
  }