/* ============================================================
   field-op.css — Field Operation 001「Sakay Ta」キャンペーン
   Path: /css/field-op.css
   Version: 2026-10-23-v1

   ⚠⚠ これは期間限定キャンペーンのための一時ファイルである。
      終了時はファイルごと削除する。削除手順は
      /docs/campaign-cleanup-guide.md を正とする。
      CAMPAIGN:FIELD-OP-001 — このファイル全体が削除対象

   【方針】
   - style.css / home.css / open-case.css には一切触れない。
     新しいデザインシステムも作らない。
   - クラスは .fo- 接頭辞でこのファイルに閉じる
     （/work/ の wk- 、melvin-dossier の md- と同じ方針）。
   - 色・書体は既存サイトの値をそのまま再掲する。home.css の
     トークンは .hp2 スコープなので /sakay/ では使えない。
     そのため同じ値を .fo-band / .fo-root に自前で持たせ、
     index.html と /sakay/ の両方で同じ見た目になるようにしている。
   - worldview の「Vintage Noir Investigation Archive」を崩さない。
     親しみは配色ではなく Bisaya の文言で出す。
   ============================================================ */

/* ── トークン（home.css の値をそのまま再掲）────────────────── */
.fo-band,
.fo-root {
  --fo-accent:     #c9a84c;
  --fo-accent-lt:  #e3c979;
  --fo-live:       #d4543f;
  --fo-bg:         #080806;
  --fo-bg-alt:     #0d0c09;
  --fo-bg-card:    #121110;
  --fo-text:       rgb(240 236 228);
  --fo-text-soft:  rgba(240, 236, 228, 0.74);
  --fo-text-faint: rgba(240, 236, 228, 0.46);
  --fo-rule:       rgba(240, 236, 228, 0.12);
  --fo-rule-gold:  rgba(201, 168, 76, 0.28);
  --fo-ok:         #7faa6a;
  --fo-pad-x:      clamp(22px, 5vw, 56px);
  --fo-max:        1180px;
}

.fo-band *, .fo-band *::before, .fo-band *::after,
.fo-root *, .fo-root *::before, .fo-root *::after { box-sizing: border-box; }

.fo-band :focus-visible,
.fo-root :focus-visible {
  outline: 2px solid var(--fo-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ════════════════════════════════════════════════════════════
   1 · HOME BAND — index.html の HERO 直下に置く帯
   セクションではなく帯にしてあるのは、02 About の前に
   「第2のヒーロー」を作らないため。CTA は /sakay/ の1本だけ。
   ════════════════════════════════════════════════════════════ */
.fo-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  background: var(--fo-bg-alt);
  border-top: 1px solid var(--fo-rule-gold);
  border-bottom: 1px solid var(--fo-rule-gold);
  padding: 38px var(--fo-pad-x);
  /* 画像を大きく見せるために縦を取る。文字の量ではなく
     「画像がどれだけ入るか」で高さを決めている。 */
  min-height: 340px;
  color: var(--fo-text);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  overflow: hidden;
}

/* 背景のバナー。狭い画面では縦（720x1280）、760px 以上では
   横（1552x656）を使う。横長を狭い画面に cover で入れると
   ジプニーと人物が左右に切れて何の画像か分からなくなる。
   ::before が画像、::after が文字を読ませるための暗幕。
   どちらも z-index:-1 で本文の下に置く（.fo-band 側で
   isolation:isolate しているので、他セクションに影響しない）。 */
/* ── 背景のバナー ──────────────────────────────────────────
   切り出し位置は現物の座標から逆算している。
   横バナー(1552x656): 匠の顔 y 14〜44% / 匠 x 68〜90%
   縦バナー(720x1280): 匠の顔 y 34〜47% / ジプニー y 47〜68%

   狭い画面 … 縦バナー。帯(390x340)を cover すると可視域は
     y 22〜73% になり、顔とジプニーが両方入る。
     横バナーを使うと顔が枠の右端に寄って切れる。
   広い画面 … 横バナー。幅基準の cover なので横は全部出る。
     高さ540pxなら可視域 y 3〜92%＝ほぼ画像全体。
     以前は高さ261px・pos58%で可視域が y 33〜76% しかなく、
     顔(14〜44%)がフレームの上に消えていた。 */
.fo-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('/img/sakay-banner-tall.jpg');
  background-size: cover;
  background-position: 50% 44%;
}

