/* =========================================================================
   Herci — content.css  [SIR#86 指示書B Phase2]
   静的/法務ページ(faq/about/terms/privacy/legal/contact)の本文(文書/フォーム)スタイル。
   移行方針: 本文HTMLは旧 static のまま保持(法務3ページは1文字も変えない)。site.css を外し、
   本文が依存していた文書クラス(.page/.doc/.container/.faq-* /.story 等)を ds トークンで再定義する。
   さらに旧 site.css のカスタムプロパティ(--c-* / --maxw*)を ds トークンへエイリアスし、
   本文中のインライン style(contact フォーム等)が参照する変数を無改変で解決する。
   本文classを使わないページ(LP/動的系)には無害(未使用セレクタ)。
   ========================================================================= */

/* ---- 旧 site.css 変数 → ds トークン エイリアス(本文インライン参照の互換) ---- */
:root {
  --c-line:        var(--border-hairline);
  --c-line-strong: var(--border-strong);
  --c-base-alt:    var(--color-bg-alt);
  --c-base:        var(--color-bg);
  --c-heading:     var(--text-heading);
  --c-text:        var(--text-body);
  --c-text-muted:  var(--text-muted);
  --c-accent:      var(--color-primary);
  --maxw:          1120px;
  --maxw-narrow:   760px;
}

/* ---- レイアウト ---- */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 820px; }

.page { padding: 56px 0 88px; font-family: var(--font-sans); background: var(--color-bg); color: var(--text-body); }
/* [SIR#86 指示書B Phase2微修正①] 静的/法務ページの見出しは本文フォント(Zen Kaku Gothic New)へ統一。
   明朝(--font-heading)から --font-sans へ。weight 700 維持でゴシック太字見出し。LP/動的系は別CSSで無影響。 */
.page h1 { font-family: var(--font-sans); font-weight: 700; font-size: clamp(26px, 5vw, 38px); line-height: 1.32; color: var(--text-heading); margin: 0 0 8px; word-break: keep-all; }
.page .meta { color: var(--text-muted); font-size: 13px; margin: 0 0 32px; }
.back-link { display: inline-block; margin-top: 32px; color: var(--color-primary); text-decoration: none; font-weight: 700; }
.back-link:hover { text-decoration: underline; }

/* ---- 文書(規約/プライバシー/特商法) .doc ---- */
.doc { max-width: 760px; font-size: 15px; line-height: 1.9; color: var(--text-body); }
.doc h2 { font-family: var(--font-sans); font-weight: 700; font-size: 21px; color: var(--text-heading); margin: 40px 0 12px; } /* [SIR#86 Phase2微修正①] 明朝→本文ゴシック */
.doc h3 { font-weight: 700; font-size: 16px; color: var(--text-heading); margin: 24px 0 8px; }
.doc p { margin: 12px 0; }
/* [SIR#115/#103] 制定日・最終改定日行の補足スタイル(3法務文書共通)。ユーザーが詳読する情報でないため
   太字解除・薄字(--text-muted)・一段小さめに落とす(情報自体は残す)。 */
.doc .doc-meta { font-size: 13px; color: var(--text-muted); font-weight: 400; margin: 4px 0 16px; }
.doc p, .doc li { font-size: 15px; line-height: 1.9; color: var(--text-body); }
.doc ol, .doc ul { padding-left: 1.5em; margin: 10px 0; }
.doc li { margin: 6px 0; }
.doc ul ul, .doc ol ul, .doc ul ol { margin: 6px 0; }
.doc strong { font-weight: 700; color: var(--text-heading); }
.doc a { color: var(--color-primary); }
.doc hr { border: 0; border-top: 1px solid var(--border-hairline); margin: 28px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.doc th, .doc td { border: 1px solid var(--border-hairline); padding: 9px 11px; text-align: left; vertical-align: top; line-height: 1.8; }
.doc th { background: var(--color-bg-alt); font-weight: 700; color: var(--text-heading); white-space: nowrap; }
/* [SIR#96/#164 FB⑤] 特商法(.tbl-legal)のみ項目列幅を拡張(「項目」列が狭く内容列が縦に伸びる問題への対処)。
   他の .doc table(privacy等・列構成が異なる)には影響させないよう専用クラスでスコープ。文言・版数は不変。
   PC:「メールアドレス」(7字)、SP:「販売事業者」(5字)が項目列で折り返さない幅を確保(他の長い項目名は従来通り折返し可)。 */
.doc table.tbl-legal th:first-child, .doc table.tbl-legal td:first-child { width: 10em; }
@media (max-width: 759px) {
  .doc table.tbl-legal th:first-child, .doc table.tbl-legal td:first-child { width: 7.5em; }
}

/* ---- FAQ(独立ページ) .faq-* : .open で回答を開閉(ページ内JSがトグル) ---- */
.faq-list { margin-top: 8px; }
.faq-item { border-bottom: 1px solid var(--border-hairline); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font-size: 16px; font-weight: 700; color: var(--text-heading); font-family: var(--font-sans); }
.faq-q::after { content: "＋"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--gold-600); font-weight: 800; font-size: 18px; }
.faq-item.open .faq-q::after { content: "−"; }
.faq-a { padding: 0 0 18px; font-size: 14px; color: var(--text-muted); line-height: 1.85; display: none; }
.faq-item.open .faq-a { display: block; }
/* [SIR#101 FAQ刷新 受入FB①] /faq本文リンク色をLP FAQセクション(gold-600)と統一(navy→gold)。旧行はコメントアウト退避。
.faq-a a { color: var(--color-primary); } */
.faq-a a { color: var(--gold-600); }

