@charset "utf-8";

body img {
  width: 100%;
}

/* 共通パーツに影響しないようにmain内に設定 */

#main {
  overflow: hidden
}

#main section{
  width: 100%;
}

#main section.-blue{
  background-color: var(--blue03);
}

/*

SP

*/

#main .content-inner{
  width: calc(328 / var(--design-sp)  * 100vw);
  margin: 0 auto;
}

#main p {
	font-size: calc(14 / var(--design-sp)  * 100vw);
	line-height: calc(24 / var(--design-sp)  * 100vw);
  letter-spacing: calc((0 / 1000) * 1em);
  font-weight: 400;
}

#main .section-title{
  font-family: var(--fontFamilyOutfit);
  font-size: calc(50 / var(--design-sp)  * 100vw);
  line-height: calc(63 / var(--design-sp)  * 100vw);
  letter-spacing: calc((50 / 1000) * -1em);
  font-weight: 400;
}

#main .section-title.-white{
  color: var(--white01);
  text-align: center;
}

#main .section-subtitle{
  font-size: calc(24 / var(--design-sp)  * 100vw);
  line-height: calc(63 / var(--design-sp)  * 100vw);
  letter-spacing: calc((30 / 1000) * -1em);
  font-weight: 700;
}

#main .section-title-small{
  font-family: var(--fontFamilyOutfit);
  font-size: calc(40 / var(--design-sp)  * 100vw);
  line-height: calc(50 / var(--design-sp)  * 100vw);
  letter-spacing: calc((50 / 1000) * -1em);
  font-weight: 400;
  color: var(--white01);
}

#main .section-subtitle-small{
  font-size: calc(18 / var(--design-sp)  * 100vw);
  line-height: calc(31 / var(--design-sp)  * 100vw);
  letter-spacing: calc((30 / 1000) * -1em);
  font-weight: 700;
  color: var(--white01);
}

#main .movie-img{
  width: 100%;
}

#main .movie-img.-vertical{
  width: calc(197.66 / var(--design-sp)  * 100vw);
  height: calc(351.54 / var(--design-sp)  * 100vw);
}

#main .viewmore{
  cursor: pointer;
  display: block;
  position: relative;
  text-align: center;
  font-family: var(--fontFamilyPoppins);
  font-size: calc(16 / var(--design-sp)  * 100vw);
  line-height: calc(31 / var(--design-sp)  * 100vw);
  letter-spacing: calc((70 / 1000) * -1em);
  font-weight: 500;
  width: calc(133 / var(--design-sp)  * 100vw);
  height: calc(31 / var(--design-sp)  * 100vw);
  border-radius: calc(16 / var(--design-sp)  * 100vw);
  /* padding: calc(0 / var(--design-sp)  * 100vw) calc(28.4 / var(--design-sp)  * 100vw) calc(0 / var(--design-sp)  * 100vw) calc(14.6 / var(--design-sp)  * 100vw); */
}

#main .viewmore div{
  width: 100%;
  height: 100%;
}

#main .viewmore .viewmore-inner{
  position: absolute;
  width: calc(31 / var(--design-sp)  * 100vw);
  height: calc(31 / var(--design-sp)  * 100vw);
  top: 0;
  right: 0;
  overflow: hidden;
}

#main .viewmore.-big{
  font-family: var(--fontFamilyNotoSansJapanese);
  width: calc(304 / var(--design-sp)  * 100vw);
  height: calc(43 / var(--design-sp)  * 100vw);
  border-radius: calc(22 / var(--design-sp)  * 100vw);
  line-height: calc(43 / var(--design-sp)  * 100vw);
}

#main .viewmore.-big .viewmore-inner{
  width: calc(43 / var(--design-sp)  * 100vw);
  height: calc(43 / var(--design-sp)  * 100vw);
}

#main .viewmore.-black{
  background-color: var(--black01);
  color: var(--white01);
}

#main .viewmore.-black .viewmore-inner:after{
  content: '';
  display: inline-block;
  position: absolute;
  background-image: url('../../img/2509/common/arrow-white.svg');
  background-repeat: no-repeat;
  background-size: cover;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: calc(5.47 / var(--design-sp)  * 100vw);
  height: calc(10.93 / var(--design-sp)  * 100vw);
}

#main .viewmore.-white{
  background-color: var(--white01);
  color: var(--black01);
}

#main .viewmore.-white .viewmore-inner:after{
  content: '';
  display: inline-block;
  position: absolute;
  background-image: url('../../img/2509/common/arrow-black.svg');
  background-repeat: no-repeat;
  background-size: contain;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: calc(5.47 / var(--design-sp)  * 100vw);
  height: calc(10.93 / var(--design-sp)  * 100vw);
}

/* タブ全体を囲むコンテナの設定 */
#main .tab-switch {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  justify-content: center;
}

/* 各タブボタンの設定 */
#main .tab-switch > label {
  flex: 1 1 auto; /* タブボタンが均等に幅をとるが、幅を超えると折り返す */
  order: -1; /* タブボタンを上部に配置 */
  position: relative; /* 子要素の絶対位置指定の基準 */
  text-align: center; /* 文字を中央揃え */
  cursor: pointer; /* カーソルをポインターに変更 */
  transition:.3s all;/*変化を滑らかに*/
  margin-bottom: 0;
}

