/* ヒーローからフッターまで、各セクションの静的構図を担当する。
   共通部品の components.css より前に読み込む。 */
.site-header {
  color: var(--ink);
  inset: 0 0 auto;
  padding-top: clamp(1.5rem, 4vw, 3rem);
  position: absolute;
  z-index: 10;
}

.brand {
  display: inline-block;
  text-decoration: none;
}

.brand-name {
  display: block;
  font-family: var(--serif-latin);
  font-size: 2rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.brand-label {
  display: block;
  font-family: var(--serif-latin);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  margin-top: 0.5rem;
}

.brand-rule {
  align-items: center;
  display: flex;
  margin-top: 0.8rem;
}

.brand-rule::before,
.brand-rule::after {
  background: var(--hairline);
  content: "";
  height: 1px;
  width: 2.75rem;
}

.brand-rule span {
  /* ロゴ飾り罫中央の小さなダイヤ形。 */
  border: 1px solid var(--hairline);
  height: 6px;
  margin-inline: 0.45rem;
  transform: rotate(45deg);
  width: 6px;
}

.hero {
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(15rem, 38vw, 34rem) clamp(4rem, 10vw, 9rem);
  position: relative;
}

.hero::after {
  /* KVと次セクションの境界を全幅で2px重ね、端数丸めの継ぎ目を覆う。 */
  border-bottom: 2px solid var(--linen);
  content: "";
  inset: auto 0 -1px;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}

.hero-media,
.hero-light,
.hero-scrim {
  inset: 0;
  position: absolute;
}

.hero-media {
  /* 12%の上下オーバースキャンでパララックス全振幅後も表示枠を覆う。 */
  inset: -12% -4%;
  z-index: -3;
}

.hero-media img,
.hero-light img {
  /* 全面写真レイヤーを表示枠へ合わせるため、内在画像だけを制御する。 */
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.hero-media img {
  object-position: center 54%;
}

.hero-scrim {
  background: var(--hero-scrim);
  z-index: -2;
}

.hero-light {
  /* 窓光も移動量より大きく敷き、直線端を画面外へ逃がす。 */
  inset: -10% -4%;
  mix-blend-mode: screen;
  opacity: 0.56;
  pointer-events: none;
  z-index: -1;
}

.hero-light img {
  object-position: center;
}

.hero-botanical {
  opacity: 0.62;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.hero-botanical img {
  /* 細密装飾の内在比率を維持して画面幅へ追従させる。 */
  height: auto;
  width: clamp(18rem, 34vw, 32rem);
}

.hero-botanical-a {
  inset: 0 auto auto 0;
  transform-origin: left top;
}

.hero-botanical-b {
  inset: 0 -2rem auto auto;
  opacity: 0.76;
  transform-origin: right top;
}

.hero-botanical-b img {
  transform: scaleX(-1);
}

.hero.is-ambient-active .hero-botanical-a,
.hero.is-ambient-active .hero-botanical-b {
  animation: botanical-breathe 7.2s ease-in-out infinite alternate;
}

.hero.is-ambient-active .hero-botanical-b {
  animation-delay: -3.4s;
}

@keyframes botanical-breathe {
  from {
    opacity: 0.62;
    transform: scale(0.985);
  }

  to {
    opacity: 0.84;
    transform: scale(1.012);
  }
}

.hero-copy {
  border-left: 1px solid var(--hairline);
  padding-left: clamp(1.25rem, 3vw, 2.75rem);
  padding-right: clamp(18rem, 40vw, 35rem);
  position: relative;
  z-index: 2;
}

.hero-kicker {
  color: var(--gold);
  font-family: var(--serif-latin);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  margin-bottom: 1.25rem;
}

.hero-sparkles {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.hero-bokeh-field {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.hero-bokeh {
  /* KV奥の大きな玉ボケとして、写真内の光量へ合わせる固定装飾寸法。 */
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 43% 39%, rgba(var(--gold-rgb), 0.92) 0 4%, rgba(var(--gold-rgb), 0.62) 18%, rgba(var(--gold-rgb), 0.4) 42%, transparent 72%);
  border-radius: 50%;
  filter: blur(9px);
  opacity: 0.24;
  position: absolute;
  transform: translate3d(0, 0, 0) scale(0.92);
}

.hero-bokeh-a {
  height: 320px;
  left: 18%;
  top: 22%;
  width: 320px;
}

.hero-bokeh-b {
  height: 210px;
  left: 59%;
  top: 66%;
  width: 210px;
}

.hero.is-ambient-active .hero-bokeh-a {
  animation: hero-bokeh-drift-a 8s ease-in-out infinite alternate;
}

.hero.is-ambient-active .hero-bokeh-b {
  animation: hero-bokeh-drift-b 7.2s ease-in-out -3.1s infinite alternate;
}

@keyframes hero-bokeh-drift-a {
  from {
    opacity: 0.22;
    transform: translate3d(-3%, 2%, 0) scale(0.9);
  }

  to {
    opacity: 0.46;
    transform: translate3d(7%, -5%, 0) scale(1.08);
  }
}

@keyframes hero-bokeh-drift-b {
  from {
    opacity: 0.16;
    transform: translate3d(4%, -3%, 0) scale(0.88);
  }

  to {
    opacity: 0.34;
    transform: translate3d(-8%, 5%, 0) scale(1.05);
  }
}

.hero-chain-route {
  /* KV画像座標1536×1024と一致させるチェーン経路オーバーレイ。 */
  height: 124%;
  inset: -12% -4%;
  pointer-events: none;
  position: absolute;
  width: 108%;
  z-index: 1;
}

.hero-chain-route path {
  fill: none;
  stroke: transparent;
}

.hero-chain-glint {
  /* チェーンを伝う実写光スプライトの表示寸法。 */
  height: 112px;
  left: 0;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%) scale(0.45);
  width: 112px;
  z-index: 2;
}

.hero-pointer-glow {
  /* pointer:fine専用の柔らかい追従光。位置更新はtransform/opacityだけ。 */
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.72) 0, rgba(var(--gold-rgb), 0.34) 24%, transparent 70%);
  border-radius: 50%;
  height: 76px;
  left: 0;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%) scale(0.5);
  width: 76px;
  z-index: 3;
}

