:root{ 
    --vh: 100vh;
    --bar-dmm: 38px;   /* ヘッダーの高さ */ 
  }

    /* ===== ページの初期値 ===== */
  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;height:100%;width: 100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif;color:#000000;overflow:hidden;}
  a{color:inherit}

  #dmm_ntgnavi {
    background: url(/../img/bg_navimain.gif) center center repeat-x;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    height: var(--bar-dmm);
    font-size: 12px;
    font-family: 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', Verdana, sans-serif;
    display: flex;
    justify-content: space-between;
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 9999;
}

#dmm_ntgnavi ul {
    list-style: none;
    margin: 2px 0;
    padding: 0;
    display: flex;
    width: 50%;
}

#dmm_ntgnavi ul li {
    margin: 0 6px 0 0;
    line-height: 15px;
}

#dmm_ntgnavi .navi_left li > a {
    display: block;
    padding: 0 3px 0 8px;
    text-decoration: none;
    border: 1px solid #eee;
    border-radius: 3px;
}

#dmm_ntgnavi .navi_left li > a:hover {
    background: #eee;
    border: 1px solid #666;
    border-radius: 3px;
}

#dmm_ntgnavi .navi_left li > a span {
    display: block;
    padding: 9px 10px 7px 28px;
    color: #333;
    font-weight: bold;
}

#dmm_ntgnavi .navi_left li.dmm_top img {
    margin: 8px 5px 8px 0
}

#dmm_ntgnavi .navi_left li.ntg_top {
    margin-left: 10px;
}

#dmm_ntgnavi .navi_left li.ntg_top span {
    background: url(/../img/bg_bt_olgtop.gif) 0 center no-repeat;
}

#dmm_ntgnavi .navi_right {
    justify-content: flex-end;
    font-size: 10px;
}

#dmm_ntgnavi .navi_right li {
    margin: 0 10px 0 0;
    padding: 8px 5px;
}

#dmm_ntgnavi .arrow {
    padding-left: 14px;
    background: url(/../img/arrow_common.gif) no-repeat left center;
}

#dmm_ntgnavi .tx-point {
    font-size: 16px;
    font-weight: bold;
    color: #ff4b4b !important;
}

#dmm_ntgnavi p {
    margin: 0;
    line-height:2.6em;
}

#dmm_ntgnavi .clear {
    clear: both;
}

 .btn-regist-area {
    position: absolute;
    top: var(--registration-top);
    left: 50%;
    width: var(--registration-frame-width);
    z-index: 30;
    translate: -50% 0;
    transform: none;
}
 .btn-regist-area .ntg-btn-registration {
    position: relative;
    top: var(--registration-button-offset-y);
    left: 0;
    width: var(--registration-button-width);
    height: auto;
    aspect-ratio: 564 / 134;
    border: 0;
    border-radius: min(2.88cqh, 30px);
    background-color: #d8d8d800;
    background-image: url(/../img/bt_registration_02.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor : pointer;
}
 .btn-regist-area .ntg-btn-registration img{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}




/* ★ 押した時に弾む（thumbPress は styles.css 側で定義済みのキーフレームを流用） */
.btn-regist-area .ntg-btn-registration.is-pressed {
  animation: thumbPress .32s cubic-bezier(.34,1.56,.64,1);
}


.btn-bg{
    position: absolute;
    top: var(--registration-frame-offset-y);
    left: 50%;
    width: var(--registration-frame-width);
    height: auto;
    z-index: -1;
    translate: -50% 0;
    transform: none;
    transform-origin: center;
    pointer-events: none;
}

.btn-bg img {
    display: block;
    width: 100%;
    height: auto;
}


/* ! 編集不可 *********************************************** */
/* 利用規約ボックスCSS */
 .btn-regist-area {
    text-align: center !important;
}
 .btn-regist-area .ntg-btn-registration {
    display: block !important;
    margin: 0 auto !important;
}
 .checkbox {
    margin: 0 auto;
    padding: min(.58cqh, 6px) min(.54cqw, 10px);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    letter-spacing: 0.01071em;
    font-size: min(1.06cqh, 11px);
    box-sizing: initial;
}
 .checkbox a {
    color: inherit !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}
 .checkbox span {
    margin-bottom: 3px;
}
 .checkbox span,  .checkbox p {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
}
 .checkbox input {
    margin: 0;
}
 .checkbox label {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    cursor: pointer;
    gap: 5px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
/* 正方形・円形タイプ ================ */
 .checkbox.type-square {
    display: block;
    width: 210px;
    text-align: center;
}
 .checkbox.type-square .box-kiyaku {
    margin-bottom: 3px;
}
 .checkbox.type-square .box-name {
    display: inline-block;
    text-align: center;
}
 .checkbox.type-square .box-name label {
    display: inline;
    margin-left: 5px;
}
/* 横長タイプ ======================= */
 .checkbox.type-oblong {
    position: relative;
    display: inline-block;
    width: var(--registration-options-width);
    min-width: 0;
}
 .checkbox.type-oblong .box-kiyaku {
    position: absolute;
    top: min(.58cqh, 6px);
    margin-left: var(--registration-option-column-width);
}
 .checkbox.type-oblong .box-info,  .checkbox.type-oblong .box-prof {
    width: var(--registration-option-column-width);
}
 .checkbox.type-oblong .box-prof {
    float: left;
    margin-bottom: 0;
}
/* ! 編集不可ここまで *********************************************** */


  body {
  margin: 0;
  
  }

 

  /* ===== Layout（PC向けに 100vh で固定） ===== */
main{
  position:relative;
  height: 100vh;             /* 固定ヘッダぶん */
  overflow:hidden;
  min-width: 1080px;
  padding-top: var(--bar-dmm)!important;  /* ← これでヘッダー分だけ中身を下げる */
  left: 50%;
  transform: translateX(-50%);
}

/* ヘッダー */
main > header{
    position:absolute;  inset:0 0; height:0px; display:flex; align-items:top;
    background:rgba(0, 0, 233, 0); padding: 0 20px; justify-content: space-between; /* 左と右を端に配置 */
    border-bottom:1px solid rgba(255,255,255,.06); z-index:20; min-width: 1280px;
    
  }
  .brand{
    display:flex; 
    align-items:top; 
    transform: translate(-60px, 10px);
    cursor: pointer;
    z-index: 100000;
    display: none; /* JSで表示切り替え */
  }
  .brand img{height: 19vh; width:auto;display: block;}
  .brand.is-show:hover{
    transform: translate(-60px, 10px) scale(1.05);
    filter: brightness(1.1); 
    transition-delay: 0.15s;
    transition: transform .15s ease-out;
  }
  .brand.is-show{
    display: block;
  }

  .tabs{
    display:absolute; left: 0%; transform: translate(-120px,39px); gap:0px; display: flex;}
  .tabs button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .tabs button img {
    width: 180px;     /* 好みに合わせて */
    height: auto;
    display: block;
    transition: opacity .2s ease;
  }

  .tabs button img:hover {
    opacity: .8;
  }


  /* 右：SNSアイコンを右端に */
.social{display:flex; align-items:top; gap:12px; transform: translateY(60px)}
.social .ico{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:8px; background:rgba(0,0,0,.35); color:#fff;
  text-decoration:none; transition:transform .12s ease, background .2s ease;
  }
  .social .ico:hover {
  transform: translateY(-1px);
  background: rgba(163,145,241,.6);
}
.social .ico:focus-visible {
  outline: 2px solid #a391f1;
  outline-offset: 2px;
}

/*横スライドバージョン*/
/*.track{
  display:flex;
  height: 100%;    
  width:100%;
  transition: transform .6s cubic-bezier(.22,.8,.24,1);
  will-change: transform;
}*/

.track{
  display:flex;
  height: 100%;    /* ここも 100vh 基準 */
  width:100%;
  transition: transform .6s cubic-bezier(.22,.8,.24,1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce){
  .track{ transition:none }
}

/* ===== Slide（背景と前景の前後関係を固定） ===== */
.slide{
  position: absolute;   /* 全部重ねる */
  inset: 0;             /* track の中で全画面 */
  overflow: hidden;
  display: grid; place-items:center;
  text-align: center;
  

  opacity: 0;
  pointer-events: none; /* 非表示時はクリック無効 */
  transition: opacity .8s ease;  /* フェード時間 */
}
/* 表示中 */
.slide.is-active{
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
/* 低速回線/端末向け（ユーザー設定尊重） */
@media (prefers-reduced-motion: reduce){
  .slide{ transition: none; }
}


/* ===== Slide（背景と前景の前後関係を固定） ===== 
.slide{
  position:relative;             
  flex:0 0 100vw;
  height:100%;
  overflow:hidden;
  display:grid; place-items:center;
  padding:24px; text-align:center;
  border-right:1px solid rgba(255,255,255,.06);
} 
.slide:last-child{ border-right:none }

/* 背景は“必ず”全面・最背面 */
.bg{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:1;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* 背景は“必ず”全面・最背面 */
.home-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s ease;
}

#panel-home.is-video-fallback .home-fallback {
  visibility: visible;
  opacity: 1;
}

.home-bg{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:1;
}
.home-bg img{
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.home-bg img.active {
  opacity: 1;
}

/* 1枚目だけの位置調整 */
.home-bg img.bg-1 {
  transform: translateY(-25px);
}

/* 1枚目だけの位置調整 */
.home-bg img.bg-2 {
  transform: translateY(-50px);
}

.home-logo {
  position: absolute;
  transform: translate(300px, 75px);
  z-index: 1;
}
.home-logo img {
  width: 1280px;
  height: auto;
}

.logo {
  
  width: 40vw;
  max-width: 80%;
  margin-bottom: -50px;
}


/* 前景テキストは前面 */
#panel-home .content{
  position:relative;
  z-index:1;
  width:min(100vw, calc((100vh - var(--bar-dmm)) * 16 / 9));
  height:min(calc(100vh - var(--bar-dmm)), calc(100vw * 9 / 16));
  aspect-ratio:16 / 9;
  container-type:size;
  container-name:home-stage;

  /* 事前登録エリアの調整値 */
  --registration-top: 65cqh;
  --registration-button-offset-y: -.96cqh;
  --registration-button-width: min(35.45cqw, 564px);
  --registration-frame-width: min(40.82cqw, 719px);
  --registration-frame-offset-y: max(-8.64cqh, -90px);
  --registration-options-width: min(20.79cqw, 385px);
  --registration-option-column-width: min(9.72cqw, 180px);
}


/* 前景は“必ず”前面 */
.content{
  
  z-index:1;
  align-items: top;
}
.slide h2{ font-size:clamp(22px,4vw,40px); margin:.2em 0 }
.slide p{ color:#ffffff; max-width:70ch; margin:0 auto }

 /* #panel-home .content { transform: translateY(-80px); }
 #panel-character .content { transform: translateY(100px); }
 #panel-movie .content { transform: translateY(-20px); } */



.char-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .5s ease;
  z-index: 0;
}

.char-bg-back {
  opacity: 1;
}

.char-bg-front {
  opacity: 0;
}

.btn{
  display:inline-block; margin-top:16px; padding:12px 20px; border-radius:12px;
  background:#a391f1; color:#160b16; font-weight:800; text-decoration:none;
}
.btn:hover{transform:translateY(-1px)}


/* ========================================
   Gallery
======================================== */

#panel-gallery {
  place-items: center;
}

.gallery-stage {
  position: relative;

  width: min(
    100vw,
    calc((100vh - var(--bar-dmm)) * 16 / 9)
  );

  height: min(
    calc(100vh - var(--bar-dmm)),
    calc(100vw * 9 / 16)
  );

  aspect-ratio: 16 / 9;

  container-type: size;
  container-name: gallery-stage;

  z-index: 1;
}

.gallery-content {
  position: absolute;
  inset: 0;
}

/* 左端の進行ライン */
.gallery-progress {
  position: absolute;
  left: 5.15cqw;
  top: 21.8cqh;
  width: .8cqw;
  height: 61.5cqh;
  z-index: 3;
  pointer-events: none;
}

.gallery-progress__bar {
  position: absolute;
  top: 0;
  left: 50%;
  width: .35cqw;
  height: 100%;
  transform: translateX(-50%);
}

.gallery-progress__point {
  position: absolute;
  top: 8.9cqh;
  left: 50%;
  width: .76cqw;
  height: 3.5cqh;
  transform: translate(-50%, -50%);
  transition: top .3s cubic-bezier(.22, 1, .36, 1);
}

/* ==========================
   左側サムネイル
========================== */

.gallery-thumbs {
  position: absolute;
  left: 7.55cqw;
  top: 22.8cqh;

  width: 15.3cqw;

  display: flex;
  flex-direction: column;
  gap: 3.3cqh;

  z-index: 3;
}

.gallery-thumb {
  position: relative;

  width: 100%;
  aspect-ratio: 296 / 193;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  cursor: pointer;
  overflow: visible;

  transition:
    transform .18s ease,
    filter .18s ease;
}

.gallery-thumb > img:first-child {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}





.gallery-thumb:hover {
  transform: scale(.97);
  filter: brightness(1.08);
}

.gallery-thumb__active-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 112.2%;
  height: 118.7%;
  display: block;
  object-fit: fill;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity .18s ease;
}

.gallery-thumb.is-active {
  filter: brightness(1.05);
}

.gallery-thumb.is-active .gallery-thumb__active-frame {
  opacity: 1;
}

/* ==========================
   選択位置の三角
========================== */

.gallery-marker {
  position: absolute;

  left: 25.9cqw;
  top: 29.6cqh;

  width: 0;
  height: 0;

  border-top: 2.3cqh solid transparent;
  border-bottom: 2.3cqh solid transparent;
  border-left: 2.2cqw solid #ffd719;

  z-index: 4;

  transition: top .3s cubic-bezier(.22, 1, .36, 1);
}

/* ==========================
   右側メイン画像
========================== */

.gallery-main {
  position: absolute;

  left: 31.8cqw;
  top: 22.7cqh;

  width: 63.8cqw;
  height: 58.6cqh;

  overflow: visible;

  z-index: 2;

  background: transparent;
}



.gallery-main__media {
  position: absolute;
  inset: 2.7% 1.8% 6.1% 2.4%;
  overflow: hidden;
  z-index: 1;
  background: rgba(255,255,255,.4);
}

.gallery-main video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--gallery-video-fit, cover);
  object-position: 50% 50%;
  translate:
    calc(var(--gallery-video-x, 50%) - 50%)
    calc(var(--gallery-video-y, 50%) - 50%);

  opacity: 1;
  transform: scale(var(--gallery-video-scale, 1));

  transition:
    opacity .35s ease,
    translate .35s ease,
    transform .35s ease;

  pointer-events: none;
}

