/* ==========================================================================
   集客用LP（テスト版）専用のスタイル（share.lightdoor.jp/lp-test/）

   lp.css（/lp-example/）を土台にして作った別ファイル。
   lp.css は現行版として残すため、こちらだけを直す。逆も同じ。
   **配色は1色も変えていない**（濃紺 #233F89／水色 #52C6FF／淡色 #F0F7F8）。
   足したのは版面と部品だけ。ファイル末尾の「テスト版で足した部品」を参照。
   ========================================================================== */

:root{
  --navy:#233F89; --navy-deep:#16295C; --blue-mid:#3D87C8; --sky:#52C6FF; --sky-pale:#ADE9F1;
  --band:#F0F7F8; --wash:#D4F1F5;
  --ground:#FFFFFF; --surface:#F5FAFC; --surface-2:#E9F4F8;
  --line:#DCE8EF; --line-soft:#EAF2F6;
  --ink:#14203F; --body:#384357; --muted:#6A7789;
  --on-navy:#FFFFFF; --accent-weak:#EAF4FE;
  --grad:linear-gradient(100deg,var(--navy) 0%,var(--blue-mid) 52%,var(--sky) 100%);
  --btn:#233F89; --btn-hover:#1B3068; --btn-ink:#FFFFFF;

  --sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",
         "Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace;

  --t-1:.8rem; --t0:1rem; --t1:1.09rem; --t2:1.32rem; --t3:1.66rem; --t4:2.35rem; --t5:2.9rem;
  --shadow:0 1px 2px rgba(35,63,137,.05), 0 16px 38px -26px rgba(35,63,137,.40);
  --shadow-btn:0 1px 2px rgba(20,32,63,.10), 0 10px 22px -12px rgba(35,63,137,.55);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#7FA6F0; --navy-deep:#0A1124; --blue-mid:#4E90D6; --sky:#52C6FF; --sky-pale:#1D3A56;
    --band:#141D35; --wash:#101B33;
    --ground:#0A1124; --surface:#111A31; --surface-2:#17223D;
    --line:#26324F; --line-soft:#1C263F;
    --ink:#E9EFFB; --body:#BFC9DD; --muted:#8794AC;
    --on-navy:#0A1124; --accent-weak:#14203C;
    --btn:#4E7FE0; --btn-hover:#3D6BC8; --btn-ink:#FFFFFF;
    --shadow:0 1px 2px rgba(0,0,0,.34), 0 16px 38px -26px rgba(0,0,0,.8);
    --shadow-btn:0 1px 2px rgba(0,0,0,.4), 0 10px 22px -12px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --navy:#7FA6F0; --navy-deep:#0A1124; --blue-mid:#4E90D6; --sky:#52C6FF; --sky-pale:#1D3A56;
  --band:#141D35; --wash:#101B33;
  --ground:#0A1124; --surface:#111A31; --surface-2:#17223D;
  --line:#26324F; --line-soft:#1C263F;
  --ink:#E9EFFB; --body:#BFC9DD; --muted:#8794AC;
  --on-navy:#0A1124; --accent-weak:#14203C;
  --btn:#4E7FE0; --btn-hover:#3D6BC8; --btn-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.34), 0 16px 38px -26px rgba(0,0,0,.8);
  --shadow-btn:0 1px 2px rgba(0,0,0,.4), 0 10px 22px -12px rgba(0,0,0,.9);
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--ground);
  color:var(--body);
  font-family:var(--sans);
  font-size:var(--t0);
  line-height:1.9;
  word-break:auto-phrase;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  padding-bottom:5.2rem;               /* スマホの固定ボタン分 */
}
@media (min-width:820px){ body{ padding-bottom:0; } }

.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.6rem);}
.narrow{max-width:52rem;}

h2,h3,h4{color:var(--ink);text-wrap:balance;}
p{margin:0 0 1.05rem;max-width:64ch;}
p:last-child{margin-bottom:0;}
strong{color:var(--ink);font-weight:700;}
a{color:var(--navy);text-underline-offset:.2em;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--sky);outline-offset:2px;border-radius:4px;
}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:1rem;top:1rem;z-index:60;background:var(--ground);color:var(--navy);
  padding:.5rem .9rem;border:1px solid var(--sky);border-radius:6px;}

/* ---------- 上部の帯 ---------- */

.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--ground);
  border-bottom:1px solid var(--line);
}
.topbar .in{
  max-width:1120px;margin:0 auto;padding:.7rem clamp(1.1rem,4vw,2.6rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.logo{display:block;width:10.6rem;height:auto;}
.logo.dk{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo.lt{display:none;}
  :root:not([data-theme="light"]) .logo.dk{display:block;}
}
:root[data-theme="dark"] .logo.lt{display:none;}
:root[data-theme="dark"] .logo.dk{display:block;}
.topbar .tel{display:none;}
@media (min-width:820px){
  .topbar .tel{display:flex;align-items:center;gap:1rem;}
  .topbar .tel .num{font-family:var(--mono);font-weight:700;color:var(--ink);font-size:var(--t1);
    text-decoration:none;letter-spacing:.02em;}
  .topbar .tel .num small{display:block;font-family:var(--sans);font-size:.7rem;
    font-weight:400;color:var(--muted);letter-spacing:0;line-height:1.4;}
}

/* ---------- ボタン ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.7rem;border-radius:9px;
  font-weight:700;font-size:var(--t1);line-height:1.5;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  font-family:var(--sans);
  transition:background-color .15s, transform .12s, box-shadow .15s;
  text-align:center;
}
.btn.primary{background:var(--btn);color:var(--btn-ink);box-shadow:var(--shadow-btn);}
.btn.primary:hover{background:var(--btn-hover);transform:translateY(-1px);}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--line);}
.btn.ghost:hover{border-color:var(--sky);background:var(--surface);}
.btn.sm{padding:.6rem 1.1rem;font-size:var(--t-1);}
.btn:has(.sub){flex-direction:column;gap:.1rem;padding-top:.8rem;padding-bottom:.8rem;}
.btn.wide{width:100%;}
.btn .sub{display:block;font-size:.72rem;font-weight:400;opacity:.85;line-height:1.4;}

.btnrow{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;}
@media (max-width:559px){ .btnrow .btn{width:100%;} }
.note-free{font-size:var(--t-1);color:var(--muted);margin:.75rem 0 0;}

/* ---------- ヒーロー ---------- */

.hero{
  background:var(--band);
  padding:clamp(2.6rem,6vw,4.4rem) 0 0;
  position:relative;
}
.hero .eyebrow{
  font-family:var(--mono);font-size:var(--t-1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1rem;
}
.hero h1{
  font-size:clamp(1.85rem,4.6vw,var(--t5));
  line-height:1.36;font-weight:700;letter-spacing:.005em;
  margin:0 0 1.1rem;max-width:20ch;
}
.hero h1 .hl{
  background:linear-gradient(transparent 62%, var(--sky-pale) 62%);
  padding-bottom:.05em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero .lede{font-size:var(--t1);color:var(--body);max-width:46ch;margin:0 0 1.7rem;}

.hero-grid{display:grid;gap:2rem;align-items:start;}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3.2rem;}
}

/* ヒーロー右の要点カード */
.hero-card{
  background:var(--ground);border:1px solid var(--line);border-radius:14px;
  padding:1.35rem 1.4rem 1.45rem;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.hero-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);}
.hero-card h2{font-size:var(--t1);margin:0 0 .9rem;}
.hero-card ul{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.hero-card li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-1);line-height:1.72;}
.hero-card li::before{
  content:"";flex:none;width:1.1rem;height:1.1rem;margin-top:.28em;border-radius:50%;
  background:var(--navy);
  -webkit-mask:var(--ck) center/.72rem no-repeat;mask:var(--ck) center/.72rem no-repeat;
}
.hero-card li b{color:var(--ink);}
:root{--ck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.6 4.6L19 7.3'/%3E%3C/svg%3E");}

/* 信頼バー */
.trust{
  margin-top:clamp(2rem,5vw,3rem);
  border-top:1px solid var(--line);
  background:var(--ground);
}
.trust .in{
  max-width:1120px;margin:0 auto;padding:1rem clamp(1.1rem,4vw,2.6rem);
  display:flex;flex-wrap:wrap;gap:.5rem 2.4rem;justify-content:center;
  font-size:var(--t-1);color:var(--muted);
}
.trust b{color:var(--ink);}

/* ---------- 節 ---------- */

section{padding:clamp(3rem,7vw,5rem) 0;}
section.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

.sec-head{margin:0 0 2rem;}
.sec-head .kick{
  font-family:var(--mono);font-size:var(--t-1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy);margin:0 0 .5rem;
  display:flex;align-items:center;gap:.55rem;
}
.sec-head .kick::before{content:"";width:1.6rem;height:2px;border-radius:1px;background:var(--grad);}
.sec-head h2{font-size:clamp(1.45rem,3vw,var(--t3));line-height:1.45;margin:0 0 .7rem;}
.sec-head p{font-size:var(--t1);color:var(--muted);margin:0;max-width:56ch;}

/* ---------- お悩み ---------- */

.pains{display:grid;grid-template-columns:1fr;gap:.7rem;}
@media (min-width:700px){ .pains{grid-template-columns:repeat(2,minmax(0,1fr));} }
.pain{
  display:flex;gap:.8rem;align-items:flex-start;
  background:var(--ground);border:1px solid var(--line);border-radius:10px;
  padding:1rem 1.15rem;line-height:1.75;
}
.pain::before{
  content:"";flex:none;width:1.25rem;height:1.25rem;margin-top:.22em;border-radius:4px;
  border:2px solid var(--line);
}
.pain b{color:var(--ink);}

/* ---------- 前後の比較 ---------- */

.ba{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.6rem;}
@media (min-width:820px){ .ba{grid-template-columns:1fr 1fr;gap:1.2rem;} }
.ba > div{border:1px solid var(--line);border-radius:12px;padding:1.3rem 1.4rem;background:var(--ground);}
.ba .now{background:var(--surface);}
.ba .aft{border-color:var(--sky-pale);background:var(--accent-weak);}
.ba h3{font-size:var(--t1);margin:0 0 .9rem;display:flex;align-items:center;gap:.55rem;}
.ba h3::before{
  content:"";flex:none;width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);
}
.ba .aft h3::before{background:var(--navy);border-color:var(--navy);}
.ba ol{margin:0;padding-left:1.15rem;font-size:var(--t-1);line-height:1.85;}
.ba li{margin-bottom:.3rem;}
.ba .out{margin:1rem 0 0;padding-top:.85rem;border-top:1px solid var(--line);
  font-size:var(--t-1);color:var(--muted);}
