/* ============================================================
   HITO to ASHI ストア共通スタイル基盤（store-base.css）
   登録先：ecforce「タグ管理」の CSS（全ストアページに1回だけ登録）

   ── 役割 ────────────────────────────────────────────────
   LP（css/style.css・接頭辞 lp-）とは別系統の、ショップ側（/shop/…）
   固定ページ群リニューアル用の共通基盤。
     1. デザイントークン（.htt-page の :root 相当）
     2. ベース文字組み
     3. 再利用する共通部品（見出し・表・リスト・ステップ・カード等）
   各ページ固有の差分は別ファイル（例：warranty.css）に分離する。

   ── 命名規約（全ストアページ共通）─────────────────────────
   ・接頭辞 `htt-`（HITO to ASHI ブランド名前空間。ecforceテーマ／LPと衝突しない）
   ・ページ wrapper：<div class="htt-page htt-page--<slug>">
       .htt-page          … 全ストアページ共通の土台（トークン＋ベース）
       .htt-page--<slug>  … ページ識別（固有CSSのスコープ起点）例：--warranty / --faq / --guide
   ・共通部品（再利用）：.htt-section / .htt-h1〜h3 / .htt-text / .htt-table /
       .htt-celllist / .htt-bullets / .htt-steps / .htt-deflist / .htt-card /
       .htt-notelist / .htt-link
   ・部品の要素・変種は BEM：.htt-deflist__term / .htt-deflist--label / .htt-table__wrap
   ・固有ブロックが必要なときだけ .htt-<slug>__<element>（例：.htt-faq__accordion）

   ── スコープ規律（タグ管理は全ページ注入される前提）─────────────
   ・全セレクタを .htt-page 配下に閉じる（保証/他固定ページにしか .htt-page が無い）
   ・裸のタグセレクタ（body, table, h2 …）は使わない（テーマ・購入フォーム保護）
   ・新規ページは「.htt-page wrapper を置く→共通部品を使う→固有分だけ別ファイル」
   ============================================================ */

/* ============================================================
   1. デザイントークン ＋ ベース文字組み（.htt-page）
   ============================================================ */
.htt-page {
  --htt-ink:      #333333;   /* 本文 */
  --htt-heading:  #1a1a1a;   /* 見出し */
  --htt-accent:   #ff5a64;   /* ブランドのアクセント（最小限に使用） */
  --htt-muted:    #6b6b6b;   /* 補足・注記 */
  --htt-border:   #e3e3e3;   /* 罫線 */
  --htt-th-bg:    #f5f5f5;   /* 表の見出しセル背景 */
  --htt-soft-bg:  #fafafa;   /* カード・補足ブロック背景 */
  --htt-maxw:     860px;     /* 読みやすい本文幅（ページ側で上書き可） */
  --htt-radius:   6px;

  max-width: var(--htt-maxw);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
  box-sizing: border-box;
  color: var(--htt-ink);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
  font-size: clamp(15px, 1.2vw + 12px, 17px);
  line-height: 1.9;
  -webkit-text-size-adjust: 100%;
}

/* スコープ内の箱は border-box に統一（余白計算の事故防止） */
.htt-page *,
.htt-page *::before,
.htt-page *::after { box-sizing: border-box; }

/* ============================================================
   2. 見出し
   ============================================================ */
