@charset "utf-8";
/* =============================================================================
   MISSIONMAN v3 — Concept A: VINTAGE ROAD CINEMA
   「1本のフィルムとして編集されたページ」

   構成の考え方:
     ページ全体を1本のリールとして扱う。各セクションは REEL 00〜07 の巻で、
     先頭に必ずスレート（カチンコの板）が入り、そこで一度「切れて」次の巻が始まる。
     写真は 2.39:1 のシネスコ帯で、文字は帯の外（レターボックスの黒）に置く。
     ＝ 写真の上に文字を重ねる v2 とは、可読性の作り方から違える。

   規約（緩めない）:
     - 外部ホストを参照しない（CDN・外部フォント・外部画像・外部スクリプト・iframe 全て禁止）
     - 素の CSS に opacity:0 / visibility:hidden / clip-path による全隠しを書かない。
       隠してよいのは html[data-js="on"] が立っているときだけ。
     - 新しいマスクを足すときは data: URI にする（file:// でマスク画像が読めず要素が消えるため）
     - 色は aging.css の実測トークン（--ag-*）だけを使う。錆色・橙は使わない。
   ============================================================================= */

/* ------------------------------------------------------------------ 書体 */
/* Barlow / Barlow Condensed（SIL OFL）。自ホスト。欧文のみ。和文 Web フォントは入れない */
@font-face{font-family:'Barlow';src:url('../fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ============================================================== トークン */
:root{
  /* --- aging.css のテクスチャ参照をこの案の相対パスへ張り替える ---
     aging.css 内の url() は「aging.css からの相対」で書かれている。
     この案では textures/ を assets/textures/ に置いたので、
     assets/css/style.css からの相対（../textures/）で上書きする。
     ※ マスクの6点は aging.css 内に data: URI で焼き込まれているので触らない。 */
  --ag-tex-grain-soft:url(../textures/grain-soft.png);
  --ag-tex-grain-base:url(../textures/grain-base.png);
  --ag-tex-grain-heavy:url(../textures/grain-heavy.png);
  --ag-tex-paper:url(../textures/paper.png);
  --ag-tex-leather:url(../textures/leather.png);
  --ag-tex-steel:url(../textures/steel.png);

  /* --- 書体 --- */
  --jp:'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic Medium','Yu Gothic','Meiryo',sans-serif;
  --sans:'Barlow','Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic Medium','Yu Gothic','Meiryo',sans-serif;
  --cond:'Barlow Condensed','Barlow',sans-serif;

  /* --- タイポスケール --- */
  --step--2:clamp(11px,.70rem,12px);
  --step--1:clamp(12px,.78rem,13px);
  --step-0 :clamp(15px,1rem,17px);
  --step-1 :clamp(17px,1.22rem,20px);
  --step-2 :clamp(22px,3vw,34px);
  --step-3 :clamp(30px,5vw,58px);
  --step-4 :clamp(40px,8.4vw,116px);

  /* --- 余白 --- */
  --pad:clamp(14px,4.4vw,64px);
  --wrap:1160px;
  --measure:33em;
  --sp-xs:clamp(14px,2vw,24px);
  --sp-s :clamp(24px,3.4vw,44px);
  --sp-m :clamp(44px,6vw,84px);
  --sp-l :clamp(72px,10vw,150px);
  --sp-xl:clamp(110px,16vw,240px);

  /* --- モーション（docs/design/motion-spec.md 1-1） --- */
  --mo-fast:.18s;
  --mo-base:.32s;
  --mo-slow:.6s;
  --mo-scene:1.1s;
  --mo-out:cubic-bezier(.22,1,.36,1);
  --mo-in:cubic-bezier(.55,0,1,.45);
  --mo-io:cubic-bezier(.65,0,.35,1);
  --mo-rise:14px;
  --mo-parallax:40px;
  --mo-zoom:1.06;
  --mo-roll:30px;          /* エンドロールの送り量 */

  /* --- この案だけのレイアウト定数 --- */
  --perf:26px;             /* 左右のパーフォレーション帯の幅 */
  --scope:2.39;            /* シネスコの比率 */
  color-scheme:dark;
}

/* 低性能・モバイルは「同じ CSS のまま値だけ落とす」。隠す条件には使わない */
html[data-motion="lite"]{
  --mo-scene:.7s;
  --mo-rise:8px;
  --mo-parallax:0px;
  --mo-zoom:1.02;
  --mo-roll:0px;
}

/* ================================================================ リセット */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ag-ground);
  color:var(--ag-ink-light);
  font-family:var(--jp);
  font-size:var(--step-0);
  line-height:1.85;
  font-feature-settings:"palt" 1;
  letter-spacing:.02em;
  overflow-x:hidden;             /* 帯の演出が 1px 単位で溢れるのを封じる。中身は check_widths で実測 */
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,dl,dd,figure,ul{margin:0}
ul{padding:0;list-style:none}
hr{border:0}
:focus-visible{outline:3px solid var(--ag-amber);outline-offset:3px}

.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;
}
.skip{
  position:absolute;left:8px;top:-60px;z-index:80;
  background:var(--ag-paper);color:var(--ag-ink-dark);
  padding:.7em 1.1em;font-weight:700;text-decoration:none;
  transition:top var(--mo-fast) var(--mo-out);
}
.skip:focus{top:8px}