.ba .aft .out{border-top-color:var(--sky-pale);}
.ba .out b{color:var(--ink);}

/* ---------- 3つの変化 ---------- */

.cards{display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:760px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr));} }
.card{
  border:1px solid var(--line);border-radius:12px;background:var(--ground);
  padding:1.4rem;position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);}
.card h3{font-size:var(--t1);margin:0 0 .5rem;line-height:1.55;}
.card p{font-size:var(--t-1);line-height:1.8;color:var(--muted);margin:0;max-width:none;}

/* ---------- 数字 ---------- */

.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
@media (min-width:760px){ .stats{grid-template-columns:repeat(4,minmax(0,1fr));} }
.stats > div{background:var(--ground);padding:1.3rem 1.2rem;display:flex;flex-direction:column;gap:.2rem;}
.stats .v{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,3.4vw,2.05rem);font-weight:700;line-height:1.2;
  color:var(--navy);letter-spacing:-.01em;
}
.stats .v .u{font-size:var(--t0);margin-left:.12rem;}
.stats .d{font-size:var(--t-1);color:var(--muted);line-height:1.65;}

/* ---------- 事例 ---------- */

.cases{display:flex;flex-direction:column;gap:1rem;}
.case{
  border:1px solid var(--line);border-radius:12px;background:var(--ground);
  display:grid;grid-template-columns:1fr;gap:.2rem 1.6rem;padding:1.4rem 1.5rem;
}
@media (min-width:820px){ .case{grid-template-columns:minmax(0,1fr) 13rem;align-items:center;} }
.case .tag{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--navy);
  display:block;margin-bottom:.3rem;
}
.case h3{font-size:var(--t1);margin:0 0 .5rem;line-height:1.55;}
.case p{font-size:var(--t-1);line-height:1.8;color:var(--muted);margin:0;max-width:none;}
.case .fig{
  border-left:0;border-top:1px solid var(--line);margin-top:1rem;padding-top:1rem;
  display:flex;flex-direction:column;gap:.15rem;
}
@media (min-width:820px){
  .case .fig{border-top:0;border-left:1px solid var(--line);margin-top:0;padding:.2rem 0 .2rem 1.6rem;}
}
.case .fig .big{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--t2);
  font-weight:700;color:var(--ink);line-height:1.3;
}
.case .fig .lb{font-size:var(--t-1);color:var(--muted);line-height:1.6;}

/* ---------- 進め方 ---------- */

.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;}
.steps > li{
  counter-increment:s;display:grid;grid-template-columns:2.4rem minmax(0,1fr);
  gap:.15rem 1rem;padding:1.15rem 0;align-items:start;
}
.steps > li + li{border-top:1px solid var(--line);}
.steps > li::before{
  content:"STEP " counter(s);
  grid-row:span 2;font-family:var(--mono);font-size:.62rem;font-weight:700;
  letter-spacing:.04em;color:var(--on-navy);background:var(--navy);
  width:2.4rem;height:2.4rem;border-radius:50%;
  display:grid;place-items:center;text-align:center;line-height:1.15;margin-top:.15rem;
}
.steps .t{font-weight:700;color:var(--ink);line-height:1.6;}
.steps .d{color:var(--muted);font-size:var(--t-1);line-height:1.8;grid-column:2;}
.steps .badge{
  display:inline-block;margin-left:.5rem;padding:.05rem .55rem;border-radius:999px;
  background:var(--accent-weak);color:var(--navy);font-size:.7rem;font-weight:700;
  vertical-align:.1em;border:1px solid var(--sky-pale);
}

/* ---------- 料金 ---------- */

.price{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ground);}
.price-head{
  padding:1.3rem 1.5rem;background:var(--band);border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .9rem;
}
.price-head .plan{font-weight:700;color:var(--ink);font-size:var(--t1);}
.price-head .term{font-size:var(--t-1);color:var(--muted);font-family:var(--mono);}
.price-row{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:.3rem 1.2rem;padding:1.1rem 1.5rem;
}
.price-row + .price-row{border-top:1px solid var(--line-soft);}
.price-row .name{font-weight:700;color:var(--ink);}
.price-row .note{font-size:var(--t-1);color:var(--muted);flex-basis:100%;line-height:1.75;}
.price-row .amt{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--t2);
  font-weight:700;color:var(--navy);white-space:nowrap;
}
.price-row .amt .unit{font-size:var(--t-1);font-weight:400;color:var(--muted);margin-left:.25rem;}
.price-total{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:.3rem 1.2rem;padding:1.25rem 1.5rem;border-top:2px solid var(--line);background:var(--surface-2);
}
.price-total .name{font-weight:700;color:var(--ink);font-size:var(--t1);}
.price-total .amt{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.7rem,4vw,2.2rem);font-weight:700;color:var(--ink);white-space:nowrap;
}
.price-total .amt .unit{font-size:var(--t-1);font-weight:400;color:var(--muted);margin-left:.25rem;}
.fine{font-size:var(--t-1);color:var(--muted);}

/* ---------- 問答 ---------- */

