:root{--blue:#0866ad;--deep:#073e71;--sky:#dff3fb;--cream:#fff9ed;--paper:#fffef9;--yellow:#f9c934;--ink:#263947;--muted:#526776;--line:#d5e6e9;--font:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--font);font-size:16px;line-height:1.9}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.wrap{width:min(1080px,calc(100% - 44px));margin-inline:auto}.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px;z-index:20}.skip:focus{left:10px}a:focus-visible,summary:focus-visible{outline:3px solid #e6533e;outline-offset:4px}
header{border-bottom:2px solid #d8edf1;background:#fffef9}.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font:bold 1.65rem/1 Arial,sans-serif;letter-spacing:-.06em;color:var(--deep)}.brand span{color:#e6533e}.navlinks{display:flex;gap:25px;align-items:center;font-size:.9rem;font-weight:800}.navlinks a:hover{text-decoration:underline;text-underline-offset:4px}.navlinks .line{background:#06c755;border:2px solid #087a3c;border-radius:99px;color:#fff;padding:7px 17px}
.breadcrumb{padding:21px 0;font-size:.84rem;color:#59707f}.breadcrumb a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}.hero{background:var(--sky);border-bottom:2px solid #c3e4ec;padding:58px 0 68px}.hero .kicker{color:var(--blue);font-size:.88rem;font-weight:800}.hero h1{font-size:clamp(2rem,4.3vw,3.35rem);line-height:1.48;letter-spacing:-.055em;color:var(--deep);max-width:850px;margin:12px 0 20px}.hero p{max-width:730px;color:#3e5a6a;font-size:1.07rem;margin:0;line-height:2}.hero .actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:51px;border-radius:99px;border:2px solid #087a3c;background:#06c755;color:#fff;padding:10px 23px;font-weight:800;box-shadow:3px 3px 0 #075a30}.button:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #075a30}.button.secondary{background:#fff;color:var(--deep);border-color:var(--deep);box-shadow:3px 3px 0 var(--deep)}.button.secondary:hover{box-shadow:2px 2px 0 var(--deep)}
.section{padding:78px 0}.section.alt{background:var(--cream)}.section.blue{background:#edf8fb}.kicker{display:block;color:var(--blue);font-size:.88rem;font-weight:800;margin-bottom:12px}.section h2{font-size:clamp(1.65rem,3vw,2.25rem);color:var(--deep);line-height:1.5;letter-spacing:-.04em;margin:0 0 20px}.section h3{color:var(--deep);font-size:1.18rem;margin:0 0 8px;line-height:1.5}.intro{max-width:750px;color:var(--muted);margin:0 0 28px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px;box-shadow:0 5px 0 #e8f3f4}.box p{margin:0;color:var(--muted);font-size:.95rem}.two{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:start}.list{margin:0;padding-left:1.35em;color:#445f6e}.list li{padding:5px 0}.note{margin:28px 0 0;border-left:4px solid var(--yellow);background:#fffaf0;padding:16px 19px;color:#4e6572}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.step{border:1px solid #d5e6e9;background:#fff;border-radius:18px;padding:22px}.step b{display:block;color:var(--blue);font:bold 1rem Arial,sans-serif;margin-bottom:14px}.step p{color:var(--muted);margin:0;font-size:.95rem}.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.photo-pair figure{margin:0;background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--line)}.photo-pair img{width:100%;aspect-ratio:4/3;object-fit:cover}.photo-pair figcaption{font-weight:800;color:var(--deep);padding:10px 14px}.faq details{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;list-style:none;font-weight:800;color:var(--deep);padding:18px 28px 18px 0;position:relative}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'＋';position:absolute;right:0;color:var(--blue)}.faq details[open] summary:after{content:'−'}.faq p{color:var(--muted);margin:0 0 20px}.related{display:flex;gap:14px;flex-wrap:wrap}.related a{border:1px solid #bddae4;background:white;border-radius:12px;padding:9px 16px;color:var(--blue);font-weight:800}.related a:hover{background:var(--sky)}.contact{background:var(--deep);color:#fff;padding:70px 0}.contact h2{color:#fff7e3;margin:0 0 14px;font-size:clamp(1.65rem,3vw,2.3rem)}.contact p{color:#d7e6eb;margin:0 0 25px}.contact .row{display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:center}.qr{background:#fff;border-radius:18px;padding:18px;display:flex;gap:16px;align-items:center;color:var(--deep)}.qr img{width:128px;height:128px}.qr strong{display:block}.qr small{font-size:.84rem}footer{background:#082f56;color:#e1eff3;padding:25px 0;font-size:.84rem}footer .wrap{display:flex;justify-content:space-between;gap:15px}footer strong{font:bold 1.1rem Arial,sans-serif}
@media(max-width:800px){.grid,.steps{grid-template-columns:1fr 1fr}.two,.contact .row{grid-template-columns:1fr}.navlinks{gap:14px}}
@media(max-width:600px){body{padding-bottom:61px}.wrap{width:calc(100% - 32px)}.nav{min-height:66px}.brand{font-size:1.42rem}.navlinks a:not(.line){display:none}.navlinks .line{font-size:.8rem;padding:6px 10px}.hero{padding:44px 0 52px}.hero h1{font-size:2rem}.hero .actions{flex-direction:column}.hero .button{width:100%}.section{padding:58px 0}.grid,.steps{grid-template-columns:1fr}.box,.step{padding:21px}.photo-pair{gap:7px}.photo-pair figcaption{font-size:.8rem}.qr img{width:110px;height:110px}.contact{padding:55px 0}footer .wrap{flex-direction:column}.mobile-line{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#06c755;border-top:2px solid #087a3c;color:#fff;min-height:60px;font-weight:800}}
@media(min-width:601px){.mobile-line{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.mobile-menu{display:none}
@media(max-width:700px){
 header{position:relative;z-index:20}
 .nav{position:relative;min-height:68px}
 .navlinks{display:none}
 .mobile-menu{display:block}
 .mobile-menu summary{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:7px 12px;border:1px solid #bddae4;border-radius:12px;color:var(--deep);background:#fff;cursor:pointer;font-size:.9rem;font-weight:800;list-style:none}
 .mobile-menu summary::-webkit-details-marker{display:none}
 .mobile-menu summary span{font-size:1.15rem;line-height:1}
 .mobile-menu[open] summary{background:var(--sky)}
 .mobile-menu nav{position:absolute;top:calc(100% - 1px);left:-16px;right:-16px;display:grid;padding:8px 16px 16px;background:var(--paper);border:1px solid var(--line);border-radius:0 0 16px 16px;box-shadow:0 14px 22px rgba(7,62,113,.16)}
 .mobile-menu nav a{display:flex;align-items:center;min-height:48px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:1rem;font-weight:700}
 .mobile-menu nav a:last-child{border-bottom:0}
 .hero{padding:42px 0 48px}
 .hero h1{font-size:clamp(1.65rem,7vw,2.15rem);line-height:1.45}
 .hero p{font-size:1rem}
 .hero .actions{display:grid;grid-template-columns:1fr;gap:12px}
 .hero .button{width:100%;min-height:52px}
 .section{padding:56px 0}
 .section h2{font-size:clamp(1.6rem,6vw,2rem)}
 .box p,.step p,.breadcrumb{font-size:1rem}
 .related a{display:flex;align-items:center;min-height:48px}
 .qr{min-width:0}
 body{padding-bottom:calc(67px + env(safe-area-inset-bottom))}
 .mobile-line{min-height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);font-size:1rem}
}
@media(max-width:390px){.photo-pair{grid-template-columns:1fr}.photo-pair img{aspect-ratio:16/9}}
/* Preserve readable text and spacing across smaller phone widths. */
@media(max-width:700px){
 .wrap,.nav,.hero .wrap,.grid,.box,.two,.steps,.step,.contact .row,.qr,.qr>div{min-width:0}
 h1,h2,h3,p,li,.breadcrumb,.related a,.qr small{overflow-wrap:anywhere}
 .hero h1,.section h2,.contact h2{letter-spacing:-.025em;line-height:1.55}
 .button,.related a{max-width:100%;text-align:center;white-space:normal}
 .qr img{flex:none}
 .mobile-line{padding-inline:16px;text-align:center}
}
@media(max-width:390px){
 .qr{flex-direction:column;text-align:center}
 .qr img{width:128px;height:128px}
}