@charset "UTF-8";
/* ============================================================
   LP制作の文字と余白の基準 v0.1（2026-10-21）
   全系統で共通。系統で変えるのは末尾の「系統ごとの差分」だけ。
   文字の段階は picks design（https://picks-design.com/design-system/）の
   8段階（48/40/32/24/20/18/16/14px）と行間・字間の付け方を参考にしている。
   本文の最小サイズは japanese-lp スキルの基準（本文16px以上、市民向けは17px以上）を優先。
   このファイルが正本。基準ページ（文字と余白の基準.html）もここを読んで数値を表示する。
   ============================================================ */

:root {
  /* ---------- 書体 ---------- */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif;
  --font-latin: "Inter";
  --fw-body: 400;
  --fw-strong: 700;
  --fw-head: 700;
  --jump: 1;

  --fs-h4: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);                           /* 20〜24px カードの見出し */
  --fs-h5: 1.25rem;                                                          /* 20px 項目の見出し */
  --fs-lead: 1.125rem;                                                       /* 18px 導入文 */
  --fs-body: 1rem;                                                           /* 16px 本文（これより小さくしない） */
  --fs-sm: .875rem;                                                          /* 14px 注記・ラベル・日付 */
  --fs-xs: .75rem;                                                           /* 12px タグ・キャプション */

  --lh-display: 1.35;
  --lh-h1: 1.45;
  --lh-h2: 1.5;
  --lh-h3: 1.5;
  --lh-h4: 1.55;
  --lh-h5: 1.6;
  --lh-lead: 1.8;
  --lh-body: 1.8;
  --lh-sm: 1.7;
  --lh-xs: 1.6;

  --ls-display: .03em;  /* 大きい文字ほど詰める */
  --ls-head: .05em;
  --ls-body: .04em;
  --ls-latin: 0;        /* 欧文だけの見出し・数字 */

  /* ---------- 余白の段階（4pxの倍数） ---------- */
  --sp-1: 4px;    /* アイコンと文字 */
  --sp-2: 8px;    /* タグの内側、ラベルと見出し */
  --sp-3: 12px;   /* 見出しと本文（小） */
  --sp-4: 16px;   /* 段落と段落、カードの間（小） */
  --sp-5: 24px;   /* 見出しと本文、カードの内側、カードの間 */
  --sp-6: 32px;   /* まとまりとまとまり */
  --sp-7: 48px;   /* セクション見出しと中身 */
  --sp-8: 64px;   /* セクションの間（スマホ） */
  --sp-9: 96px;   /* セクションの間（PC） */
  --sp-10: 128px; /* ヒーローの上下、章の切り替え */

  --space-section: clamp(64px, 40px + 6vw, 128px); /* セクションの上下 */
  --space-block: clamp(32px, 24px + 2vw, 48px);    /* 見出しと中身、ブロックの間 */
  --gutter: clamp(20px, 4vw, 40px);                /* 画面の左右 */

  /* ---------- 幅と角丸 ---------- */
  --width-content: 1080px; /* 中身の最大幅 */
  --width-wide: 1280px;    /* 写真や帯を広げるとき */
  --measure: 40em;         /* 本文1行の最大幅（16pxで640px） */
  --radius-sm: 8px;        /* 入力欄、小さな面 */
  --radius-md: 14px;       /* カード */
  --radius-lg: 24px;       /* 大きな面、画像 */
  --radius-pill: 999px;    /* ボタン、タグ */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 28px rgba(0, 0, 0, .07); /* 白いカードを背景から浮かせる薄い影 */
}

/* 系統で変わる値を使う変数は、系統を指定した要素でも計算し直す（:root だけで計算すると倍率や書体の差し替えが効かない） */
:root, [data-tone] {
  --font-base: var(--font-latin), var(--font-jp);
  /* ---------- 文字の段階 ----------
     見出しは画面幅で伸び縮みする（スマホの最小〜PCの最大）。
     --jump は系統ごとの見出しの大きさの倍率。 */
  --fs-display: calc(clamp(2.25rem, 1.35rem + 3.8vw, 3.5rem) * var(--jump)); /* 36〜56px ヒーローの1行だけ */
  --fs-h1: calc(clamp(2rem, 1.45rem + 2.3vw, 3rem) * var(--jump));           /* 32〜48px ページの題 */
  --fs-h2: calc(clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem) * var(--jump));      /* 28〜40px セクションの見出し */
  --fs-h3: calc(clamp(1.5rem, 1.2rem + 1.1vw, 2rem) * var(--jump));          /* 24〜32px 小見出し・大きな数字 */
}

/* 市民向け・幅広い読者のページは本文を一段上げる */
[data-reader="public"] {
  --fs-body: 1.0625rem; /* 17px */
  --fs-lead: 1.1875rem; /* 19px */
  --lh-body: 1.9;
}

/* ---------- 系統ごとの差分（書体・見出しの太さ・見出しの倍率だけ） ---------- */
[data-tone="vivid"]      { --font-latin: "Readex Pro"; --fw-head: 700; }
[data-tone="calm"]       { --font-latin: "DM Sans"; --fw-head: 600; --jump: .92; --lh-body: 1.9; }
[data-tone="sharp"]      { --font-latin: "Inter"; --fw-head: 700; --jump: 1.1; --ls-head: .02em; --ls-display: 0; }
[data-tone="region"]     { --font-latin: "Montserrat"; --fw-head: 600; }
[data-tone="alphadrive"] { --font-latin: "Inter"; --fw-head: 500; } /* 本家は AXIS（有償）。手元では Inter で代える */
.type-base, [data-tone] { font-family: var(--font-base); }

/* ============================================================
   基本スタイル（案件でそのまま使ってよい）
   ============================================================ */
html { line-break: strict; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
.type-base {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-body);
  font-feature-settings: "pkna" 1;
}
/* :where() で優先度を上げない（部品や案件の CSS で余白・太さを上書きできるように） */
.type-base :where(h1, h2, h3, h4, h5, .t-display, .t-lead, .num) { font-feature-settings: "palt" 1; }
.type-base :where(h1, h2, h3, h4, h5, .t-display) {
  font-weight: var(--fw-head);
  word-break: normal;
  overflow-wrap: anywhere;
  margin: 0;
}
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-h1, .type-base h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-head); }
.t-h2, .type-base h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-head); }
.t-h3, .type-base h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-head); }
.t-h4, .type-base h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-head); }
.t-h5, .type-base h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-head); }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.t-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.t-latin, .num { letter-spacing: var(--ls-latin); }
.measure { max-width: var(--measure); }
.container { max-width: var(--width-content); margin-inline: auto; padding-inline: var(--gutter); box-sizing: content-box; }
.section { padding-block: var(--space-section); }