/*
 * 移行元のページ専用のスタイルの写し（入会案内のコースと料金のページ /guide/course/）。
 *
 * 写し元: legacy/www.p-a.jp/public/guide/course/assets/css/style.css
 * このファイルは手で書かない。写し元を
 * scripts/pa-cms/transform-guide-course-css.py に通して作り直す（Issue #2709）。
 *
 * 写し元をそのまま置けない理由が 4 つある（詳しくはスクリプトの冒頭の説明）。
 *
 *   1. 写し元は 1 枚で完結した静的ページ用で、トップレベルの規則がテーマの
 *      ヘッダー・フッターへ波及しないよう、器 `body .pa-page--guide .page-content__body` を足して本文の中へ
 *      閉じ込めている（`body` を先頭に置くのは、テーマが
 *      `body:not(.pa-profile-new) .page-content__body` という「タグ 1 個・
 *      クラス 2 個」の強さで本文へ色を当てているため。強さをそろえないと負ける）。
 *   2. 写し元が自分で定義する動きの名前 `page-title-line-grow` は、テーマの他の CSS と
 *      ぶつからないよう `pa-course-page-title-line-grow` へ印を付けた（定義・参照の両方）。
 *   3. 写し元は根の文字を幅で切り替え（375〜749px は画面幅の 2.5445292621%・
 *      750px 以上は 10px 固定）、寸法の多くを rem で書いている。このテーマの
 *      根の文字は 16px 固定で、他のすべてのページに関わるため変えられない。
 *      そこで rem を独自プロパティ `--pa-course-rem` への掛け算へ読み替えた
 *      （`1.6rem` → `calc(1.6 * var(--pa-course-rem))`）。基準は器の規則へ幅ごとに
 *      置いてあり（このファイルの先頭）、入れ子の奥まで 1 か所の定義で届く。
 *   4. 写し元が絶対パスで指す背景画像 3 点は、テーマの置き場所
 *      （`assets/guide-course/img/`）へ書き換えた。
 *
 * **ネイティブ CSS ネスト（`& .foo { }` の入れ子と、規則の中の `@media`）は
 * 崩さずそのまま残している。**器を足すのはトップレベルのセレクタだけで、
 * 親が器の中に入れば入れ子は自動的に閉じるためである。
 */

body .pa-page--guide .page-content__body {
	--pa-course-rem: 2.5445292621vw;
}

@media screen and (min-width: 750px) {
	body .pa-page--guide .page-content__body {
		--pa-course-rem: 10px;
	}
}

/* ============================================================
   /guide/course/assets/css/style.css
   コースと料金ページ専用スタイル
   ============================================================ */

/* =========================================
  00．下層全体用のため、後日 /assets/css/style.cssに移植予定
========================================= */
/* ------------------------------
- utility
------------------------------ */
@media screen and (min-width: 1024px) {
  body .pa-page--guide .page-content__body .visible-md,
body .pa-page--guide .page-content__body .visible-sm {
    display: none;
  }
  body .pa-page--guide .page-content__body .visible-lg {
    display: inherit;
  }
}
@media screen and (min-width: 750px) and (max-width: 1023px) {
  body .pa-page--guide .page-content__body .visible-lg,
body .pa-page--guide .page-content__body .visible-sm {
    display: none;
  }
  body .pa-page--guide .page-content__body .visible-md {
    display: inherit;
  }
}
@media screen and (max-width: 749px) {
  body .pa-page--guide .page-content__body .visible-lg,
body .pa-page--guide .page-content__body .visible-md {
    display: none;
  }
  body .pa-page--guide .page-content__body .visible-sm {
    display: inherit;
  }
}

body .pa-page--guide .page-content__body .page-layout-wrapper {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  & .path {
    margin-block: 3em;
    padding-inline: 2em;
    order: 1;
    @media screen and (min-width: 750px) {
      order: -1;
      padding-top: 10px;
      margin: 0 auto;
      padding: calc(1.6 * var(--pa-course-rem)) 0;
      width: 1100px;
      font-size: 11px;
    }
  }
}
body .pa-page--guide .page-content__body .page-gotop {
  background-color: #fff;
}
body .pa-page--guide .page-content__body .page-gotop__inner {
  padding: 0 0 3em;
  display: grid;
  justify-content: center;
  max-width: 1100px;
  margin: auto;
  @media screen and (min-width: 750px) {
    justify-content: end;
  }
}

@keyframes pa-course-page-title-line-grow {
  from {
    transform: translateX(-50%) scaleX(0);
  }
  to {
    transform: translateX(-50%) scaleX(1);
  }
}

/* ============================================================
   .page-course 固有
   ============================================================ */
