@charset "utf-8";
/* ============================================================================
   映画『認知症世界の歩き方 MOVIE』公式サイト ─ 共通スタイル

   ■ デザインルール

   1. 黄色い塗り面（--yellow）は「押せるもの」だけに使う
      ボタンとリンクカードだけが黄色く塗られる。ラベル・見出し・カード面には
      使わない。文字色としての黄色は、暗い地の上での可読性確保のために
      押せないものにも使ってよい（フッター、赤帯の上のラベルなど）。

   2. 押せるものの形はピル型（--r-pill）に統一する
      アイコンだけのボタン（✕・再生）は円形。

   3. 押せるものは hover で沈む（影が縮む＋translateY）
      押せないものは動かない。

   4. 影は「紙の立体感」を出す装飾であり、押せる／押せないの区別には使わない
      ぼかしのない実体シャドウ（0 Npx 0）で統一する。

   5. 角丸は5段階のトークンから選ぶ
      --r-pill（ボタン）／--r-card（カード・モーダル）／--r-media（写真・映像）
      ／--r-chip（ラベル・バッジ）／--r-thin（書影など実物の紙）

   6. イラスト・作画部品の配色と角丸はこのルールの対象外
      客席の頭、チケット券面の切り欠きなど、絵として成立させる必要があるため。

   配色は『認知症世界の歩き方』映画化バナーから採色。
   クリーム地・緞帳の赤・札の黄・手描き線の黒。
   ============================================================================ */

