@charset "utf-8";
/* =====================
   Base
===================== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html {
  scroll-behavior: smooth;
}
body{
  font-family:"Inter","Noto Sans JP",sans-serif;
  background:#e9e2d4;
  color:#333;
  overflow-x:hidden;
  font-size:18px;
    line-height: 1.8;
}


@media (max-width:992px){
    body{
  font-size:16px;
}
}


a{ color:inherit; text-decoration:none; }
body.paper-bg{ min-height:100vh; }

/* =====================
   Vars
===================== */
:root{
  --csx-ease: cubic-bezier(.2,.9,.1,1);
  --csx-ease2: cubic-bezier(.22,.61,.36,1);
}
/* 生成り紙っぽい背景（画像なしCSSだけ） */
.paper-bg{
  position: relative;
  background-color: #f3ead6;

  /* ①紙色＋フチの黄ばみ（ビネット） */
  background-image:
    radial-gradient(120% 95% at 50% 45%,
      rgba(255,255,255,.78) 0%,
      rgba(246,236,214,.95) 55%,
      rgba(235,215,170,.55) 100%),
    radial-gradient(70% 60% at 8% 10%,
      rgba(255,214,120,.18) 0%,
      rgba(255,214,120,0) 70%),
    radial-gradient(70% 60% at 92% 90%,
      rgba(255,214,120,.16) 0%,
      rgba(255,214,120,0) 70%);
}

/* ②微ノイズ（SVGのturbulenceを重ねる） */
.paper-bg::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'>\
<filter id='n'>\
<feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/>\
</filter>\
<rect width='260' height='260' filter='url(%23n)' opacity='.22'/>\
</svg>");
  background-size:260px 260px;

  opacity:.14;                 /* ノイズ量 */
  mix-blend-mode:multiply;     /* 紙になじませる */
  filter: contrast(1.1) saturate(.65);
}

/* ③繊維っぽい“スジ”を極薄で */
.paper-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background-image:
    repeating-linear-gradient(
      120deg,
      rgba(120,90,40,.035) 0px,
      rgba(120,90,40,.035) 1px,
      rgba(255,255,255,0) 6px,
      rgba(255,255,255,0) 12px
    );
  opacity:.35;
  mix-blend-mode:soft-light;
}


.paper-bg{background: url("../img/ice_age2.png") ;
    background-repeat: repeat;
    background-position:top center;}

/* =====================
   Header
===================== */
header{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:50px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:200;
  pointer-events:none;
}
header *{ pointer-events:auto; }

/* left-Title PC */
.logo{
  position:fixed;
  top:26px; left:24px;
  transform-origin:left top;
  transform:scale(1);
  transition:transform .25s ease;
  z-index:220;
  -webkit-tap-highlight-color: transparent;
}
body.is-scrolled .logo{ transform:scale(.75); }

@media (max-width:992px){
.logo{display: none;}
}/**/

/* =====================
   PC nav (base)
===================== */

/* nav本体（デフォは横：※SPではdisplay:noneのまま使える） */
.nav{
  display:flex;
  margin-left:auto;
}

/* クリック領域 */
.nav a{
  display:inline-flex;
  align-items:center;
  padding:10px 6px;
  border-radius:999px;
  line-height:1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  /* “動き”は通常状態に書く（hoverに書かない） */
  transform: translateX(0);
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}

/* SVG/IMG 共通：中身がクリックを邪魔しない */
.nav a svg,
.nav a img{
  display:block;
  pointer-events:none;
  user-select:none;
}
/* Logo */
.logo .svg-text{
  height:2rem;
  width:auto;
}

/* サイズ（nav内だけ） */
.nav .svg-text{
  height:1.3rem;
  width:auto;
}

/* ===== PC NAV hover：SVGだけ少し動かす===== */

/* a自体は動かさない（レイアウト崩れ防止） */
.nav a:hover{
  transform: none;
}

/* SVG(=img.svg-text)だけをちょい動かす */
.nav a .svg-text{ 
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  will-change: transform;
}

.nav a:hover .svg-text{
  transform: translateX(10px);
filter:
  grayscale(1)
  contrast(1.25)
  brightness(0.78)
  drop-shadow(0 4px 10px rgba(0,0,0,.14));
}
/* =====================
   PC nav → 縦並び（SPはそのまま）
   + active indicator line (viewport-left, long)
===================== */
@media (min-width:993px){
  .nav{
    position: fixed;
    top: 80px;

    /* ★ナビ全体をもっと左へ */
    left: 6px;                 /* 14px → 6px（好みで0〜10） */

    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;

    margin-left: 0;
    z-index: 235;
  }

  .nav a{
    position: relative;

    /* ★SVG（中身）をもっと左へ寄せる */
    padding: 6px 10px 6px 26px; /* left paddingを小さくする */
  background:none;
  border: none;

  }

  .nav a:hover{
    background: rgba(247,246,243,.70);
  }

  .nav .svg-text{
    height: 1rem;
    width: auto;
  }

  /* =========
     Left-edge guide line
     - line starts at viewport left (0)
     - grows long on active
  ========= */
  .nav a::after{
    content:"";
    position:absolute;

    /* ★ここが肝：viewport左(0)にピタ */
    left: calc(-6px - 26px);    /* = -(nav left + a padding-left) */

    top: 50%;
    height: 2px;

    /* ★ベースからもう長め */
    width: 60px;

    background: rgba(211,138,166,.9);
    border-radius: 999px;

    opacity: 0;
    transform: translateX(-18px) translateY(-50%);

    transition:
      opacity .22s ease,
      transform .36s cubic-bezier(.22,.61,.36,1),
      width .36s cubic-bezier(.22,.61,.36,1);
  }

  /* current */
  .nav a.is-active::after{
    opacity: 1;
    transform: translateX(0) translateY(-50%);

    /* ★ガイド線級にロング */
    width: 55px;
  }

  /* hover preview */
  .nav a:hover::after{
    opacity: .55;
    transform: translateX(0) translateY(-50%);
    width: 110px;
  }
}

