/* ===== CSS Variables ===== */
:root {
  --green-dark: #1a3a2a;
  --green-mid:  #2d5a3d;
  --green-acc:  #4a8c5c;
  --gold:       #b8975a;
  --gold-light: #d4b07a;
  --cream:      #f7f4ef;
  --white:      #ffffff;
  --gray-100:   #f0ede8;
  --gray-200:   #e0dbd2;
  --gray-400:   #9e9486;
  --gray-700:   #4a4540;
  --text:       #2a2520;
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  color: var(--text);
  background: var(--cream);
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ===== Layout ===== */
.wrap { max-width: 560px; margin: 0 auto; padding: 0 18px; }

/* ===== Section spacing ===== */
.sec { padding: 48px 0; }
.sec + .sec { border-top: 1px solid var(--gray-200); }

/* 日本語を文節単位で折り返し、単語の途中改行を防ぐ（LP専用セクションに限定。
   対応ブラウザ=Chrome119+/Safari17.4+。非対応は従来通り。legalページには適用しない） */
.hero,
.quick-compare,
.sec,
.footer-cta { word-break: auto-phrase; }

/* 幅の狭い表・カード類は文節折り返しを解除（列幅を膨らませないため文字単位で折り返す） */
.dtable, .dtable th, .dtable td,
.compare-card, .compare-row__val, .compare-row__label,
.compare-featured__grid, .cf-stat, .cf-stat__val { word-break: normal; }

/* 左揃えの本文・リスト・表・FAQは文節折り返し(auto-phrase)を使わず通常の折り返しに。
   右側にガタつきが出るのを防ぐ。中央寄せのボックス・CTA・見出しは今の区切りを維持する。 */
.point-body__title, .point-body__desc,
.school-card__catch,
.feat-list li,
.price-table th, .price-table td,
.note-small,
.editor-comment__label, .editor-comment__text,
.faq-q__text, .faq-a { word-break: normal; }

/* ===== Section heading ===== */
.sec-head {
  text-align: center;
  margin-bottom: 32px;
}
.sec-head__label {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--green-acc);
  margin-bottom: 8px;
}
.sec-head__title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
  color: var(--green-dark);
}
.sec-head__sub {
  font-size: 16px;
  color: var(--gray-400);
  margin-top: 8px;
}

/* ===========================
   1. HEADER
=========================== */
.site-header {
  background: var(--green-dark);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header__logo {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: .08em;
}

/* ===========================
   2. HERO (FV) — 背景画像＋テキスト
=========================== */
.hero {
  position: relative;
  /* 背景画像 img/hero-bg.webp。未配置でも下地の深緑で成立する */
  background: var(--green-dark) url('../img/hero-bg.webp') center / cover no-repeat;
  overflow: hidden;
}
/* 深緑のグラデーションを重ね、背景画像を“うっすら”見せつつ白文字を読みやすく。
   ※この値は「暗い画像（案A）」向けに薄め設定。明るい画像に差し替える場合は濃くする。
   上ほど画像が見え、下（CTA付近）ほど濃くなる。 */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(18,36,29,.18) 0%,
    rgba(18,36,29,.34) 48%,
    rgba(18,36,29,.64) 100%);
  z-index: 0;
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding: 40px 22px 38px;
  text-align: center;
}
.hero__lead {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: .06em;
  border-bottom: 1px solid rgba(212,176,122,.5);
  padding-bottom: 4px;
  margin-bottom: 16px;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.hero__title {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.45;
  color: var(--white);
  letter-spacing: .01em;
  text-shadow: 0 2px 18px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.6);
}
.hero__title-em { color: var(--gold-light); }
.hero__sub {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: rgba(255,255,255,.94);
  margin-top: 16px;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.hero__sub strong {
  color: var(--gold-light);
  font-weight: 900;
  font-size: 19px;
}
.hero__points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.hero__points li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(212,176,122,.45);
  border-radius: 8px;
  padding: 9px 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}
