@charset "utf-8";

/* ==========================================================
   Beaker Studio — LP専用スタイル（暖色）
   地：オフホワイト / 主色：テラコッタ / 濃色：ダークブラウン
   見出し：Zen Old Mincho（明朝）
   ========================================================== */

body.lp{
  --lp-ground:#FBF7F2;
  --lp-surface:#FFFFFF;
  --lp-tint:#F5EDE4;
  --lp-ink:#2A1C14;
  --lp-text:#4A3A30;
  --lp-muted:#71604F;
  --lp-line:#E3D5C6;
  --lp-main:#A94A1B;      /* テラコッタ */
  --lp-main-ink:#8E3D14;
  --lp-soft:#F6E3D4;
  --lp-dark:#2E1D14;      /* CTA背景 */
  --lp-accent:#D9A34A;    /* 金茶（面・装飾用） */
  --lp-accent-ink:#9C6E1C; /* 金茶（文字用） */
  --lp-badge-b:#F7E9D2;
  --lp-scrim-a:rgba(245,237,228,.96);   /* 文字側の縁：地になじませる */
  --lp-scrim-b:rgba(245,237,228,.42);
  --lp-scrim-c:rgba(245,237,228,.10);   /* 外側：写真がはっきり見える */
  --lp-serif:"Zen Old Mincho",'Hiragino Mincho ProN','Yu Mincho',serif;

  background:var(--lp-ground);
  color:var(--lp-text);
}

@media (prefers-color-scheme:dark){
  body.lp{
    --lp-ground:#17110D;
    --lp-surface:#20180F;
    --lp-tint:#2A1F16;
    --lp-ink:#F3EAE0;
    --lp-text:#D3C4B6;
    --lp-muted:#9C8A7B;
    --lp-line:#3A2C21;
    --lp-main:#E08A52;
    --lp-main-ink:#F0A876;
    --lp-soft:#332217;
    --lp-dark:#120C08;
    --lp-accent:#E0B063;
    --lp-accent-ink:#E8BE78;
    --lp-badge-b:#3A2A16;
    --lp-scrim-a:rgba(42,31,22,.96);
    --lp-scrim-b:rgba(42,31,22,.46);
    --lp-scrim-c:rgba(42,31,22,.16);
  }
}

/* ==========================================================
   Winスクール記事用パレット（body.lp.lp-win）
   紹介先のブランド色に合わせる：
     マゼンタ #E62A6D（公式サイトの全CTAの色）
     シアン   #00BCD2（ロゴ・装飾）
     濃紺     #0C0626（本文・見出し）
     淡面     #F2F8F9
   ※ボイトレ記事（body.lp のみ）は暖色のまま変えない
   ========================================================== */
/* 2026-09-15：紹介先 winner.winschool.jp/python/ の描画結果から採取した色に合わせた。
   白地 #FFFFFF／セクション地 #F0F0F1／本文 #707070／見出し #000・#333／
   申込ボタン #467AA3／強調・小ボタン #FD4056／装飾ミント #2DC6A1・クリーム #FEF4E4。
   文字に使う色（*-ink）は地の上で4.5:1を満たす濃さに落としてある（実測値は下のコメント） */
body.lp.lp-win{
  --lp-ground:#FFFFFF;
  --lp-surface:#FFFFFF;
  --lp-tint:#F0F0F1;
  --lp-ink:#1A1A1A;
  --lp-text:#3C3C3C;
  --lp-muted:#686868;      /* 公式の本文色 #707070 はセクション地 #F0F0F1 上で4.35:1しか出ないので2段濃くした */
  --lp-line:#DFE0E2;
  --lp-main:#467AA3;       /* 公式の申込ボタン色 */
  --lp-main-ink:#36607F;   /* 文字用。白地で4.5:1以上 */
  --lp-soft:#EAF1F7;
  --lp-dark:#2C4A63;       /* CTA背景 */
  --lp-accent:#FD4056;     /* 公式の強調色 */
  --lp-accent-ink:#C8202F; /* 文字用 */
  --lp-badge-b:#FFE3E6;
  --lp-scrim-a:rgba(240,240,241,.96);
  --lp-scrim-b:rgba(240,240,241,.42);
  --lp-scrim-c:rgba(240,240,241,.10);
}
@media (prefers-color-scheme:dark){
  body.lp.lp-win{
    --lp-ground:#0E1620;
    --lp-surface:#16212D;
    --lp-tint:#1A2733;
    --lp-ink:#EDF3F8;
    --lp-text:#CBD7E1;
    --lp-muted:#95A5B2;
    --lp-line:#2A3947;
    --lp-main:#7FB3D9;
    --lp-main-ink:#A6CCE9;
    --lp-soft:#1D3145;
    --lp-dark:#0A111A;
    --lp-accent:#FF7183;
    --lp-accent-ink:#FF95A3;
    --lp-badge-b:#3B2026;
    --lp-scrim-a:rgba(26,39,51,.96);
    --lp-scrim-b:rgba(26,39,51,.46);
    --lp-scrim-c:rgba(26,39,51,.16);
  }
}
/* リンク文字は main だと地の上で4.1:1しか出ないので濃いほうを使う。
   hover も同じ理由で、明るい main に戻すと 3.63〜4.27 に落ちる（win ライトで16本） */
body.lp.lp-win{--lp-link-h:#254456}
@media (prefers-color-scheme:dark){body.lp.lp-win{--lp-link-h:#C4DFF2}}
body.lp.lp-win a{color:var(--lp-main-ink)}
body.lp.lp-win a:hover{color:var(--lp-link-h)}

/* 共通styleの上書き */
body.lp .pr-bar{background:var(--lp-soft);color:var(--lp-main-ink);border-bottom-color:var(--lp-main)}
body.lp .pr-tag{background:var(--lp-main);color:#fff}
body.lp .site-footer{background:var(--lp-surface);border-top-color:var(--lp-main)}
body.lp .footer-nav a{color:var(--lp-text)}
body.lp .footer-nav a:hover{color:var(--lp-main)}
body.lp.lp-win .footer-nav a:hover{color:var(--lp-link-h)}
body.lp .footer-owner{color:var(--lp-muted)}
body.lp .footer-owner b{color:var(--lp-text)}
body.lp .copyright{color:var(--lp-muted);border-top-color:var(--lp-line)}
body.lp a{color:var(--lp-main)}
body.lp a:hover{color:var(--lp-main-ink)}
body.lp strong{color:var(--lp-ink)}
body.lp .skip,body.lp a.skip{background:var(--lp-main);color:#fff}
body.lp .updated{color:var(--lp-muted)}

/* ---------- PR帯（屋号＝広告の主体者を明示。リンクにはしない） ---------- */
.pr-bar .pr-bar-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:9px 22px}
.pr-brand{display:inline-flex;align-items:center;gap:7px;flex:none;color:var(--lp-ink)}
.pr-brand .brand-mark{width:19px;height:19px;color:var(--lp-main);flex:none}
.pr-brand b{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.01em}
.pr-note{flex:1 1 320px;min-width:0}
body.lp .pr-bar{background:var(--lp-soft);color:var(--lp-main-ink);border-bottom:1px solid var(--lp-main)}
@media (max-width:600px){
  .pr-bar .pr-bar-in{gap:6px 10px;padding:7px 22px}
  .pr-bar .pr-note{flex:1 1 auto;font-size:12px;line-height:1.6}
  .pr-brand b{font-size:13px}
}

/* ---------- HERO ---------- */
.lp-hero{position:relative;overflow:hidden;padding:78px 0 64px;background:var(--lp-tint)}
.lp-hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 80% at 12% 0%, color-mix(in srgb,var(--lp-main) 7%,transparent) 0%, transparent 70%),
    radial-gradient(50% 70% at 100% 20%, color-mix(in srgb,var(--lp-accent) 9%,transparent) 0%, transparent 70%);
}

/* ---------- ヒーロー背景スライド ----------
   文字の上に写真を重ねず、領域を分ける。
   PC＝右側／モバイル＝上帯。境目は mask でぼかす。          */
.hero-slides{
  position:absolute;top:0;right:0;bottom:0;left:auto;width:52%;
  overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 38%);
}
.hero-slide{
  position:absolute;inset:0;display:block;
  opacity:0;transition:opacity 1.5s ease-in-out;
}
.hero-slide img{
  width:100%;height:100%;object-fit:cover;object-position:center 34%;display:block;
}
.hero-slide.is-on{opacity:1}
.hero-scrim{
  position:absolute;top:0;right:0;bottom:0;left:auto;width:52%;
  pointer-events:none;z-index:1;
  background:linear-gradient(90deg,var(--lp-scrim-a) 0%,var(--lp-scrim-b) 34%,var(--lp-scrim-c) 100%);
}
.lp-hero-in{position:relative;z-index:2;max-width:820px}
@media (min-width:961px){.lp-hero-in{max-width:min(560px,52%);margin-left:0;margin-right:auto}}
@media (max-width:960px) and (min-width:761px){
  .hero-slides,.hero-scrim{width:44%}
  .lp-hero-in{max-width:none;padding-right:46%}
}
@media (max-width:760px){
  /* モバイルは上帯にする（文字は帯の下）。
     写真をはっきり見せ、下端だけ地色になじませる。 */
  /* 高さは .lp-hero の padding-top と必ず一致させる。ずらすと文字が写真に乗る */
  .hero-slides,.hero-scrim{left:0;right:0;width:auto;bottom:auto;height:96px}
  /* 写真はそのまま見せ、下端だけ地色になじませる */
  .hero-slides{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 89%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 89%,transparent 100%);
  }
  .hero-scrim{
    background:linear-gradient(to bottom,
      transparent 0%, transparent 78%,
      var(--lp-scrim-b) 93%, var(--lp-scrim-a) 100%);
  }
  .hero-slide img{object-position:center center}
  /* 写真帯を96pxに詰める。PR行を主ボタンの前へ出したぶんの高さを、
     文字が1つも無い上部の助走から取り戻す（LINE実効700px内にCTAを収める） */
  .lp-hero{padding-top:96px;padding-bottom:36px}
  .lp-hero-in{padding-right:22px}
}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}}
.lp-hero-imgnote{display:inline-block;margin-top:3px;font-size:11px}
.lp-eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--display);
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lp-main);margin-bottom:20px;
}
.lp-eyebrow::before{content:"";width:26px;height:2px;background:var(--lp-main);border-radius:2px}
.lp-hero h1{
  font-family:var(--lp-serif);font-weight:700;
  font-size:clamp(29px,5.4vw,54px);line-height:1.38;letter-spacing:.01em;
  color:var(--lp-ink);margin:0 0 22px;text-wrap:balance;
}
.lp-hero h1 em{font-style:normal;color:var(--lp-main);position:relative;white-space:nowrap}
.lp-hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.08em;height:.22em;
  background:color-mix(in srgb,var(--lp-accent) 45%,transparent);z-index:-1;border-radius:2px;
}
.lp-lede{font-size:17px;line-height:2;max-width:60ch;margin:0 0 30px;color:var(--lp-text)}
.lp-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.lp-hero-note{font-family:var(--mono);font-size:11.5px;color:var(--lp-muted);margin:0}

/* ---------- ボタン ---------- */
.lp-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:2px;text-decoration:none;
  font-weight:700;font-size:15px;font-family:inherit;border:2px solid transparent;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.lp-btn .ar{width:16px;height:16px;flex:none}
body.lp .lp-btn-main,body.lp a.lp-btn-main{background:var(--lp-main);color:#fff}
body.lp .lp-btn-main:hover,body.lp a.lp-btn-main:hover{background:var(--lp-main-ink);color:#fff}
body.lp .lp-btn-ghost,body.lp a.lp-btn-ghost{background:transparent;color:var(--lp-main);border-color:var(--lp-main)}
body.lp .lp-btn-ghost:hover,body.lp a.lp-btn-ghost:hover{background:var(--lp-main);color:#fff}

/* ---------- セクション ---------- */
.lp-sec{padding:76px 0}
.lp-sec-tint{background:var(--lp-tint)}
.lp-kicker{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.22em;
  color:var(--lp-main);margin:0 0 12px;
}
.lp-kicker.on-dark{color:var(--lp-accent)}
body.lp .lp-sec h2,body.lp .lp-cta h2{
  font-family:var(--lp-serif);font-weight:700;
  font-size:clamp(22px,3.4vw,34px);line-height:1.5;color:var(--lp-ink);
  margin:0 0 16px;padding:0;border:none;text-wrap:balance;
}
body.lp .lp-sec h2::after,body.lp .lp-cta h2::after{display:none}
.lp-sub{font-size:15.5px;line-height:1.95;color:var(--lp-text);max-width:66ch;margin:0 0 30px}
body.lp .lp-sec h3{color:var(--lp-ink)}

/* テーブル・callout・checklist の色 */
body.lp .tscroll{border-color:var(--lp-line);background:var(--lp-surface)}
body.lp thead th{background:var(--lp-soft);color:var(--lp-main-ink);border-bottom-color:var(--lp-line)}
body.lp tbody th{background:var(--lp-tint);color:var(--lp-ink)}
body.lp th,body.lp td{border-bottom-color:var(--lp-line)}
body.lp .callout{background:var(--lp-surface);border-color:var(--lp-line);border-left-color:var(--lp-main)}
body.lp .callout.warn{background:var(--lp-soft);border-color:color-mix(in srgb,var(--lp-main) 30%,transparent);--co-c:var(--lp-main-ink)}
body.lp .callout-label{color:var(--lp-main-ink)}
body.lp .callout-label::before{background:var(--lp-main-ink)}
body.lp .checklist li::before{border-color:var(--lp-main);background:var(--lp-soft)}
body.lp .checklist li strong{color:var(--lp-ink)}

/* ---------- スクールカード ---------- */
.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px}
.sc-card{
  background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:4px;
  padding:30px 26px;border-top:4px solid var(--sc-c,var(--lp-main));
  display:flex;flex-direction:column;gap:14px;
}
.sc-a{--sc-c:var(--lp-main)}
.sc-b{--sc-c:var(--lp-accent)}
body.lp .sc-b .sc-spec dd strong{color:var(--lp-accent-ink)}
.sc-ico{width:52px;height:52px;color:var(--sc-c)}
.sc-ico svg{width:100%;height:100%}
.sc-card h3{
  font-family:var(--lp-serif);font-weight:700;font-size:22px;
  margin:0;color:var(--lp-ink);line-height:1.4;
}
.sc-spec{margin:0;display:flex;flex-direction:column;gap:0}
.sc-spec > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--lp-line);
}
.sc-spec > div:last-child{border-bottom:none}
.sc-spec dt{font-size:13.5px;color:var(--lp-muted);flex:none}
.sc-spec dd{margin:0;font-size:15px;color:var(--lp-ink);text-align:right;line-height:1.6}
.sc-spec dd strong{font-size:19px;color:var(--sc-c)}
.sc-spec dd small{display:block;font-size:11.5px;color:var(--lp-muted);margin-top:2px}
.sc-note{font-size:13.5px;line-height:1.85;color:var(--lp-text);margin:0}

/* ---------- 診断 ---------- */
body.lp .dx{background:var(--lp-surface);border-color:var(--lp-line)}
body.lp .dx-q legend{color:var(--lp-ink)}
body.lp .dx-n{background:var(--lp-soft);color:var(--lp-main-ink)}
body.lp .dx-q label{border-color:var(--lp-line)}
body.lp .dx-q label:hover{border-color:var(--lp-main)}
body.lp .dx-q label:has(input:checked){border-color:var(--lp-main);background:var(--lp-soft)}
body.lp .dx-q input[type=radio]{accent-color:var(--lp-main)}
body.lp .dx-q input[type=radio]:checked+span{color:var(--lp-ink)}
body.lp .dx-result{background:var(--lp-surface);border-color:var(--lp-line);border-left-color:var(--lp-main)}
body.lp .dx-head h3{font-family:var(--lp-serif);font-size:24px;color:var(--lp-ink)}
body.lp .dx-badge{
  align-self:flex-start;display:inline-block;
  /* 11.5px→13px。「状態チップだから装飾」とクラス名で分類したのが誤りだった。
     win の60分岐のうち20分岐で中身が「確認が必要です」になり、
     21px の給付率（最大80%等）に対する唯一の打消しとして機能する＝1.83倍の反転。
     .dxp-l li small b で直したのと同じ構図。描画される文字で分類すること */
  font-size:13px;font-weight:700;letter-spacing:.06em;line-height:1.6;
  padding:3px 10px;border-radius:3px;
  background:var(--lp-tint);color:var(--lp-muted);
}
body.lp .dx-badge.is-a{background:var(--lp-soft);color:var(--lp-main-ink)}
body.lp .dx-badge.is-b{background:var(--lp-badge-b);color:var(--lp-main-ink)}
body.lp .dx-badge.is-even{background:var(--lp-tint);color:var(--lp-muted)}
body.lp .dx-reasons li::before{background:var(--lp-main)}
body.lp .dx-reasons li.dx-counter{color:var(--lp-muted)}
body.lp .dx-reasons li.dx-counter::before{background:var(--lp-muted)}
body.lp .dx-note{color:var(--lp-muted);border-top-color:var(--lp-line)}
.dx-cta-line{margin:20px 0 0}
.dx-go{align-self:flex-start;border:none}

/* ---------- 条件別 ---------- */
.fit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:20px}
.fit-item{
  background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:4px;padding:26px 24px;
}
.fit-n{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--lp-main);color:#fff;
  font-family:var(--display);font-size:15px;font-weight:600;margin-bottom:12px;
}
.fit-item h3{font-family:var(--lp-serif);font-size:18px;margin:0 0 10px;line-height:1.5;color:var(--lp-ink)}
.fit-item p{font-size:14px;line-height:1.85;margin:0 0 10px}
.fit-why{font-size:12.5px;color:var(--lp-muted);border-top:1px dashed var(--lp-line);padding-top:10px;margin:0}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{
  background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:4px;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 52px 19px 22px;position:relative;
  font-weight:700;font-size:15.5px;color:var(--lp-ink);line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--lp-main);border-bottom:2.5px solid var(--lp-main);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq summary:hover{background:var(--lp-tint)}
.faq summary:focus-visible{outline:2px solid var(--lp-main);outline-offset:-2px}
.faq details p{margin:0;padding:0 22px 22px;font-size:14.5px;line-height:1.9;max-width:none}

