@charset "utf-8";
/* lp.css : LP専用。style.css を読み込んだ後に読む（変数と基本要素は style.css 側） */

.lp-fv{
  background:
    radial-gradient(120% 90% at 80% 0%, #ffe9d5 0%, rgba(255,233,213,0) 60%),
    linear-gradient(180deg,#f7efe3 0%, var(--bg) 100%);
  padding:2.4rem 0 2rem;
  border-bottom:1px solid var(--line);
}
.lp-fv .badge{
  display:inline-block;font-size:.74rem;letter-spacing:.1em;
  background:var(--leaf);color:#fff;border-radius:999px;padding:4px 13px;margin-bottom:1rem;
}
.lp-fv h1{font-size:clamp(1.55rem,6vw,2.3rem);line-height:1.38;margin-bottom:.5em}
.lp-fv h1 em{font-style:normal;color:var(--accent-dark);border-bottom:6px solid #f3cdb6;padding-bottom:.05em}
.lp-fv .sub{font-size:1rem;color:var(--ink-soft);margin-bottom:1.6em;line-height:1.85}
.lp-fv .asof{font-size:.76rem;color:var(--ink-soft);margin:1rem 0 0}

/* 番号つきの手順 */
.steps{counter-reset:st;list-style:none;padding:0;margin:1.6rem 0}
.steps li{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 16px 18px;margin-bottom:12px;
}
.steps li::before{
  counter-increment:st;content:"STEP " counter(st);
  display:inline-block;font-size:.68rem;letter-spacing:.12em;color:var(--accent);
  border:1px solid #edc7b3;border-radius:999px;padding:2px 10px;margin-bottom:.6rem;
}
.steps h3{margin:0 0 .4rem;font-size:1.02rem}
.steps p{margin:0;font-size:.92rem;color:var(--ink-soft)}

/* 確認ポイント（大きめのカード） */
.points{list-style:none;padding:0;margin:1.6rem 0;counter-reset:pt}
.points li{
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:18px 20px;margin-bottom:14px;
}
.points h3{margin:0 0 .5rem;font-size:1.05rem;display:flex;align-items:baseline;gap:.5em}
.points h3::before{
  counter-increment:pt;content:counter(pt,decimal-leading-zero);
  font-size:.9rem;color:var(--accent);font-variant-numeric:tabular-nums;
}
.points p{margin:0 0 .6em;font-size:.93rem}
.points p:last-child{margin-bottom:0}
.points .quote{
  font-size:.86rem;color:var(--ink-soft);background:#f6f2ec;border-radius:8px;padding:10px 12px;margin-top:.6em;
}
.points .quote span{display:block;font-size:.74rem;margin-top:.4em;opacity:.85}

/* 価格ブロック */
.pricebox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:1.6rem 0}
.pricebox .big{font-size:1.9rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-dark);line-height:1.3}
.pricebox .cap{font-size:.8rem;color:var(--ink-soft);margin-top:.4em}

/* CTA まわり */
.cta-slot{margin:2rem 0}
.cta-slot .cta{font-size:1.02rem}
.cta-note{font-size:.76rem;color:var(--ink-soft);text-align:center;margin:.7rem 0 0;line-height:1.7}

/* スマホの追従CTA */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(251,249,246,.96);border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 16px rgba(31,35,32,.08);
}
.sticky-cta .cta{padding:13px 16px;font-size:.95rem;box-shadow:none}
@media (min-width:721px){ .sticky-cta{display:none} }