/* ページ見出し（h1）：アクセント下線 */
.htt-h1 {
  margin: 0 0 clamp(20px, 4vw, 32px);
  padding-bottom: .6em;
  border-bottom: 2px solid var(--htt-accent);
  color: var(--htt-heading);
  font-size: clamp(22px, 3.2vw + 10px, 30px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
}

/* セクション見出し（h2）：左罫アクセント */
.htt-h2 {
  margin: 0 0 clamp(14px, 2.5vw, 20px);
  padding: .15em 0 .15em .7em;
  border-left: 5px solid var(--htt-accent);
  color: var(--htt-heading);
  font-size: clamp(19px, 2vw + 10px, 24px);
  font-weight: 700;
  line-height: 1.45;
}

/* 小見出し（h3） */
.htt-h3 {
  margin: 0 0 .5em;
  color: var(--htt-heading);
  font-size: clamp(16px, 1.2vw + 11px, 19px);
  font-weight: 700;
  line-height: 1.5;
}

/* ============================================================
   3. セクション・本文
   ============================================================ */
.htt-section {
  margin: 0 0 clamp(32px, 6vw, 52px);
}

.htt-text {
  margin: 0 0 1em;
}
.htt-text:last-child { margin-bottom: 0; }

/* ============================================================
   4. リード文 ＋ ※注記リスト
   ============================================================ */
.htt-lead {
  margin: 0 0 clamp(28px, 5vw, 40px);
}
.htt-lead > :first-child { margin-top: 0; }
.htt-lead > :last-child { margin-bottom: 0; }

/* ※ で始まる注記の箇条書き（共通） */
.htt-notelist {
  list-style: none;
  margin: .9em 0 0;
  padding: 0;
  color: var(--htt-muted);
  font-size: .9em;
}
.htt-notelist li {
  margin: 0;
  padding-left: 1.4em;
  text-indent: -1.4em;
  line-height: 1.7;
}
.htt-notelist li::before {
  content: "※";
  margin-right: .4em;
}

/* ============================================================
   5. 表（縦型の情報テーブル）
   ============================================================ */
.htt-table__wrap {
  border: 1px solid var(--htt-border);
  border-radius: var(--htt-radius);
  overflow: hidden;
}
.htt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .96em;
}
.htt-table th,
.htt-table td {
  padding: clamp(12px, 2vw, 16px) clamp(12px, 2vw, 18px);
  border-top: 1px solid var(--htt-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.htt-table tr:first-child th,
.htt-table tr:first-child td {
  border-top: 0;
}
.htt-table th {
  width: 9em;
  background: var(--htt-th-bg);
  border-right: 1px solid var(--htt-border);
  color: var(--htt-heading);
  font-weight: 700;
  white-space: nowrap;
}

/* 表のSP対応：横並びが窮屈になる幅で行を縦積みにする */
@media (max-width: 600px) {
  .htt-table,
  .htt-table tbody,
  .htt-table tr,
  .htt-table th,
  .htt-table td {
    display: block;
    width: auto;
  }
  .htt-table tr + tr th { border-top: 1px solid var(--htt-border); }
  .htt-table th {
    border-right: 0;
    border-bottom: 0;
    white-space: normal;
  }
  .htt-table td {
    border-top: 0;
  }
}

/* ============================================================
   6. リスト類
   ============================================================ */
/* セル内などの「・」リスト（コンパクト） */
.htt-celllist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.htt-celllist li {
  margin: 0;
  padding-left: 1.1em;
  text-indent: -1.1em;
}
.htt-celllist li::before {
  content: "・";
}
.htt-celllist li + li {
  margin-top: .35em;
}

/* アクセント丸ポチの箇条書き（注意事項など） */
.htt-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
}
.htt-bullets li {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.3em;
  line-height: 1.8;
}
.htt-bullets li + li {
  margin-top: .7em;
}
.htt-bullets li::before {
  content: "";
  position: absolute;
  top: .72em;
  left: .15em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--htt-accent);
}

/* ============================================================
   7. 番号付きステップ（手続きの流れ）
   ============================================================ */
.htt-steps {
  margin: clamp(14px, 2.5vw, 18px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: htt-step;
}
.htt-steps li {
  position: relative;
  margin: 0;
  padding: 0 0 0 2.6em;
  min-height: 1.8em;
  line-height: 1.8;
  counter-increment: htt-step;
}
.htt-steps li + li {
  margin-top: 1em;
}
.htt-steps li::before {
  content: counter(htt-step);
  position: absolute;
  top: .1em;
  left: 0;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: var(--htt-heading);
  color: #fff;
  font-size: .85em;
  font-weight: 700;
  line-height: 1.8em;
  text-align: center;
}

/* ============================================================
   8. 定義リスト（用語＋説明）
       .htt-deflist--label … 用語を色付きラベル（バッジ）にする変種
   ============================================================ */
.htt-deflist {
  margin: clamp(16px, 3vw, 22px) 0 0;
}
.htt-deflist__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2em .9em;
  padding: clamp(14px, 2.5vw, 18px) 0;
  border-top: 1px solid var(--htt-border);
}
.htt-deflist__item:last-child {
  border-bottom: 1px solid var(--htt-border);
}
.htt-deflist__term {
  margin: 0;
  white-space: nowrap;
}
.htt-deflist__desc {
  margin: 0;
}
@media (max-width: 520px) {
  .htt-deflist__item {
    grid-template-columns: 1fr;
    gap: .5em;
  }
}

/* 変種：用語をアクセント色のラベルにする */
.htt-deflist--label .htt-deflist__term strong {
  display: inline-block;
  min-width: 3.6em;
  padding: .1em .55em;
  border-radius: 4px;
  background: var(--htt-accent);
  color: #fff;
  font-size: .92em;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 520px) {
  .htt-deflist--label .htt-deflist__term strong { min-width: 4.6em; }
}

/* ============================================================
   9. カード／補足ブロック
   ============================================================ */
.htt-card {
  margin-top: clamp(16px, 3vw, 22px);
  padding: clamp(14px, 2.5vw, 18px) clamp(14px, 3vw, 20px);
  background: var(--htt-soft-bg);
  border: 1px solid var(--htt-border);
  border-radius: var(--htt-radius);
}

/* ============================================================
   10. リンク
   ============================================================ */
.htt-link {
  color: var(--htt-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.htt-link:hover {
  text-decoration: none;
}

/* ============================================================
   11. 商品詳細ページ：サブ説明エリア（.htt-product-sub）
       商品詳細ページには固定ページの wrapper .htt-page が存在しないため、
       ここだけは専用クラス .htt-product-sub 自体をスコープ起点にする
       （自前 htt- 名前空間の一意クラス＝他ページ・テーマ要素に漏れない）。
       テーマ出力の .p-product_sub_description は直接指定しない（テーマ保護）。
       上下マージン：SP 32px ／ PC（768px〜）48px
   ============================================================ */
.htt-product-sub {
  margin-block: 32px;
}
@media (min-width: 768px) {
  .htt-product-sub {
    margin-block: 48px;
  }
}