/* components.css - 再利用部品（btn / FAQ item / LINE float / back-to-top） / 抽出元: トップページ/assets/css/style.css */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BUTTONS ━━ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ボタン基底：透明スケルトン
   ─ 全 .btn 系ボタンに「光源を意識した」磨りガラス質感
   ─ 角丸 8px / blur(12px) / 左上ハイライト（inset 1px 1px）
   ─ ブランド色（緑・金等）はこの基底の上に透過色として重ねる
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .8rem; letter-spacing: .12em;
  padding: 14px 24px;
  min-height: 44px;
  min-width: 44px;
  transition:
    transform var(--t),
    background var(--t),
    border-color var(--t),
    box-shadow var(--t),
    color var(--t);
  white-space: nowrap;
  cursor: pointer; gap: 8px; text-decoration: none;
  /* 宝石のような光源を意識した透明感 */
  background: linear-gradient(135deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 100%);
  border: .5px solid rgba(255,255,255,.4);
  border-radius: 0;
  color: #fff;
  box-shadow:
    inset 1px 1px 1.5px rgba(255,255,255,.45),
    0 4px 15px rgba(0,0,0,.10);
}
.btn:hover {
  background: linear-gradient(135deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.12) 100%);
  border-color: rgba(255,255,255,.55);
  box-shadow:
    inset 1px 1px 1.5px rgba(255,255,255,.6),
    0 6px 20px rgba(0,0,0,.14);
  transform: translateY(-1px);
}
@media (min-width: 480px) { .btn { padding: 15px 36px; } }

/* LINE CTA 共通デザイン */
.line-cta-btn {
  color: #fff;
  background: #06C755; /* LINE公式ブランド色（オーナー確定・AA未達=2.26:1は承知のうえの意図的選択・2026-07-09/決定と却下ログ参照） */
  border: .5px solid rgba(255,255,255,.4);
  border-radius: 0;
  /* LINE CTA共通：日本語ゴシック明示＋font-weight 500 で「押したくなる」視覚的重み
     （旧値はコメントと矛盾するvar(--jp)＝明朝だった。2026-07-09修正） */
  font-family: var(--sans);
  font-weight: 500;
  box-shadow:
    inset 1px 1px 1.8px rgba(255,255,255,.52),
    inset -1px -1px 2px rgba(0,120,48,.16),
    0 4px 16px rgba(0,0,0,.11);
  transition:
    opacity .7s ease,
    transform .7s ease,
    background-color var(--t),
    border-color var(--t),
    box-shadow var(--t),
    color var(--t);
  /* opacity / transform を .rv（0.7s）と同じ速度に揃えることで、
     HERO 等で他の rv 要素と同期して順次フェードインするように。
     hover の transform は若干ゆったり動くがフェード感と整合 */
}
.line-cta-btn:hover {
  color: #fff;
  background: #05b34c; /* LINE公式ブランド色のhover（2026-07-09・上と同方針） */
  border-color: rgba(255,255,255,.6);
  transform: translateY(-2px);
  box-shadow:
    inset 1px 1px 2.4px rgba(255,255,255,.64),
    inset -1px -1px 2px rgba(0,120,48,.18),
    0 8px 28px rgba(4,128,47,.44);
}
.line-cta-btn svg {
  fill: currentColor;
  flex-shrink: 0;
}

/* CTA共通レイアウト: 個別ボタン側は色・余白・文字設定だけを持つ */
.btn-line-main,
.cta-price-btn,
.btn-line-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.btn-line-main svg,
.cta-price-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* LINE CTAカードブロック（line-cta-block.php）
   .line-cta-sec の背景色はページ固有CSS（top.css / menu.css）で定義 */
.line-card {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid rgba(5,160,64,.22);
  padding: 32px var(--sp);
  /* 子（見出し/サブ/✓リスト/ボタン）を中身幅で中央配置。
     .line-can の grid+fit-content は margin:auto の中央化が効かないため、親 flex で確実に中央へ
     ＝幅広カードでも✓リストが画面端まで散らず中央にまとまる（2026-06-20）。 */
  display: flex; flex-direction: column; align-items: center;
}
@media (min-width: 768px) { .line-card { padding: 44px 48px; } }
.line-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
  justify-content: center; text-align: center; flex-wrap: wrap;
}
.line-head svg { width: 34px; height: 34px; fill: var(--line); flex-shrink: 0; }
.line-head-title {
  font-family: var(--jp); font-size: clamp(.95rem, 3vw, 1.35rem);
  font-weight: 400; letter-spacing: .09em; color: #064e3b; line-height: 1.4;
}
.line-head-title span { font-family: var(--jp); letter-spacing: .09em; }
/* サブタイトルは .line-head の外（下）＝アイコンをメインタイトル行に揃えるため（2026-06-17）。
   2行タイトルを flex 中央寄せすると、アイコンが title+sub の中央＝行間に浮いて見えた。 */
.line-head-sub {
  font-family: var(--sans); font-size: clamp(.78rem, 2.4vw, .92rem);
  /* 予約導線(LINE)の説明文＝読ませたい本文。body基底400化に合わせ300→400へ
     （ここだけ300だと細く浮く）。色#047857は薄緑背景で約5:1でAA可＝据え置き（2026-07-06）。
     実用文＝ゴシック（type-and-color）に合わせ明朝から変更（2026-07-09）。 */
  font-weight: 400; color: #047857; letter-spacing: .05em; line-height: 1.6;
  text-align: center; margin: 0 auto 20px; max-width: 90%;
}
/* 列は 1fr ではなく auto＝各項目を中身幅にし、justify-content:center でグリッド全体を
   カード中央へ寄せる（1fr だと fit-content が効かず利用可能幅を等分して画面端まで散る
   ＝幅広カードの /about/ CTA で✓3項目が広がりすぎた真因。2026-06-20） */
.line-can {
  display: grid; grid-template-columns: auto; gap: 9px 16px;
  justify-content: center; margin: 0 auto 24px; width: fit-content;
}
@media (min-width: 480px) { .line-can { grid-template-columns: repeat(2, auto); } }
@media (min-width: 768px) { .line-can { grid-template-columns: repeat(3, auto); } }
.line-can li {
  display: flex; align-items: flex-start; gap: 7px;
  font-family: var(--sans); font-size: .82rem; color: #065f46; letter-spacing: .04em;
}
.line-can li::before { content: '✓'; color: var(--line); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.line-main-actions {
  display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center;
}
.btn-line-main {
  gap: 10px;
  font-family: var(--sans); font-size: .9rem; letter-spacing: .1em;
  padding: 15px 28px; font-weight: 400;
}
@media (min-width: 480px) { .btn-line-main { padding: 17px 36px; font-size: .94rem; } }
.line-operating {
  font-size: .72rem; color: #047857; letter-spacing: .04em;
  font-family: var(--sans); width: 100%; text-align: center;
}
.line-night-note {
  font-size: .65rem; color: #047857; opacity: .85;
  margin-top: 6px; letter-spacing: .04em; width: 100%; text-align: center;
}

/* 本文に溶け込むリンク（.loc-link）
   散文の途中に置くリンクの共通型。ボタンにせず、本文と同じ色のまま金の細い下線だけで
   「押せる」ことを示す＝文章の流れを止めない。トップのロケ地名（官庁街通り・種差海岸・
   更上閣）が初出。お知らせ記事末の LINE 導線など、同じ役割のリンクはこれを使う
   （面ごとに別定義しない＝2026-07-26 に top.css から移設）。 */
.loc-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(184, 151, 90, .4);
  text-underline-offset: 3px;
  transition: color var(--t), text-decoration-color var(--t);
}
.loc-link:hover {
  color: var(--gold-dk);
  text-decoration-color: var(--gold);
}

