@charset "utf-8";

/* =============================================
   Scroll Snap
   ============================================= */
html {
  scroll-snap-type: none; /* カスタム JS スナップで制御 */
  scroll-behavior: smooth;
}

/* 各セクションのスナップ起点 */
#intro,
.h-section-wrap {
  scroll-snap-align: start;
}


/* =============================================
   Font
   ============================================= */
/* ページ基本フォント: Noto Sans JP（common.css body に設定）
   英字・数字などのアクセント部分は Montserrat を各要素に個別指定 */

/* =============================================
   Loading
   ============================================= */
#loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
#loading.hide {
  opacity: 0;
}

.loading-inner {
  overflow: hidden;
}

.loading-text {
  position: relative;
  font-weight: 200;
  font-size: clamp(1.2rem, 3vw, 2.4rem);
  text-transform: none;
  line-height: 1;
  font-family: "Montserrat", sans-serif;
}

/* 背景テキスト (#ccc) */
.lt-bg {
  display: block;
  color: #ccc;
  user-select: none;
}

/* 前景テキスト (#000) clip-pathで左から右に着色 */
.lt-fg {
  position: absolute;
  left: 0;
  top: 0;
  color: #766662;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.lt-fg.active {
  clip-path: inset(0 0% 0 0);
}

/* =============================================
   Intro — ローディング後フェードイン
   ============================================= */
.intro-name,
.intro-vol,
.intro-logo,
.intro-body,
.intro-sig {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

#intro.is-ready .intro-name { opacity: 1; transform: none; transition-delay: 0s; }
#intro.is-ready .intro-vol  { opacity: 1; transform: none; transition-delay: 0.12s; }
#intro.is-ready .intro-logo { opacity: 1; transform: none; transition-delay: 0.26s; }
#intro.is-ready .intro-body { opacity: 1; transform: none; transition-delay: 0.42s; }
#intro.is-ready .intro-sig  { opacity: 1; transform: none; transition-delay: 0.58s; }

/* =============================================
   Header (Fixed)
   ============================================= */
#header {
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#header.visible {
  opacity: 1;
  /* pointer-events はコンテナに当てない → 空白部分はクリック通過 */
}
#header.visible .hd-left,
#header.visible .hd-nav,
#header.visible .back-to-top {
  pointer-events: auto;
}
.hd-left,
.hd-nav {
  transition: opacity 0.5s ease;
}
#header.at-profile .hd-left,
#header.at-profile .hd-nav {
  opacity: 0;
  pointer-events: none;
}

.hd-left {
  line-height: 1.3;
}
.hd-brand {
  font-weight: 300;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: 0.08em;
  color: #766662;
  margin: 0;
}
.hd-brand img {
  height: clamp(1.2rem, 2.2vw, 1.7rem);
  width: auto;
  display: block;
}
.hd-brand a { color: inherit; }
.hd-sub {
  font-weight: 300;
  font-size: clamp(0.55rem, 0.9vw, 0.75rem);
  letter-spacing: 0.12em;
  color: #766662;
  margin: 0.2em 0 1.5em;
  line-height: 1.6;
}
.hd-sub img {
  height: clamp(0.65rem, 0.9vw, 0.75rem);
  width: auto;
  display: block;
}

.hd-right {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.hd-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hd-nav-item {
  transition: opacity 0.3s;
  position: relative;
  padding-left: 1em;
  display: block;
}
.hd-nav-item img {
  height: clamp(0.6rem, 0.9vw, 0.82rem);
  width: auto;
  display: block;
}
.hd-nav-item[data-section="ear"] img {
  height: clamp(0.61rem, 0.91vw, 0.83rem);
}
.hd-nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: #766662;
  opacity: 0;
  transition: opacity 0.3s;
}
.hd-nav-item.active::before { opacity: 1; }
.hd-nav-item:hover { opacity: 0.5; }

.back-to-top {
  position: absolute;
  bottom: 2rem;
  right: 0;
  display: flex;
  align-items: center;
  transition: opacity 0.3s;
}
.back-to-top:hover { opacity: 0.5; }
.back-to-top img {
  width: clamp(4rem, 5vw, 5rem);
  height: auto;
  display: block;
}

/* =============================================
   Intro Section
   ============================================= */
#intro {
  position: sticky;
  top: 0;
  z-index: 0;            /* ring-wrap sticky(z-index:1)に必ず下になる */
  background: #eff1f4;
  height: var(--stable-vh, 100dvh);
  overflow: hidden;
}
.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.4s ease;
  transition-delay: 0s;
}
#intro.is-ready .intro-video {
  opacity: 0.18;
  transition-delay: 3s;
}
.intro-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 0 4rem;
}

