/* =====================================================================
   guide-page.css — ご利用ガイド配下の下層ページ共通
   marker: .p-gp*（generate-pages.mjs の has('p-gp')）
   対象: F01 ガイドTOP / F02 ご利用の流れ / F03* 手数料 / F04 加入・資料請求
   ===================================================================== */

/* ---- 共通プレースホルダ（画像は制作側で差し替え） ---- */
.p-gp__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}
.p-gp__ph-label {
  font-size: 12px;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  text-align: center;
  opacity: .7;
}

/* =====================================================================
   F01 ご利用ガイド TOP
   ===================================================================== */
.p-gp { background: var(--bg-default); }

/* KV（画像＋下端中央の山型切り欠き：特徴ページと同構成） */
.p-gp__kv { position: relative; line-height: 0; }
.p-gp__kv > picture img { width: 100%; height: auto; display: block; }
.p-gp__kv-mountain {
  position: absolute;
  left: 50%;
  bottom: -2px;               /* 継ぎ目のヘアラインを防ぐ */
  width: 320px;               /* SP: 横幅320px固定（比率維持） */
  transform: translateX(-50%);
  pointer-events: none;
}
.p-gp__kv-mountain img { width: 100%; height: auto; }
.p-gp__kv-mountain-pc { display: none; }
.p-gp__kv-mountain-sp { display: block; }
/* KV画像の切替(600px)に合わせて山型も切替 */
@media (min-width: 600px) {
  .p-gp__kv-mountain { width: 640px; }  /* PC: 横幅640px固定（比率維持） */
  .p-gp__kv-mountain-pc { display: block; }
  .p-gp__kv-mountain-sp { display: none; }
}

.p-gp__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-64);
}
/* デスクトップ: 白カードを他ページと同じ1200px幅・端寄せ挙動に揃える（container-pad 80pxを相殺） */
@media (min-width: 1024px) { .p-gp__inner { padding-inline: 0; } }

/* eyebrow（= h1） */
.p-gp__eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}
.p-gp__eyebrow-text {
  font-size: clamp(20px, 5.5vw, 24px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-orange);
}
.p-gp__dots { width: 64px; height: auto; }

/* イントロ */
.p-gp__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
  max-width: 720px;
}
.p-gp__intro-head { display: flex; flex-direction: column; gap: var(--space-16); }
.p-gp__intro-title {
  font-size: 24px;
  line-height: 1.6;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.p-gp__intro-text {
  font-size: 16px;
  line-height: 1.625;
  font-weight: var(--fw-light);
  color: var(--text-default);
}
.p-gp__area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-24);
  background: var(--container-white);
  border-radius: var(--radius-16);
}
.p-gp__area-title {
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--text-default);
}
.p-gp__area-list {
  font-size: 16px;
  line-height: 1.625;
  font-weight: var(--fw-light);
  color: var(--text-default);
}

/* セクションリスト */
.p-gp__sections {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

/* 各案内カード */
.p-gp-sec {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "head" "img" "act";
  gap: var(--space-24);
  align-items: center;
  padding: var(--space-40) var(--space-24);
  background: var(--container-white);
  border-radius: var(--radius-40);
}
.p-gp-sec__head { grid-area: head; display: flex; flex-direction: column; gap: var(--space-16); }
.p-gp-sec__img  { grid-area: img; justify-self: center; }
.p-gp-sec__act  { grid-area: act; }
.p-gp-sec__body { display: contents; }

.p-gp-sec__img {
  width: 200px; height: 200px;
}
.p-gp-sec__title {
  font-size: clamp(24px, 6vw, 32px);
  line-height: 1.4;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
.p-gp-sec__text {
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--fw-light);
  color: var(--text-default);
}

/* 手数料エリアボタン群 */
.p-gp-fee {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
  width: 100%;
}
.p-gp-fee__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: var(--space-8) var(--space-16);
  background: var(--container-white);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  text-align: center;
  transition: background-color .2s ease;
}
.p-gp-fee__btn:hover { background: var(--container-highlight); }

/* ---- SP(<=599px): モバイル調整 ---- */
@media (max-width: 599px) {
  .p-gp__inner { gap: var(--space-40); }
  /* イントロ: リード文のみ左寄せ（見出し・配達エリアは中央のまま）＋見出し20px */
  .p-gp__intro { align-items: stretch; }
  .p-gp__intro-head { text-align: left; }
  .p-gp__intro-title { text-align: center; font-size: 20px; }
  /* 各コンテンツ（白カード）をフルブリード */
  .p-gp__sections { width: auto; align-self: stretch; margin-inline: calc(-1 * var(--container-pad)); }
  .p-gp-sec { border-radius: 0; }
  /* 手数料ボタンを3列 */
  .p-gp-fee { grid-template-columns: repeat(3, 1fr); }
  /* 各コンテンツ画像を235px */
  .p-gp-sec__img { width: 235px; height: 235px; }
  /* 各アイテムの見出しをセンタリング */
  .p-gp-sec__title { text-align: center; }
  /* アクションボタンを幅100% */
  .p-gp-sec__act .c-btn { width: 100%; }
  /* アイテム内の上下パディング48px */
  .p-gp-sec { padding-block: var(--space-48); }
}

