/* ============================================================
   Auguri! ─ お問い合わせフォーム「対話」（本番）
   ------------------------------------------------------------
   2026-09-15 高野様ご確定：3 案のうち **03 対話** を採用。
   ai の 2 列の組み（左に項目・右に記入欄）から、一問ずつ中央に置く形へ。
   文字（案内文・選択肢）は ai の原稿。問いかけ文・結び・記入例は新しい原稿（決定事項 #63）。

   01 の選択に応じて続きの設問が現れる（.fm__cond）：
     商品・在庫について → 気になる商品やブランド
     エステのご相談     → 予約はお電話・LINE の案内（Q42）＋ 興味のあるメニュー
     来店相談           → ご希望日（火曜定休）＋ 時間帯
   出し分けは CSS の :has() と、contact.js が form に付ける data-topic の両方で行う。
   来店希望日は OS のカレンダーではなく、サイトの意匠に合わせた自前のカレンダー（.fm__cal・2026-09-15）。

   文字の大きさ（1920px 基準）：問いかけ 22／記入欄 16／お問い合わせ内容 16／選択肢 16／結び 14／送信 16
   （2026-09-15 高野様：問いかけ 24→22、記入欄 20→16、お問い合わせ内容 17→16、送信 18→16）
   ============================================================ */

/* 地色は **リネン（#f1eee6）**（2026-09-17 高野様ご指示）。
   これまでの #f8f6f1 はフッターの #f9f7f3 とほとんど同じで、
   フォームの帯とフッターがひと続きの面に見えていた。
   新しい色はサイトの中で既に使っている色（TOP の「一つひとつに」の帯・View All の円）なので、
   色を 1 つも増やさずに、フォームの面だけをはっきり手前に出せる。
   高さは生成 CSS の 1343 より強く、中身なりにする。 */
.b-ct-form.fm-dialogue { height: auto; background-color: var(--c-linen); }
.fm-dialogue .band__in {
  height: auto; padding: calc(140 * var(--s)) 0 calc(150 * var(--s));
  display: flex; flex-direction: column; align-items: center; width: calc(720 * var(--s)); margin-inline: auto;
}
/* ai 実測の絶対配置は使わない（生成 CSS の left/top を無効にする） */
.fm-dialogue .band__in > * { position: relative; left: auto; top: auto; inset: auto; width: auto; text-align: center; }
.fm-dialogue .band__in > .grp { position: relative; inset: auto; }
.fm-dialogue .grp > * { position: relative; left: auto; top: auto; }
.fm-dialogue .fm__agree-ul { display: none; }

.fm-dialogue .fm__intro { margin-bottom: calc(96 * var(--s)); }

/* ── 問いかけ：小さな番号＋短い罫＋筑紫A 24px ── */
.fm-dialogue .fm__q { display: flex; flex-direction: column; align-items: center; margin: calc(88 * var(--s)) 0 calc(28 * var(--s)); cursor: default; }
.fm-dialogue .fm__q1 { margin-top: 0; }
.fm-dialogue .fm__q-no { font-family: var(--ff-en-display); font-size: calc(14 * var(--s)); letter-spacing: .3em; line-height: 1; color: var(--c-ink); }
.fm-dialogue .fm__q-no::after { content: ""; display: block; width: calc(24 * var(--s)); height: 1px; background: var(--c-ink); transform: scaleY(.5); margin: calc(14 * var(--s)) auto calc(18 * var(--s)); }
.fm-dialogue .fm__q-t { font-family: var(--ff-jp-display); font-weight: var(--fw-jp-display); font-size: calc(22 * var(--s)); line-height: 1.6; letter-spacing: .12em; color: var(--c-ink); }