.qa{display:flex;flex-direction:column;gap:.75rem;}
.qa details{
  border:1px solid var(--line);border-radius:10px;background:var(--ground);overflow:hidden;
}
.qa summary{
  list-style:none;cursor:pointer;padding:1rem 1.2rem;
  display:grid;grid-template-columns:1.7rem minmax(0,1fr) 1.2rem;align-items:start;
  font-weight:700;color:var(--ink);line-height:1.7;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::before{content:"Q.";font-family:var(--mono);color:var(--navy);font-weight:700;}
.qa summary::after{
  content:"";width:.55rem;height:.55rem;margin-top:.5em;justify-self:end;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:rotate(45deg);transition:transform .18s;
}
.qa details[open] summary::after{transform:rotate(-135deg);}
.qa summary:hover{background:var(--surface);}
/* 回答は段落が何個あっても崩れないようにする。
   横並び指定にすると、2段落目が「A.」用の狭い列へ落ちて1文字ずつ縦に並ぶ。 */
.qa .a{
  position:relative;
  padding:0 1.2rem 1.15rem 2.9rem;
}
.qa .a::before{
  content:"A.";position:absolute;left:1.2rem;top:0;
  font-family:var(--mono);color:var(--blue-mid);font-weight:700;
  font-size:var(--t-1);line-height:1.85;
}
.qa .a p{margin:0 0 .7rem;max-width:none;font-size:var(--t-1);line-height:1.85;}
.qa .a p:last-child{margin-bottom:0;}

/* ---------- 申込 ---------- */

.cta{background:var(--band);border-top:1px solid var(--line);}
.cta-in{display:grid;grid-template-columns:1fr;gap:2rem;}
@media (min-width:900px){ .cta-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3.2rem;} }
.cta h2{font-size:clamp(1.45rem,3vw,var(--t3));margin:0 0 .9rem;line-height:1.45;}
.cta .lead{font-size:var(--t1);color:var(--body);}
/* 申込の直前に、迷いを外す3点。新しい約束は足さず、本文で述べたことだけを置く */
.assure{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.65rem;}
.assure li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-1);line-height:1.75;}
.assure li::before{
  content:"";flex:none;width:1.25rem;height:1.25rem;margin-top:.2em;border-radius:50%;
  background:var(--navy);
  -webkit-mask:var(--ck) center/.8rem no-repeat;mask:var(--ck) center/.8rem no-repeat;
}
.assure b{color:var(--ink);}

.cta .tel-big{
  display:inline-flex;flex-direction:column;margin-top:1.8rem;text-decoration:none;
  padding-top:1.4rem;border-top:1px solid var(--sky-pale);
}
.cta .tel-big .num{
  font-family:var(--mono);font-size:clamp(1.5rem,3.6vw,2rem);font-weight:700;
  color:var(--ink);letter-spacing:.01em;line-height:1.3;
}
.cta .tel-big .lb{font-size:var(--t-1);color:var(--muted);}

.form{
  background:var(--ground);border:1px solid var(--line);border-radius:14px;
  padding:1.5rem;box-shadow:var(--shadow);
}
.form .row{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;}
.form label{font-size:var(--t-1);font-weight:700;color:var(--ink);}
.form .req{
  margin-left:.4rem;font-size:.68rem;font-weight:700;color:var(--navy);
  background:var(--accent-weak);border:1px solid var(--sky-pale);
  padding:.02rem .4rem;border-radius:4px;vertical-align:.08em;
}
.form input,.form textarea{
  font-family:var(--sans);font-size:var(--t0);color:var(--ink);
  background:var(--ground);border:1px solid var(--line);border-radius:8px;
  padding:.7rem .85rem;width:100%;line-height:1.7;
}
.form input:focus,.form textarea:focus{border-color:var(--sky);}
.form textarea{min-height:5.5rem;resize:vertical;}
.form .privacy{font-size:var(--t-1);color:var(--muted);margin:.9rem 0 0;line-height:1.75;}
.form .msg{
  margin:1rem 0 0;padding:.9rem 1rem;border-radius:8px;
  background:var(--accent-weak);border:1px solid var(--sky-pale);
  font-size:var(--t-1);line-height:1.8;color:var(--ink);
}
.form .msg[hidden]{display:none;}

/* ---------- 会社概要・脚注 ---------- */

.corp{font-size:var(--t-1);}
.corp table{width:100%;border-collapse:collapse;}
.corp th,.corp td{padding:.6rem .2rem;border-bottom:1px solid var(--line-soft);
  text-align:left;vertical-align:top;line-height:1.75;}
.corp th{width:8.5rem;color:var(--ink);font-weight:700;white-space:nowrap;}
.corp tr:last-child th,.corp tr:last-child td{border-bottom:0;}

.foot{border-top:1px solid var(--line);background:var(--surface);padding:1.5rem 0 2.2rem;
  font-size:var(--t-1);color:var(--muted);}
.foot .in{max-width:1120px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.6rem);
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between;}

/* ---------- スマホの固定ボタン ---------- */

.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--ground);border-top:1px solid var(--line);
  padding:.7rem clamp(.8rem,4vw,1.2rem);
  display:flex;gap:.6rem;
  box-shadow:0 -8px 24px -18px rgba(20,32,63,.6);
}
.sticky .btn{flex:1;padding:.8rem 1rem;font-size:var(--t0);}
@media (min-width:820px){ .sticky{display:none;} }


/* ---- Codexの指摘を受けて足した部品（2026-08-13） ---- */

/* ヒーローの具体業務 */
.hero .egs{font-size:var(--t-1);color:var(--muted);max-width:46ch;margin:1rem 0 1.4rem;line-height:1.8;}
.hero .egs b{color:var(--ink);font-weight:700;}

/* ヒーロー右カードの料金。先に見せて、後半の抵抗を下げる */
.cardprice{
  margin:0 0 1rem;padding:.7rem .9rem;border-radius:9px;text-align:center;
  background:var(--band);font-size:var(--t-1);line-height:1.7;
  color:var(--ink);font-weight:700;max-width:none;
}

/* 狭い画面では副導線をボタンから文字リンクへ落とす */
@media (max-width:559px){
  .btnrow .btn.subcta{
    width:auto;background:none;border:0;box-shadow:none;padding:.2rem 0;
    font-size:var(--t-1);color:var(--navy);text-decoration:underline;
  }
}

/* 料金の下：この費用で残るもの */
.remain{
  margin:1.4rem 0 0;padding:1.3rem 1.4rem;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
}
.remain .rh{font-weight:700;color:var(--ink);margin:0 0 .8rem;font-size:var(--t1);max-width:none;}
.remain ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.remain li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-1);line-height:1.75;color:var(--muted);}
.remain li::before{
  content:"";flex:none;width:1.2rem;height:1.2rem;margin-top:.22em;border-radius:50%;
  background:var(--navy);
  -webkit-mask:var(--ck) center/.78rem no-repeat;mask:var(--ck) center/.78rem no-repeat;
}
.remain b{color:var(--ink);}

/* 連絡先はメールか電話のどちらかで足りる、と分かる見せ方 */
.form .group{gap:.5rem;}
.form .glabel{font-size:var(--t-1);font-weight:700;color:var(--ink);display:flex;align-items:center;gap:.4rem;}
.form .ghint{font-size:var(--t-1);color:var(--muted);font-style:normal;line-height:1.6;margin:-.2rem 0 .1rem;}
.form .slabel{font-size:.74rem;font-weight:400;color:var(--muted);margin-top:.15rem;}
.form textarea::placeholder,.form input::placeholder{color:var(--muted);opacity:.75;}


/* ---- 図版（2026-08-13。Codexの設計案を実装） ----
   SVGの座標直打ちは使わない。文字がはみ出す事故が起きるため、すべてHTMLとCSSで組む。
   狭い画面では縦積みに変形させ、横スクロールを起こさない。 */

