@charset "UTF-8";
/* =========================================================
   ReFa GINZA - THE STAR THE WORLD DESIRES. in GINZA

   ■winter2026 と同じ仕組み（スマポンシブ）
     SP（〜767px） … 384px カンプを基準にビューポート幅で拡大縮小
     PC / TB（768px〜） … 384px 固定で中央表示
     カンプ（384px）上の px 値に --px を掛ける： 20px → calc(20 * var(--px))

   ■共通画像は winter2026/img を参照（../../img/）
   ========================================================= */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, p, ul, li, a, main, section, header, nav, footer, dl, dt, dd, small, time, button {
  margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { background: none; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }

/* ---------- variables ---------- */
:root {
  --px:        calc(100vw / 384);              /* SP：384px 基準で可変 */
  --col:       calc(384 * var(--px));
  --side-shadow: none;   /* PC/TB：コンテンツエリアの外の左右の影（下の @media で定義） */

  --red-dk:    #820614;   /* BG_b の下端の色 */
  --cream:     #f4dfbb;
  --brown:     #9d7f67;
  --brown-lt:  #c1aea0;
  --beige:     #d5c9b3;
  --line:      #ebe4da;

  --font-ja:   "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en:   "Lustria", "Shippori Mincho", serif;
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --ease:      cubic-bezier(.22, .61, .36, 1);
}
@media (min-width: 768px) {
  :root {
    --px: 1px;
    /* winter2026 と同じ：カラムの縁だけにごく薄く（7%）、外側 60px で消える */
    --side-shadow: linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - var(--col) / 2 - 60px),
      rgba(0, 0, 0, .07) calc(50% - var(--col) / 2),
      transparent calc(50% - var(--col) / 2),
      transparent calc(50% + var(--col) / 2),
      rgba(0, 0, 0, .07) calc(50% + var(--col) / 2),
      transparent calc(50% + var(--col) / 2 + 60px),
      transparent 100%);
  }                         /* PC/TB：384px 固定 */
}

/* SP/TB（Lenis 無効時）のページ内リンク用。Lenis 有効時は lenis.css が auto に戻す */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background-color: #4d140b;   /* 初期は KV 上端の色。JS が画面上端に見えている色に書き換え（iOS Safari のバー色対策） */
  color: var(--brown);
  font-family: var(--font-ja);
  line-height: 1.8;
  letter-spacing: .06em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.en { font-family: var(--font-en); letter-spacing: .02em; }
.sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
   共通：全幅セクション＋中央カラム
   ========================================================= */
.sec,
.ft {
  position: relative;
  width: 100%;
}
.col {
  position: relative;
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
}

/* ---------- 仮画像（画像支給後に差し替え） ---------- */
.ph {
  position: relative;
  display: block;
  background: rgba(157, 127, 103, .12);
  outline: 1px dashed rgba(157, 127, 103, .6);
  outline-offset: -1px;
}
.ph::after {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 1em;
  font: 10px/1.4 sans-serif;
  letter-spacing: 0;
  text-align: center;
  color: rgba(120, 90, 70, .9);
}

/* =========================================================
   固定背景（最下層）：KV 画像
   ========================================================= */
/* iOS Safari 対策（winter2026 と同じ・実機検証済み 2026-10-09）
     画面の端にぴったり接する全画面の固定要素があると、Safari がその色を上下のバーに広げて塗るため、
     固定背景を画面の上下に 5lvh ずつはみ出させる（全体 110lvh・上下中央）
     固定レイヤーは背景色（background-color）を持たせず、色は linear-gradient（画像扱い）で描く
     ※中で上端を基準にしているもの（背景画像・SCROLL）は --stage-off 分を補正 */
:root {
  --stage-off: 5vh;
  --stage-off: 5lvh;
}
.stage {
  position: fixed;
  top: calc(var(--stage-off) * -1);
  left: 0;
  right: 0;
  z-index: 0;
  height: 110vh;
  height: 110lvh;
  pointer-events: none;   /* iOS Safari 対策：.stage 自体は下地を持たせない */
}
.stage_kv {
  position: absolute;
  inset: 0;
}
.stage_kv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main,
.ft {
  position: relative;
  z-index: 1;
}
/* フッター：KV 以外のコンテンツエリアの左右に影（main にはかけない＝白のエリアと二重にならないように） */
.ft {
  background: var(--side-shadow);
}

/* SCROLL（縦書き＋流れる線）
   固定背景内に置き、1画面目（100svh）の右下に表示。
   スクロール開始で JS が #stage に .is-scrolled を付与 → フェードアウト */
