:root{
  --bg:#fdfaf3;--bg2:#f7ede0;--card:#fffdf9;--ink:#2b211a;--body:#5c4c3d;--muted:#9c8b76;
  --line:#e6d9c4;--accent:#c0392b;--accent-2:#c9a227;--ember:#e0662f;
  --line-green:#06C755;
  --serif:'Fraunces',serif;--heading:'Zen Kaku Gothic New',sans-serif;--sans:'Noto Sans JP',sans-serif;
}

*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.9;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--heading);margin:0;line-height:1.5}
p{margin:0 0 1em}
ul,li{margin:0;padding:0;list-style:none}
a{color:inherit}
img{display:block;max-width:100%}

/* クラフト紙の質感（うっすら）— カード全般に */
.card-tex,.core,.bubble,.check,.faq details{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")
}

/* 和柄の帯（Canvaで作成した七宝パターン） */
.seigaiha{
  height:36px;
  background-image:url("../img/pattern.png");
  background-repeat:repeat-x;background-size:auto 36px;background-position:center
}

/* 麻の葉（和柄アクセント）— 物語セクションの薄い透かし */
.asanoha-bg{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cg fill='none' stroke='%23c0392b' stroke-width='.7' stroke-opacity='.14'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/%3E%3Cpath d='M28 0 L28 32 M0 16 L28 32 L56 16 M0 48 L28 32 L56 48'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 97px
}

/* reveal */
.in{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.in.is-in{opacity:1;transform:none}
html.no-motion .in{opacity:1;transform:none}

/* banner */
.banner{background:var(--ink);color:var(--bg);text-align:center;font-size:.8rem;padding:.6em 1em;letter-spacing:.02em}

/* header */
.head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.head__inner{max-width:760px;margin:0 auto;padding:.7em 1.2em;display:flex;align-items:center;gap:.6em}
.head__icon{width:32px;height:32px;flex:none}

/* slots (仮の絵) */
.slot{background:var(--bg2);position:relative;overflow:hidden}
.slot--icon{background:none}
.slot--kv{position:absolute;inset:0;z-index:0}

.kv-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.3;background:var(--accent)}
.kv-glow--a{width:38vw;height:38vw;top:-10%;left:-8%;animation:drift1 22s ease-in-out infinite alternate}
.kv-glow--b{width:28vw;height:28vw;bottom:-6%;right:2%;opacity:.26;background:var(--accent-2);animation:drift2 26s ease-in-out infinite alternate}
.kv-glow--c{width:18vw;height:18vw;top:38%;left:58%;opacity:.22;background:var(--ember);animation:drift1 18s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(4%,6%)}}
@keyframes drift2{to{transform:translate(-5%,-4%)}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6em 1.4em 3em;overflow:hidden}
.hero__inner{position:relative;z-index:2;max-width:640px}
.badge{display:inline-block;font-size:.78rem;letter-spacing:.14em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.4em 1em;margin-bottom:1.6em;background:var(--card)}
.hero__title{font-family:var(--heading);font-weight:700;font-size:clamp(2.4rem,7vw,4.6rem);letter-spacing:.01em;margin-bottom:.9em;color:var(--ink)}
.hero__sub{color:var(--body);font-size:1.02rem;max-width:30em;margin:0 auto 2em}

/* CTA フレーム — 目立たせる（かわいく: 丸ドット + 破線の贈り物タグ風） */
.cta-wrap{display:flex;flex-direction:column;align-items:center;gap:.9em}
.cta-frame{position:relative;padding:16px 18px;border:2.5px dashed var(--accent-2);border-radius:36px;background:color-mix(in srgb,var(--card) 75%,var(--bg2) 25%)}
.cta-frame .corner-a,.cta-frame .corner-b{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--bg)}
.cta-frame .corner-a{top:-6px;left:20px}
.cta-frame .corner-b{bottom:-6px;right:20px;background:var(--ember)}
.btn{font-family:var(--heading);display:inline-flex;align-items:center;gap:.55em;border:none;border-radius:999px;padding:1em 1.9em;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.btn--line{background:linear-gradient(135deg,var(--accent),var(--ember));color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn--line:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 45%,transparent)}
.cta-note{font-size:.8rem;color:var(--muted);text-align:center;max-width:26em;line-height:1.8}

/* sections */
.sec{max-width:760px;margin:0 auto;padding:4.5em 1.4em}
.sec--narrow{max-width:640px}
.eyebrow{font-size:.78rem;letter-spacing:.16em;color:var(--accent-2);margin-bottom:1em;font-family:var(--heading)}

.bubble{background:var(--card);border:1px solid var(--line);border-radius:22px 22px 22px 6px;padding:1.7em 1.9em;max-width:28em}
.core{background:var(--card);border-left:3px solid var(--accent-2);border-radius:4px 16px 16px 4px;padding:1.7em 1.9em}
.proof{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.6em 1.9em;color:var(--body);font-size:.95rem;line-height:2}