/* =====================
   Hamburger / Close：PRO版
   - 当たり判定は大きいまま
   - 3本線→× へ“収束して交差”する変形
   - 押した時の質感 / フォーカス / reduced motion 対応
===================== */

/* Hamburger（PC/SP共通） */
.hamburger{
  display:block;
  width:24px; height:24px;
  position:fixed;  top:0; right:0;
  cursor:pointer;
  z-index:230;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  /* 当たり判定（見た目は大きくしすぎない） */
  padding:15px;
  box-sizing: content-box;
   border-radius:50%;

  /* “見失わない”薄い面 */
  background: rgba(233,110,160,.86);
  /*border: 2px solid #fff;*/

  /* ちょい立体（主張しない） */
  box-shadow:
    0 10px 26px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.40);

  transition:
    transform .18s cubic-bezier(.2,.9,.2,1),
    background .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;
}

/* 3本線 */
.hamburger span{
  position:absolute;
  left:12px;                 /* padding分 */
  width:28px;
  height:2px;
  border-radius:999px;

  background:#fff;

  /* “音が鳴る”薄い質感（効く） */
  box-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 -1px 0 rgba(0,0,0,.16);

  /* 変形の要：軸を中央に固定 */
  transform-origin: 14px 1px;

  transition:
    transform .48s cubic-bezier(.2,.9,.2,1),
    opacity .18s ease,
    filter .25s ease,
    background .25s ease;
  will-change: transform, opacity;
}

.hamburger span:nth-child(1){ top:18px; }
.hamburger span:nth-child(2){ top:26px; }
.hamburger span:nth-child(3){ top:34px; }

/* hover（PC）: ほんの少しだけ“呼吸” */
@media (hover:hover){
  .hamburger:hover{
    background: rgba(245,238,220,.92);
    box-shadow:
      0 14px 34px rgba(0,0,0,.13),
      inset 0 1px 0 rgba(255,255,255,.50);
    transform: translateY(-1px);
  }
  .hamburger:hover span{ filter: contrast(1.05) brightness(.95); }
}

/* active（押下）: ちゃんと沈む */
.hamburger:active{
  transform: scale(.94);
}

/* キーボードフォーカス */
.hamburger:focus-visible{
  outline: 3px solid rgba(255,102,153,.65);
  outline-offset: 4px;
}

/* =====================
   menu-open：3本線→×
   “中央へ収束してから交差”の気持ちよさ
===================== */
body.menu-open .hamburger{
  /* 開いた状態は少しだけ起き上がる（反発） */
  transform: scale(1.02);
}

/* 上段：中央へ→回転 */
body.menu-open .hamburger span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
  background:#eee;
}

/* 中段：消す（ただ消すと弱いので、ほんの少し縮んでから消える感じ） */
body.menu-open .hamburger span:nth-child(2){
  opacity:0;
  transform: scaleX(.55);
}

/* 下段：中央へ→回転 */
body.menu-open .hamburger span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
  background:#eee;
}


/* =====================
   Close（×）：文字を使わず、線で描く
   - 押しやすい
   - “戻る”ニュアンスで少しだけ回る
===================== */
.sp-menu .close{
  position:absolute;
  top:15px; right:15px;
  z-index:260;

  width:52px;
  height:52px;
  display:grid;
  place-items:center;

  cursor:pointer;
   border-radius:50%;

  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);

  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.22);

  /* “×文字”がある場合は見えないようにする（アクセシビリティは残る） */
  color: transparent;
  text-shadow: none;
  user-select:none;

  transition:
    transform .28s cubic-bezier(.2,.9,.2,1),
    background .25s ease,
    box-shadow .25s ease;
}

/* 線で×を描く */
.sp-menu .close::before,
.sp-menu .close::after{
  content:"";
  position:absolute;
  width:26px;
  height:2px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  box-shadow:
    0 1px 0 rgba(0,0,0,.20),
    0 0 14px rgba(255,255,255,.12);
  transform-origin:center;
}

.sp-menu .close::before{ transform: rotate(45deg); }
.sp-menu .close::after { transform: rotate(-45deg); }

/* hover */
@media (hover:hover){
  .sp-menu .close:hover{
    background: rgba(255,255,255,.20);
    transform: translateY(-1px);
  }
}

/* active：少し回って“戻る”感じ */
.sp-menu .close:active{
  transform: rotate(-90deg) scale(.92);
}

.sp-menu .close:focus-visible{
  outline: 3px solid rgba(255,102,153,.65);
  outline-offset: 4px;
}

/* iOS系：セーフエリア */
@supports (padding: max(0px)){
  .hamburger{ top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); }
  .sp-menu .close{ top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
}



/* =====================
   SP Fullscreen Menu
===================== */
.sp-menu{
  position:fixed;
  inset:0;
  background:rgba(234,109,164,.95);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:240;
}
body.menu-open .sp-menu{
  opacity:1;
  pointer-events:auto;
}

.sp-menu nav{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
}

/* ★SVG用：クリック領域 */
.sp-menu nav a.sp-navLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  width:auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sp-menu nav a.sp-navLink:active{ transform: scale(.98); }

.sp-menu nav a .sp-svg{
  height: 24px; /* 好みで調整 */
  width: auto;
  display:block;
  pointer-events:none;
  user-select:none;
}


/* =====================
   SP Menu SVG : open毎に「入る」アニメ（毎回発火）
===================== */

/* 閉じてる間は“準備状態” */
.sp-menu nav a .sp-svg{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(10px);
  will-change: transform, opacity, filter;
}

