:root{
  --navy:#1F2D4F;--navy-deep:#002472;--blue:#1E6FC0;--gold:#A8874E;--gold-line:#C9B48A;
  --ink:#1F2D4F;--sub:#4A5068;--muted:#7A8090;--pale:#EAF2FA;--line:#DCE2EA;--bg:#FFFFFF;--page:#EEF1F5;
  --serif:'Noto Serif JP','Yu Mincho','YuMincho','Hiragino Mincho ProN',serif;
  --sans:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--page);-webkit-text-size-adjust:100%}
.page img{display:block;max-width:100%;height:auto;border:0}
.page{max-width:480px;margin:0 auto;background:var(--bg);overflow:hidden;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}

/* ===== メインビジュアル ===== */
.hero{position:relative;margin:0}
.hero .pop{position:absolute;height:auto;transform-origin:50% 100%;pointer-events:none}
.glint{position:absolute;display:block;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) no-repeat;
  background-size:250% 100%;background-position:150% 0;opacity:0}
.bubble{--tx:-14%;position:absolute;transform:translateX(var(--tx));transform-origin:14% 100%;background:var(--navy-deep);color:#fff;
  font-weight:700;font-size:clamp(10px,2.8vw,13.5px);line-height:1.45;letter-spacing:.06em;text-align:center;
  white-space:nowrap;padding:.45em .9em;border-radius:.6em;box-shadow:0 3px 10px rgba(0,36,114,.25)}
.bubble::after{content:"";position:absolute;left:14%;bottom:-.45em;transform:translateX(-50%);
  border:.5em solid transparent;border-bottom:0;border-top-color:var(--navy-deep)}
.bubble span{display:inline-block}

/* ===== キャッチコピー ===== */
.catch{padding:44px 24px 12px;text-align:center}
.catch h2{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(24px,6.6vw,30px);letter-spacing:.08em;line-height:1.4}
.catch .rule{width:44px;height:1px;background:var(--gold);margin:18px auto}
.catch p{margin:0;font-size:clamp(12.5px,3.4vw,14.5px);color:var(--sub);letter-spacing:.04em;line-height:2.1}
@media (min-width:470px){.catch br.sp{display:none}}

/* ===== セクション見出し（SELECT / PRESENT） ===== */
.label{display:flex;align-items:center;gap:14px;margin:0 20px;font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.32em;color:var(--gold)}
.label::before,.label::after{content:"";flex:1;height:1px;background:var(--gold-line)}
.headline{margin:6px 0 0;text-align:center;font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(23px,6.4vw,30px);letter-spacing:.08em;line-height:1.3}
.headline-tight{font-size:clamp(19px,5.4vw,25px);letter-spacing:-.02em;white-space:nowrap}
.headline-tight .num{margin:0 .06em 0 .02em}
.num{font-size:1.9em;color:var(--blue);font-style:italic;letter-spacing:0;line-height:1;vertical-align:-.08em;margin:0 .04em}