:root{
  /* ── 色 ── */
  --cream:#F4EED1;      /* ベース70%：イラストの地 */
  --cream-2:#EFE9CC;    /* 交互セクション */
  --cream-3:#E2DCC0;    /* もう一段沈んだ面 */
  --cream-hi:#FBF7E4;   /* 半券など、浮かせたい面 */
  --red:#E0373C;        /* メイン25%：緞帳と座席の赤 */
  --red-deep:#AF372B;   /* 濃い赤 */
  --red-dark:#612823;   /* 最も濃い赤（フッター・襞の影） */
  --yellow:#F5CA00;     /* アクセント5%：札の黄。ルール1により押せるものに限る */
  --yellow-bright:#FFDD33; /* 赤地に載せる黄色文字専用。札の黄は赤に沈む（2.79:1）ため一段明るく */
  --ink:#27231F;        /* 文字：手描き線の黒 */
  --ink-2:#544C41;      /* サブ文字（クリーム地で 7.6:1。以前の #6B6255 は小さい字だと薄かった） */
  --line:#CDC28E;       /* 罫線 */
  --sand:#DAD0A1;       /* イラスト線のベージュ */
  --green:#7FC286;      /* 日本地図（宣材と同じ緑） */

  /* ── 角丸（ルール5） ── */
  --r-pill:999px;       /* ボタン */
  --r-card:16px;        /* カード・モーダル */
  --r-media:10px;       /* 写真・映像 */
  --r-chip:4px;         /* ラベル・バッジ */
  --r-thin:2px;         /* 書影など実物の紙 */

  /* ── 影（ルール4）。ぼかさない実体シャドウ ── */
  --sh-btn:0 6px 0 var(--ink);              /* 大きいボタン */
  --sh-btn-down:0 3px 0 var(--ink);         /* 同・押し込み時 */
  --sh-btn-sm:0 3px 0 var(--ink);           /* 小さいボタン */
  --sh-btn-sm-down:0 1px 0 var(--ink);      /* 同・押し込み時 */
  --sh-card:0 5px 0 var(--ink);             /* カード */
  --sh-card-down:0 2px 0 var(--ink);        /* 押せるカードの押し込み時 */
  --sh-media:0 5px 0 rgba(39,35,31,.22);    /* 写真・映像 */

  --sh-modal:0 14px 0 rgba(39,35,31,.5);    /* モーダル */
  --sh-book:6px 6px 0 var(--sand);          /* 書影。斜めに落とす */

  /* ── 文字サイズ（9段階）──
     読者は40〜60代。2026-08-24 に「XXL」まで引き上げ、
     本文22px・キャプション16.5pxを下限にしている */
  --fs-3xs:15.5px;                       /* フッターのクレジット */
  --fs-2xs:16.5px;                       /* キャプション、極小ラベル */
  --fs-xs:18.5px;                        /* 補助文、ラベル */
  --fs-sm:19.5px;                        /* リスト、小さめの本文 */
  --fs-base:22px;                        /* 本文の基準。これより小さい本文は作らない */
  --fs-md:25.5px;                        /* 小見出し、キャスト名 */
  --fs-lg:clamp(25px,3.9vw,37px);        /* リード文、キャッチコピー */
  --fs-xl:clamp(27px,4.6vw,46px);        /* セクションの大きなコピー */
  --fs-2xl:clamp(32px,5.4vw,54px);       /* 英字のセクション見出し */
  --fs-display:clamp(40px,7.4vw,72px);   /* 数字を単独で見せるとき */

  /* ── 行間（4段階）── */
  --lh-tight:1.3;       /* 大見出し、英字見出し */
  --lh-heading:1.6;     /* 見出し、キャッチコピー */
  --lh-body:1.95;       /* 本文。読者層を考えて広めに取る */
  --lh-loose:2.1;       /* フッター、詰め組みのクレジット */

  /* ── 字間（5段階）── */
  --ls-tight:-.01em;    /* 大きな数字 */
  --ls-normal:.02em;    /* 本文・見出し */
  --ls-wide:.08em;      /* 人名、強調 */
  --ls-label:.14em;     /* 英字ラベル（COMMENT など） */
  --ls-jp-label:.34em;  /* 見出しに添える日本語（コンセプト など） */

  /* ── 余白（4pxグリッド・12段階）── */
  --sp-1:4px;    --sp-2:8px;    --sp-3:12px;   --sp-4:16px;
  --sp-5:20px;   --sp-6:24px;   --sp-8:32px;   --sp-10:40px;
  --sp-12:48px;  --sp-16:64px;  --sp-20:80px;  --sp-24:96px;

  /* ── 枠線（3段階）── */
  --bd-hair:1px;        /* 罫線、区切り */
  --bd-base:2.5px;      /* 標準の枠。手描き線の太さ */
  --bd-strong:3px;      /* モーダルなど特に立たせる面 */

  /* ── 寸法 ──
     ブレークポイントは 600px / 860px / 1080px の3段階に統一する。
     （@media のクエリでは変数が使えないため、値を直接書くときはこの3つから選ぶ） */
  --measure:36rem;      /* 本文の一行の長さ。ページごとに上書きしてよい */

  /* ── 書体 ──
     読み込みが落ちても日本語が化けないよう、必ず和文フォールバックを持たせる。
     別書体に切り替えるときは、この3行と各HTMLのGoogle Fontsリンクを差し替える */
  --font-ja:YakuHanJPs,"Zen Maru Gothic","Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4",YuGothic,"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --font-en:YakuHanJPs,"Zen Maru Gothic","Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4",YuGothic,"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  /* 作品クレジット用。実在の人の名前と肩書きだけこの書体にする（2026-08-26） */
  --font-cred:"Zen Kaku Gothic New","Hiragino Sans","ヒラギノ角ゴシック",YuGothic,"Yu Gothic",Meiryo,sans-serif;
  --font-mix:YakuHanJPs,"Zen Maru Gothic","Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4",YuGothic,"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

/* ───────── ベース ───────── */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-ja);font-weight:400;
  line-height:1.95;font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.maru{font-family:var(--font-ja);}

/* ───────── レイアウト ───────── */
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--sp-8);}
.narrow{max-width:var(--measure);margin-inline:auto;}
.center{text-align:center;}
section{padding:var(--sp-24) 0;}
section.alt{background:var(--cream-2);}
/* 文節のかたまり。この中では折り返さないので、どの画面幅でも文節で改行される。
   ただし1つが長すぎると塊の内部で折れるため、16文字程度を上限の目安にする */
.nb{display:inline-block;}

/* ───────── タイポグラフィ ─────────
   主な読者は40〜60代。本文18px・補助文14.5px以上を下限にして、
   行間1.95と合わせて老眼が始まる目でも追える大きさにしている */
p{font-size:var(--fs-base);margin:0 0 var(--sp-5);color:var(--ink);}
.em{color:var(--red-deep);font-weight:700;}
.small{font-size:var(--fs-xs);color:var(--ink-2);line-height:1.9;}
.todo{color:var(--red);font-weight:700;}
h3.lead-h{font-family:var(--font-ja);font-weight:700;
  font-size:var(--fs-lg);line-height:1.6;color:var(--ink);margin:0 0 var(--sp-6);letter-spacing:.01em;}
