@charset "UTF-8";
/* ============================================================
   components.css ― 部品
   ★色は必ず「背景と文字」を対で書く。片方だけ書かない。
   ★hover は必ず濃くする。opacity で薄めない。
   ============================================================ */

/* ============================================================
   1. ボタン
   ============================================================ */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
}

/* 主CTA：--gold-deep ＋ --white ＝ 5.12:1 ／ hover 6.97:1 */
.c-btn--cta {
  background: var(--gold-deep);
  color: var(--white);
  border: none;
}
.c-btn--cta:hover {
  background: var(--gold-deep-hover);
  color: var(--white);
}

.c-btn--header {
  gap: 10px;
  padding: 13px 26px;
  font-size: var(--fs-14);
  letter-spacing: .18em;
  border-radius: var(--radius-cta);
}
.c-btn--fixed {
  gap: 8px;
  padding: 12px 22px;
  font-size: var(--fs-12);
  letter-spacing: .16em;
  border-radius: var(--radius-cta);
  flex-shrink: 0;
}
.c-btn--wide {
  gap: 12px;
  padding: 22px clamp(28px, 4vw, 48px);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-en);
}
.c-btn--mid {
  gap: 12px;
  padding: 18px clamp(28px, 4vw, 48px);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-en);
}
.c-btn--block {
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  font-size: var(--fs-14);
  letter-spacing: .18em;
}
.c-btn--submit {
  width: 100%;
  min-height: 56px;
  padding: 24px;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-en);
  cursor: pointer;
}

/* 副CTA：白地の電話ボタン（46×46） */
.c-tel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: var(--border-strong);
  font-family: var(--font-en);
  font-size: 16px;
  color: var(--gold-deep);
  transition: color .3s, border-color .3s;
}
.c-tel-icon:hover {
  color: var(--gold-deep-hover);
  border-color: var(--gold-deep);
}

/* 副CTA：白地の電話ボックス（ドロワー・送信完了） */
.c-tel-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 10px;
  border: var(--border-strong);
  box-sizing: border-box;
  transition: border-color .3s;
}
.c-tel-box:hover { border-color: var(--gold-deep); }
.c-tel-box__num {
  font-family: var(--font-en);
  font-size: 21px;
  letter-spacing: var(--ls-body-wide);
  color: var(--ink);
}
.c-tel-box__note {
  font-size: var(--fs-12);
  letter-spacing: .14em;
  color: var(--ink-weak);
}
.c-tel-box:hover .c-tel-box__num,
.c-tel-box:hover .c-tel-box__note { color: var(--gold-deep); }
/* 送信完了ページの大きめ版 */
.c-tel-box--lg { gap: 6px; padding: 16px clamp(24px, 4vw, 44px); }
.c-tel-box--lg .c-tel-box__num {
  font-size: clamp(21px, 2.6vw, 26px);
  letter-spacing: var(--ls-head);
}
.c-tel-box--lg .c-tel-box__note { letter-spacing: .18em; }

/* 副CTA：濃色帯の上の電話ボタン
   ⚠ hover で背景を変えるので、中の文字色も必ず一緒に変える。
     変えないと --ink-faint-dark が --gold-deep-hover の上で 3.12:1 になる。 */
.c-tel-dark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px clamp(24px, 4vw, 44px);
  border: 1px solid var(--ink-sub);
  box-sizing: border-box;
  transition: background .3s, color .3s, border-color .3s;
}
.c-tel-dark__num {
  font-family: var(--font-en);
  font-size: clamp(21px, 2.6vw, 26px);
  letter-spacing: var(--ls-head);
  color: var(--base);
  transition: color .3s;
}
.c-tel-dark__note {
  font-size: var(--fs-12);
  letter-spacing: .18em;
  color: var(--ink-faint-dark);
  transition: color .3s;
}
.c-tel-dark:hover {
  background: var(--gold-deep-hover);
  border-color: var(--gold-deep-hover);
}
.c-tel-dark:hover .c-tel-dark__num,
.c-tel-dark:hover .c-tel-dark__note { color: var(--white); }