.hero[data-chain-light-running="true"] .hero-pointer-glow {
  opacity: 0 !important;
}

.hero-lead {
  letter-spacing: 0.045em;
  margin-top: 1.75rem;
}

.hero-title-line {
  /* 行をHTMLで確定し、SplitTextの行誤判定による一瞬の折返し変化を防ぐ */
  display: block;
  overflow: hidden;
  /* 文字スパン分割時の端数幅による行内折返しも禁止する */
  white-space: nowrap;
}

.story {
  background: var(--linen-deep);
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(7rem, 14vw, 12rem);
  position: relative;
}

.story::before,
.collection::before {
  background-image:
    repeating-linear-gradient(92deg, rgba(var(--gold-rgb), 0.018) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(2deg, rgba(var(--gold-rgb), 0.11) 0 1px, transparent 1px 7px);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.story::before {
  background-image:
    repeating-linear-gradient(92deg, rgba(var(--gold-rgb), 0.055) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(2deg, rgba(var(--gold-rgb), 0.16) 0 1px, transparent 1px 7px);
  opacity: 0.86;
  z-index: 1;
}

.section-window-light {
  inset: -18% -8%;
  mix-blend-mode: screen;
  opacity: 0.34;
  pointer-events: none;
  position: absolute;
  transform: translate3d(-3%, 0, 0) scale(1.04);
  z-index: -2;
}

.section-window-light img {
  /* セクション全体を覆う事前描画済み窓光の内在画像制御。 */
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* 窓光の横ドリフトは「影が動いて見える」ため廃止(2026-08-04 AOさん指摘)。静的表示のみ。 */

.story-botanical {
  bottom: -24%;
  opacity: 0.42;
  pointer-events: none;
  position: absolute;
  right: -4%;
  transform: rotate(180deg);
  z-index: 1;
}

.story-botanical img {
  /* BRAND STORYの淡い金透かしを画面幅へ追従させる内在画像制御。 */
  height: auto;
  width: clamp(20rem, 38vw, 34rem);
}

.story-copy {
  background: rgba(251, 248, 242, 0.7);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  box-shadow: 0 26px 70px rgba(68, 47, 28, 0.12), inset 0 0 0 7px rgba(255, 255, 255, 0.22);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 6vw, 5rem);
  position: relative;
}

.story-inner {
  position: relative;
  z-index: 2;
}

.story-window-light {
  mix-blend-mode: screen;
  opacity: 0.72;
  z-index: 0;
}

.story-copy h2,
.maker-copy h2 {
  margin-bottom: 1.75rem;
}

.thread-divider {
  background: var(--paper);
  overflow: hidden;
  padding-block: 1rem;
}

.thread-divider svg {
  /* SVG装飾を親幅に追従させるための内在サイズ制御。 */
  display: block;
  height: auto;
  width: 100%;
}

.thread-divider path {
  fill: none;
  stroke: var(--focus-ring);
  stroke-linecap: round;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.atelier {
  background: var(--paper);
}

.atelier-heading {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.atelier-stage {
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem);
  position: relative;
}

.atelier-background,
.atelier-scrim {
  inset: 0;
  position: absolute;
}

.atelier-background {
  z-index: -2;
}

.atelier-background img,
.atelier-visual img {
  /* 舞台写真と工程写真を各表示枠へ合わせる内在画像の制御。 */
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.atelier-background img {
  object-position: center;
}

.atelier-scrim {
  background: rgba(41, 32, 24, 0.56);
  z-index: -1;
}

.atelier-thread {
  /* 静的な糸と光玉を舞台全体へ重ねる装飾SVGの寸法。 */
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.atelier-thread path {
  fill: none;
  stroke: rgba(var(--gold-rgb), 0.58);
  stroke-linecap: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.atelier-thread circle {
  fill: rgba(var(--gold-rgb), 0.36);
  stroke: var(--focus-ring);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}

.atelier-thread .atelier-thread-glow {
  fill: rgba(var(--gold-rgb), 0.2);
  opacity: 0.72;
  stroke: none;
}

.atelier-steps {
  position: relative;
  z-index: 3;
}

.atelier-step {
  align-items: center;
  display: grid;
  grid-template-columns: 0.9fr 1.15fr;
  padding: clamp(1.25rem, 4vw, 3rem);
}

.atelier-step + .atelier-step {
  margin-top: 2rem;
}

.atelier-copy {
  background: rgba(251, 248, 242, 0.96);
  border: 1px dashed var(--hairline);
  margin-right: -2.5rem;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
  position: relative;
  z-index: 2;
}

.atelier-number {
  color: var(--gold);
  font-family: var(--serif-latin);
  font-size: clamp(4.5rem, 9vw, 8rem);
  inset: -0.2em 0.08em auto auto;
  letter-spacing: -0.04em;
  line-height: 1;
  opacity: 0.11;
  position: absolute;
  white-space: nowrap;
}

.atelier-copy > p:last-child {
  font-family: var(--serif-jp);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: 0.06em;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

.atelier-visual {
  position: relative;
  z-index: 1;
}

.atelier-visual img {
  aspect-ratio: 3 / 2;
}

.atelier[data-knot-glint-mode="static-mobile-or-reduced"] .atelier-step:nth-child(3) .atelier-visual::after {
  /* 動く糸を置かない端末では、磨き工程の一点光を最高静的版として残す。 */
  background: url("luxury-sparkle-alpha-128.webp") center / contain no-repeat;
  content: "";
  height: 48px;
  left: 45%;
  mix-blend-mode: screen;
  opacity: 0.68;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg) scale(0.82);
  width: 48px;
  z-index: 2;
}

.atelier.is-animated .atelier-stage {
  /* PCのpin中に一画面の舞台を維持するために必要な全画面高。 */
  min-height: 100svh;
  padding-block: 0;
}

.atelier.is-animated .atelier-steps {
  inset: 0;
  position: absolute;
}

.atelier.is-animated .atelier-step {
  background: transparent;
  inset: 0;
  margin: 0;
  position: absolute;
}

.atelier.is-animated .atelier-copy {
  background: rgba(251, 248, 242, 0.96);
}

.collection {
  background: var(--paper);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.collection-window-light {
  opacity: 0.2;
}

.collection-heading {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
}

.lookbook {
  background: var(--paper);
  overflow: hidden;
  position: relative;
}

.lookbook-backdrop {
  inset: 0;
  opacity: 0.18;
  position: absolute;
}

.lookbook-backdrop img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.lookbook-overlay-glow {
  background: radial-gradient(circle at 42% 36%, rgba(var(--gold-rgb), 0.28), rgba(var(--gold-rgb), 0) 58%), radial-gradient(circle at 64% 70%, rgba(var(--gold-rgb), 0.12), rgba(var(--gold-rgb), 0) 58%);
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.lookbook-heading {
  margin-bottom: 1.85rem;
}

.lookbook-subtitle {
  color: var(--ink-soft);
  font-family: var(--serif-jp);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  letter-spacing: 0.08em;
  margin-top: 0.9rem;
}

.lookbook-body {
  margin-top: clamp(0.8rem, 2vw, 1.4rem);
  position: relative;
}

.lookbook-stage {
  min-height: clamp(34rem, 78vh, 700px);
  /* ピン中に写真が画面上端へ寄りすぎないための呼吸余白(2026-08-04 AOさん指摘) */
  padding-top: clamp(2.5rem, 6vh, 4.5rem);
  position: relative;
}

.lookbook-track {
  background: linear-gradient(120deg, rgba(var(--gold-rgb), 0.1), rgba(var(--gold-rgb), 0.015));
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  display: block;
  min-height: clamp(34rem, 76vh, 700px);
  overflow: hidden;
  padding: clamp(1.2rem, 3vw, 2.5rem);
  position: relative;
}

.lookbook-slide {
  align-items: center;
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  inset: 0;
  margin: 0 auto;
  max-width: min(980px, 100%);
  min-height: 100%;
  pointer-events: none;
  opacity: 0;
  position: absolute;
}

.lookbook-slide.is-active {
  pointer-events: auto;
  opacity: 1;
}

.lookbook-slide-photo {
  display: block;
  flex: 0 1 56%;
  margin: 0;
  max-width: min(560px, 56vw);
  min-width: min(320px, 52vw);
}

.lookbook-slide-photo picture,
.lookbook-slide-photo img {
  aspect-ratio: 1;
}

.lookbook-slide-photo img {
  border-radius: clamp(16px, 3vw, 22px);
  box-shadow: 0 38px 90px rgba(68, 47, 28, 0.2);
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.lookbook-slide-copy {
  align-self: center;
  display: grid;
  flex: 1;
  gap: 0.8rem;
  margin-left: clamp(0.6rem, 1.2vw, 1rem);
}

.lookbook-title {
  font-family: var(--serif-jp);
  font-size: clamp(2rem, 3.3vw, 2.4rem);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: 0.03em;
  margin: 0;
}

.lookbook-title span {
  display: inline-block;
  transform: scaleX(0.97);
  transform-origin: left center;
  transition: transform 1.05s var(--ease-thread);
}

.lookbook-slide.is-active .lookbook-title span {
  transform: scaleX(1);
}

.lookbook-copy {
  color: var(--ink-soft);
  font-family: var(--serif-jp);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.95;
}

.lookbook-link {
  background: transparent;
  border: 0;
  color: var(--gold);
  cursor: pointer;
  display: inline-block;
  font-family: var(--serif-latin);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  margin-top: 0.2rem;
  padding: 0.7rem 0 0.4rem;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(var(--gold-rgb), 0.4);
  text-underline-offset: 0.44em;
  transition: color 0.28s var(--ease-thread), text-decoration-color 0.28s var(--ease-thread);
}

.lookbook-link:hover,
.lookbook-link:focus-visible {
  color: var(--gold-light);
}

.lookbook-progress {
  align-items: center;
  bottom: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  left: clamp(1rem, 2vw, 1.8rem);
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.lookbook-progress-line {
  border-left: 1px solid rgba(var(--gold-rgb), 0.6);
  height: clamp(8.25rem, 13vh, 12.2rem);
  width: 1px;
}

.lookbook-progress-dot {
  background: var(--gold);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.42), 0 0 14px rgba(var(--gold-rgb), 0.22);
  height: 14px;
  margin-top: -0.7rem;
  position: absolute;
  width: 14px;
  transform: translate(0, 0);
}

.lookbook-progress-label {
  color: var(--gold);
  font-family: var(--serif-latin);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  margin: 0;
  opacity: 0.84;
}

.lookbook-sweep {
  background: linear-gradient(95deg, transparent 8%, rgba(var(--gold-rgb), 0.92) 42%, transparent 78%);
  inset: 4% 0;
  left: -35%;
  pointer-events: none;
  position: absolute;
  transform: rotate(-2deg);
  width: 30%;
  opacity: 0;
  z-index: 3;
}

.lookbook-mobile {
  display: none;
}

html:not(.js) .lookbook-stage,
html:not(.js) .lookbook-track,
html:not(.js) .lookbook-slide {
  min-height: 0;
}

html:not(.js) .lookbook-track {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  overflow: visible;
}

html:not(.js) .lookbook-slide {
  inset: auto;
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

html:not(.js) .lookbook-progress {
  display: none;
}

.lookbook-mobile-photo {
  display: block;
}

.lookbook-mobile-photo img {
  aspect-ratio: 1;
  border-radius: clamp(14px, 2vw, 18px);
  display: block;
  width: 100%;
}

.fortune {
  background: var(--linen);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.fortune-background,
.fortune-scrim {
  inset: 0;
  position: absolute;
}

.fortune-background {
  z-index: -2;
}

.fortune-background img {
  /* セクション背景写真を表示領域へ合わせる内在画像制御。 */
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.fortune-scrim {
  background: var(--paper);
  opacity: 0.6;
  z-index: -1;
}

.fortune-inner {
  border-block: 1px solid var(--hairline);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  position: relative;
}

.fortune-lead {
  color: var(--ink-soft);
  margin-top: 1rem;
}

.fortune-button {
  background: var(--gold);
  border: 1px solid var(--hairline);
  color: var(--paper);
  cursor: pointer;
  font-family: var(--serif-jp);
  letter-spacing: 0.08em;
  margin-top: 2rem;
  padding: 0.9rem 1.5rem;
}

.fortune-reset {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  visibility: hidden;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin-top: 1.25rem;
  padding: 0.25rem 0;
  text-decoration: underline;
  text-decoration-color: var(--gold-light);
  text-underline-offset: 0.3em;
}

.fortune-reset.is-visible {
  visibility: visible;
}

.fortune-result {
  font-family: var(--serif-jp);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  margin-top: 1.75rem;
  position: relative;
}

.fortune-result span {
  display: block;
}

.fortune-color {
  color: var(--gold);
  font-family: var(--serif-latin);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.5rem;
}

.fortune-result-reserve {
  visibility: hidden;
}

.fortune-result-output {
  inset: 0;
  position: absolute;
}

html.js .fortune-result:not(.has-result) .fortune-result-output {
  visibility: hidden;
}

.fortune-particle {
  /* 占い結果のボタン位置から舞うスプライト型の一時DOM粒子。 */
  background: url("luxury-sparkle-alpha-128.webp") center / contain no-repeat;
  height: var(--fortune-particle-size);
  left: var(--fortune-origin-x);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: var(--fortune-origin-y);
  width: var(--fortune-particle-size);
  z-index: 4;
}

.materials {
  background: var(--linen-deep);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.materials::before {
  background-image:
    repeating-linear-gradient(96deg, rgba(var(--gold-rgb), 0.045) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(5deg, rgba(var(--gold-rgb), 0.12) 0 1px, transparent 1px 8px);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.materials > .inner {
  position: relative;
  z-index: 3;
}

.materials-background,
.materials-scrim {
  inset: 0;
  position: absolute;
}

.materials-background {
  mix-blend-mode: screen;
  opacity: 0.74;
  z-index: 0;
}

/* MATERIALの背景光も横ドリフト廃止(同上)。静的表示のみ。 */

.materials-background img {
  /* 窓光写真をセクション背景へ合わせる内在画像制御。 */
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.materials-scrim {
  background: var(--linen-deep);
  opacity: 0.44;
  z-index: 2;
}

.material-list {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: repeat(3, 1fr);
}

.material-card {
  background: rgba(251, 248, 242, 0.82);
  border: 1px solid rgba(var(--gold-rgb), 0.32);
  box-shadow: 0 22px 56px rgba(68, 47, 28, 0.13), inset 0 0 0 6px rgba(255, 255, 255, 0.2);
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2.2vw, 1.75rem) clamp(2rem, 3.5vw, 3rem);
  position: relative;
}

.material-card::before {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  content: "";
  height: 2px;
  inset: 0 0 auto;
  transform: scaleX(0.16);
  transform-origin: left center;
  transition: transform 1.08s var(--ease-thread);
}

.material-card.is-material-visible::before {
  transform: scaleX(1);
}

.material-card::after {
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.34);
  border-right: 1px solid rgba(var(--gold-rgb), 0.34);
  bottom: 0.75rem;
  content: "";
  height: 2rem;
  pointer-events: none;
  position: absolute;
  right: 0.75rem;
  width: 2rem;
}

.material-photo {
  display: block;
  margin-inline: auto;
  margin-bottom: 1.75rem;
}

.material-photo img {
  aspect-ratio: 1;
  object-fit: cover;
}

.material-number {
  border-bottom: 1px solid var(--hairline);
  color: var(--gold);
  display: inline-block;
  font-family: var(--serif-latin);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  margin-bottom: 1.75rem;
  padding: 0 2.5rem 0.5rem 0;
}

.material-card h3 {
  font-size: 1.0625rem;
  margin-bottom: 1rem;
}

.maker {
  background: var(--paper);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.maker::before {
  background: rgba(var(--gold-rgb), 0.12);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.maker-botanical {
  inset: auto 0 -9rem auto;
  opacity: 0.34;
  pointer-events: none;
  position: absolute;
}

.maker-botanical img {
  /* MAKERの背景装飾として使う画像の内在比率制御。 */
  height: auto;
  transform: rotate(180deg);
  width: clamp(18rem, 36vw, 32rem);
}

.maker-layout {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 8vw, 8rem);
  grid-template-columns: 1.05fr 0.95fr;
}

.maker-image > picture:not(.maker-lamp-optical) img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.maker-image {
  isolation: isolate;
}

.maker-image > picture:not(.maker-lamp-optical) {
  position: relative;
  z-index: 1;
}

.maker-light-environment,
.maker-lamp-bloom,
.maker-lamp-optical,
.maker-lamp-halo,
.maker-lamp-aperture {
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.maker-light-environment {
  background: rgba(var(--gold-rgb), 0.18);
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0;
}

.maker-lamp-bloom {
  /* JSが画像座標をobject-fit描画領域へ変換した結果を反映する装飾寸法。 */
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.36) 0, rgba(var(--gold-rgb), 0.2) 26%, rgba(var(--gold-rgb), 0.1) 52%, transparent 78%);
  border-radius: 50%;
  filter: blur(var(--lamp-bloom-blur, 1rem));
  inline-size: var(--lamp-bloom-size, 24%);
  inset-block-start: var(--lamp-y, 28.2%);
  inset-inline-start: var(--lamp-x, 30.25%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
}

.maker-lamp-optical {
  /* 生成した光学スプライトを実画像座標へ置くための固定装飾寸法。 */
  aspect-ratio: 1;
  inline-size: var(--lamp-optical-size, 38%);
  inset-block-start: var(--lamp-y, 28.2%);
  inset-inline-start: var(--lamp-x, 30.25%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.62);
  z-index: 3;
}

.maker-image > .maker-lamp-optical {
  position: absolute;
  z-index: 3;
}

.maker-lamp-optical img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.maker-lamp-halo {
  /* 電球周囲のレンズ滲みを留める局所装飾寸法。 */
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.76) 0 5%, rgba(var(--gold-rgb), 0.4) 19%, transparent 63%);
  border-radius: 50%;
  filter: blur(2px);
  inline-size: var(--lamp-halo-size, 12%);
  inset-block-start: var(--lamp-y, 28.2%);
  inset-inline-start: var(--lamp-x, 30.25%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.64);
  z-index: 4;
}

.maker-lamp-aperture {
  /* 消灯写真の電球開口内だけにコア光を収める画像座標連動の装飾寸法。 */
  aspect-ratio: 1;
  border-radius: 50%;
  inline-size: var(--lamp-aperture-size, 4%);
  inset-block-start: var(--lamp-y, 28.2%);
  inset-inline-start: var(--lamp-x, 30.25%);
  overflow: hidden;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.maker-lamp-core {
  background: rgba(var(--gold-rgb), 0.52) url("luxury-sparkle-alpha-128.webp") center / 180% no-repeat;
  border-radius: 50%;
  /* 電球内の中心光だけを残し、大きなぼかしと分離する。 */
  inset: 28%;
  opacity: 0;
  position: absolute;
  transform: scale(0.8);
}

.maker-image.is-lit .maker-light-environment {
  opacity: 0.58;
}

.maker-image.is-lit .maker-lamp-bloom {
  opacity: 0.5;
  transform: translate(-50%, -50%) scale(1);
}

.maker-image.is-lit .maker-lamp-optical {
  opacity: 0.84;
  transform: translate(-50%, -50%) scale(1);
}

.maker-image.is-lit .maker-lamp-halo {
  opacity: 0.88;
  transform: translate(-50%, -50%) scale(1);
}

.maker-image.is-lit .maker-lamp-core {
  opacity: 0.94;
  transform: scale(1);
}

.maker-image.is-light-visible .maker-lamp-optical {
  animation: maker-optical-breathe 5.8s ease-in-out infinite alternate;
}

.maker-image.is-light-visible .maker-lamp-bloom {
  animation: maker-bloom-breathe 6.4s ease-in-out -2.7s infinite alternate;
}

@keyframes maker-optical-breathe {
  from {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.98);
  }

  to {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.03);
  }
}

@keyframes maker-bloom-breathe {
  from {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(0.97);
  }

  to {
    opacity: 0.56;
    transform: translate(-50%, -50%) scale(1.035);
  }
}

.shop {
  background: var(--linen);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.shop-background,
.shop-scrim {
  inset: 0;
  position: absolute;
}

.shop-background {
  z-index: -2;
}

.shop-background img {
  /* SHOPの世界観背景を表示領域へ合わせる内在画像制御。 */
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.shop-scrim {
  background: var(--paper);
  opacity: 0.78;
  z-index: -1;
}

.shop-closing-copy {
  font-family: var(--serif-jp);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  letter-spacing: 0.08em;
  margin-top: 1.25rem;
}

.gift {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
  text-align: center;
}

.gift-button {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0.75rem;
}

.gift-photo {
  /* 操作対象となる実写小袋の視認性とタップ面積を保つ装飾寸法。 */
  display: block;
  margin-inline: auto;
  position: relative;
  width: clamp(14rem, 27vw, 21rem);
}

.gift-photo picture {
  display: block;
  overflow: hidden;
}

.gift-photo img {
  aspect-ratio: 1;
  object-fit: cover;
}

.gift-photo-light {
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.08), transparent 68%);
  inset: 8%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(1);
  transition: transform var(--duration-reveal) var(--ease-thread), opacity 0.78s ease;
}

.gift-gold-glow {
  background: radial-gradient(circle at 50% 53%, rgba(var(--gold-rgb), 0.74), transparent 58%);
  border-radius: 50%;
  inset: -4%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(0.84);
  transition: opacity 0.88s var(--ease-thread), transform 1.1s var(--ease-thread);
  z-index: 2;
}

.gift-sparkle-stage {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}

.gift-sparkle {
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.85), rgba(var(--gold-rgb), 0) 72%);
  border-radius: 50%;
  height: var(--gift-sparkle-size, 18px);
  left: 50%;
  opacity: 0;
  --gift-sparkle-size: 18px;
  --gift-sparkle-offset: 0px;
  position: absolute;
  top: 52%;
  transform: translate3d(calc(-50% + var(--gift-sparkle-offset)), -4px, 0) scale(0.16);
  transform-origin: center;
  width: var(--gift-sparkle-size);
  mix-blend-mode: screen;
}

.gift-sparkle--one {
  --gift-sparkle-size: 20px;
  --gift-sparkle-offset: -18px;
}

.gift-sparkle--two {
  --gift-sparkle-size: 15px;
  --gift-sparkle-offset: -4px;
}

.gift-sparkle--three {
  --gift-sparkle-size: 18px;
  --gift-sparkle-offset: 16px;
}

.gift-sparkle--four {
  --gift-sparkle-size: 16px;
  --gift-sparkle-offset: 32px;
}

.gift-photo {
  transform-origin: center;
  transition: transform var(--duration-reveal) var(--ease-thread), opacity 0.78s ease;
}

.gift.is-open .gift-photo {
  transform: translateY(-4px) scale(1.015);
}

.gift.is-open .gift-gold-glow {
  opacity: 0.75;
  transform: scale(1);
}

.gift.is-open .gift-photo-light {
  opacity: 0.76;
  transform: scale(1);
}

.gift-instruction {
  color: var(--ink-soft);
  display: block;
  font-family: var(--serif-jp);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  margin-top: 0.75rem;
}

.gift-note {
  font-family: var(--serif-jp);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  margin-top: 1rem;
  transition: opacity var(--duration-reveal) var(--ease-thread), transform var(--duration-reveal) var(--ease-thread);
}

html.js .gift-note {
  opacity: 0;
  transform: translateY(12px);
}

html.js .gift.is-open .gift-note {
  opacity: 1;
  transform: translateY(0);
}

.shop-list {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shop-card {
  min-width: 0;
}

.shop-card > span {
  min-width: 0;
}

.shop-card strong,
.shop-card small {
  overflow-wrap: anywhere;
}

.shop-collage {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto clamp(3rem, 7vw, 6rem);
  padding-block: 1.5rem;
}

.shop-collage-photo {
  /* 着用写真コラージュの額装寸法。 */
  flex: 0 0 clamp(8.5rem, 19vw, 15rem);
  position: relative;
}

.shop-collage-photo + .shop-collage-photo {
  margin-left: clamp(-2.25rem, -3.5vw, -1rem);
}

.shop-collage-photo img {
  aspect-ratio: 1;
  object-fit: cover;
}

.shop-collage-a {
  transform: rotate(-6deg) translateY(0.75rem);
}

.shop-collage-b {
  transform: rotate(2.5deg) translateY(-0.5rem);
  z-index: 2;
}

.shop-collage-c {
  transform: rotate(7deg) translateY(0.85rem);
}

.sample-notice {
  color: var(--ink-soft);
  font-size: 0.75rem;
  margin-top: 1rem;
}

.footer-light-field {
  /* フッター前で4粒を立ち上げるための装飾領域。 */
  height: 7rem;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
  pointer-events: none;
  position: relative;
}

.footer-light-particle {
  /* R33最小版の光粒として必要な固定装飾寸法。 */
  background: url("luxury-sparkle-alpha-128.webp") center / contain no-repeat;
  bottom: -1.5rem;
  height: 24px;
  left: 18%;
  mix-blend-mode: screen;
  opacity: 0.22;
  filter: drop-shadow(0 0 4px rgba(var(--gold-rgb), 0.22));
  position: absolute;
  transform: translate3d(0, -2rem, 0) scale(0.72);
  width: 24px;
  --footer-light-delay: 0s;
  --footer-light-duration: 7.1s;
}

.footer-light-particle:nth-child(2) {
  height: 18px;
  left: 39%;
  width: 18px;
  --footer-light-delay: -2.8s;
  --footer-light-duration: 7.4s;
}

.footer-light-particle:nth-child(3) {
  height: 28px;
  left: 64%;
  width: 28px;
  --footer-light-delay: -5.2s;
  --footer-light-duration: 6.7s;
}

.footer-light-particle:nth-child(4) {
  height: 16px;
  left: 83%;
  width: 16px;
  --footer-light-delay: -1.3s;
  --footer-light-duration: 8s;
}

.footer-light-field.is-light-active .footer-light-particle {
  animation-delay: var(--footer-light-delay);
  animation-name: footer-light-rise;
  animation-duration: var(--footer-light-duration);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes footer-light-rise {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(-8px, 1.25rem, 0) scale(0.58);
  }

  30% {
    opacity: 0.66;
  }

  76% {
    opacity: 0.24;
  }

  88% {
    opacity: 0;
    transform: translate3d(12px, -6.25rem, 0) scale(1.04);
  }
}

.shop-footer-rule {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 0;
}

.shop-footer-rule::before,
.shop-footer-rule::after {
  background: var(--hairline);
  content: "";
  height: 1px;
  width: clamp(5rem, 18vw, 13rem);
}

.shop-footer-rule span {
  /* フッター前飾り罫中央のダイヤ形。 */
  border: 1px solid var(--hairline);
  height: 8px;
  margin-inline: 0.75rem;
  transform: rotate(45deg);
  width: 8px;
}

.site-footer {
  background: var(--ink);
  color: var(--linen);
  padding-block: 2.5rem;
}

.footer-inner {
  align-items: flex-start;
  display: flex;
  font-size: 0.75rem;
  gap: 2rem;
  justify-content: space-between;
}