@charset "UTF-8";
/* =========================================================
   ReFa LUCKY STAR - Winter 2026（本公開）
   ※ティザー（../css/style.css）から共通部分を流用

   ■レイアウト（スマポンシブ）
     SP（〜767px） … 384px カンプを基準にビューポート幅で拡大縮小
     PC / TB（768px〜） … 384px 固定で中央表示、
                          左右は各セクションの背景を全幅で表示

   ■サイズ指定
     カンプ（384px）上の px 値に --px を掛ける。
       SP     : --px = 100vw / 384
       PC / TB: --px = 1px
     使い方： カンプで 20px → calc(20 * var(--px))
     罫線などのヘアラインのみ px のまま
   ========================================================= */

/* ---------- 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; }

/* ---------- variables ---------- */
:root {
  --px:        calc(100vw / 384);              /* SP：384px 基準で可変 */
  --col:       calc(384 * var(--px));

  --navy:      #0b1733;
  --navy-dk:   #061026;
  --red:       #a30b20;
  --red-dk:    #870818;
  --gold:      #e2bb82;
  --cream:     #eadfcb;
  --beige:     #e2d0b4;
  --beige-dk:  #c6ad86;

  --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; }                         /* PC/TB：384px 固定 */
}

/* SP/TB（Lenis 無効時）のページ内リンク用。Lenis 有効時は lenis.css が auto に戻す */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background-color: #011129;   /* 初期は紺。JS が画面上端に見えている色に書き換え（iOS Safari のバー色対策） */
  color: var(--cream);
  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; }

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


/* ---------- 追加の色 ---------- */
:root {
  --crimson:   #ac1830;     /* GIFT SELECTION の見出し・商品名 */
  --gold-dk:   #a0864a;     /* EVENT の見出し */
  --ivory:     #f6f3ee;     /* FAQ・SHOP LIST の地 */
  --ink:       #3a3330;     /* 白地の本文 */
}

/* =========================================================
   KV（動画）
   ========================================================= */
.kv {
  height: 100vh;
  height: 100svh;                 /* 1 画面分（SP はアドレスバーを除いた高さ） */
  background: var(--navy-dk);
  overflow: hidden;
}
.kv_media,
.kv_ph { position: absolute; inset: 0; }
.kv_media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--ease);      /* 最初のコマが出たらフェードイン */
}
.kv_media video.is-play { opacity: 1; }
.kv_nav {
  position: absolute;
  top: calc(56 * var(--px));
  left: 50%;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  width: calc(306 * var(--px));
  font-size: calc(10 * var(--px));
  letter-spacing: .06em;
  color: #fff;
  transform: translateX(-50%);
}
.kv_scroll {
  position: absolute;
  right: calc(16 * var(--px));
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--px));
  color: #fff;
}
.kv_scroll_txt {
  writing-mode: vertical-rl;
  font-size: calc(8 * var(--px));
  letter-spacing: .14em;
}
.kv_scroll_line {
  position: relative;
  width: 1px;
  height: calc(66 * var(--px));
  background: rgba(255, 255, 255, .3);
  overflow: hidden;
}
.kv_scroll_line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  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 (min-width: 768px) {
  .kv_nav { top: 62px; width: 300px; font-size: 9px; }
}

/* =========================================================
   INTRO（星空）
   ========================================================= */
.intro {
  overflow: hidden;
  background: transparent;           /* 固定の KV 動画（暗くなっていく）を見せる */
  color: #fff;
  text-align: center;
}
.intro_col { padding: calc(88 * var(--px)) 0 calc(250 * var(--px)); }
.intro_ttl {
  font-size: calc(22 * var(--px));
  line-height: 1.7;
  letter-spacing: .14em;
}
.intro_txt {
  margin-top: calc(32 * var(--px));
  font-size: calc(12.5 * var(--px));
  line-height: 2.6;
  letter-spacing: .12em;
}
.intro_ttl + .intro_txt { margin-top: calc(48 * var(--px)); }

/* =========================================================
   CAMPAIGN（カラムは赤のグラデ / 左右は星空）
   ========================================================= */
/* セクションの高さ ＝ 1 画面 ＋ 固定しておく長さ（--cp-pin） */
.cp {
  --cp-pin: 105svh;   /* 固定している長さ（10/23：140 → 105、75% に） */
  height: calc(100vh + 105vh);
  height: calc(100svh + var(--cp-pin));
  isolation: isolate;
}
/* 紺の背景（CSS のグラデーション）＋ 星（REL_BG_STAR：背景が透明な星だけの画像）
     固定される .cp_pin に敷くので、KV と一緒に下から上がってきて、固定中も画面に残る
     エリアの上に --cp-fade 分はみ出させ、その範囲で紺を透明 → 不透明にぼかす（＝ぼかしが終わる位置がエリアの上端）
     星はぼかしの範囲にも出す（動画の上から紺の背景まで途切れずに続く）
     色は REL_BG から計測：周囲 #011129 → 中央 #101f41（下寄りの楕円） */
