@charset "UTF-8";
/* ==========================================================================
   ABCクリニック 無料カウンセリング予約フォーム（EFOリニューアル）
   フロントCSS ─ モバイルファースト＋レスポンシブ（PC: min-width 768px）
   デザイン: design/form_pc.pdf / form_sp.pdf 準拠
   ========================================================================== */

:root{
  --blue:#1f8fe5; --blue-d:#1477c9; --blue-soft:#e8f3fd;
  --orange:#f5a623; --orange-d:#f18f00; --orange-soft:#fff4e0;
  --ink:#333a41; --ink-2:#666f78; --ink-3:#9aa4ad;
  --line:#dce0e4; --line-2:#eceef0; --section:#eef0f2; --panel:#f6f7f8;
  --error:#e53935; --error-soft:#fdecea; --ok:#3aa564;
  --radius:9px; --radius-sm:6px;
  --maxw:680px;
  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.7; -webkit-font-smoothing:antialiased; font-size:15px; }
img{ max-width:100%; height:auto; vertical-align:bottom; }
a{ color:var(--blue); }

/* ===== レイアウト枠 ===== */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; }

/* ===== ヘッダー ===== */
.site-header{ border-bottom:1px solid var(--line-2); padding:14px 0; text-align:center; }
.site-header .logo{ display:inline-block; line-height:0; }
.site-header .logo img{ height:38px; width:auto; }
@media (max-width:767px){
  .site-header{ padding:9px 0; }
  .site-header .logo img{ height:28px; }
  .hero{ padding:14px 16px 10px; }
  .hero h1{ font-size:19px; }
  .hero .badge3{ margin-top:6px; font-size:12px; padding:4px 13px; }
  .hero .badge3 b{ font-size:14px; }
}

/* ===== ヒーロー（タイトル＋3分バッジ） ===== */
.hero{ text-align:center; padding:26px 16px 20px; }
.hero h1{ color:var(--blue); font-size:23px; font-weight:800; letter-spacing:.02em; }
.hero .badge3{ display:inline-block; margin-top:12px; background:var(--orange); color:#fff; font-weight:800; font-size:13px; padding:5px 16px; border-radius:999px; box-shadow:0 3px 8px rgba(245,166,35,.35); }
.hero .badge3 b{ font-size:16px; }

/* ===== セクションバー ===== */
.section-bar{ background:var(--section); color:var(--ink-2); font-weight:700; font-size:13px; padding:9px 16px; border-radius:var(--radius-sm); margin:20px 0 14px; }

/* ===== カード ===== */
.card{ border:1px solid var(--line); border-radius:12px; padding:20px 16px; margin-bottom:8px; }

/* ===== 適用キャンペーン（?cat 連動・該当時のみ表示） ===== */
.campaign-field[hidden]{ display:none; }
.campaign-field .checkbox{ border-color:var(--blue); background:var(--blue-soft); font-weight:700; }
.campaign-field .checkbox input:checked ~ .box{ background:var(--blue); border-color:var(--blue); }
.campaign-field .checkbox:has(input:checked){ border-color:var(--blue); background:var(--blue-soft); }

/* ===== フィールド ===== */
.field{ padding:14px 0; border-bottom:1px solid var(--line-2); }
.field:first-child{ padding-top:0; }
.field:last-child{ border-bottom:none; padding-bottom:0; }
.field-label{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; margin-bottom:9px; }
.req{ font-size:10px; font-weight:700; color:var(--orange-d); border:1px solid var(--orange); background:var(--orange-soft); border-radius:4px; padding:1px 7px; line-height:1.6; }
.any{ font-size:10px; font-weight:700; color:var(--ink-3); border:1px solid var(--line); border-radius:4px; padding:1px 7px; }
.field-note{ font-size:12px; color:var(--ink-2); margin:-2px 0 9px; line-height:1.6; }
.field-note.link{ color:var(--blue); text-decoration:underline; cursor:pointer; display:inline-block; }

/* ===== 入力欄 ===== */
.input, .select, textarea.input{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 13px; transition:border-color .15s, box-shadow .15s;
}
.input::placeholder, textarea.input::placeholder{ color:#c4cbd1; }
.input:focus, .select:focus, textarea.input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,143,229,.14); }
textarea.input{ min-height:64px; resize:vertical; }

/* 2カラム（氏名 セイ/メイ） */
.row2{ display:flex; gap:10px; }
.row2 > *{ flex:1; min-width:0; }

/* 年齢：セレクト＋「歳」 */
.age-row{ display:flex; align-items:center; gap:8px; }
.age-row .select{ flex:1; }
.age-row .unit{ font-size:14px; color:var(--ink-2); white-space:nowrap; }

/* セレクト（矢印） */
.select{ -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; }

/* 日付入力（type=date はブラウザ標準のカレンダーUIを使用） */
.date-wrap{ position:relative; }
.date-wrap .input[type="date"]{ -webkit-appearance:none; appearance:none; min-height:46px; }
.date-wrap .input[type="date"]::-webkit-calendar-picker-indicator{ opacity:.6; }