.gallery-main__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  z-index: 2;
  pointer-events: none;
}

.gallery-main video.is-changing {
  opacity: 0;
  transform: scale(calc(var(--gallery-video-scale, 1) + .04));
}

.home-video {
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:1;
  transition: opacity 0.45s ease;
  transform: translate(98px,-65px);
  width: 90%; 
  background-size: 100% ;
  background-position:center;
  background-repeat:no-repeat;
}

#panel-home.is-video-fallback .home-video {
  visibility: hidden;
  opacity: 0;
}


.swiper{
   margin-top: var(--bar-dmm);
   font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
   width: min(1100px, 90vw);
   height: 62vh;     /* slideの高さと合わせる or お好みで */
   margin: 60px auto 0;
   overflow: visible;
}
 .swiper-slide {
  width: min(850px, 70vw);
  height: 50vh;
  padding: 2em;
  
 }
 
 .swiper-slide img {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
 

  /* カスタム矢印 */
  .swiper-arrow {
    position: absolute;
    top: 50%;
    width: 0px;
    height: 0px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    z-index: 2;
  }

 .swiper-button-prev { transform: translate(480px,0px); } 
 .swiper-button-next { transform: translate(-480px,0px); }

 .swiper-button-prev::before, 
 .swiper-button-next::before {
  content: "";
  position: absolute; 
  display: block; 
  width: 42px;
  height: 55px; 
  background-size: contain; 
  background-position: center; 
  background-repeat: no-repeat; 
  z-index: 1000;
}
  

 .swiper-button-prev::before{
  background-image: url("/../img/system/arrow_left.webp");
 }
 .swiper-button-next::before{
  background-image: url("/../img/system/arrow_right.webp");
 }

 .swiper-button-prev:hover{
  filter: brightness(0.9);
   transform: translate(480px,0px);
} 
 .swiper-button-next:hover {
  filter: brightness(0.9);
  transform: translate(-480px,0px);
}

 .swiper-button-prev:active{
  transform: scale(0.95);
  filter: brightness(0.7);
   transform: translate(480px,0px);
} 
 .swiper-button-next:active {
  transform: scale(0.95);
  filter: brightness(0.7);
  transform: translate(-480px,0px);
}





  /* プログレスバー */
  .autoplay-progress {
    --swiper-theme-color: rgb(240, 96, 197);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 5px;
    color: var(--swiper-theme-color);
  }

  .autoplay-progress svg {
    --progress: 50;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: auto;
    stroke-width: 3px;
    stroke: var(--swiper-theme-color);
    fill: none;
    stroke-dashoffset: calc(100px * (1 - var(--progress))); /* オフセット=実線部分は100％で0 */
    stroke-dasharray: 100px; /* 実線と間隔- - */
  }

  .autoplay-progress line {
    width: 100%;
  }

  /* 固定アイコン本体 */
  .sd-cta {
    --sd-cta-size: min(20.42vw, 25.52vh, 200px);
    --sd-cta-right: clamp(40px, 1.04vw, 20px);
    --sd-cta-bottom: clamp(8px, 1.85vh, 20px);

    position: fixed;
    right: var(--sd-cta-right);
    bottom: var(--sd-cta-bottom);
    width: var(--sd-cta-size);
    height: auto;
    aspect-ratio: 1;
    z-index: 2000;
    display: none;     /* JS で切り替える */
    cursor: pointer;
  }

  .sd-cta img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
  }

  /* 表示状態 */
  .sd-cta.is-show {
    display: block;
    animation: sd-bounce 1.2s ease-in-out infinite alternate;
  }

  /* ふわふわアニメ */
  @keyframes sd-bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-8px); }
  }

  /* ホバーアクション */
  .sd-cta.is-show:hover {
    animation: none;
    transform: scale(1.05) translateY(-4px);
    transition: transform .15s ease-out;
  }

  /* ============================================================
     キャラクターページ「ステージ」
     ---------------------------------------------------------
     内部要素は width/height/top/left をすべて vh(画面の高さ基準)
     や vw(画面の横幅基準)で組んでいるため、画面の縦横比が
     制作時の想定(16:9)からズレるモニターでは要素同士の位置関係が
     崩れてしまう。
     そこで .container を「常に16:9を保つ箱」として画面内に
     レターボックス配置し、中身は container query 単位
     (cqw/cqh = この箱の横幅/高さの1%)で組み直す。
     箱自体の縦横比が常に一定なので cqw と cqh の関係も
     モニターが変わっても常に一定になり、崩れなくなる。

     ※ 16/9 は現状の数値から逆算した想定値。実際のデザイン
       カンプの比率と違う場合はここだけ変更すればOK。
     ============================================================ */
  .container {
    position: relative;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    width: min(100vw, calc((100vh - var(--bar-dmm)) * 16 / 9));
    height: min(calc(100vh - var(--bar-dmm)), calc(100vw * 9 / 16));
    container-type: size;
    container-name: char-stage;
  }