/* 各要素：初期は透明＋下方向にオフセット */
.intro-name,
.intro-vol,
.intro-logo,
.intro-body,
.intro-sig {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* is-ready 後、3秒＋スタガードで登場 */
#intro.is-ready .intro-name  { opacity: 1; transform: none; transition-delay: 3s; }
#intro.is-ready .intro-vol   { opacity: 1; transform: none; transition-delay: 3.2s; }
#intro.is-ready .intro-logo  { opacity: 1; transform: none; transition-delay: 3.4s; }
#intro.is-ready .intro-body  { opacity: 1; transform: none; transition-delay: 3.6s; }
#intro.is-ready .intro-sig   { opacity: 1; transform: none; transition-delay: 3.8s; }
.intro-name {
  font-weight: 200;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  color: #766662;
  margin-bottom: 0;
  font-family: "Montserrat", sans-serif;  
}
.intro-cross {
  
}
.intro-vol {
  font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  margin: 0 auto 1.5em;
  font-family: "Montserrat", sans-serif;  
}
.intro-logo {
  margin-bottom: 2.5em;
}
.intro-logo img {
  width: clamp(150px, 18vw, 230px);
  display: block;
}
.intro-body {
  font-size: clamp(0.72rem, 1vw, 0.88rem);
  line-height: 2.2;
  color: #5a5451;
  text-align: center;
  width: 90%;
  margin: 0 auto 3em;
}
.intro-sig img {
  width: clamp(100px, 12vw, 155px);
  display: block;
}

/* =============================================
   Ring Intro Layer
   ============================================= */

/*
 * Hero photo（写真単体）z-index:2
 * p=0→1 : ズームイン（消えない）
 * p=0.7→1 : フェードアウトして h-track に「なる」
 */
.ring-intro-hero {
  position: absolute;
  width: clamp(160px, 26vw, 340px);
  aspect-ratio: 3 / 4;
  top: 50%;
  left: 50%;
  overflow: hidden;
  z-index: 2;
  transform: translate(-50%, -50%) scale(calc(1 + var(--intro-p, 0) * 3));
  transform-origin: center center;
  opacity: min(1, max(0, calc(1 - (var(--intro-p, 0) - 0.7) * 3.34)));
}
.ring-intro-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * Title + Text overlay z-index:3（背景色で h-track を隠す）
 * p=0→0.5 : フェードアウト
 */
.ring-intro {
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 3rem 4rem;
  z-index: 3;
  pointer-events: none;
  opacity: max(0, calc(1 - var(--intro-p, 0) * 2));
}
.ring-intro-title {
  font-weight: 200;
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  letter-spacing: 0.4em;
  color: #766662;
  margin: 0;
}
.ring-intro-desc {
  font-size: clamp(0.6rem, 0.85vw, 0.72rem);
  line-height: 1.85;
  max-width: 26em;
  text-align: center;
  color: #5a5451;
  margin: 0;
}

/*
 * h-track z-index:1（写真の下）
 * p=0.5→1 : フェードイン
 */
#ring-wrap .h-track {
  z-index: 1;
  opacity: max(0, calc(var(--intro-p, 0) * 2 - 1));
}

/* =============================================
   Horizontal Scroll Sections
   ============================================= */
.h-section-wrap {
  position: relative;
  /* height set by JS: (intro + slides) × 100vh */
}

.h-section-sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  background: #fff;
}

/* 前セクションに重なるよう引き上げ */
.push-up {
  margin-top: -100dvh;
}

/* 競り上がり: z-indexで上に重なる */
#ring-wrap .h-section-sticky     { z-index: 1; }
#necklace-wrap .h-section-sticky { z-index: 2; background: #ededed; }
#ear-wrap .h-section-sticky      { z-index: 3; }

/* wrap 高さ: スクロール区間(N × --stable-vh) + 1画面表示(100dvh)
   sticky=100dvh と合わせて unstick 距離 = N × --stable-vh（ツールバー状態に無関係） */
#ring-wrap     { background: #fff;    height: calc(var(--stable-vh, 100dvh) * 20 + 100dvh); }
#necklace-wrap { background: #ededed; height: calc(var(--stable-vh, 100dvh) * 12 + 100dvh); }
#ear-wrap      { background: #fff;    height: calc(var(--stable-vh, 100dvh) * 19 + 100dvh); }

/* Section inner layout — title top center + hero photo centered */
.sec-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.sec-cat-title {
  font-weight: 200;
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  letter-spacing: 0.45em;
  color: #766662;
  margin: 0 0 clamp(1rem, 2vw, 2rem);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  transform: translateX(.25em);
}