/* あらすじの締め */
.story-closing{margin:var(--sp-8) 0 0;font-size:clamp(16.5px,2.3vw,20px);font-weight:700;
  line-height:2.15;color:var(--red-deep);}
/* 実在する数字は、文中に埋めず大きく単独で見せる */
.numline{margin:var(--sp-8) 0 var(--sp-6);font-size:clamp(16px,2.2vw,19px);font-weight:700;line-height:2;color:var(--ink);}
.numline b{font-family:var(--font-mix);font-size:var(--fs-display);font-weight:800;
  color:var(--red);line-height:1;letter-spacing:-.01em;margin:0 .08em;
  display:inline-block;vertical-align:-.1em;}
.numline b small{font-size:.4em;font-weight:800;letter-spacing:0;}

/* ───────── セクション見出し（英日併記） ─────────
   筆記体の英字を、左右に伸びる二重線ではさむ（映画サイトの定番装飾）。
   トップは .shead、下層ページは header.head で同じ意匠を使う */
.shead{margin:0 0 var(--sp-12);text-align:center;}
header.head{text-align:center;padding:var(--sp-20) 0 0;}
.shead .en,
header.head .en{display:flex;align-items:center;justify-content:center;gap:clamp(var(--sp-3),2.6vw,var(--sp-8));
  font-family:"Pacifico",cursive;font-weight:400;letter-spacing:0;
  font-size:var(--fs-2xl);line-height:1.3;color:var(--red);}
.shead .en::before,.shead .en::after,
header.head .en::before,header.head .en::after{content:"";flex:0 1 clamp(38px,13vw,180px);height:5px;
  border-top:var(--bd-hair) solid var(--red);border-bottom:var(--bd-hair) solid var(--red);}
.shead .ja,
header.head .ja{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.34em;text-indent:.34em;color:var(--ink-2);}
header.head .en{font-size:var(--fs-2xl);}

/* ═════════ 押せるもの（ルール1〜3） ═════════
   黄色い塗り＋黒枠＋ピル型＋実体シャドウ。hover で沈む。
   この4点が揃っているものだけがクリックできる、と読み手に約束する */
.btn{display:inline-block;font-family:var(--font-ja);font-weight:800;font-size:var(--fs-base);
  text-decoration:none;padding:var(--sp-4) var(--sp-10);border-radius:var(--r-pill);letter-spacing:.04em;
  background:var(--yellow);color:var(--ink);border:var(--bd-base) solid var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:var(--sh-btn);}
