/* =========================================================
   Adventure Museum in Kanucha — ティザー① PC版 v3
   0717 FIXデザイン・セクション分割構造（書き出し素材ベース）
   1440px基準デザインを --u (=100vw/1440) でスケーリング
   座標は参照 PC_top_AMK_a_2.jpg のピクセル計測＋合成照合で校正
   ページ高さ: 4928
   ========================================================= */
:root{
  --u: calc(100vw / 1440);
  --white: #ffffff;
  --brown: #492710;
  --gold:  #bf954c;
  --blue:  #363eb6;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:#01114b;
  font-family:'Noto Sans JP', sans-serif;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; }

.sp-bg, .sp-bg-illumi, .sp-join{ display:none; }  /* SP専用の下半分背景＋継ぎ目ブレンド（SPメディアクエリで表示） */
.sp-br{ display:none; }            /* SP専用の改行（SPメディアクエリで表示） */

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

.lp{
  position:relative;
  width:100%;
  height:calc(var(--u) * 4928);
  overflow:hidden;
  /* 読み込み中の下地: 上は夜空・下は紙面 */
  background:linear-gradient(180deg, #000107 0%, #000107 55%, #e6e1d5 70%, #e6e1d5 100%);
}
.abs{ position:absolute; }

/* ---------- 共通テキスト ---------- */
.txt-serif{ font-family:'Noto Serif JP', serif; font-weight:500; color:var(--white); }
.txt-sans{ font-family:'Noto Sans JP', sans-serif; font-weight:500; color:var(--white); }

/* ---------- 背景・丘 ---------- */
.sky-night{ left:0; top:calc(var(--u)*6); width:100%; }
.sil-left{ left:0; top:calc(var(--u)*721); width:calc(var(--u)*476); }
.sil-right{ left:calc(var(--u)*1146); top:calc(var(--u)*760); width:calc(var(--u)*294); }
.h1-img{ left:0; top:calc(var(--u)*2141); width:100%; }
.h2-img{ left:0; top:calc(var(--u)*2916); width:100%; }
.h3-img{ left:0; top:calc(var(--u)*3056); width:100%; }

/* ---------- KV（イントロ）: 空(星空+朝焼け)＋植物＋モチーフ＋タイトル ---------- */
.kv-uni{ left:0; top:0; width:100%; }
.kv-dawn7{ left:0; top:0; width:100%; opacity:0; will-change:opacity; }   /* 朝焼け・フェードイン */

/* 冒頭コピー（中央・フェードのみ） */
.kv-copy{
  left:50%; top:calc(var(--u)*392); transform:translate(-50%,-50%);
  width:max-content; text-align:center; color:var(--white);
  font-family:'Noto Serif JP',serif; font-weight:500;
  font-size:calc(var(--u)*40); line-height:2; letter-spacing:.18em;
  text-shadow:0 calc(var(--u)*2) calc(var(--u)*12) rgba(1,17,75,.55);
  opacity:0; will-change:opacity;
}

/* 植物6分割（最終盤: 2008×1193キャンバス・KV枠オフセット=left327/top220・実測校正済み）
   下173・左右(327/241)に飛び出す。SPは専用素材のためメディアクエリで上書き */
.pl-hiru-migi,.pl-hiru-naka,.pl-yoru-ushiro,.pl-hiru-migishita,.pl-yoru-ue,.pl-yoru-shita{
  left:calc(var(--u)*-327); top:calc(var(--u)*-220); width:calc(var(--u)*2008);
}
/* モチーフ6点 */
.mo-sanshin { left:calc(var(--u)*985); top:calc(var(--u)*450); width:calc(var(--u)*278); }
.mo-hanagasa{ left:calc(var(--u)*5);   top:calc(var(--u)*90);  width:calc(var(--u)*273); }
.mo-pine    { left:calc(var(--u)*362); top:calc(var(--u)*499); width:calc(var(--u)*279); }
.mo-goya    { left:calc(var(--u)*582); top:calc(var(--u)*15);  width:calc(var(--u)*279); }
.mo-shisa   { left:calc(var(--u)*150); top:calc(var(--u)*293); width:calc(var(--u)*241); }
.mo-kuina   { left:calc(var(--u)*930); top:calc(var(--u)*189); width:calc(var(--u)*279); }
/* 飛び込み対象は初期非表示（JSで画面外→定位置） */
/* z-index:1 でKVの植物・モチーフを後続のシルエット草(sil)より前面に */
.ob{ opacity:0; will-change:transform, opacity; z-index:1; }
.kv-title, .kv-copy{ z-index:2; }

/* モチーフ: マウス接近で「ぷるっ」（PCのみ・JSがクラス付与） */
@keyframes puru{
  0%{ transform:scale(1) rotate(0deg); }
  30%{ transform:scale(1.05) rotate(1.6deg); }
  60%{ transform:scale(.97) rotate(-1.2deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
.ob.puru{ animation:puru .45s cubic-bezier(.36,.07,.19,.97); }
/* 植物レイヤーは控えめな揺れ（葉ずれ） */
@keyframes puruSoft{
  0%{ transform:translate(0,0) rotate(0deg) scale(1); }
  35%{ transform:translate(0,0) rotate(.5deg) scale(1.008); }
  70%{ transform:translate(0,0) rotate(-.35deg) scale(1); }
  100%{ transform:translate(0,0) rotate(0deg) scale(1); }
}
.ob.puru-soft{ animation:puruSoft .55s ease; }

/* ---------- KVタイトル（h1・忠実サイズ・影/下線なし・フェードのみ） ---------- */
.kv-title{
  left:calc(var(--u)*723); transform:translateX(-50%);
  top:calc(var(--u)*236);
  width:max-content; text-align:center; color:var(--white);
  font-weight:700; text-decoration:none;
  opacity:0; will-change:opacity;
}
.kvt-en{ display:block; font-family:'Noto Serif JP', serif; font-size:calc(var(--u)*87); letter-spacing:.09em; line-height:1; }
.kvt-furi{ display:block; font-family:'Noto Serif JP', serif; font-weight:700; font-size:calc(var(--u)*25); letter-spacing:.1em; line-height:1; margin-top:calc(var(--u)*19); }
.kvt-furi + .kvt-en{ margin-top:calc(var(--u)*16); }
.kvt-in{ display:block; font-family:'Noto Serif JP', serif; font-size:calc(var(--u)*54); letter-spacing:.05em; line-height:1; margin-top:calc(var(--u)*10); }

/* ---------- スクロールインジケーター ---------- */
/* 画面最下部に固定表示。黒い夜空に入ったあたりでJSがフェードアウト */
.scroll-ind{
  position:fixed;
  left:calc(var(--u)*708);
  bottom:32px;
  z-index:10;
  pointer-events:none;
  opacity:0;   /* イントロ完了後にJSで表示 */
}
.scroll-anim{
  position:relative;
  width:calc(var(--u)*29); height:calc(var(--u)*90);
  animation:scrollDrift 2.6s ease infinite;
  filter:drop-shadow(0 1px 4px rgba(1,17,75,.65));
}
.scroll-anim img{ display:block; width:100%; height:auto; }
@keyframes scrollDrift{
  0%{ opacity:0; transform:translateY(calc(var(--u)*-12)); }
  30%{ opacity:1; }
  70%{ opacity:1; }
  100%{ opacity:0; transform:translateY(calc(var(--u)*14)); }
}

/* ---------- イルミネーションへの感謝 ---------- */
.il-box{
  left:calc(var(--u)*145); top:calc(var(--u)*1170);
  width:calc(var(--u)*1150); height:calc(var(--u)*420);
  background:var(--blue); mix-blend-mode:multiply;
}
.il-bracket1{
  left:calc(var(--u)*988); top:calc(var(--u)*1157);
  width:calc(var(--u)*322); height:calc(var(--u)*95);
  border-top:2px solid var(--gold); border-right:2px solid var(--gold);
}
.il-bracket2{
  left:calc(var(--u)*130); top:calc(var(--u)*1508);
  width:calc(var(--u)*322); height:calc(var(--u)*95);
  border-bottom:2px solid var(--gold); border-left:2px solid var(--gold);
}
.il-photo{
  left:calc(var(--u)*915); top:calc(var(--u)*1195);
  width:calc(var(--u)*310); height:calc(var(--u)*310);
  border-radius:50%; object-fit:cover;
  object-position:100% 50%;  /* 右寄せ表示: ツリー先端の星まで見せる */
}
.il-head{
  left:calc(var(--u)*232); top:calc(var(--u)*1229);
  font-size:calc(var(--u)*32); letter-spacing:.2em; line-height:1.7;
}
.il-body{
  left:calc(var(--u)*232); top:calc(var(--u)*1304);
  width:calc(var(--u)*700);
  font-size:calc(var(--u)*20); line-height:2.4; letter-spacing:.2em;
}
.il-thanks{
  left:calc(var(--u)*960); top:calc(var(--u)*1468);
  width:calc(var(--u)*300);
}
.il-thanks img{ display:block; width:100%; height:auto; }

/* ---------- 転換コピー ---------- */
.t-transform{
  left:50%; transform:translateX(-50%);
  top:calc(var(--u)*2113);
  width:max-content;
  font-size:calc(var(--u)*40); line-height:2.15; letter-spacing:.1em;
  text-align:center;
}

/* ---------- 人物イラスト（ぴょこぴょこ揺れ） ---------- */
.person{
  transform-origin:50% 100%;
  animation:pyoko 3s steps(1) var(--pdel,0s) infinite;
}
@keyframes pyoko{
  0%, 50%, 100%{ transform:rotate(0deg); }
  25%{ transform:rotate(var(--pa,5deg)); }
  75%{ transform:rotate(calc(var(--pa,5deg) * -1)); }
}
.p-scope{ left:calc(var(--u)*1059); top:calc(var(--u)*2258); width:calc(var(--u)*56); }
.p-family{ left:calc(var(--u)*175); top:calc(var(--u)*2723); width:calc(var(--u)*95); }  /* 足あり素材(188x248)で接地位置キープ */
.p-walker{ left:calc(var(--u)*1146); top:calc(var(--u)*2848); width:calc(var(--u)*51); }
.p-reader{ left:calc(var(--u)*974); top:calc(var(--u)*3284); width:calc(var(--u)*80); }
.p-group{ left:calc(var(--u)*217); top:calc(var(--u)*3778); width:calc(var(--u)*115); }

/* ---------- 丘_上テキスト ---------- */
.t-lead{
  left:50%; transform:translateX(-50%);
  top:calc(var(--u)*2479);
  width:max-content;
  font-size:calc(var(--u)*32); line-height:2; letter-spacing:.1em;
  text-align:center;
}
.t-title-wrap{
  left:50%; transform:translateX(-50%);
  top:calc(var(--u)*2562);
  text-align:center; white-space:nowrap;
}
.t-furigana{
  font-family:'Noto Serif JP', serif; font-weight:500; color:var(--white);
  font-size:calc(var(--u)*20); letter-spacing:.1em; line-height:1;
}
.t-title{
  position:relative; z-index:1;
  font-family:'Noto Serif JP', serif; font-weight:500; color:var(--white);
  font-size:calc(var(--u)*48); letter-spacing:.05em; line-height:1;
  margin-top:calc(var(--u)*6);
}
.t-bar{
  position:absolute;
  left:50%; transform:translateX(-50%);
  top:calc(var(--u)*68);
  width:calc(var(--u)*860); height:calc(var(--u)*15);
  background:var(--brown);
}
.t-birth{
  left:50%; transform:translateX(-50%);
  top:calc(var(--u)*2668);
  font-size:calc(var(--u)*40); line-height:1; letter-spacing:.1em;
  text-align:center; white-space:nowrap;
}
.t-body1{
  left:50%; transform:translateX(-50%);
  top:calc(var(--u)*2750);
  width:max-content;
  font-size:calc(var(--u)*24); line-height:2.4; letter-spacing:.2em;
  text-align:center;
}

/* ---------- 丘_下テキスト ---------- */
.t-body3{
  left:50%; transform:translateX(-50%);
  top:calc(var(--u)*3525);
  width:max-content;
  font-size:calc(var(--u)*24); line-height:2.4; letter-spacing:.2em;
  text-align:center;
  color:var(--brown);
}
.t-amk{
  left:50%; transform:translateX(-50%);
  top:calc(var(--u)*3755);
  text-align:center; color:var(--brown); white-space:nowrap;
  font-family:'Noto Serif JP', serif; font-weight:700;
}
.amk-adventure{ font-size:calc(var(--u)*80); letter-spacing:.05em; line-height:1; }
.amk-furigana{
  font-family:'Noto Serif JP', serif; font-weight:700;
  font-size:calc(var(--u)*24); letter-spacing:.1em; line-height:1;
  margin-top:calc(var(--u)*22);
}
.amk-museum{ font-size:calc(var(--u)*80); letter-spacing:.05em; line-height:1; margin-top:calc(var(--u)*16); }
.amk-in{ font-size:calc(var(--u)*48); letter-spacing:.05em; line-height:1; margin-top:calc(var(--u)*13); }

.t-dates{
  left:50%; transform:translateX(-50%);
  top:calc(var(--u)*4082);
  display:flex; align-items:baseline; gap:calc(var(--u)*14);
  color:var(--brown); font-family:'Noto Serif JP', serif; white-space:nowrap;
}
.d-day{ font-size:calc(var(--u)*64); font-weight:500; letter-spacing:.05em; line-height:1; }
.d-year{ font-size:calc(var(--u)*32); font-weight:900; letter-spacing:.05em; line-height:1; }
.d-dash{
  align-self:center;
  width:calc(var(--u)*64); height:calc(var(--u)*2);
  background:var(--brown);
  margin:0 calc(var(--u)*8);
}

/* ---------- CTA ---------- */
.cta{
  left:50%; transform:translateX(-50%);
  top:calc(var(--u)*4215);
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u)*384); height:calc(var(--u)*89);
  background:var(--brown);
  border-radius:calc(var(--u)*24);
  font-family:'Noto Sans JP', sans-serif; font-weight:500;
  font-size:calc(var(--u)*24); letter-spacing:.08em;
  color:var(--white); text-decoration:none;
  box-shadow:0 calc(var(--u)*6) calc(var(--u)*18) rgba(73,39,16,.18);
}
.cta:hover{
  background:var(--gold);
  transform:translateX(-50%) translateY(calc(var(--u)*-6)) scale(1.02);
  box-shadow:0 calc(var(--u)*18) calc(var(--u)*36) rgba(73,39,16,.30);
  letter-spacing:.11em;
}
.cta:active{
  transform:translateX(-50%) translateY(calc(var(--u)*-2)) scale(1);
  box-shadow:0 calc(var(--u)*8) calc(var(--u)*16) rgba(73,39,16,.24);
  transition-duration:.15s;
}
.cta:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.cta-note{
  left:50%; transform:translateX(-50%);
  top:calc(var(--u)*4335);
  width:max-content;
  font-family:'Noto Sans JP', sans-serif; font-weight:400;
  font-size:calc(var(--u)*15); letter-spacing:.3em; line-height:1.6;
  color:var(--brown);
}

/* ---------- フッター ---------- */
.ft-bar{
  left:0; top:calc(var(--u)*4728);
  width:100%; height:calc(var(--u)*200);
  background:var(--brown);
}
.ft-title{
  left:calc(var(--u)*144); top:calc(var(--u)*4780);
  padding:0; background:none; border:none; cursor:pointer;
  transition:opacity .3s ease;
}
.ft-title img{ display:block; width:calc(var(--u)*436); height:auto; }
.ft-title:hover{ opacity:.75; }
.ft-title:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.ft-logo{
  left:calc(var(--u)*936); top:calc(var(--u)*4792);
  display:block;
  transition:opacity .3s ease;
}
.ft-logo img{ display:block; width:calc(var(--u)*360); height:auto; }
.ft-logo:hover{ opacity:.75; }
.ft-copy{
  left:auto; right:calc(var(--u)*28);
  top:calc(var(--u)*4877);
  font-family:'Noto Sans JP', sans-serif; font-weight:400;
  font-size:calc(var(--u)*12); line-height:1.7; color:var(--white);
  white-space:nowrap;
}

/* ---------- スクロール連動の表示 ---------- */
.reveal{
  opacity:0; translate:0 calc(var(--u)*26);
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1), translate 1.1s cubic-bezier(.22,1,.36,1);
}
.reveal[data-d="1"]{ transition-delay:.15s; }
.reveal[data-d="2"]{ transition-delay:.3s; }
.reveal[data-d="3"]{ transition-delay:.45s; }
.reveal.on{ opacity:1; translate:0 0; }
.il-box.reveal, .il-bracket1.reveal, .il-bracket2.reveal{ translate:0 0; }  /* 位置固定・フェードのみ */

/* CTAはreveal(出現)とhover(操作)のトランジションを分離して両立させる */
.cta.reveal{
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1) .45s,
             translate 1.1s cubic-bezier(.22,1,.36,1) .45s,
             background-color .45s ease 0s,
             box-shadow .45s cubic-bezier(.22,1,.36,1) 0s,
             transform .45s cubic-bezier(.34,1.56,.64,1) 0s,
             letter-spacing .45s ease 0s;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .kv-main, .kv-title, .scroll-ind{ animation:none; }
  .scroll-anim, .person{ animation:none; }
  .reveal{ opacity:1; translate:0 0; transition:none; }
}

