/* ============================================================
   LMU公式LINEオプトインLP（assess-line） style.css
   design/style-guide.md の凍結トークンのみを使用する。
   新しい色・サイズ・書体をこのファイルに追加しないこと。
   ============================================================ */

/* ---------- 1. トークン（style-guide.md §1/§4/§5） ---------- */
:root{
  --lp-w:750px;
  /* 地色 */
  --bg-cream:#fefaef;
  --bg-white:#FFFFFF;
  --ink-head:#111111;
  --ink-body:#222222;
  --ink-mute:#666666;
  /* アクセント（金茶） */
  --brown-700:#754c24;
  --brown-500:#8C6239;
  --gold-sub:#e8dcba;
  --marker-yellow:#fff2b9;
  --red-strong:#cc0000;
  /* CTA専用 */
  --cta-green:#07B53B;
  --cta-green-dark:#058A2D;
  /* 青系サブアクセント（診断・信頼・固定バー限定） */
  --navy-800:#1E3A5F;
  --sky-400:#7EB6D9;
  --sky-100:#EAF4FA;
  /* 書体 */
  --font-mincho:"Noto Serif JP","Hiragino Mincho ProN","ヒラギノ明朝 ProN W3","Yu Mincho","游明朝体",serif;
  --font-gothic:"Noto Sans JP","游ゴシック",YuGothic,"Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
  /* サイズ */
  --fs-hero:6.0rem;
  --fs-h2:4.4rem;
  --fs-h3:3.4rem;
  --fs-body:3.0rem;
  --fs-note:2.2rem;
  --fs-cta:3.6rem;
  --fs-badge:2.6rem;
  /* 余白 */
  --s1:.8rem; --s2:1.6rem; --s3:2.4rem; --s4:3.2rem;
  --s5:4.8rem; --s6:6.4rem; --s7:8rem; --s8:12rem;
}

/* ---------- 2. フォント（自己ホスト・Phase 4でサブセット配置） ---------- */
@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;
}
@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;
}

/* ---------- 3. 単位系・基盤（implementation-rules §2） ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

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

body{
  font-family:var(--font-gothic);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.75;
  letter-spacing:.02em;
  color:var(--ink-body);
  background:var(--bg-white);
  font-feature-settings:"palt" 1;
  -webkit-text-size-adjust:100%;
  padding-bottom:20rem; /* 固定CTAバーの逃げ */
}

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

img{ max-width:100%; height:auto; display:block; }
ul,ol{ list-style:none; }
a{ color:inherit; }

/* ---------- 4. ユーティリティ ---------- */
.nw{ display:inline-block; }
/* 本文段落は全幅で自然折返し（orphan行対策・2026-08-06 ユーザー指摘によりPC幅にも適用） */
.sp-flow .nw{ display:inline; }
.sp-flow br{ display:none; }
.nw-keep{ white-space:nowrap; } /* 固有名詞・数値＋助数詞の語中折返し防止 */
.marker{ background:linear-gradient(transparent 65%, var(--marker-yellow) 35%); }
.c-strong{ color:var(--brown-700); font-weight:700; }
.c-gold{ color:var(--gold-sub); }
.txt-long{ text-align:justify; hanging-punctuation:allow-end; }
.pc-only{ display:none; }
@media (min-width:751px){
  .pc-only{ display:block; }
}

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

/* 6-1 英字eyebrow付き見出し */
.sec-head{ text-align:center; margin-bottom:var(--s5); }
.sec-head__eyebrow{
  font-family:var(--font-mincho); font-size:var(--fs-note);
  color:var(--brown-700); letter-spacing:.3em; margin-bottom:var(--s2);
}
.sec-head__title{
  font-family:var(--font-mincho); font-size:var(--fs-h2); font-weight:600;
  color:var(--ink-head); line-height:1.4; letter-spacing:.06em;
}
/* ダーク面（S07）用の反転 */
.sec-head--invert .sec-head__eyebrow{ color:var(--gold-sub); }
.sec-head--invert .sec-head__title{ color:#FFFFFF; }

/* 6-2 ピル型CTAボタン */
.cta-btn{
  display:flex; align-items:center; justify-content:center; gap:1.2rem;
  width:90%; max-width:60rem; margin-inline:auto; min-height:8.8rem;
  background:var(--cta-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); /* AA未達の意図的緩和策（implementation-notes §9） */
  box-shadow:0 .4rem 0 var(--cta-green-dark), 0 .8rem 2rem rgba(7,181,59,.28);
  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(--cta-green-dark); }
.cta-btn:focus-visible{ outline:.3rem solid var(--brown-700); outline-offset:.4rem; }
.cta-btn__icon{ width:4rem; height:4rem; flex-shrink:0; }
.cta-btn__arrow{ width:2.4rem; height:2.4rem; flex-shrink:0; }
/* 固定バー内の縮小変種（implementation-notes §2） */
.cta-btn--bar{ min-height:8.8rem; animation:pulse 1s ease-in-out infinite; } /* 375px端末で実測44px（タップターゲット下限）を確保 */

/* 6-3 CTA前の煽り行 */
.cta-lead{
  text-align:center; font-family:var(--font-mincho);
  font-size:var(--fs-h3); color:var(--ink-head); margin-bottom:var(--s3);
}
.cta-lead::before{ content:"＼ "; color:var(--brown-700); }
.cta-lead::after{ content:" ／"; color:var(--brown-700); }

/* CTA注記 */
.cta-note{
  text-align:center; font-size:var(--fs-note); color:var(--ink-mute);
  margin-top:var(--s3);
}

/* 6-4 特典カード */
.gift-card{
  background:rgba(255,255,255,.6); border:2px solid var(--brown-500);
  padding:var(--s5) var(--s4); margin-bottom:var(--s5);
}
.gift-card__head{
  display:flex; align-items:center; gap:var(--s2);
  margin-bottom:var(--s4);
}
.gift-card__name{
  font-family:var(--font-mincho); font-size:var(--fs-h3); font-weight:600;
  color:var(--ink-head); line-height:1.45; letter-spacing:.04em;
}
.gift-card p + p{ margin-top:var(--s3); }
.gift-card__img{ margin:var(--s4) auto; }

/* 6-5 数字バッジ */
.num-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:5.6rem; height:5.6rem; border-radius:50%; flex-shrink:0;
  background:var(--brown-700); color:#fff;
  font-family:var(--font-mincho); font-size:var(--fs-h3); font-weight:600;
}