.btn:hover{transform:translateY(3px);box-shadow:var(--sh-btn-down);}
/* 副次的な操作。黄色を持たないぶん一段弱く見せるが、形と沈み方は同じ */
.btn.ghost{background:transparent;color:var(--ink);box-shadow:0 6px 0 rgba(39,35,31,.28);}
.btn.ghost:hover{box-shadow:0 3px 0 rgba(39,35,31,.28);}
/* 赤地の上に置く ghost は白で抜く */
.final .btn.ghost,
.end .btn.ghost{background:transparent;color:#fff;border-color:#fff;box-shadow:0 6px 0 rgba(255,255,255,.4);}
.final .btn.ghost:hover,
.end .btn.ghost:hover{box-shadow:0 3px 0 rgba(255,255,255,.4);}

/* 小さいボタン（カード内・セクション内） */
.btn-profile,
.btn-mini{display:inline-block;font-family:var(--font-ja);font-weight:800;
  text-decoration:none;letter-spacing:.04em;cursor:pointer;line-height:1.5;
  color:var(--ink);background:var(--yellow);border:var(--bd-base) solid var(--ink);
  border-radius:var(--r-pill);box-shadow:var(--sh-btn-sm);
  transition:transform .15s ease, box-shadow .15s ease;}
.btn-profile:hover,
.btn-mini:hover{transform:translateY(2px);box-shadow:var(--sh-btn-sm-down);}
.btn-profile{margin-top:var(--sp-5);font-size:var(--fs-sm);padding:var(--sp-3) var(--sp-5);}
.btn-mini{font-size:var(--fs-sm);padding:var(--sp-3) var(--sp-6);}

/* アイコンだけのボタンは円形（ルール2の例外） */
.modal-x{position:absolute;right:14px;top:13px;width:44px;height:44px;border-radius:50%;
  border:var(--bd-base) solid var(--ink);background:var(--yellow);font-size:var(--fs-md);font-weight:800;
  cursor:pointer;line-height:1;color:var(--ink);font-family:var(--font-ja);
  box-shadow:var(--sh-btn-sm);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
.modal-x:hover{background:var(--red);color:#fff;transform:translateY(2px);box-shadow:var(--sh-btn-sm-down);}

/* 画面には出さず、読み上げにだけ伝える */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* 見出しに使ったときも、余白は元の要素と同じにする。
   コラムの hero 見出しは自前で margin:auto の中央寄せを持つので対象外 */
header.head h1{margin:0;}

a:focus-visible,button:focus-visible,.btn:focus-visible,.btn-profile:focus-visible,.btn-mini:focus-visible,
summary:focus-visible,[contenteditable]:focus-visible{
  outline:3px solid var(--red);outline-offset:3px;}

/* ═════════ 押せないラベル・バッジ（ルール1） ═════════
   黄色い塗りは使わず、角丸は小さく、影も持たせない。
   「押せそう」に見せないことが役目 */
.label{display:inline-block;font-family:var(--font-mix);font-size:var(--fs-3xs);font-weight:800;
  letter-spacing:.16em;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-chip);
  color:var(--ink);background:transparent;border:var(--bd-hair) solid currentColor;}
/* 暗い地の上に置くラベルは、黄色を文字色として使う */
.label.on-dark{color:var(--yellow);border-color:var(--yellow);}

/* ───────── 追従ナビ ───────── */
.nav{position:sticky;top:0;z-index:900;background:rgba(244,238,209,.95);
  backdrop-filter:saturate(1.3) blur(8px);border-bottom:var(--bd-base) solid var(--ink);}
.nav .inner{max-width:1080px;margin:0 auto;padding:0 var(--sp-5);display:flex;align-items:center;}
.nav a{flex:0 0 auto;padding:var(--sp-4) var(--sp-3);text-decoration:none;font-size:15.5px;font-weight:700;
  letter-spacing:.1em;color:var(--ink-2);font-family:var(--font-mix);transition:color .15s ease;}
.nav a:hover{color:var(--red-deep);}
/* ナビ内の前売券ボタン。押せるので黄色い塗り＋ピル型（ルール1・2） */
.nav .tk{color:var(--ink);background:var(--yellow);border:var(--bd-base) solid var(--ink);
  border-radius:var(--r-pill);box-shadow:var(--sh-btn-sm);
  padding:var(--sp-2) var(--sp-5);font-weight:800;
  display:flex;flex-direction:row;align-items:baseline;gap:.45em;
  line-height:1.2;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;}
.nav .tk .lead{font-size:12.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;}
.nav .tk .main{font-size:15.5px;font-weight:800;letter-spacing:.03em;white-space:nowrap;}
.nav .tk:hover{background:var(--red);color:#fff;transform:translateY(2px);box-shadow:var(--sh-btn-sm-down);}
/* ハンバーガー。広い画面では出さず、リンクはこれまでどおり横一列に流す */
.nav-toggle{display:none;}
.nav-menu{display:contents;}
.nav-veil{display:none;}

/* ───────── 写真 ───────── */
.photo{position:relative;border-radius:var(--r-media);overflow:hidden;
  background:var(--cream-3);border:var(--bd-base) dashed var(--sand);
  min-height:clamp(200px,30vw,340px);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--sp-5);}
.photo .lab{font-family:var(--font-ja);font-weight:700;color:var(--red-deep);
  font-size:var(--fs-xs);letter-spacing:.03em;}
.photo .lab small{display:block;color:var(--ink-2);font-weight:400;font-size:var(--fs-2xs);margin-top:var(--sp-2);line-height:1.8;}
.photo .lab .ico{display:block;font-size:24px;margin-bottom:var(--sp-2);opacity:.55;}
/* 実際の写真が入った枠は、点線の仮枠から実線に */
/* 写真は押せないので、枠と影を持たせない。角丸だけで写真そのものを見せる */
.photo.has-img{padding:0;border:none;background:var(--ink);}
.photo.has-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;}

/* ───────── ポップアップ ───────── */
.modal[hidden]{display:none;}
.modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);}
.modal-bg{position:absolute;inset:0;background:rgba(39,35,31,.74);}
.modal-box{position:relative;background:var(--cream-hi);border:var(--bd-strong) solid var(--ink);
  border-radius:var(--r-card);
  max-width:580px;width:100%;max-height:86vh;overflow:auto;padding:var(--sp-10) var(--sp-8) var(--sp-8);
  box-shadow:0 14px 0 rgba(39,35,31,.5);text-align:left;}