.wrap{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ======================================================= 地の層（空気感） */
/* M6: 巻が変わると時間帯が変わる。地の色は **セクション自身が常に持つ**（透過させない）。
   ＝ JS の有無・スクリーンショット・印刷のどれでも色分けが必ず残る。
   巻と巻の継ぎ目は、上端のヘイズ（前の巻の色から現在の色へ溶ける帯）で繋ぐ。
   さらに JS が動いているときだけ、いま見ている巻の色をヘッダーの罫線・
   進捗バー・フィルムの縁へ反映する（下の「巻の色を UI へ」）。 */
.reel[data-tone="film"],.band[data-tone="film"]  {background-color:var(--ag-ground)}
.reel[data-tone="panel"],.band[data-tone="panel"]{background-color:var(--ag-panel)}
.reel[data-tone="paper"],.band[data-tone="paper"]{background-color:var(--ag-paper)}
.reel[data-tone="tan"],.band[data-tone="tan"]    {background-color:var(--ag-tan)}
.reel[data-tone="cloud"],.band[data-tone="cloud"]{background-color:var(--ag-cloud)}
.reel[data-tone="warm"],.band[data-tone="warm"]  {background-color:var(--ag-warm)}

/* 巻の継ぎ目のヘイズ。前の巻の色を上端に残して溶かす。
   ::before は面の素材（.ag-print / .ag-leather）が使うので ::after を使い、
   z-index:-1 + isolation:isolate で「地の上・中身の下」に置く（aging.css と同じ形）。 */
.reel::after,.band::after{
  content:"";
  position:absolute;inset-inline:0;inset-block-start:0;z-index:-1;
  height:var(--haze-h,clamp(70px,10vw,170px));
  pointer-events:none;
  background-image:linear-gradient(to bottom,var(--haze,transparent),rgba(0,0,0,0));
}
.reel,.band{isolation:isolate}

/* 巻ごとのヘイズ。値は「前の巻の地の色」＝ 上から光/闇が残っている状態 */
.hero{--haze:transparent}
.mq-band{--haze:rgba(15,16,19,.85);--haze-h:60px}
.about{--haze:rgba(15,16,19,.72)}          /* 黒 → 紙。夜が明ける */
.dawn-band{--haze:rgba(224,220,212,.34)}   /* 紙 → 曇天。光が薄れる */
.film{--haze:rgba(26,28,31,.9);--haze-h:60px}
.yt{--haze:rgba(26,28,31,.9)}              /* パネル → 黒 */
.shop{--haze:rgba(15,16,19,.6)}            /* 黒 → タン。昼へ戻る */
.news{--haze:rgba(197,171,141,.85)}        /* タン → 曇天 */
.contact{--haze:rgba(128,139,140,.7)}      /* 曇天 → 夕方 */
.end{--haze:rgba(105,94,89,.75)}           /* 夕方 → 夜 */

/* 巻の色を UI へ（JS が動いているときだけ）。地は動かさないので破綻しない */
html[data-tone="paper"] .pg-bar,
html[data-tone="tan"] .pg-bar{background:var(--ag-blood)}
html[data-tone="cloud"] .pg-bar{background:var(--ag-panel)}
html[data-tone] .hd{transition:border-color var(--mo-slow) var(--mo-io)}
html[data-tone="paper"] .hd,
html[data-tone="tan"] .hd,
html[data-tone="cloud"] .hd{border-block-end-color:rgba(242,239,233,.34)}
html[data-tone] .perf{transition:background-color var(--mo-slow) var(--mo-io)}
html[data-tone="paper"] .perf,
html[data-tone="tan"] .perf,
html[data-tone="cloud"] .perf{background:rgba(15,16,19,.5)}

/* 明暗で文字色を切り替える。ここは装飾ではなく可読性の設定 */
.reel[data-tone="paper"],
.reel[data-tone="tan"],
.reel[data-tone="cloud"],
.band[data-tone="paper"],
.band[data-tone="tan"]{color:var(--ag-ink-dark)}

/* ========================================================= 進捗（フィルム） */
/* M9: 情報であって装飾ではないので reduced-motion でも残す */
.pg{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  height:3px;background:rgba(15,16,19,.55);pointer-events:none;
}
.pg-bar{
  display:block;height:100%;width:100%;
  background:var(--ag-amber);
  transform-origin:0 50%;
  transform:scaleX(0);
}
@supports (animation-timeline: scroll()){
  .pg-bar{animation:pg linear both;animation-timeline:scroll(root block)}
  @keyframes pg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ============================================ パーフォレーション（フィルム送り） */
/* M7: 画面の左右に、送られていくフィルムの縁を置く。装飾。1180px 未満では出さない */
.perf{display:none}
@media (min-width:1180px){
  .perf{
    display:block;position:fixed;inset-block:0;z-index:1;
    width:var(--perf);overflow:hidden;pointer-events:none;
    background:rgba(15,16,19,.72);
    border-inline:1px solid rgba(242,239,233,.10);
  }
  .perf--l{inset-inline-start:0}
  .perf--r{inset-inline-end:0}
  .perf-tape{
    display:block;width:100%;height:300vh;
    background-image:repeating-linear-gradient(
      to bottom,
      transparent 0 14px,
      rgba(242,239,233,.24) 14px 30px,
      transparent 30px 44px);
    background-size:100% 44px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
  }
  @supports (animation-timeline: scroll()){
    html[data-js="on"][data-motion="full"] .perf-tape{
      animation:perf-run linear both;
      animation-timeline:scroll(root block);
    }
    @keyframes perf-run{from{translate:0 0}to{translate:0 -88px}}
    html[data-js="on"][data-motion="full"] .perf--r .perf-tape{
      animation-name:perf-run-b;
    }
    @keyframes perf-run-b{from{translate:0 -44px}to{translate:0 -132px}}
  }
}

/* ================================================================ ヘッダー */
.hd{
  position:sticky;inset-block-start:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-xs);
  padding:.55rem var(--pad);
  background-color:rgba(15,16,19,.88);
  border-block-end:1px solid rgba(242,239,233,.14);
  color:var(--ag-ink-light);
}
.hd-mark{
  font-family:var(--cond);font-weight:700;
  font-size:var(--step--1);letter-spacing:.34em;text-transform:uppercase;
  white-space:nowrap;
}
.hd-nav{display:flex;flex-wrap:wrap;gap:.2rem .1rem}
.hd-nav a{
  display:inline-flex;align-items:center;min-height:38px;
  padding:0 .55em;
  font-family:var(--cond);font-weight:600;
  font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:rgba(242,239,233,.82);
  border-block-end:1px solid transparent;
}
.hd-nav a:hover{color:var(--ag-ink-light);border-block-end-color:var(--ag-amber)}

/* ================================================================ 共通部品 */

/* --- スレート（カチンコの板）。各巻の頭に必ず入る --- */
.slate{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:.5em .9em;
  font-family:var(--cond);font-weight:700;
  font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;
  line-height:1.2;
}
.slate::before{
  content:"";
  display:block;flex:none;
  width:44px;height:13px;
  background-image:repeating-linear-gradient(112deg,
    currentColor 0 7px,transparent 7px 14px);
  opacity:.85;
}
.slate-reel{
  padding:.24em .6em;
  background-color:var(--ag-amber);color:var(--ag-ink-dark);
  font-variant-numeric:tabular-nums;
}
.slate-name{opacity:.95}
.slate-take{
  margin-inline-start:auto;
  font-weight:600;opacity:.62;letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
}

/* --- ラベル・見出し --- */
.label{
  font-family:var(--cond);font-weight:600;
  font-size:var(--step--1);letter-spacing:.22em;text-transform:uppercase;
  opacity:.72;
}
.h-jp{
  font-family:var(--jp);font-weight:700;
  font-size:var(--step-2);line-height:1.42;letter-spacing:.01em;
  text-wrap:balance;                      /* 見出しの行を均す。非対応環境では無視される */
}
.h-lat{
  font-family:var(--cond);font-weight:700;
  font-size:var(--step-3);line-height:.94;letter-spacing:.03em;text-transform:uppercase;
}
.lead{font-size:var(--step-1);line-height:1.95;max-width:var(--measure)}
.body-jp{max-width:var(--measure)}
.fine{font-size:var(--step--1);line-height:1.9;opacity:.86;max-width:var(--measure)}
.num{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* --- 区切り --- */
.rule{margin-block:var(--sp-s)}

/* --- CTA 群 --- */
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem 1rem;margin-block-start:var(--sp-s)}
.ext{font-family:var(--sans);font-size:.9em;opacity:.8}

/* --- シネスコ帯（この案の基本単位） --- */
.scope{
  display:block;
  position:relative;
  overflow:hidden;
  margin:0;
  background-color:#0B0C0D;
  aspect-ratio:var(--scope);
}
.scope > img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.scope-cap{
  margin-block-start:.7em;
  font-size:var(--step--1);line-height:1.7;opacity:.8;
  display:flex;gap:.8em;align-items:baseline;
}
.scope-cap .num{flex:none;opacity:.62;letter-spacing:.16em;font-family:var(--cond);font-weight:700;text-transform:uppercase}

/* 320〜720px は 2.39:1 だと帯が細くなりすぎるので、被写体が残る比率へ寄せる */
@media (max-width:720px){
  .scope{aspect-ratio:1.7}
}

/* --- 全幅の帯 --- */
.band{
  position:relative;
  padding-block:clamp(40px,6vw,72px);   /* .ag-edge の欠け（14px）の2倍以上を確保 */
  padding-inline:var(--pad);
}

/* ================================================================ REEL 共通 */
.reel{position:relative;padding-block:var(--sp-l)}
.reel--tight{padding-block:var(--sp-m)}
.reel--wide{padding-block:var(--sp-xl)}
.reel-head{margin-block-end:var(--sp-s)}
.reel-head .slate{margin-block-end:var(--sp-xs)}

/* =================================================================== HERO */
.hero{padding-block:0}
.hero-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:1em;
  padding:var(--sp-xs) var(--pad) .8rem;
}
.hero-frame{
  position:relative;overflow:hidden;
  margin:0;
  aspect-ratio:var(--scope);
  max-height:78svh;
  background-color:#0B0C0D;
}
/* 画は枠より上下に 4% ずつ大きくしておく。
   ＝ 縦方向の演出（沈み・ドリフト）で枠に隙間が出ない。
   横方向には一切広げない（拡大すると 320px で「はみ出し」として検出されるため、
   この案の画の演出はすべて縦方向とクリップで作る）。 */