@media (min-width: 760px) {
  .fo-band {
    /* 1440px で約540px。画像のほぼ全体が入る高さ。 */
    min-height: clamp(380px, 38vw, 540px);
    padding-top: 46px;
    padding-bottom: 46px;
  }
  .fo-band::before {
    background-image: url('/img/sakay-banner-wide.jpg');
    /* 匠をフレームの中央寄りに出すため、左を少しだけ切る。
       size 117.6%（= 1/0.85）＋ position-x 100% で、可視域は
       画像の x 15〜100%。匠はフレームの 79% → 75% の位置へ動く。
       これ以上中央へ寄せるには左を 40% 切る必要があり、
       夕陽とジプニーが画面から消えるのでここで止めている。 */
    background-size: 117.6% auto;
    background-position: 100% 26%;
  }
}

.fo-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 左に文字が乗るので左を濃く。右は夕景を残す。 */
  background:
    linear-gradient(to right,
      rgba(8, 8, 6, 0.93) 0%,
      rgba(8, 8, 6, 0.86) 42%,
      rgba(8, 8, 6, 0.58) 78%,
      rgba(8, 8, 6, 0.45) 100%);
}

@media (min-width: 760px) {
  .fo-band::after {
    background:
      linear-gradient(to right,
        rgba(8, 8, 6, 0.92) 0%,
        rgba(8, 8, 6, 0.80) 46%,
        rgba(8, 8, 6, 0.42) 76%,
        rgba(8, 8, 6, 0.30) 100%);
  }
}

.fo-band-inner {
  position: relative;
  max-width: var(--fo-max);
  margin: 0 auto;
}

.fo-band-tag,
.fo-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fo-text-faint);
  margin-bottom: 12px;
}

/* 進行中を示す赤い点。home.css の --hp2-live と同じ色を使い、
   新しい「ステータス色」を発明しない。 */
.fo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fo-live);
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(212, 84, 63, 0.55);
  animation: fo-pulse 2.4s ease-out infinite;
}
@keyframes fo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 84, 63, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(212, 84, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 84, 63, 0); }
}
/* 動きを嫌う設定の端末では点滅させない */
@media (prefers-reduced-motion: reduce) {
  .fo-dot { animation: none; }
}

.fo-band-h {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.32rem, 5.4vw, 1.9rem);
  line-height: 1.25;
  color: var(--fo-text);
}
.fo-band-h em {
  font-style: italic;
  color: var(--fo-accent);
}

.fo-band-lede {
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--fo-text-soft);
  max-width: 54ch;
}

.fo-band-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 24px;
  background: var(--fo-accent);
  color: #0d0c09 !important;
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--fo-accent);
  transition: background 0.25s ease, color 0.25s ease;
}
.fo-band-cta:hover,
.fo-band-cta:focus-visible {
  background: var(--fo-accent-lt);
  color: #0d0c09 !important;
}

/* ════════════════════════════════════════════════════════════
   1.5 · BILINGUAL LAYER（/sakay/ 専用）
   ─────────────────────────────────────────────────────────────
   /work/ と同じ考え方。英語版と日本語版を同一DOMに置き、
   <html data-sk-lang> でどちらを見せるかだけを切り替える。

   display を none/block ではなく none/revert で戻しているのは、
   span と div で本来の display が違うため（/work/ の wk-en /
   wk-ja と同じ理由）。block で戻すと文中の span が改行する。
   ════════════════════════════════════════════════════════════ */
.sk-ja { display: none; }
html[data-sk-lang="ja"] .sk-en { display: none; }
html[data-sk-lang="ja"] .sk-ja { display: revert; }

/* 日本語は同じ級数だと詰まって見えるので、行間だけ広げる。
   書体はサイト共通の指定に任せ、ここで新しい書体を持ち込まない。 */
html[data-sk-lang="ja"] .fo-hero-lede,
html[data-sk-lang="ja"] .fo-bridge-p,
html[data-sk-lang="ja"] .fo-note { line-height: 1.85; }
html[data-sk-lang="ja"] .fo-hero-sub { line-height: 1.5; }

