/* =========================================================
  Base
========================================================= */
:root{
  --bg: #E8E8DB;
  --txt: #000;
  --white: #fff;
  --muted: rgba(0,0,0,.55);
  --shadow: 0 14px 30px rgba(0,0,0,.18);
}

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

@media (max-width: 960px) {
  html, body { overflow-x: hidden; }
}

html, body { overflow-x: hidden; }


.onemorestep{
  background: var(--bg);
  color: var(--txt);
  font-family: "ヒラギノUD明朝 Std", "Hiragino UD Mincho Std", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
  line-height: 1.8;
}

/* Container */
.container{
  width:90%;
  max-width:1200px;
  margin: 0 auto;
}

@media (max-width: 960px) {
  .container{
    width: calc(100% - 32px);
  }
}

/* Section titles */
.secTitle{
  font-family: "ヒラギノUD明朝 Std", "Hiragino UD Mincho Std", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
  margin: 0;
  text-align: center;
  font-size: 90px;
  color: rgba(0,0,0,.35);
}

@media (max-width: 960px) {
  .secTitle{
    font-size: 50px;
  }
}

.secSub{
  text-align: center;
  font-size: 18px;
  color: #000;
}

@media (max-width: 960px) {
  .secSub{
    font-size: 16px;
  }
}

.secTitle--white{ color: rgba(255,255,255,.85); }
@media (max-width: 960px) { .secTitle--white{ color: rgba(255,255,255,.85); } }

.secSub--white{ color: rgba(255,255,255,.75); }
@media (max-width: 960px) { .secSub--white{ color: rgba(255,255,255,.75); } }

/* Button */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 15px 60px;
  font-size: 23px;
}

@media (max-width: 960px) {
  .btn{
    padding: 15px 10px;
    font-size: 18px;
  }
}

.btn--black{
  background: #000;
  color: #fff;
}

@media (max-width: 960px) {
  .btn--black{
    background: #000;
    color: #fff;
  }
}

.btn--wide{
  width: auto;
}

@media (max-width: 960px) {
  .btn--wide{
    width: 100%;
    font-size:16px;
  }
}

@media (max-width: 960px) {
  .btn-footer{
    padding: 15px 40px !important;
  }
}

/* =========================================================
  HERO
========================================================= */
.onemorestep{
  width: 100%;
  max-width: none;
  margin: 0;
  background: #fff;
}

@media (max-width: 960px) {
  .onemorestep{
    background: #fff;
  }
}

.onemorestep-hero,
.onemorestep-hero * {
  animation: none !important;
  transition: none !important;
}

.onemorestep-hero{
  position: relative;
  height: 92vh;
  overflow: hidden;
}

@media (max-width: 960px) {
  .onemorestep-hero{
   height: auto;
    min-height: 0;
    overflow: visible;
  }
}

.onemorestep-hero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100svh - 150px);
  object-fit: cover;

  /* チラつき対策 */
  transform: translateZ(0) scale(1.02);
  backface-visibility: hidden;
  will-change: transform;
}

@media (max-width: 960px) {
  .onemorestep-hero__bg{
    position: relative;   /* absolute解除 */
    height: 90vh;
    min-height: 90vh;
  }
}


.onemorestep-hero__inner{
  position: relative;
  height: calc(100svh - 150px);
  display: grid;
  grid-template-columns: 0px 1fr 0px;
  align-items: end;
  margin: 0 auto;
  padding-bottom:50px;
}

@media (max-width: 960px) {
  .onemorestep-hero__inner{
    position: absolute;
    inset: 0;
    display: grid;
    align-items: end;
    width:90%;
    height: 90vh;
  }
}

.onemorestep-hero__inner::before{
  content: "";
  display: block;
}

.onemorestep-hero__center{
  text-align: center;
  color: #fff;
}

@media (max-width: 960px) {
  .onemorestep-hero__center{

  }
}

.onemorestep-hero__logo{
  width: 35%;
  min-width:400px;
  height: auto;
  display: block;
  margin: 0 auto
}