/* =========================================================
   多言語(英語)切替時の可読性対応
   Shutto等で本文が英語化されると JS が html に .lang-en を付与。
   固定座標レイアウトのまま「収まる・読める」ことを優先し、
   文中の改行を解除して幅指定で折返し、フォントをやや縮小する。
   ========================================================= */
.lang-en .kv-copy br,
.lang-en .il-body br,
.lang-en .t-transform br,
.lang-en .t-lead br,
.lang-en .t-body1 br,
.lang-en .t-body3 br{ display:none; }
.lang-en .kvt-furi{ display:none; }     /* 英語ではタイトルと重複するため */
.lang-en .t-furigana{ display:none; }

.lang-en .kv-copy{ width:calc(var(--u)*1100); white-space:normal; font-size:calc(var(--u)*34); line-height:1.8; }
.lang-en .il-head{ width:calc(var(--u)*640); font-size:calc(var(--u)*26); line-height:1.5; letter-spacing:.08em; }
.lang-en .il-body{ width:calc(var(--u)*640); font-size:calc(var(--u)*17); line-height:1.9; letter-spacing:.04em; }
.lang-en .t-transform{ width:calc(var(--u)*1000); white-space:normal; font-size:calc(var(--u)*34); line-height:1.7; }
.lang-en .t-lead{ width:calc(var(--u)*1000); white-space:normal; font-size:calc(var(--u)*27); line-height:1.6; }
.lang-en .t-body1{ width:calc(var(--u)*840); font-size:calc(var(--u)*20); line-height:1.9; letter-spacing:.04em; }
.lang-en .t-body3{ width:calc(var(--u)*840); font-size:calc(var(--u)*20); line-height:1.9; letter-spacing:.04em; }
.lang-en .cta-note{ width:calc(var(--u)*840); white-space:normal; letter-spacing:.06em; }
.lang-en .cta{ font-size:calc(var(--u)*20); }