/* ---- PC(>=1024px): テキスト左・画像右 ---- */
@media (min-width: 1024px) {
  .p-gp__inner { gap: var(--space-64); padding-bottom: 0; }
  .p-gp-sec {
    grid-template-columns: 1fr 235.8px;
    grid-template-areas:
      "head img"
      "act  img";
    column-gap: var(--space-80);
    row-gap: var(--space-40);
    padding: var(--space-64);
    align-items: center;
  }
  .p-gp-sec__img { width: 235.8px; height: 235.8px; align-self: center; }
  .p-gp-fee { grid-template-columns: repeat(3, 1fr); gap: var(--space-40) var(--space-40); }
}

/* =====================================================================
   共通: ページヘッダー帯（F02 / F03 / F04 下層ページ）
   ===================================================================== */
.p-gp-head {
  background: var(--bg-default);
  text-align: center;
  padding: var(--space-64) var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}
.p-gp-head__title {
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.4;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
.p-gp-head__lead {
  font-size: 16px;
  line-height: 1.625;
  font-weight: var(--fw-light);
  color: var(--text-default);
  max-width: 720px;
}

/* =====================================================================
   F02 ご利用の流れ
   ===================================================================== */
.p-gp--flow { background: var(--bg-default); }
.p-gp-flow {
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
/* デスクトップ: 白背景パネルを他ページと同じ1200px幅に（container-pad 80pxを相殺） */
@media (min-width: 1024px) { .p-gp-flow { padding-inline: 0; } }

/* ステップ一覧: 全体を1枚の白背景パネルで囲む */
.p-gp-flow__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--container-white);
  border-radius: var(--radius-40);
  padding: var(--space-24) var(--space-16);
}
.p-gp-step {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  padding: var(--space-32) var(--space-24);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-24);
}
/* ステップ間の下向き矢印（frozen-step-arrow.webp を90°回転・元サイズ／上下40px） */
.p-gp-step + .p-gp-step { margin-top: calc(40px + 26px + 40px); }   /* 上40 + 矢印高さ26 + 下40 */
.p-gp-step + .p-gp-step::before {
  content: "";
  position: absolute;
  top: -53px;                 /* 矢印中心（次ステップ上端から 40 + 26/2） */
  left: 50%;
  width: 26px; height: 64px;  /* 元画像サイズ。90°回転で幅64×高さ26の下向きに */
  transform: translate(-50%, -50%) rotate(90deg);
  background: url(../img/frozen-step-arrow.webp) center / contain no-repeat;
}