.hero__points li::before {
  content: '\2713';
  color: var(--gold-light);
  font-weight: 900;
  font-size: 13px;
}
.hero__cta {
  display: inline-block;
  position: relative;
  margin-top: 26px;
  background: #ef6c1a;
  color: var(--white);
  font-size: 18px;
  font-weight: 900;
  padding: 16px 54px 16px 28px; /* 右側は下向き矢印のスペース */
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
  letter-spacing: .02em;
  transition: transform .1s ease, box-shadow .1s ease, background-color .1s ease;
}
/* 下向きの矢印＝下へスクロールして比較を見る */
.hero__cta::after {
  content: '';
  position: absolute;
  right: 26px;
  top: 50%;
  margin-top: -7px;
  width: 9px;
  height: 9px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
}
.hero__cta:hover { background: #f4791f; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.hero__cta:active { transform: translateY(2px); }

/* PC：ページ全体を560px幅でセンタリングし、FVもその幅に収める */
@media (min-width: 600px) {
  .site-header,
  .divider,
  .hero,
  .quick-compare,
  .sec,
  .footer-cta,
  .site-footer {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}




/* ===========================
   3. QUICK COMPARE
=========================== */
.quick-compare {
  background: var(--white);
  padding: 32px 0 36px;
}

.compare-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.compare-card {
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}
.compare-card--rank1 { border-color: var(--gold); }

.compare-card__head {
  padding: 10px 12px;
  text-align: center;
}
.compare-card--rank1 .compare-card__head { background: var(--gold); }
.compare-card--rank2 .compare-card__head { background: var(--green-dark); }
.compare-card--rank3 .compare-card__head { background: var(--green-mid); }

/* --- Featured (本命) card --- */
.compare-featured {
  border: 2px solid var(--gold);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 4px 16px rgba(184,151,90,.18);
  margin-bottom: 18px;
}
.compare-featured__head {
  background: var(--gold);
  text-align: center;
  padding: 12px 14px;
}
.compare-featured__badge {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  margin-bottom: 2px;
}
.compare-featured__name {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: .02em;
}
.compare-featured__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.cf-stat {
  background: var(--white);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cf-stat__label {
  font-size: 14px;
  color: var(--gray-400);
}
.cf-stat__val {
  font-size: 19px;
  font-weight: 900;
  color: var(--green-dark);
  line-height: 1.3;
}
.cf-stat__val small {
  font-size: 13px;
  font-weight: 400;
  color: var(--gray-400);
}
.cf-stat__val--hl { color: #c0392b; }

.compare-featured .compare-featured__cta {
  display: block;
  width: auto;
  margin: 14px;
}
.compare-featured__vs {
  text-align: center;
  font-size: 15px;
  color: var(--gray-400);
  margin-bottom: 14px;
  position: relative;
}

.compare-card__rank {
  font-size: 16px;
  font-weight: 900;
  color: var(--white);
  display: block;
}
.compare-card__name {
  font-size: 17px;
  font-weight: 900;
  color: var(--white);
}

.compare-card__body { padding: 14px 12px; }

.compare-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--gray-100);
  gap: 6px;
}
.compare-row:last-child { border-bottom: none; }
.compare-row__label {
  color: var(--gray-400);
  font-size: 16px;
  flex-shrink: 0;
  white-space: nowrap;
}
.compare-row__val {
  font-weight: 700;
  color: var(--green-dark);
  font-size: 16px;
  text-align: right;
}

.compare-card__cta {
  display: block;
  margin: 12px 12px 14px;
  background: var(--green-dark);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  padding: 11px 8px;
  border-radius: 6px;
  letter-spacing: .04em;
}
.compare-card--rank1 .compare-card__cta { background: var(--gold); }

/* ===========================
   4. WORRIES
=========================== */
.worries { background: var(--gray-100); }

.worry-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.worry-item {
  background: var(--white);
  border-left: 4px solid var(--green-acc);
  padding: 16px 18px;
  border-radius: 0 8px 8px 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
}

.worry-resolve {
  margin-top: 28px;
  background: var(--green-dark);
  border-radius: 10px;
  padding: 22px 20px;
  text-align: center;
}
.worry-resolve__text {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.6;
}
.worry-resolve__text em {
  color: var(--gold-light);
  font-style: normal;
}

/* ===========================
   5. POINTS
=========================== */
.points { background: var(--cream); }

.point-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.point-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--white);
  border-radius: 10px;
  padding: 20px 18px;
}