/* タブコンテンツのスタイル */
#main .tab-switch > div {
  width: 100%; /* コンテンツの幅を全体に設定 */
}

#main .tab-pannel{
  display: none;
}

#main .tab-pannel.is-active{
  display: block;
}

#main .tab-pannel-rotation{
  position: absolute;
  top: 0;
  z-index: 0;
  visibility: hidden;
}

#main .tab-pannel-rotation.is-active{
  position: relative;
  z-index: 1;
  visibility: visible;
}

#main .to-special{
  display: block;
}

#main .movie-thumb{
  position: relative;
  cursor: pointer;
}

#main .movie-thumb span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(82 / var(--design-sp)  * 100vw);
}

#main .movie-thumb span.is-small{
  width: calc(50.75 / var(--design-sp)  * 100vw);
}

#main .movie-thumb span img{
  width: 100%;
}

/*

共通部分PC

*/
@media screen and (min-width:751px) {

  #main .content-inner{
    width: calc(1088 / var(--design-pc)  * 100vw);
  }

  #main p {
    font-size: calc(16 / var(--design-pc)  * 100vw);
    line-height: calc(25.6 / var(--design-pc)  * 100vw);
    letter-spacing: calc((50 / 1000) * 1em);
  }

  #main .section-title-small{
    font-size: calc(77 / var(--design-pc)  * 100vw);
    line-height: calc(97 / var(--design-pc)  * 100vw);
    letter-spacing: calc((50 / 1000) * -1em);
  }

  #main .section-title{
    font-size: calc(77 / var(--design-pc)  * 100vw);
    line-height: calc(97 / var(--design-pc)  * 100vw);
    letter-spacing: calc((50 / 1000) * -1em);
  }

  #main .section-subtitle{
    font-size: calc(30 / var(--design-pc)  * 100vw);
    line-height: calc(63 / var(--design-pc)  * 100vw);
  }

  #main .section-title-small{
    font-size: calc(54 / var(--design-pc)  * 100vw);
    line-height: calc(68 / var(--design-pc)  * 100vw);
  }

  #main .section-subtitle-small{
    font-size: calc(24 / var(--design-pc)  * 100vw);
    line-height: calc(46 / var(--design-pc)  * 100vw);
  }

  #main .movie-img {
    width: calc(380 / var(--design-pc) * 100vw);
  }

  #main .movie-img.-vertical{
    width: calc(260 / var(--design-pc)  * 100vw);
    height: calc(146.19 / var(--design-pc)  * 100vw);
  }

  #main .viewmore{
    font-size: calc(18 / var(--design-pc)  * 100vw);
    line-height: calc(31 / var(--design-pc)  * 100vw);
    width: calc(150 / var(--design-pc)  * 100vw);
    height: calc(31 / var(--design-pc)  * 100vw);
    border-radius: calc(16 / var(--design-pc)  * 100vw);
    padding: calc(0 / var(--design-pc)  * 100vw) calc(18 / var(--design-pc)  * 100vw) calc(0 / var(--design-pc)  * 100vw) calc(10 / var(--design-pc)  * 100vw);
  }
  #main .viewmore .viewmore-inner{
    width: calc(31 / var(--design-pc)  * 100vw);
    height: calc(31 / var(--design-pc)  * 100vw);
  }

  #main .viewmore.-big{
    width: calc(166 / var(--design-pc)  * 100vw);
    height: calc(39 / var(--design-pc)  * 100vw);
    border-radius: calc(20 / var(--design-pc)  * 100vw);
    font-size: calc(16 / var(--design-pc)  * 100vw);
    line-height: calc(39 / var(--design-pc)  * 100vw);
  }

  #main .viewmore.-big .viewmore-inner{
    width: calc(39 / var(--design-pc)  * 100vw);
    height: calc(39 / var(--design-pc)  * 100vw);
  }

  #main .viewmore.-black .viewmore-inner:after{
    width: calc(6.47 / var(--design-pc)  * 100vw);
    height: calc(10.93 / var(--design-pc)  * 100vw);
  }

  #main .viewmore.-white .viewmore-inner:after{
    width: calc(5.47 / var(--design-pc)  * 100vw);
    height: calc(10.93 / var(--design-pc)  * 100vw);
  }

  #main .viewmore:hover .viewmore-inner:after{
    animation: arrow-anim 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes arrow-anim {
    0% {
        left: 0%;
    }
    50% {
        left: 150%;
    }
    51% {
        left: -50%;
    }
    100% {
        left: 0%;
    }
  }

  #main .viewmore.-big:after{
    margin-top: calc(16 / var(--design-pc)  * 100vw);
    margin-right: calc(16 / var(--design-pc)  * 100vw);
  }

  #main .movie-thumb span{
    width: 26%;
  }

  #main .movie-thumb span.is-small{
    width: 26%;
  }
}