/* 透明スケルトンCTA：LINE以外の「詳細を見る」導線に使用 */
.text-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 26px;
  color: var(--gold-dk);
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  font-size: .8rem;
  line-height: 1.5;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255,255,255,.012);
  border: 1px solid currentColor;
  box-shadow: 4px 4px 0 rgba(184,151,90,.10);
  transition:
    color var(--t),
    background var(--t),
    box-shadow var(--t),
    transform var(--t);
}
.text-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(184,151,90,.24);
  transform: translate(4px, 4px);
  transition: transform var(--t), opacity var(--t);
  opacity: .7;
}
.text-cta::after {
  content: '→';
  display: block;
  font-family: inherit;
  font-size: 1em;
  line-height: inherit;
  letter-spacing: 0;
  transition: transform var(--t);
}
.text-cta:hover {
  color: var(--gold-lt);
  background: rgba(184,151,90,.045);
  box-shadow: 2px 2px 0 rgba(184,151,90,.14);
  transform: translate(2px, 2px);
}
.text-cta:hover::before {
  transform: translate(2px, 2px);
  opacity: .85;
}
.text-cta:hover::after {
  transform: translateX(2px);
}
.text-cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* 暗地セクション上では明るい金へ切替（type-and-color.md【9】。--gold-dkは暗地で2.3〜2.9:1とAA割れ） */
.lc-sec .text-cta,
.furi-wrap .text-cta,
.twentieth-sec .text-cta {
  color: var(--gold-lt);
  box-shadow: 4px 4px 0 rgba(212,176,122,.14);
}
.lc-sec .text-cta::before,
.furi-wrap .text-cta::before,
.twentieth-sec .text-cta::before {
  border-color: rgba(212,176,122,.35);
}
.lc-sec .text-cta:hover,
.furi-wrap .text-cta:hover,
.twentieth-sec .text-cta:hover {
  color: var(--gold-lt);
  background: rgba(255,255,255,.06);
  box-shadow: 2px 2px 0 rgba(212,176,122,.18);
}
/* 振袖帯（黒地）の eyebrow も同じ理屈で明るい金へ（--gold-dkは黒地で2.91:1）。753の淡桜帯は theme-753.css が戻す */
.furi-wrap .lbl-gold { color: var(--gold-lt); }
/* 文脈リンク行（回遊導線・internal-link.md【12】）：ページ/セクション末尾に text-cta を
   1〜2本、中央へ静かに並べる共通行。
   ★2本の幅を必ず揃える（オーナー指摘 2026-07-25／FAQ末尾2ボタンと同じ作法）。
   .text-cta は inline-flex・nowrap＝文字数ぶんの幅になるため、grid の等幅トラックに載せて
   長い方に合わせる。コンテナは width:fit-content＝中身ぶんに縮み、fr トラックは
   「最も広い項目」の幅で揃う（余った画面幅まで伸びない）。SPは縦積み（1列＝自動で同幅）。 */
.ctx-cta {
  display: grid;
  grid-auto-flow: row;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 28px auto 0;
}
@media (min-width: 600px) {
  .ctx-cta {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    column-gap: 22px;
  }
}
/* 撮影メニュー末尾（CH9後）の関連ページ行：地はクリームのまま囲わない（リンク行のみ） */
.nb__related { padding: 48px var(--sp); }
/* 見出しを置いた行は、見出しとリンクの間隔を見出し側の margin-bottom に一本化する
   （.ctx-cta 既定の margin-top:28px と二重に効かせない＝撮影メニューと衣装で同じ間隔になる）。 */
.nb__related-title + .ctx-cta { margin-top: 0; }
/* 関連リンク行の見出し（オーナー指摘 2026-07-29＝リンクだけでは何の行か伝わらない）。
   金はリンク側（.text-cta の --gold-dk）が既に担うため見出しに金は足さない（type-and-color【6】60/30/10）。
   囲い・英字ラベル・色バーも足さず、明朝＋字間＋中央の1行だけで「ここから別のご案内」を示す。 */
.nb__related-title {
  font-family: var(--jp);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .06em; /* 級数が小さいので字間は控えめに（.1em だと1字ずつ離れて間延びした） */
  color: var(--text2);
  text-align: center;
  /* 上＝直前のブロック（衣装ページはFAQの白い塊）から離す。ここが 0 だと FAQ に貼り付いて見える
     （オーナー指摘 2026-07-29）。下＝見出しとリンクの間隔（.ctx-cta 側は 0 に倒してここへ一本化）。 */
  margin: 56px 0 18px;
}
/* 撮影メニュー詳細はセクション（.nb__related）の padding 48px が上の余白を担うため二重に空けない */
.nb__related .nb__related-title { margin-top: 0; }
/* FAQアコーディオン：撮影メニュー（.nb__faq-acc）と見た目を統一（2026-07-24・続き410）。
   一辺の金バーを廃し、上下の細罫線で区切る／Q丸は金枠白地→openで金塗り／矢印は自作の十字（openで×へ回転）。
   各行の下罫線は .faq-item／リスト全体の先頭（上罫線）は .faq-list をここで共通に敷く
   ＝/faq/・衣装・グループ・フォトログ2種すべてで先頭線が出る（page-doc.css へ二重定義しない・続き412で一本化）。
   ※トップだけは2カラム構成のため .faq-col 側に敷く（top.css）。
   開閉アニメは grid-template-rows を維持＝回答が長くても切れない（基準の max-height 上限を採らない意図）。 */