.swiper-with-char{
   font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
   width: 100%;
   height: 100%;     /* .container(ステージ)いっぱいに広げる */
   margin: 0;
   overflow: hidden;
}

  /* 全体 */
#char-viewer {
  margin: 0 auto;
  color: #fff;
  position: relative; 
}

/* Swiper コンテナ */
.char-swiper {
  position: relative;
  border-radius: 0px;
  overflow: visible;
}

/* スライド内を2カラムにする */
.char-slide {
  width: 100%;
  height: 100%;
  display: flex;
}

.char-main {
  position: relative;      /* 子要素を absolute で自由配置するため */
  width: 100%;
  height: 100%;
  display: block;
}

/* 背景用エリア（スライド全体を背景に使う想定） */
.char-info {
  position: absolute;
  inset: 0;                /* top:0; right:0; bottom:0; left:0; と同じ */
  padding: 28px 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;  /* 全体にフィットさせるなら */
}

/* テキストの位置を好きな場所に置きたい場合 */
.char-info-inner {
  position: absolute;
  z-index: 1;
  /* 好きな位置に */
  top: 120px;
  left: 60px;
  /* 高さに縛られたくないなら height は消してOK */
  /* height: 100%; は不要なら外す */
  display: block;
  padding: 0;
}

.right_container{
  position: absolute;
  height: 85cqh;          /* 好みに合わせて調整 */
  width: 85cqh;           /* 好みに合わせて調整 */
  z-index: 50;
  right: 8.5cqh;
  top: 5cqh;
}

.char-visual {
  position: absolute;
  right: 0cqh;
  top: 5cqh;
  height: 85cqh;          /* 好みに合わせて調整 */
  width: 85cqh;           /* 好みに合わせて調整 */
  overflow: visible;
  opacity: 0;
  z-index: 0;
}


.char-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.mid_container{
  position: absolute;
  top: 55cqh;               
  left: 18cqh;
  height: 30cqh;          /* 好みに合わせて調整 */
  width: 30cqh;           /* 好みに合わせて調整 */
  z-index: 5000;
}

.voice-image{
  position: absolute;
  height: 4.5cqh;          /* 好みに合わせて調整 */
  width: 32cqh;           /* 好みに合わせて調整 */
  left: 50cqh;
  top:7cqh;
  overflow: visible;
  z-index: 50;
  opacity: 0;
}

.voice-image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.voice-button-in {
  position: absolute;
  left: 83cqh;
  top: 7cqh;

  width: 4.5cqh;
  height: 4.5cqh;

  z-index: 5000;
  opacity: 0;
}

/* ========================================
   ボイス再生ボタン
======================================== */

.voice-btn {
  width: 4.5cqh;
  height: 4.5cqh;

  margin: 0;
  padding: 0;

  border: .18cqh solid rgba(41, 38, 59, .35);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);

  display: grid;
  place-items: center;

  cursor: pointer;

  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.voice-icon {
  display: block;
  width: 72%;
  height: 72%;
  overflow: visible;
  pointer-events: none;
}

.voice-icon__speaker {
  fill: #29263b;
  transition: fill .18s ease;
}

.voice-icon__wave {
  fill: none;
  stroke: #29263b;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .18s ease;
}

.voice-btn:hover,
.voice-btn.is-playing {
  transform: scale(1.15);
  background-color: #29263b;
  border-color: #4d9ffc;

  box-shadow:
    0 0 0 .18cqh rgba(77, 159, 252, 0.3),
    0 0 1.2cqh rgba(77, 159, 252, .65);
}

.voice-btn:hover .voice-icon__speaker,
.voice-btn.is-playing .voice-icon__speaker {
  fill: #fff;
}


.voice-btn:hover .voice-icon__wave,
.voice-btn.is-playing .voice-icon__wave {
  stroke: #4d9ffc;
}

.voice-btn:active {
  transform: scale(.9);
}

/* キーボード操作 */
.voice-btn:focus-visible {
  outline: .25cqh solid #4d9ffc;
  outline-offset: .25cqh;
}

.birthday {
  position: absolute;
  height: 4.5cqh;          /* 好みに合わせて調整 */
  width: 32cqh;           /* 好みに合わせて調整 */
  top: 0cqh;
  left: 15cqh;
  overflow: visible;
  z-index: 50;
  opacity: 0;
}

/* ★ 画像ごとの解像度・縦横比が違っても box に収まるように */
.birthday img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.size{
  position: absolute;
  height: 4.5cqh;          /* 好みに合わせて調整 */
  width: 32cqh;           /* 好みに合わせて調整 */
  top: 7cqh;
  left: 15cqh;
  overflow: visible;
  z-index: 50;
  opacity: 0;
}

/* ★ 画像ごとの解像度・縦横比が違っても box に収まるように */
.size img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.likes{
  position: absolute;
  height: 4.5cqh;          /* 好みに合わせて調整 */
  width: 32cqh;           /* 好みに合わせて調整 */
  top: 0cqh;
  left: 50cqh;
  overflow: visible;
  z-index: 50;
  opacity: 0;
}

/* ★ 画像ごとの解像度・縦横比が違っても box に収まるように */
.likes img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* 文字スタイルはそのままでOK */
.char-name {
  position: absolute;
  left: -5cqh;
  top: -16cqh;
  height: 9cqh;          /* 好みに合わせて調整 */
  width: 45cqh;           /* 好みに合わせて調整 */
  overflow: visible;
  z-index: 50;
  opacity: 0;
}

.char-name img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* 文字スタイルはそのままでOK */
.char-name-en {
  position: absolute;
  left: -4cqh;
  top: -6cqh;
  height: 2.7cqh;          /* 好みに合わせて調整 */
  width: 30cqh;           /* 好みに合わせて調整 */
  overflow: visible;
  z-index: 50;
  opacity: 0;
}

.char-name-en img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* 初期状態：左にオフセット＋透明 */
.left_container {
  position: absolute;
  left: 4.5cqh;
  top: 18cqh;
  z-index: 60;
}