/* ハンバーガー */
.c-hamburger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--gold);
  border: none;
  cursor: pointer;
  transition: background .3s;
}
.c-hamburger:hover { background: var(--gold-deep-hover); }
.c-hamburger__bar {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--white);
}

/* ドロワーを閉じる */
.c-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: var(--border-strong);
  color: var(--ink-weak);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color .3s, border-color .3s;
}
.c-drawer-close:hover { color: var(--gold-deep); border-color: var(--gold-deep); }

/* ============================================================
   2. 見出し
   ============================================================ */
.c-sechead {
  display: flex;
  /* 320px（拡大400%相当）でだけ和文が2行目に落ちる。
     375px以上では英字・線・和文が1行に並ぶ（screens/ と同じ）。
     ★ここ以外にブレークポイントを足さないための仕掛け。 */
  flex-wrap: wrap;
  align-items: baseline;
  gap: 20px;
  margin-bottom: var(--mb-heading);
}
.c-sechead--tight { margin-bottom: 56px; }
.c-sechead--48 { margin-bottom: 48px; }
.c-sechead__en {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: var(--fs-h2-en);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-en);
  color: var(--ink);
  line-height: 1.2;
}
.c-sechead__en--sm { font-size: clamp(28px, 4vw, 36px); }
.c-sechead__rule {
  /* ⚠ 幅を固定しない。375pxで英字が縮まないぶん、この線が縮んで
     和文の場所を空ける（screens/02-about-sp.webp と同じ形）。
     広い画面では max-width で 40px に止める。 */
  flex: 1 1 0;
  max-width: var(--rule-w);
  min-width: 0;
  height: var(--rule-h);
  background: var(--gold-light);
  align-self: center;
}
.c-sechead__ja {
  flex: 1 1 0;
  /* ★UniMindの見本として置くにあたっての変更（原本は min-width: 0）。
     0 のままだと360px幅で和文だけが中途半端に縮み、「スタッ / フ」と割れる。
     max-content にすると、入らないときは（flex-wrap で）まるごと2行目に落ちる。
     上の「320pxでだけ和文が2行目に落ちる」という意図はそのまま保たれる。 */
  min-width: max-content;
  font-family: var(--font-head);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-en);
  color: var(--ink-weak);
}

/* 中見出し（金の細い罫線つき） */
.c-subhead {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: var(--fw-normal);
  letter-spacing: .16em;
  color: var(--ink);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gold-light);
}
.c-subhead--18 {
  font-family: var(--font-head);
  font-size: 17px;
  letter-spacing: .16em;
}
.c-lead-heading {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-head-wide);
  line-height: 2;
  color: var(--ink);
}

/* ============================================================
   3. VIEW MORE ／ 罫線つきリンク
   ============================================================ */
.c-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-en-wide);
  color: var(--gold-deep);
}
.c-more:hover { color: var(--gold-deep-hover); }
.c-more__line {
  width: 44px;
  height: var(--rule-h);
  background: var(--gold);
  flex-shrink: 0;
}
.c-more--gap12 { gap: 12px; }
/* カードの中の小さい VIEW MORE → */
.c-more-inline {
  font-family: var(--font-en);
  font-size: var(--fs-12);
  letter-spacing: .22em;
  color: var(--gold-deep);
}
/* 和文の弱いリンク */
.c-link-plain {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-14);
  letter-spacing: .14em;
  color: var(--ink-weak);
}
.c-link-plain:hover { color: var(--gold-deep); }

/* ============================================================
   4. チップ・タグ
   ============================================================ */
.c-chip {
  border: var(--border-strong);
  padding: 9px 18px;
  font-size: var(--fs-14);
  letter-spacing: var(--ls-body-wide);
  color: var(--ink-body);
  border-radius: var(--radius-chip);
}
.c-chip--sm {
  border: var(--border);
  padding: 5px 12px;
  font-size: var(--fs-12);
  color: var(--ink-weak);
}
.c-chip--pay {
  border: var(--border-strong);
  padding: 8px 16px;
  font-size: var(--fs-12);
  color: var(--ink-body);
}
.c-chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.c-chiplist--inline {
  align-items: center;
  gap: 8px;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-body-wide);
  color: var(--ink-weak);
}
.c-chiplist__label {
  font-family: var(--font-head);
  margin-right: 4px;
  color: var(--ink-weak);
}

