/* =========================================================
   配色・基本（カジュアル寄りのお祭りトーン）
   ========================================================= */
:root{
  --black:#070a16;
  --navy:#0c1530;
  --navy2:#13204a;
  --panel:#101b3d;
  --ink:#fdf8ec;
  --muted:#aeb6d6;
  --gold:#f4c64b;
  --gold-lt:#ffe39a;
  --gold-dk:#b4892a;
  --red:#e83247;
  --red-lt:#ff6172;
  --line:rgba(244,198,75,.26);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP",sans-serif;
  background:var(--black);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.85;
}
.cinzel{font-family:"Cinzel",serif}

/* 背景：添付の祭り背景を全面に。視認性のため暗めオーバーレイ */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
   linear-gradient(180deg,rgba(7,10,22,.62),rgba(7,10,22,.78) 55%,rgba(7,10,22,.92)),
   url("./images/hero-bg.png") center top / cover no-repeat fixed,
   #070a16;
}
.bg-fx::after{content:"";position:absolute;inset:0;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* 花火（CSS） */
.fireworks{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fw{position:absolute;width:6px;height:6px;border-radius:50%;opacity:0}
.fw::before,.fw::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:currentColor;box-shadow:
  0 -42px currentColor,0 42px currentColor,42px 0 currentColor,-42px 0 currentColor,
  30px -30px currentColor,30px 30px currentColor,-30px 30px currentColor,-30px -30px currentColor,
  0 -26px currentColor,0 26px currentColor,26px 0 currentColor,-26px 0 currentColor,
  18px -18px currentColor,18px 18px currentColor,-18px 18px currentColor,-18px -18px currentColor;}
@keyframes burst{
  0%{opacity:0;transform:scale(.1)}
  8%{opacity:1}
  60%{opacity:.9}
  100%{opacity:0;transform:scale(1.25)}
}

/* 紙吹雪（前面） */
.confetti{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.cf{position:absolute;top:-20px;width:9px;height:14px;opacity:.9;animation:fall linear infinite}
@keyframes fall{
  0%{transform:translateY(-10vh) rotateZ(0deg) rotateY(0deg);opacity:0}
  10%{opacity:1}
  100%{transform:translateY(110vh) rotateZ(540deg) rotateY(360deg);opacity:.85}
}

.wrap{position:relative;z-index:5;max-width:1120px;margin:0 auto;padding:0 22px}

/* 本文セクションは可読性のため、背景画像の上に暗い帯を敷く */
.sec{position:relative}
.sec::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,10,22,.86),rgba(7,10,22,.9))}

.rule{display:flex;align-items:center;justify-content:center;gap:14px}
.rule::before,.rule::after{content:"";height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--gold))}
.rule::after{background:linear-gradient(90deg,var(--gold),transparent)}
.rule .dia{width:8px;height:8px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 10px var(--gold)}

.eyebrow{font-family:"Cinzel",serif;font-size:13px;letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.sec{padding:clamp(60px,10vw,104px) 0}
.sec-title{text-align:center;margin-bottom:44px}
.sec-title h2{font-weight:900;font-size:clamp(25px,6vw,40px);letter-spacing:.06em;margin:12px 0 16px;line-height:1.3}
.sec-title h2 em{font-style:normal;background:linear-gradient(180deg,var(--gold-lt),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ヘッダー */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(7,10,22,.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{max-width:1120px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;justify-content:space-between}
.nav .brand-logo{height:34px;width:auto;display:block}
.nav a.cta{font-size:13px;font-weight:700;letter-spacing:.04em;padding:10px 18px;border-radius:999px;color:#2a1d05;text-decoration:none;background:linear-gradient(135deg,var(--gold-lt),var(--gold));box-shadow:0 6px 18px rgba(244,198,75,.35);transition:.3s;white-space:nowrap}
.nav a.cta:hover{transform:translateY(-2px)}

/* ① ファーストビュー */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:110px 0 70px;isolation:isolate}
/* ヒーローは背景画像をくっきり見せる（オーバーレイ薄め） */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,10,22,.28),rgba(7,10,22,.42) 70%,rgba(7,10,22,.78)),
   url("./images/hero-bg.png") center / cover no-repeat;}
.event-logo{width:min(92%,660px);height:auto;margin-bottom:8px;opacity:0;animation:pop 1s .2s cubic-bezier(.2,1.2,.3,1) forwards;filter:drop-shadow(0 8px 30px rgba(0,0,0,.6))}
.logo-slot-ph{width:min(80%,520px);aspect-ratio:16/8;margin-bottom:20px;border:1px dashed var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
@keyframes pop{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:none}}
.hero .period-pill{margin-top:26px;display:inline-flex;flex-direction:column;gap:4px;align-items:center;padding:14px 30px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(7,10,22,.7),rgba(7,10,22,.55));backdrop-filter:blur(4px);box-shadow:0 8px 30px rgba(0,0,0,.4);opacity:0;animation:fadeUp 1s .8s forwards}
.hero .period-pill .l{font-weight:700;font-size:12px;letter-spacing:.18em;color:var(--gold)}
.hero .period-pill .d{font-weight:900;font-size:clamp(18px,4.6vw,26px);letter-spacing:.03em}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:"Cinzel",serif;font-size:11px;letter-spacing:.26em;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px;animation:bob 2.2s infinite}
.scroll-cue .bar{width:1px;height:32px;background:linear-gradient(180deg,var(--gold),transparent)}
@keyframes bob{0%,100%{transform:translate(-50%,0);opacity:.6}50%{transform:translate(-50%,7px);opacity:1}}