.hero-shot{display:block;position:absolute;inset:-4% 0}
.hero-img{
  width:100%;height:100%;object-fit:cover;object-position:52% 54%;
  translate:0 0;                 /* 基準は定位置・可視。ここを 0 opacity にしない */
  will-change:transform;
}
.hero-burn{
  position:absolute;inset-inline-start:0;inset-block-end:0;z-index:4;
  max-width:min(30em,92%);
  font-size:var(--step--1);line-height:1.6;
  --ag-shield-pad:.7em 1.1em;
}
.hero-body{padding:clamp(20px,3.4vw,40px) var(--pad) 0}
.hero-title{
  font-family:var(--jp);font-weight:700;
  font-size:var(--step-3);line-height:1.22;letter-spacing:.005em;
  max-width:14em;
}
.hero-title .mo-line{display:block}
.hero-said{
  margin-block-start:1.1em;
  font-family:var(--cond);font-weight:600;
  font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;opacity:.6;
}
.hero-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6em 1.6em;
  margin-block-start:var(--sp-s);
  padding-block-start:var(--sp-xs);
}
.hero-stat{
  display:flex;align-items:baseline;gap:.4em;
  font-family:var(--cond);font-weight:700;
  font-size:var(--step-1);letter-spacing:.1em;text-transform:uppercase;
}
.hero-stat span{font-size:var(--step--1);opacity:.66;letter-spacing:.18em}

