/* 配色は棚卸しシート・オプトインLPと同じSage系。同じ企画だと分かる見た目にそろえる
   長文を読ませるページなので、行間と1行の長さを読みやすい側に振る
   375px幅で横スクロールを出さない */
:root{
  --sage:#90A858; --deep:#7C9146; --high:#C4CF94;
  --ink:#4A5238; --gray:#7b8272; --line:#e2e7d5; --bg:#F5F7EE;
  --terracotta:#C96E4A;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
      background:#fff; color:var(--ink); line-height:1.95; -webkit-text-size-adjust:100%;
      overflow-x:hidden; }
.wrap{ max-width:680px; margin:0 auto; padding:0 18px; }
a{ color:var(--deep); }
b{ font-weight:700; color:var(--ink); }

/* ── ファーストビュー ── */
.fv{ background:var(--bg); padding:26px 0 30px; border-bottom:1px solid var(--line); }
.eyebrow{ font-size:12.5px; line-height:1.7; color:var(--gray); margin-bottom:14px; }
h1{ font-size:23px; line-height:1.55; color:var(--deep); font-weight:700; margin-bottom:16px; }
.sub{ font-size:17px; line-height:1.65; font-weight:700; color:var(--ink); margin-bottom:14px; }
.fv .lead{ font-size:14.5px; line-height:1.9; color:var(--ink); }

/* ── 本文 ── */
.block{ padding:32px 18px; }
main p{ font-size:15px; margin-bottom:18px; }
main p:last-child{ margin-bottom:0; }
h2{ font-size:19px; color:var(--deep); margin-bottom:18px;
    padding-bottom:8px; border-bottom:2px solid var(--high); }
.quote{ background:var(--bg); border-left:4px solid var(--sage);
        border-radius:0 10px 10px 0; padding:13px 15px; font-size:14.5px !important; }

.dots{ list-style:none; margin-bottom:18px; }
.dots li{ font-size:15px; padding:0 0 0 20px; margin-bottom:14px; position:relative; }
.dots li::before{ content:"・"; position:absolute; left:0; color:var(--sage); font-weight:700; }
.dots li:last-child{ margin-bottom:0; }

.steps{ list-style:none; counter-reset:step; margin:0 0 18px; }
.steps > li{ counter-increment:step; position:relative;
             padding:0 0 0 38px; margin-bottom:20px; }
.steps > li::before{ content:counter(step); position:absolute; left:0; top:2px;
                     width:26px; height:26px; line-height:26px; text-align:center;
                     background:var(--deep); color:#fff; border-radius:50%;
                     font-size:14px; font-weight:700; }
.steps > li:last-child{ margin-bottom:0; }
.steps p{ margin-bottom:10px; }
.steps p:last-child{ margin-bottom:0; }

/* ── オファー ── */
.offer{ border:2px solid var(--sage); border-radius:14px; padding:20px 18px; margin-bottom:18px; }
.offer-name{ font-size:17px !important; font-weight:700; color:var(--deep);
             text-align:center; margin-bottom:16px !important; }
.price{ font-size:17px !important; font-weight:700; color:var(--ink);
        background:var(--bg); border-radius:10px; padding:14px 16px;
        text-align:center; margin:18px 0 0 !important; }

/* ── ボタン ── */
.cta{ display:block; background:var(--deep); color:#fff; text-decoration:none;
      text-align:center; font-size:16px; font-weight:700; line-height:1.5;
      border-radius:12px; padding:18px 16px; margin-top:24px;
      box-shadow:0 3px 0 rgba(74,82,56,.22); }
.cta:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(74,82,56,.22); }
br.sp{ display:inline; }

.ps{ background:var(--bg); }

/* ── フッター（特商法表示） ── */
footer{ background:#fff; border-top:1px solid var(--line); padding:28px 0 40px; }
footer h3{ font-size:14px; color:var(--deep); margin-bottom:14px; }
.law{ font-size:12.5px; line-height:1.8; color:var(--gray);
      border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.law dt{ font-weight:700; color:var(--ink); margin-top:10px; }
.law dt:first-child{ margin-top:0; }
.law dd{ margin-bottom:2px; }
.pp{ font-size:12.5px; margin-top:16px; text-align:center; }
.pp a{ color:var(--gray); }
.corp{ font-size:12px; color:var(--gray); text-align:center; margin-top:6px; }

/* ── 画面が広いとき ── */
@media (min-width:600px){
  .fv{ padding:40px 0 44px; }
  h1{ font-size:28px; }
  .sub{ font-size:19px; }
  br.sp{ display:none; }
  .block{ padding:40px 18px; }
}