@media (max-width: 960px) {
  .onemorestep-hero__logo{
  width: 80%;
  min-width:200px;
  }
}

.onemorestep-hero__kpf{
  font-family: "ヒラギノUD角ゴ StdN";
  font-size: 28px;
  letter-spacing: .08em;
  line-height: 1.6;
  color: #fff;
  margin: 0 auto;
  margin-top:30px;
  margin-bottom:25px;
}

@media (max-width: 960px) {
  .onemorestep-hero__kpf{
    font-size: 20px;
  }
}

.onemorestep-hero__credits{
  font-size: 19px;
  line-height: 1.4;
  color: #fff;
  margin: 0 auto;
}

@media (max-width: 960px) {
  .onemorestep-hero__credits{
    font-size: 14px;
    letter-spacing: -2.5px;
  }
}

.onemorestep-hero__creditSmall{
  color: #fff;
  font-size: 15px;
}

@media (max-width: 960px) {
  .onemorestep-hero__creditSmall{
  font-size: 9.5px;
  }
}

.onemorestep-hero__cast{
  font-size: 15px;
  color: #fff;
  margin: 0 auto;
    margin-top:15px;
  margin-bottom:15px;
}

@media (max-width: 960px) {
  .onemorestep-hero__cast{
  font-size: 9.5px;
  margin-top:10px;
  margin-bottom:10px;
  }
}

.onemorestep-hero__lead{
  margin:auto 0;
  font-size: 20px;
  color: #fff;
}

@media (max-width: 960px) {
  .onemorestep-hero__lead{
    font-size: 12px;
    margin-top: 12px;
    text-align: justify;
  }
}

.onemorestep-hero__buttons{
  position: relative;
  left: 50%;
  bottom: 35px;
  transform: translateX(-50%);
  display: grid;
  grid-auto-flow: column;
  gap: 60px;
  z-index: 10000; 
  width: calc(100% - 32px);
  max-width: 900px;
   margin:auto 0;
   z-index: 20;
}

@media (max-width: 960px) {
  .onemorestep-hero__buttons{
    transform: none;
    left: auto;
    bottom: auto;

    grid-auto-flow: row; 
    gap: 16px;
    max-width: 360px;
    margin: 30px auto 60px; 
    z-index: auto;
  }
}

/* =========================================================
  YouTube embed
========================================================= */
.onemorestep-youtube{
  padding: 80px 0;
  background: #fff;
}

@media (max-width: 960px) {
  .onemorestep-youtube{
  padding:0;
  }
}

.container-youtube {
  width:90%;
  margin:0 auto;
}

