/* =========================================================
   KENSINGTON DIAMONDS — style.css
   Base: Adobe XD "260819_kensingtondiamonds"
   SP アートボード(390px)の座標をそのまま使用。--u が 1 デザインpx。
   ・要素は style="--x:..;--y:..;--w:..;--hh:.." で XD 座標を指定
   ・ポイントテキストは「XDのベースライン − CSSのベースライン位置」を top にしている
   ・エリアテキストは XD のボックス上端 − 4px（Zen Old Mincho 13/30 の1行目ベースライン合わせ）
   ========================================================= */

:root {
  --c-black: #000;
  --c-gray-text: #343432;   /* YuGothic 情報テキスト */
  --c-bg: #eaeaec;          /* 長方形 1 / アートボード */
  --c-white: #fff;
  --c-dark: #2b2b29;        /* 長方形 9 / 11 */
  --c-beige: #ece6da;       /* 長方形 8 */
  --c-line: #707070;
  --c-muted: #5c5b58;

  --f-en-logo: 'Josefin Sans', sans-serif;
  --f-en-nav: 'Cormorant Garamond', serif;
  --f-en: 'Marcellus', serif;
  --f-ja: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --f-gothic: 'Yu Gothic Medium', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;

  /* 1 デザインpx（SP: 画面幅 390 で 1px。480px まで拡大、それ以上は中央寄せ） */
  --u: calc(min(100vw, 480px) / 390);
  --col: calc(390 * var(--u));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-black);
  font-family: var(--f-ja);
  font-size: calc(13 * var(--u));
  line-height: calc(30 * var(--u));
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- 座標配置ヘルパー ---------- */
.abs {
  position: absolute;
  left: calc(var(--x, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w, 390) * var(--u));
}
.abs-group { position: absolute; inset: 0; }
.t-center { text-align: center; }
.section, .voice-pin { scroll-margin-top: calc(60 * var(--u)); }