.faq-list { border-top: 1px solid var(--light-gray); }
.faq-item { background: #fff; border-bottom: 1px solid var(--light-gray); transition: background .25s var(--ease); }
.faq-item:hover, .faq-item.op { background: var(--cream); }
.faq-q {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 22px 22px 20px; width: 100%; text-align: left;
  font-family: var(--jp); font-weight: 400;
  letter-spacing: .02em; color: var(--charcoal);
  background: none; cursor: pointer;
  border: none; border-left: 2px solid transparent;
  transition: border-color .25s var(--ease);
}
.faq-item:hover .faq-q, .faq-item.op .faq-q { border-left-color: var(--gold); }
.faq-qm {
  flex-shrink: 0; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid rgba(184,151,90,.4); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--en); font-size: .76rem; color: var(--gold);
  font-weight: 400; line-height: 1; letter-spacing: 0;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.faq-item.op .faq-qm { background: var(--gold-dk); color: #fff; } /* 白文字×gold=2.76:1→gold-dk 5.85:1 */
/* 質問を包む h3（faq-item.php）は素通し＝見た目は button 側が全部持つ。margin/padding は global のリセットで0。 */
.faq-qh { font: inherit; }
/* font-family を明示するのは h3 で包んだため＝global.css の「h3 span は親フォントを継承」ルールに拾われると
   質問文が明朝(--jp)化する（計算値は従来どおり --sans＝見た目は不変）。min-width:0 と overflow-wrap は
   長いURL・英単語が flex を横へ押し広げるのを防ぐ。 */
.faq-qt { flex: 1; min-width: 0; font-family: var(--sans); font-size: .9rem; color: var(--charcoal); line-height: 1.7; letter-spacing: .02em; overflow-wrap: anywhere; }
/* 矢印＝空要素に十字を描画（＋→openで×）。HTMLに文字を残して隠す方式は採らない＝要素そのものが十字 */
.faq-arr {
  position: relative; flex-shrink: 0; width: 14px; height: 14px;
}
.faq-arr::before, .faq-arr::after {
  content: ''; position: absolute; top: 50%; left: 50%; background: var(--warm-gray);
  transition: transform .3s var(--ease), opacity .3s var(--ease), background .25s var(--ease);
}
.faq-arr::before { width: 12px; height: 1px; transform: translate(-50%, -50%); }
.faq-arr::after  { width: 1px; height: 12px; transform: translate(-50%, -50%); }
.faq-item:hover .faq-arr::before, .faq-item:hover .faq-arr::after { background: var(--gold); }
.faq-item.op .faq-arr::before { background: var(--gold); }
.faq-item.op .faq-arr::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a {
  /* grid-template-rows のアニメーションで滑らかに開閉
     padding は内側のラッパーで制御するため、faq-a 自体は0 */
  display: grid;
  grid-template-rows: 0fr;
  /* 左の金バーを .faq-q から回答まで連続させる＝基準 .nb__faq-acc と同じく
     Q→A に一本の金線が縦に伸びる（2026-07-24・続き411：回答側の左バー付け忘れを是正） */
  border-left: 2px solid transparent;
  transition: grid-template-rows .42s var(--ease), border-color .25s var(--ease);
}
.faq-item.op .faq-a { border-left-color: var(--gold); }
.faq-a > .faq-a-inner {
  overflow: hidden;
  /* FAQ回答は読み本文＝グレーだと薄いので本文色(--text)へ（2026-07-06） */
  font-size: .85rem; color: var(--text); line-height: 1.9; letter-spacing: .02em;
  overflow-wrap: anywhere; /* 回答内のURL・長い英単語を折り返す（overflow:hidden で右が切れて読めなくなるのを防ぐ） */
  /* 閉状態は a11y ツリーからも外す（2026-07-27）。opacity:0 と高さ0だけだと**見えないのに Tab で
     回答内リンクへフォーカスが入り**、読み上げも届く（実機で /menu/20th/ に該当リンク1件を確認）。
     撮影メニュー側 .nb__faq-acc-a は C-001 で既に visibility を持っており、共通部品化した時に
     この1行だけ引き継ぎ漏れしていた＝基準側に合わせる。閉じるときだけ遅延させてフェードを保つ。 */
  visibility: hidden;
  transition: padding .42s var(--ease), opacity .32s var(--ease), visibility 0s linear .42s;
  padding: 0 22px 0 66px;
  opacity: 0;
}
.faq-item.op .faq-a {
  grid-template-rows: 1fr;
}
.faq-item.op .faq-a > .faq-a-inner {
  padding: 0 22px 22px 66px;
  opacity: 1;
  visibility: visible; /* 開く時は即座に（delay 無し） */
  transition: padding .42s var(--ease), opacity .32s var(--ease), visibility 0s;
}

/* JS が動かない環境では全問を開いた状態で出す（2026-07-27）。
   開閉は JS が付ける .op だけが担うため、これが無いと**質問文しか読めない**
   ＝「JS 無効でも全件見える」というPEの約束が実装で守られていなかった。
   ＋印は押しても何も起きないので出さない。 */
@media (scripting: none) {
  .faq-a { grid-template-rows: 1fr; }
  .faq-a > .faq-a-inner { padding: 0 22px 22px 66px; opacity: 1; visibility: visible; }
  .faq-arr { display: none; }
  .faq-q { cursor: default; }
}
/* FAQ回答内のインラインリンク（例：成人式FAQ→/costume/）：本文と同じ黒文字だと「押せる」と分からないため
   サイトの本文リンク（page-doc.css .pdoc-block a）と同じ金色＋下線に揃える（続き415・416で両系統対応）。
   FAQ回答のマークアップは2系統＝撮影メニュー /menu/ は `.nb__faq-acc-a`（menu-shared.css）／それ以外
   （/faq/・衣装・グループ・フォトログ・トップ）は `.faq-a-inner`。どちらも .pdoc-block 外で page-doc.css の
   本文リンク下線が効かない（/menu/ は page-doc.css 自体を読まない）ため、全ページ共通部品のここで両方に定義する。
   .btn/.text-cta（枠線ボタン型）は下線が矢印まで漏れるので除外。 */
.faq-a-inner a:not(.btn):not(.text-cta),
.nb__faq-acc-a a:not(.btn):not(.text-cta) { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 2px; }
.faq-a-inner a:not(.btn):not(.text-cta):hover,
.nb__faq-acc-a a:not(.btn):not(.text-cta):hover { color: var(--gold); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LINE 追従ボタン
   丸型アイコン＋アイコン外にラベルテキストを配置
   WordPress ACF: line_url
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ════════════════════════════════════════════════════════════
   LINE フローティングボタン — 2026年標準仕様
   ════════════════════════════════════════════════════════════
   【位置管理】
   ▶ right / bottom + safe-area-inset（端末の安全領域を考慮）
   ▶ フッター到達時はJSで .lf-hide-up を付与して画面外へ退避
   ▶ top/bottom のアニメーション禁止 → CLS・layout thrashing 回避

   【状態クラス】
   .sh            : 出現（300pxスクロール後）
   .lf-hide-up    : フッター付近・最下部到達時に画面外へ退場
   .is-keyboard-hidden : キーボード表示時消灯
   .is-hidden     : SPナビ展開時非表示
   .nudge         : ピョコッアニメ
════════════════════════════════════════════════════════════ */
.line-float {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  right: calc(18px + env(safe-area-inset-right, 0px));
  z-index: 999;
  display: flex; flex-direction: row-reverse; align-items: center; gap: 8px;
  /* 初期: 非表示（transformのみ → no layout thrash） */
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  /* visibility:hidden＝非表示中はTabフォーカス・スクリーンリーダー対象外にする
     （opacity:0だけでは見えないリンクにフォーカスが移れてしまう＝codex監査 2026-07-17）。
     フェードアウト完了までdelayで可視を保ち、アニメは崩さない */
  visibility: hidden;
  /* transitionはopacity + transformのみ（bottom・topは禁止） */
  transition:
    opacity    .42s ease,
    transform  .42s ease,
    visibility 0s linear .42s;
}
@media (min-width: 768px) {
  .line-float {
    right: calc(28px + env(safe-area-inset-right, 0px));
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 出現 ── */
.line-float.sh {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity    .42s ease,
    transform  .42s ease,
    visibility 0s;  /* 出現時は即可視（delayなし） */
}

/* ── 読解モード退場（下方向へ — transformのみ） ── */
.line-float.lf-hide-up {
  opacity: 0;
  transform: translateY(180px);   /* %でなくpxで確実に画面外へ */
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity    .3s ease,
    transform  .38s cubic-bezier(.4,0,.6,1),
    visibility 0s linear .38s;
}

/* ── キーボード表示時消灯 ── */
.line-float.is-keyboard-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity    .2s ease,
    visibility 0s linear .2s;
}

/* ── SPナビ展開中: 完全無効化 ── */
.line-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── prefers-reduced-motion: アニメーション無効化 ── */
@media (prefers-reduced-motion: reduce) {
  .line-float,
  .line-float.sh,
  .line-float.lf-hide-up {
    transition: opacity .2s ease;
    transform: translateY(0);
  }
  .line-float.lf-hide-up { opacity: 0; }
  .line-float-label { transition: opacity .15s ease; }

  /* SPナビ: 段階フェードを無効化（チラつき防止・即時表示） */
  .sp-nav.op .sp-nav-list > li,
  .sp-nav.op .sp-nav-info,
  .sp-nav.op .sp-line-btn {
    transition-delay: 0s !important;
    transition-duration: .2s !important;
  }
}

/* 丸型アイコンボタン本体 */
.line-float-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #07c14d 0%, #06C755 55%, #048a37 100%); /* LINE公式ブランド色（2026-07-09・上と同方針。--lineは文字用途のみに温存するためここは独立値） */
  color: #fff;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.28),
    inset -1px -1px 0 rgba(0,0,0,.08),
    0 6px 18px rgba(5,90,30,.45),
    0 2px 6px rgba(0,0,0,.18);
  /* transition はtransform + box-shadowのみ（top/bottomは触らない） */
  transition: transform .2s ease, box-shadow .2s ease;
  flex-shrink: 0;
}
@media (min-width: 768px) { .line-float-btn { width: 60px; height: 60px; } }
.line-float-btn svg { width: 28px; height: 28px; fill: #fff; }
.line-float-btn:active { transform: scale(.93); }
@media (hover: hover) {
  .line-float-btn:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,.32),
      inset -1px -1px 0 rgba(0,0,0,.08),
      0 10px 28px rgba(5,90,30,.5),
      0 3px 8px rgba(0,0,0,.2);
  }
}

/* ── ピョコッアニメ（transformのみ・reflow禁止準拠） ── */
@keyframes linePyoko {
  0%   { transform: translateY(0)    scale(1);    }
  30%  { transform: translateY(-8px) scale(1.06); }
  55%  { transform: translateY(2px)  scale(.97);  }
  75%  { transform: translateY(-3px) scale(1.02); }
  100% { transform: translateY(0)    scale(1);    }
}
.line-float.nudge .line-float-btn {
  animation: linePyoko .55s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .line-float.nudge .line-float-btn { animation: none; }
}

/* ── ラベル：常時表示型 ──
   通常はラベル付きで存在感を出し、セクションに応じて文言が切り替わる。
   .swapping クラスで一時的にフェードして文言差し替えを行う。 */
.line-float-label {
  font-family: var(--sans); font-size: .62rem; font-weight: 400;
  letter-spacing: .08em; color: var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.7) 100%);
  border-radius: 11px; white-space: nowrap;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,1),
    inset -1px -1px 0 rgba(255,255,255,.35),
    0 4px 12px rgba(0,0,0,.08),
    0 1px 3px rgba(0,0,0,.06);
  pointer-events: none; text-align: center;
  padding: 4px 11px; opacity: 1;
  transition: opacity .25s ease;
}
/* 文言差し替え時の一時フェード */
.line-float-label.swapping { opacity: 0; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   トップへ戻るボタン
   LINE追従ボタンと干渉しないよう左下へ配置
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.back-to-top {
  position: fixed;
  left: calc(18px + env(safe-area-inset-left, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid rgba(184,151,90,.34);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(255,255,255,.88);
  box-shadow:
    0 8px 22px rgba(29,26,23,.13),
    0 2px 7px rgba(29,26,23,.08);
  opacity: 0;
  transform: translateY(14px);
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  transition:
    opacity .42s ease,
    transform .42s ease,
    visibility 0s linear .42s,
    background .2s ease,
    border-color .2s ease;
}
@media (min-width: 768px) {
  .back-to-top {
    left: calc(28px + env(safe-area-inset-left, 0px));
    bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
  }
}
.back-to-top svg {
  width: 24px;
  height: 24px;
  fill: var(--gold);
}
.back-to-top svg path {
  fill: var(--gold);
}
.back-to-top.sh {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity .42s ease,
    transform .42s ease,
    visibility 0s linear 0s,
    background .2s ease,
    border-color .2s ease;
}
.back-to-top.bt-footer-hide {
  opacity: 0;
  transform: translateY(180px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .3s ease,
    transform .38s cubic-bezier(.4,0,.6,1),
    visibility 0s linear .38s,
    background .2s ease,
    border-color .2s ease;
}
.back-to-top.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.back-to-top:active { transform: scale(.94); }
@media (hover: hover) {
  .back-to-top:hover {
    border-color: rgba(184,151,90,.62);
    background: rgba(255,255,255,.96);
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top.bt-footer-hide {
    transition: opacity .2s ease, visibility 0s linear .2s;
    transform: translateY(0);
  }
  .back-to-top.sh {
    transition: opacity .2s ease, visibility 0s linear 0s;
  }
  .back-to-top.bt-footer-hide { opacity: 0; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ページ内アンカーナビ（.nb__page-nav）
   - ヘッダー直下に sticky 配置、章リンクの横並び（SPは横スクロール）
   - スクロール時に is-stuck クラスでガラス半透明化（common.js [7]）
   - 表示中セクションが切り替わると is-current クラスでアクティブ表示（common.js [8]）
   - 触る前に docs/skills/sticky-glass-spec.md を必読
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* sticky 状態を検知するためのセンチネル要素（高さ1px・見えない） */
.nb__page-nav-sentinel {
  height: 1px;
  margin-top: -1px;
  pointer-events: none;
}

/* アンカーナビ本体 */
.nb__page-nav {
  background-color: var(--gold); /* #B8975A 標準ゴールド */
  border-bottom: 1px solid rgba(184,151,90,.25);
  position: sticky;
  top: 60px;
  z-index: 90;
  min-height: 49px;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
  transition: background-color .5s var(--ease), border-bottom-color .5s var(--ease), box-shadow .5s var(--ease);
}
@media (min-width: 768px) {
  .nb__page-nav {
    top: 72px;
    min-height: 44px;
    display: flex;
    align-items: center;
    margin-top: -1px; /* PCのみ：ヘッダー下端と1px重ねて隙間解消 */
  }
}

/* 擬似要素にガラス層、opacity フェードで滑らかに切替（site-hdr と同じ方式）
   is-stuck 時：本体 background-color を transparent に、::before opacity を 1 に
   両方が .5s で補間されて滑らかに「藍色 → ガラス半透明」へ */
.nb__page-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,.48) 0%,
    rgba(255,255,255,.24) 50%,
    rgba(255,255,255,.48) 100%);
  backdrop-filter: blur(18px) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.8) brightness(1.05);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.nb__page-nav.is-stuck {
  background-color: transparent; /* ゴールド背景を消し、::before のガラス層だけが見える */
  border-bottom-color: rgba(184,151,90,.16);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 6px 20px rgba(0,0,0,.05);
  /* 旧：inset 0 1px 0 rgba(255,255,255,.55) は削除（ヘッダー下端との接合面で1px線として見えるため） */
}
.nb__page-nav.is-stuck::before { opacity: 1; }

/* リンクリストを ::before（ガラス層）の上に配置 */
.nb__page-nav-list {
  position: relative;
  z-index: 1;
}

/* リンクリスト（横スクロール、スクロールバー非表示） */
.nb__page-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  /* SPは横スクロールコンテナ。幅を画面内に固定しないと nowrap のリンク列が
     コンテナ自身を押し広げ document ごと横はみ出しする（PCは:768で width:100% 指定済） */
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  min-height: 49px;
}
.nb__page-nav-list::-webkit-scrollbar { display: none; }

/* 各リンク（機能UIのためゴシック体・var(--sans)を使用） */
.nb__page-nav-link {
  display: flex;
  align-items: center;
  padding: 13px 18px;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.8;
  min-height: 49px;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  /* 過去要望（続き48 系）の「ふわふわフェード」を尊重しつつ、
     2つ同時点灯の原因だったホバー残留と CSS 被りは別途 hover ルールで解消済み */
  transition: color .35s ease-in-out, border-bottom-color .35s ease-in-out, background .35s ease-in-out;
}
@media (min-width: 768px) {
  .nb__page-nav-list,
  .nb__page-nav-link { min-height: 32px; }
  .nb__page-nav-link { font-size: .62rem; padding: 7px 16px; line-height: 1.5; }
  /* PC のみ中央揃え。SP の overflow-x: auto を visible に戻して safe center を効かせる
     （Chrome/Safari は overflow-x: auto の flex コンテナ内で safe center が常に start にフォールバックする挙動があるため） */
  .nb__page-nav-list { justify-content: safe center; overflow-x: visible; flex-wrap: wrap; width: 100%; }
}

/* マウス環境のみホバー色を適用（タッチ後の hover 残留を防止） */
/* マウス環境のみホバー色を適用（pointer: fine 追加で Galaxy S25 等タッチデバイスでの
   :hover 残留を遮断）。is-stuck 中のホバー時の background は削除（is-current と
   同じ見た目になり「2つ同時点灯」の原因になっていたため。色変更で背景が明るくなって
   特に顕在化） */
@media (hover: hover) and (pointer: fine) {
  .nb__page-nav-link:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
  }
  .nb__page-nav.is-stuck .nb__page-nav-link:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
  }
}

/* sticky 中のリンクはダーク文字 */
.nb__page-nav.is-stuck .nb__page-nav-link {
  color: rgba(28, 28, 28, .72);
}

/* 現在地（is-current）：
   合体前（is-stuck じゃない）は点灯しない（通常リンクと同じ白）。
   合体後（is-stuck）のみゴールドで点灯。ユーザーが「位置を確認したい」タイミングと一致 */
.nb__page-nav.is-stuck .nb__page-nav-link.is-current {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(184,151,90,.1);
}

/* 暗背景オーバーレイ（over-dark）─────────────────────────────
   ヘッダー(.site-hdr)と同型。アンカーナビが is-stuck（ガラス半透明化）中、裏へ暗背景
   セクションが来ると濃いグレー文字 rgba(28,28,28,.72) が黒地に沈む。common.js [7] が
   アンカーナビ帯（ヘッダー下端〜ナビ下端）への暗背景交差を検知し .over-dark を付与。
   ★発色は必ず .is-stuck（半透明化）とセットでゲート＝ .nb__page-nav.is-stuck.over-dark。
     ゴールド不透明背景（合体前・スクロール前）の間は暗背景が裏にあっても不可視＝白文字の
     ままが正（.over-dark 単独で発色させるとゴールド帯に明るい金＝低コントラストの誤表示）。
   ★通常リンク＝明るい金(--gold-lt・黒地8.35:1)＋影、現在地＝同色で下線点灯を維持。
   ★状態クラスゆえ @media(hover:…) の外に置く（sticky-glass-spec「触ってはいけない」5）。
   color の transition は既存 .nb__page-nav-link の .35s に従う（背景系は不変更）（2026-07-08） */
.nb__page-nav.is-stuck.over-dark .nb__page-nav-link {
  color: var(--gold-lt);
  text-shadow: 0 1px 2px rgba(0,0,0,.32);
}
.nb__page-nav.is-stuck.over-dark .nb__page-nav-link.is-current {
  color: var(--gold-lt);
  border-bottom-color: var(--gold-lt);
  background: rgba(212,176,122,.14);
}
/* ★over-dark 中の現在地は「金の面で塗って反転」（暗背景で通常リンク[金文字]と確実に弁別）。
   各 theme-*.css が `.nb__page …is-current` を濃色で (0,5,0) 後勝ち上書きするため、上の
   over-dark 用ルール(0,5,0)が負けて現在地が濃色のまま沈んでいた（全メニュー共通の不具合）。
   .is-current を重ねて (0,6,0) でテーマに勝ち、@media(hover:none)内の `…is-current:hover`
   (0,6,0) との順序依存も :hover 併記 (0,7,0) で断つ。.nb__page 前置なし＝トップでも有効。
   背景系(.sc/ガラス)不触・@media 外・transition は既存 .35s 継承＝凍結仕様順守。2026-07-08 */
.nb__page-nav.is-stuck.over-dark .nb__page-nav-link.is-current.is-current,
.nb__page-nav.is-stuck.over-dark .nb__page-nav-link.is-current.is-current:hover {
  color: var(--charcoal);
  background: var(--gold-lt);
  border-bottom-color: var(--gold-lt);
  text-shadow: none;
}
/* ★over-dark 中の通常リンクのPCホバーも同型の穴：theme-*.css の @media(hover:hover)内
   `.nb__page ….nb__page-nav-link:hover`（濃色）が上の over-dark 通常リンクルールに後勝ちし、
   暗背景上でホバーした瞬間だけ濃色に沈む。.over-dark を重ねて詳細度で順序非依存に勝たせる。
   タッチ端末は hover 残留しても色が通常 over-dark リンクと同じ＝無害。2026-07-08 */
.nb__page-nav.is-stuck.over-dark.over-dark .nb__page-nav-link:hover {
  color: var(--gold-lt);
  border-bottom-color: var(--gold-lt);
}

/* タッチデバイスでは hover を完全打ち消し、is-current は is-stuck 時のみ維持 */
@media (hover: none) {
  .nb__page-nav-link:hover,
  .nb__page-nav.is-stuck .nb__page-nav-link:hover {
    color: inherit;
    border-bottom-color: transparent;
    background: transparent;
  }
  /* 合体後（is-stuck）のみ現在地点灯。合体前は通常リンクと同じ白で点灯しない */
  .nb__page-nav.is-stuck .nb__page-nav-link.is-current,
  .nb__page-nav.is-stuck .nb__page-nav-link.is-current:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
    background: rgba(184,151,90,.1);
  }
}

