:root{--kon:#0b4a7a;--orange:#f5a300;--usui:#f1f6fa;--moji:#1d2a33}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;color:var(--moji);background:#fff;line-height:1.7;font-size:15px}
img{max-width:100%;height:auto;display:block}
a{color:var(--kon)}
main,.foot{max-width:640px;margin:0 auto}

.hero{position:relative;max-width:960px;margin:0 auto;overflow:hidden;background:#333}
.hero-img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:40% 50%}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,40,70,.88))}
.hero-text{position:absolute;left:20px;right:20px;bottom:26px;z-index:1;color:#fff}
.badge{display:inline-block;background:var(--orange);color:#111;font-weight:800;font-size:12px;padding:3px 10px;border-radius:20px}
.hero h1{font-size:clamp(26px,8vw,40px);line-height:1.3;margin:10px 0 8px;font-weight:900}
.hero p{margin:0;font-size:clamp(12px,3.8vw,14px)}

.cta{display:block;text-align:center;background:var(--orange);color:#111;font-weight:900;padding:15px;border-radius:40px;margin:18px 20px;text-decoration:none;font-size:17px}
.cta-note{text-align:center;font-size:13px;margin:-6px 20px 24px}

.sec{padding:28px 20px;border-bottom:1px solid #eee}
.sec h2{font-size:21px;margin:0 0 6px;color:var(--kon);line-height:1.4}
.sec h3{font-size:17px;margin:18px 0 4px;color:var(--kon);border-left:4px solid var(--orange);padding-left:8px}
.sec p{margin:6px 0}
.en{font-size:11px;letter-spacing:.2em;color:var(--orange);font-weight:800;margin:0}
.note{font-size:12px;color:#556}

.fig{margin:12px 0 0}
.fig img{border-radius:12px;width:100%}
.fig figcaption{font-size:11px;color:#667;text-align:right;margin-top:3px}

.futan{background:#fff4dc;border:2px solid var(--orange);border-radius:12px;padding:12px;text-align:center;font-weight:800;color:#7a4d00}
.steps{list-style:none;padding:0;margin:14px 0}
.step{display:flex;gap:10px;margin-bottom:12px}
.step .y{flex:0 0 66px;background:var(--kon);color:#fff;border-radius:10px;text-align:center;font-size:12px;padding:10px 4px;font-weight:700;display:flex;align-items:center;justify-content:center}
.step .c{flex:1;min-width:0;background:var(--usui);border-radius:10px;padding:10px;font-size:13px;overflow-wrap:anywhere}
.step .c b{color:var(--kon);font-size:14px}

.photo{border-radius:12px;margin-top:12px;width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.car{margin:0}
.car img{border-radius:12px;width:100%;aspect-ratio:4/3;object-fit:cover}
.car figcaption{font-size:12px;text-align:center;margin-top:2px}
.car.wide{margin-top:8px}
.flow{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;font-size:14px}
.flow dt{font-weight:800;color:var(--kon);text-align:center}
.flow dd{margin:0}
.check{list-style:none;padding:0;margin:10px 0 0}
.check li{padding-left:1.4em;position:relative;margin-bottom:4px}
.check li:before{content:"✔";position:absolute;left:0;color:var(--orange)}

.foot{background:var(--kon);color:#fff;padding:24px 20px;text-align:center;font-size:13px;max-width:none}
.foot a{color:#fff}

@media (min-width:700px){
  .hero-img{aspect-ratio:16/9}
}