/* アクティブなキャラスライドのときだけアニメーション */
#panel-character.is-active .char-slide.swiper-slide-active .char-name-en {
  animation: leftIn .75s ease forwards .4s;
} 
/* アクティブなキャラスライドのときだけアニメーション */
#panel-character.is-active .char-slide.swiper-slide-active .char-name {
  animation: leftIn .5s ease forwards .4s;
} 

#panel-character.is-active .char-slide.swiper-slide-active #face {
  animation: leftIn .5s ease forwards .3s;
} 

#panel-character.is-active .char-slide.swiper-slide-active #breast {
  animation: leftIn .5s ease forwards .2s;
} 

#panel-character.is-active .char-slide.swiper-slide-active #hip {
  animation: leftIn .5s ease forwards .1s;
}

#panel-character.is-active .char-slide.swiper-slide-active .affiliation {
  animation: bottomIn 1s ease forwards .3s;
}
#panel-character.is-active .char-slide.swiper-slide-active .sd {
  animation: bottomIn 1s ease forwards .3s;
}
#panel-character.is-active .char-slide.swiper-slide-active .char-desc {
  animation: bottomIn 1s ease forwards .3s;
}


#panel-character.is-active .char-slide.swiper-slide-active .char-visual {
  animation: bottomIn 1s ease forwards .1s;
}

#panel-character.is-active .char-slide.swiper-slide-active .char-visual img{
  animation: characterFloat 3s ease-in-out 1.1s infinite alternate;
}

@keyframes characterFloat {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(1cqh);
  }
}

/* アクティブなキャラスライドのときだけアニメーション */
#panel-character.is-active .char-slide.swiper-slide-active .lines {
  animation: bottomIn .5s ease forwards .8s;
}

#panel-character.is-active
.char-slide.swiper-slide-active .voice-image,
#panel-character.is-active
.char-slide.swiper-slide-active .voice-button-in {
  animation: leftIn .5s ease forwards .6s;
}
#panel-character.is-active .char-slide.swiper-slide-active .birthday {
  animation: leftIn .5s ease forwards .3s;
}

#panel-character.is-active .char-slide.swiper-slide-active .size {
  animation: leftIn .5s ease forwards .5s;
}


#panel-character.is-active .char-slide.swiper-slide-active .likes {
  animation: leftIn .5s ease forwards .4s;
}


/* アクティブなキャラスライドのときだけアニメーション */
#panel-character.is-active .char-slide.swiper-slide-active .char-frame {
  animation: zoomIn .75s cubic-bezier(.28,1.45,.48,.99) forwards .8s;
}


/* キーフレーム定義 */
@keyframes leftIn {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* キーフレーム定義 */
@keyframes rightIn {
  from {
    opacity: 0;
    transform: translateX(+40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bottomIn {
  from {
    opacity: 0;
    transform: translateY(+40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* キーフレーム定義 */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1) ease-out;
  }
}


.char-image{
  position: absolute;
  height: 15cqh;          /* 好みに合わせて調整 */
  width: 30cqh;           /* 好みに合わせて調整 */
  overflow: hidden;
  z-index: 50;
}

/* ★ 顔・胸・腰の切り抜き画像。overflow:hidden の box を隙間なく埋める */
.char-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#face{
  top: 1.5cqh;
  left: -3cqw;
  opacity: 0;
}
#breast{
  top: 18.5cqh;
  left: -3cqw;
  opacity: 0;
}
#hip{
  top: 35.5cqh;
  left: -3cqw;
  opacity: 0;
}




.char-desc {
  position: absolute;
  height: 33cqh;          /* 好みに合わせて調整 */
  width: 63cqh;           /* 好みに合わせて調整 */
  top: 1cqh;
  left: 27cqh;
  overflow: visible;
  z-index: 5000;
  opacity: 0;
}

/* ★ 説明文の画像。欠けたら困るので contain */
.char-desc img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
}

.lines{
  position: absolute;
  height: 65cqh;          /* 好みに合わせて調整 */
  width: 12cqh;           /* 好みに合わせて調整 */
  top: 8cqh;
  right: -15cqh;
  overflow: visible;
  z-index: 50;
  opacity: 0;
}

.lines img {
 display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.char-thumb-area{
  position: absolute;          /* ★ 重ねる */
  left: -4.5cqh;                     /* Swiper 左端からの距離 */
  bottom: 4cqh;
  width: 100%;
  height: 20cqh;                /* Swiper 下端からの距離 */
  pointer-events: none;        /* 親要素で無効化 */
  overflow: visible;
}





.char-thumb-base{
  position: absolute;          /* ★ 重ねる */
  left: 0cqh;                /* Swiper 左端からの距離 */
  bottom: 0cqh;
  z-index: 10; 
  align-items: center;
}
.char-thumb-base img{
  width: 99cqh;
  height: 6cqh;
}

/* 下のアイコン */
.char-thumb-bar {
  position: absolute;          /* ★ 重ねる */
  left: 0cqh;                /* Swiper 左端からの距離 */
  bottom: 0cqh;                /* Swiper 下端からの距離 */
  z-index: 20;                 /* スライドより前に出す */
  display: flex;
  gap: 0px;
  pointer-events: auto;
  align-items: center;
}

.char-thumb {
  position: relative;      /* ★ アウトライン画像を重ねるための基準 */
  width: 14.5cqh;
  height: 14.5cqh;
  border-radius:9px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;        /* ★ アウトラインの光がはみ出せるように */
  transition: transform .18s ease-out, filter .18s ease-out, box-shadow .18s ease-out;
}

.char-thumb img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: scale-down;
  transition: transform .12s ease-out, filter .12s ease-out, box-shadow .12s ease-out;
}



/* 顔イラスト（常に表示・前面） */
.char-thumb .thumb-face {
  position: relative;
  z-index: 1;
}

/* アウトライン（選択時だけ表示・背面） */
.char-thumb .thumb-glow {
  position: absolute;
  inset: -11.5% -9%;              /* 顔イラストより少し大きく光を出す。お好みで調整 */
  width: 120%;
  height: 120%;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease-out;
}

.char-thumb.is-active .thumb-glow {
  opacity: 1;
  transition: opacity .35s ease-out .05s;
}

@keyframes thumbPress {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.82); }
  65%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.char-thumb.is-pressed {
  animation: thumbPress .4s cubic-bezier(.34,1.56,.64,1);
}

.char-thumb:hover {
  transform: scale(0.94);
}

/* 共通：ボタンの基本スタイル */
.sp-nav-toggle {
  position: fixed;
  top: calc(var(--bar-dmm) + 3cqh);
  right: 3.2cqh;
  width: 8.9cqh;
  height: 8.9cqh;
  padding: 0;
  border: 0;
  /*
   * iOS Safari では動画の合成レイヤーがあると、固定配置した img だけが
   * 一時的に描画されないことがある。ボタン本体にも同じ画像を持たせて、
   * タップ領域だけが見える状態になるのを防ぐ。
   */
  background: transparent url("../img/menu/menu.webp") center / contain no-repeat;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1002;
  transition: transform .18s ease-out;
  isolation: isolate;
  opacity: 1;
  visibility: visible;
  -webkit-appearance: none;
  appearance: none;
}

.sp-nav-toggle__img {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.sp-nav-toggle:hover {
  transform: scale(.94);
  transition-delay: 0s;
  transition-duration: .12s;
}

.sp-nav-toggle:active {
  transform: scale(.82);
}

.sp-nav-toggle:focus-visible {
  outline: 3px solid #4f83ff;
  outline-offset: 4px;
}

/* ホーム以外で、閉じたメニューボタンの横に表示する公式SNS */
.floating-menu-social {
  position: fixed;
  top: calc(var(--bar-dmm) + 3.85cqh);
  right: 13.3cqh;
  z-index: 1001;
  display: flex;
  gap: 1.1cqh;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(1.2cqh);
  transition:
    opacity .18s ease-out,
    transform .22s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .22s;
}

.floating-menu-social.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

.floating-menu-social .ico {
  position: relative;
  display: block;
  width: 7.2cqh;
  height: 7.2cqh;
  transform-origin: center;
  transition: transform .12s ease-out;
}

.floating-menu-social .ico::before {
  content: "";
  position: absolute;
  inset: -.6cqh;
}

.floating-menu-social .ico img {
  display: block;
  width: 100%;
  height: 100%;
}

.floating-menu-social .ico:hover,
.floating-menu-social .ico:focus-visible {
  transform: scale(.94);
}

.floating-menu-social .ico:active {
  transform: scale(.82);
}

.floating-menu-social .ico:focus-visible {
  outline: 2px solid #4f83ff;
  outline-offset: 3px;
}

/* スライドメニュー本体 */
.sp-nav {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  visibility: hidden;
  z-index: 1000;
  transition: visibility 0s linear .38s;
}

.sp-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 27, 63, .58);
  opacity: 0;
  will-change: opacity;
  transition: opacity .26s ease-out;
}