.cp_pin {
  --cp-fade: 30vh;
  --cp-fade: 30svh;
  isolation: isolate;
}
.cp_pin::before,
.cp_pin::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--cp-fade));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity .9s var(--ease);
}
.cp_pin::before {
  background:
    /* 下端は次の #gift の紺（#061026）と同じ色に揃える */
    linear-gradient(180deg, rgba(6, 16, 38, 0) 72%, #061026 100%),
    radial-gradient(ellipse 62% 58% at 50% 64%, #101f41 0%, #0d1c3c 35%, #071533 65%, #011129 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--cp-fade));
          mask-image: linear-gradient(180deg, transparent 0, #000 var(--cp-fade));
}
.cp_pin::after {
  background: url(../img/REL_BG_STAR_alpha.webp) center calc(50% + var(--star-y, 0px)) / cover repeat-y;   /* 縦横とも中央基準（10/23） */   /* REL_BG_STAR の暗い部分を透明にしたもの（10/23 作り直し）
     パララックス：JS が --star-y を更新（縦に繰り返すので、ずらしても途切れない） */
}
.cp_pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}
.cp_col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: calc(60 * var(--px)) 0 calc(40 * var(--px));
  background: linear-gradient(180deg, #160003 0%, #3a0008 25%, #8e0016 60%, #6f000b 100%);
  color: #c2aa86;
  text-align: center;
  overflow: hidden;
}
.cp_sub { font-size: calc(12.5 * var(--px)); }
.cp_ttl {
  margin-top: calc(8 * var(--px));
  font-size: calc(45 * var(--px));
  line-height: 1.1;
  letter-spacing: .02em;
}
.cp_date {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: calc(8 * var(--px));
  margin-top: calc(18 * var(--px));
  font-size: calc(31 * var(--px));
  line-height: 1;
}
.cp_date_s,
.cp_date_w { font-size: calc(11 * var(--px)); }
.cp_date_line {
  align-self: center;
  width: calc(26 * var(--px));
  height: calc(5 * var(--px));
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: skewX(45deg);
}
.cp_img {
  flex: none;
  margin-top: calc(40 * var(--px));
  aspect-ratio: 384 / 320;
}
/* ⑤ イベント名称：固定されてから表示（JS が #campaign に .is-title）。行ごとに少しずつ遅らせる */
.cp_head > * {
  opacity: 0;
  transform: translate3d(0, calc(14 * var(--px)), 0);
  filter: blur(4px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease), filter 1s var(--ease);
}
.cp.is-title .cp_head > * { opacity: 1; transform: none; filter: blur(0); }
.cp.is-title .cp_head > :nth-child(2) { transition-delay: .15s; }
.cp.is-title .cp_head > :nth-child(3) { transition-delay: .3s; }
/* 流れ星（JS がランダムに生成）：右上 → 左下へ */
.cp_shoot {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.cp_shoot i {
  position: absolute;
  width: var(--len, 120px);
  height: 1px;
  background: linear-gradient(90deg, rgba(226, 200, 150, 0), rgba(240, 220, 180, .95));
  transform-origin: right center;
  opacity: 0;
  animation: shoot var(--dur, 1.1s) cubic-bezier(.3, .1, .6, 1) forwards;
}
.cp_shoot i::after {
  /* 先頭の光 */
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 235, 200, .9);
}
/* 先頭が進みながら、尾が伸びて（〜45%）→ 縮んで先頭に追いつき消える
   尾の長さは左側の切り取り（clip-path）で表現。先頭の光（右端）は切らない */
@keyframes shoot {
  0%   { opacity: 0; transform: rotate(var(--a, 135deg)) translateX(0);
         clip-path: inset(-4px -4px -4px 100%); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  8%   { opacity: 1; }
  45%  { clip-path: inset(-4px -4px -4px 0%); animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a, 135deg)) translateX(var(--dist, 220px));
         clip-path: inset(-4px -4px -4px 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .cp_shoot { display: none; }
}

/* =========================================================
   PC：左に画像（固定）・中央にカラム・右にナビ（固定）
     SP は中央カラムのみ
   ========================================================= */
.side { display: none; }
@media (min-width: 768px) {
  .wide_grid {
    display: grid;
    grid-template-columns: 1fr var(--col) 1fr;
  }
  .wide_grid > .col { max-width: none; }
  .side { display: block; }
  .side_in_old {
    position: sticky;
    top: 0;
    height: 100vh;
  }
  .side--l .side_img { height: 100%; outline: 0; }
  .side--r .side_in {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: max(32px, calc((100% - 280px) / 2));
  }
  .side_camp { font-size: 11px; color: var(--gold-dk); }
  .side_ttl {
    margin-top: 10px;
    font-size: 30px;
    line-height: 1.15;
    color: var(--gold-dk);
  }
  .side_nav {
    margin-top: 40px;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: .06em;
    color: #8a7b70;
  }
  .side_nav > li + li { margin-top: 20px; }
  .side_nav a { transition: opacity .4s var(--ease); }
  /* 赤の中は白文字 */
  .sidefx.is-red .side_camp, .sidefx.is-red .side_ttl { color: #e7d3ad; }
  .sidefx.is-red .side_nav { color: rgba(255, 255, 255, .85); }
  /* カラムに影 */
  /* カラムの左右の影は、画面に固定した .shadowfx に 1 本で付ける */
}

/* =========================================================
   共通パーツ
   ========================================================= */
.sec_ttl {
  font-size: calc(32 * var(--px));
  line-height: 1.12;
  letter-spacing: .02em;
  text-align: center;
}
.sec_ttl--gold { color: var(--gold-dk); }
.tag {
  display: inline-block;
  flex: none;
  padding: .15em .6em;
  background: #f1ebe2;
  font-family: var(--font-sans);
  font-size: calc(9 * var(--px));
  letter-spacing: .1em;
  color: var(--gold-dk);
}
.btn_wrap {
  display: flex;
  justify-content: center;
  margin-top: calc(52 * var(--px));
}
/* ONLINE SHOP / 店舗情報（枠線のボタン） */
.btn_shop,
.btn_store {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(26 * var(--px));
  width: calc(264 * var(--px));
  height: calc(57 * var(--px));
  padding-left: calc(32 * var(--px));
  border: 1px solid currentColor;
  color: #333;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
/* ↗ ARR_c（銀座のフッターのボタンと同じ矢印。文字色で塗る） */
.btn_shop::after,
.btn_store::after {
  content: "";
  position: absolute;
  right: calc(22 * var(--px));
  top: 50%;
  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%);
}
.btn_shop_logo,
.btn_store_logo {
  width: calc(56 * var(--px));
  aspect-ratio: 147 / 56;
  background: currentColor;
  -webkit-mask: url(../img/LOGO_refa.webp) center / contain no-repeat;
          mask: url(../img/LOGO_refa.webp) center / contain no-repeat;
}
.btn_shop_txt { font-size: calc(11 * var(--px)); letter-spacing: .14em; }
.btn_store { color: var(--gold-dk); }
.btn_store_logo {
  width: calc(60 * var(--px));
  aspect-ratio: 446 / 220;
  -webkit-mask-image: url(../ginza/img/RIGHT_logo.webp);
          mask-image: url(../ginza/img/RIGHT_logo.webp);
}
.btn_store_txt { font-size: calc(11 * var(--px)); letter-spacing: .12em; }
.btn_shop--light,
.btn_store--light { color: #f3e7d3; }

/* =========================================================
   GIFT SELECTION
   ========================================================= */
.gs { background: #fff; }
.gs_col {
  padding: calc(90 * var(--px)) 0 calc(80 * var(--px));
  background: #fff;
  color: var(--ink);
  overflow: hidden;
}
.gs .sec_ttl { color: var(--crimson); }
.gs_find {
  margin-top: calc(70 * var(--px));
  font-size: calc(13 * var(--px));
  font-style: italic;
  text-align: center;
  color: var(--crimson);
}
.gs_tabs {
  display: flex;
  margin: calc(18 * var(--px)) calc(18 * var(--px)) 0;   /* 左右の余白を同じに */
}
.gs_tabs li { flex: 1; }
.gs_tab {
  width: 100%;
  padding: calc(6 * var(--px)) 0;
  border: 0;
  border-left: 1px solid #ddd;
  background: none;
  font-family: var(--font-ja);
  font-size: calc(12 * var(--px));
  letter-spacing: .14em;
  color: #666;
  cursor: pointer;
  transition: color .4s var(--ease), background-color .4s var(--ease);
}
.gs_tabs li:last-child .gs_tab { border-right: 1px solid #ddd; }
.gs_tab.is-on { background: var(--crimson); color: #fff; }
.gs_chips {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(6 * var(--px));
  margin-top: calc(24 * var(--px));
  padding-left: calc(18 * var(--px));
  overflow-x: auto;
  scrollbar-width: none;
}
.gs_chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  white-space: nowrap;
  padding: calc(3 * var(--px)) calc(10 * var(--px));
  border: 1px solid #ccc;
  border-radius: 999px;
  background: none;
  font-family: var(--font-ja);
  font-size: calc(9.5 * var(--px));
  letter-spacing: .1em;
  color: #999;
  cursor: pointer;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.chip[aria-pressed="true"] { border-color: var(--crimson); background: var(--crimson); color: #fff; }

/* カード（横スクロール：2 列 × 2 段を 1 ページとして並べる） */
.gc_list {
  display: grid;
  grid-template-columns: repeat(3, calc(182 * var(--px)));   /* 3 列。表示中のカードだけで左上から詰める */
  justify-content: start;
  align-items: start;
  gap: calc(48 * var(--px)) calc(14 * var(--px));
  margin-top: calc(56 * var(--px));
  padding: 0 calc(18 * var(--px));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(18 * var(--px));
  scrollbar-width: none;
}
.gc_list::-webkit-scrollbar { display: none; }
.gc_card { scroll-snap-align: start; }
.gc_img { aspect-ratio: 182 / 199; }
.gc_img img { width: 100%; height: 100%; object-fit: cover; }
.gc_catch {
  margin-top: calc(14 * var(--px));
  font-size: calc(12 * var(--px));
  line-height: 1.8;
  letter-spacing: .06em;
}
.gc_items { margin-top: calc(10 * var(--px)); }
.gc_items li + li { border-top: 1px solid #e5e0dc; }
.gc_item {
  position: relative;
  display: block;
  padding: calc(9 * var(--px)) calc(26 * var(--px)) calc(9 * var(--px)) calc(10 * var(--px));
  transition: background-color .4s var(--ease);
}
.gc_item--hl { background: #f6f2ef; }
.gc_item::after {
  content: "";
  position: absolute;
  right: calc(12 * var(--px));
  top: 50%;
  width: calc(5 * var(--px));
  height: calc(5 * var(--px));
  border-top: 1px solid var(--crimson);
  border-right: 1px solid var(--crimson);
  transform: translateY(-50%) rotate(45deg);
  transition: transform .4s var(--ease);
}
.gc_name {
  display: block;
  font-size: calc(11.5 * var(--px));
  line-height: 1.35;
  color: var(--crimson);
}
.gc_price {
  display: block;
  margin-top: calc(3 * var(--px));
  font-family: var(--font-ja);
  font-size: calc(11 * var(--px));
  color: #555;
}
.gc_price .yen { font-size: .9em; }
.gc_price small { font-size: .6em; }
.gc_bar {
  position: relative;
  height: 2px;
  margin: calc(44 * var(--px)) calc(18 * var(--px)) 0;
  background: #e5e0dc;
}
.gc_bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 25%);
  background: var(--crimson);
  transform: translateX(var(--x, 0));
  transition: transform .2s linear;
}

/* =========================================================
   SPECIAL HOLIDAY GIFT（赤）
   ========================================================= */
.hg { background: linear-gradient(160deg, #e62b34 0%, #be1c29 45%, #a8101f 100%); }
.hg_col {
  padding: calc(123 * var(--px)) 0 0;
  background: linear-gradient(170deg, #e62b34 0%, #c81e2b 35%, #a50f1e 65%, #cb2330 100%);
  color: #fff;
}
.hg .sec_ttl { color: #e7d3ad; }
/* LIMITED ITEMS / HOLIDAY GIFT WRAPPING（デザインから実測：カラム 384 基準）
     写真 365 × 270（画像は影の余白込み 850×660 の 2 倍書き出し。写真部分は 46〜776 × 46〜586）
     左：写真はカラム左端から / 右：写真はカラム右端まで
     縦書きラベルは写真の上端から 21.5px 上に出し、写真に重ねる */
.hg_fig {
  position: relative;
  width: calc(365 * var(--px));
  margin-top: calc(60 * var(--px));
}
.hg_fig--l { margin-right: auto; }
.hg_fig--r { margin-left: auto; }
.hg_img {
  position: relative;
  aspect-ratio: 730 / 540;          /* 写真部分 */
}
.hg_img img {
  position: absolute;
  left: -6.301%;                    /* 46 / 730 */
  top: -8.519%;                     /* 46 / 540 */
  width: 116.438%;                  /* 850 / 730 */
  max-width: none;
  height: auto;
}
.hg_label {
  position: absolute;
  top: calc(-21.5 * var(--px));
  z-index: 1;
  writing-mode: vertical-rl;
  font-family: var(--font-en);      /* Lustria（デザインどおりセリフ体） */
  font-weight: 400;
  font-size: calc(18 * var(--px));
  line-height: 1.34;
  letter-spacing: var(--ls, calc(.55 * var(--px)));
  white-space: nowrap;
  color: #c2a987;
}
.hg_fig--l .hg_label { left: calc(2.25 * var(--px)); top: calc(-22.1 * var(--px)); }
.hg_fig--r .hg_label { right: calc(29.95 * var(--px)); top: calc(-23.5 * var(--px)); --ls: calc(1.05 * var(--px)); }
.hg_ttl {
  margin: calc(40 * var(--px)) calc(18 * var(--px)) 0;
  font-size: calc(21 * var(--px));
  line-height: 1.7;
  letter-spacing: .14em;
  color: #e7d3ad;
}
.hg_ttl--r { text-align: right; }
.hg_ttl--c { text-align: center; }
.hg_txt {
  margin: calc(18 * var(--px)) calc(18 * var(--px)) 0;
  font-family: var(--font-sans);
  font-size: calc(12 * var(--px));
  line-height: 2;
  letter-spacing: .06em;
}
.hg_note {
  margin: calc(16 * var(--px)) calc(18 * var(--px)) 0;
  font-family: var(--font-sans);
  font-size: calc(9.5 * var(--px));
  line-height: 1.8;
}
.hg_nov {
  display: flex;
  justify-content: space-between;
  margin: calc(32 * var(--px)) calc(18 * var(--px)) 0;
  padding: calc(26 * var(--px)) calc(14 * var(--px));
  background: rgba(120, 0, 15, .45);
  text-align: center;
}
.hg_nov li { width: calc(100 / 3 * 1%); }
.hg_nov_img { width: calc(71 * var(--px)); aspect-ratio: 142 / 188; margin-inline: auto; }
.hg_nov_img img { width: 100%; height: 100%; object-fit: contain; }
.hg_nov_name {
  margin-top: calc(12 * var(--px));
  font-size: calc(12 * var(--px));
  line-height: 1.6;
  color: #e7d3ad;
}
.hg_nov_cond {
  margin-top: calc(10 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(9.5 * var(--px));
  line-height: 1.5;
}
.hg_hr {
  margin: calc(80 * var(--px)) calc(18 * var(--px)) 0;
  border: 0;
  border-top: 1px solid rgba(231, 211, 173, .4);
}
.hg_hr + .hg_ttl { margin-top: calc(80 * var(--px)); }
.wish {
  position: relative;
  display: block;
  margin: calc(70 * var(--px)) calc(18 * var(--px)) 0;
  border-radius: calc(4 * var(--px));
  overflow: hidden;
  box-shadow: 0 calc(10 * var(--px)) calc(24 * var(--px)) rgba(70, 0, 10, .35);
  transition: filter .5s var(--ease);
}
.wish_img { aspect-ratio: 688 / 300; }
.wish_img img { width: 100%; height: 100%; }
.wish_ttl {
  position: absolute;
  left: calc(26 * var(--px));
  top: 50%;
  font-size: calc(15 * var(--px));
  line-height: 1.15;
  text-align: center;
  color: #e7d3ad;
  transform: translateY(-50%);
}
.wish_arr {
  position: absolute;
  right: calc(12 * var(--px));
  bottom: calc(12 * var(--px));
  width: calc(36 * var(--px));
  height: calc(36 * var(--px));
  border-radius: 50%;
  background: #c8b08a;
}
.wish_arr::after {
  content: "↗";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(13 * var(--px));
  color: #fff;
}
@media (min-width: 768px) {
}

/* =========================================================
   EVENT / SHOP LIST / Instagram
   ========================================================= */
.ev { background: #fff; }
.ev_col {
  padding: calc(90 * var(--px)) 0 calc(70 * var(--px));
  background: #fff;
  color: #6b5d52;
  text-align: center;
}
.ev_ttl {
  margin-top: calc(70 * var(--px));
  font-size: calc(22 * var(--px));
  line-height: 1.65;
  letter-spacing: .14em;
  color: var(--gold-dk);
}
.ev_txt {
  margin-top: calc(24 * var(--px));
  font-size: calc(12.5 * var(--px));
  line-height: 2.3;
  letter-spacing: .1em;
}
.ev_img {
  margin: calc(56 * var(--px)) calc(18 * var(--px)) 0;
  aspect-ratio: 688 / 460;
}
.ev_img img { width: 100%; height: 100%; object-fit: cover; }
.ev_start {
  display: inline-block;
  margin-top: calc(28 * var(--px));
  padding-bottom: calc(4 * var(--px));
  border-bottom: 1px solid #ddd;
  font-size: calc(17 * var(--px));
  color: #555;
}
.ev_start small { font-size: .6em; letter-spacing: .1em; }
.ev_place {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(12 * var(--px));
  margin-top: calc(20 * var(--px));
  font-size: calc(17 * var(--px));
  color: var(--gold-dk);
}
.ev_addr {
  margin-top: calc(16 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(11 * var(--px));
  line-height: 1.8;
  color: #666;
}
/* ReFa GINZA with LUCKY STAR（ゴールドのボタン） */
.btn_ginza {
  display: block;
  width: calc(274 * var(--px));
  margin: calc(32 * var(--px)) auto 0;
  padding: calc(16 * var(--px)) 0;
  background: linear-gradient(90deg, #cbb38d, #e3d3b5 50%, #cbb38d);
  color: var(--crimson);
  box-shadow: 0 calc(6 * var(--px)) calc(16 * var(--px)) rgba(120, 90, 50, .2);
  transition: filter .5s var(--ease);
}
.btn_ginza_en { display: block; font-size: calc(17 * var(--px)); line-height: 1.3; }
.btn_ginza_en small { display: block; margin-bottom: calc(2 * var(--px)); font-size: calc(10 * var(--px)); letter-spacing: .04em; }
.btn_ginza_ja { display: block; margin-top: calc(4 * var(--px)); font-size: calc(10 * var(--px)); letter-spacing: .14em; }
.ev .btn_wrap { margin-top: calc(24 * var(--px)); }
.ev_hr {
  margin: calc(60 * var(--px)) calc(18 * var(--px)) 0;
  border: 0;
  border-top: 1px solid #e8e3d6;
}
.ev_ttl2 {
  margin-top: calc(32 * var(--px));
  font-size: calc(19 * var(--px));
  letter-spacing: .12em;
  color: var(--gold-dk);
}
.sl {
  margin: calc(28 * var(--px)) calc(18 * var(--px)) 0;
  padding: calc(30 * var(--px)) calc(20 * var(--px)) calc(16 * var(--px));
  background: var(--ivory);
}
.sl_ttl { font-size: calc(14 * var(--px)); letter-spacing: .06em; color: var(--gold-dk); }
.sl_list { margin-top: calc(10 * var(--px)); text-align: left; }
.sl_row {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
  padding: calc(18 * var(--px)) 0;
}
.sl_row + .sl_row { border-top: 1px solid #e5ded2; }
.sl_name {
  flex: 1;
  font-family: var(--font-sans);
  font-size: calc(11.5 * var(--px));
  letter-spacing: .02em;
  color: var(--gold-dk);
}
.sl_date { font-size: calc(14 * var(--px)); white-space: nowrap; color: #555; }
.sl_date span + span::before { content: ">"; margin: 0 .3em; font-size: .7em; }   /* 開始日 > 終了日 */
.insta {
  display: block;
  margin-top: calc(80 * var(--px));
  color: var(--gold-dk);
  transition: opacity .4s var(--ease);
}
.insta_tag { display: block; font-size: calc(15 * var(--px)); }
.insta_icon {
  display: block;
  width: calc(38 * var(--px));
  aspect-ratio: 1;
  margin: calc(14 * var(--px)) auto 0;
  background: currentColor;
  -webkit-mask: url(../img/LOGO_instagram.webp) center / contain no-repeat;
          mask: url(../img/LOGO_instagram.webp) center / contain no-repeat;
}
.insta_txt { display: block; margin-top: calc(10 * var(--px)); font-size: calc(11 * var(--px)); color: #555; }

/* ---------- FAQ ---------- */
.faq { background: #faf6f3; }
.faq_col { background: var(--ivory); }
.faq_col { padding: calc(66 * var(--px)) calc(18 * var(--px)) calc(48 * var(--px)); }
.faq_ttl {
  font-size: calc(23 * var(--px));
  letter-spacing: .14em;
  text-align: center;
  color: var(--gold-dk);
}
.faq_list { margin-top: calc(30 * var(--px)); }
.faq_item { border-bottom: 1px solid #ddd2c2; }
.faq_q {
  position: relative;
  padding: calc(20 * var(--px)) calc(28 * var(--px)) calc(16 * var(--px)) 0;
  font-family: var(--font-sans);
  font-size: calc(12 * var(--px));
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--gold-dk);
  list-style: none;
  cursor: pointer;
}
.faq_q::-webkit-details-marker { display: none; }
.faq_q::before,
.faq_q::after {
  content: "";
  position: absolute;
  right: calc(2 * var(--px));
  top: 50%;
  width: calc(10 * var(--px));
  height: 1px;
  background: #c8b89c;
  transition: transform .4s var(--ease);
}
.faq_q::after { transform: rotate(90deg); }
.faq_item.is-open .faq_q::after { transform: rotate(0deg); }
.faq_a { overflow: hidden; }
.faq_a p {
  padding-bottom: calc(18 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(11 * var(--px));
  line-height: 2;
  color: var(--gold-dk);
}

/* =========================================================
   FOOTER（画像の上）
   ========================================================= */
.ft {
  position: relative;
  overflow: hidden;
  background: #faf6f3;            /* PC の左右（FAQ と同じ） */
  color: #fff;
}
/* カラムの背景に REL_FT_bg（画像の地の色に合わせて、左右は暗い赤のグラデ） */
.ft_col {
  background: url(../img/REL_FT_bg.webp) center bottom / cover no-repeat, #1a0003;
}
.ft_col { padding: calc(56 * var(--px)) calc(30 * var(--px)) calc(26 * var(--px)); }
.ft_lead {
  font-size: calc(17 * var(--px));
  line-height: 1.9;
  letter-spacing: .1em;
  text-align: center;
}
.ft .btn_wrap { margin-top: calc(32 * var(--px)); }
.ft_nav {
  margin-top: calc(56 * var(--px));
  font-size: calc(15 * var(--px));
  line-height: 1.3;
}
.ft_nav > li + li { margin-top: calc(18 * var(--px)); }
.ft_links {
  display: flex;
  justify-content: center;
  gap: calc(14 * var(--px));
  margin-top: calc(40 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(10 * var(--px));
}
.ft_mtg_link { display: block; width: calc(52 * var(--px)); margin-top: calc(34 * var(--px)); }
.ft_mtg { width: 100%; filter: brightness(0) invert(1); }
.ft_copy {
  margin-top: calc(10 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(8 * var(--px));
  letter-spacing: .04em;
}

/* =========================================================
   hover（PCのみ）… 状態の変化は必ずアニメーション
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .kv_nav a, .ft_nav a, .ft_links a, .ft_mtg_link { transition: opacity .4s var(--ease); }
  .kv_nav a:hover, .ft_nav a:hover, .ft_links a:hover, .ft_mtg_link:hover,
  .side_nav a:hover, .insta:hover { opacity: .65; }
  .btn_shop:hover { background: #333; color: #fff; }
  .btn_store:hover { background: var(--gold-dk); color: #fff; }
  .btn_shop--light:hover,
  .btn_store--light:hover { background: #f3e7d3; color: #8e0016; }
  .gc_item:hover { background: #f6f2ef; }
  .gc_item:hover::after { transform: translate(3px, -50%) rotate(45deg); }
  .gs_tab:hover { color: var(--crimson); }
  .chip:not([aria-pressed="true"]):hover { border-color: var(--crimson); color: var(--crimson); }
  .wish:hover, .btn_ginza:hover { filter: brightness(1.08); }
  .faq_q { transition: opacity .4s var(--ease); }
  .faq_q:hover { opacity: .7; }
}


/* 左上のロゴ：.hm（画面上部に固定）の中に置き、その場で固定 */
.kv_logo {
  position: absolute;
  top: calc(9.6 * var(--px));
  left: calc(9.6 * var(--px));
  width: calc(73.5 * var(--px));
  pointer-events: auto;
}
.kv_logo img { width: 100%; }

/* =========================================================
   スクロールイン（JS が .is-in を付与）
   ========================================================= */
.js .fx {
  opacity: 0;
  transform: translate3d(0, calc(19.2 * var(--px)), 0);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.js .fx.is-in {
  opacity: 1;
  transform: none;
}
/* .fx の transition で hover 用の指定が消えないよう併記 */
.js .intro_btn.fx {
  transition:
    opacity 1.2s var(--ease),
    transform 1.2s var(--ease),
    filter .6s var(--ease),
    box-shadow .6s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .fx { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   上部（ロゴ・ナビ）：画面上部に固定
     ※iOS Safari 対策：固定要素は背景を持たせない
   ========================================================= */
.hm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  pointer-events: none;
}
.hm_inner {
  position: relative;
  max-width: var(--col);
  margin-inline: auto;
}
/* ※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; }


/* =========================================================
   GIFT〜EVENT の背景：画面に固定した色の層を、見ているセクションに合わせてクロスフェード
     JS が #bgfx に data-on="gift / holiday / event" をセット
     セクション・カラムの背景は透明にして、この層の色を見せる
     ※iOS Safari 対策：色は background-image（グラデーション）、非表示の層は visibility: hidden
   ========================================================= */
.bgfx {
  position: fixed;
  top: -5vh;
  top: -5lvh;
  left: 0;
  right: 0;
  z-index: -1;
  height: 110vh;
  height: 110lvh;
  pointer-events: none;
}
.bgfx_l {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--ease), visibility 0s linear .9s;
}
.bgfx_l--gift    { background-image: linear-gradient(#fff, #fff); }
.bgfx_l--holiday { background-image: linear-gradient(#a50b23, #a50b23); }   /* デザインどおり一色（コンテンツ内の明るい部分は .hg_glow） */
.bgfx_l--event   {
  /* PC：左右は #faf6f3、カラム（中央 --col 幅）は白。SP はカラムが全幅なので白一色 */
  background-image: linear-gradient(90deg,
    #faf6f3 calc(50% - var(--col) / 2), #fff calc(50% - var(--col) / 2),
    #fff calc(50% + var(--col) / 2), #faf6f3 calc(50% + var(--col) / 2));
}
.bgfx[data-on="gift"] .bgfx_l--gift,
.bgfx[data-on="holiday"] .bgfx_l--holiday,
.bgfx[data-on="event"] .bgfx_l--event {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s var(--ease), visibility 0s;
}
main { position: relative; z-index: 0; }
.gs, .hg, .ev,
.gs_col, .hg_col, .ev_col { background: transparent; }

/* =========================================================
   KV 動画を画面に固定 → INTRO が上に重なってスクロールしてくる
     スクロールにつれて動画が暗くなる（JS が --kv-dim に 0〜1）
     INTRO を過ぎたら非表示（JS が .is-off）
     ※iOS Safari 対策：上下に 5lvh ずつはみ出させる（110lvh）
   ========================================================= */
.kv { background: transparent; }
.kv_media {
  position: fixed;
  top: -5vh;
  top: -5lvh;
  left: 0;
  right: 0;
  bottom: auto;
  z-index: -2;
  height: 110vh;
  height: 110lvh;
  background-image: linear-gradient(#061026, #061026);
  transition: visibility 0s;
}
.kv_media.is-off { visibility: hidden; }
.kv_dim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#000510, #000510);
  opacity: calc(var(--kv-dim, 0) * .7);
  pointer-events: none;
}

/* #gift の初期の紺：画面に固定せず #gift 自身に敷く（固定すると #campaign の透明部分まで紺で隠れるため）
   最初から不透明。#gift が中央に来たら（data-on が gift 以降）フェードアウトして、固定の白が見える */
.gs { isolation: isolate; }
.gs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#061026, #061026);
  transition: opacity .9s var(--ease);
  pointer-events: none;
}
.bgfx[data-on="gift"] ~ .gs::before,
.bgfx[data-on="holiday"] ~ .gs::before,
.bgfx[data-on="event"] ~ .gs::before { opacity: 0; }

/* ③ 紺のグラデーション（固定の KV 動画の上）：JS が --kv-star（0〜1） */
.kv_navy {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(6, 16, 38, .55) 0%, rgba(6, 16, 38, .72) 45%, rgba(6, 16, 38, .95) 100%);
  opacity: var(--kv-star, 0);
  pointer-events: none;
}

/* =========================================================
   上部（ロゴ・ナビ・メニューボタン）は画面上部に固定
     白・ベージュのエリアが画面上端にある時は茶色に（html.is-light / 0.8s）
     ロゴは画像をマスクにして文字色で塗る
   ========================================================= */
.hm .kv_nav {
  position: absolute;
  top: calc(56 * var(--px));
  pointer-events: auto;
}
.hm { color: #fff; transition: color .8s var(--ease); }
.hm .kv_nav { color: inherit; }
.kv_logo {
  background-color: currentColor;
  -webkit-mask: url(../img/LOGO_refa.webp) no-repeat center / contain;
          mask: url(../img/LOGO_refa.webp) no-repeat center / contain;
}
.kv_logo img { opacity: 0; }        /* 形はマスクで表示（alt・サイズ用に残す） */
html.is-light .hm { color: #7a6656; }
@media (min-width: 768px) {
  .hm .kv_nav { top: 62px; }
}

/* =========================================================
   PC：左の画像・右のナビ（.sidefx）… GIFT〜EVENT の間だけ画面に固定して表示
     右のナビ … その場にとどまる（赤のエリアでは白文字に .8s）
     左の画像 … 見ているセクション（#bgfx の data-on）の画像にクロスフェード
     JS が .is-show（範囲内）/ .is-red（赤のエリア）/ 画像に .is-on
   ========================================================= */
.sidefx { display: none; }
@media (min-width: 768px) {
  .sidefx {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr var(--col) 1fr;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .8s var(--ease), visibility 0s linear .8s;
  }
  .sidefx.is-show {
    opacity: 1;
    visibility: visible;
    transition: opacity .8s var(--ease), visibility 0s;
  }
  .sidefx_l { position: relative; overflow: hidden; }
  .sidefx_img {
    position: absolute;
    inset: 0;
    outline: 0;
    opacity: 0;
    transition: opacity 1s var(--ease);
  }
  .sidefx_img.is-on { opacity: 1; }
  .sidefx_img img { width: 100%; height: 100%; object-fit: cover; }
  .sidefx_r {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: max(32px, calc((100% - 280px) / 2));
  }
  .sidefx.is-show .side_nav a,
  .sidefx.is-show .sidefx_img { pointer-events: auto; }
  .side_camp, .side_ttl, .side_nav { transition: color .8s var(--ease); }
}

/* CAMPAIGN のカラム：背景に REL_CP_main（ギフトボックスは下、イベント名称は上の暗い部分に） */
.cp_col {
  justify-content: flex-start;
  padding-top: max(calc(120 * var(--px)), 16svh);   /* イベント名称の位置（上から） */
  background:
    url(../img/REL_CP_main.webp) center calc(100% + var(--cp-bg-y, 0px)) / cover no-repeat,   /* 下へずらす量は JS（--cp-bg-y） */
    linear-gradient(90deg, #100001, #130000 50%, #100001);   /* 画像の上（下へずらして見える部分）は画像の上端と同じ色 */
}

/* =========================================================
   R エンブレム（ティザーの css/style.css から流用）… PC 左・SPECIAL HOLIDAY GIFT の位置で再生
   ========================================================= */
.intro_emblem {
  position: relative;
  width: calc(342 * var(--px));   /* LOGO_emblem（2倍書き出し） */
  margin: calc(109 * var(--px)) auto 0;
}
/* 赤い光彩（コンテンツエリア内に収める：.intro_col の overflow: clip） */
.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; }
}

/* PC 左：赤の背景の中央にエンブレム */
.sidefx_img--emb {
  display: grid;
  place-items: center;
  overflow: hidden;
  /* 背景は透明：後ろの固定の赤（#bgfx の holiday）をそのまま見せて、右側と同じ赤に */
  background-image: none;
}
.sidefx_img--emb .intro_emblem {
  width: min(342px, 76%);
  margin: 0;
}
.sidefx_img--emb .intro_emblem::before { width: 180%; }

/* 「一般医療機器」などの小さいラベル（商品名の上） */
.gc_label {
  display: block;
  margin-bottom: calc(3 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(7.5 * var(--px));
  font-weight: 600;
  letter-spacing: .04em;
  color: #333;
}

/* マウスでドラッグして横スクロール（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; }

.sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* MY WISH LIST：角丸は画像に合わせる。hover で → の丸が「塗り」→「線」に（.4s） */
.wish { border-radius: calc(6 * var(--px)); }
.wish_arr {
  border: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.wish_arr::after { transition: color .4s var(--ease), transform .4s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .wish:hover { filter: none; }
  .wish:hover .wish_arr {
    background-color: rgba(120, 0, 15, .25);
    border-color: rgba(240, 200, 190, .85);
  }
  .wish:hover .wish_arr::after {
    color: #f3b4b4;
    transform: translate(1px, -1px);
  }
}

/* SPECIAL HOLIDAY GIFT の最後の画像：枠は固定、中の画像が縦にゆっくり動く（パララックス） */
.hg_px {
  position: relative;
  margin-top: calc(118 * var(--px));
  aspect-ratio: 384 / 276;
  overflow: hidden;
}
/* 画像は枠の幅で縦長のまま表示し、枠を通過する間に「上端が見える → 下端が見える」まで動かす（JS が --px-y） */
.hg_px_img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  outline: 0;
  transform: translate3d(0, var(--px-y, 0px), 0);
  will-change: transform;
}
.hg_px_img img { width: 100%; height: auto; }

/* 絞り込み：切り替える間は一覧をフェードアウト → 中身を入れ替えてフェードイン */
.gc_list { transition: opacity .3s var(--ease); }
.gc_list.is-fade { opacity: 0; }
/* ※.gc_list は .fx（スクロールイン）も付いているため、.fx の指定（1.2s・.is-in で不透明）より強く指定
     絞り込みの間（.is-filtering）だけ短いフェードに */
.js .gc_list.fx.is-filtering { transition: opacity .25s var(--ease); }
.js .gc_list.fx.is-in.is-fade { opacity: 0; }
.gc_card[hidden],
.gc_items li[hidden] { display: none; }
.gc_items li.is-first { border-top: 0; }   /* 表示中の最初の商品は上の罫線なし */

/* 横はみ出し対策（SP で画面幅に合わない原因）
     LIMITED ITEMS / WRAPPING の画像の影（枠の外にはみ出させている分） */
.hg { overflow-x: clip; }

/* カードのキャッチは 2 行に収める（カード幅 182 に 1 行最大 17 文字） */
.gc_catch {
  font-size: calc(10.5 * var(--px));
  letter-spacing: 0;
  white-space: nowrap;
  font-feature-settings: "palt";
}

/* #gift に切り替わる時：#campaign の紺（＋星）も #gift の紺と同時にフェードアウト
   → 画面全体が同じ色のまま白へクロスフェード（上下・左の画像に区切りが出ないように） */
html[data-bg="gift"] .cp_pin::before,
html[data-bg="holiday"] .cp_pin::before,
html[data-bg="event"] .cp_pin::before,
html[data-bg="gift"] .cp_pin::after,
html[data-bg="holiday"] .cp_pin::after,
html[data-bg="event"] .cp_pin::after { opacity: 0; }

/* 流れ星の色（2 種類）：先頭（右端）が明るく、尾（左端）に向かって消える */
.cp_shoot i.is-blue {
  height: 1px;
  background: linear-gradient(90deg, rgba(26, 154, 167, 0) 0%, rgba(26, 154, 167, .55) 45%, #30bec6 72%, #c1dfe4 90%, #fff 100%);
}
.cp_shoot i.is-blue::after {
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(160, 235, 245, .9);
}
.cp_shoot i.is-gold {
  height: 1.5px;
  background: linear-gradient(90deg, rgba(166, 92, 77, 0) 0%, rgba(166, 92, 77, .6) 45%, #b08d71 75%, #c1a986 100%);
}
.cp_shoot i.is-gold::after {
  background: #e3cfac;
  box-shadow: 0 0 5px rgba(225, 200, 160, .7);
}


/* =========================================================
   SPECIAL HOLIDAY GIFT：コンテンツ（中央カラム）内の明るい部分（デザインから計測）
     下地は固定の赤（#a60c23）。その上に明るい赤の光を、要素の位置に合わせて重ねる
       1 … LIMITED ITEMS の写真の左上あたり（見出し〜本文まで）
       2 … HOLIDAY GIFT WRAPPING の写真の右側（写真の上下）
       3 … MY WISH LIST の下の本文の左側
       4 … ONLINE SHOP〜ギフト診断の右側（少し暗い）
     .hg_glow は直前の位置（static position）を基準に absolute で配置
     背景が赤に切り替わってからフェードイン（白の上に出ないように）
   ========================================================= */
.hg_col {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hg_glow {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
html[data-bg="holiday"] .hg_glow { opacity: 1; }
/* 以下はデザインの背景色から算出（中心・半径・明るさの減り方）。1〜3 は明るい光、4 は右中ほどの暗い部分 */
.hg_glow--1 {
  left: calc(-356.0 * var(--px));
  width: calc(800.0 * var(--px));
  height: calc(1275.0 * var(--px));
  margin-top: calc(-497.5 * var(--px));
  background: radial-gradient(closest-side, rgba(255, 60, 59, 1.000) 0%, rgba(255, 60, 59, 0.863) 10%, rgba(255, 60, 59, 0.733) 20%, rgba(255, 60, 59, 0.608) 30%, rgba(255, 60, 59, 0.491) 40%, rgba(255, 60, 59, 0.381) 50%, rgba(255, 60, 59, 0.279) 60%, rgba(255, 60, 59, 0.187) 70%, rgba(255, 60, 59, 0.106) 80%, rgba(255, 60, 59, 0.040) 90%, rgba(255, 60, 59, 0.000) 100%);
}
.hg_glow--2 {
  left: calc(-61.5 * var(--px));
  width: calc(780.0 * var(--px));
  height: calc(1152.5 * var(--px));
  margin-top: calc(-282.2 * var(--px));
  background: radial-gradient(closest-side, rgba(255, 63, 64, 1.000) 0%, rgba(255, 63, 64, 0.896) 10%, rgba(255, 63, 64, 0.793) 20%, rgba(255, 63, 64, 0.691) 30%, rgba(255, 63, 64, 0.589) 40%, rgba(255, 63, 64, 0.487) 50%, rgba(255, 63, 64, 0.386) 60%, rgba(255, 63, 64, 0.287) 70%, rgba(255, 63, 64, 0.188) 80%, rgba(255, 63, 64, 0.092) 90%, rgba(255, 63, 64, 0.000) 100%);
}
.hg_glow--3 {
  left: calc(-316.5 * var(--px));
  width: calc(725.0 * var(--px));
  height: calc(1290.0 * var(--px));
  margin-top: calc(-385.5 * var(--px));
  background: radial-gradient(closest-side, rgba(235, 55, 60, 1.000) 0%, rgba(235, 55, 60, 0.905) 10%, rgba(235, 55, 60, 0.810) 20%, rgba(235, 55, 60, 0.714) 30%, rgba(235, 55, 60, 0.617) 40%, rgba(235, 55, 60, 0.520) 50%, rgba(235, 55, 60, 0.421) 60%, rgba(235, 55, 60, 0.321) 70%, rgba(235, 55, 60, 0.219) 80%, rgba(235, 55, 60, 0.114) 90%, rgba(235, 55, 60, 0.000) 100%);
}
.hg_glow--4 {
  left: calc(-175.0 * var(--px));
  width: calc(975.0 * var(--px));
  height: calc(585.0 * var(--px));
  margin-top: calc(-522.5 * var(--px));
  background: radial-gradient(closest-side, rgba(136, 1, 21, 0.733) 0%, rgba(136, 1, 21, 0.657) 10%, rgba(136, 1, 21, 0.581) 20%, rgba(136, 1, 21, 0.506) 30%, rgba(136, 1, 21, 0.431) 40%, rgba(136, 1, 21, 0.357) 50%, rgba(136, 1, 21, 0.283) 60%, rgba(136, 1, 21, 0.210) 70%, rgba(136, 1, 21, 0.138) 80%, rgba(136, 1, 21, 0.067) 90%, rgba(136, 1, 21, 0.000) 100%);
}

/* =========================================================
   簡易的なコピー防止：文字選択・画像の長押し保存メニュー・ドラッグを無効に
   ※入力欄があれば選択できるように除外
   ========================================================= */
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; }

/* サイト最下部（FAQ・フッター）：PC の左右は #faf6f3。カラムの左右の影は .shadowfx */

/* =========================================================
   PC：中央カラムの左右の影（.shadowfx）
     GIFT SELECTION が画面の中央に来てから、ページの最下部まで画面に固定して 1 本で表示
     （セクションごとに付けると境目で途切れたり、重なって 2 重になるため）
     左の固定画像（.sidefx・z-index 1）より下、ページの背景より上
   ========================================================= */
.shadowfx { display: none; }
@media (min-width: 768px) {
  .shadowfx {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: 1fr var(--col) 1fr;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s var(--ease);
  }
  .shadowfx.is-show { opacity: 1; }
  .shadowfx_c {
    grid-column: 2;
    margin: -240px 0;
    box-shadow: 0 0 110px rgba(60, 45, 30, .165);
  }
}

/* =========================================================
   SPECIAL HOLIDAY GIFT：写真のトリミング（10/19 修正）
     写真の枠（365×270）はそのまま、中の画像だけ拡大して枠で切る
     ※画像に焼き込みの薄い影は枠で切れるので、同じ程度の影を枠に付ける
   ========================================================= */
.hg_img {
  overflow: hidden;
  box-shadow: 0 calc(3 * var(--px)) calc(22 * var(--px)) rgba(0, 0, 0, .1);
}
/* ※倍率・位置は下の「10/21 デザイン反映」（.hg_fig--wrap / .hg_fig--box） */

/* ONLINE SHOP ボタン：公開まで非表示（JS の SHOP_OPEN_AT で表示） */
.btn_wrap--shop[hidden] { display: none; }

/* =========================================================
   10/21 デザイン反映
   ========================================================= */
/* ---------- 上部：ロゴ（左）＋ ナビ（右）を 1 行に ---------- */
.hm_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(12 * var(--px)) calc(30 * var(--px)) calc(12 * var(--px)) calc(15 * var(--px));
}
.hm .kv_logo {
  position: static;
  flex: none;
  width: calc(74 * var(--px));
}
.hm .kv_nav,
.hm .kv_nav[class] {
  position: static;
  gap: calc(35 * var(--px));
  width: auto;
  padding-top: calc(4 * var(--px));
  font-size: calc(11 * var(--px));
  letter-spacing: .06em;
  transform: none;
}
@media (min-width: 768px) {
  .hm .kv_nav,
  .hm .kv_nav[class] { width: auto; font-size: 11px; }
}

/* ---------- GIFT SELECTION ---------- */
@media (hover: hover) and (pointer: fine) {
  .gc_item:hover { background: #f3eee8; }
}
/* カード：幅 200・間 15。商品は全部薄いベージュの地（先頭の強調はやや濃いめ） */
.gc_list {
  grid-template-columns: repeat(3, calc(200 * var(--px)));
  gap: calc(44 * var(--px)) calc(15 * var(--px));
  padding: 0 calc(20 * var(--px));
  scroll-padding-inline: calc(20 * var(--px));
}
.gc_img { aspect-ratio: 200 / 220; }
.gc_catch {
  margin-top: calc(14 * var(--px));
  font-size: calc(12 * var(--px));
  line-height: 1.75;
  color: #555;
}
.gc_items { margin-top: calc(16 * var(--px)); }
.gc_item {
  padding: calc(10 * var(--px)) calc(28 * var(--px)) calc(10 * var(--px)) calc(11 * var(--px));
  background-color: rgba(243, 238, 232, 0);   /* 通常は透明（背景色の切り替えに追従）、マウスを乗せるとベージュ（下の hover） */
}
.gc_item--hl { background-color: rgba(243, 238, 232, 0); }
.gc_items li + li { border-top-color: #e8e3dd; }
.gc_item::after { right: calc(14 * var(--px)); }
.gc_name { font-size: calc(13 * var(--px)); line-height: 1.33; }
.gc_price { margin-top: calc(2 * var(--px)); font-size: calc(13 * var(--px)); }
.gc_label { font-size: calc(8.5 * var(--px)); }
.gc_bar { margin-inline: calc(20 * var(--px)); }

/* ---------- ONLINE SHOP（赤の上は白の塗り）/ 店舗情報（EVENT は金の塗り・フッターはベージュの塗り） ---------- */
.btn_shop--white { background: #fff; border-color: #fff; color: #333; }
.btn_store--gold { background: #b6a47e; border-color: #a8956b; color: #fff; }
.ft .btn_store--light { background: #ebe5d9; border-color: #ebe5d9; color: #9b7c66; }

/* ---------- SPECIAL HOLIDAY GIFT：ラッピング（左）→ BOX（右）→ 購入特典 ---------- */
.hg .sec_ttl + .hg_glow + .hg_fig { margin-top: calc(87 * var(--px)); }
.hg_txt + .hg_glow + .hg_fig { margin-top: calc(120 * var(--px)); }
.hg_fig--wrap .hg_label { left: calc(18 * var(--px)); right: auto; top: calc(-23.5 * var(--px)); --ls: calc(1.05 * var(--px)); }
.hg_fig--box .hg_label { right: calc(22 * var(--px)); left: auto; top: calc(-22.1 * var(--px)); --ls: calc(.55 * var(--px)); }
/* 写真のトリミング：ラッピング … 約 1.2 倍でショッパーに寄せる / BOX … 約 1.09 倍で R ロゴをカラムの中央に */
.hg_fig--wrap .hg_img img {
  transform-origin: 5.412% 6.97%;
  transform: scale(1.2) translate(-8.2%, -5.9%);
}
.hg_fig--box .hg_img img {
  transform-origin: 54.6% 47.879%;
  transform: scale(1.09);
}
/* 「購入特典」：右寄せの小さな枠付きラベル */
.hg_tag {
  width: fit-content;
  margin: calc(50 * var(--px)) calc(24 * var(--px)) 0 auto;
  padding: calc(1 * var(--px)) calc(7 * var(--px));
  border: 1px solid #e7d3ad;
  font-size: calc(11.5 * var(--px));
  letter-spacing: .14em;
  color: #e7d3ad;
}
.hg_tag + .hg_ttl { margin-top: calc(14 * var(--px)); }

/* ---------- EVENT ---------- */
.btn_ginza_en { font-size: calc(20 * var(--px)); letter-spacing: .02em; }
.btn_ginza_en small { margin-bottom: calc(4 * var(--px)); font-size: calc(9.5 * var(--px)); }
.btn_ginza_ja { margin-top: calc(6 * var(--px)); font-size: calc(11 * var(--px)); }
.sl_date span + span::before { margin: 0 .5em; }

/* ---------- FAQ：質問は明朝、注記は小さく ---------- */
.faq_q {
  font-family: var(--font-ja);
  font-size: calc(13 * var(--px));
  font-weight: 500;
}
.faq_a p { font-size: calc(11.5 * var(--px)); }
.faq_a p.faq_note {
  margin-top: calc(-6 * var(--px));
  font-size: calc(9.5 * var(--px));
  line-height: 1.75;
}

/* ---------- EVENT（ReFa GINZA）：デザインから実測して合わせる（10/22） ---------- */
.ev_start {
  margin-top: calc(32 * var(--px));
  padding-bottom: calc(1 * var(--px));
  font-size: calc(21 * var(--px));
  line-height: 1;
}
.ev_place { margin-top: calc(23 * var(--px)); font-size: calc(20.3 * var(--px)); }
.ev_place .tag {
  padding: calc(1 * var(--px)) calc(10 * var(--px));
  font-size: calc(11 * var(--px));
  line-height: 1.5;
}
.ev .btn_ginza {
  box-sizing: border-box;
  height: calc(100 * var(--px));
  margin-top: calc(34 * var(--px));
  padding: calc(17 * var(--px)) 0 0;
}
.btn_ginza_en { font-size: calc(24 * var(--px)); }
.btn_ginza_en small { margin-bottom: calc(3 * var(--px)); font-size: calc(9.8 * var(--px)); }
.btn_ginza_ja { margin-top: calc(3 * var(--px)); font-size: calc(12.5 * var(--px)); }
.ev .btn_ginza + .btn_wrap { margin-top: calc(37 * var(--px)); }
.ev .btn_store--gold {
  gap: calc(24 * var(--px));
  width: calc(275 * var(--px));
  height: calc(63 * var(--px));
  padding-left: calc(28 * var(--px));
}
.ev .btn_store--gold .btn_store_logo { width: calc(64 * var(--px)); }
.ev .btn_store--gold .btn_store_txt { font-size: calc(12 * var(--px)); }

/* ---------- FOOTER：デザインから実測して合わせる（10/22） ---------- */
.ft_col { padding: calc(53 * var(--px)) calc(32 * var(--px)) calc(22 * var(--px)); }
.ft_lead {
  font-size: calc(19.5 * var(--px));
  line-height: 1.7;
  letter-spacing: -.04em;
  font-feature-settings: "palt";
}
.ft .btn_wrap { margin-top: calc(31 * var(--px)); }
.ft .btn_store--light { width: calc(260 * var(--px)); height: calc(63 * var(--px)); }
.ft .btn_store--light { gap: calc(23 * var(--px)); }
.ft .btn_store--light .btn_store_txt { letter-spacing: .07em; }
.ft_lead_p { letter-spacing: -.45em; }   /* 「、」を詰める（デザインの約物詰め） */
.ft_nav { margin-top: calc(65 * var(--px)); font-size: calc(15.6 * var(--px)); }
.ft_nav > li + li { margin-top: calc(18 * var(--px)); }
.ft_links { margin-top: calc(98 * var(--px)); font-size: calc(10.2 * var(--px)); }
.ft_mtg_link { width: calc(58 * var(--px)); margin-top: calc(38 * var(--px)); }
.ft_copy { margin-top: calc(15 * var(--px)); font-size: calc(9.6 * var(--px)); }

/* ---------- 全体の見直し：デザインから実測（10/22） ---------- */
:root { --crimson: #a50b23; }
.sec_ttl { font-size: calc(33.6 * var(--px)); line-height: 1.19; }
.gc_bar { height: 2px; background: #e4e4e4; overflow: visible; }
.gc_bar span { top: -.5px; bottom: auto; height: 3px; border-radius: 2px; }
.gs_find { margin-top: calc(75 * var(--px)); font-size: calc(14.1 * var(--px)); }
.gs_tabs { margin: calc(22 * var(--px)) calc(19 * var(--px)) 0; }
.gs_tab { padding: calc(6.25 * var(--px)) 0; }
.gs_chips { margin-top: calc(22 * var(--px)); padding-left: calc(20 * var(--px)); }
.gc_list { margin-top: calc(61 * var(--px)); }
.gs .gc_catch { margin-top: calc(19 * var(--px)); font-size: calc(13 * var(--px)); line-height: 1.7; letter-spacing: .02em; }
.gs .gc_name { font-size: calc(14.1 * var(--px)); line-height: 1.2; }
.gs .gc_price { margin-top: calc(-1.5 * var(--px)); font-size: calc(12 * var(--px)); }
.gc_bar { margin-top: calc(64 * var(--px)); }
.gs .btn_wrap { margin-top: calc(99 * var(--px)); }
.gs_col { padding-bottom: calc(100 * var(--px)); }
.btn_shop { width: calc(290 * var(--px)); height: calc(63 * var(--px)); }
.btn_shop { gap: calc(25 * var(--px)); padding-left: calc(33 * var(--px)); }
.btn_shop .btn_shop_logo { width: calc(63 * var(--px)); }
.btn_shop .btn_shop_txt { padding-top: calc(3 * var(--px)); font-size: calc(12.4 * var(--px)); }
/* SPECIAL HOLIDAY GIFT */
.hg_col { padding-top: calc(93 * var(--px)); }
.hg .sec_ttl,
.hg_ttl,
.hg_tag,
.hg_nov_name { color: #c3ad88; }
.hg_tag { border-color: #c3ad88; }
.hg_ttl { font-size: calc(23 * var(--px)); line-height: 1.7; letter-spacing: -.03em; }
.hg_txt { margin-top: calc(14 * var(--px)); letter-spacing: .02em; font-feature-settings: "palt"; }
.hg_fig--wrap .hg_label { top: calc(-27.5 * var(--px)); }
.hg_fig--box .hg_label { right: calc(18 * var(--px)); }
.hg_txt + .hg_glow + .hg_fig { margin-top: calc(113 * var(--px)); }
.hg_tag + .hg_ttl { margin-top: calc(21 * var(--px)); }
/* 購入特典：名前は 2 行分の高さで上下中央、条件は 3 つとも同じ高さにそろえる */
.hg_nov li { display: flex; flex-direction: column; }
.hg_nov_name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2em;
  font-size: calc(13 * var(--px));
  letter-spacing: 0;
  font-feature-settings: "palt";
}
.hg_nov_cond { font-weight: 400; letter-spacing: 0; }
.hg_ttl { margin-top: calc(37 * var(--px)); }
.hg_ttl .en { font-size: 1.08em; }
.hg_ttl--r { margin-right: calc(9 * var(--px)); line-height: 1.65; }
.hg_tag + .hg_ttl { margin-top: calc(19 * var(--px)); }
.hg_tag { padding: calc(.5 * var(--px)) calc(7 * var(--px)); font-size: calc(12.5 * var(--px)); letter-spacing: .16em; }
.hg_txt { letter-spacing: .05em; }
.hg_fig--wrap .hg_label { left: calc(13 * var(--px)); }
.hg_ttl--c { font-size: calc(25 * var(--px)); line-height: 1.56; letter-spacing: .04em; }
.wish { margin-top: calc(41 * var(--px)); }
.wish + .hg_txt { margin-top: calc(42 * var(--px)); }
.hg_ttl .en { font-size: 1.18em; }
.hg_tag { padding-block: 0; }
.hg_ttl--r + .hg_txt { font-size: calc(13.5 * var(--px)); letter-spacing: .06em; }
.hg_ttl--c { margin-inline: 0; letter-spacing: .03em; }
.wish { margin-top: calc(26 * var(--px)); }
.wish + .hg_txt { margin-top: calc(45 * var(--px)); }
.hg_ttl--r + .hg_txt { letter-spacing: .08em; }
.hg_nov { margin-top: calc(41 * var(--px)); }
.hg_nov_cond { margin-top: calc(7 * var(--px)); }
.hg_nov + .btn_wrap { margin-top: calc(98 * var(--px)); }
.hg_hr { margin-top: calc(93 * var(--px)); }
.hg_hr + .hg_ttl { margin-top: calc(74 * var(--px)); }
.hg_ttl--c { letter-spacing: -.02em; }
.hg_px { margin-top: calc(96 * var(--px)); }
.wish { margin-top: calc(42 * var(--px)); }
.wish + .hg_txt { margin-top: calc(43 * var(--px)); }
.hg_txt { font-feature-settings: normal; letter-spacing: .1em; line-height: 2; }
.hg_ttl--r + .hg_txt { font-size: calc(12 * var(--px)); letter-spacing: .1em; }
.hg_fig--wrap { margin-top: calc(87 * var(--px)) !important; }
.hg_ttl--r { margin-right: calc(18 * var(--px)); }
.hg_fig--wrap .hg_img img { transform: scale(1.22) translate(-8.2%, -7.4%); }
.hg_txt,
.hg_ttl--r + .hg_txt { font-feature-settings: "palt"; letter-spacing: .085em; }
/* EVENT */
:root { --gold-dk: #937d43; }
.ev_ttl { margin-top: calc(70 * var(--px)); font-size: calc(24.5 * var(--px)); line-height: 1.5; letter-spacing: .04em; font-feature-settings: "palt"; }
.ev_ttl .en { letter-spacing: .1em; }
.ev_ttl + .ev_img { margin-top: calc(58 * var(--px)); }
/* SHOP LIST：1 行 55px。タグは同じ幅、日付は「>」の位置をそろえる */
.sl { padding: calc(29 * var(--px)) calc(20 * var(--px)) calc(14 * var(--px)); background: #faf6f3; }
.sl_ttl { font-size: calc(15 * var(--px)); line-height: 1; }
.sl_list { margin-top: calc(12 * var(--px)); }
.sl_row { gap: calc(7 * var(--px)); height: calc(55 * var(--px)); padding: 0; }
.sl_row .tag { width: calc(38 * var(--px)); padding: calc(2 * var(--px)) 0; text-align: center; letter-spacing: 0; }
.sl_name { font-size: calc(11.5 * var(--px)); }
.sl_date { display: flex; align-items: baseline; font-size: calc(14.5 * var(--px)); color: #4c4c4c; }
.sl_date span:first-child { width: calc(41 * var(--px)); text-align: left; }
.sl_date span + span { display: flex; width: calc(46 * var(--px)); }
.sl_date span + span::before { flex: none; width: calc(15 * var(--px)); margin: 0; font-size: .6em; text-align: center; transform: translateY(-.15em); }
/* Instagram */
.insta_tag { font-size: calc(19.5 * var(--px)); }
.insta_icon { width: calc(46 * var(--px)); margin-top: calc(34 * var(--px)); }
.insta_txt { margin-top: calc(16 * var(--px)); font-family: var(--font-ja); font-size: calc(14 * var(--px)); color: #4c4c4c; }
.sl_date { margin-left: auto; }
.sl_name { font-size: calc(11 * var(--px)); letter-spacing: 0; }
.sl_row .tag { font-size: calc(9.5 * var(--px)); }
.ev_ttl { margin-top: calc(56 * var(--px)); }
.ev_ttl .en { letter-spacing: .16em; }
.ev_ttl + .ev_img { margin-top: calc(56 * var(--px)); }
.ev_hr + .ev_img { margin-top: calc(53 * var(--px)); }
.ev_ttl2 { margin-top: calc(24 * var(--px)); }
.ev .sl { margin-top: calc(26 * var(--px)); }
.sl + .ev_hr { margin-top: calc(49 * var(--px)); }
.ev_hr + .btn_wrap { margin-top: calc(72 * var(--px)); }
.insta { margin-top: calc(70 * var(--px)); }
.insta_tag { font-size: calc(20.5 * var(--px)); }
.insta_icon { margin-top: calc(25 * var(--px)); }
.insta_txt { margin-top: calc(10 * var(--px)); font-size: calc(14.5 * var(--px)); }
.ev_col { padding-bottom: calc(94 * var(--px)); }
.ev_img { margin-inline: calc(20 * var(--px)); }
.sl_date { align-items: center; }
.sl_date span + span { align-items: center; }
.sl_date span + span::before { transform: none; }
.sl_row .tag { padding: calc(1 * var(--px)) 0; letter-spacing: .2em; text-indent: .2em; }
.insta { margin-top: calc(60 * var(--px)); }
.insta_icon { margin-top: calc(23 * var(--px)); }
.ev_hr { margin-inline: calc(20 * var(--px)); }
.ev .sl { margin-inline: calc(19 * var(--px)); }
.sl_row .tag { letter-spacing: .12em; text-indent: .12em; color: #a89272; }
/* FAQ */
.faq_col { padding: calc(60 * var(--px)) calc(20 * var(--px)) calc(48 * var(--px)); }
.faq_ttl { font-size: calc(27 * var(--px)); line-height: 1.2; letter-spacing: .02em; }
.faq_list { margin-top: calc(18 * var(--px)); }
.faq_item { border-bottom-color: #d2c6ae; }
.faq_q { padding: calc(35 * var(--px)) calc(28 * var(--px)) calc(9 * var(--px)) 0; font-size: calc(13.5 * var(--px)); line-height: 1.7; letter-spacing: .02em; font-feature-settings: "palt"; }
.faq_a p { padding-bottom: calc(15 * var(--px)); font-size: calc(12 * var(--px)); line-height: 2; letter-spacing: .02em; }
.faq_a p.faq_note { margin-top: calc(-3 * var(--px)); padding-bottom: calc(17 * var(--px)); font-size: calc(9.5 * var(--px)); line-height: 1.68; color: #a18d5b; }
.faq_col { padding-top: calc(65 * var(--px)); }
.faq_ttl { font-size: calc(26.5 * var(--px)); letter-spacing: 0; font-feature-settings: "palt"; }
.faq_q { font-size: calc(13 * var(--px)); letter-spacing: 0; line-height: 1.77; }
.faq_col { padding-bottom: calc(70 * var(--px)); }
/* 「よくある質問」の字間：デザインの文字位置から 1 文字ずつ（右側の空き） */
.faq_ttl { font-feature-settings: normal; }
.faq_ttl span:nth-child(1) { margin-right: calc(-9 * var(--px)); }
.faq_ttl span:nth-child(2) { margin-right: calc(-10 * var(--px)); }
.faq_ttl span:nth-child(3) { margin-right: calc(-2 * var(--px)); }
.faq_ttl span:nth-child(4) { margin-right: calc(-2 * var(--px)); }
.faq_ttl span:nth-child(5) { margin-right: calc(3 * var(--px)); }
/* ギフト診断：→ の丸（デザイン実測：直径 36・カード右下から 12 / 14）。矢印は ARR_c（10px・白） */
.wish { margin-inline: calc(20 * var(--px)); }
.wish_arr { right: calc(12 * var(--px)); bottom: calc(14 * var(--px)); width: calc(36 * var(--px)); height: calc(36 * var(--px)); background-color: #c1ab88; }
.wish_arr::after {
  content: "";
  inset: auto;
  top: 50%;
  left: 50%;
  width: calc(10 * var(--px));
  height: calc(10 * var(--px));
  margin: calc(-5 * var(--px)) 0 0 calc(-5 * var(--px));
  background-color: #fff;
  -webkit-mask: url(../img/ARR_c.webp) no-repeat center / 100% 100%;
          mask: url(../img/ARR_c.webp) no-repeat center / 100% 100%;
}
@media (hover: hover) and (pointer: fine) {
  .wish:hover .wish_arr::after { background-color: #f3b4b4; }
}
/* SPECIAL HOLIDAY GIFT の写真（10/22 差し替え：影なし・トリミング済みの 730×540）
     画像はそのまま枠いっぱいに表示し、影は CSS で（旧画像に入っていた影と同じ：右下寄り・ぼかし 26px） */
.hg_img { overflow: visible; box-shadow: calc(5 * var(--px)) calc(6 * var(--px)) calc(26 * var(--px)) rgba(0, 0, 0, .12); }
.hg_img img,
.hg_fig--wrap .hg_img img,
.hg_fig--box .hg_img img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}
.hg_fig--wrap { margin-top: calc(83 * var(--px)) !important; }
.hg_fig--wrap .hg_label { top: calc(-23.5 * var(--px)); }
.hg_fig--wrap + .hg_ttl { margin-top: calc(41 * var(--px)); }
.hg_txt + .hg_glow + .hg_fig { margin-top: calc(115 * var(--px)); }
/* 流れ星はイベント名称の下を通る（文字に重ならないように：文字の層を上に） */
.cp_head { position: relative; z-index: 3; }   /* .cp_shoot（z-index: 2）より上。.cp_col には z-index を付けない（重なり順の基準を作らない） */
/* PC：右の白地のロゴ・メニュー（デザイン実測：カラムの右端から 97px・文字サイズ） */
@media (min-width: 768px) {
  .sidefx_r { padding-left: 97px; }
  .side_camp { font-size: 13.5px; line-height: 1.2; letter-spacing: 0; }
  .side_ttl { margin-top: 20px; font-size: 45px; line-height: 1.09; letter-spacing: 0; }
  .side_nav { margin-top: 56px; font-size: 14.8px; letter-spacing: .04em; }
  .side_nav > li + li { margin-top: 23px; }
}
@media (min-width: 768px) {
  .side_camp { letter-spacing: .025em; }
  .side_ttl { margin-top: 24px; }
  .side_ttl span { letter-spacing: .042em; }
  .side_nav { margin-top: 51px; }
  .side_nav > li:last-child { margin-top: 26px; }
}

/* =========================================================
   ヘッダー：ティザーと同じ動き（10/22・JS が .is-pin / .is-show / .is-hide）
     最初はページの一番上に置き、下スクロールでは一緒に流れる
     上スクロールの時だけ画面に固定して上から出す（色はこれまでどおり・背景なし）
   ========================================================= */
.hm { position: absolute; transform: none; }
.hm.is-pin { position: fixed; transform: translate3d(0, -100%, 0); }
.hm.is-pin.is-show { transform: none; transition: color .8s var(--ease), transform .5s var(--ease); }
.hm.is-pin.is-hide { transition: color .8s var(--ease), transform .4s var(--ease); }
/* EVENT の店舗情報：ONLINE SHOP と同じルール（白地・枠線・文字色の線、hover で塗り）。大きさも ONLINE SHOP と同じ 290×63 */
.ev .btn_store { width: calc(290 * var(--px)); height: calc(63 * var(--px)); gap: calc(25 * var(--px)); padding-left: calc(33 * var(--px)); background: #fff; }
.ev .btn_store .btn_store_logo { width: calc(64 * var(--px)); }
.ev .btn_store .btn_store_txt { padding-top: calc(1 * var(--px)); font-size: calc(12.4 * var(--px)); letter-spacing: .12em; }
@media (hover: hover) and (pointer: fine) {
  .ev .btn_store:hover { background: var(--gold-dk); color: #fff; }
}
/* 店舗情報：幅は上の "LUCKY STAR" ボタンと同じ 274（中身は 290 の時と同じ比率で詰める） */
.ev .btn_store { width: calc(274 * var(--px)); gap: calc(22 * var(--px)); padding-left: calc(28 * var(--px)); }
/* "LUCKY STAR" ボタン：.fx（スクロールイン）の transition で hover の明るさの変化が消えないよう併記 */
.js .btn_ginza.fx {
  transition:
    opacity 1.2s var(--ease),
    transform 1.2s var(--ease),
    filter .5s var(--ease);
}
/* フッターの店舗情報：初期は枠線だけ（背景なし・ベージュの文字）、マウスを乗せるとベージュの塗り（10/22） */
.ft .btn_store--light {
  background-color: rgba(235, 229, 217, 0);
  border-color: #a89a86;
  color: #d6c9b3;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .ft .btn_store--light:hover { background-color: #ebe5d9; border-color: #ebe5d9; color: #9b7c66; }
}
/* FAQ の＋／−：質問が 1 行でも 2 行でも、1 行目の高さの中央に（上の余白 35 ＋ 1 行の高さ 13×1.77 の半分） */
.faq_q::before,
.faq_q::after { top: calc(35 * var(--px) + 13 * 1.77 * var(--px) / 2); }
/* FAQ の質問の上下の余白（10/22）：見た目で 上 24 / 下 20 くらい（上を少しだけ大きく）
     開いた時の回答との間は今までと同じになるよう、回答の 1 段落目を 6px 上げる */
.faq_q { padding-top: calc(19 * var(--px)); padding-bottom: calc(15 * var(--px)); }
.faq_q::before,
.faq_q::after { top: calc(19 * var(--px) + 13 * 1.77 * var(--px) / 2); }
.faq_a > p:first-child { margin-top: calc(-6 * var(--px)); }
.faq_list { margin-top: calc(34 * var(--px)); }   /* 見出し〜最初の質問の間は変えない（質問の上の余白を減らした分を足す） */

/* ヘッダー：上スクロールで出てきた時（.is-show）は、ティザーと同じ白の半透明＋ぼかしの背景（10/23）
     背景の上では文字・ロゴを濃い色に（このページの白のエリアと同じ色）
     ※iOS Safari のバー対策：背景色ではなく background-image で */
.hm_inner { isolation: isolate; }
.hm_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);
}
.hm.is-pin.is-show .hm_inner::before { opacity: 1; }
.hm.is-pin.is-show { color: #7a6656; }

/* =========================================================
   10/23 修正
   ========================================================= */
/* M-3：日付の間の矢印は文字の下側に合わせる */
.cp_date_line { align-self: auto; margin-bottom: calc(1 * var(--px)); }
/* M-6：「一般医療機器」は赤文字 */
.gc_label { color: var(--crimson); }
/* M-11：ONLINE SHOP の hover は半透明の黒 30%（3 か所とも） */
@media (hover: hover) and (pointer: fine) {
  .btn_shop:hover,
  .btn_shop--white:hover { background: rgba(51, 51, 51, .3); border-color: #fff; color: #fff; }
  .gs .btn_shop:hover,
  .ev .btn_shop:hover { border-color: #333; }
}
/* M-10：「ショッピングバッグ」で長くなった分、名前は詰めて 2 行に収める */
.hg_nov_name { letter-spacing: -.02em; white-space: nowrap; }
/* M-14：EVENT の左の写真（4 枚）を自動でクロスフェード */
@media (min-width: 768px) {
  .sidefx_img--slide img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s var(--ease);
  }
  .sidefx_img--slide img.is-cur { opacity: 1; }
}
/* M-15：SHOP LIST の日程は「>」が 2 つの日付の真ん中に来るように（開始日は右寄せ・終了日は左寄せで、「>」の左右の空きを同じに） */
.sl_date span:first-child { text-align: right; }
.sl_date span + span::before { width: auto; margin: 0 .55em; }
.sl_date span + span { width: calc(52 * var(--px)); }
/* 11/04：会場名の下にフロア・場所（2〜3 行）。行の高さは中身に合わせ、上下の余白をそろえる（最低 55px） */
.sl_row { height: auto; min-height: calc(55 * var(--px)); padding: calc(12 * var(--px)) 0; }
.sl_name { line-height: 1.5; }
/* 開始日：幅は一番長い日付（12.23）ぴったり（元 41px）→ 会場名の幅を広げる
   11/05：開始日も頭揃えに（開始日・「>」・終了日がそれぞれ縦にそろう） */
.sl_date span:first-child { width: calc(34 * var(--px)); text-align: left; }

/* M-9：縦書きラベルは画像に（2 倍書き出し・文字の範囲ぴったり）。位置はデザインから実測（写真の左上基準） */
.hg_label { writing-mode: horizontal-tb; line-height: 0; letter-spacing: 0; }
.hg_label img { display: block; width: 100%; height: auto; }
.hg_fig--wrap .hg_label { left: calc(18.4 * var(--px)); right: auto; top: calc(-23 * var(--px)); width: calc(36.5 * var(--px)); }
.hg_fig--box .hg_label { left: auto; right: calc(22.5 * var(--px)); top: calc(-22.2 * var(--px)); width: calc(13.5 * var(--px)); }

/* ギフト診断のバナー：マウスを乗せると REL_HG_wish_on にクロスフェード（→ の丸の動きはこれまでどおり） */
.wish_img { position: relative; }
.wish_img_on {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .wish:hover .wish_img_on { opacity: 1; }
}

/* フッター：BRAND SITE（10/23 追加）… 店舗情報と同じ大きさ・同じ動き（初期は枠線だけ、hover でベージュの塗り＋黒の文字） */
.ft .btn_wrap--brand { margin-top: calc(24 * var(--px)); }
.ft .btn_brand {
  gap: calc(28 * var(--px));
  width: calc(260 * var(--px));
  height: calc(63 * var(--px));
  padding-left: calc(34 * var(--px));
  background-color: rgba(238, 233, 226, 0);
  border-color: #a89a86;
  color: #d6c9b3;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.ft .btn_brand .btn_shop_logo { width: calc(63 * var(--px)); }
.ft .btn_brand .btn_shop_txt { padding-top: calc(2 * var(--px)); font-size: calc(13 * var(--px)); letter-spacing: .1em; }
@media (hover: hover) and (pointer: fine) {
  .ft .btn_brand:hover { background-color: #eee9e2; border-color: #eee9e2; color: #231814; }
}

/* フッターの背景：BRAND SITE を足して縦に長くなっても、画像は幅いっぱい・下揃えで大きさを変えない（cover だと拡大されて商品がボタンに重なる）
   画像の上に足りない分は、画像の上端と同じ暗い色（左 #0a0101 → 右 #170001）で */
.ft_col {
  background:
    url(../img/REL_FT_bg.webp) center bottom / 100% auto no-repeat,
    linear-gradient(90deg, #0a0101, #170001);
}
.ft_nav { margin-top: calc(85 * var(--px)); }   /* ボタンと商品の間を少し広げる（フッター全体も 20px 長く） */

/* =========================================================
   CAMPAIGN：画面の比率によって商品（背景画像）とイベント名称が重ならないように（10/23）
     背景画像はそのまま（cover・下揃え）。JS が画像の箱の上端を計算し、
     イベント名称をその上に収まる位置へ（足りなければ少し縮小：.cp_head の --cp-s）
   ========================================================= */
.cp_head { transform: scale(var(--cp-s, 1)); transform-origin: center top; }
/* iOS Safari：バーが縮んで表示エリアが広がっても、下に紺の帯が出ないように固定エリアを大きい方の高さに */
@supports (height: 100lvh) {
  .cp_pin { height: 100lvh; }
}

/* 流れ星はイベント名称の下（スマホの Safari でも確実に）：
   それぞれを別の層として描かせる（translateZ）。重なり順は z-index（流れ星 2 < 文字 3） */
.cp_shoot { -webkit-transform: translateZ(0); transform: translateZ(0); }
.cp_head { -webkit-transform: translateZ(0) scale(var(--cp-s, 1)); transform: translateZ(0) scale(var(--cp-s, 1)); }
/* FAQ の＋／−：質問の文字の範囲（上の余白 19・下の余白 15 を除いた部分）の上下中央に。1 行なら 1 行目と同じ位置、複数行なら文字全体の中央 */
.faq_q::before,
.faq_q::after { top: calc(19 * var(--px) + (100% - 34 * var(--px)) / 2); }
/* ギフト診断のバナー：マウスを乗せた時の画像の切り替えは一旦なし（10/23）。→ の丸の動きはそのまま
   ※戻す時はこの 3 行を削除 */
.wish_img_on { display: none; }
/* ONLINE SHOP（3 か所）：マウスを乗せた時は色を変えず、ボタン全体を半透明に（10/23） */
.btn_shop { transition: opacity .4s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn_shop:hover,
  .btn_shop--white:hover,
  .gs .btn_shop:hover,
  .ev .btn_shop:hover { background: none; border-color: currentColor; color: #333; opacity: .5; }
  .btn_shop--white:hover { background: #fff; border-color: #fff; }
}
@media (hover: hover) and (pointer: fine) {
  .ft .btn_brand:hover { opacity: 1; }   /* フッターの BRAND SITE は対象外（これまでどおり塗りに変わる） */
}