/* タップ後のフォーカス色残り防止（キーボード操作時のみ枠を表示） */
.nb__page-nav-link:focus { outline: none; }
.nb__page-nav-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* アンカー遷移時のスクロール先オフセット（ヘッダー＋アンカーナビ分を差し引く）
   SP：ヘッダー60 + ナビ49 ≒ 109px
   PC：ヘッダー72 + ナビ44 ≒ 116px */
.nb__chapter,
[data-anchor-target] { scroll-margin-top: 108px; }
@media (min-width: 768px) {
  .nb__chapter,
  [data-anchor-target] { scroll-margin-top: 116px; }
}

/* ============================================================
   セグメント・ピルタブ（/price/ 料金切替・/costume/ 衣装切替 共通）
   金にほのかに色づいた半透明ガラスの帯に、各タブがセグメントで並ぶ。
   現在地(.is-active)だけが金の“つまみ”として浮かび上がる。
   ・/price/  ＝ JS（price.js）が .is-active を付け外し（button + role=tab）。
   ・/costume/＝ CSS-only ラジオ（page-doc.css が :checked から .seg-tab.is-active と
                同じ“つまみ”見た目を当てる＝label には class を付けられないため別セレクタで再宣言）。
   帯はコンテンツ幅に合わせて中央寄せ（タブが少なければコンパクト・多ければ max-width で頭打ち＋横スクロール）。
   ガラスの作法は docs/skills/sticky-glass-spec.md 準拠＝backdrop-filter は静的（値を補間しない／
   トランジションは opacity / transform のみ）。元は /price/ 下部の浮遊タブバー専用だったが、
   上部固定（通常フロー）配置へ移行し /costume/ と共通化した（オーナー要望 2026-06-17）。 */
