:root{--bg:#f8faf6;--white:#fff;--mint:#55bfa5;--coral:#ff735c;--yellow:#ffd66b;--navy:#263b42;--soft:#e4f5f0;--r-sm:10px;--r-md:16px;--r-lg:24px;--body:'Zen Kaku Gothic New',sans-serif;--heading:'Zen Kaku Gothic Antique',sans-serif;--shadow:0 2px 4px #263b420d,0 8px 24px #263b4214}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--navy);font-family:var(--body);font-size:16px;line-height:1.9}a{color:inherit;text-underline-offset:5px}img{display:block;max-width:100%;height:auto}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--heading);font-weight:700;line-height:1.55}h2{font-size:clamp(26px,3.3vw,40px);letter-spacing:.04em}h3{font-size:24px}p{overflow-wrap:anywhere}a:focus-visible,summary:focus-visible{outline:3px solid var(--navy);outline-offset:6px}.num{font-family:'Outfit',var(--body)}.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}.section{padding-block:104px}.header{height:88px;display:flex;align-items:center;justify-content:space-between;max-width:1248px;margin:auto;padding:16px 40px}.header img{width:154px;height:48px;object-fit:contain}.header-cta{font-weight:700;text-decoration:none;border-bottom:2px solid var(--coral);font-size:15px}.header-cta span{margin-left:16px}.hero{position:relative;background:repeating-conic-gradient(from -8deg at 72% 47%,#55bfa5 0deg 14deg,#7ccdb8 14deg 28deg);padding:50px 0 78px}.hero:after{content:'';position:absolute;bottom:-19px;left:0;width:100%;height:40px;background:radial-gradient(circle at 20px 0,var(--mint) 20px,transparent 21px) 0 0/40px 40px repeat-x}.hero-inner{display:grid;grid-template-columns:1.12fr 1fr;gap:72px;align-items:center}.hero-logo{width:160px;margin-bottom:24px}.hero h1{font-size:clamp(30px,3.8vw,46px);max-width:550px;letter-spacing:.035em;text-wrap:balance}.hero h1{font-family:'Mochiy Pop One',sans-serif;font-weight:400;line-height:1.65}.lead{max-width:490px;margin:24px 0 28px;font-weight:500;font-size:17px}.cta{display:inline-flex;justify-content:space-between;align-items:center;gap:48px;min-height:64px;padding:15px 28px;border:2px solid var(--navy);border-radius:var(--r-md);background:var(--coral);box-shadow:0 5px 0 var(--navy);text-decoration:none;font-weight:700;font-size:20px;transition:transform .2s}.cta:hover{transform:translateY(-3px)}.cta span{font-size:26px}.note{font-size:13px;margin-top:20px;font-weight:500}.hero-art{position:relative;display:flex;justify-content:center;padding:20px 0;isolation:isolate}.phone{width:244px;padding:7px;border:3px solid var(--navy);border-radius:36px;background:var(--navy);box-shadow:10px 16px 0 #263b4214;position:relative;flex-shrink:0}.phone img{border-radius:25px;width:100%;height:auto}.hero-art>.phone{width:270px;transform:rotate(7deg);z-index:1}.die{position:absolute;display:grid;place-items:center;width:76px;height:76px;border:3px solid var(--navy);border-radius:20px;background:var(--white);box-shadow:5px 6px 0 var(--yellow);z-index:2}.die i{width:18px;height:18px;border-radius:50%;background:var(--coral)}.die-one{left:-8px;top:55px;transform:rotate(-18deg)}.die-two{right:-8px;bottom:30px;transform:rotate(18deg);grid-template-columns:repeat(3,1fr);padding:10px;width:85px;height:85px}.die-two i{width:13px;height:13px;background:var(--navy)}.die-two i:first-child{align-self:end}.die-two i:last-child{align-self:start}.orbit{position:absolute;width:410px;height:410px;top:95px;border:2px dashed #263b4255;border-radius:50%;z-index:-1}.how>h2{text-align:center;margin-bottom:56px}.route{position:relative}.route:before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 8px);width:16px;background:var(--navy);border-radius:10px}.route:after{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 1px);border-left:2px dashed white}.step{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:160px;padding:30px 0 70px;min-height:620px}.station{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:70px;height:70px;background:var(--white);border-radius:var(--r-md);box-shadow:var(--shadow);font-size:36px;font-weight:700;z-index:2;border:2px solid var(--navy)}.step-copy h3{font-size:28px;margin-bottom:20px}.step-copy p{font-size:17px}.step-art{display:flex;justify-content:center;align-items:center;position:relative}.step-art:before{content:'';position:absolute;width:350px;height:350px;border-radius:50%;background:var(--soft)}.art-1>.phone{transform:rotate(-5deg)}.art-3>.phone{transform:rotate(5deg)}.step:nth-child(2) .step-copy{grid-column:2;grid-row:1}.step:nth-child(2) .step-art{grid-column:1;grid-row:1}.art-2{min-height:520px}.art-2:before{background:#fff5d6}.art-2 .phone{width:205px;position:absolute;left:0;top:0;transform:rotate(-8deg)}.art-2 .phone+.phone{left:auto;right:0;top:80px;transform:rotate(7deg)}.art-3:before{background:#ffe8e3}.features{background:var(--soft)}.features h2{text-align:center;margin-bottom:48px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.feature{position:relative;background:white;border-radius:var(--r-lg);padding:36px}.crest{display:grid;place-items:center;width:64px;height:64px;border:2px solid var(--navy);border-radius:50%;background:var(--coral);font-family:var(--heading);font-size:28px;font-weight:700;box-shadow:inset 0 0 0 4px white;margin-bottom:22px}.crest-1{background:var(--mint)}.crest-2{background:var(--yellow)}.feature h3{font-size:23px;margin-bottom:14px}.occasions{display:grid;grid-template-columns:1fr 1.5fr;gap:40px;align-items:center}.occasions ul{padding:0;margin:0;list-style:none}.occasions li{padding:20px 0;border-bottom:2px dashed #263b4226;font-family:var(--heading);font-weight:700;font-size:21px;display:flex;align-items:center;gap:18px}.occasions li:before{content:'';width:16px;height:16px;border:4px solid var(--navy);border-radius:50%;background:var(--yellow);flex-shrink:0}.install{background:#fff5d6}.install-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.install h2{font-size:30px;margin-bottom:20px}.install-card{padding:24px 28px;background:white;border:2px solid var(--navy);border-radius:var(--r-md)}.install-card+.install-card{margin-top:16px}.install-card h3{font-size:22px;margin-bottom:8px}.faq{max-width:880px}.faq h2{text-align:center;margin-bottom:48px}.faq details{border-bottom:1px solid #d6dedb;padding:24px 0}.faq summary{cursor:pointer;list-style:none;font-family:var(--heading);font-weight:700;font-size:19px;padding-right:34px;position:relative}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';position:absolute;right:0;top:-4px;font-family:'Outfit';font-size:26px}.faq details[open] summary:after{content:'−'}.faq details p{padding-top:14px;max-width:740px}.finish{background:var(--mint);text-align:center;position:relative;padding-top:140px}.finish:before{content:'';position:absolute;top:0;height:76px;left:calc(50% - 8px);width:16px;background:var(--navy)}.finish:after{content:'';position:absolute;top:0;height:70px;left:calc(50% - 1px);border-left:2px dashed white}.goal{top:76px}.finish h2{margin-bottom:32px}.footer{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;padding-block:44px}.footer>img{width:150px}.footer p{font-size:14px}.footer nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:12px 22px;font-size:13px}.reveal.is-entering{animation:rise .65s ease both}@keyframes rise{from{opacity:.45;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(min-width:800px){.hero-art:hover .die-one{transform:rotate(72deg);transition:transform .7s}}
@media(max-width:900px){.hero-inner{gap:24px}.hero-art>.phone{width:230px}.orbit{width:300px;height:300px}.step{gap:100px}.art-2 .phone{width:180px}.step-art:before{width:280px;height:280px}.install-inner{gap:32px}.header{padding-inline:24px}}
@media(max-width:650px){.wrap{width:calc(100% - 40px)}.section{padding-block:64px}.header{height:72px;padding:12px 20px}.header img{width:125px;height:40px}.header-cta{font-size:13px}.header-cta span{margin-left:5px}.hero{padding:32px 0 46px;background:repeating-conic-gradient(from -8deg at 50% 73%,#55bfa5 0deg 14deg,#7ccdb8 14deg 28deg)}.hero-inner{grid-template-columns:1fr;gap:24px}.hero-copy{text-align:center}.hero-logo{width:122px;margin:0 auto 22px}.hero h1{font-size:28px;max-width:390px;margin:auto}.lead{text-align:left;font-size:15px;max-width:390px;margin:20px auto 24px}.cta{font-size:20px;min-height:60px;gap:46px}.note{font-size:12px;margin-top:18px}.hero-art{padding:16px 0 18px}.hero-art>.phone{width:206px;transform:rotate(6deg)}.die{width:60px;height:60px;border-radius:16px}.die-one{left:10px;top:48px}.die-two{right:0;bottom:34px;width:65px;height:65px}.die-two i{width:10px;height:10px}.orbit{width:290px;height:290px;top:80px}.how>h2{margin-bottom:40px}.route:before{left:18px;width:12px}.route:after{left:23px}.step{display:flex;flex-direction:column;gap:28px;padding:0 0 60px 68px;min-height:0;align-items:stretch}.station{width:48px;height:48px;font-size:26px;border-radius:12px;left:24px;top:25px}.step-copy h3{font-size:23px;margin-bottom:14px}.step-copy p{font-size:15px}.step-art{padding-block:8px}.step-art .phone{width:190px;border-radius:28px;padding:5px}.step-art .phone img{border-radius:20px}.step-art:before{width:225px;height:225px}.art-2{height:410px;min-height:0;margin-left:-5px}.art-2 .phone{width:155px;left:8px;top:0}.art-2 .phone+.phone{right:12px;top:64px}.step:last-child{padding-bottom:25px}.feature-grid{grid-template-columns:1fr;gap:16px}.features h2{margin-bottom:30px}.feature{padding:28px}.feature h3{font-size:22px}.crest{width:56px;height:56px;font-size:26px;margin-bottom:18px}.occasions{grid-template-columns:1fr;gap:24px}.occasions li{font-size:17px;gap:12px}.install-inner{grid-template-columns:1fr;gap:28px}.install h2{font-size:26px}.install-card{padding:22px}.faq h2{margin-bottom:20px}.faq summary{font-size:17px}.faq details p{font-size:15px}.finish{padding-top:126px}.finish h2{font-size:27px;text-wrap:balance}.goal{top:64px;left:50%;width:64px;height:64px;font-size:32px}.footer{justify-content:center;text-align:center;gap:16px;padding-block:36px}.footer nav{margin:auto;justify-content:center;gap:12px 18px}.footer p{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.cta:hover{transform:none}}

.arrow{display:inline-block;width:15px;height:15px;border-top:2px solid currentColor;border-right:2px solid currentColor;position:relative;flex-shrink:0}.arrow:after{content:"";position:absolute;right:-1px;top:-1px;width:20px;height:2px;background:currentColor;transform:rotate(-45deg);transform-origin:right center}
.hero h1 span{display:inline-block}.hero-logo{width:188px;padding:14px 20px;background:var(--white);border:2px solid var(--navy);border-radius:var(--r-lg);box-shadow:5px 6px 0 var(--navy)}
@media(max-width:650px){.hero-logo{width:150px;padding:10px 16px}}
h2,h3{text-wrap:balance;word-break:auto-phrase}
/* 路線：アプリの盤面（.map__rail-*）と同じ紺＋白の破線。線幅は駅マスに合わせて 4/3 倍 */
.route:before,.route:after,.finish:before,.finish:after{display:none}
.rail{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.rail path{fill:none}.rail-base{stroke:var(--navy);stroke-width:8;stroke-linecap:round}.rail-dash{stroke:#fff;stroke-width:3.3;stroke-dasharray:12 12}
main{position:relative}
.how>*,.features>.wrap,.occasions,.install>.wrap,.faq>*,.finish>.wrap{position:relative;z-index:2}
/* 駅マス：アプリの .sq と同じ白の角丸＋やわらかい影。発・着は紺の丸 */
.station{width:56px;height:56px;border:0;border-radius:17px;box-shadow:0 3px 8px #263b4224;font-family:'Outfit',var(--body);font-size:22px;font-weight:700;line-height:1}
.station.start,.station.goal{border-radius:50%;background:var(--navy);color:#fff;font-family:var(--body);font-size:19px;font-weight:700}
.station.start{display:none;z-index:3}.has-rail .station.start{display:grid}
.step{gap:176px}
/* 路線の手前に置く文字は、面の色で線を隠す */
.how>h2,.features h2,.faq h2{width:fit-content;margin-inline:auto;padding:2px 22px;border-radius:var(--r-md)}
.how>h2{background:var(--bg)}.features h2{background:var(--soft)}.faq h2{background:var(--bg)}
.how{padding-top:128px}
.occasions{margin-block:88px;padding:48px 56px;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.install-inner>div:first-child{padding-right:44px}
.faq-list{padding:12px 40px;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.faq details:last-child{border-bottom:0}
.finish{padding-top:176px}.goal{top:84px}
@media(max-width:650px){
.rail-base{stroke-width:6}.rail-dash{stroke-width:2.5;stroke-dasharray:9 9}
.station{width:42px;height:42px;border-radius:13px;font-size:16px;left:50%;top:21px}
.station.start,.station.goal{font-size:14px}
.how{padding-top:96px}
.step{padding:62px 0 52px;gap:24px}.step:last-child{padding-bottom:40px}
.step-copy{padding:22px;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.art-2{margin-left:0}
.occasions{margin-block:64px;padding:28px 24px;width:calc(100% - 40px)}
.install-inner>div:first-child{padding:16px 18px;background:#fff5d6;border-radius:var(--r-md)}
.faq-list{padding:4px 20px}
.finish{padding-top:132px}.goal{top:66px;width:48px;height:48px;font-size:16px}
}
@keyframes rise{from{opacity:1;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.occasions li{word-break:auto-phrase}
.crest{background:var(--c,#fff5d6);box-shadow:none;border:0;width:72px;height:72px}.crest-0{--c:#ffe8e3}.crest-1{--c:#fff5d6}.crest-2{--c:#e4f5f0}.crest-3{--c:#ffe8e3}.feature .crest{background:var(--c)}
/* スマホ幅：画面素材を一回り小さく */
@media(max-width:650px){
.hero-art>.phone{width:172px;padding:5px;border-radius:28px}.hero-art>.phone img{border-radius:20px}
.orbit{width:250px;height:250px;top:70px}.die{width:52px;height:52px;border-radius:14px}.die-one{left:22px;top:42px}.die-two{right:14px;bottom:30px;width:56px;height:56px}.die i{width:13px;height:13px}.die-two i{width:9px;height:9px}
.step-art .phone{width:158px;border-radius:24px}.step-art .phone img{border-radius:17px}.step-art:before{width:190px;height:190px}
.art-2{height:345px}.art-2 .phone{width:132px;left:calc(50% - 134px)}.art-2 .phone+.phone{left:auto;right:calc(50% - 134px);top:54px}
}
@media(max-width:650px){.step-art:before{display:none}}