@charset "UTF-8";

/* =============================================================
   コーセイ大臣 ゆうこさん — 公式サイト

   ■ 考え方（案A「静謐な報道系」を採用）
   新聞社・通信社の企業サイトのような、抑制の効いた誌面。
   ・色はほぼ無彩色。藍（#244071）は要所だけに置く
   ・差し色は朱（校正の赤入れ）ひとつに限る
   ・角丸ゼロ・影ゼロ。面ではなく「罫」で構造を示す
   ・大見出しは明朝、本文と UI はゴシック
   ・行間は 1.8〜1.9。字面を詰めない

   ■ 制約（厳守）
   外部リソースは一切読み込まない（配信時の CSP で遮断される）。
   書体は OS 内蔵のみ。インライン script も動かないので /assets/site.js に置く。
   固定幅（width: NNNpx）は使わない。360px〜1920px で横スクロールを出さない。

   ■ 目次
   1. リセット
   2. 設計トークン
   3. ベース・和文の組み
   4. ボタン
   5. 上部の帯・ヘッダー・ナビ
   6. 図版（SVG）の配色
   7. 帯・段見出し・段組
   8. トップページの各部
   9. 規約系ページの本文（.prose）
  10. 要記入の印（.tbd）
  11. フッター
  12. 動きを減らす設定への配慮
   ============================================================= */


/* -------------------------------------------------------------
   1. リセット
   ------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure, figcaption, address, blockquote, table, fieldset {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

img, svg {
  max-width: 100%;
}

address {
  font-style: normal;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

table {
  border-collapse: collapse;
}

/* はみ出しの最終防波堤。clip はスクロールコンテナを作らないので
   position: sticky を壊さない（overflow: hidden だと壊れる）。 */
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;

  /* 追従ヘッダーの裏に着地点が潜らないようにする。
     --header-h は site.js が実測値で上書きする（下の既定値は JS が無いときの保険）。 */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}


/* -------------------------------------------------------------
   2. 設計トークン
   ------------------------------------------------------------- */

:root {
  /* ---- 書体（すべて OS 内蔵。Web フォントは読み込まない） ---- */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", Meiryo,
    "Noto Sans JP", sans-serif;
  --font-serif:
    "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "Yu Mincho",
    "BIZ UDPMincho", "Noto Serif JP", "MS PMincho", serif;

  /* ---- 紙と墨 ---- */
  --paper: #fbfaf8;       /* わずかに温かい白。純白より目が疲れない */
  --paper-2: #f2f0eb;     /* 面を切り替えるときの淡い地色 */
  --ink: #16181c;         /* 本文の墨 */
  --ink-2: #3d4249;       /* 副次テキスト */
  --ink-3: #5b6068;       /* 注記・キャプション（対比 6.0:1） */

  /* ---- 罫 ---- */
  --rule: #d8d5cf;        /* 細罫 */
  --rule-2: #bfbbb3;      /* 中罫 */
  --rule-strong: #16181c; /* 太罫（題字下・段抜き） */

  /* ---- 藍（ブランド色。アプリの brand-700 と同値） ---- */
  --ai: #244071;
  --ai-soft: #eaeff7;

  /* ---- 朱（差し色はこれ一つ。校正の赤入れの色） ---- */
  --shu: #a8322a;
  --shu-soft: #f6ece9;

  /* ---- ボタン ---- */
  --btn-bg: #244071;
  --btn-bg-h: #1c3159;
  --btn-fg: #ffffff;

  /* ---- 図版 ---- */
  --fig-page: #ffffff;
  --fig-line: #cfcbc3;

  /* ---- 要記入の印。見落とせないことだけを目的にした配色 ---- */
  --tbd-bg: #ffec99;
  --tbd-fg: #4a2b00;
  --tbd-line: #a8322a;

  /* ---- 追従ヘッダーの高さ（JS が実測値で上書きする） ---- */
  --header-h: 3.9rem;

  /* ---- 段の余白 ---- */
  --band-y: clamp(3.25rem, 7vw, 6rem);
}