.p-gp-step__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
}
.p-gp-step__img {
  flex: none;
  width: 140px; height: 140px;
}
.p-gp-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}
.p-gp-step__head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}
.p-gp-step__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 2px var(--space-12);
  border-radius: 4px;
  background: var(--text-secondary);
  color: var(--text-white);
}
.p-gp-step__badge-l { font-size: 10px; line-height: 18px; font-weight: var(--fw-bold); letter-spacing: .04em; }
.p-gp-step__badge-n { font-size: 14px; line-height: 22px; font-weight: var(--fw-bold); }
.p-gp-step__title {
  font-size: clamp(20px, 5vw, 24px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.p-gp-step__text {
  font-size: 16px;
  line-height: 1.625;
  font-weight: var(--fw-light);
  color: var(--text-default);
}
.p-gp-step__annot {
  font-size: 14px;
  line-height: 1.5;
  font-weight: var(--fw-light);
  color: var(--text-default);
}
.p-gp-step__cta { text-align: center; }
/* 加入申し込み(primary)ボタンは本文直下に（上の余白0・Figma準拠） */
.p-gp-step__cta:has(.c-btn--primary) { margin-top: calc(-1 * var(--space-40)); }
.p-gp-step__extra {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* 補足ノート（2カラム） */
.p-gp-step__notes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.p-gp-note { display: flex; flex-direction: column; gap: var(--space-8); }
.p-gp-note__t { font-size: 16px; line-height: 1.5; font-weight: var(--fw-bold); color: var(--text-default); }
.p-gp-note__d { font-size: 14px; line-height: 1.55; font-weight: var(--fw-light); letter-spacing: .04em; color: var(--text-default); }
.p-gp-note__d--16 { font-size: 16px; line-height: 1.625; letter-spacing: 0; }

/* 注文方法カード（STEP04） */
.p-gp-methods {
  background: var(--container-highlight);
  border-radius: var(--radius-16);
  padding: var(--space-24);
}
.p-gp-methods__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
}
.p-gp-method { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; }
.p-gp-method__img { width: 80px; height: 80px; }
.p-gp-method__img .p-gp__ph-label { font-size: 11px; }
.p-gp-method__t { font-size: 16px; line-height: 1.4; font-weight: var(--fw-bold); color: var(--text-default); }
.p-gp-method__d { font-size: 12px; line-height: 1.5; font-weight: var(--fw-light); color: var(--text-default); }

/* コールアウト（専用カバー） */
.p-gp-callout {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  background: var(--container-highlight);
  border-radius: var(--radius-16);
}
.p-gp-callout__img { flex: none; width: 72px; height: 72px; border-radius: var(--radius-8); }
.p-gp-callout__img .p-gp__ph-label { font-size: 11px; }
.p-gp-callout__t { font-size: 15px; line-height: 1.55; font-weight: var(--fw-light); color: var(--text-default); }

/* =====================================================================
   ご注文からお届けまでのサイクル 図
   ===================================================================== */
.p-gp-cycle {
  display: flex;
  flex-direction: column;
  padding: var(--space-40) var(--space-24);
  background: var(--container-white);
  border-radius: var(--radius-40);
}
/* gapをやめ、要素間を個別マージンで制御（SP: 見出し→リード24 / リード→表40 / 表→繰り返し8 / 繰り返し→注意文40） */
.p-gp-cycle__head { display: flex; flex-direction: column; gap: var(--space-24); text-align: center; align-items: center; }
.p-gp-cycle__scroll { margin-top: var(--space-40); }
.p-gp-cycle__repeat { margin-top: var(--space-8); }
.p-gp-cycle__notes { margin-top: var(--space-40); }
.p-gp-cycle__title { font-size: clamp(22px, 5vw, 32px); line-height: 1.4; font-weight: var(--fw-bold); color: var(--text-default); text-decoration: underline; text-decoration-color: var(--container-green); text-decoration-thickness: 8px; text-underline-offset: -2px; text-decoration-skip-ink: none; }
.p-gp-cycle__lead { font-size: 16px; line-height: 1.625; font-weight: var(--fw-light); color: var(--text-default); max-width: 1000px; }
.p-gp-cycle__lead b { font-weight: var(--fw-bold); }

.p-gp-cycle__scroll { overflow-x: auto; padding-bottom: 0; }
.p-gp-cycle__grid {
  display: grid;
  grid-template-columns: 160px repeat(3, minmax(150px, 1fr));
  grid-template-rows: 50px repeat(4, 72px);
  min-width: 720px;
  border: 1px solid var(--border-light);
}
.p-gp-cycle__corner { grid-area: 1 / 1; border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.p-gp-cycle__weekhead {
  grid-area: 1 / 2 / 2 / 5;
  display: flex; align-items: center; justify-content: center;
  background: #aba9a7; color: var(--text-white);
  font-size: 16px; font-weight: var(--fw-bold);
  border-bottom: 1px solid var(--border-light);
}
.p-gp-cycle__week {
  display: flex; align-items: center; justify-content: center;
  background: #aba9a7; color: var(--text-white);
  font-size: 16px; font-weight: var(--fw-bold);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.p-gp-cycle__block {
  position: relative;
  border-radius: var(--radius-8);
  display: flex;
  flex-direction: column;
  margin: 0 8px;
}
.p-gp-cycle__block::after {
  content: "";
  position: absolute;
  top: 100%; left: 0;
  width: 100%; height: 14px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.p-gp-cycle__block--short::after { display: none; }
.p-gp-cycle__block--cyan { background: var(--container-cyan); }
.p-gp-cycle__block--pink { background: var(--container-pink); }
.p-gp-cycle__block--green { background: var(--container-green); }
.p-gp-cycle__seg {
  height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1.5; font-weight: var(--fw-light); color: var(--text-default);
  text-align: center;
}
.p-gp-cycle__seg--order { font-weight: var(--fw-light); }
.p-gp-cycle__seg--order b { font-weight: var(--fw-bold); }
.p-gp-cycle__repeat { text-align: center; font-size: 16px; line-height: 1.625; font-weight: var(--fw-light); color: var(--text-default); }
.p-gp-cycle__notes { display: flex; flex-direction: column; gap: var(--space-4); }
.p-gp-cycle__notes p { font-size: 13px; line-height: 1.5; font-weight: var(--fw-light); color: var(--text-default); }

/* ---- SP(<=599px): ご利用の流れ ---- */
@media (max-width: 599px) {
  /* 白背景パネル（ステップ／サイクル）をフルブリード */
  .p-gp-flow__steps,
  .p-gp-cycle { width: auto; margin-inline: calc(-1 * var(--container-pad)); border-radius: 0; }
  /* SP: ヘッダーの上下パディングを40pxに */
  .p-gp-head { padding-block: var(--space-40); }
  /* SP: ステップパネルのパディングを24pxに（上下左右） */
  .p-gp-flow__steps { padding: var(--space-24); }
  /* SP(STEP4/5): 注釈の上の隙間を8pxに（extraのgap24 − margin16）。下はgapの24pxのまま */
  .p-gp-step__annot { margin-top: calc(-1 * var(--space-16)); }
  /* SP: サイクルのリード文は左寄せ（見出しは中央のまま） */
  .p-gp-cycle__lead { align-self: stretch; text-align: left; }
  /* タグ・見出しをイラストの上に配置＋中央寄せ（バッジ↕タイトルで縦積み） */
  .p-gp-step__body { display: contents; }
  .p-gp-step__head { order: -1; flex-direction: column; align-items: center; }
  .p-gp-step__title { text-align: center; }
  .p-gp-step__text, .p-gp-step__annot, .p-gp-callout { align-self: stretch; }
  /* 加入申し込み(primary)ボタンの上に40pxマージン（PCの詰めを解除） */
  .p-gp-step__cta:has(.c-btn--primary) { margin-top: 0; }
  /* STEPと矢印の間を24px */
  .p-gp-step + .p-gp-step { margin-top: calc(24px + 26px + 24px); }
  .p-gp-step + .p-gp-step::before { top: -37px; }
}

/* ---- PC(>=1024px) ---- */
@media (min-width: 1024px) {
  .p-gp-flow__steps { padding: var(--space-64); }
  .p-gp-step { padding: var(--space-64); }
  .p-gp-step__main { flex-direction: row; align-items: center; gap: var(--space-40); }
  .p-gp-step__img { width: 180px; height: 180px; }
  .p-gp-step__notes { flex-direction: row; gap: var(--space-40); }
  .p-gp-note { flex: 1 1 0; }
  .p-gp-methods { padding: var(--space-32) var(--space-40); }
  .p-gp-methods__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-40); }
  .p-gp-cycle { padding: var(--space-64); }
  /* PC: リード→表・繰り返し→注意文を64pxに（見出し→リード24 / 表→繰り返し8 は共通） */
  .p-gp-cycle__scroll { margin-top: var(--space-64); }
  .p-gp-cycle__notes { margin-top: var(--space-64); }
  .p-gp-cycle__grid { grid-template-columns: 240px repeat(3, 1fr); min-width: 0; }
}

/* =====================================================================
   F03 コープデリの手数料（東京都・各エリア）
   ===================================================================== */
.p-gp--fee { background: var(--bg-default); }
.p-gp-fee-page {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

/* エリア切替ナビ（ヘッダー帯内） */
.p-gp-fee-head { padding-bottom: var(--space-40); }
.p-gp-fee-nav {
  list-style: none;
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
  margin-top: var(--space-8);
}
.p-gp-fee-nav__btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 60px;
  padding: var(--space-8) var(--space-16);
  background: var(--container-white);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  font-size: 16px; line-height: 1.5; font-weight: var(--fw-bold);
  color: var(--text-primary);
  transition: background-color .2s ease;
}
.p-gp-fee-nav__btn:hover { background: var(--container-highlight); }
.p-gp-fee-nav__btn[aria-current="page"] {
  background: var(--color-secondary-light);
  border-color: transparent;
  color: var(--text-muted);
  cursor: default;
}

/* セクション（白カード） */
.p-gp-feesec {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding: var(--space-32) var(--space-24);
  background: var(--container-white);
  border-radius: var(--radius-40);
}
.p-gp-feesec__title {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  font-size: clamp(22px, 5vw, 32px);
  line-height: 1.45;
  font-weight: var(--fw-bold);
  color: var(--text-default);
  text-align: center;
  background: linear-gradient(var(--container-green), var(--container-green)) 0 90% / 100% 8px no-repeat;
}
/* カード内アコーディオン: 閉=白 / 開=淡いクリーム地（Figma準拠） */
.p-gp-feesec .p-gp-acc { border-color: var(--border-default); }
.p-gp-feesec .p-gp-acc:has(.p-gp-acc__btn[aria-expanded="true"]) { background: #fdf6ec; }

/* 料金ブロック */
.p-gp-feeblock { display: flex; flex-direction: column; gap: var(--space-16); }
.p-gp-feeblock__head { display: flex; flex-direction: column; gap: var(--space-8); }
.p-gp-feeblock__title {
  font-size: clamp(18px, 4.5vw, 20px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-default);
}
.p-gp-feeblock__text {
  font-size: 16px; line-height: 1.625; font-weight: var(--fw-light); color: var(--text-default);
}
.p-gp-subblock { display: flex; flex-direction: column; gap: var(--space-16); }
.p-gp-subblock__head { display: flex; flex-direction: column; gap: var(--space-8); }
.p-gp-subblock__title { font-size: 16px; line-height: 1.5; font-weight: var(--fw-bold); color: var(--text-default); }

/* 料金テーブル */
.p-gp-ft {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-8);
  overflow: hidden;
  table-layout: fixed;
}
.p-gp-ft th, .p-gp-ft td {
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-12);
  text-align: center;
  vertical-align: middle;
}
/* 外周は table 側の border に任せ、内側だけセルの右・下線で描く */
.p-gp-ft tr > *:last-child { border-right: 0; }
.p-gp-ft tbody tr:last-child > * { border-bottom: 0; }
.p-gp-ft__h {
  background: #aba9a7;
  color: var(--text-white);
}
.p-gp-ft__h .p-gp-ft__hmain { font-size: 16px; line-height: 1.5; font-weight: var(--fw-bold); }
.p-gp-ft__h .p-gp-ft__hsub  { font-size: 12px; line-height: 1.5; font-weight: var(--fw-light); letter-spacing: .04em; }
.p-gp-ft__label { width: 30%; }
.p-gp-ft__label .p-gp-ft__hmain { font-size: 16px; line-height: 1.5; font-weight: var(--fw-bold); color: var(--text-default); }
.p-gp-ft__label .p-gp-ft__hsub  { font-size: 12px; line-height: 1.5; font-weight: var(--fw-light); letter-spacing: .04em; color: var(--text-default); }
/* 見出し行の左上セル（ご利用金額）もグレー地＋白文字で見出し行を揃える */
.p-gp-ft thead .p-gp-ft__label { background: #aba9a7; }
.p-gp-ft thead .p-gp-ft__label .p-gp-ft__hmain,
.p-gp-ft thead .p-gp-ft__label .p-gp-ft__hsub { color: var(--text-white); }
.p-gp-ft td { background: var(--container-white); }
/* 本体セル（行ラベル含む）は白地。アコーディオン内のクリーム地を透けさせない */
.p-gp-ft tbody th { background: var(--container-white); }

/* 価格表示 */
.p-gp-priceb { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.p-gp-price { display: inline-flex; align-items: baseline; font-weight: var(--fw-bold); color: var(--text-default); }
.p-gp-price b { font-size: 20px; line-height: 1.4; letter-spacing: .04em; }
.p-gp-price small { font-size: 14px; }
.p-gp-priceb__sub { font-size: 12px; line-height: 1.5; font-weight: var(--fw-light); letter-spacing: .04em; color: var(--text-default); }
.p-gp-priceb--free .p-gp-price { color: var(--text-pink); }
.p-gp-priceb--free .p-gp-priceb__sub { color: var(--text-pink); }

/* 基本＋配達 の複合セル */
.p-gp-ft__combo { display: flex; align-items: center; justify-content: center; gap: var(--space-24); position: relative; }
.p-gp-ft__fee { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.p-gp-ft__feelabel { font-size: 12px; line-height: 1.5; font-weight: var(--fw-light); letter-spacing: .04em; color: var(--text-default); }
.p-gp-ft__plus {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--color-secondary); color: var(--text-white);
  font-size: 16px; line-height: 1; font-weight: var(--fw-bold);
}
.p-gp-ft__note { font-size: 12px; line-height: 1.5; font-weight: var(--fw-light); letter-spacing: .04em; color: var(--text-default); }
/* 表の直後・注釈同士の間隔は8px（親のgap16を相殺） */
.p-gp-ft + .p-gp-ft__note,
.p-gp-ft__note + .p-gp-ft__note { margin-top: calc(var(--space-8) - var(--space-16)); }

/* 赤ちゃん/子育て 導入（見出し・イラスト・説明を中央寄せの縦積み） */
.p-gp-feeblock:has(.p-gp-babyhero) .p-gp-feeblock__title {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  font-size: clamp(22px, 5.5vw, 28px);
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: center;
}
.p-gp-babyhero { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; }
.p-gp-babyhero__img { flex: none; width: 148px; height: 164px; border-radius: var(--radius-16); }
.p-gp-babyhero__text { font-size: 16px; line-height: 1.625; font-weight: var(--fw-light); color: var(--text-default); }
/* 赤ちゃん割引と子育て割引の間を40pxに（.p-gp-feeblock の gap16px + 24px） */
.p-gp-feeblock:has(.p-gp-babyhero) .p-gp-subblock + .p-gp-subblock { margin-top: var(--space-24); }
/* SP: 家族イラスト下の説明文は左寄せ（イラストは中央のまま） */
@media (max-width: 599px) {
  .p-gp-babyhero__text { text-align: left; }
}

/* ポイント還元ボックス */
.p-gp-pointbox {
  display: flex; flex-direction: column; gap: var(--space-8);
  margin-top: calc(var(--space-40) - var(--space-16));   /* 上の余白を40pxに（親のgap16を加味） */
  padding: var(--space-24);
  background: var(--container-highlight);
  border-radius: var(--radius-16);
}
.p-gp-pointbox__t { font-size: 16px; line-height: 1.5; font-weight: var(--fw-bold); color: var(--text-default); }
.p-gp-pointbox__d { font-size: 14px; line-height: 1.55; font-weight: var(--fw-light); letter-spacing: .04em; color: var(--text-default); }

/* アコーディオン */
.p-gp-acc {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-16);
  background: var(--container-white);
  overflow: hidden;
}
/* 連続するアコーディオン同士は16px間隔（セクションgapを相殺、Figma準拠） */
.p-gp-feesec .p-gp-acc + .p-gp-acc { margin-top: calc(var(--space-16) - var(--space-40)); }
@media (min-width: 1024px) {
  .p-gp-feesec .p-gp-acc + .p-gp-acc { margin-top: calc(var(--space-16) - var(--space-64)); }
}
.p-gp-acc__btn {
  display: flex; align-items: center; gap: var(--space-16);
  width: 100%; padding: var(--space-24); text-align: left;
}
.p-gp-acc__title { flex: 1 1 auto; font-size: 16px; line-height: 1.5; font-weight: var(--fw-bold); color: var(--text-default); }
.p-gp-acc__toggle { position: relative; flex: none; width: 24px; height: 24px; }
.p-gp-acc__toggle::before, .p-gp-acc__toggle::after {
  content: ""; position: absolute; left: 4px; top: 11px; width: 16px; height: 2px;
  border-radius: 2px; background: var(--color-primary);
}
.p-gp-acc__toggle::after { transform: rotate(90deg); transition: opacity .2s ease, transform .2s ease; }
.p-gp-acc__btn[aria-expanded="true"] .p-gp-acc__toggle::after { opacity: 0; transform: rotate(0); }
.p-gp-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.p-gp-acc__btn[aria-expanded="true"] + .p-gp-acc__panel { grid-template-rows: 1fr; }
.p-gp-acc__inner { overflow: hidden; }
.p-gp-acc__body { display: flex; flex-direction: column; gap: var(--space-16); padding: 0 var(--space-24) var(--space-24); }
.p-gp-acc__desc { font-size: 16px; line-height: 1.625; font-weight: var(--fw-light); color: var(--text-default); }
.p-gp-acc__list { margin: 0; padding-left: 1.6em; list-style: decimal; font-size: 16px; line-height: 1.625; font-weight: var(--fw-light); color: var(--text-default); }
.p-gp-acc__list li + li { margin-top: var(--space-8); }
.p-gp-acc__img { align-self: center; width: 176px; height: 160px; border-radius: var(--radius-16); }

/* 手数料のみのシンプル表（割引アコーディオン内） */
.p-gp-ft--simple .p-gp-ft__label { width: auto; }

/* 新規加入特典 */
.p-gp-benefit { gap: var(--space-40); }
.p-gp-benefit__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; }
.p-gp-benefit__title { font-size: clamp(22px, 5vw, 32px); line-height: 1.4; font-weight: var(--fw-bold); color: var(--text-default); text-decoration: underline; text-decoration-color: var(--container-green); text-decoration-thickness: 8px; text-underline-offset: -2px; text-decoration-skip-ink: none; }
.p-gp-benefit__lead { font-size: 16px; line-height: 1.625; font-weight: var(--fw-light); color: var(--text-default); }
/* 特典ブロック本体（ラベル・カード・注釈）は components.css の .c-benefit* に共通化 */

/* ---- SP(<=599px): 手数料 ---- */
@media (max-width: 599px) {
  /* セル内の左右パディングを4px */
  .p-gp-ft th, .p-gp-ft td { padding-inline: 4px; }
  /* 手数料セクションの角丸を0に */
  .p-gp-feesec { border-radius: 0; }
  /* SP: セクション見出しは24px */
  .p-gp-feesec__title { font-size: 24px; }
  /* SP: セクションの上下パディングを48pxに（左右24pxは維持） */
  .p-gp-feesec { padding-block: var(--space-48); }
  /* 各アコーディオンのリード文を左寄せ */
  .p-gp-acc__desc { text-align: left; }
}

/* ---- PC(>=1024px) ---- */
@media (min-width: 1024px) {
  .p-gp-fee-nav { grid-template-columns: repeat(4, 1fr); max-width: 1200px; }
  .p-gp-feesec { padding: var(--space-64); gap: var(--space-64); }
  .p-gp-acc__img { width: 176px; }
}

/* =====================================================================
   F04 加入・資料請求
   ===================================================================== */
.p-gp--req { background: var(--bg-default); }
.p-gp-req-head__btns {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-16);
  margin-top: var(--space-8);
}
.p-gp-req-page {
  max-width: 1200px; margin-inline: auto;
  padding: 0 var(--container-pad);
  display: flex; flex-direction: column; gap: var(--space-64);
}
/* デスクトップ: 白背景を他ページと同じ1200px幅に（container-pad 80pxを相殺） */
@media (min-width: 1024px) { .p-gp-req-page { padding-inline: 0; } }
.p-gp-join__img-link { position: relative; display: block; width: 100%; }
/* 画像バナー右上の別ウィンドウアイコン（キャンペーンバナーと同じ default.svg・円背景込みの単体SVG） */
.p-gp-join__img-badge {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; pointer-events: none;
}
.c-btn__blank { flex: none; width: 16px; height: 16px; }
.p-gp-req-intro { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; }
.p-gp-req-intro__title { font-size: clamp(20px, 5vw, 24px); line-height: 1.5; font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--text-secondary); }
.p-gp-req-intro__text { font-size: 16px; line-height: 1.625; font-weight: var(--fw-light); color: var(--text-default); }