/* =========================================================
   SP（〜767px）— KV 390×631基準（素材2x=780×1262）
   --us = 100vw/390。KV以下の下半分は後続フェーズで実装
   ========================================================= */
@media (max-width:767px){
  :root{ --us: calc(100vw / 390); }

  /* PC専用の背景・丘・シルエットは非表示（SPは一枚背景 sp_bg_lower を使う） */
  .sky-night, .sil-left, .sil-right,
  .h1-img, .h2-img, .h3-img{ display:none; }
  .sp-br{ display:inline; }
  .pc-br{ display:none; }

  /* 全画面KV: 空と植物リングをビューポート全体に。上の輪=上アンカー/下の輪=下アンカー */
  /* 縦が短い端末(iPhone SE等)ではKVをデザイン基準高さ(700)未満に縮めない。
     縦長端末は従来どおり全画面。--kvh をKVの実高さとして共有 */
  .lp{
    height:calc(max(100vh,  var(--us)*700) + var(--us)*2935);
    height:calc(max(100svh, var(--us)*700) + var(--us)*2935);
    background:#050a24;
    z-index:0;  /* スタッキングコンテキスト化: sp-bg(z:-1)を.lp背景より前・他要素より後ろに */
  }
  /* KVを絶対配置コンテナに（KV内の上下アンカーをKV基準に閉じ込める） */
  .kv{
    position:absolute; left:0; top:0; width:100%;
    height:max(100vh,  calc(var(--us)*700));
    height:max(100svh, calc(var(--us)*700));
  }

  /* 下半分ラッパー: KV(100svh)直下に一枚背景＋要素を絶対配置（座標L=下半分内のdesign px） */
  .lower{
    position:absolute; left:0; width:100%;
    top:max(100vh,  calc(var(--us)*700));
    top:max(100svh, calc(var(--us)*700));
    height:calc(var(--us)*2935);
  }
  /* イルミ専用背景(L0-949) → 旧一枚背景は稜線が続くよう433下げて接続 */
  .sp-bg-illumi{ display:block; left:0; top:0; width:100%; }
  .sp-bg{ display:block; left:0; top:calc(var(--us)*949); width:100%; }
  /* KV(朝焼け)下端 → 下半分(夜空)上端の色ブレンド */
  .sp-join{
    display:block; left:0; top:0; width:100%;
    height:calc(var(--us)*140);
    background:linear-gradient(180deg, rgb(94,194,235) 0%, rgba(94,194,235,0) 100%);
  }

  /* --- イルミ感謝（.lower基準・L座標）— 稜線L516の上に収める --- */
  .il-box{
    left:calc(var(--us)*40); top:calc(var(--us)*180);
    width:calc(var(--us)*310); height:calc(var(--us)*600);
    background:rgba(22,37,107,.92); mix-blend-mode:normal;  /* 濃紺・星が薄く透ける */
  }
  .il-bracket1{
    left:calc(var(--us)*217); top:calc(var(--us)*168);
    width:calc(var(--us)*145); height:calc(var(--us)*44);
  }
  .il-bracket2{
    left:calc(var(--us)*28); top:calc(var(--us)*748);
    width:calc(var(--us)*145); height:calc(var(--us)*44);
  }
  .il-photo{
    left:50%; transform:translateX(-50%);
    top:calc(var(--us)*536);
    width:calc(var(--us)*195); height:calc(var(--us)*195);
  }
  .il-head{
    left:50%; transform:translateX(-50%); width:max-content; text-align:center;
    top:calc(var(--us)*200);
    font-size:calc(var(--us)*19); letter-spacing:.12em; line-height:1.9;
  }
  .il-body{
    left:50%; transform:translateX(-50%);
    width:calc(var(--us)*260); text-align:justify;
    top:calc(var(--us)*285);
    font-size:calc(var(--us)*14); line-height:2.4; letter-spacing:.2em;
  }
  .il-body br{ display:none; }  /* SPは自然折返し */
  .il-thanks{
    left:calc(var(--us)*140);
    top:calc(var(--us)*700);
    width:calc(var(--us)*200);
  }

  /* --- 転換コピー --- */
  .t-transform{
    top:calc(var(--us)*974);
    font-size:calc(var(--us)*26); line-height:1.9; letter-spacing:.1em;
  }

  /* --- 誕生ブロック（緑の丘） --- */
  .t-lead{
    top:calc(var(--us)*1261);
    font-size:calc(var(--us)*22); letter-spacing:.1em; line-height:1.7;
  }
  .t-title-wrap{ top:calc(var(--us)*1351); white-space:normal; width:calc(var(--us)*330); }
  .t-furigana{ font-size:calc(var(--us)*11); letter-spacing:.08em; }
  .t-title{ font-size:calc(var(--us)*26); line-height:1.65; margin-top:calc(var(--us)*6); }
  .t-bar{ display:none; }
  /* 2行タイトルに行ごとの茶下線（box-decoration-break:clone） */
  .t-title-in{
    background-image:linear-gradient(transparent 62%, var(--brown) 62%, var(--brown) 90%, transparent 90%);
    -webkit-box-decoration-break:clone; box-decoration-break:clone;
    padding:0 calc(var(--us)*4);
  }
  .t-birth{ top:calc(var(--us)*1477); font-size:calc(var(--us)*22); }
  .t-body1{
    top:calc(var(--us)*1527);
    left:50%; transform:translateX(-50%);
    width:calc(var(--us)*330); text-align:center;
    font-size:calc(var(--us)*14); line-height:2.4; letter-spacing:.2em;
  }
  /* body1は文節<br>維持＋長行のみ自然折返し（添付の行構成） */

  /* --- 人物（SP配置・ぴょこぴょこは共通） --- */
  .p-scope { left:calc(var(--us)*300); top:calc(var(--us)*1130); width:calc(var(--us)*40); }
  .p-family{ left:calc(var(--us)*10);  top:calc(var(--us)*1427); width:calc(var(--us)*68); }
  .p-walker{ display:none; }  /* SPデザインに不在 */
  .p-reader{ left:calc(var(--us)*300); top:calc(var(--us)*1916); width:calc(var(--us)*45); }
  .p-group { left:0;                   top:calc(var(--us)*2121); width:calc(var(--us)*70); }

  /* --- 開催情報（砂の丘 L1256〜） --- */
  .t-body3{
    top:calc(var(--us)*1981);
    left:50%; transform:translateX(-50%);
    width:calc(var(--us)*330); text-align:center;
    font-size:calc(var(--us)*14); line-height:2.4; letter-spacing:.2em;
  }
  /* body3も文節<br>維持＋自然折返し */
  .t-amk{ top:calc(var(--us)*2180); }
  .amk-adventure{ font-size:calc(var(--us)*44); }
  .amk-furigana{ font-size:calc(var(--us)*11); letter-spacing:.1em; margin-top:calc(var(--us)*12); }
  .amk-museum{ font-size:calc(var(--us)*44); margin-top:calc(var(--us)*8); }
  .amk-in{ font-size:calc(var(--us)*26); margin-top:calc(var(--us)*10); }
  .t-dates{ top:calc(var(--us)*2375); gap:calc(var(--us)*8); }
  .d-day{ font-size:calc(var(--us)*40); }
  .d-year{ font-size:calc(var(--us)*20); }
  .d-dash{ width:calc(var(--us)*40); height:2px; margin:0 calc(var(--us)*4); }
  .cta{
    top:calc(var(--us)*2443);
    width:calc(var(--us)*300); height:calc(var(--us)*70);
    border-radius:calc(var(--us)*20);
    font-size:calc(var(--us)*20);
    box-shadow:0 calc(var(--us)*4) calc(var(--us)*12) rgba(73,39,16,.18);
  }
  .cta-note{
    top:calc(var(--us)*2540);
    left:50%; transform:translateX(-50%);
    width:calc(var(--us)*345); white-space:normal; text-align:center;
    font-size:calc(var(--us)*13); letter-spacing:.1em; line-height:2.0;
  }

  /* --- フッター（タイトル左・ロゴ右・コピーライト中央下） --- */
  .ft-bar{ left:0; top:calc(var(--us)*2775); width:100%; height:calc(var(--us)*160); }
  /* イベント名・ロゴを帯全体の天地センターに、コピーライトは下端に */
  .ft-title{ left:calc(var(--us)*22); transform:none; top:calc(var(--us)*2837); }
  .ft-title img{ width:calc(var(--us)*175); }
  .ft-logo{ left:auto; right:calc(var(--us)*22); transform:none; top:calc(var(--us)*2841); }
  .ft-logo img{ width:calc(var(--us)*130); }
  .ft-copy{ left:auto; right:calc(var(--us)*22); transform:none; top:calc(var(--us)*2905); font-size:calc(var(--us)*10); }

  /* KV空: 全画面カバー */
  .kv-uni, .kv-dawn7{ width:100%; height:100%; object-fit:cover; }

  /* 冒頭コピー（画面中央） */
  .kv-copy{
    top:50%; transform:translate(-50%,-50%);
    font-size:calc(var(--us)*20); letter-spacing:.14em;
    text-shadow:0 1px calc(var(--us)*8) rgba(1,17,75,.55);
  }

  /* 植物6分割: SPは専用素材(390基準・0,0)。上の輪は上アンカー */
  .pl-hiru-migi,.pl-hiru-naka,.pl-yoru-ushiro,.pl-hiru-migishita,.pl-yoru-ue,.pl-yoru-shita{ left:0; top:0; width:100%; }
  /* 下の輪（夜_左下・夜_下後ろ・昼_右下）は下アンカー（700設計時の位置を下基準に換算） */
  .pl-yoru-shita   { top:auto; bottom:calc(var(--us)*42); }
  .pl-yoru-ushiro  { top:auto; bottom:calc(var(--us)*58); }
  .pl-hiru-migishita{ top:auto; bottom:calc(var(--us)*58); }

  /* モチーフ6点: 上グループ=上アンカー・端ビタ付け */
  .mo-hanagasa{ left:0;                   top:calc(var(--us)*150); width:calc(var(--us)*82); }
  .mo-goya    { left:calc(var(--us)*205); top:calc(var(--us)*52);  width:calc(var(--us)*167); }
  .mo-shisa   { left:0;                   top:calc(var(--us)*280); width:calc(var(--us)*68); }
  .mo-kuina   { left:auto; right:0;       top:calc(var(--us)*222); width:calc(var(--us)*117); }
  /* 下グループ=下アンカー（パイン・三線） */
  .mo-pine    { left:calc(var(--us)*60);  top:auto; bottom:calc(var(--us)*94); width:calc(var(--us)*167); }
  .mo-sanshin { left:calc(var(--us)*222); top:auto; bottom:calc(var(--us)*69); width:calc(var(--us)*162); }

  /* タイトル */
  .kv-title{ left:50%; top:calc(var(--us)*196); transform:translateX(-50%); }
  .kvt-en{ font-size:calc(var(--us)*52); letter-spacing:.05em; }
  .kvt-furi{ font-size:calc(var(--us)*14); letter-spacing:.1em; margin-top:calc(var(--us)*12); }
  .kvt-furi + .kvt-en{ margin-top:calc(var(--us)*12); }
  .kvt-in{ font-size:calc(var(--us)*28); margin-top:calc(var(--us)*12); }

  /* スクロールインジケーター（中央下・画像） */
  .scroll-ind{ left:50%; transform:translateX(-50%); bottom:16px; }
  .scroll-anim{ width:calc(var(--us)*28); height:calc(var(--us)*90); }

  /* --- 多言語(英語)切替時のSP可読性対応 --- */
  .lang-en .kv-copy{ width:calc(var(--us)*330); font-size:calc(var(--us)*17); line-height:1.8; letter-spacing:.04em; }
  .lang-en .il-head{ width:calc(var(--us)*280); font-size:calc(var(--us)*16); line-height:1.5; letter-spacing:.06em; }
  .lang-en .il-body{ font-size:calc(var(--us)*12); line-height:1.85; letter-spacing:.03em; }
  .lang-en .t-transform{ width:calc(var(--us)*340); font-size:calc(var(--us)*20); line-height:1.7; letter-spacing:.04em; }
  .lang-en .t-lead{ width:calc(var(--us)*340); font-size:calc(var(--us)*17); line-height:1.6; letter-spacing:.04em; }
  .lang-en .t-title-wrap{ width:calc(var(--us)*330); }
  .lang-en .t-body1{ font-size:calc(var(--us)*12); line-height:1.9; letter-spacing:.03em; }
  .lang-en .t-body3{ font-size:calc(var(--us)*12); line-height:1.9; letter-spacing:.03em; }
  .lang-en .cta-note{ letter-spacing:.04em; }
  .lang-en .cta{ font-size:calc(var(--us)*15); }
}