/* ── 言語切り替えボタン ─────────────────────────────────── */
.sk-langbar {
  display: inline-flex;
  margin: 0 0 20px;
  border: 1px solid var(--fo-rule);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(10, 18, 24, 0.55);
  backdrop-filter: blur(4px);
}
.sk-lang-btn {
  min-height: 36px;
  padding: 8px 16px;
  background: none;
  border: 0;
  border-left: 1px solid var(--fo-rule);
  color: var(--fo-text-faint);
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.sk-lang-btn:first-child { border-left: 0; }
.sk-lang-btn[lang="ja"] { letter-spacing: 0.08em; text-transform: none; }
.sk-lang-btn:hover { color: var(--fo-text); }
.sk-lang-btn[aria-pressed="true"] {
  background: rgba(242, 165, 65, 0.14);
  color: var(--fo-accent);
}

/* ════════════════════════════════════════════════════════════
   2 · /sakay/ PAGE SHELL
   ─────────────────────────────────────────────────────────────
   【このページだけ配色を変えている】
   サイト全体は「Vintage Noir Investigation Archive」（深い
   チャコール＋金）だが、この1ページだけは依頼により
   "冒険（expedition）" に寄せている。バナーの夕景に合わせて
   海の藍 × 夕陽のアンバーを使う。
   変えているのは .fo-root 配下のトークンだけで、トップページの
   帯（.fo-band）はサイト共通の金／チャコールのまま。
   style.css / home.css も触っていない。
   ════════════════════════════════════════════════════════════ */
.fo-root {
  /* ── 冒険テイストのパレット（このページ限定） ── */
  --fo-accent:     #f2a541;   /* 夕陽のアンバー */
  --fo-accent-lt:  #ffc879;
  --fo-sea:        #4fb3a5;   /* 海のターコイズ。小さなアクセントだけに使う */
  --fo-bg:         #0a1218;   /* 夜明け前の藍。真っ黒にはしない */
  --fo-bg-alt:     #0e1920;
  --fo-bg-card:    #12212a;
  --fo-text:       rgb(243 238 228);
  --fo-text-soft:  rgba(243, 238, 228, 0.78);
  --fo-text-faint: rgba(243, 238, 228, 0.52);
  --fo-rule:       rgba(243, 238, 228, 0.14);
  --fo-rule-gold:  rgba(242, 165, 65, 0.34);

  background: var(--fo-bg);
  color: var(--fo-text);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  /* .site-nav は position:fixed / height:56px。その分をここで逃がす
     （found.css が .fd-section-label--waiting でやっているのと同じ事情）。
     .fo-hero 側ではなくルートに持たせているのは、下の
     @media (min-width:760px) でヒーローの padding を上書きしても
     ナビ分のクリアランスが消えないようにするため。 */
  padding-top: 56px;
  /* single-color の黒板ではなく、バナーの夕景から夜へ落ちていく面にする。
     fixed にしないのは、スクロール中に背景だけ止まって見えるのを避けるため。 */
  background-image:
    radial-gradient(1200px 520px at 50% 0%, rgba(242, 165, 65, 0.13) 0%, rgba(242, 165, 65, 0) 70%),
    linear-gradient(to bottom, #0d1b22 0%, #0a1218 42%, #080f14 100%);
  background-repeat: no-repeat;
}

/* バナーを敷くときは上の逃がしを画像側に任せる（ナビは画像に重ねる） */
.fo-root--banner { padding-top: 0; }

/* sticky CTA はページ下部に固定されるので、その分だけ最後に
   逃がしを作る。共通フッターは <main> の外にあるため、
   .fo-root ではなく body（.sk-page）側に持たせる。
   760px 以上では sticky を出していないので余白も要らない。 */
@media (max-width: 759px) {
  .sk-page { padding-bottom: 86px; }
}

.fo-root a { color: var(--fo-accent); }

/* 共通の内側幅 */
.fo-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--fo-pad-x);
}

/* アンカー送り。nav.js のナビが position:fixed / 56px のため、
   スクロール先が隠れないように全アンカーへ送りを入れる。 */
.fo-root [id] { scroll-margin-top: 72px; }