@media (min-width: 900px) {
  :root {
    --header-h: 7.6rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 明地で機能している「地色による段の切り替え」を暗地でも残すため、
       --paper と --paper-2 の差は十分に開ける（案Aの原案は差が小さすぎた）。 */
    --paper: #101216;
    --paper-2: #1a1e25;
    --ink: #e9e7e3;
    --ink-2: #c2c0bc;
    --ink-3: #9aa0a8;      /* 対比 6.3:1（--paper-2 の上でも 4.5:1 以上） */

    --rule: #2e323a;
    --rule-2: #474c55;
    --rule-strong: #7d838b;

    --ai: #8facd7;         /* 対比 7.2:1。暗地では明るい藍に振る */
    --ai-soft: #1c2431;

    --shu: #e08078;        /* 対比 6.0:1 */
    --shu-soft: #2a1e1d;

    --btn-bg: #3b64a6;
    --btn-bg-h: #4a74b6;
    --btn-fg: #ffffff;

    --fig-page: #1b1f26;
    --fig-line: #454a53;

    --tbd-bg: #4a3a05;
    --tbd-fg: #ffe9a3;
    --tbd-line: #e08078;
  }
}


/* -------------------------------------------------------------
   3. ベース・和文の組み
   ------------------------------------------------------------- */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: 0.015em;
  overflow-wrap: break-word;

  /* 和文の字送りをブラウザ任せにしない。
     本文は詰めない（palt 0）。見出しだけ palt 1 で詰める。 */
  font-feature-settings: "palt" 0;

  /* 禁則。行頭に句読点・閉じ括弧が来ないようにする */
  line-break: strict;

  /* 括弧まわりの余白を詰める。未対応のブラウザでは無視されるだけなので、
     〔要記入：…〕のような括弧を含む文言は、効かない前提でも読める大きさにしてある。 */
  text-spacing-trim: space-first;

  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  line-height: 1.55;
  font-weight: 600;
  font-feature-settings: "palt" 1;
}

a {
  color: inherit;
}

/* フォーカスリングは消さない。暗地でも明地でも見える色を使う */
:focus-visible {
  outline: 2px solid var(--ai);
  outline-offset: 3px;
}

/* 折り返してほしくない語に付ける */
.nb {
  white-space: nowrap;
}

/* 目には見せないが、読み上げ環境には残す（ボタンの名前を消さないため） */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

/* 規約系ページ（<!--meta {"wide": false} -->）は行長を詰めて読みやすくする */
.main[data-width="narrow"] .wrap {
  max-width: 54rem;
}

.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip:focus {
  position: fixed;
  inset-block-start: 0.625rem;
  inset-inline-start: 0.625rem;
  z-index: 100;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 0.625rem 1.125rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.875rem;
  text-decoration: none;
}

[data-header-sentinel] {
  display: block;
  height: 1px;
}

/* 横に長い中身（表・図）は、この箱の中だけでスクロールさせる。
   ページ本体には絶対に横スクロールを出さない。 */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* -------------------------------------------------------------
   4. ボタン
   ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 clamp(1rem, 2.2vw, 1.625rem);
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.btn--sm {
  min-height: 2.375rem;
  font-size: 0.875rem;
}

.btn--lg {
  min-height: 3.375rem;
  font-size: 1rem;
}

.btn--solid {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.btn--solid:hover {
  background: var(--btn-bg-h);
}

.btn--line {
  border-color: var(--rule-2);
  color: var(--ink);
}

.btn--line:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}


/* -------------------------------------------------------------
   5. 上部の帯・ヘッダー・ナビ
   ------------------------------------------------------------- */

/* --- 最上部の細い帯（運営会社を静かに名乗る） --- */
.topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.25rem;
  padding-block: 0.4375rem;
}

