/* ============================================================
   教材LPの共通の見た目（2026-10-09）
   社長「LPのUI良くして。色味もださい」→ 教材LP全部に効かせる。
   - 正典 elife/DESIGN.md に揃える：純白の地／節の地 #F7F7F7／オレンジ #BE400F 1本／
     ネイビー #1B3A5B／墨 #1A1A1A／補助 #5C5C5C／罫 #E6E6E6／角丸 4・12・999
   - ベージュ（#FAF6F1・#F3ECE3・#F2ECE4）と古いオレンジ（#CC4614）、金色の英字ラベルをやめる
   - 細い列の中に紺や茶の箱が浮いていたヒーローを、白地の誌面型（明朝の大見出し）にする
   各LPは本文の <style> の直後でこのファイルを読む（同じ強さなら後勝ち）。
   文言は変えない。ラッパーに class="lpk" を足したページだけに効く。
   ============================================================ */

.lpk{
  --bg:#FFFFFF; --surface:#FFFFFF; --pale:#F7F7F7;
  --ink:#1A1A1A; --muted:#5C5C5C; --line:#E6E6E6;
  --orange:#BE400F; --navy:#1B3A5B;
  --radius:12px;
  background:#FFFFFF; color:#1A1A1A;
}

/* ---- ヒーロー：白地・明朝の大見出し・オレンジは言葉1つと釦だけ ---- */
.lpk .hero{
  background:#FFFFFF; color:#1A1A1A;
  border-top:4px solid #1B3A5B; border-bottom:1px solid #E6E6E6;
  padding:56px 22px 48px;
}
/* アイキャッチ：ヒーローの一番上。Brainの表紙と同じ画像（1280×670） */
.lpk .hero .cover{max-width:720px; margin:0 auto 36px}
.lpk .hero .cover img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid #E6E6E6}
.lpk .hero{padding-top:32px}
.lpk .hero .eb{
  display:inline-block; font-size:12px; letter-spacing:.12em; color:#1B3A5B;
  border:1px solid #1B3A5B; border-radius:999px; padding:4px 14px; margin-bottom:22px;
}
.lpk .hero .lede{color:#1A1A1A; font-size:clamp(28px,5vw,34px); line-height:1.55}
.lpk .hero .lede em{color:#BE400F}
.lpk .hero h1{color:#1B3A5B; font-size:16px; font-weight:700; letter-spacing:.08em}
.lpk .hero .sub{color:#5C5C5C; font-size:16px; line-height:1.9}
.lpk .price{color:#5C5C5C; font-size:14px}
.lpk .price b{color:#1A1A1A; font-size:34px}
.lpk .buy{
  background:#BE400F; color:#FFFFFF; border-radius:4px;
  padding:16px 44px; font-size:16px; box-shadow:0 2px 0 #8F2F0B;
}
.lpk .buy:hover{background:#A9380D; color:#FFFFFF}
.lpk .note{color:#5C5C5C; font-size:12px}

/* ---- 節：白と #F7F7F7 の交互の拍。見出しの下線はオレンジ1本 ---- */
.lpk .band{background:#F7F7F7}
.lpk .sh{font-size:24px; color:#1A1A1A}
.lpk .sh::after{background:#BE400F; width:32px}
.lpk .lead{color:#5C5C5C; font-size:14px}

/* ---- 部品：罫は #E6E6E6、角丸は面12・小4 ---- */
.lpk figure img{border-color:#E6E6E6; border-radius:12px}
.lpk figcaption{color:#5C5C5C}
.lpk .card{border-color:#E6E6E6; border-radius:12px; box-shadow:none}
.lpk .card h3{color:#1B3A5B; font-size:18px}
.lpk .toc{border-color:#E6E6E6; border-radius:12px}
.lpk .toc th{background:#F7F7F7; color:#5C5C5C}
.lpk .toc th,.lpk .toc td{border-bottom-color:#E6E6E6}
.lpk .toc .hi{color:#BE400F}
.lpk ul.chk li{border-color:#E6E6E6; border-radius:4px}
.lpk ul.chk li::before{color:#BE400F}
.lpk .quiet{background:#FFFFFF; border:1px solid #E6E6E6; border-left:3px solid #1B3A5B; color:#5C5C5C; border-radius:0 4px 4px 0}
.lpk .jo{background:#1B3A5B; border-radius:12px}
.lpk .jo span{color:#C9D3DE}

/* ---- 最後の購入の節：紺の帯。文字は白と淡い紺だけ ---- */
.lpk .cta{background:#1B3A5B; color:#FFFFFF}
.lpk .cta h2{color:#FFFFFF; font-size:24px}
.lpk .cta p{color:#D5DDE6}
.lpk .cta .buy{box-shadow:none}
.lpk .foot{color:#5C5C5C}
.lpk .foot a{color:#5C5C5C}

/* ============================================================
   lp系（バイブコーディング・表現チェック・Kindle出版）
   元は :root に茶・ベージュ・くすんだオレンジの変数を持ち、ヒーローは紺のグラデ、
   最後の購入節は茶のグラデだった。変数を .lp.lpk の中で正典に差し替える。
   ============================================================ */
.lp.lpk{
  --orange:#BE400F; --orange-light:#BE400F; --orange-pale:#F7F7F7;
  --brown-dark:#1B3A5B; --brown-mid:#1B3A5B;
  --cream:#F7F7F7; --cream-dark:#F7F7F7;
  --text-primary:#1A1A1A; --text-secondary:#1A1A1A; --text-muted:#5C5C5C;
  --border:#E6E6E6;
}
.lp.lpk .lp-hero{
  background:#FFFFFF; border-top:4px solid #1B3A5B; border-bottom:1px solid #E6E6E6;
  padding:32px 32px 48px;
}
.lp.lpk .lp-hero .cover{max-width:720px; margin:0 auto 36px}
.lp.lpk .lp-hero .cover img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid #E6E6E6}
.lp.lpk .lp-hero-cat{
  font-family:'Noto Sans JP',sans-serif; text-transform:none; letter-spacing:.12em;
  color:#1B3A5B; border:1px solid #1B3A5B; border-radius:999px; font-size:12px; padding:4px 14px;
}
.lp.lpk .lp-hero-title{color:#1A1A1A; font-size:clamp(24px,4.4vw,34px)}
.lp.lpk .lp-hero-sub{color:#5C5C5C; font-weight:400; font-size:16px}
.lp.lpk .lp-hero-price{color:#1A1A1A; font-weight:700; font-size:34px}
.lp.lpk .lp-hero-price-note{color:#5C5C5C}
.lp.lpk .lp-hero-btn,.lp.lpk .lp-cta-btn{background:#BE400F; color:#FFFFFF; border-radius:4px; box-shadow:0 2px 0 #8F2F0B}
.lp.lpk .lp-hero-btn:hover,.lp.lpk .lp-cta-btn:hover{background:#A9380D; color:#FFFFFF}
.lp.lpk .lp-section-title{color:#1A1A1A; font-size:24px; border-bottom:0; text-align:center}
.lp.lpk .lp-section-title::after{content:''; display:block; width:32px; height:2px; background:#BE400F; margin:14px auto 0}
.lp.lpk .lp-lead{background:#F7F7F7; border-left-color:#1B3A5B; border-radius:0 4px 4px 0}
.lp.lpk .lp-manga img,.lp.lpk .lp-figbox,.lp.lpk .lp-author,.lp.lpk .lp-faq-item{border-radius:12px}
.lp.lpk .lp-figbox img,.lp.lpk .lp-pain,.lp.lpk .lp-make-item,.lp.lpk .lp-note-box,.lp.lpk .lp-warn-box{border-radius:4px}
.lp.lpk .lp-warn-box{background:#F7F7F7; border-color:#E6E6E6; border-left:3px solid #BE400F; color:#1A1A1A}
.lp.lpk .lp-cta{background:#1B3A5B; border-radius:12px}
.lp.lpk .lp-cta-label{font-family:'Noto Sans JP',sans-serif; text-transform:none; letter-spacing:.12em; color:#D5DDE6}
.lp.lpk .lp-cta-price{color:#FFFFFF; font-weight:700}
.lp.lpk .lp-cta-price-note,.lp.lpk .lp-cta-safe{color:#D5DDE6}
.lp.lpk .lp-next,.lp.lpk .lp-mailmag{background:#FFFFFF; border:1px solid #E6E6E6; border-top:3px solid #BE400F; border-radius:12px}
.lp.lpk .lp-price-table th{background:#1B3A5B}
.lp.lpk .lp-badge{border-radius:999px}
@media(max-width:600px){.lp.lpk .lp-hero{padding:24px 20px 40px}}

/* ============================================================
   自立の教科書（.etb）：茶のグラデ＋山吹のボタン＋ベージュ地 → 正典へ
   ジャンル別のカード色（--gc）は役割の色なので残す
   ============================================================ */
.etb.lpk{background:#FFFFFF; color:#1A1A1A}
.etb.lpk .hero{background:#FFFFFF; color:#1A1A1A; border-top:4px solid #1B3A5B; border-bottom:1px solid #E6E6E6; padding:32px 22px 48px}
.etb.lpk .hero .cover{max-width:720px; margin:0 auto 36px}
.etb.lpk .hero .cover img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid #E6E6E6; margin:0}
.etb.lpk .hero .eb{display:inline-block; letter-spacing:.12em; color:#1B3A5B; border:1px solid #1B3A5B; border-radius:999px; padding:4px 14px; margin-bottom:22px}
.etb.lpk .hero .symbol{color:#1A1A1A; font-size:34px}
.etb.lpk .hero .symbol .em{color:#BE400F}
.etb.lpk .hero h1{color:#1A1A1A}
.etb.lpk .hero h1 .lbl{color:#1B3A5B; font-weight:700}
.etb.lpk .hero .sub,.etb.lpk .price{color:#5C5C5C}
.etb.lpk .price b{color:#1A1A1A; font-size:34px}
.etb.lpk .hero .note,.etb.lpk .hero .note a{color:#5C5C5C !important}
.etb.lpk .buy{background:#BE400F; color:#FFFFFF; border-radius:4px; box-shadow:0 2px 0 #8F2F0B}
.etb.lpk .buy:hover{background:#A9380D; color:#FFFFFF}
.etb.lpk .band{background:#F7F7F7}
.etb.lpk .sh{color:#1A1A1A}
.etb.lpk .sh::after{background:#BE400F; width:32px; height:2px; border-radius:0}
.etb.lpk .lead,.etb.lpk .grow p,.etb.lpk .tg p,.etb.lpk .plog .now{color:#5C5C5C}
.etb.lpk .mhint,.etb.lpk .plog .ends,.etb.lpk .foot,.etb.lpk .tg .tpl li span{color:#5C5C5C}
.etb.lpk .story p,.etb.lpk .plog .msg{color:#1A1A1A}
.etb.lpk .story .l,.etb.lpk .tg .tpl li a{color:#1B3A5B}
.etb.lpk .mstrip img,.etb.lpk .grow div,.etb.lpk .tg,.etb.lpk .plog{border-color:#E6E6E6; border-radius:12px}
.etb.lpk .tg .ti,.etb.lpk .tg .tpl{border-color:#E6E6E6}
.etb.lpk .aud li{border-color:#E6E6E6; border-radius:4px}
.etb.lpk .grow .n,.etb.lpk .aud li::before,.etb.lpk .plog .now b{color:#BE400F}
.etb.lpk .plog .bar{background:linear-gradient(90deg,#BE400F,#1B3A5B)}
.etb.lpk .cta{background:#1B3A5B}
.etb.lpk .cta .buy{background:#BE400F; color:#FFFFFF}
.etb.lpk .cta .buy:hover{background:#A9380D; color:#FFFFFF}

/* ============================================================
   初診資料テンプレート（.stt）：青グラデ＋金 → 白地・紺・オレンジ
   ============================================================ */
.stt.lpk{background:#FFFFFF; color:#1A1A1A}
.stt.lpk .stt-hero{background:#FFFFFF; color:#1A1A1A; border-top:4px solid #1B3A5B; border-bottom:1px solid #E6E6E6; padding:32px 22px 48px}
.stt.lpk .stt-hero .cover{max-width:720px; margin:0 auto 36px}
.stt.lpk .stt-hero .cover img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid #E6E6E6}
.stt.lpk .stt-hero .eb{display:inline-block; color:#1B3A5B; border:1px solid #1B3A5B; border-radius:999px; padding:4px 14px; font-size:12px; letter-spacing:.08em; opacity:1}
.stt.lpk .stt-hero h2{color:#1A1A1A; font-family:'Noto Serif JP',serif; font-size:clamp(24px,4.4vw,34px); font-weight:700}
.stt.lpk .stt-hero h2 span{color:#BE400F}
.stt.lpk .stt-hero p{color:#5C5C5C; opacity:1}
.stt.lpk .stt-sec.alt{background:#FFFFFF}
.stt.lpk .stt-sec.blue,.stt.lpk .stt-sec:not(.alt):not(.blue){background:#F7F7F7}
.stt.lpk h3.st-h{color:#1A1A1A; font-family:'Noto Serif JP',serif; font-size:24px}
.stt.lpk h3.st-h::after{background:#BE400F; width:32px; height:2px; border-radius:0}
.stt.lpk .stt-lead,.stt.lpk .stt-feat p,.stt.lpk .stt-faq .q p,.stt.lpk .stt-plan .who,.stt.lpk .stt-plan .reg{color:#5C5C5C}
.stt.lpk .stt-disc{color:#5C5C5C}
.stt.lpk .stt-pain,.stt.lpk .stt-feat,.stt.lpk .stt-plan,.stt.lpk .stt-faq .q{border-color:#E6E6E6; border-radius:12px}
.stt.lpk .stt-pain b,.stt.lpk .stt-faq .q b{color:#1B3A5B}
.stt.lpk .stt-arrow{color:#BE400F}
.stt.lpk .stt-feat .n,.stt.lpk .stt-plan .badge{background:#1B3A5B}
.stt.lpk .stt-plan.reco{border-color:#BE400F; box-shadow:none}
.stt.lpk .stt-plan .now{color:#1A1A1A}
.stt.lpk .stt-plan .tag{background:#F7F7F7; color:#BE400F; font-size:12px}
.stt.lpk .stt-plan li::before{color:#BE400F}
.stt.lpk .stt-btn{background:#BE400F; border-radius:4px}
.stt.lpk .stt-btn:hover{background:#A9380D}
.stt.lpk .stt-plan.self .stt-btn{background:#1B3A5B}

/* ============================================================
   Claude Code 立ち上げ作業会（.ccs）：ベージュ地・旧オレンジ → 正典へ
   ============================================================ */
.ccs.lpk{background:#FFFFFF; color:#1A1A1A}
.ccs.lpk .ccs-eye{background:#FFFFFF; padding-top:24px}
.ccs.lpk .ccs-eye img{border-radius:12px}
.ccs.lpk .ccs-hero{background:#FFFFFF; color:#1A1A1A; border-top:4px solid #1B3A5B; border-bottom:1px solid #E6E6E6}
.ccs.lpk .ccs-hero .eb{display:inline-block; color:#1B3A5B; border:1px solid #1B3A5B; border-radius:999px; padding:4px 14px; font-size:12px; opacity:1}
.ccs.lpk .ccs-hero h2{color:#1A1A1A}
.ccs.lpk .ccs-hero h2 span{color:#BE400F}
.ccs.lpk .ccs-hero p{color:#5C5C5C; opacity:1}
.ccs.lpk .ccs-hero .pill{background:#F7F7F7; border-color:#E6E6E6; color:#1A1A1A}
.ccs.lpk .ccs-manga,.ccs.lpk .ccs-author{background:#F7F7F7}
.ccs.lpk .ccs-manga .lb,.ccs.lpk .ccs-plan .who,.ccs.lpk .ccs-plan .tax,.ccs.lpk .ccs-note,.ccs.lpk .ccs-author .ro{color:#5C5C5C}
.ccs.lpk .ccs-lead,.ccs.lpk .ccs-step p,.ccs.lpk .ccs-qa p,.ccs.lpk .ccs-author p{color:#5C5C5C}
.ccs.lpk h3.ch{font-size:24px}
.ccs.lpk h3.ch::after{background:#BE400F; width:32px; height:2px; border-radius:0}
.ccs.lpk .ccs-card,.ccs.lpk .ccs-plan{border-color:#E6E6E6; border-radius:12px}
.ccs.lpk .ccs-sec.alt .ccs-card,.ccs.lpk .ccs-sec.alt .ccs-plan{background:#F7F7F7}
.ccs.lpk .ccs-card b,.ccs.lpk .ccs-step .t{color:#BE400F}
.ccs.lpk .ccs-step,.ccs.lpk .ccs-qa{border-color:#E6E6E6}
.ccs.lpk .ccs-plan.reco{border-color:#BE400F; box-shadow:none}
.ccs.lpk .ccs-plan .badge{background:#BE400F}
.ccs.lpk .ccs-plan .now{color:#1A1A1A}
.ccs.lpk .ccs-btn{background:#BE400F; border-radius:4px; box-shadow:0 2px 0 #8F2F0B}
.ccs.lpk .ccs-btn:hover{background:#A9380D}
.ccs.lpk .ccs-btn.ghost{background:transparent; color:#1B3A5B; box-shadow:none}
.ccs.lpk .ccs-btn.ghost:hover{background:#1B3A5B; color:#FFFFFF}

/* ---- 再計測での手当て（2026-10-09） ---- */
/* 紺の帯（最後の購入節）の中の価格は白に戻す（.lpk .price b の黒が帯の上に効いて読めなかった） */
.lpk .cta .price{color:#D5DDE6}
.lpk .cta .price b{color:#FFFFFF}
/* 自立の教科書：表紙を中央に・11px台の小さい字を12pxへ・薄い字を補助色へ */
.etb.lpk .hero .cover img{width:100%; max-width:100%; margin:0 auto; box-shadow:none}
/* 表紙を入れたので、ヒーローの小さな挿絵（同じ役目）は隠す */
.etb.lpk .hero > img{display:none}
.etb.lpk .tg .tpl li span,.etb.lpk .tg .tpl li.prep{font-size:12px}
.etb.lpk .tg .tpl li.prep{color:#5C5C5C}
.etb.lpk .tg .cn{font-size:12px}
.etb.lpk .tg .tst{color:#1A1A1A !important; border:1px solid var(--gc)}
/* lp系：文字の段・角丸を正典の段（12/14/16/18/24/28/34・角丸4/12/999）に寄せる */
.lp.lpk .lp-cta-title{font-size:24px}
.lp.lpk .lp-cta-price{font-size:34px}
.lp.lpk tbody th{font-size:14px}
.lp.lpk .lp-flow li code,.lp.lpk .lp-code{font-size:12px}
.lp.lpk .lp-code{border-radius:4px}
.lp.lpk .lp-body figure img{border-radius:12px}
/* 自立の教科書：文字の段の端数を寄せる */
.etb.lpk .price .plan{font-size:12px}
.etb.lpk .tg .tpl li{font-size:12px}
.etb.lpk .plog .now b{font-size:28px}
.etb.lpk .tg .tst,.etb.lpk .tg .cn{color:#1A1A1A}
.lp.lpk .lp-price-table td{font-size:14px}
.lp.lpk .lp-body > figure > img{border-radius:12px !important}
/* 自立の教科書：3列の狭い箱に文が積まれて詰まっていた → 1列で読ませる */
.etb.lpk .grow{grid-template-columns:1fr; max-width:640px}
.etb.lpk .grow div{text-align:left}
.etb.lpk .hero h1 .lbl{font-size:16px}
.etb.lpk .tg .tst{color:#1A1A1A !important}
.etb.lpk .hero .symbol{text-shadow:none}

/* 文節で折り返す（カタカナ語が行の途中で割れないように・2026-10-13） */
.lpk h1,.lpk h2,.lpk h3,.lpk p,.lpk li{word-break:auto-phrase}