/* ── 選択肢：横一列、細い縦罫で区切る ── */
.fm-dialogue .fm__topic { display: flex; justify-content: center; align-items: baseline; margin: 0; }
.fm-dialogue .fm__radio1, .fm-dialogue .fm__radio2, .fm-dialogue .fm__radio3, .fm-dialogue .fm__radio4 {
  margin: 0; padding: 0 calc(24 * var(--s)); font-size: calc(16 * var(--s)); line-height: calc(32 * var(--s)); color: var(--c-ink-8b); cursor: pointer;
  border-left: 1px solid rgba(0,0,0,.25); transition: color .3s var(--e-out); white-space: nowrap;
}
.fm-dialogue .fm__radio1 { border-left: 0; }
.fm-dialogue .fm__radio1:hover, .fm-dialogue .fm__radio2:hover, .fm-dialogue .fm__radio3:hover, .fm-dialogue .fm__radio4:hover,
.fm-dialogue .fm__radio-input:checked ~ * { color: var(--c-ink); }
.fm-dialogue .fm__topic .fm__radio-input + span { display: none; }   /* ◯ は使わない。選ぶと下線 */
.fm-dialogue .fm__radio-input:checked ~ span:not([aria-hidden]) { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: .5px; }
.fm-dialogue .fm__radio-input:focus-visible ~ span:not([aria-hidden]) { outline: 1px solid var(--c-ink); outline-offset: 4px; }

/* ── 01 の選択で現れる続きの設問 ──────────────────────────────
   出し分けは三重の備え（2026-09-17・中間レビュー R06 で組み直し）。
   以前は `:has()` と `[data-topic]` を **同じカンマ区切りの並び**に入れていた。
   セレクタの並びは 1 つでも読めないものが混ざるとルールごと捨てられるので、
   `:has()` を知らないブラウザーでは JS 側の受け皿まで一緒に消えていた。
   そこで次の 3 つに分ける。

     ア  `:has()` が使える      … CSS だけで開く（JS いらず）
     イ  `:has()` が無い＋JS 有 … contact.js が form に入れる data-topic で開く
     ウ  `:has()` が無い＋JS 無 … **隠さない**。続きの設問を最初から全部見せる

   ウ のために、既定の `display:none` は「ア または イ」のときだけ当てる。
   ─────────────────────────────────────────────────────────── */
.fm__cond { flex-direction: column; align-items: center; width: calc(560 * var(--s)); margin-top: calc(40 * var(--s)); }

/* ア：`:has()` が使える環境 → まず全部隠す */
@supports selector(:has(*)) { .fm__cond { display: none; } }
/* イ：JS が data-topic を入れられた環境 → まず全部隠す（`:has()` の有無に関わらず） */
.fm-dialogue[data-topic] .fm__cond { display: none; }
/* ウ：どちらも無い環境 → 上の 2 つがどちらも当たらないので、続きの設問は出たまま */

/* 開く側。`:has()` と data-topic は **別のルール**にする（片方が無効でも、もう片方は残る） */
.fm-dialogue:has(.fm__radio-input[value="商品・在庫について"]:checked) .fm__cond-item,
.fm-dialogue:has(.fm__radio-input[value="エステのご相談"]:checked) .fm__cond-esthe,
.fm-dialogue:has(.fm__radio-input[value="来店相談"]:checked) .fm__cond-visit { display: flex; animation: fm-cond-in .6s var(--e-out) backwards; }
.fm-dialogue[data-topic="商品・在庫について"] .fm__cond-item,
.fm-dialogue[data-topic="エステのご相談"] .fm__cond-esthe,
.fm-dialogue[data-topic="来店相談"] .fm__cond-visit { display: flex; animation: fm-cond-in .6s var(--e-out) backwards; }
@keyframes fm-cond-in { from { opacity: 0; transform: translateY(calc(8 * var(--s))); } to { opacity: 1; transform: none; } }
.fm__cond-q { font-family: var(--ff-jp-body); font-size: calc(15 * var(--s)); line-height: calc(28 * var(--s)); letter-spacing: .08em; color: var(--c-ink); margin: 0 0 calc(6 * var(--s)); text-align: center; }
.fm__opt { color: var(--c-ink-8b); font-size: calc(13 * var(--s)); margin-left: .4em; }
.fm__cond-in { width: calc(480 * var(--s)); font-size: calc(18 * var(--s)); line-height: calc(34 * var(--s)); text-align: center; color: var(--c-ink); border: 0; border-bottom: 1px solid rgba(0,0,0,.35); background: transparent; padding: 0; outline: none; transition: border-color .4s var(--e-out); }
.fm__cond-in:focus { border-bottom-color: var(--c-ink); }
.fm__cond-in::placeholder { color: var(--c-ink-8b); opacity: 1; }
.fm__date { font-variant-numeric: tabular-nums; width: calc(260 * var(--s)); font-family: var(--ff-jp-body); }
.fm__date::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }

/* ── 来店希望日のカレンダー（自前・2026-09-15 高野様「サイトのデザインに合わせて」） ──
   OS のカレンダーは JS で隠し、フッターの営業カレンダーと同じ手つきの盤面を出す。
     数字   … 游明朝の等幅（Q60 で数字は游明朝に統一）
     曜日   … 英字の略（フッターの SUN／MON… と同じ）。定休の TUE は薄く
     罫     … 0.5px の黒（サイト共通）
     今日   … 朱の短い罫（フッター「本日の印」で採用した 8 と同じ印）
     選んだ日 … 細い円（View All と同じ、円で示す言い方）
   JS が動かない環境では、これまでどおり OS のカレンダーが出る（.fm__datefield は作られない）。 */
.fm__datefield {
  width: calc(340 * var(--s)); padding: calc(6 * var(--s)) 0 calc(12 * var(--s));
  font-family: var(--ff-jp-body); font-size: calc(18 * var(--s)); line-height: calc(34 * var(--s)); letter-spacing: .06em;
  color: var(--c-ink-8b); text-align: center; cursor: pointer; position: relative;
  border-bottom: 1px solid rgba(0,0,0,.35); transition: color .3s var(--e-out), border-color .4s var(--e-out);
  font-variant-numeric: tabular-nums;
}
.fm__datefield.is-set { color: var(--c-ink); }
.fm__datefield:hover, .fm__datefield[aria-expanded="true"] { border-bottom-color: var(--c-ink); color: var(--c-ink); }
.fm__datefield:focus-visible { outline: 1px solid var(--c-ink); outline-offset: 4px; }

