/* =====================================================================
   bySENSE OFFICIAL WEBSITE — subscription.css  (定期便案内 page-specific)
   FAQページ(faq.css)の HERO・stage流体化・content グリッドを踏襲（同一機構）。
   コンテンツは 2026-03-17-bysense-method/subscription.html を現行デザインシステムへ移植:
     セットの中身 / 価格テーブル / 定期便のルール / なぜこの価格 / CTA / 使い方リンク。
   共通トークン/部品は base.css・components.css を使う（編集禁止）。
   明ページ: 背景 var(--bg)=#d0d0d0 / 文字 var(--ink)=#393c41。
   ===================================================================== */

/* ============ stage 流体化（.sub-stage スコープ＝faq-stage と同一機構） ============ */
.stage.sub-stage {
  width: clamp(var(--floor), 100vw, var(--frame));
  margin-left: calc((100vw - clamp(var(--floor), 100vw, var(--frame))) / 2);
  margin-right: 0;
}
/* bleed 再定義: stage 中央寄せ前提で viewport 全幅へ（faq.css と同一） */
.stage.sub-stage .bleed { left: 50%; margin-left: -50vw; width: 100vw; }

/* ============ HERO (0 → 100vh) — faq.css .fq-hero* を .sb-hero* で再現 ============ */
.sb-hero { position: relative; width: 100%; height: 100vh; }

.sb-hero__bg { position: absolute; top: 0; height: 100%; overflow: hidden; }
.sb-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 明るい写真上の白文字可読性グラデ（FAQ と同一） */
.sb-hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,18,14,0) 46%, rgba(20,18,14,.30) 78%, rgba(20,18,14,.42));
}

/* 前景ラッパ: HERO 下端固定の島。子は内部座標 px（FAQ と同一座標系） */
.sb-hero__fg { position: absolute; left: 0; bottom: 0; width: 100%; height: 1082px; z-index: 3; }

/* H1 "SUBSCRIPTION" — Kaku Regular 24/42/6px 白
   ※明るい写真領域(英和の上＝暗幕弱め)で白文字が飛ぶため、可読性確保に微細なソフトシャドウ。 */
.sb-hero__h1 {
  position: absolute; left: calc(128 / 1536 * 100%); top: 768px; width: min(672px, 100%);
  font-family: var(--sans); font-weight: 400;
  font-size: 24px; line-height: 42px; letter-spacing: 6px; color: var(--white);
  text-shadow: 0 1px 12px rgba(20,18,14,.55), 0 1px 2px rgba(20,18,14,.35);
}
/* H2 "定期便のご案内" — Mincho 500 24/48/3px 白 */
.sb-hero__h2 {
  position: absolute; left: calc(128 / 1536 * 100%); top: 865px; width: min(672px, 100%);
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; line-height: 48px; letter-spacing: 3px; color: var(--white);
  text-shadow: 0 1px 12px rgba(20,18,14,.5), 0 1px 2px rgba(20,18,14,.3);
}
.sb-hero__vline {
  position: absolute; left: calc(128 / 1536 * 100%); top: 1022px; height: 120px;
  border-left: 1px solid rgba(255,255,255,.65);
}
.sb-hero__hline {
  position: absolute; left: 0; top: 1082px; width: 100%;
  border-top: 1px solid var(--line);
}

/* ============ CONTENT (HERO以降・通常フロー＋グリッド) — faq.css .faq-content と同一列 ============ */
.sub-content {
  padding-top: 96px;
  display: grid;
  grid-template-columns: [full-start] minmax(24px, 1fr) [main-start] minmax(0, 896px) [main-end] minmax(24px, 1fr) [full-end];
}

/* イントロ文: main列左端・measure 736 / 明ページ濃文字 */
.sub-intro {
  grid-column: main-start / main-end;
  justify-self: start;
  width: min(736px, 100%);
  margin: 0 0 80px;
  color: var(--ink);
}

/* -------- 汎用セクション: main列(上限896)充填・上罫線で節区切り -------- */
.sub-sec {
  grid-column: main-start / main-end;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.sub-sec + .sub-sec { margin-top: 64px; }
/* EN eyebrow（節ラベル）: Kaku 500 13/.18em 補助トーン */
.sub-sec__eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60);
  margin-bottom: 14px;
}
/* 節見出し（JP）: .t-head と併用（Mincho 500 24/48/3）。濃文字 */
.sub-sec__head { color: var(--ink); }
/* 節リード（JP小見出し）: 明朝・本文より少し大きめ */
.sub-sec__lead {
  font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 32px;
  letter-spacing: .02em; color: var(--ink); margin-top: 14px;
}

/* -------- セットの中身: 2カード（写真正方形＋STEP＋名称＋仕様） -------- */
.sub-kit { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; }
.sub-kit__card { text-align: center; }
.sub-kit__img {
  width: 100%; aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 22px;
  background: var(--bg-alt);
}
.sub-kit__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sub-kit__step {
  font-family: var(--sans); font-weight: 500; font-size: 12px; line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 8px;
}
.sub-kit__name {
  font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: 30px;
  letter-spacing: .02em; color: var(--ink); margin-bottom: 8px;
}
.sub-kit__name-ja {
  display: inline-block; margin-left: 8px;
  font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .04em; color: var(--ink-60);
}
.sub-kit__spec {
  font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.9; color: var(--ink-60);
}