.seg-tabbar {
  width: fit-content;
  max-width: min(680px, calc(100% - 24px));
  margin: 4px auto 0;
  padding: 7px;
  border-radius: 999px;
  border: 1px solid rgba(212, 176, 122, .45); /* 淡い金の1px縁 */
  background: linear-gradient(135deg,
    rgba(212, 176, 122, .14),
    rgba(255, 255, 255, .28) 55%,
    rgba(184, 151, 90, .09)); /* 金にほのかに色づいた半透明 */
  -webkit-backdrop-filter: blur(12px) saturate(150%);
          backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    0 8px 24px rgba(28, 28, 28, .14),
    0 2px 6px rgba(138, 110, 62, .12),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(184, 151, 90, .14);
}
.seg-tabbar__scroll {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;            /* 横スクロール専用＝縦成分を殺し斜めスクロールを防ぐ */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;      /* 旧Edge/IE */
  cursor: grab;                 /* PC：マウスドラッグで横スクロール（common.js [11] data-drag-scroll） */
  /* 横スクロール可能と気づかせる左右フェード（端のタブが切れて“続きがある”と伝える）。 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.seg-tabbar__scroll.is-dragging { cursor: grabbing; user-select: none; }
.seg-tabbar__scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari */
/* セグメント一体型：各タブは枠/背景を持たず、帯の中に並ぶ。現在地だけが金つまみとして浮かぶ。 */
.seg-tab {
  position: relative; /* 仕切り線(::before)の基準 */
  flex: 0 0 auto;
  display: inline-flex; /* costume の label でも高さを揃える */
  align-items: center;
  white-space: nowrap;
  padding: 9px 17px;
  border: 0;
  background: transparent;
  color: var(--gold-dk);
  font-family: var(--sans); /* 視認しやすいゴシック（Noto Sans JP） */
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 999px;
  cursor: pointer;
  /* ガラス越し・暗い背景の上でも文字を浮かせる白の薄い縁取り */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 0 2px rgba(255, 255, 255, .45);
  transition: background-color var(--t), color var(--t), box-shadow var(--t);
}
/* セグメント間の細い仕切り線（隣接タブの左端＝レイアウトを動かさない）。選択中の両隣は線を消す。 */
.seg-tab + .seg-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  background: linear-gradient(to bottom,
    rgba(212, 176, 122, 0),
    rgba(184, 151, 90, .40) 50%,
    rgba(212, 176, 122, 0));
  transform: translateY(-50%);
  transition: opacity var(--t);
}
.seg-tab.is-active::before,
.seg-tab.is-active + .seg-tab::before { opacity: 0; }
/* ホバーは純マウス環境のみ（タッチ後の :hover 残留を防ぐ）。現在地とは見た目を一致させない。 */
@media (hover: hover) and (pointer: fine) {
  .seg-tab:not(.is-active):hover {
    background: rgba(255, 255, 255, .45);
    color: var(--gold);
  }
}
/* 現在地＝金のつまみ。ガラス帯から金グラデで浮き上がり“点灯”。
   ※ costume は CSS-only ゆえ page-doc.css が :checked セレクタで同一宣言を再掲（変更時は両方直す）。 */