.sec-hero-photo {
  width: clamp(180px, 24vw, 340px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
}

.sec-hero-photo img,
.sec-hero-photo .hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  clip-path: inset(0 1px 1px 0);
}

/* Ring: sec-inner と sec-photo-full を translateY で入れ替え */
#ring-wrap .sec-inner {
  position: absolute;
  inset: 0;
  transform: translateY(calc(var(--ring-p, 0) * -100%));
}
#ring-wrap .sec-photo-full {
  position: absolute;
  inset: 0;
  overflow: hidden;
  --img-p: var(--ring-img-p, 0);
  transform: translateY(calc((1 - var(--ring-p, 0)) * 100%));
  z-index: 1;
}
#ring-wrap .sec-photo-full.spf-2 {
  --img-p: var(--ring-img2-p, 0);
  transform: translateY(calc((1 - var(--ring-p2, 0)) * 100%));
  z-index: 2;
}
#ring-wrap .sec-photo-full.spf-3 {
  --img-p: var(--ring-img3-p, 0);
  transform: translateY(calc((1 - var(--ring-p3, 0)) * 100%));
  z-index: 3;
}

/* Necklace: sec-inner と sec-photo-full を translateY で入れ替え */
#necklace-wrap .sec-inner {
  position: absolute;
  inset: 0;
  transform: translateY(calc(var(--neck-p, 0) * -100%));
}
#necklace-wrap .sec-photo-full {
  position: absolute;
  inset: 0;
  overflow: hidden;
  --img-p: var(--neck-img-p, 0);
  transform: translateY(calc((1 - var(--neck-p, 0)) * 100%));
  z-index: 1;
}
#necklace-wrap .sec-photo-full.spf-2 {
  --img-p: var(--neck-img2-p, 0);
  transform: translateY(calc((1 - var(--neck-p2, 0)) * 100%));
  z-index: 2;
}

/* Ear: sec-inner と sec-photo-full を translateY で入れ替え */
#ear-wrap .sec-inner {
  position: absolute;
  inset: 0;
  transform: translateY(calc(var(--ear-p, 0) * -100%));
}
#ear-wrap .sec-photo-full {
  position: absolute;
  inset: 0;
  overflow: hidden;
  --img-p: var(--ear-img-p, 0);
  transform: translateY(calc((1 - var(--ear-p, 0)) * 100%));
  z-index: 1;
}
#ear-wrap .sec-photo-full.spf-2 {
  --img-p: var(--ear-img2-p, 0);
  transform: translateY(calc((1 - var(--ear-p2, 0)) * 100%));
  z-index: 2;
}
#ear-wrap .sec-photo-full.spf-3 {
  --img-p: var(--ear-img3-p, 0);
  transform: translateY(calc((1 - var(--ear-p3, 0)) * 100%));
  z-index: 3;
}

/* 各スライド：全面に重ねて translateX で右←→中央←→左 */
.ring-slide-img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  background: #fff;
}
.ring-slide-img:nth-child(1) { transform: translateX(calc((0 - var(--img-p, 0)) * 100%)); }
.ring-slide-img:nth-child(2) { transform: translateX(calc((1 - var(--img-p, 0)) * 100%)); }
.ring-slide-img:nth-child(3) { transform: translateX(calc((2 - var(--img-p, 0)) * 100%)); }
.ring-slide-img:nth-child(4) { transform: translateX(calc((3 - var(--img-p, 0)) * 100%)); }
.ring-slide-img:nth-child(5) { transform: translateX(calc((4 - var(--img-p, 0)) * 100%)); }
.ring-slide-img:nth-child(6) { transform: translateX(calc((5 - var(--img-p, 0)) * 100%)); }

.ring-slide-img img {
  height: clamp(400px, 86dvh, 900px);
  width: auto;
  max-width: calc(100vw - 320px);
  display: block;
}

/* =============================================
   Necklace Slides
   ============================================= */
.neck-slide-img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  background: #ededed;
}
.neck-slide-img:nth-child(1) { transform: translateX(calc((0 - var(--img-p, 0)) * 100%)); }
.neck-slide-img:nth-child(2) { transform: translateX(calc((1 - var(--img-p, 0)) * 100%)); }
.neck-slide-img:nth-child(3) { transform: translateX(calc((2 - var(--img-p, 0)) * 100%)); }
.neck-slide-img:nth-child(4) { transform: translateX(calc((3 - var(--img-p, 0)) * 100%)); }
.neck-slide-img:nth-child(5) { transform: translateX(calc((4 - var(--img-p, 0)) * 100%)); }
.neck-slide-img:nth-child(6) { transform: translateX(calc((5 - var(--img-p, 0)) * 100%)); }

