/* =====================================================================
   お問い合わせ /new/contact/
   1. ご用件の選択  2. 電話・WEBオーダーの案内  3. フォームの枠・返信の目安・右側の案内(電話・申込書と提出先)
   4. Contact Form 7 の入力欄・エラー・送信中  5. 送信完了  見出し帯の返信の目安
   入力欄の基本の見た目は site.css の「フォームの基本」
   ===================================================================== */

/* 1. ご用件の選択(カード6つ + 電話のご案内) ------------------------- */
.inq-grid { display: grid; gap: 12px; }
.inq-grid > li { position: relative; display: flex; }
@media (min-width: 768px) { .inq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.inq-card, .inq-tel {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px; grid-template-areas: "icon en check" "icon title check" "icon text check";
  align-content: start; column-gap: 20px; row-gap: 2px; width: 100%; padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; text-align: left;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), background-color var(--dur-1) var(--ease);
}
.inq-card__icon { grid-area: icon; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.inq-card__icon .icon { width: 24px; height: 24px; }
.inq-card__en { grid-area: en; font-family: var(--font-en); font-size: .75rem; font-weight: 700; letter-spacing: var(--track-label); color: var(--muted); }
.inq-card__title { grid-area: title; font-family: var(--font-head); font-size: var(--fs-h4); font-weight: 700; line-height: 1.55; letter-spacing: var(--track-head); word-break: auto-phrase; font-feature-settings: "palt"; text-wrap: balance; }
.inq-card__text { grid-area: text; margin-top: 4px; font-size: var(--fs-sm); line-height: 1.85; color: var(--ink-2); word-break: auto-phrase; }
/* 選択の丸とカードの枠は、状態を示す部品なので白地に 3:1 以上(入力欄の枠と同じ --line-strong) */
.inq-card { border-color: var(--line-strong); }
.inq-card__check {
  grid-area: check; align-self: center; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); color: transparent; transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.inq-card__check .icon { width: 16px; height: 16px; stroke-width: 2.2; }
.inq-card .vf--card { inset: 10px; --vf-s: 14px; }
@media (hover: hover) and (pointer: fine) {
  .inq-card:hover { border-color: var(--navy); box-shadow: var(--shadow-1); }
  .inq-card:hover .vf--card { opacity: 1; }
  .inq-card:hover .vf--card i { transform: none; }
}
.inq-card:focus-visible .vf--card { opacity: 1; }
.inq-card:focus-visible .vf--card i { transform: none; }
.inq-card[aria-pressed="true"] { border-color: var(--blue); background: #f5faff; box-shadow: inset 0 0 0 1px var(--blue); }
.inq-card[aria-pressed="true"] .inq-card__check { background: var(--blue); border-color: var(--blue); color: #fff; }
.inq-card[aria-pressed="true"] .inq-card__icon { background: var(--blue); color: #fff; }
.no-js .inq-card { cursor: default; }
.no-js .inq-card__check { display: none; }
@media (max-width: 599px) {
  /* スマホではフォームまでの距離を縮める(説明文は省き、見出しだけで選べるように) */
  .inq-grid { gap: 8px; }
  .inq-card, .inq-tel { grid-template-columns: 40px minmax(0, 1fr) 26px; column-gap: 14px; padding: 16px 16px 16px 14px; }
  .inq-card__icon { width: 40px; height: 40px; }
  .inq-card__icon .icon { width: 20px; height: 20px; }
  .inq-card__text { display: none; }
  .inq-card__title { font-size: 1rem; }
  .inq-card { align-items: center; }
}
/* 電話のご案内(ご用件のカードの後。768px以上は全幅の帯で、電話番号を右に) */
.inq-tel { grid-template-areas: "icon en en" "icon title title" "icon num num" "icon link link"; border-color: var(--navy); background: var(--navy); color: #fff; }
.inq-tel .inq-card__icon { background: rgba(124, 200, 255, .16); color: var(--sky); }
.inq-tel .inq-card__en { color: var(--on-dark-3); }
.inq-tel__num { grid-area: num; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-family: var(--font-en); font-size: clamp(1.5rem, 1.25rem + .6vw, 1.625rem); font-weight: 700; letter-spacing: var(--track-body); line-height: 1.2; }
.inq-tel__num:hover { color: var(--sky); }
@media (min-width: 768px) {
  .inq-grid > .inq-grid__tel { grid-column: 1 / -1; }
  .inq-tel { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "icon en num" "icon title num" "icon link num"; padding-block: 22px; }
  .inq-tel__num { align-self: center; justify-self: end; margin: 0; padding-left: 24px; border-left: 1px solid var(--line-dark); font-size: clamp(1.625rem, .765rem + 1.65vw, 2.25rem); }
}
.inq-tel__link { grid-area: link; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; color: var(--sky-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.inq-tel__link .icon { width: 16px; height: 16px; }
.inq-tel :focus-visible { outline-color: var(--sky); }

/* 2. WEBオーダーのご案内 --------------------------------------------- */
.inq-order { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 18px; margin-top: 14px; padding: 18px 24px; border-radius: var(--radius-lg); background: var(--surface-2); }
.inq-order__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--blue); }
.inq-order__icon .icon { width: 22px; height: 22px; }
.inq-order__text { font-size: var(--fs-sm); color: var(--ink-2); }
.inq-order__text strong { color: var(--ink); }
.inq-order__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
@media (min-width: 900px) { .inq-order { grid-template-columns: auto minmax(0, 1fr) auto; } .inq-order__links { grid-column: auto; } }

/* 3. フォームの枠と右側の案内 ---------------------------------------- */
.cform { scroll-margin-top: var(--header-h); }
.cform__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .cform__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
  .cform__aside { position: sticky; top: calc(var(--header-h) + 24px); }
}
.cform__head { margin-bottom: 28px; }
.cform__title { font-size: var(--fs-h2); line-height: 1.42; letter-spacing: var(--track-head); scroll-margin-top: calc(var(--header-h) + 56px); }
.cform__title:focus { outline: none; }
.cform__selected { word-break: auto-phrase; font-family: var(--font-head); font-feature-settings: "palt"; display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 14px; border: 1px solid var(--blue); border-radius: var(--radius); background: #fff; color: var(--blue); font-size: var(--fs-sm); font-weight: 700; }
.cform__selected:empty { display: none; }
.cform__box { padding: clamp(24px, 4vw, 56px); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-1); }
.cform__intro { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-2); }
.cform__foot { margin-top: 28px; display: grid; gap: 6px; font-size: var(--fs-xs); line-height: 1.8; color: var(--muted); }
.cform__foot a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.cform__unavailable { color: var(--ink-2); }
/* 申込書・資料(右側の案内からそのままダウンロード) */
.aside-card__docs { display: grid; gap: 2px; margin-bottom: 4px; }
.aside-doc { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; padding: 8px 0; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; line-height: 1.6; color: var(--blue); }
.aside-doc .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.aside-doc small { display: block; font-family: var(--font-en); font-size: .75rem; font-weight: 600; color: var(--muted); letter-spacing: var(--track-head); }
.aside-doc:hover span { text-decoration: underline; text-underline-offset: 3px; }
/* 記入した申込書の提出先(右欄では入れ子の枠をやめて、上の罫線だけにする。文の幅を広く取り、右欄を短く) */
.cform__aside .apply-notice--compact { margin: 12px 0 0; padding: 14px 0 2px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.cform__aside .apply-notice__text { line-height: 1.8; }
.cform__aside .apply-notice__warn { padding: 10px 12px; border: 0; border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-xs); line-height: 1.8; }
/* 「このご用件を選ぶ」(代理店・販売パートナーのお申込みのカードを選んでフォームへ) */
.apply-pick {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 8px 16px 8px 12px; border: 1px solid var(--blue); border-radius: var(--radius);
  background: #fff; color: var(--blue); font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.apply-pick .icon { width: 16px; height: 16px; stroke-width: 2; }
@media (hover: hover) and (pointer: fine) { .apply-pick:hover { background: var(--blue); color: #fff; } }
.apply-pick:active { background: var(--blue-tint); }

/* 返信の目安(フォームの頭)。いま送った時の目安の行(is-now)を強調する */
.cform__reply { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-top: 18px; font-size: var(--fs-sm); color: var(--ink-2); }
.cform__reply-head { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; color: var(--ink); letter-spacing: var(--track-head); }
.cform__reply-head .icon { width: 18px; height: 18px; color: var(--blue); align-self: center; }
.cform__reply-list { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.cform__reply-row { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.cform__reply-row dt { color: var(--muted); }
.cform__reply-row dd { font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; color: var(--ink-2); }
.cform__reply-row.is-now dd { color: var(--ink); }
.cform__reply-row.is-now dt::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(0, 104, 196, .16); vertical-align: 1px; }
/* reCAPTCHA の表示は、フォーム下の文言で代える */
.grecaptcha-badge { visibility: hidden !important; }

/* 必須の印 */
.req {
  display: inline-flex; align-items: center; height: 20px; margin-left: 10px; padding: 0 7px; border-radius: var(--radius);
  background: var(--blue); color: #fff; font-family: var(--font-ja); font-size: .75rem; font-weight: 700; line-height: 1; letter-spacing: var(--track-head); vertical-align: 2px;
}
.cform__intro .req { margin: 0 4px 0 0; }

/* 4. Contact Form 7 の入力欄 ----------------------------------------- */
.ips-cf7 { display: grid; gap: 24px 20px; }
.ips-cf7 > * { grid-column: 1 / -1; margin: 0; }
@media (min-width: 700px) {
  .ips-cf7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 1行の入力欄は2列に並べる(住所は1行に) */
  .ips-cf7 > p:has(input[type="text"], input[type="tel"], input[type="email"]):not(:has([data-name="your-prefectures"], .wpcf7-checkbox, textarea)) { grid-column: auto; }
}
.ips-cf7 .hidden-fields-container { display: none; }
.ips-cf7 label > br, .ips-cf7 > p > br { display: none; }
.ips-cf7 .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.ips-cf7 label { margin-bottom: 0; }
.ips-cf7 ::placeholder { color: var(--muted); opacity: 1; }
.ips-cf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .ips-cf7 textarea { font-weight: 400; }
.ips-cf7 textarea { min-height: 200px; }
.ips-cf7 .form-legend { font-family: var(--font-head); font-feature-settings: "palt"; display: block; font-size: var(--fs-sm); font-weight: 700; }
/* 用件ごとの欄の補足(採用: 会社名・部署名は個人の方は空欄で可)。欄の名前と同じ行に小さく添える */
.ips-cf7 .form-note { margin-left: 4px; font-family: var(--font-ja); font-size: .75rem; font-weight: 400; color: var(--muted); }
.ips-cf7 .form-note[hidden] { display: none; }

/* チェックボックス(お問い合わせ内容)。上のご用件のカードと同じ並び(768px以上は2列×3段、767px以下は1列)で、どの選択肢も同じ高さ(52px 以上)。
   チェックした選択肢は、カードの選択状態と同じ青の枠・淡い青の面にする(カードとフォームの対応が見た目でも分かるように)。
   文字の太さは変えない(チェックで文字幅が変わって折り返し・高さが変わらないように) */
.ips-cf7 .wpcf7-checkbox, .ips-cf7 .wpcf7-radio { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 8px; }
@media (min-width: 768px) { .ips-cf7 .wpcf7-checkbox, .ips-cf7 .wpcf7-radio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } }
.ips-cf7 .wpcf7-list-item { display: flex; min-width: 0; margin: 0; }
.ips-cf7 .wpcf7-list-item label {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 16px 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; font-size: var(--fs-sm); font-weight: 400; line-height: 1.5; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.ips-cf7 .wpcf7-list-item input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; }
@media (hover: hover) and (pointer: fine) { .ips-cf7 .wpcf7-list-item label:hover { border-color: var(--navy); } }
.ips-cf7 .wpcf7-list-item label:has(input:checked) { border-color: var(--blue); background: #f5faff; box-shadow: inset 0 0 0 1px var(--blue); color: var(--ink); }
.ips-cf7 .wpcf7-list-item label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* エラー */
.ips-cf7 :is(input, textarea, select).wpcf7-not-valid { border-color: var(--signal-strong); }
.ips-cf7 .wpcf7-checkbox.wpcf7-not-valid .wpcf7-list-item label:not(:has(input:checked)) { border-color: var(--signal-strong); }
.ips-cf7 .wpcf7-not-valid-tip { font-family: var(--font-head); font-feature-settings: "palt"; display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--signal-strong); font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; }
.ips-cf7 .wpcf7-not-valid-tip::before {
  content: "!"; display: grid; place-items: center; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--signal-strong); color: #fff; font-family: var(--font-en); font-size: .75rem; font-weight: 800; line-height: 1;
}
.ips-cf7 .wpcf7-response-output { font-family: var(--font-head); font-feature-settings: "palt";   margin: 0 !important; padding: 14px 18px !important; border: 1px solid var(--line-2) !important; border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.7;
}
.ips-cf7:is([data-status="invalid"], [data-status="unaccepted"], [data-status="payment-required"]) .wpcf7-response-output { border-color: #e7b4b0 !important; background: #fdf3f2; color: #8c1d18; }
.ips-cf7:is([data-status="failed"], [data-status="spam"], [data-status="aborted"]) .wpcf7-response-output { border-color: #e9c37a !important; background: #fdf7ea; color: #6b4a00; }
.ips-cf7[data-status="sent"] .wpcf7-response-output { border-color: #9cc9a5 !important; background: #f0f8f1; color: #1e5b2b; }

/* 送信ボタン・送信中 */
.ips-cf7 > p:has(.wpcf7-submit) { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.ips-cf7 .wpcf7-submit { min-width: min(320px, 100%); min-height: 64px; font-size: 1.0625rem; letter-spacing: var(--track-label); }
.ips-cf7 .wpcf7-submit:disabled { cursor: not-allowed; opacity: .5; }
.ips-cf7[data-status="submitting"] .wpcf7-submit:disabled { cursor: progress; opacity: .72; }
.ips-cf7 .wpcf7-spinner {
  width: 22px; height: 22px; margin: 0; border: 2px solid var(--line-2); border-top-color: var(--blue); border-radius: 50%;
  background: none; opacity: 1;
}
.ips-cf7 .wpcf7-spinner::before { display: none; }
@media (prefers-reduced-motion: no-preference) { .ips-cf7 .wpcf7-spinner { animation: cf-spin .8s linear infinite; } }
@keyframes cf-spin { to { transform: rotate(360deg); } }
@media (max-width: 599px) {
  .ips-cf7 > p:has(.wpcf7-submit) { position: relative; }
  .ips-cf7 .wpcf7-submit { width: 100%; }
  /* 幅いっぱいのボタンの中(右端)に表示する */
  .ips-cf7 .wpcf7-spinner { position: absolute; right: 18px; top: 49px; border-color: rgba(255, 255, 255, .45); border-top-color: #fff; }
}

/* 5. 送信完了 -------------------------------------------------------- */
.cdone { padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 64px); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-1); text-align: center; }
.cdone:not([hidden]) { animation: fade-up var(--dur-3) var(--ease-out) both; }
.cdone__mark { position: relative; display: grid; place-items: center; width: 104px; height: 104px; margin: 0 auto 28px; color: var(--blue); }
.cdone__mark .vf { inset: 0; --vf-c: var(--blue); --vf-s: 20px; }
.cdone__mark > .icon { width: 44px; height: 44px; stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .cdone:not([hidden]) .cdone__mark .vf i { animation: vf-lock .9s var(--ease-out) both .15s; }
  .cdone:not([hidden]) .cdone__mark .vf i:nth-child(1) { --dx: -14px; --dy: -14px; }
  .cdone:not([hidden]) .cdone__mark .vf i:nth-child(2) { --dx: 14px; --dy: -14px; }
  .cdone:not([hidden]) .cdone__mark .vf i:nth-child(3) { --dx: -14px; --dy: 14px; }
  .cdone:not([hidden]) .cdone__mark .vf i:nth-child(4) { --dx: 14px; --dy: 14px; }
}
@keyframes vf-lock { from { transform: translate(var(--dx, 0), var(--dy, 0)); opacity: 0; } to { transform: none; opacity: 1; } }
.cdone__eyebrow { margin-bottom: 12px; font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--blue); }
.cdone__title { margin-bottom: 24px; font-size: var(--fs-h3); }
.cdone__title:focus { outline: none; }
.cdone__text { max-width: 36em; margin-inline: auto; color: var(--ink-2); line-height: 2; text-align: left; }
.cdone__text + .cdone__text { margin-top: 12px; }
.cdone__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; margin-top: 36px; }

/* 送信前の同意の確認 */
.ips-cf7 > p.consent { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); }
.consent__label { display: inline-flex !important; align-items: center; gap: 12px; min-height: 44px; margin: 0 !important; line-height: 1.6; font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; font-size: var(--fs-md) !important; cursor: pointer; }
.consent__label input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--blue); }
.consent__note { font-size: .875rem; color: var(--ink-2); line-height: 1.8; padding-left: 34px; }
.consent__note a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.ips-cf7 > p.consent:has(input:checked) { border-color: var(--blue); background: #f5faff; }

/* 見出し帯の右側: 返信の目安(ips_site_masthead の aside。1024px以上は右側、1023px以下は説明文の下) */
.reply-board { width: min(100%, 420px); margin-left: auto; padding: 28px 30px 26px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .05); }
.reply-board__en { display: flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: .75rem; font-weight: 700; letter-spacing: var(--track-label); color: var(--sky); }
.reply-board__en i { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(124, 200, 255, .18); }
.reply-board__list { display: grid; margin-top: 14px; border-top: 1px solid var(--line-dark); }
.reply-board__list div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
.reply-board__list dt { font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; color: var(--on-dark-2); }
.reply-board__list dd { font-family: var(--font-head); font-feature-settings: "palt"; font-size: 1.25rem; font-weight: 700; letter-spacing: var(--track-head); color: #fff; }
.reply-board__tel { margin-top: 14px; font-size: var(--fs-sm); line-height: 1.8; color: var(--on-dark-2); }
.reply-board__tel span { display: block; font-family: var(--font-en); font-size: 1.25rem; font-weight: 700; letter-spacing: var(--track-body); color: #fff; }
/* いま送った時の目安の行: 「NOW」の札。ほかの行は控えめに */
.reply-board__list .reply-board__row { position: relative; }
.reply-board__list:has(.is-now) .reply-board__row:not(.is-now) dd { color: var(--on-dark-2); }
.reply-board__row.is-now dt::after {
  content: "NOW"; display: inline-block; margin-left: 10px; padding: 1px 6px; border: 1px solid rgba(124, 200, 255, .5); border-radius: var(--radius);
  font-family: var(--font-en); font-size: .75rem; font-weight: 700; line-height: 1.4; letter-spacing: var(--track-label); color: var(--sky); vertical-align: 1px;
}
/* 1024px以上: 3つの時間帯を1行ずつ(時間帯を左、目安を右に)。見出し帯の高さ(1024px で約410px)に収める */
@media (min-width: 1024px) {
  .reply-board { width: min(100%, 460px); padding: 24px 26px 22px; }
  .reply-board__list { margin-top: 12px; }
  .reply-board__list .reply-board__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; padding: 13px 0; }
  .reply-board__list dd { font-size: var(--fs-md); }
  .reply-board__row.is-now dt::after { margin-left: 8px; }
}
/* 1023px以下: 説明文の下に小さく(電話番号は押せる窓口がすぐ下にあるので省く)。600px以上は1段に並べる */
@media (max-width: 1023px) {
  .masthead--aside .masthead__aside { display: block; width: min(var(--wrap), 100% - var(--gutter) * 2); margin: clamp(22px, 4vw, 32px) auto 0; }
  .reply-board { width: 100%; margin: 0; padding: 12px 16px 10px; }
  .reply-board__list { margin-top: 6px; gap: 2px; border-top: 0; }
  .reply-board__list .reply-board__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding: 2px 0; border: 0; }
  .reply-board__list dt { font-size: var(--fs-xs); }
  .reply-board__list dd { font-size: var(--fs-sm); }
  .reply-board__tel { display: none; }
}
/* 599px以下: 3つの時間帯をそろえて、時間帯の下に目安(「NOW」の札で1行に収まらない行が出ないように) */
@media (max-width: 599px) {
  .reply-board__list .reply-board__row { display: grid; gap: 0; padding: 3px 0; }
}
/* 600〜1023px: 「RESPONSE TIME」の右に、時間帯と目安の2列の表(列の位置をそろえる) */
@media (min-width: 600px) and (max-width: 1023px) {
  .reply-board { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 14px 20px; }
  .reply-board__list { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 14px; margin: 0; }
  .reply-board__list .reply-board__row { display: contents; }
}

/* キーボードで右欄のリンクへ移った時に、固定ヘッダーの下に隠れない位置で止める */
.cform__aside :is(a, button) { scroll-margin-top: calc(var(--header-h) + 16px); scroll-margin-bottom: 16px; }