/* 「保険適用」タグ：--gold-pale ＋ --gold-darker ＝ 4.72:1 */
.c-tag {
  background: var(--gold-pale);
  color: var(--gold-darker);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-head);
  padding: 5px 12px;
}
.c-tag--news { padding: 4px 12px; }

/* ============================================================
   5. 数字（01〜05）
   ★色は --gold-deep（#856A2E ＝ 4.66:1）。
     書き出しは --gold-light #C8B67E だったが、地色の上で 1.83:1 になり
     文字コントラストの基準（4.5:1）を割っていた。
     ⚠ 直したのは「数字」だけ。1pxの短い横線は --gold-light のまま
       （装飾なので基準の対象外。このデザインの骨格を変えないため）。
     決定：2026-08-21（HANDOFF_ISSUES.md 指摘#5 B案）
   ============================================================ */
.c-num {
  font-family: var(--font-en);
  color: var(--gold-deep);
  line-height: var(--lh-num);
}
.c-num--sm { font-size: 30px; }
.c-num--md { font-size: 34px; }
.c-num--lg { font-size: clamp(34px, 4vw, 42px); }
.c-num--xl { font-size: clamp(34px, 4vw, 44px); }

/* ============================================================
   6. カード・ブロック
   ============================================================ */
.c-grid {
  display: grid;
  gap: var(--gap-card);
}
/* ⚠ minmax() の中の min() を外さない。外すと375pxであふれる */
.c-grid--220 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.c-grid--240 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.c-grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.c-grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.c-grid--340 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.c-grid--360 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.c-grid--380 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.c-grid--gap24 { gap: 24px; }
.c-grid--gap28 { gap: clamp(20px, 3vw, 28px); }
.c-grid--gap44 { gap: clamp(28px, 4vw, 44px); }

/* 写真＋キャプションの縦組み */
.c-figure { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* 画像を枠に合わせて中央基準で切る */
.c-photo { overflow: hidden; min-width: 0; }
.c-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.c-photo--h200 { height: clamp(200px, 24vw, 240px); }
.c-photo--h260 { height: clamp(200px, 24vw, 260px); }
.c-photo--h320 { height: clamp(260px, 30vw, 320px); }
.c-photo--h340 { height: clamp(240px, 32vw, 340px); }
.c-photo--h380 { height: clamp(220px, 32vw, 380px); }
.c-photo--h440 { height: clamp(280px, 40vw, 440px); }
.c-photo--h460 { height: clamp(300px, 40vw, 460px); }
.c-photo--h480 { height: clamp(320px, 42vw, 480px); }
.c-photo--h400 { height: 400px; }
.c-photo--h420 { height: 420px; }
/* ⚠ 地図SVGは cover 前提で描かれている（map-motif.svg のコメント参照）。
   ピンと「◯◯通り」のラベルは、切られても残る位置に置いてある。
   contain にすると余白が出て、設計意図と合わなくなる。 */

.c-figcap {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-head-wide);
  color: var(--ink-weak);
}
/* 写真の英字キャプション
   ⚠ --ink-faint-dark は濃色帯専用。地色の上では 2.03:1 になるので使わない */
.c-figcap--en {
  font-family: var(--font-en);
  letter-spacing: .28em;
  color: var(--ink-weak);
}

/* 施術カード（TOP MENU / 404 の導線） */
.c-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.c-card__meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.c-card__en {
  font-family: var(--font-en);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-en-wide);
  color: var(--gold-deep);
}
.c-card__title {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-head);
  color: var(--ink);
}
.c-card__text {
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  letter-spacing: .05em;
  color: var(--ink-body);
}
.c-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: var(--border);
  padding-top: 14px;
  margin-top: auto;
}
.c-card:hover .c-card__title { color: var(--gold-deep); }