body .pa-page--guide .page-content__body .page-course {
  /* 補助変数（後日まとめて移植予定） */
  --color-text: #474747;
  --color-h-text: #231815;
  --color-brown: #996a1a;
  --color-gold: #bb8d38;
  --color-gray-bg: #f6f6f6;

  --color-comit: #c88501;

  --space-card: clamp(calc(1.5 * var(--pa-course-rem)), 4vw, calc(2.5 * var(--pa-course-rem))); /* 可変の余白設定（内側） */
  --radius-s: clamp(calc(0.5 * var(--pa-course-rem)), 1.5vw, calc(1 * var(--pa-course-rem)));
  --radius-l: clamp(calc(1 * var(--pa-course-rem)), 3vw, calc(2 * var(--pa-course-rem)));

  background-color: #fff;
  color: var(--color-text);

  & .content-wrap {
    margin: 0 calc(2 * var(--pa-course-rem));

    @media screen and (min-width: 750px) {
      max-width: 1100px;
      margin: 0 auto;
    }
  }
  /* ============================================================
     page-title
     ============================================================ */
  & .page-title {
    padding-block: clamp(calc(4 * var(--pa-course-rem)), 3.3103vw + calc(2.7586 * var(--pa-course-rem)), calc(6.4 * var(--pa-course-rem)))
      clamp(calc(3.2 * var(--pa-course-rem)), 4.4138vw + calc(1.5448 * var(--pa-course-rem)), calc(6.4 * var(--pa-course-rem)));
    text-align: center;

    & .page-title__heading {
      position: relative;
      display: inline-block;
      padding-bottom: clamp(calc(2.4 * var(--pa-course-rem)), 1.1034vw + calc(1.9862 * var(--pa-course-rem)), calc(3.2 * var(--pa-course-rem)));
      font-size: clamp(calc(3.2 * var(--pa-course-rem)), 2.4828vw + calc(2.269 * var(--pa-course-rem)), calc(5 * var(--pa-course-rem)));
      font-weight: 700;
      color: var(--color-text);
      letter-spacing: 0.05em;
      line-height: 1.25;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: clamp(calc(8 * var(--pa-course-rem)), 5.5172vw + calc(5.931 * var(--pa-course-rem)), calc(12 * var(--pa-course-rem)));
        height: 2px;
        background-color: var(--main-color);
        transform: translateX(-50%) scaleX(1);
        transform-origin: center;
        animation: pa-course-page-title-line-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s
          both;
      }

      @media (prefers-reduced-motion: reduce) {
        &::after {
          animation: none;
        }
      }
    }
  }

  /* ============================================================
     page-course__nav
     ============================================================ */
  & .page-course__nav {
    padding-bottom: calc(2.4 * var(--pa-course-rem));
    padding-inline: calc(2 * var(--pa-course-rem));

    @media screen and (min-width: 750px) {
      padding-inline: 0;
    }

    & .page-course__nav-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      max-width: calc(110 * var(--pa-course-rem));
      margin-inline: auto;
      padding: 0;
      list-style: none;

      @media screen and (min-width: 750px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 0 clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(3.2 * var(--pa-course-rem)));
      }
    }

    & .page-course__nav-item {
      border-bottom: 1px solid var(--color-gold);
    }

    & .page-course__nav-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: calc(0.8 * var(--pa-course-rem));
      padding: calc(1.6 * var(--pa-course-rem)) calc(0.8 * var(--pa-course-rem));
      font-size: clamp(calc(1.5 * var(--pa-course-rem)), 0.4138vw + calc(1.3448 * var(--pa-course-rem)), calc(1.8 * var(--pa-course-rem)));
      line-height: 1.5;
      color: var(--color-brown);
      text-decoration: none;
      transition: opacity 0.2s ease;
      &::after {
        content: "";
        flex-shrink: 0;
        width: 7px;
        height: 7px;
        margin-top: -3px;
        border-bottom: 1.8px solid var(--color-gold);
        border-right: 1.8px solid var(--color-gold);
        transform: rotate(45deg);
      }

      &:hover {
        opacity: 0.7;
      }
    }
  }

  /* ============================================================
     c-heading-l（branch .c-heading-l + .intro-title 相当・中央寄せ）
     ============================================================ */
  & .c-heading-l {
    margin: 0 0 clamp(calc(2.4 * var(--pa-course-rem)), 1.1034vw + calc(1.9862 * var(--pa-course-rem)), calc(3.2 * var(--pa-course-rem)));
    font-size: clamp(calc(2.4 * var(--pa-course-rem)), 1.1034vw + calc(1.9862 * var(--pa-course-rem)), calc(3.2 * var(--pa-course-rem)));
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--color-brown);
  }

  & .c-heading-ss {
    margin: 0;
    font-size: clamp(calc(1.8 * var(--pa-course-rem)), 0.4848vw + calc(1.6182 * var(--pa-course-rem)), calc(2.2 * var(--pa-course-rem)));
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--color-h-text);
  }

  /* ============================================================
     section-header（各セクション共通の見出しブロック）
     ============================================================ */
  & .section-header {
    margin-bottom: clamp(calc(2.4 * var(--pa-course-rem)), 4vw, calc(4 * var(--pa-course-rem)));
    text-align: center;

    & .section-header__lead {
      font-size: clamp(calc(1.6 * var(--pa-course-rem)), 0.2759vw + calc(1.4966 * var(--pa-course-rem)), calc(1.8 * var(--pa-course-rem)));
      line-height: 1.8;
      text-align: left;
      color: var(--color-text);

      @media screen and (min-width: 750px) {
        text-align: center;
      }
    }
  }

  /* ============================================================
     course-list / course-card
     ============================================================ */
  & .course-list {
    padding-block: clamp(calc(4 * var(--pa-course-rem)), 5.5172vw + calc(1.931 * var(--pa-course-rem)), calc(8 * var(--pa-course-rem)));
  }

  & .course-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(calc(3.2 * var(--pa-course-rem)), 5vw, calc(4 * var(--pa-course-rem)));
    margin: 0;
    padding: 0;
    list-style: none;

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(calc(2 * var(--pa-course-rem)), 2.5vw, calc(3.2 * var(--pa-course-rem)));
    }

    & .course-card__item {
      position: relative;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border: 1px solid var(--color-comit);
      border-radius: calc(2 * var(--pa-course-rem));
      --course-card-tint-bg: #fdf6ea;

      @media screen and (min-width: 750px) {
        height: 100%;
      }

      & .course-card__head {
        background-color: var(--color-comit);
      }

      & .course-card__desc,
      & .course-card__note {
        background-color: var(--course-card-tint-bg);
      }

      & .course-card__desc {
        color: var(--color-brown);
        font-size: clamp(calc(1.6 * var(--pa-course-rem)), 0.2759vw + calc(1.4966 * var(--pa-course-rem)), calc(1.8 * var(--pa-course-rem)));
      }

      & .course-card__body-heading {
        color: var(--color-brown);
      }

      & .course-card__label {
        background-color: #fff08e;
        color: var(--color-brown);
      }

      &.-concierge {
        border-color: var(--main-color);
        --course-card-tint-bg: #fff2f2;

        & .course-card__head {
          background-color: var(--main-color);
        }

        & .course-card__desc {
          color: var(--main-color);
        }

        & .course-card__body-heading {
          color: var(--main-color);
        }

        & .course-card__label {
          background-color: #fff08e;
          color: var(--main-color);
        }
      }

      &.-online {
        border-color: var(--sub-color);
        --course-card-tint-bg: #eaf7fc;

        & .course-card__head {
          background-color: var(--sub-color);
        }

        & .course-card__desc {
          color: var(--sub-color);
        }

        & .course-card__body-heading {
          color: var(--sub-color);
        }
      }
    }

    & .course-card__head {
      container-type: inline-size;
      position: relative;
      padding: calc(1.6 * var(--pa-course-rem)) calc(2 * var(--pa-course-rem));
      border-radius: calc(2 * var(--pa-course-rem)) calc(2 * var(--pa-course-rem)) 0 0;
      text-align: center;
    }

    & .course-card__name {
      margin: 0;
      font-size: clamp(calc(1.5 * var(--pa-course-rem)), 7.5cqi, calc(2.4 * var(--pa-course-rem)));
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    & .course-card__label {
      position: absolute;
      top: -12px;
      right: -12px;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: clamp(calc(4.8 * var(--pa-course-rem)), 1.6552vw + calc(4.1793 * var(--pa-course-rem)), calc(6 * var(--pa-course-rem)));
      height: clamp(calc(4.8 * var(--pa-course-rem)), 1.6552vw + calc(4.1793 * var(--pa-course-rem)), calc(6 * var(--pa-course-rem)));
      border-radius: 50%;
      color: #fff;
      font-size: clamp(calc(1.2 * var(--pa-course-rem)), 0.4138vw + calc(0.9448 * var(--pa-course-rem)), calc(1.4 * var(--pa-course-rem)));
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      /* transform: rotate(6deg); */
    }

    & .course-card__desc {
      padding: calc(1.6 * var(--pa-course-rem)) calc(2 * var(--pa-course-rem));
      font-size: calc(1.4 * var(--pa-course-rem));
      line-height: 1.8;

      @media screen and (min-width: 750px) {
        min-height: calc(3 * 1.8em + calc(3.2 * var(--pa-course-rem)));
      }
    }

    & .course-card__img {
      display: block;
      flex-shrink: 0; /* 旧 .course-card__upper が担っていた縦潰れ防止を継承 */
      width: 100%;
      height: auto;
    }

    & .course-card__body {
      display: flex;
      flex-direction: column;
      padding: calc(1.6 * var(--pa-course-rem)) calc(2 * var(--pa-course-rem)) 0;

      @media screen and (min-width: 750px) {
        flex: 1;
      }
    }

    & .course-card__body-heading {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: calc(1 * var(--pa-course-rem));
      margin: 0 0 calc(0.4 * var(--pa-course-rem));
      font-size: calc(1.4 * var(--pa-course-rem));
      font-weight: 700;

      &::before,
      &::after {
        content: "";
        flex: 1;
        height: 1px;
      }
    }

    & .course-card__features {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & .course-card__feature {
      position: relative;
      display: flex;
      align-items: center;
      gap: calc(0.8 * var(--pa-course-rem));
      padding: calc(1.2 * var(--pa-course-rem)) 0;
      border-bottom: 1px solid #d4d4d4;

      &:last-child {
        border-bottom: none;
      }

      & .course-card__feature-icon {
        flex-shrink: 0;
        width: calc(3.2 * var(--pa-course-rem));
        height: calc(3.2 * var(--pa-course-rem));
        object-fit: contain;
      }

      & .course-card__feature-text {
        margin: 0;
        font-size: calc(1.6 * var(--pa-course-rem));
        line-height: 1.5;
        color: var(--color-text);

        & a {
          color: var(--main-color);
          text-decoration: underline;
          font-weight: bold;
          transition: none;
        }
        & sup {
          padding: 0;
        }

        & .num {
          font-size: calc(1.8 * var(--pa-course-rem));
          font-weight: 700;
          line-height: 1;
          padding: 0 calc(0.2 * var(--pa-course-rem));
        }
      }

      &.-has-callout {
        padding-right: calc(9 * var(--pa-course-rem));
      }
    }

    & .course-card__callout {
      position: absolute;
      top: 100%;
      right: -4%;
      padding: calc(0.4 * var(--pa-course-rem)) calc(1.2 * var(--pa-course-rem));
      border: 2px solid var(--main-color);
      border-radius: var(--radius-s);
      text-align: center;
      line-height: 1.3;
      transform: translateY(-50%);
      background-color: var(--base-color);

      /* 左向き吹き出し */
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 0;
        height: 0;
        border-style: solid;
        transform: translateY(-50%);
      }

      &::before {
        left: calc(-1.2 * var(--pa-course-rem));
        border-width: calc(0.7 * var(--pa-course-rem)) calc(1.2 * var(--pa-course-rem)) calc(0.7 * var(--pa-course-rem)) 0;
        border-color: transparent var(--main-color) transparent transparent;
      }

      &::after {
        left: calc(calc(-1.2 * var(--pa-course-rem)) + 4px);
        border-width: calc(0.65 * var(--pa-course-rem)) calc(1.2 * var(--pa-course-rem)) calc(0.65 * var(--pa-course-rem)) 0;
        border-color: transparent var(--base-color) transparent transparent;
      }
    }

    & .course-card__callout-label {
      margin: 0;
      font-size: calc(1.3 * var(--pa-course-rem));
      color: var(--color-text);
      font-weight: 700;
      white-space: nowrap;
    }

    & .course-card__callout-num {
      margin: 0;
      font-size: calc(2.8 * var(--pa-course-rem));
      font-weight: 700;
      line-height: 1.2;
      color: var(--main-color);

      & span {
        font-size: calc(1.3 * var(--pa-course-rem));
      }
    }

    & .course-card__note {
      margin: calc(1.2 * var(--pa-course-rem)) calc(-2 * var(--pa-course-rem)) 0;
      padding: calc(0.8 * var(--pa-course-rem)) calc(2 * var(--pa-course-rem));
      border-radius: 0 0 calc(2 * var(--pa-course-rem)) calc(2 * var(--pa-course-rem));
      font-size: calc(1.2 * var(--pa-course-rem));
      color: var(--color-text);

      @media screen and (min-width: 750px) {
        margin-top: auto;
      }

      &:empty {
        min-height: calc(2 * var(--pa-course-rem));
      }
    }

    /* 中間幅（750px〜1020px）：3カラム維持の調整 */
    @media screen and (min-width: 750px) and (max-width: 1020px) {
      gap: clamp(calc(0.8 * var(--pa-course-rem)), 1.5vw, calc(1.6 * var(--pa-course-rem)));

      & .course-card__head {
        padding: clamp(calc(0.8 * var(--pa-course-rem)), 1.5vw, calc(1.4 * var(--pa-course-rem))) clamp(calc(0.8 * var(--pa-course-rem)), 1.5vw, calc(1.6 * var(--pa-course-rem)));
      }

      & .course-card__name {
        font-size: clamp(calc(1.3 * var(--pa-course-rem)), 6.5cqi, calc(2 * var(--pa-course-rem)));
      }

      & .course-card__label {
        top: clamp(-6px, -0.8vw, -10px);
        right: clamp(-6px, -0.8vw, -10px);
        width: clamp(calc(3.6 * var(--pa-course-rem)), 1vw + calc(3.2 * var(--pa-course-rem)), calc(4.8 * var(--pa-course-rem)));
        height: clamp(calc(3.6 * var(--pa-course-rem)), 1vw + calc(3.2 * var(--pa-course-rem)), calc(4.8 * var(--pa-course-rem)));
        font-size: clamp(calc(1 * var(--pa-course-rem)), 0.25vw + calc(0.9 * var(--pa-course-rem)), calc(1.2 * var(--pa-course-rem)));
      }

      & .course-card__item .course-card__desc {
        font-size: clamp(calc(1.3 * var(--pa-course-rem)), 0.2vw + calc(1.25 * var(--pa-course-rem)), calc(1.6 * var(--pa-course-rem)));
      }

      & .course-card__desc {
        padding: clamp(calc(0.8 * var(--pa-course-rem)), 1.5vw, calc(1.4 * var(--pa-course-rem))) clamp(calc(0.8 * var(--pa-course-rem)), 1.5vw, calc(1.6 * var(--pa-course-rem)));
        line-height: 1.7;
        min-height: calc(3 * 1.6em + clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(2.4 * var(--pa-course-rem))));
      }

      & .course-card__body {
        padding: clamp(calc(0.8 * var(--pa-course-rem)), 1.5vw, calc(1.4 * var(--pa-course-rem))) clamp(calc(0.8 * var(--pa-course-rem)), 1.5vw, calc(1.6 * var(--pa-course-rem))) 0;
      }

      & .course-card__body-heading {
        gap: clamp(calc(0.4 * var(--pa-course-rem)), 1vw, calc(0.8 * var(--pa-course-rem)));
        margin-bottom: calc(0.2 * var(--pa-course-rem));
        font-size: clamp(calc(1.1 * var(--pa-course-rem)), 0.3vw + calc(1 * var(--pa-course-rem)), calc(1.3 * var(--pa-course-rem)));
      }

      & .course-card__feature {
        gap: clamp(calc(0.4 * var(--pa-course-rem)), 0.8vw, calc(0.8 * var(--pa-course-rem)));
        padding: clamp(calc(0.5 * var(--pa-course-rem)), 1vw, calc(0.8 * var(--pa-course-rem))) 0;

        & .course-card__feature-icon {
          width: clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(2.4 * var(--pa-course-rem)));
          height: clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(2.4 * var(--pa-course-rem)));
        }

        & .course-card__feature-text {
          font-size: clamp(calc(1.2 * var(--pa-course-rem)), 0.4vw + calc(1.1 * var(--pa-course-rem)), calc(1.4 * var(--pa-course-rem)));
          line-height: 1.45;
        }

        &.-has-callout {
          padding-right: clamp(calc(3.8 * var(--pa-course-rem)), 9vw, calc(6.5 * var(--pa-course-rem)));
        }
      }

      & .course-card__callout {
        padding: clamp(calc(0.2 * var(--pa-course-rem)), 0.6vw, calc(0.35 * var(--pa-course-rem))) clamp(calc(0.3 * var(--pa-course-rem)), 0.6vw, calc(0.6 * var(--pa-course-rem)));
      }

      & .course-card__callout-label {
        font-size: clamp(calc(1 * var(--pa-course-rem)), 0.25vw + calc(0.9 * var(--pa-course-rem)), calc(1.2 * var(--pa-course-rem)));
      }

      & .course-card__callout-num {
        font-size: clamp(calc(1.6 * var(--pa-course-rem)), 2.5vw + calc(0.8 * var(--pa-course-rem)), calc(2.2 * var(--pa-course-rem)));

        & span {
          font-size: clamp(calc(1 * var(--pa-course-rem)), 0.25vw + calc(0.9 * var(--pa-course-rem)), calc(1.2 * var(--pa-course-rem)));
        }
      }

      & .course-card__note {
        margin-top: auto;
        margin-inline: calc(-1 * clamp(calc(0.8 * var(--pa-course-rem)), 1.5vw, calc(1.6 * var(--pa-course-rem))));
        margin-bottom: 0;
        padding: clamp(calc(0.5 * var(--pa-course-rem)), 1vw, calc(0.7 * var(--pa-course-rem))) clamp(calc(0.8 * var(--pa-course-rem)), 1.5vw, calc(1.6 * var(--pa-course-rem)));
        font-size: clamp(calc(1 * var(--pa-course-rem)), 0.15vw + calc(0.95 * var(--pa-course-rem)), calc(1.1 * var(--pa-course-rem)));
      }
    }
  }

  /* ============================================================
     course-price
     ============================================================ */
  & .course-price {
    padding: clamp(calc(4 * var(--pa-course-rem)), 6vw, calc(6.4 * var(--pa-course-rem))) 0
      clamp(calc(5.6 * var(--pa-course-rem)), 3.3103vw + calc(4.3586 * var(--pa-course-rem)), calc(8 * var(--pa-course-rem)));
    background-color: var(--base-color);

    & .c-heading-l {
      color: var(--color-h-text);
    }

    /*
     * <b>：コースカラー（文字色のみ）
     * PC＝列位置、SP＝タブコンテンツで自動判定（.compare-table b の上書き）
     */
    & .course-price__table tbody td:nth-child(2) b,
    & [data-tab-content="course-price-1"] b {
      color: var(--color-brown);
      font-weight: inherit;
    }

    & .course-price__table tbody td:nth-child(3) b,
    & [data-tab-content="course-price-2"] b {
      color: var(--main-color);
      font-weight: inherit;
    }

    & .course-price__table tbody td:nth-child(4) b,
    & [data-tab-content="course-price-3"] b {
      color: var(--sub-color);
      font-weight: inherit;
    }

    /* ── PC：コース比較テーブル（.compare-table の基本スタイルを流用） ── */
    & .course-price__table {
      --course-price-label-col: clamp(calc(12 * var(--pa-course-rem)), 28%, calc(22 * var(--pa-course-rem)));
      table-layout: fixed;
      width: 100%;
      max-width: 100%;
      font-weight: 600;
      font-size: calc(1.6 * var(--pa-course-rem));

      & thead th:first-child {
        width: var(--course-price-label-col);
        color: var(--color-text);
        background-color: #f6f6f6;
      }

      & thead th:nth-child(2),
      & thead th:nth-child(3),
      & thead th:nth-child(4) {
        width: calc((100% - var(--course-price-label-col)) / 3);
      }

      & thead th:nth-child(2) {
        color: #fff;
        background-color: var(--color-gold);
        font-size: calc(1.8 * var(--pa-course-rem));
      }

      & thead th:nth-child(3) {
        color: #fff;
        background-color: var(--main-color);
        font-size: calc(1.8 * var(--pa-course-rem));
      }

      & thead th:nth-child(4) {
        color: #fff;
        background-color: var(--sub-color);
        font-size: calc(1.8 * var(--pa-course-rem));
      }

      & tbody th:not(.course-price__group-heading) {
        color: var(--color-text);
        background-color: #f6f6f6;
      }

      & tbody td {
        color: var(--color-text);
      }

      & .lg {
        font-size: calc(2.4 * var(--pa-course-rem));
        font-weight: 700;
        letter-spacing: 0.02em;
        padding-right: calc(0.4 * var(--pa-course-rem));

        & .md {
          font-size: calc(1.4 * var(--pa-course-rem));
          font-weight: 700;
        }
      }

      & tbody td:nth-child(2) .lg {
        color: var(--color-brown);
      }

      & tbody td:nth-child(3) .lg {
        color: var(--main-color);
      }

      & tbody td:nth-child(4) .lg {
        color: var(--sub-color);
      }

      & .course-price__common {
        padding: calc(2 * var(--pa-course-rem)) calc(3.2 * var(--pa-course-rem));
        text-align: left;
      }

      & .course-price__common-cols {
        display: flex;
        gap: calc(2.4 * var(--pa-course-rem));

        & .course-price__common-list {
          flex: 1;
          min-width: 0;
        }
      }

      /* グループ見出し行の上下ボーダーを非表示 */
      & tr:has(+ tr > .course-price__group-heading) {
        & th,
        & td {
          border-bottom: none;
        }
      }
    }

    /* ── 見出し行「紹介・検索数」「サポート」「充実・安心」「付帯サービス」 ── */
    & .course-price__group-heading {
      padding: calc(1 * var(--pa-course-rem)) calc(0.8 * var(--pa-course-rem));
      margin: 0;
      font-size: calc(1.6 * var(--pa-course-rem));
      font-weight: 700;
      text-align: center;
      color: var(--color-text);
      background-color: rgba(200, 133, 1, 0.2);
      border-top: none;
      border-bottom: none;

      & span {
        display: inline-block;
        margin-right: calc(0.8 * var(--pa-course-rem));
        padding: calc(0.2 * var(--pa-course-rem)) calc(0.8 * var(--pa-course-rem));
        font-size: calc(1.4 * var(--pa-course-rem));
        color: #fff;
        background-color: var(--color-gold);
        border-radius: calc(0.4 * var(--pa-course-rem));
      }
    }

    /* ── 各コース共通のサポート：チェックリスト（PC=2列 / SP=1列） ── */
    & .course-price__common-list {
      margin: 0;
      padding: 0;
      list-style: none;

      & li {
        display: flex;
        align-items: flex-start;
        gap: calc(0.8 * var(--pa-course-rem));
        list-style: none;
        padding: calc(0.6 * var(--pa-course-rem)) 0;
        font-size: clamp(calc(1.6 * var(--pa-course-rem)), 0.2759vw + calc(1.4966 * var(--pa-course-rem)), calc(1.8 * var(--pa-course-rem)));
        line-height: 1.6;
        font-weight: normal;
      }

      & li::before {
        content: "✓";
        flex-shrink: 0;
        color: var(--color-gold);
        font-weight: 700;
      }
    }

    /* ── SP：コース別タブ切替 ── */
    & .tab-label {
      display: flex;
      padding: 0;
      list-style: none;
      gap: calc(0.2 * var(--pa-course-rem));
      border-bottom: 3px solid var(--main-color);

      &:has([data-tab="course-price-1"].ui-state-active) {
        border-bottom-color: var(--color-comit);
      }

      &:has([data-tab="course-price-2"].ui-state-active) {
        border-bottom-color: var(--main-color);
      }

      &:has([data-tab="course-price-3"].ui-state-active) {
        border-bottom-color: var(--sub-color);
      }
    }

    & .tab-label__item {
      flex: 1;
      padding: calc(1 * var(--pa-course-rem)) calc(0.4 * var(--pa-course-rem));
      font-size: calc(1.3 * var(--pa-course-rem));
      line-height: 1.4;
      text-align: center;
      border-radius: calc(0.8 * var(--pa-course-rem)) calc(0.8 * var(--pa-course-rem)) 0 0;
      color: var(--color-h-text);

      &[data-tab="course-price-1"] {
        background-color: color-mix(
          in srgb,
          var(--color-comit) 10%,
          transparent
        );

        &.ui-state-active {
          color: #fff;
          font-weight: 700;
          background-color: var(--color-comit);
        }
      }

      &[data-tab="course-price-2"] {
        background-color: color-mix(
          in srgb,
          var(--main-color) 10%,
          transparent
        );

        &.ui-state-active {
          color: #fff;
          font-weight: 700;
          background-color: var(--main-color);
        }
      }

      &[data-tab="course-price-3"] {
        background-color: color-mix(in srgb, var(--sub-color) 10%, transparent);

        &.ui-state-active {
          color: #fff;
          font-weight: 700;
          background-color: var(--sub-color);
        }
      }
    }

    & .tab-content {
      display: none;
      background-color: #fff;

      & .price-att {
        margin: 0;
      }

      & .price-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: calc(1.6 * var(--pa-course-rem));
        padding: calc(1.6 * var(--pa-course-rem)) calc(2 * var(--pa-course-rem));
        border-bottom: 2px solid #fff6ec;

        & dt {
          font-size: calc(1.4 * var(--pa-course-rem));
          font-weight: 600;
          color: var(--color-text);
        }

        & dd {
          margin: 0;
          font-size: calc(1.5 * var(--pa-course-rem));
          font-weight: 600;
          color: var(--color-text);
          text-align: right;

          & .lg {
            font-size: calc(1.8 * var(--pa-course-rem));
            font-weight: 700;

            padding-right: calc(0.4 * var(--pa-course-rem));
            & .md {
              font-size: calc(1.5 * var(--pa-course-rem));
              font-weight: 700;
            }
          }
        }
      }

      /* 先頭料金ブロック：登録料〜月会費は #D4D4D4、成婚料のみ下線なし */
      & > .price-att:first-of-type .price-row:nth-child(-n + 3) {
        border-bottom: 1px solid #d4d4d4;
      }

      & > .price-att:first-of-type .price-row:nth-child(4) {
        border-bottom: none;
      }

      & .course-price__common-list {
        padding: calc(1.6 * var(--pa-course-rem)) calc(2 * var(--pa-course-rem));
      }
    }

    & [data-tab-content="course-price-2"] {
      display: block;
    }

    /* SPタブ：.lg＝サイズ、色はタブ別（dd 本体は --color-text） */
    & [data-tab-content="course-price-1"] .price-att .price-row dd .lg {
      color: var(--color-brown);
    }

    & [data-tab-content="course-price-2"] .price-att .price-row dd .lg {
      color: var(--main-color);
    }

    & [data-tab-content="course-price-3"] .price-att .price-row dd .lg {
      color: var(--sub-color);
    }

    /* ── 【料金の内容】注記 ── */
    & .price-note {
      margin-top: clamp(calc(2.4 * var(--pa-course-rem)), -1.6552vw + calc(4.2207 * var(--pa-course-rem)), calc(3.6 * var(--pa-course-rem)));

      font-size: clamp(calc(1.4 * var(--pa-course-rem)), 0.2759vw + calc(1.2966 * var(--pa-course-rem)), calc(1.6 * var(--pa-course-rem)));
      & .price-note__title {
        margin: calc(1.6 * var(--pa-course-rem)) 0 calc(0.8 * var(--pa-course-rem));
        color: var(--color-text);
      }

      & .price-att {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: calc(0.4 * var(--pa-course-rem));
        row-gap: calc(0.8 * var(--pa-course-rem));
        align-items: baseline;
        margin-bottom: calc(0.8 * var(--pa-course-rem));

        & .price-row {
          display: contents;
        }

        & dt {
          font-size: clamp(calc(1.4 * var(--pa-course-rem)), 0.2759vw + calc(1.2966 * var(--pa-course-rem)), calc(1.6 * var(--pa-course-rem)));
          font-weight: 400;
          color: var(--color-text);
          white-space: nowrap;
        }

        & dd {
          margin: 0;
          font-size: clamp(calc(1.4 * var(--pa-course-rem)), 0.2759vw + calc(1.2966 * var(--pa-course-rem)), calc(1.6 * var(--pa-course-rem)));
          font-weight: 400;
          color: var(--color-text);
          text-align: left;
          line-height: 1.6;
        }
      }

      & .price-note__aside {
        margin: 0 0 calc(1.2 * var(--pa-course-rem));
        font-size: clamp(calc(1.4 * var(--pa-course-rem)), 0.2759vw + calc(1.2966 * var(--pa-course-rem)), calc(1.6 * var(--pa-course-rem)));
        color: var(--color-text);
      }
    }

    /* 中間幅（750px〜1020px）：PC比較テーブルの調整 */
    @media screen and (min-width: 750px) and (max-width: 1020px) {
      & .course-price__table {
        & thead th:nth-child(2),
        & thead th:nth-child(3),
        & thead th:nth-child(4) {
          font-size: calc(1.6 * var(--pa-course-rem));
        }

        & thead th:first-child,
        & tbody th:not(.course-price__group-heading) {
          font-size: calc(1.4 * var(--pa-course-rem));
        }
      }
    }
  }

  /* ============================================================
     promise
     ============================================================ */
  & .promise {
    padding-bottom: clamp(calc(5.6 * var(--pa-course-rem)), 3.3103vw + calc(4.3586 * var(--pa-course-rem)), calc(8 * var(--pa-course-rem)));
    background-color: var(--base-color);

    & .content-wrap {
      overflow: visible;
      background-color: #fff;
      border-radius: var(--radius-l);
      border: 2px solid var(--main-color);
    }

    & .promise__dialogue {
      padding: calc(4 * var(--pa-course-rem)) calc(2 * var(--pa-course-rem));
      border-bottom: none;
    }

    & .promise__title {
      margin-bottom: clamp(calc(2.4 * var(--pa-course-rem)), 2.2069vw + calc(1.5724 * var(--pa-course-rem)), calc(4 * var(--pa-course-rem)));
      text-align: center;
    }

    & .promise__label {
      margin: 0 0 calc(0.8 * var(--pa-course-rem));
      font-size: clamp(calc(1.4 * var(--pa-course-rem)), 1.1034vw + calc(0.9862 * var(--pa-course-rem)), calc(2.2 * var(--pa-course-rem)));
      font-weight: 600;
      color: var(--color-brown);
    }

    & .promise__heading {
      margin: 0;
      font-family:
        "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
        "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-size: clamp(calc(3 * var(--pa-course-rem)), 0.8276vw + calc(2.6897 * var(--pa-course-rem)), calc(3.6 * var(--pa-course-rem)));
      font-weight: 500;
      line-height: 1.5;
      color: var(--color-brown);
    }

    & .promise__heading-em {
      font-size: clamp(calc(4 * var(--pa-course-rem)), 1.3793vw + calc(3.4828 * var(--pa-course-rem)), calc(5 * var(--pa-course-rem)));
      font-weight: 700;
      line-height: 1.3;
      color: var(--main-color);
      display: block;
      @media screen and (min-width: 750px) {
        display: inline-block;
        padding-left: calc(0.4 * var(--pa-course-rem));
      }
    }

    & .promise__dialogue-box {
      display: flex;
    }

    & .promise__bubble {
      width: 100%;
      max-width: clamp(calc(56 * var(--pa-course-rem)), 94%, calc(88 * var(--pa-course-rem)));
      margin-inline: auto;

      @media screen and (max-width: 749px) {
        max-width: 100%;
      }
    }

    & .promise__bubble-item {
      --promise-icon-size: clamp(calc(4.4 * var(--pa-course-rem)), 1.3793vw + calc(3.8828 * var(--pa-course-rem)), calc(5.2 * var(--pa-course-rem)));
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: clamp(calc(1.6 * var(--pa-course-rem)), 2vw, calc(2 * var(--pa-course-rem)));
      margin-bottom: clamp(calc(2.4 * var(--pa-course-rem)), 1.1034vw + calc(1.9862 * var(--pa-course-rem)), calc(3.2 * var(--pa-course-rem)));

      &:last-child {
        margin-bottom: 0;
      }

      @media screen and (min-width: 750px) {
        flex-direction: row;
        align-items: center;
        gap: clamp(calc(2 * var(--pa-course-rem)), 3vw, calc(3.2 * var(--pa-course-rem)));
      }
    }

    /* 会員コメント行：SPは display:contents に頼らず、行ごとに独立した2列Gridにする */
    & .promise__bubble-item-member {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 0;

      @media screen and (max-width: 749px) {
        display: grid;
        grid-template-columns: var(--promise-icon-size) minmax(0, 1fr);
        column-gap: calc(1.2 * var(--pa-course-rem));
        align-items: end;
      }

      @media screen and (min-width: 750px) {
        flex: 0 0 clamp(calc(28 * var(--pa-course-rem)), 36%, calc(32 * var(--pa-course-rem)));
        justify-content: flex-end;
      }
    }

    & .promise__bubble-item-member-text {
      order: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      margin: 0;
      padding: clamp(calc(1.4 * var(--pa-course-rem)), 0.2759vw + calc(1.2966 * var(--pa-course-rem)), calc(1.6 * var(--pa-course-rem)))
        clamp(calc(2 * var(--pa-course-rem)), 1.1034vw + calc(1.5862 * var(--pa-course-rem)), calc(2.8 * var(--pa-course-rem)))
        clamp(calc(1 * var(--pa-course-rem)), 0.2759vw + calc(0.8966 * var(--pa-course-rem)), calc(1.2 * var(--pa-course-rem)));
      min-width: 0;
      min-height: clamp(calc(7.6 * var(--pa-course-rem)), 2.6207vw + calc(6.6172 * var(--pa-course-rem)), calc(9.5 * var(--pa-course-rem)));
      font-size: clamp(calc(1.6 * var(--pa-course-rem)), 0.2759vw + calc(1.4966 * var(--pa-course-rem)), calc(1.8 * var(--pa-course-rem)));
      line-height: 1.6;
      text-align: center;
      color: var(--color-text);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;

      @media screen and (min-width: 750px) {
        min-width: clamp(calc(22.6 * var(--pa-course-rem)), 4.9655vw + calc(20.7379 * var(--pa-course-rem)), calc(26.2 * var(--pa-course-rem)));
      }

      @media screen and (max-width: 749px) {
        order: unset;
        display: block;
        width: 100%;
      }
    }

    /* 吹き出し背景：行ごとに別SVG */
    & .promise__bubble-item:nth-child(1) .promise__bubble-item-member-text {
      background-image: url("../img/img_promise_bubble01.svg?ver=3901145c7d99");
    }

    & .promise__bubble-item:nth-child(2) .promise__bubble-item-member-text {
      background-image: url("../img/img_promise_bubble02.svg?ver=ef9e416da6ba");
    }

    @media screen and (min-width: 750px) {
      & .promise__bubble-item:nth-child(1) .promise__bubble-item-member-icon {
        width: clamp(calc(5.3 * var(--pa-course-rem)), 1.5172vw + calc(4.731 * var(--pa-course-rem)), calc(6.4 * var(--pa-course-rem)));
      }

      & .promise__bubble-item:nth-child(2) .promise__bubble-item-member-icon {
        width: clamp(calc(5.3 * var(--pa-course-rem)), 0.9655vw + calc(4.9379 * var(--pa-course-rem)), calc(6 * var(--pa-course-rem)));
      }
    }

    & .promise__bubble-item-member-icon {
      order: 2;
      flex-shrink: 0;
      height: auto;
      margin-left: clamp(calc(-1.6 * var(--pa-course-rem)), -1vw, calc(-1.2 * var(--pa-course-rem)));

      @media screen and (max-width: 749px) {
        order: unset;
        width: var(--promise-icon-size);
        max-width: 100%;
        margin: 0;
        object-fit: contain;
      }
    }

    /* コンシェルジュ行：SPは display:contents に頼らず、行ごとに独立した2列Gridにする */
    & .promise__bubble-item-concierge {
      display: flex;
      align-items: center;
      gap: clamp(calc(1.2 * var(--pa-course-rem)), 1.5vw, calc(1.6 * var(--pa-course-rem)));

      @media screen and (max-width: 749px) {
        display: grid;
        grid-template-columns: var(--promise-icon-size) minmax(0, 1fr);
        column-gap: clamp(calc(1.2 * var(--pa-course-rem)), 1.5vw, calc(1.6 * var(--pa-course-rem)));
        align-items: start;
      }

      @media screen and (min-width: 750px) {
        flex: 1;
        min-width: 0;
      }
    }

    & .promise__bubble-icon {
      flex-shrink: 0;
      width: var(--promise-icon-size);
      height: var(--promise-icon-size);
    }

    & .promise__bubble-text {
      margin: 0;
      font-size: clamp(calc(1.6 * var(--pa-course-rem)), 0.5517vw + calc(1.3931 * var(--pa-course-rem)), calc(2 * var(--pa-course-rem)));
      line-height: 1.7;
      font-weight: 600;
      color: var(--color-text);

      @media screen and (max-width: 749px) {
        min-width: 0;
      }
    }

    & .promise__lead {
      margin: clamp(calc(2.4 * var(--pa-course-rem)), 1.1034vw + calc(1.9862 * var(--pa-course-rem)), calc(3.2 * var(--pa-course-rem))) 0 0;
      font-size: clamp(calc(1.8 * var(--pa-course-rem)), 0.8276vw + calc(1.4897 * var(--pa-course-rem)), calc(2.4 * var(--pa-course-rem)));
      font-weight: normal;
      line-height: 1.4;
      text-align: center;
      color: var(--color-brown);
      @media screen and (min-width: 750px) {
        line-height: 2.6;
      }

      & .promise__lead-em {
        font-size: clamp(calc(2.2 * var(--pa-course-rem)), 1.3793vw + calc(1.6828 * var(--pa-course-rem)), calc(3.2 * var(--pa-course-rem)));
        font-weight: 600;
        color: inherit;
        display: block;
        line-height: 1.2;

        @media screen and (min-width: 750px) {
          display: inline-block;
          vertical-align: middle;
        }
      }
      & .promise__lead-cross {
        font-size: clamp(calc(3 * var(--pa-course-rem)), 0.8276vw + calc(2.6897 * var(--pa-course-rem)), calc(3.6 * var(--pa-course-rem)));
        font-weight: 300;
        line-height: 1.4;
      }
    }

    & .promise__box {
      position: relative;
      padding-bottom: clamp(calc(4 * var(--pa-course-rem)), 1.1034vw + calc(3.5862 * var(--pa-course-rem)), calc(4.8 * var(--pa-course-rem)));
      overflow: visible;
      text-align: center;
    }

    & .promise__box-heading {
      position: relative;
      margin: 0;
      padding: clamp(calc(2.4 * var(--pa-course-rem)), 1.1034vw + calc(1.9862 * var(--pa-course-rem)), calc(3.2 * var(--pa-course-rem))) calc(2 * var(--pa-course-rem))
        clamp(calc(3.2 * var(--pa-course-rem)), 2.5vw + calc(2 * var(--pa-course-rem)), calc(4.8 * var(--pa-course-rem)));
      font-size: clamp(calc(1.6 * var(--pa-course-rem)), 1vw + calc(1.2 * var(--pa-course-rem)), calc(2 * var(--pa-course-rem)));
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.05em;
      background-color: var(--main-color);

      & b {
        font-weight: inherit;
      }

      & .promise__box-em {
        font-size: clamp(calc(2.6 * var(--pa-course-rem)), 0.8276vw + calc(2.2897 * var(--pa-course-rem)), calc(3.2 * var(--pa-course-rem)));
      }

      @media screen and (min-width: 750px) {
        & b:not(.promise__box-em) {
          font-size: clamp(calc(2.6 * var(--pa-course-rem)), 0.8276vw + calc(2.2897 * var(--pa-course-rem)), calc(3.2 * var(--pa-course-rem)));
        }
      }

      &::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: 1;
        width: clamp(calc(4 * var(--pa-course-rem)), 4vw + calc(2 * var(--pa-course-rem)), calc(5 * var(--pa-course-rem)));
        aspect-ratio: 50 / 64;
        transform: translate(-50%, 50%);
        background: url("../img/icon_badge.svg?ver=63698db21efd") no-repeat
          center / contain;
      }
    }

    & .promise__box-text {
      margin: 0;
      padding: clamp(calc(2.8 * var(--pa-course-rem)), 2.5vw + calc(1.6 * var(--pa-course-rem)), calc(3.6 * var(--pa-course-rem))) clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(2 * var(--pa-course-rem))) 0;
      font-size: clamp(calc(1.6 * var(--pa-course-rem)), 1.1034vw + calc(1.1862 * var(--pa-course-rem)), calc(2.4 * var(--pa-course-rem)));
      line-height: 1.8;
      font-weight: 600;
      color: var(--color-text);

      & b {
        color: var(--main-color);
        font-weight: 700;
      }
    }

    & .promise__notes {
      margin: calc(0.8 * var(--pa-course-rem)) calc(2 * var(--pa-course-rem)) 0;
      padding: 0;
      list-style: none;
      font-size: clamp(calc(1.2 * var(--pa-course-rem)), 0.2759vw + calc(1.0966 * var(--pa-course-rem)), calc(1.4 * var(--pa-course-rem)));
      line-height: 1.7;
      color: var(--color-text);

      @media screen and (min-width: 750px) {
        max-width: 1100px;
        margin-inline: auto;
      }

      & li {
        margin: 0;
      }
    }
  }

  /* ============================================================
     support-flow
     ============================================================ */
  & .support-flow {
    --support-flow-step-img-size: clamp(calc(15.2 * var(--pa-course-rem)), 9.931vw + calc(11.4759 * var(--pa-course-rem)), calc(22.4 * var(--pa-course-rem)));
    --support-flow-img-gradient-right: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 52.88%,
      #f6f6f6 98.08%
    );
    --support-flow-img-gradient-left: linear-gradient(
      270deg,
      rgba(255, 255, 255, 0) 52.88%,
      #f6f6f6 98.08%
    );
    --support-flow-img-gradient-bottom: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 52.88%,
      #f6f6f6 98.08%
    );
    padding-block: clamp(calc(5.6 * var(--pa-course-rem)), 2.9091vw + calc(4.5091 * var(--pa-course-rem)), calc(8 * var(--pa-course-rem))) clamp(calc(4 * var(--pa-course-rem)), 2.9091vw + calc(2.9091 * var(--pa-course-rem)), calc(6.4 * var(--pa-course-rem)));
    background-color: var(--color-gray-bg);

    /* ── 行ラッパー（intro+活動前 / 成婚後+随時） ── */
    & .support-flow__row {
      display: flex;
      flex-direction: column;
      gap: clamp(calc(3.2 * var(--pa-course-rem)), 5vw, calc(4 * var(--pa-course-rem)));
      margin-bottom: clamp(calc(3.2 * var(--pa-course-rem)), -1.1034vw + calc(4.4138 * var(--pa-course-rem)), calc(4 * var(--pa-course-rem)));

      @media screen and (min-width: 750px) {
        display: grid;
        align-items: start;
        gap: calc(3.2 * var(--pa-course-rem));
      }

      &.-intro {
        @media screen and (min-width: 750px) {
          grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
          align-items: center;
        }
      }

      &.-bottom {
        @media screen and (min-width: 750px) {
          grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
          margin-bottom: 0;
        }
      }

      & .support-flow__step {
        margin-bottom: 0;
      }
    }

    & .support-flow__intro {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background-color: #fff;
      border-radius: var(--radius-s);

      @media screen and (min-width: 750px) {
        margin-bottom: 0;
      }

      & .support-flow__intro-img {
        flex-shrink: 0;
        display: block;
        width: 100%;
        height: auto;
      }

      & .support-flow__intro-body {
        padding: clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(2.4 * var(--pa-course-rem)));
      }

      & .support-flow__intro-heading {
        position: relative;
        width: fit-content;
        margin: 0 auto calc(0.8 * var(--pa-course-rem));
        padding: calc(0.4 * var(--pa-course-rem)) 0 calc(0.4 * var(--pa-course-rem)) calc(1.4 * var(--pa-course-rem));
        font-size: clamp(calc(2 * var(--pa-course-rem)), 0.5517vw + calc(1.7931 * var(--pa-course-rem)), calc(2.4 * var(--pa-course-rem)));
        font-weight: 700;
        color: var(--color-h-text);

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: var(--color-gold);
          transform: translateY(-50%);
        }
      }

      & .support-flow__intro-text {
        margin: 0;
        font-size: clamp(calc(1.4 * var(--pa-course-rem)), 0.2759vw + calc(1.2966 * var(--pa-course-rem)), calc(1.6 * var(--pa-course-rem)));
        line-height: 1.8;
        text-align: left;
        color: var(--color-text);
      }
    }

    & .support-flow__step {
      margin-bottom: clamp(calc(3.2 * var(--pa-course-rem)), 5vw, calc(4 * var(--pa-course-rem)));

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    & .support-flow__step-heading {
      margin: 0 0 clamp(calc(2 * var(--pa-course-rem)), -0.5517vw + calc(2.6069 * var(--pa-course-rem)), calc(2.4 * var(--pa-course-rem)));
      padding: calc(0.8 * var(--pa-course-rem)) calc(1.6 * var(--pa-course-rem));
      font-size: clamp(calc(1.8 * var(--pa-course-rem)), 0.5517vw + calc(1.5931 * var(--pa-course-rem)), calc(2.2 * var(--pa-course-rem)));
      font-weight: 700;
      text-align: center;
      color: var(--main-color);
      border-top: 1px solid var(--main-color);
      border-bottom: 1px solid var(--main-color);
      background-color: #fff;
    }

    & .support-flow__step-body {
      display: flex;
      flex-direction: column;
      gap: calc(1.6 * var(--pa-course-rem));
    }

    & .support-flow__step-text {
      flex: 1;
      min-width: 0;

      & .support-flow__step-list:last-child {
        margin-bottom: 0;
      }

      & .support-flow__step-note {
        margin-bottom: 0;
      }
    }

    & .support-flow__step-img {
      --support-flow-img-gradient: var(--support-flow-img-gradient-right);
      position: relative;
      flex-shrink: 0;
      width: var(--support-flow-step-img-size);
      max-width: 100%;
      margin-inline: auto;
      overflow: hidden;
      border-radius: 50%;

      @media screen and (min-width: 750px) {
        margin-inline: 0;
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: inherit;
        pointer-events: none;
        background: var(--support-flow-img-gradient);
      }

      & img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--radius-s);
      }
    }

    & .support-flow__step-list {
      margin: 0 0 calc(0.8 * var(--pa-course-rem));
      padding: 0;
      list-style: none;

      & li {
        position: relative;
        padding: calc(0.4 * var(--pa-course-rem)) 0 calc(0.4 * var(--pa-course-rem)) calc(1.4 * var(--pa-course-rem));
        font-size: clamp(calc(1.6 * var(--pa-course-rem)), 0.5517vw + calc(1.3931 * var(--pa-course-rem)), calc(2 * var(--pa-course-rem)));
        font-weight: 700;
        line-height: 1.5;
        color: var(--color-text);

        &::before {
          content: "";
          position: absolute;
          top: calc(calc(0.4 * var(--pa-course-rem)) + 0.5lh);
          left: 0;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background-color: var(--color-gold);
          transform: translateY(-50%);
        }
      }
    }

    & .support-flow__step-note {
      margin: 0 0 calc(0.8 * var(--pa-course-rem));
      font-size: clamp(calc(1.4 * var(--pa-course-rem)), 0.2759vw + calc(1.2966 * var(--pa-course-rem)), calc(1.6 * var(--pa-course-rem)));
      line-height: 1.7;
      color: var(--color-text);
    }

    /* ── 活動前 ── */
    & .support-flow__step.-before {
      & .support-flow__step-img img {
        border-radius: 50%;
      }

      @media screen and (max-width: 749px) {
        & .support-flow__step-body {
          display: grid;
          grid-template-columns: var(--support-flow-step-img-size) minmax(
              0,
              1fr
            );
          column-gap: calc(1.6 * var(--pa-course-rem));
          row-gap: calc(1.2 * var(--pa-course-rem));
          align-items: start;
        }

        & .support-flow__step-img {
          grid-column: 1;
          grid-row: 1 / span 2;
          margin-inline: 0;
        }

        & .support-flow__step-list {
          grid-column: 2;
          grid-row: 1;
          margin-bottom: 0;
        }

        & .support-flow__step-note {
          grid-column: 2;
          grid-row: 2;
          margin-bottom: 0;
        }
      }

      @media screen and (min-width: 750px) {
        & .support-flow__step-body {
          display: grid;
          grid-template-columns: var(--support-flow-step-img-size) minmax(
              0,
              1fr
            );
          grid-template-rows: auto auto;
          column-gap: calc(2.4 * var(--pa-course-rem));
          row-gap: calc(1.6 * var(--pa-course-rem));
          align-items: start;
        }

        & .support-flow__step-img {
          grid-column: 1;
          grid-row: 1 / span 2;
        }

        & .support-flow__step-list {
          grid-column: 2;
          grid-row: 1;
          margin-bottom: 0;
        }

        & .support-flow__step-note {
          grid-column: 2;
          grid-row: 2;
          margin-bottom: 0;
        }
      }
    }

    /* ── 活動中 ── */
    & .support-flow__step.-during {
      & > .support-flow__step-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: calc(0.4 * var(--pa-course-rem));
        margin-bottom: clamp(calc(2.4 * var(--pa-course-rem)), 4vw, calc(3.2 * var(--pa-course-rem)));

        & li {
          padding-left: calc(1.4 * var(--pa-course-rem));
        }

        @media screen and (min-width: 750px) {
          flex-direction: row;
          justify-content: center;
          align-items: center;
          gap: calc(2.4 * var(--pa-course-rem));
        }
      }

      @media screen and (min-width: 750px) {
        display: flex;
        flex-wrap: wrap;
        column-gap: calc(3.2 * var(--pa-course-rem));

        & > .support-flow__step-heading,
        & > .support-flow__step-list {
          flex: 0 0 100%;
        }

        & > .support-flow__step-group {
          flex: 1 1 calc(50% - calc(1.6 * var(--pa-course-rem)));
        }
      }
    }

    & .support-flow__step-group {
      margin-bottom: clamp(calc(2.4 * var(--pa-course-rem)), 4vw, calc(3.2 * var(--pa-course-rem)));

      &:last-child {
        margin-bottom: 0;
      }

      & .support-flow__step-group-heading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(1.2 * var(--pa-course-rem));
        margin: 0 0 calc(1.6 * var(--pa-course-rem));
        font-size: clamp(calc(1.8 * var(--pa-course-rem)), 0.5517vw + calc(1.5931 * var(--pa-course-rem)), calc(2.2 * var(--pa-course-rem)));
        font-weight: 700;
        color: var(--color-brown);

        &::before,
        &::after {
          content: "";
          flex: 0 0 auto;
          width: clamp(calc(2.4 * var(--pa-course-rem)), 6vw, calc(4 * var(--pa-course-rem)));
          height: 1px;
          background-color: var(--color-gold);
        }
      }

      & .support-flow__step-img img {
        border-radius: 50%;
      }

      @media screen and (min-width: 750px) {
        & .support-flow__step-img {
          margin-inline: auto;
        }
      }
    }

    /* ── コンタクト ── */
    & .support-flow__step-group.-contact {
      & .support-flow__step-body > .support-flow__step-list:last-child {
        margin-bottom: 0;
      }

      & .support-flow__step-img {
        @media screen and (max-width: 749px) {
          --support-flow-img-gradient: var(--support-flow-img-gradient-left);
        }

        @media screen and (min-width: 750px) {
          --support-flow-img-gradient: var(--support-flow-img-gradient-bottom);
        }
      }

      @media screen and (max-width: 749px) {
        & .support-flow__step-body {
          display: grid;
          grid-template-columns: minmax(0, 1fr) var(
              --support-flow-step-img-size
            );
          column-gap: calc(1.6 * var(--pa-course-rem));
          row-gap: calc(1.6 * var(--pa-course-rem));
          align-items: start;
        }

        & .support-flow__step-text {
          grid-column: 1;
          grid-row: 1;
        }

        & .support-flow__step-img {
          grid-column: 2;
          grid-row: 1;
          margin-inline: 0;
        }

        & .support-flow__step-body > .support-flow__step-list:last-child {
          grid-column: 1 / -1;
          grid-row: 2;
        }
      }
    }

    /* ── 交際：SP画像左 ── */
    & .support-flow__step-group:not(.-contact) {
      & .support-flow__step-img {
        @media screen and (max-width: 749px) {
          --support-flow-img-gradient: var(--support-flow-img-gradient-right);
        }

        @media screen and (min-width: 750px) {
          --support-flow-img-gradient: var(--support-flow-img-gradient-bottom);
        }
      }

      @media screen and (max-width: 749px) {
        & .support-flow__step-body {
          flex-direction: row;
          align-items: flex-start;
          gap: calc(1.6 * var(--pa-course-rem));
        }

        & .support-flow__step-img {
          margin-inline: 0;
        }
      }
    }

    & .support-flow__step-sub {
      margin-top: clamp(calc(2.4 * var(--pa-course-rem)), 4vw, calc(3.2 * var(--pa-course-rem)));

      & .support-flow__step-list {
        margin-bottom: 0;

        @media screen and (min-width: 750px) {
          width: fit-content;
          margin-inline: auto;
        }
      }
    }

    /* ── 成婚後 ── */
    & .support-flow__step.-after {
      & .support-flow__step-img {
        @media screen and (max-width: 749px) {
          --support-flow-img-gradient: var(--support-flow-img-gradient-left);
        }

        @media screen and (min-width: 750px) {
          --support-flow-img-gradient: var(--support-flow-img-gradient-right);
        }

        & img {
          border-radius: 50%;
        }
      }

      @media screen and (max-width: 749px) {
        & .support-flow__step-body {
          display: grid;
          grid-template-columns: minmax(0, 1fr) var(
              --support-flow-step-img-size
            );
          column-gap: calc(1.6 * var(--pa-course-rem));
          align-items: start;
        }

        & .support-flow__step-text {
          grid-column: 1;
          grid-row: 1;
        }

        & .support-flow__step-img {
          grid-column: 2;
          grid-row: 1;
          margin-inline: 0;
        }
      }

      @media screen and (min-width: 750px) {
        & .support-flow__step-body {
          flex-direction: row;
          align-items: flex-start;
          gap: calc(2.4 * var(--pa-course-rem));
        }
      }
    }

    /* ── 随時 ── */
    & .support-flow__step-anytime {
      & .support-flow__step-list {
        margin-bottom: 0;

        @media screen and (min-width: 750px) {
          width: fit-content;
          margin-inline: auto;
        }
      }
    }

    & .support-flow__note {
      margin: calc(2.4 * var(--pa-course-rem)) 0 0;
      font-size: calc(1.2 * var(--pa-course-rem));
      color: var(--color-text);
      @media screen and (min-width: 750px) {
        margin: 0;
        text-align: right;
      }
    }
  }

  /* ============================================================
     comparison（.compare-table 等の既存グローバルCSSを活用する薄いラッパー）
     ============================================================ */
  & .comparison {
    padding-block: clamp(calc(5.6 * var(--pa-course-rem)), 2.9091vw + calc(4.5091 * var(--pa-course-rem)), calc(8 * var(--pa-course-rem)))
      clamp(calc(4.8 * var(--pa-course-rem)), 3.8788vw + calc(3.3455 * var(--pa-course-rem)), calc(8 * var(--pa-course-rem)));

    & .comparison__table-heading {
      display: inline-flex;
      align-items: center;
      gap: calc(0.8 * var(--pa-course-rem));
      margin: 0;

      &::before {
        content: "";
        flex-shrink: 0;
        width: calc(3.6 * var(--pa-course-rem));
        aspect-ratio: 50 / 64;
        background: url("../img/icon_badge.svg?ver=63698db21efd") no-repeat
          center / contain;
      }
    }

    & .comparison__table-heading-text {
      text-align: center;
    }

    /* 比較3列は thead で等幅、1列目は th:first-child で上書き */
    & .comparison__table {
      --comparison-data-col-min: 200px;
      --comparison-feature-col-extra: 16px;
      table-layout: fixed;

      & th,
      & td {
        font-size: clamp(calc(1.4 * var(--pa-course-rem)), 0.2424vw + calc(1.3091 * var(--pa-course-rem)), calc(1.6 * var(--pa-course-rem)));
        padding: calc(1.6 * var(--pa-course-rem));
      }

      & thead th {
        width: var(--comparison-data-col, calc((100% - 200px) / 3));
        padding: calc(1 * var(--pa-course-rem)) calc(1.6 * var(--pa-course-rem));
        white-space: nowrap;
      }

      & thead th.feature {
        width: calc(
          var(--comparison-data-col, calc((100% - 200px) / 3)) +
            var(--comparison-feature-col-extra)
        );
        min-width: calc(
          var(--comparison-data-col-min) + var(--comparison-feature-col-extra)
        );
      }

      & thead th:nth-child(3),
      & thead th:nth-child(4) {
        width: calc(
          var(--comparison-data-col, calc((100% - 200px) / 3)) -
            var(--comparison-feature-col-extra) / 2
        );
        min-width: var(--comparison-data-col-min);
      }

      & tbody th,
      & tbody td {
        white-space: normal;
      }

      & tbody th {
        background-color: #fff;
      }

      & .num {
        font-size: clamp(calc(1.8 * var(--pa-course-rem)), 0.2424vw + calc(1.7091 * var(--pa-course-rem)), calc(2 * var(--pa-course-rem)));
      }

      /* 改行表示時（visible-md = 750〜1023px）。
         749px以下は .comparison__table-sp に出し分けており PC表は非表示のため、
         下限を 750px に明示している */
      @media screen and (min-width: 750px) and (max-width: 1023px) {
        & th:first-child {
          width: 160px;
        }
      }

      @media screen and (min-width: 750px) {
        width: 100%;
        max-width: 100%;
        --comparison-data-col: calc((100% - 200px) / 3);
      }

      /* 改行非表示時（visible-lg = 1024px以上） */
      @media screen and (min-width: 1024px) {
        & th:first-child {
          width: 228px;
        }

        --comparison-data-col: calc((100% - 228px) / 3);
      }
    }

    /* ============================================================
       比較表 SP版（749px以下）／ PC版 .comparison__table の行列を転置
       ★ .comparison__table とは独立スコープ。
         --comparison-data-col 等の変数は一切継承しない
       ============================================================ */
    & .comparison__table-sp {
      /* グローバルの既定値。1050px以上の .compare-table{width:100%} を打ち消す */
      width: max-content;

      & th,
      & td {
        font-size: calc(1.4 * var(--pa-course-rem));
        padding: calc(1.2 * var(--pa-course-rem)) calc(1 * var(--pa-course-rem));
        vertical-align: middle;
      }

      /* 見出し行（項目名）だけ白背景にする。
         グローバル .compare-table th の #e1e1e1 を SP表スコープ内で上書き。
         サービス名側は th[scope="row"] なので対象外＝灰色のまま */
      & th[scope="col"] {
        background-color: #fff;
        min-width: calc(12 * var(--pa-course-rem));
      }

      /* 1列目：サービス名（横スクロール中も固定） */
      & .sticky-col {
        /* グローバル .sticky-col の top:0 による縦方向の追従を無効化 */
        top: auto;
        width: calc(13 * var(--pa-course-rem));
        min-width: calc(13 * var(--pa-course-rem));
      }

      & .num {
        font-size: calc(1.8 * var(--pa-course-rem));
      }

      /* セル内画像が列幅を超えないようにする */
      & img {
        display: block;
        max-width: 100%;
        height: auto;
        margin-inline: auto;
      }

      /* 強調行のバッジ見出し：狭い1列目に収めるため縦並びにする。
         親を column にすることで ::before のアイコンが1段目、テキストが2段目になる。
         グローバル側の .comparison__table-heading（inline-flex 横並び）は変更せず、
         SP表スコープ内でのみ上書きする */
      & .comparison__table-heading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(0.4 * var(--pa-course-rem));
      }
    }

    & .comparison__note {
      margin: clamp(calc(0.8 * var(--pa-course-rem)), 0.9697vw + calc(0.4364 * var(--pa-course-rem)), calc(1.6 * var(--pa-course-rem))) 0 0;
      font-size: clamp(calc(1.2 * var(--pa-course-rem)), 0.2424vw + calc(1.1091 * var(--pa-course-rem)), calc(1.4 * var(--pa-course-rem)));
      color: var(--color-text);
    }

    & .comparison__lead + .comparison__note {
      @media screen and (min-width: 750px) {
        text-align: center;
      }
    }

    & .comparison__lead {
      margin: clamp(calc(3.2 * var(--pa-course-rem)), 4.8485vw + calc(1.3818 * var(--pa-course-rem)), calc(7.2 * var(--pa-course-rem))) 0 0;
      font-size: clamp(calc(1.6 * var(--pa-course-rem)), 0.7273vw + calc(1.3273 * var(--pa-course-rem)), calc(2.2 * var(--pa-course-rem)));
      line-height: 1.8;
      font-weight: 700;
      color: var(--color-text);

      @media screen and (min-width: 750px) {
        text-align: center;
      }

      & sup {
        font-weight: 300;
      }
    }
  }

  /* ============================================================
     banner-pac
     ============================================================ */
  & .banner-pac {
    text-align: center;
    background-color: var(--color-gray-bg);
    padding-block: clamp(calc(3.2 * var(--pa-course-rem)), 3.8788vw + calc(1.7455 * var(--pa-course-rem)), calc(6.4 * var(--pa-course-rem)))
      clamp(calc(4.8 * var(--pa-course-rem)), 2.9091vw + calc(3.7091 * var(--pa-course-rem)), calc(7.2 * var(--pa-course-rem)));
    margin-block: 0;

    & .c-heading-ss {
      margin: 0 0 clamp(calc(0.8 * var(--pa-course-rem)), 0.9697vw + calc(0.4364 * var(--pa-course-rem)), calc(1.6 * var(--pa-course-rem)));
    }

    & .banner-item {
      display: block;
      max-width: 770px;
      margin-inline: auto;

      & img,
      & picture {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        margin-inline: auto;
      }
    }
  }

  /* ============================================================
     age-plan
     ============================================================ */
  & .age-plan {
    padding-block: clamp(calc(5.6 * var(--pa-course-rem)), 2.9091vw + calc(4.5091 * var(--pa-course-rem)), calc(8 * var(--pa-course-rem)));

    & .age-plan__list {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(calc(2.4 * var(--pa-course-rem)), 0.9697vw + calc(2.0364 * var(--pa-course-rem)), calc(3.2 * var(--pa-course-rem)));

      @media screen and (min-width: 750px) {
        grid-template-columns: repeat(3, 1fr);
      }

      @media screen and (min-width: 750px) and (max-width: 1023px) {
        gap: clamp(calc(1.2 * var(--pa-course-rem)), 1.5vw, calc(1.6 * var(--pa-course-rem)));
      }
    }

    & .age-plan__item {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: calc(2 * var(--pa-course-rem));
      background-color: #fff;
    }

    & .age-plan__item-img {
      display: block;
      width: 100%;
      height: auto;
    }

    & .age-plan__item-content {
      flex: 1;
      padding: calc(2.4 * var(--pa-course-rem)) calc(0.8 * var(--pa-course-rem)) clamp(calc(2.4 * var(--pa-course-rem)), 0.9697vw + calc(2.0364 * var(--pa-course-rem)), calc(3.2 * var(--pa-course-rem)));
      text-align: center;
    }

    & .age-plan__item--u29 .age-plan__item-content {
      background-color: #d7e8f0;
    }

    & .age-plan__item--3031 .age-plan__item-content {
      background-color: #ede4d5;
    }

    & .age-plan__item--singlemother .age-plan__item-content {
      background-color: #ffecf5;
    }

    & .age-plan__item-title {
      margin: 0 0 calc(0.8 * var(--pa-course-rem));
      font-size: clamp(calc(1.8 * var(--pa-course-rem)), 0.4848vw + calc(1.6182 * var(--pa-course-rem)), calc(2.2 * var(--pa-course-rem)));
      font-weight: 700;
      line-height: 1.3;
      color: var(--color-h-text);
    }

    & .age-plan__item-lead {
      margin: 0 0 calc(1.6 * var(--pa-course-rem));
      font-size: calc(1.4 * var(--pa-course-rem));
      line-height: 1.7;
      color: var(--color-text);
    }

    & .age-plan__item-fee {
      display: grid;
      grid-template-columns: max-content max-content;
      align-items: center;
      column-gap: calc(1 * var(--pa-course-rem));
      row-gap: calc(1 * var(--pa-course-rem));
      justify-content: center;
      width: 100%;

      @media screen and (min-width: 750px) and (max-width: 1023px) {
        display: block;
      }
    }

    & .age-plan__item-fee-row {
      display: contents;

      @media screen and (min-width: 750px) and (max-width: 1023px) {
        display: block;
        text-align: center;

        & + & {
          margin-top: calc(1 * var(--pa-course-rem));
        }
      }

      & .title {
        display: inline-block;
        min-width: calc(8.7 * var(--pa-course-rem));
        padding: calc(0.5 * var(--pa-course-rem));
        border-radius: calc(1.5 * var(--pa-course-rem));
        font-size: clamp(calc(1.2 * var(--pa-course-rem)), 0.2424vw + calc(1.1091 * var(--pa-course-rem)), calc(1.4 * var(--pa-course-rem)));
        font-weight: 500;
        background-color: #fff;

        @media screen and (min-width: 750px) {
          min-width: calc(9.5 * var(--pa-course-rem));
        }

        @media screen and (min-width: 750px) and (max-width: 1023px) {
          margin-bottom: calc(1 * var(--pa-course-rem));
        }
      }

      & .amount {
        position: relative;
        justify-self: start;
        width: fit-content;
        margin: 0;
        font-size: calc(1 * var(--pa-course-rem));
        font-weight: 700;
        line-height: 1;
        color: var(--main-color);

        @media screen and (min-width: 750px) and (max-width: 1023px) {
          margin-inline: auto;
        }

        & span {
          line-height: 1;
        }

        & .lg {
          font-size: clamp(calc(2 * var(--pa-course-rem)), 2.2917vw + calc(1.3125 * var(--pa-course-rem)), calc(3.3 * var(--pa-course-rem)));
        }

        & .sm {
          font-size: clamp(calc(1.4 * var(--pa-course-rem)), 0.2292vw + calc(1.3125 * var(--pa-course-rem)), calc(2 * var(--pa-course-rem)));
        }

        & .md {
          font-size: clamp(calc(1.6 * var(--pa-course-rem)), 0.7292vw + calc(1.3125 * var(--pa-course-rem)), calc(2.8 * var(--pa-course-rem)));
        }

        & sup {
          position: absolute;
          top: calc(-0.5 * var(--pa-course-rem));
          right: calc(-1.5 * var(--pa-course-rem));
          font-size: calc(1 * var(--pa-course-rem));
          font-weight: 400;
          color: var(--color-text);

          @media screen and (min-width: 750px) {
            top: calc(0.3 * var(--pa-course-rem));
          }
        }
      }
    }

    & .age-plan__note {
      margin: clamp(calc(1.6 * var(--pa-course-rem)), 2.5vw, calc(2.4 * var(--pa-course-rem))) 0 0;
      font-size: clamp(calc(1.2 * var(--pa-course-rem)), 0.2424vw + calc(1.1091 * var(--pa-course-rem)), calc(1.4 * var(--pa-course-rem)));
      color: var(--color-text);
    }
  }

  /* ============================================================
     course-cta
     ============================================================ */
  & .course-cta {
    padding: clamp(calc(3.2 * var(--pa-course-rem)), 5vw, calc(4.8 * var(--pa-course-rem))) clamp(calc(1.6 * var(--pa-course-rem)), 4vw, calc(4 * var(--pa-course-rem)));
    text-align: center;
    background-color: #f3f7f9;

    @media screen and (min-width: 1280px) {
      max-width: 1280px;
      border-radius: var(--radius-l);
      margin: 0 auto;
    }

    & .course-cta__text {
      margin: 0 0 clamp(calc(1.6 * var(--pa-course-rem)), 0.9697vw + calc(1.2364 * var(--pa-course-rem)), calc(2.4 * var(--pa-course-rem)));
      font-size: clamp(calc(1.8 * var(--pa-course-rem)), 0.7273vw + calc(1.5273 * var(--pa-course-rem)), calc(2.4 * var(--pa-course-rem)));
      font-weight: 700;
    }

    & .more-button.reverse {
      border-color: #f3f7f9;

      @media (hover: hover) {
        &:hover {
          border-color: var(--main-color);
        }
      }
    }
  }

  /* ============================================================
     plus-system
     ============================================================ */
  & .plus-system {
    padding-block: clamp(calc(5.6 * var(--pa-course-rem)), 2.9091vw + calc(4.5091 * var(--pa-course-rem)), calc(8 * var(--pa-course-rem))) 0;

    & .plus-system__cols {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: clamp(calc(2.4 * var(--pa-course-rem)), 4vw, calc(4 * var(--pa-course-rem))) 0;
      background-size: 16px 16px;

      @media screen and (min-width: 750px) {
        flex-direction: row;
        padding: clamp(calc(3.2 * var(--pa-course-rem)), 4vw, calc(4.8 * var(--pa-course-rem))) 0 0;

        /* border-bottom: 1px solid #d4d4d4; */
      }
    }

    & .plus-system__col {
      flex: 1;
      background-color: #fff;
      overflow: hidden;

      & + .plus-system__col {
        border-top: 1px solid #d4d4d4;
        padding-top: calc(3.2 * var(--pa-course-rem));

        @media screen and (min-width: 750px) {
          border-top: none;
          padding-block: 0;
          border-left: 1px solid #d4d4d4;
          padding-left: clamp(calc(2.4 * var(--pa-course-rem)), 4vw, calc(4 * var(--pa-course-rem)));
        }
      }

      &:first-child {
        padding-bottom: calc(3.2 * var(--pa-course-rem));
        @media screen and (min-width: 750px) {
          padding-right: clamp(calc(2.4 * var(--pa-course-rem)), 4vw, calc(4 * var(--pa-course-rem)));
          padding-bottom: 0;
        }
      }
    }

    & .plus-system__col-heading {
      margin: 0 0 clamp(calc(1.6 * var(--pa-course-rem)), 2.5vw, calc(2.4 * var(--pa-course-rem)));
      padding: clamp(calc(1.6 * var(--pa-course-rem)), 2.5vw, calc(2 * var(--pa-course-rem))) clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(2.4 * var(--pa-course-rem))) calc(1.2 * var(--pa-course-rem));

      font-size: clamp(calc(1.4 * var(--pa-course-rem)), 0.2424vw + calc(1.3091 * var(--pa-course-rem)), calc(1.6 * var(--pa-course-rem)));

      line-height: 1.7;
      text-align: center;
      color: var(--color-text);
      background-color: var(--color-gray-bg);
      /* background-color: rgba(200, 133, 1, 0.2); */
    }

    & .plus-system__col-heading-accent {
      display: block;
      margin-top: calc(0.4 * var(--pa-course-rem));
      font-weight: 700;
      font-size: clamp(calc(1.8 * var(--pa-course-rem)), 0.4848vw + calc(1.6182 * var(--pa-course-rem)), calc(2.2 * var(--pa-course-rem)));
      color: var(--color-brown);
    }

    & .plus-system__col-text {
      margin: 0 0 clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(2.4 * var(--pa-course-rem)));
      padding-inline: clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(2.4 * var(--pa-course-rem)));
      font-size: clamp(calc(1.4 * var(--pa-course-rem)), 0.2424vw + calc(1.3091 * var(--pa-course-rem)), calc(1.6 * var(--pa-course-rem)));
      line-height: 1.8;
      color: var(--color-text);
    }

    & .plus-system__col-img {
      margin: 0 0 clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(2.4 * var(--pa-course-rem)));
      padding-inline: clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(2.4 * var(--pa-course-rem)));

      & img {
        display: block;
        width: 100%;
        height: auto;
      }
    }

    & .plus-system__col-btn {
      margin: 0 auto;

      &.more-button {
        margin-inline: clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(2.4 * var(--pa-course-rem)));
        height: 60px;
        @media screen and (min-width: 750px) and (max-width: 1050px) {
          max-width: 400px;
        }
      }
    }

    & .more-button.-brown-outline {
      background-color: #fff;
      border: 2px solid var(--color-brown);
      color: var(--color-brown);
      margin: 0 auto;
      font-size: clamp(calc(1.4 * var(--pa-course-rem)), 0.4848vw + calc(1.2182 * var(--pa-course-rem)), calc(1.8 * var(--pa-course-rem)));
      border-radius: 3em;
      & .arrow-path {
        stroke: #fff;
        fill: none;
      }

      & .arrow-circle {
        fill: currentColor;
      }

      @media (hover: hover) {
        &:hover {
          background-color: var(--color-brown);
          color: #fff;

          & .arrow-path {
            stroke: var(--color-brown);
          }
        }
      }
    }

    & .plus-system__col-caption {
      margin: calc(2.4 * var(--pa-course-rem)) clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(2.4 * var(--pa-course-rem))) calc(0.8 * var(--pa-course-rem));
      font-size: calc(1.4 * var(--pa-course-rem));
      font-weight: 700;
      padding-block: calc(0.4 * var(--pa-course-rem));
      color: var(--color-h-text);
      border-bottom: 2px solid var(--color-text);
      border-top: 2px solid var(--color-text);

      & span {
        font-size: calc(1.2 * var(--pa-course-rem));
        font-weight: 400;
        color: var(--color-text);
      }
    }

    & .plus-system__col-aside {
      margin: 0;
      padding-inline: clamp(calc(1.6 * var(--pa-course-rem)), 3vw, calc(2.4 * var(--pa-course-rem)));
      font-size: calc(1.2 * var(--pa-course-rem));
      line-height: 1.7;
      color: var(--color-text);
    }
  }

  /* dialog（コースページ固有の配色） */
  & .c-dialog__head {
    background-color: #fdf6ea;
  }

  & .c-dialog__title {
    color: var(--color-gold);
  }

  & .c-dialog__em {
    color: var(--main-color);
  }
}
/* /.page-course */