/* ===== MY DESIGN WINE =====
   世界観: パンフレット準拠（クリーム地 × ゴールド × 墨色セリフ） */

:root {
  --cream: #f7f4ec;
  --cream-2: #fffdf8;
  --ink: #1d1d1d;
  --ink-2: #4a463f;
  --gold: #b8963e;
  --gold-2: #c9a84c;
  /* 明るい地に置く文字色であり、白文字を載せる地の色でもある。
     いずれも白と 4.89:1、cream と 4.45:1。--gold(#b8963e) は白と 2.81:1 しか
     取れないので、文字が絡む面ではこちらを使う。--gold は文字の無い
     装飾（バー・ドット・枠）専用。 */
  --gold-text: #8a6d24;
  /* LINEの緑(#06c755)は白文字だと 2.26:1 で読めない。色相は保ったまま
     明度だけ落として白と 4.52:1 にした。ブランド色そのものではないので、
     LINE の表記ガイドラインに照らして先方確認が要る。
     文字が乗らない面（影・枠）は --line-green のままでよい。 */
  --line-green-strong: #04893b;
  --gold-pale: #e6d9b8;
  --wine: #722f37;
  --green: #3e5c47;
  --line-green: #06c755;
  --serif-en: 'Cormorant Garamond', 'Shippori Mincho', serif;
  --serif-ja: 'Shippori Mincho', serif;
  --sans-ja: 'Zen Kaku Gothic New', sans-serif;
  --shadow: 0 10px 34px rgba(29, 29, 29, .10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
html, body { overflow-x: clip; }
body {
  font-family: var(--sans-ja);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.8;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.sp { display: none; }
@media (max-width: 720px) { .pc { display: none; } .sp { display: inline; } }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 14px 30px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans-ja); font-weight: 700; font-size: 15px; line-height: 1.4;
  text-decoration: none; cursor: pointer; transition: .25s; text-align: center;
}
/* 白文字を載せるので、グラデーションの明るいほうの端でも 4.5:1 を満たす濃さにする。
   元の #96782c→#ab8c38 は 4.18:1 / 3.21:1 で WCAG AA に届いていなかった。
   （2026-08-29 の監査後、決済CTAをこのクラスに載せた際の検証で判明） */
.btn-gold { background: linear-gradient(135deg, #7d6220, #8f7228); color: #fff; box-shadow: 0 6px 18px rgba(125,98,32,.35); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(184,150,62,.45); }
.btn-ghost { background: transparent; border-color: var(--gold); color: var(--gold-text); }
.btn-ghost:hover { background: rgba(184,150,62,.08); }
.btn-line { background: var(--line-green-strong); color: #fff; box-shadow: 0 6px 18px rgba(4,137,59,.32); }
.btn-line:hover { transform: translateY(-2px); }
.btn-s { padding: 9px 18px; font-size: 13px; }
.free-tag { background: #fff; color: var(--gold-text); font-size: 11px; padding: 1px 8px; border-radius: 999px; }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 244, 236, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(184,150,62,.25);
}
.header-inner { max-width: 1280px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; flex: none; align-items: center; gap: 10px; text-decoration: none; }
.brand-name { white-space: nowrap; font-family: var(--serif-en); font-size: 19px; letter-spacing: .06em; color: var(--ink); }
.brand-name em { font-style: normal; color: var(--gold); }

/* 編集画面の詳細度の切替。ブランド名の右隣に置く */
/* grid-auto-columns:1fr で、両方のボタンを広いほう（シンプル）の幅に揃える。
   inline-flex だと文字数の差がそのまま幅の差になり、押し分けの目印がぶれる */
.ui-mode {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  /* flexアイテムとして縮むと、1fr指定でも文字数に比例して配分され幅が揃わない */
  flex: none;
  border: 1px solid var(--gold-pale); background: var(--cream-2); border-radius: 4px; overflow: hidden;
}
.ui-mode button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans-ja); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-2); padding: 7px 13px; line-height: 1.4; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.ui-mode button + button { border-left: 1px solid var(--gold-pale); }
.ui-mode button:hover { color: var(--ink); }
.ui-mode button[aria-pressed="true"] { background: var(--gold-text); color: #fff; }
/* シンプルモードでは、既定値のままでも仕上がるProの調整項目を隠す */
/* 隠している設定が既定と違う値になっているときだけ出す注意書き */
.ui-mode-hint {
  margin: 4px 0 16px; padding: 10px 14px;
  border: 1px solid var(--gold-pale); background: var(--cream-2);
  font-size: 12px; line-height: 1.8; color: var(--ink-2);
}
.ui-mode-hint button {
  border: 0; background: transparent; padding: 0; margin-left: 4px;
  font: inherit; font-weight: 700; color: var(--gold); cursor: pointer; text-decoration: underline;
}
/* メニュー名を文字の途中で分断しない。横幅が足りなくなる前に
   トップはメニューボタンへ切り替える（下のナビ専用メディアクエリ）。 */
.gnav { display: flex; gap: 16px; margin-left: auto; }
.gnav a { font-size: 13px; text-decoration: none; color: var(--ink-2); letter-spacing: .02em; }
#gnav { flex: none; align-items: center; }
#gnav a { flex: none; white-space: nowrap; }
.gnav a:hover { color: var(--gold); }
.header-line-cta { flex: none; white-space: nowrap; }
@media (max-width: 900px) { .gnav { display: none; } .header-inner { justify-content: space-between; } }

/* ---- hero ---- */
.hero { background: linear-gradient(160deg, var(--cream-2) 0%, var(--cream) 55%, #efe8d8 100%); overflow: hidden; }
.hero-inner {
  max-width: 1080px; margin: 0 auto; padding: 64px 20px 40px;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center;
}
.hero-lead { font-family: var(--serif-ja); font-size: clamp(18px, 2.6vw, 24px); letter-spacing: .22em; color: var(--ink-2); }
.hero-title { font-family: var(--serif-en); font-weight: 600; font-size: clamp(32px, 9vw, 76px); line-height: 1.08; letter-spacing: .10em; margin: 18px 0 6px; overflow-wrap: break-word; }
/* 大見出しを和文にしたぶんの調整。欧文の字送り(.10em)のままだと間延びする */
/* 元の大見出しだった英字は、雰囲気づけとして小さく上に残す */
.hero-eyebrow { font-family: var(--serif-en); font-size: clamp(11px, 1.5vw, 14px); letter-spacing: .34em; color: var(--gold); }
.hero-sub { font-family: var(--serif-ja); letter-spacing: .42em; font-size: clamp(12px, 1.6vw, 15px); color: var(--ink-2); margin-bottom: 18px; }
.hero-desc { color: var(--ink-2); margin-bottom: 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero-badges { display: flex; gap: 12px; list-style: none; }
.hero-badges li {
  border: 1px solid var(--gold); background: var(--cream-2); color: var(--ink);
  font-family: var(--serif-ja); font-size: 13px; line-height: 1.5; letter-spacing: .06em;
  padding: 12px 18px; text-align: center;
}
.hero-badges small { color: var(--ink-2); font-size: 10px; }
.hero-visual img { margin: 0 auto; filter: drop-shadow(0 24px 30px rgba(29,29,29,.28)); }
@media (max-width: 820px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; padding-top: 32px; }
  .hero-cta { justify-content: center; }
  .hero-badges { justify-content: center; flex-wrap: wrap; }
  .hero-visual { order: -1; }
  .hero-visual img { max-height: 320px; width: auto; }
}
@media (max-width: 480px) {
  .hero-visual img { max-height: 230px; }
  .hero-title { margin: 10px 0 4px; }
  .hero-sub { margin-bottom: 12px; }
  .hero-desc { margin-bottom: 18px; }
}

/* ---- section common ---- */
.section { padding: 72px 0; }
.sec-en {
  font-family: var(--serif-en); color: var(--gold); letter-spacing: .3em;
  font-size: clamp(20px, 3vw, 30px); text-align: center;
}
.sec-en::after { content: "◆"; display: block; font-size: 9px; margin: 8px auto 0; color: var(--gold-2); }
.sec-title { font-family: var(--serif-ja); font-size: clamp(22px, 3.4vw, 30px); letter-spacing: .12em; text-align: center; margin: 14px 0 18px; font-weight: 600; }
.sec-lead { text-align: center; color: var(--ink-2); margin-bottom: 40px; }

/* ---- concept ---- */
/* 2026-09-10 OCCASIONS をデザイン一覧の直後へ移した（index.html の並びを変更）。
   .collections も cream-2 なので、そのままだと**同じ色が2枚続いて境目が消える**。
   既定の背景（--cream）に戻し、collections(#fffdf8) → concept(#f7f4ec) → byo(グラデ)
   と交互になるようにする。 */
.concept { background: var(--cream); }
.scene-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; list-style: none;
  text-align: center; font-size: 13px; font-family: var(--serif-ja); letter-spacing: .04em;
}
.scene-grid li { padding: 16px 6px; line-height: 1.6; }
.scene-icon { display: block; font-size: 30px; margin-bottom: 10px; }
@media (max-width: 720px) { .scene-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- simulator ---- */
.simulator { background: linear-gradient(180deg, var(--cream) 0%, #efe9db 100%); }
.sim {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px;
  background: var(--cream-2); border: 1px solid rgba(184,150,62,.35);
  padding: 30px; box-shadow: var(--shadow);
}
/* ---- できあがりの見本（2026-09-06 しょう指示） ----
   いきなり編集画面を見せると仕上がりが想像できない、という指摘への対応。
   最初は見本だけを出し、柄を決めたら JS が .is-choosing を外して編集画面に切り替える。
   表示の出し分けはここ1か所に閉じてある（JS 側はクラスを足し引きするだけ）。 */
.sim-samples { grid-column: 1 / -1; }
.sim:not(.is-choosing) .sim-samples { display: none; }
.sim.is-choosing .sim-controls,
.sim.is-choosing .sim-preview { display: none; }

.sim-samples-title {
  font-family: var(--serif-ja); font-size: 19px; letter-spacing: .06em;
  font-weight: 600; margin: 2px 0 6px;
}
.sim-samples-lead { font-size: 14px; color: var(--ink-2); margin: 0 0 18px; line-height: 1.8; }
.sim-samples-lead b { color: var(--ink); }
.sim-samples-loading { font-size: 14px; color: var(--ink-2); padding: 30px 0; text-align: center; }
.sim-sample-grid {
  display: grid; gap: 18px; margin: 0 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* 見本1枚。押すと「その柄で編集が始まる」ので、リンクではなくボタンにしてある。 */
.sim-sample {
  display: grid; gap: 0; padding: 0; cursor: pointer; text-align: left;
  background: #fff; border: 1px solid rgba(184,150,62,.35); border-radius: 12px;
  overflow: hidden; font-family: inherit; color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.sim-sample:hover, .sim-sample:focus-visible {
  border-color: var(--gold-text); box-shadow: 0 10px 26px rgba(125,98,32,.18); transform: translateY(-2px);
}
.sim-sample canvas { display: block; width: 100%; height: auto; background: var(--cream-2); }
.sim-sample-cap { display: block; padding: 12px 14px 14px; }
.sim-sample-cap b { display: block; font-size: 13.5px; line-height: 1.6; word-break: keep-all; }
.sim-sample-cap small { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }
.sim-sample-go {
  display: inline-block; margin-top: 9px; padding: 5px 14px; border-radius: 999px;
  background: var(--gold-text); color: #fff; font-size: 12.5px; font-weight: 700;
  word-break: keep-all;
}
#sim-samples-skip { min-height: 48px; }
.sim-samples-keep { font-size: 13px; color: var(--gold-text); margin: 0 0 10px; }

/* 見本へ戻る道（2026-09-06 しょう指摘「一度選択すると元に戻れない」）。
   編集画面の先頭に置く。目立たせすぎると作業の邪魔になるので控えめにし、
   タップ領域だけは 44px を確保する。 */
.sim-back-to-samples {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 16px; padding: 8px 14px; min-height: 44px;
  background: transparent; border: 1px solid rgba(184,150,62,.45); border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--gold-text);
  cursor: pointer; transition: background .2s, border-color .2s;
}
.sim-back-to-samples:hover, .sim-back-to-samples:focus-visible {
  background: rgba(184,150,62,.1); border-color: var(--gold-text);
}
/* いま見ている柄の見本には印をつける。戻ったときにどれを選んだか分かるように。 */
.sim-sample.is-current { border-color: var(--gold-text); box-shadow: 0 0 0 2px rgba(184,150,62,.35); }
.sim-sample.is-current .sim-sample-go::before { content: '✓ '; }

@media (max-width: 860px) {
  /* スマホでは1枚ずつ大きく見せる。小さく3つ並べると、
     まさに「どんなものか分からない」という元の不満に戻ってしまう。 */
  .sim-sample-grid { grid-template-columns: 1fr; gap: 14px; }
  .sim-sample { grid-template-columns: 116px 1fr; align-items: center; }
  .sim-sample canvas { border-right: 1px solid rgba(184,150,62,.22); }
  .sim-samples-title { font-size: 17px; }
  #sim-samples-skip { width: 100%; }
}

.sim-step { margin-bottom: 26px; }
.sim-step-title { font-family: var(--serif-ja); font-size: 16px; letter-spacing: .1em; margin-bottom: 12px; font-weight: 600; }
.step-no {
  display: inline-flex; width: 26px; height: 26px; margin-right: 10px;
  align-items: center; justify-content: center; border-radius: 50%;
  background: var(--gold-text); color: #fff; font-family: var(--serif-en); font-size: 14px;
}
.sim-collections { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sim-collections button {
  padding: 12px 18px; border-radius: 999px; border: 1px solid var(--gold);
  background: transparent; color: var(--ink-2); font-family: var(--serif-en);
  font-size: 13px; letter-spacing: .12em; cursor: pointer; transition: .2s;
}
.sim-collections button[aria-selected="true"] { background: var(--gold-text); color: #fff; }
.sim-designs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sim-designs button {
  border: 2px solid transparent; border-radius: 6px; padding: 0; cursor: pointer;
  background: none; overflow: hidden; transition: .2s; position: relative;
}
.sim-designs button img { aspect-ratio: 3/4; object-fit: cover; width: 100%; height: auto; display: block; }
.sim-designs button.selected { border-color: var(--gold); box-shadow: 0 4px 14px rgba(184,150,62,.35); }
.sim-designs button .sim-design-label {
  position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; letter-spacing: .04em;
  min-height: 28px; display: flex; align-items: center; justify-content: center; gap: 5px;
  background: rgba(29,29,29,.82); color: #fff; padding: 3px 4px; line-height: 1.25;
}
.sim-design-label strong { font-size: 12px; white-space: nowrap; }
.sim-design-label small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.sim-note { font-size: 12px; color: var(--ink-2); margin-top: 10px; min-height: 1.6em; }
.sim-fields { display: grid; gap: 12px; }
.sim-fields label { font-size: 12px; letter-spacing: .08em; color: var(--ink-2); display: grid; gap: 5px; }
.sim-fields input, .sim-fields textarea {
  padding: 12px 14px; border: 1px solid rgba(184,150,62,.5); background: #fff;
  font-size: 16px; font-family: var(--sans-ja); border-radius: 4px; color: var(--ink);
}
.sim-fields textarea { min-height: 96px; line-height: 1.6; resize: vertical; }
.sim-fields textarea.sim-name-input { min-height: 76px; }
.sim-fields input:focus, .sim-fields textarea:focus { outline: 2px solid var(--gold-2); border-color: transparent; }
.sim-field-help { font-size: 11.5px; line-height: 1.6; letter-spacing: 0; color: var(--ink-2); }
.sim-fonts { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-fonts button {
  padding: 10px 14px; border: 1px solid rgba(184,150,62,.5); border-radius: 6px;
  background: #fff; cursor: pointer; display: grid; gap: 2px; text-align: center;
  min-width: 96px; transition: .2s; color: var(--ink);
}
.sim-fonts button .fsample { font-size: 17px; line-height: 1.3; }
.sim-fonts button .flabel {
  font-size: 10px; color: var(--ink-2); letter-spacing: .08em;
  /* 2026-09-05 しょう指摘の同類。375pxで「筆記体（フォーマ／ル）」と
     単語の途中で割れていた（実測）。括弧を含む語をひとまとまりとして扱う。
     どうしても入らないときだけ折る（anywhere）。 */
  word-break: keep-all; overflow-wrap: anywhere;
}
.sim-fonts button[aria-checked="true"] { border-color: var(--gold); background: rgba(184,150,62,.10); box-shadow: 0 3px 10px rgba(184,150,62,.25); }

.sim-preview { display: grid; align-content: start; gap: 16px; }
.sim-canvas-wrap { background: radial-gradient(120% 100% at 50% 0%, #fdfbf4 0%, #ece5d3 100%); border: 1px solid rgba(184,150,62,.3); padding: 18px 18px 10px; }
#sim-canvas { width: auto; height: auto; max-width: 100%; max-height: 640px; margin: 0 auto; display: block; filter: drop-shadow(0 18px 22px rgba(29,29,29,.30)); }
/* 状態表示（左）と表示切替（右）を canvas の上の1行に並べる。
   canvas の下にあった「切替ボタンの行」と「完成イメージ（…）」の注記は撤去した
   （2026-09-08 しょう指示）。注記の内容は注文確認画面と .sim-help に残っている。 */
.sim-canvas-head { display: flex; align-items: center; gap: 8px; }
.sim-view-toggle { display: flex; flex: 0 0 auto; gap: 6px; }
.sim-view-toggle button {
  padding: 8px 16px; font-size: 12px; letter-spacing: .06em; cursor: pointer;
  border: 1px solid var(--gold); border-radius: 999px; background: transparent;
  color: var(--gold-text); font-family: var(--sans-ja); transition: .2s;
}
/* 2026-09-07 1つのボタンに寄せたので、選択状態を表す [aria-pressed] の指定は外した。
   これは状態の表示ではなく「押すとこうなる」という操作ボタン。 */
.sim-view-toggle button:hover,
.sim-view-toggle button:focus-visible { background: var(--gold-text); color: #fff; }
.sim-actions { display: grid; gap: 10px; }
.sim-design-id { font-size: 13px; letter-spacing: .06em; color: var(--ink-2); }
.sim-design-id strong { font-family: var(--serif-en); font-size: 15px; color: var(--ink); }
.sim-help { font-size: 12px; color: var(--ink-2); }
.sim-draft {
  /* 2026-09-06 操作列の末尾へ移した（しょう指摘「一番上である必要はない」）。
     もう .sim のグリッド項目ではないので grid-column は持たない。 */
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 18px; padding: 11px 13px; border: 1px solid rgba(184,150,62,.28); border-radius: 7px;
  background: rgba(255,255,255,.72);
}
.sim-draft-copy { min-width: 0; }
.sim-draft-status { display: flex; align-items: center; gap: 8px; color: #45624c; font-size: 12.5px; font-weight: 700; }
.sim-draft-dot {
  width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #4f7858;
  box-shadow: 0 0 0 4px rgba(79,120,88,.12);
}
.sim-draft-note { margin-top: 3px; color: var(--ink-2); font-size: 11px; line-height: 1.55; }
.sim-draft .btn { min-width: 132px; min-height: 44px; padding: 8px 12px; }
.sim-draft .btn:disabled { cursor: not-allowed; opacity: .48; }
.sim-draft[data-state="saving"] .sim-draft-status { color: var(--gold-text); }
.sim-draft[data-state="saving"] .sim-draft-dot {
  background: var(--gold); box-shadow: 0 0 0 4px rgba(184,150,62,.14);
  animation: sim-live-pulse .8s ease-in-out infinite alternate;
}
.sim-draft[data-state="error"] .sim-draft-status { color: #8a2b2b; }
.sim-draft[data-state="error"] .sim-draft-dot { background: #a83d3d; box-shadow: 0 0 0 4px rgba(168,61,61,.12); }
.sim-live-status {
  display: flex; align-items: center; justify-content: flex-end; gap: 7px;
  min-height: 24px; margin: -4px 0 5px; color: #45624c; font-size: 12px; font-weight: 700;
}
.sim-live-dot {
  width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #4f7858;
  box-shadow: 0 0 0 4px rgba(79,120,88,.12);
}
.sim-live-status[data-state="updating"] { color: var(--gold-text); }
.sim-live-status[data-state="updating"] .sim-live-dot {
  background: var(--gold); box-shadow: 0 0 0 4px rgba(184,150,62,.14);
  animation: sim-live-pulse .8s ease-in-out infinite alternate;
}
.sim-live-status[data-state="error"] { color: #8a2b2b; }
.sim-live-status[data-state="error"] .sim-live-dot { background: #a83d3d; box-shadow: 0 0 0 4px rgba(168,61,61,.12); }
@keyframes sim-live-pulse { to { transform: scale(1.25); } }

.sim-review {
  border: 1px solid rgba(184,150,62,.38); border-radius: 8px; background: #fff;
  box-shadow: 0 8px 22px rgba(29,29,29,.06); overflow: hidden;
}
.sim-review-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: linear-gradient(135deg, rgba(184,150,62,.14), rgba(184,150,62,.04));
}
.sim-review-kicker { color: var(--gold-text); font-family: var(--serif-en); font-size: 10px; letter-spacing: .22em; }
.sim-review-head h3 { font-family: var(--serif-ja); font-size: 15px; letter-spacing: .08em; }
.sim-review-ready {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  color: #45624c; font-size: 11.5px; font-weight: 700;
}
.sim-review-ready > span:first-child {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: #4f7858; color: #fff; font-size: 12px;
}
.sim-review-ready[data-state="updating"] { color: var(--gold-text); }
.sim-review-ready[data-state="updating"] > span:first-child { background: var(--gold); }
.sim-review-ready[data-state="error"] { color: #8a2b2b; }
.sim-review-ready[data-state="error"] > span:first-child { background: #a83d3d; }
.sim-review-list > div {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) 52px; align-items: center; gap: 8px;
  min-height: 52px; padding: 4px 10px 4px 14px; border-top: 1px solid rgba(184,150,62,.18);
}
.sim-review-list dt { color: var(--ink-2); font-size: 11.5px; }
.sim-review-list dd {
  min-width: 0; color: var(--ink); font-size: 12.5px; line-height: 1.5;
  white-space: pre-line; overflow-wrap: anywhere;
}
.sim-review-list button {
  min-width: 52px; min-height: 44px; padding: 6px; border: 0; border-radius: 999px;
  background: transparent; color: var(--gold-text); font-size: 12px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sim-review-note { padding: 10px 14px 12px; border-top: 1px solid rgba(184,150,62,.18); color: var(--ink-2); font-size: 11.5px; line-height: 1.6; }
.sim-order-steps { display: grid; gap: 8px; }
.sim-order-steps .btn { width: 100%; }
.sim-order-steps .btn > span:first-child {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 7px;
  border: 1px solid currentColor; border-radius: 50%; font-size: 11px; line-height: 1;
}
@media (min-width: 861px) {
  .sim-preview {
    position: sticky; top: calc(var(--header-h) + 16px); align-self: start;
    max-height: calc(100vh - var(--header-h) - 16px); overflow-y: auto;
    scrollbar-width: thin;
  }
  #sim-canvas {
    /* ラベル内の文字が読める大きさを優先する。引く値は表示切替と注記のぶん */
    max-height: clamp(240px, calc(100vh - var(--header-h) - 300px), 560px);
  }
}
@media (max-width: 860px) {
  .sim { grid-template-columns: 1fr; padding: 16px; }
  .sim-designs { grid-template-columns: repeat(4, 1fr); }
}

/* ---- collections ---- */
.collections { background: var(--cream-2); }
.col-block { margin-bottom: 48px; }
.col-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--gold-pale); padding-bottom: 8px; margin-bottom: 20px; }
.col-head h3 { font-family: var(--serif-en); font-size: 22px; letter-spacing: .18em; font-weight: 600; }
.col-head .ja { font-family: var(--serif-ja); font-size: 12px; color: var(--ink-2); letter-spacing: .2em; }
.col-desc { font-size: 13px; color: var(--ink-2); margin-bottom: 18px; }
.col-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.col-item { text-align: center; }
.col-item img { height: 250px; width: auto; object-fit: contain; margin: 0 auto 10px; filter: drop-shadow(0 10px 14px rgba(29,29,29,.22)); }
.col-item .cid { font-family: var(--serif-en); color: var(--gold); font-size: 12px; letter-spacing: .14em; }
.col-item h4 { font-family: var(--serif-ja); font-size: 15px; font-weight: 600; letter-spacing: .06em; margin: 2px 0 6px; }
.col-item p { font-size: 12px; color: var(--ink-2); line-height: 1.7; text-align: left; }
.col-item .try-btn {
  margin-top: 10px; font-size: 12px; padding: 7px 16px;
}
.col-scenes { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 8px; }
.col-scenes span { font-size: 10px; border: 1px solid var(--gold-pale); color: var(--ink-2); border-radius: 999px; padding: 1px 8px; }
.collections-note { text-align: center; font-size: 12px; color: var(--ink-2); }
@media (max-width: 820px) { .col-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- byo ---- */
.byo { background: linear-gradient(135deg, #f3eee1, var(--cream)); }
.byo-tag { color: var(--gold); font-family: var(--serif-ja); letter-spacing: .16em; text-align: center; margin-bottom: 6px; }
.byo .sec-title { margin-bottom: 20px; }
.byo-copy { max-width: 640px; margin: 0 auto; text-align: center; }
.byo-list { list-style: none; margin: 18px 0; display: grid; gap: 8px; font-size: 14px; }
.byo-note { border: 1px solid var(--gold-pale); background: var(--cream-2); padding: 14px 18px; font-size: 13px; }

/* ---- wine ---- */
.wine { background: var(--cream-2); }
.wine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 30px; }
.wine-card { border: 1px solid var(--gold-pale); background: var(--cream); padding: 26px; text-align: center; }
.wine-badge { display: inline-block; color: #fff; font-family: var(--serif-en); letter-spacing: .2em; font-size: 12px; padding: 4px 16px; margin-bottom: 14px; }
.wine-badge.red { background: var(--wine); }
.wine-badge.white { background: var(--green); }
.wine-card img { height: 220px; width: auto; margin: 0 auto 14px; }
.wine-card h3 { font-family: var(--serif-ja); font-weight: 500; font-size: 14px; margin-bottom: 14px; }
.wine-card h3 strong { font-size: 20px; letter-spacing: .06em; }
.wine-card ul { list-style: none; text-align: left; display: grid; gap: 10px; font-size: 13px; color: var(--ink-2); }
.wine-card ul strong { color: var(--ink); display: block; }
.wine-spec { margin-top: 16px; font-family: var(--serif-ja); font-size: 12px; letter-spacing: .14em; color: var(--gold); border-top: 1px solid var(--gold-pale); padding-top: 12px; }
.wine-common { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; font-size: 12px; color: var(--ink-2); border: 1px solid var(--gold-pale); padding: 18px; }
.wine-common strong { color: var(--ink); font-family: var(--serif-ja); letter-spacing: .06em; }
@media (max-width: 780px) { .wine-grid, .wine-common { grid-template-columns: 1fr; } }

/* ---- price ---- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 760px; margin: 0 auto 14px; }
.price-card { border: 1px solid var(--gold); background: var(--cream-2); text-align: center; padding: 30px 10px; }
.price-qty {
  display: inline-block; padding: 0 18px 6px; margin-bottom: 14px;
  border-bottom: 1px solid var(--gold-pale);
  font-family: var(--sans-ja); font-size: 18px; font-weight: 700;
  line-height: 1.5; letter-spacing: .04em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.price-yen {
  font-family: var(--sans-ja); font-size: clamp(34px, 4vw, 40px); font-weight: 700;
  line-height: 1.25; letter-spacing: .01em; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.price-unit { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.price-total {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gold-pale);
  font-family: var(--sans-ja); font-size: 13px; color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums;
}
.price-total strong { font-size: 17px; font-weight: 700; color: var(--ink); }
/* 送料が別請求である事実は金額のすぐ隣に置く。注記へ追い出すと見落とされる */
.price-total span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.price-pay {
  display: block; margin-top: 12px; padding: 12px 10px;
  border: 1px solid var(--gold); background: transparent;
  font-family: var(--sans-ja); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; color: var(--ink); text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.price-pay:hover, .price-pay:focus-visible { background: var(--gold-text); color: #fff; }
.price-pay-note {
  max-width: 760px; margin: 0 auto 30px; padding: 18px 22px;
  border: 1px solid var(--gold-pale); background: var(--cream-2);
  font-size: 12px; line-height: 1.9; color: var(--ink-2);
}
.price-pay-note > p { margin-bottom: 8px; }
.price-pay-note strong { color: var(--ink); }
.price-pay-note ul { list-style: disc; padding-left: 1.3em; display: grid; gap: 4px; }
.price-note { text-align: center; font-size: 12px; color: var(--ink-2); margin-bottom: 30px; }
.price-option { max-width: 760px; margin: 0 auto; border: 1px solid var(--gold-pale); background: var(--cream-2); padding: 22px 26px; }
.price-option h3 { font-family: var(--serif-en); color: var(--gold); letter-spacing: .3em; text-align: center; font-size: 18px; }
.price-option h3 span { display: block; font-size: 10px; letter-spacing: .3em; color: var(--ink-2); margin: 2px 0 12px; }
.price-option ul { list-style: none; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); }
.price-option ul strong { color: var(--ink); }
.price-option > p { font-size: 11px; color: var(--ink-2); margin-top: 10px; text-align: center; }
@media (max-width: 680px) { .price-grid { grid-template-columns: 1fr; max-width: 320px; } }

/* ── そのまま注文する導線（シミュレーター内） ─────────────────
   375px 基準。操作要素は .ship-seg-btn を共用（44px 確保済み）。 */
.sim-order { border: 1px solid var(--gold); background: var(--cream-2);
  padding: 18px 16px; margin: 0 0 14px; }
.sim-order-title { font-family: var(--serif-ja); font-size: 16px; color: var(--ink);
  text-align: center; margin-bottom: 14px; }
.sim-order-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sim-order-label { flex: none; width: 56px; font-size: 13px; color: var(--ink-2); }
.sim-order-sum { margin: 14px 0 12px; text-align: center; font-size: 14px; color: var(--ink-2); }
.sim-order-sum strong { display: block; font-size: 24px; color: var(--ink);
  font-variant-numeric: tabular-nums; margin: 2px 0; }
.sim-order-sum span { display: block; font-size: 12px; }
.sim-order-sum.is-free span { color: var(--green); font-weight: 700; }
/* 注文欄のLINE。下に居座らせるのをやめたぶん、押す場所に置く。
   2026-09-09 しょう報告「ワインの色の上のボタンが中央からずれている」。
   この指定は @media (max-width: 900px) の中にあり、**PCでは効いていなかった**。
   PCでは .btn の inline-flex のまま自然幅で左端に置かれ、実測で
   パネルの中心より 71px 左にいた（見出しと決済ボタンは中心に揃っている）。
   もともと幅いっぱいにする意図だったので、画面幅によらず適用する。 */
.sim-order-line { display: block; width: 100%; margin: 0 0 12px; }
.sim-order-go { width: 100%; min-height: 52px; }
.sim-order-go[disabled] { opacity: .6; cursor: progress; }
.sim-order-status { margin-top: 8px; font-size: 13px; text-align: center; min-height: 1.2em; }
.sim-order-status.is-error { color: #9b2020; }
.sim-order-note { margin-top: 10px; font-size: 11.5px; line-height: 1.75; color: var(--ink-2); }
.sim-order-or { text-align: center; font-size: 12px; color: var(--ink-2); margin: 0 0 10px; }

@media (min-width: 681px) {
  .sim-order { padding: 22px 26px; }
  .sim-order-label { width: 72px; font-size: 14px; }
  .sim-order-row .ship-seg { max-width: 420px; }
}

/* ── 決済前の最終確認 ───────────────────────────────────────── */
.sim-confirm { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--gold-pale); }
.sim-confirm-title { font-family: var(--serif-ja); font-size: 15px; text-align: center;
  color: var(--ink); margin-bottom: 12px; }
.sim-confirm-img { display: block; width: 100%; max-width: 260px; margin: 0 auto 14px;
  border: 1px solid var(--gold-pale); background: #fff; }
.sim-confirm-sub { font-size: 12px; letter-spacing: .06em; color: var(--ink-2);
  margin-bottom: 4px; }
.sim-confirm-content { margin-bottom: 14px; }
.sim-confirm-list { font-size: 14px; margin-bottom: 10px; }
.sim-confirm-list > div { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--gold-pale); }
.sim-confirm-list dt { color: var(--ink-2); flex: none; }
.sim-confirm-list dd { color: var(--ink); text-align: right; }
.sim-confirm-list .sim-confirm-sum { border-bottom: none; padding-top: 9px; }
.sim-confirm-list .sim-confirm-sum dt { font-weight: 700; color: var(--ink); }
.sim-confirm-list .sim-confirm-sum dd { font-size: 21px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
/* 入力内容の欄。メッセージは改行を入れられるので、入力したままの形で見せる。
   長い文は折り返し、読む向きをそろえるため左揃えにする（.sim-confirm-list dd の
   右揃えを上書きする。ここより後に置かないと効かない）。 */
.sim-confirm-content-list dd { white-space: pre-wrap; overflow-wrap: anywhere;
  text-align: left; }
.sim-confirm-content-list > div { align-items: start; }
.sim-confirm-note { text-align: center; font-size: 12px; color: var(--ink-2); margin-bottom: 12px; }
.sim-confirm-note.is-free { color: var(--green); font-weight: 700; }
/* 2026-09-06 margin-top:8px と width:100% を外した。
   グリッド化前（「いいえ」が単独の全幅ボタンだった頃）の名残。
   margin-top を残したままボタンの順を入れ替えると、その 8px が「いいえ」と一緒に
   下へ移り、**2つのボタンの間隔だけが 10px→18px に開く**（グリッド項目は相殺しない）。
   幅は .sim-final-actions の列（fit-content）が決めるので、ここでは書かない。
   ※ 同じボタンに付いている .sim-order-go の width:100% は消さないこと。
      あちらは #so-go（この内容で確認する）と共用で、単独の全幅ボタンに要る。 */
.sim-confirm-back { min-height: 44px; }
.sim-confirm-caution { margin-top: 10px; font-size: 11.5px; line-height: 1.75; color: var(--ink-2); }

/* ── 送料と化粧箱の早見 ─────────────────────────────────────────
   375px を基準に組み、そこから広げている。操作要素はすべて 44px 以上。
   金額の単一の情報源は assets/js/motion.js の PRICING。 */
.ship-sim { max-width: 760px; margin: 0 auto 18px; border: 1px solid var(--gold-pale);
  background: var(--cream-2); padding: 18px 16px; }
.ship-sim-title { font-family: var(--serif-ja); font-size: 16px; color: var(--ink);
  text-align: center; margin-bottom: 14px; }
.ship-sim-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ship-sim-label { flex: none; width: 56px; font-size: 13px; color: var(--ink-2); }
.ship-seg { display: flex; flex: 1; gap: 6px; }
/* 枠線は --gold-pale だと白地に 1.40:1 で、ボタンの輪郭が見えない。
   非テキストの 3:1 を満たす #a08a5a（3.35:1）にする。 */
.ship-seg-btn { flex: 1; min-height: 44px; padding: 0 6px; font-family: inherit; font-size: 14px;
  color: var(--ink-2); background: #fff; border: 1px solid #a08a5a;
  cursor: pointer; transition: background-color .18s, color .18s, border-color .18s; }
.ship-seg-btn:hover, .ship-seg-btn:focus-visible { border-color: var(--gold); color: var(--ink); }
/* 選択中は --gold ではなく --gold-text を使う。白文字×--gold は 2.81:1 で
   WCAG AA(4.5:1) に届かない。--gold-text なら 4.89:1。既存の色変数なので
   新しい色を増やさずに済む。 */
.ship-seg-btn.is-on { background: var(--gold-text); border-color: var(--gold-text); color: #fff; font-weight: 700; }

.ship-sim-bill { margin: 14px 0 12px; font-size: 14px; }
.ship-sim-bill > div { display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; border-bottom: 1px dotted var(--gold-pale); }
.ship-sim-bill dt { color: var(--ink-2); }
.ship-sim-bill dd { font-variant-numeric: tabular-nums; color: var(--ink); }
.ship-sim-bill .ship-sim-sum { border-bottom: none; padding-top: 10px; }
.ship-sim-bill .ship-sim-sum dt { font-weight: 700; color: var(--ink); }
.ship-sim-bill .ship-sim-sum dd { font-size: 20px; font-weight: 700; }

.ship-gauge-track { height: 10px; background: #ece5d4; border-radius: 5px; overflow: hidden; }
/* 塗りと溝の対比も 3:1 が要る（非テキストのコントラスト）。
   --gold × #ece5d4 は 2.24:1、--gold-text なら 3.90:1。 */
.ship-gauge-fill { display: block; height: 100%; background: var(--gold-text);
  border-radius: 5px; transition: width .3s ease; }
.ship-gauge-text { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); text-align: center; }
.ship-gauge-text strong { color: var(--gold-text); font-size: 15px; }
.ship-sim.is-free .ship-gauge-fill { background: var(--green); }
.ship-sim.is-free .ship-gauge-text { color: var(--green); font-weight: 700; }
.ship-sim.is-free .ship-gauge-text strong { color: var(--green); }

.ship-sim-note { margin-top: 12px; font-size: 11.5px; line-height: 1.75; color: var(--ink-2); }
.ship-sim-note strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .ship-gauge-fill { transition: none; }
  .ship-seg-btn { transition: none; }
}

@media (min-width: 681px) {
  .ship-sim { padding: 24px 28px; }
  .ship-sim-label { width: 72px; font-size: 14px; }
  .ship-seg { max-width: 420px; }
  .ship-sim-note { text-align: center; }
}


/* ---- flow ---- */
.flow { background: var(--cream-2); }
.flow-list { list-style: none; max-width: 720px; margin: 0 auto 18px; display: grid; gap: 0; }
.flow-list li { display: flex; gap: 20px; align-items: flex-start; padding: 20px 6px; border-bottom: 1px solid var(--gold-pale); }
.flow-no { font-family: var(--serif-en); font-size: 30px; color: var(--gold); line-height: 1; min-width: 52px; }
.flow-list h3 { font-family: var(--serif-ja); font-size: 16px; letter-spacing: .08em; font-weight: 600; }
.flow-list p { font-size: 13px; color: var(--ink-2); }
.flow-note { text-align: center; font-size: 13px; color: var(--ink-2); margin-bottom: 22px; }
.flow-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- faq ---- */
.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq-list details { background: var(--cream-2); border: 1px solid var(--gold-pale); }
.faq-list summary {
  cursor: pointer; padding: 16px 44px 16px 18px; font-weight: 700; font-size: 14px;
  list-style: none; position: relative; letter-spacing: .03em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "Q"; font-family: var(--serif-en); color: var(--gold); margin-right: 10px; font-size: 17px; }
.faq-list summary::after { content: "＋"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--gold); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding: 0 18px 16px 44px; font-size: 13px; color: var(--ink-2); }

/* ---- access ---- */
.access { background: var(--cream-2); }
.access-grid { max-width: 640px; margin: 0 auto; }
.access-info { border: 1px solid var(--gold-pale); padding: 28px; background: var(--cream); }
.access-name { display: flex; align-items: center; gap: 12px; font-family: var(--serif-en); font-size: 22px; letter-spacing: .06em; margin-bottom: 16px; }
.access-name span { font-family: var(--serif-ja); font-size: 12px; color: var(--ink-2); letter-spacing: .2em; }
.access-info dl { display: grid; gap: 10px; margin-bottom: 16px; }
.access-info dl div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; font-size: 14px; }
.access-info dt { color: var(--gold); font-family: var(--serif-ja); letter-spacing: .2em; }
.access-info dd a { color: var(--ink); }
.access-note { font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--gold-pale); padding-top: 14px; }

/* ---- footer ---- */
.site-footer { background: var(--ink); color: #cfc9bd; text-align: center; padding: 34px 0 90px; }
.footer-age { font-size: 12px; letter-spacing: .08em; margin-bottom: 14px; color: #e8e2d4; }
.footer-copy { font-size: 11px; color: #8f8a80; }

/* ---- LINE FAB ---- */
.fab-line {
  position: fixed; right: 14px; bottom: 14px; z-index: 90;
  background: var(--line-green-strong); color: #fff; text-decoration: none; text-align: center;
  font-size: 11px; font-weight: 700; line-height: 1.35;
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(4,137,59,.42);
}



/* ---- 文言プリセット / 文字の向き / 写真 ---- */
.sim-preset-lead { font-size: 12px; color: var(--ink-2); margin-bottom: 8px; }
.sim-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.sim-presets button {
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(184,150,62,.5);
  background: #fff; color: var(--ink); font-size: 12.5px; cursor: pointer; transition: .2s;
  font-family: var(--sans-ja);
}
.sim-presets button.active, .sim-presets button:hover { background: var(--gold-text); border-color: var(--gold-text); color: #fff; }
.sim-textdir-row, .sim-photo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* クラス側で display を指定した要素は、UAの [hidden]{display:none} に勝ってしまう。
   JS側は hidden 属性で出し分けているので、ここで明示的に打ち消さないと隠れない。
   （これが無いと、写真を使えないデザインでも「写真を選ぶ」欄が出続ける） */
[hidden] { display: none !important; }
.sim-mini-label { font-size: 12px; letter-spacing: .08em; color: var(--ink-2); }
.sim-textdir { display: flex; gap: 6px; }
.sim-textdir button {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--gold);
  background: transparent; color: var(--gold-text); font-size: 12px; cursor: pointer; transition: .2s;
  font-family: var(--sans-ja);
}
.sim-textdir button[aria-pressed="true"] { background: var(--gold-text); color: #fff; }
.sim-photo-btn { cursor: pointer; }
.sim-photo-note { flex-basis: 100%; font-size: 11.5px; color: var(--ink-2); }

/* ---- 項目別の文字サイズ ---- */
.sim-size-settings {
  display: grid; gap: 8px; margin-top: 14px; padding: 11px 12px 12px;
  border: 1px solid var(--gold-pale); background: rgba(255,255,255,.5);
}
.sim-size-settings legend { padding-inline: 5px; }
.sim-size-help { font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.sim-size-controls { display: grid; gap: 3px; }
.sim-size-control {
  display: grid; grid-template-columns: minmax(76px, auto) minmax(0, 1fr) 46px;
  align-items: center; gap: 9px; min-height: 44px; color: var(--ink-2); font-size: 13px;
}
.sim-size-control input[type="range"] {
  width: 100%; height: 44px; margin: 0; accent-color: var(--gold); cursor: pointer; font-size: 16px;
}
.sim-size-control output {
  color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right;
}

/* ---- 文字色スウォッチ ---- */
.sim-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.color-swatch {
  width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%;
  border: 2px solid rgba(184,150,62,.35); background: var(--swatch, var(--cream-2));
  cursor: pointer; position: relative; transition: .2s;
}
.color-swatch::after {
  /* 白系スウォッチが背景と同化しないよう、常に薄い内枠を足す */
  content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08);
  pointer-events: none;
}
.color-swatch[aria-pressed="true"] {
  border-color: var(--ink); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold);
}
.color-swatch-default {
  width: auto; min-width: 56px; height: 44px; border-radius: 999px; padding: 0 14px;
  font-size: 11px; font-family: var(--sans-ja); color: var(--ink-2); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.color-swatch-default::after { content: none; }

/* ---- 事業者様向け ---- */
.biz { background: linear-gradient(135deg, #f3eee1, var(--cream)); }
.biz-points { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.biz-points li { background: var(--cream-2); border: 1px solid var(--gold-pale); padding: 22px 20px; display: grid; gap: 8px; }
.biz-points strong { font-family: var(--serif-ja); font-size: 15.5px; letter-spacing: .04em; }
.biz-points span { font-size: 13px; color: var(--ink-2); }
.biz-usecases { max-width: 640px; margin: 0 auto 18px; border: 1px solid var(--gold-pale); background: var(--cream-2); padding: 20px 26px; }
.biz-usecases h3 { font-family: var(--serif-ja); font-size: 14px; letter-spacing: .1em; margin-bottom: 10px; text-align: center; }
.biz-usecases ul { list-style: none; display: grid; gap: 8px; font-size: 14px; }
.biz-note { text-align: center; font-size: 13px; color: var(--ink-2); margin-bottom: 22px; }
@media (max-width: 780px) { .biz-points { grid-template-columns: 1fr; } }

/* ---- v2: 店舗地図 ---- */
.access-grid { display: grid; gap: 22px; }
@media (min-width: 861px) { .access-grid { grid-template-columns: 1fr 1fr; align-items: start; max-width: 100%; } }
.access-map { border: 1px solid var(--gold-pale); border-radius: 4px; overflow: hidden; line-height: 0; background: var(--cream); max-width: 100%; }
.access-map iframe { width: 100% !important; max-width: 100%; height: 330px; display: block; border: 0; }
@media (max-width: 860px) { .access-map iframe { height: 260px; } }

/* ---- v2: オプション価格バッジ ---- */
.opt-price {
  font-style: normal; font-weight: 700; font-size: 12px; letter-spacing: .04em;
  color: #fff; background: var(--gold-text); border-radius: 999px;
  padding: 2px 10px; margin-left: 6px; white-space: nowrap; vertical-align: 1px;
}

/* ===== mobile-first UX refresh 2026-08-04 ===== */
:root {
  /* --header-bar-h = ブランド行の高さ / --tabnav-h = タブ行の高さ。
     --header-h は「ヘッダー全体の高さ」で、追従プレビューの停止位置・
     アンカーの着地位置（scroll-margin-top）・メニューの高さがこれを見ている。
     タブ行を足したぶんを --header-h へ含めないと、それらが全部ずれる。 */
  --header-bar-h: 61px;
  --tabnav-h: 0px;                    /* PCではタブ行を出さない */
  --header-h: calc(var(--header-bar-h) + var(--tabnav-h));
  --mobile-cta-h: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body { font-size: 16px; }
button, input, select, textarea { font: inherit; }
.section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.skip-link {
  position: fixed; left: 12px; top: 8px; z-index: 1000;
  padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 4px;
  text-decoration: none; transform: translateY(-150%); transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

:where(a, button, input, summary):focus-visible {
  outline: 3px solid #0b6bcb;
  outline-offset: 3px;
}
.btn { min-height: 48px; }
.btn-s { min-height: 44px; }
.free-tag, .hero-badges small, .sim-designs button span, .sim-fonts button .flabel,
.col-item .cid, .col-scenes span, .price-unit,
.price-option h3 span, .price-option > p, .footer-copy { font-size: 12px; }

/* Header navigation */
.brand { min-height: 44px; }
.nav-toggle {
  display: none; min-width: 68px; min-height: 44px; padding: 4px 6px;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
  font-size: 12px; line-height: 1.2; font-weight: 700;
}
.nav-toggle-icon { display: grid; gap: 4px; width: 24px; margin: 0 auto 3px; }
.nav-toggle-icon span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.gnav-line { display: none; }

/* 見積への分岐と、条件を決める場所に置く補足。 */
.sim-order-consult { margin: 10px 0 14px; font-size: 13px; line-height: 1.7; }
.sim-order-consult a, .access-consult a, .uc-conclusion a, .uc-block p a, .uc-list a {
  text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere;
}
.sim-order-consult a { display: inline-block; padding: 8px 0; }
.sim-order-fee-note { margin: 8px 0 14px; color: var(--ink-2); font-size: 12px; line-height: 1.8; }
.sim-legibility-note:not([hidden]), #so-logo-note:not([hidden]) {
  padding: 12px 14px; margin: 12px 0; border: 1px solid var(--gold);
  border-radius: 8px; background: var(--cream); color: var(--ink); font-size: 13px; line-height: 1.8;
}
.ship-start { margin-top: 16px; max-width: 100%; }
.ship-selection-status { min-height: 1.5em; margin-top: 8px; color: var(--ink-2); font-size: 12px; }
.quote-notes-help { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-top: 6px; color: var(--ink-2); font-size: 12px; }
#q-notes-count { margin-left: auto; font-variant-numeric: tabular-nums; }
#q-notes-count.is-over-limit { color: #8a2433; font-weight: 700; }
.access-consult { padding: 14px 16px; margin-top: 14px; background: var(--cream); border: 1px solid var(--gold-pale); border-radius: 8px; font-size: 13px; line-height: 1.9; }
.access-consult p + p { margin-top: 8px; }

/* ナビの収容幅で切り替える。900px以下の下部CTA等とは独立させる。 */
@media (max-width: 1200px) {
  .nav-toggle { display: block; margin-left: auto; }
  #gnav {
    position: absolute; top: 100%; left: 0; right: 0;
    z-index: 95; display: none; max-height: calc(100dvh - var(--header-h) - var(--mobile-cta-h) - var(--safe-bottom));
    margin: 0; padding: 18px 20px 24px;
    overflow-y: auto; background: rgba(247, 244, 236, .985);
    overscroll-behavior: contain; border-top: 1px solid var(--gold-pale); flex-direction: column; align-items: stretch; gap: 4px;
  }
  #gnav.is-open { display: flex; }
  #gnav a {
    display: flex; align-items: center; min-height: 48px; padding: 8px 10px;
    border-bottom: 1px solid rgba(184,150,62,.2); font-size: 15px; font-weight: 700;
  }
  #gnav .gnav-line {
    display: flex; justify-content: center; margin-top: 12px; border: 0; border-radius: 999px;
    background: var(--line-green-strong); color: #fff;
  }

}
@media (max-width: 900px) {
  .header-line-cta { display: none; }
}

/* Simulator progress and controls */
/* 2026-09-05 ウィザード廃止。ステップ移動の「次へ／戻る」は消えたが、
   「注文内容を確認 ↓」だけは残しているので .sim-step-actions は隠さない。 */
.sim-step-actions { display: none; }
.sim-collections button, .sim-presets button, .sim-textdir button,
.sim-view-toggle button { min-height: 44px; }
.sim-designs button::after {
  content: "✓"; position: absolute; top: 5px; right: 5px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%; background: var(--gold-text); color: #fff;
  font-size: 14px; font-weight: 700; opacity: 0; transform: scale(.7); transition: .2s;
}
.sim-designs button.selected::after { opacity: 1; transform: scale(1); }
.sim-photo-note { font-size: 12px; }
.sim-photo-btn input { font-size: 16px; }
.sim-fonts button .flabel { line-height: 1.4; }
.sim-actions { padding: 16px; border: 1px solid var(--gold-pale); background: #fffdf8; }

/* Gallery cards make each option easier to scan and tap */
.col-item {
  display: flex; flex-direction: column; min-width: 0; padding: 14px;
  background: var(--cream); border: 1px solid var(--gold-pale); border-radius: 8px;
}
.col-item figcaption { display: flex; flex: 1; flex-direction: column; }
.col-item .try-btn { width: 100%; margin-top: auto; padding: 9px 10px; }
.access-info dd a { display: inline-flex; align-items: center; min-height: 44px; }
.flow-inline-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 3px; }

.fab-line-main { display: block; }
.fab-line-sub { display: none; }

/* Reduced motion: OS preference and deterministic QA query both use this state */
html[data-reduced-motion="true"] { scroll-behavior: auto; }
html[data-reduced-motion="true"] *, html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media (max-width: 900px) {
  body { padding-bottom: calc(var(--mobile-cta-h) + var(--safe-bottom)); }
  .header-inner { min-height: var(--header-bar-h); padding: 7px 12px 7px 14px; gap: 5px; }
  /* 切替ボタンが増えたぶん、ブランドは縮ませない。
     min-width:0 のままだと箱だけ縮み、nowrapの文字が箱からはみ出してボタンに重なる */
  .brand { flex: none; gap: 8px; }
  .brand img { width: 34px; height: 34px; }
  .brand-name { font-size: 15px; white-space: nowrap; }
  /* 375px幅でもブランド名・切替・メニューが1行に収まるよう詰める。
     横は詰めるが、高さは44pxのタップ領域を割らない */
  .ui-mode button { font-size: 11px; padding: 6px 6px; min-height: 44px; }

  .fab-line {
    left: 0; right: 0; bottom: 0; width: auto; height: calc(var(--mobile-cta-h) + var(--safe-bottom));
    padding: 6px 20px calc(6px + var(--safe-bottom)); border-radius: 0;
    gap: 10px; line-height: 1.25; font-size: 15px; box-shadow: 0 -5px 18px rgba(6,199,85,.22);
  }
  .fab-line::before { content: "LINE"; font-family: var(--sans-ja); font-size: 11px; letter-spacing: .04em; }
  .fab-line-sub { display: block; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.5); font-size: 12px; font-weight: 500; }
  .site-footer { padding-bottom: 36px; }
}

@media (max-width: 860px) {
  .section { padding: 56px 0; }
  .sec-lead { margin-bottom: 28px; line-height: 1.75; }

  .sim { gap: 16px; padding: 14px; }
  /* 途中保存の知らせは「注記」であって「パネル」ではない。
     2026-09-06 しょう指摘「スペースを取りすぎ」。実測で 313×123px ＝ 画面の15%。
     内訳は 状態の文43px（38文字で3行）＋詳細の行44px＋余白と枠。
     枠と背景を外して1行に収め、44px（詳細を開くタップ領域）だけ残す。
     入らない端末では素直に折り返す。 */
  .sim-draft {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 0 12px; padding: 0; border: 0; background: none; border-radius: 0;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gold-pale);
  }
  .sim-draft-status { font-size: 11.5px; font-weight: 400; gap: 6px; }
  .sim-draft-dot { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(79,120,88,.12); }
  .sim-draft-more { margin-top: 0; }
  .sim-draft-more > summary { font-size: 11.5px; min-height: 44px; }
  /* 開いたら説明とボタンが要るので、そのときだけ行を独占する。 */
  .sim-draft-more[open] { flex: 1 0 100%; }
  .sim-draft-note { font-size: 10.5px; }
  .sim-draft .btn { width: 100%; min-width: 0; }
  .sim-preview { display: contents; }
  .sim-canvas-wrap {
    order: -1; position: sticky; top: calc(var(--header-h) + 8px); z-index: 40;
    padding: 8px 8px 4px; border-radius: 6px;
    box-shadow: 0 8px 22px rgba(29,29,29,.16);
  }
  .sim-live-status { flex: 1; min-width: 0; min-height: 20px; margin: 0; font-size: 11.5px; }
  .sim-controls { order: 0; }
  .sim-actions { order: 1; }
  /* 2026-09-05 1画面統合で操作列がプレビューの下に全部並ぶため、
     追従プレビューを252→200pxに抑えて可視帯を約52px広げる。
     「打っている最中も仕上がりが見える」ことと、入力欄が画面内に入ることの折り合い。 */
  /* canvas の下の2行（切替・注記）を無くしたぶん、プレビュー本体を大きくする。
     200 → 252px。枠が押さえる高さ（--sim-slot 316px）は変えないので、
     下の内容は1pxも動かない。 */
  #sim-canvas { max-height: min(252px, 34vh); }
  .sim-view-toggle button { padding: 6px 10px; font-size: 12px; }
  .sim-actions { gap: 9px; padding: 12px; }
  .sim-review-list > div { grid-template-columns: 62px minmax(0, 1fr) 48px; padding-left: 11px; padding-right: 6px; }
  .sim-review-list button { min-width: 48px; }
  .sim-help { font-size: 12px; line-height: 1.65; }

  /* 2026-09-05 1画面統合。3ブロックが縦に続くので、どこからどこまでが
     ひとまとまりかを線と余白で示す（ステッパーが担っていた役割の代わり）。 */
  .sim-step { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--gold-pale); }
  .sim-step:last-of-type { margin-bottom: 4px; padding-bottom: 0; border-bottom: 0; }
  .sim-step-title { font-size: 17px; }
  .sim-step-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
  .sim-step-actions-next { grid-template-columns: 1fr; }
  .sim-step-actions .btn { width: 100%; padding: 11px 10px; font-size: 13px; }
  /* グリッド項目の min-content で親トラックが膨らむのを止める。
     これが無いと、下の横スクロールレール（flex-wrap:nowrap）の min-content が
     662px になり、341pxの枠を押し広げて中身が右へはみ出す。
     html に overflow-x:clip があるため scrollWidth では気づけない。実測で発覚。 */
  .sim-draft, .sim-controls, .sim-canvas-wrap, .sim-actions { min-width: 0; }

  /* コレクションは2列3行(148px)だと、その下の柄タイルと文字入力が画面外へ出る。
     1行の横スクロールにして96px節約する。件数が6つなので端まで指が届く。 */
  .sim-collections {
    min-width: 0;
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; margin-bottom: 12px;
  }
  .sim-collections::-webkit-scrollbar { height: 3px; }
  .sim-collections::-webkit-scrollbar-thumb { background: var(--gold-pale); border-radius: 999px; }
  .sim-collections button {
    flex: 0 0 auto; width: auto; min-height: 44px; padding: 8px 14px; font-size: 12px;
    white-space: nowrap; scroll-snap-align: start;
  }
  .sim-designs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .sim-designs button { min-height: 96px; }
  .sim-designs[data-collection="birthday_v3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sim-designs[data-collection="birthday_v3"] button { min-height: 120px; }
  .sim-designs[data-collection="birthday_v3"] .sim-design-label { min-height: 34px; flex-direction: column; gap: 0; padding-block: 3px; }
  .sim-designs[data-collection="birthday_v3"] .sim-design-label small { max-width: 100%; font-size: 9px; }
  .sim-presets button, .sim-textdir button { padding: 8px 12px; }
  .sim-fields label { font-size: 13px; }
  .sim-fonts { display: grid; grid-template-columns: 1fr 1fr; }
  .sim-fonts button { min-width: 0; min-height: 56px; }
}

@media (max-width: 860px) and (max-height: 700px) {
  /* 小型端末では、追従プレビューが編集中の操作欄を覆わない高さに抑える。
     ここも2行ぶん空いたので 176 → 214px。 */
  #sim-canvas { max-height: min(214px, 32vh); }
}

@media (max-width: 480px) {
  .container { padding-inline: 16px; }
  .hero-inner { padding: 18px 16px 32px; gap: 12px; }
  .hero-visual img { max-height: 170px; }
  .hero-lead { font-size: 17px; line-height: 1.65; }
  .hero-title { font-size: 36px; letter-spacing: .08em; line-height: 1; }
  .hero-sub { letter-spacing: .2em; }
  .hero-desc { font-size: 14px; line-height: 1.7; }
  .hero-cta { display: grid; grid-template-columns: 1fr; gap: 9px; margin-bottom: 22px; }
  .hero-cta .btn { width: 100%; }
  .hero-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .hero-badges li { min-width: 0; padding: 9px 3px; font-size: 12px; }

  .scene-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .scene-grid li { padding: 14px 5px; border: 1px solid var(--gold-pale); background: var(--cream); }
  .scene-icon { margin-bottom: 5px; }

  .col-block { margin-bottom: 40px; }
  .col-head { display: block; }
  .col-head h3 { font-size: 20px; }
  .col-grid { gap: 10px; }
  .col-item { padding: 10px 8px; }
  .col-item img { height: 190px; }
  .col-item h4 { font-size: 14px; }
  .col-item p { font-size: 12px; line-height: 1.6; }
  .col-scenes { margin-bottom: 10px; }
  .col-scenes span { padding: 2px 5px; }

  .price-card { padding-block: 22px; }
  .access-info { padding: 20px 16px; }
  .access-info dl div { grid-template-columns: 58px 1fr; gap: 6px; }
  .access-info dd { overflow-wrap: anywhere; }
  .byo-note small { display: block; margin-top: 8px; font-size: 12px; line-height: 1.7; }
}

/* ===== 20歳以上の年齢確認ゲート ===== */
html.age-unverified, html.age-unverified body { overflow: hidden; }
html.age-unverified #site-shell {
  display: block; pointer-events: none; user-select: none;
}
html.age-verified #site-shell { display: block; pointer-events: auto; user-select: auto; }

.age-gate {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(160deg, rgba(255,253,248,.38), rgba(233,223,201,.58));
  -webkit-backdrop-filter: blur(7px) saturate(.78);
  backdrop-filter: blur(7px) saturate(.78);
}
.age-gate[hidden], html.age-verified .age-gate { display: none; }
.age-gate-card {
  width: min(100%, 500px); padding: 30px 32px 26px; text-align: center;
  background: rgba(255,253,248,.96); border: 1px solid rgba(184,150,62,.55);
  box-shadow: 0 24px 70px rgba(29,29,29,.18); border-radius: 10px;
  animation: age-gate-enter .36s ease-out both;
}
.age-gate-logo { width: 56px; height: 56px; margin: 0 auto 6px; border-radius: 50%; }
.age-gate-en {
  color: var(--gold-text); font-family: var(--serif-en); font-size: 13px;
  letter-spacing: .25em; line-height: 1.4;
}
.age-gate-mark {
  display: grid; place-items: center; width: 68px; height: 68px; margin: 16px auto 12px;
  border: 2px solid var(--gold); border-radius: 50%; color: var(--gold-text);
  font-family: var(--serif-en); font-size: 35px; font-weight: 600; line-height: 1;
}
.age-gate-card .age-gate-title {
  margin-bottom: 12px; font-family: var(--serif-ja); font-size: 27px;
  letter-spacing: .14em; font-weight: 600;
}
.age-gate-overview {
  margin: 0 auto 14px; padding: 13px 14px; max-width: 390px;
  border: 1px solid var(--gold-pale); border-radius: 7px; background: rgba(247,244,236,.72);
  color: var(--ink-2); font-size: 13px; line-height: 1.65; text-align: left;
}
.age-gate-overview > p { margin-bottom: 7px; color: var(--ink); text-align: center; }
.age-gate-overview ul { display: grid; grid-template-columns: 1fr; gap: 2px; list-style: none; }
.age-gate-overview li::before { content: "✓"; margin-right: 7px; color: var(--gold-text); font-weight: 700; }
.age-gate-question { color: var(--ink-2); font-size: 15px; line-height: 1.8; }
.age-gate-question strong { display: block; margin-top: 8px; color: var(--ink); font-size: 19px; }
.age-gate-actions { display: grid; gap: 10px; margin: 22px auto 18px; max-width: 340px; }
.age-gate-actions .btn { width: 100%; min-height: 52px; }
.age-gate-denied {
  margin: 22px 0 18px; padding: 16px; border: 1px solid #b64b4b; border-radius: 6px;
  background: #fff5f3; color: #782b2b; font-weight: 700; line-height: 1.7;
}
.age-gate-card.is-denied .age-gate-actions { display: none; }
.age-gate-law { padding-top: 16px; border-top: 1px solid var(--gold-pale); font-size: 13px; font-weight: 700; }
.age-gate-privacy { margin-top: 6px; color: var(--ink-2); font-size: 12px; line-height: 1.6; }
.age-gate-noscript { margin-top: 10px; color: #782b2b; font-size: 13px; font-weight: 700; }

@keyframes age-gate-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .age-gate { align-items: start; padding-inline: 14px; }
  .age-gate-card { margin-block: auto; padding: 22px 18px 20px; }
  .age-gate-logo { width: 48px; height: 48px; }
  .age-gate-mark { width: 60px; height: 60px; margin-block: 12px 9px; font-size: 31px; }
  .age-gate-card .age-gate-title { font-size: 24px; }
  .age-gate-overview { padding: 11px 12px; font-size: 12px; }
  .age-gate-question { font-size: 14px; }
  .age-gate-question strong { font-size: 18px; }
  .age-gate-actions { margin-block: 18px 14px; }
}

/* ===== v3: ペルソナ再定義（2026-08-06 初稿） ===== */

/* ---- 用途タイル ---- */
.usecase-grid { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.usecase-card {
  background: var(--cream); border: 1px solid var(--gold-pale); border-radius: 8px;
  padding: 20px 14px 16px; text-align: center; display: flex; flex-direction: column; gap: 6px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.usecase-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold); }
.usecase-card .scene-icon { font-size: 30px; margin-bottom: 2px; }
.usecase-card h3 { font-family: var(--serif-ja); font-size: 15px; font-weight: 600; letter-spacing: .05em; }
.usecase-card p { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; text-align: left; }
.usecase-card p small { display: block; margin-top: 4px; font-size: 11px; }
/* 用途タイルから各用途ページへの導線。カード下端に揃えて、タップ領域は44pxを確保する */
.usecase-link {
  margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center;
  min-height: 44px; font-size: 12.5px; font-weight: 700; color: var(--gold-text);
  text-decoration: none; text-underline-offset: 3px;
}
.usecase-link:hover { text-decoration: underline; }
@media (max-width: 900px) { .usecase-grid { grid-template-columns: repeat(2, 1fr); } .usecase-card:nth-last-child(1):nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 480px) { .usecase-grid { gap: 9px; } .usecase-card { padding: 14px 12px 12px; } }

/* ---- 事業者様セクション v3 ---- */
.biz-points { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; }
.biz-em { color: var(--gold-text); }
.biz-usecases ul { font-size: 13.5px; }
@media (max-width: 780px) { .biz-points { grid-template-columns: 1fr; } }

/* ---- 見積依頼フォーム ---- */
.quote-box {
  max-width: 760px; margin: 34px auto 0; background: var(--cream-2);
  border: 1px solid var(--gold); padding: 28px 26px;
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.quote-title { font-family: var(--serif-ja); font-size: 19px; letter-spacing: .12em; font-weight: 600; text-align: center; }
.quote-lead { text-align: center; font-size: 13px; color: var(--ink-2); margin: 8px 0 20px; }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.quote-form label { display: grid; gap: 5px; font-size: 13px; letter-spacing: .04em; color: var(--ink-2); }
.quote-form input, .quote-form select, .quote-form textarea {
  padding: 12px 14px; border: 1px solid rgba(184,150,62,.5); background: #fff;
  font-size: 16px; font-family: var(--sans-ja); border-radius: 4px; color: var(--ink);
  min-height: 48px;
}
.quote-form textarea { min-height: 108px; resize: vertical; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: 2px solid var(--gold-2); border-color: transparent; }
.quote-honeypot {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
.quote-form .req {
  font-style: normal; font-size: 10px; font-weight: 700; color: #fff;
  background: var(--wine); border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px;
}
.quote-notes { margin-bottom: 12px; }
.quote-consent {
  grid-template-columns: 24px minmax(0, 1fr) !important; align-items: start; gap: 10px !important;
  padding: 12px; border: 1px solid var(--gold-pale); background: #fff; color: var(--ink) !important;
}
.quote-consent input { width: 22px; height: 22px; min-height: 22px; margin: 1px 0 0; padding: 0; accent-color: var(--wine); }
.quote-consent span { font-size: 13px; line-height: 1.7; }
.quote-age { font-size: 12px; color: var(--ink-2); margin: 9px 0 14px; }
.quote-actions { display: grid; gap: 10px; max-width: 460px; margin: 0 auto 10px; }
.quote-actions .btn { width: 100%; }
.quote-feedback {
  max-width: 620px; margin: 0 auto 12px; padding: 11px 13px; border: 1px solid var(--gold-pale);
  background: rgba(255,255,255,.72); color: var(--ink-2); font-size: 12.5px; line-height: 1.7; text-align: center;
}
.quote-feedback[data-state="sending"] { border-color: var(--gold); color: var(--gold-text); }
.quote-feedback[data-state="success"] { border-color: #4f7858; background: #f1f8f2; color: #2f5b37; font-weight: 700; }
.quote-feedback[data-state="error"] { border-color: #a13d3d; background: #fff4f4; color: #842d2d; font-weight: 700; }
.quote-fallback { text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.quote-fallback a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-text); font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 640px) { .quote-grid { grid-template-columns: 1fr; } .quote-box { padding: 20px 16px; } }

/* ---- フッター規約リンク ---- */
.footer-links { margin-bottom: 10px; }
.footer-links a { color: #cfc9bd; font-size: 12px; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.footer-links a:hover { color: #fff; }
.footer-company { font-size: 12px; color: #a9a396; margin-bottom: 6px; }

/* ---- ナビ現在地 ---- */
.gnav a.is-current { color: var(--gold); }

/* ---- 動き: スクロール表示（JS有効かつアニメ非抑制時のみ効かせる） ---- */
html.js-motion .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js-motion .reveal.is-visible { opacity: 1; transform: none; }

/* ---- 動き: マイクロインタラクション ---- */
.btn:active { transform: translateY(1px) scale(.99); }
.btn-gold:active, .btn-line:active { box-shadow: 0 3px 10px rgba(29,29,29,.25); }
.faq-list details p { animation: faq-open .3s ease both; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq-list summary::after { transition: transform .25s ease; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(180deg); }

/* ---- v3: 企業ロゴ／素材の配置コントロール ---- */
.sim-check {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.sim-check input { width: 20px; height: 20px; accent-color: var(--gold); }

.sim-chip-settings {
  display: grid; gap: 8px; margin-top: 14px; padding: 11px 12px 12px;
  border: 1px solid var(--gold-pale); background: rgba(255,255,255,.5);
}
.sim-chip-settings legend { padding-inline: 5px; }
.sim-chip-help { font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.sim-chip-options { display: grid; grid-template-columns: 1.35fr 1fr .8fr; gap: 8px; }
.sim-chip-option {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; min-height: 44px; padding: 8px 6px; border: 1px solid rgba(184,150,62,.42);
  border-radius: 4px; background: #fff; color: var(--ink-2); font-size: 13px;
  cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.sim-chip-option:has(input:checked) {
  border-color: var(--gold); background: var(--cream-2); color: var(--ink); font-weight: 700;
}
.sim-chip-option input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--gold); }
.sim-chip-option span { white-space: nowrap; }

.sim-layer-row { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gold-pale); }
.sim-layer-lead { margin-top: -4px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.sim-layers { display: flex; flex-wrap: wrap; gap: 7px; }
.sim-layers button {
  padding: 9px 16px; min-height: 44px; border-radius: 999px; border: 1px solid var(--gold);
  background: #fff; color: var(--gold-text); font-family: var(--sans-ja); font-size: 13px;
  cursor: pointer; transition: .2s;
}
.sim-layers button[aria-pressed="true"] { background: var(--gold-text); color: #fff; }
.sim-layer-ctrl {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  border: 1px solid var(--gold-pale); background: var(--cream-2); padding: 14px;
}
.sim-layer-hint { grid-column: 1 / -1; font-size: 12px; color: var(--ink-2); }
.layer-pad {
  display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px);
  gap: 4px; justify-content: center;
}
.layer-pad button {
  min-width: 44px; min-height: 44px; border: 1px solid var(--gold); border-radius: 6px;
  background: #fff; color: var(--gold-text); font-size: 17px; cursor: pointer; line-height: 1;
}
.layer-pad button:active { background: var(--gold-text); color: #fff; }
.layer-pad [data-move="up"] { grid-area: 1 / 2; }
.layer-pad [data-move="left"] { grid-area: 2 / 1; }
.layer-pad [data-move="down"] { grid-area: 2 / 2; }
.layer-pad [data-move="right"] { grid-area: 2 / 3; }
.layer-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sim-layer-ctrl.is-text-layer .layer-buttons { grid-template-columns: 1fr; }
.layer-buttons .btn { width: 100%; padding: 9px 8px; font-size: 12.5px; }
#layer-front[aria-pressed="true"] { background: var(--gold-text); border-color: var(--gold-text); color: #fff; }
/* 配置編集中はプレビューが操作対象であることを示す */
.sim-canvas-wrap.is-layer-editing { outline: 2px dashed var(--gold); outline-offset: 3px; }
.sim-canvas-wrap.is-layer-editing #sim-canvas,
.sim-canvas-wrap.is-adjusting #sim-canvas { cursor: move; touch-action: none; }
@media (max-width: 560px) {
  .sim-layer-ctrl { grid-template-columns: 1fr; justify-items: center; }
  .layer-buttons { width: 100%; }
}

/* ---- 動き: ヒーローの登場とボトルの浮遊 ---- */
@media (hover: hover) and (pointer: fine) {
  .hero-visual img { transition: transform .3s ease; will-change: transform; }
}
html.js-motion .hero-copy > * { animation: hero-in .7s ease both; }
html.js-motion .hero-copy > *:nth-child(2) { animation-delay: .08s; }
html.js-motion .hero-copy > *:nth-child(3) { animation-delay: .16s; }
html.js-motion .hero-copy > *:nth-child(4) { animation-delay: .24s; }
html.js-motion .hero-copy > *:nth-child(5) { animation-delay: .32s; }
html.js-motion .hero-copy > *:nth-child(6) { animation-delay: .40s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ヒーロー本文の中で、注文単位だけは目に留まるようにする */
.hero-desc-em { color: var(--ink); font-weight: 700; }

/* 和文の大見出し。メディアクエリ内の .hero-title より後に置いて確実に適用する */
.hero-title--ja {
  font-family: var(--serif-ja); letter-spacing: .06em; line-height: 1.34; margin-top: 10px;
  /* 375px幅で「世界にひとつだけの」が1行に収まる大きさ。
     これを超えると『の』だけが次の行に落ちる */
  font-size: clamp(26px, 8.4vw, 58px);
}

/* フッターの規程リンク。会社名と著作権表示の間に置く */
/* 色は964-966行の定義（#cfc9bd, 暗いフッター背景に対し10.23:1）を使う。
   ここで --ink-2 を指定すると 1.80:1 になり、法定表記への導線が読めなくなる。 */
.footer-links { font-size: 12px; margin-top: 6px; }
.footer-links a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .footer-links a { display: inline-flex; align-items: center; min-height: 44px; } }

/* ファイル選択の input。hidden(display:none) だとキーボードで到達できず、
   labelはフォーカス不可なのでボタンが完全に押せなくなる。
   見た目だけ隠し、フォーカスは受けられるようにする。 */
.file-input-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sim-photo-btn:focus-within { outline: 3px solid #0b6bcb; outline-offset: 3px; }

/* 「ここで決めきらなくてよい」ことを、作り込む手前と注文の手前で明示する。
   自作の途中で「これで正解なのか」が分からなくなって離れてしまうのを防ぐのが目的。 */
.sim-reassure {
  margin-top: 12px;
  padding: 10px 14px;
  border-left: 2px solid var(--gold, #b8963e);
  background: rgba(184, 150, 62, .07);
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2, #5d574e);
}
/* 動かす対象は「プレビューを直接タップ」で選ぶ方式に変えたため、
   対象を選ぶボタン列（.sim-layers）は廃止した。 */
.sim-layers { display: none; }
/* 作れなくて詰まる瞬間はエディタの中で起きるので、相談導線もエディタの中に置く。
   目立ちすぎると「自分で作らなくていい」と読めてしまうので、案内の強さに留める。 */
.sim-help-line {
  margin: 6px 0 14px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2, #5d574e);
}
.sim-help-line a { color: var(--gold, #b8963e); font-weight: 700; }


/* ===== 2026-09-05 1画面統合と読み物分離で追加した部品 ===== */

/* 途中保存バーの折りたたみ。開けば従来の文言とボタンが全部出る。 */
.sim-draft-more { margin-top: 6px; }
.sim-draft-more > summary {
  cursor: pointer; font-size: 11.5px; color: var(--ink-2);
  display: inline-flex; align-items: center; min-height: 44px;
}
.sim-draft-more[open] > summary { margin-bottom: 4px; }
.sim-draft-more .sim-draft-note { margin-bottom: 8px; }

/* グローバルナビの「別タブで開く」印 */
.gnav-ext { margin-left: 3px; font-size: .85em; opacity: .7; }

/* 読み物ページへの入口カード（#more） */
.more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.more-card {
  display: grid; gap: 5px; align-content: start;
  background: var(--cream-2); border: 1px solid var(--gold-pale);
  padding: 18px 16px; min-height: 44px; color: inherit; text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.more-card:hover, .more-card:focus-visible { border-color: var(--gold); box-shadow: var(--shadow); }
.more-ico { font-size: 22px; line-height: 1; }
.more-card strong { font-family: var(--serif-ja); font-size: 15px; letter-spacing: .04em; }
.more-card small { font-size: 12px; color: var(--ink-2); line-height: 1.7; }

/* フッターの店舗1行（#access を別ページへ移したので、住所の可視表示をここに残す） */
.footer-nap { font-size: 12px; color: var(--ink-2); margin-bottom: 6px; line-height: 1.9; }
.footer-nap a { color: var(--gold-text); }

@media (max-width: 860px) {
  .more-grid { grid-template-columns: 1fr; gap: 10px; }
  .more-card { grid-template-columns: 34px 1fr; grid-template-areas: "ico ttl" "ico sub"; padding: 14px; }
  .more-ico { grid-area: ico; align-self: center; }
  .more-card strong { grid-area: ttl; }
  .more-card small { grid-area: sub; }
}

/* 文中リンク「LINEで相談しながら決められます」の当たり判定を44pxまで広げる。
   1画面統合でこのリンクが常時見えるようになったため（従来はステップ2の中で隠れていた）。
   段落の途中にあるので見た目の行間は変えず、疑似要素でタップ領域だけ広げる。 */
.sim-help-line a { position: relative; display: inline-block; }
.sim-help-line a::after { content: ""; position: absolute; inset: -13px -6px; }


/* ===== 2026-09-05 打ち合わせ v4 ===== */

/* 文字の大きさ調整を、各入力欄の直下に常時出す。
   従来は「プレビューの文字をタップして選ぶ」が前提で、その手順に気づけず
   「押しても反応しない」と受け取られていた（打ち合わせ #5#6#7）。 */
/* 2026-09-05 監査で判明: ボタンを右端に置くと、右上のミニプレビュー（.is-pip）が
   ちょうどこの位置に重なり、「＋」を押したつもりでプレビュー拡大が開いていた。
   375px の実測で、message+ は30サンプル中12点が小窓に覆われていた。
   #5#6#7 を直すための操作系が、別の追加機能に潰されていた形。
   小窓は右上に居るので、ボタンは**左寄せ**にして重なりを構造的に無くす。 */
.sim-size-row {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  justify-content: flex-start;
}
/* ボタンを行の先頭へ。ラベルを先に置くと約150px押し出され、
   ボタン右端が 252px まで伸びて小窓（x228〜349）に掛かっていた（実測）。
   ボタンを左端に固定すれば、小窓の位置に関係なく必ず押せる。 */
.sim-size-btn { order: -1; }
.sim-size-label { font-size: 12px; color: var(--ink-2); }
.sim-size-btn {
  min-width: 44px; min-height: 44px; padding: 0;
  border: 1px solid var(--gold); border-radius: 8px; background: #fff;
  color: var(--gold-text); font-size: 17px; line-height: 1; cursor: pointer;
}
.sim-size-btn:hover:not(:disabled) { background: var(--cream-2); }
.sim-size-btn:disabled { opacity: .38; cursor: default; }
/* 枠いっぱいで「大きく」が効かないときに理由を出す。
   押せるのに何も起きない、が最も混乱させるため。 */
.sim-size-note {
  display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.6; color: var(--warn, #c07a13);
}

/* 詳しい調整（向き・色・配置）は既定で閉じる。
   「おじいちゃん・おばあちゃんでも作れる」水準にするため、既定の画面から外す。
   消してはいない（開けば従来どおり全部できる）。 */
.sim-advanced { margin-top: 14px; border-top: 1px solid var(--gold-pale); padding-top: 10px; }
.sim-advanced > summary {
  cursor: pointer; display: flex; align-items: center; min-height: 44px;
  font-size: 13px; font-weight: 700; color: var(--gold-text); letter-spacing: .04em;
}
.sim-advanced[open] > summary { margin-bottom: 6px; }

/* 最終確認「これでよろしいですか」 */
.sim-final {
  margin-top: 16px; padding: 16px; border: 1px solid var(--gold);
  background: var(--cream-2); text-align: center;
}
.sim-final p { font-family: var(--serif-ja); font-size: 16px; margin-bottom: 12px; }
/* 決めの一手（はい／いいえ）は幅に関係なく縦に積む。
   2026-09-05 しょう指摘: 「はい（お支払い／へ）」と謎の位置で改行される。
   実測すると **PC(1280px)でもモバイル(375px)でも同じ割れ方**をしていた。
   横2列だと1つあたりの幅が足りず、括弧の途中で割れる。
   押し間違えると決済へ進んでしまう場面なので、1行に収める。

   2026-09-06 並び順を「はい＝上」に直した。理由は行動経済学ではなく**サイト内の一貫性**。
   全訪問者が必ず踏む年齢確認ゲート（.age-gate-actions）が同じ構造・同じ配色で
   「金＝はい＝上」なので、いちばん金額のかかる場面でだけ反転させない。
   ※ 旧コメントにあった「はいを下＝親指の届く位置」は成立しないので消した。
     .sim-confirm は position:fixed でも sticky でもない通常フローの節で、
     ボタンの下に注意書きも続く。**並び順ではボタンの画面上の位置を決められない。**
     元にした thumb zone の図は、作者本人が後年に誤りと認めている。
   ※ 縦2択の上下順を検証した査読済みの実証は見つからなかった。
     入れ替えで離脱率が下がるとは言えない（このトラフィックでは測れない）。

   2026-09-06 しょう指摘: 全幅にしたら今度は「枠が広すぎて余分な空白がある」。
   文言の長さに合わせて短くし、はい・いいえの幅は揃える。
   → 列を1本だけ置き、その1本を2つで共有する。列幅は長いほうの文言
     （はい（お支払いへ））で決まり、**2つの幅は自動的に同じになる**。
     幅を各ボタンに書くと揃わなくなるので、列に任せる（width は指定しない）。
     fit-content(100%) にしてあるので、文字が入りきらない狭い画面では
     枠からはみ出さずに縮む。 */
.sim-final-actions {
  display: grid;
  grid-template-columns: fit-content(100%);
  justify-content: center;
  gap: 10px;
}
.sim-final-actions .btn { min-height: 48px; word-break: keep-all; }

/* 日本語の行分割を厳密にする。小書き仮名や長音符、閉じ括弧が行頭に来るのを防ぐ。
   ボタンやカードの短い文で、意図しない位置に割れるのを減らす。 */
.btn, .tabnav a, .sim-fonts button, .sim-designs button, .sim-presets button {
  line-break: strict;
}

/* 説明文のモバイル短縮用（2026-09-05 打ち合わせ #20#2#4）。
   既存の .pc/.sp は <br> 用の inline なので、段落用に別で持つ。
   区切りは 860px（シミュレーターがモバイル表示に切り替わるのと同じ）。 */
.sp-only { display: none; }
@media (max-width: 860px) {
  .pc-only { display: none; }
  .sp-only { display: block; }
}

/* 用途カード（OCCASIONS）の位置。
   2026-09-05 しょう指示: 「モバイルで見た時のここの部分はいらない。
   あえて言うなら、もっと下の方に入れるなり、別のタブで見えるようにする」。

   **DOM そのものを下へ移した**（index.html 上で #more の直前）。
   当初は order だけで見た目を動かしていたが、監査で問題が出た:
   order は「見た目の順」しか変えず、**キーボードのフォーカス順は DOM 順のまま**。
   ヒーローのCTAから Tab を押すと画面が 19,500px 下へ飛び、5回後にまた上へ戻っていた
   （実測。WCAG 2.4.3 Focus Order に抵触）。
   DOM を動かせばモバイルでは見た目とフォーカス順が一致する。

   2026-09-10 しょう指示「OCCASIONSはもっと下で良い、見本デザインをヒーローの次に」。
   PC だけ order で元の位置へ戻していたのをやめ、**PC もモバイルも DOM 順**にする。
   これで見た目とフォーカス順のズレも消えた（上の WCAG 2.4.3 の件が完全に解決する）。

   PC で order を外した理由は実測にある。OCCASIONS がヒーローと
   シミュレーターの間で 712px を占めており、見本デザインの1枚目が
   ページ先頭から 1,889px（画面の高さ900pxに対して 2.1画面ぶん）下にあった。
   「いきなり編集画面を見せると仕上がりが想像できない」という指摘に応えて
   置いた見本が、PC では最初の画面に一度も現れないまま埋もれていた。

   #main の flex は残す。order を全部外すと既定値0で DOM 順に並ぶので、
   これだけで目的を果たす。block に戻すとマージンの相殺が変わって
   別の差が出るため、レイアウトの土台は動かさない。 */
@media (min-width: 861px) {
  #main { display: flex; flex-direction: column; }
}


/* ===== 編集中は画面を返す（2026-09-08 しょう指示） =====
   「上のロゴや3本線、タブを切り替えるスペース、一番下のLINEで注文スペースが
     場所を取り過ぎ。基本的にデザインしている時にはLINEで注文ボタンを押さないはず。
     必要なところに必要なボタンを配置するようなUIに」

   実測（375x812）: ヘッダー112px（ブランド行61＋タブ行50）
                  ＋下のLINEバー60px＋セーフエリア ＝ **172px以上が常時ふさがっていた**（21%）。

   編集を始めた時だけ畳む。**スクロールでは切り替えない。**
   （app.js の revealEditor() が html[data-editing] を付け、見本へ戻ると外す）
   逃げ道は残す: メニューボタンは畳んでも消さない。
   LINEは消すのではなく、実際に使う場所（注文欄・文言欄）へ移してある。 */
@media (max-width: 900px) {
  html[data-editing] { --tabnav-h: 0px; --header-bar-h: 44px; }
  html[data-editing] .tabnav { display: none; }
  html[data-editing] .header-inner { padding: 4px 10px; gap: 4px; }
  html[data-editing] .brand { gap: 6px; }
  html[data-editing] .brand img { width: 26px; height: 26px; }
  html[data-editing] .brand-name { font-size: 13px; }
  /* 高さ44pxに収めるため、メニューボタンは縦の余白だけ詰める。
     文字は残す（アイコンだけにすると何のボタンか分からなくなる）。 */
  html[data-editing] .nav-toggle { padding-top: 2px; padding-bottom: 2px; font-size: 10px; }
  html[data-editing] .fab-line { display: none; }
  html[data-editing] body { padding-bottom: 24px; }
}


/* ===== 追従プレビューの小窓化と、四隅への吸い付き =====
   考え方: 枠（.sim-canvas-wrap）は高さを確保したまま動かさず、
   中身（.sim-canvas-card）だけを小窓にする。枠が動かないのでレイアウトが跳ねない。
   小窓は position:fixed にして、四隅のどこへでも置けるようにする
   （2026-09-08 しょう指示「右上や左上、四隅に自動的に吸い付くように」）。
   枠は透明のまま sticky で画面上部に留まるので、上へ戻っても
   「中身の抜けた空の箱」が流れの中に見えることはない。

   PC（861px以上）はこの仕組みを使わない。右カラムに並ぶので圧迫がないため。 */

/* PC では枠が背景と枠線を持っているので、カードは素通しにする（現状維持） */
.sim-canvas-card { display: contents; }
.sim-pip-sentinel { display: none; }
/* 追従をやめる位置の目印。場所を取らせない。 */
.sim-pip-end { display: block; height: 1px; margin: 0; padding: 0; }
.sim-pip-bar { display: none; }
.sim-pip-restore { display: none; }

@media (max-width: 860px) {
  /* 見た目（背景・枠線・影）を枠からカードへ移す。
     枠は「場所を取るだけの透明な箱」になる。 */
  .sim-canvas-wrap {
    background: none; border: 0; box-shadow: none; padding: 0;
    min-height: var(--sim-slot, 316px);
    pointer-events: none;                 /* 空いた部分はタップを通す */
  }
  .sim-canvas-card {
    display: block; pointer-events: auto;  /* 中身だけ触れる */
    position: relative;
    background: radial-gradient(120% 100% at 50% 0%, #fdfbf4 0%, #ece5d3 100%);
    border: 1px solid rgba(184,150,62,.3); border-radius: 6px;
    padding: 8px 8px 4px;
    box-shadow: 0 8px 22px rgba(29,29,29,.16);
  }

  /* ---- 小窓のとき ---- */
  /* 幅は150px。もとの116pxでは「編集が反映されたか」を確かめられなかった
     （2026-09-08 しょう指摘）。クロームを128px返したぶん、ここへ回す。 */
  .sim-canvas-wrap.is-pip .sim-canvas-card {
    position: fixed; z-index: 92;
    width: 150px; margin: 0;
    padding: 0 5px 4px;
    box-shadow: 0 10px 26px rgba(29,29,29,.26);
  }
  /* --kb-inset / --vv-top はキーボードの分。app.js が visualViewport から入れる。
     position:fixed はレイアウトビューポート基準なので、これが無いと
     **下の隅がキーボードの裏に完全に隠れる。** 出ていないのと同じになる。 */
  .sim-canvas-wrap.is-pip[data-corner="tr"] .sim-canvas-card { top: calc(var(--vv-top, 0px) + var(--header-h) + 8px); right: 10px; }
  .sim-canvas-wrap.is-pip[data-corner="tl"] .sim-canvas-card { top: calc(var(--vv-top, 0px) + var(--header-h) + 8px); left: 10px; }
  .sim-canvas-wrap.is-pip[data-corner="br"] .sim-canvas-card { bottom: calc(var(--kb-inset, 0px) + var(--safe-bottom) + 10px); right: 10px; }
  .sim-canvas-wrap.is-pip[data-corner="bl"] .sim-canvas-card { bottom: calc(var(--kb-inset, 0px) + var(--safe-bottom) + 10px); left: 10px; }
  .sim-canvas-wrap.is-pip #sim-canvas { max-height: 218px; }

  /* ---- ⤢ で大きくしている間 ----
     枠は畳んである（is-collapsed）ので、ここで position:fixed をやめると
     カードは画面のはるか上へ戻ってしまい、押しても何も見えない。
     浮かせたまま、画面の中央で大きくする。 */
  .sim-canvas-wrap.is-held .sim-canvas-card {
    position: fixed; z-index: 93;
    left: 50%; transform: translateX(-50%);
    top: calc(var(--header-h) + 8px); right: auto; bottom: auto;
    width: min(320px, calc(100vw - 24px)); margin: 0;
    padding: 0 8px 6px;
    box-shadow: 0 14px 34px rgba(29,29,29,.30);
  }
  .sim-canvas-wrap.is-held #sim-canvas {
    max-height: min(440px, 56vh);
    /* 拡大中は1回目の指から掴めるようにする。auto のままだと、指が触れた瞬間に
       ブラウザが「ページを送る指」と判断してしまい、あとから touch-action を
       変えても手遅れになる（pointercancel が飛ぶ）。
       拡大は「近くで見て直す」ための状態なので、ここでページを送れなくてよい。 */
    touch-action: none;
  }
  .sim-canvas-wrap.is-held .sim-pip-bar { pointer-events: auto; }
  /* 大きくしている間は掴んで動かせない（中央固定）。取っ手も出さない。 */
  .sim-canvas-wrap.is-held .sim-pip-grip { visibility: hidden; }

  /* 小窓では説明・切替・状態表示を出さない。小さすぎて読めないため。 */
  .sim-canvas-wrap.is-pip .sim-canvas-head { display: none; }

  /* ---- 小窓の操作バー（掴む・動かす・大きくする・やめる） ---- */
  .sim-canvas-wrap.is-pip .sim-pip-bar,
  .sim-canvas-wrap.is-held .sim-pip-bar {
    display: flex; align-items: center; gap: 4px;
    height: 38px;
  }
  .sim-canvas-wrap.is-dragging .sim-pip-bar { cursor: grabbing; }
  .sim-canvas-wrap.is-dragging .sim-canvas-card { opacity: .92; }
  /* 掴む取っ手は**真ん中いっぱい**。見た目は横棒1本でも、当たり判定はバーの高さ全部。
     touch-action:none はここだけに付ける。付ける範囲を広げると、
     小窓の上でページがスクロールできなくなる。 */
  .sim-pip-grip {
    flex: 1; align-self: stretch; position: relative;
    touch-action: none; cursor: grab; border-radius: 4px;
  }
  .sim-pip-grip::before {
    content: ""; position: absolute; left: 6px; right: 6px; top: 50%;
    height: 4px; margin-top: -2px; border-radius: 2px; background: var(--gold-pale);
  }
  .sim-pip-grip:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 1px; }
  .sim-pip-btn {
    position: relative; flex: 0 0 auto; width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 1px solid var(--gold); border-radius: 50%;
    background: #fff; color: var(--gold-text);
    font-size: 13px; line-height: 1; cursor: pointer;
  }
  /* 見た目は30pxでも、当たり判定は44pxを確保する（WCAG 2.5.8）。 */
  .sim-pip-btn::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .sim-pip-close { color: var(--wine); }

  /* 「いま動かせる」ことを示す点線は、**枠ではなくカードに引く。**
     モバイルの枠は背景も枠線も持たない透明な箱なので、そこに点線を引くと
     後ろの入力欄をぐるりと囲む四角に見える。 */
  .sim-canvas-wrap.is-layer-editing { outline: 0; }
  .sim-canvas-wrap.is-layer-editing .sim-canvas-card {
    outline: 2px dashed var(--gold); outline-offset: 3px;
  }
  /* 小窓では動かせないので、「動かせます」の点線も出さない。 */
  .sim-canvas-wrap.is-pip.is-layer-editing .sim-canvas-card { outline: 0; }

  /* ---- 小窓の中身は「見るだけ」（2026-09-06 しょう報告・実機の録画つき） ----
     実測（375px）: メッセージ欄 x31 幅313 / 小窓 x228 幅116 で右37%を覆っていた。
     覆っている中身は #sim-canvas で、文字を選ぶと touch-action:none が付くため、
     小窓の上で指を滑らせるとスクロールにならず**お客様の文字が動いた。**
     中身は素通しにして、掴めるのは操作バーだけにする。 */
  .sim-canvas-wrap.is-pip #sim-canvas { pointer-events: none; touch-action: auto; cursor: default; }
  .sim-canvas-wrap.is-pip .sim-pip-bar { pointer-events: auto; }
  /* ダブルタップで拡大／縮小を切り替える（2026-09-08 しょう指示）。
     manipulation にしないと、ブラウザ既定のダブルタップ拡大に食われて
     こちらのハンドラまで届かない。
     canvas は pointer-events:none のままなので、タップは**カード**に当たる。
     ラベルの文字を動かす処理には一切渡らない（過去の誤操作事故の再発防止）。 */
  .sim-canvas-wrap.is-pip .sim-canvas-card,
  .sim-canvas-wrap.is-held .sim-canvas-card { touch-action: manipulation; }

  /* 文字を打っている間も出しっぱなしにする（2026-09-08 しょう指示）。
       「自分が文字を入れているのと同時にプレビューが変わっていることを
         確認したいし、確認しながらデザインした方がいい」

     もとは入力中に opacity:0 で引っ込めていた。理由は、ヘッダー112px＋下のLINEバー60pxで
     可視域が約350pxしか残らず、そこへ小窓が重なると入力欄が読めなかったため。
     クロームを119px返し、枠の316pxも返したので、その前提が変わった。

     置き場所は**お客様が決める**（四隅）。勝手に逃げも隠れもしない。
     入力欄と重なったら、⤿ かドラッグで空いている隅へ動かしてもらう。
     そのため**キーボードが出ている間も操作バーは触れるままにする。**
     canvas は素通しのままなので、重なっていても後ろの欄は触れる。 */

  /* 小窓になったら、枠が押さえていた316pxを返す。
     畳んだ量はJS側がスクロールで巻き戻すので、**画面上の見え方は動かない。** */
  .sim-canvas-wrap.is-collapsed { min-height: 0; position: static; }
  /* シミュレーターから離れている間は出さない。**大きさは変えない。**
     消し方は display にする。opacity のフェードにすると、transition が動かない
     環境（裏タブなど）で0のまま固まり、**戻ってきても二度と出ない。**
     実際にこの実験でそうなった。見え隠れに演出は要らない。 */
  .sim-canvas-wrap.is-away .sim-canvas-card { display: none; }

  /* 効く範囲を過ぎたら追従をやめる。sticky を外すだけなので、
     **下の内容は1pxも動かない。**上へ流れて視界から消えるだけ。 */
  .sim-canvas-wrap.is-released,
  .sim-canvas-wrap.is-off { position: static; }

  /* ✕で小窓をやめたときの戻り道。通常フローに置く。 */
  .sim-pip-restore {
    display: block; width: 100%; min-height: 48px; margin: 12px 0;
    border: 1px solid var(--gold-text); border-radius: 6px;
    background: #fffdf8; color: var(--gold-text);
    font-family: var(--sans-ja); font-size: 14px; font-weight: 600; cursor: pointer;
  }

  /* 目印。ここが画面から上へ抜けたら小窓にする。高さは持たせない。
     **order: -1 が必須。** .sim-preview は display:contents なので、
     この目印は .sim（グリッド）の直接の子として扱われる。order を付けないと
     既定の 0 になり、.sim-controls の後ろへ回ってしまう。 */
  .sim-pip-sentinel { display: block; height: 1px; margin: 0; order: -1; }
}

/* 小さい端末では、通常時のプレビューももう少し抑える（既存ルールに合わせる） */
@media (max-width: 860px) and (max-height: 700px) {
  .sim-canvas-wrap { min-height: var(--sim-slot, 268px); }
}

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


/* ===== タブナビ（2026-09-05 しょう指示。参照: ya-syouji.com の右上ナビ） =====
   「タブ切り替えできるような感じ。任意で探しに行けるようにして欲しい」。
   用途カードやワインの説明を既定の画面から外したぶん、
   自力で辿り着ける入口を常に見えるところへ置く。

   PCは従来のグローバルナビがあるので出さない（#34-#37 の現状維持）。 */
.tabnav { display: none; }

@media (max-width: 900px) {
  :root { --tabnav-h: 50px; }

  .tabnav {
    display: flex; gap: 0;
    height: var(--tabnav-h);
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid rgba(184,150,62,.22);
    background: rgba(247, 244, 236, .96);
    scrollbar-width: none;
  }
  .tabnav::-webkit-scrollbar { display: none; }

  .tabnav a {
    flex: 0 0 auto; display: grid; align-content: center; justify-items: center;
    gap: 1px; padding: 4px 13px; min-height: 44px;
    text-decoration: none; color: var(--ink-2);
    border-right: 1px solid rgba(184,150,62,.14);
    white-space: nowrap;
  }
  .tabnav a:last-child { border-right: 0; }
  .tabnav a em {
    font-style: normal; font-family: var(--serif-en);
    font-size: 9.5px; letter-spacing: .12em; color: var(--gold-text);
  }
  .tabnav a span { font-size: 12px; font-weight: 700; color: var(--ink); }
  .tabnav a:active { background: var(--cream-2); }

  /* 端が切れていることを示す。横スクロールに気づかせるため。 */
  .tabnav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
}

/* ボタンの主文＋補足。意図した位置で改行させ、括弧の途中で割れるのを防ぐ。 */
.btn-main { display: block; }
/* 2026-09-07 opacity を外した。--gold-text #8a6d24 は地の --cream-2 #fffdf8 に対して
   4.81:1 で AA を満たすが、opacity .82 を掛けると実効色が #9f874a になり **3.42:1** まで落ちる。
   控えめにしたいときは不透明度ではなく色そのもので落とすこと（不透明度は比を壊す）。 */
.btn-sub { display: block; font-size: 11px; font-weight: 400; margin-top: 2px; }


/* ===== デザインとこだわり（design.html） =====
   デザイン一覧は #collections と同じ .col-block / .col-grid / .col-item を使い回す。
   ここで足すのは、このページにしかない目次・こだわり一覧・末尾CTAだけ。 */
.design-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.design-toc a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--gold-pale); border-radius: 22px;
  background: var(--cream-2); color: var(--ink);
  font-family: var(--sans-ja); font-size: 13px; text-decoration: none;
}
.design-toc a em { font-style: normal; font-size: 11px; color: var(--gold-text); }
.design-toc a:hover, .design-toc a:focus-visible { border-color: var(--gold-text); }
.craft-list { margin-bottom: 22px; }
.craft-list li { margin-bottom: 12px; }
.design-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.collections-more { margin: 6px 0 14px; }
.collections-more .btn { width: 100%; max-width: 420px; }

@media (max-width: 860px) {
  .design-toc { gap: 6px; }
  .design-toc a { font-size: 12px; padding: 0 11px; }
  .design-cta .btn { width: 100%; }
}


/* ===== 「プレビューに反映済み」は画面に出さない（2026-09-08 しょう指示） =====
   **要素は消さない。** #sim-live-status は role="status" / aria-live のライブリージョンで、
   画面読み上げの利用者へ「描き直しが終わった」「更新エラー」を伝える唯一の口になっている
   （app.js の setLivePreviewStatus がここへ書く）。display:none にすると読み上げも止まる。
   目に見える形の「✓反映済み」は注文確認の #sim-review-ready に残っているので、
   見える情報としては失われない。

   ID で指定しているのは、モバイル用のメディアクエリが後ろにあり、
   クラス指定だと margin や min-height を上書きされてしまうため。 */
#sim-live-status {
  position: absolute;
  width: 1px; height: 1px; min-height: 0;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
/* 行に残るのは切替ボタンだけになるので、右端へ寄せる。 */
.sim-canvas-head { justify-content: flex-end; }