.sp-nav__inner {
  position: relative;
  width: min(50.3cqh, 531px);
  top: -var(--bar-dmm);
  height: 100%;
  padding: 0;
  overflow: hidden;
  container-type: size;
  background: url("../img/menu/Frame.webp") center / 100% 100% no-repeat;
  transform: translate3d(102%, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}

.sp-nav__list {
  position: absolute;
  top: 17.5cqh;
  left: 4.6cqh;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2.8cqh;
}

.sp-nav__list a {
  position: relative;
  display: block;
  width: 26.5cqh;
  height: 5.2cqh;
  transform-origin: left center;
  transition: transform .18s ease-out;
}

.sp-nav__list a::before {
  content: "";
  position: absolute;
  inset: -.9cqh -1.4cqh;
}

.sp-nav__list img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.sp-nav__list a:hover,
.sp-nav__list a:focus-visible {
  transform: scale(.94);
  transition-delay: 0s;
  transition-duration: .12s;
}

.sp-nav__list a:active {
  transform: scale(.82);
}

.sp-nav__list a:focus-visible,
.menu-social .ico:focus-visible {
  outline: 2px solid #4f83ff;
  outline-offset: 3px;
}

.menu-social {
  position: absolute;
  left: 4.6cqh;
  bottom: 13.7cqh;
  display: flex;
  gap: 1.7cqh;
  padding: 0;
  margin: 0;
  transform: none;
}

.menu-social .ico {
  position: relative;
  width: 9cqh;
  height: 8.9cqh;
  padding: 0;
  border-radius: 0;
  background: transparent;
  transform-origin: left center;
  transition: transform .18s ease-out;
}

.menu-social .ico::before {
  content: "";
  position: absolute;
  inset: -.7cqh;
}

.menu-social .ico img {
  display: block;
  width: 100%;
  height: 100%;
}

.menu-social .ico:hover {
  background: transparent;
  transform: scale(.94);
  transition-delay: 0s;
  transition-duration: .12s;
}

.menu-social .ico:active {
  transform: scale(.82);
}

@keyframes menuButtonPress {
  0%   { transform: scale(1); }
  35%  { transform: scale(.82); }
  65%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.sp-nav-toggle.is-pressed,
.sp-nav__list a.is-pressed,
.menu-social .ico.is-pressed {
  animation: menuButtonPress .4s cubic-bezier(.34, 1.56, .64, 1);
}

.sp-nav__list li,
.menu-social .ico {
  opacity: 1;
}

/* 開いた状態 */
.sp-nav.is-open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.sp-nav.is-open::before {
  opacity: 1;
}

.sp-nav.is-open .sp-nav__inner {
  transform: translate3d(0, 0, 0);
}

.sp-nav.is-open .sp-nav__list li,
.sp-nav.is-open .menu-social .ico {
  opacity: 1;
}

.sp-nav.is-open .menu-social .ico:hover {
  transform: scale(.94);
  transition-delay: 0s;
  transition-duration: .12s;
}

.sp-nav.is-open .menu-social .ico:active {
  transform: scale(.82);
  transition-delay: 0s;
}

.sp-nav.is-open .sp-nav__list li {
  transition-delay: 0s;
}
.sp-nav.is-open .menu-social .ico:nth-child(1),
.sp-nav.is-open .menu-social .ico:nth-child(2) {
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .sp-nav,
  .sp-nav::before,
  .sp-nav__inner,
  .sp-nav__list li,
  .sp-nav__list a,
  .menu-social .ico {
    transition-duration: .01ms;
    transition-delay: 0s;
  }

  .sp-nav-toggle.is-pressed,
  .sp-nav__list a.is-pressed,
  .menu-social .ico.is-pressed {
    animation: none;
  }
}

/* ==========================
   共通ページタイトル
========================== */
.page-title{
  position:absolute;
  top:60px;
  left:27%;
  transform:translateX(-50%) translateY(-20px);
  opacity:0;
  z-index:20;
}

.page-title img{
  display:block;
  /* 16:9の表示領域に追従し、横幅・高さの小さい側を基準に滑らかに拡縮 */
  width:min(700px, 40.5vw, 70vh);
  max-width:none;
  height:auto;
}

.slide.is-active .page-title{
  animation:titleIn .6s ease forwards;
}

@keyframes titleIn{
  from{
    opacity:0;
    transform:translateX(-50%) translateY(-20px);
  }
  to{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
}



/* ========================================
   Storyページ
   1920×1080のデザイン基準で比率を固定
======================================== */

#panel-story {
  place-items: center;
}

.story-stage {
  position: relative;

  /* DMMヘッダーを除いた画面内に16:9で収める */
  width: min(
    100vw,
    calc((100vh - var(--bar-dmm)) * 16 / 9)
  );

  height: min(
    calc(100vh - var(--bar-dmm)),
    calc(100vw * 9 / 16)
  );

  aspect-ratio: 16 / 9;

  container-type: size;
  container-name: story-stage;

  z-index: 1;
}


.story-content {
  position: absolute;
  inset: 0;
}

/* 共通画像設定 */
.story-content img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 大枠 */
.story-frame {
  position: absolute;
  left:1.5cqw;
  top: 13cqh;
  width: 95.9cqw;
  height: 70.9cqh;
  z-index: 1;
  pointer-events: none;
}

/* 共通画像設定 */
.story-frame  img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 上部のメイン画像 */
.story-image {
  position: absolute;
  left: 10.1cqw;
  top: 20cqh;
  width: 80.9cqw;
  height: 30.3cqh;
  z-index: 2;
  overflow: hidden;

  /* 素材と同じ角落とし */
  clip-path: polygon(
    1.5% 0,
    98.5% 0,
    100% 8%,
    100% 92%,
    98.5% 100%,
    1.5% 100%,
    0 92%,
    0 8%
  );
}



/* キャッチコピーの線 */
.story-catchcopyFrame {
  position: absolute;
  left: 7.5cqw;
  top: 50.7cqh;
  width: 45.1cqw;
  height: 4.2cqh;
  z-index: 2;
  transform-origin: left center;
}

/* キャッチコピー本文 */
.story-catchcopy {
  position: absolute;
  left: 11.6cqw;
  top: 50.2cqh;
  width: 26cqw;
  height: 3.9cqh;
  z-index: 3;
}

/* 本文 */
.story-text {
  position: absolute;
  left: 9.4cqw;
  top: 56.1cqh;
  width: 58cqw;
  height: 24.2cqh;
  z-index: 2;
}

/* 右下の装飾ロゴ */
.story-logo {
  position: absolute;
  right: 4.8cqw;
  bottom: 16.8cqh;
  width: 13.1cqw;
  height: 27.8cqh;
  z-index: 2;
  opacity: .55;
  pointer-events: none;
}


/* ========================================
   Story コンテンツの登場アニメーション
======================================== */

/* ページを離れた状態では非表示 */
.story-frame,
.story-image,
.story-catchcopyFrame,
.story-catchcopy,
.story-text,
.story-logo {
  opacity: 0;
}

/* 1. 外枠 */
#panel-story.is-active .story-frame {
  animation: storyFrameIn
    .8s
    cubic-bezier(.22, 1, .36, 1)
    .15s
    forwards;
}

/* 2. メイン画像 */
#panel-story.is-active .story-image {
  animation: storyImageIn
    1s
    cubic-bezier(.22, 1, .36, 1)
    .45s
    forwards;
}

/* 3. キャッチコピーのライン */
#panel-story.is-active .story-catchcopyFrame {
  animation: storyLineIn
    .8s
    cubic-bezier(.22, 1, .36, 1)
    .65s
    forwards;
}

/* 4. キャッチコピー */
#panel-story.is-active .story-catchcopy {
  animation: storyCopyIn
    .65s
    ease-out
    .9s
    forwards;
}

/* 5. 本文 */
#panel-story.is-active .story-text {
  animation: storyTextIn
    .85s
    ease-out
    1.15s
    forwards;
}

/* 6. 右下ロゴ */
#panel-story.is-active .story-logo {
  animation: storyLogoIn
    1.1s
    cubic-bezier(.22, 1, .36, 1)
    1.4s
    forwards;
}


