/**
 * style.css — Lovic D2Cファネル 共通スタイル
 * ブランド: Lovic（論理とデータで恋愛を設計する）
 * 配色は「論理的・プロフェッショナル」: ネイビー基調 + レッドのハイライト。
 * 長文を読む集客/セールスページは白地・黒文字、訴求バンドはネイビー。
 *
 * 各ページは content/*.md（コピー）を md-mini.js が <main> に描画する。
 * 見た目の調整はこのファイルで一元管理する。
 */

:root {
  /* ブランドカラー（Lovic brand system｜Rational Navy × Giver's Burgundy × Champagne）
     旧ビビッド赤(#e94560)は量産D2C感が強いため、気品あるバーガンディへ刷新。詳細=brain/90.../04_ブランド素材/Lovic_ブランド_デザインシステム.md */
  --c-primary:    #1b2a4a; /* Rational Navy（合理・知性・信頼／ヘッダ/フッタ/訴求帯） */
  --c-secondary:  #14203a; /* Deep Navy（グラデの濃端） */
  --c-accent:     #2a3f63; /* Navy Blue（リンク・小見出し） */
  --c-highlight:  #a62a4d; /* Giver's Burgundy（情熱・行動・与える精神／CTA・強調） */
  --c-highlight2: #c23e63; /* Burgundy Light（グラデ・hover） */
  --c-highlight-deep: #7a1d39; /* Burgundy Deep（CTAの立体「土台」＝押下感。同系の濃色で量産感を出さない） */
  --c-gold:       #c7a86a; /* Champagne（上質・特別／プレミアムのアクセント） */
  --c-text:       #2d3436;
  --c-text-light: #636e72;
  --c-bg:         #ffffff;
  --c-bg-alt:     #f7f8fb;
  --c-border:     #e3e7ee;
  --c-success:    #1f9d57; /* ダッシュボードKPIの「良」指標のみ（社内・顧客非接触） */

  /* コールアウト配色：ブランド3色へ統一（旧ジェネリック青/緑＝量産AI感を排除）。
     情報=ネイビー / 注意=バーガンディ / 達成=シャンパン。彩度は左罫と見出しの“点/線”だけに使い、
     地は白のまま＝背景を主張させない（§5 ①抑制された配色・⑤金は点で効かせる）。
     ※旧・淡ティント背景(--c-info-bg/--c-warn-bg/--c-gold-bg)は枠線型化で廃止（2026-07-05・.calloutのコメント参照）。 */
  --c-info:       #2a3f63; /* 情報・気づき＝Navy Blue（左罫・見出し） */
  --c-gold-deep:  #8a6a30; /* 達成・特典の見出し＝Champagne深色（白地でAAコントラスト確保） */

  --font: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', Meiryo, sans-serif;
  --font-en: 'Inter', var(--font);

  --maxw: 760px;
  --radius: 12px;
  --shadow-sm: 0 2px 8px rgba(16, 22, 40, .06);
  --shadow-md: 0 8px 28px rgba(16, 22, 40, .12);
  --shadow-cta: 0 8px 24px rgba(166, 42, 77, .32);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7; /* 縦間隔の最小値＝行間（モバイル基準）。16px本文で2.0(=32px)は本文比で広すぎた→1.7(27px)に締める。
                       PC(>480px)は本文18px/行間2.0へ格上げ＝ファイル末尾の @media (min-width:481px) が上書き（2026-07-10） */
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt"; /* 日本語の字詰め（プロポーショナル） */
  word-break: normal;
  line-break: strict;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.wide { max-width: 1080px; }

/* ============ ヘッダー / フッター ============ */
.site-header {
  background: var(--c-primary);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-md);
}

.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.brand { color: #fff; font-weight: 800; font-size: 19px; letter-spacing: .04em; text-decoration: none; display: inline-flex; align-items: center; }
.brand::before { content: ""; width: 22px; height: 22px; flex: 0 0 auto; margin-right: 8px; background: url("/assets/lovic-mark-reverse.png") no-repeat center / contain; }
.lab-gate-card .brand { justify-content: center; }
.lab-gate-card .brand::before { background-image: url("/assets/lovic-mark.png"); } /* 白カードは濃ネイビー版マーク */
.brand .dot { color: var(--c-highlight); }
.brand-tag { color: rgba(255,255,255,.6); font-size: 11px; letter-spacing: .08em; }

.site-footer {
  background: var(--c-primary);
  color: rgba(255,255,255,.75);
  text-align: center;
  padding: 36px 20px 28px;
  margin-top: 56px;
  font-size: 13px;
}
.site-footer .brand { font-size: 16px; }
.site-footer .links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin: 14px 0; }
.site-footer a { color: rgba(255,255,255,.7); text-decoration: none; }
.site-footer .legal { color: rgba(255,255,255,.45); font-size: 11px; margin-top: 8px; }

/* ============ ヒーロー ============ */
.hero {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%);
  color: #fff; text-align: center;
  padding: 56px 20px 44px;
}
.hero .eyebrow {
  display: inline-block; color: #fff; background: rgba(166,42,77,.92);
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(26px, 6.4vw, 40px); line-height: 1.42; font-weight: 900;
  letter-spacing: -.01em; margin-bottom: 16px;
}
.hero h1 .hl { color: var(--c-highlight2); }
.hero .lead { font-size: clamp(15px, 2.6vw, 18px); color: rgba(255,255,255,.9); max-width: 620px; margin: 0 auto; }

/* ============ CTAボタン ============ */
/* CTAは <a class="cta-button"> で .content 内に置かれる。汎用リンク色(.content a＝ネイビー)が
   バーガンディ地を上書きして「ワインレッド地にネイビー文字＝低コントラスト」になっていた。
   背景はブランドのバーガンディを維持しつつ、文字は常に白でコントラストを死守する。 */
.cta-button, .content a.cta-button {
  display: block; width: 100%; max-width: 560px; margin: 26px auto;
  background: linear-gradient(135deg, var(--c-highlight) 0%, var(--c-highlight2) 100%);
  color: #fff; font-size: clamp(16px, 3.6vw, 19px); font-weight: 800;
  text-align: center; text-decoration: none;
  padding: 18px 22px; border: none; border-radius: 999px; cursor: pointer;
  /* 立体的な「土台」＝同系濃色の実線シャドウで押下できるボタンだと一目で分かるように。
     さらに柔らかい環境シャドウを重ねて浮遊感（=クリック可能の合図）を出す。 */
  box-shadow: 0 5px 0 var(--c-highlight-deep), 0 10px 22px rgba(166,42,77,.30);
  transition: transform .08s ease, box-shadow .12s ease, opacity .15s;
  letter-spacing: .02em;
}
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--c-highlight-deep), 0 16px 30px rgba(166,42,77,.40); }
/* :active で土台に沈み込む＝物理的に「押した」感触 */
.cta-button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--c-highlight-deep), 0 4px 12px rgba(166,42,77,.28); }
/* タイトル＝アイコン＋文言。中央寄せのインライン組みにして、ラベルが2行に畳まれても
   アイコンが1行目の先頭に自然に流れるようにする（flexだと語の途中で折れやすい）。
   ラベルは .cta-word（nowrap）の連なりで、助詞・句読点の境界だけで改行される（md-mini ctaLabel）。 */
.cta-button .cta-main { display: block; text-align: center; line-height: 1.42; text-wrap: balance; }
.cta-ico { width: 20px; height: 20px; display: inline-block; vertical-align: -0.28em; margin-right: 8px; }
.cta-button .cta-label { line-break: strict; }
.cta-word { white-space: nowrap; } /* 各文節をnowrap＝語の途中(受け|取る)で折れない。折り位置は文節境界＋balanceで最適化 */
.cta-button .sub { display: block; font-size: 12px; font-weight: 600; opacity: .9; margin-top: 4px; letter-spacing: .04em; }
.cta-button:disabled { opacity: .6; cursor: default; transform: none; box-shadow: 0 3px 0 var(--c-highlight-deep); }
/* LINE友だち追加CTA（thanksページ）。LINEブランド緑＝「LINE公式の操作」と一目で分かる認知的
   ショートカット（和佐スクイーズページの緑ボタンTTP）。page-render.js が data-cta-target=lineAddFriend
   のボタンへ自動付与する。緑はこの用途専用＝購入/遷移CTA（バーガンディ）とは役割で塗り分ける。 */