/* ── BANNER（ページ先頭のヘッダー画像）────────────────────
   高さを vh で切るのは、画像の縦横比そのままだと縦画像が
   画面を丸ごと1枚埋めてしまい、3枚のカードが2スクロール先に
   行ってしまうため。上端はナビ用、下端はページへの繋ぎで
   それぞれグラデーションを重ねる。 */
.fo-banner {
  position: relative;
  width: 100%;
  /* 縦を広く取る。狭くすると cover の切り出し幅が足りず、
     匠の顔が枠の外に出てしまう（縦バナーなら 340px 以上で
     顔 y34〜47% とジプニー y47〜68% が両方入る）。 */
  height: clamp(300px, 50vh, 520px);
  overflow: hidden;
  background: #0d1b22;
}
.fo-banner picture,
.fo-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 縦バナー(720x1280)。390x396 の枠で可視域 y 19〜76%
     ＝ 顔もジプニーも入る位置。 */
  object-position: 50% 44%;
}
.fo-banner-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* 上: 固定ナビの文字を読ませる */
    linear-gradient(to bottom, rgba(6, 12, 16, 0.78) 0px, rgba(6, 12, 16, 0) 92px),
    /* 下: ページの地色へ溶かす */
    linear-gradient(to top, #0d1b22 0%, rgba(13, 27, 34, 0.72) 12%, rgba(13, 27, 34, 0) 34%);
}

/* ── HERO ────────────────────────────────────────────────── */
.fo-hero {
  padding: 18px 0 4px;
}

/* ファーストビューに3枚のカードを入れるため、ヒーローは詰める。
   リールから来た人はもうジプニーを見ているので、ここで大きく
   見せ直す必要がない（写真は下に短冊で置く）。 */
.fo-hero-h {
  margin: 0 0 10px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 7.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.fo-hero-h em {
  display: block;
  font-style: italic;
  color: var(--fo-accent);
}

/* H1 直下のサブタイトル。見出しの一部だが、1行に収めるために
   別要素にして本文サイズまで落としている。 */
.fo-hero-sub {
  margin: 0 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 4.6vw, 1.45rem);
  line-height: 1.3;
  color: var(--fo-accent);
}

.fo-hero-lede {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fo-text-soft);
  max-width: 44ch;
}
.fo-hero-lede b {
  color: var(--fo-text);
  font-weight: 500;
}

/* 締めの1行。「この企画は何をするものか」を最後に一言で置く。
   ゴールドはここと subtitle・ラベル・リンクだけに使い、
   本文には使わない（希少性を保つ）。 */
.fo-hero-close {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--fo-rule-gold);
  max-width: 44ch;
  font-family: 'Space Mono', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.17em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--fo-accent);
}
/* 日本語は大文字化も字間も効かないので、素の組みに戻す */
html[data-sk-lang="ja"] .fo-hero-close {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.98rem;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* ── 冒険 → 参加 のつなぎ ───────────────────────────────── */
.fo-bridge {
  margin: 0 0 26px;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--fo-rule-gold);
}
.fo-bridge .fo-eyebrow { margin-bottom: 8px; }
.fo-bridge-p {
  margin: 0;
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--fo-text-soft);
}

.fo-hero-media {
  margin: 0 0 4px;
  border: 1px solid var(--fo-rule);
}
.fo-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  /* モバイルは短冊。16:9 だと画面の1/4を食って、
     3枚のカードがファーストビューから押し出される。 */
  aspect-ratio: 5 / 2;
  object-fit: cover;
}
.fo-hero-cap {
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fo-text-faint);
  padding: 8px 2px 0;
}

/* ── 進捗の事実表示（数値は JS が入れる。無ければ "—" のまま）── */
.fo-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 14px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid var(--fo-rule);
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fo-text-faint);
}
.fo-facts b { color: var(--fo-sea); font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   2.5 · THE RECORD SO FAR — 探索記録
   ─────────────────────────────────────────────────────────────
   新しいデザインシステムは作らない。カードは下のピッカーと
   同じ面（--fo-bg-card）と罫線を使い、「同じ資料集の別ページ」
   に見えるようにしている。ゴールドはラベルとリンクだけ。
   ════════════════════════════════════════════════════════════ */
.fo-rec {
  padding: 34px 0 10px;
}

.fo-rec-h {
  margin: 0 0 10px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.45rem, 6vw, 2.1rem);
  line-height: 1.2;
}

