/**
 * File: archive-price.css
 * Usage: archive-price.php（料金案内アーカイブ）のスタイル（モバイルファースト）。
 * Design: figma「まーける様 / 3_料金」2021-1824 をベースに、料金一覧をカードグリッド化。
 *
 * セクション見出し（No.X ＋ カテゴリー名、奇数=左寄せ/偶数=右寄せ）は元デザインのまま。
 * その下の料金一覧を、1列の文章の羅列からカードグリッド（SP1列 / タブレット2列 / PC3列）に変更。
 * カード内は「項目名 → 金額 → 罫線 → 説明文」を縦に積む構成。
*/

/* ================================================
  共通
================================================ */
.ly_price {
  background: #fff;
  color: var(--c-dark);
  /* clip でないと <main> がスクロールコンテナになりホイールを奪う（main.css .ly_top 参照）*/
  overflow-x: hidden;
  overflow-x: clip;
}

/* ================================================
  ページヒーロー
================================================ */
.bl_priceHero {
  padding-block: 40px 8px;
}

.bl_priceEmpty {
  padding-block: 40px 80px;
  color: var(--c-muted);
}

/* ================================================
  カテゴリーセクション（bl_priceSec）
================================================ */
.bl_priceSecs {
  margin-top: 40px;
}
.bl_priceSec + .bl_priceSec {
  margin-top: 80px;
}

/* 見出し行：下に全幅の罫線（.ly_cont の外側なので画面幅いっぱいに伸びる） */
.bl_priceSec_head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-dark);
}
.bl_priceSec_head .ly_cont {
  display: flex;
}
/* 偶数セクションは見出しを右寄せ */
.bl_priceSec__right .bl_priceSec_head .ly_cont {
  justify-content: flex-end;
}

.bl_priceSec_ttl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
/* 「No.X」はカテゴリー名の手前に置く（重ねない）。
   縦組み＋line-height 0.74 で字幅ぶんの細い箱になる。 */
.bl_priceSec_no {
  flex: none;
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-size: clamp(1.25rem, 0.8099rem + 1.8779vw, 2.5rem); /* 20px → 40px */
  font-weight: 700;
  line-height: 0.74;
  letter-spacing: -0.05em;
}
.bl_priceSec_name {
  font-size: clamp(2rem, 0.9438rem + 4.507vw, 5rem); /* 32px → 80px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* 料金カードのグリッド（SP: 1列） */
.bl_priceSec_list {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* ================================================
  料金カード（bl_priceCard）
================================================ */
.bl_priceCard {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bl_priceCard_ttl {
  margin: 0;
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--c-dark);
}
.bl_priceCard_amount {
  margin: 0;
  font-family: var(--font-en);
  font-size: 1.75rem; /* 28px */
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--c-dark);
}
.bl_priceCard_desc {
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}

/* ================================================
  タブレット以上
================================================ */
@media screen and (min-width: 768px) {
  .bl_priceHero {
    padding-block: 60px 0;
  }
  .bl_priceSecs {
    margin-top: 56px;
  }
  .bl_priceSec + .bl_priceSec {
    margin-top: 120px;
  }
  .bl_priceSec_head {
    padding-bottom: 28px;
  }
  .bl_priceSec_list {
    margin-top: 56px;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
  }
  .bl_priceCard {
    padding: 28px 24px;
  }
}

/* ================================================
  PC
================================================ */
@media screen and (min-width: 1024px) {
  .bl_priceSec + .bl_priceSec {
    margin-top: 200px;
  }
  .bl_priceSec_head {
    padding-bottom: 40px;
  }
  .bl_priceSec_list {
    margin-top: 80px;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
  }
}