.kv_scroll_area {
  position: absolute;
  inset: var(--stage-off) 0 auto;   /* 固定背景のはみ出し分を補正 */
  height: 100vh;
  height: 100svh;
}
.kv_scroll {
  transition: opacity .6s var(--ease);
  position: absolute;
  right: calc(22 * var(--px));
  bottom: calc(15 * var(--px));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--px));
  color: #fff;
}
.stage.is-scrolled .kv_scroll { opacity: 0; }
.kv_scroll_txt {
  writing-mode: vertical-rl;
  font-size: calc(10 * var(--px));
  line-height: 1;
  letter-spacing: .14em;
  text-shadow: 0 0 calc(6 * var(--px)) rgba(0, 0, 0, .8), 0 0 calc(2 * var(--px)) rgba(0, 0, 0, .6);
}
.kv_scroll_line {
  position: relative;
  width: 1px;
  height: calc(68 * var(--px));
  background: rgba(255, 255, 255, .3);
  box-shadow: 0 0 calc(4 * var(--px)) rgba(0, 0, 0, .7);
}
.kv_scroll_line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: center top;
  animation: kvScroll 2.4s var(--ease) infinite;
}
@keyframes kvScroll {
  0%   { transform: scaleY(0); transform-origin: center top; }
  45%  { transform: scaleY(1); transform-origin: center top; }
  55%  { transform: scaleY(1); transform-origin: center bottom; }
  100% { transform: scaleY(0); transform-origin: center bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .kv_scroll_line::after { animation: none; }
}

/* =========================================================
   KV：1画面目は固定の KV 画像だけを見せる
   ========================================================= */
.kv {
  height: 100vh;
  height: 100svh;
}

/* =========================================================
   RED：赤セクションが画面上端に来たら、固定背景（.stage_red）が赤に切り替わる
     ※以前は clip-path ＋ 固定の .red_bg で「赤い窓」を下から上げていたが、
       iOS Safari のバー色が固定されてしまうため撤去（2026-10-09 実機検証）
     ※一時停止（red_pin / sticky）も撤去。文字は最初から表示
     ※赤い背景はセクション自体に持たせて最初から表示（固定ではなく普通にスクロール）
       セクションを過ぎた後は固定背景の .stage_red が同じ赤を引き継ぐ
   ========================================================= */
.red {
  display: flow-root;   /* 子要素の margin が外へ抜けないように */
  position: relative;
  z-index: 1;
  background-color: var(--red-dk);
}
/* ::before … BG_b
   ::after  … 白への切り替え用の白い層（背景の上・文字や写真の下）
   白への切り替えは「白い層の不透明度 0 → 1」の 1 本だけで行う
   → 固定背景の .stage_white（赤の上に白を重ねて不透明度 0 → 1）と同じ計算になり、
     画面の上（赤セクション）と下（固定背景）で白くなる進み方が完全に一致する
   ※以前は「背景色を白へ」＋「BG_b を透明へ」の 2 本を同時に動かしていたため、
     掛け算で白くなるのが遅れ、上だけ赤が長く残って見えていた */
.red::before,
.red::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.red::before {
  background:
    var(--side-shadow),
    url(../../img/BG_b.webp) repeat-x center top / calc(1440 * var(--px)) auto;
}
.red::after {
  background: var(--side-shadow), #fff;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.stage.is-white ~ main .red::after { opacity: 1; }
.red {
  /* エンブレムの光（カラム外まで広がる）でページが横に広がらないように
     ※clip-path は見た目だけ切り抜き、ページ幅には影響するため overflow も必要
       （SP でページ幅が広がると、ブラウザが全体を縮小表示してしまう）
     ※clip は hidden と違い sticky を壊さない */
  overflow: clip;
}
/* KV に戻る時のフェードアウト（JS が .is-out を付与 → 終わったらリセット） */
.intro_emblem {
  transition: opacity .6s var(--ease);
}
.intro_emblem.is-out {
  opacity: 0;
}

/* エンブレム背面の赤い光も、赤で埋まってから出す */
.intro_emblem::before {
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.intro_emblem.is-play::before { opacity: 1; }

.red_scene,
.red_col {
  position: relative;
  z-index: 1;            /* 固定の赤背景より常に手前 */
}
.red_scene {
  padding-top: calc(95 * var(--px));   /* エンブレムの上の余白（見た目は従来どおり） */
  text-align: center;
  color: var(--cream);
  overflow: clip;   /* エンブレムの光をコンテンツエリア内に収める（上は赤セクションの上端まで） */
}

.red_col {
  padding-bottom: calc(102 * var(--px));
  text-align: center;
  color: var(--cream);
}

/* 見出し・本文 */
.red_ttl {
  margin-top: calc(78 * var(--px));
  font-size: calc(25 * var(--px));
  line-height: 1.9;
  letter-spacing: .12em;
}
.red_txt {
  margin-top: calc(26 * var(--px));
  font-size: calc(12.5 * var(--px));
  line-height: 2.4;
  letter-spacing: .08em;
}

/* 日付（PRE EVENT / HOLIDAY CAMPAIGN）。間に区切り線 */
.red_dates {
  margin: calc(66 * var(--px)) calc(21 * var(--px)) 0;
}
.red_dates_row + .red_dates_row {
  margin-top: calc(36 * var(--px));
  padding-top: calc(36 * var(--px));
  border-top: 1px solid rgba(244, 223, 187, .4);
}
.red_dates_label {
  font-size: calc(12.5 * var(--px));
  line-height: 1;
  letter-spacing: .08em;
}
.red_dates_day {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: calc(10 * var(--px));
  margin: calc(20 * var(--px)) 0 0;
  font-size: calc(34 * var(--px));
  line-height: 1;
}
.red_dates_day small {
  margin-left: calc(5 * var(--px));
  font-size: calc(13 * var(--px));
}
/* → （ARR_a・winter2026 と同じ矢印） */
.red_dates_arr {
  display: inline-block;
  width: calc(28.5 * var(--px));
  height: calc(4.5 * var(--px));
  margin-inline: calc(4 * var(--px));
  background: url(../../img/ARR_a.webp) no-repeat center / 100% 100%;
}

/* 写真：横スライドの自動ループ（JS が track を translateX）
   1 枚 310px・間 18px・左 37px。右に次の写真が少し見える */
.rsl {
  margin-top: calc(118 * var(--px));
  overflow: hidden;
}
.rsl_track {
  display: flex;
  gap: calc(18 * var(--px));
  padding-left: calc(37 * var(--px));
  transition: transform .9s var(--ease);
}
.rsl_track.is-jump { transition: none; }   /* ループの継ぎ目で一瞬で戻す時 */
.rsl_slide {
  flex: none;
  width: calc(310 * var(--px));
  aspect-ratio: 310 / 400;
}
.rsl_slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro_emblem {
  position: relative;
  width: calc(342 * var(--px));   /* LOGO_emblem（2倍書き出し） */
  margin: 0 auto;   /* 上の余白は .red_scene の padding-top に（margin だと外へ抜けて、光が上で切れるため） */
}
/* 赤い光彩（PC/TB ではカラム外まで広げる） */
.intro_emblem::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: calc(614.4 * var(--px));
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(235, 20, 45, .75) 0%, rgba(200, 12, 35, .35) 30%, transparent 60%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---------------------------------------------------------
   R エンブレム アニメーション（JS が #emblem に .is-play を付与）
     0.0s〜 ズームアウト（1.3 → 1）
     0.5s〜 R の上を光が左上→右下へ走る＋フレア3連
     1.6s〜 光が中心から光線の上をなぞって外へ走る（1回のみ）
             └ 光線画像をリング状マスクで切り抜き、半径 --wave を広げる
               光の粒は JS で各光線の始点→終点に同期（速度 34cqw/s）
             └ 中心のふくらみ＋先頭に追従する光の輪（.emb_bloom）
             └ 通過後に粒子が散る（.emb_dust / JS で生成）
     以降、R の光（帯＋フレア）を 6s 周期でループ
       ※周期を変える場合は embShine / embFlare の % も合わせて調整
   サイズはすべて .emb 幅基準の cqw
   --------------------------------------------------------- */
.emb {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  container-type: inline-size;
  opacity: 0;
  transform: scale(1.3);
}
.emb > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.emb_rays--glow {
  filter: blur(.3cqw) brightness(2.6) saturate(1.3);
  mix-blend-mode: screen;
  opacity: 0;
}

/* 光線をなぞる光（中心から広がるリングで光線を切り抜く） */
@property --wave {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.emb_rays--wave {
  --wave: 0px;
  filter: brightness(3.2) saturate(1.2) drop-shadow(0 0 .6cqw rgba(255, 210, 140, .9));
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    transparent calc(var(--wave) - 16cqw),
    rgba(0, 0, 0, .3) calc(var(--wave) - 7cqw),
    #000 var(--wave),
    transparent calc(var(--wave) + .6cqw));
          mask-image: radial-gradient(circle at 50% 50%,
    transparent calc(var(--wave) - 16cqw),
    rgba(0, 0, 0, .3) calc(var(--wave) - 7cqw),
    #000 var(--wave),
    transparent calc(var(--wave) + .6cqw));
  opacity: 0;
}

/* R の上を走る光（R の形でマスク） */
.emb_shine {
  overflow: hidden;
  -webkit-mask: url(../../img/EMB_R.webp) center / 100% 100% no-repeat;
          mask: url(../../img/EMB_R.webp) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
}
.emb_shine::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(135deg,
    transparent 40%,
    rgba(255, 246, 220, .15) 45%,
    rgba(255, 250, 235, .95) 50%,
    rgba(255, 246, 220, .15) 55%,
    transparent 60%);
  transform: translate(-25%, -25%);
}

/* フレア（十字のきらめき） */
.emb_flare {
  inset: auto;
  width: 22cqw;
  height: 22cqw;
  background:
    radial-gradient(circle, #fff 0, rgba(255, 244, 214, .95) 5%, rgba(255, 196, 120, .35) 16%, transparent 40%),
    linear-gradient(transparent 49.4%, rgba(255, 248, 230, .95) 50%, transparent 50.6%),
    linear-gradient(90deg, transparent 49.4%, rgba(255, 248, 230, .95) 50%, transparent 50.6%);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%);
          mask: radial-gradient(circle, #000 12%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}
.emb_flare--1 { left: 24.5%; top: 45%; }
.emb_flare--2 { left: 48.5%; top: 46%; }   /* 10/26 新ロゴに合わせて R のフチへ（元 47.5%） */
.emb_flare--3 { left: 72.5%; top: 66%; }

/* 光のふくらみ
   本体：先頭に追従して広がる柔らかい光の輪（--wave は embWave と同じ動き）
   ::before：光が中心を出る瞬間に R の周りがふわっと膨らむ光 */
.emb_bloom {
  --wave: 0px;
  inset: -40%;            /* 光の輪が四角く切れないよう広げる */
  width: auto;
  height: auto;
  background: radial-gradient(circle at 50% 50%,
    transparent calc(var(--wave) - 16cqw),
    rgba(255, 180, 100, .1) calc(var(--wave) - 8cqw),
    rgba(255, 214, 150, .32) calc(var(--wave) - 1.5cqw),
    rgba(255, 214, 150, .08) calc(var(--wave) + 3cqw),
    transparent calc(var(--wave) + 7cqw));
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.emb_bloom::before {
  content: "";
  position: absolute;
  inset: 28%;             /* .emb 幅の 80% */
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 226, 170, .55) 0%,
    rgba(255, 190, 110, .32) 30%,
    rgba(255, 150, 80, .1) 55%,
    transparent 70%);
  opacity: 0;
  transform: scale(.4);
}

/* 光の粒（JS で生成：各光線の始点→終点を --wave と同じ速度で進む） */
.emb_sparks { pointer-events: none; }
.emb_spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a));
}
.emb_spark i {
  position: absolute;
  top: calc(var(--s) * -.5);
  left: calc(var(--s) * -.5);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, rgba(255, 242, 210, .95) 12%, rgba(255, 205, 130, .45) 32%, rgba(255, 170, 90, .15) 52%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
}