.seg-tab.is-active {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dk) 60%, var(--gold-dk) 100%);
  color: var(--warm-white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  text-shadow: 0 1px 3px rgba(28, 28, 28, .55);
}
.seg-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────
   振袖コレクション ライトボックス
   - [data-lightbox="enabled"] 内の .furi-item img をタップで拡大
   - JS（common.js [10]）が body 末尾に .furi-lb を生成
   - ACF チェックボックス OFF 時は属性が出力されないため発火しない
────────────────────────────────────────────────────────── */
[data-lightbox="enabled"] .furi-item { cursor: zoom-in; }
[data-lightbox="enabled"] .furi-item img:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.furi-lb {
  position: fixed;
  inset: 0;
  /* ヘッダー .site-hdr(z-index:10002) より前面に＝最上部でヘッダー帯がブラー面に重なるのを防ぐ
     （JS が body に .lb-open を立て、下の .lb-open .site-hdr でヘッダー自体も隠す二重の歯止め・2026-06-17）。 */
  z-index: 10010;
  /* 写真の外側は薄い地＋ブラーのフロストガラス（背景ページがぼけて沈み、写真は box-shadow で前面に浮く）。
     黒ベタには戻さない（オーナー希望）。※ブラーは「強すぎる」とのオーナー指摘で 16px→8px→5px と段階的に弱めた（2026-06-17）。
     強めたい/弱めたいときは blur() の px と地の不透明度(.26)を調整。 */
  background: rgba(18, 14, 10, .26);
  -webkit-backdrop-filter: blur(5px) saturate(1.05);
          backdrop-filter: blur(5px) saturate(1.05);
  /* 縦並び：写真ステージ（中央）＋サムネイル一覧（最下部）。サムネ無し（1枚）のときは stage が全画面中央。 */
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: furi-lb-fade .25s ease-out;
  user-select: none; /* マウスで左右ドラッグして写真送りする際に文字が選択されないように */
  overflow: hidden;   /* 写真送りで現在の写真が画面外へ流れる際にはみ出しをクリップ（2026-06-17） */
  touch-action: none; /* タッチの横ドラッグ追従を確実に拾う（native のパン/ズームに奪わせない）。
                         写真送り・閉じる操作は JS（Pointer Events）側で処理する。 */
}
.furi-lb[hidden] { display: none; }
/* ライトボックス表示中はヘッダーを隠す（z-index 競合とヘッダー帯の重なりを根本から断つ）。
   JS（common.js openLightbox/closeLightbox）が body に .lb-open を付け外しする。 */