/* --- マーキー（上映都市） ---
   文字は擬似要素で持つ。実要素にすると、帯の内側で切っているだけの文字が
   「横はみ出し」として検出されてしまうため（tools/check_widths.py は
   overflow の内側でも要素の箱を実測する）。読み上げは aria-label と .sr-only が担う。 */
.mq{
  position:relative;overflow:hidden;
  padding-block:.7em;
  font-family:var(--cond);font-weight:700;
  font-size:var(--step-1);letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;
  opacity:.92;
}
.mq::before,.mq::after{
  content:var(--mq-text,"");
  display:inline-block;
  white-space:pre;
  will-change:transform;
}
.mq::after{position:absolute;inset-block-start:.7em;inset-inline-start:0;transform:translateX(100%)}
/* 読み上げ用の実テキスト。nowrap の帯の中で流れて右へ抜けないよう原点に固定する */
.mq .sr-only{inset-inline-start:0;inset-block-start:0}
.mq--cities{--mq-text:"RASIN 全国上映 — 広島 05.24 — 宮城 06.21 — 北海道 07.26 — 福岡 08.30 — 滋賀 09.27 — 埼玉 10.18 — "}
html[data-js="on"] .mq::before{animation:mq-a var(--mq-dur,34s) linear infinite}
html[data-js="on"] .mq::after {animation:mq-b var(--mq-dur,34s) linear infinite}
@keyframes mq-a{from{transform:translateX(0)}      to{transform:translateX(-100%)}}
@keyframes mq-b{from{transform:translateX(100%)}   to{transform:translateX(0)}}
html[data-motion="lite"] .mq{--mq-dur:52s}

/* --- 巻と巻のあいだに挟む帯 --- */
.mq-band{color:var(--ag-ink-light);padding-block:clamp(34px,4.4vw,54px)}
.dawn-band{padding-block:clamp(40px,6vw,88px);color:var(--ag-ink-light)}
.dawn-fig{margin:0}
.film-still{margin:var(--sp-m) 0 0}
.film-still .scope-cap{padding-block-end:0}
.shop-band{margin:0 0 var(--sp-m)}
.shop-wear{margin:var(--sp-m) 0 0}
/* 商品まわりの2枚は「帯」として置く。寄りの絵を大きく出すと案Bの領分になるうえ、
   人物の顔が主役になってしまうため、シネスコよりさらに横長に切る */
.shop-band .scope,
.shop-wear .scope{aspect-ratio:3.3}
@media (max-width:720px){
  .shop-band .scope,
  .shop-wear .scope{aspect-ratio:2.2}
}