/* 開いた瞬間に走るキーフレ */
@keyframes spSvgIn{
  0%{
    opacity: 0;
    transform: translateY(10px);
    filter: blur(12px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* menu-open の時だけアニメ実行（＝開くたびに毎回走る） */
body.menu-open .sp-menu nav a .sp-svg{
  animation: spSvgIn .55s cubic-bezier(.2,.9,.1,1) both;
}

/* ちょい“順番”をつける（PC nav みたいに） */
body.menu-open .sp-menu nav a:nth-child(1) .sp-svg{ animation-delay: .14s; }
body.menu-open .sp-menu nav a:nth-child(2) .sp-svg{ animation-delay: .20s; }
body.menu-open .sp-menu nav a:nth-child(3) .sp-svg{ animation-delay: .26s; }
body.menu-open .sp-menu nav a:nth-child(4) .sp-svg{ animation-delay: .32s; }
body.menu-open .sp-menu nav a:nth-child(5) .sp-svg{ animation-delay: .38s; }
body.menu-open .sp-menu nav a:nth-child(6) .sp-svg{ animation-delay: .44s; }
body.menu-open .sp-menu nav a:nth-child(7) .sp-svg{ animation-delay: .52s; }
/* いまの「タップ中」のtransformと競合しないように上書き */
body.menu-open .sp-navLink:active .sp-svg{
  /* activeの縮小は残すが、Y移動はしない */
  transform: scale(.96);
  filter: grayscale(1) contrast(1.1) brightness(0.9);
}



/* =====================
   SP nav tap feedback
===================== */

/* SVG準備 */
.sp-navLink .sp-svg{
  transition: filter .15s ease, transform .15s ease;
}

/* タップ中 */
.sp-navLink:active .sp-svg{
  filter:
    grayscale(1)
    contrast(1.1)
    brightness(0.9);
  transform: scale(.96);
}
/* =====================
opening : minimal fade-in (no per-char stagger)
===================== */
.op-char{
  opacity:1;
  transform:none;
  filter:none;
  animation:none !important;
}

/* SVGサイズ */
.op-svg{
  width:min(760px, 86vw);
  height:auto;
  overflow:visible;
}

/* opening表示時にまとめて1回だけ出す */
.opening .op-svg{
  opacity:0;
  transform: translateY(-200px);
  animation: opSvgIn .45s cubic-bezier(.22,.61,.36,1) both;
}

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

.opening{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:#ea6da4;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  isolation:isolate;

  /* 最後にopening自体が消える（KVへ） */
  transition: opacity .28s ease 1.42s, visibility .28s ease 1.42s;
}




/* ドット文字の雰囲気：DotGothic16が一番軽くて安定 */
.op-text{
  font-family:"DotGothic16","Noto Sans JP","Inter",sans-serif;

  font-size:126px;
  letter-spacing:.18em;

  fill: rgba(0,0,0,.92);

  /* ▼ ここが太さの正体 */
  paint-order: stroke;
  stroke: rgba(0,0,0,.92);   /* 塗りと同色で太らせる */
  stroke-width: 3.5px;       /* ← 2px → 3.5px（効く） */

  /* 縁の明るさをほんのり残す */
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.25))
    drop-shadow(0 10px 24px rgba(0,0,0,.25));

  transform-origin:50% 50%;
}
/* 崩壊アニメ（文字） */
.opening.is-out .op-text{
  /* SVGフィルタ撤去（iPadで重い） */
  animation: opCrumble 1.35s steps(14,end) both; /* ← 長く */
}

@keyframes opCrumble{
  0%{
    opacity:1;

  }
  35%{
    opacity:1;

  }
  70%{
    opacity:.55;

  }
  100%{
    opacity:0;

  }
}

/* opening自体はJSのis-outで最終的に消える */
.opening.is-out{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition-delay: .98s; /* ★追加：崩壊の後に消える */
}

body.is-opening{ overflow:hidden; }


/* =====================
   KV：PC=背景(fixed) / iPad以下=画像+バナー（管理ラク）
===================== */

/* 共通：KV箱 */
.kv{
  position: relative;
  overflow: hidden;
}

/* SP用（画像・バナー）はデフォ非表示（＝PCでは出さない） */
.kv-media,
.kv-banner{
  display:none;
}

/* kv-logo（使っている場合のため残す） */
.kv-logo{
  position:absolute;
  top:50%; left:50%;
  width:40vw;
  max-width:420px;
  transform:translate(-50%,-50%) scale(1);
  will-change:transform,opacity;
  backface-visibility:hidden;
  transform-origin:center center;
  opacity:0;
}

/* =====================
   PC（993px〜） kv-img
===================== */
@media (min-width: 993px){
  .kv{ height: 100svh; }
  @supports (height: 100dvh){
    .kv{ height: 100dvh; }
  }

  .kv-img{
    position:fixed;
    inset:0;
    z-index:-1;
    opacity:1;
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility:hidden;
    transform-origin:center center;
    overflow:hidden;

    /* ★ブラーイン（PCのみ） */
    filter: blur(18px);
    transition:
      opacity .35s linear,
      filter 1.2s cubic-bezier(.22,.61,.36,1);
  }

  /* ★JSでfilterを触らない：kv-enter になったらCSSだけでブラーが抜ける */
  body.kv-enter .kv-img{ filter: blur(0px); }

  /* front layer (contain) */
  .kv-img::after{
    content:"";
    position:absolute;
    inset:0;
    background:url("../img/kv-pc.jpg") center/contain no-repeat;
  }
}

/* =====================
   iPad以下（〜992px）：背景方式を捨てて「画像 → バナー」を積む
===================== */
@media (max-width: 992px){
  /* svh/dvhで画面高さを作らない（余白問題の根絶） */
  .kv{margin-top: 55px;/*三本線高さ*/
    height:auto;
    min-height:0;
    overflow:visible;
  }

  /* PC用の背景レイヤーは完全停止 */
  .kv-img{ display:none !important; }
  .kv-img::after{ content:none !important; }

  /* 実画像：幅100%で高さが確定 */
  .kv-media{
    display:block;
    width:100%;
  }
  .kv-mediaImg{
    display:block;
    width:100%;
    height:auto;
  }

  /* バナー：画像の直下にきっちり */
  .kv-banner{
    display:block;
    padding: 0 16px 16px;
    background: rgba(235,110,166,.92);
  }
  .kv-bannerLink{font-size: 1.15rem;
    display:block;
    text-align:center;
    font-weight:700;
    letter-spacing:.06em;
    line-height:1.2;
  }


}


/* =====================
   Sections
===================== */
section{
  position:relative;
  z-index:1;padding-top: 100px;
}

.section-inner{
  max-width:1000px;
  margin:auto;
  padding:0 16px 80px;
}


.section-inner100{
  max-width:100%;
  margin:auto;
  padding:0 16px 80px;
}

.section-inner p{ line-height:1.8; }


@media (max-width:992px){
    
    section{
padding-top: 50px;
}

    
  .section-inner{
    max-width:90%;
    margin:auto;
    padding:0 0 80px;
  }
    .section-inner100{
  max-width:100%;
  margin:auto;
    padding:0 0 80px;
}
}/**/



.paper-bridge{overflow: hidden;/*スマホ対策*/
  position: relative;
  margin-top: -10vh;   /* ← KV側に被せる */
  padding-top: 10vh;  /* ← レイアウトは崩さない */
}


@media (max-width:992px){
.paper-bridge{
  margin-top: 0;   /* ← KV側に被せる */
  padding-top: 0;  /* ← レイアウトは崩さない */
}

}


.paper-bridge::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;

  background: linear-gradient(
    to bottom,
    rgba(247,246,243,0.00) 0%,   /* KV色そのまま */
    rgba(247,246,243,0.70) 25%,  /* NEWS頭：白に溶ける */
    rgba(247,246,243,0.95) 45%,  /* NEWS中：ほぼ白 */
    rgba(247,246,243,0.60) 65%,  /* INTRO前半：紙が出始める */
    rgba(247,246,243,0.20) 80%,  /* INTRO中盤 */
    rgba(247,246,243,0.00) 100%  /* INTRO後半：紙100% */
  );
}