.topbar__company,
.topbar__note {
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.topbar__company {
  font-weight: 600;
}

/* 狭い幅では説明のほうを落とす。会社名は必ず残す */
@media (max-width: 519px) {
  .topbar__note {
    display: none;
  }
}

/* --- ヘッダー --- */
.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: var(--paper);
}

/* 題字下の二重罫（太細）。空の <div> を置かず擬似要素で組む */
.site-head::after {
  content: "";
  display: block;
  height: 0.3125rem;
  border-top: 2px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem 1.25rem;
  padding-block: clamp(0.625rem, 1.8vw, 1.1875rem);
  transition: padding 160ms ease;
}

.masthead__acts {
  display: flex;
  align-items: center;
  gap: clamp(0.375rem, 1.2vw, 0.875rem);
}

/* --- 題字 --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* 実マーク（631:782）。width/height 属性を入れてあるので、
   高さだけ指定すれば比率は保たれ、読み込み前後で行がずれない。 */
.brand__mark {
  flex: none;
  width: auto;
  height: clamp(1.75rem, 3.4vw, 2.125rem);
}

.brand__type {
  display: block;
  min-width: 0;
}

.brand__kicker {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.3em;
  color: var(--ink-3);
}

.brand__name {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: 0.07em;
  color: var(--ink);
}

/* --- 開閉ボタン（狭い幅のみ。JS が動くときだけ出す） --- */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.375rem;
  padding-inline: 0.625rem;
  border: 1px solid var(--rule-2);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.nav-toggle__bars {
  width: 1rem;
  height: 0.625rem;
  fill: currentColor;
}

/* 360px 幅では「題字＋ログイン＋メニュー」が1行に収まらず、
   ヘッダーが2行（実測102px）になって画面の1/7を常時占める。
   狭い幅では開閉ボタンの文字を落とし、名前は読み上げ用に残す。 */
@media (max-width: 479px) {
  .nav-toggle {
    padding-inline: 0.5625rem;
  }

  .nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- ナビ --- */
.navbar {
  padding-bottom: clamp(0.625rem, 1.4vw, 0.875rem);
  transition: padding 160ms ease;
}

.navbar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem clamp(1.125rem, 2.8vw, 2.125rem);
  border-top: 1px solid var(--rule);
  padding-top: clamp(0.5625rem, 1.2vw, 0.8125rem);
}

.navbar__list a {
  display: inline-block;
  padding-block: 0.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}

.navbar__list a:hover {
  color: var(--ai);
  border-bottom-color: var(--ai);
}

/* 現在地に印を付ける。{{NAV}} が <body data-nav> に入っている */
[data-nav="features"] .nav-features,
[data-nav="pricing"] .nav-pricing,
[data-nav="security"] .nav-security,
[data-nav="company"] .nav-company,
[data-nav="contact"] .nav-contact {
  color: var(--ai);
  border-bottom-color: var(--ai);
}

/* 貼りついたら、上下の余白をわずかに詰める */
.site-head[data-stuck] .masthead {
  padding-block: 0.5rem;
}

.site-head[data-stuck] .navbar {
  padding-bottom: 0.5rem;
}

.only-wide {
  display: none;
}

/* --- 狭い幅：ヘッダーを1段に畳む ---
   2段のまま貼り付くと、iPhone SE 相当で画面の 1/6 が常時ヘッダーになる。 */
@media (max-width: 899px) {
  /* JS が動くときだけ開閉式にする。JS が死んでいればナビは出たままで、
     全項目にキーボードでも手が届く（段階的強化）。 */
  [data-js] .nav-toggle {
    display: inline-flex;
  }

  [data-js] .navbar[data-open="false"] {
    display: none;
  }

  .navbar__list {
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    border-top: 0;
  }

  .navbar__list a {
    display: block;
    padding-block: 0.6875rem;
    border-top: 1px solid var(--rule);
    border-bottom: 0;
  }

  .navbar__list a:hover {
    border-bottom-color: transparent;
  }

  [data-nav="features"] .nav-features,
  [data-nav="pricing"] .nav-pricing,
  [data-nav="security"] .nav-security,
  [data-nav="company"] .nav-company,
  [data-nav="contact"] .nav-contact {
    border-bottom-color: transparent;
  }
}

