/* 普通じゃないよ: 法務・サポートページ（規約 / プライバシー / ガイドライン / 特商法 / サポート）の共通スタイル。
   base.css のトークン（色・フォント・角丸・輪郭・影）をそのまま使い、Web 診断とトンマナを揃える。
   ただし法務文書は読みやすさが最優先なので、ポップ体は見出しだけに使い、本文は Zen Maru Gothic の
   行間 1.8 で組む。装飾は「白い紙」と「囲み」に絞り、本文の字間は詰めない。

   ダークモード: base.css が `color-scheme: light` を宣言し、Web 診断もライト固定で作ってある。
   クリーム地・ネイビー・ずらしたベタ影という配色は反転させると成立しないため、この 5 枚も
   ライト固定にする（旧版にあった `prefers-color-scheme: dark` の上書きは撤去した）。 */

:root {
  /* 囲みの内側の余白。中の文章量で段階を選ぶ（すべてに一律 1 文字分を当てない）。
     すべて em なので、文字サイズを上げると余白も一緒に広がる。 */
  --box-pad-s: 1em;   /* 1 行のラベル・タグ */
  --box-pad-m: 1.5em; /* 1〜3 行の短文・コールアウト */
  --box-pad-l: 2em;   /* 段落・長文 */

  --doc-lh: 1.8;      /* 本文の行送り */
  --doc-lh-trim: 0.4em; /* (--doc-lh - 1) ÷ 2。囲みの上下はこの分だけ詰めて光学的に揃える */
}

/* 禁則処理。base.css には無いのでこの 5 枚で明示する。
   `word-break: break-all` は使わない（行頭の「。」や語中改行を生み、禁則が全部無効になる）。 */
body {
  line-break: strict; /* 長音・小書き仮名・繰返し記号も行頭に来させない */
  word-break: normal;
  font-kerning: normal;
  text-spacing-trim: trim-start; /* 行頭の括弧のアキを詰める（対応ブラウザのみ） */
}

/* 分離禁止（数字と単位、製品名）に使う */
.nowrap { white-space: nowrap; }

.doc {
  max-width: 42rem;
  margin: 0 auto;
  /* 左右のアキ。320px でも横スクロールを出さない下限を持たせる */
  padding:
    calc(env(safe-area-inset-top, 0px) + 1.25rem)
    clamp(1rem, 4vw, 1.5rem)
    calc(env(safe-area-inset-bottom, 0px) + 2.5rem);
}

/* base.css は h1,h2,h3,p に overflow-wrap: anywhere を掛けている（診断側の短い見出し向け）。
   長文だと語の途中で切れるので、この 5 枚では戻し、はみ出す恐れのあるリンクにだけ許す。 */
.doc h1,
.doc h2,
.doc h3,
.doc p,
.doc li,
.doc dd {
  overflow-wrap: normal;
  word-break: auto-phrase; /* 対応ブラウザでは文節で折り返す */
  text-wrap: pretty;
}
/* はみ出す恐れがあるのは URL・メールアドレスだけ。可読性より収まりを優先する
   （kinsoku.md の例外）。リンクになっていないドメイン表記には .url を付ける */
.doc a[href^="mailto:"],
.doc a[href^="https:"],
.doc a[href^="http:"],
.doc .url { overflow-wrap: anywhere; }

/* ── 見出し ───────────────────────────────── */

.doc-head { padding-bottom: 1.5rem; }

.doc-brand {
  display: inline-block;
  margin: 0;
  padding: 0.3em 0.95em;
  background: var(--navy);
  color: var(--white);
  border-radius: 999px;
  font-family: var(--font-pop);
  font-size: 0.9375rem;
  line-height: 1.5;
  box-shadow: 3px 3px 0 var(--pink-soft);
}

.doc-title {
  margin: 0.5em 0 0;
  font-family: var(--font-pop);
  font-weight: 400;
  font-size: clamp(1.5rem, 7vw, 2.125rem);
  line-height: 1.35;
  letter-spacing: -0.02em;      /* 見出しだけ詰める。本文へは継承させない */
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}

.doc-updated {
  margin: 0.9em 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;       /* 小さい文字は開ける */
  color: var(--muted);
}

/* ── 本文の紙 ─────────────────────────────── */

/* 長文の地。文章量が多いので余白は 2 文字分を上限に、狭い画面では 1.15 文字分まで落とす。
   この囲みの外側は端末の画面端なので、yohaku の「外側 ≧ 内側」（隣の要素との分離の話）は当てない。 */
.doc-sheet {
  --sheet-pad: clamp(1.15em, 5vw, var(--box-pad-l));
  padding: calc(var(--sheet-pad) - var(--doc-lh-trim)) var(--sheet-pad);
  background: var(--white);
  border: var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
  line-height: var(--doc-lh);
}

.doc-sheet > :first-child { margin-top: 0; }
.doc-sheet > :last-child { margin-bottom: 0; }

/* 見出しはポップ体 + 左のピンクの棒。棒は擬似要素なので、2 行に折り返しても
   ハイライトが行をまたいで割れない（背景グラデーションの下線だと割れる）。 */