/* -------- 価格テーブル -------- */
.sub-price__wrap { margin-top: 40px; overflow-x: auto; }
.sub-price { width: 100%; border-collapse: collapse; font-family: var(--sans); }
.sub-price th, .sub-price td {
  padding: 20px 16px; text-align: center; border-bottom: 1px solid var(--line);
}
.sub-price thead th {
  font-weight: 500; font-size: 13px; letter-spacing: .08em; color: var(--ink-60);
  border-bottom: 1px solid var(--line);
}
.sub-price tbody td:first-child,
.sub-price thead th:first-child {
  text-align: left; font-size: 14px; font-weight: 500; color: var(--ink-60);
}
/* 推し列（定期便 初回）: 白パネルで控えめに強調 */
.sub-price__hl { background: var(--white); }
.sub-price__big { display: block; font-family: var(--sans); font-weight: 500; font-size: 24px; line-height: 1.3; color: var(--ink); }
.sub-price__normal { display: block; font-family: var(--sans); font-weight: 400; font-size: 19px; line-height: 1.3; color: var(--ink-60); }
.sub-price__tax { display: block; font-family: var(--sans); font-weight: 400; font-size: 12px; line-height: 1.5; color: var(--ink-60); margin-top: 4px; }
.sub-price__off {
  display: inline-block; margin-top: 8px;
  font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .06em;
  color: var(--ink); background: rgba(57,60,65,.10); padding: 2px 10px;
}
.sub-price__note { font-size: 13px; color: var(--ink-60); margin-top: 16px; text-align: center; }

/* -------- 定期便のルール: 連番＋ヘアライン -------- */
.sub-rules { margin-top: 32px; }
.sub-rules__item {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.sub-rules__no {
  flex: 0 0 auto; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 30px;
  color: var(--ink); min-width: 28px;
}
.sub-rules__body { font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 30px; color: var(--ink-60); }
.sub-rules__body strong { font-weight: 500; color: var(--ink); }

/* -------- なぜこの価格なのか: 濃色パネル（ブランドのダークビート・main列の独立セクション） -------- */
.sub-why {
  grid-column: main-start / main-end;
  margin-top: 64px;
  background: var(--ink); color: var(--white); padding: 56px 56px 60px;
}
.sub-why__eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 14px;
}
.sub-why__head { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 40px; letter-spacing: 3px; color: var(--white); }
.sub-why__body { margin-top: 28px; font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 30px; color: rgba(255,255,255,.82); }
.sub-why__body p + p { margin-top: 18px; }
.sub-why__body strong { font-weight: 500; color: var(--white); }

/* -------- CTA -------- */
.sub-cta { text-align: center; }
.sub-cta__price { font-family: var(--sans); font-weight: 500; font-size: 19px; color: var(--ink); margin-top: 8px; }
.sub-cta__price small { font-size: 13px; font-weight: 400; color: var(--ink-60); }
.sub-cta__was { font-family: var(--sans); font-weight: 400; font-size: 14px; color: var(--ink-60); margin-top: 6px; }
.sub-btn {
  display: inline-block; margin-top: 28px; padding: 15px 52px;
  border: 1px solid var(--ink); color: var(--ink);
  font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .15em; text-transform: uppercase;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.sub-btn:hover { background: var(--ink); color: var(--white); }
.sub-cta__sub { font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--ink-60); margin-top: 16px; letter-spacing: .04em; }

/* ============ 注釈エリア（footer 直上）— faq.css と同一配置 ============ */
.sub-notes {
  grid-column: full-start / full-end;
  justify-self: center;
  width: min(1280px, 100%);
  margin-top: 80px;
}

/* ============ FOOTER（full列・通常フロー） ============ */
.sub-content > #site-footer {
  grid-column: full-start / full-end;
  margin-top: 80px;
  position: relative;
}

/* =====================================================================
   [Phase3] スマホ専用 (<768) — faq.css の HERO/content スマホ規則を踏襲
   ===================================================================== */
@media (max-width: 767px) {
  .stage.sub-stage { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }

  /* HERO: 前景テキストを左下に1カラム積み（FAQ と同一） */
  .sb-hero { height: 100svh; }
  .sb-hero__fg { height: auto; top: auto; bottom: 0; left: 0; width: 100%; padding: 0 24px 72px; }
  .sb-hero__h1 { position: static; left: auto; top: auto; width: auto; font-size: 20px; letter-spacing: 4px; }
  .sb-hero__h2 { position: static; left: auto; top: auto; width: auto; margin-top: 6px; font-size: 22px; line-height: 36px; }
  .sb-hero__vline {
    position: absolute; left: 24px; right: auto; top: auto; bottom: -40px; height: 96px; width: 0;
    border-left: 1px solid rgba(255,255,255,.6);
  }
  .sb-hero__hline {
    position: absolute; left: 0; right: auto; top: auto; bottom: 0; width: 100%;
    border-top: 1px solid rgba(255,255,255,.28);
  }

  /* CONTENT */
  .sub-content { padding-top: 64px; }
  .sub-intro { margin-bottom: 56px; }
  .sub-sec + .sub-sec { margin-top: 48px; }
  /* セットの中身: 1カラム */
  .sub-kit { grid-template-columns: 1fr; gap: 40px; max-width: 360px; margin-left: auto; margin-right: auto; }
  /* 価格テーブル: 文字を詰める */
  .sub-price th, .sub-price td { padding: 14px 10px; }
  .sub-price__big { font-size: 19px; }
  /* なぜこの価格: パネル余白を詰める */
  .sub-why { padding: 32px 24px 36px; }
  .sub-why__head { font-size: 22px; line-height: 36px; letter-spacing: 2px; }
  /* 注釈の左右余白を他ページと統一(24pxガター) */
  .sub-notes { margin-top: 56px; padding: 0 24px; }
  .sub-content > #site-footer { margin-top: 56px; }
}