.ytEmbed{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

@media (max-width: 960px) {
  .ytEmbed{
    box-shadow: 0 12px 22px rgba(0,0,0,.15);
  }
}

.ytEmbed__iframe {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

@media (max-width: 960px) {
  .ytEmbed__iframe {
    aspect-ratio: 16 / 9;
  }
}

.ytEmbed__iframe iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
  Message
========================================================= */
.onemorestep-message{
  position: relative;
  height: 1600px;
  overflow: hidden;
  margin-top:80px;
}

@media (max-width: 960px) {
  .onemorestep-message{
    height: 800px;
    margin-top:70px;
  }
}

.onemorestep-message__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 960px) {
  .onemorestep-message__bg{

  }
}

.onemorestep-message__inner{
  position: relative;
  display: grid;
  place-items: center;
}

@media (max-width: 960px) {
  .onemorestep-message__inner{
    padding: 0 16px;
  }
}

.onemorestep-message__text{
  margin: 0;
  text-align: center;
  font-size: 30px;
  line-height: 2.2;
  color: #000;
  padding-top:200px;
}

@media (max-width: 960px) {
  .onemorestep-message__text{
    font-size: 15px;
    padding-top:80px;
  }
}

/* =========================================================
  About
========================================================= */
.onemorestep-about{
  padding: 150px 0 150px;
  background:#fff;
}

@media (max-width: 960px) {
  .onemorestep-about{
    padding: 80px 0 80px;
  }
}

.onemorestep-about__grid{
  margin-top: 100px;
  display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 10px;
  align-items: start;
}

@media (max-width: 960px) {
  .onemorestep-about__grid{
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 40px;
  }
}

.onemorestep-about__desc{
  font-size: 23px;
  line-height: 2;
  color: #000;
}

@media (max-width: 960px) {
  .onemorestep-about__desc{
    font-size: 16px;
  }
}

.onemorestep-about__meta{
  margin-top:50px;
}

@media (max-width: 960px) {
  .onemorestep-about__meta{
    margin-top: 30px;
  }
}

.metaBox{
  margin-bottom: 12px;
}

@media (max-width: 960px) {
  .metaBox{
  }
}

.metaBox dt{
  font-family: "ヒラギノUD明朝 Std", "Hiragino UD Mincho Std", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
  font-weight: normal;
  border: 1px solid #000;
  font-size: 23px;
  color:#000;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;  
  padding:0; 
  box-sizing: border-box;
}

@media (max-width: 960px) {
  .metaBox dt{
    font-size: 16px;
    width: 80px; 
  }
}

.metaBox dd{
  font-size: 23px;
  color:#000;
  margin-left: 0 !important;
  margin-top:10px;
  margin-bottom:40px;
  padding: 0;
}
@media (max-width: 960px) {
  .metaBox dd{
    font-size: 16px;
    margin-bottom:30px;
  }
}

.onemorestep-about__photo img{
  width: 100%;
  height: auto;
  display: block;
  box-shadow: var(--shadow);
  margin-top:150px;
}

@media (max-width: 960px) {
  .onemorestep-about__photo img{
    width: 90%;
    margin:0 auto;
     margin-top:0px;
  }
}

/* =========================================================
  Cast
========================================================= */
.onemorestep-cast{
  padding: 150px 0 150px;
  background: #E8E8DB;
}

@media (max-width: 960px) {
  .onemorestep-cast{
    padding: 80px 0 80px;
  }
}

.castGrid{
  margin-top: 100px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 50px 60px;
  align-items: start;
}

@media (max-width: 960px) {
  .castGrid{
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    margin-top: 40px;
  }
}

.castCard{
  grid-column: span 2;
}

@media (max-width: 960px) {
  .castCard{
    grid-column: auto;
  }
}

.castCard--lg{
  grid-column: span 3;
}

@media (max-width: 960px) {
  .castCard--lg{
    grid-column: auto;
  }
}

.castCard__img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

@media (max-width: 960px) {
  .castCard__img{
    aspect-ratio: 4 / 3;
  }
}

.castCard__name{
  font-size: 35px;
  color: #000;
  margin-top:5px;
}

@media (max-width: 960px) {
  .castCard__name{
    font-size: 18px;
  }
}

.castCard__name span{
  color: #000;
  font-size: 18px;
  margin-left:10px;
}

@media (max-width: 960px) {
  .castCard__name span{
    font-size: 14px;
     margin-left:5px;
  }
}

/* =========================================================
  Swiper stills (loop marquee)
========================================================= */
.onemorestep-stills{
  padding: 0;
}

@media (max-width: 960px) {
  .onemorestep-stills{
    padding: 0;
  }
}

.onemorestep-stills .swiper{
  width: 100%;
}

@media (max-width: 960px) {
  .onemorestep-stills .swiper{
    width: 100%;
  }
}

.onemorestep-stills .swiper-slide{
  width: auto;
}

@media (max-width: 960px) {
  .onemorestep-stills .swiper-slide{
    width: auto;
  }
}

.onemorestep-stills img{
  height: 200px;
  width: auto;
  display: block;
  aspect-ratio: 1.8 / 1;
  object-fit: cover;
  padding:0;
}

@media (max-width: 960px) {
  .onemorestep-stills img{
    height: 150px;
  }
}

.js-stillsSwiper .swiper-wrapper{
  transition-timing-function: linear !important;
}
@media (max-width: 960px) {
  .js-stillsSwiper .swiper-wrapper{
    transition-timing-function: linear !important;
  }
}

.js-stillsSwiper .swiper-slide img{
  display: block;

}
@media (max-width: 960px) {
  .js-stillsSwiper .swiper-slide img{
    display: block;

  }
}

/* =========================================================
  Characters
========================================================= */
.onemorestep-characters{
  padding: 150px 0 150px;
  background: #E8E8DB;
}

@media (max-width: 960px) {
  .onemorestep-characters{
    padding: 80px 0 80px;
  }
}

.onemorestep-characters__wrap-0{
  position: relative;
}

.onemorestep-characters__wrap{
  position: relative;
  margin: 0 auto;
  margin-top:100px;
  padding-bottom: 30px;
  background: #ffffff7c;
}

@media (max-width: 960px) {
  .onemorestep-characters__wrap{
      margin-top:40px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    height: 600px; 
  }
}

.onemorestep-characters__chart{
  display: block;
  padding:50px;
  margin:0 auto;
}

@media (max-width: 960px) {
  .onemorestep-characters__chart{
    height: 100%;
    width: auto;
    max-width: none;
    padding:20px;
  }
}

.onemorestep-characters__sax{
  position: absolute;
  right: -200px;
  bottom: -360px;
  width: 400px;
  height: auto;
  pointer-events: none;
}

@media (max-width: 960px) {
  .onemorestep-characters__sax{
    width: 160px;
    right: -50px;
    bottom: -160px;
  }
}

/* =========================================================
  Director
========================================================= */
.onemorestep-director{
  padding: 150px 0 150px;
  background: #fff;
}

@media (max-width: 960px) {
  .onemorestep-director{
    padding: 80px 0 80px;
  }
}

.directorGrid{
  margin:0 auto;
  margin-top: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:100px;
  width:90%;
  max-width: 900px;
}

@media (max-width: 960px) {
  .directorGrid{
    grid-template-columns: 1fr;
    margin-top: 40px;
    gap:50px;
  }
}

.directorCard{
  text-align: center;
}

@media (max-width: 960px) {
  .directorCard{
    text-align: center;
  }
}

.directorCard__role{
  margin: 0;
  font-size: 20px;
  color: #000;
}

@media (max-width: 960px) {
  .directorCard__role{
    font-size: 16px;
  }
}

.directorCard__name{
   font-family: "ヒラギノUD明朝 Std", "Hiragino UD Mincho Std", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
  margin: 6px 0 14px;
  font-size: 33px;
  font-weight: 700;
}

@media (max-width: 960px) {
  .directorCard__name{
    font-size: 23px;
    margin-bottom: 12px;
  }
}

.directorCard__img{
  width: 100%;
  aspect-ratio: 2 / 1.5;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

@media (max-width: 960px) {
  .directorCard__img{
    max-width: 100%;
  }
}

.directorCard__text{
  margin: 14px auto 0;
  font-size: 16px;
  color: #000;
  text-align: justify;
}

@media (max-width: 960px) {
  .directorCard__text{
    margin-top: 12px;
    font-size: 15px;
  }
}

/* =========================================================
  Ambassador
========================================================= */
.onemorestep-ambassador{
  position: relative;
  padding: 150px 0 150px;
  overflow: hidden;
}

@media (max-width: 960px) {
  .onemorestep-ambassador{
    padding: 80px 0 80px;
  }
}

.onemorestep-ambassador__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 960px) {
  .onemorestep-ambassador__bg{
    object-position: center;
  }
}

.onemorestep-ambassador__inner{
  position: relative;
}

@media (max-width: 960px) {
  .onemorestep-ambassador__inner{
    position: relative;
  }
}

.onemorestep-ambassador__lead{
  margin-top:80px;
  margin-bottom:80px;
  text-align: center;
  color:#fff;
  font-size: 20px;
  line-height: 2;
}

@media (max-width: 960px) {
  .onemorestep-ambassador__lead{
    margin-top: 40px;
    margin-bottom:40px;
    font-size: 16px;
  }
}

.ambGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media (max-width: 960px) {
  .ambGrid{
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.ambCard{
  background: #ffffffac;
  padding:50px;
}

@media (max-width: 960px) {
  .ambCard{
    padding: 30px;
  }
}

.ambCard__title{
  font-family: "ヒラギノUD明朝 Std", "Hiragino UD Mincho Std", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
  font-size: 25px;
  color:#000;
  border-bottom: #000 solid 1px;
  padding-bottom:15px;
  margin-bottom:15px;
}

@media (max-width: 960px) {
  .ambCard__title{
    font-size: 21px;
    padding-bottom:10px;
    margin-bottom:10px;
  }
}

.ambCard__text{
  font-size: 16px;
  color:#000;
  line-height: 1.7;
  text-align: justify;
}

@media (max-width: 960px) {
  .ambCard__text{
    font-size: 14px;
  }
}

/* =========================================================
  Download
========================================================= */
.onemorestep-download{
  padding: 150px 0 150px;
  background: #fff;
}

@media (max-width: 960px) {
  .onemorestep-download{
    padding: 80px 0 80px;
  }
}

.downloadBox{
  position: relative;
  background:#E8E8DB;
  padding: 150px 0 150px;
  text-align: center;
  max-width: 1000px;
  margin:0 auto;
}

@media (max-width: 960px) {
  .downloadBox{
  padding: 50px 20px 50px;
  }
}

.downloadBox__hat{
  position: absolute;
  left: -50px;
  top: -110px;
  width: 300px;
  height: auto;
}

@media (max-width: 960px) {
  .downloadBox__hat{
    left: -10px;
    top: -55px;
    width: 150px;
  }
}

.downloadBox__text{
  margin-top:80px;
  margin-bottom:80px;
  text-align: center;
  color:#000;
  font-size: 20px;
  line-height: 2;
}

@media (max-width: 960px) {
  .downloadBox__text{
    margin-top: 40px;
    margin-bottom:40px;
    font-size: 16px;
    text-align: justify;
  }
}

/* =========================================================
  Footer Visual
========================================================= */
.onemorestep-footerVisual{
  position: relative;
  height: 1100px;
  overflow: hidden;
  background: #000;
}

@media (max-width: 960px) {
  .onemorestep-footerVisual{
    height: 800px;
  }
}

.onemorestep-footerVisual__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 960px) {
  .onemorestep-footerVisual__bg{

  }
}

.onemorestep-footerVisual__inner{
  position: relative;
  place-items: center;
  text-align: center;
}

@media (max-width: 960px) {
  .onemorestep-footerVisual__inner{

  }
}

.onemorestep-footerVisual__logo{
  width: 450px;
  display: block;
  margin: 0 auto;
}

@media (max-width: 960px) {
  .onemorestep-footerVisual__logo{
    width: 190px;
  }
}

.onemorestep-footerVisual__credit{
  font-size: 20px;
  color: #fff;
  margin-top:100px;
  margin-bottom:60px;
}

@media (max-width: 960px) {
  .onemorestep-footerVisual__credit{
    font-size: 13px;
    margin-top:50px;
    margin-bottom:30px;
  }
}

.onemorestep-footerVisual__credit-2{
  font-size: 13px;
  color: #fff;
  line-height: 2;
  margin-bottom:100px;
}

@media (max-width: 960px) {
  .onemorestep-footerVisual__credit-2{
    font-size: 10px;
    line-height: 1.7;
      margin-bottom:50px;
  }
}

@media (max-width: 676px) {
  .onemorestep-footerVisual__credit-2{
    text-align: justify;
  }
}

.credit{
  position: absolute;
  font-size: 13px;
  color: #fff;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 676px) {
  .credit{
    font-size: 12px;
  }
}