@media (min-width: 900px) {
  .only-wide {
    display: inline-flex;
  }

  .nav-toggle {
    display: none;
  }
}


/* -------------------------------------------------------------
   6. 図版（SVG）の配色
      SVG は class で着色する。style 属性は使わない。
      SVG の中に <text> は置かない（書体・字送りの制御が効かず、
      拡大時に破綻するため）。文字は必ず SVG の外に出す。
   ------------------------------------------------------------- */

.fig {
  display: block;
  width: 100%;
  height: auto;
}

.fig .pg    { fill: var(--fig-page); stroke: var(--rule); stroke-width: 1; }
.fig .pg-ai { fill: var(--fig-page); stroke: var(--ai);   stroke-width: 1.4; }
.fig .r     { fill: var(--fig-line); }
.fig .rd    { fill: var(--ink-2); }
.fig .ln    { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.fig .ai    { fill: none; stroke: var(--ai); stroke-width: 1.6; }
.fig .ai-f  { fill: var(--ai); }
.fig .shu   { fill: none; stroke: var(--shu); stroke-width: 1.6; }
.fig .shu-b { fill: var(--shu); }
.fig .thin  { stroke-width: 1; }
.fig .dash  { stroke-dasharray: 4 3; }

/* 指摘の重ね表示。種類ごとに色を変える（凡例は SVG の外に置く） */
.fig .mk-ink { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.6; }
.fig .mk-shu { fill: var(--shu-soft); stroke: var(--shu); stroke-width: 1.6; }
.fig .mk-ai  { fill: var(--ai-soft); stroke: var(--ai); stroke-width: 1.6; }
.fig .ch-ink { fill: var(--ink); }
.fig .ch-shu { fill: var(--shu); }
.fig .ch-ai  { fill: var(--ai); }


/* -------------------------------------------------------------
   7. 帯・段見出し・段組
   ------------------------------------------------------------- */

.band {
  padding-block: var(--band-y);
  border-top: 1px solid var(--rule);
}

.band--tint {
  background: var(--paper-2);
}

.sec-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sec-head__label {
  flex: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--ai);
}

.sec-head__rule {
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  background: var(--rule-strong);
}

.sec-title {
  margin-top: clamp(1rem, 2vw, 1.375rem);
  max-width: 26em;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.sec-lead {
  margin-top: clamp(0.875rem, 1.6vw, 1.125rem);
  max-width: 44em;
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--ink-2);
}

/* --- 段組。段の間は罫で仕切る（面や影は使わない） --- */
.cols {
  display: grid;
  gap: 0;
  margin-top: clamp(1.875rem, 4vw, 2.875rem);
}

.col {
  min-width: 0;
  padding-block: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}

.col__no {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: var(--ai);
}

.col__h {
  margin-top: 0.75rem;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
  line-height: 1.62;
  letter-spacing: 0.015em;
}

.col__p {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ink-2);
}

/* 4段（課題）。段間の縦罫はブレークポイントごとに明示する */
@media (min-width: 620px) and (max-width: 1023.98px) {
  .cols--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cols--4 .col:nth-child(even) {
    padding-inline-start: clamp(1.25rem, 2.6vw, 1.875rem);
    border-inline-start: 1px solid var(--rule);
  }
  .cols--4 .col:nth-child(odd) {
    padding-inline-end: clamp(1.25rem, 2.6vw, 1.875rem);
  }
}