/* ---------- テキストスタイル（XD 文字スタイル） ---------- */
.t-title {            /* Marcellus 40 / 50 / 100 */
  font-family: var(--f-en);
  font-size: calc(40 * var(--u));
  line-height: calc(50 * var(--u));
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.t-sub {              /* Zen Old Mincho 14 / 20 / 100 */
  font-family: var(--f-ja);
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.t-body {             /* Zen Old Mincho 13 / 30 / 0（改行は XD の折り返し位置） */
  font-family: var(--f-ja);
  font-size: calc(13 * var(--u));
  line-height: calc(30 * var(--u));
  letter-spacing: 0;
  white-space: nowrap;
}
.t-name {             /* Zen Old Mincho 13 / 19 / 100 */
  font-family: var(--f-ja);
  font-size: calc(13 * var(--u));
  line-height: calc(19 * var(--u));
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.t-info {             /* YuGothic Medium 13 / 23 / 100  #343432 */
  font-family: var(--f-gothic);
  font-weight: 500;
  font-size: calc(13 * var(--u));
  line-height: calc(23 * var(--u));
  letter-spacing: 0.1em;
  color: var(--c-gray-text);
  white-space: nowrap;
}
.t-label-ja {         /* Zen Old Mincho 12 / 17 / 100  #343432 */
  font-family: var(--f-ja);
  font-size: calc(12 * var(--u));
  line-height: calc(17 * var(--u));
  letter-spacing: 0.1em;
  color: var(--c-gray-text);
  white-space: nowrap;
}
.t-label-en {         /* Marcellus 14 / 18 / 100 */
  font-family: var(--f-en);
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.t-link {             /* Marcellus 16 / 20 / 100 ＋ 0.5px の下線（ベースライン +10.5） */
  font-family: var(--f-en);
  font-size: calc(16 * var(--u));
  line-height: calc(20 * var(--u));
  letter-spacing: 0.1em;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.t-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(25.5 * var(--u));
  height: 0.5px;
  background: currentColor;
}
.t-link--white { color: #fff; }
.t-contact-title {    /* Zen Old Mincho Bold 12 / 17 / 100  white */
  font-family: var(--f-ja);
  font-weight: 700;
  font-size: calc(12 * var(--u));
  line-height: calc(17 * var(--u));
  letter-spacing: 0.1em;
  color: #fff;
  white-space: nowrap;
}
.t-contact-body {     /* Zen Old Mincho 13 / 30 / 0  white  center */
  font-family: var(--f-ja);
  font-size: calc(13 * var(--u));
  line-height: calc(30 * var(--u));
  color: #fff;
  white-space: nowrap;
}
.t-note {             /* Zen Old Mincho 12 / 24 / 0  #EAEAEC */
  font-family: var(--f-ja);
  font-size: calc(12 * var(--u));
  line-height: calc(24 * var(--u));
  color: var(--c-bg);
  white-space: nowrap;
}
.t-copy {             /* Marcellus 12 / 24  #5C5B58 */
  font-family: var(--f-en);
  font-size: calc(12 * var(--u));
  line-height: calc(24 * var(--u));
  color: var(--c-muted);
  white-space: nowrap;
}

/* ---------- Logo (Josefin Sans Light 20/24 + 12/14, 字間 50) ---------- */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--f-en-logo);
  font-weight: 300;
  color: var(--c-black);
}
.logo__name { font-size: calc(20 * var(--u)); letter-spacing: 0.05em; line-height: calc(24 * var(--u)); -webkit-text-stroke: 0.2px currentColor; }
.logo__sub  { font-size: calc(12 * var(--u)); letter-spacing: 0.05em; line-height: calc(14 * var(--u)); margin-top: calc(3 * var(--u)); }

/* ---------- Header（XD: ロゴ 17,31 / MENU 線 347,15 & 24.5 / 文字 347,38） ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: calc(60 * var(--u));
  mix-blend-mode: difference;   /* 下を通る階層の明暗に応じて反転 */
  color: #fff;
}
.header .logo { position: absolute; left: calc(17 * var(--u)); top: calc(12 * var(--u)); color: #fff; }
.header .logo__name { -webkit-text-stroke: 0.2px #fff; }
.header .logo { transition: opacity .4s; }
.header.is-scrolled .logo { opacity: 0; pointer-events: none; }
.menu-btn, .menu-close {
  position: absolute;
  right: calc(14 * var(--u));
  top: calc(15 * var(--u));
  width: calc(29 * var(--u));
  height: calc(28 * var(--u));
}
.menu-btn__lines, .menu-close__x { position: absolute; left: 0; top: 0; width: calc(29 * var(--u)); height: calc(10 * var(--u)); }
.menu-btn__lines span { position: absolute; left: 0; width: 100%; height: 0.5px; background: #fff; }
.menu-btn__lines span:first-child { top: 0; }
.menu-btn__lines span:last-child { top: calc(9.5 * var(--u)); }
.menu-btn__label, .menu-close__label {
  position: absolute; left: 0; width: 100%;
  top: calc(14 * var(--u));        /* ベースライン 38 = 15 + 14 + 9 */
  font-family: var(--f-en);
  font-size: calc(9 * var(--u));
  line-height: calc(12 * var(--u));
  letter-spacing: 0.1em;
  text-align: center;
}

/* ---------- Global menu（XD: SP_MENU） ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--c-bg);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s .35s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.menu__inner { position: relative; width: var(--col); height: calc(844 * var(--u)); margin: 0 auto; }
.menu__logo { position: absolute; left: calc(17 * var(--u)); top: calc(12 * var(--u)); }
.menu-close__x span {
  position: absolute; left: calc(-1 * var(--u)); top: 50%;
  width: calc(31 * var(--u)); height: 0.5px; background: #000; transform-origin: center;
}
.menu-close__x span:first-child { transform: rotate(19deg); }
.menu-close__x span:last-child  { transform: rotate(-19deg); }
.menu__list li { position: absolute; left: calc(36 * var(--u)); top: calc(var(--y) * var(--u)); }
.menu__list a, .hero__nav-list a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.menu__list .en, .hero__nav-list .en {
  font-family: var(--f-en-nav);
  font-size: calc(12 * var(--u));
  letter-spacing: 0.05em;
  line-height: calc(14 * var(--u));
}
.menu__list .ja, .hero__nav-list .ja {
  font-family: var(--f-ja);
  font-size: calc(11 * var(--u));
  letter-spacing: 0.05em;
  line-height: calc(16 * var(--u));
  margin-left: calc(10 * var(--u));
}
/* 下線（ベースライン +9.5）＋ 右端の点 */
.menu__list a::after {
  content: "";
  position: absolute; left: 0; right: 0;
  top: calc(20.5 * var(--u));
  height: 0.5px; background: #000;
}
.menu__list a::before {
  content: "";
  position: absolute; right: calc(-1.5 * var(--u));
  top: calc(19 * var(--u));
  width: calc(3.5 * var(--u)); height: calc(3.5 * var(--u));
  border-radius: 50%; background: #000;
}
.pill {
  position: absolute;
  top: calc(567 * var(--u));
  height: calc(35 * var(--u));
  border: 0.5px solid var(--c-muted);
  border-radius: calc(18 * var(--u));
  font-family: var(--f-ja);
  font-size: calc(12 * var(--u));
  line-height: calc(18 * var(--u));
  letter-spacing: 0.1em;
  text-align: center;
}
.pill span { position: absolute; left: 0; right: 0; top: calc(9.5 * var(--u)); }   /* ベースライン 590 */
.pill--view { left: calc(36 * var(--u)); width: calc(128 * var(--u)); }
.pill--view span { padding-left: calc(28 * var(--u)); }
.pill--shop { left: calc(185 * var(--u)); width: calc(169 * var(--u)); }
.pill__icon { position: absolute; left: calc(18.5 * var(--u)); top: calc(8.5 * var(--u)); width: calc(17 * var(--u)); height: calc(17 * var(--u)); }

/* =========================================================
   LAYERS — 各セクションを重ねて、下から新しい階層が出てくる
   ========================================================= */
main { position: relative; }
.layer { position: -webkit-sticky; position: sticky; top: 0; }
.layer.hero       { z-index: 1; }
.layer.substance  { z-index: 2; }
.layer.stylebook  { z-index: 3; }
.layer.design     { z-index: 4; }
.layer.salon      { z-index: 5; }
.gallery-final    { z-index: 6; }   /* Salon より上、Invitation より下 */
.layer.invitation { z-index: 7; }
.layer.ending     { z-index: 8; }

.section {
  width: var(--col);
  margin: 0 auto;
  height: calc(var(--h) * var(--u));
}
.canvas { position: relative; width: var(--col); height: calc(var(--h) * var(--u)); }
.figure { height: calc(var(--hh) * var(--u)); overflow: hidden; }
.figure img { width: 100%; height: 100%; object-fit: cover; }
/* XD の画像塗り（scale / offsetX / offsetY）を再現するトリミング：--cw = 幅%（図形比）, --cx/--cy = 位置(px) */
.figure img.crop {
  position: absolute;
  width: calc(var(--cw) * 1%);
  height: auto;
  max-width: none;
  left: calc(var(--cx) * var(--u));
  top: calc(var(--cy) * var(--u));
  object-fit: fill;
}
.figure { position: absolute; }

/* ふわっと表示 */
[data-fade] {
  opacity: 0;
  transform: translateY(calc(28 * var(--u)));
  transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-fade].is-in { opacity: 1; transform: none; }
.t-title[data-fade] { transition-duration: 1.4s; }


/* =========================================================
   HERO（XD: 390×768 パネル）
   ========================================================= */
.hero { position: -webkit-sticky; position: sticky; top: 0; background: var(--c-bg); overflow: hidden; height: calc(817 * var(--u)); }   /* パネル 768 ＋ グレー帯 49（〜817）はトップ側の階層 */
.hero__video { display: none; }
.hero__panel {
  position: relative;
  width: var(--col);
  height: calc(768 * var(--u));
  margin: 0 auto;
  background: var(--c-bg);
  overflow: hidden;
}
.hero__panel-logo { display: none; }

/* 縦書きコピー（XD: 字送り 26 / 行送り 36 / 列 x=222,186,150 / 1文字目セル上端 120） */
.hero__copy {
  position: absolute;
  top: calc(124 * var(--u));
  right: calc(141 * var(--u));
  height: calc(240 * var(--u));
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--f-ja);
  font-size: calc(18 * var(--u));
  letter-spacing: calc(8 * var(--u));
  line-height: calc(36 * var(--u));
  white-space: nowrap;
}
.hero__copy-line { display: block; }
.hero__copy .punct { position: relative; top: calc(-6 * var(--u)); }   /* 句読点は前の文字に寄せる（XD の見え方に合わせて 6px 上げ） */
.hero__copy-step {
  display: inline-block;
  opacity: 0;
  transform: translateY(calc(-14 * var(--u)));
  animation: copy-in 1.5s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__copy-step--1 { animation-delay: .5s; }
.hero__copy-step--2 { animation-delay: 1.9s; }
.hero__copy-step--3 { animation-delay: 2.9s; }
.hero__copy-step--4 { animation-delay: 4.0s; }
@keyframes copy-in { to { opacity: 1; transform: translateY(0); } }

/* リングのコラージュ（hp-s1-right 270,241 196×293 / 白 265,327 176×112 / 画像3 265,343 152×79） */
.hero__rings {
  position: absolute;
  top: calc(241 * var(--u));
  left: calc(265 * var(--u));
  width: calc(201 * var(--u));
  height: calc(293 * var(--u));
  z-index: 2;
}
.hero__rings-stack {
  position: absolute; top: 0; left: calc(5 * var(--u)); width: calc(196 * var(--u)); height: calc(293 * var(--u)); object-fit: cover;
  /* 写真の地色（#ECEEF0 前後）と背景（#EAEAEC）の差で四角く浮いて見えないよう、縁をぼかして馴染ませる */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 100%), linear-gradient(to bottom, transparent, #000 20%, #000 100%);
          mask-image: linear-gradient(to right, transparent, #000 22%, #000 100%), linear-gradient(to bottom, transparent, #000 20%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.hero__rings-white { display: none; }   /* XD の白い矩形（長方形 3）は非表示にし、金のリング画像（透過PNG）だけを置く */
.hero__rings-gold  { position: absolute; top: calc(102 * var(--u)); left: 0; width: calc(152 * var(--u)); height: calc(79 * var(--u)); object-fit: contain; }
.hero__rings, .hero__main, .hero__slides, .hero__cta { opacity: 0; animation: fade-in 1.2s ease forwards; }
/* 表示順：XD どおりのビジュアル（リング＋写真）を出した状態でコピー4段階（0.5 / 1.9 / 2.9 / 4.0s）
   → ビジュアルが消える（6.0s）→ 指輪のローテーション（6.6s）→ CTA（7.6s） */
.hero__rings, .hero__main { animation: fade-in 1.2s ease .3s forwards, fade-out 1s ease 6s forwards; }
.hero__slides { animation-delay: 6.6s; }
.hero__cta    { animation-delay: 7.6s; }
@keyframes fade-out { to { opacity: 0; visibility: hidden; } }
/* XD の写真（book-appointment_2 1,399 390×306 / scale 1.273 / offset）：コピー表示中だけ見せる */
.hero__main {
  position: absolute;
  top: calc(399 * var(--u));
  left: calc(1 * var(--u));
  width: var(--col);
  height: calc(306 * var(--u));
  overflow: hidden;
  z-index: 1;
}
.hero__main-img { position: absolute; width: 127.3%; height: auto; max-width: none; left: calc(-36.3 * var(--u)); top: calc(-230.5 * var(--u)); }
@keyframes fade-in { to { opacity: 1; } }

/* 写真（book-appointment_2 1,399 390×306）→ ジュエリーが奥行きのある円軌道を回り、手前に来た1枚がメイン画像になる
   （奥ではぼやけて小さく、手前に来るとクリアに。位置・ぼかし・重なりは JS が毎フレーム計算） */
.hero__slides {
  position: absolute;
  top: calc(399 * var(--u));
  left: calc(1 * var(--u));
  width: var(--col);
  height: calc(306 * var(--u));
  overflow: visible;                 /* 奥に回った写真は枠の上に小さく・ぼけて見える（参考サイトの円軌道） */
  z-index: 1;
}
.hero__copy { z-index: 3; }          /* コピーは常に写真より手前 */
.orbit__item {
  position: absolute; inset: 0;
  overflow: hidden;
  will-change: transform, filter, opacity;
  transform-origin: center center;
}
.hero__slide {                       /* 背景透明の指輪：枠の中央に、幅の 82% で収める */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: calc(18 * var(--u)) calc(35 * var(--u));
  filter: drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.14));
}

/* CTA（長方形 4 166,679 194×52 r4 / 文字 中心 249, ベースライン 701 / 画像 2 321,679 55×49） */
.hero__cta {
  position: absolute;
  top: calc(679 * var(--u));
  left: calc(166 * var(--u));
  width: calc(194 * var(--u));
  height: calc(52 * var(--u));
  background: #000;
  border-radius: calc(4 * var(--u));
  color: #fff;
  z-index: 3;
}
.hero__cta-text {
  position: absolute; left: 0; top: calc(9 * var(--u));
  width: calc(166 * var(--u));
  text-align: center;
  font-family: var(--f-ja);
  font-weight: 600;
  font-size: calc(12 * var(--u));
  letter-spacing: 0.05em;
  line-height: calc(18 * var(--u));
  white-space: nowrap;
}
.hero__cta-icon { position: absolute; top: 0; left: calc(155 * var(--u)); width: calc(55 * var(--u)); height: calc(49 * var(--u)); }

/* =========================================================
   SECTIONS
   ========================================================= */
/* The Substance（白 817–2674） */
.substance { background: var(--c-white); }
.substance__video {           /* 動画 -53,908 496×278 を白帯 906–928 / 1166–1188 で挟む → 可視 928–1166 */
  height: calc(238 * var(--u));
  overflow: hidden;
  background: #000;
}
.substance__video video {     /* XD と同じく 496×278 で配置し、上下 20px（元動画の黒帯）を切る */
  position: absolute;
  left: calc(-53 * var(--u));
  top: calc(-20 * var(--u));
  width: calc(496 * var(--u));
  height: calc(278 * var(--u));
  object-fit: cover;
}

/* Style Book（EAEAEC 2674–3051 ＋ 黒 3051–3711） */
.stylebook { background: var(--c-bg); }

/* 固定レイヤーを「窓」から見せる（clip-path で fixed 要素を切り抜く） */
.gwin { height: calc(var(--hh) * var(--u)); clip-path: inset(0); overflow: hidden; }
.gwin--full { position: absolute; inset: 0; height: 100%; }
.gwin__fixed {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--c-dark);
}
/* 3段の位置は JS が「窓の上端 + 60px」（XD: 3111 − 3051）に合わせて更新（--gt） */
.gallery { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; transform: translateY(var(--gt, 0px)); will-change: transform; }
.gallery__row { overflow: hidden; }
.gallery__row + .gallery__row { margin-top: calc(30 * var(--u)); }     /* XD: 行間 30 */
.gallery__track {
  display: flex;
  gap: calc(15 * var(--u));                                            /* XD: 間隔 15 */
  width: max-content;
  padding-left: calc(16 * var(--u));                                   /* XD: 左 16 */
  will-change: transform;
  animation: marquee-left 40s linear infinite;
}
.gallery__row[data-dir="right"] .gallery__track { animation-name: marquee-right; }
.gallery__track li { flex: none; width: calc(120 * var(--u)); height: calc(160 * var(--u)); }  /* XD: 120×160 */
.gallery__track img { width: 100%; height: 100%; object-fit: cover; }
@keyframes marquee-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Design & Craftsmanship（EAEAEC 3711–3836 → ECE6DA 3836–5130） */
.design { background: var(--c-beige); }   /* 3836〜5130。上のグレー帯（3711–3836）は Style Book 側の階層 */
.design .t-link .arrow { margin-left: auto; }

/* The Salon（EAEAEC 5130–6271） */
.salon { background: var(--c-bg); }

/* Invitation（白 6271–9159） */
.invitation { background: var(--c-white); }

/* お客様の声：ピン留めせず、その場で 01 → 02 → 03 を切り替える（自動送り）
   前後の余白は XD どおり（写真→見出し 62px、本文末→次見出し 55px）。本文エリアの高さは最長の1件に固定 */
.voice-pin { position: relative; }
.voice-pin__sticky { padding-top: calc(20 * var(--u)); }
.voice-pin__group { position: relative; width: var(--col); height: calc(82 * var(--u) + var(--vh, 360px)); }   /* 高さは一番長い1件（12行=360px）に固定し、下のコンテンツを動かさない */
.voice-pin + .canvas { position: relative; background: var(--c-white); margin-top: calc(45 * var(--u)); }   /* 本文ボックス下端 7965 → 次見出し 8020 = 55（見出しは canvas 内 +10） */
.voice-pin__counter {
  display: flex; justify-content: center; align-items: center;
  gap: calc(10 * var(--u));
  font-family: var(--f-en);
  font-size: calc(11 * var(--u));
  line-height: calc(14 * var(--u));
  letter-spacing: 0.15em;
  color: var(--c-gray-text);
}
.voice-pin__sep { width: calc(40 * var(--u)); height: 0.5px; background: var(--c-line); position: relative; overflow: hidden; }
.voice-pin__sep::after { content: ""; position: absolute; inset: 0; background: #000; transform-origin: left; transform: scaleX(var(--p, 0)); }
.voice { height: var(--vh, 360px); }
/* ページをめくるように切り替え：表示中のテキストが左下から右上へ、斜めに徐々にフェードアウトし、下にある次の1件が現れる */
.voice__item {
  position: absolute; left: 0; top: 0; width: 100%;
  background: var(--c-white);
  opacity: 0;
  pointer-events: none;
}
.voice__item.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
.voice__item.is-next   { opacity: 1; z-index: 1; }
.voice__item.is-flip {
  opacity: 1; z-index: 3;
  -webkit-mask-image: linear-gradient(to top right, transparent 38%, #000 62%);
          mask-image: linear-gradient(to top right, transparent 38%, #000 62%);
  -webkit-mask-size: 200% 200%; mask-size: 200% 200%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: page-curl 1.2s cubic-bezier(.45,.05,.4,1) forwards;
}
@keyframes page-curl { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }
/* 間を置いてから、次の1件が同じ向き（左下→右上）で現れる */
.voice__item.is-enter {
  opacity: 1; z-index: 2;
  -webkit-mask-image: linear-gradient(to top right, #000 38%, transparent 62%);
          mask-image: linear-gradient(to top right, #000 38%, transparent 62%);
  -webkit-mask-size: 200% 200%; mask-size: 200% 200%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: page-enter 1.2s cubic-bezier(.45,.05,.4,1) forwards;
}
@keyframes page-enter { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }

/* お問い合わせ（長方形 11） */
.contact { height: calc(var(--hh) * var(--u)); background: var(--c-dark); }
.contact .t-link .arrow { margin-left: auto; }

/* Ending：Invitation の階層が透明になり、最背面の STYLE BOOK が現れる */
.gallery-final { position: fixed; visibility: hidden; }        /* 最後の 660px に入るまでは非表示（他のセクションを隠さない） */
.gallery-final.is-on { visibility: visible; }
.gallery-final .gallery { --gt: calc(100vh - 600 * var(--u)); }   /* XD の最終ブロック（660）を画面下端に合わせる：3段の下に 60 */
.gallery-final__logo {                 /* 3段の上の黒いスペースの中央に、トップ左上と同じロゴを白で */
  position: absolute;
  left: 50%;
  top: calc(var(--lt, 50vh) / 2);
  transform: translate(-50%, -50%);
  color: #fff;
}
.gallery-final__logo { font-family: var(--f-en); font-weight: 400; }            /* セクション見出し（Marcellus 40/50・字間 100）と同じデザイン */
.gallery-final__logo .logo__name { font-size: calc(40 * var(--u)); line-height: calc(50 * var(--u)); letter-spacing: 0.1em; -webkit-text-stroke: 0; white-space: nowrap; }
.gallery-final__logo .logo__sub  { font-size: calc(24 * var(--u)); line-height: calc(30 * var(--u)); letter-spacing: 0.1em; margin-top: 0; white-space: nowrap; }
.ending { position: -webkit-sticky; position: sticky; top: 0; height: calc(660 * var(--u)); background: transparent; pointer-events: none; }
.invitation { will-change: opacity, transform, filter; }

/* ---------- Sound toggle（PC の動画） ---------- */
.sound-btn {
  position: absolute; right: 40px; bottom: 32px;
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-family: var(--f-en); font-size: 10px; letter-spacing: .15em; line-height: 1;
  padding: 8px 10px; opacity: .85; transition: opacity .3s;
  text-shadow: 0 0 6px rgba(0,0,0,.4);
}
.sound-btn:hover { opacity: 1; }
.sound-btn__bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound-btn__bars span { width: 2px; background: #fff; height: 4px; border-radius: 1px; }
.sound-btn.is-on .sound-btn__bars span { animation: eq .9s ease-in-out infinite; }
.sound-btn.is-on .sound-btn__bars span:nth-child(2) { animation-delay: .2s; }
.sound-btn.is-on .sound-btn__bars span:nth-child(3) { animation-delay: .4s; }
.sound-btn.is-on .sound-btn__bars span:nth-child(4) { animation-delay: .1s; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 12px; } }

/* =========================================================
   PC (>= 1024px)：左に動画を固定、右 390px カラムに SP デザインをそのまま
   ========================================================= */
@media (min-width: 1024px) {
  :root { --u: 1px; --col: 390px; }
  body { background: #000; }

  .hero { overflow: visible; }
  .hero__video {
    display: block;
    position: fixed; top: 0; left: 0;
    width: calc(100vw - var(--col));
    height: 100vh; height: 100dvh;
    background: #000; z-index: 0;
  }
  .hero__video video { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* 左ナビ（XD PC: ロゴ 84,522 / 項目 x117 ベースライン 590〜728.5 / 線 83.5–102.5 / 点 102） */
  .hero__nav { position: absolute; left: 84px; bottom: 36px; width: 360px; height: 229px; }
  .hero__nav-logo { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; font-family: var(--f-en-logo); font-weight: 300; }
  .hero__nav-logo .logo__name { font-size: 20px; line-height: 24px; -webkit-text-stroke: 0.2px #000; }
  .hero__nav-logo .logo__sub  { font-size: 12px; line-height: 14px; margin-top: 3px; }
  .hero__nav-list li { position: absolute; left: 33px; top: calc(var(--y) * 1px); }
  .hero__nav-list a::before { content: ""; position: absolute; left: -33.5px; top: 6.5px; width: 19px; height: 0.5px; background: #000; }
  .hero__nav-list a::after  { content: ""; position: absolute; left: -16.5px; top: 5px; width: 3.5px; height: 3.5px; border-radius: 50%; background: #000; }

  main { position: relative; z-index: 1; width: var(--col); margin-left: auto; background: var(--c-bg); }
  .gwin__fixed { left: auto; width: var(--col); }
  .header { left: auto; right: 0; width: var(--col); }
  .menu { left: auto; right: 0; width: var(--col); }
  .ending { height: 660px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy-step, .hero__rings, .hero__slides, .hero__cta { animation: none; opacity: 1; transform: none; }
  [data-fade] { opacity: 1; transform: none; transition: none; }
  .orbit__item { filter: none !important; }
  .voice__item.is-flip { animation: none; opacity: 0; }
  .voice__item.is-enter { animation: none; -webkit-mask-image: none; mask-image: none; }
  .gallery__track { animation: none; }
}