/* 外枠：中央から少し拡大 */
@keyframes storyFrameIn {
  from {
    opacity: 0;
    transform: scale(.94);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}


/* メイン画像：左から横方向に開く */
@keyframes storyImageIn {
  from {
    opacity: 0;
    clip-path: polygon(
      1.5% 0,
      1.5% 0,
      1.5% 8%,
      1.5% 92%,
      1.5% 100%,
      1.5% 100%,
      1.5% 92%,
      1.5% 8%
    );
    filter: brightness(1.6) blur(3px);
  }

  to {
    opacity: 1;
    clip-path: polygon(
      1.5% 0,
      98.5% 0,
      100% 8%,
      100% 92%,
      98.5% 100%,
      1.5% 100%,
      0 92%,
      0 8%
    );
    filter: brightness(1) blur(0);
  }
}


/* ライン：左端から伸ばす */
@keyframes storyLineIn {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}


/* キャッチコピー：少し左から */
@keyframes storyCopyIn {
  from {
    opacity: 0;
    transform: translateX(-2cqw);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}


/* 本文：下から静かに表示 */
@keyframes storyTextIn {
  from {
    opacity: 0;
    transform: translateY(2cqh);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* 装飾ロゴ：回転＋拡大 */
@keyframes storyLogoIn {
  from {
    opacity: 0;
    transform: rotate(-20deg) scale(.7);
  }

  to {
    opacity: .55;
    transform: rotate(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #panel-story .story-frame,
  #panel-story .story-image,
  #panel-story .story-catchcopyFrame,
  #panel-story .story-catchcopy,
  #panel-story .story-text,
  #panel-story .story-logo,
  #panel-story .story-image img {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
}


/* ========================================
   Gallery 登場アニメーション
======================================== */

/* 初期状態 */
#panel-gallery .gallery-thumbs,
#panel-gallery .gallery-progress,
#panel-gallery .gallery-marker,
#panel-gallery .gallery-main,
#panel-gallery .gallery-thumb {
  opacity: 0;
}

/* サムネイル一覧の土台 */
#panel-gallery.is-active .gallery-thumbs {
  animation: galleryThumbAreaIn .2s ease-out .2s forwards;
}

/* サムネイルを1枚ずつ表示 */
#panel-gallery.is-active .gallery-thumb {
  animation: galleryThumbIn .4s ease-out forwards;
}

#panel-gallery.is-active .gallery-thumb:nth-child(1) {
  animation-delay: .1s;
}

#panel-gallery.is-active .gallery-thumb:nth-child(2) {
  animation-delay: .2s;
}

#panel-gallery.is-active .gallery-thumb:nth-child(3) {
  animation-delay: .3s;
}

/* 進行ラインと黄色マーカー */
#panel-gallery.is-active .gallery-progress,
#panel-gallery.is-active .gallery-marker {
  animation: galleryMarkerIn .35s ease-out .48s forwards;
}

/* 右側動画エリア */
#panel-gallery.is-active .gallery-main {
  animation: galleryMainIn .6s cubic-bezier(.22, 1, .36, 1) .38s forwards;
}



/* サムネイル押下 */
.gallery-thumb.is-pressed > img:first-child {
  animation: galleryThumbPress .3s cubic-bezier(.34, 1.56, .64, 1);
}


/* ==========================
   Keyframes
========================== */

@keyframes galleryThumbAreaIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes galleryThumbIn {
  from {
    opacity: 0;
    transform: translateX(-2cqw);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes galleryMarkerIn {
  0% {
    opacity: 0;
    transform: translateX(-1cqw) scale(.6);
  }

  70% {
    opacity: 1;
    transform: translateX(.2cqw) scale(1.1);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes galleryMainIn {
  from {
    opacity: 0;
    transform: translateX(3cqw) scale(.97);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes galleryVideoIn {
  from {
    opacity: 0;
    transform: scale(1.06);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes galleryThumbPress {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(.9);
  }

  100% {
    transform: scale(1);
  }
}


/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  #panel-gallery .gallery-thumbs,
  #panel-gallery .gallery-progress,
  #panel-gallery .gallery-marker,
  #panel-gallery .gallery-main,
  #panel-gallery .gallery-thumb,
  #panel-gallery .gallery-main video {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
}


/* ========================================
   Campaign
======================================== */

#panel-campaign {
  place-items: center;
}

.campaign-stage {
  position: relative;

  width: min(
    100vw,
    calc((100vh - var(--bar-dmm)) * 16 / 9)
  );

  height: min(
    calc(100vh - var(--bar-dmm)),
    calc(100vw * 9 / 16)
  );

  aspect-ratio: 16 / 9;

  container-type: size;
  container-name: campaign-stage;

  z-index: 1;
}

.campaign-content {
  position: absolute;
  inset: 0;
}

.campaign-content img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 上：事前登録者数 */
.campaign-preregister {
  position: absolute;
  left: -6cqw;
  top: 17cqh;
  width: 86cqw;
  height: 38cqh;
  z-index: 2;
}

/* 下：個人回転数 */
.campaign-personal {
  position: absolute;
  left: -6cqw;
  top: 56cqh;
  width: 86cqw;
  height: 32cqh;
  z-index: 2;
}

/* 右：キャラクター */
.campaign-character {
  position: absolute;
  right: -5cqw;
  bottom: 0;
  width: 32cqw;
  height: 85cqh;
  z-index: 3;
  pointer-events: none;
}


/* ========================================
   Campaign 登場アニメーション
======================================== */

/* 初期状態 */
#panel-campaign .campaign-preregister,
#panel-campaign .campaign-personal,
#panel-campaign .campaign-character {
  opacity: 0;
}

/* 上：事前登録数 */
#panel-campaign.is-active .campaign-preregister {
  animation:
    campaignPreregisterIn
    .65s
    cubic-bezier(.22, 1, .36, 1)
    .3s
    forwards;
}

/* 下：個人回転数 */
#panel-campaign.is-active .campaign-personal {
  animation:
    campaignPersonalIn
    .65s
    cubic-bezier(.22, 1, .36, 1)
    .4s
    forwards;
}

/* 右：キャラクター */
#panel-campaign.is-active .campaign-character {
  animation:
    campaignCharacterIn
    .85s
    cubic-bezier(.22, 1, .36, 1)
    .5s
    forwards;
}


/* 上段：左から表示 */
@keyframes campaignPreregisterIn {
  from {
    opacity: 0;
    transform: translateX(-3cqw);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

/* 下段：下から表示 */
@keyframes campaignPersonalIn {
  from {
    opacity: 0;
    transform: translateY(3cqh);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* キャラ：右から表示 */
@keyframes campaignCharacterIn {
  from {
    opacity: 0;
    transform: translateX(4cqw) scale(.97);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

#panel-campaign.is-active .campaign-character img {
  animation: campaignCharacterFloat 3s ease-in-out 1.1s infinite alternate;
}

@keyframes campaignCharacterFloat {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(1cqh);
  }
}



/* ========================================
   Home 登場アニメーション
======================================== */

/* 初期状態 */
#panel-home .home-logo img,
#panel-home .checkbox,
#panel-home .btn-bg {
  opacity: 0;
}

/* ロゴ */
#panel-home.is-active .home-logo img {
  animation:
    homeLogoIn
    .8s
    cubic-bezier(.22, 1, .36, 1)
    .1s
    forwards;
}

/* ========================================
   Home 事前登録ボタン
======================================== */

/* 登場用の内側ラッパー */
#panel-home .home-button-in {
  opacity: 0;
}

/* ページに入ったとき */
#panel-home.is-active .home-button-in {
  animation:
    homeButtonIn
    2s
    cubic-bezier(.34, 1.56, .64, 1)
    .45s
    both;
}

/* 待機中の上下移動 */
/* #panel-home.is-active .home-button-float {
  animation:
    homeButtonFloat
    1.8s
    ease-in-out
    2s
    infinite
    alternate;
} */

/* 登場 */
@keyframes homeButtonIn {
  0% {
    opacity: 0;
    transform: translateY(10px) ;
  }
  100% {
    opacity: 1;
    transform: translateY(0) ;
  }
}


/* 待機 */
@keyframes homeButtonFloat {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10px);
  }
}


/* hover時は表画像を消して裏画像を表示 */
.btn-regist-area .ntg-btn-registration:hover img,
.btn-regist-area .ntg-btn-registration:focus-visible img {
  animation: none;
  opacity: 0;
}

/* チェックボックス部分 */
#panel-home.is-active .checkbox {
  animation:
    homeOptionIn
    .5s
    ease-out
    .7s
    forwards;
}


