:root{color-scheme:light dark;font-family:"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;font-synthesis:weight;--bg:#fffbf0;--grid:#efe6cf;--ink:#3b2a20;--muted:#6b5546;--accent:#e0457e;--orange:#e8964a;--card:#fffbf0;--line:#3b2a20}
@media(prefers-color-scheme:dark){:root{--bg:#211b19;--grid:#2e2623;--ink:#fff3e2;--muted:#c7b9a9;--accent:#ff7aa8;--card:#fffbf0;--line:#fff3e2}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;color:var(--ink);line-height:1.6;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,p,figure{margin:0}
a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.wrap{width:min(1160px,calc(100% - 56px));margin-inline:auto}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:8px 18px}
.skip:focus{top:8px}
.top{padding-top:20px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:800}
.brand img{border-radius:10px}
/* ヒーロー: スマホでは画面を先に、PCでは右側に置く */
.hero{display:flex;flex-wrap:wrap;flex-direction:row-reverse;align-items:center;justify-content:center;gap:40px 56px;padding-top:24px;padding-bottom:96px}
.hero-shot{flex:0 1 420px;min-width:0;position:relative;display:flex;justify-content:center}
.phone{filter:drop-shadow(0 18px 22px rgba(0,0,0,.28))}
.hero-shot .phone{width:min(300px,72vw)}
.note{position:absolute;display:block;white-space:nowrap;padding:12px 10px;font-family:"Klee","Hiragino Maru Gothic ProN",cursive;font-weight:600;font-size:15px;line-height:1.4;color:#3b2a20;box-shadow:0 6px 0 -3px rgba(59,42,32,.2)}
.note b{display:block;color:#c2410c}
.note-yellow{left:max(0px,calc(50% - 190px));top:30%;background:#fdeea0;transform:rotate(-6deg)}
.note-mint{right:max(0px,calc(50% - 190px));top:46%;background:#dcf0e4;transform:rotate(5deg)}
.note-pink{left:max(0px,calc(50% - 190px));bottom:10%;background:#fbdde3;transform:rotate(-3deg)}
.hero-copy{flex:0 1 520px;min-width:0}
h1{-webkit-text-stroke:.02em currentColor;font-weight:800;font-size:clamp(34px,5.6vw,76px);line-height:1.25;white-space:nowrap}
@supports(font-size:1cqw){.hero-copy{container-type:inline-size}h1{font-size:min(76px,13.4cqw)}}
h1 em{font-style:normal;color:var(--accent)}
.sub{margin-top:16px;font-size:18px;font-weight:800}
.store{display:inline-block;margin-top:28px;line-height:0}
.store img{height:64px;width:auto}
.facts{margin-top:12px;font-size:14px;color:var(--muted)}
/* 3つの手順: ステップ画像はマス目の上にそのまま置く */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:40px 32px;padding-block:24px 96px}
.steps figure{display:grid;grid-template-rows:1fr auto;gap:20px}
.visual{display:flex;align-items:center;justify-content:center;position:relative}
/* 端末は上半分だけ見せて大きく表示する */
.crop{width:min(340px,88vw);aspect-ratio:560/700;overflow:hidden;margin-inline:auto;align-items:flex-start}
.crop .phone{width:100%;height:auto}
.free .pig{width:min(86%,340px);height:auto}
.pair{width:min(440px,100%);height:min(430px,100vw);overflow-x:visible;overflow-y:clip;margin-inline:auto;align-items:flex-start}
.who{width:52%;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.who .phone{width:100%;height:auto}
.who-a{margin-right:-6%;z-index:1}
.who-a .phone{transform:rotate(-7deg)}
.who-b{margin-top:34px;z-index:2}
.who-b .phone{transform:rotate(6deg)}
.chip{display:inline-block;padding:6px 18px;border-radius:999px;background:#fffbf0;color:#3b2a20;font-weight:800;font-size:15px;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
figcaption{display:flex;gap:12px;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.no{width:36px;height:36px;border-radius:50%;background:var(--orange);color:#3b2a20;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
/* ダウンロード */
.download{background:var(--orange);color:#3b2a20}
.download .wrap{display:flex;flex-direction:column;align-items:center;gap:24px;padding-block:72px;text-align:center}
.banks{display:flex;gap:16px;align-items:flex-end;justify-content:center}
.banks img:nth-child(1){width:clamp(80px,14vw,140px)}
.banks img:nth-child(2){width:clamp(90px,16vw,160px)}
.banks img:nth-child(3){width:clamp(80px,13vw,130px)}
.download .store{margin-top:0}
.download .store img{height:72px}
.download .facts{margin:0;color:#3b2a20;font-weight:700;font-size:15px}
/* よくある質問 */
.faq{padding-block:72px 40px;max-width:760px}
.faq h2{-webkit-text-stroke:.02em currentColor;font-size:clamp(26px,3vw,36px);font-weight:800;margin-bottom:20px}
details{border-top:2px solid var(--line);padding:4px 0}
details:last-of-type{border-bottom:2px solid var(--line)}
summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:800;font-size:17px}
details p{color:var(--muted);padding-bottom:16px}
footer{padding-block:24px 48px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:13px;color:var(--muted)}
.footlinks{display:flex;flex-wrap:wrap;gap:8px 24px}
footer a{text-decoration:underline;text-underline-offset:.2em}
@media(max-width:420px){.store img{height:56px}.download .store img{height:60px}}
@media(min-width:760px){.steps .visual{min-height:430px}.steps .free{align-items:center}}
@media(min-width:900px){.wrap{width:min(1160px,calc(100% - 128px))}}
@media(max-width:1099px){.hero-copy{text-align:center}}
@media(max-width:899px){.top{text-align:center}.top .brand{margin-inline:auto}.top{display:flex;justify-content:center}}