.neck-slide-img img {
  height: clamp(400px, 86dvh, 900px);
  width: auto;
  max-width: calc(100vw - 320px);
  display: block;
}

/* Neck slides — フェードイン（パース）*/
.neck-slide-img > img,
.neck-slide-img > .neck-slide-txt {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.neck-slide-img > .neck-slide-grid {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.neck-slide-img:nth-child(1) > img { transform: perspective(1100px) rotateY(13deg) scale(0.96); }
.neck-slide-img:nth-child(2) > img { transform: perspective(1100px) translateZ(-45px) rotateX(-6deg); }
.neck-slide-img:nth-child(3) > img { transform: perspective(1100px) rotateY(-11deg) scale(0.97); }
.neck-slide-img:nth-child(5) > img { transform: perspective(1100px) rotateX(6deg) rotateY(8deg); }
.neck-slide-img:nth-child(6) > img { transform: perspective(1100px) rotateY(-14deg) translateZ(-20px); }
.neck-slide-img.is-active > img,
.neck-slide-img.is-active > .neck-slide-txt { opacity: 1; transform: none; }
.neck-slide-img.is-active > .neck-slide-grid { opacity: 1; }

/* =============================================
   Ear Jewelry Slides
   ============================================= */
.ear-slide-img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  background: #fff;
}
.ear-slide-img:nth-child(1) { transform: translateX(calc((0 - var(--img-p, 0)) * 100%)); }
.ear-slide-img:nth-child(2) { transform: translateX(calc((1 - var(--img-p, 0)) * 100%)); }
.ear-slide-img:nth-child(3) { transform: translateX(calc((2 - var(--img-p, 0)) * 100%)); }
.ear-slide-img:nth-child(4) { transform: translateX(calc((3 - var(--img-p, 0)) * 100%)); }
.ear-slide-img:nth-child(5) { transform: translateX(calc((4 - var(--img-p, 0)) * 100%)); }
.ear-slide-img:nth-child(6) { transform: translateX(calc((5 - var(--img-p, 0)) * 100%)); }

.ear-slide-img img {
  height: clamp(400px, 86dvh, 900px);
  width: auto;
  max-width: calc(100vw - 320px);
  display: block;
}

/* Ear slides — フェードイン（パース）*/
.ear-slide-img > img,
.ear-slide-img > .ear-slide-txt {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ear-slide-img > .ear-slide-grid {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.ear-slide-img:nth-child(1) > img { transform: perspective(1100px) rotateY(13deg) scale(0.96); }
.ear-slide-img:nth-child(2) > img { transform: perspective(1100px) translateZ(-45px) rotateX(-6deg); }
.ear-slide-img:nth-child(3) > img { transform: perspective(1100px) rotateY(-11deg) scale(0.97); }
.ear-slide-img:nth-child(5) > img { transform: perspective(1100px) rotateX(6deg) rotateY(8deg); }
.ear-slide-img:nth-child(6) > img { transform: perspective(1100px) rotateY(-14deg) translateZ(-20px); }
.ear-slide-img.is-active > img,
.ear-slide-img.is-active > .ear-slide-txt { opacity: 1; transform: none; }
.ear-slide-img.is-active > .ear-slide-grid { opacity: 1; }

/* Ring slides — アクティブスライドのコンテンツフェードイン（パース）*/
.ring-slide-img > img,
.ring-slide-img > .ring-slide-txt {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* .ring-slide-grid / .ring-slide-pair は absolute+translate配置のため opacity のみ */
.ring-slide-img > .ring-slide-grid,
.ring-slide-img > .ring-slide-pair {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* スライドごとに異なるパース的な初期姿勢（img のみ） */
.ring-slide-img:nth-child(1) > img { transform: perspective(1100px) rotateY(13deg) scale(0.96); }
.ring-slide-img:nth-child(2) > img { transform: perspective(1100px) translateZ(-45px) rotateX(-6deg); }
.ring-slide-img:nth-child(3) > img { transform: perspective(1100px) rotateY(-11deg) scale(0.97); }
/* nth-child(4) は .ring-slide-grid のみ — opacity only */
.ring-slide-img:nth-child(5) > img { transform: perspective(1100px) rotateX(6deg) rotateY(8deg); }
.ring-slide-img:nth-child(6) > img { transform: perspective(1100px) rotateY(-14deg) translateZ(-20px); }

/* is-active 時 */
.ring-slide-img.is-active > img,
.ring-slide-img.is-active > .ring-slide-txt {
  opacity: 1;
  transform: none;
}
.ring-slide-img.is-active > .ring-slide-grid,
.ring-slide-img.is-active > .ring-slide-pair {
  opacity: 1;
}

/* ring-slide-txt — 背景画像とテキストのスタガードアニメーション */
.ring-slide-txt-bg {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.05);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ring-slide-quote,
.ring-slide-desc,
.ring-slide-price {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s ease, transform 0.7s ease;
}
.ring-slide-img.is-active .ring-slide-txt-bg {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ring-slide-img.is-active .ring-slide-quote {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}
.ring-slide-img.is-active .ring-slide-desc {
  opacity: 1;
  transform: none;
  transition-delay: 0.32s;
}
.ring-slide-img.is-active .ring-slide-price {
  opacity: 1;
  transform: none;
  transition-delay: 0.46s;
}

/* ring-slide-grid — パース付きコーナー方向3D回転＋外から集まる */
.ring-slide-cell {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.7s ease, transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 各セルのコーナー方向から倒れ込みつつ外側から集まる */
.ring-slide-cell:nth-child(1) { transform: perspective(800px) rotateX(12deg) rotateY(12deg) scale(1.18) translate(-14%, -14%); }
.ring-slide-cell:nth-child(2) { transform: perspective(800px) rotateX(12deg) rotateY(-12deg) scale(1.18) translate( 14%, -14%); }
.ring-slide-cell:nth-child(3) { transform: perspective(800px) rotateX(-12deg) rotateY(12deg) scale(1.18) translate(-14%,  14%); }
.ring-slide-cell:nth-child(4) { transform: perspective(800px) rotateX(-12deg) rotateY(-12deg) scale(1.18) translate( 14%,  14%); }
.ring-slide-img.is-active .ring-slide-cell:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.ring-slide-img.is-active .ring-slide-cell:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.2s; }
.ring-slide-img.is-active .ring-slide-cell:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.4s; }
.ring-slide-img.is-active .ring-slide-cell:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.6s; }

/* ring-slide-pair — 左右から中央に向かって登場（横スプリット） */
.ring-slide-pair img {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ring-slide-pair img:nth-child(1) { transform: perspective(900px) rotateY(10deg) rotateX(-5deg) translate(-60px,  30px); }
.ring-slide-pair img:nth-child(2) { transform: perspective(900px) rotateY(-10deg) rotateX( 5deg) translate( 60px, -30px); }
.ring-slide-img.is-active .ring-slide-pair img:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.ring-slide-img.is-active .ring-slide-pair img:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.25s; }

/* 4th slide: 2×2 grid layout */
.ring-slide-grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 1fr;
  height: clamp(400px, 86dvh, 900px);
  gap: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ring-slide-cell {
  overflow: hidden;
}
.ring-slide-grid .ring-slide-cell img {
  height: 100%;
  width: auto;
  display: block;
}

/* 上下2枚並びスライド */
.ring-slide-pair {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ring-slide-pair img {
  height: calc((clamp(400px, 86dvh, 900px) - 3px) / 2);
  width: auto;
  display: block;
}

/* neck/ear grid layout */
.neck-slide-grid,
.ear-slide-grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 1fr;
  height: clamp(400px, 86dvh, 900px);
  gap: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.neck-slide-cell,
.ear-slide-cell {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.7s ease, transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.neck-slide-cell:nth-child(1),
.ear-slide-cell:nth-child(1) { transform: perspective(800px) rotateX(12deg) rotateY(12deg) scale(1.18) translate(-14%, -14%); }
.neck-slide-cell:nth-child(2),
.ear-slide-cell:nth-child(2) { transform: perspective(800px) rotateX(12deg) rotateY(-12deg) scale(1.18) translate( 14%, -14%); }
.neck-slide-cell:nth-child(3),
.ear-slide-cell:nth-child(3) { transform: perspective(800px) rotateX(-12deg) rotateY(12deg) scale(1.18) translate(-14%,  14%); }
.neck-slide-cell:nth-child(4),
.ear-slide-cell:nth-child(4) { transform: perspective(800px) rotateX(-12deg) rotateY(-12deg) scale(1.18) translate( 14%,  14%); }
.neck-slide-img.is-active .neck-slide-cell:nth-child(1),
.ear-slide-img.is-active .ear-slide-cell:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.neck-slide-img.is-active .neck-slide-cell:nth-child(2),
.ear-slide-img.is-active .ear-slide-cell:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.2s; }
.neck-slide-img.is-active .neck-slide-cell:nth-child(3),
.ear-slide-img.is-active .ear-slide-cell:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.4s; }
.neck-slide-img.is-active .neck-slide-cell:nth-child(4),
.ear-slide-img.is-active .ear-slide-cell:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.6s; }
.neck-slide-grid .neck-slide-cell img,
.ear-slide-grid .ear-slide-cell img {
  height: 100%;
  width: auto;
  display: block;
}

/* neck/ear text slide */
.neck-slide-txt,
.ear-slide-txt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 0 2rem;
}
img.neck-slide-txt-bg,
img.ear-slide-txt-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: clamp(300px, 50vw, 600px);
  max-height: 88dvh;
  pointer-events: none;
  user-select: none;
}
.neck-slide-txt-body,
.ear-slide-txt-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 800px;
}
.neck-slide-quote,
.ear-slide-quote {
  font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  letter-spacing: 0.1em;
  color: #766662;
  line-height: 1.5;
  margin: 0;
}
.neck-slide-desc,
.ear-slide-desc {
  font-size: clamp(0.68rem, 0.95vw, 0.82rem);
  line-height: 2.4;
  font-weight: 500;
  color: #766662;
  margin: 0;
}
.neck-slide-price,
.ear-slide-price {
  font-weight: 500;
  font-size: clamp(0.72rem, 0.95vw, 0.88rem);
  letter-spacing: 0.15em;
  color: #766662;
  margin: 0;
}