/* 図1：段でつなぐ流れ */
.flowsteps{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;}
.flowsteps li{
  background:var(--ground);border:1px solid var(--line);border-radius:8px;
  padding:.6rem .85rem;font-size:var(--t-1);font-weight:700;color:var(--ink);
  text-align:center;line-height:1.55;
}
.flowsteps li + li{margin-top:1.5rem;position:relative;}
.flowsteps li + li::before{
  content:"";position:absolute;left:50%;top:-1.2rem;transform:translateX(-50%);
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid var(--sky);
}
.ba .aft .flowsteps li{border-color:var(--sky-pale);}

/* 図2：前後の時間の対比 */
.baro{margin:1.4rem 0 0;padding:1.3rem 1.4rem;border:1px solid var(--line);border-radius:12px;background:var(--ground);}
.baro .bh{font-weight:700;color:var(--ink);font-size:var(--t-1);margin:0 0 .9rem;max-width:none;}
.baro .br{display:grid;grid-template-columns:6.2rem minmax(0,1fr);gap:.8rem;align-items:center;margin-bottom:.5rem;}
.baro .lb{font-size:var(--t-1);color:var(--muted);}
.baro .bar{
  width:var(--w);min-width:5rem;height:2rem;border-radius:6px;
  display:flex;align-items:center;padding:0 .7rem;
  font-size:var(--t-1);font-weight:700;font-variant-numeric:tabular-nums;
}
.baro .b1{--w:100%;background:var(--navy);color:var(--on-navy);}
.baro .b2{--w:22%;background:var(--sky);color:var(--navy-deep);}
.baro .bn{margin:.9rem 0 0;font-size:var(--t-1);color:var(--muted);line-height:1.7;max-width:none;}

/* 図3：4工程の流れ */
.stepflow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1.5rem;}
.stepflow li{
  position:relative;background:var(--ground);border:1px solid var(--line);border-radius:10px;
  padding:1.05rem 1.15rem;display:flex;flex-direction:column;gap:.2rem;
}
.stepflow li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);border-radius:10px 10px 0 0;}
.stepflow .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--navy);font-weight:700;}
.stepflow .t{font-weight:700;color:var(--ink);line-height:1.5;font-size:var(--t1);}
.stepflow .s{font-size:.72rem;color:var(--muted);font-family:var(--mono);}
.stepflow .d{font-size:var(--t-1);color:var(--muted);line-height:1.75;margin-top:.35rem;}

/* 工程のつなぎ。狭い画面は下向き、広い画面は右向き */
.stepflow li:not(:last-child)::after{
  content:"";position:absolute;left:50%;bottom:-1.05rem;transform:translateX(-50%);
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid var(--sky);
}
@media (min-width:860px){
  .stepflow{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;}
  .stepflow li:not(:last-child)::after{
    left:auto;bottom:auto;right:-1.05rem;top:50%;transform:translateY(-50%);
    border-top:5px solid transparent;border-bottom:5px solid transparent;
    border-left:7px solid var(--sky);border-right:0;
  }
}


/* 貴社の業務でいうと（業務別の当てはめ）。狭い画面は1列→2列→3列 */
.uses{display:grid;grid-template-columns:1fr;gap:.8rem;}
@media (min-width:620px){ .uses{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:960px){ .uses{grid-template-columns:repeat(3,minmax(0,1fr));} }
.use{
  background:var(--ground);border:1px solid var(--line);border-radius:10px;
  padding:1.05rem 1.15rem;display:flex;flex-direction:column;gap:.4rem;
}
.use .t{
  font-size:var(--t-1);font-weight:700;color:var(--navy);
  display:flex;align-items:center;gap:.45rem;
}
.use .t::before{content:"";flex:none;width:.9rem;height:2px;border-radius:1px;background:var(--sky);}
.use .d{font-size:var(--t-1);color:var(--body);line-height:1.75;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important;}
}
html{scroll-behavior:smooth;}
section[id]{scroll-margin-top:4.5rem;}


/* ==========================================================================
   テスト版で足した部品（2026-08-13）
   biz.digital-hacks.jp の骨格を参考にした。取り入れたのは「見せ方」だけで、
   色は既存の変数（--navy / --sky / --band …）しか使っていない。
   ========================================================================== */

/* ---------- 上部のアンカーメニュー ----------
   縦に長いLPは、いま何の話かと、どこに料金があるかが分からなくなる。
   広い画面だけ出す。狭い画面は下の固定ボタンが同じ役目を果たす。 */

.navlinks{display:none;}
@media (min-width:1000px){
  .navlinks{
    display:flex;align-items:center;gap:1.5rem;margin-left:auto;margin-right:1.5rem;
  }
  .navlinks a{
    font-size:var(--t-1);font-weight:700;color:var(--body);text-decoration:none;
    padding:.3rem 0;border-bottom:2px solid transparent;white-space:nowrap;
  }
  .navlinks a:hover{color:var(--navy);border-bottom-color:var(--sky);}
}

/* ---------- 深い面の節（お悩み） ----------
   参照サイトは黒地に白カードで課題を並べていた。暖色は使えないので、
   ブランドの濃紺をそのまま面に使う。明暗どちらのテーマでも暗い地になる。 */

:root{ --deep:#1B3068; --on-deep:#FFFFFF; --deep-line:rgba(255,255,255,.16); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --deep:#16233F; }
}
:root[data-theme="dark"]{ --deep:#16233F; }

section.deep{background:var(--deep);border-top:0;border-bottom:0;}
section.deep .sec-head{text-align:center;margin-bottom:2.4rem;}
section.deep .sec-head .kick{color:var(--sky);justify-content:center;}
section.deep .sec-head .kick::before{background:var(--sky);}
section.deep .sec-head h2{color:var(--on-deep);}
section.deep .sec-head p{color:rgba(255,255,255,.72);margin-left:auto;margin-right:auto;}

section.deep .pain{
  background:var(--ground);border-color:transparent;box-shadow:0 10px 24px -18px rgba(0,0,0,.7);
}

/* 課題を受けて、原因の節へ渡す一文 */
.verdict{
  margin:2.4rem auto 0;text-align:center;max-width:44rem;
  font-size:clamp(1.15rem,2.6vw,var(--t2));font-weight:700;line-height:1.7;
  color:var(--on-deep);
}
.verdict .hl{
  background:linear-gradient(transparent 64%, rgba(82,198,255,.42) 64%);
  padding-bottom:.05em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.verdict::before{
  content:"";display:block;width:0;height:0;margin:0 auto 1.4rem;
  border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:11px solid var(--sky);
}

/* ---------- ヒーロー下の数字 ----------
   帯に小さく並べていたものを、読める大きさのカードに上げる。 */

.figures{
  display:grid;grid-template-columns:1fr;gap:.7rem;
  max-width:1120px;margin:0 auto;padding:1.6rem clamp(1.1rem,4vw,2.6rem) .2rem;
}
@media (min-width:640px){ .figures{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;} }
.figures div{
  background:var(--ground);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.1rem;text-align:center;
}
.figures .lb{font-size:var(--t-1);color:var(--muted);line-height:1.6;}
.figures .v{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:clamp(1.5rem,3.6vw,2.1rem);line-height:1.25;color:var(--navy);letter-spacing:-.01em;
}
.figures .v .u{font-size:var(--t0);margin-left:.1rem;}

/* ---------- 選ばれる理由 ----------
   参照サイトの「3つの理由」。番号は content で振り、手で書かない。 */

.reasons{list-style:none;margin:0;padding:0;counter-reset:r;
  display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:860px){ .reasons{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;} }
.reasons li{
  counter-increment:r;position:relative;
  background:var(--ground);border:1px solid var(--line);border-radius:14px;
  padding:2.4rem 1.4rem 1.5rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.5rem;
}
.reasons li::before{
  content:"0" counter(r);
  position:absolute;top:1.15rem;left:1.4rem;
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  color:var(--on-navy);background:var(--navy);
  padding:.12rem .5rem;border-radius:4px;
}
.reasons .t{font-size:var(--t1);font-weight:700;color:var(--ink);line-height:1.55;}
.reasons .d{font-size:var(--t-1);color:var(--muted);line-height:1.8;}
.reasons .d b{color:var(--ink);}

/* ---------- 途中の申込帯 ----------
   参照サイトは本文の途中で6回ボタンを出していた。読み終えるまで
   待たせないための帯を1枚だけ挟む。 */

.midcta{
  background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(2rem,4.5vw,2.8rem) 0;
}
.midcta .in{
  max-width:1120px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.6rem);
  display:flex;flex-direction:column;gap:1.1rem;align-items:center;text-align:center;
}
@media (min-width:860px){
  .midcta .in{flex-direction:row;justify-content:space-between;text-align:left;gap:2rem;}
}
.midcta .t{font-size:var(--t2);font-weight:700;color:var(--ink);margin:0;line-height:1.5;max-width:none;}
.midcta .s{font-size:var(--t-1);color:var(--muted);margin:.3rem 0 0;max-width:52ch;line-height:1.75;}
.midcta .btn{flex:none;}

/* ---------- 形式の比較 ----------
   他社様を評価する表ではなく、進め方の形式そのものを並べた表。
   狭い画面では横スクロールさせ、版面を崩さない。 */

.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:.4rem;}
.cmp{
  width:100%;min-width:44rem;border-collapse:separate;border-spacing:0;
  font-size:var(--t-1);line-height:1.7;
}
.cmp th,.cmp td{padding:.9rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);}
.cmp thead th{
  font-size:var(--t-1);font-weight:700;color:var(--muted);
  background:var(--surface);border-bottom:1px solid var(--line);white-space:nowrap;
}
.cmp thead th.me{
  background:var(--navy);color:var(--on-navy);
  border-radius:10px 10px 0 0;border-bottom-color:var(--navy);
}
.cmp tbody th{
  font-weight:700;color:var(--ink);background:var(--ground);white-space:nowrap;
}
.cmp td.me{background:var(--accent-weak);color:var(--ink);font-weight:700;}
.cmp tbody tr:last-child td.me{border-radius:0 0 10px 10px;}
.cmp td{color:var(--muted);}
.cmp .mk{
  display:inline-block;width:1.15rem;text-align:center;margin-right:.4rem;
  font-weight:700;color:var(--navy);
}
.cmp td:not(.me) .mk{color:var(--muted);}
.cmp-note{margin:.9rem 0 0;font-size:var(--t-1);color:var(--muted);line-height:1.75;}

