:root{
  --washi:#FAF7F0; --ink:#26241F; --ink-soft:#6B675E; --line:#E4DFD3;
  --indigo:#1F3A5F; --indigo-deep:#162944; --amber:#D9A441;
  --accent:#C73E2E; --accent-soft:#F6E3DF; --card:#FFFFFF;
  --serif:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;background:var(--washi);color:var(--ink);line-height:1.8}
img{max-width:100%}
.inner{max-width:840px;margin:0 auto;padding:0 20px}
/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(250,247,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{font-weight:700;font-size:20px;letter-spacing:.08em}
.logo small{font-size:10px;font-weight:500;color:var(--ink-soft);margin-left:8px;letter-spacing:.14em}
.nav-cta{font-family:inherit;font-size:13px;font-weight:700;color:#fff;background:var(--accent);border:none;border-radius:999px;padding:9px 18px;cursor:pointer}
/* hero */
.hero{background:linear-gradient(175deg, var(--indigo) 0%, var(--indigo-deep) 100%);color:#fff;position:relative;overflow:hidden;padding:72px 0 84px}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:14px;background:radial-gradient(circle at 14px -5px, transparent 15px, var(--washi) 16px);background-size:29px 18px;background-position:bottom}
.steam{position:absolute;top:18%;left:50%;width:3px;height:52px;border-radius:3px;background:rgba(255,255,255,.16);filter:blur(4px);animation:rise 4.5s ease-in-out infinite}
.steam.s2{left:56%;height:40px;animation-delay:1.4s}
.steam.s3{left:44%;height:44px;animation-delay:2.6s}
@keyframes rise{0%{transform:translateY(16px) scaleY(.7);opacity:0}35%{opacity:1}100%{transform:translateY(-44px) scaleY(1.25);opacity:0}}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.24em;opacity:.75}
.hero h1{font-family:var(--serif);font-size:clamp(30px,6vw,44px);font-weight:700;letter-spacing:.04em;line-height:1.5;margin-top:16px}
.hero .sub{font-size:15px;line-height:2;opacity:.92;margin-top:18px;max-width:560px}
.cta-main{display:inline-block;font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--accent);border:none;border-radius:999px;padding:16px 34px;margin-top:28px;cursor:pointer;box-shadow:0 8px 24px rgba(199,62,46,.4);transition:transform .12s}
.cta-main:active{transform:scale(.97)}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.trust span{font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 13px;opacity:.9}
/* sections */
section{padding:64px 0}
section.tight{padding-top:0}
.sec-label{font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--accent);text-align:center}
h2{font-size:clamp(22px,4.4vw,28px);font-weight:700;letter-spacing:.05em;text-align:center;margin-top:10px}
.sec-sub{font-size:14px;color:var(--ink-soft);text-align:center;margin-top:12px;line-height:2}
/* pains */
.pains{margin-top:36px;display:grid;gap:14px}
.pain{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;font-size:15px;font-weight:500;position:relative;padding-left:52px}
.pain::before{content:'「';position:absolute;left:20px;top:14px;font-family:var(--serif);font-size:26px;color:var(--amber)}
.pain-close{font-size:14px;text-align:center;margin-top:26px;color:var(--ink-soft)}
.pain-close b{color:var(--ink)}
/* steps */
.steps{margin-top:40px;display:grid;gap:18px}
@media(min-width:760px){.steps{grid-template-columns:1fr 1fr 1fr;align-items:start}}
.step{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 22px}
.step .num{font-size:13px;font-weight:700;color:#fff;background:var(--indigo);border-radius:999px;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.step h3{font-size:17px;font-weight:700;margin-top:14px}
.step p{font-size:13px;color:var(--ink-soft);margin-top:8px;line-height:1.9}
/* POP mock */
.pop{margin:18px auto 0;width:200px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px;text-align:center;box-shadow:0 10px 26px rgba(30,26,18,.12);transform:rotate(-1.5deg)}
.pop .pl{font-size:10px;font-weight:700;letter-spacing:.3em;color:var(--ink-soft)}
.pop .pc{font-size:19px;font-weight:700;letter-spacing:.04em;margin-top:6px}
.qr{width:104px;height:104px;margin:12px auto 0;display:grid;grid-template-columns:repeat(17,1fr);grid-template-rows:repeat(17,1fr);background:#fff}
.qr i{background:transparent;border-radius:1px}
.qr i.on{background:#1B1A17}
.pop .ps{font-size:9.5px;color:var(--ink-soft);line-height:1.7;margin-top:12px}
.pop .pn{font-family:var(--serif);font-size:12px;font-weight:700;margin-top:10px;border-top:1px solid var(--line);padding-top:9px}
/* values */
.vals{margin-top:40px;display:grid;gap:18px}
@media(min-width:760px){.vals{grid-template-columns:1fr 1fr 1fr}}
.val{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 22px;display:flex;flex-direction:column}
.val h3{font-size:17px;font-weight:700}
.val p{font-size:13px;color:var(--ink-soft);margin-top:8px;line-height:1.9}
.val .vis{margin-top:16px}
.heat{display:grid;grid-template-columns:20px repeat(12,1fr);gap:2px;align-items:center}
.heat .dlab{font-size:8.5px;color:var(--ink-soft)}
.heat .cell{aspect-ratio:1;border-radius:2px;background:#F0EBDD}
.heat .cell.h1{background:#EBD9A8}
.heat .cell.h2{background:#E2BC63}
.heat .cell.h3{background:#D9A441}
.xpost{background:#F7F4EC;border-radius:12px;padding:13px 14px;font-size:12px;line-height:1.8}
.xpost .xh{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.xpost .av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#D9A441,#C73E2E)}
.xpost .xn{font-weight:700;font-size:11.5px}
.xpost .xn small{font-weight:400;color:var(--ink-soft);margin-left:4px}
.xpost .url{color:var(--indigo);text-decoration:underline}
.poschips{display:flex;flex-wrap:wrap;gap:7px}
.poschips span{font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:8px 14px}
.val .note{font-size:11px;color:var(--ink-soft);margin-top:10px}
/* FAQ */
.faq{margin-top:36px;display:grid;gap:12px}
.qa{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.qa .q{font-size:14.5px;font-weight:700;position:relative;padding-left:26px}
.qa .q::before{content:'Q';position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
.qa .a{font-size:13.5px;color:var(--ink-soft);margin-top:8px;line-height:1.9;position:relative;padding-left:26px}
.qa .a::before{content:'A';position:absolute;left:0;top:0;color:var(--indigo);font-weight:700}
/* form */
.form-sec{background:var(--indigo);color:#fff;position:relative;overflow:hidden}
.form-sec::before{content:'';position:absolute;left:0;right:0;top:-1px;height:14px;background:radial-gradient(circle at 14px 19px, transparent 15px, var(--washi) 16px);background-size:29px 18px;background-position:top;transform:rotate(180deg)}
.form-sec .sec-label{color:var(--amber)}
.form-sec h2{color:#fff}
.form-card{background:#fff;color:var(--ink);border-radius:20px;padding:28px 24px;max-width:440px;margin:36px auto 0;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.f-label{font-size:12px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.req{font-size:9px;color:#fff;background:var(--accent);border-radius:4px;padding:2px 6px;font-weight:700}
.f-in{width:100%;font-family:inherit;font-size:14px;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;background:#FDFCF9;margin-bottom:16px;outline:none}
.f-in:focus{border-color:var(--indigo)}
.f-note{font-size:11.5px;color:var(--ink-soft);line-height:1.8;margin:2px 0 16px}
.f-agree{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:16px}
.f-cta{width:100%;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--accent);border:none;border-radius:999px;padding:15px;cursor:pointer;box-shadow:0 6px 18px rgba(199,62,46,.35)}
.f-sub{font-size:11px;color:var(--ink-soft);text-align:center;margin-top:10px}
/* footer */
footer{padding:36px 0 48px;text-align:center}
footer .flinks{font-size:12px;color:var(--ink-soft)}
footer .flinks a{color:var(--ink-soft);text-decoration:none;margin:0 10px}
footer .fop{font-size:11px;color:var(--ink-soft);margin-top:14px;opacity:.8}
/* toast */
.toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(8px);background:rgba(30,28,22,.92);color:#fff;font-size:13px;padding:11px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%)}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}