.point-num {
  width: 48px;
  height: 48px;
  background: var(--green-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: var(--gold-light);
  flex-shrink: 0;
}

.point-body__title {
  font-size: 18px;
  font-weight: 900;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.point-body__desc {
  font-size: 16px;
  color: var(--gray-700);
  line-height: 1.75;
}

/* ===========================
   6. SCHOOL CARDS
=========================== */
.schools { background: var(--white); }

.school-card {
  border: 2px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 40px;
}
.school-card:last-child { margin-bottom: 0; }
.school-card--rank1 { border-color: var(--gold); }

.school-card__rank-bar {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.school-card--rank1 .school-card__rank-bar { background: var(--gold); }
.school-card--rank2 .school-card__rank-bar { background: var(--green-dark); }
.school-card--rank3 .school-card__rank-bar { background: var(--green-mid); }

.school-card__rank-no {
  font-size: 28px;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.school-card__rank-label {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
}

/* 画像エリア（実素材に差し替え） */
.school-card__img {
  width: 100%;
  aspect-ratio: 16 / 7;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 16px;
}
.school-card--rank1 .school-card__img {
  background-image: url('../img/golftec-card.jpg');
  background-size: cover;
  background-position: center;
}
.school-card--rank3 .school-card__img {
  background-image: url('../img/chicken-card.jpg');
  background-size: cover;
  background-position: center;
}
.school-card--rank2 .school-card__img {
  background-image: url('../img/rizap-card.webp');
  background-size: cover;
  background-position: center;
}

.school-card__body { padding: 22px 18px; }

.school-card__name {
  font-size: 24px;
  font-weight: 900;
  color: var(--green-dark);
  margin-bottom: 6px;
}
.school-card__catch {
  font-size: 17px;
  color: var(--gray-700);
  margin-bottom: 20px;
  line-height: 1.6;
}

/* Tag label */
.tag-label {
  display: inline-block;
  background: var(--green-dark);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 12px;
}
.tag-label--gold { background: var(--gold); }

/* Feature list */
.feat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.feat-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 17px;
  line-height: 1.6;
}
.feat-list li::before {
  content: '\2713'; /* チェックマーク */
  color: var(--green-acc);
  font-weight: 900;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Price table */
.price-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 22px;
  font-size: 16px;
}
.price-table th,
.price-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-200);
  text-align: left;
  vertical-align: top;
}
.price-table th {
  background: var(--gray-100);
  font-weight: 700;
  color: var(--gray-700);
  width: 42%;
  font-size: 16px;
}
.price-table tr:last-child th,
.price-table tr:last-child td { border-bottom: none; }
.price-table .price-val {
  font-size: 18px;
  font-weight: 900;
  color: var(--green-dark);
}

/* Icon badges（文字数に依らず全て同じサイズの箱に揃える） */
.icon-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 56px;   /* 全バッジを同じ高さの箱に固定（1行/2行いずれも中央寄せ） */
  gap: 8px;
  margin-bottom: 22px;
}
.icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  min-width: 0;        /* グリッド項目が min-content で膨らみ列幅が不揃いになるのを防ぐ */
  background: var(--gray-100);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.3;
  word-break: normal;  /* バッジ内は文節折り返しを無効化（狭い箱での不要な改行を避ける） */
}
/* SVGアイコン共通 */
.icon-badge svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: var(--green-acc);
  color: var(--green-acc); /* stroke="currentColor" のフォールバック用 */
  overflow: visible;
}

/* Editor comment */
.editor-comment {
  background: var(--cream);
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.editor-comment__label {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
}
.editor-comment__text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-700);
}

/* Campaign box */
.campaign-box {
  background: var(--green-dark);
  border-radius: 10px;
  padding: 18px 18px;
  margin: 24px 0 20px; /* 直前の注釈テキストと十分な間隔をあける */
  text-align: center;
}
.campaign-box__label {
  font-size: 16px;
  color: var(--gold-light);
  font-weight: 700;
  margin-bottom: 6px;
}
.campaign-box__text {
  font-size: 20px;
  font-weight: 900;
  color: var(--white);
  line-height: 1.45;
}

/* CTA button（クリックできると一目でわかるオレンジのボタン） */
.btn-cta {
  display: block;
  width: 100%;
  background: #ef6c1a;
  color: var(--white);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  padding: 17px 46px 17px 24px; /* 右側は矢印アイコンのスペース */
  border-radius: 10px;
  letter-spacing: .03em;
  line-height: 1.4;
  position: relative;
  box-shadow: 0 4px 12px rgba(210,90,14,.35);
  transition: transform .1s ease, box-shadow .1s ease, background-color .1s ease;
}
/* 右向きの矢印（＝別ページへ遷移することを示す） */
.btn-cta::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  margin-top: -6px;
  width: 9px;
  height: 9px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}
