: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}
.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: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 p{margin:6px 0}
.en{font-size:11px;letter-spacing:.2em;color:var(--orange);font-weight:800;margin:0}

.nums{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.num{background:var(--usui);border-radius:12px;padding:12px 6px;text-align:center}
.num b{display:block;font-size:26px;color:var(--kon)}
.num span{font-size:12px}

.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}
.step .c{flex:1;min-width:0;background:var(--usui);border-radius:10px;padding:10px;font-size:13px;overflow-wrap:anywhere}
.total{background:#fff4dc;border:2px solid var(--orange);border-radius:12px;padding:12px;text-align:center}
.total b{font-size:26px;color:#a86a00}
.total .note{font-size:11px;margin:4px 0 0}

.uses{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0}
.uses li{background:var(--usui);border-radius:10px;padding:10px 4px;text-align:center;font-size:12px}
.uses span{display:block;font-size:22px}

.voice{display:flex;gap:12px;margin-top:12px}
.voice-ph{flex:0 0 96px;height:120px;border-radius:12px;background:#d5dbe3;display:flex;align-items:center;justify-content:center;font-size:11px;color:#556}
.voice .q{font-size:14px}
.voice .who{font-size:12px;color:#667}
.lic{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.lic li{font-size:11px;background:var(--kon);color:#fff;border-radius:20px;padding:3px 9px}

.photo{border-radius:12px;margin-top:12px;width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.two img{border-radius:12px;width:100%;aspect-ratio:3/4;object-fit:cover}
.flow{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:14px 0 0;font-size:14px}
.flow dt{font-weight:800;color:var(--kon)}
.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}
  .two img{aspect-ratio:4/3}
}