/* 散る粒子（JS で生成：光の通過後、ランダムな方向へふわっと散って消える） */
.emb_dust {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a));
}
.emb_dust i {
  position: absolute;
  top: calc(var(--s) * -.5);
  left: calc(var(--s) * -.5);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, rgba(255, 236, 196, .9) 30%, rgba(255, 190, 110, .3) 60%, transparent 75%);
  mix-blend-mode: screen;
  opacity: 0;
}
/* 光線の先端で弾けるきらめき */
.emb_spark b {
  position: absolute;
  top: calc(var(--ts) * -.5);
  left: calc(var(--ts) * -.5);
  width: var(--ts);
  height: var(--ts);
  background:
    radial-gradient(circle, #fff 0, rgba(255, 238, 200, .9) 10%, transparent 34%),
    linear-gradient(transparent 48.5%, #fff8e6 50%, transparent 51.5%),
    linear-gradient(90deg, transparent 48.5%, #fff8e6 50%, transparent 51.5%);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 66%);
          mask: radial-gradient(circle, #000 10%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0;
}

/* 再生 */
.intro_emblem.is-play .emb {
  animation:
    embIn   .8s var(--ease) both,
    embZoom 5s cubic-bezier(.35, .1, .25, 1) both;
}
.intro_emblem.is-play .emb_shine::before {
  animation: embShine 6s linear .2s infinite both;
}
.intro_emblem.is-play .emb_flare { animation: embFlare 6s linear infinite both; }
.intro_emblem.is-play .emb_flare--1 { animation-delay: .7s; }
.intro_emblem.is-play .emb_flare--2 { animation-delay: 1.1s; }
.intro_emblem.is-play .emb_flare--3 { animation-delay: 1.5s; }
.intro_emblem.is-play .emb_rays--wave {
  animation: embWave 1.65s linear 1.6s both;   /* 0 → 56cqw ≒ 34cqw/s（JS の SPEED と合わせる） */
}
.intro_emblem.is-play .emb_rays--glow {
  animation: embGlow 1.6s ease-out 2.6s both;
}
.intro_emblem.is-play .emb_spark i {
  animation: embSpark var(--d) linear var(--delay) both;
}
.intro_emblem.is-play .emb_spark b {
  animation: embTip 1.8s var(--ease) var(--tdelay) both;   /* 2026-10-08 調整：0.8s → 1.8s */
}
.intro_emblem.is-play .emb_bloom {
  animation: embBloom 1.06s linear 1.6s both;         /* 0 → 36cqw ≒ 34cqw/s（光線の内側で消える） */
}
.intro_emblem.is-play .emb_bloom::before {
  animation: embSwell 1.4s var(--ease) 1.4s both;
}
.intro_emblem.is-play .emb_dust i {
  animation: embDust var(--d) cubic-bezier(.3, .4, .6, 1) var(--delay) both;   /* 減速しすぎず最後まで流れる */
}

@keyframes embIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes embZoom { from { transform: scale(1); }   /* 10/26 拡大→縮小オフ（元 1.3） */ to { transform: scale(1); } }
/* 6s 周期：0〜30%（1.8s）で通過、残りは待機 */
@keyframes embShine {
  0%   { transform: translate(-25%, -25%); }
  30%  { transform: translate(25%, 25%); }
  100% { transform: translate(25%, 25%); }
}
/* 6s 周期：0〜15%（0.9s）で光って消える、残りは待機 */
@keyframes embFlare {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  5%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(25deg); animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  15%  { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(60deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(60deg); }
}
@keyframes embWave {
  0%   { --wave: 0cqw;  opacity: 1; }
  85%  { opacity: 1; }
  100% { --wave: 56cqw; opacity: 0; }
}
@keyframes embBloom {
  0%   { --wave: 0cqw;  opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: .8; }
  100% { --wave: 36cqw; opacity: 0; }
}
@keyframes embSwell {
  0%   { opacity: 0;   transform: scale(.4); }
  35%  { opacity: 1;   transform: scale(.9); }
  100% { opacity: 0;   transform: scale(1.35); }
}
@keyframes embDust {
  0%   { opacity: 0; transform: translate(calc(var(--r0) * 1cqw), 0) scale(.5); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc((var(--r0) + var(--dr)) * 1cqw), calc(var(--dy) * 1cqw)) scale(.4); }
}
@keyframes embGlow {
  from { opacity: 0; }
  to   { opacity: .45; }
}
@keyframes embSpark {
  0%   { opacity: 0; transform: translateX(calc(var(--r0) * 1cqw)); }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(var(--r1) * 1cqw)); }
}
@keyframes embTip {
  0%   { opacity: 0; transform: translateX(calc(var(--r1) * 1cqw)) scale(0) rotate(0deg); }
  40%  { opacity: 1; transform: translateX(calc(var(--r1) * 1cqw)) scale(1) rotate(30deg); }
  100% { opacity: 0; transform: translateX(calc(var(--r1) * 1cqw)) scale(.2) rotate(60deg); }
}

/* ---------------------------------------------------------
   2026-10-08 調整（emblem_demo.html で確認済み）：以下の演出は非表示
     ・光線を走る光の粒（環に見えていた点）  … .emb_spark i
     ・④ 光の輪（ふくらみ）                 … .emb_bloom の背景
     ・② 光線全体の輝き                     … .emb_rays--glow
     ・⑤ 中心のふくらみ                     … .emb_bloom::before
   ※復活させる時は、該当する行を削除するだけ
   --------------------------------------------------------- */
.emb_spark i { display: none; }
.emb_bloom { background: none; }
.emb_rays--glow { display: none; }
.emb_bloom::before { display: none; }
.emb_rays--wave { display: none; }   /* 光線をなぞる光（10/22 非表示） */
.emb_spark b { display: none; }      /* 先端のきらめき（10/22 非表示） */
.emb_dust { display: none; }         /* 散る粒子（10/29 非表示） */

/* ---------------------------------------------------------
   2026-10-26 調整（emblem_demo.html で確認済み）
     ・最初の拡大→縮小はオフ（embZoom の開始を 1.3 → 1）
     ・R の上を走る光：強さ 50%
     ・フレア：1 回目（1 回だけ）と 2 回目以降（6 秒後から繰り返し）に分割
         1 回目 … 透明度 50%・大きさ 55%
         2 回目以降 … 透明度 40%・大きさ 40%
       ※透明度は opacity をアニメーションが使うので filter で
   --------------------------------------------------------- */
.emb_shine::before { opacity: .5; }
.intro_emblem.is-play .emb_flare { animation-iteration-count: 1; }
.intro_emblem.is-play .emb_flare--2nd { animation-iteration-count: infinite; }
.intro_emblem.is-play .emb_flare--1.emb_flare--2nd { animation-delay: 6.7s; }
.intro_emblem.is-play .emb_flare--2.emb_flare--2nd { animation-delay: 7.1s; }
.intro_emblem.is-play .emb_flare--3.emb_flare--2nd { animation-delay: 7.5s; }
.emb_flare { width: calc(22cqw * .55); height: calc(22cqw * .55); filter: opacity(.5); }
.emb_flare--2nd { width: calc(22cqw * .4); height: calc(22cqw * .4); filter: opacity(.4); }

@media (prefers-reduced-motion: reduce) {
  .emb,
  .intro_emblem.is-play .emb { opacity: 1; transform: none; animation: none; }
  .intro_emblem.is-play .emb_shine::before,
  .intro_emblem.is-play .emb_flare,
  .intro_emblem.is-play .emb_rays--glow,
  .intro_emblem.is-play .emb_rays--wave,
  .intro_emblem.is-play .emb_spark i,
  .intro_emblem.is-play .emb_spark b,
  .intro_emblem.is-play .emb_bloom,
  .intro_emblem.is-play .emb_bloom::before,
  .intro_emblem.is-play .emb_dust i { animation: none; }
}

/* =========================================================
   WHITE
   ========================================================= */
/* #white 自体は透明。背景は固定背景の層（.stage_red → .stage_white）で切り替える
     1. 赤セクションが画面を覆ったら .stage_red を表示（見た目は赤のまま）
     2. #white のコンテンツが赤の上をスクロールしてくる
     3. 一定位置まで来たら .stage_white（白＋PC/TB は左の写真・右のロゴ）がフェードイン
   JS が #stage に .is-red / .is-white を付与 */
.white {
  position: relative;
  background: var(--side-shadow);   /* KV 以外のコンテンツエリアの左右に影 */
}
.white_col {
  padding-bottom: calc(97 * var(--px));
}

.stage_red,
.stage_white {
  position: absolute;
  inset: 0;
  opacity: 0;
}
/* 赤セクションを過ぎた後に見える赤：BG_b の下端 8px を切り出した画像（BG_b_end）で塗る
   ※CSS の単色だと、画像（赤セクションの BG_b）と表示のされ方がわずかに違い、境目が見えるため */
.stage_red {
  background:
    url(../img/BG_b_end.webp) repeat center top / calc(1440 * var(--px)) calc(8 * var(--px)),
    linear-gradient(var(--red-dk), var(--red-dk));
}
.stage.is-red .stage_red { opacity: 1; }

.stage_white {
  background: linear-gradient(#fff, #fff);   /* 背景色ではなく画像として */
  transition: opacity .8s var(--ease);
}
.stage.is-white .stage_white { opacity: 1; }
/* iOS Safari 対策：固定背景の中で「今見えていない層」は visibility: hidden にする
   （透明・下に隠れているだけの層の色も Safari がバーに拾い続けるため。2026-10-09 実機検証）
   フェードが終わってから隠し、表示する時はすぐ戻してからフェードイン */
.stage_kv,
.kv_scroll_area {
  transition: visibility 0s;
}
.stage.is-red .stage_kv,
.stage.is-red .kv_scroll_area {
  visibility: hidden;
  transition: visibility 0s linear .8s;
}
/* 固定の赤はフェードさせず即切り替え（赤セクション自体の背景と同じ赤なので切替は見えない。
   フェードさせると #white の裏で赤がじわっと現れて見えるため） */
.stage_red {
  visibility: hidden;
  transition: none;
}
.stage.is-red .stage_red {
  visibility: visible;
  transition: none;
}
.stage.is-red.is-white .stage_red {
  visibility: hidden;
  transition: visibility 0s linear .8s;
}
.stage_white {
  visibility: hidden;
  /* 白 → 赤に戻る時も、赤セクションの背景と同じく 0.8s かけてフェードアウトしてから隠す */
  transition: opacity .8s var(--ease), visibility 0s linear .8s;
}
.stage.is-white .stage_white {
  visibility: visible;
  transition: opacity .8s var(--ease), visibility 0s;
}

/* 左 … 店舗写真（画面左端〜カラム手前・画面の高さいっぱい）
   右 … ReFa GINZA ロゴ（右の余白の中央） ※SP は余白がないので非表示 */
.white_side_l,
.white_side_r {
  display: none;
}
@media (min-width: 768px) {
  .white_side_l,
  .white_side_r {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc((100% - var(--col)) / 2);
  }
  .white_side_r {
    display: grid;
    place-items: center;
  }
}
.white_side_l { left: 0; }
.white_side_l img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.white_side_r { right: 0; }
.white_side_logo {
  width: 223px;   /* RIGHT_logo（2倍書き出し） */
}
/* 右のロゴのリンク（https://ginza.refa.net/）
   固定背景（pointer-events: none）の中なので、リンクだけクリックできるようにする。
   手前の白のエリア・フッターは、カラムの外をクリックが通り抜けるようにする */
.white_side_link {
  display: block;
  pointer-events: auto;
  transition: opacity .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .white_side_link:hover { opacity: .65; }
}
@media (min-width: 768px) {
  main,
  .ft { pointer-events: none; }        /* main（全幅）もクリックを通す */
  .red_scene,
  .red_col,
  .white_col,
  .ft_col { pointer-events: auto; }    /* カラムの中は通常どおり */
}

/* =========================================================
   WHITE：EXCLUSIVE COLLECTION（KIT / COLLECTION）/ MONTECATINI ANNIVERSARY SET / HOLIDAY EVENT
   ========================================================= */
.white_col { color: var(--brown); text-align: center; }

/* 大見出し（EXCLUSIVE COLLECTION / ReFa HOLIDAY EVENT） */
.gc_head { padding-top: calc(95 * var(--px)); }
.gc_ttl,
.pop_ttl {
  font-size: calc(35 * var(--px));
  line-height: 1.22;
  letter-spacing: .02em;
}
.gc_txt {
  margin-top: calc(22 * var(--px));
  font-size: calc(12.5 * var(--px));
  line-height: 2.1;
  letter-spacing: .08em;
}

/* 小見出しブロック（1st ANNIVERSARY KIT / COLLECTION） */
.gsub { padding: calc(100 * var(--px)) 0; }
.gsub--tint { background: #f6f2ef; }   /* COLLECTION は薄いベージュ地 */
.gsub_ttl {
  font-size: calc(26 * var(--px));
  line-height: 1.3;
  letter-spacing: .02em;
}
.gsub_txt {
  margin-top: calc(20 * var(--px));
  font-size: calc(12 * var(--px));
  line-height: 2.2;
  letter-spacing: .06em;
}
.gsub_note {
  margin-top: calc(12 * var(--px));
  font-size: calc(9.5 * var(--px));
  letter-spacing: .04em;
}
.gsub .crs { margin-top: calc(40 * var(--px)); }

/* カード（カルーセルの中身） */
.crs_slide { text-align: left; }
/* 商品名のリンク（別タブ）
   常に薄い下線（デザイン）。マウスを乗せると濃い下線が左から右へ伸びる / 外すと左から右へ縮んで消える
   ※背景画像で下線を描くので、2 行に折り返しても各行に下線が付く */
.card_names a {
  padding-bottom: .1em;
  background:
    linear-gradient(currentColor, currentColor) no-repeat right bottom / 0% 1px,
    linear-gradient(#dccfc6, #dccfc6) no-repeat left bottom / 100% 1px;
  transition: background-size .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card_names a:hover {
    background-position: left bottom, left bottom;
    background-size: 100% 1px, 100% 1px;
  }
}
.crs_img { aspect-ratio: 280 / 400; }
/* 画像 560×800 */
.crs_img img { width: 100%; height: 100%; object-fit: cover; }
/* ラベル（限定カラー など）：デザイン実測 高さ 21px */
.card_tag {
  display: inline-block;
  margin-top: calc(40 * var(--px));
  padding: calc(2 * var(--px)) calc(7 * var(--px));
  background: #c2ad9d;
  color: #fff;
  font-family: var(--font-sans);
  font-size: calc(11 * var(--px));
  line-height: 1.55;
  letter-spacing: .06em;
}
/* KIT：PERSONAL GIFT SERVICE（名入れ）… 薄い地の小さなラベル。（名入れ）は小さく */
/* 英字（Lustria）は字面が上寄りなので、上下の余白を 1px ずつ調整して文字を枠の中央に */
.card_tag--pgs {
  padding-top: calc(3 * var(--px));
  padding-bottom: calc(1 * var(--px));
  background: #ccbca2;
  font-family: var(--font-en);
  font-size: calc(11.5 * var(--px));
  letter-spacing: .02em;
}
.card_tag--pgs small {
  font-family: var(--font-ja);
  font-size: .72em;
  letter-spacing: .04em;
}
/* 商品名（デザイン実測：Lustria 18px・行送り 26.5px）。長い名前はカード幅で折り返す */
.card_name,
.card_names {
  font-size: calc(18 * var(--px));
  line-height: 1.47;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.card_name { margin-top: calc(15 * var(--px)); }
.card_names { margin-top: calc(9 * var(--px)); }
.card_names li + li { margin-top: calc(9 * var(--px)); }
.card_names .nw { white-space: nowrap; }   /* 「(Rose Gold)」などは途中で折り返さない */
/* カラー名（COLLECTION）：小さめ */
.card_color {
  margin-top: calc(7 * var(--px));
  font-size: calc(13.5 * var(--px));
  line-height: 1.6;
  letter-spacing: .02em;
}
/* 価格（デザイン実測：Shippori Mincho 20px・#4c4c4c、¥ は小さめ、（税込）は .55em） */
.card_price {
  font-family: var(--font-ja);
  font-size: calc(20 * var(--px));
  line-height: 1.3;
  letter-spacing: .02em;
  word-spacing: -.1em;   /* 「〜」前後の空きをデザインに合わせる */
  color: #4c4c4c;
}
.card_price { margin-top: calc(8 * var(--px)); }
.card_names + .card_price { margin-top: calc(20 * var(--px)); }
.card_price .yen { font-size: .72em; margin-right: .06em; }
.card_price small { font-size: .55em; margin-left: calc(-3 * var(--px)); }

/* MONTECATINI ANNIVERSARY SET：1 枚画像 ＋ キャプション */
.sig {
  padding: calc(115 * var(--px)) calc(20 * var(--px)) calc(65 * var(--px));
  border-bottom: 1px solid #ebe4da;
}
.sig_ttl {
  font-size: calc(26 * var(--px));
  line-height: 1.3;
  letter-spacing: .02em;
}
.sig_txt {
  margin-top: calc(18 * var(--px));
  font-size: calc(11.5 * var(--px));
  line-height: 2.3;
  letter-spacing: .06em;
}
.sig_img {
  margin-top: calc(40 * var(--px));
  aspect-ratio: 344 / 450;
}
.sig_img img { width: 100%; height: 100%; object-fit: cover; }
/* キャプション（デザイン実測：10px・字間 .1em・行送り 20px） */
.sig_cap {
  margin-top: calc(25 * var(--px));
  font-family: var(--font-ja);   /* 10/29 明朝に（元 --font-sans） */
  font-size: calc(10 * var(--px));
  line-height: 1.8;              /* 10/29 調整（元 2） */
  letter-spacing: .1em;
  text-align: justify;
}
.sig_cap_lead { font-size: calc(12 * var(--px)); line-height: 1.5; }   /* 1 文目だけ 12px 相当・行間は詰める */

/* ReFa HOLIDAY EVENT：1 枚画像に暗い層 ＋ COMING SOON */
.pop { padding: calc(110 * var(--px)) calc(20 * var(--px)) 0; }
.pop_grid {
  position: relative;
  margin-top: calc(40 * var(--px));
}
.pop_img { aspect-ratio: 344 / 450; }
.pop_img img { width: 100%; height: 100%; object-fit: cover; }
.pop_grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 20, 18, .5);   /* グレーは濃いめ（10/19 修正） */
}
.pop_soon {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 1;
  color: #fff;
  font-size: calc(18 * var(--px));
  letter-spacing: .06em;
  transform: translateY(-50%);
}

/* =========================================================
   上部ナビ（画面上部に固定・背景なし）
     ※iOS Safari 対策：背景色を持たせない
     白のエリア（.stage.is-white）では文字・ロゴを茶色に（0.8s）
   ========================================================= */
.gn {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: #fff;
  pointer-events: none;
  transition: color .8s var(--ease);
}
.stage.is-white ~ .gn { color: var(--brown); }
/* 1 行：ロゴ（左）＋ ナビ（右） */
.gn_inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--col);
  margin-inline: auto;
  padding: calc(12 * var(--px)) calc(41 * var(--px)) calc(12 * var(--px)) calc(15 * var(--px));
}
.gn_logo {
  display: block;
  flex: none;
  width: calc(74 * var(--px));
  aspect-ratio: 147 / 56;
  background-color: currentColor;   /* LOGO_refa をマスクにして文字色で塗る */
  -webkit-mask: url(../../img/LOGO_refa.webp) no-repeat center / contain;
          mask: url(../../img/LOGO_refa.webp) no-repeat center / contain;
  pointer-events: auto;
}
.gn_nav {
  display: flex;
  justify-content: center;
  gap: calc(35 * var(--px));
  padding-top: calc(4 * var(--px));
  font-size: calc(11 * var(--px));
  letter-spacing: .06em;
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
  .gn_logo, .gn_nav a { transition: opacity .4s var(--ease); }
  .gn_logo:hover, .gn_nav a:hover { opacity: .65; }
}

/* =========================================================
   カルーセル（scroll-snap ＋ JS でページ送り）
   ========================================================= */
.crs_track {
  display: flex;
  gap: calc(25 * var(--px));
  padding-inline: calc(52 * var(--px));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(52 * var(--px));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.crs_track::-webkit-scrollbar { display: none; }
.crs_slide {
  flex: none;
  width: calc(280 * var(--px));
  scroll-snap-align: start;
}
/* マウスでドラッグして横スクロール（JS が .is-dragscroll / ドラッグ中は .is-dragging） */
.is-dragscroll { cursor: grab; }
.is-dragscroll.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;            /* ドラッグ中はスナップを止める（離したら JS がなめらかに寄せる） */
  user-select: none;
}
.is-dragscroll img { -webkit-user-drag: none; user-select: none; }
.is-dragscroll.is-dragging a,
.is-dragscroll.is-dragging button { pointer-events: none; }


.crs_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(20 * var(--px));
  margin-top: calc(45 * var(--px));   /* 36 × 125% */
}
.crs_count {
  font-family: var(--font-sans);
  font-size: calc(10.5 * var(--px));
  letter-spacing: .1em;
  color: var(--brown);
}
.crs_btn {
  position: relative;
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  color: var(--brown);
  transition: opacity .3s var(--ease);
}
.crs_btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(6 * var(--px));
  height: calc(6 * var(--px));
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translate(-70%, -50%) rotate(45deg);
}
.crs_btn--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.crs_btn:disabled {
  opacity: .35;
  cursor: default;
}