/* 白い箱のカード（404の導線） */
.c-boxcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white);
  border: var(--border);
  padding: 24px;
}

/* 上に金の細線を持つブロック（特長・ステップ・道案内） */
.c-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--gold-light);
  padding-top: 24px;
}
.c-block--gap14 { gap: 14px; }
.c-block__label {
  font-family: var(--font-en);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-en-x);
  color: var(--gold-deep);
}
.c-block__title {
  font-family: var(--font-head);
  font-size: 16px;
  letter-spacing: var(--ls-head-wide);
  color: var(--ink);
}
.c-block__title--17 { font-size: 17px; }
.c-text {
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: 2;
  color: var(--ink-body);
}
.c-text--21 { line-height: var(--lh-body); }
.c-text--22 { line-height: 2.2; }
.c-text--23 { line-height: var(--lh-long); letter-spacing: var(--ls-body); }

/* 白い囲み箱 */
.c-panel {
  background: var(--white);
  border: var(--border);
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 48px);
}
.c-panel--sm  { padding: clamp(20px, 3vw, 28px); }
.c-panel--md  { padding: clamp(24px, 4vw, 36px) clamp(24px, 4vw, 40px); }
.c-panel--base { background: var(--base); border: none; padding: clamp(24px, 4vw, 36px); }
.c-panel--mt72 { margin-top: 72px; }
.c-panel--stack { display: flex; flex-direction: column; gap: 16px; }
.c-panel__title {
  font-family: var(--font-head);
  font-size: 16px;
  letter-spacing: .16em;
  color: var(--ink);
}
.c-panel__title--mb { margin-bottom: 24px; }
.c-panel__title--14 { font-size: var(--fs-14); letter-spacing: .14em; }
.c-panel__title--15 { font-size: 15px; letter-spacing: .14em; }

/* 「・」つきの箇条書き（原稿に「・」が文字として入っているので ul は使わない） */
.c-bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: 1.9;
  color: var(--ink-body);
}
.c-bullets--sm { gap: 8px; font-size: var(--fs-12); }

/* 通常の箇条書き（プライバシーポリシー） */
.c-list {
  list-style: disc;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: 2;
  letter-spacing: .05em;
  color: var(--ink-body);
}

/* ============================================================
   7. 定義リスト（院概要・記事の表）
   ============================================================ */
.c-deflist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 0 48px;
}
.c-deflist--1col { grid-template-columns: 1fr; gap: 0; }
.c-def {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-bottom: var(--border);
  font-size: var(--fs-14);
}
.c-def--tight { padding: 12px 0; }
.c-def--last { border-bottom: none; }
.c-def__key {
  min-width: 84px;
  color: var(--ink-weak);
  letter-spacing: var(--ls-head);
}
.c-def__val { font-weight: var(--fw-light); color: var(--ink); }

/* ============================================================
   8. 料金の行
   ============================================================ */
.c-fee { display: flex; flex-direction: column; gap: 4px; }
.c-fee__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 20px 4px;
  border-bottom: var(--border);
}
.c-fee__name {
  font-size: var(--fs-14);
  letter-spacing: var(--ls-body-wide);
  color: var(--ink);
}
.c-fee__note {
  font-size: var(--fs-12);
  font-weight: var(--fw-light);
  color: var(--ink-weak);
  margin-top: 4px;
}
.c-fee__price {
  font-family: var(--font-en);
  font-size: var(--fs-20);
  letter-spacing: var(--ls-body);
  white-space: nowrap;
  color: var(--ink);
}
.c-fee__price--unit { font-size: 18px; letter-spacing: normal; }
.c-fee__paren {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--ink-weak);
}

/* ============================================================
   9. 診療時間表
   ⚠ 文字を大きくしたときのために、必ず overflow-x の包みを付ける
   ============================================================ */