.btn-cta:hover { background: #f4791f; box-shadow: 0 6px 18px rgba(210,90,14,.45); }
.btn-cta:active { transform: translateY(2px); box-shadow: 0 2px 6px rgba(210,90,14,.35); }
.btn-cta--gold {
  background: var(--gold);
  box-shadow: 0 4px 12px rgba(184,151,90,.4);
}
.btn-cta__sub {
  display: block;
  font-size: 16px;
  font-weight: 600;
  opacity: 1;
  margin-top: 3px;
}

.note-small {
  font-size: 14px;
  color: var(--gray-400);
  margin-top: 10px;
  line-height: 1.6;
}

/* ===========================
   7. DETAIL COMPARE TABLE
   修正: 見出しセル(th)と偶数行tdが同色にならないよう
         tbody の stripe を td のみに適用
=========================== */
.detail-compare { background: var(--gray-100); }

.dtable {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  font-size: 16px;
}

/* thead */
.dtable thead tr th {
  padding: 14px 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  border-bottom: 2px solid var(--gray-200);
}
.dtable thead th:first-child {
  width: 22%;
  text-align: left;
  padding-left: 10px;
  background: var(--gray-200);  /* 左上セルは常にグレー */
  color: var(--gray-700);
  font-size: 14px;
}
.dtable thead th:nth-child(2) {
  background: var(--gold);
  color: var(--white);
  width: 27%;
}
.dtable thead th:nth-child(3) {
  background: var(--green-dark);
  color: var(--white);
  width: 26%;
}
.dtable thead th:nth-child(4) {
  background: var(--green-mid);
  color: var(--white);
  width: 25%;
}

/* tbody 共通 */
.dtable tbody tr {
  border-bottom: 1px solid var(--gray-100);
}
.dtable tbody tr:last-child { border-bottom: none; }

/* 見出しセル(th) は常に白背景 */
.dtable tbody th {
  text-align: left;
  padding: 13px 14px;
  font-weight: 700;
  font-size: 16px;
  color: var(--gray-700);
  background: var(--white);
  vertical-align: middle;
}

/* 偶数行の見出しセルだけ薄いグレー */
.dtable tbody tr:nth-child(even) th {
  background: var(--gray-100);
}

/* データセル(td) ? 背景は列クラスで制御 */
.dtable tbody td {
  padding: 13px 10px;
  text-align: center;
  vertical-align: middle;
  font-size: 16px;
}

/* 列ごとの背景色 */
.dtable tbody td:nth-child(2) { background: #fbf3e3; } /* GOLFTEC列：金色の薄いトーン（本命を強調） */
.dtable tbody td:nth-child(3) { background: #f3f6f4; } /* ライザップ列：緑の薄いトーン */
.dtable tbody td:nth-child(4) { background: #f5f4f1; } /* チキン列：ニュートラル */

/* 偶数行はさらに少し濃く */
.dtable tbody tr:nth-child(even) td:nth-child(2) { background: #f5e9d2; }
.dtable tbody tr:nth-child(even) td:nth-child(3) { background: #e9f0eb; }
.dtable tbody tr:nth-child(even) td:nth-child(4) { background: #edece7; }

/* GOLFTEC列（本命）は左右に金色の枠を添えて視線を誘導 */
.dtable thead th:nth-child(2),
.dtable tbody td:nth-child(2) {
  border-left: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
}

/* 行ホバー（視認補助） */
.dtable tbody tr:hover th,
.dtable tbody tr:hover td {
  background: #faf8f4;
}

.dtable .mark-yes          { color: var(--green-acc); font-size: 22px; font-weight: 900; line-height: 1; }
.dtable .mark-yes.mark-sub { opacity: .4; }   /* 部分対応（映像のみの解析）を薄く表示 */
.dtable .mark-no           { color: var(--gray-400); font-size: 18px; }
.dtable .mark-val          { font-weight: 700; color: var(--green-dark); font-size: 15px; line-height: 1.4; }
.dtable .mark-val small    { font-size: 12px; font-weight: 400; color: var(--gray-400); }
.dtable td small           { font-size: 12px; color: var(--gray-400); display: inline-block; margin-top: 2px; }
.dtable .mark-strong       { color: #c0392b; font-size: 17px; font-weight: 900; }

/* データセルの左右パディングを詰めて3社を収める */
.dtable thead tr th        { padding: 12px 5px; font-size: 14px; }
.dtable tbody th           { padding: 12px 8px; font-size: 14px; }
.dtable tbody td           { padding: 12px 5px; font-size: 14px; }

/* 横スクロール保険（狭幅端末） */
.dtable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===========================
   8. FAQ
=========================== */
.faq { background: var(--white); }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
}

.faq-q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px;
  cursor: pointer;
  background: var(--white);
  user-select: none;
}
.faq-q__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--green-dark);
  color: var(--white);
  font-weight: 900;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-top: 1px;
  padding-bottom: 3px;
}
.faq-q__text {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.55;
  flex: 1;
}
.faq-q__arr {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--gray-400);
  transition: transform .25s;
  margin-top: 2px;
}

.faq-a {
  display: none;
  padding: 0 18px 18px 58px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-700);
  border-top: 1px solid var(--gray-100);
  background: var(--gray-100);
}

.faq-item.open .faq-q { background: var(--gray-100); }
.faq-item.open .faq-a { display: block; padding-top: 14px; }
.faq-item.open .faq-q__arr { transform: rotate(180deg); }

/* ===========================
   9. FOOTER CTA
=========================== */
.footer-cta {
  background: var(--green-dark);
  padding: 44px 0 48px;
}

.footer-cta .sec-head__label { color: var(--gold-light); }
.footer-cta .sec-head__title { color: var(--white); font-size: 20px; }

.footer-cta-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-cta-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 20px 18px;
}
.footer-cta-card__num {
  font-size: 16px;
  color: var(--gold-light);
  font-weight: 700;
  margin-bottom: 4px;
}
.footer-cta-card__name {
  font-size: 20px;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 10px;
}
.footer-cta-card__price {
  font-size: 16px;
  color: rgba(255,255,255,.7);
  margin-bottom: 14px;
}

/* ===========================
   10. SITE FOOTER
=========================== */
.site-footer {
  background: #0d1a12;
  padding: 24px 18px;
  text-align: center;
}
.site-footer__note {
  font-size: 16px;
  color: rgba(255,255,255,.4);
  line-height: 1.75;
  margin-bottom: 12px;
}
.site-footer__copy {
  font-size: 16px;
  color: rgba(255,255,255,.3);
}

/* ===========================
   Divider
=========================== */
.divider {
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--green-acc));
}