.modal-box .role{display:block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.12em;color:var(--red-deep);}
.modal-box h3{margin:var(--sp-2) 0 0;font-size:clamp(23px,3.4vw,31px);font-weight:800;
  color:var(--ink);letter-spacing:.05em;line-height:1.4;}
.modal-box h3 .en{display:block;font-family:"Pacifico",cursive;font-weight:400;
  font-size:.56em;color:var(--red);margin-top:2px;letter-spacing:0;}
.m-sec{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:var(--bd-hair) solid var(--line);}
.m-sec .m-lab{display:block;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.14em;
  color:var(--red-deep);margin-bottom:var(--sp-2);}
.m-sec p{font-size:var(--fs-base);line-height:2;margin:0;}
.m-sec p + p{margin-top:1.15em;}
@media(max-width:600px){.modal-box{padding:var(--sp-8) var(--sp-5) var(--sp-6);}}

/* ───────── お問い合わせの窓口 ───────── */
.mail-lab{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);margin:0 0 var(--sp-4);line-height:1.9;}
.mail{margin:0;}
.mail .btn{font-family:var(--font-mix);letter-spacing:.02em;word-break:break-all;}
.mail-note{font-size:var(--fs-xs);color:var(--ink-2);margin:var(--sp-4) 0 var(--sp-8);line-height:1.9;}

/* ───────── フッター ───────── */
footer{background:var(--red-dark);padding:var(--sp-10) var(--sp-6) var(--sp-12);color:rgba(244,238,209,.78);
  font-size:var(--fs-xs);text-align:center;line-height:2.1;}
footer .links{margin-bottom:var(--sp-4);}
/* リンクなので黄色でよい（ルール1の但し書き：文字色としての黄色） */
footer .links a{color:var(--yellow);text-decoration:none;margin:0 var(--sp-3);font-weight:700;letter-spacing:.08em;
  display:inline-block;padding:var(--sp-1) 0;font-size:var(--fs-xs);}
footer .links a:hover{text-decoration:underline;}
footer .todo{color:var(--yellow);}

/* ───────── スクロールで現れる（控えめ） ───────── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none;}
  html{scroll-behavior:auto;}
  .btn,.btn-profile,.btn-mini,.nav .tk,.bcard{transition:none;}
}

@media(max-width:860px){
  section{padding:var(--sp-16) 0;}
  .shead{margin-bottom:var(--sp-8);}
}

/* ───────── ごく狭い画面の字送り ─────────
   本文22pxのままだと、375px幅では1行に14文字しか入らず、
   文節（.nb）が語の途中で割れてしまう。1段階だけ戻し、左右の余白も詰める */
@media(max-width:480px){
  :root{
    --fs-2xs:15.5px; --fs-xs:17px; --fs-sm:18px; --fs-base:20px; --fs-md:23px;
  }
  .wrap{padding:0 var(--sp-5);}
}

/* ───────── 狭い画面のナビ ─────────
   項目が9つあり、900px を下回ると1列に収まらない。横スクロールにすると
   隠れた項目に気づけないので、ハンバーガーにまとめて開く形にする。
   前売券ボタンは主要な導線なので、開閉に関係なく常に見えたままにする */
