@charset "UTF-8";
/* 岩井淳貴税理士事務所｜税務顧問契約LP
   配色・タイポは 制作ブリーフ.md が正。演出は motion.css / motion.js（演出仕様書.md） */

:root{
  --navy:#12243D;
  --navy-deep:#0A1728;
  --navy-pale:#E8EDF3;
  --gold:#C08A2E;
  --gold-pale:#F3E7CE;
  --white:#FFFFFF;
  --paper:#F7F5F1;
  --ink:#1E2733;
  --ink-sub:#5C6675;
  --line:#D8DEE6;

  --ff-head:"Zen Old Mincho", serif;
  --ff-body:"Noto Sans JP", system-ui, sans-serif;
  --ff-num:"Inter", system-ui, sans-serif;
  --ff-label:"Cormorant Garamond", serif;

  --wrap:1120px;
  --wrap-narrow:800px;
  --pad:clamp(20px, 5vw, 40px);
  --sec-pad:clamp(64px, 11vw, 128px);
  --r:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.9;
  color:var(--ink);
  background:var(--white);
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
}
@media (min-width:768px){ body{font-size:16.5px} }

img{max-width:100%;height:auto;display:block}
a{color:inherit}
b,strong{font-weight:700}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--ff-head);font-weight:700;line-height:1.45;letter-spacing:.01em;margin:0}
p{margin:0 0 1.1em}
ul,ol,dl{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:min(100% - var(--pad)*2, var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - var(--pad)*2, var(--wrap-narrow))}
.sec{padding:var(--sec-pad) 0;position:relative}
.sec--paper{background:var(--paper)}
.sec--paper::before{
  content:"";position:absolute;inset:0;background:url("../../images/texture-paper.webp") repeat;
  background-size:360px;opacity:.5;pointer-events:none;mix-blend-mode:multiply;
}
.sec > .wrap{position:relative;z-index:1}