.fm__cal {
  width: calc(420 * var(--s)); margin-top: calc(24 * var(--s));
  padding: calc(24 * var(--s)) calc(24 * var(--s)) calc(18 * var(--s));
  background: var(--c-white); box-shadow: inset 0 0 0 .5px var(--c-ink);
  animation: fm-cond-in .45s var(--e-out) both;
}
.fm__cal-hd { display: flex; align-items: center; justify-content: space-between; padding-bottom: calc(14 * var(--s)); }
.fm__cal-ym { margin: 0; font-family: var(--ff-jp-body); font-size: calc(15 * var(--s)); line-height: 1; letter-spacing: .12em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.fm__cal-nav { width: calc(34 * var(--s)); height: calc(20 * var(--s)); display: grid; place-items: center; color: var(--c-ink); cursor: pointer; transition: opacity .3s var(--e-out), transform .4s var(--e-out); }
.fm__cal-nav svg { display: block; width: calc(26 * var(--s)); height: auto; }
.fm__cal-prev svg { transform: scaleX(-1); }
.fm__cal-nav:hover:not([aria-disabled="true"]) { transform: translateX(calc(3 * var(--s))); }
.fm__cal-prev:hover:not([aria-disabled="true"]) { transform: translateX(calc(-3 * var(--s))); }
.fm__cal-nav[aria-disabled="true"] { opacity: .2; cursor: default; }
.fm__cal-nav:focus-visible { outline: 1px solid var(--c-ink); outline-offset: 2px; }

.fm__cal-wd, .fm__cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.fm__cal-wd { padding: calc(10 * var(--s)) 0 calc(8 * var(--s)); border-top: 1px solid var(--c-ink); }
.fm__cal-wd > span { font-family: var(--ff-jp-body); font-size: calc(10 * var(--s)); line-height: 1; letter-spacing: .1em; text-align: center; color: var(--c-ink); }
.fm__cal-wd > span.is-off { color: var(--c-ink-8b); }
.fm__cal-grid { row-gap: calc(2 * var(--s)); border-top: 1px solid rgba(0,0,0,.25); padding-top: calc(8 * var(--s)); }

.fm__cal-day {
  position: relative; height: calc(40 * var(--s)); display: grid; place-items: center;
  font-family: var(--ff-num); font-size: calc(16 * var(--s)); line-height: 1; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: var(--c-ink); cursor: pointer;
  transition: color .25s var(--e-out);
  isolation: isolate;   /* ホバーの円を数字の下に敷く */
}
/* ホバーも円で示す（角の立った面にしない） */
.fm__cal-day::after, .fm__cal-day::before { pointer-events: none; }
.fm__cal-day:hover:not([aria-disabled="true"])::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(34 * var(--s)); height: calc(34 * var(--s));
  border-radius: 50%; background: var(--c-linen); transform: translate(-50%, -50%); z-index: -1;
}
/* 選べない日（火曜・過ぎた日）。`disabled` ではなく `aria-disabled` で示す：
   矢印キーでフォーカスは通るが、選ぶことはできない（2026-09-17・中間レビュー R02） */