/* ============================================================== REEL 01 紹介 */
.about-lede{
  display:grid;gap:var(--sp-s);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .about-lede{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-m)}
}
.about-h{max-width:15em}
.about-figs{
  display:grid;gap:var(--sp-s);
  margin-block-start:var(--sp-m);
}
.about-fig{margin:0}
.about-fig--wide{grid-column:1/-1}
@media (min-width:820px){
  .about-figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-s) var(--sp-s)}
}
.about-note{
  margin-block-start:var(--sp-s);
  --ag-shield-pad:1.1em 1.3em;
  max-width:var(--measure);
}
.mission-line{
  display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;
  margin-block-start:var(--sp-xs);
}
.mission-num{
  font-family:var(--cond);font-weight:700;
  font-size:var(--step-4);line-height:.86;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.mission-unit{font-size:var(--step-1);font-weight:700}

/* ============================================================== REEL 02 映画 */
.film-grid{
  display:grid;gap:var(--sp-m);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:960px){
  .film-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
/* ポスター（日焼けした映画ポスター） */
.poster{
  margin:0;
  padding:clamp(10px,1.6vw,20px);
  background-color:var(--ag-panel);
  color:var(--ag-ink-light);
  --ag-frame-c:rgba(242,239,233,.62);
}
.poster img{width:100%}
.poster-cap{
  margin-block-start:.9em;
  display:flex;flex-wrap:wrap;gap:.4em 1em;align-items:baseline;
  font-family:var(--cond);font-weight:600;
  font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;opacity:.72;
}
.film-title{
  font-family:var(--cond);font-weight:700;
  font-size:var(--step-4);line-height:.9;letter-spacing:.02em;
}
.film-title .jp{
  display:block;
  font-family:var(--jp);font-size:var(--step-1);letter-spacing:.28em;
  margin-block-start:.35em;opacity:.86;
}
.film-copy{margin-block-start:var(--sp-xs)}

/* クレジット表（映画のクレジット組み） */
.cr{margin:0}
.cr-row{
  display:grid;
  grid-template-columns:minmax(7.5rem,10rem) minmax(0,1fr);
  gap:0 clamp(12px,2vw,28px);
  align-items:baseline;
  padding-block:.55em;
  border-block-end:1px solid rgba(242,239,233,.16);
}
.cr-row:last-child{border-block-end:0}
.cr dt{
  font-family:var(--cond);font-weight:700;
  font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;
  opacity:.66;
}
.cr dd{
  margin:0;font-size:var(--step-0);line-height:1.7;letter-spacing:.02em;
}
.cr dd.num{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.05em}
@media (max-width:520px){
  .cr-row{grid-template-columns:minmax(0,1fr);gap:.1em 0}
}

/* 上映日程の帯 */
.sched{
  color:var(--ag-ink-light);
  background-color:var(--ag-ground);
  margin-block-start:var(--sp-m);
}
.sched-in{max-width:var(--wrap);margin-inline:auto}
.sched-h{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em 1.2em;
  margin-block-end:var(--sp-xs);
}
.sched-list{margin:0}
.sched-row{
  display:grid;
  grid-template-columns:minmax(5.5rem,7rem) minmax(6rem,9rem) minmax(0,1fr);
  gap:.2em clamp(10px,2vw,24px);
  align-items:baseline;
  padding-block:.75em;
  border-block-end:1px solid rgba(242,239,233,.16);
}
.sched-row:last-child{border-block-end:0}
.sched-city{font-weight:700;font-size:var(--step-1)}
.sched-date{
  font-family:var(--sans);font-variant-numeric:tabular-nums;
  font-size:var(--step-1);letter-spacing:.06em;
}
.sched-date .dow{
  font-family:var(--cond);font-size:.62em;letter-spacing:.16em;text-transform:uppercase;
  opacity:.66;margin-inline-start:.5em;
}
.sched-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5em 1em;font-size:var(--step--1)}
.sched-venue{opacity:.82}
.sched-link{color:var(--ag-amber);text-underline-offset:.24em}
.sched-note{margin-block-start:var(--sp-xs);opacity:.8}
@media (max-width:680px){
  .sched-row{grid-template-columns:minmax(0,1fr);gap:.15em 0}
}
/* 完売のスタンプ。18px / 700 未満にしない。同じ情報を sr-only のテキストでも持たせる */
.sold{--ag-stamp-size:18px;margin-inline-start:.2em}

/* ============================================================ REEL 03 YouTube */
.yt-stats{
  display:flex;flex-wrap:wrap;gap:.6em 2.4em;
  margin-block:var(--sp-xs) var(--sp-s);
}
.yt-stat{display:flex;align-items:baseline;gap:.35em}
.yt-stat b{
  font-family:var(--cond);font-weight:700;
  font-size:var(--step-3);line-height:1;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.yt-stat span{font-family:var(--cond);font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;opacity:.66}
.yt-list{display:grid;gap:var(--sp-s)}
.yt-card{
  display:block;text-decoration:none;color:inherit;
  padding-block-end:.2em;
}
.yt-still{position:relative;overflow:hidden;background-color:#0B0C0D}
.yt-still img{width:100%;display:block}
.yt-play{
  position:absolute;inset-block-end:12px;inset-inline-end:12px;z-index:4;
  width:38px;height:38px;
}
.yt-meta{
  display:grid;gap:.2em;
  margin-block-start:.8em;
}
.yt-title{font-weight:700;font-size:var(--step-1);line-height:1.5}
.yt-num{
  font-family:var(--cond);font-weight:600;
  font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;opacity:.66;
  font-variant-numeric:tabular-nums;
}
@media (min-width:900px){
  .yt-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-s) var(--sp-xs)}
  .yt-card--lead{grid-column:1/-1}
}

/* =============================================================== REEL 04 BASE */
.shop-grid{
  display:grid;gap:var(--sp-m);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .shop-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}
/* 商品は「台帳」で見せる。白背景の切り抜き写真しか無いので、写真のグリッドに頼らない */
.ledger{margin:0}
.ledger-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.1em clamp(10px,2vw,24px);
  align-items:baseline;
  padding-block:.7em;
}
.ledger-name{font-weight:700;line-height:1.5}
.ledger-tag{
  display:block;
  font-family:var(--cond);font-weight:600;
  font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;opacity:.7;
}
.ledger-price{
  font-family:var(--sans);font-variant-numeric:tabular-nums;
  font-size:var(--step-1);letter-spacing:.03em;white-space:nowrap;
}
.shop-note{--ag-shield-pad:1.1em 1.3em;margin-block-start:var(--sp-s);max-width:var(--measure)}
.shop-say{max-width:13em}

