/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* 和紙。色はトークンが持ち、この画像は「紙の粒」だけを半透明で重ねる。
   だから1枚でアイボリーの地にも、砂色の帯にも、濃紺のフッターにも同じ紙質が乗る。
   scripts/prep_texture.py が継ぎ目なく繰り返せるタイルを書き出している */
:root { --washi: url(../img/washi-tile.png); --washi-size: 384px; }

/* 横のはみ出しを根元で切る。body の clip はビューポートでは hidden 扱いになり、
   読み込み直後（main.js が幅を測る前）に背景の英字やスクロールバーぶんの 100vw が
   はみ出した瞬間に横へずれると、利用者は戻せないままになっていた */
html { overflow-x: clip; }

body {
  margin: 0; color: var(--ink);
  background: var(--ground) var(--washi) repeat; background-size: var(--washi-size);
  overflow-x: clip;   /* 全幅ブリードで横スクロールが出ないように */
  font-family: var(--sans); font-size: 16px; line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 4px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--navy); color: var(--ivory); padding: 12px 18px; border-radius: 8px;
  transition: top var(--transition);
}
.skip:focus { top: 12px; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================ loader */
.loader {
  position: fixed; inset: 0; z-index: 90; background: var(--ground);
  display: flex; align-items: center; justify-content: center; gap: 11px;
}
.loader span {
  width: 9px; height: 9px; border-radius: 50%; background: var(--navy);
  animation: loading-bounce .8s var(--e-out-sine) infinite;
}
.loader span:nth-child(1) { animation-delay: -.18s; }
.loader span:nth-child(2) { animation-delay: -.09s; }
/* 消えるまでの0.7秒も待ち時間として体感される。半分にする */
.loader.is-done { opacity: 0; visibility: hidden; transition: opacity .35s var(--e-inout-cubic), visibility .35s; }
@keyframes loading-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

/* ============================================================ EN 版
   site/en/ は日本語版と**同じ CSS を共有**する。ここだけが言語で変わる。
   すべて html[lang="en"] で囲ってあるので、日本語版には一切効かない。

   縦組み（writing-mode: vertical-rl）は日本語の組み方。英語を縦に流すと
   1文字ずつ回るか単語が割れて読めないので、**英語のときだけ横組み**にする。
   1語ずつ出す演出（--i）と入れ子は日本語版のまま。 */
html[lang="en"] .headline-v {
  writing-mode: horizontal-tb; text-orientation: mixed;
  font-size: clamp(26px, 2.4vw, 38px); line-height: 1.22;
  letter-spacing: .005em; width: auto;
}
html[lang="en"] .headline-v i { margin-right: .24em; }
/* 「次の休日」にあたる行。縦組み前提の食い込み（margin-block-start）を戻す */
html[lang="en"] .headline-v em { margin-block-start: 0; font-size: 1.1em; }
/* 下層ページのページ名と、縦組みのリード文も横組みに */
html[lang="en"] .vpage,
html[lang="en"] .vlead { writing-mode: horizontal-tb; }
html[lang="en"] .vtext-sub { flex-direction: column; }
/* 英語は1語が長い。一言ラベル（.pill）の nowrap を外して折り返せるようにする。
   320px で「The only Yayoi-focused museum in Japan」が 291px になり、
   本文の列（280px）を越えて画面が 7px 横スクロールしていた（実測） */
html[lang="en"] .pill {
  white-space: normal; height: auto; min-height: 29px; padding: 5px 13px;
  line-height: 1.35; text-align: center;
}

@media (max-width: 1199px) {
  /* 狭い画面では縦組みの列が 108px しかない。英語を入れると2語で折れて読めないので、
     **見出しをヒーローの上に全幅で置く**。列が消えるぶん動画の札は広くなる */
  html[lang="en"] .site {
    --hl-w: 0px;
    grid-template-areas: "brand brand" "vtext vtext" "hero hero" "lead lead" "stream stream";
  }
  html[lang="en"] .headline-v {
    width: auto; margin: 8px 0 12px;
    font-size: clamp(27px, 6.2vw, 40px); line-height: 1.2;
  }
  /* --hl-w を 0 にしたので、左へ出す計算も 0 に戻す（そのままだと 14px はみ出す） */
  html[lang="en"] .hero-what { margin-left: 0; width: 100%; }
}

/* ============================================================ layout */
/* .site-top（右上の「大阪府」の帯）は削除した（依頼者指示 2026-08-27）。
   中身がこの1語だけだったので、空の帯を残さず要素ごと外してある。
   事業主体の表記はフッターの「主催：大阪府教育庁 文化財保護課」が持つ。 */


/* 幅は画面に追従する（上限 --site-max）。1280px 固定をやめたのは、
   中央のストリームが 772px に張り付いて窮屈だったため。 */
.site {
  position: relative; max-width: var(--site-max); margin: 0 auto;
  padding: 8px var(--pad-x) 100px;
  display: grid; align-items: start;
  grid-template-columns: var(--rail-l) minmax(0, 1fr) var(--rail-r);
  grid-template-areas: "raill hero nav" "raill stream nav";
  column-gap: var(--col-gap);
}
.rail-l   { grid-area: raill;  position: sticky; top: var(--sticky-top); z-index: 2; }
/* Hero はレールの間の全幅を使う（＝ 100% − 左右余白 − レール） */
.hero     { grid-area: hero; }
/* その下は 80% に絞る。幅そのものがリズムの手がかりになり、行長も伸びすぎない。
   ただし --stream-min を下回らせない（狭い画面で従来より窮屈にしないため） */
.stream   {
  grid-area: stream; position: relative; z-index: 1;
  width: max(var(--stream-min), var(--stream-ratio)); max-width: 100%; margin-inline: auto;
  --stream-shift: calc((var(--rail-r) - var(--rail-l)) / 2);
}
.rail-r   { grid-area: nav;    position: sticky; top: var(--sticky-top); z-index: 2; }

/* ページ全長を貫く線（.thread）は**削除した**（依頼者指示 2026-08-28）。
   `.site` の重なりは 中央のストリーム 1 ＜ 左右のレール 2 のまま。
   **しおりビューアの行程の曲線（pages.css の .sh-curve）は別物なので残っている。** */

/* ============================================================ 左レール */
.brand { display: block; }
/* height は必ず auto。属性の height="98" が残ると、幅だけ変えたときに
   絵が縦へ伸びる（SP で 124×98 になっていた。本来は 124×69） */
.brand-logo { width: 176px; height: auto; }
.vtext { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 14px; margin-top: 32px; }
/* ファーストビューのインパクト源。レール幅（--rail-l）と連動するので、
   サイズを変えたら必ずレールの実測もやり直すこと */
.headline-v {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(44px, 3.9vw, 62px); line-height: 1.5;
  letter-spacing: .08em; color: var(--navy);
}
/* 「次の休日」だけ一段大きく、テラコッタで、行を少しずらして出す。
   全体を極太にせず、**級数・色・位置の差**でコントラストを作る（依頼者指示 2026-08-21） */
.headline-v em {
  font-style: normal; color: var(--terra);
  font-size: 1.18em; letter-spacing: .05em;
  margin-block-start: -.08em;
}
/* 見出しの隣に縦組みで置く事業の説明。ここがサイトで唯一「何の話か」を言う場所なので、
   お知らせに代えて常設した。段数は max-height で決まる（増やすと列が減る） */
.vlead {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 12px; letter-spacing: .1em; line-height: 2.1;
  color: var(--ink-soft); max-height: 470px;
}
.tcy { text-combine-upright: all; }

.burger { display: none; width: 26px; height: 44px; flex-direction: column; justify-content: center; gap: 6px; }
.burger span { display: block; height: 1.5px; background: var(--navy); transition: transform var(--transition); }

/* ============================================================ 右レール */
.navpanel {
  background: var(--panel); border-radius: var(--r-nav);
  display: flex; flex-direction: column; align-items: center;
  /* 上余白は角丸の曲線が終わる位置まで取る。詰めるとカプセルが窮屈に見える */
  padding: var(--np-pad); box-shadow: 0 16px 44px rgba(30, 47, 82, .10);
}
.np-list { width: 100%; }
.np-list a {
  display: flex; align-items: center; gap: 11px; height: 46px; padding-left: 14px;
  font-size: 13.5px; font-weight: 500; letter-spacing: .02em; color: var(--navy);
  transition: color var(--transition);
}
.np-list a:hover { color: var(--terra); }
.np-list i { width: 3px; height: 16px; border-radius: 2px; flex: 0 0 auto; }
.np-cta { margin-top: 16px; width: 100%; font-size: 13.5px; padding: 0 10px; min-height: 48px; white-space: nowrap; }

/* 言語切替（依頼者指示 2026-08-26。右上からここへ移した）。
   主要リンクとは細い罫で区切る。**強く目立たせない**ので、
   ラベルは 11.5px・ink-mid、選ばれている側だけネイビーの太字＋下線。
   色だけに頼らない（下線と太さでも差がつく）。 */
/* ラベルと JP / EN を**上下に積む**（依頼者指示 2026-08-26）。
   横に並べると 76px ＋ 88px ＝ 164px となり、カプセルの内側（140px）に収まらず
   EN だけがカプセルの右端からはみ出していた（実測 32px）。
   space-between もやめる ―― 2つを引き離す指定だったため。 */
.np-lang {
  width: 100%; margin-top: 14px; padding: 12px 0 0 14px;
  border-top: 1px solid var(--ink-hair);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.np-lang-l {
  /* 補足の下限は 12px（§14 2-7）。11.5px だと chk_size に引っかかる */
  font-size: 12px; letter-spacing: .1em; color: var(--ink-mid);
}
/* JP と EN は**ひとまとまり**。44px の当たり判定は保ったまま、
   字面の間隔が 15px になるよう箱だけを寄せる。
   当たり判定は 8px 重なるが、**リンクになるのは常に片方だけ**
   （いま見ている言語は span なので押せない）ので取り合いは起きない。
   先頭を −11px 寄せて、JP の字面をラベルの頭とそろえる。 */
.np-lang-b { display: flex; align-items: center; margin-left: -13px; }
.np-lang-b > * + * { margin-left: -9px; }
/* タップ領域は 44×44 を確保する（ガイドの下限）。見た目は文字だけ */
.np-lang-c, .np-lang-a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  font-size: 13px; letter-spacing: .08em;
}
.np-lang-c { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.np-lang-a { color: var(--ink-mid); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(30, 47, 82, .35); }
.np-lang-a:hover { color: var(--terra); text-decoration-color: currentColor; }
.drawer-close { display: none; }

/* ============================================================ 共通パーツ */
.arch { overflow: hidden; border-radius: var(--r-arch); background: rgba(30, 47, 82, .06); }
.arch img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--e-out-quart); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-btn); font-weight: 500; font-size: 15px; padding: 0 30px;
  min-height: 54px; transition: background var(--transition), border-color var(--transition);
}
.btn-primary { background: var(--cta); color: #fff; }
.btn-primary:hover { background: var(--cta-hover); }
.btn-line { border: 1px solid rgba(30, 47, 82, .36); color: var(--navy); }
.btn-line:hover { border-color: var(--navy); background: rgba(30, 47, 82, .05); }
/* <a class="btn"> は disabled 属性が効かないため、JS が立てる aria-disabled="true" を
   見た目にも反映する（例: itinerary.js の「動画で見つける」）。pointer-events:none で
   クリック自体も止める（キーボード操作の抑止は呼び出し側の click ハンドラで行う）。 */
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; cursor: not-allowed; }

.chip {
  position: relative;
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border: 1px solid rgba(30, 47, 82, .24); border-radius: var(--r-chip);
  font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--navy);
  white-space: nowrap; transition: background var(--transition), color var(--transition);
}
.chip[aria-pressed="true"] { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
/* 見た目は 38px のまま、当たり判定だけ 44px に広げる（ガイド p11） */
.chip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }

.pill {
  display: inline-flex; align-items: center; height: 29px; padding: 0 13px;
  border: 1px solid; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; letter-spacing: .06em; white-space: nowrap;
}
.pill-plain { border-color: rgba(30, 47, 82, .26); color: var(--ink-mid); }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.arrow { color: var(--terra); font-size: 15px; line-height: 1; transition: transform var(--transition); }

/* --- セクションのリズム ---------------------------------------------
   余白・幅・地の色の3つを節ごとに変えて、単調にならないようにする。
   一律にすると高さの差しか手がかりが無くなり、のっぺり見える。 */
.sec { padding-top: 86px; }
.sec-howto  { padding-top: 44px; }    /* KV の続きなので離さない */
.sec-cb     { padding-top: 40px; padding-bottom: 8px; }
.sec-x      { padding-top: 104px; }   /* 体験の手前は大きく空ける */
.sec-mu     { padding-top: 96px; }    /* 主目的。ここで一度たっぷり空ける */
.sec-course { padding-top: 72px; }    /* 館とコースは近い話なので詰める */
.sec-spot   { padding-top: 110px; }
/* 開催中の企画。**上下に余白を持たせる**（依頼者指示 2026-08-26）。
   padding-bottom が 0 で、次の節（.sec-x）の地の色が接して見えていた。
   内側の要素の margin と重ならないよう、padding で持つ（margin collapse を避ける） */
.sec-cp     { padding-block: 48px; }

/* 内容幅も一定にしない。ストリームが広がっても narrow は narrow のままだと
   痩せて見えるので、比率で追従させつつ上下を止める */
.narrow > * { max-width: clamp(660px, 78%, 880px); margin-inline: auto; }
/* 幅が広がっても行長は伸ばさない。和文は 1行 40字前後を上限にする */
.sec-lead { max-width: 42em; }        /* 最長のリードが1行に収まる幅 */
.cs-desc { max-width: 38em; }
/* 最終行が1〜2文字だけになる折り返しを避ける（ブランドガイド由来の品位要件）。
   幅が可変になった分、固定幅前提の手当てでは追いつかないので指定で解く。
   未対応ブラウザでは従来どおりの折り返しに戻るだけで壊れない */
.sec-lead, .cs-desc, .cs-title, .sec-title, .mu-name,
.mu-surprise, .cp-d { text-wrap: pretty; }
/* 語の途中で改行させたくないひとかたまり。**見出し全体には掛けない**。
   和文は既定でどこでも折り返せるので、「いいな」のような短い語が
   「いい／な」と割れることがある（実測：1280〜1920 と 768） */
.nowrap { white-space: nowrap; }
/* コース名は短いので、pretty より balance のほうが割れ方がきれいになる */
.mu-rep-t { text-wrap: balance; }
/* カードの見出し・補足は短く2行に収まるので、均等割りのほうが収まりが良い。
   施設名は「太子町立竹内街道歴史資料館」のように長いものがあり、
   放っておくと2行目が1文字になる（2026-08-20 実測） */
.spot-name, .spot-meta, .stop-n { text-wrap: balance; }

/* 地の色の帯。画面幅いっぱいに敷いて、節が「別の場所」に見えるようにする */
.band { position: relative; padding-bottom: 96px; }
.band::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  /* ストリームの中心は画面中心と一致しない（左右レールが 180 と 200 で非対称）。
     ずれ幅は常に (rail-r − rail-l) / 2 なので、それを足して画面端にぴったり合わせる。
     素朴に left:50%/width:100vw とすると右端に 10px の隙間が出る */
  left: calc(50% - 50vw + var(--stream-shift)); width: 100vw;
  background: var(--band-bg) var(--washi) repeat; background-size: var(--washi-size);
}
.band-warm  { --band-bg: var(--panel-warm); }
.band-white { --band-bg: var(--panel); }
/* 帯そのものが地になるので、中の面は不要 */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.sec-en { display: block; font-family: var(--en); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--terra); margin-bottom: 9px; }
.sec-title { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: .08em; color: var(--navy); line-height: 1.3; }
.sec-lead { color: var(--ink-soft); font-size: 16px; line-height: 1.95; margin-top: 12px; }
.sec-more { font-size: 12.5px; letter-spacing: .06em; color: var(--ink-mid); display: inline-flex; align-items: center; height: 44px; white-space: nowrap; flex: 0 0 auto; }
.sec-more:hover { color: var(--terra); }

/* ============================================================ 1. Hero スライダー */
/* 中央フォーカス型。中央だけ原寸で、左右は縮小＋減光してちら見せする。
   拡縮は animation-timeline: view(inline) が担当。JS は状態表示と自動送りだけ。 */
/* 中央を主役に。左右との差を大きくして、端でクロップされる感じを出す
   （依頼者指示 2026-08-21：中央動画を主役に、左右は端へ大胆にはみ出させる） */
/* KV の大きさは**高さ**から決める（依頼者指示 2026-08-26 ①）。
   幅から決めていたときは 440px → 高さ 781px になり、ファーストビューが
   KV だけで埋まって、直下の「開催中の企画」がまったく見えなかった。
   縦横比 400:710 は Tig Short の形なので変えない。 */
.hero-slider-wrap {
  /* 直下の「開催中の企画」が 150px ほどのぞく高さ。
     100vh − 270px は、上の帯・余白・スライダーの操作列を引いた実測値。
     一度 320px にしたのは右上に言語切替を置いていたときの話で、
     切替をナビのカプセルへ移した（2026-08-26）ので 270px に戻した */
  --slide-h: clamp(360px, calc(100vh - 270px), 740px);
  --slide-w: calc(var(--slide-h) * 400 / 710);
  position: relative;
}
.hero-slider {
  display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: calc(50% - var(--slide-w) / 2);
  /* 端で断ち切らず溶かす。「めぐる」が途切れて見えるのを防ぐ */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.hero-slider::-webkit-scrollbar { display: none; }

/* Hero のリード。事業の説明はサイト中ここだけなので、動画の直後で必ず読ませる */
.hero-lead {
  max-width: 34em; margin: 30px auto 0; text-align: center;
  font-size: 14.5px; line-height: 2.05; letter-spacing: .02em; color: var(--ink-soft);
  text-wrap: pretty;
}
/* 文ごとに折り返す。語の途中で切れると読点の意味が消える */
.hero-lead span { display: inline-block; }
.hero-slide { flex: 0 0 var(--slide-w); scroll-snap-align: center; }

.vv-frame {
  position: relative; width: 100%; aspect-ratio: 400 / 710; overflow: hidden;
  border-radius: calc(var(--slide-w) / 2) calc(var(--slide-w) / 2) 26px 26px;
  background: rgba(30, 47, 82, .06);
  cursor: pointer;
}
.vv-frame video { width: 100%; height: 100%; object-fit: cover; }
/* KV の再生ボタン。見た目は共通の .play にそろえ、ここには挙動だけを残す。
   KV は主役なので円だけ一回り大きくする */
.vv-play { --play-d: 74px; transition: transform var(--transition), opacity var(--transition); }
.vv-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.is-playing .vv-play { opacity: 0; pointer-events: none; }
.is-playing .vv-frame:hover .vv-play { opacity: 1; pointer-events: auto; }
.vv-time {
  position: absolute; right: 18px; bottom: 18px; padding: 5px 11px;
  background: rgba(22, 35, 61, .80); color: var(--ivory); border-radius: 11px;
  font-family: var(--en); font-size: 12px; letter-spacing: .06em;
}
/* 中央以外は操作させない（誤タップ防止） */
.hero-slide:not(.is-active) .vv-play { pointer-events: none; }

/* サムネイルの上に載せる情報。下に置くと縦を食い、ファーストビューに
   バナーが入らなくなる。アーチの天端は曲線なので、必ず下辺に寄せる */
.vv-over {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 44px 16px 15px; pointer-events: none;
  /* 写真への直置きを避けるための保護面（ブランドガイド p05） */
  /* タグの行（帯の上のほう）まで濃度を届かせる。中央の級数を上げたぶん
     写真の切り出し位置が変わり、チップの角丸から明るい画素が抜けて
     2.47 まで落ちた（実測 420px）。段を1つ足して、上側も沈める */
  background: linear-gradient(180deg, rgba(22, 35, 61, 0) 0%, rgba(22, 35, 61, .64) 24%,
              rgba(22, 35, 61, .82) 58%, rgba(22, 35, 61, .92) 100%);
}
/* 目的タグ（観る／体験する／食べる／映え）はサイトの表示から外した
   （依頼者指示 2026-08-26）。エリアの表示は残す。 */
.vv-name {
  font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.45;
  letter-spacing: .03em; color: #fff; text-wrap: balance;
}
.vv-area { margin-top: 5px; font-size: 12px; letter-spacing: .08em; color: rgba(255, 255, 255, .84); }
/* 中央以外は読ませない。減光しているので読もうとすると疲れる */
.hero-slide:not(.is-active) .vv-over { opacity: .55; }

/* 右端に寄せて縦を詰める。中央に置くと1行ぶん余計に高さを食う */
.slider-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; margin-top: 10px; }
/* KV でサイトの機能を1行で言い切る（依頼者指示 2026-08-21）。
   **操作列と同じ行**に入れるので、カルーセルの高さを削らない。
   幅が足りなくなったら自動で1行下へ回る（SP はこの形になる）。
   左レールの縦組みだけでは「何をするサイトか」が伝わらなかったので、横書きで置く。 */
