@charset "utf-8";
/* ==========================================================================
   市ノ澤翔 公式LINE登録LP v1 — style.css
   design/style-guide.md の凍結トークンのみを使用する。
   ここに無い色・サイズ・書体を新規に追加しないこと（style-guide.md §8）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Webフォント（自己ホスト）
   implementation-notes.md §7 / style-guide.md §8-7 により外部CDN読み込みは禁止。
   assets/fonts/ に woff2 を配置済み（LP実使用文字のみのカスタムサブセット、pyftsubset生成）。
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Noto Sans JP"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/NotoSansJP-Regular-subset.woff2") format("woff2");
  unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+4E00-9FFF,U+FF00-FFEF,U+0020-007E;
}
@font-face{
  font-family:"Noto Sans JP"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../assets/fonts/NotoSansJP-Medium-subset.woff2") format("woff2");
  unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+4E00-9FFF,U+FF00-FFEF,U+0020-007E;
}
@font-face{
  font-family:"Noto Sans JP"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/NotoSansJP-Bold-subset.woff2") format("woff2");
  unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+4E00-9FFF,U+FF00-FFEF,U+0020-007E;
}
@font-face{
  font-family:"Noto Serif JP"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/NotoSerifJP-SemiBold-subset.woff2") format("woff2");
  unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+4E00-9FFF,U+FF00-FFEF,U+0020-007E;
}
@font-face{
  font-family:"Noto Serif JP"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/NotoSerifJP-Bold-subset.woff2") format("woff2");
  unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+4E00-9FFF,U+FF00-FFEF,U+0020-007E;
}

/* --------------------------------------------------------------------------
   1. デザイントークン（style-guide.md §1 / §3 / §4 / §5）
   -------------------------------------------------------------------------- */
:root{
  /* 1-1. 地色（ネイビー系） */
  --navy-900:#0F1821;
  --navy-800:#16202C;
  --navy-700:#1E2B3A;
  --navy-600:#2A394D;
  --navy-500:#002D57;
  --ink-body:#383D5C;
  --ink-mute:#6B7684;

  /* 1-2. ゴールド系 */
  --gold-700:#B67B03;
  --gold-500:#BBA53B;
  --gold-400:#D7A750;
  --gold-300:#DAAF08;
  --gold-200:#FEE9A0;
  --gold-hairline:#C9B36A;

  /* 1-3. アクセント */
  --red-accent:#C62837;
  --brick:#802D1F;
  --marker-yellow:#FCFF00;

  /* 1-4. CTA（LINE緑・この用途専用） */
  --line-green:#00C301;
  --line-green-dark:#00AB01;
  --line-green-shadow:rgba(0,80,0,.35);

  /* 1-5. 明色・紙 */
  --white:#FFFFFF;
  --paper:#F6F6F6;
  --paper-2:#F9F9F9;
  --beige:#F6F4F2;

  /* 書体 */
  --font-mincho:"Noto Serif JP","Times New Roman","YuMincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  --font-gothic:"Noto Sans JP",YuGothic,"Yu Gothic","ヒラギノ角ゴシック","Hiragino Sans",sans-serif;

  /* サイズスケール */
  --fs-hero:8.4rem;
  --fs-hero-2:5.6rem;
  --fs-hero-3:4.4rem;
  --fs-h2:4.8rem;
  --fs-h2-g:4.2rem;
  --fs-h3:3.4rem;
  --fs-lead:3.2rem;
  --fs-body:3.0rem;
  --fs-label:2.6rem;
  --fs-note:2.2rem;
  --fs-cta:4.0rem;

  /* 余白スケール */
  --s1:.8rem;
  --s2:1.6rem;
  --s3:2.4rem;
  --s4:3.2rem;
  --s5:4.8rem;
  --s6:6.4rem;
  --s7:8rem;
  --s8:12rem;
  --s9:16rem;

  /* レイアウト */
  --lp-w:750px;
}

/* --------------------------------------------------------------------------
   2. レイアウト基盤（style-guide.md §3）
   375px見切れ対策の核。すべての寸法は rem（1rem = 設計10px）で書く。
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ font-size:10px; -webkit-text-size-adjust:100%; }
@media (max-width:750px){
  html{ font-size:calc(100vw / 75); }
}
@media (max-width:340px){
  :root{ --fs-body:3.4rem; --fs-note:2.6rem; }
}

body{
  margin:0;
  padding-bottom:20rem;                 /* 固定CTAバーの逃げ */
  background:var(--white);
  font-family:var(--font-gothic);
  font-weight:500;
  font-feature-settings:"palt" 1;
  line-height:1.75;
  color:var(--ink-body);
  font-size:var(--fs-body);
  overflow-x:hidden;
}