.doc-sheet h2 {
  position: relative;
  margin: 1.9em 0 0.7em;
  padding-left: 0.85em;
  font-family: var(--font-pop);
  font-weight: 400;
  font-size: clamp(1.125rem, 4.6vw, 1.3125rem);
  line-height: 1.55;
  letter-spacing: -0.01em;
  font-feature-settings: "palt" 1;
}
.doc-sheet h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.26em;
  width: 0.28em;
  border-radius: 999px;
  background: var(--pink);
}

.doc-sheet p {
  margin: 0 0 1em;
  font-size: 1rem;
  font-weight: 500;
}

/* ── 箇条書き ─────────────────────────────── */

/* 「・」を marker に移し、折り返した行を頭の位置に揃える（ぶら下げインデント） */
.doc-list {
  margin: 0 0 1.1em;
  padding-left: 1.2em;
  list-style: none;
}
.doc-list > li {
  position: relative;
  margin-bottom: 0.45em;
  font-size: 1rem;
  font-weight: 500;
}
.doc-list > li::before {
  content: "";
  position: absolute;
  left: -1.05em;
  top: 0.66em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--pink);
}

/* 号を振った項（1. 2. 3.）。既定の ::marker は番号と本文が接してしまうので、
   marker を切って擬似要素で置き、あいだのアキを自分で持つ */
.doc-steps {
  margin: 0 0 1.1em;
  padding-left: 1.9em;
  list-style: none;
  counter-reset: doc-step;
}
.doc-steps > li {
  position: relative;
  counter-increment: doc-step;
  margin-bottom: 0.6em;
  font-size: 1rem;
  font-weight: 500;
}
.doc-steps > li::before {
  content: counter(doc-step) ".";
  position: absolute;
  left: -1.75em;
  width: 1.5em;
  font-family: var(--font-pop);
  font-weight: 400;
  color: var(--pink-deep);
}

.doc-list > li:last-child,
.doc-steps > li:last-child { margin-bottom: 0; }

/* ── 項目の囲み（特商法の表・サポートの Q&A） ── */

.doc-dl { margin: 0; }

.doc-dl dt {
  margin: 1.75em 0 0.55em;      /* 外側の余白は dd の内側の余白以上を保つ */
  font-family: var(--font-pop);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.doc-dl dt:first-of-type { margin-top: 0; }

/* 中身は 1 行のものから 1 段落のものまで幅がある。画面に余裕があるほど余白を広げる */
.doc-dl dd {
  --dd-pad: clamp(var(--box-pad-m), 6vw, var(--box-pad-l));
  margin: 0;
  padding: calc(var(--dd-pad) - var(--doc-lh-trim)) var(--dd-pad);
  background: var(--white);
  border: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-navy);
  font-size: 1rem;
  font-weight: 500;
  line-height: var(--doc-lh);
}
.doc-dl dd > :first-child { margin-top: 0; }
.doc-dl dd > :last-child { margin-bottom: 0; }

/* 短いコールアウト（連絡先など）。1〜3 行なので段階は一つ下げる。
   紙の中に入れ子にするので、外側（.doc-sheet）の余白より必ず小さく収まる値にしてある */
.doc-note {
  --note-pad: clamp(var(--box-pad-s), 4vw, var(--box-pad-m));
  margin: 1.5em 0;
  padding: calc(var(--note-pad) - var(--doc-lh-trim)) var(--note-pad);
  background: var(--white);
  border: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  line-height: var(--doc-lh);
}
.doc-note b {
  display: block;
  margin-bottom: 0.2em;
  font-family: var(--font-pop);
  font-weight: 400;
  font-size: 0.9375rem;
}
.doc-note a { font-size: 1.0625rem; }

/* よくある質問。紙の中に置くので、囲みを入れ子にせず見出しと本文だけで組む */
.doc-faq { margin: 0; }
.doc-faq dt {
  margin: 1.6em 0 0.35em;
  font-family: var(--font-pop);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
}
.doc-faq dt:first-of-type { margin-top: 0; }
.doc-faq dt::before {
  content: "Q. ";
  color: var(--pink-deep);
}
.doc-faq dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

/* 紙の外に置く導入文（サポートページの説明文など） */
.doc-lead {
  margin: 0 0 1.1em;
  font-size: 1rem;
  font-weight: 500;
  line-height: var(--doc-lh);
}

/* ── リンク・脚部 ─────────────────────────── */

.doc a {
  color: var(--pink-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 0.08em;
}

.doc .footer-links {
  gap: 0.4em 1.2em;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
}
/* flex item の既定 min-width:auto だと「特定商取引法に基づく表記」が縮まず、
   文字サイズ 200% で画面をはみ出す。縮めて文節で折り返させる */
.doc .footer-links li { min-width: 0; }
.doc .footer-links a,
.doc .footer-links .is-current {
  display: inline-block;
  max-width: 100%;
  padding: 0.35em 0;
  color: var(--muted);
  word-break: auto-phrase;
}
.doc .footer-links .is-current {
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}

.doc-foot {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.doc-foot p { margin: 0 0 0.35em; }
.doc-foot p:last-child { margin-bottom: 0; }
.doc-foot a { font-size: inherit; }