.lb-open .site-hdr { display: none; }

@keyframes furi-lb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.furi-lb__stage {
  margin: 0;
  flex: 1 1 auto;       /* 上部〜中央の残り空間を占有（サムネ一覧は最下部に押し出す） */
  max-width: min(92vw, 1400px);
  max-height: 90vh;
  min-height: 0; /* flex子(img)が縮める前提。これが無いと低い画面高で写真が箱からあふれる */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* cap / 写真 を stage 内で縦中央に */
  gap: 14px;
}
/* 衣装名（キャプション）は PC・SP とも写真の上に置く（縦積み）。
   一時 PC のみ右上に絶対配置したが、将来 横写真を使うと写真と衣装名が重なる恐れがあるため
   写真の上に戻した（オーナー要望 2026-06-17 3巡目）。写真は cap ぶんを引いた高さで出す。 */
/* アルバム名（キャプション）＝写真の上＝ブラー地の上に置く（オーナー要望 2026-06-17）。
   地が不定なので半透明黒のピルで常に可読。空ラベルは render() が display:none。 */
.furi-lb__cap {
  order: -1; /* flex 内で必ず先頭＝写真より上 */
  color: #fff;
  background: rgba(0,0,0,.42);
  padding: 6px 18px;
  border-radius: 999px;
  font-family: var(--jp);
  font-size: 1rem;
  letter-spacing: .06em;
  text-align: center;
  max-width: 90%;
}
.furi-lb__img {
  max-width: 100%;
  /* 写真高は「画面高 − 上のアルバム名 − 余白(約90px)」に追従。前へ/次へボタンを撤去したぶん
     （旧 -150px）写真を大きく出せる＝縦写真でも上下に余白が減る（オーナー要望 2026-06-17 2巡目）。
     高い画面では 82vh で頭打ち。 */
  max-height: min(82vh, calc(90vh - 90px));
  min-height: 0;
  width: auto;
  height: auto;
  object-fit: contain;
  /* 写真の輪郭が背景ページに埋もれないよう、影をやや強め＋極薄リングで縁取り。 */
  box-shadow: 0 10px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.08);
}
/* サムネイル一覧が出るとき（2枚以上）は、最下部の一覧ぶん写真の最大高をさらに控える
   （cap＋thumbs と合わせて画面内に収め、写真が一覧に被らない）。JS が overlay に .has-thumbs を付与。
   サムネ実高は約100px（70px＋上下padding）。前へ/次へボタン撤去後は -200px は引きすぎで
   縦写真が小さいままだった（オーナー指摘 2026-06-17 3巡目：PCで写真が大きくならない）。
   → サムネ＋キャプション＋余白ぶんの -130px に詰めて写真を大きくする。 */
.furi-lb.has-thumbs .furi-lb__img {
  max-height: min(80vh, calc(90vh - 130px));
}
/* ── サムネイル一覧（写真の下＝画面最下部・横スクロール）─────────────────
   拡大中も他の写真を一覧でき、タップ／クリックで直接その写真へ飛べる（オーナー要望 2026-06-17）。 */
.furi-lb__thumbs {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100vw;
  justify-content: safe center; /* 少数なら中央・多ければ先頭から＋横スクロール */
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;          /* overlay の touch-action:none に奪われず横スクロールできる */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: rgba(0, 0, 0, .30);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.furi-lb__thumbs::-webkit-scrollbar { display: none; }
.furi-lb__thumb {
  flex: 0 0 auto;
  width: 54px;
  height: 70px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  opacity: .5;
  outline: 2px solid transparent;
  outline-offset: 0;
  background: rgba(255, 255, 255, .1);
  transition: opacity .2s ease, outline-color .2s ease;
}
.furi-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.furi-lb__thumb.is-active { opacity: 1; outline-color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .furi-lb__thumb:not(.is-active):hover { opacity: .85; }
}
/* 前へ/次への丸ボタンは廃止（写真送りはサムネタップ＋左右スワイプ／キーボード←→・オーナー要望
   2026-06-17 2巡目）。残るボタンは閉じる×のみ。 */
.furi-lb__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  border-radius: 50%;
  background: rgba(0,0,0,.4);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  cursor: pointer;
  font-family: serif;
  line-height: 1;
  transition: background .2s ease, border-color .2s ease;
}
.furi-lb__close:hover {
  background: rgba(184,151,90,.45);
  border-color: rgba(255,255,255,.5);
}
.furi-lb__close:focus-visible {
  outline: 2px solid var(--gold-lt);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .furi-lb__cap { font-size: .9rem; }
  .furi-lb__close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 1.4rem; }
}

/* ── スマホ横向き（背が低い横長画面）＝写真を画面高ほぼいっぱいに表示する。
      前へ/次への丸ボタンは撤去済みなので、サムネ一覧だけ隠して写真を最大化する
      （オーナー要望 2026-06-17：横向きは写真優先／送りはスワイプ）。
      条件＝orientation:landscape かつ max-height:600px ＝スマホ横向きを的確に捕まえる
      （タブレット横向きは縦も高いので対象外）。 */
