/* ===================================================================
 * selfpay-service.css — 自費サービス(block/page/selfpay-service.php)
 *
 * とは？: 導入のクリームから地を続け(上の余白なし)、読み幅の白い箱。要点2か所に薄いオレンジのマーカー。
 * サービス内容: 白い地にクリームの面を3つ。面の頭は「白い丸 + カテゴリ色の線画 + 緑のグループ名」。
 *               下に「その他ご相談に応じます」をオレンジの枠の帯で置く。
 * ご利用料金: 共通の料金表を2つ横に並べ、各表の下に交通費の白い箱。見出しの行の右に会員割引の札。
 * オレンジ(カテゴリ色)は線・枠・アイコン・薄い地だけに使い、文字色には使わない。
 * =================================================================== */

/* --- 導入 --------------------------------------------------------- */

.service-intro--selfpay .service-intro__visual img {
  border-radius: var(--project-radius-lg);
}

/* --- のんのライフサポートとは？ ----------------------------------- */

.selfpay-about__box {
  padding-inline: var(--space-4xl);
}

.selfpay-about__box strong {
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--project-color-category-selfpay) 30%, transparent) 60%);
}

/* --- サービス内容 ------------------------------------------------- */

.selfpay-group {
  padding-bottom: 2.5rem;
}

.selfpay-group__icon {
  width: 64px;
  height: 64px;
}

.selfpay-group__icon svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
}

.selfpay-group__title {
  font-size: 1.25rem;
  line-height: 1.4;
}

/* 面の中の項目は共通の箇条書きより間隔を広げる(最後の項目は共通側で 0) */
ul.list--dot.selfpay-group__list > li {
  margin-bottom: var(--space-sm);
}

.selfpay-services__other {
  border-radius: var(--project-radius-pill);
  font-size: 1.25rem;
}

/* --- ご利用料金 --------------------------------------------------- */

.selfpay-fee__title {
  font-size: 1.25rem;
}

.selfpay-fee__member {
  background: color-mix(in srgb, var(--project-color-category-selfpay) 16%, transparent);
}

.selfpay-fee-types {
  --bs-gutter-y: 2.5rem;
}

/* 横の間隔は2列のときだけ。1列でも広げると .row の負のマージンがコンテナの左右の余白を超える */
@media (min-width: 992px) {
  .selfpay-fee-types { --bs-gutter-x: 2.5rem; }
}

.selfpay-fee-type tbody th {
  width: 34%;
}

/* 原文では表の3列目(2行を縦結合)で、表全体にかかるため表の下に出す */
.selfpay-fee-type__transport {
  grid-template-columns: max-content minmax(0, 1fr);
  border-radius: var(--project-radius-lg);
}

.selfpay-fee__notes {
  max-width: 50em;
  margin-top: 2.5rem;
}

/* --- アクセス・お問い合わせ --------------------------------------- */

.selfpay-access__lead {
  margin-bottom: 2.5rem;
}

/* --- スマートフォン ----------------------------------------------- */

@media (max-width: 767.98px) {
  .selfpay-about__box { padding-inline: var(--space-lg); }

  .selfpay-group { padding-bottom: var(--space-lg); }

  .selfpay-group__icon {
    width: 52px;
    height: 52px;
  }

  .selfpay-group__icon svg {
    width: 28px;
    height: 28px;
  }

  .selfpay-group__title { font-size: 1.125rem; }

  .selfpay-services__other {
    border-radius: var(--project-radius-xl);
    font-size: var(--fs-md);
  }

  .selfpay-fee__title { font-size: 1.125rem; }

  .selfpay-fee-type__transport { grid-template-columns: minmax(0, 1fr); }
}