/* 6-7 書類アイコン付きリスト */
.doc-list{ margin-top:var(--s3); }
.doc-list li{
  position:relative; padding:1.1rem 0 1.1rem 5rem;
  border-bottom:1px dotted #888; text-align:left;
  font-size:var(--fs-body);
}
.doc-list li:last-child{ border-bottom:none; }
.doc-list li::before{
  content:""; position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  width:2.8rem; height:2.8rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23754c24' d='M6 2h9l5 5v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm8 1.5V8h4.5L14 3.5zM8 12h8v1.6H8V12zm0 4h8v1.6H8V16z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* 6-9 吹き出しタブ */
.tab{
  position:relative; display:inline-block;
  background:var(--navy-800); color:#fff;
  font-family:var(--font-gothic); font-size:var(--fs-h3); font-weight:700;
  letter-spacing:.06em; padding:1.2rem 3.2rem;
}
.tab::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(--navy-800);
}

/* 6-10 STEPタグ */
.step-tag{
  display:flex; align-items:center; justify-content:center; gap:1.6rem;
  font-family:var(--font-gothic); font-size:var(--fs-badge); font-weight:700;
  letter-spacing:.1em; color:var(--ink-head);
}
.step-tag::before,.step-tag::after{
  content:""; width:4rem; height:1px; background:var(--ink-head);
}

/* 6-11 実績バッジ */
.stat-badge{
  display:inline-block; background:#fff; border:1px solid var(--brown-500);
  padding:var(--s2) var(--s3); text-align:center;
}
.stat-badge__num{ font-family:var(--font-mincho); font-size:var(--fs-h3); color:var(--brown-700); font-weight:700; }
.stat-badge__label{ font-size:var(--fs-note); color:var(--ink-body); }