.cta-button.cta-line, .content a.cta-button.cta-line {
  background: linear-gradient(135deg, #06c755 0%, #05b34c 100%);
  box-shadow: 0 5px 0 #049a41, 0 10px 22px rgba(6, 199, 85, .30);
}
.cta-button.cta-line:hover { box-shadow: 0 7px 0 #049a41, 0 16px 30px rgba(6, 199, 85, .40); }
.cta-button.cta-line:active { box-shadow: 0 2px 0 #049a41, 0 4px 12px rgba(6, 199, 85, .28); }
/* CTAボタン直上の「オファー装飾ヘッダー」（md-mini :::cta の p[3]）。中央寄せ＋ボタンに近接させて“一体のクラスタ”に。
   和佐UMLの「大幅割引＆返金保証付き／期間限定新規メンバー募集」＝ボタン装飾の等価物。左寄せの一文が浮く違和感を解消。 */
.cta-lead { text-align: center; max-width: 560px; margin: 30px auto 0; line-height: 1.5; }
/* 前置き行の主行＝グラデーション文字。和佐①実測でCTA直上の前置き行「AIライティングブートキャンプに」は
   マゼンタ系の gradient-text だった（解剖書§B・§I）。Lovic版はブランド2色横断（.grad-text と同じ・v3.25）。
   非対応ブラウザは color がフォールバック。 */
.cta-lead-a {
  display: block; font-weight: 800; font-size: clamp(15px, 3.4vw, 18px); letter-spacing: .01em;
  /* 終点の金は #b8860b(3.25:1) では白地でWCAG AA(4.5:1)に届かない＝グラデ末尾の文字が薄くなる。
     #9a6f08 = 4.51:1 でAAをクリアしつつ金らしさを保つ（実測 2026-07-30）。読めない装飾は逆効果。 */
  background: linear-gradient(90deg, var(--c-highlight) 0%, #9a6f08 88%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--c-highlight);
  padding-bottom: .06em;
}
.cta-lead-b { display: block; color: var(--c-text-light); font-weight: 700; font-size: 12px; letter-spacing: .04em; margin-top: 3px; }
.content .cta-lead + .cta-button { margin-top: 10px; } /* 基本 .content a.cta-button(26px) に勝つ特異度でボタンを近接 */
/* 画像CTAバナー（md-mini :::ctaimg）＝和佐note記事の商品バナーTTP。主CTAはバナー1枚＝1スクリーン1主張
   （ボタンUI併置は視覚主張が2つになり記事の世界観にも広告臭＝デザイン基準02フェーズ4/6で棄却）。
   直下にはテキストリンク（:::ctalink）を従として添え、画像がリンクと気づかない読者を受ける。 */
.cta-image { display: block; max-width: 560px; margin: 30px auto 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-md); transition: transform .12s ease, box-shadow .15s ease; }
.cta-image:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(16, 22, 40, .2); }
/* 記事挿絵用 .content img（角丸10px・margin 12px auto 28px・薄影）の継承を打ち消す＝バナー下の“なぞの余白”
   と二重角丸・二重影の再発防止。バナーの角丸・影は外箱 .cta-image が一元管理する。 */
.content .cta-image img { width: 100%; display: block; margin: 0; border-radius: 0; box-shadow: none; }
/* テキストリンクCTA（md-mini :::ctalink）＝和佐noteの「→ 受講する」型。本文と同じ組版に太字リンクで
   混ざる＝記事の声のまま行動を促す（ボタンの広告臭を避ける）。バナー直下では近接させ1ユニットに。 */
.content p.cta-textlink { text-align: center; margin: 14px 0 26px; font-weight: 700; } /* .content p のmargin規則に勝つ特異度 */
.cta-textlink a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
/* インラインCTA＝本文に溶け込む計測付きリンク（和佐PS末尾型）。独立ボタンでなく地の文の一語を差す。 */
.cta-inline { color: var(--c-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cta-inline:hover { text-decoration-thickness: 2px; }

/* 目次（:::toc・和佐式＝長尺記事の第1章前）。地は薄グレー、章=太字ネイビー、節=小さめ字下げ。 */
.content details.toc { background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: 10px; margin: 26px 0; padding: 6px 18px; }
.content details.toc > summary { font-weight: 700; color: var(--c-primary); cursor: pointer; padding: 10px 0; list-style: none; font-size: 15px; }
.content details.toc > summary::-webkit-details-marker { display: none; }
.content details.toc > summary::before { content: "▾"; color: var(--c-text-light); margin-right: 8px; font-size: 12px; }
.content details.toc[open] > summary::before { content: "▴"; }
.content .toc-list { list-style: none; margin: 0 0 10px; padding: 0; }
/* 目次は本文リストの装飾ドット（アクセント色）を継承しない。階層は太さ・字送り・字下げで示す
   ＝全項目に同じ装飾を付けると強弱が消え、アクセント色も直上のCTAと食い合うため。 */
.content .toc-list li { margin: 0; padding-left: 0; }
.content .toc-list li::before { content: none; }
.content .toc-list li a { display: block; color: var(--c-text-light); text-decoration: none; padding: 7px 0; border-top: 1px solid var(--c-border); font-size: 14px; font-weight: 400; line-height: 1.6; }
.content .toc-list li.toc-l2 a { color: var(--c-text); font-weight: 600; }
.content .toc-list li.toc-l3 a { padding-left: 16px; font-size: 13px; }
.content .toc-list li a:hover { color: var(--c-highlight); }

/* ============ Markdown本文 ============ */
/* 縦方向だけ指定する（padding-block）。横は .container の padding-inline:20px に委ねる。
   ここを padding ショートハンド（例: 40px 0 8px）にすると、同一要素 <main class="content container"> 上で
   後勝ちして .container の左右余白を 0 に潰し、本文が画面端へベタ付きする（モバイルで余白消失バグ）。 */
.content { padding-block: 40px 8px; }
.content > *:first-child { margin-top: 0; }
/* 縦の抑揚＝3段スケール（夏目_装飾と強調の基準 §4-10）。タイト0(<br>)／標準26px(p)／
   小ブレス40-44px(h3/箱)／大ブレス56-64px(h2/lead/hr)。見出しの余白は非対称＝
   上を大きく(前の節と切る)・下を小さく(直後の本文と結束させる)。等間隔=退屈を避け、
   標準26px⇄大ブレス60pxのコントラスト(≈2.3倍)で「節目で息を吸う」リズムを作る。 */
.content h1 {
  font-size: clamp(24px, 5.4vw, 34px); font-weight: 900; line-height: 1.4;
  color: var(--c-primary); margin: 10px 0 28px;
}
.content h2 {
  font-size: clamp(20px, 4.4vw, 27px); font-weight: 800; line-height: 1.45;
  color: var(--c-primary); margin: 64px 0 22px; padding-left: 14px;
  border-left: 5px solid var(--c-highlight);
}
/* h3は「本文18pxの1.17倍・リンクと同じ色・装飾なし」で見出しに見えていなかった（オーナー直感→実測で確認 2026-07-27）。
   h2はバーガンディの左バーが識別を担うためサイズ差が縮んでも埋もれない。よってサイズだけを
   1.17倍→1.33倍（24px）へ引き上げる。色（--c-accent＝小見出し用）と余白（§4-10の3段スケール）は据え置き。
   note では h3 が目次(toc-l3)にも出る＝Cold読者がスキャンして読むか決める錨なので、識別性が完読率に効く。 */
/* h3＝節の中の小見出し。サイズだけで階層を作らない＝モバイルでは本文16pxに対し17pxで比1.06にしかならず、
   かといってh2(20〜27px)へ寄せると「同階層の微妙なズレ」になる（デザインナレッジ・広告04＝60/49/45.4を戒める項）。
   そこで差別化は形状で行う（フィード02＝主見出しは矩形帯・第2は円形バッジと形で分ける）。
   h2＝左の縦バー／h3＝上の短い横罫。軸が90度違うので一目で別階層と分かる。 */
.content h3 {
  font-size: clamp(17px, 3.4vw, 21px); font-weight: 800; color: var(--c-accent);
  margin: 40px 0 14px; padding-top: 12px; position: relative;
}
.content h3::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 28px; height: 3px; background: var(--c-highlight);
}
.content h4 { font-size: 16px; font-weight: 800; color: var(--c-primary); margin: 32px 0 12px; }
/* 日本語の折り返し品質（詰めの甘さ＝素人感の予防）。純粋な進行的強化＝未対応ブラウザでは無視されレイアウト不変。
   見出し・オファーヘッダー・箱タイトルは行長を均等化（2行目に一語だけ落ちるオーファンを防ぐ）。
   本文・箇条書きは最終行の孤立語を避ける。CTAボタンは .cta-main 側で balance＋文節nowrap（語の途中折れ防止）。 */
.content h1, .content h2, .content h3, .content h4, .cta-lead-a, .content .callout-title { text-wrap: balance; word-break: auto-phrase; }
/* 本文の折り返し＝budoux が文節境界にゼロ幅スペースを入れ、keep-all でそこだけ折る（page-render.js）。
   これで iOS Safari・Firefox（word-break:auto-phrase 未対応）でも単語途中折れせず文節で折れる。
   budoux 未ロード時も overflow-wrap:anywhere ではみ出しは防ぐ（進行的強化）。 */
.content p, .content li { text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
.content p { margin: 0 0 26px; } /* チャンク内の標準ギャップ。行間(27px)とほぼ同じ＝チャンク内は連続した流れに見せ、区切りは:::spaceで作る */
/* チャンク間の"特大の間"＝和佐noteの空段落スペーサ(実測～108px)の等価物。:::space で挿入。
   隣接pのmargin(34)に積み増して強い「息継ぎ」を作る＝均一を破る"幅の抑揚"の主役。 */
.v-space { height: 28px; }     /* チャンク間＝本文p(26)＋これ=約54px＝within(26)の約2倍。基準を締めた分こちらも縮小 */
.v-space.lg { height: 52px; }
/* PC・タブレットの本文格上げ（>480px・note.com同格）はファイル末尾の @media (min-width:481px) ブロックが正本
   （箱内h3等の基底ルールより後方に置かないと同特異度で負けるため末尾配置）。 */
.content strong { color: var(--c-highlight); font-weight: 700; }
.content em { font-style: normal; background: linear-gradient(transparent 60%, rgba(166,42,77,.20) 60%); }
.content .big { font-size: 1.2em; font-weight: 700; line-height: 1; } /* L3 微拡大＝色なしの2つめの強調チャネル。バーガンディを消費せず density を上げる。line-height:1 で行間ジッター防止 */
/* %%語%% ＝ グラデーション文字（和佐①フロントSLの署名的装置「gradient-text」のLovic版・v3.25/解剖書§I）。
   色はブランド2色（バーガンディ→ゴールド）を横断＝①の「青→紫」「マゼンタ系」と同じ2色横断型。
   フロントSL限定・1ページ数箇所まで。pb-main-grad と同じディセンダ欠け対策を入れる。 */
.content .grad-text {
  font-weight: 800;
  /* 終点の金は #b8860b(3.25:1) では白地でWCAG AA(4.5:1)に届かない＝グラデ末尾の文字が薄くなる。
     #9a6f08 = 4.51:1 でAAをクリアしつつ金らしさを保つ（実測 2026-07-30）。読めない装飾は逆効果。 */
  background: linear-gradient(90deg, var(--c-highlight) 0%, #9a6f08 88%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--c-highlight);
  padding-bottom: .06em;
}
/* :::mark 一文 ＝ 面塗り強調（Lovic版マーカー・淡ゴールド）。和佐④の主装置「黄マーカー」から
   色を移さず機能と運用規律だけを移したもの（v3.25/解剖書§I・D-10/D-12）。
   ④の実装 <p><strong><span bg:#ffff00>一文</span></strong></p> と同型＝独立段落・全文塗り・太字。
   ②UMLの「決め語1行の額装パネル」も同装置が担う（バックSL・D-12裁定=適切に増やす）。 */
.content .mark-line {
  background: linear-gradient(0deg, rgba(199,168,106,.17), rgba(199,168,106,.17));
  border-left: 3px solid var(--c-gold);
  padding: 12px 16px; border-radius: 4px;
  font-weight: 700; line-height: 1.9;
}
/* FAQのQ行（**Q. …** 単独段落を md-mini が自動検出）＝淡グレーのバー見出し。
   和佐①④のFAQ「灰アコーディオン(#d3d3d3/#a9a9a9)のQ行」の開閉なし・上品淡色版（v3.25・D-6）。
   Q行の strong はバーガンディでなく本文色＝バーが色の主張をしない（灰バー自体が構造の合図）。 */
.content .faq-q {
  background: #eef0f3; border-radius: 6px;
  padding: 13px 16px; margin-bottom: 14px;
}
.content .faq-q strong { color: var(--c-text); }
/* - ✓ 項目 ＝ チェックリスト（和佐①の「✓アイコン＋決め語」のLovic版・D-5）。
   装飾ドットを消し、著者の ✓ 自体をマーカーにする（.enum と同じ思想）。✓の色はCSSでは塗れない
   （文字ノードのため）ので、コピー側で ✓ 直後の決め語に **語** を当てて色を点す。 */
.content ul li.check { padding-left: 6px; }
.content ul li.check::before { content: none; }
.content a:not(.cta-button) { color: var(--c-accent); font-weight: 700; }
.content ul, .content ol { margin: 0 0 28px; padding-left: 0; list-style: none; }
.content ul li, .content ol li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.content ul li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--c-highlight);
}
/* 著者が項目先頭に番号（①〜⑳ / 1.）を書いた項目は、装飾ドットと二重になるのでドットを消し番号自体をマーカーにする */
.content ul li.enum { padding-left: 0; }
.content ul li.enum::before { content: none; }
/* 対応表型リスト（§4-9「問題→打ち手」）の従属行。デザイン四大原則で見やすくする:
   近接＝打ち手を問題に密着(margin-top小)させ、ペア間(li margin-bottom)を広げる。
   整列＝打ち手をインデント。対比＝淡色で「問題=主／打ち手=従」を示す。（2026-07-21） */
.content ul li.has-branch, .content ol li.has-branch { margin-bottom: 26px; }
.content .li-branch { display: block; padding-left: 1.5em; margin-top: 2px; color: var(--c-text-light); font-size: .95em; }
.content ol { counter-reset: li; }
.content ol li::before {
  counter-increment: li; content: counter(li);
  position: absolute; left: 0; top: .15em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-accent); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.content blockquote {
  background: var(--c-bg-alt); border-left: 4px solid var(--c-accent);
  padding: 16px 18px; margin: 0 0 28px; border-radius: 0 8px 8px 0; color: var(--c-text-light);
}
.content hr { border: none; border-top: 1px dashed var(--c-border); margin: 56px 0; } /* 大ブレス＝章の切れ目 */
.content img { border-radius: 10px; margin: 12px auto 28px; box-shadow: var(--shadow-sm); }
/* L1 プレーン太字（__語__）＝色なし・サイズ据置の基本強調層。色は本文を継承（バーガンディを消費しない）。
   和佐note公開版「本文の約45%が太字・色文字ゼロ」の主力層に対応（装飾基準§4-1）。 */
.content b { font-weight: 700; }

/* 限定配信の注意帯（:::gate）＝ページ最上部・ヒーローの上。「誰に届いているページか」を
   システム通知の声で示す（ダウンセル等の深い段階の接点で使う限定性演出）。地色はヒーロー画像の
   濃紺と揃え、帯＋ヒーローがひとつのユニットに見えるようにする。 */
.content .gate-band {
  background: var(--c-secondary);
  /* 文字はシャンパン＝「特別・選別」の意味色（白だと直上のサイトヘッダと同じ"汎用の声"になる）。
     帯の地は訴求帯の管轄色ネイビー（デザインシステム§配色）＝バーガンディ帯は煽り系の型につき不採用。
     #d9bc85 は --c-gold の明度上げ（13pxの小さい文字でコントラストを確保）。 */
  color: #d9bc85;
  font-size: 13px; line-height: 1.7; font-weight: 500;
  text-align: center; letter-spacing: .04em;
  padding: 9px 16px; margin: 0 0 10px;
  border: 1px solid rgba(199, 168, 106, .38); border-radius: 10px;
  text-wrap: balance; word-break: auto-phrase; /* 文節改行＝「見た／方にだけ」等の悪い折れを防ぐ */
}

/* セクション導線の矢印（`:::arrow`）。原典②UMLが独立画像300x80で持つ装置のTTP。
   600x160で書き出したPNGを表示幅240pxへ絞る＝375px幅で高さ64px（原典80pxに近い控えめさ）。
   Lovicは塗りの三角ではなく線画（寸法線の語彙）なので、大きくすると空虚に見える。
   `.content img` の角丸・薄影・上下marginは必ず打ち消す＝透過PNGに box-shadow を当てると
   絵ではなく**矩形の影**が出て「白い箱の中に矢印がある」ように見える（ペナントで既に踏んだ罠と同型・下記参照）。 */
.section-arrow { margin: 22px 0; text-align: center; color: var(--c-gold); }
.section-arrow svg { width: 40px; height: 48px; display: inline-block; }
.section-arrow--price { color: var(--c-highlight); }
.section-arrow--trust { color: var(--c-primary); }
/* 価格帯の中は「定価（取り消し線）→ 矢印 → 割引価格」で1つの流れなので前後を詰める。
   離れていると3つの独立した情報に見える（オーナー指摘 2026-07-31）。 */
.content .band .section-arrow { margin: 10px 0 4px; }
.content .band .section-arrow + .lead-line { margin-top: 0; }

/* 記事ヒーロー：タイトルを焼き込んだヘッダー画像（改行・抑揚を固定・和佐式）。
   h1は .visually-hidden で保持＝画面には出さずSEO/読み上げ/広告一致だけ担う。 */
.note-hero-img { margin: 0 0 26px; }
.note-hero-img img {
  display: block; width: 100%; margin: 0;
  border-radius: 12px; box-shadow: var(--shadow-sm);
}
/* バックSLの縦型ヒーロー（表紙cover／CTA直上ペナント）は、いずれも本文（テキスト列）の幅に揃えて全幅表示。
   ＝ base の width:100% のまま（和佐UMLでもペナントはヘッダーとほぼ同幅の大きな旗）。16:9のnote/フロントも全幅。 */
/* CTA直上ペナントは背景透過PNG（旗の外側はアルファ透明・余白トリミング済み）。どの地色にも馴染む。
   長方形の box-shadow は当てず（四角い輪郭が出る）、旗の形に沿う drop-shadow で浮かせる。 */
.note-hero-img img[src*="sales-back-pennant"] {
  box-shadow: none; border-radius: 0;
  filter: drop-shadow(0 6px 16px rgba(16, 22, 40, .20));
  /* 2026-07-30: 旧ペナントは縦長0.66:1で、全幅だと375px幅で569px＝画面の7割を1枚が占めたため
     80%／max-width:560px へ抑えていた。TTP準拠の作り直しで 1600x380（4.21:1・375px幅で高さ89px）に
     なり抑制の理由が消えたので全幅へ戻す。原典②UMLも「ペナントはヘッダーとほぼ同幅の大きな旗」
     ＝coverと同幅で並ぶのが原典忠実（幅が違うと反復のたびに列がズレて見える）。 */
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.content code {
  font-family: var(--font-en); background: #f0f2f7; color: var(--c-accent);
  padding: 2px 7px; border-radius: 5px; font-size: .9em;
}
.content table {
  width: 100%; border-collapse: collapse; margin: 0 0 24px;
  box-shadow: var(--shadow-sm); border-radius: 10px; overflow: hidden; font-size: 15px;
}
.content thead th { background: var(--c-primary); color: #fff; font-weight: 700; padding: 12px 14px; text-align: center; }
.content tbody td { padding: 12px 14px; border-bottom: 1px solid var(--c-border); text-align: center; }
.content tbody td:first-child { text-align: left; font-weight: 600; }
.content tbody tr:last-child td { border-bottom: none; }
.content tbody tr:nth-child(even) { background: var(--c-bg-alt); }

/* ============ ディレクティブ: コールアウト ============ */
/* 枠線型（2026-07-05）: 旧・淡ティントの平面塗りは、大面積フラット×低彩度ゆえに
   スクショ/SNS転載時のJPEGクロマ間引き・モニタ輝度ムラで「色むら」に見えた（ライブは均一）。
   平面塗りを廃し、白地＋太い左罫＋見出し色＋ヘアライン枠で"箱"を表現＝白は圧縮で滲まず
   ムラの原因を根絶。ブランドの抑制トーン（背景は主張させない）にも合致。 */
.callout { background: #fff; border-radius: var(--radius); padding: 18px 20px 18px 22px; margin: 8px 0 32px; border: 1px solid var(--c-border); border-left-width: 4px; box-shadow: var(--shadow-sm); }
.callout > *:last-child { margin-bottom: 0; }
/* 箱の中は本文(26px)より詰めて「まとまり」を作る＝箇条書き(12px)相当のコンパクトな均等リズム。§4-10。
   均等にすることで、太字の小見出しと本文の間だけが浮く/詰まる不揃いを消す。 */
.content .callout p { margin-bottom: 14px; }
.content .callout > *:last-child { margin-bottom: 0; }
/* 箱内の小見出し（例＝罠①/罠②）＝見出し標準のネイビー。箱タイトル(バーガンディ・下線ヘッダー)とは
   色で役割を分け、本文とは色+太字で分ける（typeset：サイズだけに頼らず色で階層を作る）。
   h3既定の特大margin(44px)は箱内用に圧縮し、ヘッダー直下の最初の1つだけ上を詰める。 */
.content .callout h3 { font-size: 17px; font-weight: 800; color: var(--c-accent); margin: 22px 0 8px; }
.content .callout .callout-title + h3 { margin-top: 4px; }
.callout-point { border-left-color: var(--c-info); }
.callout-warn  { border-left-color: var(--c-highlight); }
.callout-good  { border-left-color: var(--c-gold); }
/* タイトル20px＝箱内h3(17px)との対比を1px差(muddy)から1.18倍差へ（§4-11・デザイン評価基準01フェーズ1）。
   色(種別色vsネイビー)＋下線ヘッダー＋サイズの複数次元で親子を割る。
   align-items: flex-start＝タイトルがモバイルで2行に折れたときアイコンを1行目に揃える
   （centerだと2行の縦中央に浮いて「ぶら下がり」に見える）。1行時は .callout-ico の top で光学揃え。 */
.callout-title { font-weight: 800; font-size: 20px; margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--c-border); display: flex; align-items: flex-start; gap: 10px; letter-spacing: .02em; line-height: 1.45; }
.callout-point .callout-title { color: var(--c-info); }
.callout-warn  .callout-title { color: var(--c-highlight); }
.callout-good  .callout-title { color: var(--c-gold-deep); }
/* アイコンは絵文字を廃しモノラインSVG（currentColorで見出し色を継承）＝AI/カジュアル感の排除 */
.callout-ico { width: 19px; height: 19px; flex: 0 0 auto; position: relative; top: 5px; }
/* タイトルテキストのラッパー（md-miniが常に付与）。min-width:0=flex子の折返し許可。
   `|` 指定時は .seg（nowrap）単位でだけ折れる＝行頭助詞・語中折れの根絶（§4-13の手折り）。 */
.callout-title-text { min-width: 0; text-wrap: balance; word-break: auto-phrase; }
.callout-title-text .seg { display: inline-block; white-space: nowrap; }

/* ============ ディレクティブ: カウントダウン ============ */
/* 締切カウントダウンはCTAより主張を弱く＝あくまで従属要素。
   数字はCTA本文(clamp 16-19px/700)より必ず小さく抑え、箱もCTA(560px)より狭く(420px)・低く・影も控えめに。
   日/時間/分/秒の4枠構造は維持する。 */
.countdown-wrap {
  background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
  color: #fff; text-align: center; border-radius: var(--radius);
  padding: 12px 16px; margin: 14px auto 22px; box-shadow: var(--shadow-sm);
  max-width: 420px;
}
.countdown-wrap .cd-label { font-size: 12px; letter-spacing: .06em; color: rgba(255,255,255,.8); margin-bottom: 9px; }
.countdown {
  display: flex; justify-content: center; align-items: stretch; gap: 6px;
  font-family: var(--font-en);
}
.countdown .cd-cell {
  flex: 0 1 58px; min-width: 0; max-width: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px; padding: 6px 3px 5px;
}
.countdown .cd-num {
  font-size: clamp(15px, 2.8vw, 17px); font-weight: 800; line-height: 1;
  letter-spacing: .01em; color: var(--c-gold); font-variant-numeric: tabular-nums;
  /* 数字は濃ネイビー地の上。旧 #c23e63(バーガンディ)は暗色同士でコントラスト不足→
     シャンパンゴールド(#c7a86a)へ。ネイビー×金＝ペナント/表紙と同じ高コントラストの署名配色。 */
}
.countdown .cd-cell-label { font-size: 10px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .66); margin-top: 4px; }

/* ============ ディレクティブ: アンカー価格ボックス ============ */
.price-box {
  background: linear-gradient(135deg, #fff, var(--c-bg-alt));
  border: 3px solid var(--c-highlight); border-radius: var(--radius);
  padding: 24px 20px; margin: 36px 0; text-align: center; box-shadow: var(--shadow-md);
}
.price-box .pb-label { font-size: 14px; color: var(--c-text-light); font-weight: 600; }
.price-box .pb-strike { color: var(--c-text-light); font-size: 20px; }
.price-box .pb-strike del { text-decoration: line-through; } /* 線は価格の数字だけに当てる（矢印・ラベルには当てない） */
.price-box .pb-main { font-size: clamp(34px, 9vw, 52px); font-weight: 900; color: var(--c-highlight); line-height: 1.1; margin: 6px 0; }
.price-box .pb-main .yen { font-size: .5em; }
.price-box .pb-note { font-size: 13px; color: var(--c-text-light); }

/* 和佐フロント式の5段（.price-arrow）＝取消線でなく下矢印で建値から降り、返金保証を保証行へ格上げ。
   バックの4段（取消線一本降り）とは別物。文字サイズの抑揚＝メイン価格が圧倒的に大きく、保証行がそれに次ぐ。 */
.price-box .pb-anchor { color: var(--c-text-light); font-size: clamp(17px, 4vw, 22px); font-weight: 700; line-height: 1.3; margin-top: 2px; }
/* メイン価格＝ブランドのバーガンディ系グラデーション文字。非対応ブラウザは単色（--c-highlight）へフォールバック。 */
.price-box .pb-main-grad {
  background: linear-gradient(135deg, var(--c-highlight) 0%, var(--c-highlight2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--c-highlight);
  /* 背景クリップ文字はグリフのディセンダが背景描画域（padding box）から外れると欠ける。
     line-height を緩め、下端に僅かなパディングを足して「9,800」のカンマ下端の欠けを防ぐ。 */
  line-height: 1.25; padding-bottom: .1em;
}
/* ★グラデ文字はフロントSL（＋再販）限定＝装飾基準§4-15（v3.25）を実装で強制する。
   根拠: 和佐の全ファネル実測で clip:text のグラデ文字は①フロントSLにしか存在せず、②UML・
   ④ミドルには無い（解剖書§I-1/§I-2）。規定を文章で書くだけでは漏れる——実際ミドルSLが
   フロントの `:::price` 5段書式をコピーしてグラデを誤発火させていた（2026-07-30 監査で発見。
   5段形式は2026-07-05に「フロント/再販専用・バックは4段のまま不変」として導入されたもの）。
   フロント以外のページでは、5段書式を使ってもグラデにはならず単色バーガンディへ落ちる。 */
body:not([data-page="salesFront"]):not([data-page="salesResell"]) .pb-main-grad,
body:not([data-page="salesFront"]):not([data-page="salesResell"]) .content .grad-text {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--c-highlight); color: var(--c-highlight);
}
.price-box .pb-guarantee { font-size: clamp(16px, 3.8vw, 21px); font-weight: 800; color: var(--c-primary); line-height: 1.45; margin: 8px 0 2px; }
/* 「全額返金保証」だけ下線で持ち上げる（**太字**部分＝strong を、色は継承・下線はバーガンディで）。 */
.price-box .pb-guarantee strong {
  color: inherit; text-decoration: underline; text-decoration-color: var(--c-highlight);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* ============ バックSL：リッチ背景 ＋ オファー帯（和佐式・価格セクションのアクセント） ============
   狙い（本人依頼 2026-07-06）: 白一枚のフラットさを脱し、ブランド色をうっすら敷いて“上質な紙”の質感を
   出す。さらに和佐バックSLの手口に倣い、価格＝オファーのクライマックスだけを「価格の文字＝アクセント色、
   その"薄色版"を背景」で額装する（実測: 和佐UMLは藍#6050ffの淡色#ccccff・副橙#ff7d4fの淡色#ffe8cdを面に
   使用）。Lovicの価格アクセント色はバーガンディ（価格数字もCTAもバーガンディ）なので、帯は“淡バーガンディ”。
   白い価格カードを浮かせて「ここが山場」を視覚化する。装飾基準 §1-13(終盤は構造で畳む)/§1-15(帯は音量つまみ)
   に沿い、帯は“1枚だけ”に限定＝乱打しない。色戦略: 地はネイビー基調のRestrained（tinted neutral）、帯だけ
   アクセント色の淡サーフェスtint＝colorizeスキルの「4-8%の背景wash」。バーガンディは価格1点に限定＝希少ゆえ
   効く。バックSL限定＝body[data-page="salesBack"]。 */

/* (1) ページ全体の“うっすら”ブランド背景 */
body[data-page="salesBack"] { background-color: #f4f6fb; } /* ネイビー寄りの極薄オフホワイト */
body[data-page="salesBack"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(95% 55% at 50% -8%, rgba(27, 42, 74, .12), transparent 55%),    /* 上＝表紙/ヘッダから続くネイビーの光 */
    radial-gradient(70% 45% at 108% 108%, rgba(199, 168, 106, .07), transparent 60%); /* 下右＝シャンパンの温かみを点で */
}

/* (2) セクション帯：full-bleed（本文列を飛び出して画面幅いっぱいへ。body の overflow-x:hidden で横スク防止） */
.content .band {
  position: relative; left: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw;
  margin-top: 48px; margin-bottom: 48px;
}
.content .band > .band-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }

/* オファー帯（既定）＝価格クライマックス。アクセント色（バーガンディ）の“薄色版”を面に敷く。
   淡地なので文字は暗色のまま（反転不要）。白い価格カード・バーガンディCTA・ネイビーのカウントダウンが
   同系の淡バーガンディ地の上でいずれも十分に立つ。上下に極薄のヘアラインで面の境界を締める。 */
.content .band-offer {
  background: linear-gradient(180deg, #f6e9ee 0%, #fbf4f7 100%); /* Giver's Burgundy 約9%→5% の淡色版（不透明・下地のwashを透かさない） */
  padding-block: 52px;
  box-shadow: inset 0 1px 0 rgba(166, 42, 77, .14), inset 0 -1px 0 rgba(166, 42, 77, .12);
}
.content .band-offer .price-box { box-shadow: 0 16px 40px rgba(166, 42, 77, .18); } /* 白カードを淡地から少し浮かせる */

/* ── 章カード（バックSLの h3・2026-07-31） ──────────────────────────────────
   原典②UMLは章の見出しを「淡ラベンダーの地＋方眼＋短い罫＋大見出し」のカードにしている
   （全数分析 §型4「8枚すべて純タイポグラフィ＝アイコン・イラスト・写真は皆無」）。
   白地に見出しが並ぶだけだと情報の塊が全部同じ見た目になり走り読みができない
   （02_LPの視覚リズムと実装の型「図像・アイコンがゼロ」の失敗と同じ機序）。
   **バックSL限定**＝他ページの h3 は従来の「上の短い横罫」のまま（見出し表現をページごとに
   変えないという規約は、地を敷くかどうかまでは縛らない。階層ごとに装飾量が違うのが原典の型）。 */
body[data-page="salesBack"] .content h3 {
  background:
    linear-gradient(to right, rgba(27, 42, 74, .045) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(to bottom, rgba(27, 42, 74, .045) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(180deg, #f1f1f8 0%, #f8f8fc 100%);
  padding: 30px 22px 26px;
  border-radius: 10px;
  border-left: none;
}
body[data-page="salesBack"] .content h3::before { margin-bottom: 12px; }

/* 淡グレー帯（章の切れ目に静かなリズム＝§1-15の“淡グレー1種まで”。多用しない） */
.content .band-tint { background: linear-gradient(180deg, #eef1f8, #f6f8fc); padding-block: 44px; }

/* 付録ゾーン（`:::band sunk`）＝本編が終わったあとの FAQ・PS を**白より一段沈める**。
   原典②UMLは FAQ本体（y=63725）と PS西祖さんメッセージ（y=65336）にだけ `rgb(249,249,249)` を
   敷き、他のセクション（白 `#fff`）と分けている（2026-07-31 ライブ実測・解剖書§I-8）。
   色の意味は「ここから先は本編ではない」＝読者に読み終わりを知らせる合図。
   **全幅にしない。** 原典もこの2つだけは w=1000＝本文カードと同じ幅に留めている（章区切りやCTAの
   ような全幅の帯とは役割が違い、カードの中の一区画だから）。よって `.band` の full-bleed を打ち消す。 */
.content .band-sunk {
  left: auto; width: auto;   /* `position: static` にしない＝絶対配置の子の包含ブロックを壊すため */
  margin-left: 0; margin-right: 0; margin-block: 40px;
  background: #f4f5f7;
  padding: 30px 26px; border-radius: 10px;
  box-shadow: none;
}
.content .band-sunk > .band-inner { max-width: none; padding-inline: 0; }
/* 沈んだ地の上では、FAQのQ行の淡グレーが地に埋もれる。バーだけ白へ反転して段差を保つ。 */
.content .band-sunk .faq-q { background: var(--c-bg); }

/* CTAクラスタの囲み（`:::band cta`・2026-07-31）。原典②UMLはCTAクラスタ全体を淡青の地で囲み、
   「前置き→ボタン→注記→カウントダウン」を**1つの決断ブロック**として見せている。
   囲まないと3つの独立した要素に見え、押す場所がどこまでの文脈で成立しているのか読めない。
   価格帯（淡バーガンディ）とは色相で役割を分ける＝こちらは青側（信頼・冷静な判断）。
   旗の直後に来るので、上端のヘアラインだけ入れて面の始まりを示す。 */
/* **旗をこの囲みの中に入れる。** 別セクションにすると旗の尖りの左右が白地のまま残り、
   その下に囲みの上余白が乗って「同じ背景色の隙間」ができる（オーナー指摘）。
   中に入れると尖りの左右も淡青になり、旗→前置きが1つの面の中で連続する。
   → padding-top は 0（旗が上端に接する）。下だけ余白を取る。 */
/* **色面は敷かない**（オーナー判断 2026-07-31）。淡青を敷いたところ、同じセクションの中で
   旗（ネイビー）だけ背景色が違って見え、まとめた意味が消えた、という目視判断による。
   この囲みの役割は**旗とCTA群を1つのブロックとして扱い、あいだに白地の隙間を作らないこと**。
   【事実の訂正 2026-07-31・ライブ実測】当初ここに「原典②のCTAクラスタに専用の地はない」と
   書いたが**誤り**。1280pxで描画して色面を全数走査すると、CTAクラスタには
   `rgb(231,236,242)`（淡い青灰）の全幅帯が**7回**、毎回同じ色で入っている（y=699/53335/
   56627/62900/64784/69884 ほか）。背景帯は computed 採取（装飾マップ）に載らないため、
   「載っていない＝無い」と読んだのが誤りの原因（TTP規律①そのもの）。
   → 敷かない判断は目視によるもので有効だが、**その根拠を「原典にも無いから」と書いてはいけない**。 */
.content .band-cta {
  background: none;
  padding-block: 0 40px;
  box-shadow: none;
}
/* 表紙（.note-hero-img）の直後に来るときは、`.band` 既定の margin-top 48px を消して
   表紙と地続きにする（旗はこの囲みの中にいるので、表紙→旗が白地で分断されないようにする）。
   `:has()` は使わない（骨格に環境差の出るセレクタを預けない・2026-07-31の規律）。 */
.content .note-hero-img + .band-cta { margin-top: 0; }
/* 旗の中身（.fv-wrap）は囲みの上端に接する。旗自身の下余白だけ残して前置きへ繋ぐ。 */
/* **-1px は分数DPRの継ぎ目対策**（2026-08-01・本人指摘「モバイルで境界線が見える」の真因）。
   表紙PNGは 1200px を 375px へ縮めるため、DPR 1.25 / 1.75 だと画像の下端が**デバイス画素の
   途中に落ちる**。ブラウザはその行を部分被覆として合成するので、背後のページ地色
   `rgb(244,246,251)` が **18%** 混ざり、全幅に輝度71の明線が出る（周囲は32）。
   実測: DPR 1.00 なし / **1.25 線71** / 1.50 なし / **1.75 線71** / 2.00 なし。
   ＝ブラウザ固有ではなく、**分数DPRのときだけ出る実在の描画**。本人の環境は DPR 1.25。
   旗を1px引き上げてその行を覆う。表紙の下端と旗の上端は同じ #15213c なので見た目の損失はない。
   （器に地色を敷く案は不可＝器も画像と同じ分数の縁を持つので同じ行で同じことが起きる。実測で
   DPR 1.50 に線が移っただけだった。）**この -1px を「余白の調整」と誤解して戻さないこと。**
   **適用は表紙の直後の1つだけ。** CTAクラスタは5箇所あるが、継ぎ目が起きるのは画像の下端に
   接する最初の旗だけで、残り4つは本文の後に来るので分数の縁を持たない。全部に掛けると
   ページ全長が-5px動く（指紋の照合で検出）＝依頼外の変化を作らない。 */
.content .band-cta .fv-wrap { margin-top: 0; }
.content .note-hero-img + .band-cta .fv-wrap { margin-top: -1px; }

/* 返金保証シール（和佐バックLPのTTP・§1-15）＝価格帯に次ぐ“2枚目の色面”。ネイビー全幅パネルに
   金の月桂樹＋GUARANTEE章＋白の見出しで額装する。価格帯=淡バーガンディと役割で色相を分ける
   （保証=信頼のネイビー、金の月桂樹=特別/プレミアム文脈§3-4）。full-bleedは .band と同手法。
   バッジは“ヘッダーだけ”を額装し、返金保証の本文は下の白地フローに続ける（和佐同様）。乱打しない＝
   バックSLでこの1枚のみ。 */
/* 和佐バックLPのTTP＝ネイビーの"帯"が主役。白の大見出しが帯を埋め、月桂樹は前面バッジではなく
   背景に沈めた淡い金のウォーターマークで額装する。金メダリオンに文字を詰め込む方式は「帯が空いて
   意味をなさない/字が埋もれる」ため廃止（本人指摘 2026-07-07）。 */
/* ── バックSLのファーストビュー（`:::fv`・2026-07-30） ─────────────────────────
   原典②UMLのFVを実物で目視した結果（desktop/tile_001・mobile/tile_001）、**焼き込みヘッダー画像
   ではなかった**＝フルブリードの青地セクションの上に、キャッチ・大見出し・スローガンがHTMLテキストで
   組まれ（モバイルで65px）、画像なのはロゴだけ。左右は完全に全幅で地が画面端まで届く。
   → Lovicも同じ構造にする。`.guarantee-seal` と同じフルブリード方式（left:50% + 100vw）。
   焼き込み画像は375px幅で0.209倍に縮むため、主見出しが本文16pxより小さくなる（実測15.5px）という
   階層破綻を構造的に避けられなかった。HTMLなら実機の解像度で常に鮮明で、1語ずつ可逆。 */
/* `.fv-wrap` ＝旗を包むフルブリードの器。デスクトップで旗を絞ったときに左右へ見える地と
   ブランドの透かしを**この器の中に閉じる**（`position:fixed` でページ全体に出すと本文の背後にも
   透かしが残り可読性が落ちる＝オーナー指摘）。原典も透かしは旗のセクションの中だけ。
   旗の先端から次の要素（CTAの前置き）までは原典で375px換算32〜38px。next の margin-top 30px と
   collapse するので 34px を指定して34pxに揃える。 */
.content .fv-wrap {
  position: relative; left: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw;
  margin-top: 0; margin-bottom: 34px;
}
/* padding-bottom は「尖りの深さ＋わずかな余白」だけにする。86px（尖り34＋余白52）では
   スローガンの下端から尖りの先まで原典の4倍空いた（原典は375px換算で約21px）。
   オーナーが2度指摘した「ペナントと前置きの隙間が空きすぎ」の主因はこの**内側**の余白で、
   旗の外側（先端→前置き）は実測34pxで原典47〜52pxより既に狭かった。 */
.content .fv-hero {
  position: relative; padding: 64px 22px 44px;
  /* **上端は表紙の下端と同じ色から始める**（横断ナレッジ§1の結ぶ手段④「同じ色を両方の面に通す」）。
     表紙のグラデは `160deg, #1b2a4a → #14203a` で下端が #14203a なので、旗も #14203a から始めれば
     境界に明度差の線が出ない。中盤で #1b2a4a へ持ち上げ、下端でまた沈めて旗の内部に抑揚を作る
     （判定法＝境界線を隠したとき同じ1枚の絵に見えるか）。 */
  /* 【追補 2026-08-01】上の「同じ色を通す」だけでは境界の線は消えなかった（本人指摘）。
     実測した明るさの縦プロファイル＝表紙は境界へ向かって**下降し続け**（-110px 34.4 → -10px 32.5）、
     旗は境界から**上昇し続ける**（+0px 33.6 → +120px 37.2）。**値の段差ではなく傾きがV字に折れて**おり、
     人の目は段差が無くても変曲点をエッジとして知覚する（マッハバンド）。
     ＝「同じ色を通す」で**値**は繋いだが**傾き**が繋がっていなかった。
     対処＝旗の上端に `to bottom` の層を重ね、表紙の終端色から**下降を引き継いで**から元のグラデを現す。
     【再是正 2026-08-01】70px版では**傾きの大きさ**が合っておらず線が残った（本人指摘）。
     表紙 -0.0202/px に対し旗 -0.0304/px ＝ 1.5倍の速さで暗くなり始めるため、そこが折り目になる。
     値・向きだけでなく**傾きまで揃えないと消えない**。中間停止位置と色を振って実測した結果:
       70px/#121c33 → 旗 -0.0304（差0.0103）／120px/#131e36 → -0.0293（差0.0091）
       **160px/#131e36 → -0.0211（差0.0010）** ← 採用／200px/#141f38 → -0.0111（差0.0090）
     ＝勾配が境界をまたいで連続する。数値は `x=374`（中央）の輝度で測った実測値。 */
  background:
    linear-gradient(to bottom, #15213c 0, #131e36 160px, rgba(18, 28, 51, 0) 520px),
    linear-gradient(155deg, #14203a 0%, #1b2a4a 48%, #16243d 100%);
  /* 上端の金ヘアラインは外した。表紙も旗もネイビーで「同じ色を通す」ことで既に結ばれているのに、
     金の線がそれを切って断絶を作っていた（オーナー指摘・横断ナレッジ§1「面を切ったら必ず結び直す」の
     判定法＝境界線を隠して1枚の絵に見えるか、に照らして線の方が不要）。 */
  text-align: center;
  /* **下端を尖らせて五角形（ペナント＝旗）にする。** 原典②UMLのモバイルは地そのものが
     下が尖った旗で、その先端がCTAを指す（オーナー添付の実物で確認）。矢印記号を別に置くと
     「旗の下に別の飾りがある」形になり旗とCTAのあいだに割り込む＝置かない。
     尖り34pxぶんは padding-bottom に足して、中身が斜辺に食い込まないようにしている。 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 50% 100%, 0 calc(100% - 34px));
}
/* `.content` は padding-block: 40px 8px を持つので、帯が先頭だとヘッダーとのあいだに40pxの白い
   隙間が残る（オーナー指摘「表紙のうえにある謎の隙間気持ち悪い」）。フルブリードの帯はヘッダーに
   直接続けるのが正しいので打ち消す。**子孫セレクタで書くこと**＝page-render.js は
   `main.content > div > 各要素` と無クラスのラッパーを1枚挟むので、直接子（`>`）だと当たらない。 */
/* 旧: `.content .fv-wrap:first-child { margin-top: -40px }`（旗がページ先頭だった頃、`.content` の
   padding-top 40px を打ち消すための指定）。表紙を先頭に入れ、旗を `.band-cta` の中へ移した結果、
   **囲みの中で first-child になった旗に効いて40px上へずれ、表紙の最終行を覆っていた**ため削除。
   先頭の打ち消しは表紙側（`.note-hero-img:first-child`）が担う。 */

/* ── バックSLの表紙（`:::hero /assets/sales-back-cover.png`）・2026-07-31 ────────
   **旗（.fv-wrap）とは別セクション。** ページ最上部に置くヘッダー画像で、旗の上に来る。
   全幅・角丸なし・影なし（`.content img` と `.note-hero-img img` の既定を打ち消す）。
   **`:has()` は使わない。** 環境によって効かず、表紙だけ本文列に収まって四隅に隙間が出た
   （2026-07-31・オーナーのChromeで発生。当方のmsedgeでは効いていたので気づけなかった）。
   ページを `data-page` で限定し、`:first-child` で表紙を指す確実な形にする。 */
body[data-page="salesBack"] .content .note-hero-img:first-child {
  position: relative; left: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw;
  margin-top: -40px; margin-bottom: 0;
}
body[data-page="salesBack"] .content .note-hero-img:first-child img {
  width: 100%; border-radius: 0; box-shadow: none; margin: 0;
}
@media (min-width: 760px) {
  /* デスクトップは旗と同じく本文列幅へ収める（旗だけ絞って表紙が全幅だと列がズレる）。 */
  body[data-page="salesBack"] .content .note-hero-img:first-child {
    left: auto; width: auto; margin-left: auto; margin-right: auto;
  }
  body[data-page="salesBack"] .content .note-hero-img:first-child img {
    max-width: 720px; margin-left: auto; margin-right: auto;
  }
}
/* 設計図＝リバースエンジニアリングの含意。原典②も地に方眼ドットを敷いている。 */
.content .fv-hero .fv-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(to right, rgba(199, 168, 106, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(199, 168, 106, .09) 1px, transparent 1px);
  background-size: 34px 34px;
  /* **方眼の1本目が旗の最上端＝表紙との境界にちょうど乗っていた**（2026-08-01・本人指摘
     「モバイル表示で表紙とペナントの境界に白いラインが見える」）。実測＝境界の1行だけ
     全幅で (30,40,64)、上の表紙 (21,33,60)・下の旗 (20,32,58) に対し暖色側へ +9,+7,+4。
     金の方眼線（rgba(199,168,106,.09)）が `inset:0` の y=0 に来るのが原因で、影でも
     境界線でも隙間でもなかった（表紙PNGの下端は (21,33,60) で一様・両者は密着）。
     デザインナレッジ `横断_画像と文字を重ねる制作の規律` §1「面を切ったら、必ず結び直す」の
     **手段②「境界をグラデーションで抜き、線を作らない」**を採用。上端40pxで方眼を抜き、
     境界に硬い線が立たないようにする（方眼の起点をずらすだけだと線が1本内側へ移るだけで、
     テクスチャが縁で唐突に始まる問題は残る）。
     §1の判定法「境界線を隠したとき、これは同じ1枚の絵に見えるか」＝抜いた後は表紙も旗も
     同じネイビーで、方眼だけが静かに立ち上がる形になる。 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
}
.content .fv-hero .fv-inner { position: relative; z-index: 1; max-width: 660px; margin: 0 auto; }
.content .fv-hero .fv-lead {
  color: rgba(255, 255, 255, .86); font-size: clamp(16px, 4.7vw, 22px);
  font-weight: 600; line-height: 1.7; letter-spacing: .05em; margin: 0 0 16px;
}
/* 主見出し＝FVの主役。原典はモバイルで65px。Lovicは信頼/権威側で原色ド派手にはしないが、
   11.6vw＝375px幅で43.5px＝本文16pxの2.7倍。焼き込み画像時代の実機21.8pxから2倍に上げる
   （原典のヒーローは375px換算で画面の57%を占める。この値で53%＝ほぼ同等になる）。
   `.content h1` の既定マージン・形状装飾は打ち消す（帯の中では帯が額装を担う）。 */
.content .fv-hero .fv-core {
  color: #fff; font-weight: 900; font-size: clamp(34px, 11.6vw, 64px);
  line-height: 1.34; letter-spacing: .01em; margin: 0; padding: 0; border: none;
}
.content .fv-hero .fv-core::before, .content .fv-hero .fv-core::after { content: none; }
.content .fv-hero .fv-core strong { color: var(--c-highlight); font-weight: 900; }
/* 紋章＋ワードマーク＝原典のロゴ位置（大見出しの直下）。盾はインラインSVGなので画像リクエストゼロ。
   **原典はここが旗の高さの38%を占める**（UMLロゴが巨大・390px幅で約150px）。初版は13%しかなく、
   ロゴが大見出しの付属物に見えていた＝オーナー指摘「原典の表紙にあたるものがない」の実体。
   旗の役割は「何に参加するのか」の掲示なので、ブランドは大きく掲げる。 */
.content .fv-hero .fv-brand {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin: 30px 0 0;
}
.content .fv-hero .fv-shield { width: 96px; height: 109px; flex: 0 0 auto; display: block; }
.content .fv-hero .fv-mark {
  color: #fff; font-weight: 900; font-size: clamp(34px, 10.4vw, 58px);
  line-height: 1; letter-spacing: .01em;
}
.content .fv-hero .fv-mark span { color: var(--c-gold); }
.content .fv-hero .fv-sub {
  color: rgba(255, 255, 255, .82); font-size: clamp(14px, 4.1vw, 19px);
  font-weight: 600; line-height: 1.7; letter-spacing: .04em; margin: 15px 0 0;
}
/* ── デスクトップでは旗だけ本文列幅へ絞る（2026-07-30・オーナー指摘） ──────────
   原典②の旗は画像（max-width 1080px）なので、画面が広くなると**旗の左右に地が見える**。
   その地は薄グレーで、UMLの巨大な薄い文字が透かしとして敷かれている（オーナー添付の実物）。
   モバイル＝全幅／デスクトップ＝絞る、の二段構えを再現する。
   **章区切りバナー・価格帯・保証帯は絞らない**＝原典もデスクトップで全幅のまま（desktop/tile_001）。 */
@media (min-width: 760px) {
  /* **ページの地そのもの**を薄グレーにする。原典②も地は `rgb(245,245,245)` でページ全体が同色。
     囲みや旗など個別の要素に敷くと、敷いた要素と敷いていない要素の境界に必ず色の線が出る
     （オーナー指摘 2026-07-31・表紙の左右＝白／旗の左右＝薄グレーで段差になっていた）。 */
  body[data-page="salesBack"] { background: var(--c-bg-alt); }
  /* **本文を白のカードにして地から浮かせる**＝原典の骨格（2026-07-31・1280pxでライブ実測）。
     原典UMLは地が薄グレー `rgb(245,245,245)`、本文は白 `rgb(255,255,255)` を **w=1000（画面の78%）**
     に敷いてカード状に浮かせ、章区切り（青グラデ全幅）とCTAクラスタ（淡青灰全幅）だけが
     カードを飛び出して全幅で走る。Lovicは地だけ薄グレーにして本文を直置きしていたため、
     地の色を変えた意味が画面に出ていなかった（＝「透かしで穴を埋める」しかなくなっていた原因）。
     行長720pxは手折り・行数lintで校正済みなので**変えず**、左右の余白を増やしてカードだけを広げる。 */
  body[data-page="salesBack"] .content {
    /* 行長720pxは手折り・行数lintで校正済みなので変えず、左右の余白を増やしてカードだけを広げる。
       【1000px/140pxへ広げたが撤回 2026-08-01】原典の比率（カード1000px＝画面の78%・片側
       パディング160px）へ合わせたところ、**明らかに不自然に間延びした**（本人指摘）。
       原典のその値はデスクトップで余白が過剰という**原典側の欠陥**であって、真似る対象ではない。
       860px は「行長を変えずカードだけ広げる」という論理から出した値なので、そちらを正とする。 */
    max-width: 860px;
    padding-inline: 70px;      /* 860 - 70*2 = 720px＝行長は据え置き */
    padding-block: 40px 56px;
    background: var(--c-bg);
    box-shadow: var(--shadow-sm);
  }
  /* **価格帯とFAQはカード幅に収める**（2026-08-01・本人指摘「白の背景には地が見えるのに、
     価格帯の背景には地が見えないのはなぜ」への回答＝**私が原典と違う作り方をしていた**）。
     原典UMLを1280pxで実測すると、**全幅（1280px）で走るのは 地／青バー／CTAクラスタ／
     章区切りバナー／導入の極薄グリーン／フッター だけ**で、**価格帯 `rgb(255,241,222)` と
     FAQ `rgb(249,249,249)` は w=1000＝カード幅**に収まっている。Lovicは `.band` が
     `width:100vw` の全幅なので、価格帯の左右で地が消えていた。
     カードのパディング(140px)ぶんだけ外へ出して面はカード幅いっぱいに広げ、
     中の行長は 720px のまま保つ。モバイルはカード自体が無いので全幅のまま（この@media外）。 */
  body[data-page="salesBack"] .content .band-offer {
    left: auto; width: auto;                   /* `position` は触らない（下の注意書きを参照） */
    margin-left: -70px; margin-right: -70px;   /* カードのパディングぶんだけ外へ出す */
  }
  body[data-page="salesBack"] .content .band-offer > .band-inner {
    max-width: none; padding-inline: 70px;
  }
  /* ── カードの上に載る面は、カードの中に収める（2026-08-01・本人採択の「B案」）───────
     章区切りバナーと保証帯はそれまで全幅（100vw）で走っていた。するとカードの左右のエッジが
     帯のたびに途切れ、ページが何枚もの紙に見える。カード幅へ収めると**地の縦のラインが
     上から下まで一本で通り**、ページ全体が1枚の紙として読める（本人「Bが観ていて気持ちいい」）。
     **原典は全幅だが、それは原典の帯が「セクション全体の背景」として実装されているから**で、
     Lovicのように「カードの上に面を載せる」構造とは前提が違う＝原典の値をそのまま採らない。
     （原典の値には原典の実装都合から来た欠陥も混じる。同日、カード幅を原典の78%へ合わせて
     間延びさせた失敗の教訓＝値を採るときは「なぜその値か」が説明できる場合に限る。）
     **戻すときはこのブロックを消すだけ**（全幅の指定は元の .chapter-band / .guarantee-seal 側に残る）。
     デスクトップ限定＝モバイルはカード自体が無いので全幅のままでよい。 */
  /* **`position: static` にしないこと（2026-08-01・実害あり）。** 保証帯は `position: relative` で、
     その中の月桂樹ウォーターマーク `.gtee-wreath` が `position: absolute`。static にすると包含ブロックが
     消え、月桂樹が上位の要素を基準に飛んで**表紙の上に出た**（本人指摘「大改悪」）。
     フルブリードを解くのに必要なのは `left` と `width` の打ち消しだけで、`position` は触らない。 */
  body[data-page="salesBack"] .content .chapter-band,
  body[data-page="salesBack"] .content .guarantee-seal {
    left: auto; width: auto;
    margin-left: -70px; margin-right: -70px;
  }
  /* 【撤回 2026-07-31】旗の左右に敷いていたブランドの巨大な透かし（`.fv-wrap::before`）は削除した。
     もともと「原典の旗は画像なのでデスクトップでは4/5ほどに縮み、その左右に空く地の穴埋めとして
     透かしがある」という想定で入れたが、Lovicの旗は現在デスクトップでも横に太く、空く地が狭い。
     そこへ透かしを置いてもノイズにしかならない（本人判断 2026-07-31）。
     地の変化は透かしではなく**背景色そのもの**で作る（原典の規則は実測して§I-8へ記録）。 */
  body[data-page="salesBack"] .content .fv-hero {
    position: relative; z-index: 1;
    max-width: 720px; margin-left: auto; margin-right: auto;
    /* **尖りの深さは幅に比例させる。** 深さを固定すると幅が広がるほど角度が鈍り、
       375px幅で10.3°だったものが720px幅では5.4°＝矢印に見えなくなる（オーナー指摘）。
       原典は旗が画像なので幅が変わっても角度が保たれる。同じ角度にするには
       360px（半幅）× tan(10.3°) = 65px。padding-bottom も尖りぶん足し直す。 */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 65px), 50% 100%, 0 calc(100% - 65px));
    padding-bottom: 75px;
  }
  /* 簡易形（FVの旗）も同じ理屈で尖りを幅に比例させる。
     モバイル375px幅で26px＝7.9° → デスクトップ720px幅では 360×tan(7.9°) = 50px。 */
  body[data-page="salesBack"] .content .fv-hero--mark {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 50% 100%, 0 calc(100% - 50px));
    padding-bottom: 77px;
  }
}

/* ── 章区切りバナー（`:::chapter`・2026-07-30） ─────────────────────────────
   原典②UMLの実物（`mobile/tile_047.png` 目視）＝フルブリードの青地に**黄色い大きな下向き矢印
   → 白の大見出し**を内包し、**下端は矩形**（FVの旗＝五角形とは違う形で、役割も違う。
   旗＝「何に参加するのか」の掲示／章区切り＝「次に何を話すか」の宣言）。約400px高で6箇所以上。
   ナレッジ01§1 型1「セクションごとの背景反転」の完全形で、解剖書F-1-1が
   「和佐が最も強く実装している型」と記録している。矢印は帯の中に置く（帯の外に出すと二重になる）。 */
.content .chapter-band {
  position: relative; left: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw;
  margin-top: 56px; margin-bottom: 46px; padding: 42px 22px 46px;
  background: linear-gradient(160deg, #1b2a4a 0%, #14203a 100%);
  text-align: center;
}
.content .chapter-band .ch-arrow {
  display: block; width: 46px; height: 54px; margin: 0 auto 20px; color: var(--c-gold);
}
/* **バックSLは章を「線」ではなく「面」で区切る。** 原典②UMLは型1（セクションごとの背景反転）を
   最も強く実装していて、`---` に相当する区切り線を1本も持たない（解剖書F-1-1）。
   点線のhrは「線で区切る」古い型で、面の区切り（章区切りバナー・価格帯・保証帯）と二重になる。
   hr は隠し、章の切れ目は面と h2 の余白（56〜64px）が担う。
   md は書き換えないので、この指定を外せば hr が戻る（可逆）。 */
body[data-page="salesBack"] .content hr { display: none; }
/* 英字ラベル＝ナレッジ01§1 型2（極小・太字・字間広め・アクセント色）。原典も「GUARANTEE」等を置く。 */
.content .chapter-band .ch-label {
  color: var(--c-gold); font-size: 12px; font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase; margin-bottom: 16px;
}
.content .chapter-band .ch-head {
  color: #fff; font-weight: 900; margin: 0; padding: 0; border: none;
  font-size: clamp(26px, 8vw, 44px); line-height: 1.42; letter-spacing: .01em;
}
.content .chapter-band .ch-head::before, .content .chapter-band .ch-head::after { content: none; }
.content .chapter-band .ch-head span { display: block; }
.content .chapter-band .ch-head strong { color: var(--c-gold); font-weight: 900; }
/* 章区切りバナーの直後に別の面（旗・価格帯・保証帯）が来るときは、白地を挟まず直接隣接させる。
   `:has()` は使わず、後続側の margin-top を負にして前の帯の margin-bottom 46px を相殺する
   （骨格に環境差の出るセレクタを預けない・2026-07-31の規律）。 */
.content .chapter-band + .fv-wrap,
.content .chapter-band + .band,
.content .chapter-band + .guarantee-seal { margin-top: -46px; }

/* 反復（＝決断点の踏み切り板）は大見出しを持たない簡易形＝`:::fv ||スローガン`。
   原典②は表紙の反復を別画像（ヒーローバナー2）で持ち、制作正本§1-2がこれを「長文の決断点で、
   旗をもう一度視覚で見せてから押させる踏み切り板」と記録している。表紙と文言は重複させない。
   縦は表紙の半分に詰める（4箇所に出るので、表紙と同じ厚みだと本文の流れを切りすぎる）。 */
/* 反復も同じ旗の形にする（尖りは表紙より浅い26px＝帯自体が薄いので比率を合わせる）。 */
/* 表紙の直後に来る旗は、表紙と地続きに見せる（間に白地を挟まない）。
   `--mark` の margin-top は本文中で使うときの前余白なので、表紙の下では打ち消す。 */
.content .note-hero-img + .fv-wrap .fv-hero--mark { margin-top: 0; }
.content .fv-hero--mark {
  padding: 30px 22px 53px; margin-top: 42px; margin-bottom: 34px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 50% 100%, 0 calc(100% - 26px));
}
.content .fv-hero--mark .fv-brand { margin-top: 0; }
.content .fv-hero--mark .fv-shield { width: 38px; height: 43px; }
.content .fv-hero--mark .fv-mark { font-size: clamp(24px, 6.6vw, 38px); }
.content .fv-hero--mark .fv-sub { font-size: clamp(12px, 3.3vw, 16px); margin-top: 12px; }

.content .guarantee-seal {
  position: relative; left: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw;
  margin-top: 48px; margin-bottom: 40px;
  padding: 52px 20px 56px;
  overflow: hidden; /* ウォーターマークの月桂樹が帯からはみ出ないように */
  /* ネイビー地＋上中央からのシャンパングロー */
  background:
    radial-gradient(120% 82% at 50% 0%, rgba(199, 168, 106, .12), transparent 60%),
    linear-gradient(155deg, #1b2a4a 0%, #14203a 100%);
  border-top: 1px solid rgba(199, 168, 106, .28);
  border-bottom: 1px solid rgba(199, 168, 106, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 22px 48px rgba(15, 24, 46, .26);
  text-align: center;
}
/* 価格帯（バーガンディ）の直後に保証帯（ネイビー）が来るときは、あいだの余白を消して2つの全幅
   カラー帯を直接隣接させる（"区切り線だけの白い隙間"を排除）。継ぎ目はネイビー帯上端の金ヘアライン。 */
.content .band:has(+ .guarantee-seal) { margin-bottom: 0; }
.content .band + .guarantee-seal { margin-top: 0; }
/* 背景の淡い月桂樹ウォーターマーク＝開いた金の月桂樹画像（葉がくっきり豪華・中央は空き）を背面に敷き
   中央の白文字を額装する。主役は白文字なので opacity で沈める。 */
.content .guarantee-seal .gtee-wreath {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: min(580px, 132%); height: auto; z-index: 0; pointer-events: none;
  opacity: .3;
}
.content .guarantee-seal .gtee-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.content .guarantee-seal .gtee-arrow {
  display: block; width: 26px; height: 26px; margin: 0 auto 12px; color: var(--c-gold);
}
.content .guarantee-seal .gtee-eyebrow {
  color: var(--c-gold); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .34em; margin-bottom: 18px;
}
/* 大見出し＝帯の主役。白・大きく・帯を埋める。核(gl-core)を最大に。補足(gl-sub)は控えめ白。 */
.content .guarantee-seal .gtee-headline { color: #fff; font-weight: 900; letter-spacing: .01em; }
.content .guarantee-seal .gtee-headline .gl-lead {
  display: block; font-size: clamp(20px, 5vw, 29px); line-height: 1.5;
}
.content .guarantee-seal .gtee-headline .gl-core {
  display: block; font-size: clamp(32px, 9vw, 54px); line-height: 1.2; margin: 2px 0 4px;
}
.content .guarantee-seal .gtee-headline .gl-sub {
  display: block; font-size: clamp(14px, 3.4vw, 17px); font-weight: 600;
  color: rgba(255, 255, 255, .82); line-height: 1.6; margin-top: 14px; letter-spacing: .02em;
  max-width: 22em; margin-inline: auto; overflow-wrap: anywhere; /* 狭幅で折り返す（クリップ防止） */
}

/* ============ ディレクティブ: 文字サイズの抑揚（lead＝決め台詞 / fine＝小さな注記） ============
   直接反応LPの定石「タイポの抑揚」をブランド流に抑制して導入。和佐LPの最大級（本文の約4倍）までは
   振らず、本文16pxに対し lead は約1.8倍まで。要所だけに置き、余白で“間”を作って効かせる。 */
/* .content .lead-line で指定＝.content p(0,1,1) に margin を上書きされないため詳細度を上げる
   （.lead-line 単体(0,1,0)だと .content p に負けて決め台詞の余白60pxが効かない既知バグの根治）。 */
.content .lead-line {
  font-size: clamp(21px, 4.6vw, 29px); font-weight: 800; line-height: 1.5;
  color: var(--c-primary); text-align: center; letter-spacing: .01em;
  max-width: 620px; margin: 60px auto; text-wrap: balance; /* 大ブレス＝決め台詞を広い余白に孤立させて打点を上げる */
}
.lead-line em { font-style: normal; background: linear-gradient(transparent 58%, rgba(166,42,77,.22) 58%); }
.lead-line strong { color: var(--c-highlight); }
/* :::beat＝拍。本文と同じ大きさの太字を中央に置いて平文の流れを一度だけ断つ「軽い」装置。
   lead（21〜29px・余白60px・大ブレス）と違いサイズは上げず、余白は小ブレス（§タイポ）に留める。
   根拠=TTP元の和佐noteの中央寄せ27件は全件が「サイズ指定なし＋太字」＝この軽さが原典の実体。
   色は本文色のまま＝アクセント色は5%原則でCTA等に温存する（中央＋太字だけで十分に立つ）。 */
.content .beat-line {
  text-align: center; font-weight: 700; color: var(--c-text);
  margin: 40px auto; max-width: 620px; line-height: 1.85; text-wrap: balance;
}
.beat-line em { font-style: normal; background: linear-gradient(transparent 58%, rgba(166,42,77,.22) 58%); }
/* 価格クライマックス（淡バーガンディ帯の中の :::lead）＝価格数字はアクセント色（バーガンディ）で特大に。
   和佐UMLの「年会費80万円」が巨大＋アクセント色（背景の薄色版と同系）なのと同じ＝地色と価格の色を一致させる。 */
.content .band-offer .lead-line strong { font-size: 1.7em; line-height: 1; letter-spacing: 0; }
.content .fine-print { font-size: 13px; line-height: 1.7; color: var(--c-text-light); margin: 0 0 22px; } /* .content p に負けない詳細度 */

/* ============ 登録フォーム ============ */
.optin-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 26px 22px; margin: 28px 0;
}
.optin-card h3 { color: var(--c-primary); margin-bottom: 4px; border: none; padding: 0; }
.optin-card .sub { color: var(--c-text-light); font-size: 14px; margin-bottom: 18px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--c-text-light); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 14px 16px; font-size: 16px; color: var(--c-text);
  background: #fff; border: 1px solid var(--c-border); border-radius: 10px; outline: none;
  transition: border-color .15s;
}
.field input:focus { border-color: var(--c-highlight); }
.form-error { color: var(--c-highlight); font-size: 14px; min-height: 1.2em; margin-top: 10px; }
.form-note { color: var(--c-text-light); font-size: 12px; text-align: center; margin-top: 14px; }

/* ============ VSL動画フレーム ============ */
.vsl-frame {
  position: relative; width: 100%; aspect-ratio: 16/9; background: #000;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); margin: 8px 0 24px;
}
.vsl-frame iframe, .vsl-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vsl-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255,255,255,.6); font-size: 14px; gap: 8px; flex-direction: column; }

/* ============ 期限切れ表示 ============ */
.expired-box { text-align: center; padding: 48px 20px; }
.expired-box h2 { border: none; padding: 0; justify-content: center; color: var(--c-primary); }

/* ============ ユーティリティ ============ */
[hidden] { display: none !important; }
.text-center { text-align: center; }
.band { background: var(--c-bg-alt); }
.band-dark { background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)); color: #fff; }
.section { padding: 40px 0; }
.muted { color: var(--c-text-light); }

/* タイポ最適化（見出しの字間） */
.hero h1, .lp-fv-copy h1, .content h1, .content h2 { letter-spacing: .02em; }

/* ============ 登録LP：スクイーズ（和佐式・白地・1画面完結・フォーム最優先） ============ */
/* スクイーズの仕事は「メール取得」の1点。装飾を排し、スマホ1画面目にフォームを収める。
   旧 .lp-fv（ネイビーのグラデHero/疑似ターミナル/権威帯）は撤去。説得は下の .content へ。 */
.squeeze { background: var(--c-bg); padding: clamp(26px, 6vw, 48px) 20px 36px; }
.squeeze-inner { max-width: 480px; margin: 0 auto; text-align: center; }
.squeeze-h1 {
  font-size: clamp(23px, 6.2vw, 32px); line-height: 1.5; font-weight: 900;
  color: var(--c-primary); margin-bottom: 14px;
}
.squeeze-h1 .hl { color: var(--c-highlight); }
.squeeze-sub { font-size: clamp(14px, 3.6vw, 16px); color: var(--c-text-light); line-height: 1.8; margin-bottom: 22px; }
.squeeze .optin-card { margin: 0 auto; text-align: left; }
.squeeze .cta-button { margin: 18px auto 4px; }
.deliver-note { font-size: 12px; line-height: 1.75; color: var(--c-text-light); margin-top: 12px; }
.deliver-note strong { color: var(--c-highlight); font-weight: 700; }
.squeeze-proof { font-size: 13px; color: var(--c-text-light); line-height: 1.7; margin-top: 18px; }
.squeeze-proof strong { color: var(--c-highlight); font-weight: 800; }

/* ============ 登録LP：FV完結型 2カラム（旧スクイーズ・現在は未使用／note等の参考に保持） ============ */
.lp-fv {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%);
  color: #fff; padding: 52px 20px 44px;
}
.lp-fv-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center;
}
.lp-fv-copy .eyebrow {
  display: inline-block; background: rgba(166,42,77,.92); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 16px;
}
.lp-fv-copy h1 {
  font-size: clamp(27px, 4.2vw, 41px); line-height: 1.4; font-weight: 900; margin-bottom: 14px;
}
.lp-fv-copy h1 .hl { color: var(--c-highlight2); }
.lp-fv-copy .lead { font-size: clamp(15px, 2vw, 17px); color: rgba(255,255,255,.88); margin-bottom: 18px; }
.fv-bullets { list-style: none; margin: 0; padding: 0; }
.fv-bullets li { position: relative; padding-left: 28px; margin-bottom: 10px; color: rgba(255,255,255,.92); }
.fv-bullets li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--c-highlight2); font-weight: 900; }
.fv-readout {
  margin-top: 22px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 12px 14px; font-family: var(--font-en); font-size: 13px; color: #9fb3c8;
  overflow-x: auto;
}
.fv-readout .r-line { white-space: nowrap; }
.fv-readout .r-ok { color: var(--c-gold); font-weight: 700; }
.lp-fv-form .optin-card { margin: 0; }

@media (max-width: 860px) {
  .lp-fv { padding: 40px 20px 32px; }
  .lp-fv-inner { grid-template-columns: 1fr; gap: 26px; }
  .lp-fv-copy { order: 1; }
  .lp-fv-form { order: 2; }
}

/* note記事の焼き込みヘッダーはデスクトップもモバイルも「全幅・クロップなし」で表示（.note-hero-img img の
   width:100% のまま）。以前はモバイルで aspect-ratio:5/3＋object-fit:cover(左寄せ)で右端の装飾コラムを
   切り落として本文を約1.15倍に見せていたが、ヘッダー画像に「枠線（四辺）＋RECORD縦ラベル」を焼き込んだ後は
   その横クロップが右の枠線とRECORDを断ち切り「右側が見切れる」不具合になった（四辺の枠と横クロップは原理的に
   両立しない）。→ クロップを撤去し全幅表示に一本化（2026-07-09本人指摘）。モバイルで文字をさらに大きくしたい
   場合はCSSクロップでなく源HTMLの余白を詰めて再描画で対応する（正本=_ヘッダー画像制作/note-header_源HTML.html）。 */

/* CTA：鼓動アニメーション（注意喚起） */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 5px 0 var(--c-highlight-deep), 0 10px 22px rgba(166,42,77,.30); }
  50% { box-shadow: 0 5px 0 var(--c-highlight-deep), 0 14px 34px rgba(166,42,77,.56); }
}
@media (prefers-reduced-motion: no-preference) {
  .cta-button.pulse { animation: ctaPulse 2.2s ease-in-out infinite; }
}

/* 権威バッジ帯（客観指標） */
.authority-band { background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border); }
.authority-inner {
  max-width: 1080px; margin: 0 auto; padding: 18px 20px;
  display: flex; flex-wrap: wrap; gap: 14px 36px; justify-content: center;
}
.auth-item { text-align: center; }
.auth-item .n { font-family: var(--font-en); font-weight: 900; font-size: 22px; color: var(--c-primary); line-height: 1.2; }
.auth-item .l { font-size: 12px; color: var(--c-text-light); }

/* ============ 会員ライブラリ（Lovic LAB） ============ */
.lib-cat { margin: 0 0 28px; }
.lib-cat h2 { font-size: 17px; color: var(--c-primary); margin: 0 0 12px; padding-left: 12px; border-left: 4px solid var(--c-highlight); }
.lib-cat ul { list-style: none; margin: 0; padding: 0; }
.lib-article { border-bottom: 1px solid var(--c-border); }
.lib-article a, .lib-article > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 6px; text-decoration: none; color: var(--c-text); font-weight: 600; }
.lib-article a::after { content: "→"; color: var(--c-highlight); font-weight: 800; }
.lib-article a:hover { color: var(--c-highlight); }
.lib-article.is-soon { color: var(--c-text-light); }
.lib-article.is-soon span { color: var(--c-text-light); font-weight: 500; }
.lib-article.is-soon em { font-style: normal; font-size: 11px; color: #fff; background: var(--c-text-light); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.lab-back { margin: 0 0 8px; }
.lab-back a { color: var(--c-text-light); font-size: 14px; text-decoration: none; font-weight: 700; }
.lab-back a:hover { color: var(--c-highlight); }

/* 会員ゲート（ソフト） */
.lab-gate { position: fixed; inset: 0; z-index: 9999; background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)); display: flex; align-items: center; justify-content: center; padding: 20px; }
.lab-gate-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 30px 26px; max-width: 380px; width: 100%; text-align: center; }
.lab-gate-card .brand { color: var(--c-primary); font-size: 22px; font-weight: 800; }
.lab-gate-card h2 { color: var(--c-primary); font-size: 20px; margin: 10px 0 6px; }
.lab-gate-card input { width: 100%; padding: 13px 15px; font-size: 16px; border: 1px solid var(--c-border); border-radius: 10px; margin: 14px 0 12px; outline: none; }
.lab-gate-card input:focus { border-color: var(--c-highlight); }
.lab-gate-card .cta-button { margin: 0; }

/* ============ PC・タブレット（>480px）の本文格上げ＝note.com本文と同格に ============ */
/* 2026-07-10本人指摘。実測: 和佐note本文は PC=18px/行間36px・モバイル(≤480px)=16px/行間32px →
   Lovicの16px固定は「PCでだけ」2px小さく見えていた（モバイルの最低サイズは既に一致）。
   note.comと同じ480px分岐を採用し、モバイルは16px/1.7のまま一切変えない
   （375pxで校正した手折り・行数lint・縦リズムを保持）。縦リズムは§4-10の比率を保って拡大＝
   行間36px≒段落margin36px・チャンク間≈2倍(margin36+v-space36=72px)・lg≈100px。
   固定px要素は本文18pxとの階層逆転を防ぐため同時に格上げ（h4 18・箱内h3 19/箱タイトル20・表16）。
   clamp系（h1〜h3・lead 29px・CTA 19px）は既に和佐PCと同格のため不変。
   ※このブロックは基底ルール（.callout h3等）より後方＝ファイル末尾に置くこと（同特異度のため順序で決まる）。 */
@media (min-width: 481px) {
  .content p, .content li { font-size: 18px; line-height: 2; }
  .content p { margin-bottom: 36px; }
  .v-space { height: 36px; }
  .v-space.lg { height: 64px; }
  .content h4 { font-size: 18px; }
  .content .callout p { margin-bottom: 16px; }
  .content .callout h3 { font-size: 19px; }
  .callout-title { font-size: 20px; }
  .content table { font-size: 16px; }
}

/* ============ セールスレターの本文スケール＝原典SLの実測に合わせる（2026-07-31） ============ */
/* 本人指摘「バックエンドSLの本文のフォントサイズが原典と違ってだいぶ一定すぎる」の実測結果。
   デスクトップ1280pxで原典6本を採取データから計測したところ:
     note(39億)      18px / 行間36px(2.00) / 中間帯 2.3%
     フロント(AIライティング) 20px / 行間32px(1.60) / 中間帯17.5%
     フロント(商品開発)      18px / 行間28.16px(1.60) / 中間帯 5.6%
     ミドル(リーダー講座)     18px / 行間28.8px(1.60) / 中間帯 9.6%
     バック級(UML)          20px / 行間32px(1.60) / 中間帯17.4%
   → **行間1.60はSL5本すべてで例外なし。2.00は note だけ**。上の @media は和佐note実測
   （18px/36px）に基づく正しい値だが、それを**階層を跨いでSLにも流用していた**のが逸脱（§I-1）。
   Lovic note は 18px/2.00・中間帯1.8% で原典noteと一致済み＝**note は対象外**。
   本文サイズはTTP元の対応で決める（front/resell→AIライティングBC=20px、mid→リーダー講座=18px、
   back→UML=20px）。縦のリズムも原典UML実測＝本文ブロック間の空きは 24px(311回) と 88px(35回) の
   二山、さらに 112px(7回)。Lovicは段落間36px・チャンク間72px＝基準が広く山が低い（＝のっぺり）。
   中間帯（本文の1.05〜1.5倍が占める文字数割合）は原典バック級17.4%に対しLovic4.0%。
   **原典の中間帯の実体は「文中の一語の拡大」ではなく、リスト項目・FAQのQ行・小見出しが
   ブロック単位で一段大きい構造**（実測: 22px=FAQのQ / 24px=リスト項目と決め台詞 / 25px=実績リスト
   / 26px=命名と短い断定 / 30px=章ラベル「ブースター.01」）。よって li 1.2倍・FAQ 1.1倍で作る。
   見出しは本文20pxに対し原典と同じ比へ（h3=1.2倍で中間帯、h2=1.5倍で原典の章ラベル30pxと一致）。
   h2:h3 は 30:24=1.25 で、2026-07-27 に却下された 27:24=1.13（同階層の微妙なズレ）には当たらない。 */
body[data-page^="sales"] { --sl-body: 20px; }
body[data-page="salesMid"] { --sl-body: 18px; }

@media (min-width: 481px) {
  body[data-page^="sales"] .content p { font-size: var(--sl-body); line-height: 1.6; margin-bottom: 24px; }
  body[data-page^="sales"] .content li { font-size: var(--sl-body); line-height: 1.6; }
  /* FAQのQ行だけは「コンポーネント既定」として一段大きい＝原典のアコーディオン見出しが
     fn-font-size-22（本文20pxに対し1.1倍）というクラス指定だったため（dom.html実測）。 */
  body[data-page^="sales"] .content .faq-q { font-size: calc(var(--sl-body) * 1.1); }
  body[data-page^="sales"] .content h3 { font-size: calc(var(--sl-body) * 1.2); }
  body[data-page^="sales"] .content h2 { font-size: calc(var(--sl-body) * 1.5); }
  body[data-page^="sales"] .v-space { height: 64px; }      /* 24+64 = 88px（原典の第2の山） */
  body[data-page^="sales"] .v-space.lg { height: 88px; }   /* 24+88 = 112px（原典の第3の山） */
  /* 上の p 一括指定は詳細度が (0,2,2) へ上がり、既存の部品ルールを飲み込む。元の値へ明示的に戻す。 */
  body[data-page^="sales"] .content .fine-print { font-size: 13px; line-height: 1.7; margin: 0 0 22px; }
  body[data-page^="sales"] .content .beat-line { line-height: 1.85; margin: 40px auto; }
  body[data-page^="sales"] .content .mark-line { line-height: 1.9; }
  body[data-page^="sales"] .content .callout p { margin-bottom: 16px; }
  body[data-page^="sales"] .content .callout h3 { font-size: 19px; }
  /* 本文が20pxになるぶん、固定pxの箱タイトルも階層逆転しない位置へ（上の @media と同じ理由）。 */
  body[data-page^="sales"] .callout-title { font-size: calc(var(--sl-body) * 1.2); }
}

/* ++語++（.big）は文中の一語を持ち上げる想定で line-height:1（行間ジッター防止）。
   原典は**段落を丸ごと1.2〜1.3em**にする使い方が主力（UML「なので、もう今回のオファーの趣旨は
   理解できていると思うので、単刀直入に話を進めますね。」＝1.3em＋太字＋下線・色は本文色）なので、
   段落と一致するときだけ行間を段落から継がせる（1のままだと2行目以降が潰れる）。 */
.content p > .big:only-child { line-height: inherit; }