.c-hours {
  border: var(--border);
  background: var(--white);
  overflow-x: auto;
}
.c-hours__table {
  width: 100%;
  font-size: var(--fs-14);
  text-align: center;
}
.c-hours__table th,
.c-hours__table td {
  padding: 14px 4px;
  font-weight: var(--fw-normal);
  white-space: nowrap;
  color: var(--ink);
}
.c-hours__table tbody th { font-weight: var(--fw-light); }
.c-hours__table thead th {
  padding: 12px 4px;
  color: var(--ink-weak);
}
.c-hours__table thead th:first-child,
.c-hours__table tbody th {
  width: 22%;
  padding-left: 8px;
  padding-right: 8px;
  text-align: left;
}
.c-hours__table thead th:first-child {
  font-family: var(--font-head);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-head);
  color: var(--ink-weak);
}
.c-hours__table thead tr,
.c-hours__table tbody tr:not(:last-child) { border-bottom: var(--border); }
/* ⚠ 詳細度に注意。`.c-hours__table th` は (0,1,1) なので、
   クラス1つ (0,1,0) の指定では負けて色が上書きされない。
   必ず `.c-hours__table` を前に付けて (0,2,1) にする。 */
/* --white ＋ --red ＝ 5.28:1 */
.c-hours__table .c-hours__holiday { color: var(--red); }
/* ●は図形。--white の上で 3.11:1（WCAG 1.4.11 の3:1）。
   意味は読み上げ用のテキストでも伝えている */
.c-hours__table .c-hours__open { color: var(--gold); }
/* −は図形。--white ＋ --disabled ＝ 3.41:1 */
.c-hours__table .c-hours__closed { color: var(--disabled); }

/* ============================================================
   10. 注記
   ============================================================ */
.c-note {
  font-size: var(--fs-12);
  font-weight: var(--fw-light);
  line-height: 2;
  letter-spacing: .05em;
  color: var(--ink-weak);
}
.c-note--14 { font-size: var(--fs-14); line-height: 2.2; }
.c-note--22 { line-height: 2.2; }

/* ============================================================
   11. デモ表示の帯（★消さない。安全装置）
      --gold-pale ＋ --gold-darker ＝ 4.72:1
   ============================================================ */
.c-demo {
  background: var(--gold-pale);
  color: var(--gold-darker);
  border-left: 4px solid var(--gold);
  padding: 18px 24px;
  font-size: var(--fs-14);
  line-height: 2;
  letter-spacing: .05em;
}

/* ============================================================
   12. お知らせ一覧
   ============================================================ */
.c-newslist { display: flex; flex-direction: column; }
.c-newslist__item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px 32px;
  align-items: baseline;
  padding: 26px 4px;
  border-top: var(--border);
}
.c-newslist__item:last-child { border-bottom: var(--border); }
.c-newslist__meta {
  display: flex;
  align-items: center;
  gap: 18px;
}
.c-newslist__date {
  font-family: var(--font-en);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-head);
  color: var(--ink-weak);
}
.c-newslist__title {
  font-weight: var(--fw-normal);
  font-size: var(--fs-14);
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--ink);
}
.c-newslist__item:hover .c-newslist__title { color: var(--gold-deep); }

/* TOPのお知らせ帯 */
.c-newsband-sec {
  background: var(--white);
  border-top: var(--border);
  border-bottom: var(--border);
}
.c-newsband {
  max-width: var(--w-content);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
  padding: 20px var(--pad-section-x);
}
.c-newsband__label {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: var(--ls-en-x);
  color: var(--gold-deep);
  flex-shrink: 0;
}
.c-newsband__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-14);
}
.c-newsband__item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
}
.c-newsband__date {
  font-family: var(--font-en);
  color: var(--ink-weak);
  letter-spacing: var(--ls-body-wide);
}

/* ============================================================
   13. よくあるご質問
   ============================================================ */
.c-qa {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 4px;
  border-bottom: var(--border);
}
.c-qa__row {
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.c-qa__mark {
  font-family: var(--font-en);
  font-size: var(--fs-20);
  line-height: var(--lh-num);
  flex-shrink: 0;
}
/* Q：--base ＋ --gold-deep ＝ 4.66:1 */
.c-qa__mark--q { color: var(--gold-deep); }
/* A：⚠ --gold-light だと 1.83:1 で読めない。--ink-weak ＝ 4.67:1 にする */
.c-qa__mark--a { color: var(--ink-weak); }
.c-qa__q {
  font-weight: var(--fw-normal);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-body);
  line-height: 1.9;
  color: var(--ink);
}
.c-qa__a {
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: 2.2;
  color: var(--ink-body);
}