/* 登録ボタンの背景装飾 */
#panel-home.is-active .btn-bg {
  animation:
    homeButtonBgIn
    .7s
    ease-out
    .3s
    forwards;
}

/* 通常時：表側の画像を表示 */
.btn-regist-area .ntg-btn-registration img {
  opacity: 1;
  transition: opacity .2s ease;
}

/* hover時：表側を消してボタン背景の画像を表示 */
/* キーボード操作時も同じ切り替え */
.btn-regist-area .ntg-btn-registration:hover img,
.btn-regist-area .ntg-btn-registration:focus-visible img {
  opacity: 0;
}



.btn-regist-area .ntg-btn-registration:hover {
  filter: brightness(1.08);
}

/* ロゴ：上から少し降りながら表示 */
@keyframes homeLogoIn {
  from {
    opacity: 0;
    transform: translateY(-3cqh) scale(.97);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}




/* チェックボックス：静かに表示 */
@keyframes homeOptionIn {
  from {
    opacity: 0;
    transform: translateY(1.5cqh);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ボタン背景：拡大しながら表示 */
@keyframes homeButtonBgIn {
  from {
    opacity: 0;
    transform: scale(.8) rotate(-3deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}



@media (prefers-reduced-motion: reduce) {
  #panel-home .home-logo img,
  #panel-home .ntg-btn-registration,
  #panel-home .ntg-btn-registration img,
  #panel-home .checkbox,
  #panel-home .btn-bg,
  #panel-home .home-bg img {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }

  #panel-home .home-bg img.bg-1 {
    transform: translateY(-25px);
  }
}


/* ========================================
   System 登場アニメーション
======================================== */

#panel-system .swiper,
#panel-system .swiper-wrapper,
#panel-system .swiper-slide {
  background: transparent;
}



#panel-system .swiper,
#panel-system .swiper-button-prev,
#panel-system .swiper-button-next {
  opacity: 0;
}

#panel-system.is-active .swiper {
  animation: systemSwiperIn .55s cubic-bezier(.22, 1, .36, 1) .25s forwards;
}

#panel-system.is-active .swiper-button-prev {
  animation: systemPrevIn .45s cubic-bezier(.22, 1, .36, 1) .45s forwards;
}

#panel-system.is-active .swiper-button-next {
  animation: systemNextIn .45s cubic-bezier(.22, 1, .36, 1) .45s forwards;
}

@keyframes systemSwiperIn {
  from {
    opacity: 0;
    transform: translateY(3cqh);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes systemPrevIn {
  from {
    opacity: 0;
    transform: translate(440px, 0);
  }
  to {
    opacity: 1;
    transform: translate(480px, 0);
  }
}

@keyframes systemNextIn {
  from {
    opacity: 0;
    transform: translate(-440px, 0);
  }
  to {
    opacity: 1;
    transform: translate(-480px, 0);
  }
}

#panel-system .swiper-slide-active {
  transition:
    transform .45s cubic-bezier(.22, 1, .36, 1),
    filter .45s ease,
    opacity .45s ease;
}

#panel-system .swiper-slide-active img {
  filter: brightness(1.05);
  animation: systemSlideFloat 5.2s cubic-bezier(.45, 0, .55, 1) .0s infinite;
  will-change: transform;
  
}

@keyframes systemSlideFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  48%,
  54% {
    transform: translate3d(0, -1.2cqh, 0);
  }
}

#panel-system .swiper-button-prev:active::before,
#panel-system .swiper-button-next:active::before {
  animation: systemArrowPress .25s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes systemArrowPress {
  0% { transform: scale(1); }
  45% { transform: scale(.82); }
  100% { transform: scale(1); }
}

/* 画像ページネーションのみ追加 */
#panel-system .system-pagination {
  position: absolute;
  left: 50%;
  bottom: 6.5vh;
  width: min(28.1vw, 563px);
  aspect-ratio: 563 / 26;
  transform: translateX(-50%);
  display: flex;
  z-index: 10;
}

#panel-system .system-pagination .swiper-pagination-bullet {
  position: relative;
  display: block;
  flex: 0 0 25.7549%;
  width: 25.7549%;
  height: 100%;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  cursor: pointer;
}

#panel-system
  .system-pagination
  .swiper-pagination-bullet:first-child {
  flex-basis: 25.9325%;
  width: 25.9325%;
}

#panel-system
  .system-pagination
  .swiper-pagination-bullet:not(:first-child) {
  margin-left: -1% !important;
}

#panel-system
  .system-pagination
  .swiper-pagination-bullet-active {
  z-index: 2;
}

#panel-system .system-pagination img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#panel-system .system-pagination__off {
  opacity: 1;
}

#panel-system .system-pagination__on {
  opacity: 0;
}

#panel-system
  .swiper-pagination-bullet-active
  .system-pagination__off {
  opacity: 0;
}

#panel-system
  .swiper-pagination-bullet-active
  .system-pagination__on {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #panel-system .swiper,
  #panel-system .swiper-slide,
  #panel-system .swiper-slide-active img,
  #panel-system .swiper-button-prev,
  #panel-system .swiper-button-next {
    animation: none !important;
    opacity: 1;
    filter: none;
  }

  #panel-system .swiper-button-prev {
    transform: translate(480px, 0);
  }

  #panel-system .swiper-button-next {
    transform: translate(-480px, 0);
  }

  #panel-system .system-pagination img {
    transition: none;
  }
}

/* ========================================
   Supportページ
======================================== */

#panel-support {
  place-items: center;
}

.support-stage {
  position: relative;
  width: min(
    100vw,
    calc((100vh - var(--bar-dmm)) * 16 / 9)
  );
  height: min(
    calc(100vh - var(--bar-dmm)),
    calc(100vw * 9 / 16)
  );
  aspect-ratio: 16 / 9;
  container-type: size;
  container-name: support-stage;
  z-index: 1;
}

#panel-support .support-content {
  position: absolute;
  inset: 0;
  z-index: 2;
}

#panel-support .support-game-info,
#panel-support .support-logo,
#panel-support .support-links {
  position: absolute;
  opacity: 0;
}

#panel-support .support-game-info {
  top: 19.7cqh;
  left: 5.5cqh;
  width: 95.5cqh;
  height: auto;
}

#panel-support .support-logo {
  top: 23cqh;
  left: 103.2cqh;
  width: 68.7cqh;
  height: auto;
}

#panel-support .support-links {
  top: 63cqh;
  left: 106cqh;
  width: 62.1cqh;
  aspect-ratio: 734 / 185;
}

#panel-support .support-links__frame {
  display: block;
  width: 100%;
  height: 100%;
}

#panel-support .support-links__buttons {
  position: absolute;
  inset: 3cqh 3.5cqh 1.5cqh;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5cqh;
}

#panel-support .support-links__buttons a,
#panel-support .support-links__buttons img {
  display: block;
  width: 100%;
  height: auto;
}

#panel-support .support-links__buttons a {
  position: relative;
  align-self: center;
  transition: transform .18s ease-out;
}

#panel-support .support-link__default,
#panel-support .support-link__pressed {
  transition: opacity .14s ease-out;
}

#panel-support .support-link__pressed {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

#panel-support .support-links__buttons a:hover .support-link__default,
#panel-support .support-links__buttons a:active .support-link__default {
  opacity: 0;
}

#panel-support .support-links__buttons a:hover .support-link__pressed,
#panel-support .support-links__buttons a:active .support-link__pressed {
  opacity: 1;
}

#panel-support .support-links__buttons a:hover {
  transform: scale(.97);
}

#panel-support .support-links__buttons a:active {
  transform: scale(.84);
}

#panel-support .support-links__buttons a.is-pressed {
  animation: supportLinkPress .22s ease-out;
}

#panel-support .support-links__buttons a:focus-visible {
  outline: .28cqh solid #357bff;
  outline-offset: .37cqh;
}

@keyframes supportLinkPress {
  0%   { transform: scale(.84); }
  100% { transform: scale(.97); }
}

#panel-support.is-active .support-game-info {
  animation: supportInLeft .7s .12s ease forwards;
}

#panel-support.is-active .support-logo {
  animation: supportInRight .7s .22s ease forwards;
}

#panel-support.is-active .support-links {
  animation: supportInUp .65s .34s ease forwards;
}