/* ===== SELECT ===== */
.select{padding:36px 0 0}
.select .lineup{width:calc(100% - 64px);margin:18px 32px 6px}
.choose{display:flex;align-items:center;margin:-4px 18px 0;position:relative}
.choose .circle{flex:none;width:76px;height:76px;border-radius:50%;background:#095EAA linear-gradient(150deg,#3A86CC 0%,#095EAA 55%,#074A88 100%);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;position:relative;z-index:1;box-shadow:0 6px 14px rgba(9,94,170,.22)}
.choose .circle b{font-size:40px;font-style:normal;font-weight:600;line-height:1}
.choose .circle small{font-size:17px;margin-top:.7em}
.choose .ribbon{flex:1;min-width:0;margin-left:-22px;padding:10px 20px 10px 30px;background:var(--pale);color:var(--navy);
  font-weight:500;font-size:clamp(12px,3.5vw,15.5px);letter-spacing:.09em;white-space:nowrap;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}
.choose .ribbon em{font-style:normal;font-size:1.3em;color:var(--blue)}

/* ===== ＋ ===== */
.plus{display:flex;justify-content:center;padding:30px 0 26px}
.plus svg{width:44px;height:44px}

/* ===== PRESENT ===== */
.present .gift{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:22px 18px 0}
.big-bottle{position:relative;flex:none;width:17.5%}
.big-bottle img{width:100%}
.seal{position:absolute;top:14%;right:-8%;width:84px;height:84px;border-radius:50%;background:var(--navy-deep);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 0 0 3px #fff,0 0 0 4px var(--gold-line),0 6px 14px rgba(0,36,114,.22)}
.seal .s1{font-size:10px;letter-spacing:.04em;line-height:1.2}
.seal .s2{font-family:var(--serif);font-weight:700;font-size:23px;line-height:1.1}
.seal .s2 small{font-size:.55em}
.seal .s3{font-size:9.5px;line-height:1.3;opacity:.9;margin-top:2px}
.colors{flex:none;width:54%;text-align:center;margin-bottom:22px}
.colors .cap{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 8px;font-size:12.5px;font-weight:500;color:var(--sub);letter-spacing:.06em}
.colors .cap::before,.colors .cap::after{content:"";width:16px;height:1px;background:var(--sub)}

.colors .note{margin:8px 0 0;font-size:11.5px;color:var(--sub)}
.colors-img{position:relative;width:66.6%;margin:0 auto}
.colors-img img{width:100%}
.colors-img .vol-icon{position:absolute;top:-9%;right:-42%;width:clamp(54px,14.5vw,66px)}
.colors-img .vol-icon svg circle{fill:rgba(255,255,255,.92)}
.vol-icon>span{position:relative;z-index:1}
.choose-color{margin-top:18px}
.choose-color .ribbon{letter-spacing:.03em;font-size:clamp(11px,3.4vw,15.5px);padding-right:16px}
.choose-color .ribbon em{font-size:1.12em}
.note-pick br{display:none}
@media (max-width:400px){.note-pick br{display:inline}}
.note-pick{color:var(--navy-deep)!important;font-weight:500;letter-spacing:.04em}
.volume{display:flex;align-items:center;gap:6px;margin:22px 18px 0;padding:12px 10px;border:1px solid var(--gold-line);font-size:clamp(12.5px,3.5vw,15px);letter-spacing:.03em}
.vol-text{flex:1;min-width:0;margin:0;text-align:center;line-height:1.7}
.vol-icon{flex:none;width:clamp(64px,17vw,76px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--navy-deep);line-height:1}
.vol-icon svg{position:absolute;inset:0;width:100%;height:100%}
.vol-icon .t1{font-family:var(--sans);font-weight:500;font-size:.42em;color:var(--navy-deep);margin-right:.12em;vertical-align:.15em}
.vol-icon .t2{font-family:var(--serif);font-weight:600;font-size:1.6em;margin:0 0 .12em;letter-spacing:0;white-space:nowrap}
.vol-icon .t2 small{font-size:.5em;margin-left:.05em}
.vol-icon .t3{font-family:var(--serif);font-size:.78em;font-weight:600;letter-spacing:.06em}
.volume .was{color:var(--muted)}
.volume .arrow{color:var(--gold);margin:0 .4em}
.volume strong{font-family:var(--serif);font-size:1.45em;color:var(--navy-deep)}

/* ===== ショールーム ===== */
.visit{margin-top:48px}
.visit-head{background:#FCF8F4;padding:40px 20px 30px;text-align:center}
.visit-head h2{margin:0;font-family:var(--serif);font-weight:600;color:var(--navy);font-size:clamp(20px,5.7vw,26px);line-height:1.5;letter-spacing:.06em}
.visit-head .rule{width:56px;height:2px;background:var(--gold);margin:22px auto}
.pill{display:inline-block;margin:0;padding:.35em 1.8em;border:1px solid #7FA9D6;border-radius:999px;font-family:var(--serif);font-weight:500;color:var(--navy);font-size:clamp(14px,4vw,17px);letter-spacing:.12em}
.visit img{width:100%}
.visit-foot{padding:24px 16px 4px;text-align:center}
.only-text{margin:0;font-family:var(--serif);font-weight:600;color:var(--navy);font-size:clamp(17px,5.2vw,23px);letter-spacing:.06em;line-height:1.4;white-space:nowrap}
.only-note{margin:8px 0 0;font-family:var(--serif);font-size:clamp(11px,3.1vw,13px);color:var(--sub);letter-spacing:.06em}

/* ===== 開催情報 ===== */
.label-sm{margin:0 0 16px;font-size:13px;letter-spacing:.2em;gap:12px;white-space:nowrap}
.nb{display:inline-block}
.info .period{display:block;font-feature-settings:"palt";letter-spacing:.01em;font-size:clamp(13px,3.8vw,16px)}
.info .closed{display:block;margin-top:2px;color:#C8263A;font-size:clamp(13px,3.8vw,16px);font-weight:500;font-feature-settings:"palt";letter-spacing:.01em}
.info{padding:36px 18px 0}
.info dl{margin:0}
.info .row{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.info .row:first-child{border-top:1px solid var(--line)}
.info dt{background:var(--navy-deep);color:#fff;font-size:13px;font-weight:700;letter-spacing:.14em;text-align:center;padding:5px 0;line-height:1.5}
.info dd{margin:0;font-size:clamp(14px,4vw,17px);font-weight:500;letter-spacing:.05em;line-height:1.5;padding-top:2px}
.info dd small{display:block;font-size:12px;font-weight:400;color:var(--sub);margin-top:3px;letter-spacing:.03em}
.limited{margin:16px 0 0;background:var(--pale);text-align:center;color:var(--navy-deep);font-weight:500;letter-spacing:.14em;
  font-size:clamp(14.5px,4.1vw,17px);padding:9px 0;line-height:1.4}
.limited span{display:inline-block;font-size:.72em;letter-spacing:.06em;font-weight:500;border:1px solid currentColor;padding:0 .7em;margin-left:.7em;vertical-align:.15em}
.notes{margin:14px 0 0;padding:0;list-style:none}
.notes li{font-size:11.5px;color:var(--muted);line-height:1.75;padding-left:1em;text-indent:-1em}
.notes li::before{content:"※"}

/* ===== ボタン ===== */
.cta{padding:28px 18px 8px;text-align:center}
.cta p{margin:0 0 14px;font-family:var(--serif);font-size:14px;letter-spacing:.06em;color:var(--sub)}
.btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:440px;min-height:56px;margin:0 auto;
  background:var(--navy-deep);color:#fff;text-decoration:none;border-radius:999px;font-weight:500;font-size:clamp(15px,4.2vw,17px);letter-spacing:.1em;
  box-shadow:0 4px 12px rgba(0,36,114,.2)}
.btn::after{content:"";position:absolute;right:24px;top:50%;width:9px;height:9px;border-top:2px solid #fff;border-right:2px solid #fff;transform:translateY(-50%) rotate(45deg)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.fixed-cta{color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;position:fixed;left:0;right:0;bottom:0;z-index:10;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));transition:transform .35s ease,opacity .35s ease}
.fixed-cta .btn{min-height:50px;box-shadow:none}
.fixed-cta.is-hidden{transform:translateY(110%);opacity:0;pointer-events:none}

/* ===== アニメーション ===== */
@media (prefers-reduced-motion:no-preference){
  .pop-bonus{animation:bonus-bounce 1s cubic-bezier(.3,0,.3,1) .5s both}
  .glint{animation:glint .9s ease-out 1.3s both}
  .bubble{animation:bubble-in .35s cubic-bezier(.3,1.4,.5,1) 1.6s both}
  .bubble span{opacity:0;animation:char-in .2s ease-out both;animation-delay:calc(1.85s + var(--i) * .08s)}
  .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.7,.3,1)}
  .js .reveal.is-in{opacity:1;transform:none}
  .js .plus.reveal{transform:scale(.4) rotate(-90deg)}
  .js .plus.reveal.is-in{transform:none;transition-duration:.5s}
}
@keyframes bonus-bounce{0%{transform:scale(1)}30%{transform:scale(1.08)}52%{transform:scale(.985)}72%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes glint{0%{opacity:1;background-position:150% 0}100%{opacity:1;background-position:-50% 0}}
@keyframes bubble-in{0%{opacity:0;transform:translateX(var(--tx)) translateY(.6em) scale(.85)}100%{opacity:1;transform:translateX(var(--tx)) translateY(0) scale(1)}}
@keyframes char-in{0%{opacity:0;transform:translateY(.3em)}100%{opacity:1;transform:translateY(0)}}