/* 6-12 破線区切り */
hr.hr-dashed{ border:none; border-top:1px dashed #CCC; margin:var(--s5) 0; }

/* 反転帯ラベル（style-guide §2） */
.band-navy{
  display:inline-block; background:var(--navy-800); color:#fff;
  font-size:var(--fs-note); letter-spacing:.2em; padding:.8rem 2.4rem;
}

/* 診断パネル・メーター（style-guide §2。S04カード1限定） */
.diag-panel{
  background:var(--sky-100);
  border:1px solid var(--sky-400);
  border-radius:1.6rem;
  padding:var(--s5) var(--s4);
  margin-bottom:var(--s4);
  text-align:center;
}
.diag-panel__title{
  font-family:var(--font-mincho); font-size:var(--fs-h3); font-weight:600;
  color:var(--ink-head); margin-bottom:var(--s3);
}
.diag-meter{
  height:1.6rem; border-radius:999px;
  background:linear-gradient(90deg, var(--sky-400) 0%, var(--navy-800) 100%);
  position:relative;
  margin:var(--s4) auto;
  max-width:48rem;
}
.diag-meter::after{
  content:""; position:absolute; top:50%; left:72%; transform:translate(-50%,-50%);
  width:2.8rem; height:2.8rem; border-radius:50%;
  background:#fff; border:.4rem solid var(--navy-800);
}
.diag-steps{ margin-top:var(--s3); }
.diag-steps li{
  font-size:var(--fs-note); color:var(--ink-body);
  padding:.8rem 0; text-align:center;
}
.diag-steps b{ color:var(--navy-800); font-weight:700; margin-right:1.2rem; }

/* ---------- 6. セクション ---------- */
section{ padding:var(--s7) 0; }

/* S01 ヒーロー */
.s01{
  padding:var(--s8) 0 0;
  background-color:var(--bg-cream);
  background-image:linear-gradient(to bottom, rgba(254,250,239,0) 60%, #FFFFFF 97%);
  text-align:center;
  overflow:hidden;
}
.s01__lead{ margin-bottom:var(--s4); }
.s01__title{
  font-family:var(--font-mincho); font-size:var(--fs-hero); font-weight:700;
  color:var(--ink-head); line-height:1.35; letter-spacing:.04em;
  margin-bottom:var(--s4);
  /* content.md指定の3行構成を厳守するため、.inner(67rem)を超えて容器幅(75rem)まで使用可にする */
  margin-inline:-4rem;
}
/* h1の語塊は行内折返し禁止（inline-blockの内部改行による語中改行を防ぐ） */
.s01__title .nw{ white-space:nowrap; }
.s01__band{ margin-bottom:var(--s4); }
.s01__sub{
  font-size:var(--fs-body); text-align:center; margin-bottom:var(--s5);
}
.s01__badges{
  display:flex; justify-content:center; align-items:stretch; gap:var(--s3);
  flex-wrap:wrap; margin-bottom:var(--s5);
}
.s01__portrait{ margin:0 auto; max-width:75rem; }
.s01__portrait img{
  width:100%; height:auto;
  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%);
}

/* S02 特典予告 */
.s02{ background:var(--bg-white); text-align:center; }
.s02__tab{ margin-bottom:var(--s5); }
.s02 .sec-head__title .em-num{ font-size:var(--fs-hero); }
.gift-list{ text-align:left; margin-bottom:var(--s5); }
.gift-list li{
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s3) 0;
}
.gift-list li + li{ border-top:1px dashed #CCC; }
.gift-list__name{
  font-family:var(--font-mincho); font-size:var(--fs-h3); font-weight:600;
  color:var(--ink-head); line-height:1.45; display:block; margin-bottom:var(--s1);
}
.gift-list__desc{ font-size:var(--fs-note); color:var(--ink-body); display:block; }
.s02__mock{ margin:0 auto; }

/* S03 / S06 / S09 CTAセクション */
.sec-cta{ background:var(--bg-cream); text-align:center; }

/* S04 三大特典詳細 */
.s04{ background:var(--bg-cream); }
.s04 .gift-card p{ text-align:left; }

/* S05 登録方法 */
.s05{ background:var(--bg-white); text-align:center; }
.step-list li{ margin-bottom:var(--s5); }
.step-list li:last-child{ margin-bottom:0; }
.step-list__desc{ margin-top:var(--s2); font-size:var(--fs-body); }
.s05__pc{ margin-top:var(--s6); }
.s05__pc-note{ font-size:var(--fs-note); color:var(--ink-body); margin-bottom:var(--s3); }
.s05__qr{ margin:0 auto; border:1px dashed #CCC; padding:var(--s2); width:auto; }

/* S07 プロフィール（ダーク面） */
.s07{ background:var(--navy-800); padding:var(--s8) 0; color:#FFFFFF; text-align:center; }
.s07__face{ margin:0 auto var(--s4); width:32rem; }
.s07__face img{ border-radius:50%; }
.s07__kana{ font-size:var(--fs-note); color:#FFFFFF; }
.s07__name{
  font-family:var(--font-mincho); font-size:var(--fs-h2); font-weight:600;
  color:#FFFFFF; letter-spacing:.06em; line-height:1.4; margin-bottom:var(--s2);
}
.s07__title-line{ font-size:var(--fs-note); color:var(--gold-sub); }
.s07__bio{ margin-top:var(--s5); color:#FFFFFF; }
.s07__bio p{ text-align:justify; }
.s07__bio p + p{ margin-top:var(--s3); }

/* S08 権威付け */
.s08{ background:var(--bg-white); text-align:center; }
.s08__badges{
  display:flex; justify-content:center; align-items:stretch; gap:var(--s3);
  flex-wrap:wrap; margin-bottom:var(--s5);
}
.s08__copy{ margin-bottom:var(--s4); }
.s08__yt{ font-size:var(--fs-note); color:var(--ink-mute); }

/* S09 最終CTA */
.s09__account{
  font-size:var(--fs-note); color:var(--ink-body);
  text-align:center; margin-top:var(--s3);
}

/* S10 フッター */
.footer{ background:var(--bg-white); padding:var(--s5) 0; text-align:center; }
.footer__links{ margin-bottom:var(--s3); }
.footer__links li{ display:inline-block; margin:0 var(--s2); }
.footer__links a{
  font-size:var(--fs-note); color:var(--ink-mute); text-decoration:underline;
}
.footer__copy{ font-size:var(--fs-note); color:var(--ink-mute); }

/* S00 固定CTAバー（implementation-notes §2） */
.cta-fixed{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  max-width:75rem; margin-inline:auto;
  background:rgba(30,58,95,.96); /* --navy-800 と同値 */
  -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; }

/* ---------- 7. アニメーション（2つだけ・implementation-rules §4） ---------- */
.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; transition: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-btn--bar,.cta-fixed{ animation:none; }
}