/* ---------- 進め方の番号を丸で見せる ---------- */

.stepflow.big li{padding-top:2rem;}
.stepflow.big .n{
  position:absolute;top:-.9rem;left:1.15rem;
  width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--navy);color:var(--on-navy);
  display:grid;place-items:center;font-size:.82rem;letter-spacing:.02em;
  box-shadow:0 2px 8px -4px rgba(20,32,63,.6);
}
.stepflow.big{margin-top:1.6rem;}

/* ---------- 節見出しの英字キッカー ----------
   日本語だけのキッカーより、いま何番目の話かが目に入りやすい。 */

.sec-head .kick .ja{
  font-family:var(--sans);letter-spacing:.02em;text-transform:none;
  color:var(--muted);font-weight:400;
}
.sec-head .kick .ja::before{content:"／";margin:0 .5rem 0 .35rem;color:var(--line);}
section.deep .sec-head .kick .ja{color:rgba(255,255,255,.6);}
section.deep .sec-head .kick .ja::before{color:rgba(255,255,255,.3);}

/* 節の末尾に置く注記と、本文の下に置くボタン列。
   HTMLに style="margin-top:…" を書かないための部品。 */
.sec-note{margin:1.2rem 0 0;font-size:var(--t-1);color:var(--muted);line-height:1.75;}
.btnrow.after{margin-top:1.8rem;}

/* 数字ではない項目は、等幅ではなく通常の書体で出す。
   「不動産」を等幅で組むと、数字のふりをしているように見えるため。 */
.figures .v.txt{
  font-family:var(--sans);font-size:clamp(1.2rem,2.8vw,1.55rem);letter-spacing:.01em;
}
.figures .v.txt .u{font-size:var(--t0);color:var(--body);font-weight:400;}

/* 比較表は狭い画面で横にスクロールする。
   スクロールできること自体が分からないと、右の2列が読まれずに終わる。 */
.cmp-hint{display:none;}
@media (max-width:900px){
  .cmp-hint{
    display:block;margin:0 0 .7rem;font-size:var(--t-1);color:var(--muted);
    display:flex;align-items:center;gap:.4rem;
  }
  .cmp-hint::after{
    content:"";width:0;height:0;
    border-top:4px solid transparent;border-bottom:4px solid transparent;
    border-left:6px solid var(--sky);
  }
}

/* 判断に効く箱（料金・途中の申込帯）にだけ、細い水色の線を通す。
   面は1色のまま。線は3px。カードの ::before と同じ考え方。 */
.price{position:relative;}
.price::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);z-index:1;}
.midcta{position:relative;}
.midcta::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);}

/* 3枚を横に並べたときだけ、見出しの高さを2行分そろえる。
   1枚だけ見出しが2行になると、本文の書き出し位置がずれて読みにくい。 */
@media (min-width:860px){
  .reasons .t{min-height:calc(1.55em * 2);}
}

/* 狭い画面では、数字を縦に3枚積むと画面1つ分を使ってしまう。
   ラベルを左、数字を右に置いた横長の行にして、高さを半分に抑える。 */
@media (max-width:639px){
  .figures div{
    flex-direction:row;align-items:baseline;justify-content:space-between;
    gap:.8rem;text-align:left;padding:.75rem 1rem;
  }
  .figures .v{font-size:1.35rem;}
  .figures .v.txt{font-size:1.05rem;}
}


/* ==========================================================================
   参照サイト（biz.digital-hacks.jp）へさらに寄せた版（2026-08-13 第2版）
   寄せたのは4点。見出しの型／理由の見せ方／読む順番／ヒーローの組み方。
   色は変えていない。参照サイトの赤は、すべて濃紺と水色に置き換えている。
   ========================================================================== */

/* ---------- 節見出しを中央揃えの型に統一 ----------
   参照サイトは全節が「英字キッカー → 大見出し → 短い横線」で揃っている。
   これが、あのサイトの見た目をいちばん強く決めている。 */

.sec-head{text-align:center;margin-bottom:2.6rem;}
.sec-head .kick{justify-content:center;margin-bottom:.7rem;}
.sec-head .kick::before{display:none;}
.sec-head h2{
  font-size:clamp(1.6rem,3.6vw,2.2rem);line-height:1.45;margin:0 auto .9rem;
  max-width:26ch;
}
.sec-head h2 .hl{color:var(--navy);}
.sec-head p{margin:0 auto;}
.sec-head::after{
  content:"";display:block;width:3rem;height:2px;border-radius:1px;
  background:var(--grad);margin:1.4rem auto 0;
}
/* 表・箇条書きが左揃えのままでよい節は、見出しだけ中央に寄せる */
.sec-head + *{text-align:left;}

/* ---------- ヒーロー ---------- */

/* 「法人向け」に相当するバッジ。参照サイトは黒地の角丸だった */
.hero .eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;text-transform:none;
  letter-spacing:.02em;font-family:var(--sans);margin-bottom:1.1rem;}
.hero .eyebrow .bd{
  background:var(--navy);color:var(--on-navy);font-weight:700;
  padding:.22rem .7rem;border-radius:6px;font-size:var(--t-1);letter-spacing:.04em;
}
.hero .eyebrow .tx{color:var(--body);font-weight:700;font-size:var(--t0);}