/* 期限警告（カウントダウン） */
.deadline{text-align:center;background:var(--card);border:1.5px solid var(--accent);border-radius:20px;padding:2em 1.6em}
.deadline__label{margin:0 0 .3em;color:var(--muted);font-size:1rem;letter-spacing:.06em}
.deadline__date{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--accent);font-size:1.3rem;margin:0 0 1.2em}
.deadline__clock{display:flex;justify-content:center;gap:.7em}
.deadline__unit{display:flex;flex-direction:column;align-items:center;gap:.2em}
.deadline__num{font-family:var(--heading);font-weight:700;font-size:clamp(1.5rem,5vw,2.1rem);background:linear-gradient(135deg,var(--accent),var(--ember));color:#fff;border-radius:10px;padding:.3em .5em;min-width:1.8em;line-height:1}
.deadline__u{font-size:.7rem;color:var(--muted)}
.deadline.is-over .deadline__date{color:var(--muted)}
.deadline__clock[hidden]{display:none}

/* 共感チェック（シグネチャー: 朱印スタンプ） */
.checks{display:grid;gap:12px;margin-top:1.2em;text-align:left;--stamp:var(--accent);--bounce:cubic-bezier(.34,1.56,.64,1)}
.check{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.1em 1.4em 1.1em 4.6em;font-weight:500;font-size:.98rem;text-align:left;transition:transform .2s var(--bounce),border-color .3s;width:100%;color:var(--ink);cursor:pointer;font-family:var(--sans)}
.check:hover{transform:scale(1.015);border-color:var(--stamp)}
.check::before{content:"";position:absolute;left:1.3em;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:1.5px dashed var(--stamp);opacity:.55}
.check.is-stamped{border-color:var(--stamp)}
.stamp{position:absolute;left:.85em;top:50%;width:48px;height:48px;border-radius:50%;border:2.5px solid var(--stamp);color:var(--stamp);display:grid;place-items:center;font-weight:700;font-size:.8rem;font-family:var(--heading);letter-spacing:.02em;transform:translateY(-50%) rotate(-14deg) scale(3);opacity:0;pointer-events:none}
.stamp::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid var(--stamp)}
.check.is-stamped .stamp{animation:stampIn .45s var(--bounce) forwards}
@keyframes stampIn{0%{opacity:0;transform:translateY(-50%) rotate(-30deg) scale(3)}60%{opacity:1;transform:translateY(-50%) rotate(-12deg) scale(.9)}100%{opacity:1;transform:translateY(-50%) rotate(-14deg) scale(1)}}
.verdict{margin-top:1.2em;min-height:2em;font-weight:700;color:var(--accent);font-size:1rem;font-family:var(--heading)}
.verdict[hidden]{display:none}

/* 開運スタンプ（サイト全体クリック） + 紙片 */
.kaiun-stamp{position:fixed;z-index:95;pointer-events:none;width:104px;height:104px;border-radius:50%;border:4px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-family:var(--heading);font-weight:700;font-size:1.5rem;letter-spacing:.06em;transform:translate(-50%,-50%) rotate(-12deg) scale(2.6);opacity:0;animation:kaiunStamp .75s cubic-bezier(.34,1.56,.64,1) forwards}
.kaiun-stamp::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px solid var(--accent)}
@keyframes kaiunStamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-28deg) scale(2.8)}50%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(.92)}68%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.04)}100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
.bit{position:fixed;z-index:90;width:7px;height:7px;border-radius:1px;pointer-events:none;animation:bit .9s cubic-bezier(.2,.8,.4,1) forwards}
@keyframes bit{to{transform:translate(var(--dx),var(--dy)) rotate(540deg);opacity:0}}

/* 物語 */
.sec--story{position:relative}
.story__h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.7;max-width:18em;margin:0 auto 1.4em;text-align:center;font-style:italic;color:var(--accent)}
.story__body{color:var(--body);max-width:640px;margin:0 auto}

.offers{display:flex;flex-direction:column;gap:12px}
.offer{background:var(--card);border:1px solid var(--line);border-radius:16px;display:flex;align-items:flex-start;gap:1.1em;padding:1.4em 1.5em}
.offer__num{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin:0;flex:none}
.offer__num--1{color:var(--accent)}
.offer__num--2{color:var(--ember)}
.offer__num--3{color:var(--accent-2)}
.offer__title{margin:0 0 .3em;font-weight:700}
.offer__body{margin:0;color:var(--body);font-size:.92rem}

.faq{display:flex;flex-direction:column;gap:.8em}
.faq details{border:1px solid var(--line);border-radius:12px;padding:1em 1.3em;background:var(--card)}
.faq summary{cursor:pointer;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent-2)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:.8em;color:var(--body)}

.ps{border-top:1px solid var(--line);padding-top:2em}
.ps__label{font-family:var(--heading);color:var(--muted);font-size:.85rem;letter-spacing:.1em;margin-bottom:.6em}

.sec--final{text-align:center;padding-top:5em;padding-bottom:5em}
.sec--final h2{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,4.5vw,2.3rem);margin-bottom:1.4em;color:var(--ink)}

.foot{text-align:center;padding:2.6em 1.4em 3em;color:var(--muted);font-size:.8rem}

@media (max-width:640px){
  .sec{padding:3.4em 1.2em}
  .hero{padding-top:5em}
  .check{padding-left:4em}
}

@media (prefers-reduced-motion: reduce){
  .in{transition:none}
  .kv-glow{animation:none}
}