/* 希望日時のペア（日付＋時間帯） */
.dt-pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dt-pair .sub-label{ font-size:12px; font-weight:700; color:var(--ink-2); margin-bottom:5px; display:block; }

/* ===== ラジオ（はい/いいえ・あり/なし 等） ===== */
.radio-group{ display:flex; flex-direction:column; gap:9px; }
/* 短い2択（はい/いいえ・あり/なし）はスマホでも横2列にして縦の長さを圧縮 */
.radio-group.inline2{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.radio{ position:relative; display:flex; align-items:center; gap:10px; cursor:pointer; font-size:15px;
  border:1px solid var(--line); border-radius:var(--radius); padding:11px 14px; transition:border-color .15s, background .15s; }
.radio input{ position:absolute; opacity:0; width:0; height:0; }
.radio .dot{ width:20px; height:20px; border:2px solid var(--line); border-radius:50%; flex-shrink:0; position:relative; transition:border-color .15s; }
.radio input:checked ~ .dot{ border-color:var(--blue); }
.radio input:checked ~ .dot::after{ content:""; position:absolute; inset:3px; background:var(--blue); border-radius:50%; }
.radio input:checked ~ .txt{ font-weight:700; }
.radio:has(input:checked){ border-color:var(--blue); background:var(--blue-soft); }
.radio input:focus-visible ~ .dot{ box-shadow:0 0 0 3px rgba(31,143,229,.2); }

/* ===== チェックボックス（治療・確認事項） ===== */
.check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.checkbox{ position:relative; display:flex; align-items:center; gap:11px; cursor:pointer; font-size:15px;
  border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; transition:border-color .15s, background .15s; }
.checkbox input{ position:absolute; opacity:0; width:0; height:0; }
.checkbox .box{ width:20px; height:20px; border:2px solid var(--line); border-radius:5px; flex-shrink:0; position:relative; transition:border-color .15s, background .15s; }
.checkbox input:checked ~ .box{ background:var(--blue); border-color:var(--blue); }
.checkbox input:checked ~ .box::after{ content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.checkbox:has(input:checked){ border-color:var(--blue); background:var(--blue-soft); }
.checkbox input:focus-visible ~ .box{ box-shadow:0 0 0 3px rgba(31,143,229,.2); }

/* ===== サブパネル（お住まい） ===== */
.subpanel{ background:var(--panel); border-radius:10px; padding:16px; }
.subpanel .subpanel-title{ font-weight:700; font-size:14px; margin-bottom:12px; }
.subpanel .field{ border-bottom-color:var(--line); }
.zip-input{ max-width:200px; }

/* ===== 最短希望（強調ボックス） ===== */
.shortest-box{ margin:10px 0; }
.shortest-box .checkbox{ background:#fff; }
.shortest-lead{ font-size:12.5px; font-weight:700; color:var(--orange-d); margin-bottom:6px; }
.hope-note{ font-size:12px; color:var(--ink-2); margin:12px 0 8px; }
.is-collapsed{ display:none !important; }

/* ===== 確認事項アコーディオン ===== */
.agree{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.agree-head{ display:flex; align-items:center; gap:11px; padding:13px 14px; cursor:pointer; background:#fff; user-select:none; }
.agree-head .box{ width:20px; height:20px; border:2px solid var(--line); border-radius:5px; flex-shrink:0; position:relative; }
.agree-head.checked .box{ background:var(--blue); border-color:var(--blue); }
.agree-head.checked .box::after{ content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.agree-head .label{ flex:1; font-size:14px; font-weight:700; }
.agree-head .label .req{ margin-left:7px; vertical-align:1px; }
.agree-head .chev{ width:12px; height:12px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(45deg); transition:transform .2s; }
.agree.open .agree-head .chev{ transform:rotate(-135deg); }
.agree-body{ display:none; padding:4px 14px 14px; border-top:1px dashed var(--line); background:var(--panel); }
.agree.open .agree-body{ display:block; }
.agree-body .checkbox{ background:#fff; align-items:flex-start; font-size:13.5px; line-height:1.6; margin-top:10px; }
.agree-body .checkbox .box{ margin-top:1px; }
.agree-body .checkbox .em{ color:var(--error); font-weight:700; }

/* ===== エラー / 正常 ===== */
.error-msg{ display:none; color:var(--error); font-size:12.5px; font-weight:700; margin-top:7px; padding-left:20px; position:relative; }
.error-msg::before{ content:"!"; position:absolute; left:0; top:0; width:15px; height:15px; background:var(--error); color:#fff; border-radius:50%; font-size:10px; text-align:center; line-height:15px; }
.field.is-error .input, .field.is-error .select, .field.is-error textarea.input{ border-color:var(--error); background:var(--error-soft); }
.field.is-error .error-msg{ display:block; }
.field.is-error .radio, .field.is-error .checkbox, .field.is-error .agree{ border-color:var(--error); }
.field.is-valid .field-label::after{ content:"✓"; color:var(--ok); font-size:13px; margin-left:2px; }

/* ===== 送信ボタン ===== */
.submit-area{ text-align:center; padding:28px 0 8px; }
.btn-submit{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; max-width:360px; border:none; cursor:pointer; color:#fff; font-family:var(--sans); font-size:17px; font-weight:800;
  padding:17px 24px; border-radius:999px; background:linear-gradient(180deg,#f7b12e,#f39200);
  box-shadow:0 8px 20px rgba(243,146,0,.34); transition:transform .12s, box-shadow .12s; }
.btn-submit::after{ content:""; width:9px; height:9px; border-right:2px solid #fff; border-top:2px solid #fff; transform:rotate(45deg); }
.btn-submit:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(243,146,0,.44); }
.btn-submit:active{ transform:translateY(0); }
.btn-submit:disabled{ background:#d7dce0; box-shadow:none; cursor:not-allowed; }
.privacy-note{ font-size:12.5px; color:var(--ink-2); margin-top:14px; }

/* ===== フッター ===== */
.site-footer{ margin-top:26px; padding:18px 0 30px; text-align:center; }
.site-footer .copy{ font-size:11px; color:var(--ink-3); }

/* ===== 確認画面（コンパクト） ===== */
.confirm-lead{ text-align:center; font-size:13.5px; color:var(--ink-2); margin-bottom:16px; }
.summary{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.summary .grp-head{ background:var(--section); font-weight:700; font-size:12.5px; color:var(--ink-2); padding:7px 14px; }
.summary dl{ display:grid; grid-template-columns:38% 62%; }
.summary dt, .summary dd{ padding:9px 14px; border-top:1px solid var(--line-2); font-size:13.5px; }
.summary dt{ background:#fbfcfd; color:var(--ink-2); font-weight:700; }
.summary dd{ word-break:break-all; }
.summary dd .empty{ color:var(--ink-3); }
.confirm-actions{ display:flex; flex-direction:column; gap:12px; align-items:center; padding:24px 0 8px; }
.btn-back{ background:none; border:none; color:var(--blue); font-size:13.5px; font-weight:700; text-decoration:underline; cursor:pointer; font-family:var(--sans); }

/* ===== 完了画面（thanks） ===== */
.thanks-main{ text-align:center; padding:34px 0 10px; }
.thanks-icon{ width:74px; height:74px; margin:0 auto 16px; border-radius:50%; background:var(--blue-soft); display:flex; align-items:center; justify-content:center; }
.thanks-icon svg{ width:40px; height:40px; }
.thanks-main h2{ font-size:22px; font-weight:800; color:var(--ink); }
.thanks-box{ text-align:left; border:1px solid var(--line); border-radius:12px; padding:20px 18px; margin-top:22px; }
.thanks-box > p{ font-size:14px; }
.thanks-box .box-inner{ background:var(--panel); border-radius:9px; padding:13px 15px; margin-top:14px; }
.thanks-box .box-inner p{ font-size:13.5px; margin:2px 0; }
.thanks-box .red{ color:var(--error); font-weight:700; }

/* ==========================================================================
   PC（min-width:768px）
   ========================================================================== */
@media (min-width:768px){
  body{ font-size:15px; }
  .wrap{ padding:0 24px; }
  .hero{ padding:34px 16px 24px; }
  .hero h1{ font-size:30px; }
  .card{ padding:26px 30px; }
  .field{ padding:18px 0; }

  /* ラジオはPCで横並び */
  .radio-group{ flex-direction:row; flex-wrap:wrap; gap:12px; }
  .radio-group.inline2{ display:flex; }   /* PCではコンパクトな行に戻す（間延び防止） */
  .radio{ flex:0 1 auto; min-width:140px; }

  /* 治療チェックは3カラム */
  .check-grid.cols3{ grid-template-columns:repeat(3,1fr); }

  /* 入力欄フォントはPCで16px維持（ズーム防止不要だが統一） */
  .input, .select, textarea.input{ font-size:15px; }

  /* 送信ボタンは中央ピル幅 */
  .btn-submit{ max-width:340px; font-size:18px; }

  /* 確認画面の見出し列を少し広く */
  .summary dl{ grid-template-columns:32% 68%; }
}

/* 大画面での余白 */
@media (min-width:1024px){
  .hero h1{ font-size:32px; }
}

/* Next rootの旧共通CSSが先に読み込まれるため、新テンプレート単独時のUA値へ戻す。 */
body#input input.input{
  height:auto; padding:12px 13px; font-family:var(--sans); font-size:16px;
  line-height:normal; border:1px solid var(--line); border-radius:var(--radius); background:#fff;
}
body#input select.select{
  height:auto; padding:12px 34px 12px 13px; font-family:var(--sans); font-size:16px;
  line-height:normal; border:1px solid var(--line); border-radius:var(--radius); background-color:#fff;
}
body#input a:link, body#input a:visited,
body#confirm a:link, body#confirm a:visited,
body#thanks a:link, body#thanks a:visited{ color:var(--blue); text-decoration:underline; }
.btn-back{ display:inline; max-width:none; width:auto; margin:0; padding:0; border-radius:0; line-height:normal; }
.btn-submit{ margin:0; line-height:normal; -webkit-appearance:auto; appearance:auto; }
.btn-submit::after{ box-sizing:content-box; }
@media (min-width:768px){
  body#input input.input, body#input select.select{ font-size:15px; }
}