:root{
 --ink:#26211d;
 --ink2:#5d544c;
 --muted:#8f857a;
 --cream:#fff8ef;
 --tint:#fff1e3;
 --line:#f0e3d2;
 --coral:#ff6b4a;
 --coral-d:#e8532f;
 --navy:#14213d;
 --mint:#3fbf9f;
 --sun:#ffc94a;
 --maru:"Zen Maru Gothic",var(--jp);
 --jp:"Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--jp);font-size:16px;line-height:1.9;overflow-x:hidden}
a{color:inherit}
h1,h2,h3{font-family:var(--maru);line-height:1.45;margin:0}
img{max-width:100%;height:auto;display:block}
.in{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 30px;border-radius:999px;font-weight:700;text-decoration:none;font-size:15px;transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 8px 0 -2px #c9411f}
.btn-coral:hover{background:var(--coral-d)}
.btn-ghost{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.btn-white{background:#fff;color:var(--coral-d)}
.btn-sm{padding:9px 20px;font-size:14px;box-shadow:0 5px 0 -1px #c9411f}

/* ヘッダー */
.jh{position:sticky;top:0;z-index:50;background:rgba(255,248,239,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.jh .in{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--maru);font-weight:900;font-size:19px;line-height:1.15;white-space:nowrap}
.brand small{display:block;font-size:11px;font-weight:700;color:var(--coral)}
.brand .mark{width:38px;height:38px;flex:none}
.jnav{display:flex;gap:24px;margin-left:auto;font-size:14px;font-weight:500}
.jnav a{text-decoration:none;color:var(--ink2)}
.jnav a:hover{color:var(--coral-d)}

/* ヒーロー */
.hero{padding:64px 0 88px;position:relative;overflow:hidden;background:radial-gradient(600px 400px at 85% 20%,#ffe1cf,transparent 70%),radial-gradient(500px 360px at 0% 100%,#fff0c9,transparent 70%)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.pill{display:inline-block;margin:0 0 18px;padding:6px 16px;border-radius:999px;background:#fff;border:2px solid var(--ink);font-weight:700;font-size:14px}
.hero h1{font-size:clamp(32px,4.4vw,50px);font-weight:900;line-height:1.3}
.hero h1 em{font-style:normal;color:var(--coral);background:linear-gradient(transparent 68%,#ffe08a 68% 92%,transparent 92%)}
.lead{font-size:18px;color:var(--ink2);margin:20px 0 30px}
.hero-act{display:flex;gap:14px;flex-wrap:wrap}
.hero-points{list-style:none;padding:0;margin:28px 0 0;display:flex;gap:20px;flex-wrap:wrap;font-size:14px;font-weight:500}
.hero-points li{display:flex;align-items:center;gap:6px}
.hero-points svg{width:18px;height:18px;color:var(--mint)}

.hero-visual{position:relative;height:520px}
.chat{position:absolute;left:0;top:200px;width:330px;background:#fff;border-radius:22px;padding:16px;box-shadow:0 24px 50px rgba(120,70,30,.14);border:2px solid var(--ink);z-index:2;transform:rotate(-2deg)}
.chat-top{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:10px}
.chat-top .dot{width:10px;height:10px;border-radius:50%;background:var(--mint)}
.msg{font-size:13px;line-height:1.7;padding:10px 13px;border-radius:14px;margin-bottom:8px;max-width:88%}
.msg.me{margin-left:auto;background:var(--coral);color:#fff;border-bottom-right-radius:4px}
.msg.ai{background:#f6efe6;border-bottom-left-radius:4px}
.typing{display:flex;gap:5px;width:62px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.phone{position:absolute;right:10px;top:0;width:250px;height:510px;border-radius:40px;background:var(--ink);padding:10px;box-shadow:0 30px 60px rgba(120,70,30,.22);transform:rotate(3deg)}
.ph-screen{height:100%;border-radius:31px;background:#fff;padding:34px 16px 16px;position:relative}
.ph-shop{margin:0;font-size:11px;color:var(--muted);font-weight:700}
.ph-h{margin:0 0 14px;font-family:var(--maru);font-weight:900;font-size:22px}
.ph-days,.ph-times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.ph-days span{font-size:11px;text-align:center;border-radius:12px;background:#f6efe6;padding:6px 0;line-height:1.3}
.ph-days b{display:block;font-size:17px}
.ph-times span{font-size:11px;text-align:center;border-radius:10px;border:1.5px solid var(--line);padding:6px 0;font-weight:700}
.ph-days .on,.ph-times .on{background:var(--coral);color:#fff;border-color:var(--coral)}
.ph-row{display:flex;justify-content:space-between;font-size:13px;padding:11px 12px;border-radius:12px;background:#f6efe6;margin-bottom:8px}
.ph-row.new{background:#fff;border:2px dashed var(--coral);color:var(--muted)}
.ph-row.new b{font-weight:500;font-size:12px}
.ph-btn{position:absolute;left:16px;right:16px;bottom:18px;height:46px;border-radius:14px;background:var(--coral);color:#fff;font-weight:700;display:grid;place-items:center}
.deco{position:absolute;border-radius:50%;z-index:0}
.d1{width:90px;height:90px;background:var(--sun);left:30%;bottom:10px}
.d2{width:26px;height:26px;background:var(--mint);left:4%;bottom:90px}
.d3{width:46px;height:46px;border:6px solid var(--coral);right:-6px;bottom:40px}

/* セクション共通 */
.sec{padding:96px 0}
.sec-tint{background:var(--tint)}
.sec-head{text-align:center;margin-bottom:48px}
.label{display:inline-block;margin:0 0 12px;padding:4px 14px;border-radius:999px;background:var(--coral);color:#fff;font-size:13px;font-weight:700}
.sec-head h2{font-size:clamp(26px,3.4vw,38px);font-weight:900}
.sec-lead{color:var(--ink2);margin:14px auto 0;max-width:640px}

.worry{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.worry li{background:#fff;border-radius:22px;padding:26px 22px;border:2px solid var(--line);position:relative}
.worry li:before{content:"";position:absolute;left:24px;top:-12px;width:24px;height:24px;border-radius:50%;background:var(--sun)}
.worry h3{font-size:18px;margin-bottom:10px}
.worry p{margin:0;font-size:14px;color:var(--ink2)}

.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.step{background:#fff;border-radius:26px;padding:34px 28px;text-align:center;position:relative;box-shadow:0 10px 0 -4px var(--line)}
.step:not(:last-child):after{content:"";position:absolute;right:-22px;top:50%;width:18px;height:18px;border-top:4px solid var(--coral);border-right:4px solid var(--coral);transform:translateY(-50%) rotate(45deg)}
.step-ic{width:76px;height:76px;margin:0 auto 14px;border-radius:24px;background:var(--tint);display:grid;place-items:center;color:var(--coral)}
.step-ic svg{width:38px;height:38px}
.step-n{margin:0;font-size:12px;font-weight:700;color:var(--coral)}
.step h3{font-size:26px;font-weight:900;margin:2px 0 10px}
.step p{margin:0;font-size:14.5px;color:var(--ink2);text-align:left}

.band{position:relative;height:420px;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(38,33,29,.72),rgba(38,33,29,.15))}
.band-in{position:relative;z-index:1;height:100%;display:flex;align-items:center;max-width:1120px;margin:0 auto;padding:0 24px}
.band-in p{margin:0;color:#fff;font-family:var(--maru);font-weight:900;font-size:clamp(22px,3vw,34px);line-height:1.6}

.cur{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px}
.cur li{display:flex;gap:18px;align-items:flex-start;background:#fff;border-radius:18px;padding:20px 22px;border:2px solid var(--line)}
.wk{flex:none;width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--maru);font-weight:900;font-size:17px}
.cur h3{font-size:18px;margin:4px 0 2px}
.cur p{margin:0;font-size:14px;color:var(--ink2)}

.exs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ex{margin:0;background:#fff;border-radius:20px;overflow:hidden;border:2px solid var(--line)}
.ex img{aspect-ratio:16/10;object-fit:cover;width:100%}
.ex figcaption{padding:14px 16px 18px;font-size:13.5px;color:var(--ink2);line-height:1.7}
.ex b{display:block;font-family:var(--maru);font-size:17px;color:var(--ink)}

.plans{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{background:#fff;border-radius:26px;padding:34px 28px;border:2px solid var(--line);position:relative}
.plan-hot{border:3px solid var(--coral);transform:translateY(-10px);box-shadow:0 20px 40px rgba(255,107,74,.16)}
.ribbon{position:absolute;top:-15px;left:50%;transform:translateX(-50%);margin:0;background:var(--coral);color:#fff;font-size:12px;font-weight:700;padding:4px 16px;border-radius:999px;white-space:nowrap}
.plan h3{font-size:24px;font-weight:900;text-align:center}
.plan-sub{margin:0;text-align:center;color:var(--muted);font-size:13px}
.price{margin:16px 0 18px;padding:14px;border-radius:14px;background:var(--tint);text-align:center;font-weight:700;color:var(--ink2);font-size:15px}
.plan ul{list-style:none;padding:0;margin:0;font-size:14.5px}
.plan li{display:flex;gap:8px;align-items:flex-start;padding:6px 0}
.plan li svg{width:18px;height:18px;flex:none;margin-top:5px;color:var(--mint)}

.flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.flow li{background:#fff;border-radius:22px;padding:28px 26px;position:relative}
.fn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sun);font-family:var(--maru);font-weight:900;font-size:20px;margin-bottom:12px}
.flow h3{font-size:20px;margin-bottom:6px}
.flow p{margin:0;font-size:14.5px;color:var(--ink2)}

.faq details{background:#fff;border-radius:18px;border:2px solid var(--line);margin-bottom:12px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:18px 30px 18px 0;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"Q";color:var(--coral);font-family:var(--maru);font-weight:900;margin-right:10px}
.faq summary:after{content:"+";position:absolute;right:0;top:14px;font-size:24px;color:var(--coral);font-weight:500}
.faq details[open] summary:after{content:"−"}
.faq details p{margin:0 0 18px;color:var(--ink2);font-size:15px}

.join{background:var(--coral);color:#fff;text-align:center;padding:84px 0;position:relative;overflow:hidden}
.join:before,.join:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.12)}
.join:before{width:300px;height:300px;left:-80px;top:-120px}
.join:after{width:220px;height:220px;right:-50px;bottom:-90px}
.join h2{font-size:clamp(28px,4vw,42px);font-weight:900}
.join p{margin:12px 0 28px}
.join .join-note{margin:22px 0 0;font-size:13px;opacity:.85}

.jf{background:var(--ink);color:#d8cfc4;padding:44px 0;font-size:14px}
.jf .in{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.brand-w{color:#fff}
.jf p{margin:0}
.jf .copy{margin-left:auto;color:#8f857a;font-size:12px}
.nf{text-align:center;padding:120px 24px}

@media (max-width:980px){
 .jnav{display:none}
 .jh .btn-sm{margin-left:auto}
 .hero-grid{grid-template-columns:1fr}
 .hero-visual{height:480px;max-width:560px;margin:0 auto;width:100%}
 .worry{grid-template-columns:repeat(2,1fr)}
 .exs{grid-template-columns:repeat(2,1fr)}
 .plans{grid-template-columns:1fr;max-width:480px;margin:0 auto}
 .plan-hot{transform:none}
 .flow{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
 .brand{font-size:16px}.brand .mark{width:32px;height:32px}
 .hero{padding:40px 0 60px}
 .lead{font-size:16px}
 .lead br{display:none}
 .hero-act .btn{width:100%}
 .hero-visual{height:520px}
 .chat{width:230px;top:160px;padding:12px}
 .msg{font-size:12px}
 .phone{width:210px;height:440px;right:0}
 .ph-h{font-size:18px}
 .sec{padding:68px 0}
 .worry,.steps,.cur,.flow{grid-template-columns:1fr}
 .step:not(:last-child):after{right:50%;top:auto;bottom:-20px;transform:translateX(50%) rotate(135deg)}
 .exs{grid-template-columns:1fr}
 .band{height:300px}
 .jf .copy{margin-left:0}
}