.hero-what {
  flex: 1 1 320px; min-width: 0; margin-right: auto;
  font-size: 15px; line-height: 1.8; letter-spacing: .02em;
  color: var(--navy); text-wrap: balance;
}
.sc-count { font-family: var(--en); font-size: 12px; letter-spacing: .14em; color: var(--ink-mid); white-space: nowrap; }
.sc-count b { font-weight: 400; color: var(--navy); }
.sc-track { position: relative; width: 120px; height: 1px; background: rgba(30, 47, 82, .26); }
.sc-track i {
  position: absolute; top: 50%; left: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cta); transform: translate(-50%, -50%);
  transition: left .5s var(--e-out-quint);
}
.sc-btns { display: flex; gap: 2px; }
.sc-b {
  width: 44px; height: 44px; border-radius: 50%; color: var(--navy); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.sc-b:hover { background: rgba(30, 47, 82, .06); }
/* スライダーの前へ／次へ（依頼者指示 2026-08-27）。
   形は**支給の SVG**（icon_arrow-left / -right）を、play.svg と同じく
   `sitekit._arrow_svg()` が読み取って埋め込む。**支給元は触らない。**

   CSS マスク（mask-image: url(...)）でも同じ絵になるが、
   **file:// で開くと Chromium がマスクを読まず、矢印が消えた**（実測）。
   このカンプはファイルを直接開いて確かめるので、埋め込みにしてある。
   どちらでも `fill: currentColor` なので、既存の色・hover・disabled は同じに効く。 */
.ar { display: block; width: 18px; height: 18px; }
/* .sc-b svg（再生・一時停止の 10×12）より強くする。クラス2つで上書きする */
.ar .ar-i { width: 100%; height: 100%; fill: currentColor; display: block; }
/* 3館のスライダーは 30px の丸の中に置くので、そのぶん小さく */
.mv-b-i .ar { width: 16px; height: 16px; }
.sc-b svg { width: 10px; height: 12px; fill: currentColor; }
.sc-b[data-pause] .ic-play { display: none; }
.sc-b[data-pause][aria-pressed="true"] .ic-pause { display: none; }
.sc-b[data-pause][aria-pressed="true"] .ic-play { display: block; }
.sc-b[data-pause][aria-pressed="true"] { color: var(--cta); }

/* 中央から離れるほど縮み、少し沈み、薄くなる。
   縦のずれを入れると列が機械的に見えず「流れていく」感じになる（参照：歴博） */
@keyframes slide-focus {
  0%   { opacity: .40; transform: translateY(34px) scale(.72); }
  50%  { opacity: 1;   transform: translateY(0)    scale(1); }
  100% { opacity: .40; transform: translateY(34px) scale(.72); }
}
@supports (animation-timeline: view(inline)) {
  .hero-slide {
    animation: slide-focus linear both;
    animation-timeline: view(inline);
    animation-range: cover;
  }
}
/* 非対応ブラウザは JS が .is-active を付けるので、そちらで代替する */
@supports not (animation-timeline: view(inline)) {
  .hero-slide { opacity: .40; transform: translateY(34px) scale(.72); transition: opacity .5s var(--e-out-quart), transform .5s var(--e-out-quart); }
  .hero-slide.is-active { opacity: 1; transform: scale(1); }
}

/* ============================================================ 1b. できること */
/* KV の直下。認知不足が最大の課題なので、雰囲気だけで終わらせず
   「何ができるサイトか」を先に言う。番号と短い動詞で、読まずに形で分かるように */
.hw-t b { font-weight: 500; color: var(--navy); }

/* ============================================================ 2. 開催中の企画（小型） */
/* KV 直下。開催中であることと、詳細への導線だけを出す。
   写真つきの大型バナーだと3館より強く見えてしまうため、1行のバーに落とした
   （2026-08-20 の構成変更）。季節データが空なら節ごと出ない。 */
.cb-box {
  display: flex; align-items: center; gap: 16px;
  background: var(--panel); border-radius: var(--r-card);
  box-shadow: 0 10px 28px rgba(30, 47, 82, .08);
  padding: 10px 18px; overflow: clip;
}
.cb-h {
  flex: 0 0 auto; font-family: var(--en); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--terra);
  border-right: 1px solid var(--ink-rule); padding-right: 16px;
}
/* ストリームが 772px のとき、3つを1行に並べると見出しが数文字で切れる。
   折り返して2列にする（2026-08-20 実測） */
.cb-list { display: flex; flex-wrap: wrap; gap: 6px 22px; flex: 1; min-width: 0; }
.cb { display: flex; align-items: center; gap: 9px; min-height: 44px; min-width: 0; flex: 1 1 232px; }
.cb-l {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 21px; padding: 0 9px;
  border-radius: var(--r-pill); background: var(--mu); color: #fff;
  font-size: 10.5px; letter-spacing: .06em;
}
.cb-t {
  font-size: 12.5px; font-weight: 500; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--transition);
}
.cb:hover .cb-t { color: var(--terra); }
.cb-b { flex: 0 0 auto; font-family: var(--en); font-size: 11px; letter-spacing: .04em; color: var(--ink-mid); }
.cb-more {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12px; letter-spacing: .04em; color: var(--ink-mid);
}
.cb-more:hover { color: var(--terra); }
/* 横並びできる幅ではクローンもドットも要らない */
.cb.is-clone { display: none; }
.sec-cb .pager { display: none; }

.card-itinerary { background: var(--panel); border-radius: var(--r-card); box-shadow: 0 12px 34px rgba(30, 47, 82, .11); padding: 22px 22px 0; }
.cs-en { font-family: var(--en); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--terra); }
.cs-t { font-family: var(--serif); font-weight: 500; font-size: 19px; letter-spacing: .04em; color: var(--navy); margin: 8px 0 6px; }
.cs-meta { font-size: 12px; letter-spacing: .06em; color: var(--ink-mid); }
.stops { position: relative; margin-top: 16px; }
.stops::before { content: ""; position: absolute; left: 59px; top: 20px; bottom: 26px; width: 1px; background: rgba(30, 47, 82, .30); }
.stop { display: grid; grid-template-columns: 52px 22px 1fr; align-items: start; padding: 10px 0; }
.stop-t { font-family: var(--en); font-size: 12.5px; color: var(--ink-mid); padding-top: 2px; }
.stop-dot { width: 9px; height: 9px; border-radius: 50%; margin: 6px 0 0 3px; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--panel); }
.stop-b { display: flex; flex-direction: column; gap: 2px; }
.stop-n { font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--navy); }
.stop-l { font-size: 13px; letter-spacing: .06em; color: var(--ink-mid); }
.cs-foot { margin-top: 6px; border-top: 1px solid var(--ink-hair); height: 54px; display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 500; color: var(--navy); }

/* ============================================================ 4. モデルコース */
.cs-list { display: flex; flex-direction: column; gap: 44px; }
/* ページ送りの点。バナーとモデルコースで共用する */
.pager { display: flex; justify-content: center; gap: 7px; }
.pager-b {
  position: relative; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(30, 47, 82, .22); transition: background var(--transition);
}
.pager-b[aria-current="true"] { background: var(--cta); }
/* 見た目は7pxのまま、当たり判定だけ44pxにする */
.pager-b::after { content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 44px; height: 44px; }

/* ============================================================ モデルコース */
/* 横スライダーはやめ、3枚を重ねてめくる形にした（.ck-*、このファイルの末尾）。
   .cs-head 以下はしおりビューアと体験セクションが使うので残す。 */
.cs-head { border-bottom: 1px solid var(--ink-hair); padding-bottom: 14px; }
.cs-t {
  font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.5;
  letter-spacing: .03em; color: var(--navy); margin-top: 7px; text-wrap: pretty;
}
.cs-meta { margin-top: 7px; font-size: 12px; letter-spacing: .06em; color: var(--ink-mid); }
/* 所要と「向いている人」をカードの顔にする。経路計画ではなく休日の提案に見せるため */
.cs-meta b { font-weight: 700; color: var(--navy); }
.cs-whom { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.cs-base { margin-top: 10px; font-size: 11.5px; letter-spacing: .04em; color: var(--ink-mid); }
/* しおりビューアへのリンク。文字の見た目は変えず、当たり判定だけ 44px を確保する */
.cs-t-a { display: flex; align-items: center; min-height: 44px; }
.cs-t-a:hover { color: var(--terra); }
/* ============================================================ 5. 3つの博物館 */
/* ---- 主役の見せ方（依頼者指示 2026-08-21）
   3館は同じ型の3連発をやめ、**館ごとに構図を変える**。載せる情報は3館とも同じで、
   変えるのは「比率」と「はみ出しの向き」だけ。共通ルールは
     ・アーチの天端       ・館ごとの色（--mu）       ・大きな番号を写真の背後に
   はみ出し量 --bleed は**セルの余りから計算する**ので、狭い画面では自動で 0 になり、
   横スクロールも左レールへのかぶりも起きない（100vw はスクロールバーを含むので 16px 引く）。 */
.mu {
  --bleed: clamp(0px, calc((100vw - 16px - var(--pad-x) * 2 - var(--rail-l) - var(--rail-r)
                            - var(--col-gap) * 2 - var(--stream-min)) / 2 + 20px), 88px);
  position: relative; display: grid; gap: 28px; align-items: center;
  /* 館どうしを分ける罫線は外した（依頼者指示 2026-08-27）。
     区切りは**上下の余白**が受け持つ。密度は変えないので padding は据え置き。
     館の中の小さな情報ブロックの線（.mu-facts の上下）は残す */
  padding: 46px 0;
}
/* 写真の背後に置く大きな番号。**情報の上には重ねない** */
.mu-big {
  position: absolute; z-index: 0; pointer-events: none;
  font-family: var(--en); font-weight: 700; line-height: .78;
  font-size: clamp(96px, 13vw, 210px); letter-spacing: -.02em;
  color: var(--mu); opacity: .1;
}
/* 館のメインビジュアルは **KV と同じ形のスライダー**（依頼者指示 2026-08-26 ③）。
   .mu-visual は器のまま。中身を .mv が受け持つ。
   overflow は clip（hidden にすると中の sticky を殺す一般則に合わせる） */
.mu-visual { position: relative; z-index: 1; height: 172px; border-radius: var(--r-panel); overflow: clip; background: var(--mu-soft); }
.mv { height: 100%; }
.mv-list {
  display: flex; height: 100%; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
}
.mv-list::-webkit-scrollbar { display: none; }
.mv-s { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.mv-a { position: relative; display: block; width: 100%; height: 100%; }
.mv-a img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--e-out-quart); }
.mv-a:hover img { transform: scale(1.04); }
/* 操作は**ラベルの上の段**に置く。同じ段に並べると、狭い画面で
   ラベル（動画のタイトル）と重なった（1280 で 39px、320 で 103px の重なりを実測）。
   保護面（.mv-a::after）の高さの内側に収まる位置にする */
/* 尺の札を外したので、送りは**写真の下端**に置く（依頼者指示 2026-08-27）。
   56px にしていたのは、下に尺の1行があったため */
/* ---- 当面はスライドさせない（依頼者指示 2026-09-17）。
   初回は動画が1本しか無いので、1枚目だけを出して操作列も隠す。
   **戻すときは index.html の .mv から data-mv-single を外すだけ。**
   スライドは cards.js が Tig のデータから作るので、枚数に関係なく効くよう CSS で止める
   （main.js も data-mv-single のときは何も配線しない）。 */
.mv[data-mv-single] .mv-s:not(:first-child) { display: none; }
.mv[data-mv-single] .mv-list {
  overflow-x: hidden; scroll-snap-type: none; touch-action: auto;
}
.mv[data-mv-single] .mv-ctl { display: none; }

.mv-ctl {
  position: absolute; z-index: 3; right: 10px; bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}
/* 目盛は KV と同じ「線と点」。押す対象にはしない（送りは前へ／次へで足りる）*/
.mv-track {
  position: relative; width: 62px; height: 2px; border-radius: 1px; margin-right: 4px;
  background: rgba(255, 255, 255, .58);
}
.mv-track i {
  position: absolute; top: 50%; left: 0; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%);
  transition: left .5s var(--e-out-quint);
}
/* 枚数は**白い札の中**に置く。保護面の濃いところから外れた位置なので、
   写真の明るさに左右されない持ち方にする（実測 2.65 → 白地の navy で確実に通す） */
.mv-n {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: 12px; background: rgba(255, 255, 255, .92);
  font-family: var(--en); font-size: 12px; letter-spacing: .06em; color: var(--ink-mid);
}
.mv-n b { font-weight: 400; color: var(--navy); }
/* 当たり判定は 44px。丸は中の span が描く（見た目は 30px のまま） */
.mv-b {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; transition: opacity var(--transition);
}
.mv-b-i {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--navy); font-size: 15px; line-height: 1;
  transition: background var(--transition);
}
.mv-b:hover:not(:disabled) .mv-b-i { background: #fff; }
.mv-b:disabled { opacity: .38; cursor: default; }
/* 写真の上に文字を置くための保護面 */
/* 写真の上に文字を置くので保護面を敷く（ブランドガイド p13）。
   92px・終端 .66 だと、ラベルの高さ（下から52px）では不透明度が .29 しか乗らず、
   明るい写真で 3.90:1 まで落ちた。文字が乗る帯まで濃度が届く形にする（2026-08-20 実測） */
.mv-a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 124px; background: linear-gradient(180deg, rgba(22, 35, 61, 0) 0%, rgba(22, 35, 61, .56) 46%, rgba(22, 35, 61, .84) 100%); pointer-events: none; }
/* 再生ボタンは共通の .play（写真の中央）。館の色ではなくネイビーで統一する */
/* 動画タイトルは画面から外した（依頼者指示 2026-08-26）。いま出るのは尺だけ。
   間隔は .mu-time の margin ではなく **ラベル側の gap** で持つ ―― margin だと
   タイトルが無いときに尺が 10px ぶん右へずれる（タイトルを戻せば gap が効く） */
.mu-vlabel { position: absolute; z-index: 2; left: 14px; bottom: 14px; height: 38px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .08em; color: #fff; }
/* 尺（.mu-time）は画面から外した（依頼者指示 2026-08-27）。指定も落としてある */
/* 小さな番号（.mu-num）は撤去した（依頼者指示 2026-08-26）。
   番号は写真の背後の大きな .mu-big だけが持つ */
/* 情報の列が 46% になり、館名が「大阪府立弥生文化博／物館」と割れた（実測）。
   2行になるときは均等に割る */
/* 級数は器（.mu-title）が持つ変数から引く。アイコンの中央合わせが同じ値を見る */
.mu-name { font-family: var(--serif); font-weight: 500; font-size: var(--mu-name-fs, 21px); letter-spacing: .04em; color: var(--navy); margin-top: 7px; text-wrap: balance; }
/* 館名は、折り返すときの切れ目をこちらで決める（依頼者指示 2026-09-15）。
   日本語はどこでも折り返せるため、放っておくと「大阪府立弥／生文化博物館」のように
   語の途中で切れる。名前を意味のかたまりで span に分け、inline-block にして
   **かたまりの内側では折り返さない**ようにしてある（HTML側で分けている）。
   幅が足りていれば今までどおり1行で出る。 */
.mu-name > span { display: inline-block; }
/* 番号を外して館名が先頭になったので、カードの上の余白を二重に取らない */
.mu-body > .mu-name:first-child { margin-top: 0; }
/* 時代を館名のすぐ下に置く。3館が時代順に並ぶことが、このサイトで唯一
   「体系的に理解したい層」に届く手がかりになる（ターゲットシート p4 軸01） */
.mu-meta { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.mu-era {
  font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--mu-ink);
  padding-right: 12px; border-right: 1px solid var(--ink-rule);
}
.mu-loc { font-size: 12px; letter-spacing: .08em; color: var(--ink-mid); }
.mu-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
/* 来訪判断情報。非訪問理由の1位「アクセスが分かりにくい」への回答（企画書 §8 の筆頭要件） */
.mu-facts {
  display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0 0 16px;
  padding: 12px 0; border-top: 1px solid var(--ink-hair); border-bottom: 1px solid var(--ink-hair);
}
/* 公式サイトへの導線（.mu-official）は削除した（依頼者指示 2026-08-27）。
   44px の当たり判定が上下の余白を兼ねていたので、そのぶんを事実の側へ戻す */
.mu-links { margin-top: 0; }
.mu-fact { display: flex; align-items: baseline; gap: 8px; }
.mu-fact dt { font-size: 12px; letter-spacing: .08em; color: var(--ink-mid); white-space: nowrap; }
.mu-fact dd { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--navy); }
/* 行ってみたくなる理由。施設情報の羅列ではなく、ここを先に読ませる（2026-08-20） */
.mu-surprise {
  font-family: var(--serif); font-weight: 500; font-size: 16.5px; line-height: 1.8;
  letter-spacing: .03em; color: var(--mu-ink); margin-top: 12px;
}
.mu-links { display: flex; flex-direction: column; gap: 6px; }
.mu-save { margin-top: 12px; min-height: 46px; font-size: 13.5px; gap: 7px; padding: 0 20px; }
.mu-save[aria-pressed="true"] { border-color: var(--terra); color: var(--terra); background: rgba(202, 79, 39, .06); }