/* neck/ear txt アニメーション */
.neck-slide-txt-bg,
.ear-slide-txt-bg {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.05);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.neck-slide-quote, .neck-slide-desc, .neck-slide-price,
.ear-slide-quote,  .ear-slide-desc,  .ear-slide-price {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s ease, transform 0.7s ease;
}
.neck-slide-img.is-active .neck-slide-txt-bg,
.ear-slide-img.is-active .ear-slide-txt-bg  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.neck-slide-img.is-active .neck-slide-quote,
.ear-slide-img.is-active .ear-slide-quote   { opacity: 1; transform: none; transition-delay: 0.15s; }
.neck-slide-img.is-active .neck-slide-desc,
.ear-slide-img.is-active .ear-slide-desc    { opacity: 1; transform: none; transition-delay: 0.32s; }
.neck-slide-img.is-active .neck-slide-price,
.ear-slide-img.is-active .ear-slide-price   { opacity: 1; transform: none; transition-delay: 0.46s; }

/* 6th slide: text + bg image */
.ring-slide-txt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 0 2rem;
}
img.ring-slide-txt-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: clamp(300px, 50vw, 600px);
  max-height: 88dvh;
  pointer-events: none;
  user-select: none;
}
.ring-slide-txt-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 800px;
}
.ring-slide-quote {
  font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  letter-spacing: 0.1em;
  color: #766662;
  line-height: 1.5;
  margin: 0;
}
.ring-slide-desc {
  font-size: clamp(0.68rem, 0.95vw, 0.82rem);
  line-height: 2.4;
  font-weight: 500;
  color: #766662;
  margin: 0;
}
.ring-slide-price {
  font-weight: 500;
  font-size: clamp(0.72rem, 0.95vw, 0.88rem);
  letter-spacing: 0.15em;
  color: #766662;
  margin: 0;
}
.ring-slide-price a,
.neck-slide-price a,
.ear-slide-price a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0% 1px;
  transition: background-size 0.4s ease;
}
.ring-slide-price a:hover,
.neck-slide-price a:hover,
.ear-slide-price a:hover {
  background-size: 100% 1px;
}