/* 件数の1行。数字だけゴールドで立てる。 */
.fo-rec-lede {
  margin: 0 0 26px;
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fo-text-faint);
}
.fo-rec-lede b { color: var(--fo-accent); font-weight: 700; }
html[data-sk-lang="ja"] .fo-rec-lede {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: none;
}

.fo-rec-block { margin: 0 0 30px; }

.fo-rec-label {
  margin: 0 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--fo-rule);
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fo-accent);
}
html[data-sk-lang="ja"] .fo-rec-label { letter-spacing: 0.1em; }

/* ── 町の一覧 ─────────────────────────────────────────────
   地図は作らない（/quests/ に本物の Quest Map があり、
   ここで別の地図を持つと二重管理になる）。件数だけ出す。 */
.fo-towns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fo-town {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 12px;
  background: var(--fo-bg-card);
  border: 1px solid var(--fo-rule);
  border-radius: 3px;
}
.fo-town-n {
  font-size: 0.84rem;
  color: var(--fo-text);
}
.fo-town-c {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  color: var(--fo-accent);
}

/* ── 記録カード ──────────────────────────────────────────── */
.fo-rec-list {
  display: grid;
  gap: 10px;
}
.fo-rec-card {
  padding: 16px 18px;
  background: var(--fo-bg-card);
  border: 1px solid var(--fo-rule);
  border-radius: 3px;
}
/* 未解決はゴールドの縦罫で「開いているファイル」を示す */
.fo-rec-card--open {
  border-left: 2px solid var(--fo-rule-gold);
}

.fo-rec-meta {
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fo-text-faint);
}
.fo-rec-status { color: var(--fo-live); }

.fo-rec-t {
  margin: 8px 0 10px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--fo-text);
}

.fo-rec-q,
.fo-rec-d,
.fo-rec-s {
  margin: 0 0 9px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--fo-text-soft);
}
.fo-rec-q { color: var(--fo-text-faint); }
.fo-rec-s { margin-bottom: 10px; }

/* 「問い」「分かったこと」の小見出し。行頭に置く。 */
.fo-rec-tag {
  display: block;
  margin-bottom: 3px;
  font-family: 'Space Mono', monospace;
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fo-accent);
  opacity: 0.85;
}
html[data-sk-lang="ja"] .fo-rec-tag { letter-spacing: 0.1em; }

.fo-rec-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fo-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.fo-rec-link:hover { border-bottom-color: var(--fo-rule-gold); }
html[data-sk-lang="ja"] .fo-rec-link { letter-spacing: 0.08em; text-transform: none; }

.fo-rec-note {
  margin: 0;
  font-size: 0.74rem;
  color: var(--fo-text-faint);
}
.fo-rec-note:empty { display: none; }

@media (min-width: 760px) {
  .fo-rec { padding: 48px 0 16px; }
  /* 「分かったこと」は横並び。未解決は1件ずつ読ませたいので
     2列までに留める。 */
  .fo-rec-list { grid-template-columns: repeat(3, 1fr); }
  .fo-rec-list--open { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   3 · PICKER — 3つのカード。これが実質のファーストビュー下端
   ════════════════════════════════════════════════════════════ */
.fo-pick {
  padding: 22px 0 8px;
}

.fo-pick-h {
  margin: 0 0 5px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 5.4vw, 2rem);
  line-height: 1.25;
}
.fo-pick-sub {
  margin: 0 0 14px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--fo-text-faint);
}

/* ルートの番号を振るためのカウンタ。番号は CSS 側で持つので
   field-op.js の生成HTMLには手を入れていない。 */
.fo-cards {
  display: grid;
  gap: 10px;
  counter-reset: fo-stop;
}
.fo-cardwrap {
  counter-increment: fo-stop;
  position: relative;
}

/* 停留所どうしを繋ぐ破線。地図のルートに見せるための1本。
   最後の1枚からは下に伸ばさない。 */
.fo-cardwrap::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: -10px;
  width: 0;
  border-left: 1px dashed rgba(242, 165, 65, 0.3);
  pointer-events: none;
}
.fo-cardwrap:last-child::before { display: none; }