@media (orientation: landscape) and (max-height: 600px) {
  /* 横向きスマホはサムネ一覧を出すと写真が小さくなるので一覧は隠し、写真を画面いっぱいに出す。
     JS の display 指定より優先するため !important。 */
  .furi-lb__thumbs { display: none !important; }
  .furi-lb__stage { max-height: 96vh; gap: 6px; }
  /* 写真は上のアルバム名ぶんだけ控えて、横向きでも極力大きく。
     一覧を隠すので .has-thumbs の控えめ高さは横向きでは打ち消す（写真フル）。 */
  .furi-lb__img,
  .furi-lb.has-thumbs .furi-lb__img { max-height: min(94vh, calc(96vh - 48px)); max-width: 96vw; }
}

/* ============================================================
   下層ページ共通：写真なしテキストヘッダー（template-parts/global/page-head.php）
   ＋読みやすい狭幅コンテナ（規約・文書系ページ用）。すべて新規クラス＝既存影響なし。
   ============================================================ */
.page-head { margin-bottom: 36px; }
@media (min-width: 768px) { .page-head { margin-bottom: 48px; } }
.page-head-lead { max-width: 680px; margin-left: auto; margin-right: auto; }

/* 読みやすい行長に絞る狭幅コンテナ（.c の内側で使う） */
.c--narrow { max-width: 860px; }



/* ============================================================
   納品の控えカード（.receipt）＝「納品までの目安」「納品方法」
   ------------------------------------------------------------
   マークアップ：template-parts/components/delivery-estimate.php（納品目安・全ページ共通）
                 page-flow.php（納品方法・/flow/ のみ）
   出る場所　　：/flow/ ／ 全撮影メニューの料金セクション末尾 ／ /price/
   演出　　　　：バーは視界に入ると規定幅まで伸びる（common.js が .is-anim-ready → .lit）。
                 全ページで同じ挙動＝ページごとに演出の有無を変えない（オーナー確定 2026-07-29）。

   ⚠️ ここが見た目の正典。**page 側のCSSに書き写さないこと**。
      2026-07-22〜29 は flow.css（約116行）と menu-shared.css（約95行）に同じ内容を
      二重で持っており、片方だけ直して見た目がズレる事故が起きた（オーナー指摘・続き465）。
      page 側に置いてよいのは「配置の差」だけ（例：flow は上下の余白が違う）。
   ============================================================ */
.receipt {
  /* バーの固定幅＝**期間の文字が読めなかったときの保険**。実際の幅は PHP が
     「その行の期間 ÷ 最長の期間」で出す --nbdel-bar-w（続き464）。
     アルバム=約2か月を100%とし、スタンダード商品(台紙)=約1か月＝半分の50%、
     データ=約3週間＝台紙より一回り短い34%。 */
  --nbdel-bar-data: 34%;
  --nbdel-bar-std: 50%;
  --nbdel-bar-alb: 100%;
  background: var(--warm-white);
  border: 1px solid var(--light-gray);
  border-radius: 16px;
  padding: 26px 22px 22px;
  max-width: 540px;
  margin: 40px auto 0;
  box-shadow: 0 4px 22px rgba(28, 28, 28, .04);
}
/* 上辺のミシン目ドット（チケットの切り取り線）は付けない＝オーナー指示 2026-07-29。
   英字ラベル（Delivery / How to receive）も同日に撤去。どちらも再追加しない。 */
.receipt__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.receipt__head .receipt__title {
  font-family: var(--jp);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .05em;
  margin: 0;
  color: var(--charcoal);
}
.receipt__rule {
  border: 0;
  border-top: 1px solid var(--light-gray);
  margin: 0 0 4px;
}
/* ラベル↔値は**必ず両端に寄せる**（オーナー指摘 2026-07-29）。space-between が無いと
   合計幅がカード幅（540px）に届かないとき左詰めになり「データ公式LINEで…」と文字が
   つながって読める。バー付き行（.rrow--bar .rrow__top）は元から space-between だったため、
   バーの無い納品方法カードだけで露見していた。 */
.receipt .rrow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--light-gray);
}
.receipt .rrow:last-of-type { border-bottom: 0; }
/* rrow--bar は「ラベル↔値」を上段に置き、その下に細い金グラデのバーを敷く。
   バーは“期間の体感”なので納品目安のみ＝納品方法（.receipt--deliver）には付かない。 */
.receipt .rrow--bar {
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
}
.receipt .rrow--bar .rrow__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.receipt .rrow__label {
  font-size: 14px;
  color: var(--text2);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.receipt .rrow__label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
}
.receipt .rrow__val {
  text-align: right;
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.7;
}
.receipt .bar-track {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: var(--light-gray);
  overflow: hidden;
}
.receipt .bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-lt), var(--gold));
  transition: width 1.1s var(--ease);
}
/* 既定＝最初から規定幅。JS が演出できる環境と判断したときだけ .is-anim-ready を付け、
   0 から始めて .lit で伸ばす（JS無効・IO非対応・reduced-motion では最初から規定幅
   ＝バーが 0px のまま消えない）。 */
.receipt .bar-fill.d-data { width: var(--nbdel-bar-w, var(--nbdel-bar-data)); }
.receipt .bar-fill.d-std  { width: var(--nbdel-bar-w, var(--nbdel-bar-std)); }
.receipt .bar-fill.d-alb  { width: var(--nbdel-bar-w, var(--nbdel-bar-alb)); }
.receipt.is-anim-ready .bar-fill { width: 0; }
/* 0 に戻す最初の1フレームだけアニメを切る＝JS が .is-anim-ready を付けた瞬間に
   「規定幅 → 0」が 1.1秒かけて縮んで見えるのを防ぐ（common.js が直後に外す）。 */
.receipt.is-anim-ready.no-anim .bar-fill { transition: none; }
.receipt.is-anim-ready.lit .bar-fill.d-data { width: var(--nbdel-bar-w, var(--nbdel-bar-data)); }
.receipt.is-anim-ready.lit .bar-fill.d-std  { width: var(--nbdel-bar-w, var(--nbdel-bar-std)); }
.receipt.is-anim-ready.lit .bar-fill.d-alb  { width: var(--nbdel-bar-w, var(--nbdel-bar-alb)); }
.receipt__foot {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--warm-gray);
  line-height: 1.85;
  padding-top: 13px;
  border-top: 1px solid var(--light-gray);
}
@media (prefers-reduced-motion: reduce) {
  .receipt .bar-fill { transition: none; }
}
/* 狭い端末では明細行（バーの無い行）を縦積みにする＝ラベルと値が両端に張り付いて
   読みにくくなるのを防ぐ。.rrow--bar は :not で除外（gap:9px の間延びを保つ）。 */
@media (max-width: 380px) {
  .receipt .rrow:not(.rrow--bar) {
    flex-direction: column;
    gap: 4px;
  }
  .receipt .rrow:not(.rrow--bar) .rrow__val { text-align: left; }
}