#news, #intro{
  position: relative;
  z-index: 3;
}
#news::before, #news::after,
#intro::before, #intro::after{
  content:none !important;
}

#story,#staffcast{

}


/* =====================
   intro strong marker
===================== */

#intro p strong{
  font-weight: 700;background:rgba(243,242,148,.5);
 /* background: linear-gradient(
    transparent 60%,
    rgba(243,242,148,.5) 60%
  );*/
  padding: 0 .15em;
}
/* =====================
   STORY strong marker (minimal / no animation)
===================== */
#story p strong{
  font-weight: 700;
  background: none;
  padding: 0;
}

/* =====================
   NEWS
===================== */
.news-list{
  list-style:none;
  margin:0;
  padding:0;
}

.news-item{margin-bottom: 15px;
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:24px;
  padding:16px 30px;background: url("../img/ice_age.png") ;
    background-repeat: repeat;
    background-position:top center;border-radius: 10px;
}


.news-date{color: #cc402b;
  letter-spacing:.08em;
  opacity:.8;
}

.news-title{
  line-height:1.6;
  text-decoration:none;
}

.news-title:hover{
  text-decoration:underline;
}

/* SP */
@media (max-width:768px){
  .news-item{
    grid-template-columns: 1fr;
    gap:6px;
  }
}

/* =====================
   PageTop
===================== */
.page-top{
  position:fixed;
  right:10px;
  bottom:0;
  width:54px;
  height:95px;

  /* 文字は消す（アクセシビリティは残る） */
  text-indent:-9999px;
  overflow:hidden;

  background:
    url("../img/page-top.png") center/contain no-repeat;


  cursor:pointer;

  opacity:0;
  transform:translateY(20px);
  transition:.4s;
  z-index:180;
}

.page-top.is-visible{
  opacity:1;
  transform:translateY(5px);
}

/* hover（PC） */
@media (hover:hover){
  .page-top:hover{
    transform:translateY(0px);
  }
}
/* SP */
@media (max-width:768px){
.page-top{  width:35px;
  height:62px;
  right:1px;
  bottom:0;
  }
}


/* =====================
   NAV & HAMBURGER：整理版
   - PC：nav表示（必要ならhamburgerも表示）
   - SP：nav非表示（hamburgerのみ）
===================== */

/* ハンバーガーは常時表示（PCでも出したい場合） */
.hamburger{ display:block; }

/* PCナビ：基本は表示 */
.nav{ display:flex; }

/* スマホ/タブレットではPCナビを消す（ここが肝） */
@media (max-width:992px){
  .nav{ display:none; }
}
/* =====================
   Headings (FX)
===================== */
/* base look */

.svg-text {
  height: 5.2rem;   /* ← 文字サイズ基準 */
  width: auto;    /* ← 重要 */
  display: inline-block;
}
/* H2は完全に静止 */
section h2{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}


@media (max-width:1240px){
.svg-text {
  height: 4.5rem; 
}

}/**/
@media (max-width:992px){
.svg-text {
  height: 2.6rem; 
}

}/**/

section h3{ font-size:1.7em; line-height: 1.4;}



/* h3: split */
.h3-split span{
  display:inline-block;
  opacity:0;
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg));
  filter: blur(2px);
  will-change: transform, opacity, filter;
}
.h3-split.is-show span{
  animation: h3CreepyIn .8s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes h3CreepyIn{
  to{
    opacity:1;
    transform:translate(0,0) rotate(0deg);
    filter:blur(0);
  }
}
@media (max-width:992px){

section h3{ font-size:1.3em;}

}/**/
/* =====================
   CAST/STAFF (csx-)
===================== */


.csx{
  --csx-avatar-size: min(300px, 100%);
--csx-name-size: clamp(1.35em, 1.2vw, 2.05em);
  width:100%;
  line-height:1.8;
}
.csx *{ box-sizing:border-box; }

.csx-title{
  text-align:center;
  font-weight:700;
  letter-spacing:.08em;
  margin:0 auto;
}

.csx-block{

}

/* STAFF grid */
.csx-staffGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  max-width:37%;
  margin:auto;
}

/* CSX images: keep static (no grayscale animation) */
.csx-avatar img{
  filter: none;
  transition: none;
}

.csx-staffItem{
  grid-template-columns:auto 1fr;
  align-items:start;
}

.csx-staffRole{
  font-weight:700;
  letter-spacing:.08em;
  margin:auto;
  text-align:center;
}

