/* ==========================================================================
   集客用LP例 専用のスタイル（share.lightdoor.jp/lp-example/）
   資料ページの site.css とは分けている。LPは版面も部品も別系統のため、
   site.css に混ぜると資料3ページの見た目に影響が出る。
   配色・字組みは site.css に準拠（濃紺 #233F89／水色 #52C6FF／淡色 #F0F7F8）。
   ========================================================================== */

/* ==========================================================================
   LightDoor 集客用LP（テスト版）
   配色・字組みは share.lightdoor.jp / lightdoor-docs の site.css に準拠。
   本番へ移すときは、この指定をまとめて site.css へ移す（HTMLに見た目を書かない決まりのため）。
   ========================================================================== */

: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;}

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