﻿/* 清書v4：情報ごとに役割を分ける紙面と、固定本文の文字組み。 */
body{word-break:normal;line-break:strict;text-spacing-trim:trim-start;overflow-wrap:anywhere}
.keep{white-space:nowrap}
.lead{color:var(--ink);line-height:1.9}
.lead .copy-block:first-child{font-weight:700;font-size:17px}
.lead .copy-block+.copy-block{margin-top:16px}
.lead .copy-block:last-child{background:#f6f7ee;border-left:3px solid #b88b39;padding:12px 16px;margin-top:16px}
.cta{margin-top:20px}
.cond{margin-top:26px;padding:8px 26px 18px;column-gap:32px;background:#f4f8f3}
.cond .clause{padding:18px 0;border-bottom:1px solid #c5d9cb;line-height:1.95}
.cond .condition-label{background:none;border:0;border-radius:0;padding:0;box-decoration-break:slice;font-weight:700;color:var(--main-deep)}
.cond .essential .condition-label{border-bottom:2px solid #a6c3af;padding-bottom:2px}
.cond .supplement{background:none}
.cond .supplement .condition-label{font-weight:400;color:var(--ink)}
.cond .condition-emphasis{color:var(--main-deep);font-size:16px;font-weight:700}
.cond>a[href='#terms']{grid-column:1/-1;display:flex;align-items:center;justify-content:center;justify-self:start;white-space:normal;min-height:48px;padding:10px 20px;margin-top:20px;background:#fff;border:1px solid #83a992;border-radius:4px;text-decoration:none;font-weight:700;line-height:1.6}
.cond>a[href='#terms']:hover{background:#e6f0e7}
a:focus-visible{outline:3px solid #a96e18;outline-offset:4px}
.hero-art{padding:24px 0 0;margin-top:12px}
.hero-art::before{inset:0 0 52px;background-position:center top;mask-image:linear-gradient(to right,transparent,#000 5%,#000 97%,transparent),linear-gradient(to bottom,#000 78%,transparent 100%);mask-composite:intersect}
.hero-art .illustration{margin:36px auto 0}
.hero-art .cap{padding:4px 10px 0;margin-top:12px}
.ba{align-items:start}
.ba-card{align-self:start}
.ba-tag{text-wrap:pretty}
.process{background:#f6f8f3}
.process>.wrap{padding-top:8px}
.steps.four{align-items:start}
.step,.step.free{align-self:start;padding-bottom:30px}
.step .copy-block+.copy-block{border-top:0;padding-top:0;margin-top:18px}
.step:nth-child(2) .copy-block:nth-last-child(-n+2){border-left:0;padding-left:0}
.step .process-note,.step:nth-child(2) .process-note:nth-last-child(-n+2){padding:12px 14px;margin-top:18px;background:#eeeeda;border-left:3px solid #a88747}
.step .text-anchor{color:var(--main-deep);font-weight:700}
.step h3{margin-bottom:16px}
.mid{padding-top:22px;margin-top:18px}
.questions{border:0;background:#f2f6ee;padding-block:72px;isolation:isolate}
.questions::before{content:'';position:absolute;inset:24px max(0px,calc((100vw - 1160px)/2)) auto auto;width:330px;height:250px;background:url('assets/frame-desktop.png') right top/330px auto no-repeat;mix-blend-mode:multiply;opacity:.38;z-index:-1;mask-image:linear-gradient(to bottom,#000,transparent)}
.questions>.wrap{padding-top:20px;padding-bottom:0}
.questions>.wrap>.label{border:0;padding:0 0 8px;margin:0 0 16px;border-bottom:3px solid var(--acc)}
.questions h2{border:0;padding:0;margin-bottom:36px;max-width:22em;position:relative}
.qa{background:none;gap:26px;margin-top:0}
.qa li,.qa li.main{border:0;padding:0;background:#fff;position:relative;box-shadow:none;align-items:start}
.qa>li:last-child{border:0}
.qa>li>b,.qa li.main>b{background:#deeadc;border-top:4px solid var(--main);padding:22px 22px 30px;margin:0;max-width:none;font-size:21px;line-height:1.6;position:relative;color:var(--main-deep)}
.qa>li>b::after{content:'';position:absolute;right:0;bottom:0;width:20px;height:20px;background:#fff;clip-path:polygon(100% 0,100% 100%,0 100%)}
.qa>li:nth-child(2)>b,.qa>li:nth-child(5)>b{background:#f2e9d4;border-top-color:#ad7c2b}
.qa>li>.a{padding:24px 28px 30px;margin:0;color:var(--ink);min-width:0}
.qa .p+.p{margin-top:20px}
.qa .answer-summary{padding:12px 16px 14px;background:#f2f6ee;border-left:3px solid #8da68d;margin-bottom:22px}
.qa b.k,.qa li.main b.k{font-size:17px;font-weight:700;color:var(--ink);line-height:1.9}
.questions .pl{margin-top:26px;padding:0 2px}
.conditions{background:#fff;padding-bottom:60px}
.terms{border-top:0;padding-top:64px}
.terms>.label{background:var(--main-deep);color:#fff;padding:6px 16px;border:0;letter-spacing:.03em;margin-bottom:18px}
.terms h2{border-bottom:3px solid var(--main);padding-bottom:22px;margin-bottom:20px}
.terms .sum{margin-bottom:32px;max-width:56em;color:var(--ink)}
.terms>dl{display:grid;gap:24px}
.trow,.trow.key{border:1px solid #d1dfd0;border-radius:0;background:#fff;position:relative;padding:0;gap:0;overflow:visible;align-items:stretch}
.trow dt{border:0;border-top:4px solid #b2c5b0;background:#f1f5ed;padding:20px 22px;align-self:stretch;font-size:18px;line-height:1.8;color:var(--main-deep)}
.trow.key dt{background:#24543f;border-top-color:#c49b4e;color:#fff}
.trow dd{padding:0;min-width:0}
.trow .conclusion{padding:20px 28px;background:#f6f8f2;border-bottom:1px solid #d1dfd0}
.trow.key .conclusion{background:#e7f0e4}
.trow dd .c{font-size:19px;line-height:1.85;color:var(--main-deep)}
.trow dd .c+.c{margin-top:10px}
.trow dd small{display:block;font-size:16px;line-height:1.95;padding:22px 28px 26px;margin:0;max-width:none;color:var(--ink);font-weight:400}
.trow dd small .copy-block+.copy-block{margin-top:16px}
.trow dd small .d{margin-left:0}
.final{margin-top:40px;padding-top:28px}
@media(min-width:860px){
 .hero-art{grid-row:1/4;align-self:center;margin-top:0;padding-top:0}
 .hero-art .illustration{margin-top:46px}
 .hero-copy>.cta{width:100%;max-width:440px;justify-self:start}
 .steps.four{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:48px;row-gap:8px}
 .qa li{grid-template-columns:16em minmax(0,1fr);column-gap:0}
 .qa>li>b{font-size:21px;line-height:1.65}
 .qa>li>.a{padding-top:24px}
 .trow,.trow.key{grid-template-columns:13em minmax(0,1fr)}
}
@media(max-width:859px){
 .hero-art{margin-top:32px;max-width:520px;padding-top:22px}
 .hero-art .illustration{margin-top:28px}
 .hero-art::before{background-image:url('assets/frame-mobile.png')}
 .cond{padding:4px 20px 18px;gap:0;margin-top:24px}
 .cond .clause{padding:18px 0}
 .cond>a[href='#terms']{justify-self:stretch;margin-top:18px}
 .process>.wrap{padding-top:4px}
 .questions{padding-block:48px}
 .questions>.wrap{padding-inline:24px;padding-top:16px}
 .questions::before{width:200px;height:180px;background-size:200px;top:20px;right:0;opacity:.25}
 .questions h2{margin-bottom:28px}
 .qa{gap:24px}
 .qa>li>b,.qa li.main>b{display:block;padding:16px 18px 20px;font-size:20px;border-top-width:3px;margin-bottom:0}
 .qa>li>.a{display:block;padding:22px 20px 24px}
 .qa .answer-summary{padding:12px 14px;margin-bottom:18px}
 .qa .p+.p{margin-top:18px}
 .terms{padding-top:48px}
 .terms h2{padding-bottom:18px}
 .terms>dl{gap:22px}
 .trow,.trow.key{grid-template-columns:1fr;padding:0;gap:0}
 .trow dt{padding:14px 18px;font-size:18px;align-self:auto}
 .trow .conclusion{padding:18px 18px 20px}
 .trow dd .c{font-size:18px}
 .trow dd small{padding:20px 18px 24px}
}
@media(max-width:419px){
 .questions>.wrap{padding-inline:18px}
 .qa>li>.a{padding-inline:18px}
 .qa .answer-summary{padding-inline:12px}
 .lead .copy-block:first-child{font-size:16px}
 .lead .copy-block:last-child{padding:12px}
 .cond{padding-inline:16px}
 .trow dd .c{font-size:18px}
 .trow .nb{white-space:normal}
 .hero-art{padding-top:22px}
 .cta{font-size:clamp(13px,4vw,15px)}
}
/* PCの手順は番号・項目名・本文を横に対応させ、文字量差の空白を抑える。 */
@media(min-width:860px){
 .steps.four{grid-template-columns:1fr;gap:0}
 .step,.step.free{display:grid;grid-template-columns:52px 13em minmax(0,1fr);column-gap:24px;align-items:start;padding:28px 0;border-top:1px solid #bfd1c4}
 .step:first-child{border-top:0}
 .step:nth-child(2){border-top:1px solid #bfd1c4}
 .step .no{margin:0}
 .step h3{font-size:22px;padding-top:3px;margin:0}
 .step p{margin:0}
}
@media(min-width:860px){.cta{width:440px;max-width:100%}}