.csx-staffName{
  text-align:center;
  font-size: var(--csx-name-size);
  font-weight:700;
  letter-spacing:.04em;
  margin-top:6px;
}

.csx-label{ font-family: "Inter",sans-serif;
  font-size:12px;
  letter-spacing:.12em;
  margin:16px 0 6px;
}
.csx-p{
  margin:0;
  font-size:14px;
}

/* =====================
   CAST rows layout（NEW：1段目=4列 / 2段目=3列）
   HTML側：
   - 1段目：<div class="csx-castRow csx-row4">
   - 2段目：<div class="csx-castRow csx-row3">
===================== */

.csx-castRows{
  display:flex;
  flex-direction:column;
  gap: 22px;
}

.csx-castRow{
  display:grid;
  gap: 18px;
}

/* 1段目：4列 */
.csx-row4{
  grid-template-columns: repeat(4, 1fr);
   max-width: 74%;
  margin: 0 auto;
}

/* 2段目：3列 */
.csx-row3{
  grid-template-columns: repeat(3, 1fr);
  max-width: 55.5%;
  margin: 0 auto;
}

/* --- Responsive --- */

/* 992px以下：1列 */
@media (max-width: 992px){
  .csx-staffGrid,
    .csx-row4,
  .csx-row3{
    grid-template-columns: 1fr;
    max-width: 50%;
  }
}



@media (max-width: 640px){
  .csx{ --csx-avatar-size: 90%; }
    
      .csx-staffGrid,
    .csx-row4,
  .csx-row3{
    grid-template-columns: 1fr;
    max-width: 70%;
  }
    
    
}

/* CARD */
.csx-card{
  position:relative;
  overflow:hidden;
  padding:20px 12px 24px;
}

/* Avatar container */
.csx-avatar{
  position:relative;
  overflow:hidden;
  opacity:1;
  transition:none;
}

.csx-avatar img.ph{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Name / meta */
.csx-name{
  text-align:center;
  font-size: var(--csx-name-size);
  font-weight:700;
  letter-spacing:.04em;
  margin:0;
  opacity:1;
  transition:none;
}

.csx-meta{
  padding-top:14px;
  margin-top:14px;
  opacity:1;
  transition:none;
}

/* LIP overlay */
.csx-lip{
  position:absolute;
  left:50%;
  top:55%;
  height:auto;
  max-height:76px;
  object-fit:contain;
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
  will-change: transform, opacity;
}

/* active */
.csx-lip.is-on{
  /* minimal: no infinite float */
  transform:translate(-50%,-50%);
}

/* fade */
.csx-lip.fade-in{
  opacity:1;
  transition:opacity .3s ease;
}
.csx-lip.fade-out{
  opacity:0;
  transition:opacity .4s ease;
}

/* =====================
   STORY paint (after layer)
===================== */
#story{ position:relative; }

#story .section-inner{
  position:relative;
  z-index:2;
}

#story::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;

  background:
    url("../img/paint-splash.png") 60% -3% / 22% no-repeat,
    url("../img/paint-splash.png") 82% 80% / 6% no-repeat,
    url("../img/paint-splash.png") 75% 50% / 12% no-repeat;

  opacity:0;
  transform: translateY(-10px) rotate(-2deg);
  filter: blur(2px) contrast(1.35);
  transform-origin: 50% 10%;
}

#story.paint-in::after{
  animation: paintSplatDripStory 1s cubic-bezier(.22,.8,.3,1) forwards;
}

@keyframes paintSplatDripStory{
  0%{
    opacity:0;
    transform: translateY(-14px) rotate(-2deg);
    filter: blur(12px) contrast(1.35);
  }
  45%{
    opacity:.68;
    transform: translateY(0) rotate(-2deg);
    filter: blur(1.2px) contrast(1.35);
  }
  100%{
    opacity:.4;
    transform: translateY(10px) rotate(-2deg);
    filter: blur(0) contrast(1.35);
  }
}

/* =====================
   CSX Modal
===================== */
.csx-modal{
  position: fixed;
  inset: 0;
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.csx-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.csx-modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
}
.csx-modal__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-48%);
  width: min(920px, 92vw);
  max-height: min(78vh, 720px);

  overflow: hidden;              /* ★ここが肝：panelはスクロールさせない */

  border-radius: 18px;
background: url("../img/ice_age.png") ;
    background-repeat: repeat;
    background-position:top center;
  padding: 10px 30px 20px;       /* 上は戻してOK（必要なら調整） */
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  transition: transform .25s ease;

  display: flex;                 /* ★中身を縦レイアウトに */
  flex-direction: column;

  isolation: isolate;            /* ★z-index安定 */
}
.csx-modal.is-open .csx-modal__panel{
  transform: translate(-50%,-50%);
}

.csx-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;

  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;

  border: 0;
  border-radius: 999px;
  cursor: pointer;

  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);

  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* モーダル内の section だけ、グローバルのpadding-topを無効化 */
.csx-modal .csx-modal__body section{
  padding-top: 0 !important;
}
.csx-modal__body{
  overflow: auto;                 /* ★本文だけスクロール */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;                         /* ★残り高さを全部使う */
  position: relative;
  z-index: 1;
}
.csx-modal__head{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.csx-modal__avatar img{
  width: 120px;
  height: 120px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
}

.csx-modal__role{
  opacity: .75;
  letter-spacing: .08em;
  font-size: 12px;
  margin-bottom: 6px;
}
.csx-modal__name{
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .04em;
}

.csx-modal__section{ margin-top: 14px; }
.csx-modal__sectionTitle{color: #ff6699;
  font-size: 12px;
  letter-spacing: .12em;
  margin: 0 0 6px;
  opacity: .8;
}
.csx-modal__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  white-space: pre-line; 
}

@media (max-width: 640px){
  .csx-modal__head{ grid-template-columns: 90px 1fr; }
  .csx-modal__avatar img{ width: 90px; height: 90px; }
  .csx-modal__name{ font-size: 18px; }
    .csx-modal__text{font-size: 14px;
}
}
/* =====================
   CSX：本文はモーダル用にする（カード上は隠す）
===================== */