.sec__eyebrow{
  font-family:var(--ff-label);font-size:14px;letter-spacing:.28em;color:var(--gold);
  margin:0 0 .8em;text-transform:uppercase;
}
.sec__title{font-size:clamp(23px, 4.6vw, 34px);color:var(--navy);margin-bottom:.7em}
.sec__title b{color:var(--navy);background:linear-gradient(transparent 68%, var(--gold-pale) 68%)}
.sub__title{font-size:clamp(19px,3vw,23px);color:var(--navy);margin:3em 0 1em}
.lead{font-size:1.02em;margin-bottom:2em}
.note{font-size:.95em;color:var(--ink-sub);margin-top:1.8em}
.note--sm{font-size:.86em}
.note--caution{border-left:3px solid var(--gold);padding-left:14px}
.note--strong{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;color:var(--ink)}
.rule{display:block;height:2px;background:var(--gold);width:0;margin:0 0 2.4em;opacity:0}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--navy); --fg:#fff; --bd:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:19px 30px;min-height:56px;border:1px solid var(--bd);border-radius:999px;
  background:var(--bg);color:var(--fg);text-decoration:none;font-weight:700;letter-spacing:.02em;
  cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
  text-align:center;
}
.btn span{display:block}
.btn small{display:block;font-weight:500;font-size:.78em;opacity:.85;margin-top:2px}
.btn__arrow{width:20px;height:20px;flex:none;transition:transform .3s ease}
.btn:hover{transform:translateY(-2px)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--gold{--bg:var(--gold);--bd:var(--gold);--fg:#fff}
.btn--gold:hover{--bg:#A97722;--bd:#A97722}
.btn--ink{--bg:var(--navy);--bd:var(--navy)}
.btn--ink:hover{--bg:var(--navy-deep)}
.btn--ghost{--bg:transparent;--fg:var(--navy);--bd:var(--navy)}
.btn--ghost:hover{--bg:var(--navy);--fg:#fff}
.btn--lg{font-size:1.02em;padding:21px 34px}
.btn--xl{font-size:1.06em;padding:24px 40px;width:min(100%, 460px)}
.cta-inline{margin-top:2.6em;text-align:center}

/* ---------- S1 hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--navy-deep)}
.hero__media{position:absolute;inset:0;overflow:hidden}
/* 高さ150%：FX-03 の視差（yPercent -33 ＝ 背景が0.5画面ぶん流れる）でも下端が空かない */
.hero__img{position:absolute;left:0;right:0;bottom:0;height:150%;display:block}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:56% 100%}
.hero__img--after{opacity:0}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(10,23,40,.94) 0%, rgba(10,23,40,.86) 34%, rgba(10,23,40,.55) 62%, rgba(10,23,40,.35) 100%);
}
.hero__inner{position:relative;z-index:2;width:min(100% - var(--pad)*2, var(--wrap));margin-inline:auto;padding:104px 0 28px;color:#fff}
@media (min-width:768px){ .hero__inner{padding:140px 0} }
.hero__label{font-size:.83em;letter-spacing:.14em;color:var(--gold-pale);margin-bottom:1.6em}
.hero__title{font-size:clamp(31px, 7.4vw, 60px);line-height:1.34;color:#fff;margin-bottom:.6em;letter-spacing:.015em}
.hero__title .mask{display:block;overflow:hidden;padding-bottom:.06em}
.hero__sub{max-width:34em;font-size:1em;color:rgba(255,255,255,.92);margin-bottom:1.8em}
.hero__sub b{color:#fff;border-bottom:1px solid var(--gold)}
.hero__badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2em;max-width:36em}
.hero__badges li{
  font-size:.79em;letter-spacing:.02em;padding:7px 13px;border:1px solid rgba(255,255,255,.4);
  border-radius:999px;color:#fff;background:rgba(255,255,255,.06)
}
.hero__cta{max-width:32em}
.hero__note{font-size:.78em;color:rgba(255,255,255,.72);margin:1em 0 0;line-height:1.75}
.hero__person{
  position:relative;z-index:2;margin:0;display:flex;align-items:center;gap:12px;
  width:min(100% - var(--pad)*2, var(--wrap));margin-inline:auto;padding:0 0 118px;color:#fff;
}
.hero__person img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:1px solid rgba(255,255,255,.35)}
.hero__person figcaption{font-size:.78em;line-height:1.6}
.hero__person span{display:block;color:rgba(255,255,255,.7);font-size:.92em}
@media (max-width:899px){
  .hero__person{padding-right:104px} /* 追従CTAと重ねない */
}
@media (max-width:420px){
  .btn--lg{font-size:.95em;padding:18px 20px}
  .btn--xl{font-size:.98em;padding:20px 22px}
}
@media (min-width:900px){
  .hero__person{position:absolute;right:calc(var(--pad) + 8px);bottom:44px;padding:0;width:auto;margin:0}
}

/* ---------- S2 checklist ---------- */
.checklist{display:grid;gap:12px;margin-bottom:2em}
.checklist__btn{
  display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:17px 18px;
  transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease;
}
.checklist__btn:hover{border-color:var(--navy)}
.checklist__box{
  flex:none;width:26px;height:26px;border:1.5px solid var(--line);border-radius:6px;display:grid;place-items:center;
  transition:background-color .3s ease,border-color .3s ease;
}
.checklist__box svg{width:16px;height:16px;color:#fff;opacity:0;transition:opacity .2s ease}
.checklist__btn[aria-pressed="true"]{border-color:var(--navy);background:var(--navy-pale)}
.checklist__btn[aria-pressed="true"] .checklist__box{background:var(--navy);border-color:var(--navy)}
.checklist__btn[aria-pressed="true"] .checklist__box svg{opacity:1}
.checklist__text{line-height:1.7}
.checklist__judge{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r);padding:20px 22px;margin:0;
}

/* ---------- S3 who ---------- */
.who{display:grid;gap:36px}
@media (min-width:900px){ .who{grid-template-columns:1fr .62fr;gap:56px;align-items:start} }
.who__text{margin-bottom:.9em}
.who__fig{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5}
.who__fig img{width:100%;height:120%;object-fit:cover;object-position:50% 30%}
.facts{display:grid;gap:18px;margin-top:2.4em}
@media (min-width:600px){ .facts{grid-template-columns:repeat(3,1fr)} }
.facts li{border-top:2px solid var(--navy);padding-top:14px}
.facts__num{display:block;font-family:var(--ff-num);font-weight:700;font-size:clamp(24px,4.4vw,30px);color:var(--navy);letter-spacing:-.01em}
.facts__num--sm{font-family:var(--ff-head);font-size:clamp(17px,2.6vw,20px)}
.facts__label{display:block;font-size:.83em;color:var(--ink-sub);margin-top:6px;line-height:1.7}

/* ---------- pillars ---------- */
.pillar__no{display:flex;align-items:center;gap:12px;margin-bottom:1em}
.pillar__no img{width:48px;height:48px}
.pillar__no span{font-family:var(--ff-head);font-weight:700;color:var(--gold);letter-spacing:.14em;font-size:.95em}

/* ---------- S4 split ---------- */
.split{display:grid;gap:18px;margin-bottom:3em}
@media (min-width:768px){ .split{grid-template-columns:.85fr 1.15fr;gap:24px} }
.split__col{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.split__col--us{border-color:var(--navy);box-shadow:0 10px 30px rgba(18,36,61,.06)}
.split__head{font-size:1.02em;color:var(--navy);margin-bottom:1em;padding-bottom:.7em;border-bottom:1px solid var(--line)}
.split__col--us .split__head{color:var(--navy);border-color:var(--navy)}
.split__list li{position:relative;padding-left:24px;margin-bottom:.9em;line-height:1.8;font-size:.97em}
.split__list li::before{content:"";position:absolute;left:4px;top:.72em;width:10px;height:2px;background:var(--gold)}
.split__col--us .split__list li::before{background:var(--navy)}

.linesend{display:grid;gap:22px;align-items:center}
@media (min-width:768px){ .linesend{grid-template-columns:1fr 1fr;gap:32px} }
.linesend__photo{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:16/11}
.linesend__photo img{width:100%;height:120%;object-fit:cover}
.chat{background:#7A9AB8;border-radius:var(--r);padding:18px 16px 22px;font-size:.9em}
.chat__day{text-align:center;font-size:.78em;color:#fff;background:rgba(0,0,0,.18);border-radius:999px;padding:3px 12px;width:fit-content;margin:0 auto 14px}
.chat__row{display:flex;margin-bottom:10px}
.chat__row--me{justify-content:flex-end}
.chat__bubble{
  max-width:78%;background:#fff;border-radius:14px;padding:11px 14px;line-height:1.7;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.chat__bubble--me{background:#8DE055}
.chat__photo{display:block;height:78px;border-radius:8px;margin-bottom:8px;background:
  repeating-linear-gradient(180deg,#fff 0 6px,#EFEFE9 6px 12px),#EFEFE9;border:1px solid #DCDCD4}

/* ---------- S5 tiles / report ---------- */
.tiles{display:grid;gap:12px;margin-bottom:3em}
@media (min-width:768px){ .tiles{grid-template-columns:repeat(2,1fr);gap:14px} }
.tiles li{
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r);padding:17px 20px;font-size:.97em;line-height:1.8;
}
.sec--paper .tiles li{background:var(--white)}
.report{margin:0}
.report__cap{font-size:.83em;color:var(--ink-sub);margin-bottom:10px}
.report__sheet{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,3.6vw,30px);box-shadow:0 18px 40px rgba(18,36,61,.07)}
.report__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px solid var(--navy);padding-bottom:12px;margin-bottom:20px;flex-wrap:wrap}
.report__title{font-family:var(--ff-head);font-weight:700;color:var(--navy);font-size:1.05em;margin:0}
.report__meta{font-size:.82em;color:var(--ink-sub);margin:0}
.report__grid{display:grid;gap:14px;margin-bottom:22px}
@media (min-width:600px){ .report__grid{grid-template-columns:repeat(4,1fr)} }
.report__kpi{border:1px solid var(--line);border-radius:8px;padding:13px 14px;background:var(--paper)}
.report__k{display:block;font-size:.76em;color:var(--ink-sub)}
.report__v{display:block;font-family:var(--ff-num);font-weight:700;font-size:clamp(17px,2.6vw,20px);color:var(--navy);letter-spacing:-.01em}
.report__v i{font-style:normal;font-size:.62em;margin-left:2px;font-family:var(--ff-body)}
.report__d{display:block;font-size:.72em;color:var(--ink-sub);margin-top:3px}
.report__d--up{color:#1B7A4B}
.report__bars{display:flex;align-items:flex-end;gap:8px;height:96px;padding:0 2px 0;margin-bottom:22px;border-bottom:1px solid var(--line)}
.report__bars span{flex:1;height:var(--h);background:linear-gradient(180deg,#26456E,#12243D);border-radius:3px 3px 0 0;opacity:.9}
.report__notes li{position:relative;padding-left:0;font-size:.92em;line-height:1.8;padding-bottom:12px;margin-bottom:12px;border-bottom:1px dashed var(--line)}
.report__notes li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.report__notes b{color:var(--gold);margin-right:.6em}

/* ---------- S6 voice ---------- */
.voices{display:grid;gap:18px}
@media (min-width:768px){ .voices{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} }
.voice{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px}
.voice__illust{width:92px;height:92px;margin-bottom:14px;opacity:.9}
.voice__quote{margin:0 0 14px;font-family:var(--ff-head);font-size:clamp(17px,2.9vw,21px);line-height:1.8;color:var(--navy)}
.voice__quote b{background:linear-gradient(transparent 66%, var(--gold-pale) 66%)}
.voice__who{font-size:.84em;color:var(--ink-sub)}
.disclose{font-size:.86em;color:var(--ink-sub);margin-top:1.6em;line-height:1.85}

/* ---------- S7 protect ---------- */
.protect{display:grid;gap:16px;counter-reset:p}
@media (min-width:768px){ .protect{grid-template-columns:repeat(3,1fr);gap:20px} }
.protect li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;counter-increment:p}
.protect li::before{content:counter(p,decimal-leading-zero);font-family:var(--ff-num);font-weight:700;color:var(--gold);font-size:1.5em;display:block;margin-bottom:.3em}
.protect h3{font-size:1.02em;color:var(--navy);margin-bottom:.6em}
.protect p{font-size:.93em;margin:0;line-height:1.85}
.stat{margin-top:2.2em;font-size:.97em;color:var(--ink)}
.stat b{font-family:var(--ff-num);font-size:1.5em;color:var(--navy);margin:0 .12em;letter-spacing:-.01em}

/* ---------- S8 flow(mechanism) ---------- */
.flow{display:grid;gap:18px}
.flow__row{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 24px}
.flow__label{font-size:.85em;letter-spacing:.06em;color:var(--ink-sub);margin:0 0 14px}
.flow__label--us{color:var(--navy);font-weight:700}
.flow__steps{display:flex;flex-wrap:wrap;gap:10px 8px;align-items:stretch}
.flow__steps li{
  flex:1 1 150px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:13px 14px;
  font-size:.9em;line-height:1.7;position:relative;
}
.flow__steps--new li{background:var(--navy);color:#fff;border-color:var(--navy)}
.flow__steps--new li b{color:var(--gold-pale)}

/* ---------- S9 simulator ---------- */
.sim{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,4vw,34px)}
.sec--paper .sim{background:var(--white)}
.sim__q{margin-bottom:26px}
.sim__label{display:block;font-weight:700;color:var(--navy);margin-bottom:10px;font-size:.97em}
.sim__control{display:flex;align-items:center;gap:16px}
.sim__control--num input{
  width:190px;font-family:var(--ff-num);font-size:1.15em;padding:12px 14px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);
}
.sim__unit{color:var(--ink-sub)}
.sim input[type=range]{flex:1;accent-color:var(--gold);height:44px;cursor:pointer}
.sim__out{font-family:var(--ff-num);font-weight:700;color:var(--navy);min-width:72px;text-align:right;font-size:1.08em}
.sim__result{border-top:2px solid var(--navy);margin-top:30px;padding-top:24px}
.sim__resultLabel{font-size:.9em;color:var(--ink-sub);margin-bottom:.2em}
.sim__amount{display:flex;align-items:baseline;gap:4px;margin:0 0 .8em;color:var(--navy)}
.sim__amount .mask{display:inline-block;overflow:hidden}
.sim__amount span[data-sim-amount]{display:inline-block;font-family:var(--ff-num);font-weight:700;font-size:clamp(34px,8.4vw,60px);line-height:1.2;letter-spacing:-.02em}
.sim__amount i{font-style:normal;font-family:var(--ff-head);font-size:1.1em}
.sim__break li{font-size:.92em;color:var(--ink);margin-bottom:.4em}
.sim__break b{font-family:var(--ff-num);color:var(--navy)}
.sim__foot{font-size:.83em;color:var(--ink-sub);margin:1.2em 0 0}

/* ---------- S10 compare table ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.ctable{min-width:860px;font-size:.88em}
.ctable th,.ctable td{border-bottom:1px solid var(--line);padding:14px 12px;vertical-align:top;text-align:left}
.ctable thead th{background:var(--navy-pale);color:var(--navy);font-weight:700;white-space:nowrap;font-size:.95em}
.ctable thead th.is-us{background:var(--navy);color:#fff}
.ctable tbody th{width:200px;color:var(--navy);font-weight:700}
.ctable tbody th span{display:block;font-weight:400;font-size:.86em;color:var(--ink-sub);margin-top:3px}
.ctable td.is-us{background:rgba(192,138,46,.07)}
.ctable i{font-style:normal;display:inline-block;margin-right:.4em;font-weight:700}
.ctable i.o{color:#1B7A4B}
.ctable i.t{color:var(--gold)}
.ctable i.x{color:#B03B3B}
.ctable__cost{font-size:.94em}
.ctable__cost th,.ctable__cost td{color:var(--ink-sub);font-size:.96em;border-bottom:0}
.ctable__cost td.is-us{color:var(--navy);font-weight:700}

/* ---------- S11 plans ---------- */
.price__lead{font-family:var(--ff-head);font-size:clamp(18px,3.2vw,23px);color:var(--navy);margin-bottom:1.6em}
.plans{display:grid;gap:22px;margin-bottom:2em}
@media (min-width:900px){ .plans{grid-template-columns:.92fr 1.08fr;gap:26px;align-items:start} }
.plan{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,4vw,34px);position:relative;
}
.sec--paper .plan{background:#fff}
.plan--main{background:#fff;border:2px solid var(--navy);box-shadow:0 20px 50px rgba(18,36,61,.1)}
.plan__tag{font-family:var(--ff-label);letter-spacing:.2em;color:var(--ink-sub);font-size:.82em;margin-bottom:.6em}
.plan__badge{position:relative;display:inline-block;margin-bottom:.7em;padding:4px 16px}
.plan__badge span{position:relative;z-index:1;font-weight:700;color:var(--gold);font-size:.86em;letter-spacing:.06em}
.plan__ring{position:absolute;inset:-6px -2px;width:calc(100% + 4px);height:calc(100% + 12px);overflow:visible}
.plan__ring ellipse{fill:none;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke}
.plan__name{font-family:var(--ff-label);font-size:clamp(26px,4.6vw,34px);color:var(--navy);letter-spacing:.02em;margin-bottom:.35em}
.plan__for{font-family:var(--ff-head);color:var(--navy);font-size:1.02em;line-height:1.7;margin-bottom:1em}
.plan__price{display:flex;align-items:baseline;gap:4px;margin:0 0 .2em;color:var(--navy)}
.plan__price .mask{display:inline-block;overflow:hidden}
.plan__num{display:inline-block;font-family:var(--ff-num);font-weight:700;font-size:clamp(32px,6.6vw,46px);letter-spacing:-.02em;line-height:1.2}
.plan__price i{font-style:normal;font-size:.95em;font-family:var(--ff-body);font-weight:700}
.plan__year{font-size:.86em;color:var(--ink-sub);margin-bottom:1.3em}
.plan__desc{font-size:.95em;margin-bottom:1.2em}
.plan__list{margin-bottom:1.8em}
.plan__list li{position:relative;padding-left:26px;margin-bottom:.7em;font-size:.94em;line-height:1.75}
.plan__list li::before{
  content:"";position:absolute;left:2px;top:.55em;width:14px;height:8px;border-left:2px solid var(--gold);
  border-bottom:2px solid var(--gold);transform:rotate(-45deg);
}
.plan .btn{width:100%}
.plan__guideNote{background:var(--navy-pale);border-radius:var(--r);padding:20px 22px;font-size:.95em;margin-bottom:1.4em}
.plan__guideNote small{display:block;margin-top:.6em;font-size:.85em;color:var(--ink-sub)}
.pricevary{font-size:.95em;border-left:3px solid var(--gold);padding-left:16px;color:var(--ink)}
.gtable{font-size:.95em}
.gtable td{border-bottom:1px solid var(--line);padding:15px 16px}
.gtable tr:last-child td{border-bottom:0}
.gtable__plan{width:130px;text-align:center;font-family:var(--ff-label);font-size:1.12em;color:var(--navy);font-weight:600;white-space:nowrap}
.gtable__plan--main{background:var(--navy);color:#fff}
.detail{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-top:1.6em;overflow:hidden}
.detail > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;font-weight:700;color:var(--navy);transition:background-color .3s ease;
}
.detail > summary::-webkit-details-marker{display:none}
.detail > summary:hover{background:var(--navy-pale)}
.detail > summary svg{width:20px;height:20px;flex:none;transition:transform .3s ease}
.detail[open] > summary svg{transform:rotate(45deg)}
.detail .tablewrap{border:0;border-top:1px solid var(--line);border-radius:0}
.ptable{font-size:.93em;min-width:520px}
.ptable th,.ptable td{border-bottom:1px solid var(--line);padding:13px 14px;text-align:left}
.ptable thead th{background:var(--navy-pale);color:var(--navy)}
.ptable tbody th{color:var(--navy);font-weight:500;width:auto}
.ptable td{text-align:center;width:160px}

/* ---------- S12 excluded ---------- */
.exclude > div{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:12px}
.exclude dt{font-weight:700;color:var(--navy);margin-bottom:.4em;line-height:1.7}
.exclude dd{margin:0;font-size:.94em;color:var(--ink);line-height:1.8}

/* ---------- S13 steps ---------- */
.steps{display:grid;gap:16px;counter-reset:s}
@media (min-width:768px){ .steps{grid-template-columns:repeat(4,1fr);gap:18px} }
.steps li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px}
.sec--paper .steps li{background:#fff}
.steps img{width:46px;height:46px;margin-bottom:12px}
.steps h3{font-size:1em;color:var(--navy);margin-bottom:.6em;line-height:1.6}
.steps h3 span{display:block;font-family:var(--ff-label);font-size:.82em;letter-spacing:.16em;color:var(--gold);margin-bottom:.3em}
.steps p{font-size:.91em;margin:0;line-height:1.8}

/* ---------- S14 timing ---------- */
.timing{counter-reset:t;display:grid;gap:14px}
.timing li{
  counter-increment:t;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px 22px 62px;position:relative;line-height:1.85;font-size:.97em;
}
.timing li::before{
  content:counter(t);position:absolute;left:22px;top:20px;font-family:var(--ff-num);font-weight:700;
  color:var(--gold);font-size:1.3em;
}

/* ---------- S15 faq ---------- */
.faq details{border-bottom:1px solid var(--line);background:transparent}
.faq summary{
  list-style:none;cursor:pointer;display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  padding:20px 2px;font-weight:700;color:var(--navy);line-height:1.7;transition:color .3s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary svg{width:20px;height:20px;flex:none;margin-top:.25em;transition:transform .3s ease}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq p{margin:0;padding:0 2px 22px;font-size:.96em;line-height:1.9;color:var(--ink)}

/* ---------- S16 message ---------- */
.message{display:grid;gap:30px}
@media (min-width:900px){ .message{grid-template-columns:.75fr 1.25fr;gap:52px;align-items:start} }
.message__fig{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4}
.message__fig img{width:100%;height:120%;object-fit:cover;object-position:50% 25%}
.message__body p{font-size:1em;line-height:1.95}
.message__sign{font-family:var(--ff-head);color:var(--navy);margin-top:1.6em}

/* ---------- S17 final ---------- */
.final{background:var(--navy-deep);color:#fff;padding:var(--sec-pad) 0;text-align:center}
.final__title{font-size:clamp(22px,4.4vw,32px);color:#fff;margin-bottom:1em}
.final__title b{background:linear-gradient(transparent 70%, rgba(192,138,46,.55) 70%)}
.final__text{color:rgba(255,255,255,.88);margin-bottom:.6em}
.final__text b{color:#fff}
.final .btn{margin-top:1.6em}
.final__note{font-size:.84em;color:rgba(255,255,255,.7);margin-top:1.4em;line-height:1.8}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:rgba(255,255,255,.86);padding:52px 0 96px;text-align:center;font-size:.88em}
.foot__name{font-family:var(--ff-head);font-size:1.12em;color:#fff;margin-bottom:.6em}
.foot__meta{margin:0 0 .3em;color:rgba(255,255,255,.72)}
.foot__copy{margin:1.4em 0 .6em;font-size:.86em;color:rgba(255,255,255,.55)}
.foot__privacy{font-size:9px;line-height:1.8;color:rgba(255,255,255,.6);margin:0}

/* ---------- sticky CTA (FX-06) ---------- */
.fab{
  position:fixed;right:16px;bottom:16px;z-index:50;display:grid;place-items:center;text-align:center;
  width:96px;height:96px;border-radius:50%;background:var(--gold);color:#fff;text-decoration:none;
  box-shadow:0 12px 28px rgba(18,36,61,.3);line-height:1.35;
  transition:opacity .3s ease,transform .3s ease,background-color .3s ease,visibility .3s ease;
}
.fab__text{font-size:.86em;font-weight:700}
.fab small{display:block;font-size:.72em;font-weight:500;opacity:.9;margin-top:2px}
.fab:hover{background:#A97722;transform:translateY(-2px)}
@media (min-width:768px){ .fab{right:26px;bottom:26px;width:112px;height:112px} }

/* ---------- STEP 8 追加演出 ---------- */
/* FV テロップ「あとは、こちらで。」 */
.hero__telop{
  position:absolute;z-index:2;right:max(var(--pad), calc((100% - var(--wrap))/2));bottom:26%;
  margin:0;font-family:var(--ff-head);font-weight:700;color:#fff;
  font-size:clamp(17px,2.2vw,24px);letter-spacing:.08em;text-shadow:0 2px 18px rgba(10,23,40,.6);
  opacity:0;pointer-events:none;
}
@media (max-width:767px){ .hero__telop{bottom:auto;top:14px;right:var(--pad);font-size:15px} }

/* 2列図：あなた → こちら の矢印（罫線の伸長の応用） */
.split{position:relative}
.rule--arrow{position:relative;height:2px;background:var(--gold);margin:0;align-self:center;justify-self:center}
.rule--arrow.is-drawn{width:min(100%, 220px);opacity:1}
.rule--arrow::after{
  content:"";position:absolute;right:-1px;top:50%;width:10px;height:10px;
  border-top:2px solid var(--gold);border-right:2px solid var(--gold);transform:translateY(-50%) rotate(45deg);
  opacity:0;transition:opacity .3s ease .5s;
}
.rule--arrow.is-drawn::after{opacity:1}
@media (max-width:767px){
  .rule--arrow{order:1;margin:2px auto 2px;transform:rotate(90deg);width:0}
  .rule--arrow.is-drawn{width:44px}
}
@media (min-width:768px){
  .split{grid-template-columns:.85fr 44px 1.15fr}
  .rule--arrow{grid-column:2;grid-row:1;width:0}
  .rule--arrow.is-drawn{width:36px}
  .split__col--you{grid-column:1}
  .split__col--us{grid-column:3}
}

/* 比較表：当事務所列のスイープ強調（上から順に1行ずつ） */
.ctable.is-sweep .is-us{animation:usSweep .55s cubic-bezier(0.445,0.05,0.55,0.95) both;animation-delay:calc(var(--r,0) * .09s)}
@keyframes usSweep{
  0%{background:rgba(192,138,46,.07)}
  38%{background:rgba(192,138,46,.42)}
  100%{background:rgba(192,138,46,.07)}
}
.ctable.is-sweep thead th.is-us{animation-name:usSweepHead}
@keyframes usSweepHead{
  0%{background:var(--navy)}
  38%{background:#1C3554}
  100%{background:var(--navy)}
}
@media (prefers-reduced-motion: reduce){
  .hero__telop{opacity:1 !important}
  .ctable.is-sweep .is-us{animation:none !important}
  .rule--arrow.is-drawn{width:min(100%,220px)}
}