/* d75: 固定した構成を保った、章の入口・要点・補足の紙面設計 */
body{word-break:normal;line-break:strict;overflow-wrap:anywhere}
p,.reading-unit,.cond .ln{text-wrap:pretty}
.unit{white-space:nowrap}
.title-unit{display:inline-block;white-space:nowrap}
.hero-grid{row-gap:20px}
.hero h1{margin-block:20px}
.hero .cta{margin-top:20px}
.hero .cond{margin-top:22px}
.cond .ln{max-width:46em}
.cond .ln+.ln{margin-top:16px}
.cond .return-obligation{font-weight:700;color:var(--ink)}
.cond .price{font-size:21px;line-height:1.9}
.cond>.ln>.price{white-space:normal;margin-right:0}
.hero-art{margin-top:64px}
.hero-art .cap{margin-top:14px}
.hero-art::before{mask-image:radial-gradient(ellipse 61% 57% at 50% 47%,#000 32%,transparent 80%)}

/* 流れ: 番号、見出し、要点、補足の順をそのままに独立した高さへ */
.process .section-heading::after{inset:0 0 0 48%;background-position:70% 48%;background-size:570px auto;mask-image:radial-gradient(ellipse at 60% 50%,#000 24%,transparent 74%)}
.steps.four{align-items:start;gap:32px}
.step{align-self:start;padding-bottom:28px}
.step .no{margin-bottom:16px;padding-bottom:12px}
.step h3{margin-bottom:20px}
.step .key-text{padding-bottom:22px;border-bottom:1px solid var(--line)}
.step .critical-detail{padding-left:14px;border-left:2px solid #bed9e9}
.step.free{background:#e9f5fc;border-top-color:var(--main)}
.step.free>p{font-weight:400}

/* 公式回答: 水彩の扉から、白地の条件を包む開いたフレームへ */
.answers .section-heading{padding:30px 34px 34px;background:#f3faff;isolation:isolate;border:0;border-left:5px solid #bfdff2;overflow:hidden}
.answers .section-heading::after{content:'';position:absolute;z-index:-1;right:-28px;top:-75px;width:400px;height:300px;background:url('assets/frame-watercolor.webp') 66% 50%/cover;mask-image:radial-gradient(ellipse,#000 24%,transparent 73%)}
.answers .section-heading h2{max-width:23em}
.qa li.main{padding:0;background:white;border:1px solid #b8d8ec;border-top:0;margin:0 0 20px;position:relative}
.qa li.main h3{padding:24px 32px;margin:0;background:#e6f3fc;border-top:4px solid var(--main);font-size:25px}
.qa li.main .a{max-width:none;padding:28px 32px 30px}
.qa li.main .key-text{padding-bottom:22px;border-bottom:1px solid #bdd8e8}
.qa li.main .critical-detail{font-weight:700}
.qa li:not(.main){border-top:0;padding:24px 0 30px}
.qa li:not(.main) h3{border-bottom:2px solid #d7e9f4;padding-bottom:14px;margin-bottom:20px;color:var(--ink)}
.qa li:not(.main) .a{max-width:43em}

/* 値段: 余白のある扉と白い明細。円の線画だけの装飾は置換 */
.purchase{background:#edf7fd}
.purchase .section-heading{padding:30px 34px 32px;margin-bottom:32px;border:0;background:#dfedf8;overflow:hidden}
.purchase .section-heading::after{border:0;border-radius:0;top:-65px;right:-25px;width:410px;height:310px;background:url('assets/frame-watercolor.webp') 70% center/cover no-repeat;mask-image:radial-gradient(ellipse,#000 22%,transparent 72%)}
.purchase .section-heading h2{max-width:23em}
.purchase .pl+.plans{margin-top:30px}
.plans li{border-top:4px solid var(--main);padding:30px 34px}
.plans .name{color:var(--ink);margin-bottom:22px}
.plans dl{margin-top:12px}
.plans dt,.plans dd{padding-block:18px}
.plans dl>dt:nth-of-type(2),.plans dl>dd:nth-of-type(2){background:#f0f8fd}
.plans .nb{white-space:normal}
.plans .yen.nb{white-space:nowrap}
.plans dd{line-break:strict}
.incl{margin-top:32px}

/* 条件: 全幅の扉、項目名の欄、要点の面、常時表示の本文 */
.terms-heading{position:relative;isolation:isolate;padding:30px 0 28px;margin-bottom:32px;background:white;border-bottom:4px solid var(--main);overflow:hidden}
.terms-heading::before{content:'';position:absolute;z-index:-1;right:-45px;top:-50px;width:360px;height:260px;background:url('assets/frame-watercolor.webp') 68% center/cover no-repeat;mask-image:radial-gradient(ellipse,#000 20%,transparent 72%)}
.terms-heading>.label{padding:0}
.terms-heading>h2{border:0;padding:0;margin:0 0 22px}
.terms-heading>.sum{font-size:16px;line-height:1.9;max-width:46em;margin:0;color:var(--ink)}
.trow,.trow.key{grid-template-columns:9em minmax(0,1fr);gap:32px;border-top:1px solid #bdd7e7;background:transparent;padding:30px 0;margin:0}
.trow dt{padding:8px 0 0;font-size:18px}
.trow.key dt{padding-left:0}
.term-summary{padding:8px 0 0}
.term-summary>.c{display:block;font-size:18px;line-height:1.85;font-weight:700}
.term-summary>.c+.c{margin-top:10px}
.term-details{max-width:none;margin-top:24px}
.trow[data-condition='0'] .term-summary{font-size:25px}
.trow[data-condition='0'] .term-summary>.c{font-size:25px}
.trow[data-condition='2'] .term-summary{padding:22px 24px;background:#eaf5fc;border-block:2px solid #b9daee}
.trow[data-condition='4'] .term-summary{padding:18px 24px;background:#f0f7fc;border-left:4px solid #bbdcee}
.trow[data-condition='5'] .term-summary{padding:18px 24px;background:#f0f7fc;border-left:4px solid #bbdcee}
.trow[data-condition='4'] .term-details>.reading-unit:nth-child(-n+3){font-weight:700}
.trow[data-condition='5'] .term-details>.reading-unit:last-child{font-weight:700}
.trow[data-condition='4'],.trow[data-condition='5']{padding-block:36px}
.trow dt::before{display:none}
.final{max-width:760px}
.final .cond{margin-top:24px}

@media(min-width:860px){
 .hero-grid{column-gap:36px}
 .qa{column-gap:44px}
 .qa li.main .a{max-width:100%}
 .qa li.main .reading-unit{max-width:48em}
 .answers .section-heading h2{max-width:21em}
 .hero .cond .ln:first-child{max-width:100%}
}
@media(max-width:859px){
 .hero-art{margin-top:0;padding-top:0}
 .hero-grid{row-gap:16px}
 .hero-art::before{inset:0 -16px 12px}
 .trow,.trow.key{grid-template-columns:7em minmax(0,1fr);gap:24px}
 .terms-heading{padding:26px 0 28px}
}
@media(max-width:559px){
 .hero h1{margin:20px 0}
 .hero .lead{line-height:1.9}
 .hero .cond{margin-top:22px}
 .cond .ln+.ln{margin-top:16px}
 .hero-art{padding-top:4px}
 .hero-art .cap{margin-top:12px}
 .answers .section-heading,.purchase .section-heading{padding:26px 22px 28px;margin-bottom:26px}
 .answers .section-heading::after{right:-100px;top:-24px;width:280px;height:250px;opacity:.75}
 .purchase .section-heading::after{right:-100px;top:-24px;width:280px;height:250px;opacity:.75}
 .process .section-heading::after{inset:0 0 0 45%;background-position:67% center;background-size:390px auto}
 .step h3{font-size:22px;text-wrap:pretty}
 .step .key-text{padding-bottom:20px}
 .qa li.main h3{font-size:23px;padding:22px 20px;margin:0;line-height:1.6;text-wrap:pretty}
 .qa li.main .a{padding:24px 20px 26px}
 .qa h3{font-size:21px}
 .plans li{padding:24px 20px}
 .plans dl{grid-template-columns:3.5em minmax(0,1fr)}
 .terms-heading{padding:26px 0 28px;margin-bottom:10px}
 .terms-heading::before{right:-120px;top:-35px;width:300px;height:260px;opacity:.7}
 .terms-heading>h2{font-size:28px}
 .trow,.trow.key{grid-template-columns:minmax(0,1fr);gap:18px;padding:28px 0}
 .trow dt{font-size:20px;padding:0 0 0 12px;border-left:4px solid #badcee;line-height:1.6}
 .trow.key dt{padding:0 0 0 12px}
 .term-summary{padding:0}
 .term-summary>.c{font-size:18px}
 .trow[data-condition='2'] .term-summary{padding:20px 18px}
 .trow[data-condition='4'] .term-summary,.trow[data-condition='5'] .term-summary{padding:18px}
 .term-details{margin-top:24px}
 .trow[data-condition='4'],.trow[data-condition='5']{padding-block:30px}
}
@media(max-width:359px){
 .answers .section-heading,.purchase .section-heading{padding-inline:18px}
 .qa li.main h3,.qa li.main .a{padding-inline:18px}
 .terms-heading>h2{font-size:26px}
 .plans li{padding-inline:18px}
 .plans dl{grid-template-columns:3.1em minmax(0,1fr)}
}