/* カード自体がボタン。ラジオボタンは指で押しにくいので使わない。 */
.fo-card {
  display: block;
  width: 100%;
  min-height: 76px;
  text-align: left;
  /* 左は停留所マーカーの分だけ空ける */
  padding: 15px 46px 15px 52px;
  background: var(--fo-bg-card);
  border: 1px solid var(--fo-rule);
  border-radius: 3px;
  color: var(--fo-text);
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.fo-card:hover {
  border-color: var(--fo-rule-gold);
  background: #16272f;
}
.fo-card:active { transform: translateY(1px); }

/* 停留所マーカー（01 / 02 / 03） */
.fo-card::before {
  content: counter(fo-stop, decimal-leading-zero);
  position: absolute;
  left: 10px;
  top: 16px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(242, 165, 65, 0.5);
  background: #0a1218;
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  color: var(--fo-accent);
  transition: background 0.2s ease, color 0.2s ease;
}
.fo-card[aria-expanded="true"]::before {
  background: var(--fo-accent);
  color: #0a1218;
  border-color: var(--fo-accent);
}

.fo-card-ico {
  font-size: 1.1rem;
  line-height: 1;
  margin-right: 9px;
}
/* 見出しと説明はどちらも <span>。block にしないと1行に流れて
   「YOUR TOWN Hidden places, food, and...」と続いてしまう。 */
.fo-card-t {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fo-text);
}
.fo-card-d {
  display: block;
  margin: 7px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--fo-text-faint);
}

/* 右端の「+ / −」。選択状態が一目で分かるようにする */
.fo-card::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  font-family: 'Space Mono', monospace;
  font-size: 1.1rem;
  color: var(--fo-text-faint);
  transition: color 0.2s ease;
}
.fo-card[aria-expanded="true"] {
  background: #16272f;
  border-color: var(--fo-accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.fo-card[aria-expanded="true"]::after {
  content: '\2212'; /* − */
  color: var(--fo-accent);
}
.fo-card[aria-expanded="true"] .fo-card-t { color: var(--fo-accent); }

/* ════════════════════════════════════════════════════════════
   4 · FORM — カードの直下にインライン展開する
   モーダルを使わないのは、低速回線で「開いたのに中身が白い」
   状態と、iOS の履歴 / スクロールロック事故を避けるため。
   ════════════════════════════════════════════════════════════ */
.fo-form {
  border: 1px solid var(--fo-accent);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  background: #16272f;
  padding: 20px 18px 22px;
  margin: -1px 0 0;
}
/* フォームが開いている枠からは破線を伸ばさない（線が本文を貫く） */
.fo-cardwrap:has(.fo-card[aria-expanded="true"])::before { display: none; }

.fo-field { margin: 0 0 16px; }
.fo-field:last-of-type { margin-bottom: 0; }

.fo-label {
  display: block;
  margin: 0 0 7px;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fo-text-faint);
}
.fo-label .fo-opt {
  color: rgba(240, 236, 228, 0.3);
  letter-spacing: 0.1em;
}

.fo-input,
.fo-textarea {
  display: block;
  width: 100%;
  padding: 13px 14px;
  background: #0a1218;
  border: 1px solid var(--fo-rule);
  color: var(--fo-text);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;     /* 16px未満にすると iOS Safari が勝手にズームする */
  font-weight: 300;
  line-height: 1.5;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.fo-input:focus,
.fo-textarea:focus {
  border-color: var(--fo-accent);
  outline: none;
}
.fo-input::placeholder,
.fo-textarea::placeholder { color: rgba(240, 236, 228, 0.28); }

.fo-textarea {
  min-height: 104px;
  resize: vertical;
}

/* From → To の横並び */
.fo-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 8px;
}
.fo-row-arrow {
  padding-bottom: 13px;
  font-family: 'Space Mono', monospace;
  color: var(--fo-text-faint);
}

/* ── 写真 ──────────────────────────────────────────────── */
.fo-photo-zone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: #0a1218;
  border: 1px dashed var(--fo-rule);
  cursor: pointer;
}
.fo-photo-zone:hover { border-color: var(--fo-rule-gold); }
.fo-photo-zone input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.fo-photo-ico { font-size: 1.1rem; }
.fo-photo-txt {
  font-size: 0.84rem;
  color: var(--fo-text-faint);
  line-height: 1.45;
}
.fo-photo-thumb {
  width: 46px; height: 46px;
  object-fit: cover;
  border: 1px solid var(--fo-rule-gold);
  flex: 0 0 auto;
}

