/* ⑤ v3：本文と図の意味を保持した表示設定 */
:root{--paper:#fffefa;--main-bg:#edf7fa;--main-pop:#a7ddf0;--main:#1e6a8a;--main-deep:#16536d;--ink:#22323a;--sub:#45545c;--line:#cedce0}
body{overflow-x:visible;line-height:1.9;font-kerning:normal;line-break:strict}
main{overflow:clip}
.wrap{max-width:1160px;padding-inline:32px}
h1,h2,h3{letter-spacing:.01em;text-wrap:pretty}
h2{font-size:40px;line-height:1.45;margin-bottom:28px;max-width:25em}
section{padding-block:80px}
section>.wrap>.label{background:transparent;border-radius:0;padding:0 0 0 12px;border-left:3px solid #a5bbc4;color:var(--sub);letter-spacing:.06em;margin-bottom:18px}
.pl{max-width:47em;line-height:1.95;text-wrap:pretty}
.nb{white-space:nowrap}
.hero{border-radius:0;padding-bottom:56px;background:#edf8fb;border-bottom:1px solid var(--line)}
.hero .dot{display:none}
.pr{padding:18px 0 14px;font-size:13px;line-height:1.8;max-width:920px}
.pr b{border-radius:2px;padding:0 8px}
.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:40px;row-gap:0;align-items:start}
.hero-copy{display:contents}
.hero-copy>.eyebrow,.hero-copy>h1,.hero-copy>.lead,.hero-copy>.cta,.hero-copy>.cond{grid-column:1}
.eyebrow{justify-self:start;margin-top:12px;padding:5px 13px;background:#fff;border:1px solid #bad9e5;border-radius:6px;font-size:14px;color:var(--sub)}
h1{font-size:54px;line-height:1.25;margin:22px 0;letter-spacing:.01em}
.lead{font-size:17px;line-height:1.95;text-wrap:pretty}
.hero-art{grid-column:2;grid-row:1/5;align-self:center;min-width:0;padding:28px 12px 16px;margin-block:24px;background:#dceff5;border-radius:240px 240px 20px 20px}
.hero-art>svg{max-width:490px;margin-inline:auto}
.cap{font-size:13px;line-height:1.8;color:var(--sub);text-align:left;margin:10px 0 16px}
.hero-art>.cap{position:relative;margin:8px 12px 0;padding-top:8px;border-top:1px solid #b2d5e0}
.cta{background:var(--main);border:2px solid var(--main-deep);border-radius:14px;box-shadow:0 5px 0 var(--main-deep);padding:18px 24px;max-width:440px;font-size:19px;min-height:70px;letter-spacing:0;white-space:nowrap}
.hero-copy>.cta{justify-self:start;width:100%;margin-top:26px}
.cta:hover{background:var(--main-deep);box-shadow:0 3px 0 var(--main-deep)}
.cta:focus-visible,.cond a:focus-visible{outline:3px solid #9a3f28;outline-offset:6px}
.cond{font-size:16px;line-height:1.9;margin-top:22px;color:var(--ink)}
.cond .price{font-family:inherit;font-size:16px;color:var(--ink)}
.cond .ln+.ln{margin-top:8px}
.cond .phrase{white-space:normal}
.cond a{margin-top:5px;text-underline-offset:5px}
.hero-copy>.cond{grid-column:1/-1;max-width:none;background:var(--paper);padding:20px 24px 12px;border:1px solid #b9d8e4;border-left:3px solid #9dbac5;border-radius:0;margin-top:24px}
.ba{grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);gap:12px;align-items:start}
.ba-card{border-radius:16px;padding:28px;box-shadow:none!important}
.ba-card.before{background:#f0f2f1;border:1px solid #d7deda}
.ba-card.after{background:#edf8fb;border:1px solid #aacbd6}
.ba-tag{border-radius:0;padding:0 0 10px;background:transparent!important;font-size:21px;line-height:1.6;display:block;border-bottom:1px solid #bfced2;margin-bottom:18px}
.before .ba-tag,.after .ba-tag{color:var(--ink)}
.ba-card>svg{max-height:245px;object-fit:contain}
.ba-card>.cap{min-height:3.6em;margin-bottom:18px}
.ba-arrow{align-self:start;margin-top:200px}
.checks,.ticks{gap:0}
.checks li,.ticks li{background:transparent;border-radius:0;padding:18px 0;border-top:1px solid #cbdde2;align-items:flex-start;line-height:1.9}
.checks li::before{margin-top:10px;background:#67777e;flex-basis:7px;height:7px}
.ticks li::before{margin-top:3px;flex-basis:23px;height:23px;background-color:var(--ink)}
.checks li>span,.ticks li>div{min-width:0;text-wrap:pretty}
.ticks .sub{margin-top:10px;color:var(--sub);font-size:16px;line-height:1.85}
.ba-note{max-width:52em;font-size:16px;line-height:1.9;margin-top:20px;text-wrap:pretty}
/* 比較の面は見出しと主役コースに結び、補助コースは水平に整列 */
section:nth-of-type(2){padding-top:64px!important;background:#f1f7f8;border-block:1px solid #d8e4e7}
section:nth-of-type(2)>.wrap{position:relative}
section:nth-of-type(2)>.wrap>h2{padding-bottom:22px;border-bottom:1px solid #bdcfd5;max-width:none}
.courses{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:32px 0 28px;border:0;align-items:stretch}
.courses li{min-width:0;border:0;border-top:2px solid #bdcfd5;border-radius:0;padding:24px;background:#fff;display:flex;flex-direction:column}
.courses li.main{grid-column:1/-1;background:#e1eff3;border:1px solid #b4cdd6;border-top:4px solid #99b6c3;border-radius:16px 16px 0 0;padding:28px 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:36px;align-content:start}
.courses .nm{font-size:23px;line-height:1.5;color:var(--ink);min-height:35px}
.courses li.main .nm{font-size:28px;grid-column:1;align-self:end}
.courses .cn{font-size:16px;line-height:1.8;margin-top:12px;color:var(--sub)}
.courses li.main .cn{grid-column:1;align-self:start}
.courses dl{grid-template-columns:8em minmax(0,1fr);grid-template-rows:auto minmax(6em,auto) auto auto auto;gap:10px 14px;font-size:16px;line-height:1.8;margin-top:20px}
.courses li.main dl{grid-column:2;grid-row:1/3;grid-template-columns:8em minmax(0,1fr);grid-template-rows:none;gap:12px 16px;margin:0;max-width:none}
.courses dt{font-size:16px;font-weight:700;color:var(--sub)}
.courses dd{min-width:0;margin:0}
.courses dd.mo,.courses li.main dd.mo{font-size:26px;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums}
.courses li.main dd.mo{font-size:30px}
.courses dd .nb{white-space:normal}
.courses dd.mo .nb{white-space:nowrap}
/* 端末の帯と説明の縦軸を共有 */
section:nth-of-type(3){padding-top:72px!important;background:#fffefa}
.device-diagram{display:flex;align-items:center;justify-content:center;gap:60px;width:100%;margin:30px 0 0;padding:30px 24px 40px;background:#f1f5f5;border-block:1px solid var(--line)}
.device-diagram>div{position:relative;flex-shrink:0;border:2px solid #45545c;background:#edf8fb;border-radius:5px}
.device-phone{width:28px;height:49px}
.device-computer{width:83px;height:51px}
.device-computer::after{content:"";position:absolute;height:4px;width:96px;bottom:-9px;left:-9px;background:#45545c;border-radius:2px}
.device-tablet{width:70px;height:46px}
.device-diagram i{position:absolute;inset:5px;border:1px solid #c4dce6;background:#fff}
.device-cross,.device-check{position:absolute;right:-18px;bottom:-15px;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid #acbec6;z-index:1}
.device-cross::before,.device-cross::after{content:"";position:absolute;width:13px;height:2px;top:11px;left:5px;background:#9a3f28;transform:rotate(45deg)}
.device-cross::after{transform:rotate(-45deg)}
.device-check::before{content:"";position:absolute;left:7px;top:5px;width:7px;height:11px;border:solid #45545c;border-width:0 3px 3px 0;transform:rotate(45deg)}
.devices{gap:0;margin-top:0;border-top:0}
.devices li{border-radius:0;padding:24px;background:transparent;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:28px;line-height:1.9}
.devices li.key{background:#f1f5f5;border-left:0}
.devices b{font-size:19px;line-height:1.7;color:var(--ink)}
/* 手順は連続する罫線、条件は余白で区切る */
section:nth-of-type(4){padding-top:64px!important;background:#f1f7f8;border-top:1px solid #d8e4e7}
.steps.three{margin-top:32px;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.step,.step.free{background:transparent;border:0;border-top:2px solid #afc6cf;border-radius:0;padding:28px 24px 24px 0}
.step+.step{padding-left:24px;border-left:1px solid #cedce0}
.step .no{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);border:1px solid #9bafb8;margin-bottom:18px}
.step h3{font-size:22px;line-height:1.6;margin-bottom:14px}
.step p{line-height:1.95;color:var(--sub)}
.final{margin-top:36px}
.final.mid{margin-top:40px;background:#fffefa;border:0;border-top:1px solid #c0d2d9;padding:32px}
.final .cta{display:flex;margin-inline:auto;width:100%}
.final .cond{width:100%;max-width:760px;margin-inline:auto;padding-inline:0;text-align:left}
.final .cond a{width:100%;display:flex;justify-content:flex-start}
section:nth-of-type(5){padding-top:72px!important;background:#fffefa}
.terms{border:0;border-top:5px solid #a5bdc7;border-radius:0;padding:36px 0 0;box-shadow:none;background:transparent}
.terms>.label{padding:0;background:transparent;border-radius:0;color:var(--sub)}
.terms h2{margin-bottom:18px}
.terms .sum{max-width:47em;margin-bottom:30px;font-size:16px;line-height:1.95;color:var(--sub);text-wrap:pretty}
.trow{grid-template-columns:9em minmax(0,1fr);gap:32px;padding:28px 24px;border-top:1px solid var(--line);font-size:16px;line-height:1.9}
.trow dt{font-family:var(--round);font-size:21px;font-weight:900;line-height:1.6;color:var(--ink)}
.trow dd{min-width:0;font-size:18px;line-height:1.8;color:var(--ink)}
.trow dd>span{font-weight:700}
.trow dd small,.term-detail{display:block;font-size:16px;line-height:1.95;margin-top:16px;color:#3d5059;font-weight:400}
.trow.key{background:#eef5f6;border:0;border-left:3px solid #acbec6;border-radius:0;margin:24px 0;padding:28px 24px 28px 21px}
.trow.key+.trow.key{border-top:0;margin-top:24px}
.trow.key+.trow:not(.key){margin-top:28px}
.trow .term-detail>.d{display:block;font-size:18px;font-weight:700;line-height:1.8;color:var(--ink);margin:28px 0 12px;border:0;padding:0}
.trow .term-detail>.d:first-child{margin-top:0}
.fee-table{display:block;width:100%;background:#fff;color:var(--ink);margin:12px 0 24px;font-size:16px;line-height:1.8;border:1px solid #bdcfd5}
.fee-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.15fr)}
.fee-row+.fee-row{border-top:1px solid #bdcfd5}
.fee-heading,.fee-cell,.fee-wide{display:block;padding:16px 14px;min-width:0;text-align:left}
.fee-heading{font-size:16px;font-weight:700;background:#f2f6f7}
.fee-cell{border-left:1px solid #bdcfd5}
.fee-cell>span:first-child{display:block}
.fee-table .nb{display:block;font-size:16px;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.fee-wide{grid-column:1/-1;font-size:16px}
footer{margin-top:0;background:#223c49;color:#eff7fa;font-size:13px;padding:32px 0 44px;line-height:1.95}
footer p+p{margin-top:14px}
@media(max-width:1099px) and (min-width:860px){.courses dl{grid-template-columns:1fr;grid-template-rows:none;gap:3px}.courses dt{margin-top:12px}.courses dt:first-child{margin-top:0}.courses dd:nth-of-type(2){min-height:6em}.courses li.main{grid-template-columns:1fr}.courses li.main dl{grid-column:1;grid-row:auto;margin-top:24px}}
@media(max-width:859px){
 .wrap{padding-inline:24px}
 .hero{padding-bottom:30px}.pr{font-size:12px;padding:10px 0 4px;line-height:1.7}
 .hero-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
 .hero-copy{display:contents}.eyebrow{order:0;align-self:flex-start;font-size:12px;margin-top:8px;padding:4px 10px}
 h1{order:1;font-size:clamp(34px,8.8vw,52px);line-height:1.24;margin:14px 0 4px}
 .hero-art{order:2;align-self:center;margin:4px auto 12px;padding:6px 12px 4px;width:100%;max-width:340px;border-radius:100px 100px 12px 12px}
 .hero-art>svg{height:128px;max-height:none;width:100%;object-fit:contain}
 .hero-art>.cap{font-size:12px;line-height:1.65;margin:2px 0 0;padding:4px 0 0}
 .lead{order:3;font-size:16px;line-height:1.8}
 .hero-copy>.cta{order:4;align-self:center;margin-top:18px}
 .hero-copy>.cond{order:5;margin-top:12px;padding:16px 14px 8px}
 .cta{font-size:clamp(14px,4vw,18px);padding:17px 12px;gap:7px;min-height:64px;width:100%;max-width:420px}.cta svg{width:19px;height:19px}
 .cond{font-size:16px;line-height:1.8}.cond .ln+.ln{margin-top:10px}
 section{padding-block:56px}h2{font-size:clamp(26px,6.8vw,36px);line-height:1.5;margin-bottom:22px}
 section>.wrap>.label{font-size:13px;margin-bottom:14px}
 .ba{grid-template-columns:1fr;gap:16px}.ba-card{padding:23px 20px}.ba-tag{font-size:19px}
 .ba-arrow{height:30px;margin-top:0;align-self:center}.ba-arrow svg{width:30px}
 .ba-card>svg{max-height:210px}.ba-card>.cap{min-height:0;margin-bottom:20px}.checks li,.ticks li{padding-block:17px}
 section:nth-of-type(2),section:nth-of-type(4){padding-top:48px!important}
 section:nth-of-type(3),section:nth-of-type(5){padding-top:48px!important}
 .courses{grid-template-columns:1fr;gap:24px;margin-top:28px}
 .courses li,.courses li.main{padding:22px 18px;display:flex;flex-direction:column;grid-column:auto}
 .courses .nm{font-size:22px;min-height:0}.courses li.main .nm{font-size:24px}
 .courses .cn{margin-top:8px}
 .courses dl,.courses li.main dl{grid-template-columns:7em minmax(0,1fr);grid-template-rows:none;gap:12px 10px;margin-top:18px}
 .courses dt{font-size:16px}.courses dd.mo,.courses li.main dd.mo{font-size:20px}
 .device-diagram{gap:38px;padding:24px 16px 34px}
 .devices li{display:block;padding:24px 0}.devices b{font-size:18px;margin-bottom:10px;text-wrap:pretty}
 .devices li.key{padding:24px 18px}
 .steps.three{grid-template-columns:1fr;gap:0}
 .step,.step.free,.step+.step{padding:24px 0;border-left:0;border-top:1px solid #b6cad2}
 .step .no{float:left;margin:0 14px 10px 0}.step h3{font-size:21px;min-height:44px;margin-bottom:16px}.step p{clear:both}
 .final.mid{padding:28px 0}.final .cond{padding:0}
 .terms{padding:28px 0 0}.terms .sum{margin-bottom:24px}
 .trow{grid-template-columns:1fr;gap:10px;padding:24px 0}.trow dt{font-size:21px}.trow dd{font-size:18px}
 .trow.key{padding:24px 16px 24px 13px;margin:24px 0}.trow.key+.trow.key{margin-top:24px}
 .trow dd small{font-size:16px;line-height:1.9}
 .fee-row{grid-template-columns:1fr}.fee-heading{padding:12px;font-size:16px}
 .fee-cell{border-left:0;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
 .fee-cell+.fee-cell{border-top:1px solid #e1e9ec}.fee-wide{padding:12px}
 footer{font-size:13px;padding-block:28px 36px}
}
@media(max-width:370px){
 .wrap{padding-inline:18px}.pr{padding-top:8px}.eyebrow{margin-top:6px}h1{margin-top:10px}
 .lead{line-height:1.7}.hero-art{margin-bottom:10px}.hero-art>svg{height:100px}
 .hero-copy>.cond{padding:14px 10px 8px}.ba-card{padding:22px 16px}
 .courses li,.courses li.main{padding:22px 18px}
 .courses dl,.courses li.main dl{grid-template-columns:1fr;row-gap:0;margin-top:18px}
 .courses dt{margin-top:14px}.courses dt:first-child{margin-top:0}.courses dd{margin-top:2px}
 .courses dd.mo,.courses li.main dd.mo{font-size:26px}
 .device-diagram{gap:30px;padding-inline:14px}.device-computer{width:72px}.device-computer::after{width:85px}.device-tablet{width:62px}
 .trow.key{padding-inline:12px 9px}.trow dd{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.cta{transition:none}}

/* v4 — 同じ内容を、入口・比較・確認の異なる紙面に組む。 */
:root{--paper:#fffefa;--main-bg:#eaf7fa;--line:#c8dce1}
body{word-break:normal;overflow-wrap:anywhere;line-break:strict;font-kerning:normal;text-spacing-trim:trim-start;line-height:1.9}
.prose{font-feature-settings:"palt" 1;font-variant-east-asian:proportional-width;text-wrap:pretty}
.nb{white-space:nowrap}
.soft-phrase{white-space:normal}
.phrase{white-space:normal}
h2,h3,.ba-tag,.nm{word-break:keep-all;overflow-wrap:normal}
.wrap{position:relative}
.lead,.pl,.ba-note,.cond,.devices li>span,.trow dd small{line-height:1.9}
.hero{background:#eaf7fa;border-bottom:0;padding-bottom:48px}
.hero-art{background:#d8eff5;border:1px solid #b1d8e5;border-bottom:8px solid #b1d8e5}
.hero-copy>.cond{background:#fffefa;border:0;border-top:1px solid #b9d4de;padding:22px 28px 14px}
.cond .ln+.ln{margin-top:14px}
.cond .condition-key{font-weight:700;color:var(--ink)}
.cond .ln:last-of-type{padding-top:14px;border-top:1px solid #cadce2}
.cond .price{font-family:inherit;font-size:16px;font-weight:700}
.cta{box-shadow:0 5px 0 #16536d;border-radius:12px}

/* 学びの「段」を引用する枠。本文の領域には重ねない。 */
section>.wrap>.label,.terms>.label{display:table;padding:0 0 0 12px;border-left:3px solid #8cabb8;background:transparent;border-radius:0;letter-spacing:.03em;color:#45545c;margin-bottom:16px}
section:nth-of-type(2)>.wrap::before,section:nth-of-type(4)>.wrap::before{
 content:"";position:absolute;right:32px;top:0;width:100px;height:80px;pointer-events:none;
 background:linear-gradient(#d1eaf0,#d1eaf0) 0 48px/34px 32px no-repeat,
 linear-gradient(#bddde7,#bddde7) 33px 25px/34px 55px no-repeat,
 linear-gradient(#a8cfdc,#a8cfdc) 66px 0/34px 80px no-repeat;
 border-bottom:2px solid #a8c4d0;
}
section:nth-of-type(2){background:#f0f8fa;border-block:0;padding-top:64px!important}
section:nth-of-type(2)>.wrap>h2{max-width:calc(100% - 130px);border-bottom:0;padding-bottom:0}
section:nth-of-type(2)>.wrap>.pl{max-width:49em}
.courses{gap:28px;margin-top:32px}
.courses li{padding:28px;background:#fffefa;border-top:2px solid #bdd2da}
.courses li.main{background:#dceff4;border:1px solid #abcbd6;border-top:5px solid #8fb8c7;border-radius:18px 18px 0 0;padding:30px 32px;grid-template-rows:min-content 1fr}
.courses li.main .nm{align-self:start;justify-self:start;text-align:left;margin:0;width:100%}
.courses li.main .cn{align-self:start;justify-self:start;text-align:left}
.courses dd.mo{font-size:28px}
.courses li.main dd.mo{font-size:32px}
.courses dd.mo .nb{white-space:nowrap}
.courses>li:not(.main) .nm{padding-bottom:18px;border-bottom:1px solid #d4e1e6}
.courses dl{margin-top:20px}
.courses li.main dl{margin:0}
.courses dt{font-weight:400;color:#45545c}
.courses dd{line-height:1.9}
.courses dd.mo{line-height:1.5}

/* 端末の図と項目名・説明の軸を合わせ、記号を読み取れる倍率にする。 */
section:nth-of-type(3){background:#fffefa}
.device-diagram{gap:72px;padding:36px 28px 44px;background:#eaf4f6;border:1px solid #c5dce4;border-radius:22px 22px 0 0}
.device-phone{width:36px;height:62px}
.device-computer{width:108px;height:66px}
.device-computer::after{width:125px;left:-11px}
.device-tablet{width:90px;height:59px}
.device-cross,.device-check{width:30px;height:30px;right:-14px;bottom:-16px;border-color:#8eabb6}
.device-cross::before,.device-cross::after{width:15px;left:6px;top:13px}
.device-check::before{left:9px;top:7px}
.devices{border-bottom:1px solid #bcd2db}
.devices li{padding:28px 24px;border-bottom:1px solid #cfdee3;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
.devices li:last-child{border-bottom:0}
.devices li.key{background:#eaf4f6}
.devices b{font-size:18px;line-height:1.7;font-weight:700}
.devices b .location-title{display:block;border-left:3px solid #adcad5;padding-left:12px}
.devices li.key b .location-title{border-left-color:#b68576}
.location-title{display:block}

/* 流れは番号と罫線でつなぎ、説明の直後から次のまとまりへ。 */
section:nth-of-type(4){background:#f0f8fa;border:0}
section:nth-of-type(4)>.wrap>h2{max-width:calc(100% - 130px)}
.steps.three{margin-top:28px;align-items:start}
.step,.step.free,.step+.step{padding-top:24px;padding-bottom:12px}
.step .no{background:#fffefa;border-color:#9cb6c2;margin-bottom:14px}
.step h3{font-size:21px;margin-bottom:12px}
.step p{color:#3d5059;line-height:1.9}
.steps+.pl{margin-top:12px}
.final.mid{margin-top:28px;padding:28px 40px 20px;background:#fffefa;border:1px solid #c1d6de;border-top:4px solid #adcbd7;border-radius:0}
.final.mid .cta{margin-top:0}
.final .cond{max-width:760px}
.final .cond a{margin-bottom:0}

/* 項目名・結論の短い句・説明の三段階。本文を縮めず強調だけを絞る。 */
section:nth-of-type(5){background:#fffefa}
.terms{border-top:5px solid #a5c5d1;padding-top:30px}
.terms>.label{margin-bottom:14px}
.terms .sum{max-width:49em}
.trow{grid-template-columns:9em minmax(0,1fr);padding:26px 24px;gap:32px;line-height:1.9}
.trow dt{font-size:20px;line-height:1.7;font-weight:700}
.trow dt .location-title{border-left:3px solid #b0c9d3;padding-left:12px;word-break:keep-all;overflow-wrap:normal}
.trow dd{font-size:17px;line-height:1.85}
.trow dd>span{font-weight:400}
.trow dd>.soft-phrase{font-weight:400}
.trow dd .conclusion-key{font-weight:700;font-size:18px;line-height:inherit}
.trow dd small,.term-detail{font-size:16px;line-height:1.9;margin-top:14px;color:#3d5059}
.trow.key{background:#eef6f8;border:1px solid #c5dce4;border-left:0;padding:26px 24px;margin:22px 0}
.trow.key dt .location-title{border-left-color:#8eafbe}
.trow.key+.trow:not(.key){margin-top:24px}
.trow .term-detail>.d{font-size:18px;line-height:1.7;font-weight:700;margin:24px 0 12px;padding:0 0 8px;border-bottom:1px solid #b6cdd7}
.fee-table{margin:12px 0 18px}
.fee-heading,.fee-cell,.fee-wide{padding:14px}
.terms+.final{margin-top:28px;border-top:1px solid #c9dce3;padding-top:8px}
footer p{max-width:65em;text-wrap:pretty}

/* 既存の項目名は左列の中だけで追従し、本文・ボタンの上には置かない。 */
@media(min-width:860px){
 .trow dt .location-title,.devices b .location-title{position:sticky;top:24px}
 .trow dt,.devices b{align-self:stretch}
}
@media(max-width:1099px) and (min-width:860px){
 .courses li.main dl{margin-top:24px}
 .courses li.main dd.mo{font-size:30px}
}
@media(max-width:859px){
 .hero{padding-bottom:28px}
 .hero-art{max-width:280px;padding-bottom:6px;border-bottom-width:5px}
 .hero-art>svg{height:148px}
 .hero-copy>.cond{padding:18px 16px 10px}
 .lead{line-height:1.85}
 section:nth-of-type(2)>.wrap::before,section:nth-of-type(4)>.wrap::before{width:48px;height:32px;right:24px;top:0;background:linear-gradient(#c6e3ec,#c6e3ec) 0 22px/16px 10px no-repeat,linear-gradient(#b3d7e3,#b3d7e3) 16px 12px/16px 20px no-repeat,linear-gradient(#9fc4d4,#9fc4d4) 32px 0/16px 32px no-repeat}
 section:nth-of-type(2)>.wrap>h2,section:nth-of-type(4)>.wrap>h2{max-width:none}
 section>.wrap>.label,.terms>.label{font-size:13px;line-height:1.7;max-width:calc(100% - 65px);padding-left:10px}
 h2{font-size:clamp(26px,6.8vw,36px);line-height:1.5}
 .courses li,.courses li.main{padding:24px 20px;align-items:stretch;text-align:left}
 .courses .nm,.courses li.main .nm{align-self:stretch;justify-self:start;text-align:left;width:100%;font-size:23px;line-height:1.5}
 .courses .cn,.courses li.main .cn{align-self:stretch;text-align:left}
 .courses>li:not(.main) .nm{padding-bottom:14px}
 .courses dl,.courses li.main dl{margin-top:20px}
 .courses dd.mo,.courses li.main dd.mo{font-size:22px}
 .courses dt{font-weight:400}
 .device-diagram{gap:32px;padding:28px 18px 36px}
 .device-phone{width:30px;height:51px}.device-computer{width:80px;height:51px}.device-computer::after{width:94px;left:-9px}.device-tablet{width:70px;height:46px}
 .devices li,.devices li.key{padding:24px 16px}
 .devices b{font-size:18px;margin-bottom:12px;font-weight:400;line-height:1.7}
 .devices b .location-title{padding-left:10px;font-weight:700}
 .devices li>span{display:block;padding-left:13px;color:#3d5059}
 .steps.three{margin-top:24px}
 .step,.step.free,.step+.step{padding-block:22px 18px}
 .step:last-child{padding-bottom:10px}
 .step .no{margin-bottom:10px}
 .step h3{font-size:21px;min-height:44px;margin-bottom:14px}
 .steps+.pl{margin-top:10px}
 .final.mid{padding:24px 18px 14px;margin-top:26px;border-top-width:3px}
 .final .cond{margin-top:20px}
 .cond .ln+.ln{margin-top:12px}
 .cond .ln:last-of-type{padding-top:12px}
 .cond .condition-key{font-size:16px}
 .trow{grid-template-columns:1fr;gap:12px;padding:24px 0}
 .trow dt{font-size:20px}
 .trow dt .location-title{padding-left:10px}
 .trow dd{font-size:16px;line-height:1.9}
 .trow dd .conclusion-key{font-size:17px}
 .trow.key{padding:24px 16px;margin-block:22px}
 .trow .term-detail>.d{margin-top:24px}
 .trow dd small{line-height:1.9}
 .fee-heading{padding:12px}
 .fee-cell{padding:10px 12px}
 .fee-wide{padding:12px}
}
@media(max-width:370px){
 section:nth-of-type(2)>.wrap::before,section:nth-of-type(4)>.wrap::before{right:18px}
 .hero-copy>.cond{padding-inline:12px}
 .hero-art{max-width:260px}.hero-art>svg{height:128px}
 .courses li,.courses li.main{padding:22px 18px}
 .courses dl,.courses li.main dl{grid-template-columns:1fr;row-gap:0}
 .courses dd.mo,.courses li.main dd.mo{font-size:27px}
 .device-diagram{gap:28px;padding-inline:16px}
 .device-computer{width:76px}.device-computer::after{width:90px}.device-tablet{width:66px}
 .final.mid{padding-inline:14px}
 .trow.key{padding-inline:14px}
}

/* v5: 固定本文の条件のまとまりと比較軸 */
.keep{white-space:nowrap}
.prose{font-feature-settings:"palt" 1;line-break:strict}
section:nth-of-type(2)>.wrap::before,section:nth-of-type(4)>.wrap::before{content:none}
section:nth-of-type(2)>.wrap>h2,section:nth-of-type(4)>.wrap>h2{position:relative;max-width:none;padding-bottom:22px;padding-right:92px;border-bottom:2px solid #a8c9d7}
section:nth-of-type(2)>.wrap>h2::after,section:nth-of-type(4)>.wrap>h2::after{content:"";position:absolute;right:0;bottom:0;width:72px;height:38px;background:linear-gradient(#cde6ee,#cde6ee) 0 24px/24px 14px no-repeat,linear-gradient(#b8d9e5,#b8d9e5) 24px 12px/24px 26px no-repeat,linear-gradient(#a8c9d7,#a8c9d7) 48px 0/24px 38px no-repeat}
.courses>li:not(.main){border-radius:0;border-inline:0;border-bottom:0;background:transparent;padding-inline:24px}
.trow .term-summary{font-size:18px;line-height:1.85;padding-bottom:16px;border-bottom:1px solid #ccdfe5;color:var(--ink)}
.trow .term-summary .conclusion-key{font-size:inherit;font-weight:700}
.trow dd small,.term-detail{color:#22323a;font-size:16px;line-height:1.9;margin-top:18px}
.trow.key{background:transparent;border:0;border-top:2px solid #8eafbe;padding:30px 24px;margin:28px 0}
.trow.key dt .location-title{border:0;padding:8px 12px;background:#deeff5}
.trow.key .term-summary{border-bottom:0;background:#eef7fa;padding:16px 20px}
.trow.pause{border-top:2px solid #8eafbe;background:transparent;padding-top:30px}
.trow.pause dt .location-title{border:0;background:#deeff5;padding:8px 12px}
.trow.pause .term-summary{background:#eef7fa;border-bottom:0;padding:16px 20px}
.trow .term-detail>.d{margin-top:28px;border-bottom:2px solid #aecbd7;padding-bottom:10px}
.fee-table .nb{font-weight:400}
.fee-unit{white-space:nowrap}
.fee-wide{background:#edf7fa;border-top:1px solid #bdcfd5}
footer p{line-height:1.95}
@media(min-width:860px){
 .hero-copy>.cond{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.5fr);gap:0 24px;align-items:start;padding:24px 28px 12px}
 .hero-copy>.cond .ln{margin:0;padding:0;line-height:1.9;border:0}
 .hero-copy>.cond .ln+.ln{border-left:1px solid #c5dce4;padding-left:24px}
 .hero-copy>.cond>a{grid-column:1/-1;margin-top:12px}
 .hero-copy>.cond .ln:first-child{max-width:17em}
}
@media(max-width:859px){
 section>.wrap>.label,.terms>.label{max-width:none}
 section:nth-of-type(2)>.wrap>h2,section:nth-of-type(4)>.wrap>h2{padding-right:0;padding-bottom:44px}
 section:nth-of-type(2)>.wrap>h2::after,section:nth-of-type(4)>.wrap>h2::after{width:48px;height:26px;background:linear-gradient(#cde6ee,#cde6ee) 0 16px/16px 10px no-repeat,linear-gradient(#b8d9e5,#b8d9e5) 16px 8px/16px 18px no-repeat,linear-gradient(#a8c9d7,#a8c9d7) 32px 0/16px 26px no-repeat}
 .hero-copy>.cond{padding:16px 0 8px;background:transparent}
 .cond .ln+.ln{margin-top:12px}
 .courses>li:not(.main){padding-inline:12px}
 .trow .term-summary{font-size:16px;line-height:1.9;padding-bottom:14px}
 .trow.key{padding:24px 0;margin-block:26px}
 .trow.key dt .location-title,.trow.pause dt .location-title{display:table;padding:5px 12px}
 .trow.key .term-summary,.trow.pause .term-summary{padding:14px 12px}
 .trow dd small,.term-detail{margin-top:16px}
 .fee-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .fee-heading{grid-column:1/-1;padding:10px 12px;background:#deedf3}
 .fee-cell{display:flex;flex-direction:column;gap:6px;padding:12px 8px;border:0}
 .fee-cell+.fee-cell{border-top:0;border-left:1px solid #bdcfd5}
 .fee-cell>span:first-child{min-height:3.8em}
 .fee-table .nb{white-space:normal;font-weight:400;line-height:1.8}
 .fee-unit{display:block}
 .fee-wide{padding:12px 10px}
 footer .nb{white-space:normal}
}

.prose{word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:859px){.fee-cell>span:first-child{min-height:0}.fee-cell>.nb{margin-top:auto}}

.courses dd>span>.nb{white-space:nowrap}

body{word-break:keep-all;overflow-wrap:anywhere}
.devices .location-title{word-break:keep-all;overflow-wrap:normal}

/* v6 — 完成イラストと、節の内容に結び付いた紙面 */
.scene-illustration{display:block;width:100%;height:auto;object-fit:contain;margin-inline:auto}
.hero-art{background:radial-gradient(ellipse at 52% 47%,#fffefa 0 54%,transparent 54.3%),#dceff5;border:0;border-radius:240px 240px 16px 16px;padding:24px 10px 14px;position:relative}
.hero-art>.scene-illustration{max-width:490px;height:auto;max-height:430px}
.hero-art>.cap{margin-inline:14px;background:transparent;border-color:#afccd8}
.ba-card>.scene-illustration{max-width:350px;height:280px;margin-block:4px 18px}
.ba-card.before{background:#f3f3f0}
.ba-card.after{background:#edf8fb}
section:nth-of-type(2)>.wrap>h2::after,section:nth-of-type(4)>.wrap>h2::after{content:none}
section:nth-of-type(2)>.wrap>h2{padding-right:0;padding-bottom:22px}
/* 端末の図は大きな無地の窓に置く。枠は左右の境界に接続する。 */
section:nth-of-type(3){background:#edf7fa}
section:nth-of-type(3)>.wrap{background:#fffefa;padding-top:28px;padding-bottom:0;border-left:6px solid #c8e4ed}
section:nth-of-type(3)>.wrap>h2{max-width:none;margin-right:0;padding:0 0 20px;border-bottom:1px solid #b9d4df}
.device-diagram{position:relative;display:flex;align-items:center;justify-content:center;width:100%;padding:36px 44px 28px;margin-top:30px;border:0;border-radius:0 60px 0 0;background:linear-gradient(90deg,#e1eff4 0 12px,transparent 12px),linear-gradient(0deg,#c0dce7 0 4px,transparent 4px),#f2f8fa;overflow:visible}
.device-diagram>img{display:block;width:100%;max-width:760px;height:auto;position:relative;z-index:1}
.devices li.key{background:#eaf4f7}
/* 手順の番号と連結した水平のフレーム。文章は外側の無地面。 */
section:nth-of-type(4){background:#f3f8f9;border-top:0}
section:nth-of-type(4)>.wrap>h2{border:0;border-left:6px solid #bfdde8;padding:12px 24px;margin-bottom:24px;background:linear-gradient(90deg,#e0eff4,transparent 75%)}
.steps.three{border:1px solid #b7d1dc;border-top:5px solid #9fbfcc;background:#fffefa;position:relative;margin-top:32px;gap:0}
.step,.step.free{border-top:0;padding:26px 24px;background:transparent}
.step+.step{border-left:1px solid #c4d9e2;padding:26px 24px}
.step.free{background:#e8f3f7}
.step .no{background:#fff;color:#1e5269;border:2px solid #a7c9d9;border-radius:12px;width:46px;height:46px;margin-bottom:18px}
.step h3{font-size:21px;line-height:1.6}
.step p{font-size:16px;color:var(--ink)}
.final.mid{background:#fffefa;border-top:0;border-bottom:4px solid #b8d6e3;margin-top:32px;padding:28px 32px}
/* 料金入口は面の端と見出しを合わせ、重要条件の4項目は同じ強さ。 */
section:nth-of-type(5){background:#e2f0f5}
section:nth-of-type(5)>.wrap{background:#fffefa}
.terms{border:0;padding-top:0}
.terms>.label{margin-bottom:0;background:#e5f2f6;padding:18px 24px 0;display:block;max-width:none}
.terms>h2{background:linear-gradient(120deg,#e5f2f6 0 82%,#d6eaf2 82%);max-width:none;padding:8px 24px 24px;margin:0 0 24px;font-size:44px;border-bottom:4px solid #b1d1df}
.terms>.sum{margin-left:0;margin-bottom:32px}
.trow .term-summary{line-height:1.9}
.trow.key .term-summary,.trow.pause .term-summary{background:#edf6f9;border-left:3px solid #aacbd9;padding:18px 22px}
.trow.key dt .location-title,.trow.pause dt .location-title{background:#e0eff5}
.trow .term-summary .conclusion-key{font-weight:700}
.trow small.prose>span+span{display:inline}
.trow small.prose>br+span{display:inline-block;margin-top:14px}
.term-detail>.d{margin-top:30px}
footer{font-size:14px;line-height:2;padding-block:38px 44px}
footer p{line-height:2;max-width:70em}
footer p+p{margin-top:22px;padding-top:18px;border-top:1px solid #4c6672}
.footer-label{font-weight:700;color:#fff;white-space:nowrap}
@media(min-width:860px){
 .hero-art{align-self:center}
 footer p{display:block}
}
@media(max-width:859px){
 .hero-art{max-width:300px;padding:8px 10px 6px;border-radius:120px 120px 12px 12px;margin-block:6px 12px}
 .hero-art>.scene-illustration{height:170px;max-width:260px;width:100%}
 .hero-art>.cap{margin:4px 0 0;font-size:12px}
 .ba-card>.scene-illustration{height:240px;margin-bottom:16px}
 .ba-arrow{margin-block:0}
 section:nth-of-type(2)>.wrap>h2{padding-bottom:20px}
 section:nth-of-type(3)>.wrap{border-left-width:4px;padding-top:22px}
 section:nth-of-type(3)>.wrap>h2{padding-bottom:18px}
 .device-diagram{padding:24px 8px 20px;border-radius:0 36px 0 0;background:linear-gradient(0deg,#c0dce7 0 3px,transparent 3px),#f2f8fa;margin-top:24px}
 section:nth-of-type(4)>.wrap>h2{padding:10px 0 10px 16px;border-left-width:4px}
 .steps.three{border:0;border-left:3px solid #bfd7e1;border-top:0;margin-left:5px;margin-top:28px;background:transparent}
 .step,.step.free,.step+.step{border:0;background:transparent;padding:0 0 26px 22px}
 .step+.step{padding-top:24px;border-top:1px solid #bfd7e1}
 .step .no{float:left;margin:0 12px 12px -40px;background:#fffefa;border-radius:11px;width:40px;height:40px}
 .step h3{font-size:20px;min-height:40px;margin-bottom:16px}
 .step p{clear:both;line-height:1.9}
 .step:last-child{padding-bottom:8px}
 .final.mid{padding:24px 0 20px;border-bottom-width:3px}
 .terms>.label{padding:16px 16px 0}
 .terms>h2{font-size:30px;padding:8px 16px 20px;border-bottom-width:3px;background:linear-gradient(120deg,#e5f2f6 0 88%,#d6eaf2 88%)}
 .terms>.sum{margin-bottom:26px}
 .trow.key .term-summary,.trow.pause .term-summary{padding:14px 13px;border-left-width:3px}
 .trow .term-summary{line-height:1.9}
 footer{font-size:14px;padding-block:30px 36px}
 footer p+p{margin-top:18px;padding-top:16px}
}
@media(max-width:370px){
 .hero-art{max-width:270px}.hero-art>.scene-illustration{height:150px}
 .ba-card>.scene-illustration{height:218px}
 .steps.three{margin-left:4px}
 .step,.step.free,.step+.step{padding-left:19px}
 .step .no{margin-left:-36px}
 .trow.key .term-summary,.trow.pause .term-summary{padding-inline:10px}
}

/* 小さなボタン文字は濁りの少ない書体とウェイトにする。 */
.cta{font-family:"Yu Gothic UI","Meiryo",sans-serif;font-weight:700;font-feature-settings:normal;letter-spacing:.01em}

/* v7: continuous section edges, readable conditions and compact source names. */
section:nth-of-type(3),section:nth-of-type(5){padding-block:0!important}
section:nth-of-type(3)>.wrap,section:nth-of-type(5)>.wrap{
 padding-block:72px;border-left:6px solid #c8e4ed;border-right:1px solid #d6e7ec;background:var(--paper)
}
.device-diagram{border:1px solid #bad5e0;border-left:4px solid #aacbd9;border-bottom:4px solid #aacbd9;border-radius:0;background:#f2f8fa;padding:32px 40px 28px}
.final.mid{padding:32px;border:1px solid #c8dfe7;border-bottom:4px solid #b8d6e3}
.final.mid>.cta{margin-top:0}
.final.mid .cond{padding:0;margin-top:28px}
.trow .term-summary{padding-bottom:20px}
.trow dd small,.term-detail{margin-top:22px}
.detail-sentence{display:block}
.detail-sentence+.detail-sentence{margin-top:.65em}
.trow small.prose>.detail-sentence+.detail-sentence{display:block}
.trow small.prose>.detail-paragraph{display:block}
.trow .term-summary .conclusion-key{font-weight:700}
.prose{word-break:normal;overflow-wrap:break-word}
.prose .keep{white-space:nowrap}
footer .source-name{white-space:nowrap}
footer p{word-break:normal;overflow-wrap:break-word;text-wrap:pretty}
.terms+.final{margin-top:40px;padding-top:32px;border-top:2px solid #bed6e0}
.terms+.final>.cta{margin-top:0}
.terms+.final .cond{margin-top:28px}
@media(max-width:859px){
 section:nth-of-type(3)>.wrap,section:nth-of-type(5)>.wrap{padding-block:48px;border-left-width:4px;border-right:0}
 .device-diagram{padding:24px 8px 20px;border-left-width:3px;border-bottom-width:3px}
 .final.mid{padding:24px 16px 22px;border-bottom-width:3px}
 .final.mid .cond{margin-top:24px}
 .trow .term-summary{padding-bottom:18px}
 .trow dd small,.term-detail{margin-top:20px}
 .terms+.final{padding-top:28px;margin-top:32px}
 .terms+.final .cond{margin-top:26px}
 section:nth-of-type(5)>.wrap{padding-bottom:48px}
}
@media(max-width:370px){.final.mid{padding-inline:12px}.final.mid>.cta{padding-inline:8px}}

footer .nb{white-space:nowrap}