/* ============================================================
   SKK 共通コンポーネント（DESIGN.md §3）
   ============================================================ */

/* --- セクション骨格 --- */
.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1200);
  padding-block: var(--space-1600);
}
.section-head {
  width: 100%;
  max-width: var(--content-max);
  /*
   * .container と同じ左右余白を持たせる。これが無いと見出しとリード文だけが
   * 画面端まで届き、本文（.container の中）と左右が揃わない。SPで特に目立つ。
   * box-sizing は border-box に統一されているため max-width を超えて広がらない。
   */
  padding-inline: var(--page-gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-400);
}
.section-title {
  font: 700 40px/1.5 var(--font-display);
  letter-spacing: .08em;
  color: var(--color-primary-deep);
}
/* 見出し上のあしらい（縦の細い線＝軸のモチーフ） */
.section-title--ruled { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-400); }
.section-title--ruled::before {
  content: ""; width: 1px; height: 40px; background: var(--color-primary);
}
.section-lead {
  font: 500 18px/1.8 var(--font-base);
  color: var(--color-text);
  max-width: 760px;
}

/* --- 見出しスケール（ユーティリティ） --- */
.tit-l { font: 700 50px/1.4 var(--font-base); letter-spacing: .05em; }
.tit-m { font: 700 44px/1.4 var(--font-base); letter-spacing: .05em; }
.tit-s { font: 700 36px/1.4 var(--font-base); letter-spacing: .05em; }
.subtitle { font: 700 26px/1.6 var(--font-base); }
.body-m { font: 500 18px/1.6 var(--font-base); }
.body-s { font: 400 14px/1.6 var(--font-base); }

/* --- タグ（ピル） --- */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-200); }
.tag {
  display: inline-block;
  background: #fff;
  padding: var(--space-100) var(--space-300);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-full);
  font: 700 14px/1 var(--font-base);
  color: var(--color-text);
}