/* ---------- CTA ---------- */
.lp-cta{background:var(--lp-dark);padding:80px 0;color:#F3EAE0}
.lp-cta h2{color:#F8F1E8!important}
.lp-cta-lead{font-size:15.5px;line-height:1.95;color:#D8C9BB;max-width:64ch;margin:0 0 34px}
body.lp .lp-cta-lead strong{color:#F8F1E8}
.cta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px;margin-bottom:28px}
.cta-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(243,234,224,.18);
  border-radius:4px;padding:28px 24px;display:flex;flex-direction:column;gap:14px;
}
.cta-card h3{
  font-family:var(--lp-serif);font-size:20px;margin:0;color:#F8F1E8;line-height:1.4;
}
.cta-card p{font-size:13.5px;line-height:1.85;color:#CDBCAD;margin:0;flex:1}
body.lp .cta-slot a,body.lp .dx-cta-slot a{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--lp-accent);color:var(--lp-dark);
  padding:15px 22px;border-radius:2px;text-decoration:none;
  font-weight:700;font-size:14.5px;line-height:1.5;
  transition:background .18s ease;
}
body.lp .cta-slot a:hover,body.lp .dx-cta-slot a:hover{background:#EBB763;color:var(--lp-dark)}
body.lp .cta-slot a:focus-visible,body.lp .dx-cta-slot a:focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}
body.lp .cta-slot img{display:block;width:1px;height:1px}
body.lp .dx-cta-slot a{background:var(--lp-main);color:#fff}
body.lp .dx-cta-slot a:hover{background:var(--lp-main-ink);color:#fff}
.lp-cta-note{font-size:12.5px;line-height:1.85;color:#A8968A;margin:0;max-width:64ch}

/* ---------- 写真 ---------- */
body.lp .photo-figure figcaption{color:var(--lp-muted)}
body.lp .photo-figure img{background:var(--lp-tint)}

@media (max-width:760px){
  /* 狭幅では見出しの強調部を折り返す（nowrap のままだと hero の overflow:hidden で欠ける）。
     境界は元は520pxだったが、h1を29pxに固定するのは760px以下なので 521〜760px に
     「29px・折り返し不可」の帯が残っていた。強調部が17字ある python-winner では、
     521px＋WCAG1.4.12の文字間隔で画面右端から53px欠けることを実測（2026/09/14）。
     joho・vocal の強調部は7〜9字＝最大261pxなので、この帯でも折り返さず見た目は変わらない */
  .lp-hero h1 em{white-space:normal;display:inline-block}
}
@media (max-width:760px){
  .lp-sec,.lp-cta{padding:54px 0}
  }
@media (prefers-color-scheme:dark){
  body.lp .pr-tag,
  body.lp .lp-btn-main,body.lp a.lp-btn-main,body.lp button.lp-btn-main,
  body.lp .lp-btn-main:hover,body.lp a.lp-btn-main:hover,
  body.lp .lp-btn-ghost:hover,body.lp a.lp-btn-ghost:hover,
  body.lp .fit-n{color:#17110D}
  body.lp .skip,body.lp a.skip{color:#17110D}
}
@media (prefers-reduced-motion:reduce){
  .lp-btn,.faq summary::after{transition:none}
}

/* ---------- 追記：レビュー指摘の修正 ---------- */
/* .tscroll-hint は削除。要素は3ページとも0個で、かつ min-width:761px と
   max-width:760px の両方に display:none があり、どの幅でも表示され得なかった */
body.lp .tscroll{position:relative;background-image:
  linear-gradient(to right,var(--lp-surface),rgba(255,255,255,0) 24px),
  linear-gradient(to left,var(--lp-surface),rgba(255,255,255,0) 24px),
  linear-gradient(to right,rgba(42,28,20,.13),rgba(42,28,20,0) 12px),
  linear-gradient(to left,rgba(42,28,20,.13),rgba(42,28,20,0) 12px);
  background-position:0 0,100% 0,0 0,100% 0;background-repeat:no-repeat;
  background-size:34px 100%,34px 100%,12px 100%,12px 100%;background-attachment:local,local,scroll,scroll;
}
body.lp button:focus-visible{outline:2px solid var(--lp-main);outline-offset:2px}

/* 診断：未回答アラート・選択肢の補足・結果CTA */
.dx-alert{
  background:var(--lp-soft);border-left:3px solid var(--lp-main);color:var(--lp-main-ink);
  font-size:14px;line-height:1.8;padding:12px 16px;margin:0;border-radius:2px;
}
body.lp .dx-q label span small{
  display:block;font-size:12px;color:var(--lp-muted);margin-top:3px;font-weight:400;
}
.dx-cta{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 0;padding-top:20px;border-top:1px dashed var(--lp-line)}
.dx-cta-item{display:flex;flex-direction:column;gap:8px;flex:1 1 240px}
/* 12.5px→13px。同じカード内の .cb-pr / .cb-note が13pxなので、
   成果リンク直上の校名（識別子）だけが脚注より小さいという反転になっていた。
   .bc-l を13.5pxに上げたときと同じ理由。両立しない線引きは残さない */
.dx-cta-name{font-size:13px;font-weight:700;color:var(--lp-muted)}
.dx-cta-slot a,.dx-cta-item>a{width:100%;justify-content:center}

/* 中間CTA */
.midcta{
  background:var(--lp-surface);border:1px solid var(--lp-line);border-top:3px solid var(--lp-main);
  border-radius:2px;padding:24px 26px;margin:34px 0 0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
}
.midcta-t{margin:0;font-size:14.5px;line-height:1.85;flex:1 1 300px;color:var(--lp-text)}
.midcta-b{margin:0;flex:none}

/* スマホ追従CTA */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  background:var(--lp-dark);border-top:1px solid rgba(243,234,224,.16);
  transform:translateY(110%);visibility:hidden;
  transition:transform .22s ease,visibility 0s linear .22s;
}
.stickybar.is-on{transform:translateY(0);visibility:visible;transition-delay:0s,0s}
.stickybar-in{
  width:100%;max-width:1080px;margin:0 auto;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.stickybar-t{font-size:12.5px;line-height:1.5;color:#D8C9BB;flex:1}
@media (min-width:761px){.stickybar-t{font-size:14px}}
body.lp .stickybar .lp-btn-main{background:var(--lp-accent);color:var(--lp-dark);padding:12px 18px;font-size:14px;flex:none}
@media (max-width:760px){
  .midcta{padding:20px;flex-direction:column;align-items:stretch}
  .midcta-t{flex:none}          /* column時は flex-basis が高さになるため解除 */
  .midcta-b .lp-btn{width:100%;justify-content:center;flex:none}
}
@media (prefers-reduced-motion:reduce){.stickybar{transition:none}}

/* ---------- ヒーロー分割時のタイポ調整（記述順で後勝ちさせる） ---------- */
@media (min-width:961px){
  .lp-hero{padding:52px 0 52px}
  .lp-hero h1{font-size:clamp(30px,2.9vw,40px);line-height:1.44;margin-bottom:16px}
  .lp-lede{font-size:15px;line-height:1.9;margin-bottom:24px}
  .lp-eyebrow{margin-bottom:16px}
  .lp-hero-cta{margin-bottom:14px}
}

/* ---------- モバイル：ファーストビューにCTAを収める ---------- */
@media (max-width:760px){
  .lp-eyebrow{margin-bottom:14px}
  .lp-hero h1{font-size:clamp(25px,7.1vw,29px);margin-bottom:14px;line-height:1.38}
  .lp-lede{font-size:15px;line-height:1.85;margin-bottom:20px}
  .lp-hero-cta{gap:10px;margin-bottom:14px}
  .lp-hero-cta .lp-btn{width:100%;justify-content:center;padding:14px 22px}
}

/* ---------- 末尾の余白調整 ----------
   共通styleの main{padding-bottom:80px} は記事ページ用。
   LPは最終セクション自身が余白を持つので、二重になるぶんを消す。 */
body.lp main{padding-bottom:0}
body.lp #source{padding-bottom:56px}

/* ---------- ② 先に結論 ---------- */
.sumlist{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:14px}
.sumlist li{
  background:var(--lp-surface);border:1px solid var(--lp-line);
  border-left:4px solid var(--lp-line);border-radius:2px;padding:20px 22px;
}
.sumlist li.sum-a{border-left-color:var(--lp-main)}
.sumlist li.sum-b{border-left-color:var(--lp-accent)}
.sumlist li.sum-c{border-left-color:var(--lp-ink)}
.sum-tag{
  display:block;font-size:12px;font-weight:700;letter-spacing:.03em;
  color:var(--lp-muted);margin-bottom:5px;
}
.sumlist li>b{
  display:block;font-family:var(--lp-serif);font-size:20px;line-height:1.4;
  color:var(--lp-ink);margin-bottom:9px;
}
.sumlist li p{margin:0 0 11px;font-size:14.5px;line-height:1.85;color:var(--lp-text)}
.sumlist li>a{
  font-size:13.5px;font-weight:700;text-decoration:none;
  border-bottom:1.5px solid currentColor;padding-bottom:1px;
}
.sum-note{
  background:var(--lp-soft);border-radius:2px;padding:16px 20px;margin:0 0 30px;
  font-size:14px;line-height:1.85;color:var(--lp-text);
}

/* 目次 */
.toc{border-top:1px dashed var(--lp-line);padding-top:22px}
.toc-t{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lp-muted);margin:0 0 12px;
}
.toc ol{
  list-style:none;counter-reset:toc;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:2px 26px;
}
.toc li{counter-increment:toc}
.toc a{
  display:flex;gap:10px;align-items:baseline;
  padding:8px 2px;font-size:14px;text-decoration:none;color:var(--lp-text);
  border-bottom:1px solid transparent;
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--display);font-size:11px;font-weight:600;color:var(--lp-main);flex:none;
}
.toc a:hover{color:var(--lp-main);border-bottom-color:var(--lp-line)}

/* ---------- 最終CTA前のリスク明示 ---------- */
.reversal{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-direction:column;gap:10px}
.reversal li{
  position:relative;padding-left:30px;font-size:14.5px;line-height:1.8;color:#D8C9BB;
}
.reversal li b{color:#F8F1E8}
.reversal li::before{
  content:"";position:absolute;left:2px;top:.42em;width:15px;height:9px;
  border-left:2.4px solid var(--lp-accent);border-bottom:2.4px solid var(--lp-accent);
  transform:rotate(-45deg);
}
.cta-micro{font-size:13px;line-height:1.8;color:#CDBCAD;margin:0 0 16px}
@media (max-width:760px){
  .sumlist li{padding:17px 18px}
  .sumlist li>b{font-size:18px}
  .toc ol{gap:0}
}

/* ---------- 1回あたり・年間総額 ---------- */
.unit-h{
  font-family:var(--lp-serif);font-size:19px;color:var(--lp-ink);
  margin:44px 0 8px;line-height:1.5;
}
.unit-lead{font-size:14.5px;line-height:1.85;color:var(--lp-text);margin:0 0 16px}
.yearcalc{
  background:var(--lp-surface);border:1px solid var(--lp-line);
  border-top:3px solid var(--lp-main);border-radius:2px;
  padding:24px 26px;margin:22px 0 0;
}
.yc-h{
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--lp-muted);
  margin:0 0 16px;
}
.yc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}
.yc-item{
  border-left:3px solid var(--lp-line);padding:2px 0 2px 15px;
  display:flex;flex-direction:column;gap:5px;
}
.yc-item.yc-a{border-left-color:var(--lp-main)}
.yc-item.yc-b{border-left-color:var(--lp-accent)}
.yc-name{font-size:13px;font-weight:700;color:var(--lp-ink)}
.yc-item>b{
  font-family:var(--lp-serif);font-size:27px;line-height:1.25;color:var(--lp-ink);
  font-variant-numeric:tabular-nums;
}
.yc-calc{font-size:12px;line-height:1.7;color:var(--lp-muted)}
.yc-diff{
  margin:18px 0 0;padding-top:16px;border-top:1px dashed var(--lp-line);
  font-size:15px;color:var(--lp-text);
}
.yc-diff b{
  font-family:var(--lp-serif);font-size:21px;color:var(--lp-main-ink);
  font-variant-numeric:tabular-nums;
}
.yc-note{
  margin:14px 0 0;font-size:13px;line-height:1.85;color:var(--lp-text);
  background:var(--lp-soft);border-radius:2px;padding:14px 16px;
}
@media (max-width:760px){
  .yearcalc{padding:20px}
  .yc-item>b{font-size:24px}
}

/* ---------- ⑦ 料金表で分からないこと ---------- */
.pit{list-style:none;counter-reset:pit;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:18px}
.pit li{
  position:relative;background:var(--lp-surface);border:1px solid var(--lp-line);
  border-radius:2px;padding:22px 24px 20px 26px;
}
.pit-n{
  display:inline-block;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.14em;color:var(--lp-main);background:var(--lp-soft);
  padding:3px 9px;border-radius:2px;margin-bottom:9px;
}
body.lp .pit li h3{
  font-family:var(--lp-serif);font-size:18px;line-height:1.52;color:var(--lp-ink);
  margin:0 0 10px;
}
.pit li p{margin:0 0 10px;font-size:14.5px;line-height:1.88;color:var(--lp-text)}
.pit li p:last-child{margin-bottom:0}
.pit-do{
  background:var(--lp-tint);border-left:3px solid var(--lp-accent);
  padding:11px 15px;border-radius:0 2px 2px 0;
  font-size:13.5px!important;line-height:1.8!important;color:var(--lp-ink)!important;
}
.pit-note{
  font-size:13px;line-height:1.85;color:var(--lp-text);
  background:var(--lp-soft);border-radius:2px;padding:14px 16px;margin:0;
}
@media (max-width:760px){
  .pit li{padding:19px 18px}
  body.lp .pit li h3{font-size:16.5px}
}

/* ---------- はじめての人へ ---------- */
.worry{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:14px}
.worry li{
  background:var(--lp-surface);border:1px solid var(--lp-line);
  border-left:3px solid var(--lp-accent);border-radius:2px;padding:19px 22px;
}
.worry li b{
  display:block;font-family:var(--lp-serif);font-size:17px;line-height:1.5;
  color:var(--lp-ink);margin-bottom:8px;
}
.worry li span{display:block;font-size:14.5px;line-height:1.88;color:var(--lp-text)}
.worry-op{
  background:var(--lp-tint);border-radius:2px;padding:18px 20px;margin:0;
  font-size:14px;line-height:1.9;color:var(--lp-text);
}
/* .op-tag は「ここは運営者の解釈」という開示。11.5px→13px。
   ※以前ここに「このクラスだけが床を割っていた」と書いたが誤り。lp.css には13px未満の
   宣言が30行以上あり、「13pxの床」はページ全体の性質として存在したことがない。
   このファイル末尾で、開示を担うクラスに限って13pxへ揃えている（.pr-tag / .updated /
   .pc-tag / .callout-label / .nb-t / .nb-n / .lp-hero-imgnote / .dx-q label span small）。
   ★実際に適用している規則（2026/09/12 に実態へ合わせて書き直した）：
     **13px床は和文の内容テキスト全部に適用する。隣接する和文と冗長な17文字以下の
       Latin/数字ラベルは対象外。**
     対象外に残るのは26件：.lp-kicker（STEP 1-3/CHECK/FREE TRIAL/TRIAL LESSON）11px、
     .dx-n（Q1-Q4）11.5px、.pit-n（01-04）11px、div.copyright（© 2026 Beaker Studio）12px。
     いずれも隣接する和文の見出し・設問文・並び順と冗長で、字形が潰れる和文ではない。
     ⚠ 以前ここに「.lp-eyebrow / .lp-kicker は対象外＝床は開示系にのみ適用」と書いていたが、
       .lp-eyebrow は和文の内容テキスト（スクール名・対象読者）でh1直上にあり性質が違う。
       この古い規則文が「床違反0件」という誤報を何度も生んだ。 */
.op-tag{
  /* 700→500。992字ぶんが weight>=600 で描画され、それだけでページの太字量の4.2%を占めていた。
     濃い地に明るい文字のチップなので、500でも識別性は落ちない（コントラストは不変） */
  display:inline-block;font-size:13px;font-weight:500;letter-spacing:.03em;
  background:var(--lp-ink);color:var(--lp-ground);
  padding:3px 10px;border-radius:2px;margin-right:10px;
}

/* ---------- 3ステップ ---------- */
.steps{
  list-style:none;counter-reset:st;padding:0;margin:18px 0 12px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px;
}
.steps li{
  background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:2px;
  padding:18px 18px 16px;position:relative;
}
.st-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--lp-main);color:#fff;
  font-family:var(--display);font-size:13px;font-weight:600;margin-bottom:10px;
}
.steps li b{display:block;font-weight:700;font-size:15px;color:var(--lp-ink);margin-bottom:6px}
.steps li span:not(.st-n){display:block;font-size:13px;line-height:1.8;color:var(--lp-text)}
.steps-note{font-size:13px;line-height:1.85;color:var(--lp-text);margin:0}
@media (prefers-color-scheme:dark){body.lp .st-n{color:#17110D}}
@media (max-width:760px){.worry li{padding:17px 18px}.worry li b{font-size:16px}}

/* ---------- 比較表 ----------
   PC：2校の列を等幅にする（内容量で幅が変わらないように）
   スマホ：横スクロールをやめ、1行＝1カードに積む            */
body.lp .tscroll table{table-layout:fixed;width:100%;min-width:0}
body.lp .tscroll th,body.lp .tscroll td{word-break:break-word;overflow-wrap:anywhere;white-space:normal}
body.lp .tscroll thead th:first-child,
body.lp .tscroll tbody th{width:22%}
body.lp .tscroll thead th:not(:first-child){width:39%}
/* 4列（回数／シアー／NAYUTAS／差）の単価表 */
body.lp .tscroll table:has(thead th:nth-child(4)) thead th:first-child{width:22%}
body.lp .tscroll table:has(thead th:nth-child(4)) thead th:nth-child(2),
body.lp .tscroll table:has(thead th:nth-child(4)) thead th:nth-child(3){width:29%}
body.lp .tscroll table:has(thead th:nth-child(4)) thead th:nth-child(4){width:20%}
/* 5列（コース／総額／時間・期限／単価／実質負担）の一覧表 */
body.lp .tscroll table:has(thead th:nth-child(5)) thead th:first-child{width:24%}
body.lp .tscroll table:has(thead th:nth-child(5)) thead th:nth-child(2){width:15%}
body.lp .tscroll table:has(thead th:nth-child(5)) thead th:nth-child(3){width:17%}
body.lp .tscroll table:has(thead th:nth-child(5)) thead th:nth-child(4){width:13%}
body.lp .tscroll table:has(thead th:nth-child(5)) thead th:nth-child(5){width:31%}
/* 2列（項目／記載）の表 */
body.lp .tscroll table:has(thead th:nth-child(2)):not(:has(thead th:nth-child(3))) thead th:first-child{width:28%}
body.lp .tscroll table:has(thead th:nth-child(2)):not(:has(thead th:nth-child(3))) thead th:nth-child(2){width:72%}

@media (max-width:760px){
  body.lp .tscroll{overflow-x:visible;border:none;background:transparent;
    background-image:none;box-shadow:none;padding:0}
  body.lp .tscroll table,body.lp .tscroll tbody,body.lp .tscroll tr,
  body.lp .tscroll th,body.lp .tscroll td{display:block;width:auto!important}
  body.lp .tscroll thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.lp .tscroll tr{
    background:var(--lp-surface);border:1px solid var(--lp-line);
    border-radius:2px;margin-bottom:12px;overflow:hidden;
  }
  body.lp .tscroll tbody th{
    background:var(--lp-soft);color:var(--lp-main-ink);
    font-size:14px;padding:11px 15px;border-bottom:1px solid var(--lp-line);
    white-space:normal;
  }
  body.lp .tscroll td{
    padding:12px 15px 13px;border-bottom:1px solid var(--lp-line);
    font-size:14.5px;line-height:1.8;
  }
  body.lp .tscroll tr td:last-child{border-bottom:none}
  body.lp .tscroll td[data-label]::before{
    content:attr(data-label);display:block;
    font-size:13px;font-weight:700;letter-spacing:.03em;
    color:var(--lp-muted);margin-bottom:3px;
  }
}

/* ---------- ヒーロー：対象と比較項目を明示 ---------- */
.hero-target{
  display:inline-block;font-size:13px;font-weight:700;line-height:1.6;
  color:var(--lp-main-ink);background:var(--lp-soft);
  padding:6px 14px;border-radius:2px;margin:0 0 16px;
}
.hero-axes{
  font-size:12.5px;line-height:1.9;color:var(--lp-muted);
  margin:0 0 22px;max-width:56ch;
  border-left:2px solid var(--lp-line);padding-left:13px;
}
.ax-h{
  display:inline-block;font-weight:700;color:var(--lp-ink);
  margin-right:9px;font-size:12px;
}
@media (max-width:760px){
  .hero-target{font-size:12.5px;margin-bottom:12px;padding:5px 12px}
  .hero-axes{font-size:11.5px;line-height:1.78;margin-bottom:14px;padding-left:11px}
}
@media (min-width:961px){
  .lp-hero{padding-top:44px}
}

/* 診断：補足行のインデント */
body.lp .dx-reasons li.dx-sub{padding-left:40px}
body.lp .dx-reasons li.dx-sub::before{left:16px}
body.lp .dx-reasons li.dx-note-li::before{background:var(--lp-accent)}
body.lp .dx-result:focus-visible{outline:2px solid var(--lp-main);outline-offset:3px}

/* ---------- 折りたたみ ---------- */
.more{margin:22px 0 0;border:1px solid var(--lp-line);border-radius:2px;background:var(--lp-surface)}
.more>summary{
  cursor:pointer;list-style:none;padding:16px 44px 16px 20px;position:relative;
  font-size:14.5px;font-weight:700;color:var(--lp-main-ink);line-height:1.6;
}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{
  content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;
  border-right:2.4px solid var(--lp-main);border-bottom:2.4px solid var(--lp-main);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.more[open]>summary::after{transform:translateY(-30%) rotate(225deg)}
.more>summary:hover{background:var(--lp-tint)}
.more>summary:focus-visible{outline:2px solid var(--lp-main);outline-offset:-2px}
.more>*:not(summary){padding:0 20px 20px}
.more .tscroll{margin-top:0}
.more .unit-h{margin-top:20px}
@media (prefers-reduced-motion:reduce){.more>summary::after{transition:none}}

/* ---------- 子どもの料金 ---------- */
.kidgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px;margin:0 0 22px}
.kidcard{background:var(--lp-surface);border:1px solid var(--lp-line);border-top:3px solid var(--lp-line);border-radius:2px;padding:22px 24px}
.kidcard.kid-b{border-top-color:var(--lp-accent)}
.kidcard.kid-a{border-top-color:var(--lp-main)}
.kid-name{display:block;font-size:12.5px;font-weight:700;color:var(--lp-muted);margin-bottom:6px}
.kid-lead{font-size:14.5px;line-height:1.8;color:var(--lp-text);margin:0 0 14px}
.kid-dl{margin:0 0 14px}
.kid-dl>div{display:flex;gap:14px;padding:11px 0;border-bottom:1px dashed var(--lp-line)}
.kid-dl>div:last-child{border-bottom:none}
.kid-dl dt{flex:0 0 40%;font-size:13px;color:var(--lp-text);margin:0}
.kid-dl dt small,.kid-dl dd small{display:block;font-size:11.5px;color:var(--lp-muted);margin-top:2px;line-height:1.7}
.kid-dl dd{flex:1;margin:0}
.kid-dl dd b{font-size:16px;color:var(--lp-ink);font-variant-numeric:tabular-nums}
.kid-x{
  background:var(--lp-tint);border-left:3px solid var(--lp-main);
  padding:13px 15px;margin:0 0 14px;font-size:14px;font-weight:700;color:var(--lp-main-ink);
}
.kid-note{font-size:12.5px;line-height:1.85;color:var(--lp-text);margin:0}
.sum-kid{
  background:var(--lp-soft);border-radius:2px;padding:16px 20px;margin:0 0 16px;
  font-size:14px;line-height:1.85;color:var(--lp-text);
}
.sum-kid a{font-weight:700;white-space:nowrap}

/* ---------- 校舎検索 ---------- */
.access{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:14px;margin:16px 0 14px}
.acc-card{
  display:block;background:var(--lp-surface);border:1px solid var(--lp-line);
  border-radius:2px;padding:18px 20px;text-decoration:none;
  transition:border-color .15s ease,background .15s ease;
}
.acc-card:hover{border-color:var(--lp-main);background:var(--lp-tint)}
.acc-card:focus-visible{outline:2px solid var(--lp-main);outline-offset:2px}
.acc-name{display:block;font-size:12px;font-weight:700;color:var(--lp-muted);margin-bottom:5px}
.acc-card b{display:block;font-size:16px;color:var(--lp-main);margin-bottom:7px}
.acc-m{display:block;font-size:12.5px;line-height:1.75;color:var(--lp-text)}
@media (max-width:760px){
  .kidcard{padding:19px 18px}
  .kid-dl>div{flex-direction:column;gap:4px}
  .kid-dl dt{flex:none}
}

/* 意見ラベルを文末に置く場合の見え方 */
.worry-op .op-tag{margin:0 0 0 10px;vertical-align:baseline}
/* 子どもの年額カード：算出できない側 */
.yc-item.yc-none>b{font-family:var(--sans);font-size:18px;color:var(--lp-muted)}
/* 追従バーの留保 */
.stickybar-t small{display:block;font-size:11px;line-height:1.5;color:#A8968A;margin-top:2px}
/* 表のキャプション（読み上げ用） */
.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}

/* 追従バーが本文の末尾を隠さないための保険（JS側の監視に加えて二重に防ぐ） */
/* 退避余白はファイル末尾の2本に統合した（第49回に死に規則14本を削除）。 */
@media (min-width:761px){
  .midcta-b{display:flex;gap:10px;flex-wrap:wrap;margin:0}
  .midcta-b .lp-btn{flex:1 1 240px;justify-content:center;text-align:center}
}
/* ---------- モバイル：FVにCTAを収める / 追従バーの実高を抑える ---------- */
@media (max-width:760px){
  .hero-target{font-size:12.5px;margin-bottom:12px;padding:5px 12px}
  .hero-axes{font-size:11.5px;line-height:1.78;margin-bottom:14px;padding-left:11px}
  .lp-hero-note{font-size:11px;margin-top:10px}
  /* ボタンは1本になったので2列グリッドは廃止。本文のCTAと同格の大きさにする */
  .lp-hero-cta{display:block}
  .lp-hero-cta .lp-btn{width:100%;justify-content:center;font-size:16px;padding:18px 14px;line-height:1.5}
  /* 追従バー：360pxで4行→2行に。実高128px→約71pxへ */
  .stickybar{padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
  .stickybar-t{font-size:12px;line-height:1.45}
  .stickybar-t small{font-size:10.5px}
  /* 中間CTAの2ボタンは縦積み */
  .midcta-b{display:flex;flex-direction:column;gap:9px}
  .midcta-b .lp-btn{width:100%;flex:none}
}
/* 中間CTA：PR表記とボタン間隔 */
.midcta-pr{font-size:11.5px;color:var(--lp-muted);margin:10px 0 0;line-height:1.7}
.midcta-pr .pr-tag{margin-right:6px}
.yc-calc{display:block;font-size:11.5px;line-height:1.7;color:var(--lp-muted);margin-top:6px;font-weight:400}
/* フォーカスリングをLPパレットに */
body.lp a:focus-visible{outline:2px solid var(--lp-main);outline-offset:3px}
body.lp .dx-q input[type=radio]:focus-visible{outline:2px solid var(--lp-main);outline-offset:2px}
/* タップ領域 44px */
body.lp .sumlist li>a{display:inline-flex;align-items:center;min-height:44px}
body.lp .toc a{padding:9px 2px}
body.lp .footer-nav a{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:760px){
  .lp-hero h1{margin-bottom:10px}
  .lp-lede{margin-bottom:14px}
  .hero-axes{margin-top:14px}
}

/* ==========================================================
   Winスクール記事：配色の補正と、導線用のパーツ
   ========================================================== */

/* ボタンの塗り：#E62A6D は白文字で4.27:1しか出ないので、
   面だけ一段濃くしてAA（4.5:1）を満たす。見た目はほぼ同じ。 */
body.lp.lp-win{--lp-btn:#467AA3;--lp-btn-h:#36607F}
@media (prefers-color-scheme:dark){body.lp.lp-win{--lp-btn:#7FB3D9;--lp-btn-h:#A6CCE9}}
body.lp.lp-win .lp-btn-main,body.lp.lp-win a.lp-btn-main{background:var(--lp-btn)}
body.lp.lp-win .lp-btn-main:hover,body.lp.lp-win a.lp-btn-main:hover{background:var(--lp-btn-h)}
body.lp.lp-win .lp-btn-ghost,body.lp.lp-win a.lp-btn-ghost{color:var(--lp-main-ink);border-color:var(--lp-main)}
body.lp.lp-win .lp-btn-ghost:hover,body.lp.lp-win a.lp-btn-ghost:hover{background:var(--lp-btn);color:#fff}
body.lp.lp-win .dx-cta-slot a{background:var(--lp-btn)}
body.lp.lp-win .dx-cta-slot a:hover{background:var(--lp-btn-h)}
@media (prefers-color-scheme:dark){
  body.lp.lp-win .lp-btn-main,body.lp.lp-win a.lp-btn-main,
  body.lp.lp-win .dx-cta-slot a{color:#1A0A14}
  body.lp.lp-win .lp-btn-main:hover,body.lp.lp-win a.lp-btn-main:hover,
  body.lp.lp-win .dx-cta-slot a:hover{color:#1A0A14}
  body.lp.lp-win .lp-btn-ghost:hover,body.lp.lp-win a.lp-btn-ghost:hover{color:#1A0A14}
}

/* 濃色パネル（CTA帯・追従バー）の文字色を寒色系にそろえる */
body.lp.lp-win .lp-cta{color:#E4E1F4}
body.lp.lp-win .lp-cta h2{color:#FFFFFF!important}
body.lp.lp-win .lp-cta-lead{color:#BFBAD9}
body.lp.lp-win .lp-cta-lead strong{color:#FFFFFF}
body.lp.lp-win .cta-card{background:rgba(255,255,255,.06);border-color:rgba(228,225,244,.20)}
body.lp.lp-win .cta-card h3{color:#FFFFFF}
body.lp.lp-win .cta-card p{color:#C6D7E4}
body.lp.lp-win .lp-cta-note{color:#B7CEDF}
body.lp.lp-win .cta-micro{color:#C6D7E4}
body.lp.lp-win .reversal li b{color:#FFFFFF}
body.lp.lp-win .reversal li::before{border-color:var(--lp-accent)}
body.lp.lp-win .stickybar-t{color:#C6D7E4}
body.lp.lp-win .stickybar-t small{color:#AFC6D8}
body.lp.lp-win .stickybar .lp-btn-main{background:var(--lp-btn);color:#fff}
body.lp.lp-win .cta-slot a{background:var(--lp-btn);color:#fff}
body.lp.lp-win .cta-slot a:hover{background:var(--lp-btn-h);color:#fff}

/* ヒーロー直下の小さな安心表示 */
.hero-microtrust{
  margin:12px 0 0;font-size:12.5px;line-height:1.75;color:var(--lp-muted);
}
.hero-microtrust b{color:var(--lp-ink)}

/* ---------- ここで分かること／相談でしか分からないこと ---------- */
.split{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:16px;margin:26px 0 0;
}
.split-col{
  background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:6px;
  padding:22px 22px 20px;
}
.split-col.is-open{border-color:var(--lp-main);border-width:2px;padding:21px 21px 19px}
.split-h{
  display:flex;align-items:baseline;gap:9px;margin:0 0 14px;
  font-family:var(--lp-serif);font-size:17.5px;line-height:1.45;color:var(--lp-ink);
}
.split-h .split-n{
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  color:var(--lp-muted);flex:none;
}
.split-col.is-open .split-h .split-n{color:var(--lp-main-ink)}
.split-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.split-col li{
  position:relative;padding-left:24px;font-size:14.5px;line-height:1.8;color:var(--lp-text);
}
.split-col li::before{
  content:"";position:absolute;left:2px;top:.52em;width:13px;height:8px;
  border-left:2.2px solid var(--lp-accent-ink);border-bottom:2.2px solid var(--lp-accent-ink);
  transform:rotate(-45deg);
}
.split-col.is-open li::before{
  border:none;width:9px;height:9px;border-radius:50%;
  background:var(--lp-main);top:.62em;left:4px;transform:none;
}
.split-col li b{color:var(--lp-ink)}
.split-after{
  margin:20px 0 0;font-size:15px;line-height:1.9;color:var(--lp-text);
}
.split-after strong{color:var(--lp-ink)}

/* ---------- 公式の記載をそのまま置く安心ブロック ---------- */
.assure{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:14px}
.assure li{
  background:var(--lp-tint);border-left:3px solid var(--lp-accent);border-radius:0 6px 6px 0;
  padding:15px 18px;
}
.assure q{
  display:block;font-size:14.5px;line-height:1.85;color:var(--lp-ink);font-weight:600;quotes:"「" "」";
}
.assure .assure-src{display:block;margin-top:7px;font-size:12px;line-height:1.7;color:var(--lp-muted)}
.assure .assure-src a{word-break:break-all}

/* ---------- 期限の逆算 ---------- */
.deadline{
  background:var(--lp-soft);border:1px solid var(--lp-main);border-radius:6px;
  padding:22px 22px 18px;margin:24px 0 0;
}
.deadline-h{
  margin:0 0 12px;font-family:var(--lp-serif);font-size:19px;line-height:1.5;color:var(--lp-ink);
}
.deadline p{margin:0 0 10px;font-size:14.5px;line-height:1.88;color:var(--lp-text)}
.deadline p:last-child{margin-bottom:0}
.deadline strong{color:var(--lp-main-ink)}
@media (max-width:760px){
  .split-col{padding:18px 17px 16px}
  .split-col.is-open{padding:17px 16px 15px}
  .deadline{padding:18px 17px 15px}
}

/* 申し込みボタンの前に置く「押したあとの流れ」 */
.cta-steps{
  list-style:none;counter-reset:ctastep;padding:0;margin:0 0 20px;
  display:flex;flex-direction:column;gap:12px;
}
.cta-steps li{
  position:relative;padding-left:38px;font-size:13.5px;line-height:1.85;
}
.cta-steps li::before{
  counter-increment:ctastep;content:counter(ctastep);
  position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:12px;font-weight:700;
}
.cta-steps li b{display:block;margin-bottom:2px}
body.lp.lp-win .cta-steps li{color:#C3BEDC}
body.lp.lp-win .cta-steps li b{color:#FFFFFF}
body.lp.lp-win .cta-steps li::before{background:var(--lp-accent);color:#08202A}
body.lp .cta-steps li{color:#CDBCAD}
body.lp .cta-steps li b{color:#F8F1E8}
body.lp .cta-steps li::before{background:var(--lp-accent);color:var(--lp-dark)}
body.lp.lp-win .cta-micro strong,body.lp.lp-win .cta-micro b{color:#FFFFFF}

/* 診断結果の「次にやること」 */
.dx-next{
  margin:20px 0 0;padding:18px 20px 16px;
  background:var(--lp-tint);border-radius:6px;border-left:3px solid var(--lp-main);
}
.dx-next-h{
  margin:0 0 10px;font-family:var(--lp-serif);font-size:17px;line-height:1.5;color:var(--lp-ink);
}
.dx-next p{margin:0 0 10px;font-size:14px;line-height:1.85;color:var(--lp-text)}
.dx-next p:last-child{margin-bottom:0}
.dx-next ul{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:9px}
.dx-next li{position:relative;padding-left:22px;font-size:14px;line-height:1.8;color:var(--lp-text)}
.dx-next li::before{
  content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--lp-main);
}

/* ==========================================================
   縦読みLP用のパーツ（初期表示の文字量を減らし、詳細は畳む）
   ========================================================== */

/* 大きな数字を3つ並べる帯 */
.numband{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:14px;margin:0;
}
.numband li{
  list-style:none;background:var(--lp-surface);border:1px solid var(--lp-line);
  border-radius:10px;padding:20px 18px;text-align:center;
}
.numband .nb-t{display:block;font-size:12.5px;font-weight:700;color:var(--lp-muted);margin-bottom:6px}
.numband .nb-v{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(30px,7vw,42px);line-height:1.1;color:var(--lp-main-ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.numband .nb-v small{font-size:max(13px,.52em);font-weight:600;margin-left:2px}
.numband .nb-n{display:block;margin-top:8px;font-size:12.5px;line-height:1.65;color:var(--lp-text)}

/* 繰り返し置くCTA帯 */
.ctaband{
  margin:0;background:var(--lp-dark);border-radius:12px;
  padding:26px 24px;text-align:center;
}
.ctaband p{margin:0 0 14px;font-size:15px;line-height:1.75;color:#E4E1F4}
.ctaband p b{color:#fff}
.ctaband .cb-slot a{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--lp-btn);color:#fff;text-decoration:none;font-weight:700;
  font-size:16px;line-height:1.5;padding:17px 30px;border-radius:8px;
  min-width:min(340px,100%);transition:background .18s ease;
}
.ctaband .cb-slot a:hover{background:var(--lp-btn-h)}
.ctaband .cb-slot a:focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}
.ctaband .cb-note{margin:12px 0 0;font-size:11.5px;line-height:1.7;color:#9E99BE}
.ctaband .cb-note .pr-tag{margin-right:6px}

/* 金額の前後を大きく見せる */
.bigcompare{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:12px;
  padding:24px 20px;margin:0;
}
.bigcompare .bc-cell{text-align:center;min-width:0}
.bigcompare .bc-l{display:block;font-size:12.5px;font-weight:700;color:var(--lp-muted);margin-bottom:6px}
.bigcompare .bc-n{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(22px,5.2vw,32px);line-height:1.15;font-variant-numeric:tabular-nums;
}
.bigcompare .bc-before .bc-n{color:var(--lp-muted)}
.bigcompare .bc-after .bc-n{color:var(--lp-main-ink)}
.bigcompare .bc-s{display:block;margin-top:5px;font-size:11.5px;line-height:1.6;color:var(--lp-muted)}
.bigcompare .bc-ar{color:var(--lp-accent);font-size:22px;line-height:1;flex:none}
@media (max-width:520px){
  .bigcompare{grid-template-columns:1fr;gap:8px}
  .bigcompare .bc-ar{transform:rotate(90deg)}
}

/* 2〜3枚のカード */
.pcards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:14px;margin:0;
}
.pcards li{
  list-style:none;background:var(--lp-surface);border:1px solid var(--lp-line);
  border-radius:10px;padding:20px 18px;
}
.pcards li.is-pick{border:2px solid var(--lp-main);padding:19px 17px}
.pcards .pc-tag{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  background:var(--lp-badge-b);color:var(--lp-accent-ink);
  padding:3px 9px;border-radius:999px;margin-bottom:9px;
}
.pcards li.is-pick .pc-tag{background:var(--lp-soft);color:var(--lp-main-ink)}
.pcards .pc-h{
  display:block;font-family:var(--lp-serif);font-size:18px;line-height:1.45;
  color:var(--lp-ink);margin:0 0 9px;
}
.pcards p{margin:0 0 8px;font-size:14px;line-height:1.8;color:var(--lp-text)}
.pcards p:last-child{margin-bottom:0}
.pcards .pc-num{
  display:block;font-family:var(--display);font-weight:600;font-size:26px;line-height:1.2;
  color:var(--lp-main-ink);font-variant-numeric:tabular-nums;margin:0 0 6px;
}

/* 折りたたむ詳細（数字の根拠） */
.deep{margin:0;border:1px solid var(--lp-line);border-radius:10px;background:var(--lp-surface);overflow:hidden}
.deep>summary{
  cursor:pointer;list-style:none;padding:15px 18px;font-size:14.5px;font-weight:700;
  color:var(--lp-main-ink);display:flex;align-items:center;gap:9px;
}
.deep>summary::-webkit-details-marker{display:none}
.deep>summary::before{
  content:"";width:9px;height:9px;flex:none;
  border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s ease;
}
.deep[open]>summary::before{transform:rotate(-135deg) translateY(-2px)}
.deep>summary:hover{background:var(--lp-tint)}
.deep .deep-in{padding:4px 18px 18px;border-top:1px solid var(--lp-line)}
.deep .deep-in>*:first-child{margin-top:14px}
@media (prefers-reduced-motion:reduce){.deep>summary::before{transition:none}}

/* セクション内の縦リズム */
.stack{display:flex;flex-direction:column;gap:22px}
.stack-s{display:flex;flex-direction:column;gap:14px}

/* 一行で言い切る見出し下の要点 */
.oneline{
  margin:0;font-size:16px;line-height:1.85;color:var(--lp-text);
}
.oneline strong{color:var(--lp-ink)}
@media (max-width:760px){
  .ctaband{padding:22px 16px;border-radius:10px}
  .ctaband .cb-slot a{width:100%;min-width:0;font-size:15px;padding:16px 18px}
  .numband li{padding:17px 14px}
}

/* ==========================================================
   Win記事の修正（実測にもとづくコントラストと打ち消しの解消）
   ========================================================== */

/* --- ライト：#E62A6D を文字色・小面の地色に使うと4.5:1に届かないので
       文字は --lp-main-ink、面は --lp-btn にそろえる --- */
body.lp.lp-win .pr-tag{background:var(--lp-btn);color:#fff}
body.lp.lp-win .lp-kicker,body.lp.lp-win .lp-eyebrow{color:var(--lp-main-ink)}
/* .lp-cta は --lp-dark の濃い地。上の main-ink は濃色なので、ここだけ明色に戻す */
body.lp.lp-win .lp-cta .lp-kicker.on-dark{color:#9FD0EE}
body.lp.lp-win .pit-n{color:var(--lp-main-ink)}
body.lp.lp-win .st-n{background:var(--lp-btn);color:#fff}

/* --- ダーク：明るいマゼンタの上に白文字だと2.63:1。
       詳細度で負けていた2本を、勝てる形で指定し直す --- */
@media (prefers-color-scheme:dark){
  body.lp.lp-win .cta-slot a,
  body.lp.lp-win .cta-slot a:hover,
  body.lp.lp-win .stickybar .lp-btn-main,
  body.lp.lp-win .stickybar .lp-btn-main:hover,
  body.lp.lp-win .ctaband .cb-slot a,
  body.lp.lp-win .ctaband .cb-slot a:hover{color:#1A0A14}
  body.lp.lp-win .pr-tag{color:#1A0A14}
  body.lp.lp-win .st-n{color:#1A0A14}
  /* 濃色帯が地とほぼ同色になり帯として消えるので、地より明るく振る */
  body.lp.lp-win{--lp-dark:#12202D}
  body.lp.lp-win .lp-cta,body.lp.lp-win .ctaband{border:1px solid #2D2758}
}

/* --- 診断の主ボタンだけ共通styleの緑が残っていたので、Winの色にする --- */
body.lp.lp-win .dx-go,body.lp.lp-win button.dx-go{
  background:var(--lp-btn);color:#fff;border-radius:2px;border:2px solid transparent;
}
body.lp.lp-win .dx-go:hover,body.lp.lp-win button.dx-go:hover{background:var(--lp-btn-h);color:#fff}
body.lp.lp-win .dx-go:focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}
@media (prefers-color-scheme:dark){
  body.lp.lp-win .dx-go,body.lp.lp-win button.dx-go,
  body.lp.lp-win .dx-go:hover,body.lp.lp-win button.dx-go:hover{color:#1A0A14}
}

/* --- 見出しが直後の p 指定に負けて本文と同じ大きさになっていた2件 --- */
.deadline p.deadline-h{font-size:19px;color:var(--lp-ink);margin-bottom:12px}
.dx-next p.dx-next-h{font-size:17px;color:var(--lp-ink);margin-bottom:10px}

/* --- ヒーローCTAは2本。760px以下で片方が半幅になっていたので全幅にする --- */
@media (max-width:760px){
  body.lp.lp-win .lp-hero-cta{display:flex;flex-direction:column;gap:10px}
  body.lp.lp-win .lp-hero-cta .lp-btn{width:100%;justify-content:center;padding:15px 18px;font-size:15px}
}

/* --- 761〜960px：横長の図版を44%幅の縦カラムにcoverすると図の意味が消える。
       モバイルと同じ上帯レイアウトにそろえる --- */
@media (max-width:960px) and (min-width:761px){
  body.lp.lp-win .hero-slides,body.lp.lp-win .hero-scrim{
    left:0;right:0;width:auto;bottom:auto;height:156px;
  }
  body.lp.lp-win .hero-slides{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 89%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 89%,transparent 100%);
  }
  body.lp.lp-win .hero-scrim{
    background:linear-gradient(to bottom,transparent 0%,transparent 78%,
      var(--lp-scrim-b) 93%,var(--lp-scrim-a) 100%);
  }
  body.lp.lp-win .hero-slide img{object-position:center center}
  body.lp.lp-win .lp-hero{padding-top:180px;padding-bottom:40px}
  body.lp.lp-win .lp-hero-in{max-width:none;padding-right:22px}
  body.lp.lp-win .lp-hero h1{font-size:clamp(30px,4.4vw,38px)}
}

/* 数字カードは3枚を必ず横一列に（auto-fitだと2+1に割れる幅がある） */
@media (min-width:660px){ .numband{grid-template-columns:repeat(3,1fr)} }
@media (max-width:659px) and (min-width:440px){ .numband{grid-template-columns:repeat(3,1fr);gap:10px}
  .numband li{padding:16px 8px}
  .numband .nb-v{font-size:clamp(22px,5.6vw,30px)}
  /* nb-n は「2025年 69.26点 → 2026年 56.59点」という本文級の数字を持つ。
     11px はページ最小で、打消し13pxの床より小さかった */
  .numband .nb-t{font-size:12.5px}
  .numband .nb-n{font-size:12.5px}
}
@media (max-width:439px){
  /* 1列だと3枚で444px使い、最重要のカードが画面外に出る */
  .numband{grid-template-columns:repeat(2,1fr);gap:8px}
  .numband li{padding:14px 10px}
  .numband .nb-v{font-size:clamp(20px,6vw,26px)}
  .numband .nb-t,.numband .nb-n{font-size:12.5px}
  .numband li:nth-child(3):last-child{grid-column:1 / -1}
}
/* 2枚カードは2列、3枚カードは3列を維持 */
@media (min-width:700px){
  .pcards{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
}

/* style.css の ul,ol{padding-left:22px;max-width:68ch} を打ち消す
   （カード列が605pxで頭打ちになり、3枚が2+1に割れていた） */
body.lp .numband,body.lp .pcards,body.lp .assure,body.lp .cta-steps,
body.lp .split-col ul,body.lp .dx-next ul,body.lp .reversal{
  padding-left:0;max-width:none;list-style:none;
}
body.lp .numband li,body.lp .pcards li{margin-bottom:0}

/* body.lp.lp-win a{color:main-ink} が .ctaband .cb-slot a に詳細度で勝ってしまい、
   ボタン文字が地色に埋もれていたので、勝てる形で指定し直す */
body.lp.lp-win .ctaband .cb-slot a,
body.lp.lp-win .ctaband .cb-slot a:hover,
body.lp.lp-win .ctaband .cb-slot a:visited{color:#fff}
@media (prefers-color-scheme:dark){
  body.lp.lp-win .ctaband .cb-slot a,
  body.lp.lp-win .ctaband .cb-slot a:hover,
  body.lp.lp-win .ctaband .cb-slot a:visited{color:#1A0A14}
}

/* ボイトレ記事（暖色）でも ctaband が使えるようにする */
body.lp{--lp-btn:var(--lp-main);--lp-btn-h:var(--lp-main-ink)}
body.lp .ctaband .cb-slot a{color:#fff}
body.lp .ctaband .cb-slot a:hover{color:#fff}
/* 2社ぶんのボタンを並べる */
.ctaband-2 .cb-slot{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ctaband-2 .cb-slot a{min-width:0;flex:1 1 280px;font-size:15px;padding:16px 20px}
@media (max-width:760px){
  .ctaband-2 .cb-slot{flex-direction:column}
  .ctaband-2 .cb-slot a{width:100%;flex:none}
}

/* style.css の p{max-width:68ch} が CTA帯の中でも効き、
   2ボタンが567pxで頭打ちになって折り返していた */
body.lp .ctaband p{max-width:none}
body.lp .ctaband>p:first-child{max-width:52ch;margin-left:auto;margin-right:auto}
body.lp .ctaband .cb-note{max-width:60ch;margin-left:auto;margin-right:auto}
/* 削除：@media内の flex:none を後勝ちで打ち消し、縦方向で240pxの高さになっていた */

/* ヒーローの注記は畳んでおく（掴みの直後に注記4行が並ぶと読者が離れる） */
.heronote{margin:16px 0 0}
.heronote>summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  font-size:12px;line-height:1.6;color:var(--lp-muted);
  padding:5px 0;
}
.heronote>summary::-webkit-details-marker{display:none}
.heronote>summary::before{
  content:"";width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.heronote[open]>summary::before{transform:rotate(-135deg) translateY(-1px)}
.heronote>summary:hover{color:var(--lp-main-ink)}
.heronote .lp-hero-note{margin-top:6px}

/* CTA帯の2社ボタンを「条件で選ぶ分岐」にする
   （同じボタンが並ぶだけだと選べず、どちらも押されない） */
.cb-pair{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 0 12px}
.cb-one{display:flex;flex-direction:column;gap:7px;flex:1 1 250px;min-width:0;text-align:center}
.cb-cond{
  font-size:12.5px;line-height:1.5;font-weight:700;color:#E8DCCF;
  display:block;
}
body.lp.lp-win .cb-cond{color:#C3BEDC}
.cb-one a{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--lp-btn);color:#fff!important;text-decoration:none;font-weight:700;
  font-size:15px;line-height:1.45;padding:16px 18px;border-radius:8px;
  transition:background .18s ease;min-height:56px;
}
.cb-one a:hover{background:var(--lp-btn-h);color:#fff!important}
.cb-one a:focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}
@media (max-width:760px){
  .cb-pair{flex-direction:column;gap:14px}
  .cb-one{flex:none;width:100%}
}

/* 折りたたみ見出しに「答え」を添える（見出しだけで通過されるのを防ぐ） */
.deep>summary .deep-a{
  display:block;margin-top:4px;font-size:12.5px;font-weight:400;line-height:1.6;
  color:var(--lp-muted);
}
.deep>summary{align-items:flex-start}
.deep>summary::before{margin-top:6px}

/* 申し込み直前に置く「当日の流れ」ブロック */
.lastcheck h2{margin-top:0}

/* CTAを1択にする：主導線を大きく、もう一方は条件つきのテキストリンク */
.cb-main{margin:0 0 10px}
.cb-main a{
  display:flex;align-items:center;justify-content:center;text-align:center;gap:8px;
  background:var(--lp-btn);color:#fff!important;text-decoration:none;font-weight:700;
  font-size:16px;line-height:1.45;padding:19px 22px;border-radius:10px;
  min-height:62px;transition:background .18s ease;
}
.cb-main a:hover{background:var(--lp-btn-h);color:#fff!important}
.cb-main a:focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}
.cb-alt{margin:0 0 10px;font-size:13px;line-height:1.75;color:#E8DCCF;text-align:center}
body.lp.lp-win .cb-alt{color:#C3BEDC}
.cb-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.cb-alt a:hover{color:#fff}
/* 診断の設問に、いま答えるための目安を添える */
.dx-hint{display:block;margin-top:5px;font-size:12px;font-weight:400;line-height:1.65;color:var(--lp-muted)}
/* 診断結果のボタン直前に置く一行 */
.dx-pre{margin:16px 0 0;font-size:14px;line-height:1.85;color:var(--lp-text)}
.dx-pre strong{color:var(--lp-ink)}

/* 2社めの導線もボタンにする（文字リンクだとタップ領域が19pxしかない） */
.cb-sub{margin:0 0 10px}
.cb-sub a{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:transparent;color:#fff!important;text-decoration:none;font-weight:700;
  font-size:14.5px;line-height:1.45;padding:15px 18px;border-radius:10px;
  border:2px solid rgba(255,255,255,.45);min-height:52px;
  transition:background .18s ease,border-color .18s ease;
}
.cb-sub a:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.75);color:#fff!important}
.cb-sub a:focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}
/* ヒーロー内は地が明るいので枠線色を変える */
.cb-sub-hero{margin:10px 0 0}
.cb-sub-hero a{color:var(--lp-main-ink)!important;border-color:var(--lp-main);font-size:14px;min-height:48px}
.cb-sub-hero a:hover{background:var(--lp-btn);color:#fff!important;border-color:var(--lp-btn)}

/* 診断結果に「あなたの制度だといくらか」を出すカード */
.dxprice{
  margin:18px 0 0;padding:18px 18px 15px;
  background:var(--lp-surface);border:2px solid var(--lp-main);border-radius:10px;
}
.dxp-c{
  margin:0 0 12px;font-family:var(--lp-serif);font-size:19px;line-height:1.45;color:var(--lp-ink);
}
/* 中身は「90時間／受講費用の総額 360,580円」＝総額そのもの。開示系なので13px床の対象 */
.dxp-c small{display:block;margin-top:4px;font-family:var(--body);font-size:13px;font-weight:400;color:var(--lp-muted)}
.dxp-l{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:10px}
.dxp-l li{font-size:14.5px;line-height:1.75;color:var(--lp-text)}
.dxp-l li b{
  display:inline-block;font-family:var(--display);font-weight:600;
  font-size:26px;line-height:1.2;color:var(--lp-main-ink);
  font-variant-numeric:tabular-nums;margin-left:4px;
}
.dxp-l li small{display:block;margin-top:3px;font-size:12.5px;line-height:1.65;color:var(--lp-muted)}
.dxp-n{margin:0;padding-top:11px;border-top:1px dashed var(--lp-line);font-size:13.5px;line-height:1.8;color:var(--lp-text)}
.dxp-n b{color:var(--lp-ink)}
/* 最終CTAカードに金額を出す */
.cta-price{margin:0 0 10px!important;font-size:15px;line-height:1.6}
.cta-price b{font-family:var(--display);font-weight:600;font-size:20px;font-variant-numeric:tabular-nums}
.cta-price span{font-size:12.5px}
body.lp .cta-card .cta-price{color:#F8F1E8}
body.lp .cta-card .cta-price b{color:#fff}
body.lp .cta-card .cta-price span{color:#CDBCAD}

/* 濃色帯の上のA8ボタンを1色にそろえる（中間と最終で別色になっていた）。
   ボイトレ記事は金茶。白文字より濃色文字のほうがコントラストが高い（7.1:1）。 */
body.lp:not(.lp-win) .ctaband .cb-main a{background:var(--lp-accent);color:var(--lp-dark)!important}
body.lp:not(.lp-win) .ctaband .cb-main a:hover{background:#EBB763;color:var(--lp-dark)!important}
body.lp:not(.lp-win) .ctaband .cb-sub a{border-color:var(--lp-accent);color:var(--lp-accent)!important}
body.lp:not(.lp-win) .ctaband .cb-sub a:hover{background:var(--lp-accent);color:var(--lp-dark)!important}
body.lp:not(.lp-win) .stickybar .lp-btn-main{background:var(--lp-accent);color:var(--lp-dark)}

/* 最終CTAの2枚を同格にしない（同色・同寸だと選べない）。
   条件に合う人だけが押す側を枠線にする。 */
body.lp .cta-card.is-alt .cta-slot a{
  background:transparent;color:var(--lp-accent)!important;
  border:2px solid var(--lp-accent);
}
body.lp .cta-card.is-alt .cta-slot a:hover{
  background:var(--lp-accent);color:var(--lp-dark)!important;
}
body.lp.lp-win .cta-card.is-alt .cta-slot a{color:var(--lp-btn)!important;border-color:var(--lp-btn)}
body.lp.lp-win .cta-card.is-alt .cta-slot a:hover{background:var(--lp-btn);color:#fff!important}
/* 反論処理を読み終えた位置にもう1本 */
.cta-slot-tail{margin:22px 0 18px}
/* ヒーローの2社ボタン：主（シアー）より従（NAYUTAS）が大きくならないようにする */
.cb-sub-hero a{min-height:46px;padding:12px 16px;font-size:13.5px}
/* ヒーローの主ボタンを2行組にして、従より小さくならないようにする */
.lp-hero-cta .lp-btn-main{min-height:78px}

/* 最終CTA：PR開示と決定文を分離し、決定文→ボタンを近づける */
.pr-note{margin:0 0 16px;font-size:12px;line-height:1.7}
body.lp .pr-note{color:#A8968A}
body.lp.lp-win .pr-note{color:#B7CEDF}
.verdict{margin:0 0 16px;font-size:18px;line-height:1.75}
body.lp .verdict{color:#F3EAE0}
body.lp .verdict strong{color:#fff}
body.lp.lp-win .verdict{color:#E4E1F4}
.under-btn{margin:12px 0 0;font-size:13px;line-height:1.8}
body.lp .under-btn{color:#CDBCAD}
body.lp .under-btn strong{color:#F8F1E8}
body.lp.lp-win .under-btn{color:#C3BEDC}
body.lp.lp-win .under-btn strong{color:#fff}
/* 濃色帯の中の折りたたみ */
.deep-on-dark{margin-top:20px;background:rgba(255,255,255,.05);border-color:rgba(243,234,224,.22)}
body.lp .deep-on-dark>summary{color:var(--lp-accent)}
body.lp .deep-on-dark>summary:hover{background:rgba(255,255,255,.06)}
body.lp .deep-on-dark>summary .deep-a{color:#CDBCAD}
body.lp .deep-on-dark .deep-in{border-top-color:rgba(243,234,224,.22)}
body.lp .deep-on-dark .deep-in p{color:#CDBCAD}
body.lp .deep-on-dark .cta-price{color:#F8F1E8}

/* 追従バーが2行に折れて画面の1/3を占め、本文のCTAを覆う事故を防ぐ。
   ボタンは折り返さず、左のコピーが縮む側にする。 */
.stickybar-in{flex-wrap:nowrap;align-items:center}
.stickybar .lp-btn-main{white-space:nowrap;flex:none}
.stickybar-t{min-width:0;flex:1 1 auto}
@media (max-width:420px){
  .stickybar .lp-btn-main{font-size:13px;padding:11px 12px}
  .stickybar-t{font-size:11.5px}
  .stickybar-t small{font-size:10.5px}
}
/* 診断結果：金額→ボタンを1画面に収めるため、カードを詰める */
.dxprice{padding:15px 16px 13px}
.dxp-c{font-size:17.5px;margin-bottom:9px}
.dxp-l{gap:8px;margin-bottom:0}
.dxp-l li b{font-size:23px}
.dxp-n{margin-top:14px;padding-top:0;border-top:none}
/* カード内の締切一文（1画面に収めるため詰める） */
.dxp-in{margin:11px 0 0;padding-top:10px;border-top:1px dashed var(--lp-line);font-size:13px;line-height:1.7;color:var(--lp-text)}
.dxp-in b{color:var(--lp-main-ink)}
/* .cb-note は .ctaband 内にしか定義がなく、診断結果では16px/30.4pxで描画されていた */
.cb-note{margin:10px 0 0;font-size:11.5px;line-height:1.7;color:var(--lp-muted)}
.cb-note .pr-tag{margin-right:6px}
.cb-note b{color:var(--lp-ink)}
.dx-cta .cb-note{margin-top:10px}
/* 診断結果：月額を足した分、金額→ボタンを1画面に保つため詰める */
.dxprice{padding:13px 15px 11px}
.dxp-c{font-size:16.5px;margin-bottom:6px}
.dxp-l{gap:5px}
.dxp-l li{font-size:14px;line-height:1.65}
.dxp-l li b{font-size:21px}
.dxp-l li small{margin-top:2px;line-height:1.55}
/* 中身は「このコースの申込リミットは…いまが、その月です。」＝急かす主張とその条件。13px床の対象 */
.dxp-in{margin-top:6px;padding-top:5px;font-size:13px;line-height:1.6}
.dx-cta{padding-top:6px;margin-top:8px}
.dx-cta-item{gap:6px}
.dx-cta .cb-note{margin-top:8px;padding-bottom:14px}
/* 建築CAD分岐は金額カードが3行＋期限注記で最も高い。
   ここで「1画面目は選ぶだけ」が追従バー(高さ103px)に隠れないよう見出しも詰める */
.dx-head{margin-bottom:8px}
body.lp .dx-head h3{font-size:21px;line-height:1.4}
/* 最終CTA：決め手の一文をボタンの上に、本文サイズで置く */
.verdict-sub{margin:0 0 16px;font-size:15px;line-height:1.75}
body.lp .verdict-sub{color:#E8DCCF}
body.lp .verdict-sub strong{color:#fff}
body.lp.lp-win .verdict-sub{color:#C3BEDC}
body.lp.lp-win .verdict-sub strong{color:#fff}
/* CTA直下の注記が追従バーと7px重なる分岐があったので詰める */
.dx-cta .cb-note{margin-top:8px;line-height:1.6}


/* ヒーロー：読者の状態を書く一文をレデより強くし、
   成果を生まないボタンはテキストリンクに降ろす（第1画面のボタンは成果1本） */
body.lp .hero-target{font-size:15px;line-height:1.65;font-weight:600}
body.lp .hero-jump{display:inline-block;padding:10px 2px;font-size:13.5px;
  text-decoration:underline;text-underline-offset:3px;opacity:.85}
/* CTA帯の副リンク（テキスト化した1社）にタップ領域を持たせる */
.ctaband .cb-note a{display:inline-block;padding:6px 2px;
  text-decoration:underline;text-underline-offset:3px;color:#CFCAE6}
.ctaband .cb-note a:hover{color:#fff}


/* 押す前に読めるPR表記。決め手の一文とボタンの近接は保つため1行に抑える */
.cb-pr{margin:0 0 8px;font-size:11.5px;line-height:1.6;color:var(--lp-muted)}
.ctaband .cb-pr{color:#9E99BE}
.cb-pr .pr-tag{margin-right:6px}
body.lp .lp-hero .cb-pr{margin-bottom:10px}
/* 最終CTAの副導線：主ボタンの序列は保ったまま、タップ1回の奥に隠さない */
.cta-alt{margin-top:26px;padding-top:22px;border-top:1px dashed rgba(255,255,255,.22)}
.cta-alt-h{margin:0 0 10px;font-size:14.5px;line-height:1.7;color:#E4E1F4}
body.lp .cta-alt .cta-price{margin:0 0 12px;font-size:15px;color:#F3EAE0}
body.lp .cta-alt .cta-price span{display:block;margin-top:3px;font-size:12.5px;color:#C8C2E0}
body.lp .cta-alt .cta-slot a{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff!important}
body.lp .cta-alt .cta-slot a:hover{background:rgba(255,255,255,.10);border-color:#fff}


/* 子ども向けの導線：保護者には見えるが、大人の読者の視界は塞がない1行 */
.kidsline{margin:16px 0 0;padding:12px 14px;border:1px dashed var(--lp-line);border-radius:9px;
  font-size:12.5px;line-height:1.75;color:var(--lp-muted);background:var(--lp-surface)}
.kidsline .pr-tag{margin-right:6px}
.kidsline a{color:var(--lp-main-ink);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding:4px 1px;font-weight:600}


/* LINEアプリ内ブラウザの実効高は約700px。
   A8ボタン・診断への入口・PR表記の3つを、そこに収める。
   削るのは文字が1つも無い区間（写真帯・余白）と行間だけ。 */
@media (max-width:760px){
  body.lp.lp-win .pr-bar{padding:5px 0}
  body.lp.lp-win .lp-hero{padding-top:28px;padding-bottom:28px}
  body.lp.lp-win .lp-hero h1{font-size:24px;line-height:1.4;margin-bottom:9px}
  body.lp.lp-win .hero-target{margin-bottom:8px;font-size:13px;line-height:1.7}
  body.lp.lp-win .lp-lede{font-size:13.5px;line-height:1.7;margin-bottom:11px}
  body.lp.lp-win .lp-hero .cb-pr{margin-bottom:7px}
  body.lp.lp-win .lp-hero-cta{gap:7px;margin-bottom:7px}
  body.lp.lp-win .lp-hero-cta .lp-btn{padding:13px 16px;font-size:14.5px;line-height:1.5}
  body.lp.lp-win .hero-microtrust{margin-top:8px}
}


/* 副CTA（注記内のテキストリンク）に44pxのタップ領域を持たせる */
body.lp .ctaband .cb-note a{display:inline-block;min-height:44px;padding:12px 14px;
  box-sizing:border-box;line-height:1.5}
body.lp .kidsline a{display:inline-block;min-height:44px;padding:13px 6px;box-sizing:border-box;line-height:1.4}
body.lp .midcta-pr a{display:inline-block;min-height:44px;padding:12px 10px;box-sizing:border-box;
  line-height:1.5;text-decoration:underline;text-underline-offset:3px}


/* ── 露出量と変換面積の逆転をなおす ───────────────────────── */
@media (max-width:760px){
  /* 追従バーはページの62%で出るのに、押せる面積がバー幅の29%しかなかった */
  .stickybar-in{gap:10px;padding:0 14px}
  .stickybar-t{flex:1 1 auto;min-width:0;font-size:11.5px;line-height:1.4}
  .stickybar-t small{display:block;font-size:11px;line-height:1.3;margin:2px 0 0}
  body.lp .stickybar .lp-btn-main{
    flex:0 0 216px;min-height:58px;padding:14px 8px;
    font-size:15px;line-height:1.35;justify-content:center;text-align:center;
  }
  /* ファーストビュー上端195pxが文字ゼロだった。写真帯とPR帯から約67pxを回収する */
  .hero-slides,.hero-scrim{display:none}
  body.lp .lp-hero{padding-top:12px}
  .pr-bar .pr-bar-in{gap:3px 8px;padding:5px 16px}
  .pr-bar .pr-note{flex:1 1 auto;font-size:11.5px;line-height:1.5}
  .pr-brand b{font-size:12px}
  .pr-brand .brand-mark{width:16px;height:16px}
}
/* 18画面スクロールし切った人に渡す最後のボタンが、途中のCTAより小さかった */
body.lp .lp-cta .cta-slot a{
  min-height:92px;font-size:17px;line-height:1.5;padding:20px 18px;
  font-weight:700;border-radius:12px;
}
body.lp .cta-alt .cta-slot a{min-height:64px;font-size:14.5px;padding:15px 18px}


/* 報酬地点は2社ある。副CTAでも「押せる物」と分かる最低線まで上げる */
body.lp .ctaband .cb-note{font-size:13px;line-height:1.8}
body.lp .ctaband .cb-note a{
  display:inline-block;min-height:48px;padding:13px 16px;box-sizing:border-box;
  font-size:14px;font-weight:700;line-height:1.5;text-decoration:none;
  border:1px solid var(--lp-main);border-radius:8px;color:var(--lp-main-ink);
}
body.lp .kidsline a{min-width:104px;text-align:center;font-size:13.5px;min-height:44px;
  padding:12px 10px;margin:3px 4px 3px 0;text-decoration:none;
  border:1px solid var(--lp-main);border-radius:8px}
/* 比較であって推移ではない。矢印は方向を含意するので使わない */
.bigcompare .bc-ar{font-family:var(--lp-display,inherit);font-size:15px;font-weight:600;letter-spacing:.04em}
@media (max-width:520px){ .bigcompare .bc-ar{transform:none} }


/* 本文中に戻した成果リンクは、inline のままでは高さ21pxで押せない。
   オレンジ塗りにはせず（同一画面にボタン2本を作らない）、枠付き44pxにする */
body.lp .oneline a[href*="a8.net"]{
  display:inline-block;min-height:44px;padding:11px 14px;box-sizing:border-box;
  margin:4px 2px;font-size:14px;font-weight:700;line-height:1.5;
  text-decoration:none;border:1px solid var(--lp-main);border-radius:8px;
  color:var(--lp-main-ink);
}
/* このボタンはホバーが二重に効かなかった：
   (1) body.lp a:hover (0,2,2) が上の (0,3,2) に詳細度で負ける
   (2) 仮に勝っても hover の color が --lp-main-ink で静止と同一トークン
   色では差が作れないので地と枠で作る。(0,4,2) で静止に勝つ */
body.lp .oneline a[href*="a8.net"]:hover{
  background:var(--lp-soft);border-color:var(--lp-main-ink);
}


/* 比較の仕切りは軸の中央に置く（.bc-cell だけ center で bc-ar が左端にいた） */
.bigcompare .bc-ar{text-align:center;width:100%}
/* 診断結果：注記の最終行が実効700pxを7px超える分岐があったので詰める */
.dx-cta .cb-pr{margin-bottom:5px}
.dx-cta .cb-note{margin-top:3px;padding-bottom:6px;line-height:1.45}
.dxprice .dxp-in{margin-top:2px}
@media (max-width:420px){
  body.lp.lp-win .lp-hero-cta .lp-btn-ghost{padding-top:12px;padding-bottom:12px}
}


/* 締切文が長い分岐で金額→ボタン→注記が実効700pxを超えたので、カード内の補足を詰める */
/* ここは診断を完走しないと DOM に出ないので、13px床の掃討の母集団に一度も入っていなかった。
   打消し（返金・分割の条件）が12px、主張（196,680円 等）が21px という配分になっていた */
.dxprice .dxp-l li small{font-size:13px;line-height:1.48}
.dx-cta .cb-note{margin-top:3px;padding-bottom:4px;font-size:11px;line-height:1.45}
.dxprice .dxp-in{padding-top:3px;line-height:1.52}


/* 診断結果：cad分岐の締切注記が長く、注記の下端がバー上端に3pxまで迫っていた。
   端末のフォント差1pxで割れるので余裕を取る */
.dx-cta{padding-top:4px;margin-top:6px}
.dxprice .dxp-in{margin-top:4px;padding-top:2px}

/* ============================================================
   コントラスト是正（2026-09-11）
   3つのLPをブラウザで実測して見つかった失格を、発生源で直す。
   ページ内CSSで個別に潰すと、次に作るLPで必ず再発するため。

   実測値（ライトモード、rgba合成を解いた実背景に対して）:
     win-school-cost   strong  #0c0626 / #0c0626 = 1.00  ← 完全な不可視
     win-school-cost   .pr-note                  = 2.61
     win-school-cost   .cb-pr                    = 3.67
     win-school-cost   .pc-tag                   = 4.15
     win-school-cost   .skip                     = 4.27
     vocal-comparison  .pr-note                  = 2.28
     vocal-comparison  .cb-pr                    = 2.68
     vocal-comparison  .ctaband .cb-note a       = 2.17
     vocal-comparison  .pc-tag                   = 3.76
   ============================================================ */

/* 119行 body.lp strong{color:var(--lp-ink)} が濃い地のCTA帯・最終CTAにも効き、
   地色と同化していた。b は .ctaband p b / .cb-note b で救われていたため、
   strong で書いた箇所だけが消えるという見つけにくい形になっていた */
body.lp .ctaband strong,
body.lp .ctaband b,
body.lp .lp-cta strong,
body.lp .lp-cta b{color:#fff}
/* .dx-cta の地は var(--lp-surface) で、テーマで白と濃色に反転する。
   固定16進を当てると必ずどちらかで割れるのでトークンで指定する */
body.lp .dx-cta strong,
body.lp .dx-cta b{color:var(--lp-ink)}

/* 1488行 .cb-pr{color:var(--lp-muted)} と 1054行 .ctaband .cb-note が
   濃い地の上で 2.7〜3.7:1。PR表記と打消し表示なので最優先 */
body.lp .ctaband .cb-pr,
body.lp .ctaband .cb-note,
body.lp .lp-cta .cb-pr,
body.lp .lp-cta .cb-note,
body.lp .lp-cta .pr-note{color:#C9BDB1}
body.lp.lp-win .ctaband .cb-pr,
body.lp.lp-win .ctaband .cb-note,
body.lp.lp-win .lp-cta .cb-pr,
body.lp.lp-win .lp-cta .cb-note,
body.lp.lp-win .lp-cta .pr-note{color:#D6D2E4}
body.lp .dx-cta .cb-pr,
body.lp .dx-cta .cb-note,
body.lp.lp-win .dx-cta .cb-pr,
body.lp.lp-win .dx-cta .cb-note{color:var(--lp-muted)}

/* 1561行が濃い地の上に --lp-main-ink を当てており 2.17:1 */
body.lp .ctaband .cb-note a{color:#E8DCCF;border-color:rgba(232,220,207,.45)}
body.lp .ctaband .cb-note a:hover,
body.lp .ctaband .cb-note a:focus-visible{color:#2E1D14;background:#E8DCCF;border-color:#E8DCCF}
body.lp.lp-win .ctaband .cb-note a{color:#E4E1F4;border-color:rgba(228,225,244,.45)}
body.lp.lp-win .ctaband .cb-note a:hover,
body.lp.lp-win .ctaband .cb-note a:focus-visible{color:#0C0626;background:#E4E1F4;border-color:#E4E1F4}
/* CTA帯の主ボタンのフォーカスリング。lp.css:1324 (0,2,1) に
   body.lp a:focus-visible (0,2,2) が勝ち、濃い地の上で 2.83:1 だった */
body.lp .ctaband .cb-main a:focus-visible{outline:2px solid #E8DCCF;outline-offset:3px}
body.lp.lp-win .ctaband .cb-main a:focus-visible{outline-color:#E4E1F4}

/* 1407-1408行は濃い .lp-cta 用の色。明るい .pr-bar に当たると 2.28 / 2.61 になる。
   ステマ規制の中核表示なので、地ごとに色を分ける */
body.lp .pr-bar .pr-note{color:#6B5545}
body.lp.lp-win .pr-bar .pr-note{color:#4A4570}

body.lp .pcards .pc-tag{color:#7A5510}
body.lp.lp-win .pcards .pc-tag{color:#075B65}

body.lp.lp-win .skip,
body.lp.lp-win a.skip{background:#C81F5E;color:#fff}

/* ダークの --lp-main #ff6e9e に白文字16px太字で 2.63:1。
   lp.css:1242 は .cb-slot に同じ対策（#1A0A14）を入れているのに .cb-main が漏れていた。
   lp.css:1319 が color:#fff!important なので、こちらも !important が要る。
   非win系は 1381行で同じことを !important 付きでやっている */
@media (prefers-color-scheme:dark){
  body.lp.lp-win .ctaband .cb-main a,
  body.lp.lp-win .ctaband .cb-main a:hover,
  body.lp.lp-win .ctaband .cb-main a:visited{color:#1A0A14!important}
}

@media (prefers-color-scheme:dark){
  body.lp .pr-bar .pr-note{color:#C9B4A4}
  body.lp.lp-win .pr-bar .pr-note{color:#C3BEDC}
  body.lp .pcards .pc-tag{color:#E8BE78}
  body.lp.lp-win .pcards .pc-tag{color:#7FD8E4}
}

/* .bigcompare の矢印・vs が var(--lp-accent) のままで、ライトの白地に対し
   2.26〜2.30:1。aria-hidden の装飾だが実際に見えないので地に合わせる */
body.lp .bigcompare .bc-ar{color:var(--lp-main-ink)}
/* PRバーだけ左余白が16pxで、本文の22pxとページ最上行がずれていた */
body.lp .pr-bar .pr-bar-in{padding-left:22px;padding-right:22px}

/* lp.css:371 .dx-cta-slot a{background:var(--lp-main);color:#fff} は、
   ダークで --lp-main が明るいオレンジに反転するため 2.65:1 になる。
   win系は :876 で救われているが非win系が落ちていた */
@media (prefers-color-scheme:dark){
  body.lp:not(.lp-win) .dx-cta-slot a,
  body.lp:not(.lp-win) .dx-cta-slot a:hover,
  body.lp:not(.lp-win) .dx-cta-slot a:visited{color:#17110D}
}

/* 診断の主CTAのフォーカスリングが var(--lp-accent) のまま .dx-result の
   白地に乗り、ライトで 2.26（vocal）/ 2.30（win）。WCAG 1.4.11 は3:1 */
body.lp .dx-cta-slot a:focus-visible{outline:2px solid var(--lp-ink);outline-offset:3px}
/* .stickybar には :focus-visible の定義が無く body.lp a に落ちていた。
   帯は両テーマとも暗色なので --lp-ink だとライトで1.02になる。白で固定する */
body.lp .stickybar .lp-btn-main:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* FV主ボタンのリングがボタン地色と同色（vocal ライト1.00 / win ライト1.16）。
   joho のページ内CSSにしか無かったので共有側へ移す */
body.lp .lp-hero-cta .lp-btn-main:focus-visible{outline:3px solid var(--lp-ink);outline-offset:3px}
body.lp .lp-cta .cta-slot a:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* lp.css:119 は strong にしか色を与えず、b は親を継承していた。
   同じ一文で strong だけ持ち上がるという割れ方をしていた（3ページ共通） */
body.lp .lp-hero b,
body.lp .lp-sec b,
body.lp .callout b,
body.lp .pcards b{color:var(--lp-ink)}
body.lp .ctaband b,
body.lp .lp-cta b{color:#fff}
/* .pr-bar-in は .container（920px）で、本文の .container.narrow（730px）と
   730px超で永久にずれる（1280pxで95px） */
body.lp .pr-bar .pr-bar-in{max-width:730px}

/* .hero-jump は opacity:.85 の合成後が rgb(180,98,57) で 3.80:1。
   color の生値（#A94A1B = 4.92）だけ見ていると見逃す型 */
body.lp .hero-jump{opacity:1;color:var(--lp-main-ink)}

/* リング色に --lp-accent（シアン／金茶）は使えない。両テーマとも中間輝度で、
   白地でも濃地でも 3:1 を割る。--lp-ink はテーマで反転するので地と常に逆極性 */
body.lp .dx-go:focus-visible,
body.lp.lp-win .dx-go:focus-visible,
body.lp .midcta .lp-btn-main:focus-visible,
body.lp a.skip:focus-visible{outline:2px solid var(--lp-ink);outline-offset:3px}
/* lp.css:1661 は .cb-main だけで .cb-note が漏れていた（vocal/win ライトで 2.83） */
body.lp .ctaband .cb-note a:focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}
/* summary のリング定義が .faq と .more>summary にしか無く、
   .deep / .heronote / .qa が UA 既定に落ちていた（vocal 11 / win 11 箇所） */
body.lp .qa>summary:focus-visible,
body.lp .deep>summary:focus-visible,
body.lp .heronote>summary:focus-visible{
  outline:2px solid var(--lp-main);outline-offset:-2px;border-radius:8px}
/* 761px以上で .lp-sec が76pxになる一方、帯の margin が固定で 44/76 に割れていた */
@media (min-width:761px){
  body.lp .cta-wrap{margin-top:76px}
  body.lp .lp-sec .stack>.ctaband{margin-top:54px}
  /* .stack は flex+gap:22px。直前要素の margin-bottom が加算されて1本だけ102pxになる */
  body.lp .lp-sec .stack>*:has(+.ctaband){margin-bottom:0}
}
/* モバイルでも同じ理由で 48/22 に割れていた */
@media (max-width:760px){
  body.lp .lp-sec .stack>*:has(+.ctaband){margin-bottom:0}
}

/* ── 2026-09-12 追加分 ──────────────────────────────────
   .lp-hero h1 em::after のマーカーを合成すると、H1の em が6構成中5構成で
   AA不合格だった（最小 2.10、要3.0）。濃度を振った実測：
     45%(現行) 最小2.13 ✗ ／ 30% 2.95 ✗ ／ 25% 3.07 ／ 20% 3.19 ✓ ／ 15% 3.31 ✓
   律速は win ライトで、マーカーを完全に消しても天井が 3.73 しかない */
/* 律速は --lp-accent ではなく em の文字色。--lp-main-ink にすると
   win ライト390px の最悪値が 3.17 → 4.21（マーカー8%で4.44）。
   h1 が 24px ちょうど＝大文字判定の下限に依存する脆さも同時に消える */
body.lp .lp-hero h1 em{color:var(--lp-main-ink)}
body.lp .lp-hero h1 em::after{background:color-mix(in srgb,var(--lp-accent) 8%,transparent)}

/* .lp-eyebrow だけ --lp-main のままで、ヒーローのグラデーション合成後に
   vocal ライト 4.52（要4.5）まで落ちていた。win は :1144 で既に対処済み */
body.lp .lp-eyebrow{color:var(--lp-main-ink)}
body.lp .lp-eyebrow::before{background:var(--lp-main-ink)}

/* モバイルのCTA帯間隔。前回 margin-bottom を0にしたが、22px は .stack の gap と
   同値＝視覚的な間隔ゼロで、広告帯が本文と見分けられなくなっていた（vocal は48→22の後退） */
@media (max-width:760px){
  body.lp .lp-sec .stack>.ctaband{margin-top:22px}
}
/* .fit-grid は .stack ではないので上のルールが届かず、vocal の .midcta だけ54pxだった */
body.lp .fit-grid>.midcta{margin-top:24px}
@media (min-width:761px){ body.lp .fit-grid>.midcta{margin-top:56px} }

/* 診断内のA8広告リンクが本文リンクと同じ見た目（行高21px）で、他CTAは77〜88pxの塗りボタン。
   広告だけ目立たない形になっていた。あわせてタップ領域も満たす */
/* 診断フォーム内のA8広告。本文リンクと同じ見た目だったのを直した際、今度は
   .dx-n（静的チップ）や選択済みラベルと地色・文字色が同一になっていた。
   同じA8リンクである .ctaband .cb-slot a と同じ塗りに揃える */
body.lp #dxForm .cb-slot a{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:14px 18px;border-radius:8px;text-decoration:none;
  background:var(--lp-btn);color:#fff;font-weight:700;font-size:15px}
body.lp #dxForm .cb-slot a:hover{background:var(--lp-btn-h);color:#fff}
/* 診断直後＝最も意図の強い広告の分離が 6〜11px しかなかった */
body.lp .dx-cta{margin-top:44px}
@media (min-width:761px){ body.lp .dx-cta{margin-top:76px} }
/* 段落の中身がリンク1本だけのとき、SC 2.5.8 の「文中」除外が効かないので
   タップ領域を与える。実ヒットは内部リンク（win 3／vocal 2／joho 0）で、
   A8広告は p.midcta-b 等の別構造にあるためここには当たらない */
body.lp .deep-in>p>a:only-child{display:block;width:max-content;max-width:100%;
  min-height:44px;padding:12px 10px;margin:4px 0 0 -10px;box-sizing:border-box;line-height:20px}

/* .tscroll は左右端に影を描いて横スクロールを示唆するが、overflow-x:visible かつ
   table-layout:fixed で 320〜1280px のどの幅でも scrollWidth===clientWidth。
   スクロールしない要素にスクロールのアフォーダンスを出さない */
body.lp .tscroll{background-image:none}

/* ヒーローの .cb-pr は、ダークでグラデーションを合成すると 4.44（要4.5）。
   #9c8a7b on #32261a。地が1段明るくなる分だけ文字も持ち上げる */
@media (prefers-color-scheme:dark){
  body.lp .lp-hero .cb-pr,
  body.lp .lp-hero .hero-microtrust{color:#AD9B8C}
}

/* ── 根治：面の色だけトークン化して文字色を直書きしていたため、
   「ダークで --lp-btn が明色に反転しても白文字のまま」という同じ失格が
   .cb-slot → .cb-main → #dxForm .cb-slot と3回起きた。
   面と対になる文字色トークンを作り、A8ボタンは全部これを参照する ── */
body.lp{--lp-btn-ink:#fff}
@media (prefers-color-scheme:dark){
  body.lp{--lp-btn-ink:#17110D}
  body.lp.lp-win{--lp-btn-ink:#0A121A}
}
body.lp .ctaband .cb-main a,
body.lp .ctaband .cb-slot a,
body.lp .lp-cta .cta-slot a,
body.lp .lp-hero-cta .lp-btn-main,
body.lp .dx-cta-slot a,
body.lp .midcta .lp-btn-main,
body.lp .stickybar .lp-btn-main,
body.lp .dx-go,
body.lp #dxGo{color:var(--lp-btn-ink)!important}

/* 診断フォーム内の広告が、読者の次の一手（#dxGo 8,084px²）の3.1倍の面積で
   同じ塗りになっていた。広告は枠線ボタンに落として、塗りはサイトの操作に残す */
body.lp #dxForm .cb-slot a{background:transparent;color:var(--lp-main-ink);
  border:2px solid var(--lp-main);min-height:48px;font-size:16px;border-radius:10px}
body.lp #dxForm .cb-slot a:hover{background:var(--lp-soft);color:var(--lp-main-ink)}
/* 読者の次の一手をフォーム幅いっぱいに */
body.lp #dxGo{width:100%;min-height:56px}

/* em::after のマーカーは 8% では地との比が 1.04〜1.06＝画面上は無い。
   em は --lp-main-ink にしてマーカーは律速から外れたので、飾りを残さず消す */
body.lp .lp-hero h1 em::after{display:none}

/* 同じA8リンクの見た目が1ページに最大6種あり、「これは広告主のボタンだ」という
   形の手がかりが定まっていなかった。塗りのA8ボタンは角丸10px・16pxに統一する */
body.lp .ctaband .cb-main a,
body.lp .ctaband .cb-slot a,
body.lp .lp-cta .cta-slot a,
body.lp .lp-hero-cta .lp-btn-main,
body.lp .dx-cta-slot a,
body.lp .midcta .lp-btn-main{border-radius:10px;font-size:16px}

/* ── S1 の修正。面トークンは --lp-btn / --lp-accent / 透明 の3種あるのに
   インクトークンを1個しか作らなかったため、--lp-accent の面（琥珀）に白文字、
   暗帯の上の枠線ボタンに黒文字が入り、4件の失格を新造した。
   N1 vocal dark .cta-alt 1.04 ／ N2 vocal light .lp-cta 2.26 ／
   N3 vocal light #stickyCta 2.26 ／ N4 joho light .lp-cta 2.26
   .cta-alt は body.lp:not(.lp-win) .lp-cta .cta-slot a (0,4,2) に負けるので
   .lp-cta を挟んで詳細度を揃えること ── */
body.lp{--lp-accent-ink:var(--lp-dark);--lp-ondark-ink:#fff}
body.lp:not(.lp-win) .lp-cta .cta-slot a,
body.lp:not(.lp-win) .lp-cta .cta-slot a:hover,
body.lp:not(.lp-win) .stickybar .lp-btn-main,
body.lp:not(.lp-win) .stickybar .lp-btn-main:hover,
body.lp:not(.lp-win) .ctaband .cb-main a{color:var(--lp-accent-ink)!important}
/* 詳細度が (0,4,2) で完全同点の body.lp:not(.lp-win) .lp-cta .cta-slot a に、
   記述順1行だけで勝っていた。クラスを重ねて (0,5,2) にし、順序に依存させない。
   入れ替わると 16.13 → 1.00 に落ちる（N1 の再発） */
body.lp .lp-cta .cta-alt.cta-alt .cta-slot a,
body.lp .lp-cta .cta-alt.cta-alt .cta-slot a:hover{color:var(--lp-ondark-ink)!important}

/* ── S6 の作り直し。前回はセレクタを塗りボタンだけに絞ったため、
   枠線系が対象外で vocal は6種のまま残った。A8リンクは href で指定して形を揃える。
   色には触れない（前回、色に !important を被せて4件の失格を新造したため） ── */
body.lp a[href*="px.a8.net"]{border-radius:10px}
body.lp .ctaband .cb-main a[href*="px.a8.net"],
body.lp .ctaband .cb-slot a[href*="px.a8.net"],
body.lp .lp-cta .cta-slot a[href*="px.a8.net"],
body.lp .lp-hero-cta a[href*="px.a8.net"],
body.lp .dx-cta-slot a[href*="px.a8.net"],
body.lp .midcta a[href*="px.a8.net"]{font-size:16px}
/* win のヒーローだけ 14.5px だった（body.lp.lp-win .lp-hero-cta .lp-btn が 0,4,1 で勝つ） */
body.lp.lp-win .lp-hero-cta .lp-btn[href*="px.a8.net"]{font-size:16px}
/* サイト自身の主操作だけ角丸2pxで、形の例外になっていた */
body.lp .dx-go,body.lp #dxGo{border-radius:10px}
/* 面が var(--lp-btn) なのに文字色を直書きしている残り。
   ダークで面が明色に反転したとき同じ失格が起きる構造なのでトークンに寄せる */
body.lp .cb-one a{color:var(--lp-btn-ink)!important}
body.lp .cb-sub-hero a:hover{color:var(--lp-btn-ink)!important}

/* 形だけを揃える。色には触れない（色の !important で4件の失格を新造した経緯があるため）。
   border-radius は寸法なのでコントラストに影響しない。font-size は下げず16pxに揃える
   （下げると大文字判定 18.66px/700 の境界を割る恐れがあるため、実測で下がる要素が
   無いことを確認済み：vocal 13.5/14 → 16、win 14.5/15 → 16、いずれも上げ方向） */
body.lp a[href*="px.a8.net"]{border-radius:10px!important}
body.lp .ctaband a[href*="px.a8.net"],
body.lp .lp-cta a[href*="px.a8.net"],
body.lp .lp-hero-cta a[href*="px.a8.net"],
body.lp .dx-cta-slot a[href*="px.a8.net"],
body.lp .midcta a[href*="px.a8.net"],
body.lp #dxForm a[href*="px.a8.net"],
body.lp .deep-in a[href*="px.a8.net"]{font-size:16px}
/* vocal に残る 13.5〜14px は .cb-sub（ヒーローの副CTA）と p.oneline / p.kidsline 内の
   インライン寄りの副次リンク。16pxにすると文中で浮くので、角丸10pxで種別を揃えたうえで
   「主ボタン16px／副次13.5〜14px」の階層は残す。A8リンクの角丸は3ページとも10pxで単一 */

/* ② p.oneline の A8 リンクは親が 16px。14px だと本文より小さくて浮くので揃える
   （前回「文中で浮くから残す」と書いたが、実測では逆だった。
     .kidsline は親が12.5pxなので13.5pxのまま残す） */
body.lp .oneline a[href*="px.a8.net"]{font-size:16px}
/* ③ サイト自身の主操作の文字が広告ボタンより小さかった */
body.lp .dx-go,body.lp #dxGo{font-size:16px}
/* ④ min-height:44px を .cb-note a 等には与えているのに summary だけ漏れていた */
body.lp .qa>summary,body.lp .deep>summary,body.lp .heronote>summary{min-height:44px}
/* ⑤ win のヒーローで主CTAと副CTAの間隔が390pxで7pxしかなかった（vocalは14px） */
@media (max-width:760px){ body.lp.lp-win .lp-hero-cta .lp-btn-ghost{margin-top:7px} }

/* .deep{overflow:hidden} なので、分割不能な裸URLは横スクロールではなく切り落とされる。
   documentElement.scrollWidth には出ないため全体のはみ出し検査では検出できない。
   実測（win 390px・details展開）：6本が最大131.7px欠落 → 0本。
   詳細度 (0,2,1)。表セルの body.lp .tscroll th,td (0,3,2) の anywhere は不変。
   anywhere ではなく break-word：内在サイズを変えないため将来の回帰が起きにくい */
body.lp .deep-in{overflow-wrap:break-word}

/* vocal ≥761px：.fit-grid の狭い列に入った .midcta-b が
   flex:none（0 0 auto＝shrink不可）のままカードを85px突き抜けていた。
   閉じた <details> の中なので、これまで一度も計測対象に入っていなかった。
   詳細度 (0,4,1) で .midcta-b (0,1,0) に勝つ。
   .fit-grid は joho 0個 / win 0個 / vocal 2個なので、変化するのは vocal の ≥761px 2構成だけ。
   ≤760px は既に列レイアウトで幅100%以下のため no-op */
body.lp .fit-grid>.midcta .midcta-b{max-width:100%}

/* .st-n は26px固定の円。1文字前提だが win の「当日」だけ2文字で進み幅が
   ちょうど26pxあり、字面の四隅が円の外（白いカード地）に出る＝白地に白文字。
   幅を内容に合わせ、1文字のときは従来どおり26pxの円を保つ */
body.lp .st-n{width:auto;min-width:26px;padding:0 7px;border-radius:999px}

/* ── vocal：[hidden] が効いていなかった ──
   body.lp .dx-q label span small{display:block} (0,2,4) が UA の [hidden]{display:none} に勝ち、
   大人を選んだ読者に子ども用の金額（「お子さんは25分と50分で月8,800円の差」）が同時に出ていた。
   実測2件。詳細度 (0,3,4) で勝つ。[hidden] を持つ要素にしか当たらないので joho/win は無影響 */
body.lp .dx-q label span small[hidden]{display:none}

/* ── 「打消し・PR・開示は13px」の床を、開示を担うクラスに実際に適用する ──
   これまでコメントで床を宣言しながら、適用範囲が .op-tag などの部分集合に留まっていた。
   style.css（サイト全体）は触らず body.lp に閉じる */
body.lp .pr-tag{font-size:13px}                    /* PR表記そのものが11pxだった */
body.lp .updated{font-size:13px}                   /* 出典注記。win で11.5px */
body.lp .pcards .pc-tag{font-size:13px}            /* 「向く」「向かない」11.5px */
body.lp .callout-label{font-size:13px}             /* 節の見出しラベル 12px */
body.lp .numband .nb-t,
body.lp .numband .nb-n{font-size:13px}             /* 12.5px。nb-n は本文級の数字を持つ */
body.lp .lp-hero-imgnote{font-size:13px}           /* 「運営者は受講しておらず」＝未受講開示 11px */
body.lp .dx-q label span small{font-size:13px}     /* 12px。vocal dark のページ最小を作っていた */

/* .tbl-cap の gap 相殺は joho のページ内 <style> 側で行う（同詳細度で後勝ちのため） */

/* ── 表内の「争いのある行」の標示。.updated（平常の注記）と役割を分ける ── */
body.lp .dispute{display:block;margin-top:6px;font-size:13px;line-height:1.7;
  color:var(--lp-main-ink);font-weight:400}
body.lp .dispute b{font-weight:700}

/* ── 床を3ページで揃える ──
   これまで joho だけページ内 <style> で13pxに上げており、同じ役割のテキストが
   joho 13px / vocal・win 11〜12px という状態だった。開示を担うものは lp.css 側で揃える */
body.lp .pr-bar .pr-note{font-size:13px}          /* 当サイトはアフィリエイト広告を利用しています */
body.lp .cb-pr{font-size:13px}                    /* 下のボタンは広告です */
body.lp .lp-hero-note{font-size:13px}             /* 確認日・出典（.updated と同じ役割） */
body.lp .lp-cta .pr-note{font-size:13px}          /* 以下はアフィリエイト広告です */
body.lp .midcta-pr{font-size:13px}                /* 広告の適合条件 */
body.lp .lp-cta-note{font-size:13px}              /* 申込は各スクールの公式サイトで */
body.lp .stickybar-t small{font-size:13px}        /* 広告です／個人情報の入力なし */
@media (max-width:760px){
  body.lp .lp-hero-note{font-size:13px}
  body.lp .stickybar-t small{font-size:13px}
}

/* 床の続き。前版は「揃えた」と書いたが、同じ役割の隣人が床下に残っていた：
   .stickybar-t 11.5px なのに子の small が 13px（親子逆転）、
   vocal の比較表の金額 11.5px、win .assure-src 12px、.reversal li small 12.08px。
   打消しだけ13pxにして、打消される側の金額が11.5pxでは意味が反転する */
body.lp .stickybar-t{font-size:13px}
body.lp .cb-note{font-size:13px}
body.lp .hero-microtrust{font-size:13px}
body.lp .assure-src{font-size:13px}
body.lp .reversal li small{font-size:13px}
body.lp .yc-calc{font-size:13px}
body.lp .sc-spec dd small,
body.lp .kid-dl dt small,
body.lp .kid-dl dd small{font-size:13px}
@media (max-width:760px){
  body.lp .stickybar-t{font-size:13px}
  body.lp .stickybar-t small{font-size:13px}
  body.lp .hero-microtrust{font-size:13px}
}

/* 追従バーの予約。前版は 180px のハードコードを全ページに乗せてしまい、
   win 320 は 9.9px 不足（.copyright の下マージンが吸収していただけ）、
   win 361 は 12px 不足、vocal ≤360 は 73.7px の死に空間になっていた。
   バー高はページと幅で違うので、ページ側で分ける */
/* 表の列見出し。≥761px で露出し、最長は「公式サイトの記載」8字。12.5px だった */
body.lp thead th{font-size:13px}

/* win の給付金額が 11.5px。vocal の比較表金額を13pxにした判断が win に未適用だった
   （打消し13px／金額11.5px の反転が残っていた） */
body.lp .bc-s{font-size:13px}

/* .bc-s を13pxにしたとき、ページ限定にしなかったので vocal にも効き、
   .bc-l（12.5px）より注記のほうが大きい序列反転を作った。
   vocal では「シアーミュージック」「NAYUTAS」というスクール名そのものが脚注より小さい。
   .bigcompare .bc-l (0,2,0) に勝つ (0,2,1) */
body.lp .bc-l{font-size:13.5px}

/* 床の続き。前版の「床違反0」は自分で列挙したクラス集合の中だけの話だった。
   実際に描画されているテキストに13pxを当てると、打消し本文が床下に残っていた：
   .deep-a は「ただし分かるのは資格の有無だけです」など13箇所、
   .heronote>summary は立場開示のトリガ、.dx-hint は操作説明の本文 */
body.lp .deep>summary .deep-a{font-size:13px}
body.lp .heronote>summary{font-size:13px}
body.lp .dx-q legend small.dx-hint,
body.lp .dx-hint{font-size:13px}
body.lp .kid-name,body.lp .kid-note,body.lp .kidsline,
body.lp .cta-price span{font-size:13px}

/* #stickyCta のホバー無変化は「判断」ではなく詳細度事故だった。
   静止側 body.lp:not(.lp-win) .stickybar .lp-btn-main (0,4,1) が
   一般ホバー body.lp .lp-btn-main:hover (0,3,1) に勝っていた。
   3ページで挙動が割れていた（win だけ変化する）ので揃える。(0,5,1) */
body.lp:not(.lp-win) .stickybar .lp-btn-main:hover{background:#EBB763}

/* .skip の固定オフセットは3回失敗している：
   (0,0) は outline-offset が負座標に描かれて切れ、
   top:120px は PRバー（実測最大 joho 114.34px）は避けたが「下に何があるか」を測っておらず、
   320〜900px の全幅で .lp-eyebrow / h1 を覆っていた（600pxでは見出しから主語が消え
   「本文へスキップ 平均点が／1年で12.67点下がりました」になる）。
   避ける対象が上下の両方にあるので、固定値で解ける幅は存在しない。
   フォーカス時だけ通常フローに戻して押し下げる。重なりが原理的に起きない。 */
body.lp a.skip:focus{position:static;left:auto;top:auto;right:auto;
  display:block;width:-moz-fit-content;width:fit-content;margin:6px 0 0 6px}
body.lp a.skip:focus-visible{outline-offset:3px}

/* 追従バーの予約。359-360px でバーが縮むのに予約が固定で、
   win 86.9px / vocal 67.5px の死に空間ができていた */
/* 旧 @media (min-width:353px) and (max-width:360px){112px} は削除。
   末尾の (min-width:353px){:not(.lp-win) → 95px} に詳細度(0,3,1)<(0,4,1)でも
   順序でも負けており、実効値は95pxだった。112px と書いてあるのに効いていない
   ＝読む人を誤らせるだけのルールだったため */
/* win のバーが縮むのは360px。352-359 はまだ146.3pxある */
/* lp.css:1507 body.lp .cta-alt .cta-price span{12.5px} (0,3,2) に負けていた。
   対象は「入会金は即日入会なら0円」＝入口価格の打消しでラベルではない */
body.lp .cta-alt .cta-price span{font-size:13px}

/* #apply の濃い地の上のリンク。#price アンカーを足したとき色を指定せず 2.828 になった。
   .verdict-sub 本体は #E8DCCF（win は #C3BEDC）なので、リンクもその系列に揃える */
body.lp .verdict-sub a{color:#E8DCCF;text-decoration:underline}
body.lp .verdict-sub a:hover{color:#fff}

/* #apply の #price アンカー。文字色は揃えたがリングを揃えていなかった。
   body.lp a:focus-visible (0,2,2) に (0,3,2) で勝つ */
body.lp .verdict-sub a:focus-visible{outline:2px solid #E8DCCF;outline-offset:3px}

/* .callout 内の文中リンク。outline-offset:3px でリングが次行の .op-tag に触れていた
   （line-height 30.4px に対し箱21px＝半レディング4.7px、offset3+幅2=5px で届く）。
   offset を1pxまで詰めてもリング外縁と .op-tag の間は白2pxしか残らず、
   行間が動けば接触する。offset をこれ以上詰めると今度は文字に食い込むので、
   .op-tag 側を下げて離隔を稼ぐ（.callout 内のみ。他所の .op-tag は現状維持） */
body.lp .callout p a:focus-visible{outline-offset:1px}
body.lp .callout .op-tag{margin-top:5px}

/* joho の FAQ は .faq ではなく details.qa。.qa>summary:hover が1本も無く、
   10件がホバーで無変化だった（focus 側だけ 1754行で手当てされていた） */
body.lp .qa>summary:hover{background:var(--lp-surface)}

/* win のバーは 345-359 で146.3px固定。予約215pxだと68.7pxの死に空間になる */
/* vocal .kidsline a：リンクが2行目に折り返し、直上の .pr-tag の真下に来る。
   リング色と .pr-tag の地が同一トークン var(--lp-main) なので 1.000:1 だった。
   offset:1px は幾何で逃げただけで、行間が3px動けば戻る。
   .pr-tag の地は body.lp .pr-tag{background:var(--lp-main)} の1本だけで、dark の上書きは無い。
   トークンは両テーマとも --lp-main で、値のほうがテーマで変わる：
   light #A94A1B(輝度0.134) / dark #E08A52(輝度0.346)。
   （--lp-main-ink と取り違えた記述をここに書いていた。数値は正しく、トークン名が誤りだった）
   - light：地(輝度0.925)に3:1以上＝輝度0.275以下、タグに3:1以上＝輝度0.011以下。
     交わるので #000 で解ける（地 19.5:1／タグ 3.68:1）。
   - dark：地(輝度0.006)に3:1以上＝輝度0.118以上、タグに3:1以上＝輝度0.082以下。
     交わらない＝色では解けない。--lp-ink は 2.23 どまりの緩和で、離隔が本体。
   そこで dark 側のために margin-top:4px で離隔を広げる（折り返すのは402px以下だけ）。
   実測：リング外縁↔.pr-tag下端 は margin 無しで −0.25px（＝わずかに重なっていた）、
   4px 付けて +3.75px。「2.75px→6.75px」と書いていたが、どちらも 3px 甘い誤記だった。
   3.75px しか無いので、行間・フォントが動いたら必ず測り直すこと */
body.lp .kidsline a:focus-visible{outline-color:#000;outline-offset:1px}
@media (prefers-color-scheme:dark){
  body.lp .kidsline a:focus-visible{outline-color:var(--lp-ink)}
}
@media (max-width:402px){ body.lp .kidsline a{margin-top:4px} }

/* 本文A8ボタンが折り返しで縦に並ぶと 4px+4px=8px 間隔になり、
   別々の広告主への導線が誤タップで入れ替わる。
   2本は隣接兄弟だが同じ行に並ぶ幅もあるので margin-top では上下がずれる。
   左右対称に増やして、積まれたときだけ 16px になるようにする */
body.lp .oneline a[href*="a8.net"]{margin-top:8px;margin-bottom:8px}

/* .hero-jump に :hover が1本も無く、FV の中でホバー無変化だった
   （.faq を見て details.qa を取りこぼしたのと同型） */
body.lp .hero-jump:hover{color:var(--lp-ink)}

/* 追従バーの予約。実測した変化点は win 330/332/345/360/371/423、vocal 324/343/353。
   前版は6バンド中1つしか当たっておらず、33-52px の死に空間が残っていた */
/* 371-378 はバーの文言2状態のうち「通過後」が 128.14px になるので 128px では
   0.14px 不足する。ここは上流の (min-width:361px) and (max-width:429px){145px} に
   落として 145px を得る（余裕16.86px）。そのため下の帯は 371 ではなく 379 始まり。
   ※361-429 の帯を狭めると 371-378 が黙って壊れる。動かすときは2文言状態で測ること */
/* 帯は下限側しか引けておらず、上限側は素の 112px に落ちていた。
   実測の max（2文言状態）は vocal ≥353px で 77.5→75.6、win ≥464px で 76.2→75.6。
   どちらも 95px で +17.5〜+19.4 に収まり、34.5〜37px の死に空間が消える。
   win 430-463 は max 94.4px なので 112px のまま（ここに 95px を当ててはいけない） */
/* ---------- 第28回：デザイナー指摘 ---------- */
/* a.skip のホバーが 3ページ×18構成すべてで 1.4.3 不合格だった。
   body.lp a:hover{color:var(--lp-main-ink)} が、地が var(--lp-main) の
   スキップリンクにも当たり「濃い地に濃い字」になる
   （light 1.302 / dark 1.333、win は light 1.427 / dark 3.302。非ホバー時は 5.703）。
   Tab でフォーカス→マウスを載せる、という普通の操作で入る状態だった。
   .hero-jump / .qa>summary で潰したのと同型の取りこぼし。
   トークンはテーマで反転するのでホバー地は固定値にし、白字を保つ。
   白 on #6E2A0C = 10.6:1 ／ 白 on #8E0F3E = 9.25:1 */
body.lp a.skip:hover{background:#6E2A0C;color:#fff}
body.lp.lp-win a.skip:hover{background:#8E0F3E;color:#fff}

/* 打消しの中の販促断片（「金利0円」）だけが 21px で、打消し本体の1.75倍だった */
.dxprice .dxp-l li small b{font-size:inherit}

/* 撤回した修正の記録。@media (max-width:335px) で .hero-jump を包む p の
   マージンを 16px→6px に詰め、2本目のジャンプ(#price)を折り返し(844)内へ入れようとした。
   3つ間違えていた：
   (1) 原因は .cb-pr ではなく .lp-lede（328→329で5.11行→4.11行＝−27.75px）。
       .cb-pr は 320-335 で一貫して4.06行で、境界を決めていない
   (2) 帯は 332-335 ではなく 329-335、超過は14pxではなく22.14px
   (3) 段落間が6pxになると outline-offset:3px + 幅2px のリング外縁が
       隣のリンクの箱まで1.0pxに迫り、リング同士の占有域が4px重なる（実測11px→1.0px）。
       さらにセレクタが body.lp スコープなので vocal も巻き添えで 11px→4.75px。
       vocal に折り返し問題は無く、利得ゼロの純損だった
   そもそも 320-350px では主CTA自体が iOS実効659pxの外にあり、
   副リンクのために844を数px稼ぐ価値がない。リング離隔を優先して撤回する */

/* ---------- 第31回：デザイナー指摘 ---------- */
/* 今回 #price の「入塾金が不要なら成立しません」リンクを .lp-cta の cb-note にも足したが、
   色を指定せず濃い地(--lp-dark #2E1D14)に --lp-main(#A94A1B) で 2.828:1（ホバー 2.172）。
   .ctaband .cb-note a（1677行）と .verdict-sub a（2092行）には手当て済みで、
   .lp-cta 側の1本だけが漏れていた。同じ構図・同じ2.828なので同じ色に揃える。
   リング色も body.lp a:focus-visible の --lp-main のままで 2.83:1（1.4.11 失格）だった */
body.lp .lp-cta .cb-note a{color:#E8DCCF;text-decoration:underline;text-underline-offset:3px}
body.lp .lp-cta .cb-note a:hover{color:#fff}
body.lp .lp-cta .cb-note a:focus-visible{outline:2px solid #E8DCCF;outline-offset:3px}
body.lp.lp-win .lp-cta .cb-note a{color:#E4E1F4}
body.lp.lp-win .lp-cta .cb-note a:focus-visible{outline-color:#E4E1F4}

/* footer-nav は style.css:320 が gap:8px、lp.css:868 が min-height:44px。
   リング外縁は outline:2px + offset:3px = 5px なので 8 - 10 = -2px で3ページ全幅で重なる。
   joho のジャンプ2本で「リングの重なりは不可」として帯を撤回したのと同じ基準 */
body.lp .footer-nav{gap:12px}

/* win の出典リンク2本のリングが -0.61px 重なる件。
   li{margin-bottom:8px→11px} にしたが、**これでは解消しない**（実測で確認）。
   **2本は同一の li の中にある**（closest('li') が同一オブジェクト）。隣の li は存在しない。
   したがって li のマージンを触っても原理的に効かない。
   行送り30.4px・フラグメント高21px → 行箱間の空き9.39px、リング外縁5px×2 で -0.61px。
   これは320〜1280の全幅で一定で、折り返し由来でも幅依存でもない。
   11px は可読性の改善としては残すが、-0.61px の解消にはなっていない。
   据え置く理由も 2.5.8（標的の寸法）ではない。正しい理由は
   **リングは同時に2本描画されない**こと。片方にフォーカスがあるとき、
   そのリングが侵入するのは隣接行の leading であって、隣のリンクの字形までは4.7px残る。
   知覚上も規範上も影響がないので、line-height を触る代償のほうが大きい */
body.lp .deep-in>ul>li{margin-bottom:11px}

/* .pr-brand b は同一要素・同一役割なのに joho だけ13px（ページ内styleが1563行の12pxに勝つ）。
   「床は lp.css 側で3ページ揃える」と宣言しておきながら、この1件だけ移送し忘れていた */
@media (max-width:760px){
  body.lp .pr-brand b{font-size:13px}
}

/* ヒーローの折り畳み目次。2本の .hero-jump（無料→費用の順）は残し、その下に足す。
   ジャンプ2本は主CTAと打消しより下にあるので、ここに何を置いても CTA は動かない。
   閉じた状態の summary は1行。開示物ではないので折り畳んでも打消し表示の要件に触れない */
body.lp .lp-toc{list-style:none;padding:0;margin:8px 0 0}
/* 箱間隔2pxではリング外縁5pxが隣の箱に -3px 入る（無害だが vocal と同じ事象を無記録で残さない） */
body.lp .lp-toc li{margin:0 0 6px}
/* 「出典」だけ文字数が少なく 31×44.25px で 44px 規約を割っていた（display:inline-block は幅が文字数で決まる） */
body.lp .lp-toc a{display:inline-block;min-width:44px;min-height:44px;padding:12px 2px;
  font-size:13.5px;line-height:1.5;color:var(--lp-main-ink);
  text-decoration:underline;text-underline-offset:3px}
body.lp .lp-toc a:hover{color:var(--lp-ink)}

/* 【解消済み】vocal の .hero-jump と a「金額の根拠」のリング衝突（記録を3回書き直した末に、実際に直した）
   症状：箱の縦の空き3.75px に対しリング外縁5px（offset:3px + 幅2px）で 1.25px 食い込み、
   隣リンクの下線（744.25-745.25）がリング帯（744-746）の内側に全部入っていた。
   衝突していた幅：320・335・350・360・375・412・430・480・768・800（390/400 は水平に離れていて非衝突）。
   対処：下の body.lp .hero-jump:focus-visible{outline-offset:1px}。
   実測（2026/09/12、上記10幅すべて）：**リング対箱 +0.75px、衝突0**。
   ※この記録は過去に2回とも誤っていた。教訓を残す：
     1回目「水平に36px離れているので衝突なし」→ 390/400 でのみ成立する観測だった。
     2回目「375と480は21.5px離れて衝突しない」→ 逆。この2幅は「金額の根拠」が2フラグメントに
       折り返しており、フラグメント0だけを見ていた。21.5px はフラグメント0の値。
       **折り返すインライン要素は getClientRects() の全フラグメントを見ること。**
     3回目「重なるが無害」→ 下線を飲み込んでいたので無害ではなかった。
   -6.25px と書いた時期もあるが、それは両方の箱にリングを足した二重計上 */

/* ヒーローのファーストビュー余裕（2026/09/12 実測、iOS実効659px想定、CTAボタン下端）
   320-347px … 685-734 で **659の外**（-26.52〜-75px）。347も外（-26.52）。
   348-356px … 651-652。**余裕は +7.23〜+7.98px しかない。ここが綱渡り。**
   360px    … 615（余裕 +43.53px）
   375-430px … 578-606（余裕53〜81px）
   ※以前ここに「360pxの余裕は4px」と書いたが誤り。別ラウンドの報告値を、
     自分の実測（360→615）を確認せずに転記したもの。危ないのは360ではなく350-356。
   打消し（.cb-pr）の下端は全幅で 480-636 ＝ **どの幅でも659の内側**。
   つまり320-346で外れるのは広告ボタンだけで、打消しは残る。失敗の方向としては正しいので据え置く。
   解消するには打消しの本文を削るしかなく、機会損失のために打消しを削るのは逆。
   次にヒーローを触るときは、350-356px の8pxを先に確認すること。
   ★測り方：iframe に scrolling="no" を付け、内側で documentElement.style.overflow="hidden"。
     これで clientWidth == matchMedia幅 == 実機と同じになる。
     「外側幅 = 目標 + スクロールバー15px」で合わせる方式は使わないこと。
     その方式だと MQ には 365 を見せながら箱は350px幅、という実機で起こりえない状態になり、
     大きいフォントが狭い箱に入って h1 が2行→3行に化け、CTA下端が 651→689 と約38pxずれる。
     実際にこの方式で測った報告と37〜40px食い違い、原因はこれだった（2026/09/12 に両方式で検証済み） */

/* .callout-label を span→h3 にした。45,413pxのページに見出しが13個しか露出しておらず、
   「退塾の期限は公式サイト内で3通りあります」「公式サイト内で食い違っている点」といった
   慎重な読者がいちばん飛びたい箇所に、見出しナビゲーションで到達できなかった。
   .callout-label 自身が font-size / font-weight / margin-bottom を持つので、
   h3 の既定の上マージンだけ落とせば見た目は変わらない */
body.lp h3.callout-label{margin-top:0}

/* vocal の .hero-jump と a「金額の根拠」のリング衝突を、記録ではなく実際に解消する。
   箱の縦の空きは3.75px、リング外縁は offset:3px + 幅2px = 5px なので 1.25px 食い込み、
   隣リンクの下線（744.25-745.25）がリング帯（744-746）の内側に全部入っていた。
   下線は識別の手がかりなので「無害」では済まない。
   offset を1pxに詰めるとリング外縁は3pxになり、3.75pxの空きの内側に収まる（余裕0.75px）。
   .kidsline a / .callout p a で使ったのと同じ手 */
body.lp .hero-jump:focus-visible{outline-offset:1px}

/* .callout-label を h2 として使う箇所がある（vocal #summary）。
   その節に他の見出しが無く、h3 にすると h1→h3 の飛びになるため。
   .callout-label が font-size/weight/margin-bottom を持つので、h2 の既定も打ち消しておく */
body.lp h2.callout-label{margin-top:0}

/* .lp-eyebrow は 11px だが、3ページとも中身は日本語の内容テキスト（スクール名・対象読者・提供範囲）で、
   しかも h1 の直上＝初期画面にある。Latin/数字のラベル（.lp-kicker の STEP 1、.dx-n の Q1、.pit-n の 01）
   とは性質が違うので、床の対象外という整理から外して13pxに上げる。
   letter-spacing:.2em が効いているので、13pxでも行の長さは大きく変わらない */
body.lp .lp-eyebrow{font-size:13px;letter-spacing:.08em}

/* 360px では .lp-eyebrow が13px+letter-spacing.08em で2行に折り返し、
   ヒーロー全体が38px下がって初回表示から金額が押し出される。
   狭い側では字送りを0にして1行を保つ（13pxは維持＝和文の可読性は落とさない） */
@media (max-width:375px){
  body.lp .lp-eyebrow{letter-spacing:0}
}
/* 412×659（Pixel）で総額の下端が659を4px超えていた。
   内容は削らず、ボタンと打消しの間の余白だけ詰めて回収する */
/* joho の総額が412×659で4px外に出るのを回収するための詰め。
   body.lp スコープだと vocal(14→8px)/win(7→8px) の余白まで動くので、
   ヒーローに .cb-note を持つページ＝joho だけに限定する */
@media (max-width:430px){
  body.lp .lp-hero:has(.cb-note) .lp-hero-cta{margin-bottom:8px}
}

/* .lp-eyebrow の1文字孤立は「解消」ではなく帯が移動していた。
   13px化の前後で、折り返しが起きる幅が joho 340-348px / win 320px にずれただけ。
   ::before の装飾罫26px + gap9px = ちょうど35px を消費しているので、狭い側で落とす。
   実測：joho@320 テキスト273.0 対 使用可能276.0、win@320 247.9 対 276.0 → どちらも1行に収まる。
   装飾罫なので情報は失われない */
@media (max-width:355px){
  body.lp .lp-eyebrow::before{display:none}
}

/* 目次リンクの箱の縦の空きは6px、リング外縁は offset3+幅2=5px で離隔+1px しかない。
   .kidsline a / .callout p a / .hero-jump と同じ手で3pxにする */
body.lp .lp-toc a:focus-visible{outline-offset:1px}

/* .hero-target は font-weight:600 の上に内側の <strong> が900。
   つまり副見出しは全文が太く、<strong> が強調として機能していない
   （win では 149/149字＝100%が weight>=600）。地を400に戻して strong を効かせる */
body.lp .hero-target{font-weight:400}
/* .lp-eyebrow は13pxの字送りラベルで、直下の h1(700) と太さが競合していた */
body.lp .lp-eyebrow{font-weight:500}

/* <summary> の中に h2 を入れて三重読み上げ（リージョン名→見出し→同名の開閉ボタン）を1本化した。
   summary は heading content を含められる。見た目は summary のままにする */
body.lp summary > h2.summary-h{
  display:inline;font:inherit;color:inherit;margin:0;letter-spacing:inherit;
}

/* .assure q は font-weight:600 で、引用が丸ごと太字になっていた
   （win の120字＝初見の最長連続）。引用は「」で既に区切られているので地の太さに戻す。
   joho で「引用まるごと太字」を外したのと同じ整理を、共有CSS側にも当てる */
body.lp .assure q{font-weight:400}

/* 行見出し（tbody th）は背景 --lp-tint でデータセルと既に区別がついており、
   style.css:258 の font-weight:700 は二重指定だった。本文の <strong> と同じ重さで
   競合し、強調の配分を壊していた（win #courses だけで 1625字、3ページ計 1799字が
   この構造由来の太字）。列見出し（thead th）は 700 のまま残す。 */
body.lp tbody th{font-weight:500}

/* 開閉トグル（.more / .deep）の 700 は、三角マーカー・背景・--lp-main-ink の
   配色で既に区別がついており冗長。本文の <strong> と同じ重さで競合していた。
   500 なら本文 400 より重く、開けることは伝わる。
   FAQ の質問文（.faq summary）は機能的に見出しなので 700 のまま。 */
body.lp .more>summary,body.lp .deep>summary{font-weight:500}

/* 上2つの 500 について実測（Chrome / Windows）。
   和文は全角固定幅なので getBoundingClientRect の幅では重さを判定できない
   （400/500/600/700 とも 194.89px で同一）。canvas のインク量（アルファ総和）で測る。
   ★測定条件を必ず併記すること。文字列とフォントサイズが変われば値も変わる★
     文字列「受講料と割引の条件」／14px／ページのフォントスタック
       → 400=1.000 / 500=1.271 / 600=1.821 / 700=1.821
     文字列「実質的に描き分けられているか」／14px／同スタック（第39回デザイナー計測）
       → 400=1.000 / 500=1.184 / 600=1.735 / 700=1.735
     Meiryo 単体／14px → 400=1.000 / 500=1.000（中間ウェイトなし＝400に落ちる）
     Yu Gothic 単体／14px → 500=1.184（Medium あり）
   500 は実在の中間ウェイトで、本文 400 より重く <strong> 700 より軽い。
   中間ウェイトを持たない環境では 400 に落ちるが、
   .more/.deep は三角マーカーと --lp-main-ink、tbody th は --lp-tint の背景で
   区別が残るので、重さ単独に依存していない。 */


/* 補強として tbody th に border-right:2px solid var(--lp-line) を入れたが、
   第40回デザイナーの実測で **効いていない** ことが分かったので撤去した。
   補強したかった背景差が light 1.12〜1.16:1 なのに対し、罫線自体が
   joho/vocal 1.44:1 / win 1.30:1（320px では th 側が 1.10〜1.15:1）。
   ほぼ同じ見えなさで、情報を足していない。
   実際に区別を担っているのは th[scope=row]（支援技術へ確実に伝わる）と背景。
   視覚的に補強するなら --lp-line ではなく 3:1 以上の色を新たに用意すること。 */

/* ≤360px で joho の FV を詰め、CTAボタンの「ラベル1行目」を初見に入れる。
   ★「ボタンの上端が fold の内側」では足りない。88px の箱の上端12pxは帯であって、
     ラベルは1文字も読めなかった（320×568 実測: top 555.7 / ラベル 0/23文字）。
     判定はラベル1行目が全部入るか（Range で文字単位）で行うこと。
   実測の内訳（320px, joho）: eyebrow mb14 / h1 mb10・行高34.5 / hero-target mb12 /
     lp-lede mb14 / cb-pr mb10 / ボタン padding 18+18。ラベル1行目 top=576.7、必要 32.7px。
   .lp-hero .cb-note は joho にしか無いので :has() で vocal/win を巻き込まない
   （確認済み: vocal false / win false）。 */
@media (max-width:360px){
  body.lp .lp-hero:has(.cb-note) .lp-eyebrow{margin-bottom:4px}
  body.lp .lp-hero:has(.cb-note) h1{margin-bottom:6px;line-height:1.18}
  body.lp .lp-hero:has(.cb-note) .hero-target{margin-bottom:8px;padding:2px 0}
  body.lp .lp-hero:has(.cb-note) .lp-lede{margin-bottom:4px}
  body.lp .lp-hero:has(.cb-note) .cb-pr{margin-bottom:6px}
  body.lp .lp-hero:has(.cb-note) .lp-hero-cta .lp-btn-main{padding-top:12px;padding-bottom:12px}
  /* 第44回：320×568 でボタン2行目「（体験3,000円）」が fold を 14.7px 超えていた。
     ★ 詳細度に注意。body.lp .lp-lede は (0,2,1) で、上の :has() 版 (0,3,2) に負ける。
       閲覧者の初回案がこれで黙って効かず、余りが 3.3px しか出ていなかった。
     実測（この4行を足した後）: 320×568 で行2 bottom=556.7 ＝ 余り 11.3px。
     360 は +128.6px、390 は +290.0px、1280 は1行で収まる。 */
  body.lp .lp-hero:has(.cb-note){padding-top:0}
}

/* 【未処理・実測済み】win の FV のボタンラベル。
   ★ 前版のこのコメントは 320px だけで結論を出していた。幅ごとに事情が違う（第42回で訂正）。
   第42回デザイナーが joho と同じ圧縮を win に注入して実測:
   | 幅 | 現状 行1 bottom | 圧縮後 | 節約 | なお不足 |
   | 320 | 662.0 | 633.1 | 28.9 | **65.1px** ← 全マージン0でも 0/18字。本文を削る編集になる |
   | 360 | 622.7 | 593.9 | 28.8 | 25.9px |
   | 390 | 603.2 | 574.4 | 28.8 | **6.4px** ← .lp-hero-cta の margin-bottom:7px ひとつ分 |
   → 「本文を削る編集になる」は **320 についてのみ正しい**。390 は余白ひとつで届く。
   原因: win のヒーローは .hero-target が2本（76.3+98.4px）＋h1 100.8px で、
   ボタン前に約475px の本文がある。
   win は A8 の提携が承認待ちで公開できないため、ここでは手を入れず記録に留める。
   着手するときは joho と同じ判定（ラベル1行目が全部入るか／Range で文字単位）で測ること。

   ★ joho の 320 も未達（第42回で訂正）。「320/360/390 とも 23/23」は誤りだった。
     320: 行1「情報ラボの公式サイトを開く」bottom 558.7 ✅ / 行2「（体験3,000円）」bottom 582.7 ✗
          ＝ **13/23字**、不足 14.7px。360 と 390 は 23/23。
     原因は判定条件。`rc.top < fold` で数えると、foldをまたぐ行が「入った」に化ける。
     **文字が全部入ったかは `rc.bottom <= fold` で見ること。** */


/* 【計測手法の訂正・第42回】dark を `CSSMediaRule.media.mediaText` の書き換えで
   再現してはいけない。カスタムプロパティでテーマを切っているため、
   ルート上の --lp-main-ink は更新されるのに、子孫で解決済みの var() が再解決されない。
   実測（win の .lp-btn-ghost の computed color）:
     native light  : rgb(196,31,91)
     mediaText書換 : rgb(196,31,91)  ← 古いまま。body.zoom で強制リスタイルしても変わらない
     native dark   : rgb(255,147,184)
   これを信じて dark に 3.02:1 / 3.86:1 の不合格を2件立てたが、
   native emulation（CDP Emulation.setEmulatedMedia）で測り直すと 8.26:1 / 7.27:1 で合格だった。
   → dark の検証は必ず native emulation で行うこと。 */

/* #notbuy（「払わないと決めた場合に、できること」）は暗色バンド .lp-cta の中にある。
   .callout は明色背景を前提にしているので、そのまま置くと
   .lp-cta の白文字が .callout の白背景に乗って CR 1.00 になった（実測13件）。
   バンドの配色に合わせる。同じバンドの .cb-note は 10.54:1 で通っている。 */
body.lp .lp-cta #notbuy{
  background:transparent;
  border:1px solid rgba(255,255,255,.38);
}
body.lp .lp-cta #notbuy .callout-label{color:#fff}
body.lp .lp-cta #notbuy,
body.lp .lp-cta #notbuy li{color:#F3EAE0}
body.lp .lp-cta #notbuy a{color:#E8DCCF;text-decoration:underline;text-underline-offset:3px}
body.lp .lp-cta #notbuy a:focus-visible{outline:2px solid #E8DCCF;outline-offset:3px}
body.lp.lp-win .lp-cta #notbuy a{color:#E4E1F4}

/* CTAバンドの太字飽和（第44〜45回）。実測 #band2 58.0% / #band4 57.3% / #band0 47.8% /
   #band3 41.9% で、同じ .cb-note の中の打消し
   <strong>無料ではありません。入塾しなければ3,000円は戻りません。</strong> が
   周囲と区別できなくなっていた（本文全体は 24.1% なのでバンドだけが外れ値）。
   繰り返される5バンドに限り <b> を素に戻し、太字を <strong> の1本に絞る。
   ★ ヒーロー（.lp-hero .cb-note）と最終CTA（#apply）には当てない。
     そこの太字列は「3,000円は戻らない／77,000円と30,250円は別体系／総額530,750円／
     所要時間は非公開」という走り読みの要約になっていて、
     閲覧者・マーケターの双方が最良点として挙げている。初出と結論は残す。
   ★ .cb-note だけを狙ったら効かなかった（実測 band2 58.0→51.0%）。
     太字の本体は .ctaband 直下のリード文 <p><b>…全文…</b></p> のほうだった。
     .ctaband は joho の summary/band0/band2/band2b/price/band3/band4 にあり、
     **ヒーローと最終CTA(#apply)には無い**ので、そこは意図どおり温存される。
     ただし .ctaband は vocal/win にもあり、id も共通（#price/#summary）なので
     id では joho を切り出せない。win の lp-win と同じ流儀で body に lp-joho を付けた。 */
body.lp.lp-joho .ctaband b{font-weight:400}

/* J-C（第45回マーケター）。FVで「1年で12.67点」が 27.69px なのに、
   実際の意思決定額「総額530,750円」は .cb-note の 13px だった。
   打消し全体のサイズは 13px のまま（明瞭性の検証済みの値）で、
   17か月の総額だけ上げる。MEMORY「強調は量ではなく配分」。 */
body.lp.lp-joho .lp-hero .cb-note b.fv-sum{font-size:16px}

/* 打消し表示の明瞭性（第46回マーケター）。本文 <p> が16pxなのに .cb-note / .cb-pr が13px
   ＝本文の81%。打消し表示ガイドラインは「明瞭に表示」を求めており、本文と同等以上が無難。
   14px（本文の87.5%）に上げる。13px床の規則とも両立する。
   ※コントラストは 4.85〜10.54:1 で既に合格しており、ここで変えるのはサイズだけ。 */
body.lp .cb-note,
body.lp .cb-pr,
body.lp .ctaband .cb-note,
body.lp .ctaband .cb-pr{font-size:14px}

/* h3.callout-label が13pxで、本文 <p> の15pxより小さかった（joho は21本すべて）。
   見出しが本文より小さいと見出しとして機能しない。第47回閲覧者の実測：
   「記事でいちばん重要な判断ブロック（#decide）の見出しが、自分の本文より小さい」。
   h2 は22pxなので、その下に収まる17pxにする。
   ※ .callout-label は見出しでない箇所（ラベル用途）でも使われているので、
     h2/h3 として使われているものだけを対象にする。 */
body.lp h3.callout-label,
body.lp h2.callout-label{font-size:17px;line-height:1.55}

/* ★ 上の規則に .ctaband .cb-pr を足した理由（第47回マーケター実測）。
   14px に上げたつもりが、後続の body.lp .ctaband .cb-pr（13px）に後勝ちされ、
   **「以下は広告です」という表示そのものが、それが導く打消し（14px）より小さい**
   という反転が7本に残っていた。広告である旨の明瞭性は
   ステマ規制の運用基準とA8の掲載ルール（「わかりやすく表示してください」）が求めている。 */

/* 2.4.11 Focus Not Obscured (AA)。html{scroll-padding-bottom:10px}（style.css）では
   下端固定の .stickybar に足りず、フォーカスが**100%**隠れていた。
   実測（第47回デザイナー・vocal@412px、Tab 8回目「シアーの体験（0円）」）:
     リンク top 741.81 / h 48（下端 789.81）、バー top 722.53 / h 77.47、vh 800 → 被覆100%。
   バーの実測高:
     win   320:180.11 / 360:128.14 / 375:128.14 / 412:93.06 / 640:75.00 / ≥768:75.59
     vocal 360〜412:77.47 / 640:75.00 / ≥768:75.59
   ※ scroll-padding はスクロールコンテナ（html）に効かせる。body に書いても効かない。 */
/* ★ 第48回に追従バーの折返しを直したので、実測し直して段を付け替えた。
   バー実高（IntersectionObserver を実際に走らせて計測、ページ末尾側も含む）：
     ≦420px … vocal 最大177px（360pxで is-on・長いラベルのとき）／win 最大140px
     ≧421px … 75〜95px
   以前の 90/140/192px は lp-win だけを対象にしていて vocal が漏れており、
   しかも折返し前のバーは 320px で318px・360px で508px あったので、
   どの段でも足りていなかった。 */
html:has(body.lp){scroll-padding-bottom:125px}
@media (max-width:420px){ html:has(body.lp){scroll-padding-bottom:190px} }


/* LP3本には .site-header が無い（実測：querySelector('.site-header') が null）。
   style.css の追従ヘッダ用 scroll-padding-top（195/135/75px）は、ここでは
   ただの空白になるので 16px に戻す。以前は ≦760px にしか入っておらず、
   761px 以上で 92px の死に余白が残っていた。 */
html:has(body.lp){scroll-padding-top:16px}


/* ---------- 広告である旨とPRバッジを、打消し（14px）と同じ大きさに揃える（第48回） ----------
   第47回に .cb-pr を14pxへ上げたが、クラスの違う開示が13px以下のまま残っていた。
   実測（390px / 1280px とも同値）：
     .cb-pr 14px ／ .cb-note 14px ← 揃っている
     .pr-note 13px（joho #apply・vocal #apply）  ← 広告である旨が打消しより小さい
     .pr-tag 13px（joho 11本・vocal 12本・win）  ← PRバッジ本体が打消しより小さい
     .under-btn 13px（vocal #apply ×2）／.midcta-pr 11.5px／.kidsline 13px
   ステマ規制の運用基準（一般消費者にとって明瞭に）とA8掲載ルールが求めるのは
   「広告である旨」の明瞭性なので、打消しより小さいのは順序が逆。
   ★ 追従バー（.stickybar-t / small）はここに入れない。帯の高さが変わり、
     scroll-padding-bottom の段（90/140/192px）と食い違うため別に測ってから触る。 */
body.lp .lp-cta .pr-note,
body.lp .pr-tag,
body.lp .kidsline,
body.lp .midcta-pr,
body.lp .lp-cta .under-btn,
body.lp .ctaband .under-btn,
body.lp .srcnote small,
body.lp .pr-bar .pr-note{font-size:14px}


/* ---------- 追従バーが狭幅で画面を覆う事故を止める（第48回デザイナー実測） ----------
   実測（scrolling="no" / clientWidth を assert / IntersectionObserver を実際に走らせて
   1,100ms 待機）：
     vocal 320px → バー高 318px・コピー欄の幅 66px
     vocal 360px（is-on・ボタン283px）→ バー高 **508px**・コピー欄の幅 **39px**
     win  320px → バー高 200px・コピー欄の幅 66px
   原因は3つの規則の組み合わせ：
     .stickybar .lp-btn-main{flex:none;white-space:nowrap} … ボタンが縮まない
     .stickybar-in{flex-wrap:nowrap}                       … 折り返して逃がせない
     → 内側幅 −（縮まないボタン）が残り幅になり、コピー欄が和文1〜3文字の
        縦帯になって、バーが縦に伸びる。
   ★ -webkit-line-clamp で切るのは不可。コピー欄の small には
     「広告です。押すと〜のトップページが開きます」という**広告である旨と着地の説明**が
     入っており、クリップするとステマ規制・打消し表示の明瞭性を損なう。
     切るのではなく、420px以下ではコピーを全幅の1行ブロックにしてボタンを下に置く。
   ★ 併せて max-height で上限を作る。幅に依存しない構造側の歯止め。 */
@media (max-width:420px){
  body.lp .stickybar-in{flex-wrap:wrap}
  body.lp .stickybar-t{flex:1 1 100%;min-width:0}
  body.lp .stickybar .lp-btn-main{flex:1 1 100%;min-width:0;white-space:normal;min-height:48px}
}
body.lp .stickybar-t{min-width:0}
body.lp .stickybar .lp-btn-main{flex:0 1 216px;min-width:0}
body.lp .stickybar{max-height:34vh;overflow:auto}


/* ---------- 追従バーの退避余白を1組にまとめる（第48回） ----------
   ここまでに body.lp:has(.stickybar.is-on){padding-bottom} が**15本**あり、
   95/113/128/130/145/163/180/190/198/215px と幅ごとに手当てが積み重なっていた。
   いずれも折返しを止めていた頃のバー（320pxで318px・360pxで508px）に合わせた値で、
   実測すると 320px では 145px しか出ておらず、バー177pxを覆い切れていなかった。
   折返しを入れてバー高が width に対して安定したので、2本に置き換える。
   実測（スクロールバー幅を0にした上で実際にスクロールし、IntersectionObserverを走らせて
   10地点でバーの可視高を取得）：
     ≦420px … vocal 177px（22%）／win 140px
     ≧421px … vocal 95px ／ win 78px
   ★ 詳細度：既存の `body.lp.lp-win:has(...)` は (0,4,1) で `body.lp:has(...)` (0,3,1) より
     強い。同じ強さの2本を**最後に**置いて、どちらのLPでもこの値が勝つようにする。 */
body.lp.lp-win:has(.stickybar.is-on),
body.lp:not(.lp-win):has(.stickybar.is-on){padding-bottom:calc(125px + env(safe-area-inset-bottom))}
/* 480pxでバーが110px出るので115pxでは余裕が5pxしかなかった。実測して125pxに。 */
@media (max-width:420px){
  body.lp.lp-win:has(.stickybar.is-on),
  body.lp:not(.lp-win):has(.stickybar.is-on){padding-bottom:calc(195px + env(safe-area-inset-bottom))}
}


/* 追従バーの中の開示（「広告です。押すと〜のトップページが開きます」）だけが13pxで、
   他の広告表記を14pxに揃えたあとも打消し14pxより小さいままだった（第49回デザイナー実測）。
   ★ 第48回は「帯の高さが変わるので別に測ってから」として外していたが、
     折返しを入れて高さが安定したので上げる。上げたあとのバー高は再測して
     scroll-padding-bottom / padding-bottom の段に反映すること。 */
body.lp .stickybar-t small{font-size:14px}

/* ---------- 運営者の解釈であることの注記を、地の文になじませる（第49回・運営者指示） ----------
   `.op-tag` は濃い地に明るい文字のチップ（inline-block・background・padding・角丸）で、
   joho だけで **60個**ある。1画面に2〜3個出る密度で、本文より目立っていた。
   ★ 文言は1つも減らしていない。**見た目の重さだけ**を落とす。
     ここが打ち消しているのは広告主の主張ではなく「この判断は運営者のものだ」という
     自己開示なので、打消し表示（.cb-note / .pr-note）とは別物として扱う。
     広告主に不利な断定に付いているものも、文としては残る。
   ★ 13px床は維持。色は --lp-muted（本文と同じ地の上で AA を満たす）。 */
body.lp .op-tag{
  display:inline;                 /* チップをやめて文中に流す */
  background:none;
  color:var(--lp-muted);
  font-size:13px;
  font-weight:400;                /* 500→400 */
  letter-spacing:normal;
  padding:0;
  border-radius:0;
  margin:0 0 0 .35em;
}
/* 前後の本文と混ざらないよう、括弧で括る（印刷・読み上げでも境界が残る） */
body.lp .op-tag::before{content:"（"}
body.lp .op-tag::after{content:"）"}
/* .callout 内だけ margin-top を足していた回避策は、inline になったので不要 */
body.lp .callout .op-tag{margin-top:0}
/* 濃い帯（.ctaband / .lp-cta）の上では --lp-muted が 2.68:1 にしかならない（実測2件）。
   帯の中だけ、帯用の弱色に切り替える。#notbuy を帯の中に置いたときと同じ型の事故。 */
body.lp .ctaband .op-tag,
body.lp .lp-cta .op-tag{color:#CDBCAD}
body.lp.lp-win .ctaband .op-tag,
body.lp.lp-win .lp-cta .op-tag{color:#C3BEDC}


/* 和文の孤立行（最終行に1文字だけ残る）を減らす。
   2026/09/14 実測：python-winner で 6件→2件、ページ高さの差は0px。
   .callout-label は上位で text-wrap:balance を持つが、h3 として使われた場合に
   効いていなかったので body.lp スコープで明示する。
   ※ joho・vocal にも効くので、変更後は3本とも高さと孤立行を測り直すこと。 */
body.lp .callout-label{text-wrap:balance}
body.lp main p{text-wrap:pretty}


/* ==========================================================
   ポートフォリオ準拠の共通スキン（body.lp.lp-pf）。運営者のポートフォリオサイト
   に合わせる（2026-09-15）。
   採取値：地 #F8FAFC／面 #FFFFFF／濃地 #0F172A／本文 #334155／
   注記 #64748B／罫 #E2E8F0／主色 sky #0EA5E9／淡 #E0F2FE、
   書体 Noto Sans JP（見出し900・本文400・ボタン700）、
   角丸 ボタン12px・カード16px、セクション余白112px、コンテナ1152px。
   ※ sky #0EA5E9 に白文字は2.85:1しか出ないので、面として使うのは
     装飾だけにして、ボタンと文字色は濃い側（#0369A1）を使う。
   ========================================================== */
body.lp.lp-pf{
  --lp-ground:#F8FAFC;
  --lp-surface:#FFFFFF;
  --lp-tint:#F1F5F9;
  --lp-ink:#0F172A;
  --lp-text:#334155;
  --lp-muted:#5A6879;      /* slate-500 #64748B は淡地で4.5:1に届かないので1段濃く */
  --lp-line:#E2E8F0;
  --lp-main:#0EA5E9;       /* ポートフォリオの主色（面・罫・装飾） */
  --lp-main-ink:#0369A1;   /* 文字・ボタンに使う濃い側 */
  --lp-soft:#E0F2FE;
  --lp-dark:#0F172A;       /* ヒーロー／CTA帯の濃地 */
  --lp-accent:#0EA5E9;
  --lp-accent-ink:#0369A1;
  --lp-badge-b:#E0F2FE;
  --lp-scrim-a:rgba(241,245,249,.96);
  --lp-scrim-b:rgba(241,245,249,.42);
  --lp-scrim-c:rgba(241,245,249,.10);
  /* 2026-09-18：Noto Sans JP（Webフォント）を外し、端末標準の書体に。style.css の --display と同じ理由。 */
  --lp-serif:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
}
body.lp.lp-pf{--lp-btn:#0369A1;--lp-btn-h:#075985;--lp-btn-ink:#fff;--lp-link-h:#075985}

/* 見出しは明朝700ではなく、ポートフォリオと同じ Noto Sans JP 900 */
body.lp.lp-pf h1,
body.lp.lp-pf .lp-sec h2,body.lp.lp-pf .lp-cta h2,
body.lp.lp-pf .callout-label,
body.lp.lp-pf .faq summary{font-family:var(--lp-serif);font-weight:900;letter-spacing:0}
body.lp.lp-pf .lp-hero h1 em{font-weight:900}

/* 角丸：ボタン12px、カード・表・FAQ 16px、チップは丸 */
body.lp.lp-pf .lp-btn,body.lp.lp-pf a.lp-btn,
body.lp.lp-pf .cb-main a,body.lp.lp-pf .cta-slot a,
body.lp.lp-pf .dx-cta-slot a{border-radius:12px}
body.lp.lp-pf .callout,body.lp.lp-pf .faq details,
body.lp.lp-pf .tscroll,body.lp.lp-pf .ctaband,
body.lp.lp-pf .fit-item,body.lp.lp-pf .srcnote{border-radius:16px}
body.lp.lp-pf .pr-tag{border-radius:999px;padding:3px 11px}
body.lp.lp-pf .op-tag{border-radius:999px}

/* ポートフォリオのカードは白面＋1px罫で、影を使わない */
body.lp.lp-pf .callout,body.lp.lp-pf .faq details{
  background:var(--lp-surface);border:1px solid var(--lp-line);box-shadow:none}

/* ポートフォリオはライト専用なので、この記事もライトに統一する。
   lp-win には旧パレット時代のダーク変種が11ブロック残っていて、
   ダークモードだと濃地用の文字色（#1A0A14 など）が青いボタンに乗り、
   実測でコントラスト不足が8件出た。ここでライト側の値を上書きして無効化する。
   ※ 個々のブロックを消すとどれかを取りこぼすので、末尾で打ち消す方式にした。 */
@media (prefers-color-scheme:dark){
  body.lp.lp-pf{
    --lp-ground:#F8FAFC; --lp-surface:#FFFFFF; --lp-tint:#F1F5F9;
    --lp-ink:#0F172A; --lp-text:#334155; --lp-muted:#5A6879; --lp-line:#E2E8F0;
    --lp-main:#0EA5E9; --lp-main-ink:#0369A1; --lp-soft:#E0F2FE;
    --lp-dark:#0F172A; --lp-accent:#0EA5E9; --lp-accent-ink:#0369A1;
    --lp-badge-b:#E0F2FE; --lp-btn:#0369A1; --lp-btn-h:#075985;
    --lp-btn-ink:#fff; --lp-link-h:#075985;
    --lp-scrim-a:rgba(241,245,249,.96);
    --lp-scrim-b:rgba(241,245,249,.42);
    --lp-scrim-c:rgba(241,245,249,.10);
  }
  body.lp.lp-pf .pr-tag,body.lp.lp-pf .st-n,
  body.lp.lp-pf .lp-btn-main,body.lp.lp-pf a.lp-btn-main,
  body.lp.lp-pf .lp-btn-main:hover,body.lp.lp-pf a.lp-btn-main:hover,
  body.lp.lp-pf .cta-slot a,body.lp.lp-pf .cta-slot a:hover,
  body.lp.lp-pf .dx-cta-slot a,body.lp.lp-pf .dx-cta-slot a:hover,
  body.lp.lp-pf .dx-go,body.lp.lp-pf button.dx-go,
  body.lp.lp-pf .stickybar .lp-btn-main,
  body.lp.lp-pf .ctaband .cb-slot a,body.lp.lp-pf .ctaband .cb-slot a:hover{color:#fff}
  body.lp.lp-pf .ctaband .cb-main a,
  body.lp.lp-pf .ctaband .cb-main a:hover,
  body.lp.lp-pf .ctaband .cb-main a:visited{color:#fff!important}
  body.lp.lp-pf .pr-bar .pr-note{color:var(--lp-main-ink)}
  body.lp.lp-pf .pcards .pc-tag{color:var(--lp-main-ink)}
  body.lp.lp-pf .lp-cta,body.lp.lp-pf .ctaband{border:0}
  body.lp.lp-pf .pr-note,body.lp.lp-pf .cb-pr{color:var(--lp-muted)}
  body.lp.lp-pf .lp-cta .pr-note,body.lp.lp-pf .lp-cta .cb-pr,
  body.lp.lp-pf .lp-cta-note,body.lp.lp-pf .cta-micro{color:#B7CEDF}
}

/* ヒーローのチップ（ポートフォリオの pill と同じ作り：淡い面・丸・小さめ）。
   初回表示の字数をポートフォリオ並みに落とすため、対象読者の説明文を3語に置き換えた */
body.lp.lp-pf .hero-chips{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0;
}
body.lp.lp-pf .hero-chips li{
  font-size:12px;font-weight:500;line-height:1;letter-spacing:.02em;
  background:var(--lp-soft);color:var(--lp-main-ink);
  border-radius:999px;padding:8px 14px;
}

/* ヒーローは画面の高さいっぱいにして、内容を中央に置く（ポートフォリオと同じ作り）。
   初回表示に本文が入り込まないようにするため。100svh はモバイルのアドレスバー分を含まない。 */
body.lp.lp-pf .lp-hero{
  min-height:100svh;display:flex;align-items:center;
  padding-top:78px;padding-bottom:40px;
}
body.lp.lp-pf .lp-hero>.container{width:100%}
@media (max-width:374px){ body.lp.lp-pf .lp-hero{min-height:auto} }
/* STICKYBAR-COMPACT-WIN */
/* 追従バーは375pxで162pxまで伸びていた（説明2行＋ボタン73pxが縦積み）。
   画面の2割を占めるので文言を1行に詰め、ボタンの最小高さも本文用より下げる。
   広告表記はバー内に必ず残す（押す直前に見える位置であることが要件） */
body.lp.lp-pf .stickybar-t{font-size:12.5px;line-height:1.62}
body.lp.lp-pf .stickybar .lp-btn-main{min-height:48px;padding:12px 18px;font-size:15px;flex:none}
@media (max-width:420px){
  body.lp.lp-pf .stickybar-in{gap:8px}
  body.lp.lp-pf .stickybar{padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
}
/* LP-FIGURE-WIN */
/* 記事内の図版。ポートフォリオのカードと同じ作り（白面・1px罫・角丸16px・影なし）。
   ヒーロー内のものは 100svh を破らないよう高さで止める。
   ※ 図版は運営者が作ったイラストで、広告主の素材は使っていない（A8ガイドライン）。 */
body.lp.lp-pf .lp-figure{
  margin:18px 0 0;background:var(--lp-surface);
  border:1px solid var(--lp-line);border-radius:16px;overflow:hidden;
}
body.lp.lp-pf .lp-figure img{display:block;width:100%;height:auto}
body.lp.lp-pf .lp-figure figcaption{
  font-size:13px;line-height:1.6;color:var(--lp-muted);
  padding:10px 14px 12px;border-top:1px solid var(--lp-line);
}
/* HERO-PHOTO-WIN */
/* ヒーローの写真を vocal と同じ「背景＋スクリム」方式にする。
   ・961px以上：右52%に写真、左に文字（.lp-hero-in が幅を持つ）
   ・760px以下：上帯96px。文字が写真に乗らないよう .lp-hero の padding-top と必ず一致させる
   写真は1枚だけなので、vocal のスライド切替スクリプトは使わない（.is-on を最初から付ける）。 */
body.lp.lp-pf .hero-slide{opacity:1}
@media (max-width:760px){
  /* 1577行で写真帯を全ページ display:none にしている（第44回にファーストビュー上端の
     195pxを詰めたとき、vocal・joho では写真より文字を優先した）。
     この記事は写真を見せたいので lp-win だけ戻す。
     帯96px を足しても CTA下端は652px で、LINE内ブラウザの実効700pxに収まることを実測済み。 */
  body.lp.lp-pf .hero-slides,body.lp.lp-pf .hero-scrim{display:block}
  /* 帯のすぐ下から文字が始まるように上寄せ（中央寄せだと帯と見出しの間が114px空く）。
     余りは下側に集まり、次のセクションが初回表示に入らない */
  body.lp.lp-pf .lp-hero{padding-top:96px;padding-bottom:36px;align-items:flex-start}
}
/* .container.narrow の max-width が効くと、961px以上で写真の上に文字が寄ってしまう */
@media (min-width:961px){
  body.lp.lp-pf .lp-hero-in{max-width:min(560px,52%);margin-left:0;margin-right:auto}
}
@media (max-width:960px) and (min-width:761px){
  body.lp.lp-pf .lp-hero-in{max-width:none;padding-right:46%}
}
/* 画像の開示注記。地の上に置くので muted のまま13px（床に合わせる） */
body.lp.lp-pf .lp-hero-note{margin:14px 0 0}
body.lp.lp-pf .lp-hero-imgnote{color:var(--lp-muted)}
/* PF-COMPONENT-COLORS */
/* lp-pf を joho にも当てたところ、コントラスト不足が23件出た。
   win には専用規則（body.lp.lp-win a{...} など）があって拾えていたが、
   joho には無く、base の body.lp a{color:var(--lp-main)} が残るため。
   sky #0EA5E9 は白地で2.77:1しか出ないので、文字と面は濃い側（--lp-btn/--lp-main-ink）に寄せる。 */
body.lp.lp-pf a{color:var(--lp-main-ink)}
body.lp.lp-pf a:hover{color:var(--lp-link-h)}
body.lp.lp-pf strong{color:var(--lp-ink)}
body.lp.lp-pf .lp-btn-main,body.lp.lp-pf a.lp-btn-main,
body.lp.lp-pf .cb-main a,body.lp.lp-pf .cta-slot a,
body.lp.lp-pf .dx-cta-slot a,
body.lp.lp-pf .stickybar .lp-btn-main{background:var(--lp-btn);color:#fff}
body.lp.lp-pf .lp-btn-main:hover,body.lp.lp-pf a.lp-btn-main:hover,
body.lp.lp-pf .cb-main a:hover,body.lp.lp-pf .cta-slot a:hover{background:var(--lp-btn-h);color:#fff}
body.lp.lp-pf .pr-tag{background:var(--lp-btn);color:#fff}
body.lp.lp-pf .skip,body.lp.lp-pf a.skip{background:var(--lp-btn);color:#fff}
body.lp.lp-pf .lp-kicker,body.lp.lp-pf .lp-eyebrow{color:var(--lp-main-ink)}
body.lp.lp-pf .lp-cta .lp-kicker.on-dark{color:#9FD0EE}
body.lp.lp-pf .op-tag{color:var(--lp-muted)}
/* 濃い地（--lp-dark）の上に載る要素 */
body.lp.lp-pf .verdict{color:#EAF2F8}
body.lp.lp-pf .lp-cta .verdict-sub,body.lp.lp-pf .lp-cta .under-btn{color:#C6D7E4}
body.lp.lp-pf .lp-cta-note,body.lp.lp-pf .lp-cta .pr-note,
body.lp.lp-pf .lp-cta .cb-pr{color:#B7CEDF}
body.lp.lp-pf .lp-cta .op-tag,body.lp.lp-pf .ctaband .op-tag{color:#AFC6D8}
body.lp.lp-pf .cta-card p,body.lp.lp-pf .cta-micro{color:#C6D7E4}
body.lp.lp-pf .stickybar-t{color:#C6D7E4}
body.lp.lp-pf .stickybar-t small{color:#AFC6D8}
/* PF-COMPONENT-COLORS-2 */
/* 残り6件。lp-joho 側が .ctaband / .lp-cta を挟んだ深いセレクタで色を持っているので、
   同じ深さで指定し直す。濃い地（--lp-dark #0F172A）の上では ink（同色）になってしまう
   strong と、リンク色も明色へ。 */
body.lp.lp-pf .ctaband .cb-main a,
body.lp.lp-pf .ctaband .cb-slot a,
body.lp.lp-pf .lp-cta .cta-slot a,
body.lp.lp-pf .stickybar .lp-btn-main,
body.lp.lp-pf .lp-hero-cta .lp-btn-main{background:var(--lp-btn);color:#fff}
body.lp.lp-pf .ctaband .cb-main a:hover,
body.lp.lp-pf .lp-cta .cta-slot a:hover,
body.lp.lp-pf .stickybar .lp-btn-main:hover{background:var(--lp-btn-h);color:#fff}
/* 濃い地の上の強調とリンク */
body.lp.lp-pf .lp-cta strong,body.lp.lp-pf .ctaband strong{color:#EAF2F8}
body.lp.lp-pf .lp-cta a:not(.lp-btn):not(.cta-slot a),
body.lp.lp-pf .verdict-sub a{color:#9FD0EE}
body.lp.lp-pf .lp-cta a:not(.lp-btn):hover,
body.lp.lp-pf .verdict-sub a:hover{color:#C4DFF2}
/* PF-COMPONENT-COLORS-3 */
/* 残り3件は、既存の body.lp:not(.lp-win) … {color:…!important} が勝っていた。
   lp-pf は win 以外にも当てるスキンなので、同じ強さで白に戻す。
   （!important を足すのは本意ではないが、相手が !important なので同格にするしかない） */
body.lp.lp-pf .ctaband .cb-main a,
body.lp.lp-pf .ctaband .cb-main a:hover,
body.lp.lp-pf .ctaband .cb-main a:visited,
body.lp.lp-pf .ctaband .cb-slot a,
body.lp.lp-pf .lp-cta .cta-slot a,
body.lp.lp-pf .lp-cta .cta-slot a:hover,
body.lp.lp-pf .lp-cta .cta-slot a:visited,
body.lp.lp-pf .stickybar .lp-btn-main,
body.lp.lp-pf .stickybar .lp-btn-main:hover{color:#fff!important}
/* PF-CTABAND-ONDARK */
/* .ctaband は両モードとも濃い地（--lp-dark）。その中の打消し・広告表記に
   --lp-muted（#5A6879）が当たると 3.14:1 まで落ちるので、明色に固定する。 */
body.lp.lp-pf .ctaband .cb-pr,
body.lp.lp-pf .ctaband .cb-note,
body.lp.lp-pf .ctaband p{color:#B7CEDF}
body.lp.lp-pf .ctaband b,body.lp.lp-pf .ctaband strong{color:#EAF2F8}

/* CHECKLIST-JUMPLINK-TAP-2026-09-15
   ①-2 のチェックリストから費用表の行へ飛ぶリンク。
   実測で 32×21px しかなく WCAG 2.5.8（24×24）も 2.5.5（44×44）も満たしていなかった。
   li が list-item なので a を inline-block にして高さを確保する。
   行間を崩さないよう margin で相殺する（li の line-height は変えない）。 */
body.lp #ask .checklist a[href^="#"]{
  display:inline-block;
  min-height:44px;
  line-height:44px;
  padding-inline:10px;
  margin-block:-12px;
  margin-inline-start:6px;
  white-space:nowrap;
  vertical-align:middle;
}
@media (max-width:520px){
  body.lp #ask .checklist a[href^="#"]{margin-inline-start:0;display:block;width:fit-content}
}

/* QUIT-SECTION-2026-09-15
   「やめるときの連絡期限」は callout warn を使うが、
   中に table を入れるため見出し直後の余白だけ詰める。 */
body.lp #quit .callout-label{margin-block-end:.4em}
body.lp #quit .tscroll{margin-block:14px}

/* HOWTO-2026-09-15
   CTA帯（暗色）の中に置く手順ブロック。既定の callout は明色前提なので、
   on-dark 側のトークンで塗り直す。コントラストは #EAF2F8 / #143046 = 12.6:1。 */
body.lp .lp-cta #howto{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);
  border-radius:16px;
  padding:18px 18px 6px;
  margin-block:18px;
  text-align:left;
}
body.lp .lp-cta #howto .callout-label{color:#EAF2F8;margin-block-start:0}
body.lp .lp-cta #howto li,body.lp .lp-cta #howto p{color:#D8E6F1}
body.lp .lp-cta #howto b{color:#FFFFFF}

/* STEPS-2026-09-15
   #howto は「順番にやること」なので、チェックボックスではなく番号を出す。
   .checklist は content:"" の空ボックスで、順序を示せない。 */
body.lp .howto-steps{list-style:none;padding:0;margin:16px 0;counter-reset:step}
body.lp .howto-steps li{position:relative;padding-left:38px;margin-bottom:14px;line-height:1.85;counter-increment:step}
body.lp .howto-steps li::before{
  content:counter(step);
  position:absolute;left:0;top:.28em;
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  color:#0B2942;background:#8FD0F2;
}

/* ASK-GROUP-2026-09-15
   ①〜⑦の番号参照をやめ、2つの小見出しで分ける。
   .checklist li::before は空チェックボックスで番号が出ないため、
   本文から番号で参照すると読者が照合できなかった。 */
body.lp .ask-group{
  font-size:.95rem;font-weight:700;color:var(--lp-ink);
  margin:18px 0 2px;padding-block-start:2px;
}
body.lp .ask-group:first-of-type{margin-block-start:10px}
body.lp #ask .checklist{margin-block:10px 4px}
body.lp .lp-cta #howto .op-tag{color:#B7CEDF}

/* CALCBOX-2026-09-15
   17か月の試算が 13px の <small> 段落に埋もれ、太字になっていたのが
   「運営者の試算です」という打消しのほうだけだった（金額は非太字）。
   計算を3行に分けて本文サイズで出す。 */
body.lp .calcbox{
  background:var(--lp-soft);
  border:1px solid var(--lp-line);
  border-radius:16px;
  padding:16px 16px 4px;
  margin-block:18px;
}
body.lp .calcbox .callout-label{margin:0 0 10px;font-size:1rem}
body.lp .calclist{list-style:none;padding:0;margin:0 0 10px}
body.lp .calclist li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-block-end:1px solid var(--lp-line);
}
body.lp .calclist li:last-child{border-block-end:0}
body.lp .calclist span{font-size:.94rem;color:var(--lp-text)}
body.lp .calclist b{font-size:1.06rem;color:var(--lp-ink);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ONELINE-STACK-2026-09-15
   .oneline の margin が上下とも0で、連続すると13pxの灰色が隙間なくつながる。
   #cost / #quit / #free の3か所で起きていた。 */
body.lp .oneline + .oneline{margin-block-start:12px}
body.lp .calcbox .oneline + .oneline{margin-block-start:8px}

/* UPDATED-NOT-MONO-2026-09-15
   .updated は style.css で var(--mono)。判断に直結する但し書き
   （週3回の食い違い・入塾金の2説・体験の長さ不明・振替の期限）が
   全部これなので、和文本文と同じ書体に戻す。区別は色と字送りで付ける。 */
body.lp .updated{font-family:inherit;letter-spacing:.01em}
body.lp table .updated{font-variant-numeric:tabular-nums}

/* STICKY-DISCLOSURE-13PX-2026-09-15
   追従バーの打消し（「体験は3,000円。」）が12.5pxで、
   このサイトが自分で定めた開示13pxの床を下回る唯一の箇所だった。 */
body.lp.lp-pf .stickybar-t{font-size:13px;line-height:1.45}
body.lp .stickybar-t{font-size:13px;line-height:1.45}
body.lp .stickybar-t small{font-size:11.5px}

/* NOWRAP-HEADINGS-2026-09-15
   text-wrap:balance のせいで見出しが語の途中で折れていた（375px実測）。
   「情報Ⅰ」「77,000円の一括」「料金を払わずに」「ただし」「食い違って」が分断。 */
body.lp .nb{white-space:nowrap}

/* BACKLINK-2026-09-15
   ①-2 のリストから費用表・やめ方へ飛んだあと、戻る手段が手動スクロールしかなかった
   （a[href="#ask"] はページ全体で最終CTAの1本だけだった）。 */
body.lp .backlink{margin:14px 0 0;font-size:14px}
body.lp .backlink a{
  display:inline-block;min-height:44px;line-height:44px;
  padding-inline:2px;color:#0369A1;
}

/* CALCLIST-ALT-2026-09-15
   4行目は3行目の合計の続きではなく「入塾金がなかった場合」の分岐。
   右端の数字だけ追うと 514,250→530,750→607,750→591,250 と最後だけ下がって見えるので、
   行を離して破線で区切る。 */
body.lp .calclist li.alt{
  border-block-start:1px dashed var(--lp-line);
  margin-block-start:8px;padding-block-start:14px;
}

/* BACKLINK-ONDARK-2026-09-15
   #apply（暗色帯）の中に置く「← 決めておく7つに戻る」。
   ヒーロー／band1 の打消しから #howto へ飛んだ読者が、
   飛ばした13画面へ戻れるようにするための導線。 */
body.lp .backlink.on-dark{text-align:left;margin-block:4px 10px}
body.lp .backlink.on-dark a{color:#8FD0F2}

/* CODECHIP-2026-09-16
   キャンペーンコード sukyo を、CTAボタンの直下に出す。
   以前はコード本体が #howto の13pxの注記1行にしかなく、
   ヒーロー（y≈567）や中段（y≈4,131）で押した読者は、
   15,000px下の注記を見ないまま公式サイトへ行っていた＝3,000円の値引きを取り逃がす。
   3つのCTAはいずれも暗色地（hero のスクリム／.ctaband／.lp-cta）なので on-dark で組む。
   コードは反転チップにして、周囲の文字より先に目に入るようにする。 */
body.lp .codechip{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  max-width:420px;margin:14px auto 0;padding:14px 16px;
  /* 半透明にするとヒーロー（写真＋スクリム）の上で地が確定せず、
     写真次第で読めなくなる。コードは読ませる要素なので不透明で置く。 */
  background:#14293D;
  border:1px solid rgba(143,208,242,.45);
  border-radius:14px;text-align:center;
}
body.lp .codechip-label{font-size:13px;line-height:1.5;color:#C3D7E6}
body.lp .codechip-code{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:26px;font-weight:700;letter-spacing:.14em;
  color:#0B2942;background:#8FD0F2;
  padding:6px 18px;border-radius:10px;
  user-select:all;-webkit-user-select:all;
}
body.lp .codechip-note{font-size:13px;line-height:1.75;color:#D8E6F1}
body.lp .codechip-note b{color:#FFFFFF}
body.lp .codechip-note a{color:#8FD0F2;display:inline-block;min-height:32px;line-height:32px}
@media (max-width:420px){
  body.lp .codechip{padding:12px 12px}
  body.lp .codechip-code{font-size:23px;letter-spacing:.1em}
}

/* FV-ANSWER / ASKTPL — 2026-09-17
   広告（「平均点が12.67点下がりました」）で来た保護者に、申込ボタンより先に答えを出す。
   9/15〜16 の有料124クリックで A8 クリック0件。最初の画面が「体験3,000円」の申込から始まっていた。
   ・.fv-answer：見出し直後の3行（何が起きたか／関係するか／外の指導を考えるなら）
   ・.asktpl：7つの確認事項を、情報ラボのフォームに貼れる質問文にした（sukyo を冒頭に含む）
   ヒーローはライト専用（lp-pf）なので、色はトークンだけで組む。 */
body.lp.lp-joho .fv-answer{
  list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;
  counter-reset:fva;max-width:60ch;
}
body.lp.lp-joho .fv-answer li{
  counter-increment:fva;position:relative;
  padding:10px 12px 10px 40px;
  background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:12px;
  font-size:15px;line-height:1.7;color:var(--lp-text);
}
body.lp.lp-joho .fv-answer li::before{
  content:counter(fva);position:absolute;left:12px;top:11px;
  width:20px;height:20px;border-radius:999px;
  background:var(--lp-main-ink);color:#fff;
  font-size:12px;font-weight:700;line-height:20px;text-align:center;
}
body.lp.lp-joho .fv-answer li > b:first-child{display:block;color:var(--lp-ink);font-size:14px;line-height:1.5}
body.lp.lp-joho .fv-answer a{color:var(--lp-main-ink);white-space:nowrap}
@media (max-width:420px){
  /* 375×812 で3枚＋チップだとボタンの上端が y=886 まで落ちた。
     チップ「体験は3,000円」はボタン文言と直下の注意書きに同じ内容があるので、狭い画面では出さない。 */
  body.lp.lp-joho .hero-chips{display:none}
  body.lp.lp-joho .fv-answer{gap:6px;margin-bottom:14px}
  body.lp.lp-joho .fv-answer li{font-size:14px;line-height:1.65;padding:7px 10px 7px 34px}
  body.lp.lp-joho .fv-answer li::before{left:9px;top:9px}
  body.lp.lp-joho .fv-answer li > b:first-child{font-size:13.5px}
}

body.lp.lp-joho .asktpl-lede{margin:0 0 10px;font-size:15px;line-height:1.8;color:var(--lp-text)}
body.lp.lp-joho .asktpl{
  display:block;width:100%;box-sizing:border-box;resize:vertical;
  margin:0;padding:12px 14px;
  font:inherit;font-size:14.5px;line-height:1.75;color:var(--lp-ink);
  background:var(--lp-surface);border:1px solid color-mix(in srgb,var(--lp-main) 45%,var(--lp-line));
  border-radius:12px;white-space:pre-wrap;
}
body.lp.lp-joho .asktpl:focus-visible{outline:2px solid var(--lp-main-ink);outline-offset:2px}
body.lp.lp-joho .asktpl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 0}
body.lp.lp-joho .asktpl-copy{
  min-height:44px;padding:0 18px;border-radius:12px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:700;
  color:var(--lp-main-ink);background:var(--lp-surface);
  border:2px solid var(--lp-main-ink);
}
body.lp.lp-joho .asktpl-copy:hover{background:var(--lp-soft)}
body.lp.lp-joho .asktpl-copy:focus-visible{outline:2px solid var(--lp-main-ink);outline-offset:3px}
body.lp.lp-joho .asktpl-done{font-size:14px;color:var(--lp-ink);font-weight:700}
body.lp.lp-joho .asktpl-form{margin:12px 0 0;font-size:14px;line-height:1.8;color:var(--lp-text)}
body.lp.lp-joho .asktpl-form a{display:inline-block;min-height:32px;line-height:32px;color:var(--lp-main-ink)}
body.lp.lp-joho .asktpl-why{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--lp-line);
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--lp-muted);
}

/* ASK-MORE — 2026-09-18
   Python：「無料相談で確認したい3つ」の直後に8項目がそのまま並び、読む量が多かった（再評価の指摘）。
   8項目は折りたたみにして、必要な人だけ開く。 */
body.lp .ask-more{margin:14px 0 0;border-top:1px solid var(--lp-line);padding-top:10px}
body.lp .ask-more>summary{
  cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;color:var(--lp-main-ink);list-style:none;
}
body.lp .ask-more>summary::-webkit-details-marker{display:none}
body.lp .ask-more>summary::before{content:"＋";display:inline-block;width:1.2em;text-align:center}
body.lp .ask-more[open]>summary::before{content:"－"}
body.lp .ask-more>summary:focus-visible{outline:2px solid var(--lp-main-ink);outline-offset:3px;border-radius:6px}

/* ---------- 3スクール横並びの表（vocal-tokyo-area.html・2026-09-18） ----------
   既定の4列指定（22/29/29/20）は「2社＋補足列」向けで、3社目が20%に潰れる。
   3社を対等に並べる表だけ .t3 を付け、項目列22%・各社26%にする。 */
body.lp .tscroll table.t3:has(thead th:nth-child(4)) thead th:first-child{width:22%}
body.lp .tscroll table.t3:has(thead th:nth-child(4)) thead th:nth-child(n+2){width:26%}

/* GRADE-GUIDE — 2026-09-20 情報Ⅰ：学年別の目安（競合が「いつから」を軸にしていた）。
   表だとスマホで969pxに伸びたので、学年を先頭に置いたリストにした。 */
body.lp .grade-guide{margin-top:16px}
body.lp .grade-guide .checklist li>b:first-child{display:block;color:var(--lp-ink)}

/* RELATED — 2026-09-26 LP末尾の関連記事。検索エンジンが一般記事へたどれるように置く。
   タップしやすい高さを確保し、広告ボタンとは見た目を分ける（下線付きの通常リンク）。 */
body.lp .related-links li a{display:inline-block;min-height:44px;line-height:1.6;padding:10px 0;color:var(--lp-main-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- 写真を使うLP（body.lp.lp-photo）・2026-09-30 ----------
   lp-pf はポートフォリオ準拠の配色（sky系）まで変えてしまうので、
   写真の置き方だけを取り出した。塾LP2本（juku-chugaku / juku-koukou）が使う。
   ・記事内の図版 .lp-figure（白面・1px罫・角丸16px）
   ・ヒーローの写真：961px以上は右52%、760px以下は上帯96px
     （1577行で .hero-slides を全ページ display:none にしているため、ここで戻す） */
body.lp.lp-photo .lp-figure{
  margin:18px 0 0;background:var(--lp-surface);
  border:1px solid var(--lp-line);border-radius:16px;overflow:hidden;
}
body.lp.lp-photo .lp-figure img{display:block;width:100%;height:auto}
body.lp.lp-photo .lp-figure figcaption{
  font-size:13px;line-height:1.6;color:var(--lp-muted);
  padding:10px 14px 12px;border-top:1px solid var(--lp-line);
}
body.lp.lp-photo .hero-slide{opacity:1}
@media (max-width:760px){
  body.lp.lp-photo .hero-slides,body.lp.lp-photo .hero-scrim{display:block}
  body.lp.lp-photo .lp-hero{padding-top:96px;padding-bottom:36px;align-items:flex-start}
}
@media (min-width:961px){
  /* 写真は右52%（基底の .hero-slides）。文字を52%にすると右端が写真に41px重なるので46%で止める */
  body.lp.lp-photo .lp-hero-in{max-width:min(560px,46%);margin-left:0;margin-right:auto}
}
@media (max-width:960px) and (min-width:761px){
  body.lp.lp-photo .lp-hero-in{max-width:none;padding-right:46%}
}

/* ---------- lp-photo の配色固定（2026-09-30） ----------
   端末のOSが暗い配色でも、このページだけは明るい地のまま出す。
   理由：ヒーローに写真を敷いたので、地が暗いと「写真＋濃い地」で全体が沈む。
   やり方：33行の dark ブロックで body.lp に入る値を、明るい既定値で上書きし直す。
   （dark ブロック内で body.lp に当たる個別指定も、ここで戻す） */
body.lp.lp-photo{color-scheme:light}
@media (prefers-color-scheme:dark){
  body.lp.lp-photo{
    --lp-ground:#FBF7F2;
    --lp-surface:#FFFFFF;
    --lp-tint:#F5EDE4;
    --lp-ink:#2A1C14;
    --lp-text:#4A3A30;
    --lp-muted:#71604F;
    --lp-line:#E3D5C6;
    --lp-main:#A94A1B;
    --lp-main-ink:#8E3D14;
    --lp-soft:#F6E3D4;
    --lp-dark:#2E1D14;
    --lp-accent:#D9A34A;
    --lp-accent-ink:#9C6E1C;
    --lp-badge-b:#F7E9D2;
    --lp-scrim-a:rgba(245,237,228,.96);
    --lp-scrim-b:rgba(245,237,228,.42);
    --lp-scrim-c:rgba(245,237,228,.10);
    --lp-btn-ink:#fff;
    background:var(--lp-ground);
    color:var(--lp-text);
  }
  body.lp.lp-photo .pr-bar .pr-note{color:var(--lp-main-ink)}
  body.lp.lp-photo .skip,body.lp.lp-photo a.skip{color:#fff}
  body.lp.lp-photo .st-n,body.lp.lp-photo .fit-n{color:#fff}
  /* 402行の dark ブロックが .lp-btn-main / .pr-tag の文字を #17110D に直接指定している。
     地を明るいままにすると、テラコッタ地に濃茶で 3.28:1 しか出ないので白に戻す（実測） */
  body.lp.lp-photo .pr-tag,
  body.lp.lp-photo .lp-btn-main,body.lp.lp-photo a.lp-btn-main,body.lp.lp-photo button.lp-btn-main,
  body.lp.lp-photo .lp-btn-main:hover,body.lp.lp-photo a.lp-btn-main:hover,
  body.lp.lp-photo .lp-btn-ghost:hover,body.lp.lp-photo a.lp-btn-ghost:hover{color:#fff}
  body.lp.lp-photo .lp-hero .hero-microtrust{color:var(--lp-muted)}
}