/* =========================================================
   FOOTER
   ========================================================= */
/* ※winter2026 のフッターと同じ（パスのみ ginza 用） */
.ft_col {
  padding: calc(61.4 * var(--px)) calc(42.2 * var(--px)) calc(23 * var(--px));
  background: linear-gradient(180deg, #e2d0b4 0%, #c6ad86 100%);   /* winter2026 と同じ */
  color: #fff;
  text-align: center;
}

.ft_btns {
  display: grid;
  gap: calc(27 * var(--px));
  margin-top: calc(-11 * var(--px));      /* 上余白：カンプの 50px に合わせる */
  padding: 0 calc(12.3 * var(--px));      /* ボタン幅 275px */
}
/* ボタン：生成りの塗り・枠なし。ロゴ・文字・矢印は文字色（currentColor）で塗る */
.ft_btn {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(62 * var(--px));
  padding: 0 calc(22 * var(--px)) 0 calc(28 * var(--px));
  background-color: #f0eae4;
  text-align: left;
  transition:
    background-color .4s var(--ease),
    color .4s var(--ease);
}
.ft_btn--ginza { color: #ac8856; }
.ft_btn--brand { color: #231814; }
/* ↗ ARR_c（2倍書き出し） */
.ft_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(22 * var(--px));
  width: calc(9 * var(--px));
  height: calc(9 * var(--px));
  background-color: currentColor;
  -webkit-mask: url(../../img/ARR_c.webp) no-repeat center / 100% 100%;
          mask: url(../../img/ARR_c.webp) no-repeat center / 100% 100%;
  transform: translateY(-50%);
}
.ft_btn_logo {
  flex: none;
  width: calc(64 * var(--px));
  background-color: currentColor;
  margin-right: calc(23 * var(--px));
}
/* ReFa GINZA ロゴ（ginza/img/RIGHT_logo.webp） */
.ft_btn--ginza .ft_btn_logo {
  aspect-ratio: 446 / 220;
  -webkit-mask: url(../img/RIGHT_logo.webp) no-repeat center / contain;
          mask: url(../img/RIGHT_logo.webp) no-repeat center / contain;
}
/* ReFa ロゴ（LOGO_refa.webp） */
.ft_btn--brand .ft_btn_logo {
  aspect-ratio: 147 / 56;
  -webkit-mask: url(../../img/LOGO_refa.webp) no-repeat center / contain;
          mask: url(../../img/LOGO_refa.webp) no-repeat center / contain;
}
.ft_btn_txt {
  flex: 1;
  font-size: calc(12 * var(--px));
  letter-spacing: .12em;
}
.ft_btn--brand .ft_btn_txt { font-size: calc(13 * var(--px)); letter-spacing: .08em; }

/* ナビ（左揃え） */
.ft_nav {
  margin-top: calc(46 * var(--px));
  margin-left: calc(-9.2 * var(--px));   /* カラム左から 33px の位置に揃える */
  text-align: left;
  font-size: calc(15 * var(--px));
  line-height: 1.4;
  letter-spacing: .04em;
}
.ft_nav > li + li { margin-top: calc(19 * var(--px)); }
.ft_nav_sub {
  margin-top: calc(6 * var(--px));
  font-size: calc(12 * var(--px));
}
.ft_nav_sub li { position: relative; padding-left: calc(19 * var(--px)); }
.ft_nav_sub li + li { margin-top: calc(6 * var(--px)); }
.ft_nav_sub li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75em;
  width: calc(10 * var(--px));
  height: 1px;
  background: currentColor;
}

.ft_insta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(48 * var(--px));
}
.ft_insta_icon {
  width: calc(40.5 * var(--px));
}
.ft_insta_txt {
  margin-top: calc(9.6 * var(--px));
  font-size: calc(11.5 * var(--px));
}