/* staff */
#staffcast .csx-staffItem .csx-label,
#staffcast .csx-staffItem .csx-p{
  display:none;
}

/* cast（.csx-meta の中身も隠す） */
#staffcast .csx-card .csx-meta{
  display:none;
}
/* =====================
   CSX COMMENT BUTTON : print offset frame (button09 style)
   HTML:
   <button class="csx-btn" type="button"><span>COMMENT</span></button>
   ※ ▼はCSSで付ける（SVG）
===================== */

.csx-actions{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

.csx-btn{
  position: relative;
  display:flex;
  justify-content: space-between;
  align-items:center;

  margin: 0 auto;
  padding: 10px 16px;
width: min(160px, 38vw);

  background:url("../img/ice_age2.png");
  color: #444 !important;

  border: 2px solid #111;      /* 本体の外枠 */
  border-radius: 0;
  box-shadow: none;

  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .22em;
  line-height: 1;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  /* 中身が疑似要素に隠れないように */
  isolation: isolate;
}

/* 文字 */
.csx-btn > span{
  color: inherit !important;
  display:block;
  margin: 0 auto;               /* 文字を中央寄せ */
}

/* ずれた“印刷枠”（背面） */
.csx-btn::before{
  content:"";
  position:absolute;
  inset: 0;
  z-index: -1;

  /* これがズレ */
  transform: translate(-12px, 8px);

  background-color: rgba(243,242,148,.5);/*黄色*/
  
  border-radius: 0;
  box-shadow:none;
}

/* 右端の ▼（SVG） */
.csx-btn::after{
  content:"";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: 14px;

  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;

  /* ▼ SVG（黒） */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6 9l6 6 6-6' fill='none' stroke='%23111' stroke-width='2.8' stroke-linecap='square' stroke-linejoin='miter'/>\
</svg>");
    
      transition:
    transform .18s cubic-bezier(.22,.61,.36,1),
    opacity .18s ease;
}

/* hover：枠が寄る（サンプルの動き） */
@media (hover:hover){
  .csx-btn:hover::before{
    transform: translate(0, 0);
  }
  .csx-btn:hover::after{
    transform: translate(1px, 4px);
  }
    
}

/* active：押した感（不要なら消してOK） */
.csx-btn:active{
  transform: translate(1px, 1px);
}

/* focus */
.csx-btn:focus-visible{
  outline: 2px solid #111;
  outline-offset: 4px;
}



/* =================================================
   FOOTER
================================================= */

/* =====================
   tail-btn : FLAT GRAY
===================== */

.section-tail{
  display:flex;
  justify-content:center;
  margin-top: 30px;
}

.tail-btn{
  position: relative;
  display:flex;
  justify-content: space-between;
  align-items:center;

  margin: 0 auto;
  padding: 10px 16px;
  width: min(200px, 40vw);

  background:url("../img/ice_age.png");
  color: #444 !important;

  border: 2px solid #111;
  border-radius: 0;
  box-shadow: none;

  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .22em;
  line-height: 1;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  isolation: isolate;
}


@media (max-width: 992px){
  .csx-btn,.tail-btn{
    width: min(280px, 76vw);
  }
}
.tail-btn > span{
  color: inherit !important;
  display:block;
  margin: 0 auto;
}

/* 背面ズレ */
.tail-btn::before{
  content:"";
  position:absolute;
  inset: 0;
  z-index: -1;

 /* これがズレ */
  transform: translate(-12px, 8px);
background-color: rgba(160, 185, 195, .55);/*青*/
  border-radius: 0;
  box-shadow:none;
}

/* ▼ */
.tail-btn::after{
  content:"";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: 14px;

  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6 9l6 6 6-6' fill='none' stroke='%23111' stroke-width='2.8' stroke-linecap='square' stroke-linejoin='miter'/>\
</svg>");

  transition: transform .18s cubic-bezier(.22,.61,.36,1),
              opacity .18s ease;
}

/* PC hover */
@media (hover:hover){
  .tail-btn:hover::before{ transform: translate(0, 0); }
  .tail-btn:hover::after { transform: translate(1px, 4px); }
}

/* mobile tap */
.tail-btn:active{ transform: translate(1px, 1px); }

.tail-btn:focus-visible{
  outline: 2px solid #111;
  outline-offset: 4px;
}

/* =====================
   LOGO
===================== */
.footer-logoWrap{
  text-align:center;
}
.footer-logo{
  height:80px;
  width:auto;
  display:inline-block;
  opacity:.95;
margin-bottom: 2rem;

}

/* =====================
   CREDIT
===================== */
.footer-credit{
  width:100%;
  display:flex;
  justify-content:center;  /* ★ズレ防止 */
  text-align:center;
}

.footer-creditList{
  list-style:none;
  margin:0;
  padding:0;

  max-width:900px;
  width:100%;

  display:flex;
  flex-direction:column;
  align-items:center;      /* ★行ごと完全センター */

  line-height:1.45;
}

.footer-creditHeading{
  text-align:center;
  font-weight:700;
  letter-spacing:.08em;
  margin:14px 0 6px;
  padding:3px 0;

  /* ちょい見出し*/
  border-top:1px solid rgba(0,0,0,.6);
  border-bottom:1px solid rgba(0,0,0,.6);
}


.footer-creditList li{padding: 0;
  font-size:14px;

  /* インクが紙に吸われた感じ（弱め） */
  text-shadow:
    0 1px 0 rgba(0,0,0,.10),
    0 0 1px rgba(0,0,0,.18);
}

.footer-creditList li span{
  font-weight:700;
  opacity:.86;
  letter-spacing:.08em;
}

.footer-creditList li.spacer{
  height:8px;
}

/* =====================
   X LINK
===================== */
.footer-x{
  text-align:center;margin: 2rem auto;
}

.footer-x a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;

}

.footer-x a:hover{
  background:rgba(0,0,0,.22);
}