/* ===========================
   Legal pages（共通）
=========================== */
.legal-header {
  background: var(--green-dark);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.legal-header__logo {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: .08em;
}
.legal-header__logo a {
  color: inherit;
  text-decoration: none;
}

.legal-hero {
  background: var(--green-dark);
  padding: 32px 18px 28px;
  text-align: center;
}
.legal-hero__title {
  font-size: 22px;
  font-weight: 900;
  color: var(--white);
  line-height: 1.4;
}
.legal-hero__date {
  font-size: 16px;
  color: rgba(255,255,255,.5);
  margin-top: 8px;
}

.legal-body {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 18px 60px;
}

.legal-section {
  margin-bottom: 40px;
}
.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section__title {
  font-size: 18px;
  font-weight: 900;
  color: var(--green-dark);
  border-left: 4px solid var(--gold);
  padding-left: 12px;
  margin-bottom: 14px;
  line-height: 1.5;
}

.legal-section__text {
  font-size: 16px;
  color: var(--gray-700);
  line-height: 1.85;
}
.legal-section__text + .legal-section__text {
  margin-top: 12px;
}

.legal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  color: var(--gray-700);
  line-height: 1.75;
}
.legal-list li {
  padding-left: 16px;
  position: relative;
}
.legal-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--green-acc);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  margin-top: 4px;
}
.legal-table th,
.legal-table td {
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  vertical-align: top;
  line-height: 1.7;
}
.legal-table th {
  background: var(--gray-100);
  font-weight: 700;
  color: var(--gray-700);
  width: 36%;
  white-space: nowrap;
}
.legal-table td {
  color: var(--text);
}