/* =============================================================== REEL 05 NEWS */
.news-grid{
  display:grid;gap:var(--sp-s);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:760px){
  .news-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--sp-m)}
}
/* --ag-cloud はテクスチャ込みで 4.03:1 しかない。本文は必ず shield の上に置く */
.news-card{--ag-shield-pad:1.3em 1.4em}
.news-link{
  display:inline-flex;align-items:center;min-height:44px;gap:.5em;
  margin-block-start:.4em;
  font-weight:700;color:var(--ag-amber);text-underline-offset:.24em;
}

/* ============================================================ REEL 06 CONTACT */
.contact{position:relative;overflow:hidden}
.contact-sky{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
}
.contact-sky img{
  width:100%;height:100%;object-fit:cover;object-position:50% 60%;
  opacity:.5;
}
.contact-in{position:relative;z-index:2}
.contact-card{
  max-width:38em;
  --ag-shield-pad:clamp(20px,3vw,36px);
}
.contact-card .h-jp{margin-block:.2em .5em}

/* ============================================== REEL 07 SNS / エンドロール */
.roll{margin-block-start:var(--sp-s)}
.roll-row{
  display:grid;
  grid-template-columns:minmax(7rem,10rem) minmax(0,1fr);
  gap:.1em clamp(12px,2vw,28px);
  align-items:baseline;
  padding-block:.75em;
  border-block-end:1px solid rgba(242,239,233,.14);
}
.roll-row dt{
  font-family:var(--cond);font-weight:700;
  font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;opacity:.62;
}
.roll-row dd{margin:0}
.roll-row a{
  display:inline-flex;align-items:center;min-height:34px;gap:.4em;
  text-underline-offset:.24em;
}
@media (max-width:520px){
  .roll-row{grid-template-columns:minmax(0,1fr)}
}
.end-mark{
  margin-block-start:var(--sp-m);
  font-family:var(--cond);font-weight:700;
  font-size:var(--step-4);line-height:.9;letter-spacing:.14em;text-transform:uppercase;
  opacity:.9;
}
.end-foot{
  display:flex;flex-wrap:wrap;gap:.6em 1.6em;align-items:baseline;
  margin-block-start:var(--sp-s);
  font-size:var(--step--1);opacity:.78;
}
.end-foot a{text-underline-offset:.24em}
.tear{
  margin-block-start:var(--sp-s);
  font-weight:700;font-size:var(--step-1);opacity:.9;
}

/* ============================================================== モーション */
/* 規約: 素の CSS では何も隠さない。以下はすべて html[data-js="on"] の中だけ。 */

/* --- M1 アパーチャ・オープン（ヒーロー） -------------------------------
   映写機の遮蔽板が開くように、上下から中央へ向かって画が現れる。 */
/* 開き切るまでを短くしてある（0.6s 前後）。長いほど「まだ開いていない画面」を
   見せる時間が増え、回線や端末が遅いときに事故に見えるため。 */
html[data-js="on"] .hero-frame{
  animation:aperture calc(var(--mo-scene) * .55) var(--mo-out) both;
}
@keyframes aperture{
  from{clip-path:inset(46% 0 46% 0)}
  to  {clip-path:inset(0 0 0 0)}
}
html[data-js="on"] .hero-img{
  animation:hero-settle calc(var(--mo-scene) * 1.5) var(--mo-out) both;
}
@keyframes hero-settle{
  from{translate:0 -3.2%}
  to  {translate:0 0}
}
/* スクロールに応じたヒーローの流れ（まだ走っている感）。
   transform（settle）と translate（drift）は別プロパティなので競合しない */
@supports (animation-timeline: view()){
  html[data-js="on"][data-motion="full"] .hero-img{
    animation:hero-settle calc(var(--mo-scene) * 1.5) var(--mo-out) both,
              hero-drift linear both;
    animation-timeline:auto,view();
    animation-range:normal,entry 0% exit 100%;
  }
  @keyframes hero-drift{
    from{transform:translateY(-1.8%)}
    to  {transform:translateY( 1.8%)}
  }
}