/* 各館の周辺スポット（4a）。3館を起点に周辺へ広げる。
   周辺が3館より主役に見えないよう、館ブロックの中に入れ、点数も3件に抑える */
.mu-near { grid-column: 1 / -1; min-width: 0; margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--ink-rule); }
.nb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.nb-h { font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--mu-ink); }
.nb-c { margin-left: 10px; font-family: var(--en); font-size: 12px; letter-spacing: .06em; color: var(--ink-mid); white-space: nowrap; }
.nb-ops { display: flex; gap: 4px; flex: 0 0 auto; }
.nb-op {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(30, 47, 82, .2); font-size: 15px; color: var(--navy);
  transition: border-color var(--transition), background var(--transition), opacity var(--transition);
}
.nb-op:hover:not(:disabled) { border-color: var(--mu); background: var(--mu-soft); }
.nb-op:disabled { opacity: .26; cursor: default; }

/* 周辺は**同エリア全件**の横スライダー。サムネイルは 3:4 の縦型にして、
   縦型動画だと形で分かるようにする（依頼者指示 2026-08-25）。 */
.nb-list {
  display: flex; gap: 14px; min-width: 0; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding-bottom: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nb-list::-webkit-scrollbar { display: none; }
.nb { position: relative; --nb-w: 132px; flex: 0 0 var(--nb-w); min-width: 0; scroll-snap-align: start; }
.nb-a { display: block; }
/* 天端のアーチは館の写真に残す。動画の札は四隅を等しく丸める（体験セクションと同じ扱い） */
.nb-fig {
  position: relative; aspect-ratio: 3 / 4; height: auto;
  border-radius: var(--r-card); overflow: hidden; background: var(--mu-soft);
}
.nb-fig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--e-out-quart); }
.nb:hover .nb-fig img { transform: scale(1.05); }
.nb-n { font-size: 12.5px; font-weight: 500; line-height: 1.55; color: var(--navy); margin-top: 9px; text-wrap: balance; transition: color var(--transition); }
.nb:hover .nb-n { color: var(--terra); }
.nb-m { display: block; margin-top: 3px; font-size: 13px; letter-spacing: .04em; color: var(--ink-mid); }
.mu-rep { display: flex; align-items: center; gap: 11px; border: 1px solid rgba(30, 47, 82, .2); border-radius: 13px; padding: 12px 15px; transition: border-color var(--transition), background var(--transition); }
.mu-rep:hover { border-color: var(--mu); background: var(--mu-soft); }
/* 起点になるモデルコースがまだ無い館（日本民家集落博物館）の表示。
   器は同じだが**押せない**ので、矢印を出さず、ホバーでも動かさない。
   罫を破線にして「これから」を示す。**文字は薄くしない**（本文と同じ濃さ）。 */
.mu-rep-soon { margin: 0; cursor: default; border-style: dashed; }
.mu-rep-soon:hover { border-color: rgba(30, 47, 82, .2); background: none; }
.mu-rep-l { font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--mu-ink); flex: 0 0 auto; }
.mu-rep-t { font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--navy); flex: 1; }

/* ============================================================ 7. 開催中の企画（詳細） */
/* 季節企画の受け皿。通年情報とは構造上分ける（seasonal.py） */
/* 横長バナー3点（依頼者指示 2026-08-21）。以前の大きな説明カードは外した。
   **比率は 16:9 でそろえる**ので、正式バナーが届いても組み直さなくてよい。 */
.bn-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bn-i { min-width: 0; }
.bn {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: var(--r-card);
  background: rgba(30, 47, 82, .06);
  box-shadow: 0 8px 22px rgba(30, 47, 82, .10);
}
.bn img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 支給バナーをそのまま出すときの枠（2026-10-15 スタンプラリーで追加）。
   .bn の 16/9 のままだと受け取った 860×485 がわずかに切れるので、画像の比率に合わせる。
   空き枠（.bn-blank）と違って地色は要らない */
.bn-img { aspect-ratio: 860 / 485; background: none; }
/* 遷移先が決まっているものだけ、押せるように見せる */
/* 3点とも初期状態は水平（依頼者指示 2026-08-26。2枚目の -1.2度 は削除した）。
   hover も**傾けない** ―― 動くのは translateY と影だけなので、
   hover を外したときに角度が戻るガタつきも起きない */
.bn-on { transition: transform var(--transition), box-shadow var(--transition); }
.bn-on:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(30, 47, 82, .16); }
.bn-on:hover img { transform: none; }
.bn-ex {
  position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--mu);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
/* 仮バナー。写真の上に置く文字は DOM の文字。保護面を必ず敷く */
.bn-over {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end; gap: 4px; padding: 14px;
  background: linear-gradient(180deg, rgba(22, 35, 61, 0) 26%, rgba(22, 35, 61, .82) 88%);
  color: #fff;
}
.bn-l {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  border-radius: 11px; background: var(--mu); color: #fff;
  font-size: 11.5px; font-weight: 500; letter-spacing: .06em;
}
.bn-t { font-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: .04em; text-wrap: balance; }
.bn-p { font-family: var(--en); font-size: 12px; letter-spacing: .06em; color: rgba(255, 255, 255, .94); }

/* 正式バナーが届くまでの**空き枠**（依頼者指示 2026-08-27）。
   仮の写真を敷いていたときは「完成したバナー」に見えてしまい、
   レビューでミスリードになっていた。**あえてサイトのトーンに馴染ませず**、
   グレーの枠で「まだ無い」ことが分かるようにする。
   ・写真は敷かない（誤解の元だったので取り除く）
   ・ラベル・見出し・会期は**文字のまま**残す。中身の情報は伝わるようにする
   ・押せるようには見せない（影も付けない）
   ・16:9 と角丸は保つ。届いたバナーの収まりが分かるように
   ※ ブランドガイド §7.3 は破線枠・灰色ボックスを禁じているが、ここは
     「制作中と分かること」を優先した依頼者判断（2026-08-27）。
     `seasonal.py` の banner_ready を True にすれば、この見た目は消える。
   グレーはブランドの色と混ざらないニュートラルにする（ネイイビー寄りだと馴染んでしまう）。
   文字はどれも地に対して 4.5:1 以上（実測） */
.bn-blank {
  --bl-bg: #EAEAE7; --bl-line: #8F8F88; --bl-ink: #52524C; --bl-sub: #67675F;
  background: var(--bl-bg);
  /* 2px。1.5px は DPR 1 の描画で 1px に丸められて線が痩せる（§41 と同じ） */
  border: 2px dashed var(--bl-line);
  box-shadow: none;
}
.bn-blank.bn-on:hover { box-shadow: none; }
.bn-blank-b {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end; gap: 5px; padding: 14px;
}
/* 「バナー制作中」。枠の左上に小さく置く（見出しと取り違えない位置） */
.bn-note {
  position: absolute; top: 11px; left: 14px;
  font-size: 11.5px; letter-spacing: .1em; color: var(--bl-sub);
}
/* ラベルは地色を持たせない。色面があると「デザイン済み」に見える */
.bn-blank .bn-l {
  background: none; border: 1px solid var(--bl-line); color: var(--bl-ink);
}
.bn-blank .bn-t { color: var(--bl-ink); }
.bn-blank .bn-p { color: var(--bl-sub); }
.bn-blank .bn-ex { background: var(--bl-bg); color: var(--bl-ink); border: 1px solid var(--bl-line); }

/* ---- 1枚だけ掲載する（依頼者指示 2026-09-15）。
   初期オープンで出せるバナーが1枚なので、**コンテンツ幅いっぱい**に広げる。
   比率は PC 約5.53:1（入稿 2678×484）／SP 2:1（入稿 750×375）の2枚立て。
   コンテンツ幅は 280〜1,082px と4倍ちがうので、1枚の比率では SP で文字が読めない。
   画像は <picture> で 901px を境に出し分ける（1列に落ちる境界と同じ） */
.bn-list.is-single { grid-template-columns: minmax(0, 1fr); }
/* 支給バナー2枚を並べる（依頼者指示 2026-10-22。スタンプラリー → 古民家フェスティバル）。
   1枚を列いっぱいにすると支給画像（860px）より大きく引き伸ばされるので、2列に割る。
   900px 以下は下の @media で1列に積む */
/* PC は列いっぱいだと1枚 269px の高さになり重いので、幅に上限を切って低く抑える
   （依頼者指示 2026-10-22）。比率は画像のまま */
/* 幅を抑えたぶん、列の中で左右中央に置く（依頼者指示 2026-10-22） */
.bn-list.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; }
.bn-wide { aspect-ratio: 1339 / 242; }   /* 入稿 2678×484 */
.bn picture { display: block; width: 100%; height: 100%; }
.bn-wide.bn-blank .bn-t { font-size: 20px; }

/* ---- バナーを押すと開く詳細（依頼者指示 2026-09-17）。
   画像・タイトル・テキスト・CTA の4つだけを出す小さなポップアップ。
   作法は施設詳細（spotcard.css の .tp-pop）にそろえた ―― 暗幕の上にアイボリーの面、
   ✕ / Esc / 背景で閉じる。**別ファイルにはしない**（全ページが読むのは style.css なので、
   ここに置けばフッターだけのページからも同じものが開く）。開閉は main.js。 */
.bn-btn {
  appearance: none; -webkit-appearance: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer;
}
.cp-pop {
  position: fixed; inset: 0; z-index: 85;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: rgba(22, 20, 28, .58);
  animation: cp-bg .3s var(--e-out-quart) both;
}
.cp-pop[hidden] { display: none; }
@keyframes cp-bg { from { opacity: 0; } }
.cp-pop-in {
  position: relative; width: 100%; max-width: 520px;
  max-height: min(88vh, 760px); overflow: auto;
  background: var(--ivory); color: var(--navy);
  border-radius: var(--r-panel);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
  animation: cp-up .5s var(--e-out-quint) both;
}
@keyframes cp-up { from { transform: translateY(56px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cp-pop, .cp-pop-in { animation: none !important; }
}
.cp-x {
  position: absolute; z-index: 2; right: 12px; top: 12px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  box-shadow: 0 4px 14px rgba(22, 35, 61, .26);
}
.cp-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* 画像は 4:3 の横長（入稿 1200×900。依頼者指示 2026-09-17）。
   届くまではバナーと同じグレーの空き枠（§50）。枠の幅は .cp-pop-in の上限 520px のまま */
.cp-fig {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
}
.cp-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-fig-blank {
  background: #EAEAE7; border: 2px dashed #8F8F88; border-bottom: 0;
  display: grid; place-items: center;
  color: #52524C; font-size: 12px; letter-spacing: .1em;
}
.cp-b { padding: 20px 22px 24px; }
.cp-l {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  border-radius: 11px; background: var(--mu, var(--cta)); color: #fff;
  font-size: 11.5px; font-weight: 500; letter-spacing: .06em;
}
.cp-h { font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.5; margin: 10px 0 0; }
.cp-when { font-family: var(--en); font-size: 12.5px; letter-spacing: .06em; color: var(--ink-mid); margin: 6px 0 0; }
.cp-p { font-size: 14.5px; line-height: 1.8; margin: 12px 0 0; }
.cp-acts { margin: 18px 0 0; }
/* サイト共通の主ボタン（.btn.btn-primary）と同じ見た目。幅だけ枠いっぱいにする。
   **リンク先が決まるまでは <span>** なので、押しても何も起きない（依頼者指示 2026-09-17）。
   URL が来たら span を a に変えるだけで、見た目はこのまま */
.cp-cta { width: 100%; }
@media (max-width: 560px) {
  .cp-b { padding: 16px 16px 20px; }
  .cp-p { font-size: 14px; }
}
/* イベント情報（長い原稿）。概要は常に見せ、プログラムは見出しで開閉する。
   中身だけをスクロールさせ、PDF への導線は下端に固定する */
.cp-pop-in.is-event { max-width: 640px; display: flex; flex-direction: column; overflow: hidden; }
.is-event .cp-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.is-event .cp-fig-wide { aspect-ratio: 860 / 484; height: auto; }
.is-event .cp-b { padding: 22px 28px 28px; }
.is-event .cp-h { margin-top: 2px; font-size: clamp(22px, 2.8vw, 28px); }
.cp-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 12px 0 0; color: var(--navy); }
.cp-date-y { flex: 0 0 100%; font-family: var(--en); font-size: 14px; letter-spacing: .12em; color: var(--ink-mid); }
.cp-date-d { display: inline-flex; align-items: center; gap: 8px; }
.cp-date-d b { font-family: var(--en); font-weight: 500; font-size: clamp(34px, 5vw, 44px); line-height: 1.1; letter-spacing: .02em; }
.cp-date-d i {
  font-style: normal; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 14px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 500; letter-spacing: .04em; transform: translateY(3px);
}
.cp-date-d i.is-sun { background: var(--terra-fill); }
.cp-date-s { font-size: 24px; color: var(--ink-mid); }
.cp-venue { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 0; font-size: 16px; font-weight: 500; line-height: 1.6; }
.cp-venue-l {
  display: inline-grid; place-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--navy); border-radius: 6px;
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
}
.cp-map { margin: 14px 0 0; }
.cp-map img { width: 100%; height: auto; border: 1px solid var(--ink-rule); border-radius: 10px; background: #fff; }
.cp-map figcaption { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--ink-mid); }
.cp-sub { font-size: 12.5px; letter-spacing: .04em; color: var(--ink-mid); margin: 12px 0 0; }
.cp-facts { margin: 20px 0 0; border-top: 1px solid var(--ink-rule); }
.cp-facts > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink-rule); }
.cp-facts dt { font-size: 12.5px; color: var(--ink-mid); padding-top: 2px; }
.cp-facts dd { margin: 0; font-size: 14px; line-height: 1.75; }
.cp-row { display: flex; align-items: baseline; gap: 8px; }
.cp-row + .cp-row { margin-top: 2px; }
.cp-t {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 20px; border-radius: 6px;
  background: var(--sand); color: var(--navy); font-size: 12px; font-weight: 500; transform: translateY(-1px);
}
.cp-t.is-night { background: var(--navy); color: #fff; }
.is-event :is(.cp-p, .cp-note, .cp-acc-lead, .cp-item h3, .cp-item p, .cp-list li, .cp-meta dd, .cp-facts dd) { word-break: auto-phrase; text-wrap: pretty; }
.cp-note { display: block; font-size: 12.5px; line-height: 1.7; color: var(--ink-mid); margin-top: 4px; }

.cp-acc { display: grid; gap: 10px; margin: 24px 0 0; }
.cp-nw { white-space: nowrap; }
.cp-acc details { background: var(--panel); border: 1px solid var(--ink-rule); border-radius: 14px; }
.cp-acc summary {
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: start; gap: 4px 14px;
  min-height: 64px; padding: 14px 14px 14px 18px; cursor: pointer; border-radius: 14px;
}
.cp-acc summary::-webkit-details-marker { display: none; }
.cp-acc summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.cp-acc-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.cp-acc-t { font-family: var(--sans); font-weight: 700; font-size: 16.5px; line-height: 1.5; letter-spacing: .02em; }
.cp-acc-n { font-size: 12px; color: var(--ink-mid); }
.cp-acc-p { grid-column: 1; min-width: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-acc details[open] .cp-acc-p { display: none; }
.cp-acc-o {
  grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 6px;
  justify-content: center; min-width: 86px; height: 34px; padding: 0 13px 0 11px; border: 1px solid var(--navy); border-radius: 999px;
  font-size: 12.5px; font-weight: 500; color: var(--navy); white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
}
.cp-acc-o::before {
  content: ''; width: 10px; height: 10px;
  background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
              linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat;
}
.cp-acc details[open] .cp-acc-o::before { background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat; }
.cp-acc-o2, .cp-acc details[open] .cp-acc-o1 { display: none; }
.cp-acc details[open] .cp-acc-o2 { display: inline; }
@media (hover: hover) { .cp-acc summary:hover .cp-acc-o { background: var(--navy); color: #fff; } }
.cp-acc-b { padding: 0 16px 18px; }
.cp-acc-lead { font-size: 13.5px; line-height: 1.85; margin: 0 0 4px; }
.cp-day {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 8px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .06em; color: var(--terra);
}
.cp-day::after { content: ''; flex: 1; height: 1px; background: var(--ink-rule); }
.cp-item { background: var(--ivory); border-radius: 12px; padding: 14px 16px 15px; }
.cp-item + .cp-item { margin-top: 8px; }
.cp-item.has-fig { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start; }
.cp-item-fig { display: block; width: 88px; height: 88px; border-radius: 10px; object-fit: cover; background: var(--sand); }
.cp-cr { font-size: 12px !important; color: var(--ink-mid); }
.cp-item h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; }
.cp-item p { font-size: 13.5px; line-height: 1.75; margin: 4px 0 0; }
.cp-chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px;
  border: 1px solid currentColor; font-size: 12px; font-weight: 500; color: var(--navy);
}
.cp-chip.is-paid { color: var(--terra); }
.cp-chip.is-free { color: var(--sage); }
.cp-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; margin: 10px 0 0; font-size: 13px; line-height: 1.65; }
.cp-meta dt { color: var(--ink-mid); }
.cp-meta dd { margin: 0; }
.cp-meta.is-wide { margin-top: 14px; }
.cp-list { list-style: disc; margin: 14px 0 0; padding-left: 1.2em; font-size: 13px; line-height: 1.75; }
.cp-list li + li { margin-top: 3px; }
.cp-org { margin: 24px 0 0; font-size: 12px; line-height: 1.8; color: var(--ink-mid); }
.cp-dock {
  flex: 0 0 auto; padding: 12px 28px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--ivory); border-top: 1px solid var(--ink-rule);
}
.cp-dock .cp-cta { width: 100%; }
@media (max-width: 560px) {
  .is-event .cp-b { padding: 18px 18px 22px; }
  .cp-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cp-item { padding: 12px 14px 13px; }
  /* 写真の横は狭いので、時間・場所などの表だけ写真の下に全幅で回す */
  .cp-item.has-fig { grid-template-columns: 72px minmax(0, 1fr); gap: 0 12px; }
  .cp-item.has-fig > .cp-item-b { display: contents; }
  .cp-item.has-fig > .cp-item-fig { grid-row: 1 / span 2; }
  .cp-item.has-fig > .cp-item-b > * { grid-column: 2; }
  .cp-item.has-fig > .cp-item-b > .cp-meta { grid-column: 1 / -1; }
  .cp-item-fig { width: 72px; height: 72px; }
  .cp-acc summary { padding-left: 14px; }
  .cp-acc-b { padding: 0 12px 14px; }
  .cp-dock { padding-left: 18px; padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) { .cp-acc-o { transition: none; } }
/* 横長（約5.53:1）は背が低い。1280px では枠が 712×129px しかなく、
   「バナー制作中」とラベルが 15px 重なった（実測）。余白と見出しを1段詰める。
   560px 以下の空き枠と同じ扱い */
@media (min-width: 901px) {
  .bn-list .bn-wide.bn-blank .bn-blank-b { padding: 12px 14px; gap: 3px; }
  .bn-list .bn-wide.bn-blank .bn-t { font-size: 17px; line-height: 1.3; }
}
/* 1200px は左右のレールが出るぶん列がいちばん狭く、枠が 632×114px しかない。
   上の指定でもまだ「バナー制作中」とラベルが 8px 重なったので、もう一段だけ詰める（実測）。
   **会期の行は残す** ―― 文字を落とさずに収める */
@media (min-width: 901px) and (max-width: 1279px) {
  .bn-list .bn-wide.bn-blank .bn-blank-b { padding: 10px 14px 9px; gap: 2px; }
  .bn-list .bn-wide.bn-blank .bn-note { top: 8px; }
  .bn-list .bn-wide.bn-blank .bn-t { font-size: 15px; }
}

/* ============================================================ 6. スポット */
/* 絞り込みは2軸。WF V3 の「目的別タブ × エリア別」にあたる */
.filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.chips-filter { margin-bottom: 0; }
/* 画面幅に合わせて 3〜4列（依頼者指示 2026-08-27）。3列に固執しない。
   サムネイルは**縦型**にして、動画（縦型プレーヤー）だと形で分かるようにする。
   高さは aspect-ratio が決めるので、列が狭くなっても縦横比は崩れない */
.spot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; }
@media (min-width: 1680px) { .spot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ♥ を図版の高さから置けるように、カードを寸法の基準にする（下の .heart） */
.spot { position: relative; display: block; min-width: 0; container-type: inline-size; }
.spot-link { display: block; }
.spot-fig { position: relative; aspect-ratio: 3 / 4; }
.spot:hover .spot-fig img { transform: scale(1.05); }
/* ♥ はリンクの兄弟（button を a の中に入れられないため）。**図版の下端に重ねる**。
   .spot の高さにはスポット名と補足も入るので、bottom や % では狙えない
   ―― bottom: 4px にしていたときは、カードの一番下＝文字の上に乗っていた（実測）。
   図版は幅 × 4/3 の高さなので、**カード幅（cqw）から出す**。
   cqw が使えない環境では1つ目の top（近似値）が残るだけで、文字には重ならない。
   当たり判定は 44px */
.heart {
  position: absolute; right: 4px;
  top: 62%;
  top: calc(133.3333cqw - 48px);
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--ink-mid); isolation: isolate;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  transition: color var(--transition), transform var(--transition);
}
.heart::before { content: ""; position: absolute; left: 6px; top: 6px; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 3px 10px rgba(30, 47, 82, .18); z-index: -1; }
/* ♥ は状態を色で示す。文字として描画されるので、塗り色ではなく文字色を使う */
/* 周辺の札は 3:4 の縦横比で高さが決まるので、--spot-fig-h ではなく
   カード幅から図版の高さを出して重ねる。**.heart より後ろに置く**
   （同じ詳細度なので、前に書くと top を上書きされる） */