@keyframes supportInLeft {
  from { opacity: 0; transform: translateX(-2.2cqh); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes supportInRight {
  from { opacity: 0; transform: translateX(2.2cqh); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes supportInUp {
  from { opacity: 0; transform: translateY(1.85cqh); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #panel-support .support-game-info,
  #panel-support .support-logo,
  #panel-support .support-links {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  #panel-support .support-links__buttons a {
    animation: none !important;
    transition: none;
  }

  #panel-support .support-link__default,
  #panel-support .support-link__pressed {
    transition: none;
  }
}

/* ========================================
   Smartphone / tablet responsive stage
   PC版と同じ16:9の構図を、端末の縦横比に
   かかわらず欠けない大きさで画面内へ収める。
======================================== */
/* SP専用レイアウトは廃止。互換確認用に定義だけ残し、適用しない。 */
@media not all {
  :root {
    --mobile-stage-width: min(
      100vw,
      calc((100dvh - var(--bar-dmm)) * 16 / 9)
    );
    --mobile-stage-height: min(
      calc(100dvh - var(--bar-dmm)),
      calc(100vw * 9 / 16)
    );
  }

  html,
  body {
    min-width: 0;
    min-height: 100%;
    /*
     * Mobile Safari は fixed 背景を端末回転後も横向きの描画面として
     * キャッシュすることがあるため、モバイルでは通常スクロール背景にする。
     */
    background: #eaf2ff url("../img/bg.webp") center / cover no-repeat;
  }

  main {
    position: fixed;
    top: var(--bar-dmm);
    right: 0;
    bottom: 0;
    left: 0;
    width: var(--mobile-stage-width);
    height: var(--mobile-stage-height);
    min-width: 0;
    margin: auto;
    padding-top: 0 !important;
    transform: none;
    container-type: size;
    container-name: mobile-stage;
  }

  main > header {
    inset: 0;
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  .track,
  .slide {
    width: 100%;
    height: 100%;
  }

  .gallery-stage,
  .story-stage,
  .campaign-stage,
  .support-stage {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    /*
     * SPではmainが既にサイズコンテナになっている。
     * ここでも入れ子のサイズコンテナを作ると、端末回転後にChrome/Safariが
     * 内側のcqw/cqhだけ横向き時の寸法で保持することがある。
     */
    aspect-ratio: auto;
    container-type: normal;
    container-name: none;
  }

  /* Characterは親要素にも明示的な高さが必要。 */
  #panel-character .content,
  #panel-character #char-viewer,
  #panel-character .container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
  }

  #panel-character .container {
    aspect-ratio: 16 / 9;
  }

  .page-title {
    top: 5.5cqh;
    left: 27%;
  }

  .page-title img {
    width: 36.5cqw;
    max-width: none;
    max-height: none;
    height: auto;
  }

  /* Home */
  .home-video {
    width: 90%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    transform: translate(4.1cqw, -4.6cqh);
  }

  .home-bg img {
    width: 100%;
    height: auto;
  }

  .home-bg img.bg-1 {
    transform: translateY(-2.3cqh);
  }

  .home-bg img.bg-2 {
    transform: translateY(-4.6cqh);
  }

  .home-logo {
    transform: translate(15.6cqw, 6.9cqh);
  }

  .home-logo img {
    width: 66.7cqw;
  }

  #panel-home .content {
    width: 100%;
    height: 100%;
  }

  .btn-regist-area {
    top: 15cqh;
    width: 100%;
  }

  .btn-regist-area .ntg-btn-registration {
    top: 3cqh;
    width: 73.5cqw;
    height: 30.5cqh;
    padding: 0;
    border-radius: 2.8cqh;
    background-size: 100% 100%;
    overflow: hidden;
  }

  .btn-regist-area .ntg-btn-registration img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
  }

  .btn-bg {
    top: -8.3cqh;
    left: 50%;
    translate: -50% 0;
  }

  .btn-bg img {
    display: block;
    width: 100%;
    height: auto;
  }

  .checkbox {
    width: 20.1cqw;
    min-width: 0;
    padding: 1.2cqh .52cqw;
    font-size: 1.2cqh;
    line-height: 1.5;
    box-sizing: content-box;
    scale: 2.25;
    transform-origin: top center;
  }

  .checkbox.type-oblong {
    width: 20.1cqw;
    min-width: 0;
  }

  .checkbox.type-oblong .box-info,
  .checkbox.type-oblong .box-prof {
    width: 9.38cqw;
  }

  .checkbox.type-oblong .box-kiyaku {
    top: .56cqh;
    margin-left: 9.38cqw;
  }

  .checkbox span {
    margin-bottom: .28cqh;
  }

  .checkbox span,
  .checkbox p {
    gap: .26cqw;
    margin-top: 0;
    margin-bottom: .28cqh;
  }

  .checkbox input {
    flex: 0 0 auto;
    width: 1.2cqh;
    height: 1.2cqh;
  }

  .checkbox label {
    gap: .26cqw;
  }

  /* System */
  #panel-system .content {
    width: 100%;
    height: 100%;
  }

  #panel-system .swiper {
    width: 57.3cqw;
    height: 62cqh;
    margin: 13cqh auto 0;
  }

  #panel-system .swiper-slide {
    width: 44.3cqw;
    height: 50cqh;
    padding: 0;
  }
  

  #panel-system .swiper-button-prev,
  #panel-system .swiper-button-prev:hover,
  #panel-system .swiper-button-prev:active {
    left: 20cqw;
    right: auto;
    transform: none;
  }

  #panel-system .swiper-button-next,
  #panel-system .swiper-button-next:hover,
  #panel-system .swiper-button-next:active {
    right: 22cqw;
    left: auto;
    transform: none;
  }

  #panel-system .swiper-button-prev::before,
  #panel-system .swiper-button-next::before {
    width: 2.2cqw;
    height: 5.1cqh;
  }

  #panel-system .system-pagination {
    bottom: 6.5cqh;
    width: 29.3cqw;
  }

  /* Menu: the menu remains a full-screen touch surface. */
  .sp-nav-toggle {
    top: calc(var(--bar-dmm) + 12px);
    right: 14px;
    width: 58px;
    height: 58px;
  }

  .floating-menu-social {
    top: calc(var(--bar-dmm) + 18px);
    right: 82px;
    gap: 8px;
  }

  .floating-menu-social .ico {
    width: 46px;
    height: 46px;
  }

  .sp-nav {
    inset: var(--bar-dmm) 0 0;
  }

  .sp-nav__inner {
    width: min(92vw, 50.3cqh);
    top: 0;
  }

  .brand {
    transform: translate(-3.1cqw, .9cqh);
  }

  .brand img {
    height: 19cqh;
  }
}

@media not all {
  /*
   * 16:9のステージは配置基準として残すが、縦画面では上下にはみ出した
   * 画像まで main / slide が切り取らないようにする。画面端でのクリップは
   * html・body側が担当する。
   */
  main,
  .track,
  .slide {
    overflow: visible;
  }
}

@media not all {
  #dmm_ntgnavi .navi_left {
    width: 72%;
  }

  #dmm_ntgnavi .navi_right {
    width: 28%;
  }

  #dmm_ntgnavi .navi_left li > a span {
    padding-right: 2px;
    white-space: nowrap;
  }

  #dmm_ntgnavi .navi_right li {
    margin-right: 2px;
    padding-right: 0;
    white-space: nowrap;
  }

  .sp-nav__inner {
    width: 92vw;
    max-width: 430px;
  }
}

/* ========================================
   Portrait orientation notice
======================================== */
.orientation-notice {
  display: none;
}

@media screen and (orientation: portrait) and (max-width: 1024px) {
  .orientation-notice {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:
      max(24px, env(safe-area-inset-top))
      max(24px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    background: rgba(55, 61, 70, .94);
    -webkit-backdrop-filter: grayscale(1) blur(5px);
    backdrop-filter: grayscale(1) blur(5px);
  }

  .orientation-notice__phone {
    position: relative;
    width: 54px;
    height: 92px;
    margin-bottom: 30px;
    border: 4px solid currentColor;
    border-radius: 10px;
    box-sizing: border-box;
    animation: orientationPhone 1.8s ease-in-out infinite;
  }

  .orientation-notice__phone::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 7px;
    height: 7px;
    border: 2px solid currentColor;
    border-radius: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
  }

  .orientation-notice__title {
    margin: 0;
    font-size: clamp(21px, 6vw, 32px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .06em;
  }

  .orientation-notice__text {
    margin: 12px 0 0;
    font-size: clamp(13px, 3.8vw, 18px);
    line-height: 1.7;
    opacity: .82;
  }
}

@keyframes orientationPhone {
  0%,
  18% {
    transform: rotate(0deg);
  }

  55%,
  100% {
    transform: rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orientation-notice__phone {
    animation: none;
    transform: rotate(90deg);
  }
}