/* 【この案の実装方針】
   出現系のモーションは **すべて「基準は見えている」＋ is-in で animation を1回流す** 形にする。
   transition + 事前 opacity:0 / clip-path 方式は、IntersectionObserver が
   何らかの理由で発火しなかった場合に「中身が消えたまま」になる。
   animation 方式なら、is-in が来なければ**演出が付かないだけ**で必ず読める。
   （実際、ヘッドレスの全画面キャプチャでは IO が発火せず、事前隠し方式は
     写真が空欄のまま撮れることを 2026-08-05 に実測した） */

/* IO が応答しなかったときの退避（起動スクリプトが data-rv="off" を立てる）。
   出現アニメーションを丸ごと外す。基準状態は「見えている」なので、
   これだけで全ての中身が確実に表示される。 */
html[data-rv="off"] .is-in,
html[data-rv="off"] .is-in *{animation:none !important}

/* --- M2 スプライス・フリッカー（スレート） -----------------------------
   フィルムのつなぎ目が通る瞬間のちらつき。steps() で段階的に切り替える。 */
html[data-js="on"] .slate.is-in{animation:splice .5s steps(1,end) both}
@keyframes splice{
  0%  {opacity:0;  transform:translateY(-7px)}
  16% {opacity:1;  transform:translateY(3px)}
  30% {opacity:.18;transform:translateY(0)}
  46% {opacity:1;  transform:translateY(-2px)}
  62% {opacity:.5; transform:none}
  78% {opacity:1;  transform:translateY(1px)}
  100%{opacity:1;  transform:none}
}

/* --- M3 シネスコ開き（写真） --------------------------------------------
   画面の中央から左右へ画角が開く＝スタンダードからシネスコへ切り替わる瞬間。
   同時に画そのものは上から沈んで定位置に収まる（縦方向のみ）。 */
.wipe > img{height:107%;object-position:50% 42%}
html[data-js="on"] .wipe.is-in{animation:cine-open var(--mo-slow) var(--mo-io) both}
@keyframes cine-open{
  from{clip-path:inset(0 50% 0 50%)}
  to  {clip-path:inset(0 0 0 0)}
}
html[data-js="on"] .wipe.is-in > img{
  animation:cine-sink calc(var(--mo-slow) * 1.6) var(--mo-out) both;
}
@keyframes cine-sink{
  from{translate:0 -3.6%}
  to  {translate:0 0}
}
html[data-motion="lite"] .wipe.is-in{animation-duration:var(--mo-base)}
html[data-motion="lite"] .wipe.is-in > img{animation:none}

/* --- M4 行単位のせり上がり（見出し） ---------------------------------- */
.mo-line{display:block}
.mo-line > span{display:inline-block}
html[data-js="on"] .mo-line{overflow:hidden;padding-block-end:.09em}
html[data-js="on"] .mo-lines.is-in .mo-line > span{
  animation:line-up var(--mo-slow) var(--mo-out) both;
}
@keyframes line-up{
  from{transform:translateY(106%);opacity:0}
  to  {transform:none;opacity:1}
}
html[data-js="on"] .mo-lines.is-in .mo-line:nth-child(2) > span{animation-delay:.09s}
html[data-js="on"] .mo-lines.is-in .mo-line:nth-child(3) > span{animation-delay:.18s}
html[data-js="on"] .mo-lines.is-in .mo-line:nth-child(4) > span{animation-delay:.27s}
html[data-motion="lite"] .mo-lines.is-in .mo-line:nth-child(n+2) > span{animation-delay:0s}