.heart-nb { font-size: 13px; right: 2px; top: calc(var(--nb-w) * 4 / 3 - 48px); }
.heart[aria-pressed="true"] { color: var(--terra); }
.heart:hover { transform: scale(1.1); }
/* エリアの識別色（§23）。白文字を載せるので地は**文字用の濃い版**（--mu-ink）を使う。
   塗りの版（テラコッタ #CA4F27）だと 4.0:1 で 4.5:1 に届かない。
   色は cards.js が1件ずつ --mu / --mu-ink をインラインで入れる。**この宣言は
   style.css に置く** ―― トップは pages.css を読まないので、そちらに置くと
   一覧だけ色が付いてトップがネイビーのままになる（2026-09-17 の実測で発覚） */
.spot-area { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 11px; background: var(--mu-ink, var(--mu, rgba(30, 47, 82, .82))); color: var(--ivory); font-size: 12px; letter-spacing: .08em; }
.spot-name { font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: .02em; color: var(--navy); margin-top: 12px; transition: color var(--transition); }
.spot:hover .spot-name { color: var(--terra); }
.spot-meta { display: block; margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--ink-mid); }
.spot-more { display: flex; justify-content: center; margin-top: 40px; }
.spot[hidden] { display: none; }

/* ============================================================ フッター */
.foot {
  background: var(--footer-bg) var(--washi) repeat; background-size: var(--washi-size);
  position: relative; z-index: 10;
}
/* ---- フッターのバナー枠（依頼者指示 2026-08-27）。
   開催中の企画のうち seasonal.py で foot: True を付けたものを出す。
   中身はトップの節と同じ .bn なので、正式バナーに切り替わればここも一緒に変わる。
   フッターの列（.fcols）より先に置き、細い罫で本体と分ける */
.foot-bn {
  max-width: var(--site-max); margin: 0 auto;
  padding: 32px var(--pad-x) 0;
}
.foot-bn-h {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--ink-mid);
  margin-bottom: 9px;
}
/* 2点を横に並べる。**幅に上限を切る** ―― 16:9 をサイト幅いっぱいに広げると
   1枚 680×390px になり、フッターの案内よりバナーが主役になってしまう（実測）。
   トップの節（.bn-list は3点で中央の列いっぱい）と近い1枚あたりの大きさにそろえる */
.foot-bn-l {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  max-width: 420px;
}
/* 小さくしたぶん、空き枠の中の文字も1段落とす。
   会期の行までは入らないので出さない ―― **入口の合図として名前が読めればよい** */
.foot-bn .bn-blank-b { padding: 10px; gap: 3px; }
.foot-bn .bn-note { top: 7px; left: 10px; font-size: 10.5px; letter-spacing: .06em; }
.foot-bn .bn-l { height: 19px; padding: 0 8px; font-size: 10.5px; }
.foot-bn .bn-t { font-size: 12.5px; line-height: 1.4; }
.foot-bn .bn-p { display: none; }
/* フッターは砂色の地。バナーの影はトップより控えめにして、面が浮かないようにする */
.foot-bn .bn { box-shadow: 0 4px 14px rgba(30, 47, 82, .08); }
.foot-bn .bn-blank { box-shadow: none; }
/* フッターは小さい枠なので、横長の PC 用ではなく **SP 用（2:1）** を使い回す */
.foot-bn .bn-wide { aspect-ratio: 2 / 1; }
.foot-bn .bn-wide.bn-blank .bn-t { font-size: 12.5px; }
/* 1枚だけのときは1列にして、幅を 300px まで取る。
   2列の 204×102px では英語の見出しが3行に折れ、「Banner in progress」とラベルが重なった（実測） */
/* 1枚だけのときの幅。300px は文字だけの空き枠に合わせた値で、絵と文字の入った
   支給バナーには小さすぎたため広げた（2026-10-15）。2枚並びのときの全幅と同じ */
.foot-bn-l.is-single { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
/* 支給バナー2枚（2026-10-22）。420px の2列だと1枚 204px で絵の中の文字が読めないので、
   幅の上限を広げて1枚 314px 前後にする */
.foot-bn-l.is-pair { max-width: 640px; }
@media (max-width: 768px) {
  .foot-bn { padding-top: 26px; }
  /* SP でも小さいままにするが、**下限を切る** ―― 2列に詰めると 320px で
     1枚 115×65px になり、「バナー制作中」の断りとラベルが 32px 重なった（実測）。
     入りきらない幅では自動で1列に落ちる（幅は上限で抑えてあるので主役にはならない） */
  .foot-bn-l {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; max-width: 330px;
  }
  .foot-bn .bn-t { font-size: 12px; }
  .foot-bn .bn-wide.bn-blank .bn-t { font-size: 12px; }
  /* 支給バナーは2列に詰めると 1枚 160px 前後になり、絵の中の文字が潰れる。SP は1列に積む */
  .foot-bn-l.is-pair { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}

.foot-in { max-width: var(--site-max); margin: 0 auto; padding: 52px var(--pad-x) 0; display: flex; justify-content: space-between; gap: 44px; }
.foot-logo { width: 196px; height: auto; }
.foot-note { font-size: 12px; line-height: 1.9; letter-spacing: .04em; color: var(--ink-mid); margin-top: 14px; font-weight: 700; }
.fcols { display: flex; gap: 48px; }
.fh { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--navy); margin-bottom: 10px; }
/* 短い語（「ツアー」など）でも当たり判定を 44px 角にする。
   負のマージンで見た目の間隔は変えない（ブランドガイド p11） */
.fcol a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 5px; margin-inline: -5px; font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft); }
.fcol a:hover { color: var(--terra); }
/* フッターの言語切替（**補助導線**。主導線は右サイドメニューの下部）。
   表記・並び・状態はナビ側とそろえる（依頼者指示 2026-08-26）。 */
.foot-lang {
  max-width: var(--site-max); margin: 0 auto; padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  font-size: 12px; letter-spacing: .1em; color: var(--ink-mid);
}
.fl-l { margin-right: 6px; font-size: 12px; }
.fl-c, .fl-a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; font-size: 13px; letter-spacing: .08em;
  text-decoration: underline; text-underline-offset: 4px;
}
.fl-c { color: var(--navy); font-weight: 700; }
.fl-a { color: var(--ink-mid); font-weight: 500; text-decoration-color: rgba(30, 47, 82, .35); }
.fl-a:hover { color: var(--terra); text-decoration-color: currentColor; }
/* 宿泊税の表記（依頼者指示 2026-10-02）。主催の直後に、主催と同じ調子で置く。強調はしない */
.foot-tax { font-size: 12px; line-height: 1.9; letter-spacing: .04em; color: var(--ink-mid); margin-top: 4px; text-wrap: pretty; }
/* 大阪府教育庁 文化財保護課の公式SNS（依頼者指示 2026-10-02）。フッターの最下段に独立した1行。
   ロゴは各社の公式配布物（X・Instagram・Facebook）のパスをそのまま使い、**黒の単色**にする。
   色を変えるのは各社のブランドガイドに触れるので、hover は不透明度だけで示す */
.foot-sns {
  max-width: var(--site-max); margin: 32px auto 0; padding: 0 var(--pad-x);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
}
.fs-h { font-size: 12px; letter-spacing: .08em; color: var(--ink-mid); text-wrap: balance; }
.fs-l { display: flex; gap: 4px; }
.fs-a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: #000;
  transition: opacity var(--transition);
}
.fs-a svg { width: 22px; height: 22px; fill: currentColor; }
.fs-x svg { width: 20px; height: 20px; }   /* X は字面が四隅まで詰まっているので一段小さく */
.fs-a:hover { opacity: .6; }

.copy { max-width: var(--site-max); margin: 0 auto; padding: 16px var(--pad-x) 24px; margin-top: 36px; border-top: 1px solid var(--ink-rule); font-size: 13px; line-height: 1.7; letter-spacing: .04em; color: var(--ink-mid); }

/* ============================================================ モーション */
@keyframes rev-t { from { transform: translateY(30px); } to { transform: translateY(0); } }
@keyframes rev-o { from { opacity: 0; } to { opacity: 1; } }
@keyframes par-u { from { transform: translateY(24px); } to { transform: translateY(-24px); } }
@keyframes par-d { from { transform: translateY(-24px); } to { transform: translateY(24px); } }

@supports (animation-timeline: view()) {
  /* 出現は非対称。変形は遅く劇的に、不透明度は先に決まる */
  .reveal {
    animation: rev-t 1s var(--e-inout-expo) both, rev-o .4s var(--e-out-quart) both;
    animation-timeline: view(), view();
    animation-range: entry 4% cover 30%, entry 4% cover 16%;
  }
  .par-up   { animation: par-u linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .par-down { animation: par-d linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
/* 非対応ブラウザは IntersectionObserver（main.js）が .is-in を付ける */
@supports not (animation-timeline: view()) {
  .reveal { opacity: 0; transform: translateY(30px); transition: transform 1s var(--e-inout-expo), opacity .4s var(--e-out-quart); }
  .reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .par-up, .par-down { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  .mq-track, .hero-mq, .headline-v i, .vlead, .sec-title { animation: none !important; }
  .sec-title { clip-path: none !important; }
  .headline-v i { opacity: 1 !important; transform: none !important; }
  .wipe { display: none !important; }
  .loader { display: none; }
  .arch img, .mu-visual img { transition: none; }
}

/* ============================================================ 章名の柱 */
/* スクロール中に「いまどこか」を告げる帯（依頼者承認 2026-08-27）。
   ・**1199px 以下だけ**。1200px 以上は右のレールが常時出ているので要らない
   ・章に入ったら出て、KV とフッターの上では出さない
   ・押せない。読み上げにも出さない（見出しが同じ役割をしている）
   ・出入りはスライドとフェードだけ。動きを止めた人には動かさない */
.chp {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  margin: 0; padding: 9px var(--pad-x) 8px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ink-hair);
  box-shadow: 0 4px 14px rgba(30, 47, 82, .06);
  font-size: 13px; font-weight: 500; letter-spacing: .06em; line-height: 1.5;
  color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .26s var(--e-out-quint), opacity .16s linear, visibility .26s;
}
@media (max-width: 1199px) { .chp { display: block; } }
.chp.is-on { transform: none; opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .chp { transition: none; } }

/* ============================================================ 旅ポケット */
/* Wireframe V3 WF-3 / WF-4 の「③貯める」。♥ で入れた場所がここに貯まり、
   そのまま しおり の材料になる。保存 → 作成 の距離を最短にするため、
   常設のボタンと、3件たまった時点の後押しを持つ。 */
.pk-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  display: flex; align-items: center; gap: 9px;
  min-height: 52px; padding: 0 20px 0 17px; border-radius: 26px;
  background: var(--cta); color: #fff; font-size: 13.5px; font-weight: 500; letter-spacing: .04em;
  box-shadow: 0 10px 30px rgba(30, 47, 82, .28);
  transition: background var(--transition), transform var(--transition), opacity var(--transition);
}
.pk-fab:hover { background: var(--cta-hover); }
.pk-fab-ic { font-size: 15px; line-height: 1; }
.pk-fab-l { white-space: nowrap; }
/* 件数は右上に少し飛び出す丸バッジ。ボタンの文字列に混ぜると
   「♥ 3 旅ポケット」と読めて、3が何の数か分かりにくかった */
.pk-fab-n {
  position: absolute; top: -8px; right: -8px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 25px; height: 25px; padding: 0 7px; border-radius: 13px;
  background: var(--navy); color: #fff;
  font-family: var(--en); font-size: 12.5px; font-weight: 700; line-height: 1;
  /* 白い縁で切り抜く。橙のボタンの上でも、紙の地の上でも輪郭が立つ */
  box-shadow: 0 0 0 2px var(--panel), 0 3px 8px rgba(30, 47, 82, .26);
  transition: transform var(--transition);
}
/* 0 のときは出さない。空であることはボタン自体の沈み方で伝える */
.pk-fab[data-empty] .pk-fab-n { display: none; }
/* 中身が無いうちは主張させない。1件でも入ったら前に出る */
.pk-fab[data-empty] { background: var(--navy); opacity: .82; }
.pk-fab[hidden] { display: none; }

/* ---- 追加・削除の控えめなモーション（依頼者指示 2026-08-29）。
   **サイト共通の言葉づかい**にするので、キーフレームはここに1つずつ置く。
   使う側（pages.css）も同じものを参照する。動かすのは transform と opacity だけ。 */
@keyframes oc-bump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes oc-pop {
  0%   { transform: scale(.82); opacity: .6; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  /* 旅ポケットの追従ボタンのバッジ。増減したときだけ */
  .pk-fab-n.is-bump { animation: oc-bump .34s var(--e-out-quint); }
}

.pk {
  position: fixed; right: 24px; bottom: 24px; z-index: 71;
  width: min(360px, calc(100vw - 40px)); max-height: min(76vh, 620px);
  display: flex; flex-direction: column;
  background: var(--panel); border-radius: var(--r-surface);
  box-shadow: 0 24px 64px rgba(30, 47, 82, .30);
}
.pk[hidden] { display: none; }
.pk-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 14px 12px 22px; }
.pk-t { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: .06em; color: var(--navy); }
.pk-c {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; margin-left: 10px; padding: 0 6px; border-radius: 11px;
  background: var(--cta); color: #fff; font-family: var(--en); font-size: 12px; font-weight: 700;
}
.pk-x { width: 44px; height: 44px; font-size: 22px; line-height: 1; color: var(--ink-mid); }
.pk-x:hover { color: var(--navy); }

/* 旅ポケットの一覧。上端・下端でさらに動かすと背面のページがスクロールしてしまう
   ため、連鎖を止める（依頼者指摘 2026-09-30）。あわせて flex の縮みを許可する
   （min-height:0 が無いと中身の高さが最小サイズになり、.pk の max-height まで
   縮まずスクロールが効かない）。同じ形の指定は feed.css の .ts-body、
   spotcard.css の .tc-b にもある。 */
.pk-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px; }
/* 3館のどれを核に回るかが見えるよう、エリアで自動的にまとめる（WF-4） */
.pk-g + .pk-g { margin-top: 18px; }
.pk-gt { font-size: 11.5px; font-weight: 500; letter-spacing: .12em; color: var(--mu, var(--ink-mid)); margin-bottom: 6px; }
.pk-i { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--ink-hair); }
.pk-i:first-of-type { border-top: 0; }
.pk-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--mu, var(--navy)); }
.pk-n { flex: 1; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--navy); }
.pk-l { font-size: 11.5px; color: var(--ink-mid); white-space: nowrap; }
/* 名前を押すとその動画が開く（2026-09-12）。見た目は今までの文字のまま、
   当たり判定だけ行いっぱいに広げる */
.pk-a { display: block; color: inherit; text-decoration: none; }
.pk-a:hover { color: var(--terra); }

/* 外す操作の出し方をプレーヤー側にそろえる（2026-09-12）。
   × は常時ではなく「削除」を押している間だけ出す。 */
/* 「削除」はプレーヤー側と同じ見た目にそろえる（2026-09-12）。
   プレーヤーは 62×28・角丸4px・細い枠線（.button-stock-item-trash）。
   こちらだけピル型だったため、同じ操作なのに形が違っていた */
.pk-edit {
  margin-left: auto; margin-right: 4px;
  width: 62px; height: 28px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: .04em; color: var(--ink-mid);
  border: 1px solid #777879; border-radius: 4px; background: transparent;
}
.pk-edit:hover { color: var(--navy); border-color: var(--ink-mid); }
.pk-edit[hidden] { display: none; }
.pk[data-editing] .pk-edit { color: var(--terra); border-color: var(--terra); }

/* 「削除」で出し入れするが、**場所は常に取っておく**。
   display を切り替えると行の高さが変わって一覧が跳ねる */