@media(max-width:900px){
  /* 横スクロールだと隠れた項目に気づけないため、まとめて開く形にする */
  .nav .inner{gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);justify-content:space-between;}
  .nav .tk{order:2;margin-left:0;padding:var(--sp-2) var(--sp-4);}
  .nav .tk .lead{display:none;}
  .nav .tk .main{font-size:var(--fs-2xs);}
  /* 開くボタン。押せるが、黄色は前売券ボタンに譲って枠線だけで示す（ルール1） */
  .nav-toggle{order:1;display:inline-flex;align-items:center;gap:var(--sp-2);flex:0 0 auto;
    font-family:var(--font-ja);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.06em;
    color:var(--ink);background:transparent;border:var(--bd-base) solid var(--ink);
    border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);cursor:pointer;
    box-shadow:var(--sh-btn-sm);transition:transform .15s ease, box-shadow .15s ease;}
  .nav-toggle:active{transform:translateY(2px);box-shadow:var(--sh-btn-sm-down);}
  .nav-toggle .bars{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:19px;}
  .nav-toggle .bars i{display:block;height:2.5px;background:var(--ink);border-radius:2px;
    transition:transform .2s ease, opacity .2s ease;}
  .nav.open .nav-toggle .bars i:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav.open .nav-toggle .bars i:nth-child(2){opacity:0;}
  .nav.open .nav-toggle .bars i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  /* backdrop-filter を持つ親は、はみ出した子を切り落としてしまう。
     開いている間だけ外して、真下のパネルが描かれるようにする */
  .nav.open{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--cream);}
  /* 開いた中身。ナビ帯の真下に落ちる */
  .nav-menu{display:block;position:absolute;left:0;right:0;top:100%;z-index:901;
    background:var(--cream-hi);border-bottom:var(--bd-base) solid var(--ink);
    box-shadow:0 8px 0 rgba(39,35,31,.18);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .25s ease, visibility 0s linear .25s;}
  .nav.open .nav-menu{max-height:80vh;overflow-y:auto;visibility:visible;
    transition:max-height .25s ease, visibility 0s;}
  .nav-menu a{display:block;padding:var(--sp-4) var(--sp-6);font-size:var(--fs-xs);
    color:var(--ink);border-top:var(--bd-hair) solid var(--line);}
  .nav-menu a:first-child{border-top:0;}
  .nav-veil{display:block;position:fixed;inset:0;top:0;z-index:899;
    background:rgba(39,35,31,.35);}
  .nav-veil[hidden]{display:none;}
}

/* 戻るリンクの短縮表記。狭い画面でだけ差し替える */
.nav-short{display:none;}

@media(max-width:600px){
  .nav-full{display:none;}
  .nav-short{display:inline;}

  /* 見出しに添える日本語は、筆記体の英字と横に並ぶため狭い画面では幅が足りず、
     「スペシャルコ／ラム」のように語の途中で割れてしまう。
     左右の飾り線を短くし、字間を詰め、折り返しを禁止して1語として読めるようにする */
  .shead .en,
  header.head .en,
  header.hero .en{gap:var(--sp-3);}
  .shead .en::before,.shead .en::after,
  header.head .en::before,header.head .en::after,
  header.hero .en::before,header.hero .en::after{flex:0 1 18px;}
  .shead .ja,
  header.head .ja,
  header.hero .ja{letter-spacing:var(--ls-wide);text-indent:var(--ls-wide);white-space:nowrap;}

  /* 項目が画面幅に収まらないので、横に続きがあることをフェードで示す */
  .nav{position:sticky;}
  .nav .inner{position:relative;}
  .nav::after{content:"";position:absolute;right:0;top:0;bottom:2px;width:26px;
    background:linear-gradient(90deg,rgba(244,238,209,0),rgba(244,238,209,.96));
    pointer-events:none;}

  /* タップ領域は指で確実に押せる44pxを下限にする */
  .nav .tk{padding:var(--sp-3) var(--sp-4);}
  footer .links a{padding:var(--sp-3) 0;}
  .btn-profile{padding:var(--sp-3) var(--sp-5);}
}

/* ───────── 編集モード（本番では読み込まれない想定の作業用UI） ───────── */
.lp-editbar{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;gap:var(--sp-2);align-items:center;
  background:#fff;border:var(--bd-base) solid var(--ink);border-radius:var(--r-card);padding:var(--sp-2) var(--sp-3);
  box-shadow:var(--sh-btn);font-size:var(--fs-2xs);color:var(--ink);}
.lp-editbar b{color:var(--red);}
.lp-editbar button{font-family:inherit;font-size:var(--fs-2xs);font-weight:800;cursor:pointer;
  border:var(--bd-base) solid var(--ink);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-3);
  background:var(--yellow);color:var(--ink);}
.lp-editbar .hint{max-width:200px;line-height:1.5;color:var(--ink-2);}
.is-editing{outline:2px dashed var(--red);outline-offset:4px;border-radius:var(--r-thin);cursor:text;}
.is-editing:hover{background:rgba(224,55,60,.1);}

/* ═════════ 前売券につく原作書籍の選択 ═════════
   1冊を1枚のカードにして左右に並べ、あいだの「または」で
   どちらか一方を選ぶことを示す。押せる部品ではないので黄色い塗り面は使わない（ルール1）。
   赤地（.end）の上にも置くため、文字色はクラス指定（詳細度2）で赤地用の白指定に勝たせる */