/* ヒーローの中に置く数字。参照サイトは見出しのすぐ下に3つ並べていた */
.herostats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;
  margin:0 0 1.6rem;
}
.herostats div{
  background:var(--ground);border:1px solid var(--sky-pale);border-radius:10px;
  padding:.7rem .5rem;text-align:center;display:flex;flex-direction:column;gap:.05rem;
}
.herostats .lb{font-size:.72rem;color:var(--muted);line-height:1.5;}
.herostats .v{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:clamp(1.15rem,3vw,1.6rem);line-height:1.25;color:var(--navy);
}
.herostats .v .u{font-size:.78rem;margin-left:.1rem;}
.herostats .v.txt{font-family:var(--sans);font-size:clamp(.95rem,2.4vw,1.15rem);}

/* 大きなCTA。参照サイトはヒーローの下いっぱいに2つ並べていた */
.herocta{
  display:grid;grid-template-columns:1fr;gap:.9rem;
  margin:2.2rem 0 0;
}
@media (min-width:720px){ .herocta{grid-template-columns:1fr 1fr;gap:1.4rem;} }
.herocta .btn{padding:1.15rem 1.5rem;font-size:var(--t2);border-radius:999px;}
.herocta .btn .sub{font-size:.76rem;}
.herocta .btn.ghost{border-color:var(--navy);color:var(--navy);}
.hero .note-free{text-align:center;margin-top:1.1rem;}
.hero{padding-bottom:clamp(2.4rem,5vw,3.4rem);}

/* ---------- 選ばれる理由を、大きな3帯に ----------
   参照サイトは1つの理由に1画面を使い、背景に巨大な番号を薄く敷いていた。 */

.bigreasons{list-style:none;margin:0;padding:0;counter-reset:br;
  display:flex;flex-direction:column;gap:1.2rem;}
.bigreasons > li{
  counter-increment:br;position:relative;overflow:hidden;
  background:var(--ground);border:1px solid var(--line);border-radius:16px;
  padding:1.8rem clamp(1.3rem,4vw,2.4rem) 1.9rem;
  box-shadow:var(--shadow);
}
/* 背景の巨大な番号。文字なので面ではない。読み上げには出ない */
.bigreasons > li::after{
  content:counter(br, decimal-leading-zero);
  position:absolute;right:.6rem;top:-.3em;pointer-events:none;
  font-family:var(--mono);font-weight:700;font-size:11rem;line-height:1;
  color:var(--surface-2);z-index:0;letter-spacing:-.02em;
}
.bigreasons .in{position:relative;z-index:1;display:grid;gap:1rem;}
@media (min-width:900px){
  .bigreasons .in{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:2.6rem;align-items:start;}
}
/* 左（番号と見出し）と右（説明）を別の箱にする。
   1つのグリッドに直接置くと、右が高いぶん左の行が広がって間延びする。 */
.bigreasons .lft{display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;}
.bigreasons .no{
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  color:var(--on-navy);background:var(--navy);padding:.16rem .6rem;border-radius:5px;
}
.bigreasons .t{font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:700;color:var(--ink);line-height:1.5;}
.bigreasons .d{font-size:var(--t0);color:var(--body);line-height:1.9;margin:0;max-width:none;}
.bigreasons .d b{color:var(--ink);}
.bigreasons .pt{
  list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;
}
.bigreasons .pt li{
  font-size:var(--t-1);font-weight:700;color:var(--navy);
  background:var(--accent-weak);border:1px solid var(--sky-pale);
  padding:.25rem .75rem;border-radius:999px;line-height:1.6;
}

/* ---------- 途中の申込帯を吹き出し型に ----------
   参照サイトは吹き出しの下にボタンを2つ置いていた。 */

.bubble{
  position:relative;max-width:44rem;margin:0 auto 1.6rem;
  background:var(--navy);color:var(--on-navy);
  border-radius:999px;padding:1.05rem 2rem;text-align:center;
  font-size:clamp(1.05rem,2.4vw,var(--t2));font-weight:700;line-height:1.6;
}
.bubble::after{
  content:"";position:absolute;left:50%;bottom:-.7rem;transform:translateX(-50%);
  width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:12px solid var(--navy);
}
.midcta .in{flex-direction:column;text-align:center;}
@media (min-width:860px){ .midcta .in{flex-direction:column;text-align:center;} }
.midcta .btnrow{justify-content:center;}
.midcta .s{margin:0 auto;text-align:center;}

/* ---------- 最後のひと押し ---------- */

.closing{
  text-align:center;max-width:40rem;margin:0 auto 2.4rem;
}
.closing h2{font-size:clamp(1.6rem,3.8vw,2.3rem);line-height:1.45;margin:0 0 .8rem;}
.closing p{font-size:var(--t1);color:var(--body);margin:0 auto;}

/* 申込の節は、見出しを上に出して左右2段組を下に置く */
.cta .sec-head{margin-bottom:2.2rem;}


/* ==========================================================================
   lightdoor.jp の質感へ寄せた（2026-08-13 第3版）

   **重要：以前の「面は1色。グラデーションは3px程度の細線だけ」という決まりは、
   このLPでは澤井様のご指示により解除している**（2026-08-13）。
   根拠は自社サイト lightdoor.jp。斜めの帯・光のぼかし・グラデーション文字・
   光沢のあるボタンを使っている。資料3ページ（site.css）の決まりは従来どおり。

   ただし変えていないもの
   - **暖色は使わない。**濃紺 #233F89／中間 #3D87C8／水色 #52C6FF の範囲だけで作る
   - 明暗2テーマの対応。色はすべて変数から取る
   ========================================================================== */

/* ---------- 1. 浮いた角丸のヘッダー ---------- */

.topbar{background:transparent;border-bottom:0;padding:.5rem 0;}
.topbar .in{
  background:var(--ground);
  border:1px solid var(--line-soft);
  border-radius:999px;
  box-shadow:0 8px 26px -16px rgba(20,32,63,.5);
  padding:.5rem .6rem .5rem 1.4rem;
}
.topbar .btn.primary{border-radius:999px;}

/* ---------- 2. 光沢のあるボタン ----------
   濃紺から水色へ流し、上半分に白い薄い膜をかけて艶を出す。 */

.btn{border-radius:999px;position:relative;overflow:hidden;isolation:isolate;}
.btn.primary{
  background:linear-gradient(102deg,var(--navy) 0%,var(--blue-mid) 58%,var(--sky) 130%);
  box-shadow:0 1px 2px rgba(20,32,63,.14), 0 12px 26px -14px rgba(35,63,137,.66);
}
.btn.primary::after{
  content:"";position:absolute;inset:0 0 auto 0;height:52%;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0));
  pointer-events:none;
}
.btn.primary:hover{
  background:linear-gradient(102deg,var(--navy-deep) 0%,var(--navy) 55%,var(--blue-mid) 130%);
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(20,32,63,.16), 0 16px 32px -14px rgba(35,63,137,.72);
}
:root[data-theme="dark"] .btn.primary,
:root:not([data-theme="light"]) .btn.primary{}
.btn.ghost{
  background:var(--ground);border-color:var(--sky-pale);
  box-shadow:0 6px 18px -14px rgba(20,32,63,.4);
}
.btn.ghost:hover{border-color:var(--sky);background:var(--surface);}

/* ---------- 3. グラデーションの文字 ----------
   lightdoor.jp の見出しは、水色から濃紺へ流れる。
   対応していない環境では、ただの濃紺の文字として読める。 */