.pk-rm {
  visibility: hidden; pointer-events: none;
  width: 44px; height: 44px; margin-right: -12px; font-size: 15px; color: var(--ink-mid); flex: 0 0 auto;
}
.pk[data-editing] .pk-rm { visibility: visible; pointer-events: auto; }
.pk-rm:hover { color: var(--terra); }

.pk-empty { padding: 4px 22px 8px; font-size: 13px; line-height: 1.95; color: var(--ink-soft); }
.pk-empty[hidden] { display: none; }
.pk-empty a { color: var(--terra); text-decoration: underline; text-underline-offset: 3px; }
.pk-foot { padding: 14px 22px 20px; border-top: 1px solid var(--ink-rule); margin-top: 12px; }
.pk-note { font-size: 12px; line-height: 1.8; color: var(--terra); margin-bottom: 10px; }
.pk-note:empty { display: none; }
/* つくったしおりの一覧へ（依頼者指示 2026-10-01）。主ボタンの下に控えめな文字リンクで置く */
.pk-mine { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px;
  font-size: 13.5px; letter-spacing: .04em; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.pk-mine:hover { color: var(--terra); }
.pk-cta { width: 100%; font-size: 14px; min-height: 50px; }
.pk-cta[aria-disabled="true"] {
  background: rgba(30, 47, 82, .07); color: var(--ink-mid);
  border: 1px solid var(--ink-rule); pointer-events: none;
}

.toast {
  position: fixed; right: 24px; bottom: 92px; z-index: 72;
  max-width: min(320px, calc(100vw - 40px));
  padding: 13px 18px; border-radius: 14px;
  background: var(--navy); color: var(--ivory);
  font-size: 13px; line-height: 1.7; letter-spacing: .02em;
  box-shadow: 0 14px 36px rgba(30, 47, 82, .34);
}
.toast[hidden] { display: none; }

/* ============================================================ FV の背景文字 */
/* 事業名を大きく薄く流す。動画の背後で「回廊＝めぐる」を字で語らせる装置。
   装飾なので aria-hidden、コントラスト要件の対象外。 */
.hero-mq {
  /* 中央カラムに収めるとカードでほぼ隠れる。画面幅いっぱいに出す。
     Hero の中心は画面中心から (rail-r − rail-l)/2 だけずれている */
  --hero-shift: calc((var(--rail-r) - var(--rail-l)) / 2);
  position: absolute; z-index: 0; top: 0; bottom: 0;
  /* 左端は main.js が実測して --mq-left に入れる（依頼者指示 2026-08-26 ④）。
     計算式だと、狭い画面で Hero が右へ寄る組みのときに左端まで届かなかった */
  left: calc(-1 * var(--mq-left, 0px)); width: 100vw;
  display: flex; align-items: center; overflow: clip; pointer-events: none;
}
.mq-track { display: flex; will-change: transform; animation: mq 46s linear infinite; }
.mq-track span {
  padding-right: .34em; white-space: nowrap;
  font-family: var(--en); font-size: clamp(110px, 13vw, 230px); font-weight: 400;
  letter-spacing: .03em; line-height: 1; color: var(--navy); opacity: .05;
}
/* 2枚並べて半分だけ動かすので、継ぎ目なく回り続ける */
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* スライドは必ず文字より前に */
.hero-slider { position: relative; z-index: 1; }
.slider-ctl { position: relative; z-index: 1; }

/* ============================================================ 登場と背景 */
/* --- 見出しは1文字ずつ落とす（D） -------------------------------- */
.headline-v .hl { display: block; }
.headline-v i { font-style: normal; display: inline-block; }
.is-ready .headline-v i {
  animation: ch-in .85s var(--e-out-quint) backwards;
  animation-delay: calc(var(--i) * .042s);
}
@keyframes ch-in { from { opacity: 0; transform: translateY(-.32em) scale(.92); } }
/* リードは文字が出そろってから */
.is-ready .vlead { animation: lead-in .9s var(--e-out-quart) .9s backwards; }
@keyframes lead-in { from { opacity: 0; transform: translateX(10px); } }

/* --- 背景文字（③・F） -------------------------------------------- */
/* 3館の色を1周のうちに通す。ネイビー→セージ→テラコッタ */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .mq-track span {
    background: linear-gradient(100deg, var(--navy) 0%, var(--sage-fill) 48%, var(--terra-fill) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
/* スクロールすると、時間のループに加えて余分に流れる＝追いついてくる（F） */
@supports (animation-timeline: scroll()) {
  .hero-mq {
    animation: mq-scroll linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  @keyframes mq-scroll { to { transform: translateX(-16%); } }
}

/* --- スポットの段差スクロール（B）は**やめた**（依頼者指示 2026-08-29） -----
   スクロール量に応じて 1枚ずつ ±10 / ±22 / ±44px 縦にずらしていたが、
   並びがガタついて見えるという指摘。実測すると**同じ行の中で最大 34px**ずれていた。

   ずれ方が不規則だったのは、段差を `nth-child(3n…)` で振っていたため。
   列数は 2〜6 と幅で変わる（トップ 3〜4列／一覧 2〜6列）ので、3列以外では
   「何列目か」と一致せず、行ごとに違う組み合わせになっていた。

   段差そのものをやめて、**同じ行はきれいにそろえる**。
   `.reveal` の出現（下から少し上がる）は各カードに残っている。

/* --- ページ遷移のワイプ（E） ------------------------------------- */
/* 下層ページができたときに効く。いまはリンクが # なので発火しない。 */
.wipe {
  position: fixed; inset: 0; z-index: 200; background: var(--ground);
  transform: scaleY(0); transform-origin: bottom; pointer-events: none;
}
.wipe.is-out {
  transform: scaleY(1); transform-origin: bottom;
  transition: transform .62s var(--e-inout-expo);
}

/* ============================================================ 節見出しの拭き取り */
.sec-title { clip-path: inset(0 0 0 0); }
@supports (animation-timeline: view()) {
  .sec-title {
    animation: title-wipe linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 26%;
  }
  @keyframes title-wipe { from { clip-path: inset(0 100% 0 0); } }
}

/* ============================================================ 小さな反応 */
.np-list a { position: relative; }
/* 下線を左から引く。色だけで反応を伝えない */
.np-list a::after {
  content: ""; position: absolute; left: 14px; right: 11px; bottom: 11px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--e-out-quint);
}
.np-list a:hover::after, .np-list a:focus-visible::after { transform: scaleX(1); }
.mu-rep:hover .arrow, .cs:hover .arrow, .sec-more:hover .arrow { transform: translateX(4px); }
.spot-link:hover .spot-fig img { transform: scale(1.05); }

/* ============================================================ タブレット以下 */
@media (max-width: 1199px) {
  .site {
    /* 余白はトークンで持つ。直に 20px と書いていたときは、全幅へ広げる計算
       （3館の --bleed）が --pad-x=40px を見てしまい 20px はみ出した（実測） */
    --pad-x: 20px;
    --col-gap: 14px;
    padding: 0 var(--pad-x) 40px; column-gap: var(--col-gap);
    grid-template-columns: auto minmax(0, 1fr);
    /* 説明は横組みになるので、見出しの隣ではなくヒーローの下に1行取る */
    grid-template-areas: "brand brand" "vtext hero" "lead lead" "stream stream";
  }
  /* 左レールを解体して、ロゴと縦組みをグリッドへ直接流す */
  .rail-l { display: contents; }
  .stream { width: 100%; --stream-shift: 0px; }   /* レールが解体されるのでずれは無い */
  .brand { grid-area: brand; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; }
  .brand-logo { width: 124px; height: auto; }
  /* vtext を解体して、見出しと説明を別々のグリッド項目にする */
  .vtext { display: contents; }
  .headline-v { grid-area: vtext; margin-top: 6px; }
  /* 縦組みの幅を確定させる。下の説明を左端まで伸ばす計算に使う。
     **inline-size は使わない** ―― 縦書きでは高さ方向を指すので、
     指定すると列が 305px まで広がってヒーローが潰れた（実測） */
  .headline-v { font-size: 34px; line-height: 1.6; width: var(--hl-w, auto); }
  /* SP はレールを畳むので、説明はヒーローの下に横組みで置く */
  .vlead {
    grid-area: lead; writing-mode: horizontal-tb; max-height: none;
    font-size: 12.5px; line-height: 1.95; letter-spacing: .02em;
    margin: 26px 0 0; text-wrap: pretty;
  }
  .burger { display: flex; }

  /* 右レールはドロワーになる */
  .rail-r {
    position: fixed; inset: 0; z-index: 80; background: var(--ground);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition);
  }
  .rail-r[data-open] { opacity: 1; visibility: visible; }
  .navpanel { border-radius: var(--r-surface); width: 100%; max-width: 360px; padding: 32px 24px 28px; }
  .np-list a { height: 54px; font-size: 15px; }
  .drawer-close { display: block; position: absolute; right: 20px; top: 20px; width: 44px; height: 44px; font-size: 22px; color: var(--navy); }
  /* 開いたメニューの**最下部**に言語切替。閉じるボタン（右上 20px・44px）とは
     カプセルの上余白 32px で離れているので重ならない。
     画面が低いときはカプセルの中だけを安全にスクロールさせる */
  .navpanel { max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; }
  .np-lang { margin-top: 18px; padding-top: 14px; }
  .np-lang-l { font-size: 12px; }
  .np-lang-c, .np-lang-a { font-size: 14px; min-height: 48px; }

  /* 左に縦組み見出しがある分、幅が足りない。右端までブリードさせて次のカードを見せる */
  .hero-slider-wrap { --slide-w: min(46vw, 208px); margin-right: -20px; }
  /* 狭い画面でも画面幅いっぱいを走らせる（依頼者指示 2026-08-26 ④）。
     左端は main.js が実測する */
  .mq-track span { font-size: clamp(64px, 22vw, 120px); }
  .hero-slider { gap: 12px; padding-inline: calc(50% - var(--slide-w) / 2 - 10px) 20px; }
  .slider-ctl { margin-right: 20px; }
  .vv-frame { border-radius: calc(var(--slide-w) / 2) calc(var(--slide-w) / 2) 16px 16px; }
  .vv-over { padding: 32px 11px 11px; }
  .vv-name { font-size: 13px; }
  /* 級数を上げたので、チップの高さと地も合わせて上げる（実測 2.14 → 不足）*/
  .vv-area { font-size: 11.5px; margin-top: 3px; }
  .vv-play { --play-d: 56px; }
  .sc-track { width: 76px; }
  .slider-ctl { gap: 10px; }
  .sec { padding-top: 56px; }
  /* .sec が後から padding-top を上書きするので、ここでも指定し直す */
  .sec-cp     { padding-block: 48px; }
  .sec-itinerary { padding-top: 76px; }
  .sec-course { padding-top: 62px; }
  .sec-mu     { padding-top: 48px; }
  .sec-spot   { padding-top: 76px; }
  .band { padding-bottom: 56px; }
  .narrow > * { max-width: none; }
  .sec-head { flex-direction: column; align-items: stretch; gap: 2px; margin-bottom: 24px; }
  .sec-more { align-self: flex-end; }
  .sec-title { font-size: 24px; }
  /* 3枚を並べられない幅では、縦に積まず「ループする横スライドショー」にする。
     端で止まると「めぐる」が途切れるので、前後にクローンを置いて往復させない */
  /* できることは2列 */
  .hw-list { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* 開催中バーは横並びできないので、ループする横スライドにする（既存の機構を流用）。
     端で止まると「めぐる」が途切れるので、前後にクローンを置いて往復させない */
  .cb-box { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
  .cb-h { border-right: 0; padding-right: 0; }
  .cb-list {
    gap: 12px; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .cb-list::-webkit-scrollbar { display: none; }
  .cb { flex: 0 0 82%; scroll-snap-align: center; }
  .cb.is-clone { display: flex; }
  .sec-cb .pager { display: flex; margin-top: 4px; }
  .cb-more { align-self: flex-end; }

  /* 周辺は PC と同じ横スライダー。右端は画面の外へ抜けさせて「まだ続く」を見せる */
  .nb-list { gap: 12px; margin-right: calc(-1 * var(--pad-x)); padding-right: var(--pad-x); }
  .nb { --nb-w: 118px; }
  /* 狭い画面では「泉州の11本」が折り返すので、見出しの下へ回す */
  .nb-head { align-items: center; }
  .nb-c { display: block; margin: 4px 0 0; }

  .cp { grid-template-columns: 1fr; gap: 16px; }
  .cp-fig { height: 176px; }
  .cs { grid-template-columns: 1fr; gap: 16px; }
  .cs-fig { height: 222px; }
  .mu { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 26px 0; }
  .mu-visual { height: 190px; }
  /* 縦型にしたので、レールが解けて列が広がる幅では**3列**にする。
     2列のままだと 1024px で1枚 485×647px になり、写真が大きすぎた（実測） */
  .spot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 14px; }
  /* 旅ポケットは画面下いっぱいのシートにする */
  .pk { right: 0; bottom: 0; width: 100%; max-height: 78vh;
        border-radius: var(--r-surface) var(--r-surface) 0 0; }
  .pk-fab { right: 16px; bottom: 16px; }
  .toast { right: 16px; left: 16px; bottom: 84px; max-width: none; }
  .foot-in { flex-direction: column; gap: 28px; padding: 34px 20px 0; }
  .foot-sns { margin-top: 28px; padding: 0 20px; }
  .fcols { gap: 28px; }
  .copy { padding: 16px 20px 20px; margin-top: 24px; }
}

/* ============================================================ スマートフォン */
@media (max-width: 560px) {
  .hw-list { grid-template-columns: 1fr; gap: 10px; }
  /* 3列のままだと1項目あたり約100pxしかなく、「しおりをつく／る」と割れる */
  .fcols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
  /* 見出しとアイコンを上下に積み、アイコンの字面を見出しの左辺にそろえる（当たり判定 44px の余白ぶん戻す） */
  .foot-sns { flex-direction: column; align-items: flex-start; gap: 2px; }
  .fs-l { margin-left: -11px; }
  .headline-v { font-size: 30px; }
  .spot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn { width: 100%; }
  .cs-tags .pill, .spot-more .btn { width: auto; }

  /* 追従の旅ポケットは一回り小さく（依頼者指示 2026-08-21）。
     ラベルは隠すが、読み上げは button の aria-label（「旅ポケットを開く」）が担う。
     **タップ領域は 46px** ―― ガイドの 44px を下回らせない。
     端の余白は safe area を見る（ホームバーやノッチの上に置かない） */
  .pk-fab {
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    width: 46px; min-height: 46px; padding: 0; gap: 0;
    justify-content: center; border-radius: 23px;
  }
  .pk-fab-l {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .pk-fab-ic { font-size: 17px; }
  .pk-fab-n {
    top: -6px; right: -6px; min-width: 21px; height: 21px;
    padding: 0 6px; border-radius: 11px; font-size: 11.5px;
  }
  .toast { bottom: 74px; }
}

/* ============================================================ 実写差し込みモード */
/* build_site.py --pending のときだけ出る。許諾確認前の写真を差し込んでいる印。
   画面のいちばん上に固定するので、上から撮ったスクリーンショットには必ず写る。
   配布用のビルド（引数なし）には、この帯もマークアップごと入らない。 */
.pending-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 16px; background: #BE2814; color: #fff;
  font-family: var(--sans); font-size: 11.5px; line-height: 1.6; letter-spacing: .04em;
}
.pending-bar b { font-weight: 700; }
.pending-bar b:first-child {
  padding: 1px 8px; border-radius: 3px; background: rgba(255, 255, 255, .18);
}
.pending-bar span { margin-left: auto; opacity: .82; }


/* ============================================================ モデルコース：カードを重ねる */
/* 3枚を同じ位置に重ね、スクロールで紙が1枚めくれるように入れ替える。
   3D の回転はしない（紙が軽くめくれる程度に留める）。

   ★ 基本形は「縦に積む」。PC の重ね置きは
     @media (min-width:1200px) and (prefers-reduced-motion: no-preference)
   の中にだけ書いてある。動きを止めた人には、ふつうの一覧がそのまま出る。

   前面のカードだけが押せる。背面は pointer-events:none ＋ tabindex="-1"（JS）。 */

.ck { position: relative; }

/* ---------------- 現在位置と進み具合 */
.ck-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 18px;
  margin-bottom: 22px;
}
.ck-pos { font-family: var(--en); font-size: 12px; letter-spacing: .14em; color: var(--ink-mid); }
.ck-pos b { font-weight: 400; font-size: 17px; color: var(--navy); }
.ck-prog { display: flex; align-items: center; gap: 8px; }
/* 3段階の進み具合。押すとそのコースまで動くので、キーボードだけでも3枚に届く */
.ck-dot {
  position: relative; width: 34px; height: 2px; border-radius: 1px;
  background: rgba(30, 47, 82, .20); transition: background var(--transition);
}
.ck-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 44px; height: 44px;
}
.ck-dot:hover { background: rgba(30, 47, 82, .42); }
.ck-dot.is-now { background: var(--cta); }

/* ---------------- 骨格（縦に積む） */
.ck-track { position: relative; }
.ck-list { display: grid; gap: 26px; }
.ck-c { position: relative; }

/* ---------------- カード */
.ck-card {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--ink-hair);
  border-radius: var(--r-surface);
  box-shadow: 0 14px 38px rgba(30, 47, 82, .12);
}
/* 奥のカードに掛ける覆い。これが無いと、下からのぞく 16px が
   「後ろの紙の縁」ではなく「写真の切れはし」に見える。
   不透明度だけを JS が触るので、スタイルの作り直しは起きない */
.ck-veil {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: var(--panel); opacity: 0;
}
.ck-fig { position: relative; aspect-ratio: 620 / 300; background: rgba(30, 47, 82, .06); }
.ck-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 所要は写真の上に置く。読ませたいので保護面を敷く（ブランドガイド p05） */
.ck-dur {
  position: absolute; left: 16px; bottom: 14px;
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border-radius: 13px; background: rgba(22, 35, 61, .82); color: #fff;
  font-size: 11.5px; font-weight: 500; letter-spacing: .08em;
}
.ck-body { padding: 20px 22px 22px; }
.ck-n { font-family: var(--en); font-size: 12px; letter-spacing: .22em; color: var(--terra); }
.ck-t {
  font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.5;
  letter-spacing: .04em; color: var(--navy); margin-top: 8px; text-wrap: pretty;
}
.ck-lb {
  margin-top: 15px; font-size: 12px; font-weight: 500; letter-spacing: .12em;
  color: var(--ink-mid);
}
.ck-whom { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ck-desc { margin-top: 12px; font-size: 15px; line-height: 1.95; color: var(--ink-soft); text-wrap: pretty; }
.ck-facts {
  display: flex; flex-wrap: wrap; gap: 0 26px;
  margin-top: 16px; padding: 14px 0; border-top: 1px solid var(--ink-hair);
  border-bottom: 1px solid var(--ink-hair);
}
.ck-facts > div { min-width: 0; }
.ck-facts dt { font-size: 12px; letter-spacing: .1em; color: var(--ink-mid); }
/* dd は既定で 40px 字下げされる。放っておくと値が見出しからずれる */
.ck-facts dd { margin: 4px 0 0; font-size: 13px; font-weight: 500; color: var(--navy); }
.ck-stops { margin-top: 13px; font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
.ck-stops b {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .1em;
  color: var(--ink-mid); margin-bottom: 3px;
}
.ck-more { margin-top: 13px; }
.ck-more summary {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12.5px; letter-spacing: .04em; color: var(--ink-mid);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
  list-style: none;
}
.ck-more summary::-webkit-details-marker { display: none; }
/* 押すと開くことが分かるよう、下向きのシェブロンを添える（依頼者指示 2026-09-17）。
   開いたら上を向く。支給の矢印SVGは左右しか無いので、この1つだけ CSS で描く */
/* 回した角がはみ出さないよう、器（12px）の中で回す */
.ck-ar { position: relative; width: 12px; height: 12px; margin-left: 6px; flex: 0 0 auto; }
.ck-ar::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform var(--transition);
}
.ck-more[open] summary .ck-ar::before { transform: translateY(1px) rotate(225deg); }
@media (prefers-reduced-motion: reduce) { .ck-ar::before { transition: none; } }
.ck-more summary:hover { color: var(--terra); }
.ck-more .stops { margin-top: 4px; }
.ck-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ck-acts .btn { min-height: 50px; font-size: 13.5px; padding: 0 22px; }

/* ============================================================ モデルコース：PC の重ね置き */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  /* 体験のデモより短くする。読む静止区間を各カードに取ってある */
  .ck-track { position: relative; z-index: 1; height: 280vh; }
  /* パネルを画面いっぱいに取り、目盛とカードをまとめて上下中央に置く */
  .ck-stick {
    position: sticky; top: 0; height: 100vh;
    display: grid; grid-template-rows: auto minmax(0, min(628px, 74vh));
    align-content: center; row-gap: 14px;
  }
  .ck-bar { margin-bottom: 0; }
  /* ★ カードは**この枠の中で消える**。以前は上へ抜けたカードが目盛の上を
     通ってしまい、数字と線が読めなくなっていた（依頼者指摘 2026-08-20）。
     影とのぞきのぶんだけ外へ広げてから、同じだけ内側へ戻して切り取る */
  .ck-list {
    display: block; position: relative; height: 100%;
    margin: 0 -30px -76px; padding: 0 30px 76px;
    overflow: clip;
  }
  /* 3枚を同じマスに重ねる。並びは DOM のまま（COURSE 01 → 02 → 03） */
  .ck-c {
    position: absolute; top: 0; left: 30px; right: 30px; bottom: 76px;
    /* 下端を軸にする。上端を軸にすると、縮んだぶん下端が上がって
       後ろの2枚が前面の中に隠れてしまい、重なって見えない */
    transform-origin: 50% 100%;
    will-change: transform, opacity;
  }
  .ck-card {
    height: 100%; display: grid; grid-template-columns: 44% minmax(0, 1fr);
    overflow: hidden;
  }
  .ck-fig { aspect-ratio: auto; height: 100%; }
  .ck-body {
    padding: 26px 28px; overflow: auto;
    display: flex; flex-direction: column;
  }
  .ck-t { font-size: 24px; }
  .ck-acts { margin-top: auto; padding-top: 18px; }
  /* 押せるのは前面だけ。背面を誤って押させない */
  .ck-c { pointer-events: none; }
  .ck-c.is-front { pointer-events: auto; }
  /* 重なっていることが分かる縁。奥へ行くほど弱める */
  .ck-c.is-back .ck-card { box-shadow: 0 8px 20px rgba(30, 47, 82, .10); }
  .ck-c.is-front .ck-card { box-shadow: 0 22px 52px rgba(30, 47, 82, .17); }
}

@media (min-width: 1500px) and (prefers-reduced-motion: no-preference) {
  .ck-stick { grid-template-rows: auto minmax(0, min(668px, 76vh)); }
  .ck-t { font-size: 26px; }
  .ck-body { padding: 30px 34px; }
}

/* ============================================================ モデルコース：SP */
/* **横スワイプでめくる**（依頼者指示 2026-08-26 ⑤）。PC の重ねと同じ見え方にして、
   きっかけだけスクロール → 指の動きに変えた。ページのスクロールは奪わない
   （touch-action: pan-y なので、縦方向はいつもどおり流れる）。
   カードが画面に収まらないとき（.is-flat）と、動きを止めている人は、
   これまでどおり縦に並べるだけ。 */
@media (max-width: 1199px) and (prefers-reduced-motion: no-preference) {
  .ck.is-swipe .ck-list {
    display: grid; touch-action: pan-y;
    /* 退場するカードが横へ抜けるので切り取る。
       **左右に 18px** ―― 次の1枚がのぞく端を切らないため（2026-08-27）。
       負のマージンで同じだけ広げてあるので、**カードの幅は変わらない**。
       画面の端（--pad-x = 20px）は越えないので、横スクロールも出ない */
    overflow: clip; padding: 8px 18px 52px; margin: 0 -18px;
  }
  .ck.is-swipe .ck-c {
    grid-area: 1 / 1; position: relative; top: auto; margin-bottom: 0;
    transition: transform .52s var(--e-out-quint), opacity .3s var(--e-out-quart);
  }
  /* 指で動かしているあいだは追従させる（慣性の演出はしない） */
  .ck.is-swipe .ck-c.is-drag { transition: none; }
  /* 前面だけ押せる。背面は覆いで沈める（PC と同じ扱い） */
  .ck.is-swipe .ck-c { pointer-events: none; }
  .ck.is-swipe .ck-c.is-front { pointer-events: auto; }
  .ck.is-swipe .ck-c.is-front .ck-card { box-shadow: 0 22px 52px rgba(30, 47, 82, .17); }
  .ck.is-swipe .ck-c.is-back .ck-card { box-shadow: 0 8px 20px rgba(30, 47, 82, .10); }
}
/* 「スワイプでめくれます。」の案内は外した（依頼者承認 2026-08-27）。
   代わりに、指で送る画面では**次の1枚を横にのぞかせる**（main.js の place()）。
   のぞく端が切れないよう、この画面だけ器の左右に 18px の余地を作る。
   カードの幅は変えない（負のマージンで同じだけ広げてある）。 */

@media (max-width: 1199px) and (prefers-reduced-motion: no-preference) {
  /* カードが画面より高いと、貼り付いたまま下端の CTA に届かなくなる。
     写真とボタンを詰めて、375×780 で 1枚が収まる高さにしてある */
  .ck-fig { aspect-ratio: 620 / 258; }
  .ck-list { display: block; margin: 0; padding: 0; overflow: visible; }
  .ck-c {
    position: sticky; left: auto; right: auto; bottom: auto;
    top: calc(var(--sticky-top) + 8px + var(--i) * 10px);
    margin-bottom: 30px;
  }
  /* 最後の1枚が節の枠にぴったり付いていた（依頼者指摘 2026-08-26 ⑥）。
     影が切れないぶんの余白を残す */
  .ck-c:last-child { margin-bottom: 18px; }
  .ck-list { padding-bottom: 34px; }
  /* 上から重なってくることが分かるよう、影は上向きに強く出す */
  .ck-card { box-shadow: 0 -10px 34px rgba(30, 47, 82, .20); }
  /* 覆われた側は覆いを掛けて沈める。JS が不透明度だけを触る */
  .ck-veil { transition: opacity .32s var(--e-out-quart); }
  /* 覆われた側は操作させない。次のカード（まだ前に出ていない側）は触れるまま */
  .ck-c.is-behind { pointer-events: none; }
}

/* 画面が低い端末では重ねない。カードが画面に収まらず、読めないまま次が覆うため。
   高さは CSS では測れないので、カード自身が画面より高い場合は JS が .is-flat を付ける */
@media (max-height: 620px) {
  .ck-c { position: relative !important; top: auto !important; }
}
.ck.is-flat .ck-c { position: relative !important; top: auto !important; }

/* ============================================================ モデルコース：動きを止めたとき */
/* 重ねも傾きも縮小もしない。ふつうの縦並びの一覧になる */
@media (prefers-reduced-motion: reduce) {
  .ck-track { height: auto !important; }
  .ck-stick { position: static !important; height: auto !important; }
  .ck-bar { position: static !important; }
  .ck-list {
    display: grid !important; gap: 26px; height: auto !important;
    margin: 0 !important; padding: 0 !important; overflow: visible !important;
  }
  .ck-c {
    position: relative !important; inset: auto !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important; opacity: 1 !important;
    pointer-events: auto !important; will-change: auto !important;
  }
  .ck-card { height: auto !important; }
  .ck-body { overflow: visible !important; }
  .ck-fig { aspect-ratio: 620 / 300 !important; height: auto !important; }
}

@media (max-width: 560px) {
  .ck-bar { gap: 12px; }
  .ck-dot { width: 26px; }
  .ck-body { padding: 16px 16px 18px; }
  .ck-t { font-size: 19px; }
  .ck-lb { margin-top: 12px; }
  .ck-whom { margin-top: 6px; }
  /* 3項目を横に並べると折り返して、見出しと値が食い違って見える。
     狭い画面では見出しと値を同じ行に置く */
  .ck-facts { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin-top: 13px; padding: 12px 0; }
  .ck-facts > div { display: contents; }
  .ck-facts dt { align-self: center; }
  .ck-facts dd { margin: 0; }
  .ck-acts { gap: 8px; margin-top: 14px; }
  /* 縦に積むと 110px 使う。1行に並べて 48px に収める（タップ領域は 44px 以上） */
  .ck-acts .btn {
    flex: 1 1 0; min-width: 0; width: auto;
    font-size: 12.5px; padding: 0 10px; min-height: 48px;
  }
}

/* ============================================================ 開催中の企画：狭い画面 */
/* 横長のまま1列に積む。**巨大な縦長カードにはしない**（依頼者指示 2026-08-21） */
@media (max-width: 900px) {
  .bn-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bn-list.is-pair { grid-template-columns: minmax(0, 1fr); max-width: none; }   /* 2枚並びも1列に積む */
  .bn-t { font-size: 18px; }
  .bn-wide { aspect-ratio: 2 / 1; }
  .bn-wide.bn-blank .bn-t { font-size: 18px; }
}
@media (max-width: 560px) {
  .bn-over { padding: 12px; }
  .bn-t { font-size: 16px; }
  /* 2:1 の空き枠は背が低い。320px（280×140px）では英語の見出しが3行になり、
     断りとラベルが重なったので、余白と見出しを1段詰める（実測） */
  .bn-wide.bn-blank .bn-blank-b { padding: 12px; gap: 4px; }
  .bn-wide.bn-blank .bn-note { top: 9px; left: 12px; }
  .bn-wide.bn-blank .bn-t { font-size: 15px; line-height: 1.35; }
}


/* KV の1行：狭い画面では操作列の上に回り、行長を本文幅に合わせる */
@media (max-width: 1199px) {
  /* 説明は**画面の左端から**始める（依頼者指示 2026-08-26）。
     右の列の中に置くと、縦組みの下に 119×210px の空きが残っていた。
     見出しの列幅（--hl-w）＋ 列の間（--col-gap）ぶんだけ左へ出す */
  .hero-what {
    flex: 1 1 100%; margin-right: 0; font-size: 15px;
    margin-left: calc(-1 * (var(--hl-w) + var(--col-gap)));
    width: calc(100% + var(--hl-w) + var(--col-gap));
    max-width: none;
  }
}

/* ============================================================ 3館：共通の構図 */
/* **3館とも同じ形**にする（依頼者指示 2026-08-25）。
   館ごとに構図を変えていたが、開館時間・入館料・最寄りといった
   主要情報の置き場所が館ごとに動いてしまい、読み比べができなかった。
   インパクトは「写真の大きさ」「はみ出し」「大きな番号」で出し、
   **情報の並びは3館で1つに固定する**。 */
@media (min-width: 1200px) {
  .mu-body { position: relative; z-index: 1; }
  .mu-surprise { font-size: clamp(17px, 1.35vw, 20px); }

  .mu { --mu-fig-h: 430px; grid-template-columns: 54% minmax(0, 1fr); column-gap: 44px; }
  /* 写真は左。外側（レール側）へ --bleed ぶん出す。天端のアーチは3館とも同じ */
  /* 左へ --bleed ぶん出していたのをやめた（依頼者指示 2026-08-26 ②）。
     本文・見出し・周辺スライダーは列の内側で始まるのに、写真だけが
     左のレール側へ出ていて、縦のラインが揃わなかった */
  /* 行の高さいっぱいに伸ばすが、**上限を切る**（依頼者指示 2026-08-26）。
     切らないと 1980px 幅で 1038px の高さになり、写真だけが大きすぎた（実測） */
  .mu-visual {
    grid-column: 1; grid-row: 1; align-self: stretch;
    height: 100%; min-height: var(--mu-fig-h); max-height: min(70vh, 660px);
    width: 100%;
    border-radius: 200px 200px var(--r-panel) var(--r-panel);
  }
  .mu-body { grid-column: 2; grid-row: 1; }
  .mu-near { grid-column: 1 / -1; grid-row: 2; }
  /* 大きな番号は写真の外側の肩に。3館とも同じ位置 */
  /* 番号だけは外へ出す。写真が内側に戻ったぶん、ここで抜けをつくる */
  .mu-big { left: calc(-1 * var(--bleed) - 6px); top: -66px; }
}

@media (min-width: 1500px) {
  .mu { --mu-fig-h: 480px; }
}


/* 「主役の節の見出し」（.sec-head-lg）の指定は削除した（2026-08-27）。
   3館・モデルコース・スポットの見出しはネイビーのイントロ（.secband）へ移り、
   「動画で見つけた「いいな」が、次の休日になる。」も撤去したので、
   このクラスを使う節がひとつも無くなった。
   sitekit.sec_head(big=True) は残してあるが、いまの生成物では呼ばれていない。 */


/* ============================================================ 主要3館の目印 */
/* 大阪府立弥生文化博物館・大阪府立近つ飛鳥博物館・日本民家集落博物館の
   **3館だけ**につける、施設名を見つけやすくするための目印（依頼者指示 2026-08-27）。
   同じ「博物館」を名前に含んでいても、周辺スポット・美術館・資料館・城・寺院には出さない。

   ・支給 SVG（placetype-museum.svg）は白い線なので、**エリアの識別色の地に載せる**。
     色は行が既に持っている --mu（弥生＝泉州ネイビー／近つ飛鳥＝南河内セージ／
     民家集落＝北摂テラコッタ）。§23 の対応表は変えていない
   ・**装飾**なので丸ごと aria-hidden ＋ alt=""。施設種別は読み上げない
   ・地は円。新しい影は付けない。施設名より目立たせない
   ・トップとしおりで同じ見た目にするため、全ページが読む style.css に置く
     （しおりは tokens.css → style.css → pages.css の順に読む） */
.micon {
  flex: 0 0 auto;
  width: var(--micon-d, 34px); height: var(--micon-d, 34px);
  border-radius: 50%;
  background: var(--mu, var(--navy));
  display: inline-flex; align-items: center; justify-content: center;
  /* 名前が2行になっても先頭行の高さに合わせて置く */
  margin-top: var(--micon-top, 1px);
}
.micon img { width: var(--micon-i, 20px); height: var(--micon-i, 20px); display: block; }
@media (max-width: 768px) {
  .micon { --micon-d: 31px; --micon-i: 18px; }
}

/* トップの3館カード。施設名の直前に置く。
   **見出しを中央寄せにしない** ―― 左端は今までどおり名前の列にそろえる。

   見出しの級数と行間は**この器が変数で持ち**、見出しとアイコンの両方が読む。
   こうすると、アイコンを「1行目の行ボックスの中央」に置く計算が
   画面幅ごとに自動で合う（座標の決め打ちをしない）。
   align-items:center にしないのは、名前が2行になったとき
   アイコンが2行全体の中央へ落ちてしまうため。 */
.mu-title {
  --mu-name-fs: 21px;
  --mu-name-lh: 1.9;          /* .mu-name は body の行間を継承している */
  display: flex; align-items: flex-start; gap: 10px; margin-top: 7px;
}
.mu-title .mu-name { margin-top: 0; }
.mu-title .micon {
  margin-top: calc((var(--mu-name-fs) * var(--mu-name-lh) - var(--micon-d, 34px)) / 2);
}
/* 級数の上書きは**必ず基底のあと**に置く。カスタムプロパティは
   「使う側の位置」ではなく「宣言の順番」で決まるので、前に置くと
   基底の 21px に負けて PC の館名が縮む（実測で踏んだ） */
@media (min-width: 1200px) { .mu-title { --mu-name-fs: clamp(24px, 2.1vw, 32px); } }
.mu-body > .mu-title:first-child { margin-top: 0; }

/* ============================================================ ページ内リンク */
/* 同じページの中の移動を滑らかにする（依頼者指示 2026-08-27）。
   **動かすのはブラウザ**。JS で自前にスクロールすると、ハッシュの更新・
   戻る／進む・ハッシュ付きURLでの再読み込み・スクロール中のホイール割り込みを
   全部自分で面倒みることになる。ネイティブなら全部そのまま効く。
   main.js の anchors() は「SPメニューを閉じる」「移動先へフォーカスを移す」だけ。

   feed.html はこの CSS を読まない（縦型プレーヤーで、ページ内リンクも無い）。
   `.tp-feed` は自分の scroll-behavior を持っている。 */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 上端に固定されるものの下に、移動先の見出しが隠れないようにする。
   **すべての id に一律の余白を当てない** ―― 実際にアンカーになる要素だけ。
     ・1199px 以下：章名の柱（.chp）が上端に固定される（トップだけ）
     ・1200px 以上：上端に固定されるものが無いので 0
   しおりの行程（.sh-stop）は行程ナビぶんの余白を pages.css が別に持っている。 */
:root { --anchor-offset: 0px; }
@media (max-width: 1199px) { :root { --anchor-offset: 46px; } }
.sec[id], #main { scroll-margin-top: var(--anchor-offset); }

/* 移動先へフォーカスを移すが、**枠はキーボードのときだけ**出す */
[data-anchor-focus]:focus { outline: none; }
[data-anchor-focus]:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }

/* ============================================================ 節の見出し帯 */
/* 長いスクロールのどこにいるかを、**章扉を立てずに**告げる（依頼者指示 2026-08-27）。
   参照 lipps.co.jp の「上段＝薄い巨大文字のループ／下段＝大型の固定見出し」という
   骨格とモーションだけを借り、色・書体・質感は既存のトークンで組む
   （参照サイトの配色とサンセリフは持ち込まない）。

   ・地は var(--navy) ＋ 既存の和紙。**グラデーション・影・角丸・装飾アイコンは足さない**
   ・上段の反復英字は装飾（丸ごと aria-hidden）。**正式な見出しは下段の h2**
   ・右下の小さな英字も h2 と同じ意味の重複なので aria-hidden
   ・全幅への引き出し（--sb-left）・列の幅（--sb-w）・複製数・移動距離（--sb-shift）・
     所要時間（--sb-dur）は main.js が実測して入れる。
     **JS が動かないときは列の幅に収まった静止した帯**になるだけで壊れない
   ・帯の直後から本文を始める。節の前後に見出し用の大きな余白は足さない */
.secband {
  /* 帯を広げて、字の高さの 6割前後が見えるようにした（依頼者指示 2026-08-27）。
     見切れの大胆さは保ったまま、英字が文字列として読める状態にする。
     帯 ÷ 級数 ≒ .62 になる組み合わせで、どの幅でもこの比を保つ */
  --sb-mq-h: clamp(120px, 9.4vw, 150px);    /* 上段：120〜150px */
  --sb-mq-f: clamp(190px, 15vw, 240px);     /* マーキーの級数：190〜240px */
  --sb-b-h:  clamp(190px, 15vw, 230px);     /* 下段（イントロ）の下限 */
  --sb-par: 10px;                           /* 縦のスクロール連動（±） */
  position: relative;
  /* 画面幅いっぱい。.band::before と同じ calc(50% - 50vw + --stream-shift) では、
     中央のストリームが margin-inline:auto で寄っているぶん左端に届かない
     （.mq2 / .hero-mq と同じ事情なので、同じく実測値を使う） */
  width: 100vw; margin-left: calc(-1 * var(--sb-left, 0px));
  background: var(--navy) var(--washi) repeat; background-size: var(--washi-size);
  /* clip であって hidden ではない。hidden はスクロール容器を作るので、
     中の animation-timeline: view() の基準が変わってしまう */
  overflow: clip;
}

