/* ============================================================
   VG ヒーロー（極乾極冷） — vg-hero.css
   自己完結: 変数・共通パーツ（バッジ/ボタン）もここに含む
   ============================================================ */
/* TOPページのアナウンスバーのみ非表示（ヘッダーは全ページ共通で表示、
   フッターは vg-global.css で theme標準を非表示→グローバルフッターに統一） */
body[data-page-type="index"] [id^="shopline-section-sections--header-group__announcement-bar"]{display:none}

.vg-hero{
  --vg-bg:#08080a;
  --vg-text:#f4f4f6;
  --vg-cyan:#8fe8ff;
  --vg-blue:#5a86ff;
  --vg-purple:#a06bff;
  --vg-serif:'Shippori Mincho B1',serif;
  --vg-sans:'Noto Sans JP',system-ui,sans-serif;
  --vg-script:'Great Vibes',cursive;
  --vg-grad:linear-gradient(120deg,var(--vg-cyan),var(--vg-blue) 55%,var(--vg-purple));
}

/* オープニングカーテン */
@keyframes vgCurtain{0%,30%{transform:translateY(0)}100%{transform:translateY(-102%)}}
@keyframes vgCurtainLogo{0%{opacity:0;letter-spacing:.55em;transform:translateY(8px)}28%,58%{opacity:1;letter-spacing:.16em;transform:none}100%{opacity:0;letter-spacing:.16em;transform:translateY(-10px)}}
@keyframes vgCurtainLine{0%{transform:scaleX(0)}45%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.vg-curtain{position:fixed;inset:0;z-index:9999;background:#050506;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;pointer-events:none;animation:vgCurtain 1.7s cubic-bezier(.76,0,.24,1) .55s forwards}
.vg-curtain__logo{font-family:'Great Vibes',cursive;font-size:clamp(52px,9vw,120px);color:#fff;opacity:0;animation:vgCurtainLogo 2.25s ease .1s forwards}
.vg-curtain__line{width:min(46vw,320px);height:1px;transform:scaleX(0);background:linear-gradient(90deg,transparent,#8fe8ff,transparent);animation:vgCurtainLine 2.25s ease .1s forwards}
.vg-curtain__sub{font-size:11px;letter-spacing:.4em;color:#7c8090;opacity:0;font-family:'Noto Sans JP',system-ui,sans-serif;animation:vgCurtainLogo 2.25s ease .25s forwards}
@media (prefers-reduced-motion:reduce){
  .vg-curtain{animation:none;transform:translateY(-102%)}
  .vg-curtain__logo,.vg-curtain__line,.vg-curtain__sub{animation:none;opacity:0}
}

@keyframes vgScroll{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(16px);opacity:0}}
@keyframes vgRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes vgClip{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes vgShine{0%{background-position:-160% 0}55%,100%{background-position:160% 0}}

.vg-hero{position:relative;height:186vh;background:var(--vg-bg);color:var(--vg-text);font-family:var(--vg-sans);-webkit-font-smoothing:antialiased}
.vg-hero--static{height:100vh}
.vg-hero__stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--vg-bg)}
.vg-hero--static .vg-hero__stage{position:relative}

.vg-hero__bg{position:absolute;inset:0;transform-origin:center}
.vg-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:66% 40%;filter:brightness(.52) contrast(1.12);display:block}
.vg-hero__bg--fallback{background:radial-gradient(100% 80% at 50% 26%,#14151b,#08080a 72%)}
.vg-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.12) 34%,rgba(8,8,10,.62) 72%,rgba(8,8,10,.97) 100%);pointer-events:none}
.vg-hero__tint{position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 82%,rgba(90,134,255,.16),transparent 60%);pointer-events:none}
.vg-hero__top-fade{position:absolute;top:0;left:0;right:0;height:9vh;background:linear-gradient(#050506,transparent);pointer-events:none;z-index:2}
.vg-hero__kanji-bg{position:absolute;top:5%;right:4%;writing-mode:vertical-rl;font-family:var(--vg-serif);font-weight:800;font-size:clamp(80px,15vw,230px);line-height:.92;letter-spacing:.04em;background:linear-gradient(180deg,var(--vg-cyan),var(--vg-blue) 55%,var(--vg-purple));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.16;user-select:none;pointer-events:none;will-change:transform}

.vg-hero__content{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 clamp(24px,6vw,72px) 11vh}
.vg-hero__content-in{width:100%;max-width:1180px;margin:0 auto}
.vg-hero .vg-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border:1px solid rgba(127,227,255,.35);border-radius:999px;font-size:12px;letter-spacing:.26em;color:var(--vg-cyan);font-weight:700}
.vg-hero__script{font-family:var(--vg-script);font-size:clamp(44px,6.5vw,92px);line-height:1;margin:20px 0 0;color:#fff}
.vg-hero__title{font-family:var(--vg-serif);font-weight:800;font-size:clamp(52px,9.5vw,124px);line-height:1.02;letter-spacing:.02em;margin:4px 0 0;color:var(--vg-text)}
.vg-hero__title .vg-shine{background-image:linear-gradient(105deg,var(--vg-blue) 20%,#eaf6ff 48%,var(--vg-purple) 78%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:230% 100%;animation:vgShine 2.6s ease-in-out 1.6s both}
.vg-hero__rule{width:64px;height:2px;margin:22px 0 0;transform-origin:left;background:linear-gradient(90deg,var(--vg-cyan),var(--vg-purple))}
.vg-hero__copy{max-width:520px;font-size:clamp(15px,2.3vw,20px);line-height:1.9;color:#d5d6de;margin:20px 0 0;font-weight:500}

.vg-hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
/* テーマCSSの a 上書き対策で主要プロパティは !important */
.vg-hero .vg-btn{display:inline-flex !important;align-items:center;gap:10px;padding:17px 30px !important;border-radius:12px !important;font-weight:900;font-size:16px;text-decoration:none !important;transition:filter .25s,transform .25s,border-color .25s,color .25s}
.vg-hero .vg-btn--primary{color:#06121f !important;background:var(--vg-grad) !important;box-shadow:0 14px 40px rgba(90,134,255,.35)}
.vg-hero .vg-btn--primary:hover{filter:brightness(1.06);transform:translateY(-2px);color:#06121f !important}
.vg-hero .vg-btn--ghost{font-weight:800;color:#eef0ff !important;background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.24) !important}
.vg-hero .vg-btn--ghost:hover{border-color:var(--vg-cyan) !important;color:#fff !important}

.vg-hero__cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3}
.vg-hero__cue-label{font-size:11px;letter-spacing:.28em;color:#8a8c98}
.vg-hero__cue-bar{width:1px;height:34px;background:linear-gradient(var(--vg-cyan),transparent);position:relative}
.vg-hero__cue-dot{position:absolute;top:0;left:-2px;width:5px;height:5px;border-radius:50%;background:var(--vg-cyan);animation:vgScroll 1.8s infinite}

.vg-intro > *{opacity:0;animation:vgRise .95s cubic-bezier(.2,.75,.2,1) forwards}
.vg-intro .vg-i1{animation-delay:.35s}
.vg-intro .vg-i2{animation-delay:.48s}
.vg-intro .vg-i3{animation-delay:.64s}
.vg-intro .vg-i4{animation-delay:.85s}
.vg-intro .vg-i5{animation-delay:1.02s}
.vg-intro .vg-clip{animation-name:vgClip;animation-duration:1.05s}

@media (prefers-reduced-motion:reduce){
  .vg-intro > *,.vg-hero__title .vg-shine{animation:none;opacity:1;transform:none;clip-path:none}
  .vg-hero__cue-dot{animation:none}
}

/* ============================================================
   フローティング購入バナー（右下固定・#vg-buy へ誘導）
   ============================================================ */
.vg-float-cta{
  position:fixed;
  right:18px;
  bottom:28px;
  z-index:9990;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:999px;
  background:linear-gradient(120deg,#8fe8ff,#5a86ff 55%,#a06bff);
  color:#06121f !important;
  font-family:'Noto Sans JP',system-ui,sans-serif;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  box-shadow:0 14px 40px rgba(90,134,255,.45);
  transition:transform .25s ease,opacity .3s ease,visibility .3s;
}
.vg-float-cta:hover{transform:translateY(-3px);filter:brightness(1.06);color:#06121f !important}
.vg-float-cta__dot{
  width:8px;height:8px;border-radius:50%;
  background:#06121f;
  animation:vg-float-pulse 1.6s ease-in-out infinite;
}
.vg-float-cta__arrow{font-weight:700}
@keyframes vg-float-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.75)}
}
/* 購入セクションが見えている間は隠す */
.vg-float-cta.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:768px){
  .vg-float-cta{right:12px;bottom:18px;padding:12px 18px;font-size:13.5px}
}

/* 準備中ボタン（リンク先未設定時） */
.vg-btn--soon{opacity:.55;cursor:default;pointer-events:none;filter:saturate(.55)}

/* 筆記体テキスト → ロゴ画像化 */
.vg-curtain__logo img{height:clamp(56px,9vw,118px);width:auto;display:block}
.vg-hero__script img{height:clamp(44px,6.5vw,88px);width:auto;display:block}