/* Horizontal track */
.h-track {
  display: flex;
  height: 100%;
  will-change: transform;
  /* transition は JS の LERP で制御するため設定しない */
}

/* Each slide */
.h-slide {
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
}
.h-slide--rev {
  flex-direction: row-reverse;
}

/* Photos area */
.slide-photos {
  flex: 3;
  display: flex;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
}
.slide-photos.sp-3col { flex: 2.2; }
.slide-photos.sp-4col { flex: 3; }

.sph {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
}
.sph.sph--tall { flex: 1; }
.sph.sph--wide { flex: 1.5; }
.sph.sph--sq   { flex: 0.85; }

.sph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 0.8s ease;
}
.h-slide.active .sph img {
  transform: scale(1);
}

/* Text card */
.slide-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3.5rem;
  min-width: 280px;
  max-width: 380px;
  border-left: 1px solid rgba(43,41,39,0.1);
}
.h-slide--rev .slide-text {
  border-left: none;
  border-right: 1px solid rgba(43,41,39,0.1);
}

.slide-quote {
  font-weight: 300;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: #766662;
  margin: 0 0 2rem;
  padding: 0;
  border: none;
  quotes: none;
}
.slide-body {
  font-size: clamp(0.65rem, 0.9vw, 0.78rem);
  line-height: 2;
  color: #6a6664;
  margin-bottom: 2rem;
}
.slide-price a {
  display: inline-block;
  font-weight: 300;
  font-size: clamp(0.65rem, 0.9vw, 0.78rem);
  letter-spacing: 0.15em;
  color: #766662;
  border-bottom: 1px solid #766662;
  padding-bottom: 0.1em;
  transition: opacity 0.3s;
}
.slide-price a:hover { opacity: 0.5; }