/* --- 上段：マーキー帯 ------------------------------------------------ */
/* 上下に細い生成りの罫線。box-sizing: border-box なので高さに含まれる */
.secband-mq {
  height: var(--sb-mq-h); display: flex; align-items: center; overflow: clip;
  border-top: 1px solid rgba(245, 241, 232, .16);
  border-bottom: 1px solid rgba(245, 241, 232, .16);
}
/* 縦のスクロール連動は**このラッパーだけ**に掛ける。横の無限ループは
   子（.secband-mq-t）が持つので、2つの transform は互いを妨げない。
   高さは動かさないので、レイアウトの再計算も起きない */
.secband-mq-p { will-change: transform; }
.secband-mq-t { display: flex; width: max-content; will-change: transform; }
/* **帯の高さより字を大きくして、上下から大胆に見切れさせる**
   （依頼者指示 2026-08-27）。PC は 80〜100px の帯に 200〜260px の字が通るので、
   見えているのは字の腹だけになる。器（.secband-mq）が clip するので、
   はみ出しはレイアウトにも横スクロールにも影響しない。
   ・clip であって hidden ではない ―― hidden はスクロール容器を作ってしまい、
     中の animation-timeline: view() の基準が変わる（同等の切り取りは効く）
   ・line-height を 1 にして align-items:center で天地を等しく切る */
.secband-mq-t span {
  font-family: var(--en); font-weight: 400; white-space: nowrap;
  font-size: var(--sb-mq-f); line-height: 1;
  letter-spacing: .04em; padding-right: .3em;
  color: var(--ivory); opacity: .09;        /* 目安 8〜10% */
}
/* 継ぎ目のない無限ループ。**移動距離は複製1枚ぶんちょうど**（main.js が実測して
   --sb-shift に入れる）なので、終端の1フレームは開始と画素が一致する。
   linear の infinite なので、減速も停止もジャンプも起きない。
   速度は約 60px/秒（--sb-dur = --sb-shift / 60）。PC と SP で体感を変えない */
@keyframes sb-mq {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--sb-shift, 0px)), 0, 0); }
}
.secband.is-live .secband-mq-t { animation: sb-mq var(--sb-dur, 20s) linear infinite; }
/* 画面外・非表示タブでは止める（main.js が is-paused を付け外しする）。
   play-state なので**止めた位置から再開**する。飛ばない */
.secband.is-paused .secband-mq-t { animation-play-state: paused; }