@media (min-width: 1024px) {
  .cols--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cols--4 .col {
    padding-inline: clamp(1rem, 1.8vw, 1.5rem);
    border-inline-start: 1px solid var(--rule);
  }
  .cols--4 .col:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .cols--4 .col:last-child {
    padding-inline-end: 0;
  }
}

/* 3段（使い方） */
@media (min-width: 780px) {
  .cols--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cols--3 .col {
    padding-inline: clamp(1.25rem, 2.4vw, 2rem);
    border-inline-start: 1px solid var(--rule);
  }
  .cols--3 .col:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .cols--3 .col:last-child {
    padding-inline-end: 0;
  }
}

/* 2段（機能） */
@media (min-width: 840px) {
  .cols--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cols--2 .col:nth-child(even) {
    padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
    border-inline-start: 1px solid var(--rule);
  }
  .cols--2 .col:nth-child(odd) {
    padding-inline-end: clamp(1.5rem, 3vw, 2.5rem);
  }
}


/* -------------------------------------------------------------
   8. トップページの各部
   ------------------------------------------------------------- */

/* --- ヒーロー --- */
.hero__grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  padding-block: clamp(2.625rem, 6.5vw, 5.25rem) clamp(2.75rem, 6.5vw, 5rem);
}

@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(2.25rem, 4vw, 3.75rem);
  }

  /* 段間の縦罫は段の高さいっぱいに通す（途中で切れると新聞の組みに見えない）。
     図版は段の中で天地中央に置き、余白を上下に分ける。 */
  .hero__fig {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-inline-start: 1px solid var(--rule);
    padding-inline-start: clamp(1.75rem, 3.4vw, 3rem);
  }
}

.kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}

.kicker__tag {
  color: var(--ai);
}

.kicker__sep {
  width: 1.375rem;
  height: 1px;
  background: var(--rule-2);
}

/* 折り返す幅では、行末に罫だけが残ってしまうので出さない */
@media (max-width: 559px) {
  .kicker__sep {
    display: none;
  }
}

/* 上限 3.45rem は「校正の一周目を、」の8文字が1行に収まる大きさ。
   字送り（letter-spacing）や書体を変えたら、必ず 360px と 1280px で測り直すこと。
   HTML 側の <br> は 980px 以上でしか効かせていない（.br-wide）。 */
.hero__title {
  margin-top: clamp(1.125rem, 2.4vw, 1.625rem);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.05rem, 5.4vw, 3.45rem);
  line-height: 1.42;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.br-wide {
  display: none;
}

@media (min-width: 980px) {
  .br-wide {
    display: inline;
  }
}

.hero__body {
  margin-top: clamp(1.25rem, 2.6vw, 1.75rem);
  max-width: 34em;
  line-height: 1.95;
  color: var(--ink-2);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.625rem, 3.4vw, 2.25rem);
}

/* 縦に積むときは幅を揃える。長さの違う箱が段違いに並ぶと雑に見える */
@media (max-width: 479px) {
  .cta .btn {
    flex: 1 1 100%;
  }
}

/* ヒーローの注記は無料枠の条件だけ。支払い方法はフッターと料金ページへ */
.cta__note {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--ink-3);
}

/* --- 事実の帯（数字はすべてアプリの実装に基づく） --- */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(1.875rem, 4vw, 2.625rem);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 1240px) {
  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.facts__item {
  min-width: 0;
  padding: 0.75rem 0.875rem 0.75rem 0;
  border-top: 1px solid var(--rule);
}

.facts__item dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--ink-3);
}

.facts__item dd {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.num {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ai);
  margin-right: 0.125rem;
}

/* --- ヒーローの図版と凡例 --- */
.hero__fig .fig {
  max-width: 36rem;
  margin-inline: auto;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-2);
}

.legend li {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

.legend__sw {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
}

.legend__sw--ink { color: var(--ink); background: var(--paper-2); }
.legend__sw--shu { color: var(--shu); background: var(--shu-soft); }
.legend__sw--ai  { color: var(--ai);  background: var(--ai-soft); }

.hero__cap {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--ink-3);
}