.p-gp-joins { display: flex; flex-direction: column; gap: var(--space-40); }
.p-gp-join {
  display: flex; flex-direction: column; gap: var(--space-24);
  padding: var(--space-32) var(--space-24);
  background: var(--container-white); border-radius: var(--radius-40);
  overflow: clip;
}
.p-gp-join__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); width: 100%; }
.p-gp-join__title {
  width: 100%;
  font-size: clamp(22px, 5.5vw, 32px); line-height: 1.45; font-weight: var(--fw-bold);
  color: var(--text-default); text-align: left;
}
.p-gp-join__title span {
  background: linear-gradient(var(--container-green), var(--container-green)) 0 88% / 100% 8px no-repeat;
}
.p-gp-join__text { display: flex; flex-direction: column; gap: var(--space-8); }
.p-gp-join__lead { font-size: clamp(18px, 4.5vw, 20px); line-height: 1.6; font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--text-default); }
.p-gp-join__desc { font-size: 16px; line-height: 1.625; font-weight: var(--fw-light); color: var(--text-default); }
.p-gp-join__annot { font-size: 14px; line-height: 1.55; font-weight: var(--fw-light); letter-spacing: .04em; color: var(--text-default); margin-top: var(--space-8); }
.p-gp-join__note {
  width: 100%;
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-24); background: var(--container-highlight); border-radius: var(--radius-24);
}
.p-gp-join__note-t { font-size: 14px; line-height: 1.55; font-weight: var(--fw-bold); color: var(--text-default); }
.p-gp-join__note-d { font-size: 14px; line-height: 1.55; font-weight: var(--fw-light); letter-spacing: .04em; color: var(--text-default); }
.p-gp-join__img { width: 100%; aspect-ratio: 460 / 290; border-radius: var(--radius-24); }
/* おためしセットバナー画像のみ枠線（キャンペーンバナーと同じ） */
.p-gp-join__img-link .p-gp-join__img { border: 1px solid #D8D2CA; }

@media (min-width: 1024px) {
  .p-gp-join { flex-direction: row; align-items: center; gap: var(--space-64); padding: var(--space-64); }
  .p-gp-join__body { flex: 1 1 0; gap: var(--space-40); }
  .p-gp-join__img, .p-gp-join__img-link { flex: none; width: 460px; align-self: center; }
}

/* ---- SP(<=599px): 加入・資料請求 ---- */
@media (max-width: 599px) {
  /* 白背景（特典・案内カード）: マージン削除＋パディング48/24 */
  .p-gp-benefit,
  .p-gp-join { width: auto; margin: 0; border-radius: 0; padding: var(--space-48) var(--space-24); }
  /* ヘッダーの資料請求／加入申し込みを縦積み＋上下入れ替え（加入申し込みを上に） */
  .p-gp-req-head__btns { flex-direction: column; }
  .p-gp-req-head__btns .c-btn--primary { order: -1; }
  /* SP: ヘッダー下余白を64pxに（上は共通の40pxのまま） */
  .p-gp-req-head { padding-bottom: var(--space-64); }
  /* SP: セクション間gapを40px・横paddingなし（白カードをフルブリード） */
  .p-gp-req-page { gap: var(--space-40); padding-inline: 0; }
  /* SP: 導入テキストは端に付かないよう横paddingを維持（ヘッダーのリード文と揃える） */
  .p-gp-req-intro { padding-inline: var(--container-pad); }
  /* 案内カードの見出しはSPのみ中央寄せ */
  .p-gp-join__title { text-align: center; }
  /* 白箱内のボタンを幅100%＋画像をボタンの上に。
     注釈(__annot)は画像とボタンの間に置くため、__textもdissolveしてlead/desc/img/annot/buttonを個別order化。
     順: 見出し→リード→説明→画像→注釈→ボタン→ノート */
  .p-gp-join__body { display: contents; }
  .p-gp-join__text { display: contents; }
  .p-gp-join__title { order: 1; }
  .p-gp-join__lead { order: 2; }
  .p-gp-join__desc { order: 3; margin-top: calc(var(--space-8) - var(--space-24)); }   /* lead↔desc間を8pxに維持 */
  .p-gp-join__img, .p-gp-join__img-link { order: 4; }
  .p-gp-join__annot { order: 5; margin-top: 0; }
  .p-gp-join .c-btn { order: 6; width: 100%; }
  .p-gp-join__note { order: 7; }
}

/* =====================================================================
   F05 よくある質問（TOP・カテゴリ）
   ===================================================================== */
.p-gp--qa { background: var(--bg-default); }
.p-gp-qa-page {
  max-width: calc(1200px);
  margin-inline: auto;
  padding: 0 var(--container-pad);
  display: flex; flex-direction: column; gap: var(--space-40);
}
/* デスクトップ: 白ボックスを他ページと同じ1200px幅に（container-pad 80pxを相殺） */
@media (min-width: 1024px) { .p-gp-qa-page { padding-inline: 0; } }
.p-gp-qa-card {
  display: flex; flex-direction: column; gap: var(--space-24);
  padding: var(--space-32) var(--space-24);
  background: var(--container-white); border-radius: var(--radius-40);
}
/* hidden属性で確実に非表示（display:flexの上書きを防ぐ） */
.p-gp-qa-card[hidden] { display: none; }
.p-gp-qa-card__title {
  width: fit-content; max-width: 100%; margin-inline: auto;
  font-size: clamp(22px, 5vw, 32px); line-height: 1.45; font-weight: var(--fw-bold);
  color: var(--text-default); text-align: center;
  background: linear-gradient(var(--container-green), var(--container-green)) 0 90% / 100% 8px no-repeat;
}

/* 検索フォーム（Figma: 角丸16・placeholder「例：支払い」・hover/入力でクリーム地・focusは青枠） */
.p-gp-qa-search { position: relative; width: 100%; }
.p-gp-qa-search__input {
  width: 100%;
  padding: var(--space-24);
  padding-right: 96px; /* 自前クリアボタン(✗)＋虫眼鏡ボタンの分 */
  border: 1px solid var(--border-default); border-radius: var(--radius-16);
  background: var(--container-white);
  font-family: var(--font-base); font-size: 16px; line-height: 1.625; color: var(--text-default);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.p-gp-qa-search__input::placeholder { color: #cac5bd; opacity: 1; }
/* hover / 入力済みは淡いクリーム地 */
.p-gp-qa-search:hover .p-gp-qa-search__input,
.p-gp-qa-search__input:not(:placeholder-shown) { background: #fdf6ec; }
/* focus は青2px枠 */
.p-gp-qa-search__input:focus-visible {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 1px var(--focus-ring);
}
.p-gp-qa-search__btn {
  position: absolute; top: 50%; right: var(--space-24); transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; color: var(--color-primary);
}
.p-gp-qa-search__btn svg { width: 28px; height: 28px; }
/* ネイティブのクリアボタン(✗)を無効化し、自前ボタン(close_icon.svg)に統一 */
.p-gp-qa-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* 自前クリアボタン（虫眼鏡の左・入力があるときのみ表示） */
.p-gp-qa-search__clear {
  position: absolute; top: 50%; right: 64px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.p-gp-qa-search__clear[hidden] { display: none; }
.p-gp-qa-search__clear img { width: 20px; height: 20px; display: block; }
.p-gp-qa-search__clear:hover { opacity: .7; }
.p-gp-qa-search__note { font-size: 14px; line-height: 1.5; font-weight: var(--fw-light); color: var(--text-default); margin-top: calc(-1 * var(--space-12)); }

/* キーワード */
.p-gp-qa-keywords { display: flex; flex-direction: column; gap: var(--space-16); }
.p-gp-qa-keywords__title { font-size: clamp(18px, 4.5vw, 20px); line-height: 1.5; font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--text-default); }
.p-gp-qa-keywords__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: flex-start; }
.p-gp-qa-kw {
  display: inline-flex; align-items: center; height: 36px;
  padding: var(--space-4) var(--space-16);
  border: 1px solid var(--border-default); border-radius: var(--radius-8);
  background: var(--container-white);
  font-size: 14px; line-height: 1.5; font-weight: var(--fw-light); letter-spacing: .04em; color: var(--text-default);
  transition: background-color .2s ease;
}
.p-gp-qa-kw:hover { background: var(--container-highlight); }

/* カテゴリリンク */
.p-gp-qa-cats { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space-16); }
.p-gp-qa-cat {
  display: flex; align-items: center; gap: var(--space-24);
  padding: var(--space-24);
  border: 1px solid var(--border-default); border-radius: var(--radius-16);
  background: var(--container-white);
  transition: background-color .2s ease;
}
.p-gp-qa-cat:hover { background: var(--container-highlight); }
.p-gp-qa-cat__text { flex: 1 1 auto; font-size: 16px; line-height: 1.5; font-weight: var(--fw-bold); color: var(--text-default); }
.p-gp-qa-cat__arrow { flex: none; width: 8px; height: 8px; border-top: 2px solid var(--text-secondary); border-right: 2px solid var(--text-secondary); transform: rotate(45deg); }

/* Q&A リスト（.p-gp-acc を流用） */
.p-gp-qa-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-16); }
.p-gp-qa-empty { font-size: 16px; line-height: 1.625; font-weight: var(--fw-light); color: var(--text-default); }

