:root{
  --ground:#fdf9f1; --paper:#fff; --navy:#13294b; --navy-pale:#e8edf5; --ink:#1d2530; --ink-2:#3f4856;
  --line:#e2ddd3; --gold:#b08549; --gold-text:#7a5a26; --gold-soft:#f5eedf;
  --accent:#c2531a; --line-green:#06C755; --line-green-deep:#05a648;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;line-height:1.7;-webkit-text-size-adjust:100%}
a{color:inherit}
.wrap{max-width:560px;margin:0 auto;padding:0 0 48px}

/* 表紙 */
.cover{position:relative;container-type:inline-size;margin:0 0 18px;overflow:hidden}
.cover img{display:block;width:100%;height:auto}
.cover__title{position:absolute;left:0;right:0;top:5cqw;text-align:center}
.cover__brand{display:inline-block;font-weight:900;letter-spacing:.14em;color:var(--navy);font-size:4cqw;border-bottom:2px solid var(--gold)}
.cover__title h1{margin-top:2.4cqw;font-size:8.6cqw;line-height:1.3;color:var(--navy);font-weight:900;text-shadow:0 0 3cqw #fff,0 0 1.2cqw #fff}
.cover__sub{margin:-18px 0 18px;padding:12px 16px;background:var(--navy);color:#fff;text-align:center;font-weight:700;font-size:15px}

/* コマ */
.chapter{margin:6px 12px 14px;padding:10px 14px;background:var(--navy);color:#fff;font-weight:700;font-size:15px;line-height:1.5}
.chapter small{display:block;font-size:12px;font-weight:500;color:#d8e0ee}
.panel{position:relative;container-type:inline-size;margin:0 12px 14px;border:3px solid var(--ink);border-radius:4px;background:#fff;overflow:hidden}
.panel img{display:block;width:100%;height:auto}
.say{position:absolute;font-weight:700;line-height:1.5;font-size:5cqw;letter-spacing:.02em;color:var(--ink);background:var(--bubble,#fff);border-radius:7cqw;padding:3.2cqw 5cqw;text-align:center;filter:drop-shadow(0 0 .3cqw rgba(19,41,75,.6)) drop-shadow(0 .9cqw 1.6cqw rgba(29,37,48,.25));transform-origin:50% 120%}
.say::after{content:"";position:absolute;width:4.6cqw;height:4.6cqw;background:var(--bubble,#fff);bottom:-1.9cqw;border-radius:0 0 1.2cqw 0;transform:rotate(45deg) skew(8deg,8deg)}
.say.tail-l{transform-origin:22% 120%}.say.tail-l::after{left:20%}
.say.tail-r{transform-origin:78% 120%}.say.tail-r::after{right:20%}
.say.tail-c::after{left:calc(50% - 2.3cqw)}
/* 話し手：藤原＝やわらかい青、お客様＝やわらかいオレンジ（全ページ共通） */
.say.f{--bubble:#dde9fb}
.say.c{--bubble:#ffe0cc}
.say.shout{font-size:5.4cqw;padding:3.4cqw 5.4cqw;border-radius:6cqw}
.say em{font-style:normal;color:var(--accent);font-size:1.15em}

/* 会話の順にふわっと出る（JSが動くときだけ隠す） */
.js .say{opacity:0;scale:.35;translate:0 3cqw}
.js .panel.in .say{animation:pop .62s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d,.15s)}
.js .panel.in .say.shout{animation:pop .62s cubic-bezier(.34,1.56,.64,1) forwards,wiggle .5s ease-in-out forwards;animation-delay:var(--d,.15s),calc(var(--d,.15s) + .55s)}
@keyframes pop{0%{opacity:0;scale:.35;translate:0 3cqw}55%{opacity:1}100%{opacity:1;scale:1;translate:0 0}}
@keyframes wiggle{0%,100%{rotate:0deg}25%{rotate:-2.5deg}75%{rotate:2.5deg}}
.js .card{opacity:0;translate:0 18px;transition:opacity .6s ease,translate .6s ease}
.js .card.in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.js .say,.js .card{opacity:1;scale:1;translate:0 0;animation:none!important;transition:none}}

/* 図のコマ（料金・相場） */
.card{margin:0 12px 14px;border:3px solid var(--ink);border-radius:4px;background:var(--paper);padding:20px 18px 18px}
.card__label{display:inline-block;font-size:12px;font-weight:700;color:var(--gold-text);background:var(--gold-soft);padding:2px 10px;border-radius:999px}
.card h2{margin-top:8px;font-size:19px;line-height:1.45;color:var(--navy)}
.price{margin-top:10px;display:flex;align-items:baseline;gap:6px;color:var(--navy);font-weight:900}
.price b{font-size:40px;line-height:1;letter-spacing:.01em}
.price span{font-size:15px}
.zero{margin-top:10px;display:inline-block;background:var(--accent);color:#fff;font-weight:900;font-size:15px;padding:4px 12px;border-radius:4px}
.checks{list-style:none;margin-top:14px;display:grid;gap:8px}
.checks li{position:relative;padding-left:26px;font-size:15px}
.checks li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border-left:3px solid var(--navy);border-bottom:3px solid var(--navy);transform:rotate(-45deg)}
.small{margin-top:12px;font-size:12.5px;color:var(--ink-2)}
.compare{margin-top:14px;width:100%;border-collapse:collapse;font-size:14px}
.compare th,.compare td{border:1px solid var(--line);padding:9px 8px;vertical-align:middle;text-align:center}
.compare thead th{font-size:13px;background:#f3f1ec}
.compare thead th.gno{background:var(--navy);color:#fff}
.compare tbody th{background:#faf8f4;font-weight:700;width:26%}
.compare td.gno{color:var(--navy);font-weight:900;background:var(--navy-pale)}

/* 入口の選択 */
.choices{margin:4px 12px 18px;display:grid;gap:10px}
.choice{display:flex;align-items:center;gap:12px;padding:14px 14px;border:2.5px solid var(--navy);border-radius:10px;background:#fff;text-decoration:none;font-weight:700;font-size:15.5px;line-height:1.5;color:var(--navy);box-shadow:0 3px 0 var(--navy)}
.choice:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
.choice b{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-size:16px}
.choice i{margin-left:auto;font-style:normal;font-size:18px}
.choice--sub{border-style:dashed;box-shadow:none;font-size:14.5px}
.choice.soon{border-color:var(--line);color:var(--ink-2);box-shadow:none;background:#faf8f4}
.choice.soon b{background:#9aa3b0}
.choice.soon i{font-size:11px;font-weight:500;white-space:nowrap}
.lead{margin:0 16px 10px;font-size:14px;color:var(--ink-2);text-align:center}

/* 相談 */
.cta{margin:26px 12px 0;text-align:center}
.cta p{font-size:15px;font-weight:700;color:var(--navy)}
.btn-line{display:flex;align-items:center;justify-content:center;margin-top:12px;min-height:60px;border-radius:999px;background:var(--line-green);color:#fff;font-weight:700;font-size:17px;text-decoration:none;box-shadow:0 4px 0 var(--line-green-deep)}
.btn-line:active{transform:translateY(2px);box-shadow:0 2px 0 var(--line-green-deep)}
.btn-next{display:flex;align-items:center;justify-content:center;margin:0 12px;min-height:56px;border-radius:999px;background:var(--navy);color:#fff;font-weight:700;font-size:16px;text-decoration:none}
.btn-next.soon{background:#9aa3b0}
.links{margin-top:18px;display:grid;gap:10px}
.links a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:700;text-decoration:none;color:var(--navy);background:#fff;border:1.5px solid var(--navy)}
.links a::after{content:"›";font-size:18px;line-height:1}
.links a:last-child{color:var(--gold-text);border-color:var(--gold);background:var(--gold-soft)}
.links a:active{opacity:.75}
.sources{margin:36px 16px 0;font-size:11.5px;color:var(--ink-2);line-height:1.6}
.sources a{word-break:break-all}
footer{margin-top:24px;text-align:center;font-size:12px;color:var(--ink-2)}

/* 吹き出しのない、文字だけのコマ（会社の紹介など） */
.narr{position:absolute;left:0;right:0;top:6cqw;text-align:center;padding:0 3cqw}
.narr small{display:inline-block;font-size:3.4cqw;font-weight:700;letter-spacing:.32em;color:var(--gold-text);padding-bottom:1.4cqw;border-bottom:2px solid var(--gold)}
.narr strong{display:block;margin-top:3.6cqw;font-size:6.6cqw;font-weight:900;line-height:1.45;letter-spacing:.04em;color:var(--navy);text-shadow:0 0 2.4cqw #fff,0 0 1cqw #fff,0 0 .4cqw #fff}
.js .narr{opacity:0;translate:0 4cqw}
.js .panel.in .narr{animation:rise .9s ease .2s forwards}
@keyframes rise{to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.js .narr{opacity:1;translate:0 0;animation:none!important}}

/* 章のタイトル（各ページの漫画の上・華やかに） */
.ct{position:relative;margin:16px 12px 18px;padding:28px 20px 26px;text-align:center;color:#fff;border-radius:6px;overflow:hidden;
  background:radial-gradient(90% 70% at 50% -10%,rgba(233,201,143,.35),transparent 70%),radial-gradient(120% 100% at 50% 0%,#28497f 0%,var(--navy) 58%,#0c1c36 100%);box-shadow:0 5px 0 var(--gold)}
.ct::before{content:"";position:absolute;inset:7px;border:1.5px solid rgba(233,201,143,.55);border-radius:3px;pointer-events:none}
.ct::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);animation:shine 1.6s ease .4s 1 forwards;pointer-events:none}
@keyframes shine{to{left:130%}}
.ct__book{font-size:11.5px;letter-spacing:.14em;color:#c9d4e8}
.ct__no{margin-top:10px;display:inline-flex;align-items:center;gap:10px;color:#e9c98f;font-weight:900}
.ct__no::before,.ct__no::after{content:"";width:26px;height:1.5px;background:#e9c98f}
.ct__no span{font-size:12px;letter-spacing:.3em}
.ct__no b{font-size:30px;line-height:1;letter-spacing:.04em}
.ct__title{margin-top:8px;font-size:23px;line-height:1.45;font-weight:900;letter-spacing:.03em;word-break:auto-phrase;text-wrap:balance}
.ct__lead{display:inline-block;margin-top:14px;padding:6px 16px;border-radius:999px;background:#e9c98f;color:#2a1d07;font-weight:700;font-size:13.5px;line-height:1.5;word-break:auto-phrase;text-wrap:balance}
.js .ct__no,.js .ct__title,.js .ct__lead{opacity:0;translate:0 10px;animation:rise .7s ease forwards}
.js .ct__no{animation-delay:.1s}.js .ct__title{animation-delay:.25s}.js .ct__lead{animation-delay:.45s}
@media (prefers-reduced-motion:reduce){.ct::after{display:none}.js .ct__no,.js .ct__title,.js .ct__lead{opacity:1;translate:0 0;animation:none}}

/* 入口：5つのパターン（余白を広く） */
.pick{margin:30px 16px 16px;text-align:center}
.pick__label{display:inline-block;padding:3px 14px;border-radius:999px;background:var(--navy);color:#e9c98f;font-weight:900;font-size:13px;letter-spacing:.12em}
.pick__title{margin-top:10px;font-size:21px;line-height:1.45;color:var(--navy);font-weight:900}
.pick__note{margin-top:6px;font-size:13.5px;color:var(--ink-2)}
.choices{margin:0 14px 24px;gap:16px}
.choice{gap:14px;padding:18px 14px 18px 16px;border-radius:14px;align-items:center}
.choice__no{flex:none;display:grid;place-items:center;align-content:center;width:56px;height:56px;border-radius:12px;background:var(--navy);color:#fff;font-size:22px;font-weight:900;line-height:1}
.choice__no small{font-size:9px;letter-spacing:.18em;color:#e9c98f;margin-bottom:3px}
.choice__body{display:grid;gap:6px}
.choice__body strong{font-size:16px;line-height:1.5;word-break:auto-phrase;text-wrap:pretty}
.choice__body em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--gold-text)}
.choices__sep{margin-top:8px;text-align:center;font-size:12.5px;font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:10px}
.choices__sep::before,.choices__sep::after{content:"";flex:1;height:1px;background:var(--line)}
.choice--sub .choice__no{background:var(--gold)}
.choice--sub .choice__no small{color:#fff}
.ct--next{margin-top:48px}

/* コマの間の「そして…」：1文字ずつ浮かび、…はゆっくり点滅（⑤ 2026-11-04） */
.beat{margin:34px 12px 40px;text-align:center;font-size:30px;font-weight:900;letter-spacing:.24em;color:var(--navy);line-height:1}
.beat span{display:inline-block}
.beat__dots{color:var(--gold)}
.js .beat span{opacity:0;translate:0 .5em}
.js .beat.in span{animation:rise .55s ease forwards;animation-delay:calc(var(--i) * .28s)}
.js .beat.in .beat__dots{animation:rise .55s ease forwards,dots 1.6s ease-in-out 1.6s infinite;animation-delay:calc(var(--i) * .28s),1.6s}
@keyframes dots{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.js .beat span{opacity:1;translate:0 0;animation:none!important}}

/* 05と06の間のLINE相談バナー */
.line-banner{margin:40px 12px 0;padding:22px 18px 18px;text-align:center;background:#fff;border:2px solid var(--line-green);border-radius:16px;box-shadow:0 4px 14px rgba(6,199,85,.12)}
.line-banner__label{display:inline-block;padding:2px 12px;border-radius:999px;background:#e6f9ee;color:#05753a;font-size:12.5px;font-weight:700}
.line-banner__title{margin-top:10px;font-size:19px;line-height:1.5;font-weight:900;color:var(--navy)}
.line-banner .btn-line{margin-top:14px}
.line-banner__note{margin-top:10px;font-size:13px;color:var(--ink-2)}