.container{
  max-width:75rem;
  margin-inline:auto;
  background:var(--white);
}
@media (min-width:751px){
  .container{
    border-left:1px solid var(--navy-800);
    border-right:1px solid var(--navy-800);
  }
}

.inner{ width:67rem; margin-inline:auto; }

picture{ display:block; }
img{ max-width:100%; height:auto; display:block; background-color:var(--paper-2); }

/* 画像の表示幅は image-plan.md (e) の「設計px」を rem に置換して指定する
   （1rem = 設計10px）。width/height 属性は CLS 対策として設計px のまま残す。 */
.img-w25{ width:25rem; }
.img-w34{ width:34rem; }
.img-w40{ width:40rem; }
.img-w44{ width:44rem; }
.img-w45{ width:45rem; }
.img-w56{ width:56rem; }
.img-w75{ width:75rem; }
img.ornament,
.sec--navy img{ background-color:transparent; }

h1,h2,h3{ margin:0; }
p{ font-weight:400; margin:0 0 2.4rem; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
blockquote{ margin:0; }

/* style-guide.md §4-3 の定義そのまま。4行以上の長文ブロックにのみ付ける。
   word-break:auto-phrase は justify と併用すると行の余白が広がりすぎるため、
   長文には掛けず、見出し・短文側（下記）に適用する。 */
.txt-long{ text-align:justify; hanging-punctuation:allow-end; }
h1,h2,.sec__closing,.step__text,.cta-block__lead,.cta-dark__copy,.offer__text{ word-break:auto-phrase; }
h1,h2,h3,.tab,.badge-gold{ text-align:center; }
.nw{ display:inline-block; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   3. セクション（背景リズム・structure.md §2）
   -------------------------------------------------------------------------- */
.sec{ position:relative; padding-block:var(--s7); }
.sec--white{ background:var(--white); }
.sec--paper{ background:var(--paper); }
.sec--paper2{ background:var(--paper-2); }
.sec--beige{ background:var(--beige); }

.sec--navy{
  padding-block:var(--s8);
  background-color:var(--navy-800);
  background-image:url("../assets/img/bg-navy-pattern.jpg");            /* 非対応ブラウザ用 */
  background-image:image-set(url("../assets/img/bg-navy-pattern.webp") type("image/webp"),
                             url("../assets/img/bg-navy-pattern.jpg")  type("image/jpeg"));
  background-repeat:repeat;
  background-size:75rem auto;
  color:var(--white);
}
.sec--navy p{ color:var(--white); }

/* カーブ（ライト面がダーク面に食い込むドーム） */
.sec--curve-top{
  border-radius:75rem 75rem 0 0 / 7.2rem 7.2rem 0 0;
  margin-top:-7.2rem;
  z-index:1;
}

/* 直線境界の金細罫
   .u-gold-rule（高さ2px）単体では実機でほぼ視認できず、セクションの切れ目が伝わらないため、
   未使用だった意匠アセット ornament-gold-rule を区切りとして採用する（image-plan.md (b) の想定用途）。 */
.sec-divider{
  width:100%; padding-block:var(--s4);
  background:var(--white);
}
.sec-divider::before,
.ornament-rule{
  content:""; display:block;
  width:60rem; max-width:calc(100% - 8rem); height:2.4rem; margin-inline:auto;
  background-image:url("../assets/img/ornament-gold-rule.png");
  background-image:image-set(url("../assets/img/ornament-gold-rule.webp") type("image/webp"),
                             url("../assets/img/ornament-gold-rule.png")  type("image/png"));
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.ornament-rule--dark{ margin-bottom:var(--s3); }

/* --------------------------------------------------------------------------
   4. ユーティリティ（style-guide.md §2）
   -------------------------------------------------------------------------- */
.u-gold-text{
  color:#D7A750;
  background-image:linear-gradient(0deg,
    #B67B03 .1em, #DAAF08 .2em, #FEE9A0 .3em, #DAAF08 .4em, #B67B03 .5em);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:rgba(255,255,255,0);
}
/* AA対応: FVのH1「公式LINE」（.fv__l3）は水墨背景（実質白系）の上に乗るため、
   元の#D7A750フォールバックだと2.20:1しか出ない。紺地（channel-plate__title）は
   8.13:1でAA適合済みのため.u-gold-text自体は変更せず、白背景側だけを
   金グラデの暗部寄り（#B67B03〜#8A5C02系）に振ってスコープ上書きする（白5.81:1）。 */
.fv__l3.u-gold-text{
  color:#8A5C02;
  background-image:linear-gradient(0deg,
    #6B4701 .1em, #8A5C02 .2em, #A66E02 .3em, #8A5C02 .4em, #6B4701 .5em);
}
.u-gold-surface{
  background-image:linear-gradient(134deg,
    #B67B03 0%, #DAAF08 28%, #FEE9A0 50%, #DAAF08 72%, #B67B03 100%);
}
.u-gold-rule{
  height:.2rem;
  background-image:linear-gradient(90deg,
    rgba(201,179,106,0) 0%, #C9B36A 20%, #FEE9A0 50%, #C9B36A 80%, rgba(201,179,106,0) 100%);
}

/* content.md のマークアップ指示 */
.c-brick{ color:var(--brick); font-weight:700; }
.c-red{ color:var(--red-accent); font-weight:700; }
/* AA対応: 元の#00C301は白/ベージュ背景で2.17〜2.38:1しか出ないため、
   緑の意味を保ったまま4.5:1以上を確保できる濃緑に調整（白5.14:1／ベージュ4.68:1）。
   CTAボタン本体（緑地×白文字）はブランドのアフォーダンス優先で対象外・変更なし。 */
.c-green{ color:#1E7E34; }
.mark{ background:linear-gradient(transparent 62%,var(--marker-yellow) 62%); font-weight:700; }

/* --------------------------------------------------------------------------
   5. 装飾ボキャブラリ（style-guide.md §6）
   -------------------------------------------------------------------------- */

/* 6-1. 呼びかけ帯 */
.kicker{
  background:var(--navy-800); color:#fff;
  font-size:var(--fs-label); font-weight:700; letter-spacing:.06em;
  padding:1.6rem 0; display:flex; justify-content:center; align-items:center; gap:1.6rem;
}
.kicker::before,.kicker::after{
  content:""; width:.2rem; height:2.8rem; background:#fff; flex:0 0 auto;
}
/* content.md S01「前後に ＼ ／ の装飾スラッシュ」の見えを優先し、
   style-guide.md §6-1 の回転方向（before:22deg / after:-22deg）を左右入れ替えている。
   角度・色・太さは §6-1 の値そのまま。 */
.kicker::before{ transform:rotate(-22deg); }
.kicker::after { transform:rotate(22deg); }

/* 6-2. 反転帯ラベル */
.band-invert{
  display:inline-block; background:var(--navy-800); color:#fff;
  font-size:var(--fs-label); font-weight:700; letter-spacing:.10em;
  padding:1.2rem 2.4rem;
}

/* 6-3. ゴールドバッジ
   LP-A FV「✓顧問料交渉0 / ✓営業活動0」の実物に合わせ、
   金ベタ地＋白文字ではなく「白地＋金2px枠＋濃紺文字」に調整（使用トークンは §1 のまま）。
   金ベタ地に白文字だとコントラストが落ち、参考LPの締まった見えにならないため。 */
.badge-gold{
  display:inline-flex; align-items:center; gap:1.2rem;
  background:var(--white); color:var(--navy-800);
  border:.2rem solid var(--gold-500);
  font-family:var(--font-mincho); font-size:var(--fs-h3); font-weight:700;
  padding:1rem 2rem; border-radius:.2rem;
  line-height:1.3; white-space:nowrap;
  box-shadow:0 .2rem .8rem rgba(22,32,44,.10);
}
.badge-gold__check{
  width:2.8rem; height:2.8rem; border-radius:50%; flex:0 0 auto;
  border:.2rem solid var(--red-accent); color:var(--red-accent);
  display:grid; place-items:center;
}
.badge-gold__check svg{ width:1.6rem; height:1.6rem; display:block; }

/* 6-4. 吹き出しタブ */
.tab{
  position:relative; display:inline-block;
  background:var(--navy-800); color:#fff;
  font-size:var(--fs-h3); font-weight:700; letter-spacing:.06em;
  padding:1.2rem 3.2rem; border-radius:.8rem;
}
.tab--pill{ border-radius:999px; padding-inline:4.8rem; }
.tab::after{
  content:""; position:absolute; left:50%; bottom:-2.4rem; transform:translateX(-50%);
  width:0; height:0; border:1.2rem solid transparent; border-top-color:var(--navy-800);
}

/* 6-5. 縦帯ラベル付き特典見出し */
.gokui-head{
  display:grid; grid-template-columns:12rem 1fr; align-items:center;
  min-height:18rem; background:var(--navy-800);
}
.gokui-head__label{
  color:var(--gold-400); font-size:var(--fs-h3); font-weight:700; line-height:1.3;
  text-align:center; border-right:1px solid rgba(255,255,255,.45);
  padding-block:1.6rem;
}
.gokui-head__label span{ display:block; }
.gokui-head__title{
  color:#fff; font-size:var(--fs-h3); font-weight:700; line-height:1.5;
  text-align:left; padding:2.4rem 3.2rem;
}

/* 6-7. 見出し下線 */
.h-rule{ display:block; width:24rem; height:.6rem; background:var(--navy-800); margin:2.4rem auto; }
.h-rule--gold{ background-image:linear-gradient(134deg,#B67B03,#DAAF08,#FEE9A0,#DAAF08,#B67B03); }

/* 6-8. 下向き三角誘導 */
.arrow-down{
  width:4rem; height:2.2rem; margin:3.2rem auto 0;
  clip-path:polygon(0 0,100% 0,50% 100%); background:var(--navy-800);
}
.sec--navy .arrow-down{ background:var(--gold-400); }

/* 6-11. STEPタグ */
.step-tag{
  position:relative; display:inline-block;
  background:var(--navy-800); color:#fff;
  font-size:var(--fs-label); font-weight:700; letter-spacing:.08em;
  padding:.8rem 2rem; border-radius:0;
}
.step-tag::after{
  content:""; position:absolute; left:1.6rem; bottom:-1.2rem;
  width:0; height:0; border:.6rem solid transparent; border-top-color:var(--navy-800);
}

/* 6-12. 金枠写真 */
.photo-gold{
  border:.6rem solid;
  border-image:linear-gradient(134deg,#B67B03,#DAAF08,#FEE9A0,#DAAF08,#B67B03) 1;
  outline:1px solid var(--gold-hairline); outline-offset:.6rem;
}

/* 6-14. 限定バッジ＋集中線
   LP-A sheet1_10 の集中線は「長さの違う細い線が扇状に開く」形。
   短い等長3本だと記号的に痩せるため、長さ・角度を振って扇形にする。 */
.limited{ display:flex; justify-content:center; align-items:center; gap:1.6rem; }
.limited__box{
  background-image:linear-gradient(134deg,
    #B67B03 0%, #DAAF08 28%, #FEE9A0 50%, #DAAF08 72%, #B67B03 100%);
  color:var(--navy-800);
  font-size:var(--fs-h3); font-weight:700; letter-spacing:.06em;
  padding:1.2rem 2.8rem;
  box-shadow:0 .4rem 1.6rem rgba(0,0,0,.35);
}
.limited__rays{ display:flex; align-items:center; gap:1rem; flex:0 0 auto; }
.limited__rays span{ width:.3rem; background:var(--gold-400); border-radius:.2rem; }
.limited__rays span:nth-child(1){ height:2.4rem; }
.limited__rays span:nth-child(2){ height:4.4rem; }
.limited__rays span:nth-child(3){ height:3rem; }
.limited__rays:first-child span:nth-child(1){ transform:rotate(-30deg); }
.limited__rays:first-child span:nth-child(2){ transform:rotate(-16deg); }
.limited__rays:first-child span:nth-child(3){ transform:rotate(-4deg); }
.limited__rays:last-child span:nth-child(1){ height:3rem;  transform:rotate(4deg); }
.limited__rays:last-child span:nth-child(2){ height:4.4rem; transform:rotate(16deg); }
.limited__rays:last-child span:nth-child(3){ height:2.4rem; transform:rotate(30deg); }

/* 登録手順のハイライトリング（image-plan.md (d)） */
.ring-gold{ box-shadow:0 0 0 .6rem var(--gold-400); border-radius:.4rem; }

/* --------------------------------------------------------------------------
   6. アニメーション（style-guide.md §7）— fade-in と pulse の2つのみ
   -------------------------------------------------------------------------- */
.fx{
  opacity:0; transform:translateY(2.4rem);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);
}
.fx.is-in{ opacity:1; transform:none; }
.no-js .fx{ opacity:1; transform:none; }

@keyframes pulse{
  0%  { transform:scale(.9);   }
  50% { transform:scale(1.05); }
  100%{ transform:scale(.9);   }
}
@keyframes barUp{ from{ transform:translateY(100%); } to{ transform:none; } }

@media (prefers-reduced-motion:reduce){
  .fx{ opacity:1; transform:none; transition:none; }
  .cta-btn,.cta-fixed{ animation:none; }
}

/* --------------------------------------------------------------------------
   7. CTA（implementation-notes.md §1 / §2）
   -------------------------------------------------------------------------- */
.cta-btn{
  display:flex; align-items:center; justify-content:center; gap:1.2rem;
  width:100%; min-height:8.8rem;
  background:var(--line-green); color:#fff;
  font-family:var(--font-gothic);
  font-size:var(--fs-cta); font-weight:700; letter-spacing:.04em; line-height:1.3;
  border-radius:999px; text-decoration:none;
  text-shadow:0 .1rem .2rem rgba(0,0,0,.35);   /* implementation-notes §9 コントラスト補強 */
  box-shadow:0 .4rem 0 var(--line-green-dark), 0 .8rem 2rem var(--line-green-shadow);
  animation:pulse 1s ease-in-out infinite;
  transition:transform .12s ease, box-shadow .12s ease;
}
.cta-btn:active{ transform:translateY(.4rem); box-shadow:0 0 0 var(--line-green-dark); }
.cta-btn:focus-visible{ outline:.3rem solid var(--gold-200); outline-offset:.4rem; }
.cta-btn__arrow{ width:2.4rem; height:2.4rem; flex:0 0 auto; }

.cta-fixed{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  max-width:75rem; margin-inline:auto;
  background:rgba(22,32,44,.96);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:1.6rem 2.4rem calc(1.6rem + env(safe-area-inset-bottom));
  box-shadow:0 -.4rem 1.6rem rgba(0,0,0,.25);
  animation:barUp .4s cubic-bezier(.22,.61,.36,1) both;
}
.cta-fixed__lead{ color:#fff; font-size:var(--fs-note); text-align:center; margin-bottom:1.2rem; }

/* インラインCTAブロック */
.cta-block{ padding-block:var(--s6); }
.cta-block__lead{ font-size:var(--fs-lead); font-weight:700; text-align:center; margin-bottom:var(--s4); }
.cta-block__note{ font-size:var(--fs-note); color:var(--ink-mute); text-align:center; margin:var(--s3) 0 0; }

/* --------------------------------------------------------------------------
   S01 FV
   -------------------------------------------------------------------------- */
.fv{
  padding-top:var(--s6); padding-bottom:0;
  background-color:var(--white);
  background-image:url("../assets/img/bg-sumi-pine.jpg");               /* 非対応ブラウザ用 */
  /* 最上レイヤーの白グラデは「FV下端 → S02(白) への継ぎ目消し」。
     下の水墨背景を下端で白へ溶かし、その上に .fv__portrait を multiply で重ねることで
     講師写真の白地と水墨背景の地色差（既知の継ぎ目）を上下とも構造的に消す。 */
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0) 68%, #fff 97%),
    image-set(url("../assets/img/bg-sumi-pine.webp") type("image/webp"),
              url("../assets/img/bg-sumi-pine.jpg")  type("image/jpeg"));
  background-position:top center, bottom center;
  background-repeat:no-repeat, no-repeat;
  background-size:100% 100%, cover;
}
.fv__title{ font-family:var(--font-mincho); color:var(--navy-800); }
.fv__l1{
  display:block; font-size:var(--fs-hero-3); line-height:1.40; letter-spacing:.02em; font-weight:700;
}
.fv__l2{
  display:block; font-size:var(--fs-hero-2); line-height:1.35; letter-spacing:.04em; font-weight:700;
  margin-top:var(--s2);
}
.fv__l3{
  display:block; font-size:var(--fs-hero); line-height:1.20; letter-spacing:.04em; font-weight:700;
}
.fv__band{ text-align:center; margin-top:var(--s3); }
.fv__sub{
  font-size:var(--fs-lead); font-weight:500; line-height:1.60; text-align:center;
  margin-top:var(--s5); margin-bottom:0;
}
.fv__badges{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:var(--s2);
  margin-top:var(--s5);
}
.fv__portrait{ margin-top:var(--s5); position:relative; }
/* 講師写真の白地を multiply で背景（水墨・和紙）に溶かす。
   上端はマスクで完全にフェードさせ、水墨背景との境界線を消す。 */
.fv__portrait img{
  background-color:transparent;
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 16%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 16%);
}

/* --------------------------------------------------------------------------
   S03 / S11 チェックリスト
   -------------------------------------------------------------------------- */
.sec__title{
  font-family:var(--font-mincho); font-size:var(--fs-h2); line-height:1.45; letter-spacing:.04em;
  font-weight:600; color:var(--navy-800);
}
.sec--navy .sec__title{ color:var(--white); }
.sec__title--gothic{
  font-family:var(--font-gothic); font-size:var(--fs-h2-g); letter-spacing:.02em; font-weight:700;
}

.check-list{ margin-top:var(--s5); }
.check-list__item{
  display:grid; grid-template-columns:4.4rem 1fr; gap:1.6rem; align-items:start;
  font-size:var(--fs-lead); font-weight:500; line-height:1.60;
  padding-block:var(--s3);
  border-bottom:.2rem dotted var(--navy-600);
  color:var(--navy-800);
}
.check-list__item:first-child{ border-top:.2rem dotted var(--navy-600); }
/* 黄マーカーは行間 1.6 だと帯が字面を貫いて打ち消し線に見えるため、
   リスト内だけ字面の下半分に収まる「帯」に変える（色は --marker-yellow のまま）。 */
.check-list__item .mark{
  background:linear-gradient(transparent 60%,
    var(--marker-yellow) 60%, var(--marker-yellow) 86%, transparent 86%);
}
.check-icon{
  width:4.4rem; height:4.4rem; border-radius:50%; background:var(--brick); color:#fff;
  display:grid; place-items:center; margin-top:.4rem;
}
.check-icon svg{ width:2.4rem; height:2.4rem; display:block; }
.sec__closing{
  font-size:var(--fs-lead); font-weight:700; text-align:center; line-height:1.60;
  margin-top:var(--s5); margin-bottom:0; color:var(--navy-800);
}

/* --------------------------------------------------------------------------
   S04 講師プロフィール
   -------------------------------------------------------------------------- */
.navi__head{
  display:grid; grid-template-columns:1fr 22rem; align-items:end; gap:var(--s3);
  position:relative; text-align:left;
}
.navi__head-text{ position:relative; padding-bottom:var(--s2); }
.navi__photo{
  width:22rem; height:22rem; overflow:hidden; background:var(--white);
  border:.6rem solid;
  border-image:linear-gradient(134deg,#B67B03,#DAAF08,#FEE9A0,#DAAF08,#B67B03) 1;
  box-shadow:0 .6rem 2rem rgba(0,0,0,.40);
}
.navi__photo picture{ display:block; height:100%; }
.navi__photo img{
  width:100%; height:100%; object-fit:cover;
  background:var(--white);
  transform:scale(1.55); transform-origin:50% 20%;   /* 全身だと顔が小さいのでバストアップに寄せる */
}
.navi__kicker{
  font-family:var(--font-mincho); font-size:var(--fs-h2); font-weight:600; letter-spacing:.04em;
  color:var(--white); position:relative; z-index:1;
}
.navi__en{
  position:absolute; left:12rem; top:1.2rem; z-index:0;
  font-family:var(--font-mincho); font-style:italic; font-weight:600;
  font-size:var(--fs-h2); color:var(--gold-400); opacity:.35; letter-spacing:.04em;
  pointer-events:none;
}
.navi__ornament{ width:45rem; max-width:100%; margin:var(--s2) auto 0; opacity:.9; }

/* 金の面に白文字はコントラスト不足（明部 #FEE9A0 上で 1.6:1）。
   LP-A の金バッジと同じ「金地＋濃紺文字」に統一する。 */
.navi__name-block{
  margin-top:var(--s3);
  padding:var(--s4) var(--s5);
  outline:1px solid var(--gold-hairline); outline-offset:.6rem;
}
.navi__name-block p,
.navi__name-block li{ color:var(--navy-800); }
.sec--navy .navi__name-block p{ color:var(--navy-800); }
.navi__furigana{
  font-size:var(--fs-label); font-weight:700; letter-spacing:.10em; margin:0 0 .8rem;
}
.navi__name{
  font-family:var(--font-mincho); font-size:var(--fs-hero-2); font-weight:700;
  letter-spacing:.04em; line-height:1.35; margin:0 0 var(--s3); text-align:left;
}
.navi__titles{ border-top:1px solid rgba(22,32,44,.35); padding-top:var(--s2); }
.navi__titles li{ font-size:var(--fs-body); font-weight:500; line-height:1.6; }

.navi__badge{
  margin-top:var(--s5); position:relative;
  border:.2rem solid var(--red-accent);
  background:var(--white);
  padding:1.6rem 2.4rem;
  text-align:center;
}
.navi__badge p{
  color:var(--navy-800); font-size:var(--fs-label); font-weight:700; line-height:1.5; margin:0;
}
.navi__badge::after{
  content:""; position:absolute; left:50%; bottom:-2.2rem; transform:translateX(-50%);
  width:0; height:0; border:1.2rem solid transparent; border-top-color:var(--red-accent);
}

.navi__channel{ margin-top:var(--s6); }
.navi__caption{
  font-size:var(--fs-note); color:var(--gold-400); text-align:center;
  margin:var(--s3) 0 0;
}
/* YouTubeチャンネル画像は素材が [要確認] のため、
   参考LP-A（sheet1_07）のチャンネルアート帯を CSS で描き起こして代替する。
   外部素材が入手でき次第、この .channel-plate を <img> に差し替えるだけでよい。 */
.channel-plate{
  position:relative; display:grid; place-items:center;
  width:56rem; max-width:100%; margin-inline:auto; min-height:22rem;
  background-color:var(--navy-900);
  background-image:image-set(url("../assets/img/bg-navy-pattern.webp") type("image/webp"),
                             url("../assets/img/bg-navy-pattern.jpg")  type("image/jpeg"));
  background-size:cover; background-position:center;
  border:.6rem solid;
  border-image:linear-gradient(134deg,#B67B03,#DAAF08,#FEE9A0,#DAAF08,#B67B03) 1;
  box-shadow:0 .6rem 2.4rem rgba(0,0,0,.45);
}
.channel-plate::before,
.channel-plate::after{
  content:""; position:absolute; left:4rem; right:4rem; height:.2rem;
  background-image:linear-gradient(90deg,
    rgba(201,179,106,0) 0%, #C9B36A 20%, #FEE9A0 50%, #C9B36A 80%, rgba(201,179,106,0) 100%);
}
.channel-plate::before{ top:3.2rem; }
.channel-plate::after { bottom:3.2rem; }
.channel-plate__title{
  font-family:var(--font-mincho); font-weight:700;
  font-size:var(--fs-hero-2); line-height:1.2; letter-spacing:.12em;
  padding-inline:2.4rem;
}
.navi__bio{ margin-top:var(--s6); }
.navi__bio p{ font-size:var(--fs-body); line-height:1.75; }
/* 赤 #C62837 は紺地の上で 2.4:1 しか出ないため、
   ダーク面では LP-B（sheet2_03）の「赤プレート＋白文字」の語彙に置き換える。 */
.navi__bio .c-red{
  color:var(--white); background:var(--red-accent);
  padding:.08em .32em; margin-inline:.08em; border-radius:.2rem;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* --------------------------------------------------------------------------
   S05 オファー全体像
   -------------------------------------------------------------------------- */
.tab-wrap{ text-align:center; margin-bottom:var(--s6); }
.tab-wrap--mt{ margin-top:var(--s6); }

/* ジャンプ率：参考LPは「前置き小 → キーワード特大」の落差で読ませる。
   34px → 56px → 42px の3段に振り直す（トークンは §4-2 のまま）。 */
.offer__title{
  font-family:var(--font-mincho); font-weight:600; color:var(--navy-800);
  font-size:var(--fs-h3); line-height:1.5; letter-spacing:.04em;
}
.offer__title span{ display:block; }
.offer__title strong{
  display:block; font-size:var(--fs-hero-2); font-weight:700;
  line-height:1.3; letter-spacing:.02em; margin-top:.4rem;
}
.offer__title .offer__title-out{
  display:block; font-size:var(--fs-h2-g); font-weight:700; margin-top:.8rem;
}
.offer__list{ margin-top:var(--s5); }
.offer__item{
  display:grid; grid-template-columns:10rem 1fr; align-items:stretch;
  border:1px solid var(--navy-600);
  margin-bottom:var(--s3);
  box-shadow:0 .2rem .8rem rgba(22,32,44,.08);
}
.offer__item:last-child{ margin-bottom:0; }
.offer__label{
  align-self:stretch; display:grid; place-items:center;
  background:var(--navy-800); color:var(--gold-400);
  font-size:var(--fs-label); font-weight:700; letter-spacing:.04em;
  padding:1.6rem .8rem;
}
/* display:flex にすると .nw が独立したフレックスアイテムになり行組みが壊れるため、
   縦中央寄せは align-self で行う（インラインフォーマットを保つ）。 */
.offer__text{
  font-size:var(--fs-body); font-weight:700; line-height:1.5;
  padding:1.6rem 2.4rem; color:var(--navy-800);
  align-self:center;
}
.offer__mockups{ background:var(--paper-2); margin-top:var(--s6); padding-block:var(--s5); }

/* --------------------------------------------------------------------------
   S06-S08 特典（gokui）
   -------------------------------------------------------------------------- */
.gokui{ padding:0; }
.gokui__photo{ background:var(--paper-2); padding-block:var(--s5); text-align:center; }
/* ほぼ白の台座に商品写真が浮くと「置いただけ」に見えるため、接地影で立体感を出す */
.gokui__photo img,
.bonus__photo img,
.offer__mockups img{ margin-inline:auto; filter:drop-shadow(0 1.2rem 2.4rem rgba(22,32,44,.22)); }
.gokui__body{ background:var(--white); padding-block:var(--s5); }
.gokui__body p{ font-size:var(--fs-body); }

/* --------------------------------------------------------------------------
   S09 ボーナス
   -------------------------------------------------------------------------- */
.bonus__photo{ text-align:center; margin-top:var(--s5); }
.bonus__photo img{ margin-inline:auto; }
.bonus__body{ margin-top:var(--s5); }

/* --------------------------------------------------------------------------
   S10 / S14 ダークCTA
   -------------------------------------------------------------------------- */
.cta-dark__copy{
  font-family:var(--font-mincho); font-size:var(--fs-h2); font-weight:600;
  line-height:1.45; letter-spacing:.04em; color:var(--white); text-align:center;
  margin:var(--s5) 0 var(--s5);
}
/* アカウント情報を金の細枠で囲み、最終CTAの情報密度と「格」を参考LP水準に寄せる */
.cta-dark__account{
  margin-top:var(--s5); text-align:center; font-size:var(--fs-note); color:var(--white);
  border:1px solid var(--gold-hairline);
  padding:var(--s3) var(--s4);
}
.cta-dark__account li{ line-height:1.9; letter-spacing:.04em; }
.cta-dark__account li:first-child{
  font-size:var(--fs-label); font-weight:700; color:var(--gold-200);
}

/* --------------------------------------------------------------------------
   S12 登録者の声
   -------------------------------------------------------------------------- */
.voices__disclaimer{
  font-size:var(--fs-note); color:var(--gold-200); text-align:center;
  border:1px solid var(--gold-hairline);
  padding:1.6rem 2.4rem; margin:var(--s4) 0 var(--s6);
}
.voice{
  position:relative;
  background:var(--navy-700);
  border:1px solid rgba(215,167,80,.30);
  padding:var(--s5) var(--s4) var(--s4);
  margin-bottom:var(--s4);
}
.voice:last-child{ margin-bottom:0; }
.voice__avatar{
  width:6.4rem; height:6.4rem; border-radius:50%;
  background:var(--navy-700);
  border:.6rem solid var(--gold-400);
  outline:1px solid var(--gold-hairline); outline-offset:.6rem;
  display:grid; place-items:center; margin-inline:auto;
}
.voice__avatar svg{ width:4rem; height:4rem; display:block; color:var(--gold-400); }
.voice__meta{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:1.2rem;
  margin:var(--s4) 0 var(--s3); font-size:var(--fs-note); color:var(--white);
}
.voice__industry{
  background:var(--navy-800); color:var(--gold-400);
  padding:.4rem 1.2rem; letter-spacing:.08em;
}
.voice__body{
  font-size:var(--fs-body); font-weight:400; line-height:1.75; color:var(--white);
  text-align:left;
}
.voice__badge{
  position:absolute; top:0; left:0;
  background:var(--gold-500); color:#fff;
  font-size:var(--fs-note); font-weight:700; letter-spacing:.08em;
  padding:.4rem 1.6rem;
}

/* --------------------------------------------------------------------------
   S13 登録手順
   -------------------------------------------------------------------------- */
.steps__title .c-green{ font-weight:600; }
.step{ margin-top:var(--s5); }
.step__text{
  font-size:var(--fs-lead); font-weight:700; line-height:1.6;
  color:var(--navy-800); margin:var(--s3) 0 0;
}
.step__fig{ margin-top:var(--s4); }
.step__fig--center{ text-align:center; }
.step__fig--center img{ margin-inline:auto; }
.steps__note{
  font-size:var(--fs-note); color:var(--ink-mute); text-align:center;
  margin-top:var(--s5); line-height:1.7;
}

/* CSSで描くボタン図解（image-plan.md (d)） */
.mock-bar{
  background:var(--navy-800); padding:1.6rem 2.4rem; border-radius:.4rem;
}
.mock-btn{
  display:flex; align-items:center; justify-content:center;
  min-height:5.6rem; border-radius:999px;
  font-size:var(--fs-label); font-weight:700; letter-spacing:.04em;
  text-shadow:0 .1rem .2rem rgba(0,0,0,.35);
}
.mock-btn--green{ background:var(--line-green); color:#fff; }
.mock-sheet{
  background:var(--white); border:1px solid var(--navy-600);
  padding:3.6rem 2.4rem 2.4rem; border-radius:.4rem; position:relative;
}
/* シート上部のハンドル。中身のない白ピルを置くより、UI図解として素直に読める */
.mock-sheet::before{
  content:""; position:absolute; top:1.4rem; left:50%; transform:translateX(-50%);
  width:8rem; height:.6rem; border-radius:999px;
  background:var(--navy-600); opacity:.28;
}
.mock-phone{
  width:22rem; margin-inline:auto; padding:2.4rem 1.6rem;
  border:.2rem solid var(--navy-600); border-radius:2.4rem; background:var(--white);
}

.steps__sp{ display:block; }
.steps__pc{ display:none; }
@media (min-width:751px){
  .steps__sp{ display:none; }
  .steps__pc{ display:block; }
}

/* --------------------------------------------------------------------------
   S15 フッター
   -------------------------------------------------------------------------- */
.footer{
  background:var(--navy-900); color:#fff;
  padding-block:var(--s5); text-align:center; font-size:var(--fs-note);
}
.footer p{ color:#fff; margin-bottom:1.2rem; }
.footer p:last-child{ margin-bottom:0; }
.footer__link{ color:#fff; text-decoration:underline; }
.footer__link:focus-visible{ outline:.3rem solid var(--gold-200); outline-offset:.4rem; }
.footer__sep{ padding-inline:.8rem; }