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

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

.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: 1.6rem 0;
      width: 1100px;
      font-size: 11px;
    }
  }
}
.page-gotop {
  background-color: #fff;
}
.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 page-title-line-grow {
  from {
    transform: translateX(-50%) scaleX(0);
  }
  to {
    transform: translateX(-50%) scaleX(1);
  }
}

/* ============================================================
   .page-course 固有
   ============================================================ */
.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(1.5rem, 4vw, 2.5rem); /* 可変の余白設定（内側） */
  --radius-s: clamp(0.5rem, 1.5vw, 1rem);
  --radius-l: clamp(1rem, 3vw, 2rem);

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

  & .content-wrap {
    margin: 0 2rem;

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

    & .page-title__heading {
      position: relative;
      display: inline-block;
      padding-bottom: clamp(2.4rem, 1.1034vw + 1.9862rem, 3.2rem);
      font-size: clamp(3.2rem, 2.4828vw + 2.269rem, 5rem);
      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(8rem, 5.5172vw + 5.931rem, 12rem);
        height: 2px;
        background-color: var(--main-color);
        transform: translateX(-50%) scaleX(1);
        transform-origin: center;
        animation: 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: 2.4rem;
    padding-inline: 2rem;

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

    & .page-course__nav-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      max-width: 110rem;
      margin-inline: auto;
      padding: 0;
      list-style: none;

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

    & .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: 0.8rem;
      padding: 1.6rem 0.8rem;
      font-size: clamp(1.5rem, 0.4138vw + 1.3448rem, 1.8rem);
      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(2.4rem, 1.1034vw + 1.9862rem, 3.2rem);
    font-size: clamp(2.4rem, 1.1034vw + 1.9862rem, 3.2rem);
    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(1.8rem, 0.4848vw + 1.6182rem, 2.2rem);
    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(2.4rem, 4vw, 4rem);
    text-align: center;

    & .section-header__lead {
      font-size: clamp(1.6rem, 0.2759vw + 1.4966rem, 1.8rem);
      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(4rem, 5.5172vw + 1.931rem, 8rem);
  }

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

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

    & .course-card__item {
      position: relative;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border: 1px solid var(--color-comit);
      border-radius: 2rem;
      --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(1.6rem, 0.2759vw + 1.4966rem, 1.8rem);
      }

      & .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: 1.6rem 2rem;
      border-radius: 2rem 2rem 0 0;
      text-align: center;
    }

    & .course-card__name {
      margin: 0;
      font-size: clamp(1.5rem, 7.5cqi, 2.4rem);
      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(4.8rem, 1.6552vw + 4.1793rem, 6rem);
      height: clamp(4.8rem, 1.6552vw + 4.1793rem, 6rem);
      border-radius: 50%;
      color: #fff;
      font-size: clamp(1.2rem, 0.4138vw + 0.9448rem, 1.4rem);
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      /* transform: rotate(6deg); */
    }

    & .course-card__desc {
      padding: 1.6rem 2rem;
      font-size: 1.4rem;
      line-height: 1.8;

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

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

    & .course-card__body {
      display: flex;
      flex-direction: column;
      padding: 1.6rem 2rem 0;

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

    & .course-card__body-heading {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin: 0 0 0.4rem;
      font-size: 1.4rem;
      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: 0.8rem;
      padding: 1.2rem 0;
      border-bottom: 1px solid #d4d4d4;

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

      & .course-card__feature-icon {
        flex-shrink: 0;
        width: 3.2rem;
        height: 3.2rem;
        object-fit: contain;
      }

      & .course-card__feature-text {
        margin: 0;
        font-size: 1.6rem;
        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: 1.8rem;
          font-weight: 700;
          line-height: 1;
          padding: 0 0.2rem;
        }
      }

      &.-has-callout {
        padding-right: 9rem;
      }
    }

    & .course-card__callout {
      position: absolute;
      top: 100%;
      right: -4%;
      padding: 0.4rem 1.2rem;
      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: -1.2rem;
        border-width: 0.7rem 1.2rem 0.7rem 0;
        border-color: transparent var(--main-color) transparent transparent;
      }

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

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

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

      & span {
        font-size: 1.3rem;
      }
    }

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

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

      &:empty {
        min-height: 2rem;
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* ============================================================
     course-price
     ============================================================ */
  & .course-price {
    padding: clamp(4rem, 6vw, 6.4rem) 0
      clamp(5.6rem, 3.3103vw + 4.3586rem, 8rem);
    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(12rem, 28%, 22rem);
      table-layout: fixed;
      width: 100%;
      max-width: 100%;
      font-weight: 600;
      font-size: 1.6rem;

      & 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: 1.8rem;
      }

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

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

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

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

      & .lg {
        font-size: 2.4rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        padding-right: 0.4rem;

        & .md {
          font-size: 1.4rem;
          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: 2rem 3.2rem;
        text-align: left;
      }

      & .course-price__common-cols {
        display: flex;
        gap: 2.4rem;

        & .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: 1rem 0.8rem;
      margin: 0;
      font-size: 1.6rem;
      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: 0.8rem;
        padding: 0.2rem 0.8rem;
        font-size: 1.4rem;
        color: #fff;
        background-color: var(--color-gold);
        border-radius: 0.4rem;
      }
    }

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

      & li {
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
        list-style: none;
        padding: 0.6rem 0;
        font-size: clamp(1.6rem, 0.2759vw + 1.4966rem, 1.8rem);
        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: 0.2rem;
      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: 1rem 0.4rem;
      font-size: 1.3rem;
      line-height: 1.4;
      text-align: center;
      border-radius: 0.8rem 0.8rem 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: 1.6rem;
        padding: 1.6rem 2rem;
        border-bottom: 2px solid #fff6ec;

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

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

          & .lg {
            font-size: 1.8rem;
            font-weight: 700;

            padding-right: 0.4rem;
            & .md {
              font-size: 1.5rem;
              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: 1.6rem 2rem;
      }
    }

    & [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(2.4rem, -1.6552vw + 4.2207rem, 3.6rem);

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

      & .price-att {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 0.4rem;
        row-gap: 0.8rem;
        align-items: baseline;
        margin-bottom: 0.8rem;

        & .price-row {
          display: contents;
        }

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

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

      & .price-note__aside {
        margin: 0 0 1.2rem;
        font-size: clamp(1.4rem, 0.2759vw + 1.2966rem, 1.6rem);
        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: 1.6rem;
        }

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

  /* ============================================================
     promise
     ============================================================ */
  & .promise {
    padding-bottom: clamp(5.6rem, 3.3103vw + 4.3586rem, 8rem);
    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: 4rem 2rem;
      border-bottom: none;
    }

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

    & .promise__label {
      margin: 0 0 0.8rem;
      font-size: clamp(1.4rem, 1.1034vw + 0.9862rem, 2.2rem);
      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(3rem, 0.8276vw + 2.6897rem, 3.6rem);
      font-weight: 500;
      line-height: 1.5;
      color: var(--color-brown);
    }

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

    & .promise__dialogue-box {
      display: flex;
    }

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

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

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

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

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

    /* 会員コメント行：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: 1.2rem;
        align-items: end;
      }

      @media screen and (min-width: 750px) {
        flex: 0 0 clamp(28rem, 36%, 32rem);
        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(1.4rem, 0.2759vw + 1.2966rem, 1.6rem)
        clamp(2rem, 1.1034vw + 1.5862rem, 2.8rem)
        clamp(1rem, 0.2759vw + 0.8966rem, 1.2rem);
      min-width: 0;
      min-height: clamp(7.6rem, 2.6207vw + 6.6172rem, 9.5rem);
      font-size: clamp(1.6rem, 0.2759vw + 1.4966rem, 1.8rem);
      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(22.6rem, 4.9655vw + 20.7379rem, 26.2rem);
      }

      @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("/guide/course/assets/img/img_promise_bubble01.svg");
    }

    & .promise__bubble-item:nth-child(2) .promise__bubble-item-member-text {
      background-image: url("/guide/course/assets/img/img_promise_bubble02.svg");
    }

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

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

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

      @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(1.2rem, 1.5vw, 1.6rem);

      @media screen and (max-width: 749px) {
        display: grid;
        grid-template-columns: var(--promise-icon-size) minmax(0, 1fr);
        column-gap: clamp(1.2rem, 1.5vw, 1.6rem);
        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(1.6rem, 0.5517vw + 1.3931rem, 2rem);
      line-height: 1.7;
      font-weight: 600;
      color: var(--color-text);

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

    & .promise__lead {
      margin: clamp(2.4rem, 1.1034vw + 1.9862rem, 3.2rem) 0 0;
      font-size: clamp(1.8rem, 0.8276vw + 1.4897rem, 2.4rem);
      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(2.2rem, 1.3793vw + 1.6828rem, 3.2rem);
        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(3rem, 0.8276vw + 2.6897rem, 3.6rem);
        font-weight: 300;
        line-height: 1.4;
      }
    }

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

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

      & b {
        font-weight: inherit;
      }

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

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

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

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

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

    & .promise__notes {
      margin: 0.8rem 2rem 0;
      padding: 0;
      list-style: none;
      font-size: clamp(1.2rem, 0.2759vw + 1.0966rem, 1.4rem);
      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(15.2rem, 9.931vw + 11.4759rem, 22.4rem);
    --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(5.6rem, 2.9091vw + 4.5091rem, 8rem) clamp(4rem, 2.9091vw + 2.9091rem, 6.4rem);
    background-color: var(--color-gray-bg);

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

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

      &.-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(1.6rem, 3vw, 2.4rem);
      }

      & .support-flow__intro-heading {
        position: relative;
        width: fit-content;
        margin: 0 auto 0.8rem;
        padding: 0.4rem 0 0.4rem 1.4rem;
        font-size: clamp(2rem, 0.5517vw + 1.7931rem, 2.4rem);
        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(1.4rem, 0.2759vw + 1.2966rem, 1.6rem);
        line-height: 1.8;
        text-align: left;
        color: var(--color-text);
      }
    }

    & .support-flow__step {
      margin-bottom: clamp(3.2rem, 5vw, 4rem);

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

    & .support-flow__step-heading {
      margin: 0 0 clamp(2rem, -0.5517vw + 2.6069rem, 2.4rem);
      padding: 0.8rem 1.6rem;
      font-size: clamp(1.8rem, 0.5517vw + 1.5931rem, 2.2rem);
      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: 1.6rem;
    }

    & .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 0.8rem;
      padding: 0;
      list-style: none;

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

        &::before {
          content: "";
          position: absolute;
          top: calc(0.4rem + 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 0.8rem;
      font-size: clamp(1.4rem, 0.2759vw + 1.2966rem, 1.6rem);
      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: 1.6rem;
          row-gap: 1.2rem;
          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: 2.4rem;
          row-gap: 1.6rem;
          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: 0.4rem;
        margin-bottom: clamp(2.4rem, 4vw, 3.2rem);

        & li {
          padding-left: 1.4rem;
        }

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

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

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

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

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

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

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

        &::before,
        &::after {
          content: "";
          flex: 0 0 auto;
          width: clamp(2.4rem, 6vw, 4rem);
          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: 1.6rem;
          row-gap: 1.6rem;
          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: 1.6rem;
        }

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

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

      & .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: 1.6rem;
          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: 2.4rem;
        }
      }
    }

    /* ── 随時 ── */
    & .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: 2.4rem 0 0;
      font-size: 1.2rem;
      color: var(--color-text);
      @media screen and (min-width: 750px) {
        margin: 0;
        text-align: right;
      }
    }
  }

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

    & .comparison__table-heading {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      margin: 0;

      &::before {
        content: "";
        flex-shrink: 0;
        width: 3.6rem;
        aspect-ratio: 50 / 64;
        background: url("/guide/course/assets/img/icon_badge.svg") 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(1.4rem, 0.2424vw + 1.3091rem, 1.6rem);
        padding: 1.6rem;
      }

      & thead th {
        width: var(--comparison-data-col, calc((100% - 200px) / 3));
        padding: 1rem 1.6rem;
        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(1.8rem, 0.2424vw + 1.7091rem, 2rem);
      }

      /* 改行表示時（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: 1.4rem;
        padding: 1.2rem 1rem;
        vertical-align: middle;
      }

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

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

      & .num {
        font-size: 1.8rem;
      }

      /* セル内画像が列幅を超えないようにする */
      & 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: 0.4rem;
      }
    }

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

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

    & .comparison__lead {
      margin: clamp(3.2rem, 4.8485vw + 1.3818rem, 7.2rem) 0 0;
      font-size: clamp(1.6rem, 0.7273vw + 1.3273rem, 2.2rem);
      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(3.2rem, 3.8788vw + 1.7455rem, 6.4rem)
      clamp(4.8rem, 2.9091vw + 3.7091rem, 7.2rem);
    margin-block: 0;

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

    & .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(5.6rem, 2.9091vw + 4.5091rem, 8rem);

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

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

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

    & .age-plan__item {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 2rem;
      background-color: #fff;
    }

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

    & .age-plan__item-content {
      flex: 1;
      padding: 2.4rem 0.8rem clamp(2.4rem, 0.9697vw + 2.0364rem, 3.2rem);
      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 0.8rem;
      font-size: clamp(1.8rem, 0.4848vw + 1.6182rem, 2.2rem);
      font-weight: 700;
      line-height: 1.3;
      color: var(--color-h-text);
    }

    & .age-plan__item-lead {
      margin: 0 0 1.6rem;
      font-size: 1.4rem;
      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: 1rem;
      row-gap: 1rem;
      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: 1rem;
        }
      }

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

        @media screen and (min-width: 750px) {
          min-width: 9.5rem;
        }

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

      & .amount {
        position: relative;
        justify-self: start;
        width: fit-content;
        margin: 0;
        font-size: 1rem;
        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(2rem, 2.2917vw + 1.3125rem, 3.3rem);
        }

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

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

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

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

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

  /* ============================================================
     course-cta
     ============================================================ */
  & .course-cta {
    padding: clamp(3.2rem, 5vw, 4.8rem) clamp(1.6rem, 4vw, 4rem);
    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(1.6rem, 0.9697vw + 1.2364rem, 2.4rem);
      font-size: clamp(1.8rem, 0.7273vw + 1.5273rem, 2.4rem);
      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(5.6rem, 2.9091vw + 4.5091rem, 8rem) 0;

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

      @media screen and (min-width: 750px) {
        flex-direction: row;
        padding: clamp(3.2rem, 4vw, 4.8rem) 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: 3.2rem;

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

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

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

      font-size: clamp(1.4rem, 0.2424vw + 1.3091rem, 1.6rem);

      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: 0.4rem;
      font-weight: 700;
      font-size: clamp(1.8rem, 0.4848vw + 1.6182rem, 2.2rem);
      color: var(--color-brown);
    }

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

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

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

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

      &.more-button {
        margin-inline: clamp(1.6rem, 3vw, 2.4rem);
        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(1.4rem, 0.4848vw + 1.2182rem, 1.8rem);
      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: 2.4rem clamp(1.6rem, 3vw, 2.4rem) 0.8rem;
      font-size: 1.4rem;
      font-weight: 700;
      padding-block: 0.4rem;
      color: var(--color-h-text);
      border-bottom: 2px solid var(--color-text);
      border-top: 2px solid var(--color-text);

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

    & .plus-system__col-aside {
      margin: 0;
      padding-inline: clamp(1.6rem, 3vw, 2.4rem);
      font-size: 1.2rem;
      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 */