/* ---- about(運営の想い) .story / contact(フォーム) ---- */
.story { max-width: 720px; font-size: 15px; line-height: 1.95; color: var(--text-body); }
.story p { margin: 14px 0; }
.story .sign { margin-top: 22px; font-weight: 700; color: var(--text-heading); }
.non-affil { font-size: 12px; color: var(--text-muted); line-height: 1.8; }

/* [SIR#128/Issue#55 A案] LINE友だち追加CTA(登録完了/マイページ 共通・常時表示・判定ロジックなし)。
   ベージュ背景で地の文から浮かせる注意喚起ブロック＋中央寄せで友だち追加へ誘導する。ボタンはLINE緑(.btn-line)。 */
/* [SIR#128/Issue#61 FB-1] 文言増後もベージュ背景は維持(Shogo判断=注意喚起ブロックとして地の文から浮かせる)。
   圧迫感は padding/font-size/左寄せ側で調整(背景色の復帰を優先)。 */
.friend-cta { text-align: center; border: 1px solid var(--border-hairline); border-radius: var(--radius-md, 12px);
  background: var(--color-bg-alt); padding: 14px 16px; margin: 18px 0; }
.friend-cta-lead { font-size: 13px; color: var(--text-body); line-height: 1.7; margin: 0 0 12px; text-align: left; }
.friend-cta-lead b { color: var(--text-heading); }
.friend-cta .btn-friend { text-decoration: none; padding: 10px 20px; font-size: 14px; }

/* contact フォーム: input/select/textarea のインライン style は --c-line 等のエイリアスで解決。補助のみ ds 化 */
.story label { font-size: 15px; color: var(--text-heading); }
.story .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.story .cta-note { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin: 0; }

/* [SIR#120/Issue#17 wave2(1)] お問い合わせの送信結果アラート(フォーム上部)。
   旧は最下部の #formMsg のみで、PCだと送信後に画面外へ出て気づけなかった。左の色帯で状態を示す。
   ok=成功(緑) / ng=エラー(赤) / busy=送信中(グレー)。文言は既存の確定文言を一字不変で使用。 */
