/* 2026-09-26 問診票（contact）試作。トップ・下層（redesign.css / pages.css）と同じ見た目の言葉を問診票に広げる。
   読み込み順: site.css → pages.css（色・書体・ボタン・ページの題）→ このファイル。仕様は /DESIGN.md
   ・フォームの HTML（name / id / value / 必須 / 構造 / クラス名）には触らない。見た目だけ
   ・塗りの箱をやめ、罫線と余白で区切る。角ゼロ・影なし・深緑1色
   ・入力欄は 16px 以上（iOS の拡大防止）、タップ領域 44px 以上
   ・動きは site.js の出現だけ（8px・1回）。prefers-reduced-motion では動かさない */
:root{--rd-field:#7f8c86;--rd-err:#8a3b2a;--rd-placeholder:#7a8781}

/* ── 2段（本文＋右の連絡先） ── */
.contact-layout{grid-template-columns:minmax(0,1fr) 264px;gap:88px;padding:56px 0 112px}
.contact-main{min-width:0}
.contact-intro{max-width:40em;font-size:1rem;line-height:1.95;margin:0 0 20px;color:var(--rd-ink)}
.contact-intro strong{display:block;font-weight:500;margin-top:16px;padding-top:16px;border-top:1px solid var(--rd-line)}
.contact-urgent{max-width:40em;font-size:.9375rem;line-height:1.9;color:var(--rd-ink);margin:0 0 8px;padding:2px 0 2px 18px;border-left:1px solid var(--rd-green)}
.contact-urgent a{color:var(--rd-green);font-weight:400}

/* ── 区切り（初診の進め方／お申し込みから来院まで／問診票）：上に罫線1本＋明朝の題 ── */
.contact-section{margin:72px 0 0;padding-top:48px;border-top:1px solid var(--rd-line)}
.contact-section h2{font-family:var(--serif);font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.6;letter-spacing:.06em;font-weight:500;color:var(--rd-ink);margin:0 0 28px}
html[lang=ja] .contact-section h2,html[lang=ja] .contact-form .form-sec,html[lang=ja] .contact-done h2{font-feature-settings:"palt"}
.contact-note{max-width:40em;font-size:.9375rem;line-height:1.9;color:var(--rd-muted);margin:20px 0 0}
.contact-fees-link{margin:28px 0 0}
.contact-fees-link a{display:flex;align-items:center;min-height:56px;padding:14px 0;border-top:1px solid var(--rd-green);border-bottom:1px solid var(--rd-green);color:var(--rd-green);text-decoration:none;max-width:40em}
.contact-fees-link a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}