.fm__cal-day[aria-disabled="true"] { color: var(--c-ink-8b); opacity: .45; cursor: default; }
.fm__cal-day:focus-visible { outline: 1px solid var(--c-ink); outline-offset: -2px; }
/* 今日：朱の短い罫（フッターで採用した「本日の印」と同じ） */
.fm__cal-day.is-today::after {
  content: ""; position: absolute; left: 50%; bottom: calc(6 * var(--s)); width: calc(14 * var(--s)); height: calc(2 * var(--s));
  background: var(--c-today); transform: translateX(-50%);   /* 本日の印。フッターの営業カレンダーと同じ色 */
}
/* 選んだ日：細い円（View All と同じ、円で示す言い方） */
.fm__cal-day.is-sel::before, .fm__cal-day.is-sel:hover::before {
  content: ""; position: absolute; left: 50%; top: 50%; background: none; width: calc(34 * var(--s)); height: calc(34 * var(--s));
  border-radius: 50%; box-shadow: inset 0 0 0 .5px var(--c-ink); transform: translate(-50%, -50%);
  animation: fm-cal-pick .5s var(--e-out) both;
}
@keyframes fm-cal-pick { from { transform: translate(-50%, -50%) scale(.82); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.fm__cal-note { margin: calc(14 * var(--s)) 0 0; padding-top: calc(12 * var(--s)); border-top: 1px solid rgba(0,0,0,.25);
  font-size: calc(12 * var(--s)); line-height: calc(22 * var(--s)); letter-spacing: .06em; color: var(--c-ink-8b); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .fm__cal, .fm__cal-day.is-sel::before { animation: none !important; }
  .fm__cal-nav:hover:not([aria-disabled="true"]), .fm__cal-prev:hover:not([aria-disabled="true"]) { transform: none; }
}
.fm__cond-note { font-size: calc(14 * var(--s)); line-height: calc(28 * var(--s)); letter-spacing: .06em; color: var(--c-ink); margin: 0 0 calc(28 * var(--s)); }
.fm__cond-note a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: .5px; }
.fm__cond-hint { font-size: calc(13 * var(--s)); line-height: calc(24 * var(--s)); letter-spacing: .06em; color: var(--c-ink-8b); margin: calc(16 * var(--s)) 0 0; }
.fm__slots { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; margin-top: calc(28 * var(--s)); }
.fm__slots .fm__cond-q { flex-basis: 100%; }
.fm__slot { position: relative; padding: 0 calc(20 * var(--s)); font-size: calc(16 * var(--s)); line-height: calc(32 * var(--s)); letter-spacing: .06em; color: var(--c-ink-8b); cursor: pointer; border-left: 1px solid rgba(0,0,0,.25); transition: color .3s var(--e-out); font-variant-numeric: tabular-nums; }
.fm__slot:first-of-type { border-left: 0; }
.fm__slot:hover, .fm__slot .fm__radio-input:checked ~ span { color: var(--c-ink); }
.fm__slot .fm__radio-input:checked ~ span { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: .5px; }

/* ── 記入欄：中央・20px・下に罫。記入中は罫が濃くなる ── */
.fm-dialogue .band__in > .fm__ph2, .fm-dialogue .band__in > .fm__ph3, .fm-dialogue .band__in > .fm__ph4 { width: calc(560 * var(--s)); font-size: calc(16 * var(--s)); line-height: calc(32 * var(--s)); text-align: center; color: var(--c-ink); outline: none; }
.fm-dialogue .band__in > .fm__rule2, .fm-dialogue .band__in > .fm__rule3, .fm-dialogue .band__in > .fm__rule4 { width: calc(560 * var(--s)); height: 1px; margin-top: calc(10 * var(--s)); transform: scaleY(.5); opacity: .35; transition: transform .5s var(--e-out), opacity .5s; }
.fm-dialogue:has(.fm__ph2:focus) .fm__rule2, .fm-dialogue:has(.fm__ph3:focus) .fm__rule3, .fm-dialogue:has(.fm__ph4:focus) .fm__rule4 { opacity: 1; transform: scaleY(1); }
.fm-dialogue .band__in > .fm__ph5 { width: calc(560 * var(--s)); height: calc(200 * var(--s)); padding: calc(18 * var(--s)) calc(20 * var(--s)); box-shadow: inset 0 0 0 .25px var(--c-ink-8b); font-size: calc(16 * var(--s)); line-height: calc(30 * var(--s)); text-align: left; color: var(--c-ink); outline: none; transition: box-shadow .4s var(--e-out); }
.fm-dialogue .fm__ph5:focus { box-shadow: inset 0 0 0 .5px var(--c-ink); }

/* ── 結び：Thank you の筆記体（TOP と同じもの）を高めに置き、一言との間を空ける ── */
.fm-dialogue .band__in > .fm__ty { width: calc(400 * var(--s)); height: calc(128 * var(--s)); margin: calc(72 * var(--s)) 0 calc(28 * var(--s)); }
.fm-dialogue .fm__ty svg { display: block; width: 100%; height: 100%; }
.fm-dialogue .fm__close { font-size: calc(14 * var(--s)); line-height: calc(30 * var(--s)); letter-spacing: .1em; color: var(--c-ink); margin-bottom: calc(40 * var(--s)); }
.fm-dialogue .fm__agree { display: flex; align-items: baseline; gap: calc(6 * var(--s)); margin: 0 0 calc(36 * var(--s)); }
.fm-dialogue .fm__agree-label a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: .5px; }

/* ── 送信：文字だけ。下に罫、ホバーで罫が太くなる ── */
.fm-dialogue .fm__submit { width: auto; height: auto; box-shadow: none; padding: calc(8 * var(--s)) 0; font-family: var(--ff-jp-body); font-size: calc(16 * var(--s)); letter-spacing: .2em; background: none !important; color: var(--c-ink) !important; position: relative; }
.fm-dialogue .fm__submit::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-ink); transform: scaleY(.5); transform-origin: 0 100%; transition: transform .5s var(--e-out); }
.fm-dialogue .fm__submit:hover::after, .fm-dialogue .fm__submit:focus-visible::after { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .fm__cond { animation: none !important; }
}