.form-alert {
  text-align: left; font-size: 14px; line-height: 1.7; margin: 0 0 18px;
  padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border-hairline);
  background: var(--color-bg-alt);
}
.form-alert-ok   { color: #2e7d32; border-left: 4px solid #2e7d32; }
.form-alert-ng   { color: #dc3545; border-left: 4px solid #dc3545; }
.form-alert-busy { color: var(--text-muted); border-left: 4px solid var(--border-strong); }

/* [SIR#97 パート1-A] 入力欄標準(§3デザイン原則): navy hairline 枠・focus 時 gold。
   全入力欄(種別select/お名前/メール/内容textarea)に .field で統一適用。旧インライン枠(border:1px solid var(--c-line))は
   contact.html 側でコメントアウト退避し本クラスへ移行。 */
.contact-form .field {
  width: 100%; box-sizing: border-box; margin-top: 6px; padding: 12px 13px; font-size: 15px;
  font-family: var(--font-sans); color: var(--text-heading);
  background: #fff; border: 1px solid var(--border-strong); border-radius: 10px;
  transition: border-color var(--dur-fast, .15s) ease, box-shadow var(--dur-fast, .15s) ease;
}
.contact-form .field:focus {
  outline: 0; border-color: var(--gold-600); box-shadow: 0 0 0 3px rgba(184, 144, 47, .16);
}
.contact-form select.field { appearance: none; -webkit-appearance: none; background-image: none; cursor: pointer; }
.contact-form textarea.field { resize: vertical; line-height: 1.7; }
/* [SIR#97 パート1-B] 送信ボタン中央→直下に注記中央(縦積み)。旧 .cta-row(左寄せ+注記右横)から差し替え。 */
.contact-form .cta-center { text-align: center; margin-top: 22px; }
.contact-form .cta-center .cta-note { margin: 12px auto 0; max-width: 34em; text-align: center; }
/* [SIR#97 パート1-2-3] 掲載許諾ブロック(購入報告(merciの声)選択時のみ表示)。 */
.contact-form .consent-block { background: var(--color-bg-alt); border: 1px solid var(--border-hairline); border-radius: 10px; padding: 14px; margin-top: 4px; }
.contact-form .consent-block label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.7; cursor: pointer; }
.contact-form .consent-block input[type="checkbox"] { margin-top: 3px; flex: none; accent-color: var(--gold-600); width: 16px; height: 16px; }

/* 汎用ボタン(旧 .btn.btn-accent / .btn-line 等・本文内CTA) を ds 化 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-sans); font-weight: 700; line-height: 1; text-decoration: none; border: 0; border-radius: var(--radius-pill); cursor: pointer; padding: 12px 22px; font-size: 15px; }
.btn-accent { background: var(--navy-700); color: #fff; }
.btn-accent:hover { filter: brightness(0.96); }
.btn-line { background: var(--color-cta); color: var(--color-cta-ink); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
/* [SIR#86 指示書B Phase3-1] 動的系ページ用の共有ボタン変種(ghost=副次/danger=解約等の破壊操作)。 */
.btn-ghost { background: var(--color-bg-alt); color: var(--text-heading); border: 1px solid var(--border-hairline); }
.btn-ghost:hover { filter: brightness(0.98); }
.btn-danger { background: var(--status-error); color: #fff; }
.btn-danger:hover { filter: brightness(0.96); }
/* [SIR#86 Phase3 微修正②③] 破壊操作の二段構え:
   caution=注意を要する実行可能アクション(画面の解約導線)。色は LP と同一の差し色 --color-spark(=orange-500 #F5921E)。
     グレー=非活性誤認/赤=黄色注意書きと警告過多/navy=申込CTA混同 を回避。
   neutral=安全な逃げ道(モーダル「キャンセル」・薄グレー非活性誤認を回避した濃グレー)。
   danger(赤)は破壊的実行の最終確定(モーダル「解約する」)に限定。 */
.btn-caution { background: var(--color-spark); color: #fff; }
.btn-caution:hover { filter: brightness(0.96); }
.btn-neutral { background: #4A5568; color: #fff; }
.btn-neutral:hover { filter: brightness(0.94); }
/* [SIR#86 Phase3 横断ルール] 無効(disabled)ボタン=グレー非活性表示。cursor:not-allowed・hover無効(色/影/変形なし)。
   :disabled(0,2,0)/[disabled] が各variant(.btn-accent等 0,1,0)の背景・hoverに優先。今後の無効状態全般に適用。 */
.btn:disabled, .btn[disabled] { background: #B0B5BD; color: #fff; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover, .btn[disabled]:hover { filter: none; box-shadow: none; transform: none; }
/* [SIR#86 Phase3 微修正] 全幅アクションボタン(上段の枠に幅を合わせる・テキストは .btn の justify-content:center で中央)。
   横ぐし: 解約導線/register/mypage 等の主アクションボタンで再利用。 */
.btn-block { width: 100%; padding: 15px; font-size: 16px; }

/* [SIR#86 指示書B Phase3 共通デザインルール①④] 操作系ページ(操作/完結/選択画面)のタイトル＝本文ゴシック＋中央寄せ。
   文書系(法務 terms/privacy/legal・about)は Phase2 確定の gothic+左寄せ(.page h1)のまま(.doc は無変更)。
   success/cancel/plans/register/mypage 等 Phase3 の操作系ページに <main class="page page-action"> で付与。 */
.page-action h1 { font-family: var(--font-sans); font-weight: 700; text-align: center; }
/* [SIR#101 FAQ刷新 受入FB③] page-action ページのリード文(.meta)もタイトルに合わせ中央揃え(現用=/faqのみ・contactは非page-action)。
   .page .meta a = リード文内リンクを FAQ 本文リンク(.faq-a a)と同じ gold に統一。
   1行維持=スマホでも折返さない(.result h1 の完了見出し1行ルールと同型: nowrap+clamp縮小。
   /faqリード文26字が320px幅でも収まるようclamp(10px,3.2vw,13px)・406px以上で基準13px)。 */
.page-action .meta { text-align: center; white-space: nowrap; font-size: clamp(10px, 3.2vw, 13px); }
.page .meta a { color: var(--gold-600); }

/* [SIR#86 Phase3 横断ルール(FB2)] 完了画面(.result)の見出しは1行維持(スマホ375px以下でも折返さない・改行不可)。
   clamp可変で375px幅の最長見出し「無料トライアル登録が完了しました」も1行に収める。.page h1 の font-size をこの後で上書き。 */
.result h1 { font-size: clamp(16px, 4.6vw, 30px); white-space: nowrap; }

/* [SIR#86 Phase3 横断ルール(FB2)] ナビゲーション=テキストリンク(gold・下線hover)、アクション=ボタン(.btn*)。
   完了画面等の「← 戻る」導線に。/plans の戻る導線と同一スタイル。 */
.nav-link { color: var(--gold-on-white); font-weight: 700; text-decoration: none; }
.nav-link:hover { text-decoration: underline; }