/* --- ボタン：詳しく見る（白地・枠線） --- */
.btn-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  background: #fff;
  border: 2px solid var(--color-text);
  padding: var(--space-300) var(--space-800);
  border-radius: var(--radius-200);
  font: 700 18px/1.2 var(--font-base);
  color: var(--color-text);
  transition: background .2s, color .2s;
}
.btn-detail:hover { background: var(--color-text); color: #fff; }
.icon-arrow { font-size: 22px; flex: none; } /* インラインSVGは currentColor を継承（hoverで自動的に白） */

/* --- ボタン：プライマリ（ブラウン地・白文字） --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-400) var(--space-800);
  border-radius: var(--radius-200);
  font: 700 18px/1.2 var(--font-base);
  transition: background .2s;
}
.btn-primary:hover { background: var(--color-primary-dark); }

/* --- プランカード（プラン色はローカル変数 --plan-* で切替） --- */
.plan-card {
  --plan-400: var(--color-primary);
  --plan-700: var(--color-primary);
  --plan-50: var(--color-bg-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  background: var(--plan-50);
  padding: var(--space-600);
  border-radius: var(--radius-400);
}
.plan-card__catch { font: 700 18px/1.6 var(--font-base); color: var(--plan-400); }
.plan-card__img {
  width: 100%; aspect-ratio: 269 / 162; object-fit: cover;
  border-radius: var(--radius-200); background: var(--color-grey);
}
.plan-card__meta { display: flex; flex-direction: column; gap: var(--space-200); }
.plan-card__name { font: 700 36px/1.4 var(--font-base); letter-spacing: .05em; color: var(--plan-700); }
.plan-card__price { display: flex; align-items: baseline; gap: var(--space-100); color: var(--color-text); }
.plan-card__price .num { font: 700 36px/1.4 var(--font-base); }
.plan-card__price .yen { font: 700 26px/1.6 var(--font-base); }
.plan-card__price .tax { font: 400 14px/1.6 var(--font-base); color: var(--color-text-soft); }
.plan-card__desc { font: 400 14px/1.8 var(--font-base); color: var(--color-text); flex: 1; }
.plan-card .btn-detail { width: 100%; margin-top: auto; }

@media (max-width: 600px) {
  .plan-card {
    padding: var(--space-800) var(--space-600);
  }
  .plan-card__desc {
    line-height: 1.95;
  }
}

/* --- 汎用本文セクション（skk/page-prose） --- */
.prose-section { background: var(--band-soft, #f7f4ee); }
.prose-card {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--color-secondary, #e5ddcf);
  border-radius: var(--radius-300, 12px);
  padding: var(--space-800, 40px) var(--space-800, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--space-400, 20px);
}
.prose__subtitle {
  position: relative;
  padding-left: var(--space-300, 16px);
  margin-top: var(--space-300, 16px);
  font: 700 20px/1.6 var(--font-base);
  color: var(--color-primary-deep, #6b5b3e);
}
.prose__subtitle:first-child { margin-top: 0; }
.prose__subtitle::before {
  content: ""; position: absolute; left: 0; top: .2em; bottom: .2em;
  width: 3px; background: var(--color-primary, #b8a06a); border-radius: var(--radius-full, 999px);
}
.prose__text { font: 400 15px/1.95 var(--font-base); color: var(--color-text, #333); }
.prose__list { display: flex; flex-direction: column; gap: var(--space-200, 8px); padding-left: var(--space-300, 16px); }
.prose__list li {
  position: relative; padding-left: var(--space-400, 20px);
  font: 400 15px/1.9 var(--font-base); color: var(--color-text, #333);
}
.prose__list li::before {
  content: ""; position: absolute; left: 0; top: .75em;
  width: 6px; height: 6px; border-radius: var(--radius-full, 999px); background: var(--color-primary, #b8a06a);
}
@media (max-width: 767px) {
  .prose-card { padding: var(--space-600, 28px) var(--space-500, 24px); }
}

/* --- 下層ページ共通ヒーロー（page-hero-lite ブロック用に共通化） --- */
.page-hero { padding-block: var(--space-1600) var(--space-1200); }
.page-hero__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-600); padding-top: var(--space-800);
}
.page-hero__inner::before { content: ""; width: 1px; height: 56px; background: var(--color-primary); }
.page-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-200);
  font: 500 14px/1.6 var(--font-base); color: var(--color-text-soft); letter-spacing: .12em;
}
.page-hero__eyebrow .icon { font-size: 18px; color: var(--color-primary); }
.page-hero__title {
  font: 700 56px/1.3 var(--font-display); letter-spacing: .12em; color: var(--color-primary-deep);
}
.page-hero__chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-300);
}
.page-hero__chips li {
  display: inline-flex; align-items: center;
  padding: var(--space-150) var(--space-400);
  border: 1px solid var(--color-secondary); border-radius: var(--radius-full);
  background: #fff;
  font: 700 13px/1 var(--font-base); letter-spacing: .08em; color: var(--color-primary-deep);
}
.page-hero__lead { font: 500 17px/1.9 var(--font-base); color: var(--color-text); max-width: 720px; }
@media (max-width: 767px) {
  .page-hero__title { font-size: 40px; }
}

/*
 * 記事詳細（ブログ・知恵袋）の見出し。
 * 上の .page-hero__title は「ブログ」「お客様の声」のような数文字のページ名を
 * ロゴ的に見せるための設定なので、20文字を超える記事タイトルに当てると間延びする。
 * クラス2つ分の詳細度にして、各ページCSSの指定（メディアクエリ内も含む）より優先させる。
 */
.page-hero__title.page-hero__title--article {
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: .04em;
  max-width: 880px;
}
@media (max-width: 767px) {
  .page-hero__title.page-hero__title--article { font-size: 30px; }
}
@media (max-width: 600px) {
  .page-hero__title.page-hero__title--article { font-size: 26px; }
}

/* --- 個人情報保護方針カード（inquiry-policy ブロック用に共通化） --- */
.policy-card {
  width: 100%; max-width: 880px; margin-inline: auto;
  background: #fff; border: 1px solid var(--color-secondary); border-radius: var(--radius-400);
  padding: var(--space-1200) var(--space-800);
  display: flex; flex-direction: column; gap: var(--space-1200);
}
.policy-block { display: flex; flex-direction: column; gap: var(--space-400); }
.policy-subtitle {
  position: relative; padding-left: var(--space-400);
  font: 700 21px/1.6 var(--font-base); color: var(--color-primary-deep); letter-spacing: .04em;
}
.policy-subtitle::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; background: var(--color-primary); border-radius: var(--radius-full); }
.policy-text { font: 400 15px/1.95 var(--font-base); color: var(--color-text); }

.purpose-list { display: flex; flex-direction: column; gap: var(--space-200); }
.purpose-list li { display: flex; gap: var(--space-300); font: 400 15px/1.9 var(--font-base); color: var(--color-text); }
.purpose-list__mark { flex: none; font-weight: 700; color: var(--color-primary); }

.policy-list { display: flex; flex-direction: column; gap: var(--space-300); counter-reset: policy; }
.policy-list li {
  position: relative; padding-left: var(--space-1200);
  font: 400 15px/1.9 var(--font-base); color: var(--color-text);
}
.policy-list li::before {
  counter-increment: policy; content: counter(policy);
  position: absolute; left: 0; top: .1em;
  width: 28px; height: 28px; display: grid; place-items: center;
  font: 700 14px/1 var(--font-base); color: var(--color-primary);
  background: var(--color-bg-soft); border: 1px solid var(--color-secondary); border-radius: var(--radius-full);
}

.policy-links { display: flex; flex-direction: column; gap: var(--space-200); }
.policy-links a { font: 400 15px/1.7 var(--font-base); color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.policy-links a:hover { color: var(--color-primary-dark); }

.policy-contact { gap: var(--space-300); }
.policy-contact__name { font: 700 17px/1.7 var(--font-base); color: var(--color-text); }
.policy-contact__tel {
  display: inline-flex; align-items: center; gap: var(--space-200); align-self: flex-start;
  font: 700 28px/1.2 var(--font-base); color: var(--color-primary); letter-spacing: .02em;
  transition: color .2s ease;
}
.policy-contact__tel iconify-icon { font-size: 24px; transition: transform .25s ease; }
.policy-contact__tel:hover { color: var(--color-primary-dark); }
.policy-contact__tel:hover iconify-icon { transform: scale(1.12) rotate(-10deg); }