/* 初診コンサルテーション：枠の箱→上下の罫線 */
.products{display:block}
.product,.products .product:only-child{max-width:40em;border:0;border-top:1px solid var(--rd-line-2);border-bottom:1px solid var(--rd-line);border-radius:0;padding:24px 0 20px;background:transparent}
.product h3{font-family:var(--serif);font-size:1.1875rem;letter-spacing:.04em;font-weight:500;color:var(--rd-ink);margin:0 0 10px}
.product p{font-size:.9375rem;line-height:1.9;margin:0 0 14px}
.product dl{flex-wrap:wrap;gap:4px 28px;margin:0 0 12px}
.product dt{font-weight:400;color:var(--rd-green);font-size:.9375rem;font-variant-numeric:tabular-nums}
.product dt a{color:var(--rd-green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
.product .bring{font-size:.875rem;color:var(--rd-muted)}

/* お申し込みから来院まで：角丸の箱と矢印・アイコン→番号つきの罫線の列（順番があるので番号は残す） */
.flow-boxes{gap:0 32px;border-top:1px solid var(--rd-line-2)}
.flow-boxes li{background:transparent;border:0;border-radius:0;padding:20px 0 24px;border-bottom:1px solid var(--rd-line)}
.flow-boxes li:not(:last-child)::after{display:none}
.flow-icon{display:none}
.flow-num{font:400 .9375rem/1 var(--rd-latin);font-style:normal;color:var(--rd-green);letter-spacing:.04em;font-variant-numeric:tabular-nums;margin-bottom:14px}
.flow-boxes h3{font-family:var(--serif);font-size:1.0625rem;letter-spacing:.04em;font-weight:500;color:var(--rd-ink);margin:0 0 8px}
.flow-boxes p{font-size:.875rem;line-height:1.85;color:var(--rd-muted)}
.js .flow-boxes li.reveal{transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;transition-delay:0s}
.js .flow-boxes li.reveal.is-visible{transform:none}

/* ── 問診票 ── */
.contact-form{max-width:46rem}
.contact-form .form-lead{font-size:.9375rem;color:var(--rd-muted);margin:0 0 8px}
.contact-form .form-draft p{font-size:.8125rem;line-height:1.8;color:var(--rd-muted)}
.contact-form .linklike{display:inline-flex;align-items:center;min-height:44px;color:var(--rd-green);text-decoration-thickness:1px;text-underline-offset:.35em;letter-spacing:inherit}

/* 進み具合（上に貼りつく細い帯）：角ゼロ・線は2px */
.js .contact-form .form-progress{background:rgba(255,255,255,.97);padding:10px 0 8px;border-bottom:1px solid var(--rd-line)}
.contact-form .fp-text{font-size:.8125rem;color:var(--rd-muted)}
.contact-form .fp-now{color:var(--rd-ink);font-weight:400}
.contact-form .fp-req{font-family:var(--rd-latin)}
.contact-form .fp-bar{height:2px;border-radius:0;background:var(--rd-line);margin-top:6px}
.contact-form .fp-bar i{background:var(--rd-green)}

/* 区切りの題（1〜8）：上に罫線＋明朝。番号は四角の枠、埋まったら塗る */
.contact-form .form-sec{font-family:var(--serif);font-size:1.25rem;line-height:1.6;letter-spacing:.05em;font-weight:500;color:var(--rd-ink);margin:56px 0 24px;padding-top:32px;border-top:1px solid var(--rd-line);gap:14px}
.contact-form .fs-num{width:28px;height:28px;border-radius:0;border:1px solid var(--rd-green);font:400 .8125rem/1 var(--rd-latin);color:var(--rd-green);font-variant-numeric:tabular-nums;transition:background-color .2s ease,color .2s ease}
.contact-form .form-part.is-complete .fs-num{background:var(--rd-green);color:#fff}
.contact-form .form-hint{margin:-8px 0 20px;font-size:.875rem;color:var(--rd-muted)}

/* 項目 */
.contact-form .field{margin:0 0 28px}
.contact-form .field-row{gap:0 28px}
.contact-form .field-row fieldset.field{margin-bottom:28px}
.contact-form label,.contact-form legend{font-weight:500;font-size:.9375rem;line-height:1.7;color:var(--rd-ink);margin:0 0 10px;padding:0}
html[lang=ja] .contact-form label,html[lang=ja] .contact-form legend{letter-spacing:.04em}
.contact-form .req{font-size:.6875rem;line-height:1.6;letter-spacing:.06em;color:var(--rd-green);border:1px solid var(--rd-green);border-radius:0;padding:0 6px;margin-left:8px;font-weight:400;vertical-align:.12em}

/* 入力欄：角ゼロ、枠は背景に対して 3:1 以上の灰緑、フォーカスで深緑の2px */
.contact-form textarea,.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form select{font-size:16px;line-height:1.7;min-height:52px;padding:12px 14px;color:var(--rd-ink);background-color:var(--rd-bg);border:1px solid var(--rd-field);border-radius:0;transition:border-color .15s ease,box-shadow .15s ease}
.contact-form textarea{min-height:0;line-height:1.8}
.contact-form ::placeholder{color:var(--rd-placeholder);opacity:1}
.contact-form textarea:hover,.contact-form input[type=text]:hover,.contact-form input[type=email]:hover,.contact-form input[type=tel]:hover,.contact-form select:hover{border-color:var(--rd-ink)}
.contact-form textarea:focus,.contact-form input:focus,.contact-form select:focus{outline:0;border-color:var(--rd-green);box-shadow:0 0 0 1px var(--rd-green)}
.contact-form textarea:focus-visible,.contact-form input:not([type=radio]):not([type=checkbox]):focus-visible,.contact-form select:focus-visible{outline:0}
.contact-form select{background-image:linear-gradient(45deg,transparent 50%,var(--rd-ink) 50%),linear-gradient(135deg,var(--rd-ink) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;cursor:pointer}

/* 選択肢：ラベルと丸・四角を1つの押せる範囲に（高さ44px以上） */
.contact-form .choices{gap:0}
.contact-form .choices.row{gap:0 28px}
.contact-form .choice{align-items:center;gap:12px;min-height:44px;padding:4px 0;font-size:.9375rem;line-height:1.6;color:var(--rd-ink)}
.contact-form .choice input{margin:0;width:20px;height:20px;accent-color:var(--rd-green);cursor:pointer}
.contact-form .choice input:focus-visible{outline:2px solid var(--gold-focus);outline-offset:3px;box-shadow:none}
.contact-form .choice:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;text-decoration-color:var(--rd-line-2)}

/* 来院しやすい曜日×時間帯：角ゼロの升目 */
.contact-form .slots{gap:8px 10px;max-width:440px;margin:4px 0 8px}
.contact-form .sl-h{font-size:.8125rem;color:var(--rd-muted)}
.contact-form .sl-h small{font-family:var(--rd-latin);font-size:.6875rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.contact-form .sl-d{font-size:.9375rem;color:var(--rd-ink)}
.contact-form .sl-c span{min-height:48px;border:1px solid var(--rd-field);border-radius:0;font-size:.875rem;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.contact-form .sl-c:hover span{border-color:var(--rd-ink)}
.contact-form .sl-c input:checked+span{background:var(--rd-green);border-color:var(--rd-green);color:#fff}
.contact-form .sl-c input:focus-visible+span{outline:2px solid var(--gold-focus);outline-offset:2px}

/* 補足・エラー */
.contact-form .field-hint{font-size:.8125rem;line-height:1.75;color:var(--rd-muted);margin-top:8px}
.contact-form label+.field-hint{margin:-4px 0 10px}
.contact-form .field-err{margin:8px 0 0;font-size:.875rem;line-height:1.6;color:var(--rd-err)}
.contact-form .field-err:not(:empty)::before{content:"";display:inline-block;width:10px;height:1px;background:var(--rd-err);vertical-align:.3em;margin-right:8px}
.contact-form .has-error input:not([type=radio]):not([type=checkbox]),.contact-form .has-error textarea,.contact-form .has-error select{border-color:var(--rd-err);box-shadow:0 0 0 1px var(--rd-err)}
.contact-form .has-error>legend{color:var(--rd-err)}

/* 同意：淡色の箱→上下の罫線 */
.contact-form .consent{background:transparent;border-radius:0;padding:20px 0 16px;border-top:1px solid var(--rd-line);border-bottom:1px solid var(--rd-line)}
.contact-form .consent+.consent{border-top:0}
.contact-form .consent p{font-size:.875rem;line-height:1.9;color:var(--rd-muted);margin:0 0 8px}
.contact-form .consent a{color:var(--rd-green);text-decoration-thickness:1px;text-underline-offset:.35em}
.contact-form .consent .choice{font-weight:500}
.contact-form .consent-again{color:var(--rd-err)}

/* 送信 */
.contact-form .form-status{margin:32px 0 12px;font-size:.9375rem;color:var(--rd-err)}
.contact-form .form-status.ok{color:var(--rd-green)}
.contact-form .actions .button{min-width:240px;min-height:56px}
.contact-form .button[disabled]{opacity:.55;cursor:progress}
.contact-form .button[disabled]:active{transform:none}

/* 送信後 */
.contact-done{background:transparent;border-radius:0;padding:32px 0;border-top:1px solid var(--rd-green);border-bottom:1px solid var(--rd-line)}
.contact-done h2{font-size:clamp(1.375rem,2.2vw,1.75rem);letter-spacing:.06em;color:var(--rd-ink);margin:0 0 12px}
.contact-done p{max-width:40em;line-height:1.95;margin:0}

/* 右の連絡先：淡色の箱→上に罫線、スクロールしても見える */
.contact-aside{position:sticky;top:170px;background:transparent;border-radius:0;padding:20px 0 0;border-top:1px solid var(--rd-line-2)}
.contact-aside h2{font:500 .8125rem/1.6 var(--sans);letter-spacing:.06em;color:var(--rd-muted);margin:0 0 6px}
.contact-aside .tel{display:inline-flex;align-items:center;min-height:44px;font:400 1.5rem/1.3 var(--rd-latin);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--rd-green);text-decoration:none}
.contact-aside .tel:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.contact-aside p{font-size:.875rem;line-height:1.85;color:var(--rd-ink);margin:0 0 12px}
.contact-aside p:last-child{color:var(--rd-muted)}

/* タブレット */
@media(max-width:1150px){
  .contact-layout{grid-template-columns:minmax(0,1fr) 220px;gap:48px}
  .flow-boxes{grid-template-columns:1fr 1fr}
}
/* スマホ */
@media(max-width:800px){
  .contact-layout{grid-template-columns:1fr;gap:0;padding:28px 0 72px}
  .contact-section{margin-top:56px;padding-top:36px}
  .contact-section h2{font-size:1.3125rem;margin-bottom:20px}
  .contact-intro{font-size:.9375rem}
  /* 流れは縦1列：番号を左、題と説明を右に */
  .flow-boxes{grid-template-columns:1fr}
  .flow-boxes li{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:baseline;padding:18px 0 20px}
  .flow-num{grid-row:1/span 2;margin:0}
  .flow-boxes li:not(:last-child)::after{display:none}
  .contact-form .form-sec{font-size:1.125rem;margin-top:44px;padding-top:28px}
  .contact-form .field-row{grid-template-columns:1fr}
  .contact-form select{max-width:100%}
  .contact-form .choices.row{gap:0 22px}
  .contact-form .slots{max-width:100%}
  .contact-form .actions .button{width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  .js .flow-boxes li.reveal{opacity:1;transform:none;transition:none}
  .contact-form .fp-bar i,.contact-form .fs-num,.contact-form textarea,.contact-form input,.contact-form select,.contact-form .sl-c span{transition:none}
}
@media print{
  .contact-aside{position:static}
  .js .contact-form .form-progress{display:none}
}