/* ごく小さな縦のスクロール連動。±10px（SP は ±6px）まで */
@keyframes sb-par {
  from { transform: translate3d(0, var(--sb-par), 0); }
  to   { transform: translate3d(0, calc(-1 * var(--sb-par)), 0); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .secband-mq-p {
      animation: sb-par linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* --- 下段：固定見出し ------------------------------------------------ */
/* 見出しとリード文を**同じネイビーの中**にまとめる（依頼者指示 2026-08-27）。
   別々の要素に見えて関係が切れていたのを、ひとつのイントロにした。
   PC は 左＝見出し＋英字 ／ 右＝リード文 の2カラム。 */
/* 帯の上下が詰まって見えたので、**ネイビーの内側**をゆったり取る
   （依頼者指示 2026-08-27）。アイボリーの空白を増やさずに、
   帯そのものを厚くして節の切り替わりを大きく見せる */
.secband-b { min-height: var(--sb-b-h); display: flex; align-items: center; padding-block: 60px; }
/* 左右の余白は既存のコンテンツ幅にそろえる（列の左端と幅を実測して入れている）。
   右のサイドメニューは .site のグリッドの外側の列なので、この幅なら重ならない */
.secband-in {
  width: var(--sb-w, 100%); margin-left: var(--sb-left, 0px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; column-gap: 40px;
}
.secband-jp {
  font-family: var(--serif); font-weight: 500;
  /* 2カラムにして列が半分になったので、級数は列に合わせて決め直した。
     「スポットを探す」（最長の7文字）が **1行に収まる**上限
     ―― 途中改行を避けるほうを優先した（依頼者指示 2026-08-27 §6） */
  font-size: clamp(34px, 3.4vw, 56px); line-height: 1.18; letter-spacing: .04em;
  color: var(--ivory); text-wrap: balance;
}
/* 左右のレールが立っている幅（1200〜1919px）だけ、中央の列が 80% に絞られる。
   2カラムにしたぶん和文の列はさらに半分になるので、ここだけ級数を落として
   「スポットを探す」を1行に保つ（実測で決めた値） */
@media (min-width: 1200px) and (max-width: 1919px) {
  .secband-jp { font-size: clamp(34px, 3.1vw, 48px); }
}
/* 小さな英字は和文見出しの**すぐ下**（左カラムの中）。
   h2 と同じ意味の重複なので aria-hidden */
.secband-en {
  display: block; margin-top: 10px;
  font-family: var(--en); font-weight: 400; text-transform: uppercase;
  font-size: clamp(13px, 1.05vw, 16px); letter-spacing: .24em; line-height: 1.5;
  color: var(--ivory); opacity: .8;
}
/* リード文。行長は和文 1行 40字前後を上限にする（サイト共通の考え方） */
.secband-lead {
  font-size: 15.5px; line-height: 2; letter-spacing: .02em;
  color: var(--ivory); opacity: .88; max-width: 34em;
}

/* イントロつきの節。**前の節とネイビー帯のあいだに外側の余白を作らない**
   （依頼者指示 2026-08-27）。節の padding-top がそのままアイボリーの空白に
   なっていたので 0 にする。帯の内側の余白（.secband-b の padding）は維持。
   前の節の中身と帯がぶつからないよう、**手前の節の下の余白だけ**を小さく残す
   （下の .sec-cp / .sec-x / .sec-mu / .sec-course を参照）。 */
.sec-band { padding-top: 0; }
/* ネイビー帯の直前に来る節の下余白。**節の切り替わりが分かる程度に開ける**
   （依頼者指示 2026-08-27）。以前の 160px のような大きな空白には戻さない */
.sec-cp { padding-bottom: 56px; }          /* 開催中の企画 → 動画からしおりへ */
/* 「開催中の企画」を隠しているあいだは、その節の下余白（56px）ごと消えて
   KV の操作列がネイビーの帯に貼り付く（デザイン指摘 2026-09-30）。
   隠しているときだけ帯の手前を開ける。**バナーを戻せばこの指定も自動で外れる**
   （[hidden] が付いている node だけに効く隣接セレクタのため）。
   値と切り替えは .sec-x.band の下余白（PC 64px / SP 40px）にそろえた。
   帯の内側ではなく外側を開けるので margin を使う（.sec-band は padding-top: 0）。 */
.sec-cp[hidden] + .sec-x.band { margin-top: 64px; }
.sec-x.band { padding-bottom: 64px; }      /* 動画からしおりへ → 3つの博物館 */
.sec-mu, .sec-course { padding-bottom: 56px; }  /* → モデルコース／スポットを探す */
/* 帯の直後も少しだけ開ける。本文が帯に貼り付いて見えないように */
.secband { margin-bottom: 26px; }
/* 帯の直後に残るのは「すべて見る」だけ（見出しもリードもイントロの中） */
.sec-head-band { margin-top: 26px; margin-bottom: 22px; }

@media (max-width: 1199px) {
  /* SP も同じ考え方で、幅なりに詰める */
  .sec-cp { padding-bottom: 36px; }
  .sec-cp[hidden] + .sec-x.band { margin-top: 40px; }
  .sec-x.band { padding-bottom: 40px; }
  .sec-mu, .sec-course { padding-bottom: 36px; }
  .secband { margin-bottom: 18px; }
}
/* 2カラムを保てなくなる幅から縦積みに切り替える。
   順番は 見出し → 英字 → リード文（依頼者指示 2026-08-27） */
@media (max-width: 900px) {
  .secband-in { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .secband-lead { max-width: none; }
}
@media (max-width: 768px) {
  .secband {
    --sb-mq-h: clamp(64px, 18vw, 76px);     /* 上段：64〜76px */
    --sb-mq-f: clamp(90px, 26vw, 120px);    /* マーキーの級数：90〜120px */
    --sb-b-h:  0px;                         /* 縦積みなので中身の高さに任せる */
    --sb-par: 6px;
  }
  .secband-b { padding-block: 38px; }
  .secband-jp { font-size: clamp(34px, 11vw, 44px); letter-spacing: .02em; }
  .secband-en { margin-top: 8px; font-size: clamp(12px, 3.4vw, 14px); letter-spacing: .2em; }
  .secband-lead { font-size: 15px; line-height: 1.95; }
  .sec-head-band { margin-top: 20px; margin-bottom: 18px; }
}

/* 英語版。大きな見出しがすでに英語なので、右下の小さな英字は重複になる。
   マーキーは 9% の地紋なので残す（日本語版と同じ位置に同じ質感を出す） */
html[lang="en"] .secband-en { display: none; }
html[lang="en"] .secband-jp {
  font-size: clamp(28px, 2.9vw, 46px); letter-spacing: .01em; line-height: 1.24;
}
@media (max-width: 768px) {
  html[lang="en"] .secband-jp { font-size: clamp(24px, 6.4vw, 34px); }
}

@media (prefers-reduced-motion: reduce) {
  /* 横移動も縦パララックスも止める。**文字は静止した状態で見えたまま** */
  .secband-mq-t, .secband-mq-p { animation: none !important; transform: none !important; }
}

/* 左レールの縦組み見出しは sticky でページの最後まで残る（v6 の骨格）。
   ネイビーの見出し帯の上に来ると、ネイビーの文字がそのまま地に沈む（実測で
   1440px のとき 186px ぶん重なる）。**帯に重なった範囲だけを生成りで刷り直す**
   ことで、帯は画面幅いっぱいのまま、見出しも読めるようにする。
   ・元の文字は1pxも動かさない。同じ位置・同じ級数の複製を重ねるだけ
   ・複製は丸ごと aria-hidden（h1 を二重に読ませない）
   ・切り取りの位置は main.js が実測して clip-path に入れる
   ・JS が動かないときは帯が列の幅に収まるので、そもそも重ならない
   ・レールが解体される 1199px 以下では複製を出さない */
.vtext { position: relative; }
/* ロゴも同じ事情。字面がネイビーなので帯の上で沈む。
   暗色地用のロゴを同じ位置・同じ大きさで重ね、帯に重なった範囲だけ出す。
   ロゴ自体は変形も色変えもしない（ブランドガイド §7.3） */
.brand a { position: relative; display: block; }
.brand-logo-rev {
  position: absolute; left: 0; top: 0; pointer-events: none;
  clip-path: inset(100% 0 0 0);
}
@media (max-width: 1199px) { .brand-logo-rev { display: none; } }
.vtext-rev {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 14px;
  clip-path: inset(100% 0 0 0);          /* 既定は完全に隠しておく */
}
.vtext-rev, .vtext-rev * { color: var(--ivory); }
/* 複製で登場アニメーションを再生しない（本体はもう出そろっている） */
.vtext-rev i { animation: none !important; opacity: 1 !important; transform: none !important; }
@media (max-width: 1199px) { .vtext-rev { display: none; } }

/* ============================================================ 区切りのマーキー */
/* ページ内2か所だけ（KV の .hero-mq と合わせて計3か所）。
   ・アウトライン文字にして、主見出しより必ず薄くする
   ・本文を押し下げすぎない高さに抑える
   ・リンクにしない。丸ごと aria-hidden
   ・スクロール連動なので**画面外と非表示タブでは進まない**
   ・reduce では止めて、静止した文字として出す */
/* 画面幅いっぱいを走らせる（依頼者指示 2026-08-26 ④）。
   中央のストリームは左右のレールぶん画面の中心からずれているので、
   calc(50% - 50vw) では左端に届かない。--mq-left は main.js が実測して入れる
   （JS が動かない場合は 0 で、これまでどおり列の幅に収まるだけ） */
.mq2 {
  overflow: clip; padding: 30px 0 26px;
  margin: 6px 0 -6px calc(-1 * var(--mq-left, 0px));
  width: 100vw;
}
.mq2-t { display: flex; width: max-content; will-change: transform; }
.mq2-t span {
  font-family: var(--en); font-weight: 700; white-space: nowrap;
  font-size: clamp(30px, 4.6vw, 66px); letter-spacing: .04em; line-height: 1;
  padding-right: .6em; color: transparent;
  -webkit-text-stroke: 1px rgba(30, 47, 82, .34);
}
/* .mq2-b（テラコッタの縁取り）は使い先が無くなったので削除した（2026-08-27）。
   .mq2 の基底はしおりビューア（pages.css の .mq2-sh）が使い続けている。 */
@keyframes mq2 { from { transform: translate3d(2%, 0, 0); } to { transform: translate3d(-34%, 0, 0); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mq2-t {
      animation: mq2 linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mq2-t { animation: none !important; transform: none !important; }
}
@media (max-width: 560px) {
  .mq2 { padding: 20px 0 18px; }
  .mq2-t span { font-size: 30px; }
}


/* KV の大きさは高さで決めるようにしたので、幅の直接指定はやめた
   （依頼者指示 2026-08-26 ①）。--slide-h だけを画面の高さに追従させる。
   幅で指定していたときは、1500px 以上で高さ 870px になり、
   直下の「開催中の企画」がファーストビューにまったく入らなかった */
/* 幅ごとの直接指定はやめた。高さの式ひとつで全幅をまかなう */

/* ============================================================ Hero：SP */
/* 動画を主役にする（依頼者指示 2026-08-26）。
   左右とも画面の端まで器を広げ、そのぶんカードを大きくする。
   前後のスライドをのぞかせて「めぐる」ことも見せる。 */
@media (max-width: 720px) {
  .site { --hl-w: 108px; }
  .hero-slider-wrap {
    /* 右だけ −20px だったのを左右とも画面端まで。器が広がったぶん札が大きくなる */
    margin-inline: calc(-1 * var(--pad-x));
    --slide-h: clamp(320px, 54vh, 470px);
    /* **% を使わない。**器の内側の padding が --slide-w から決まるので、
       calc(100% - …) にすると循環して、思ったより小さい札になっていた（実測 180px）。
       器の幅は「画面幅 − 縦組みの列 − 列の間」で決まるので、そこから直に出す */
    --slide-w: min(340px, calc(100vw - var(--hl-w) - var(--col-gap) - 44px),
                   calc(var(--slide-h) * 400 / 710));
  }
  /* 中央そろえに戻す。左右に同じだけのぞくので、並びとして読める */
  .hero-slider { gap: 14px; padding-inline: calc(50% - var(--slide-w) / 2); }
  /* 操作の列は本文の幅に戻す */
  .slider-ctl { margin-inline: var(--pad-x); }
  /* 前後の札は沈めて、中央だけを立てる */
  .hero-slide { opacity: .34; transform: scale(.86); transition: opacity .5s var(--e-out-quint), transform .5s var(--e-out-quint); }
  .hero-slide.is-active { opacity: 1; transform: scale(1); }
  .vv-play { --play-d: 64px; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
/* 狭い画面では、KV は縦組みの見出しと横に並ぶので列が狭い（390px で 231px）。
   スライドを固定幅にすると列からはみ出し、**タグと館名の左半分が切れていた**（実測）。
   列に合わせて、左右に 18px ずつだけのぞかせる */
/* 720px 以下は上の「Hero：SP」で決めるので、ここは **721px 以上だけ**に効かせる。
   同じ変数を後ろから上書きしていて、SP の札が大きくならなかった（実測） */
@media (min-width: 721px) and (max-width: 1199px) {
  /* 幅（列に収まること）と高さ（企画がのぞくこと）の両方で頭を打つ */
  .hero-slider-wrap {
    --slide-h: clamp(280px, 46vh, 440px);
    --slide-w: min(340px, calc(100% - 36px), calc(var(--slide-h) * 400 / 710));
  }
}


/* ============================================================ モデルコース：強調 */
/* サイト第二のシグネチャー。前面と背面の差を大きくする。**CTA は必ず前面**に残す。
   写真の端からはみ出させていた所要の英字（.ck-endur）は削除した
   （依頼者指示 2026-08-26）。position:absolute の飾りだったので、
   外しても写真・見出し・本文の位置は動かない。所要は .ck-dur と定義リストに残る */
@media (min-width: 1200px) {
  /* コースごとに写真と情報の比率を変える。3枚が同じ組み方に見えないように */
  .ck-c[data-ck="1"] .ck-card { grid-template-columns: 52% minmax(0, 1fr); }
  .ck-c[data-ck="2"] .ck-card { grid-template-columns: 40% minmax(0, 1fr); }
  .ck-c[data-ck="3"] .ck-card { grid-template-columns: 46% minmax(0, 1fr); }
}
/* ============================================================ ホバーの演出 */
/* fine pointer のときだけ。動きを止めている人には出さない。
   ・**ボタンそのものは傾けない**（押しづらくなるため）。傾けるのは写真と札だけ
   ・カード全体が transform を使っている所（スポットの段差／モデルコースのスタック）は、
     内側の要素にだけ掛ける。JS や既存アニメと transform を奪い合わせない
   ・反転（裏返し）は使わない。必須情報が裏面に隠れる作りにしないため */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* --- スポット。写真だけを動かす（♥ は兄弟なので動かない）。
     **傾け（rotate）はやめた**（依頼者指示 2026-08-26）。
     残すのは、ごく小さな浮き上がりと影だけ */
  .spot-fig {
    transition: transform .45s var(--e-out-quint), box-shadow .45s var(--e-out-quint);
  }
  .spot:hover .spot-fig,
  .spot:focus-within .spot-fig {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 18px 40px rgba(30, 47, 82, .20);
  }
  /* 一言が横から入れ替わって出る */
  .spot-meta { transition: transform .4s var(--e-out-quint), color var(--transition); }
  .spot:hover .spot-meta { transform: translateX(7px); color: var(--terra); }

  /* --- 各館の周辺動画 */
  .nb-fig { transition: transform .45s var(--e-out-quint), box-shadow .45s var(--e-out-quint); }
  .nb:hover .nb-fig, .nb:focus-within .nb-fig {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 16px 34px rgba(30, 47, 82, .22);
  }

  /* --- モデルコース。カードは JS が transform を書くので、影と札だけ動かす */
  .ck-card { transition: box-shadow .4s var(--e-out-quint); }
  .ck-c.is-front:hover .ck-card { box-shadow: 0 32px 66px rgba(30, 47, 82, .24); }

  /* --- 3館の主写真 */
  .mu-visual { transition: box-shadow .45s var(--e-out-quint); }
  .mu-visual:hover { box-shadow: 0 26px 56px rgba(30, 47, 82, .22); }

  /* --- KV の中央 */
  .hero-slide.is-active .vv-frame { transition: box-shadow .45s var(--e-out-quint); }
  .hero-slide.is-active:hover .vv-frame { box-shadow: 0 26px 60px rgba(30, 47, 82, .26); }
}

/* ============================================================ 3館：狭い画面 */
/* PC の縮小コピーにしない（依頼者指示 2026-08-21）。
   写真を画面幅いっぱいまで広げ、情報カードを少しだけ重ねる。
   重なりは1か所だけにして、読む順番を優先する。 */
@media (max-width: 1199px) {
  .mu { --bleed: var(--pad-x); padding: 34px 0 0; row-gap: 0; }
  .mu-visual {
    height: clamp(240px, 52vw, 380px);
    margin-inline: calc(-1 * var(--bleed)); width: calc(100% + var(--bleed) * 2);
    border-radius: 0;
  }
  .mu-visual { border-radius: 0 0 var(--r-panel) var(--r-panel); }
  .mu-body {
    position: relative; z-index: 1; margin-top: -34px;
    background: var(--panel); border-radius: var(--r-panel); padding: 22px 20px;
    box-shadow: 0 14px 34px rgba(30, 47, 82, .12);
  }
  .mu-title { --mu-name-fs: clamp(22px, 5.6vw, 30px); }
  .mu-surprise { font-size: clamp(16px, 4.2vw, 19px); }
  /* 情報カードが 34px かぶるので、再生ボタンとラベルはその上へ逃がす。
     保護面（::after 124px）の内側に収まるので、コントラストは変わらない */
  /* コース名が「池上曽根遺跡と、弥生の／一日」と割れていた（実測）。
     ラベルを上の行へ逃がして、名前に幅をぜんぶ渡す */
  .mu-rep { flex-wrap: wrap; row-gap: 2px; }
  .mu-rep-l { flex: 1 0 100%; }
  .mu-rep-t { text-wrap: balance; }
  /* 尺の札が無くなったので、ここでも送りは下端でよい（依頼者指示 2026-08-27）。
     以前は下に尺の行があったので 92px まで上げていた */
  .mv-ctl { bottom: 14px; }
  /* 逃がした位置まで濃度を届かせる。124px のままだと時間の行で 4.10 まで落ちた（実測） */
  /* 保護面はスライドごとに引くようになったので、当てる先は .mv-a
     （.mu-visual のままにしていたときは 124px のまま効かず、
      ラベルと 01/03 が明るい写真の上で 1.18 まで落ちた） */
  .mv-a::after { height: 172px; }
  /* 番号は写真の上端に少しだけのぞかせる。本文には重ねない */
  .mu-big { top: 2px; left: calc(-1 * var(--bleed) + 8px); font-size: clamp(72px, 20vw, 120px); }
  .mu-near { margin-top: 22px; }
}

/* ============================================================ 3館：SP */
/* 動画スライドを **1:1 の正方形**にする（依頼者指示 2026-08-26）。
   幅は全幅（--bleed で画面の端まで）なので、aspect-ratio だけで正方形になる。
   高さを clamp で持っていたときは 390px 幅で 240px しか無く、
   縦向きに撮る動画の画角が伝わらなかった。

   枚数（01 / 03）と進捗の線は出さない。代わりに **[<][>] を写真の左右の端**に置いて、
   横に送れる（スワイプできる）ことを形で示す。 */
@media (max-width: 720px) {
  /* ① 大きな番号を写真の上にのぞかせるための余白（34px では 32px しか出なかった） */
  .mu { padding-top: 56px; }
  .mu-visual { height: auto; aspect-ratio: 1 / 1; }

  .mv-track, .mv-n { display: none; }
  /* 中央は動画へのリンクなので、当たり判定は矢印だけに戻す
     （器を全幅にすると、そのままでは写真の中央を覆ってしまう） */
  .mv-ctl {
    left: 0; right: 0; top: 50%; bottom: auto; transform: translateY(-50%);
    justify-content: space-between; gap: 0; padding: 0 8px;
    pointer-events: none;
  }
  .mv-b { pointer-events: auto; }
}
@media (max-width: 560px) {
  .mu-body { padding: 20px 16px; }
}


/* ============================================================ 使い方の3ステップ */
/* スクロール連動デモ（PC で 430vh ＋ sticky、4ステップ）をやめ、
   **一度に見わたせる静的なカード**に置き換えた（依頼者指示 2026-08-26）。
   スクロール量に連動する動きは使わない。出るときの軽いフェード（既存の .reveal）と、
   ホバーの控えめな反応だけ。

   CTA（`.hw-go`）は spots.html へのリンク。同じページ内で入れ替えていた
   実操作デモは、まるごと外した（依頼者指示 2026-08-26）。 */
.hw-wrap { margin-top: 30px; }
.hw-wrap[hidden] { display: none; }
.hw-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; align-items: stretch; margin: 0; padding: 0; list-style: none;
}
.hw {
  /* overflow は **.hw-fig 側**に持たせる。ここで切ると、カードの外に置く
     矢印（.hw-ar）が消える（実測で見えていなかった） */
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border-radius: var(--r-panel);
  box-shadow: 0 10px 30px rgba(30, 47, 82, .08);
  transition: box-shadow .28s var(--e-out-quart), transform .28s var(--e-out-quart);
}
/* 流れを示す矢印。カードとカードのあいだ（gap）の中央に置く */
.hw-ar {
  position: absolute; z-index: 2; left: -20px; top: 30%;
  width: 20px; height: 20px; display: grid; place-items: center;
  color: var(--terra); pointer-events: none;
}
.hw-ar svg { width: 20px; height: 20px; }
.hw-fig {
  aspect-ratio: 4 / 3; overflow: hidden; margin: 0;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  background: var(--panel-warm); border-bottom: 1px solid var(--ink-hair);
}
.hw-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hw-b { flex: 1 1 auto; padding: 20px 22px 24px; }
.hw-n { font-family: var(--en); font-size: 12.5px; letter-spacing: .2em; color: var(--terra); }
.hw-t {
  margin-top: 8px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(19px, 1.5vw, 23px); line-height: 1.5; letter-spacing: .04em;
  color: var(--navy); text-wrap: balance;
}
.hw-d { margin-top: 10px; font-size: 14px; line-height: 1.95; color: var(--ink-soft); text-wrap: pretty; }
/* 3枚に割ると 1440 で 244px しかなく、画面の書き出しの中の UI が読めない。
   3館やマーキーと同じ --bleed の式で、列の外へ少しだけ広げる */
@media (min-width: 1200px) {
  .hw-wrap {
    --bleed: clamp(0px, calc((100vw - 16px - var(--pad-x) * 2 - var(--rail-l) - var(--rail-r)
                              - var(--col-gap) * 2 - var(--stream-min)) / 2 + 20px), 88px);
    margin-inline: calc(-1 * var(--bleed)); width: calc(100% + var(--bleed) * 2);
  }
  .hw-list { gap: 16px; }
  .hw-ar { left: -16px; }
}
.hw-cta { margin-top: 30px; display: flex; justify-content: center; }
.hw-go { min-height: 54px; padding: 0 46px; font-size: 15.5px; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hw:hover { box-shadow: 0 20px 44px rgba(30, 47, 82, .14); transform: translateY(-3px); }
}

/* タブレット。3列のままだと1枚が狭く、画像の中の UI が読めない。
   **2列 ＋ 1列**にして、3枚目は中央に置く */
@media (max-width: 1199px) and (min-width: 721px) {
  .hw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .hw:nth-child(3) { grid-column: 1 / -1; max-width: calc(50% - 9px); justify-self: center; }
  /* 3枚目は下の段なので、矢印は下向き（段の変わり目）にする */
  .hw:nth-child(3) .hw-ar { left: 50%; top: -20px; transform: translateX(-50%) rotate(90deg); }
}

/* スマートフォン。縦に積み、矢印は下向き。カードは幅いっぱい */
@media (max-width: 720px) {
  .hw-list { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hw-ar { left: 50%; top: -27px; transform: translateX(-50%) rotate(90deg); }
  .hw-b { padding: 18px 18px 22px; }
  .hw-cta { margin-top: 26px; }
  .hw-go { width: 100%; padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw { transition: none; }
}

/* 再生ボタン（.play）は **tokens.css** にある。
   feed.html は style.css を読まない（Tig Short に合わせた feed.css だけ）ので、
   全ページが読む tokens.css に置いて定義を1つにしてある。
   値の出どころは scripts/tokens.py の PLAY_CSS。 */

/* ============================================================ 開催中の企画：中央寄せと区画の面（2026-10-23・依頼者指示）
   見出しを中央に置き、見出しとバナーをうっすらとした白い面で囲う。
   面は節（.sec-cp）そのものに敷くので HTML は変えていない。
   面の内側の余白を padding で、外側（KV・ネイビーの帯との間）を margin で持つ。
   同日の追加指示で、英字（NOW ON）を和文の右に並べ、面の高さを詰めた。 */
.sec-cp {
  background: rgba(255, 255, 255, .55);
  border-radius: var(--r-panel);
  padding: 22px 32px 28px;
  margin-block: 32px 56px;
}
/* トップの節の見出しは左寄せにする（依頼者指示 2026-10-26。フッター手前の枠 .foot-bn-hd は中央のまま） */
.sec-cp .sec-head { justify-content: flex-start; text-align: left; margin-bottom: 16px; }
/* 英字を和文の右へ。読む順（英字 → 和文）は HTML のまま、見た目だけ入れ替える */
/* 英字（NOW ON）は和文の下端（ベースライン）にそろえる（依頼者指示 2026-10-23。上下の中央から変更） */
.sec-cp .sec-head > div { display: flex; flex-direction: row-reverse; align-items: baseline; justify-content: flex-end; gap: 14px; }   /* row-reverse なので flex-end が左端 */
.sec-cp .sec-en { margin-bottom: 0; }
/* 見出しの拭き取り（.sec-title の title-wipe）もこの節では止める。
   スクロールに合わせた動きは外す指示（2026-10-22）。.reveal だけ外して残っていた */
.sec-cp .sec-title { animation: none; clip-path: none; }
@media (max-width: 1199px) {
  .sec-cp { padding: 18px 20px 22px; margin-block: 24px 36px; }
  .sec-cp .sec-head { align-items: flex-start; margin-bottom: 14px; }
  .sec-cp .sec-head > div { gap: 10px; }
}
/* 英語版は英字を出さない（依頼者指示 2026-10-23）。見出し「What’s on now」と
   英字「Now on」がほぼ同じ意味で、横に並べると重なって見えるため */
html[lang="en"] .sec-cp .sec-en { display: none; }
/* SP・タブレット（900px 以下）は1枚の幅に上限（260px）を切り、中央に置く（依頼者指示 2026-10-23）。
   上限が無いと面いっぱいに広がり、390px で 310×175px、768px で 688×388px と大きすぎた。
   **2枚が横に並ぶ幅なら2列、入らなければ縦積み**（同日の追加指示）。
   列数は auto-fit が面の内側の幅から決めるので、境目の幅を決め打ちしていない */
@media (max-width: 900px) {
  .sec-cp .bn-list.is-pair {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 260px));
    justify-content: center; max-width: none;
  }
}

/* ============================================================ フッターの開催中の企画：トップと同じ組み（2026-10-23・依頼者指示）
   トップの節（.sec-cp）と同じく、見出しを中央に置き、見出しとバナーをうっすらとした白い面で囲う。
   バナーの並びもトップと同じ：PC は2列・最大 720px、900px 以下は1枚最大 260px で
   2枚が入る幅なら2列、入らなければ縦積み。
   見出しの書体と級数はフッターのまま（小さなラベル）。ページ本文より目立たせないため */
.foot-bn {
  max-width: 784px; width: calc(100% - var(--pad-x) * 2);
  margin: 32px auto 0;
  padding: 22px 32px 28px;
  background: rgba(255, 255, 255, .55);
  border-radius: var(--r-panel);
}
/* 面の上の余白（margin-top）がフッターの外へ抜けて、面がフッターの上端に貼り付いていた（実測）。
   フッターを新しい組版の文脈にして、余白を砂色の地の内側に留める */
.foot { display: flow-root; }
/* 見出しもトップの節と同じ組み（依頼者指示 2026-10-23）：明朝の和文の右に英字を並べ、
   下端（ベースライン）でそろえる。読む順（英字 → 和文）は HTML のまま、見た目だけ入れ替える。
   値はトップの .sec-title / .sec-en と同じ */
.foot-bn-hd { display: flex; flex-direction: row-reverse; align-items: baseline; justify-content: center; gap: 14px; margin-bottom: 16px; }
.foot-bn .foot-bn-h {
  font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: .08em;
  color: var(--navy); line-height: 1.3; margin: 0; text-align: center;
}
.foot-bn-en { font-family: var(--en); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--terra); }
/* 英語版は英字を出さない（トップと同じ。「What’s on now」と重なるため） */
html[lang="en"] .foot-bn-en { display: none; }
.foot-bn-l.is-pair { max-width: 720px; margin-inline: auto; }
@media (max-width: 1199px) {
  .foot-bn { padding: 18px 20px 22px; margin-top: 24px; }
  .foot-bn-hd { gap: 10px; margin-bottom: 14px; }
  .foot-bn .foot-bn-h { font-size: 24px; }
}
@media (max-width: 900px) {
  /* 面の左右の余白をトップの節と同じ 20px にそろえる。
     --pad-x のままだと 320px で1枚 200px（トップは 240px）になり、2列に切り替わる幅もずれた */
  .foot-bn { width: calc(100% - 40px); }
  .foot-bn-l.is-pair {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 260px));
    gap: 14px; justify-content: center; max-width: none;
  }
}
/* フッターは一回り小さく（依頼者指示 2026-10-23）。トップと同じ組みのまま、
   面・見出し・バナー・余白をおよそ 8 割に縮める。ページ本文より前に出ないようにするため */
.foot-bn { max-width: 624px; padding: 18px 24px 22px; }
.foot-bn-l.is-pair { max-width: 576px; gap: 12px; }
.foot-bn-hd { gap: 12px; margin-bottom: 12px; }
.foot-bn .foot-bn-h { font-size: 24px; }
@media (max-width: 1199px) {
  .foot-bn { padding: 14px 16px 18px; }
  .foot-bn-hd { gap: 8px; margin-bottom: 10px; }
  .foot-bn .foot-bn-h { font-size: 20px; }
}
@media (max-width: 900px) {
  .foot-bn-l.is-pair { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 210px)); gap: 12px; }
}
/* 縦積みになる幅（555px 以下）では、面も中身に合わせて細くする。
   面だけ画面幅いっぱいに残ると、バナーを縮めても小さく見えなかった */
@media (max-width: 555px) {   /* 2列に並ぶのは 556px から（実測。SP のバナーを 250px にした 2026-10-23 以降） */
  .foot-bn { max-width: 280px; }
}
/* バナー枠をフッターの手前（ページの地の上）へ移した（依頼者指示 2026-10-23）。
   上下の余白を面の外側に持つ。フッターの中ではなくなったので .foot の flow-root は不要だが、害はないので残す */
.foot-bn { margin: 8px auto 48px; }
@media (max-width: 1199px) { .foot-bn { margin: 0 auto 32px; } }
/* バナー枠を本文の列（main.stream）の最後に置き、PC でも SP でも、上のスポットなどの本文と
   同じ幅・同じ位置にそろえる（依頼者指示 2026-10-23）。幅は列が決めるので式を書き写さない
   （スポット一覧は列の幅がほかのページより広い）。
   .site の下余白（100px／40px）がフッターとのあいだになっていたので、その分を面の上に移す */
.site:has(.stream > .foot-bn) { padding-bottom: 48px; }
.stream:has(> .foot-bn) { padding-bottom: 0; }   /* 列自身の下余白（40px）が足されていた */
.stream > .foot-bn { width: auto; max-width: none; margin: 108px 0 0; }
@media (max-width: 1199px) {
  .site:has(.stream > .foot-bn) { padding-bottom: 32px; }
  .stream > .foot-bn { margin-top: 40px; }
}
@media (max-width: 555px) {
  .stream > .foot-bn { max-width: 280px; margin-inline: auto; }
}
/* フッター手前のバナー枠は面（背景）を敷かない（依頼者指示 2026-10-23）。
   面が無くなると内側の余白は空白にしかならないので外し、上下の余白を下（フッターとのあいだ）の値にそろえる。
   上＝面の margin-top、下＝.site の下余白。PC 48px／SP 32px */
.stream > .foot-bn { background: none; border-radius: 0; padding: 0; margin-top: 48px; }
@media (max-width: 1199px) { .stream > .foot-bn { margin-top: 32px; } }
/* 上の余白を「見えている中身」から測っても下と同じにするため、真上の節の下余白を外す。
   地の色を持たない節（.sec と空の状態）だけ。白い面を持つしおり（.sh）は面の内側の余白なので触らない */
.stream > .sec:not(.band):has(+ .foot-bn),   /* 帯（.band）の節は下余白が帯の内側なので外さない（依頼者指摘 2026-10-23） */
.stream > .sh-empty:has(~ .foot-bn) { padding-bottom: 0; }   /* しおりはアイコンの svg がすぐ後ろに入るので ~ で取る */
/* バナー同士の間を少し広げる（依頼者指示 2026-10-23）。横に並ぶときも縦に積むときも同じ値 */
.sec-cp .bn-list.is-pair { gap: 24px; }
.foot-bn-l.is-pair { gap: 20px; }
@media (max-width: 900px) {
  .sec-cp .bn-list.is-pair { gap: 20px; }
  .foot-bn-l.is-pair { gap: 16px; }
}
/* SP のフッター手前のバナーを少しだけ大きく（依頼者指示 2026-10-23）。1枚 210 → 250px */
@media (max-width: 900px) {
  .foot-bn-l.is-pair { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 250px)); }
}