/* まとめ */
.summary{background:#f2f8f4;border:1px solid #cfe2d6;border-radius:var(--radius);padding:20px}
.summary h2{border-left-color:var(--leaf);margin-top:0}
.summary ul{padding-left:1.2em;margin:0}
.summary li{margin-bottom:.5em;font-size:.94rem}

/* LP専用ヘッダ。記事へのグローバルナビを出さない（確認の途中で離脱させないため）。
   ロゴと広告表記だけ残す。フッタも法的に必要なリンク3本に絞ってある。 */
.lp-header .hdr-note{
  font-size:.72rem;color:var(--ink-soft);letter-spacing:.04em;white-space:nowrap;
}
@media (max-width:420px){ .lp-header .hdr-note{display:none} }

/* FV直下のスペック行：3秒で「何が届くか」を示す */
.specs{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:8px}
.specs li{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:.82rem;color:var(--ink-soft);
}
.specs b{color:var(--ink)}

/* ビフォー／アフター */
.ba{display:flex;align-items:stretch;gap:12px;margin:1.6rem 0;flex-wrap:wrap}
.ba-col{flex:1 1 13rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.ba-col h3{margin:0 0 .5rem;font-size:.9rem;color:var(--ink-soft)}
.ba-col ol{margin:0;padding-left:1.2em;font-size:.92rem}
.ba-col li{margin-bottom:.35em}
.ba-col.after{border-color:var(--leaf);background:#f2f8f4}
.ba-col.after h3{color:var(--leaf)}
.ba-arrow{align-self:center;font-size:1.5rem;color:var(--accent)}
@media (max-width:560px){ .ba-arrow{transform:rotate(90deg);align-self:center} }

/* 料金ブロックの補強 */
.pricebox .ptitle{margin:0 0 .3em;font-size:.85rem;color:var(--ink-soft)}
.pricebox .punit{margin:.2em 0 .6em;font-size:.95rem;line-height:1.8}
.pricebox .punit b{color:var(--accent-dark)}

/* 5項目の「いいところ」 */
.points .good{
  font-size:.92rem;color:var(--leaf);background:#f2f8f4;border-radius:8px;
  padding:8px 12px;margin:0 0 .7em;
}
.points .good::before{content:"◯ ";font-weight:700}

/* 向く／向かない */
.split{display:flex;gap:14px;flex-wrap:wrap;margin:1.4rem 0}
.split-col{flex:1 1 15rem;border-radius:var(--radius);padding:16px 18px;border:1px solid var(--line);background:var(--surface)}
.split-col h3{margin:0 0 .6rem;font-size:1rem}
.split-col ul{margin:0;padding-left:1.2em;font-size:.92rem}
.split-col li{margin-bottom:.4em}
.split-col.yes{border-color:#cfe2d6;background:#f2f8f4}
.split-col.yes h3{color:var(--leaf)}
.split-col.no{border-color:var(--warn-line);background:var(--warn-bg)}
.split-col.no h3{color:#8a6417}

/* ===== Beaker Studio の LP と同じ構成に合わせる =====
   - サイトヘッダ（ロゴ＋ナビ）は置かない。上部は PRバー1本だけ
   - ヒーローは写真の上に見出しを重ねる
   - 下部の固定CTAバーは常時表示（幅を問わず、いつでも押せる） */

.pr-bar{background:#f1ede6;border-bottom:1px solid var(--line)}
.pr-bar-in{
  max-width:64rem;margin:0 auto;padding:8px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.pr-brand{font-weight:700;font-size:.92rem;color:var(--ink);text-decoration:none}
.pr-note{font-size:.76rem;color:var(--ink-soft);line-height:1.6}
.pr-tag{
  display:inline-block;background:var(--ink-soft);color:#fff;border-radius:3px;
  font-size:.66rem;letter-spacing:.08em;padding:1px 6px;margin-right:.5em;vertical-align:.08em;
}

/* ---- ヒーロー（写真の上に重ねる） ---- */
.lp-hero{position:relative;isolation:isolate;color:#fff;overflow:hidden}
.lp-hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.lp-hero .hero-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(28,31,29,.70) 0%,rgba(28,31,29,.88) 100%)}
.lp-hero-in{max-width:42rem;margin:0 auto;padding:2.6rem 20px 2.4rem}
.lp-eyebrow{font-size:.78rem;letter-spacing:.12em;color:#ffe6d6;margin:0 0 .7em}
.lp-hero h1{color:#fff;font-size:clamp(1.55rem,6vw,2.25rem);line-height:1.4;margin-bottom:.5em}
.lp-hero h1 em{font-style:normal;color:#ffd9c0;border-bottom:5px solid rgba(255,217,192,.45);padding-bottom:.04em}
.hero-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 1.1rem}
.hero-chips li{
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:5px 13px;font-size:.8rem;
}
.lp-lede{font-size:1rem;line-height:1.85;color:#efe8e1;margin-bottom:1.2em}
.lp-lede b{color:#fff}
.cb-pr{font-size:.78rem;color:#e3d5c9;margin:0 0 .6em}
.cb-note{font-size:.78rem;color:#d6cbc2;line-height:1.7;margin:.8em 0 0}
.cb-note a{color:#ffd9c0}
.hero-imgnote{display:block;font-size:.72rem;color:#bfb5ac;margin-top:1.2rem}
.lp-hero .cta{box-shadow:0 6px 20px rgba(0,0,0,.28)}

/* ---- 下部固定バー（常時表示） ---- */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#1f2320;border-top:1px solid rgba(243,234,224,.18);
}
.stickybar-in{
  max-width:64rem;margin:0 auto;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.stickybar-t{font-size:.76rem;line-height:1.5;color:#d8c9bb;flex:1}
.stickybar .cta{margin:0;padding:12px 20px;font-size:.92rem;box-shadow:none;white-space:nowrap}
.sb-short{display:none}
@media (max-width:620px){
  /* スマホでは横に並べず、説明文を上・ボタンを下に積む。
     以前は font-size:0 で説明文を畳んでいたが、それでは
     「PRチップ＋ボタン」だけが残り、金額も打消しも見えなかった。
     さらに中の <a href="#apply"> が 0×0px になって押せていなかった（2026-09-16 実測）。
     display:none と実質同じ状態を作っていたことになる
     （景表法のステマ告示・消費者庁Q&A Q13）。短い版に差し替えて必ず出す。 */
  .stickybar-in{flex-direction:column;align-items:stretch;gap:6px;padding-top:8px}
  .stickybar-t{flex:0 0 auto;font-size:.68rem;line-height:1.55}
  .stickybar-t b{display:inline}
  .stickybar-t .pr-tag{font-size:.64rem}
  .sb-long{display:none}
  .sb-short{display:inline}
  .stickybar .cta{flex:0 0 auto;width:100%;padding:11px 16px}
}
body.has-sticky{padding-bottom:84px}

/* 本文中の引用（公式サイトの表記そのまま） */
.wrap > section > .quote, p.quote{
  background:#f6f2ec;border-left:3px solid var(--line);border-radius:0 8px 8px 0;
  padding:12px 14px;font-size:.92rem;line-height:1.85;color:var(--ink);
}
.checked-list{padding-left:1.2em;margin:1rem 0;font-size:.93rem}
.checked-list li{margin-bottom:.5em}
.lp-hero-cta{margin:1.2rem 0 0}

/* ヒーローは全幅の帯なので、共通の section{margin-block:3rem} を打ち消す。
   PRバーとの間に白い帯が出ていた（48px）。ページ側の <style> ではなく、ここで1か所だけ直す。 */
.lp-hero{margin-block:0}
.lp-hero + .wrap > section:first-child{margin-top:2.4rem}

/* 固定バーは暗色地なので、フォーカスリングを明るい色にする（地色との比を上げる） */
.stickybar :focus-visible{outline-color:#ffd9c0}
/* LPには固定ヘッダが無いので、共通の scroll-padding-top（68px）を打ち消す */
html:has(body.lp){scroll-padding-top:12px}

/* 読者が判断を変える前提（月額・該当プラン）を、本文より先に目に入れるための枠。
   引用ではなく当サイトの整理なので、.quote とは別の見た目にする。 */
.callout{
  border:1px solid var(--accent);border-radius:var(--radius);
  background:#fdf7f3;padding:14px 16px;margin:1.2rem 0;
}
.callout p{margin:0 0 .7em;font-size:.94rem;line-height:1.85}
.callout p:last-child{margin-bottom:0}
.callout .cap{font-size:.8rem;color:var(--ink-soft)}

/* 追従バーから、条件の一覧（最終まとめ）へ戻れるようにする。
   バーは画面に固定され続けるので、そこから条件に辿れないと
   「打消しがボタンから遠い」状態になる。スマホでは説明文ごと畳まれる。 */
.stickybar-t a{color:#ffd9c0;text-decoration:underline;white-space:nowrap}

/* スマホの追従バーは2段になるので、本文の下余白を広げる。
   この指定は body.has-sticky{padding-bottom:84px} より後ろに置くこと。
   メディアクエリは詳細度を上げないため、前に書くと上書きされる（2026-09-16 実測）。 */
@media (max-width:620px){ body.has-sticky{padding-bottom:144px} }
/* 説明文と「条件をすべて見る」がくっついて読めなかった */
.stickybar-t a{margin-left:.5em}