/* Slide progress indicator */
.h-progress {
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.h-progress-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(43,41,39,0.2);
  transition: background 0.4s, transform 0.4s;
}
.h-progress-dot.active {
  background: #766662;
  transform: scale(1.4);
}

/* =============================================
   Profile KV Scene
   ============================================= */
#profile-scene {
  position: relative;
  z-index: 4;
  margin-top: -100dvh;
}
.profile-kv-sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  margin-bottom: -100dvh;
  overflow: hidden;
  z-index: 0;
  background: #ededed;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 初期: 幅・高さを制限 → スクロールで全画面へ */
.profile-kv-inner {
  width: var(--kv-w, 46%);
  height: var(--kv-h, 72%);
  overflow: hidden;
  flex-shrink: 0;
}
/* 拡大90%〜でフェードインするオーバーレイ */
.profile-kv-overlay {
  position: absolute;
  inset: 0;
  background: #F8F6F3;
  opacity: var(--kv-overlay-op, 0);
  pointer-events: none;
}
.profile-kv-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transform: scale(var(--kv-scale, 1));
  filter: blur(var(--kv-blur, 0px));
  will-change: transform, filter;
  display: block;
}
.profile-kv-spacer {
  height: calc(var(--stable-vh, 100dvh) * 2.5);
  position: relative;
  z-index: 1;
}

/* =============================================
   Profile Section
   ============================================= */
#profile {
  background: transparent;
  min-height: var(--stable-vh, 100dvh);    /* スナップのため最低1画面 */
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
.profile-in {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 6rem 6rem;
  gap: 4rem;
}
/* 上段：ブランド名 + コレクション説明 */
.profile-top {
  text-align: center;
}
/* 下段：写真 + プロフィール */
.profile-bottom {
  display: flex;
  align-items: center;
  gap: 5rem;
}
.profile-ph {
  flex: 0 0 42%;
  overflow: hidden;
}
.profile-img-wrap {
  overflow: hidden;
}
.profile-img-wrap img {
  width: 100%;
  display: block;
  transform: scale(0.85);
  transform-origin: center center;
  transition: transform 1.2s cubic-bezier(0.2, 0, 0.1, 1);
}
.profile-img-wrap.play img {
  transform: scale(1);
}
.profile-text {
  flex: 1;
  min-width: 0;
  padding-top: 1rem;
}
.profile-brand {
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing: 0.15em;
  color: #766662;
  margin-bottom: 0.6em;
}
.profile-creator {
  font-size: clamp(0.68rem, 1vw, 0.85rem);
  line-height: 2;
  letter-spacing: 0.06em;
}

/* プロフィールラベル */
.profile-bio .bio-label {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: 0.08em;
  color: #766662;
  margin-bottom: 0.8em;
  margin-top: 3.5em;
}
.profile-bio .bio-label:first-child {
  margin-top: 0;
}
.profile-bio p {
  font-size: clamp(0.75rem, 1.1vw, 0.92rem);
  line-height: 2.1;
  color: #5a5451;
  margin-bottom: 1.5em;
}
.bio-en {
  font-size: clamp(0.65rem, 0.9vw, 0.78rem) !important;
}

/* =============================================
   Profile — スクロールフェードイン（.ef）
   ============================================= */