/* ---- SP(<=599px): よくある質問 ---- */
@media (max-width: 599px) {
  /* 白ボックスをフルブリード */
  .p-gp-qa-card { width: auto; margin-inline: calc(-1 * var(--container-pad)); border-radius: 0; }
  /* SP: 上下パディング48px（左右24px維持）・縦間隔40px */
  .p-gp-qa-card { padding-block: var(--space-48); gap: var(--space-40); }
  /* SP: カード見出しは24px固定 */
  .p-gp-qa-card__title { font-size: 24px; }
  /* よく検索されるキーワードは3列サイズ均等 */
  .p-gp-qa-keywords__list { display: grid; grid-template-columns: repeat(3, 1fr); }
  .p-gp-qa-kw { display: flex; width: 100%; justify-content: center; padding-inline: 5px; }
}

@media (min-width: 1024px) {
  .p-gp-qa-card { padding: var(--space-64); }
  .p-gp-qa-cats { grid-template-columns: repeat(2, 1fr); gap: var(--space-16) var(--space-40); }
}

/* =====================================================================
   画像（プレースホルダ→実画像）調整
   ===================================================================== */
/* F01 KV / セクションアイコン */
.p-gp__kv-img { display: block; width: 100%; height: auto; }
img.p-gp-sec__img { object-fit: contain; }
/* F02 ステップ/注文方法/カバー */
img.p-gp-step__img,
img.p-gp-method__img,
img.p-gp-callout__img { object-fit: contain; background: none; }
img.p-gp-callout__img { width: 90px; height: 90px; }
/* F02 サイクル図（画像化） */
.p-gp-cycle__img { display: block; width: 100%; height: auto; max-width: 1076px; margin-inline: auto; }
/* F03 割引イラスト */
img.p-gp-babyhero__img,
img.p-gp-acc__img { object-fit: contain; background: none; }
/* F04 案内カード写真 */
img.p-gp-join__img { object-fit: cover; }

/* ---------------------------------------------------------------------
   割引制度ボックスのアンカー（FAQ「割引制度」→ 各県 #baby / #child）
   stickyヘッダーに隠れないようスクロール位置をずらす
   --------------------------------------------------------------------- */
.p-gp-subblock[id] { scroll-margin-top: calc(var(--sticky-offset) + var(--space-16)); }