/* ── 任意情報の折りたたみ ───────────────────────────────── */
.fo-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin: 2px 0 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--fo-accent);
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.fo-more-btn::after { content: '\2192'; }
.fo-more-btn[aria-expanded="true"]::after { content: '\2191'; }

.fo-more-body {
  margin: 14px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--fo-rule);
}

/* honeypot — 目には見えないがボットは埋める。
   display:none だと一部ボットが無視するので画面外に置く。 */
.fo-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ── 送信ボタン ────────────────────────────────────────── */
.fo-submit {
  display: block;
  width: 100%;
  min-height: 54px;
  margin: 20px 0 0;
  padding: 16px 20px;
  background: var(--fo-accent);
  border: 1px solid var(--fo-accent);
  border-radius: 3px;
  color: #0a1218;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}
.fo-submit:hover:not(:disabled) { background: var(--fo-accent-lt); }
.fo-submit:disabled {
  opacity: 0.55;
  cursor: progress;
}

.fo-note {
  margin: 12px 0 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--fo-text-faint);
}

/* ── 送信結果 ──────────────────────────────────────────── */
.fo-result {
  margin: 16px 0 0;
  padding: 15px 16px;
  border: 1px solid var(--fo-rule);
  background: #0a1218;
  font-size: 0.88rem;
  line-height: 1.6;
}
.fo-result--sent   { border-color: rgba(127, 170, 106, 0.5); }
.fo-result--queued { border-color: var(--fo-rule-gold); }
.fo-result--error  { border-color: rgba(212, 84, 63, 0.55); }
.fo-result-t {
  display: block;
  margin-bottom: 5px;
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.fo-result--sent   .fo-result-t { color: var(--fo-ok); }
.fo-result--queued .fo-result-t { color: var(--fo-accent); }
.fo-result--error  .fo-result-t { color: var(--fo-live); }
.fo-result p { margin: 0; color: var(--fo-text-soft); }

/* 入力エラー（1件だけ、本文が空のとき） */
.fo-err {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--fo-live);
}

/* ════════════════════════════════════════════════════════════
   5 · STICKY CTA — /sakay/ のみ。1画面スクロール後に出す
   トップページには置かない（.hp2-preview-flag と
   multilingual.css の固定要素と重なるため）。
   ════════════════════════════════════════════════════════════ */
.fo-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  display: flex;
  justify-content: center;
  padding: 10px 14px;
  /* iOS のホームバー / Safari ツールバーに被らせない */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 15, 20, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--fo-rule-gold);
  transform: translateY(110%);
  transition: transform 0.28s ease;
}
.fo-sticky.is-on { transform: translateY(0); }

.fo-sticky-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  min-height: 50px;
  background: var(--fo-accent);
  border: 0;
  border-radius: 3px;
  color: #0a1218;
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

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

/* ════════════════════════════════════════════════════════════
   7 · 広い画面
   モバイル9割の想定なので、デスクトップは「崩れない」ことだけ
   担保する。レイアウトを別設計にはしない。
   ════════════════════════════════════════════════════════════ */
@media (min-width: 760px) {
  .fo-band { padding: 36px var(--fo-pad-x); }
  .fo-hero { padding: 40px 0 32px; }
  .fo-cards { gap: 12px; }
  .fo-hero-media img { aspect-ratio: 16 / 9; }
  /* 横バナー(1552x656)。1440px 幅で高さ540pxなら可視域 y 3〜92%
     ＝ 画像のほぼ全体。顔(14〜44%)が余裕を持って入る。 */
  .fo-banner { height: clamp(360px, 38vw, 560px); }
  .fo-banner img { object-position: 50% 26%; }
  .fo-form { padding: 24px 22px 26px; }
  /* 広い画面では sticky は不要（CTA が常に見えている） */
  .fo-sticky { display: none; }
}