/* profile-top: 内部子要素をスタガードで登場 */
.profile-top.ef .profile-brand,
.profile-top.ef .profile-creator {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s ease, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.profile-top.ef.is-visible .profile-brand  { opacity: 1; transform: none; transition-delay: 0s; }
.profile-top.ef.is-visible .profile-creator { opacity: 1; transform: none; transition-delay: 0.18s; }


/* profile-bottom: 画像＋テキストを同時発火 */
.profile-bottom.ef .profile-img-wrap {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 1s ease, transform 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.profile-bottom.ef.is-visible .profile-img-wrap {
  opacity: 1;
  transform: none;
}

.profile-bottom.ef .profile-text {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.9s ease, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.15s;
}
.profile-bottom.ef.is-visible .profile-text {
  opacity: 1;
  transform: none;
}

/* =============================================
   Bag Section
   ============================================= */
#bag {
  background: #F8F6F3;
  padding: 8rem 0;
  position: relative;
  z-index: 4;
}
.bag-in {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 6rem;
  display: flex;
  align-items: center;
  gap: 5rem;
}
.bag-ph {
  flex: 1;
}
.bag-ph img {
  width: 100%;
  display: block;
}
.bag-text {
  flex: 1;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  line-height: 2;
  color: #5a5451;
  text-align: center;
}

/* =============================================
   Morais brand title (profile section decoration)
   ============================================= */
.morais-title {
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: 0.5em;
  color: rgba(43,41,39,0.06);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* =============================================
   SP (Mobile) Responsive
   ============================================= */
@media screen and (max-width: 810px) {

  /* Header: Mora 左上 / meets Yumi Otsuka 右上 / nav 下部固定 */
  #header {
    padding: 1.5rem 2rem;
    align-items: flex-start;
  }
  .hd-sub {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    text-align: right;
    font-size: clamp(0.6rem, 2.2vw, 0.75rem);
    line-height: 1.6;
  }
  .hd-right {
    display: flex;
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    height: auto;
    align-items: center;
    justify-content: center;
  }
  .hd-nav {
    display: grid;
  grid-template-columns: 1fr auto 1fr; /* 左右(1fr)で挟む */
  align-items: center;
  width: 100%;
  }
  .hd-nav li:first-child { justify-self: start; }
  .hd-nav li:last-child { justify-self: end; }
  .hd-nav-item {
    font-size: clamp(0.62rem, 2.5vw, 0.75rem);
    padding-left: 0;
  }
  .hd-nav-item::before {
    left: 50%;
    top: auto;
    bottom: -0.8em;
    transform: translateX(-50%);
  }
  .back-to-top {
    display: none;
  }

  /* Intro */
  .intro-in {
    padding: 0 2.5rem;
  }
  .intro-name {
    font-size: clamp(1.1rem, 5vw, 1.6rem);
  }
  .intro-vol {
    font-size: clamp(0.8rem, 3vw, 1rem);
    margin-bottom: 1.4em;
  }
  .intro-logo {
    margin-bottom: 1.8em;
  }
  .intro-logo img {
    width: clamp(100px, 24vw, 150px);
  }
  .intro-body {
    font-size: clamp(0.72rem, 2.8vw, 0.88rem);
    line-height: 2;
    margin-bottom: 2em;
    width: 100%;
  }
  .intro-sig img {
    width: clamp(80px, 20vw, 120px);
  }

  /* Hero video — SP: PC より大きく表示 */
  .sec-hero-photo {
    width: clamp(220px, 55vw, 400px);
  }

  /* Ring slides — SP: 元のアスペクト比を維持しつつ画面内に収める */
  .ring-slide-img img {
    height: auto;
    max-height: 75dvh;
    width: auto;
    max-width: 90vw;
  }
  .ring-slide-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    width: 90vw;
    height: auto;
  }
  .ring-slide-grid .ring-slide-cell img {
    width: 100%;
    height: auto;
  }
  .ring-slide-pair img {
    height: auto;
    max-height: calc((75dvh - 3px) / 2);
    max-width: 90vw;
    width: auto;
  }

  /* Neck / Ear slides — SP */
  .neck-slide-img img,
  .ear-slide-img img {
    height: auto;
    max-height: 75dvh;
    width: auto;
    max-width: 90vw;
  }
  .neck-slide-grid,
  .ear-slide-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    width: 90vw;
    height: auto;
  }
  .neck-slide-grid .neck-slide-cell img,
  .ear-slide-grid .ear-slide-cell img {
    width: 100%;
    height: auto;
  }

  /* Profile KV — SP は初期サイズを横広に調整 */
  .profile-kv-inner {
    width: var(--kv-w, 80%);
    height: var(--kv-h, 42%);
  }

  /* Profile */
  .profile-in {
    padding: 4rem 2.5rem;
    gap: 2.5rem;
  }
  .profile-bottom {
    flex-direction: column;
    gap: 2.5rem;
  }
  .profile-ph {
    flex: none;
    width: 100%;
  }

  /* Bag */
  .bag-in {
    flex-direction: column;
    padding: 0 2.5rem;
    gap: 3rem;
  }
}

@media screen and (max-width: 600px) {
  #header { padding: 1.2rem 1.5rem; }
  .hd-brand { font-size: 1.3rem; }

  .intro-in, .profile-in, .bag-in { padding: 0 1.5rem; }
  #profile, #bag { padding: 6rem 0; }

  .slide-photos { height: 60vw; }
  .slide-text { padding: 2.5rem 1.5rem; }
  .h-cat-label { padding: 3rem 1.5rem 0; }
}