/* ============================================================
   14. フォーム
   ⚠ outline: none を書かない。:focus-visible のリングを消さない。
   ============================================================ */
.c-form { margin: 0; }
.c-form__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.c-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.c-field__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
}
.c-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-14);
  letter-spacing: var(--ls-head);
  color: var(--ink);
}
/* 必須バッジ：--gold-deep ＋ --white ＝ 5.12:1 */
.c-badge-req {
  background: var(--gold-deep);
  color: var(--white);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-head);
  padding: 3px 8px;
}
/* 任意バッジ：地色の上の --ink-weak ＝ 4.67:1 */
.c-badge-opt {
  border: var(--border-strong);
  color: var(--ink-weak);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-head);
  padding: 3px 8px;
}

.c-form input[type="text"],
.c-form input[type="tel"],
.c-form input[type="email"],
.c-form select,
.c-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 14px 16px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--ink);
  background: var(--white);
  border: var(--border);
  border-radius: 0;
  transition: border-color .3s;
}
.c-form textarea { line-height: var(--lh-body); resize: vertical; }
.c-form input:focus-visible,
.c-form select:focus-visible,
.c-form textarea:focus-visible { border-color: var(--gold-deep); }
.c-form ::placeholder { color: var(--placeholder); opacity: 1; }

/* フォームの注意書き */
.c-form__policy {
  font-size: var(--fs-12);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--ink-weak);
}

.c-agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--fs-14);
  color: var(--ink-body);
}
.c-agree input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0;
  accent-color: var(--gold-deep);
  flex-shrink: 0;
}

/* 電話／フォームの2択 */
.c-choice {
  background: var(--white);
  border: var(--border);
  padding: clamp(24px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .3s, border-color .3s;
}
.c-choice__label {
  font-family: var(--font-en);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-en-x);
  color: var(--gold-deep);
  transition: color .3s;
}
.c-choice__num {
  font-family: var(--font-en);
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: var(--ls-body-wide);
  color: var(--ink);
  transition: color .3s;
}
.c-choice__title {
  font-family: var(--font-head);
  font-size: clamp(17px, 2vw, 20px);
  letter-spacing: .14em;
  color: var(--ink);
}
.c-choice__note {
  font-size: var(--fs-12);
  font-weight: var(--fw-light);
  line-height: 1.9;
  color: var(--ink-weak);
  transition: color .3s;
}
/* ⚠ hover で背景を濃くするので、中の文字色も必ず一緒に白へ変える */
a.c-choice:hover {
  background: var(--gold-deep-hover);
  border-color: var(--gold-deep-hover);
}
a.c-choice:hover .c-choice__label,
a.c-choice:hover .c-choice__num,
a.c-choice:hover .c-choice__note { color: var(--white); }

/* ============================================================
   15. 記事（お知らせ詳細）
   ============================================================ */
.c-article__head {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--gold-light);
}
.c-article__meta {
  display: flex;
  align-items: center;
  gap: 18px;
}
.c-article__date {
  font-family: var(--font-en);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-head);
  color: var(--ink-weak);
}
.c-article__title {
  font-family: var(--font-head);
  font-size: clamp(21px, 2.8vw, 28px);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-head);
  line-height: 1.9;
  color: var(--ink);
}
.c-article__photo { margin: clamp(32px, 5vw, 48px) 0; }
.c-article__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.c-article__h2 {
  margin: 12px 0 0;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-head-wide);
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gold-light);
}
.c-article__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: clamp(48px, 7vw, 72px);
  padding-top: 28px;
  border-top: var(--border);
}
.c-article__nav {
  display: flex;
  gap: 24px;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-head);
}
.c-article__nav a { color: var(--ink-weak); }
.c-article__nav a:hover { color: var(--gold-deep); }