/* --- M5 車窓のパララックス（写真面と文字面の分離） ---------------------- */
.px{overflow:hidden}
.px > img{width:100%;height:100%;object-fit:cover}
@supports (animation-timeline: view()){
  html[data-js="on"][data-motion="full"] .px > img{
    height:calc(100% + (var(--mo-parallax) * 2));
    margin-block-start:calc(var(--mo-parallax) * -1);
    animation:px-move linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes px-move{
    from{translate:0 calc(var(--mo-parallax) * -1)}
    to  {translate:0 var(--mo-parallax)}
  }
}

/* --- M6 クレジットの点灯（上から順に） --------------------------------- */
html[data-js="on"] .cr.is-in .cr-row,
html[data-js="on"] .sched-list.is-in .sched-row,
html[data-js="on"] .ledger.is-in .ledger-row{
  animation:row-in var(--mo-base) var(--mo-out) both;
}
@keyframes row-in{
  from{opacity:0;transform:translateY(var(--mo-rise))}
  to  {opacity:1;transform:none}
}
html[data-js="on"] .is-in > *:nth-child(1){animation-delay:0s}
html[data-js="on"] .is-in > *:nth-child(2){animation-delay:.06s}
html[data-js="on"] .is-in > *:nth-child(3){animation-delay:.12s}
html[data-js="on"] .is-in > *:nth-child(4){animation-delay:.18s}
html[data-js="on"] .is-in > *:nth-child(5){animation-delay:.24s}
html[data-js="on"] .is-in > *:nth-child(n+6){animation-delay:.3s}   /* 遅延の総和は 0.3s で頭打ち */
html[data-motion="lite"] .is-in > *{animation-delay:0s !important}

/* --- M7 エンドロール（下から上へ、行ごとに送り量が変わる） --------------- */
@supports (animation-timeline: view()){
  html[data-js="on"][data-motion="full"] .roll-row{
    animation:roll-up linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes roll-up{
    from{translate:0 calc(var(--mo-roll) * var(--roll-k,1))}
    to  {translate:0 calc(var(--mo-roll) * var(--roll-k,1) * -1)}
  }
  .roll-row:nth-child(1){--roll-k:.4}
  .roll-row:nth-child(2){--roll-k:.6}
  .roll-row:nth-child(3){--roll-k:.8}
  .roll-row:nth-child(4){--roll-k:1}
  .roll-row:nth-child(5){--roll-k:1.2}
  .roll-row:nth-child(n+6){--roll-k:1.4}
}

/* --- M8 入場フェード（ページ全体） ------------------------------------- */
.page-in{animation:page-in var(--mo-base) var(--mo-out) both}
@keyframes page-in{
  from{opacity:0;transform:translateY(6px)}
  to  {opacity:1;transform:none}
}

/* --- M10 ホバー（PC のみ。褪せた画が一瞬だけ戻る） ---------------------- */
@media (hover:hover) and (pointer:fine){
  .hv{transition:transform var(--mo-fast) var(--mo-out)}
  .hv img{transition:filter var(--mo-base) var(--mo-out),transform var(--mo-base) var(--mo-out)}
  .hv:hover img,
  .hv:focus-visible img{--ag-photo-filter:saturate(1) contrast(1) brightness(1) sepia(0);transform:scale(1.02)}
  .hv:hover .yt-title,
  .hv:focus-visible .yt-title{text-decoration:underline;text-underline-offset:.24em}
  .hv:hover .yt-play circle{stroke:var(--ag-amber)}
}

/* ==================================================== 動きの低減（受け皿） */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  /* 位置がずれたまま止まる事故を防ぐ */
  .hero-frame,.hero-img,.slate,.wipe,.wipe > img,.mo-line > span,.px > img,.roll-row,.page-in,
  .mq::before,.mq::after{
    animation:none !important;transform:none !important;
    scale:none !important;translate:none !important;
    clip-path:none !important;opacity:1 !important;
  }
  .px > img{height:100% !important;margin-block-start:0 !important}
  .mo-line{overflow:visible !important}
  .cr-row,.sched-row,.ledger-row{opacity:1 !important;transform:none !important}
  .perf-tape{animation:none !important;translate:none !important}
  .mq{overflow-x:auto}
  .mq::after{display:none}     /* 重複表示を消す。先頭から手で横に読める */
  /* 色分けは情報。切り替えのフェードだけを消す */
  html[data-js="on"] .reel[data-tone="film"] {background-color:var(--ag-ground)}
  html[data-js="on"] .reel[data-tone="panel"]{background-color:var(--ag-panel)}
  html[data-js="on"] .reel[data-tone="paper"]{background-color:var(--ag-paper)}
  html[data-js="on"] .reel[data-tone="tan"]  {background-color:var(--ag-tan)}
  html[data-js="on"] .reel[data-tone="cloud"]{background-color:var(--ag-cloud)}
  html[data-js="on"] .reel[data-tone="warm"] {background-color:var(--ag-warm)}
  @supports (animation-timeline: scroll()){
    .pg-bar{animation-duration:auto !important}
  }
}

/* ==================================================== 小さい画面での調整 */
@media (max-width:720px){
  /* 小さい画面では sticky を降ろす。ナビが2段になっても縦を食わないようにするため */
  .hd{
    position:static;
    flex-direction:column;align-items:stretch;gap:.3rem;
    padding-block:.5rem .3rem;
  }
  .hd-nav{flex-wrap:wrap;gap:0}
  .hd-nav a{white-space:nowrap;padding-inline:.5em;min-height:36px}
  .hero-frame{max-height:none}
  .hero-title{max-width:none}
  .slate-take{margin-inline-start:0}
  .cta-row .ag-cta{flex:1 1 100%}
}
@media (max-width:400px){
  .slate::before{width:30px}
  .yt-play{width:30px;height:30px}
}
.shop{padding-block-start:0;padding-block-end:0}
.shop .shop-band{padding-block-start:0}
.film{padding-block-end:0}
.hero{padding-block-end:var(--sp-m)}

/* ================================================== 明るい地でのトーン調整 */
.reel[data-tone="paper"] .cr-row,
.reel[data-tone="tan"] .cr-row,
.reel[data-tone="paper"] .roll-row,
.reel[data-tone="tan"] .ledger-row{border-block-end-color:rgba(20,22,26,.24)}
.reel[data-tone="tan"] .ledger-row{border-block-end:1px solid rgba(20,22,26,.24)}
.reel[data-tone="cloud"] .label,
.reel[data-tone="paper"] .label,
.reel[data-tone="tan"] .label{opacity:.8}