.x-icon{
  width:36px;
  height:36px;
  display:block;
}

/* =====================
   COPYRIGHT
===================== */
.footer-copy{
  text-align:center;
  font-size:0.9em;
  opacity:.82;
  letter-spacing:.02em;margin: 2rem auto;
}

/* =====================
   SP
===================== */
@media (max-width:768px){
  .site-footer{
    padding:46px 14px 22px;
  }

  .footer-logo{
    height:60px;
  }

  .footer-creditList{
    max-width:96%;
  }

  .footer-creditList li{
    font-size:14px;
    line-height:1.8;
  }

  .footer-creditList li.spacer{
    height:12px;
  }
}


/* =========================
   KV：順番に出てくる演出
========================= */

/* 初期は非表示（KVが出るまで） */
body:not(.kv-enter) header .logo,
body:not(.kv-enter) header .nav a,
body:not(.kv-enter) .kv-orbit{
  opacity:0;
  transform: translateY(10px);
  filter: blur(6px);
  pointer-events:none;
}

/* まとめて使うキーフレ */
@keyframes kv-pop {
  0%{
    opacity:0;
    transform: translateY(10px);
    filter: blur(30px);
  }
  100%{
    opacity:1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* =====================
   Header slide-in (left → right)
===================== */

/* 初期状態 */
header .logo,
header .nav a{
  opacity: 0;
  transform: translateX(-24px);
}

/* ロゴ（最初） */
body.kv-enter header .logo{
  animation: header-slide-left .7s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: .5s;
  pointer-events: auto;
}

/* PCナビ：上から順 */
body.kv-enter header .nav a{
  animation: header-slide-left .55s cubic-bezier(.22,.61,.36,1) both;
  pointer-events: auto;
}

body.kv-enter header .nav a:nth-child(1){ animation-delay: .90s; }
body.kv-enter header .nav a:nth-child(2){ animation-delay: .98s; }
body.kv-enter header .nav a:nth-child(3){ animation-delay: 1.06s; }
body.kv-enter header .nav a:nth-child(4){ animation-delay: 1.14s; }
body.kv-enter header .nav a:nth-child(5){ animation-delay: 1.22s; }
body.kv-enter header .nav a:nth-child(6){ animation-delay: 1.30s; }
body.kv-enter header .nav a:nth-child(7){ animation-delay: 1.38s; }
/* keyframes：トゥルルルル感 */
@keyframes header-slide-left{
  0%{
    opacity: 0;
    transform: translateX(-24px);
  }
  70%{
    opacity: 1;
    transform: translateX(4px); /* ← 気持ちよさの核 */
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}


/* =========================
   KV ORBIT
========================= */
/* 回るボタン */
.kv-orbit{
  position:absolute;
  right: 5%;
  bottom: 15%;
  width: 28%;
  height: 28%;
  border-radius: 999px;
  display:grid;
  place-items:center;
  z-index: 80;
  pointer-events:auto;

  /* ★ここが肝：丸でクリップ */
  overflow: hidden;
  isolation: isolate; /* ブレンド/フィルタのはみ出し対策 */
  transform: translateZ(0);
  transition: transform .25s ease;
}

/* ★背景越しブラーは「丸い::before」に移す */
.kv-orbit::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  /* backdrop-filter撤去：iPadで重いので“塗り＋影”で代替 */
  background: none;
  border: none;


  /* ちょい立体 */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 10px 30px rgba(0,0,0,.18);

  z-index:0;
}

/* 中身は前面へ */
.kv-orbitSvg,
.kv-orbitCenter{
  position: relative;
  z-index: 1;
}

.kv-orbit:hover .kv-orbitText{
  fill: rgba(204,51,51,1);
}
.kv-orbit:active{ transform: translateZ(0) scale(.98); }

/* 既存そのまま */
.kv-orbitSvg{
  position:absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
/* ★常時回転に戻す */
  animation: kvOrbitSpin 9s linear infinite;
  animation-play-state: running;

  pointer-events:none;
}
.kv-orbitText{  font-family: "Inter","Noto Sans JP",sans-serif;
  font-weight: 700; /* 必要なら */
  font-size: 18px;
  letter-spacing:.2em;
  fill: rgba(60,40,20,.9);
}
.kv-orbitCenter{ font-size: 16px;
  text-align:center;
  line-height: 1.3;
  color: rgba(60,40,20,.92);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);transition: color .15s ease;
}
.kv-orbitCenter strong{ font-weight:700; letter-spacing:.06em; }
@media (hover:hover){
  /* ★hover中は静止（PCだけ） */
  .kv-orbit:hover .kv-orbitSvg{
    animation-play-state: paused;
  }
}

@keyframes kvOrbitSpin{ to{ transform: rotate(360deg); } }


/* スマホ */
@media (max-width:992px){
  /* orbit演出はPCだけでOKならSPでは非表示 */
  .kv-orbit{ display:none; }
  .kv-logo{ display:none; }
}



/* =========================
   SEO用：見た目を変えずに H1 
========================= */
.vh{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* フォーカスされた時だけ見える（アクセシビリティ） */
.vh:focus,
.vh:focus-visible{
  position:fixed !important;
  left:12px !important;
  top:12px !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:10px 12px !important;
  overflow:visible !important;
  clip:auto !important;
  clip-path:none !important;
  white-space:normal !important;
  z-index:99999 !important;

  background:#fff !important;
  color:#111 !important;
  outline:2px solid #111 !important;
  outline-offset:2px !important;
}
/* =====================
   Footer Hearts BG
===================== */
.site-footer{
  position: relative;
  overflow: hidden;          /* はみ出し防止 */
}

/* ハートを置くレイヤー */
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  /* 初期は非表示 */
  opacity:0;
  transition: opacity .45s ease;

  /* 文字の邪魔をしないために薄くする */
  filter: saturate(.9) contrast(.95);
}

/* footer中身は前面 */
.site-footer .footer-inner{
  position: relative;
  z-index: 2;
}

/* 読みやすさ：薄いベール（必要なら） */
.site-footer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;

  /* うっすら紙っぽいベール */
  background: rgba(245,238,220,.1);
  opacity:0;
  transition: opacity .45s ease;
}