/* リンク・コピーライト・MTG は左右端を揃える（.ft_col の内幅いっぱい） */
.ft_links {
  display: flex;
  justify-content: space-between;
  margin-top: calc(34.6 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(10.4 * var(--px));
  letter-spacing: .06em;
  white-space: nowrap;
}

.ft_mtg_link { display: inline-block; }   /* MTG ロゴ（リンク） */
.ft_mtg {
  width: calc(57 * var(--px));
  margin-top: calc(38.4 * var(--px));
}
.ft_copy {
  margin-top: calc(7.7 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(10 * var(--px));
  letter-spacing: 0;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;   /* 1行でも両端揃え */
}

/* =========================================================
   hover（PCのみ）
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .ft_nav a, .ft_links a, .ft_insta { transition: opacity .4s var(--ease); }
  .ft_nav a:hover, .ft_links a:hover, .ft_insta:hover { opacity: .65; }
  .ft_mtg_link { transition: opacity .4s var(--ease); }
  .ft_mtg_link:hover { opacity: .65; }
  .ft_btn:hover { background-color: #fff; }
  .crs_btn:not(:disabled):hover { opacity: .6; }
}

/* =========================================================
   スクロールイン（JS が .is-in を付与）
   ========================================================= */
.js .fx {
  opacity: 0;
  transform: translate3d(0, calc(16 * var(--px)), 0);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.js .fx.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .fx { opacity: 1; transform: none; transition: none; }
}

/* ※renewal/common/css/common.css から移植 */
/* =========================================================
   スクロールバー（PC のみ）
     標準のスクロールバーを消し、細いバー（.sbar）を画面右端に重ねる
     → コンテンツ幅に影響しない / スクロール中・バーに触れている間だけ表示
     JS が html に .has-sbar を付与（JS 無効時は標準のまま）
   ========================================================= */
html.has-sbar { scrollbar-width: none; }
html.has-sbar::-webkit-scrollbar { display: none; }

.sbar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 55;                       /* メニュー（60〜70）より下 */
  width: 14px;                        /* 掴みやすい当たり判定 */
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.sbar.is-show,
.sbar:hover,
.sbar.is-drag { opacity: 1; }
.sbar[hidden] { display: none; }
.sbar_thumb {
  position: absolute;
  top: 0;
  right: 4px;
  width: 4px;
  height: var(--h, 40px);
  border-radius: 4px;
  background: rgba(157, 127, 103, .6);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);   /* 暗い背景の上でも見えるように */
  transform: translateY(var(--y, 0));
  cursor: grab;
  transition: width .3s var(--ease), right .3s var(--ease), background-color .3s var(--ease);
}
.sbar:hover .sbar_thumb,
.sbar.is-drag .sbar_thumb {
  right: 3px;
  width: 7px;
  background: rgba(157, 127, 103, .85);
}
.sbar.is-drag .sbar_thumb { cursor: grabbing; }
html.is-sbar-drag,
html.is-sbar-drag * { user-select: none; }

/* =========================================================
   ヘッダー：ティザーと同じ動き（10/22・JS が .is-pin / .is-show / .is-hide）
     最初はページの一番上に置き、下スクロールでは一緒に流れる
     上スクロールの時だけ画面に固定して上から出す（色はこれまでどおり・背景なし）
   ========================================================= */
.gn { position: absolute; transform: none; }
.gn.is-pin { position: fixed; transform: translate3d(0, -100%, 0); }
.gn.is-pin.is-show { transform: none; transition: color .8s var(--ease), transform .5s var(--ease); }
.gn.is-pin.is-hide { transition: color .8s var(--ease), transform .4s var(--ease); }
/* EXCLUSIVE COLLECTION の見出し・リード（10/22 デザイン実測） */
.gc_ttl { font-size: calc(40 * var(--px)); line-height: 1.05; letter-spacing: .02em; }
.gc_head { padding-top: calc(93 * var(--px)); }
.gc_txt { margin-top: calc(27 * var(--px)); line-height: 2.16; }
.gc_txt_en { letter-spacing: .2em; }

/* =========================================================
   簡易的なコピー防止：文字選択・画像の長押し保存メニュー・ドラッグを無効に（ginza.refa.net と同じ仕様）
   ※入力欄があれば選択できるように除外
   ========================================================= */
body {
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;     /* iOS：長押しのメニュー（画像を保存 など） */
}
input, textarea, [contenteditable] {
  -webkit-user-select: text;
          user-select: text;
}
img, video { -webkit-user-drag: none; }

/* ヘッダー：上スクロールで出てきた時（.is-show）は、ティザーと同じ白の半透明＋ぼかしの背景（10/23）
     背景の上では文字・ロゴを濃い色に（このページの白のエリアと同じ色）
     ※iOS Safari のバー対策：背景色ではなく background-image で */
.gn_inner { isolation: isolate; }
.gn_inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .72));
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.gn.is-pin.is-show .gn_inner::before { opacity: 1; }
.gn.is-pin.is-show { color: var(--brown); }

/* =========================================================
   10/23 修正
   ========================================================= */
/* G-1：メニューはロゴのすぐ隣（右寄せではなく） */
.gn_inner { justify-content: flex-start; }
.gn_nav { margin-left: calc(50 * var(--px)); }
/* G-3：KIT ④ は 2 つ目の商品が名入れ → ラベルを 2 つ目の商品名の上に。1 つ目の商品名は他のカードのラベルの位置から */
.card_names--pgs2 { margin-top: calc(40 * var(--px)); }
.card_names--pgs2 .card_tag--pgs { display: table; margin: calc(17 * var(--px)) 0 calc(9 * var(--px)); }   /* 上の商品名との間は 13px → 26px（10/23） */