.bookpick{max-width:880px;margin:var(--sp-10) auto 0;}
.bookpick .bp-lead{text-align:center;color:var(--ink);
  font-size:var(--fs-base);font-weight:700;line-height:1.9;margin:0 0 var(--sp-8);}
.bookpick .bp-lead b{color:var(--red-deep);}
.bookpick .bp-grid{display:grid;grid-template-columns:1fr auto 1fr;
  grid-template-rows:auto auto auto auto 1fr;align-items:stretch;gap:var(--sp-4);}
.bookpick .bp-card{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;text-align:center;
  background:var(--cream-hi);color:var(--ink);
  border:var(--bd-strong) solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-card);
  padding:var(--sp-8) var(--sp-8);}
/* 書影は「実物の紙」。角丸は --r-thin、影は --sh-book（ルール5・影の表） */
.bookpick .bp-card img{display:block;height:196px;width:auto;margin:0 auto var(--sp-6);
  border:var(--bd-base) solid var(--ink);border-radius:var(--r-thin);box-shadow:var(--sh-book);}
.bookpick .bp-ttl{font-size:clamp(22px,2.2vw,25px);font-weight:800;line-height:1.55;
  color:var(--ink);margin:0;}
.bookpick .bp-sub{font-size:20px;color:var(--ink-2);line-height:1.9;margin:var(--sp-3) 0 0;}
.bookpick .bp-price{font-size:20px;font-weight:700;color:var(--ink);margin:var(--sp-3) 0 0;}
.bookpick .bp-price b{font-family:var(--font-mix);font-size:25px;font-weight:800;margin:0 .1em;}
.bookpick .bp-for{font-size:20.5px;line-height:2;text-align:left;color:var(--ink);
  margin:var(--sp-6) 0 0;padding-top:var(--sp-5);
  border-top:var(--bd-hair) solid var(--line);}
.bookpick .bp-for b{display:block;font-size:17.5px;font-weight:800;letter-spacing:.14em;
  color:var(--red-deep);margin-bottom:var(--sp-2);}
/* 2冊をつなぐ「または」。囲みは付けず、文字だけで置く */
.bookpick .bp-or{grid-row:1 / -1;align-self:center;justify-self:center;
  padding:0 var(--sp-2);white-space:nowrap;
  font-size:17.5px;font-weight:800;color:var(--ink-2);}
.bookpick .bp-note{margin:var(--sp-5) 0 0;text-align:center;font-size:var(--fs-2xs);line-height:1.8;}
.bookpick .bp-note.todo{color:var(--red-deep);}
@media(max-width:760px){
  .bookpick{margin-top:var(--sp-8);}
  .bookpick .bp-grid{grid-template-columns:1fr;grid-template-rows:none;}
  .bookpick .bp-card{grid-row:auto;display:flex;flex-direction:column;}
  .bookpick .bp-or{grid-row:auto;margin:var(--sp-2) auto;}
  .bookpick .bp-card{padding:var(--sp-6) var(--sp-5);}
  .bookpick .bp-card img{height:170px;}
}


/* ─────────────────────────────────────────────
   ムビチケ（劇場のオンライン券）への誘導
   ・01「自分で観る」の1枚目のカード、1,600円の前売券のすぐ下
   ・issue+designの前売券とは別物なので、破線で区切って注記を添える
   ・9/4の発売開始後は .mvtk-d（発売日の一文）を削除する
   ───────────────────────────────────────────── */
.mvtk{margin-top:var(--sp-6);padding-top:var(--sp-6);
  border-top:2px dashed var(--cream-3);text-align:center;}
.mvtk-t{font-size:var(--fs-2xs);font-weight:800;line-height:1.75;color:var(--ink);}
.mvtk-b{display:block;margin:var(--sp-3) auto 0;max-width:300px;border-radius:6px;
  overflow:hidden;box-shadow:0 3px 0 rgba(39,35,31,.22);
  transition:transform .15s ease, box-shadow .15s ease;}
.mvtk-b:hover{transform:translateY(2px);box-shadow:0 1px 0 rgba(39,35,31,.22);}
.mvtk-b img{display:block;width:100%;height:auto;}
.mvtk-n{margin-top:var(--sp-4);font-size:15px;line-height:1.8;color:var(--ink-2);}
.mvtk-d{display:inline-block;margin-top:var(--sp-1);font-weight:800;color:var(--red-deep);}