.hero h1 .hl,
.sec-head h2 .hl{
  background:none;padding-bottom:0;color:var(--navy);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .hl,
  .sec-head h2 .hl{
    background-image:linear-gradient(96deg,var(--sky) 0%,var(--blue-mid) 46%,var(--navy) 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
}
/* 濃紺の面の上だけは、グラデーション文字が沈むので蛍光ペンのままにする */
.verdict .hl{
  background:linear-gradient(transparent 64%, rgba(82,198,255,.42) 64%);
  color:var(--on-deep);-webkit-text-fill-color:var(--on-deep);
}

/* ---------- 4. ヒーローの斜めの帯と、光のぼかし ----------
   帯は文章にかからない右側へ寄せ、薄くかける。読みやすさを落とさないため。 */

.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(115% 85% at 80% -12%, rgba(82,198,255,.30), transparent 58%),
    radial-gradient(85% 65% at 4% 108%, rgba(173,233,241,.42), transparent 60%),
    linear-gradient(180deg, var(--band) 0%, var(--ground) 100%);
}
/* 斜めの帯。角度をそろえた2本を、色の境目を立てた線形グラデーションで描く。
   図形を切り抜く方法より崩れにくく、画面幅が変わっても角度が保たれる。 */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(48deg, transparent 57%, rgba(82,198,255,.30) 57%,
                    rgba(61,135,200,.26) 77%, transparent 77%),
    linear-gradient(48deg, transparent 84%, rgba(35,63,137,.20) 84%,
                    rgba(61,135,200,.13) 97%, transparent 97%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(48deg, transparent 50%, rgba(173,233,241,.34) 50%,
                             rgba(173,233,241,.10) 56%, transparent 56%);
}
.hero > .wrap{position:relative;z-index:1;}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero{
    background:
      radial-gradient(115% 85% at 80% -12%, rgba(82,198,255,.16), transparent 58%),
      radial-gradient(85% 65% at 4% 108%, rgba(35,63,137,.34), transparent 60%),
      linear-gradient(180deg, var(--band) 0%, var(--ground) 100%);
  }
  :root:not([data-theme="light"]) .hero::before{opacity:.7;}
  :root:not([data-theme="light"]) .hero::after{opacity:.35;}
}
:root[data-theme="dark"] .hero{
  background:
    radial-gradient(115% 85% at 80% -12%, rgba(82,198,255,.16), transparent 58%),
    radial-gradient(85% 65% at 4% 108%, rgba(35,63,137,.34), transparent 60%),
    linear-gradient(180deg, var(--band) 0%, var(--ground) 100%);
}
:root[data-theme="dark"] .hero::before{opacity:.7;}
:root[data-theme="dark"] .hero::after{opacity:.35;}

/* ---------- 5. 濃紺の節にも、光と帯を入れる ---------- */

section.deep{
  position:relative;overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% -18%, rgba(82,198,255,.24), transparent 62%),
    linear-gradient(165deg, var(--deep) 0%, #16295C 58%, var(--deep) 100%);
}
:root[data-theme="dark"] section.deep,
:root:not([data-theme="light"]) section.deep{
  background:
    radial-gradient(80% 60% at 50% -18%, rgba(82,198,255,.14), transparent 62%),
    linear-gradient(165deg, var(--deep) 0%, #0E1A31 58%, var(--deep) 100%);
}
section.deep::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(48deg, transparent 56%, rgba(82,198,255,.12) 56%,
                    rgba(82,198,255,.05) 70%, transparent 70%),
    linear-gradient(48deg, transparent 78%, rgba(255,255,255,.07) 78%,
                    rgba(255,255,255,.02) 88%, transparent 88%);
}
section.deep > .wrap{position:relative;z-index:1;}

/* ---------- 6. 節の地に、ごく淡い流れをつける ---------- */

section.alt{
  background:linear-gradient(180deg,var(--surface) 0%,var(--ground) 100%);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.midcta{
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(82,198,255,.18), transparent 62%),
    linear-gradient(180deg,var(--band) 0%,var(--ground) 100%);
}
.cta{
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(82,198,255,.20), transparent 60%),
    linear-gradient(180deg,var(--band) 0%,var(--ground) 100%);
}

/* ---------- 7. カードに、やわらかい艶と丸みを ---------- */

.card,.hero-card,.use,.pain,.bigreasons > li,.form,.price,.remain,.qa details{
  border-radius:16px;
}
.card,.hero-card,.bigreasons > li,.form{
  box-shadow:0 1px 2px rgba(35,63,137,.04), 0 22px 44px -30px rgba(35,63,137,.42);
}
.hero-card{
  background:linear-gradient(170deg,var(--ground) 0%,var(--ground) 62%,var(--surface) 100%);
}
.card::before,.hero-card::before{height:4px;}

/* ヒーロー内の数字にも、うっすら艶をのせる */
.herostats div{
  background:linear-gradient(170deg,var(--ground) 0%,var(--surface) 100%);
  border-radius:14px;
}

/* 合計金額の行に、面としてのグラデーションをかける */
.price-total{
  background:linear-gradient(100deg,var(--surface-2) 0%,var(--accent-weak) 100%);
}

/* ---------- 8. 節見出しの英字を lightdoor.jp の型に ----------
   小さい等幅の飾りではなく、細身の大きい英字＋横線＋日本語。 */

.sec-head .kick{
  font-family:var(--sans);font-weight:400;text-transform:none;
  font-size:clamp(1.05rem,2.3vw,1.35rem);letter-spacing:.06em;
  color:var(--navy);gap:.7rem;
}
.sec-head .kick .ja{
  font-size:var(--t-1);color:var(--muted);letter-spacing:.02em;
  display:flex;align-items:center;gap:.7rem;
}
.sec-head .kick .ja::before{
  content:"";width:1.8rem;height:1px;background:var(--line);margin:0;
}
section.deep .sec-head .kick{color:var(--sky);}
section.deep .sec-head .kick .ja::before{background:rgba(255,255,255,.28);}

/* ---------- 9. 吹き出しにも艶 ---------- */

.bubble{
  background:linear-gradient(102deg,var(--navy) 0%,var(--blue-mid) 62%,var(--sky) 135%);
  box-shadow:0 14px 30px -18px rgba(35,63,137,.7);
}
.bubble::after{border-top-color:var(--navy);}

/* ---------- 10. 比較表の弊社の列にも、面のグラデーション ---------- */

.cmp thead th.me{
  background:linear-gradient(102deg,var(--navy) 0%,var(--blue-mid) 100%);
  border-radius:14px 14px 0 0;
}
.cmp td.me{background:linear-gradient(180deg,var(--accent-weak) 0%,rgba(234,244,254,.55) 100%);}
:root[data-theme="dark"] .cmp td.me,
:root:not([data-theme="light"]) .cmp td.me{background:var(--accent-weak);}

/* ---------- ファーストビューを1画面に収める（2026-08-13） ----------
   PCで縦1010px、スマホで約1400pxあり、ボタンが画面の外に出ていた。
   文章を削るだけでなく、余白と文字の大きさも詰める。 */

.hero{padding:clamp(1.8rem,4vw,2.9rem) 0 clamp(1.8rem,3.6vw,2.6rem);}
.hero h1{font-size:clamp(1.7rem,4.1vw,2.5rem);max-width:23ch;margin-bottom:.9rem;}
.hero .lede{margin-bottom:1.3rem;font-size:var(--t0);}
.hero .eyebrow{margin-bottom:.9rem;}
.herostats{margin-bottom:0;}
.hero-grid{gap:1.6rem;}
@media (min-width:900px){ .hero-grid{gap:2.6rem;} }
.hero-card{padding:1.2rem 1.3rem 1.3rem;}
.hero-card h2{margin-bottom:.75rem;}
.hero-card ul{margin-bottom:0;gap:.5rem;}
.herocta{margin-top:1.5rem;gap:.75rem;}
@media (min-width:720px){ .herocta{gap:1.1rem;} }
.herocta .btn{padding:.95rem 1.4rem;font-size:var(--t1);}
.herocta .btn .sub{font-size:.72rem;}
.hero .note-free{margin-top:.9rem;}

/* 節末の注記が2行に折れていた。p の max-width:64ch は欧文基準で、
   日本語だと 32文字ほどで折り返してしまう。この注記は幅の制限を外す。 */