/* --- 機能の段 --- */
.col--feat .col__p {
  max-width: 32em;
}

.feat__fig {
  max-width: 18.75rem;
  margin-bottom: clamp(1.125rem, 2.4vw, 1.5rem);
}

/* 拾い読みする決裁者のために、散文とは別に仕様の1行を置く */
.feat__meta {
  margin-top: 0.875rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* --- そのほかの機能（流し込みにせず、1項目ずつ視線を止める） --- */
.also {
  margin-top: clamp(1.875rem, 4vw, 2.75rem);
  padding-top: clamp(1.125rem, 2.4vw, 1.5rem);
  border-top: 1px solid var(--rule);
}

.also__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ink-3);
}

.also__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  margin-top: 0.75rem;
}

.also__list li {
  padding-block: 0.5625rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--ink-2);
}

/* --- 注記（AIの限界を隠さないための箱） --- */
.note {
  display: grid;
  gap: 0.375rem;
  margin-top: clamp(1.875rem, 4vw, 2.75rem);
  padding: clamp(1.125rem, 2.4vw, 1.5rem) clamp(1.125rem, 2.4vw, 1.625rem);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--ai);
  background: var(--paper);
}

.note__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ai);
}

.note__p {
  max-width: 52em;
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--ink-2);
}

.note__p + .note__p {
  margin-top: 0.5rem;
}

/* --- 根拠を示す校正（実例） --- */
.cases {
  display: grid;
  gap: 0;
  margin-top: clamp(1.875rem, 4vw, 2.875rem);
  border-top: 1px solid var(--rule-strong);
}

.case {
  display: grid;
  gap: 0.875rem;
  padding-block: clamp(1.25rem, 2.6vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 860px) {
  .case {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
  }
}

.case__part {
  min-width: 0;
}

.case__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink-3);
}

/* 原稿の一文。朱の傍線で「ここが引っかかった」ことを示す */
.case__quote {
  margin-top: 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
}

.case__mark {
  border-bottom: 2px solid var(--shu);
  padding-bottom: 0.0625rem;
}

.case__body {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ink-2);
}

.case__law {
  margin-top: 0.5rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--ai);
  background: var(--paper);
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--ink-2);
}

.case__law b {
  display: block;
  font-weight: 700;
  color: var(--ai);
}

/* --- 料金の要約 --- */
/* ⚠️ 段数を auto-fit に任せてはいけない。
      幅によって段数が勝手に変わると、「段の先頭が何枚目か」が CSS 側から分からず、
      2段目の左端に縦罫が1本ぶら下がったまま残る。
      実際 720〜1040px あたりで「3枚＋1枚」に割れ、4枚目の左に罫が浮いていた。
      段数はこちらで決め、段の先頭を nth-child で名指しする。
      プランは4枚なので 1 / 2×2 / 4 の3段階。3段組みは必ず1枚あぶれるので使わない。
      プランの枚数を増減するときは、この nth-child も必ず合わせて直すこと。 */
.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(1.875rem, 4vw, 2.875rem);
  border-top: 1px solid var(--rule-strong);
}

.plan {
  min-width: 0;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) 0;
  border-bottom: 1px solid var(--rule);
}

