/* =====================================================================
   HYPERBOOST — Teaser LP
   House tone (wireframe.html 準拠): 暖色ニュートラル / 素のサンセリフ /
   装飾を排し、巨大タイポ・余白・コントラストで作る編集的な静けさ。
   JOYレッド(#FF3B1F)は"点"でしか差さない。
   Zero-dependency animation (IntersectionObserver + rAF + CSS)
   ===================================================================== */

:root{
  --paper:   #FFFFFF;   /* white */
  --paper2:  #F1F1F2;   /* light grey */
  --sky:     #E7EBEE;   /* neutral light */
  --ink:     #121214;   /* neutral near-black */
  --ink2:    #3B3B40;   /* neutral grey text */
  --muted:   #8B8B92;   /* neutral grey */
  --joy:     #FF3B1F;   /* JOY red — used only as a whisper (KVのソール想起) */
  --joy-deep:#C0231A;
  --joy-glow:#FF8B5C;
  --joy-soft:#FFE0D6;
  --line:    #E7E7EA;   /* light grey line */
  --line-d:  rgba(255,255,255,0.12);

  /* pacer と同一のフォント指定に統一 */
  --font: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-serif: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', serif;

  --ease: cubic-bezier(.2, .6, .2, 1);
  --snap: cubic-bezier(.34, 1.4, .5, 1);
  --fast: .2s;

  --container: 1220px;
  --pad: clamp(22px, 5vw, 56px);
  --gap-l: clamp(40px, 7vw, 64px);
  --gap-xl: clamp(72px, 12vw, 128px);
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  line-height:1.7;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.run__inner>*, .edge__inner>*, .footer-inner>*{ min-width:0; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
h1,h2,h3{ text-wrap:balance; }
.num{ font-variant-numeric:tabular-nums; }
::selection{ background:var(--joy); color:#fff; }

.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Alpen 公式グローバルヘッダー/フッター（外部JS注入・pacer準拠。裸のheader{}/footer{}は定義しない） */
#al-group-global-header2021, #al-group-global-footer2021{ position:relative; z-index:10; }
#al-group-global-header2021 img, #al-group-global-footer2021 img{ max-width:100%; height:auto; }
.only-sp{ display:inline; } .only-pc{ display:none; }
@media (min-width:960px){ .only-sp{ display:none; } .only-pc{ display:inline; } }   /* PC/SPで改行位置を出し分ける共通ユーティリティ */

.eyebrow{ font-size:20px; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); font-weight:800; }
.eyebrow--glow{ color:#9A9AA0; }

/* ---------- Scroll progress ---------- */
.scroll-progress{ position:fixed; top:0; left:0; width:100%; height:2px; z-index:120; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; width:0%; background:var(--joy); }

/* ---------- Header ---------- */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:110; padding-block:16px; transition:background .3s var(--ease), padding .3s var(--ease), border-color .3s; border-bottom:1px solid transparent; color:#fff; mix-blend-mode:difference; }
.site-header.is-stuck{ mix-blend-mode:normal; color:var(--ink); background:rgba(247,243,234,.86); backdrop-filter:saturate(1.1) blur(12px); border-bottom-color:var(--line); padding-block:11px; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ font-weight:800; letter-spacing:.06em; font-size:1rem; }
.header-tag{ font-weight:700; font-size:.72rem; letter-spacing:.1em; }
.header-tag__word{ opacity:.7; }

/* =====================================================================
   1. FIRST VIEW — full-bleed dark, huge type, bottom-aligned
   ===================================================================== */
.fv{ position:relative; background:var(--paper); padding:0; overflow:hidden; }
/* KVスライドなし・フルブリード（RUN1枚） */
.fv__full{ display:block; }
.fv__full img{ display:block; width:100%; height:auto; animation:kvPopIn .9s var(--snap) both; }
@keyframes kvPopIn{
  from{ opacity:0; transform:scale(1.08); }
  to{ opacity:1; transform:scale(.95); }
}

/* ---- KV カルーセル（ピークカルーセル：中央大きめ＋左右チラ見せ＋着地バウンス／白背景） ---- */
.kvc{ position:relative; padding:20px 0; }
.kvc__viewport{ overflow:hidden; }
.kvc__track{ display:flex; align-items:center; gap:14px; will-change:transform; }
.kvc__slide{
  flex:0 0 80%; aspect-ratio:2/1; border-radius:0; overflow:hidden; background:var(--paper2);
  opacity:.42; filter:brightness(.92);
  transition:opacity .5s var(--ease), filter .5s var(--ease);
}
.kvc__slide.is-active{ opacity:1; filter:none; }
.kvc__slide picture{ display:contents; }   /* SP/PC振り分けのpictureをボックスツリーから消し、imgを直接配置扱いに */
.kvc__slide img{ display:block; width:100%; height:100%; object-fit:cover; }
/* 切り替え時：中央に来た枚が一瞬浮いてペタッと着地 */
.kvc__slide.land img{ animation:kvcLand .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes kvcLand{ 0%{ transform:translateY(-24px) scale(1.02); } 60%{ transform:translateY(5px) scale(1); } 100%{ transform:translateY(0) scale(1); } }
@media (min-width:768px){ .kvc__slide{ flex-basis:72%; } }
@media (max-width:767px){ .kvc__slide{ aspect-ratio:4/5; } }
@media (prefers-reduced-motion:reduce){
  .kvc__slide.land img{ animation:none !important; }
}
.kvc__dots{ display:flex; justify-content:center; gap:9px; margin-top:clamp(16px,2vw,24px); }
.kvc__dot{ width:8px; height:8px; border-radius:50%; background:#c4c4bf; transition:background .2s var(--ease), width .25s var(--ease); }
.kvc__dot.is-active{ background:var(--ink); width:24px; border-radius:4px; }
.fv__kv{ position:absolute; inset:0; z-index:0; background:linear-gradient(155deg,#1c1c1f,#121214 65%); }
.fv__kv img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
/* テキストを載せないのでスクリムは最小限。上（ヘッダー）と下（SCROLL）だけ軽く締める */
.fv__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(13,11,8,.16) 0%, transparent 20%, transparent 72%, rgba(13,11,8,.42) 100%); }
.fv__wrap{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding-top:120px; padding-bottom:var(--gap-l); color:#fff; }
.fv__badge{ display:inline-flex; align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.08em; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); color:#fff; padding:8px 18px; border-radius:100px; margin-bottom:28px; backdrop-filter:blur(4px); }
.fv__title{ font-weight:900; letter-spacing:-.03em; line-height:1.02; }
.fv__line{ display:block; font-size:clamp(2.6rem, 10vw, 6.1rem); }
.fv__line:not(.fv__line--2){ word-break:keep-all; }   /* 快適 を割らない */
.fv__line em{ font-style:normal; color:#fff; }   /* 見出しの赤はやめ、色はKVに任せる */
.fv__line--2{ font-size:clamp(1.42rem, 5vw, 2.7rem); margin-top:.18em; letter-spacing:-.02em; }
.fv__tagline{ margin-top:30px; font-size:clamp(.95rem, 2.4vw, 1.12rem); font-weight:500; line-height:1.7; opacity:.9; max-width:42ch; }
.fv__meta{ margin-top:22px; font-size:.86rem; letter-spacing:.04em; color:rgba(255,255,255,.66); }
.fv__meta .num{ color:#fff; font-weight:700; }
.fv__scroll{ position:absolute; z-index:2; left:var(--pad); bottom:24px; display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.24em; color:rgba(255,255,255,.55); }
.fv__scroll::after{ content:''; width:1px; height:30px; background:linear-gradient(180deg, rgba(255,255,255,.7), transparent); animation:scrolldown 1.9s var(--ease) infinite; }
@keyframes scrolldown{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 50.01%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* =====================================================================
   2. JOY STATEMENT — dark, monumental
   ===================================================================== */
.joy{ background:var(--paper); color:var(--ink); padding:var(--gap-l) 0 var(--gap-xl) 0; text-align:center; overflow:hidden; }
.joy__eyebrow{ margin-bottom:40px; }
@media (max-width:767px){ .joy__eyebrow{ margin-bottom:20px; } }
.joy__word{ font-size:clamp(7rem, 45vw, 24rem); font-weight:900; letter-spacing:-.05em; line-height:.82; color:#333; }
.joy__sub{ font-size:40px; line-height:1.5; color:var(--ink2); max-width:48ch; margin:clamp(34px,4vw,36px) auto var(--gap-l); }
@media (max-width:959px){ .joy__sub{ font-size:24px; } }   /* SPのみ縮小（2026.07.17） */
.joy__benefits{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border-block:1px solid var(--line); max-width:920px; margin:0 auto; }
.joy__benefit{ background:var(--paper); padding:clamp(28px,5vw,40px) 20px; }
.joy__benefit b{ display:block; font-size:clamp(1.9rem,6vw,2.8rem); font-weight:900; letter-spacing:-.02em; }
.joy__benefit span{ display:block; font-size:20px; letter-spacing:.2em; color:var(--muted); margin-top:10px; }
@media (min-width:700px){ .joy__benefits{ grid-template-columns:repeat(3,1fr); } }

/* JOY を"弾ませる" — 白×黒はそのまま、動きでポップ感を出す。 */
.joy__word{ position:relative; white-space:nowrap; padding-right:clamp(32px,3vw,96px); }  /* 分割した J/O/Y を絶対に折り返させない。padding-rightで中央基準を右にずらし、JOYだけ“少しだけ左寄せ”に（オーナー指示2026.07.14・PC/SP両方、2026.07.16 vw値を6→3に調整） */
.joy__word.reveal-up{ opacity:1; transform:none; }              /* 器は動かさない。J/O/Y が弾む */
.joy__ltr{ display:inline-block; will-change:transform; }
@media (prefers-reduced-motion:no-preference){
  .joy__word .joy__ltr{ opacity:0; transform:translateY(-.14em) scale(.74); }
  .joy__word.in .joy__ltr{ animation:joyPop .6s cubic-bezier(.34,1.56,.64,1) both; }
  .joy__word.in .joy__ltr:nth-child(2){ animation-delay:.08s; }
  .joy__word.in .joy__ltr:nth-child(3){ animation-delay:.16s; }
}
@keyframes joyPop{
  0%  { opacity:0; transform:translateY(-.14em) scale(.74); }
  55% { opacity:1; transform:translateY(.02em) scale(1.045); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

/* =====================================================================
   Shared: product sections
   ===================================================================== */
/* 商品画像エリア：列幅いっぱいのグレーのプレースホルダー（実画像を後で流し込む） */
.prod-frame{ position:relative; border-radius:0; background:#DADCDF; aspect-ratio:1/1; overflow:hidden; }
.prod-frame--dark{ background:var(--paper); }
.prod-frame__shoe{
  display:block; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:translateY(18px) scale(.96); filter:blur(8px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
.prod-frame__shoe.in{ opacity:1; transform:none; filter:blur(0); }

.colorway{ margin-top:18px; }
.colorway__label{ font-weight:700; letter-spacing:.08em; font-size:.8rem; margin-bottom:12px; color:var(--ink2); }
.colorway__label b{ color:var(--ink); font-size:1em; }
.colorway__row{
  display:flex; gap:12px; overflow-x:auto; padding-bottom:14px; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.colorway__row::-webkit-scrollbar{ height:4px; }
.colorway__row::-webkit-scrollbar-track{ background:transparent; }
.colorway__row::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.colorway__row::-webkit-scrollbar-thumb:hover{ background:var(--muted); }
.colorway__item{
  flex:0 0 auto; width:clamp(120px,11vw,112px); height:clamp(120px,11vw,112px); object-fit:contain; background:var(--paper); border:1px solid var(--line);
  opacity:0; transform:translateY(14px) scale(.94); filter:blur(6px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
  transition-delay:calc(var(--i, 0) * 55ms);
}
.colorway__item.in{ opacity:1; transform:none; filter:blur(0); }

.status{ margin-top:0; display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.04em; font-size:.92rem; }
.status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--joy); }
.status--dark{ color:var(--ink); }

/* 3. RUN (paper) */
.run{ background:var(--paper); padding:0; }
.run__inner{ display:grid; grid-template-columns:1fr; }
.run__body{ container-type:inline-size; padding:var(--gap-l) var(--pad); }
.run__title{ font-weight:900; line-height:.96; letter-spacing:-.03em; margin:16px 0 0;
  font-size:clamp(2.4rem,10vw,4.6rem);
  font-size:clamp(2.4rem,12cqi,5.4rem); }
.run__title em{ font-style:normal; color:inherit; }
.run__desc{ margin-top:20px; color:var(--ink2); font-weight:500; font-size:20px; line-height:1.9; }

/* 3b. EDGE メインコピー（EDGEセクション導入・中央寄せステートメント） */
.edge-statement{ background:#f1f1f1; padding:var(--gap-xl) 0 var(--gap-l) 0; text-align:center; }
.edge-statement__text{
  max-width:720px; margin-inline:auto;
  font-weight:800; font-size:clamp(1.15rem,4vw,1.5rem); line-height:1.6;
  letter-spacing:.01em; color:var(--ink);
}

/* 4. EDGE (dark) */
.edge{ background:#f1f1f1; color:var(--ink); padding:0; }  /* 下余白なし。テックグリッドとの間隔は .tech 側の padding-top:60px で管理（2026.07.14）。edge-statementと同色に統一（2026.07.16） */
.edge__inner{ display:grid; grid-template-columns:1fr; }
.edge__body{ container-type:inline-size; padding:var(--gap-l) var(--pad); }
.edge__title{ font-weight:900; line-height:.96; letter-spacing:-.03em; margin:16px 0 0; color:var(--ink);
  font-size:clamp(2.4rem,10vw,4.6rem);
  font-size:clamp(2.4rem,12cqi,5.4rem); }
.edge__title em{ font-style:normal; color:inherit; }
.edge__desc{ margin-top:20px; color:var(--ink2); font-weight:500; font-size:20px; line-height:1.9; }

/* 4b. RUN/EDGE TECHNOLOGY (paper) — JOYの3セルグリッド（1px罫線）と同じ視覚言語。
   見出しなし。直前セクションとの間隔は60px固定（オーナー指定・2026.07.14）。
   RUN側（#run-tech）は .tech--mid で下も60px（次のEDGEセクションとの間隔）。
   EDGE側（#edge-tech）は最終セクションのため下は gap-xl のまま。 */
.tech{ background:var(--paper); padding:60px 0 var(--gap-l); text-align:center; }
.tech--mid{ padding-bottom:30px; }
#edge-tech{ background:#f1f1f1; }   /* edge-statement/edgeと同じ灰色で継続（2026.07.16） */
.tech__grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border-block:1px solid var(--line); max-width:1080px; margin:0 auto; }
.tech__item{ background:var(--paper); padding:0; }
.tech__media{ display:block; width:100%; aspect-ratio:1003/683; object-fit:cover; }  /* セルの端までフル幅（旧ナンバー01-03の位置） */
.tech__body{ padding:clamp(24px,4vw,36px) clamp(20px,3vw,32px) clamp(30px,5vw,48px); }
.tech__name{ margin:0; font-weight:900; font-size:clamp(1.3rem,4.6vw,1.55rem); letter-spacing:.01em; line-height:1.25; }
.tech__desc{ margin:14px auto 0; max-width:32ch; color:var(--ink2); font-weight:500; font-size:clamp(.92rem,2.3vw,.98rem); line-height:1.9; text-wrap:balance; word-break:auto-phrase; }  /* auto-phrase=Chromium系で文節改行（他は無視され通常改行） */
.tech__note{ margin-top:10px; color:var(--muted); font-size:.78rem; font-weight:500; }
@media (min-width:700px){ .tech__grid{ grid-template-columns:repeat(3,1fr); } }
/* モバイル（699px以下）：colorway と同じ横スクロールカルーセルに。
   PCの1px罫線グリッド → カード横並び（各カードに枠線）。1枚大きめ＋次をチラ見せ。 */
@media (max-width:699px){
  .tech{ padding-top:40px; }   /* SP：上余白 60→40px（オーナー指示2026.07.14）。ショートハンドにすると .tech--mid の下60pxが消えるため padding-top のみ変更。下は .tech=gap-l / .tech--mid=60px を維持 */
  .tech__grid{
    display:flex; gap:12px; overflow-x:auto; padding-bottom:14px;
    background:transparent; border-block:0; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  }
  .tech__grid::-webkit-scrollbar{ height:4px; }
  .tech__grid::-webkit-scrollbar-track{ background:transparent; }
  .tech__grid::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
  .tech__grid::-webkit-scrollbar-thumb:hover{ background:var(--muted); }
  .tech__item{
    flex:0 0 82%; max-width:315px; border:1px solid var(--line); scroll-snap-align:start;
    opacity:1 !important; transform:none !important;   /* 横スクロールで常時見えるため reveal は無効化 */
  }
  .tech__body{ padding:clamp(20px,5vw,28px) clamp(18px,5vw,24px) clamp(24px,6vw,32px); }
}
.tech__item:nth-child(2).reveal-up{ transition-delay:.09s; }
.tech__item:nth-child(3).reveal-up{ transition-delay:.18s; }

@media (max-width:959px){
  /* 積み上げ表示（縦並び）のとき、EDGEはテキスト→画像の順に（2026.07.17・RUNとは逆） */
  .edge__media{ order:2; }
  .edge__body{ order:1; padding-top:20px; }   /* テキストが先頭に来るためedge-statementとの間に余白を追加 */
}
@media (min-width:960px){
  /* フルブリード・スプリット：画像が画面端まで“半分”を占める */
  .run__inner, .edge__inner{ grid-template-columns:1fr 1fr; align-items:stretch; min-height:min(56svh,500px); }
  .run__media{ order:-1; }                 /* 画像を左半分に */
  .run__body, .edge__body{ display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,3vw,40px) clamp(40px,4.5vw,80px); width:100%; max-width:600px; margin-inline:auto; box-sizing:border-box; }
  .prod-frame{ height:100%; aspect-ratio:auto; }   /* 列いっぱい＆フル高さ */
}

/* =====================================================================
   商品ラインナップ（RUN/EDGE・全カラーのカードグリッド）
   PC4列 / SP2列。トーンは house 維持：白/グレー/黒。バッジはグレーグラデ、
   CTAは黒ボタン（添付のピンクバッジはハウストーンNGのためグレーに置換）。
   ===================================================================== */
.lineup{ background:var(--paper); padding:var(--gap-l) 0; }
.lineup__section-title{ font-weight:800; font-size:24px; letter-spacing:.02em; margin-bottom:26px; color:#18181b; text-align:center; }   /* LINE UP見出し（2026.07.17） */
.lineup__status{ display:flex; width:fit-content; margin:-20px auto 20px; }   /* 見出し直下の「8/1新発売」（RUNのみ・中央寄せ・ドット非表示） */
.lineup__status::before{ display:none; }
.lineup__group{ margin-top:var(--gap-l); }
.lineup__group:first-child{ margin-top:0; }
.lineup__group-title{ font-weight:800; font-size:24px; letter-spacing:.1em; margin-bottom:20px; color:var(--ink); text-align:center; }   /* MEN/WOMEN見出し（2026.07.17） */
#edge-lineup{ background:#f1f1f1; }   /* edge-statement/edge/edge-techと同じ灰色で継続（2026.07.16） */
.lineup__grid{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:clamp(12px,2.5vw,24px); row-gap:clamp(24px,5vw,48px); }   /* 行間だけ2倍（2026.07.17） */
@media (min-width:960px){ .lineup__grid{ grid-template-columns:repeat(4,1fr); } }   /* PC=4列・SP/中間=2列 */
.lineup__card{ position:relative; display:flex; flex-direction:column; transition:transform .35s var(--snap); }   /* position:relative必須。無いとバッジがbody基準になり全カードで(0,0)に重なる（2026.07.16修正） */
.lineup__card-link{ display:flex; flex-direction:column; flex:1; width:100%; color:inherit; text-decoration:none; }   /* カード全体を1つのリンクに（2026.07.24） */
.lineup__card-link:focus-visible{ outline:2px solid var(--joy); outline-offset:3px; border-radius:8px; }
.lineup__card:hover{ transform:translateY(-10px) scale(1.05) rotate(-1deg); }
.lineup__card.reveal-up{ transition-delay:calc(var(--i, 0) * 55ms); }   /* グリッド内で順にポップイン（2026.07.23） */
.lineup__media{ position:relative; border:1px solid var(--line); background:var(--paper); aspect-ratio:1/1; overflow:hidden; }
.lineup__media img{ width:100%; height:100%; object-fit:contain; transition:transform .4s var(--snap); }
.lineup__card:hover .lineup__media img{ transform:scale(1.1); }
.lineup__tags{ position:absolute; top:0; left:0; z-index:3; display:flex; align-items:center; gap:clamp(4px,1.5vw,8px); }   /* バッジ+ロゴを画像コーナーに配置。位置・バッジ意匠は store.alpen-group.jp 実サイトの.new3準拠（2026.07.16） */
.lineup__badge{
  padding:5px clamp(10px,3vw,14px); white-space:nowrap; text-align:center;
  font-size:clamp(.66rem,2.4vw,.82rem); font-weight:600; letter-spacing:.04em; color:#fff;
  background:linear-gradient(120deg, var(--joy-deep) 0%, #ff5c5c 100%);   /* 実サイトの.new3(ピンク)と同じ形・同じ120degグラデ角度、色だけJOYレッドに */
}
.lineup__badge--new{
  background:#009ACE;   /* GTX「NEWモデル」バッジ（ゴアテックスの前に追加・2026.09.01） */
}
.lineup__logo{ position:absolute; top:0; left:0; z-index:3; width:clamp(104px,32vw,130px); height:auto; }   /* Alpen限定ロゴ（RUNのみ・画像コーナーに配置。2026.07.17：2倍サイズに変更） */
.lineup__body{ display:flex; flex-direction:column; flex:1; padding-top:14px; }
.lineup__name{ font-weight:800; font-size:clamp(.86rem,2.2vw,.98rem); letter-spacing:.01em; }
.lineup__price{ margin-top:6px; font-weight:900; font-size:clamp(1.05rem,3vw,1.3rem); letter-spacing:-.01em; }
.lineup__price small{ font-size:.58em; font-weight:600; color:var(--muted); margin-left:2px; }
.lineup__cta{
  margin-top:14px; display:flex; align-items:center; justify-content:center; position:relative;
  background:#6B6B70; color:#ffffff; font-weight:700; font-size:13px; padding:14px 4px;
  pointer-events:none; cursor:default;   /* 発売前：グレーの非活性表示・クリック無効 */
}
.lineup__cta span{ position:absolute; right:14px; font-weight:400; font-size:1.15em; }
.lineup__cta--active{
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    linear-gradient(135deg,#fff,var(--muted)) border-box;
  border:1px solid transparent; color:var(--paper);
  pointer-events:auto; cursor:pointer;
  transition:opacity .25s var(--ease), transform .3s var(--snap);   /* 商品ページ公開済み：黒の活性ボタン */
}
.lineup__cta--active:hover{ opacity:.9; transform:scale(1.06); }   /* カード全体の浮き上がりに加え、ボタン自体も独立して弾む */
.lineup__note{ margin-top:8px; font-size:.72rem; color:var(--muted); line-height:1.5; }   /* EC発売日の注釈（EDGE・2026.07.16） */

/* =====================================================================
   5. EVENT (paper2)
   ===================================================================== */
.event{ background:var(--paper2); padding:var(--gap-xl) 0; border-top:1px solid var(--line); }
.event__title{ font-weight:900; line-height:1.14; font-size:clamp(1.9rem,6.5vw,3.4rem); letter-spacing:-.03em; margin-top:14px; }
.event__note{ margin:18px 0 0; color:var(--ink2); font-weight:500; font-size:clamp(.94rem,2.3vw,1.04rem); line-height:1.9; }
.event__grid{ margin-top:var(--gap-l); display:grid; gap:16px; grid-template-columns:1fr; }
.ev-card{ display:grid; grid-template-rows:auto 1fr; background:var(--paper); border:1px solid var(--line); border-radius:8px; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.ev-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(13,11,8,.1); }
.ev-card__media{ aspect-ratio:16/12; overflow:hidden; background:var(--paper2); }
.ev-card__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.02); transition:transform .5s var(--ease); }
.ev-card:hover .ev-card__media img{ transform:scale(1.05); }
.ev-card__body{ padding:22px; display:grid; align-content:start; gap:7px; }
.ev-card__no{ font-size:.68rem; font-weight:800; letter-spacing:.14em; color:var(--joy-deep); }
.ev-card__city{ font-weight:900; font-size:1.4rem; letter-spacing:.01em; }
.ev-card__city em{ font-style:normal; font-size:.8rem; letter-spacing:.14em; color:var(--muted); margin-left:8px; font-weight:700; }
.ev-card__meta{ color:var(--muted); font-size:.82rem; font-weight:500; margin-top:2px; }
@media (min-width:760px){ .event__grid{ grid-template-columns:repeat(3,1fr); } }

/* =====================================================================
   6. REVIEW — teaser / blur tease / countdown (dark)
   ===================================================================== */
.review{ position:relative; background:var(--paper); color:var(--ink); padding:var(--gap-l) 0 var(--gap-l) 0; overflow:hidden; text-align:center; }  /* 上下とも gap-l に統一（旧：上=gap-xl。スマホで上余白が大きすぎるためオーナー指示・2026.07.14。旧960px分岐と同値になったので統合） */
.review::before{ content:''; position:absolute; top:-30%; right:-10%; width:55%; aspect-ratio:1; background:radial-gradient(circle, var(--joy) 0%, transparent 68%); opacity:0; pointer-events:none; }
.review__inner{ position:relative; z-index:2; }
.review .eyebrow{ display:block; }
.review__title{ display:inline-block; white-space:nowrap; font-weight:900; line-height:.96; letter-spacing:-.02em; font-size:clamp(1.4rem,3.6vw,2.3rem); margin-top:14px; color:#82828A; }
.review__badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 22px; margin:0 0 18px;
  border-radius:100px; border:1px solid transparent;
  background:
    linear-gradient(135deg,#f0f0f1,#c8c8cd) padding-box,
    linear-gradient(135deg,#e2e2e5,#8f8f96) border-box;
  color:#4a4a50; font-weight:800; font-size:.72rem; letter-spacing:.16em;
}
.review__logo{ display:block; width:auto; max-width:clamp(320px,42vw,460px); height:auto; margin:0 auto; filter:brightness(0); }  /* 白背景なので黒ロゴ表示 */
.review__lead{ margin-top:clamp(20px,3vw,40px); font-weight:600; font-size:clamp(1.6rem,6vw,2.4rem); line-height:1.3; color:var(--ink); letter-spacing:.01em; }   /* ロゴと同程度の大きさに（2026.07.17） */
.review__lead-em{ font-weight:900; }   /* 「HYPERBOOST RUN」部分を強調 */
.review__note{ margin-top:12px; font-size:14px; color:var(--ink2); line-height:1.5; }   /* 販売チャネルの注釈（2026.07.17。旧デザインの死んだ.review__noteとクラス名衝突していたため削除して解消） */
.review__lead + .review__title{ margin-top:24px; }
.review__dots{ color:var(--muted); }

.bubbles{ margin:clamp(38px,6vw,58px) auto 0; max-width:620px; display:grid; gap:13px; text-align:left; }
.bubble{ position:relative; justify-self:start; max-width:78%; padding:13px 19px; border-radius:16px 16px 16px 4px; background:#1e1e21; color:#fff; font-weight:600; font-size:clamp(.98rem,3vw,1.18rem); filter:blur(7px); opacity:.7; transition:filter .3s var(--ease), opacity .3s var(--ease); cursor:default; user-select:none; }
.bubble--r{ justify-self:end; border-radius:16px 16px 4px 16px; background:#2a2a2e; }
.bubble:hover, .bubble.peek{ filter:blur(0); opacity:1; }
.review__hint{ margin-top:20px; color:var(--muted); font-size:.84rem; font-weight:500; }


/* =====================================================================
   スライダー画像の自動横スクロール（COMING SOON リード下・無限マーキー）
   slider1〜14 を2セット並べ、-50% スクロールでシームレスループ。
   ===================================================================== */
.marquee{ width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; margin-top:clamp(28px,5vw,46px); }
.marquee__track{ display:flex; gap:14px; width:max-content; animation:marqueeScroll 48s linear infinite; }
.marquee__img{ flex:0 0 auto; height:clamp(88px,13vw,220px); width:auto; border:1px solid var(--line); background:var(--paper); }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .marquee__track{ animation:none; }
  .marquee{ overflow-x:auto; }
}

/* =====================================================================
   COMMUNITY — インフルエンサーの声（横流れ・吹き出しがふわふわ浮遊）
   ===================================================================== */
.community{ background:var(--paper); padding:var(--gap-l) 0; overflow:hidden; text-align:center; }
.community__title{ font-weight:900; font-size:clamp(1.6rem,4vw,2.2rem); line-height:1.4; margin-top:14px; color:var(--ink); }
.community__marquee{ width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; margin-top:clamp(24px,3.5vw,36px); }
.community__track{ display:flex; gap:36px; width:max-content; animation:marqueeScroll 42s linear infinite; padding:0px 24px 24px; }
.community__card{ position:relative; flex:0 0 auto; width:320px; }
.community__media{ width:320px; height:480px; border-radius:24px; overflow:hidden; background:var(--paper2); box-shadow:0 12px 28px rgba(0,0,0,.1); }
.community__media img{ width:100%; height:100%; object-fit:cover; }
.community__bubble{
  position:absolute; bottom:18px; left:14px; right:14px;
  background:#fff; border-radius:14px; padding:11px 15px;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  text-align:left; animation:bubbleFloat 3.2s ease-in-out infinite;
}
.community__bubble::after{
  content:''; position:absolute; bottom:100%; left:28px;
  width:0; height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:9px solid #fff;
}
.community__bubble p{ margin:0; font-size:16px; line-height:1.5; font-weight:700; color:var(--ink); }
.community__name{ display:block; margin-top:6px; font-size:12px; font-weight:700; color:var(--joy-deep); letter-spacing:.02em; }
.community__card:nth-child(4n+2) .community__bubble{ animation-delay:.5s; }
.community__card:nth-child(4n+3) .community__bubble{ animation-delay:1s; }
.community__card:nth-child(4n+4) .community__bubble{ animation-delay:1.5s; }
@keyframes bubbleFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@media (prefers-reduced-motion:reduce){
  .community__track{ animation:none; }
  .community__bubble{ animation:none; }
  .community__marquee{ overflow-x:auto; }
}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer{ background:var(--ink); color:var(--paper); padding:var(--gap-l) 0 30px; border-top:1px solid var(--line-d); }
.footer-inner{ display:grid; gap:20px; grid-template-columns:1fr; }
.footer-brand__name{ font-weight:900; font-size:1.4rem; letter-spacing:.02em; display:block; }
.footer-brand__by{ font-size:.76rem; letter-spacing:.12em; color:var(--muted); }
.footer-note{ color:#B4AA97; font-size:.84rem; font-weight:500; line-height:1.9; }
.footer-note small{ color:var(--muted); font-size:.74rem; }
.footer-copy{ margin-top:28px; text-align:center; color:var(--muted); font-size:.72rem; letter-spacing:.08em; }
@media (min-width:760px){ .footer-inner{ grid-template-columns:1fr 1.5fr; align-items:center; } }

/* =====================================================================
   Reveal — pop（opacity + rise + snap overshoot、2026.07.22ポップ化）
   ===================================================================== */
.reveal, .reveal-up{ opacity:0; }
.reveal{ transition:opacity .7s var(--ease); }
.reveal-up{ transform:translateY(28px) scale(.94); transition:opacity .6s var(--ease), transform .6s var(--snap); }
.reveal.in, .reveal-up.in{ opacity:1; transform:none; }
.joy__benefit:nth-child(2).reveal-up{ transition-delay:.09s; }
.joy__benefit:nth-child(3).reveal-up{ transition-delay:.18s; }

/* =====================================================================
   Floating Nav — RUN/EDGE ジャンプメニュー
   store.alpen-group.jp/campaign/sportsdepo_alpen/brand/adidas/jfa/ の
   .dynamic-nav を移植（同ブランド内の既存実装を流用）。配色のみ本LP仕様
   （--joy赤 / --mutedグレー）に変更。data-color="red"の1系統のみ使用。
   ===================================================================== */
.dynamic-nav{
  position:fixed; bottom:16px; left:50%;
  transform:translateX(-50%) translateY(calc(100% + 24px));
  z-index:9990; width:calc(100% - 32px); max-width:600px;
  opacity:0; pointer-events:none; transition:transform .4s, opacity .4s;
}
.dynamic-nav.is-visible{ transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
.dynamic-nav__list{
  display:flex; align-items:center; list-style:none; padding:5px; margin:0;
  background:rgba(66,67,88,.45); backdrop-filter:blur(28px) saturate(160%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 24px rgba(81,81,81,.45), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(81,81,81,.25);
  border-radius:50px;
}
.dynamic-nav__item{ position:relative; flex:1 1 0; min-width:0; border-radius:44px; transition:background .3s; }
.dynamic-nav__link{
  display:flex; align-items:center; justify-content:center; gap:6px; padding:12px;
  border-radius:44px; text-decoration:none; color:#fff;
  font-size:15px; font-weight:600; white-space:nowrap; letter-spacing:.02em;
  transition:color .3s, background .3s, transform .25s var(--snap);
}
.dynamic-nav__link:hover{ transform:scale(1.05); }
.dynamic-nav__badge{
  display:inline-block; background:#fff; color:var(--joy-deep);
  font-size:10px; font-weight:700; line-height:1; padding:3px 6px;
  border-radius:4px; letter-spacing:.05em; vertical-align:middle; flex-shrink:0;
}
/* EDGEピルの上にちょこんと乗せる「NEW｜ゴアテックス」フラグ（2026.08.27・GTX追加に伴い新設） */
.dynamic-nav__flag{
  position:absolute; top:0; left:50%; z-index:2; pointer-events:none;
  transform:translate(-50%,-58%);
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  padding:5px 12px; border-radius:100px;
  background:linear-gradient(120deg, var(--ink2) 0%, var(--ink) 100%);
  border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:11px; font-weight:700; letter-spacing:.03em; line-height:1;
  box-shadow:0 4px 10px rgba(0,0,0,.28);
}
.dynamic-nav__flag b{ color:#00a7e1; font-weight:800; }
.dynamic-nav__flag i{ color:rgba(255,255,255,.4); font-style:normal; font-weight:400; }
@media (max-width:480px){
  .dynamic-nav{ bottom:12px; width:calc(100% - 20px); }
  .dynamic-nav__link{ padding:8px 10px; gap:6px; font-size:18px; }
  .dynamic-nav__badge{ font-size:11px; padding:3px 6px; }
  .dynamic-nav__flag{ font-size:9.5px; padding:4px 9px; gap:3px; transform:translate(-50%,-62%); }
}
.dynamic-nav__item.active[data-color="red"] .dynamic-nav__link{
  background:linear-gradient(to right, var(--joy) 0%, var(--joy-deep) 100%);
  border:1px solid rgba(255,255,255,.18); color:#fff;
}

/* =====================================================================
   Narrow phones
   ===================================================================== */
@media (max-width:400px){
  .header-tag__word{ display:none; }
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal, .reveal-up{ opacity:1 !important; transform:none !important; }
  .colorway__item, .prod-frame__shoe{ opacity:1 !important; transform:none !important; filter:none !important; }
  .bubble{ filter:blur(6px); }
  .bubble:hover, .bubble.peek{ filter:blur(0); }
}