.legal-footer {
  background: #0d1a12;
  padding: 20px 18px;
  text-align: center;
}
.legal-footer__copy {
  font-size: 16px;
  color: rgba(255,255,255,.3);
}
.legal-footer__back {
  display: inline-block;
  font-size: 16px;
  color: var(--gold-light);
  margin-bottom: 10px;
}

/* ===========================
   PR badge
=========================== */
.pr-badge {
  display: inline-block;
  border: 1px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.5);
  font-size: 16px;
  padding: 1px 7px;
  border-radius: 3px;
  margin-left: 10px;
  vertical-align: middle;
}

/* ===========================
   店舗一覧
=========================== */
.shop-list-wrap {
  margin-top: 22px;
  margin-bottom: 22px;
}

.shop-list-wrap .tag-label {
  margin-bottom: 14px;
}

.shop-region {
  margin-bottom: 16px;
}

.shop-region__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--green-dark);
  background: var(--gray-100);
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
  display: block;
}

.shop-region__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 4px;
}

.shop-region__list li {
  font-size: 16px;
  color: var(--gray-700);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 6px 10px;
  line-height: 1.5;
  text-align: center;
  min-width: 0;
}
/* その地域に1店舗しかない場合は横幅いっぱいに（半端な短い枠を防ぐ） */
.shop-region__list li:only-child { grid-column: 1 / -1; }

/* ===========================
   ページトップボタン
=========================== */
.page-top {
  position: fixed;
  bottom: 24px;
  right: 18px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--gold-light);
  font-size: 24px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
  z-index: 100;
}
.page-top.is-show {
  opacity: 1;
  visibility: visible;
}

/* ===========================
   スマホのみ改行
=========================== */
.br-sp { display: inline; }
@media (min-width: 600px) {
  .br-sp { display: none; }
}

/* ===========================
   WORRIES：原因の橋渡しコピー
=========================== */
.worry-cause {
  margin-top: 20px;
  background: var(--green-dark);
  border-radius: 10px;
  padding: 20px 20px;
  text-align: center;
}
.worry-cause__text {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.7;
}
.worry-cause__text em {
  color: var(--gold-light);
  font-style: normal;
}

/* ===========================
   TYPE DIAGNOSIS
=========================== */
.diag { background: var(--cream); }

.diag-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.diag-item {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  padding: 20px 18px;
  text-align: center;
}
.diag-item--gold {
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(184,151,90,.18);
}
.diag-item__q {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.55;
}
.diag-item__q em {
  font-style: normal;
  color: var(--green-dark);
  font-weight: 900;
}
.diag-item--gold .diag-item__q em { color: var(--gold); }
.diag-item__arr {
  display: block;
  font-size: 18px;
  color: var(--gray-400);
  margin: 6px 0;
}
.diag-item__a {
  font-size: 21px;
  font-weight: 900;
  color: var(--green-dark);
  line-height: 1.3;
}
.diag-item--gold .diag-item__a { color: var(--gold); }
.diag-item__note {
  font-size: 15px;
  color: var(--gray-700);
  line-height: 1.6;
  margin-top: 8px;
}

/* ===========================
   CTA：アウトライン（比較対象の他社用・優先度を下げる）
=========================== */
/* 比較対象（他社）の副ボタン：枠線スタイル。矢印は文字色を継承 */
.btn-cta--outline {
  background: var(--white);
  color: var(--green-dark);
  border: 2px solid var(--green-mid);
  font-size: 16px;
  padding: 14px 44px 14px 20px;
  box-shadow: none;
}
.btn-cta--outline:hover { background: var(--gray-100); box-shadow: none; }
.btn-cta--outline:active { transform: translateY(1px); box-shadow: none; }
.btn-cta--outline-gold {
  color: var(--gold);
  border-color: var(--gold);
}
.btn-cta--outline-gold:hover { background: #fbf6ec; }

/* ===========================
   FOOTER CTA：本命カード＋他社テキストリンク
=========================== */
.footer-cta-card--main {
  border: 1px solid rgba(212,176,122,.5);
  background: rgba(255,255,255,.10);
}
.footer-cta-card--main .footer-cta-card__num { color: var(--gold-light); }

.footer-cta__others {
  text-align: center;
  font-size: 15px;
  color: rgba(255,255,255,.6);
  margin: 22px 0 12px;
}
.footer-cta-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-cta-link {
  display: block;
  text-align: center;
  font-size: 16px;
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  padding: 12px 10px;
}