/* 2段組み */
@media (min-width: 34rem) {
  .plans {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan {
    padding-inline: clamp(1rem, 2vw, 1.5rem);
    border-inline-start: 1px solid var(--rule);
  }

  /* 段の先頭は本文の左端に揃える。縦罫も引かない */
  .plan:nth-child(2n + 1) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

/* 4段組み。段の先頭が変わるので、2段組みで外した罫を1枚ぶん戻す */
@media (min-width: 66rem) {
  .plans {
    grid-template-columns: repeat(4, 1fr);
  }

  .plan:nth-child(2n + 1) {
    border-inline-start: 1px solid var(--rule);
    padding-inline-start: clamp(1rem, 2vw, 1.5rem);
  }

  .plan:nth-child(4n + 1) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

.plan__name {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.plan__price {
  margin-top: 0.75rem;
  line-height: 1.3;
  color: var(--ink);
}

.plan__price .num {
  font-size: 2rem;
}

.plan__unit {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.plan__tax {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.plan__list {
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--ink-2);
}

.plan__list li::before {
  content: "・";
  color: var(--rule-2);
}

.plans__note {
  margin-top: 1.125rem;
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--ink-3);
}

.plans__more {
  margin-top: 1.5rem;
}

/* --- よくあるご質問 --- */
.faq {
  display: grid;
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1.875rem, 4vw, 2.875rem);
  border-top: 1px solid var(--rule-strong);
}

@media (min-width: 900px) {
  .faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.faq__item {
  min-width: 0;
  padding-block: clamp(1.125rem, 2.4vw, 1.5rem);
  border-bottom: 1px solid var(--rule);
}

.faq__q {
  display: flex;
  gap: 0.625rem;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.7;
}

.faq__q::before {
  content: "Q";
  flex: none;
  font-weight: 700;
  color: var(--ai);
}

.faq__a {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ink-2);
}

.faq__a::before {
  content: "A";
  flex: none;
  font-weight: 700;
  color: var(--ink-3);
}

/* --- 最後のCTA --- */
.closing {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 2px solid var(--rule-strong);
}

@media (min-width: 900px) {
  .closing {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.closing__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1.55;
}

.closing__p {
  margin-top: 1rem;
  max-width: 36em;
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--ink-2);
}


/* -------------------------------------------------------------
   9. 規約系ページの本文（.prose）

   利用規約・プライバシーポリシー・特定商取引法に基づく表記など、
   長い文章のページはこの1クラスだけで整うようにしてある。
   ページを書く人は、余分なクラスを足さないこと。
   ------------------------------------------------------------- */

.page-head {
  padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule-strong);
}

.page-head__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.page-head__lead {
  margin-top: 1rem;
  max-width: 44em;
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--ink-2);
}

.page-head__meta {
  margin-top: 1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.prose {
  padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(3rem, 6vw, 5rem);
  font-size: 1rem;
  line-height: 1.95;
  color: var(--ink);
}

/* 縦のリズムは「隣り合う要素の間」で作る。個別に margin を足さない */
.prose > * + * {
  margin-top: 1.25rem;
}

.prose h2 {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.6;
}

.prose h3 {
  margin-top: clamp(1.75rem, 3.2vw, 2.25rem);
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.7;
}

.prose h4 {
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
}

.prose p {
  max-width: 46em;
}

.prose a {
  color: var(--ai);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.prose strong {
  font-weight: 700;
}

.prose small {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.prose hr {
  height: 0;
  margin-block: clamp(2rem, 4vw, 3rem);
  border: 0;
  border-top: 1px solid var(--rule);
}

/* リストは reset で消した記号を戻す。行頭の記号は罫の位置に揃える */
.prose ul,
.prose ol {
  max-width: 46em;
  padding-inline-start: 1.5em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
  margin-top: 0.375rem;
}

.prose li + li {
  margin-top: 0.375rem;
}

.prose li::marker {
  color: var(--ink-3);
}

/* 定義リスト（「商号」「所在地」のような項目と値の対） */
.prose dl {
  max-width: 52em;
  border-top: 1px solid var(--rule);
}

.prose dl > div {
  display: grid;
  gap: 0.125rem 1.5rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 640px) {
  .prose dl > div {
    grid-template-columns: minmax(8rem, 0.28fr) minmax(0, 1fr);
  }
}

.prose dt {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--ink-2);
}

.prose dd {
  min-width: 0;
  line-height: 1.9;
}

/* 表。横に長い表は .scroll-x で包むこと（ページ本体を横に流さない） */
.prose table {
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.8;
  border-top: 1px solid var(--rule-strong);
}

.prose caption {
  padding-bottom: 0.625rem;
  font-size: 0.8125rem;
  text-align: start;
  color: var(--ink-3);
}

.prose th,
.prose td {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--rule);
  text-align: start;
  vertical-align: top;
}

.prose thead th {
  background: var(--paper-2);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  white-space: nowrap;
}

.prose tbody th {
  font-weight: 700;
  color: var(--ink-2);
}

.prose blockquote {
  max-width: 46em;
  padding: 0.875rem 1.125rem;
  border-inline-start: 3px solid var(--rule-2);
  color: var(--ink-2);
}

.prose figure {
  max-width: 46em;
}

.prose figcaption {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--ink-3);
}


/* -------------------------------------------------------------
  10. 要記入の印（.tbd）

  まだ分かっていない情報は、空欄にも、それらしい値にもしない。
  黄地＋朱の下線で、目を通せば必ず引っかかる見た目にする。
  公開前に消すこと（node lp/build.mjs --strict が残存を検出する）。
   ------------------------------------------------------------- */

.tbd {
  display: inline-block;
  padding: 0.0625rem 0.4375rem;
  background: var(--tbd-bg);
  color: var(--tbd-fg);
  border-bottom: 2px solid var(--tbd-line);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.7;
}


/* -------------------------------------------------------------
  11. フッター
   ------------------------------------------------------------- */

.site-foot {
  background: var(--paper);
}

/* 二重罫（細太）。ヘッダーの ::after と対になる */
.site-foot::before {
  content: "";
  display: block;
  height: 0.3125rem;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 2px solid var(--rule-strong);
}

.site-foot__inner {
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(1.75rem, 3.4vw, 2.5rem);
}

.foot__grid {
  display: grid;
  gap: clamp(2.125rem, 4.4vw, 3.25rem);
}

@media (min-width: 1000px) {
  .foot__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  }
}