/* 発火時 */
.site-footer.is-hearts::before{
  opacity:1;
  /* ハート全体をさらに薄く */
  /* mix-blend-mode: multiply;  ← 一旦OFF（見えにくい原因） */
}
.site-footer.is-hearts::after{
  opacity:1;
}

/* 生成されるハート（JSで追加するspan） */
.site-footer .ft-heart{
  position:absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  background: url("../img/heart.png") center/contain no-repeat;
  opacity: var(--o);
  transform: rotate(var(--r)) translateZ(0);
  filter: blur(var(--b));
  pointer-events:none;
  z-index:0;

  /* ふわっと出る */
  animation: ftHeartIn .7s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes ftHeartIn{
  from{ transform: rotate(var(--r)) scale(.85); opacity:0; }
  to  { transform: rotate(var(--r)) scale(1);  opacity: var(--o); }
}

/* 好み：ゆらぎ（任意） */
.site-footer.is-hearts .ft-heart{
  animation: ftHeartIn .7s cubic-bezier(.22,.61,.36,1) both,
             ftHeartFloat 5.5s ease-in-out infinite;
}
@keyframes ftHeartFloat{
  0%,100%{ transform: rotate(var(--r)) translateY(0); }
  50%    { transform: rotate(var(--r)) translateY(-10px); }
}
/* =========================
   iOS横はみ出し対策（右に余白が出る問題）
========================= */

/* 念のため：横スクロールを殺す */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* 画像・SVGがはみ出す事故を予防 */
img, svg{
  max-width: 100%;
  height: auto;
}



/* もしまだ出る場合の保険：固定レイヤーを厳密に0-0に */
header, .sp-menu, .opening{
  left: 0;
  right: 0;
}


/* =========================
   てん（・）リスト
   ========================= */
.ten {
  list-style: none;
  padding-left: 1.25em;
  margin: 0.75em 0;
  font-size: 0.8rem;
  line-height: 1.4;
}
.ten li { position: relative; margin: 0.35em 0; }
.ten li::before { content: "・"; position: absolute; left: -1.1em; top: 0; }

/* =========================
   Utility
   ========================= */
.pc { display: none; }
@media (min-width: 992px) { .pc { display: block; } }
.sp { display: none; }
@media (max-width: 767px) { .sp { display: block; } }


/* =================================================
   PLAYGUIDE : vertical + easy tap
================================================= */
/* =================================================
   PLAYGUIDE : vertical + easy tap
================================================= */

.pg-actions{
  display:flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
}

/* 押しやすい大ボタン */
.pg-btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width: min(520px, 92vw);
  min-height: 56px;
  padding: 16px 54px 16px 18px;

  background: url("../img/ice_age2.png");
  background-repeat: repeat;
  background-position: top center;

  color:#222 !important;
  text-decoration:none;

  border: 2px solid #111;
  border-radius: 0;
  box-shadow:none;

  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  isolation:isolate;
  transition: transform .18s cubic-bezier(.22,.61,.36,1);
}

/* 背面ズレ（黄色） */
.pg-btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  transform: translate(-10px, 7px);
  background-color: rgba(243,242,148,.5);
}

/* ▼ */
.pg-btn::after{
  content:"";
  position:absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;

  background-repeat:no-repeat;
  background-position:center;
  background-size:20px 20px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6 9l6 6 6-6' fill='none' stroke='%23111' stroke-width='2.8' stroke-linecap='square' stroke-linejoin='miter'/>\
</svg>");

  transition: transform .18s cubic-bezier(.22,.61,.36,1),
              opacity .18s ease;
}

/* hover */
@media (hover:hover){
  .pg-btn:hover::before{ transform: translate(0,0); }
  .pg-btn:hover::after { transform: translateY(-50%) translate(1px, 4px); }
}

/* active */
.pg-btn:active{
  transform: translate(1px, 1px);
}

/* focus */
.pg-btn:focus-visible{
  outline: 2px solid #111;
  outline-offset: 4px;
}

/* 色替え（任意） */
.pg-btn.is-secondary::before{
  background-color: rgba(160, 185, 195, .55);
}

/* SP */
@media (max-width: 768px){
  .pg-btn{
    min-height: 60px;
    font-size: 16px;
    padding: 18px 56px 18px 18px;
  }
}

/* hover誤爆防止 */
@media (hover:none){
  .pg-btn:hover::before{ transform: translate(-10px, 7px); }
  .pg-btn:hover::after{ transform: translateY(-50%); }
}

/* =========================
   Footer Overlay Fixed Banner
========================= */
.ft-overlayBanner{width: 240px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 500; /* header(200台)やsp-menu(240)より上にするなら大きめ */
  padding: 0; 

  background: #d73d2a; /* 赤 */


  /* 文字が読みやすいように */
  backdrop-filter: none; /* iPad重いなら無しでOK */
}

.ft-overlayBanner__link{
  display: block;
  text-align: center;

  font-size: 1rem;
  font-weight: 800;
  letter-spacing:0;
  line-height: 1.35;

  color: #fff;
  text-decoration: none;

  /* タップしやすい */
  padding: 15px 10px;

}

.ft-overlayBanner__link strong{
  font-weight: 900;
}

.ft-overlayBanner__link small{
  font-size: .85em;
  opacity: .9;
}

/* hover（PCだけ） */
@media (hover:hover){
  .ft-overlayBanner__link:hover{
    filter: contrast(1.02) brightness(.98);
    transform: translateY(-1px);
    transition: transform .15s ease, filter .15s ease;
  }
}

/* SP最適化 */
@media (max-width: 992px){
    .ft-overlayBanner{width: 50%;}
    
  .ft-overlayBanner__link{
    font-size: 1rem;
    padding: 15px 10px;
  }
}
@media (max-width: 480px){
  .ft-overlayBanner__link{
    font-size: .9rem;
    line-height: 1.2;
  }
}