/* ② 買取店紹介 */
.about{max-width:760px;margin:0 auto}
.about .card{padding:clamp(30px,6vw,46px) clamp(22px,5vw,40px);border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(16,27,61,.7),rgba(12,21,48,.4))}
.about .lead{font-size:clamp(18px,3.6vw,22px);font-weight:900;text-align:center;letter-spacing:.03em;margin-bottom:8px}
.about .lead .y{background:linear-gradient(180deg,var(--gold-lt),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.about .body{font-size:15.5px;line-height:2.05;color:#e7e3d4}
.about .body p{margin:14px 0}
.about .feat{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
@media(max-width:560px){.about .feat{grid-template-columns:1fr}}
.about .feat .f{display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:12px;background:rgba(244,198,75,.07);border:1px solid var(--line);font-size:14px;font-weight:500}
.about .feat .f .ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--gold-lt)}
.about .feat .f .ic svg{width:22px;height:22px;display:block}
.about .hours{text-align:center;margin-top:18px;font-weight:700;letter-spacing:.04em;color:var(--gold-lt)}
.about .closing{text-align:center;font-weight:900;font-size:17px;margin-top:20px}
.shop-media{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
@media(max-width:640px){.shop-media{grid-template-columns:1fr}}
.shop-media figure{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(7,10,22,.4)}
.shop-media img{display:block;width:100%;height:auto}
.shop-media figcaption{padding:12px 14px;font-size:13px;line-height:1.7;color:var(--muted);text-align:center}
.shop-map figcaption{display:flex;flex-direction:column;gap:4px}
.shop-map .addr{color:#e7e3d4;font-weight:500}
.shop-map .access{font-weight:900;font-size:15px;background:linear-gradient(180deg,var(--gold-lt),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.shop-map .hours-line{font-weight:700;font-size:13.5px;color:#e7e3d4;margin-top:2px}
.x-cta-wrap{text-align:center;margin-top:26px}
.x-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;background:#000;color:#fff;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.03em;border:1px solid rgba(255,255,255,.18);transition:.25s;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.x-cta svg{width:18px;height:18px}
.x-cta:hover{transform:translateY(-2px);background:#111;box-shadow:0 12px 28px rgba(0,0,0,.6)}

/* ③ イベント期間 */
.period-block{position:relative;text-align:center;padding:clamp(46px,9vw,76px) 22px;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(232,50,71,.16),rgba(12,21,48,.6) 55%,rgba(244,198,75,.14))}
.period-block .yr{font-weight:900;font-size:clamp(26px,7vw,46px);letter-spacing:.04em;background:linear-gradient(180deg,#fff,var(--gold-lt) 60%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.2}
.period-block .md{font-weight:900;font-size:clamp(34px,10vw,76px);letter-spacing:.02em;line-height:1.15;background:linear-gradient(180deg,#fff,var(--gold-lt) 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:6px}

/* ④⑤ キャンペーン一覧 */
.camps{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:640px){.camps{grid-template-columns:1fr}}
.camp{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s}
.camp:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 0 1px var(--gold) inset}
.camp .thumb{position:relative;aspect-ratio:1800/1200;background:linear-gradient(135deg,#16224a,#0c1530);overflow:hidden}
.camp .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.camp .thumb .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted)}
.camp .thumb .ph .n{font-family:"Cinzel",serif;font-size:13px;letter-spacing:.18em}
.camp .thumb .ph .s{font-size:11px;opacity:.6}
.camp .num{position:absolute;top:11px;left:11px;z-index:2;font-family:"Cinzel",serif;font-size:12px;letter-spacing:.1em;color:#2a1d05;background:linear-gradient(135deg,var(--gold-lt),var(--gold));padding:4px 11px;border-radius:999px;font-weight:700}
.camp .info{padding:20px 20px 22px}
.camp .info h3{font-weight:900;font-size:17px;letter-spacing:.02em;margin-bottom:7px}
.camp .info p{color:var(--muted);font-size:13px;line-height:1.75;min-height:44px;margin-bottom:16px}
.btn-gold{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px;border-radius:11px;font-weight:900;font-size:15px;letter-spacing:.03em;color:#2a1d05;text-decoration:none;cursor:pointer;border:none;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold) 60%,var(--gold-dk));background-size:200% 100%;background-position:0 0;
  box-shadow:0 8px 20px rgba(244,198,75,.3);transition:background-position .5s,transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);transition:left .6s}
.btn-gold:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 12px 28px rgba(244,198,75,.5)}
.btn-gold:hover::after{left:130%}
.btn-gold .ar{transition:transform .3s}
.btn-gold:hover .ar{transform:translateX(5px)}
.camp.secret .thumb{background:radial-gradient(circle at 50% 45%,#22183c,#070a16)}
.camp.secret .qmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:clamp(70px,16vw,116px);
  background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk));-webkit-background-clip:text;background-clip:text;color:transparent;animation:pulseq 2.2s infinite}
@keyframes pulseq{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.camp.secret .info h3{color:var(--gold-lt)}
.camp.secret .qmark.soon{font-family:"Noto Sans JP",sans-serif;font-weight:900;font-size:clamp(26px,5.4vw,38px);letter-spacing:.08em;line-height:1.45;text-align:center;animation:goldshine 3s linear infinite;
  background:linear-gradient(100deg,#8a6a1e 0%,#f7e08a 25%,#fff6d0 42%,#f4c64b 50%,#fff6d0 58%,#f7e08a 75%,#8a6a1e 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:0.5px rgba(120,90,20,.5);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(244,198,75,.45))}
@keyframes goldshine{0%{background-position:0% 50%}100%{background-position:220% 50%}}
.btn-locked{background:linear-gradient(135deg,#283156,#161f3c);color:var(--muted);box-shadow:none;cursor:not-allowed}
.btn-locked:hover{transform:none}.btn-locked::after{display:none}

/* ⑥ 運営メッセージ */
.message{max-width:720px;margin:0 auto;text-align:center;padding:clamp(38px,7vw,60px) 30px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(244,198,75,.08),rgba(12,21,48,.5))}
.message p{font-size:clamp(16px,3vw,19px);line-height:2.05;letter-spacing:.03em}
.message .sign{margin-top:22px;font-family:"Cinzel",serif;letter-spacing:.18em;color:var(--gold);font-size:13px}

footer{border-top:1px solid var(--line);padding:34px 22px;text-align:center}
footer .brand-logo{height:30px;width:auto;margin-bottom:10px;opacity:.9}
footer small{display:block;color:var(--muted);font-size:12px;letter-spacing:.06em}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .85s ease,transform .85s ease}
.reveal.in{opacity:1;transform:none}

/* ★ 爆還元バナー */
.bonus-banner{position:relative;overflow:hidden;padding:clamp(70px,13vw,120px) 0;
  background:
   radial-gradient(120% 90% at 50% 120%,rgba(232,50,71,.5),transparent 60%),
   linear-gradient(180deg,#1a0a16,#2a0d12 45%,#1a0a16);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bonus-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bonus-fx .bfw{position:absolute;width:5px;height:5px;border-radius:50%;opacity:0}
.bonus-fx .bfw::before,.bonus-fx .bfw::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:currentColor;box-shadow:
  0 -36px currentColor,0 36px currentColor,36px 0 currentColor,-36px 0 currentColor,
  26px -26px currentColor,26px 26px currentColor,-26px 26px currentColor,-26px -26px currentColor,
  0 -22px currentColor,0 22px currentColor,22px 0 currentColor,-22px 0 currentColor}
.bonus-fx .fly{position:absolute;font-size:30px;will-change:transform;animation:flyacross linear infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
@keyframes flyacross{
  0%{transform:translate(-12vw,40px) rotate(0deg);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translate(112vw,-60px) rotate(420deg);opacity:0}
}
.bonus-inner{position:relative;z-index:3;text-align:center}
.bonus-sub{font-family:"Cinzel",serif;letter-spacing:.28em;font-size:13px;color:var(--gold-lt);text-transform:uppercase}
.bonus-title{font-weight:900;line-height:1.35;letter-spacing:.04em;font-size:clamp(28px,7vw,54px);margin-top:16px;text-shadow:0 4px 20px rgba(0,0,0,.6)}
.bonus-title .flash{
  background:linear-gradient(90deg,#ff0000,#ff8a00,#ffe600,#27d827,#00b3ff,#2a3cff,#b300ff,#ff0000);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rainbowflow 4s linear infinite}
@keyframes rainbowflow{to{background-position:200% 50%}}

@media(prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none}.cf,.fw,.bonus-fx .fly,.bonus-fx .bfw{display:none}.bonus-title .flash{animation:none}}