.brand--foot .brand__name {
  font-size: 1.35rem;
}

.foot__desc {
  margin-top: 0.875rem;
  max-width: 30em;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--ink-3);
}

.foot__h {
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}

.foot__brand .foot__h {
  margin-top: 1.5rem;
}

/* 決裁者は、まずここを見る。定義リストで項目と値をはっきり対にする */
.foot__co-row {
  display: grid;
  gap: 0.125rem 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 420px) {
  .foot__co-row {
    grid-template-columns: minmax(4.5rem, 0.3fr) minmax(0, 1fr);
  }
}

.foot__co dt {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.8;
  color: var(--ink-3);
}

.foot__co dd {
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--ink-2);
}

.foot__cols {
  display: grid;
  gap: clamp(1.625rem, 3.2vw, 2.25rem);
}

@media (min-width: 600px) {
  .foot__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.foot__col {
  min-width: 0;
}

.foot__col ul {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.375rem;
}

.foot__col a {
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}

.foot__col a:hover {
  color: var(--ai);
  border-bottom-color: var(--ai);
}

/* 見出しと値を上下に置く。横並びにすると、段幅によって
   要記入の札だけが折り返され、行が不揃いになる */
.foot__contact {
  gap: 0.875rem;
}

.foot__contact li {
  display: grid;
  justify-items: start;
  gap: 0.1875rem;
}

.foot__ck {
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.foot__terms {
  display: grid;
  gap: 0.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.125rem, 2.4vw, 1.5rem);
  border-top: 1px solid var(--rule);
}

.foot__pay,
.foot__caveat {
  max-width: 60em;
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--ink-3);
}

.foot__copy {
  margin-top: clamp(2.125rem, 4vw, 3rem);
  padding-top: 1.125rem;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}


/* -------------------------------------------------------------
  12. 動きを減らす設定への配慮
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}