@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:#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代。本文18px・補助文14.5pxを下限にしている */
  --fs-3xs:12.5px;                       /* フッターのクレジット */
  --fs-2xs:13.5px;                       /* キャプション、極小ラベル */
  --fs-xs:14.5px;                        /* 補助文、ラベル、ナビ項目 */
  --fs-sm:16px;                          /* リスト、小さめの本文 */
  --fs-base:18px;                        /* 本文の基準。これより小さい本文は作らない */
  --fs-md:21px;                          /* 小見出し、キャスト名 */
  --fs-lg:clamp(21px,3.4vw,32px);        /* リード文、キャッチコピー */
  --fs-xl:clamp(23px,4vw,40px);          /* セクションの大きなコピー */
  --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;      /* 本文の一行の長さ。ページごとに上書きしてよい */

  /* ── 書体 ──
     読み込みが落ちても日本語が化けないよう、必ず和文フォールバックを持たせる。
     Adobe Fonts（秀英丸ゴシック＋proxima-soft）に切り替えるときは、この3行だけ差し替える */
  --font-ja:YakuHanJPs,"M PLUS Rounded 1c","Zen Maru Gothic","Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4",YuGothic,"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --font-en:YakuHanJPs,"M PLUS Rounded 1c","Zen Maru Gothic","Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4",YuGothic,"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --font-mix:YakuHanJPs,"M PLUS Rounded 1c","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);}

a: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:var(--fs-xs);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:var(--fs-3xs);font-weight:700;letter-spacing:.02em;white-space:nowrap;}
.nav .tk .main{font-size:var(--fs-xs);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);}

/* ───────── 写真 ───────── */
.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:var(--bd-base) solid var(--ink);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);}}

/* ───────── フッター ───────── */
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);}
}

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

@media(max-width:600px){
  /* ───────── スマホのナビ ─────────
     前売券ボタンは主要な導線なので、狭い画面では先頭に置いて必ず目に入るようにする。
     ボタンの「原作書籍付き」は省き、戻るリンクも短い表記に差し替えて幅を確保する */
  .nav .inner{gap:var(--sp-1);padding:0 var(--sp-3);
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .nav .inner::-webkit-scrollbar{display:none;}
  .nav a{padding:var(--sp-3) var(--sp-2);font-size:var(--fs-2xs);}
  .nav .tk{order:-1;margin-left:0;margin-right:var(--sp-2);padding:var(--sp-2) var(--sp-4);}
  .nav .tk .lead{display:none;}
  .nav .tk .main{font-size:var(--fs-2xs);}
  .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);}