.sec-note{max-width:none;}

/* 狭い画面では、右のカードより先にボタンを出す。
   カードが先だと、申し込みボタンが第一画面の外へ押し出されるため。 */
@media (max-width:899px){
  .hero > .wrap{display:flex;flex-direction:column;gap:1.5rem;}
  .hero-grid{display:contents;}
  .hero-grid > div:first-child{order:1;}
  .herocta{order:2;margin-top:0;}
  .hero .note-free{order:3;margin-top:-.7rem;}
  .hero-card{order:4;}
}

/* 節のリード文も同じ理由で早く折り返していた。
   ch は欧文の「0」の幅が基準なので、日本語では見た目の半分ほどで効いてしまう。
   文字数ではなく、実寸で読みやすい幅を指定する。 */
.sec-head p{max-width:44rem;}

/* ファーストビューをもう一段詰める（2026-08-13）。
   数字の箱と余白を薄くし、ボタンをより上へ引き上げる。 */
.hero{padding:clamp(1.5rem,3.4vw,2.4rem) 0 clamp(1.5rem,3vw,2.2rem);}
.hero .lede{margin-bottom:1.1rem;}
.herostats div{padding:.55rem .5rem;}
.herostats .lb{font-size:.68rem;}
.herocta{margin-top:1.25rem;}
.hero .note-free{margin-top:.75rem;}
.hero-card h2{font-size:var(--t0);}

/* ロゴは主張が強かったので一段小さくする。
   浮いた角丸ヘッダーは面が白いぶん、ロゴが大きいと目が先にそちらへ行く。 */
.logo{width:8.4rem;}
@media (max-width:559px){ .logo{width:7.4rem;} }

/* ---------- 見出しを、どの画面幅でも同じ2行にする（2026-08-13） ----------
   改行位置は <br> で固定し、文字の大きさのほうを入れ物に合わせて伸縮させる。
   1行が最長17文字分なので、入れ物の幅の 5.5% を基準にすると必ず収まる。
   cqw は「親の幅」を基準にする単位。vw（画面幅）だと、
   PCで左右2段組になったときに右のカードのぶんが計算に入らず、はみ出す。 */

.hero-grid > div:first-child{container-type:inline-size;}
.hero h1{
  max-width:none;
  line-height:1.42;
  font-size:clamp(1.15rem, 5.2vw, 2.3rem);   /* cqw が使えない環境用 */
}
@supports (font-size:1cqw){
  .hero h1{font-size:clamp(1.1rem, 5.5cqw, 2.3rem);}
}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);}
}

/* ---------- ファーストビューの地を lightdoor.jp の色合いにする（2026-08-13） ----------
   これまでは下と右へ行くほど白く抜けていた。自社サイトは画面いっぱいが
   淡い水色で満たされ、その上に濃い帯がのっている。同じ組み立てにする。 */

:root{
  --fv-1:#E4F4FB; --fv-2:#CFEAF7; --fv-3:#E9F6FB;   /* 地の水色 */
  --fv-glow:rgba(255,255,255,.82);                   /* 文字の下に敷く白い光 */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fv-1:#0E1A33; --fv-2:#14264A; --fv-3:#101B36;
    --fv-glow:rgba(20,38,74,.75);
  }
}
:root[data-theme="dark"]{
  --fv-1:#0E1A33; --fv-2:#14264A; --fv-3:#101B36;
  --fv-glow:rgba(20,38,74,.75);
}

.hero,
:root[data-theme="dark"] .hero,
:root:not([data-theme="light"]) .hero{
  background:
    radial-gradient(72% 68% at 10% 16%, var(--fv-glow), rgba(255,255,255,0) 60%),
    radial-gradient(80% 72% at 88% 10%, rgba(82,198,255,.38), rgba(82,198,255,0) 64%),
    radial-gradient(70% 80% at 62% 112%, rgba(173,233,241,.50), rgba(173,233,241,0) 60%),
    linear-gradient(152deg, var(--fv-1) 0%, var(--fv-2) 50%, var(--fv-3) 100%);
}

/* 帯も、地が色づいたぶん少し強める */
.hero::before{
  background:
    linear-gradient(48deg, transparent 57%, rgba(82,198,255,.38) 57%,
                    rgba(61,135,200,.32) 77%, transparent 77%),
    linear-gradient(48deg, transparent 84%, rgba(35,63,137,.26) 84%,
                    rgba(61,135,200,.17) 97%, transparent 97%);
}
.hero::after{
  background:linear-gradient(48deg, transparent 50%, rgba(255,255,255,.40) 50%,
                             rgba(255,255,255,.10) 56%, transparent 56%);
}
:root[data-theme="dark"] .hero::before,
:root:not([data-theme="light"]) .hero::before{opacity:.7;}
:root[data-theme="dark"] .hero::after,
:root:not([data-theme="light"]) .hero::after{opacity:.16;}

/* ---------- ファーストビューの地を lightdoor.jp の「強み」と同じにする（2026-08-13） ----------
   自社サイトの当該箇所から実際の色を採取した。
   #FFFFFF → #F2FBFC → #DCF5F7 → #BFEEF2 → #9AE6EC の縦のグラデーションに、
   大きな白いぼかしの玉を重ねている。角の立った帯は使っていない。 */

:root{
  --fv-a:#FFFFFF; --fv-b:#F2FBFC; --fv-c:#DCF5F7; --fv-d:#BFEEF2; --fv-e:#A2E7ED;
  --fv-orb:255,255,255;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fv-a:#0A1124; --fv-b:#0E1A31; --fv-c:#13273F; --fv-d:#17364F; --fv-e:#1B4155;
    --fv-orb:82,198,255;
  }
}
:root[data-theme="dark"]{
  --fv-a:#0A1124; --fv-b:#0E1A31; --fv-c:#13273F; --fv-d:#17364F; --fv-e:#1B4155;
  --fv-orb:82,198,255;
}

.hero,
:root[data-theme="dark"] .hero,
:root:not([data-theme="light"]) .hero{
  background:
    radial-gradient(30% 40% at  9% 26%, rgba(var(--fv-orb),.92), rgba(var(--fv-orb),0) 72%),
    radial-gradient(26% 26% at 41% 52%, rgba(var(--fv-orb),.72), rgba(var(--fv-orb),0) 72%),
    radial-gradient(36% 34% at 87% 62%, rgba(var(--fv-orb),.80), rgba(var(--fv-orb),0) 72%),
    radial-gradient(38% 34% at 17% 80%, rgba(var(--fv-orb),.90), rgba(var(--fv-orb),0) 72%),
    radial-gradient(30% 26% at 63% 94%, rgba(var(--fv-orb),.82), rgba(var(--fv-orb),0) 72%),
    radial-gradient(22% 20% at 72% 22%, rgba(var(--fv-orb),.62), rgba(var(--fv-orb),0) 74%),
    linear-gradient(180deg,
      var(--fv-a) 0%, var(--fv-b) 22%, var(--fv-c) 50%, var(--fv-d) 76%, var(--fv-e) 100%);
}

/* 角の立った帯はやめ、ごく淡い斜めの流れだけを残す */
.hero::before{
  background:linear-gradient(48deg, transparent 54%, rgba(255,255,255,.42) 54%,
                             rgba(255,255,255,.10) 74%, transparent 74%);
}
.hero::after{
  background:linear-gradient(48deg, transparent 80%, rgba(255,255,255,.34) 80%,
                             rgba(255,255,255,.06) 94%, transparent 94%);
}
:root[data-theme="dark"] .hero::before,
:root:not([data-theme="light"]) .hero::before{opacity:.14;}
:root[data-theme="dark"] .hero::after,
:root:not([data-theme="light"]) .hero::after{opacity:.10;}

/* 地が下ほど濃くなるので、下に置く注記の文字を一段濃くして読めるようにする */
.hero .note-free{color:var(--body);}