/* 写真フレーム、カード、ボタン、光斑など見た目の部品を担当する。 */
/* transformで動かす部品の初期構造を置き、動き自体はmotion.cssとJSへ分ける。 */

.brand {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  letter-spacing: 0.1em;
}

.site-nav a {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  padding-block: 0.5rem;
  position: relative;
}

.site-nav a::after {
  /* 内容を持たないナビ下線を1px罫線として固定する。 */
  background: currentColor;
  bottom: 0;
  content: "";
  height: 1px;
  inset-inline: 0;
  opacity: 0.55;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease-light);
}

.theme-backdrops {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

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

.theme-paper {
  background-repeat: repeat;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.16;
  position: absolute;
  z-index: 4;
}

.theme-backdrop--morning {
  background: var(--theme-morning);
  opacity: 1;
}

.theme-backdrop--daylight {
  background: var(--theme-daylight);
}

.theme-backdrop--golden {
  background: var(--theme-golden);
}

.theme-backdrop--night {
  background: var(--theme-night);
}

html[data-day-theme="daylight"] .theme-backdrop--daylight,
html[data-day-theme="golden"] .theme-backdrop--golden,
html[data-day-theme="night"] .theme-backdrop--night {
  opacity: 1;
}

html[data-day-theme="daylight"] .theme-backdrop--morning,
html[data-day-theme="golden"] .theme-backdrop--morning,
html[data-day-theme="night"] .theme-backdrop--morning {
  opacity: 0;
}

.camera-flash {
  background: #fff;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  z-index: 999;
}

.intro-underlay,
.intro-view,
.intro-afterglow,
.intro-finder {
  inset: 0;
  position: absolute;
}

.intro-underlay {
  background: #f8f5ee;
  z-index: 0;
}

.intro-view {
  overflow: hidden;
  transform-origin: left top;
  z-index: 1;
}

.intro-afterglow {
  background: #fffaf1;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.intro-afterglow img {
  /* 開幕光スプライトを全面の描画枠へ収める内在サイズ制御。 */
  height: 100%;
  mix-blend-mode: screen;
  object-fit: cover;
  width: 100%;
}

.intro-view img {
  /* ファインダー内の写真を全画面配置枠へ収める内在サイズ制御。 */
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.intro-view-soft {
  opacity: 0;
  transform: scale(1.05);
}

.intro-view-sharp {
  opacity: 0;
}

.intro-finder {
  color: rgba(255, 252, 241, 0.86);
  opacity: 0;
  z-index: 3;
}

.intro-corner {
  /* ファインダー四隅の装飾寸法。本文レイアウトには影響しない。 */
  block-size: clamp(3.25rem, 10vw, 7.5rem);
  inline-size: clamp(3.25rem, 10vw, 7.5rem);
  position: absolute;
}

.intro-corner--tl {
  border-left: 1px solid currentColor;
  border-top: 1px solid currentColor;
  left: 5vw;
  top: 6vh;
}

.intro-corner--tr {
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  right: 5vw;
  top: 6vh;
}

.intro-corner--bl {
  border-bottom: 1px solid currentColor;
  border-left: 1px solid currentColor;
  bottom: 6vh;
  left: 5vw;
}

.intro-corner--br {
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  bottom: 6vh;
  right: 5vw;
}

.intro-focus-ring {
  /* inset%指定は画面比で楕円になるため、短辺基準の正方形で真円にする
     (装飾の本質的固定寸法・2026-08-04 AOさん指摘)。 */
  aspect-ratio: 1;
  block-size: min(42vmin, 30rem);
  border: 1px solid currentColor;
  border-radius: 50%;
  inset: 0;
  margin: auto;
  position: absolute;
}

.intro-focus-ring::before,
.intro-focus-ring::after {
  border: 1px solid rgba(255, 252, 241, 0.46);
  border-radius: 50%;
  content: "";
  inset: 14%;
  position: absolute;
}

.intro-focus-ring::after {
  inset: 38%;
}

.intro-focus-ring i {
  background: currentColor;
  border-radius: 50%;
  inset: 50%;
  padding: 0.16rem;
  position: absolute;
  transform: translate(-50%, -50%);
}

.intro-meter {
  /* ファインダー左右の目盛り線を視認できる長さに保つ装飾寸法。 */
  border-top: 1px solid currentColor;
  inline-size: clamp(2.75rem, 8vw, 6.5rem);
  position: absolute;
  top: 50%;
}

.intro-meter--left {
  left: 8vw;
}

.intro-meter--right {
  right: 8vw;
}

.hero-scrim {
  background: rgba(250, 246, 239, 0.38);
  z-index: -2;
}

.hero-light-parallax {
  inset: -15% -6% -15% 30%;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.hero-light {
  height: 100%;
  mix-blend-mode: screen;
  object-fit: cover;
  opacity: 0.62;
  width: 100%;
}

.hero-bokeh {
  inset: -12% -4% -12% 38%;
  mix-blend-mode: screen;
  opacity: 0.48;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.hero-bokeh img {
  /* R34スプライトをヒーローの配置枠へ収める内在サイズ制御。 */
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.hero-content {
  /* %は親(全幅ヒーロー)基準で解決され、超ワイドで内側上限1120pxを超えて
     コピーが潰れるため、1440px時点の見た目(42vw)を上限に固定する。 */
  padding-right: min(42vw, 605px);
}

.hero .eyebrow {
  margin-bottom: 1.25rem;
}

.hero h1 {
  margin-bottom: 1.5rem;
}

.hero-lead {
  color: #4c382a;
  line-height: 2.1;
}

.concept .eyebrow {
  margin-bottom: 1rem;
}

.concept h2 {
  margin-bottom: 1.75rem;
}

.concept-copy > p:last-child {
  line-height: 2.2;
  text-wrap: pretty;
}

.concept-still {
  position: relative;
  z-index: 2;
}

.concept-still-frame {
  background-color: #f7f1e7;
  background-repeat: repeat;
  border: 1px solid #d8bc72;
  box-shadow:
    inset 0 0 0 1px #e6cb7c,
    inset 0 0 0 2px #3a2b21,
    inset 0 0 0 3px #aa7a2c,
    0 12px 26px rgba(55, 34, 18, 0.16),
    0 28px 52px rgba(55, 34, 18, 0.11);
  padding: clamp(0.9rem, 1.7vw, 1.4rem) clamp(0.9rem, 1.7vw, 1.4rem) clamp(2.4rem, 3.2vw, 3rem);
  transform: rotate(0.35deg);
}

.concept-still-media {
  aspect-ratio: 3 / 2;
  border: 1px solid #a9792c;
  box-shadow:
    -1px -1px 0 rgba(255, 244, 191, 0.82),
    1px 1px 0 rgba(73, 48, 22, 0.62);
  display: block;
  overflow: hidden;
}

.concept-still-media img {
  /* 額装写真を3:2の内枠へ収める内在サイズ制御。 */
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.concept-still figcaption {
  color: rgba(70, 53, 39, 0.55);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  margin-top: 0.9rem;
  text-align: center;
}

.concept,
.profile,
.menu,
.flow {
  background-color: var(--paper);
  background-repeat: repeat;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.profile,
.menu,
.flow {
  padding-block: clamp(5rem, 7vw, 7.5rem);
}

.menu {
  background-color: #f8f1e6;
}

.flow {
  background-color: #fffdf9;
}

.concept::before,
.concept::after,
.profile::before,
.menu::before,
.flow::before {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: min(48rem, 74vw) auto;
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.1;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.concept::before,
.concept::after,
.profile::before,
.menu::before,
.flow::before {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at center, #000 45%, transparent 100%);
}

.concept::after {
  background-position: right bottom;
  opacity: 0.14;
}

.concept::before {
  opacity: 0.16;
}

.profile::before {
  background-position: right bottom, left top;
  opacity: 0.18;
}

.menu::before {
  background-position: right top, left bottom;
  opacity: 0.19;
}

.flow::before {
  background-position: left bottom, right top;
  opacity: 0.18;
  transform: scaleY(-1);
}

.profile::after,
.menu::after,
.flow::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: min(64rem, 88vw) auto;
  content: "";
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.13;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.profile::after {
  background-position: 70% center;
}

.menu::after {
  background-position: 35% center;
  opacity: 0.11;
}

.flow::after {
  background-position: 68% center;
  opacity: 0.1;
  transform: rotate(180deg);
}

.section-heading p {
  color: var(--ink-soft);
  font-family: var(--font-serif);
  letter-spacing: 0.1em;
}

.portfolio-prologue {
  color: var(--ink);
}

.chapter-media img,
.darkroom-scene img {
  /* 全面写真を各シーンの配置枠へ収める内在サイズ制御。 */
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.chapter-scrim {
  background: rgba(19, 14, 10, 0.36);
  z-index: -1;
}

.light-chapter--morning .chapter-scrim,
.light-chapter--daylight .chapter-scrim {
  background: rgba(38, 28, 18, 0.28);
}

.light-chapter--golden .chapter-scrim {
  background: rgba(43, 20, 11, 0.28);
}

.light-chapter--golden .chapter-visual {
  background: var(--theme-golden);
}

.light-chapter--night .chapter-scrim {
  background: rgba(6, 8, 13, 0.3);
}

.chapter-copy {
  color: #fffaf1;
}

.chapter-lighting {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.chapter-lighting i {
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 52% 48% at center, #000 24%, rgba(0, 0, 0, 0.72) 58%, transparent 86%);
  mask-image: radial-gradient(ellipse 52% 48% at center, #000 24%, rgba(0, 0, 0, 0.72) 58%, transparent 86%);
  position: absolute;
}

.chapter-sun-pool {
  background-position: center;
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0.42;
}

.chapter-sun-pool--two {
  opacity: 0.33;
}

.chapter-leaf-shadow {
  background-position: center;
  background-size: cover;
  mix-blend-mode: multiply;
  opacity: 0.27;
}

.chapter-leaf-shadow--two {
  opacity: 0.24;
}

.light-chapter--morning .chapter-sun-pool--one {
  inset: 5% 50% 38% -6%;
}

.light-chapter--morning .chapter-sun-pool--two {
  inset: 56% -6% -8% 72%;
}

.light-chapter--morning .chapter-leaf-shadow--one {
  inset: 46% 56% -10% -8%;
}

.light-chapter--daylight .chapter-sun-pool--two {
  inset: 4% 62% 50% -7%;
  opacity: 0.38;
}

.light-chapter--daylight .chapter-leaf-shadow--two {
  inset: 44% -8% -12% 70%;
}

.light-chapter--golden .chapter-sun-pool--one {
  inset: 4% 58% 52% -8%;
  opacity: 0.44;
}

.light-chapter--golden .chapter-sun-pool--two {
  inset: 60% -7% -12% 72%;
  opacity: 0.36;
}

.light-chapter--golden .chapter-leaf-shadow--one {
  inset: 4% -9% 48% 73%;
  opacity: 0.24;
}

.chapter-night-bokeh {
  background-position: 32% 58%;
  background-size: cover;
  inset: 34% 61% -12% -9%;
  mix-blend-mode: screen;
  opacity: 0.5;
}

.chapter-title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: 0.13em;
}

.chapter-copy p {
  font-family: var(--font-serif);
  letter-spacing: 0.08em;
  margin-top: 0.8rem;
}

.light-chapter--morning,
.light-chapter--daylight {
  color: var(--ink);
}

.light-chapter--golden,
.light-chapter--night {
  color: var(--night-paper);
}

.chapter-visual--night .chapter-media img {
  object-position: center 34%;
}

.photo-window {
  position: relative;
}

.photo-window img {
  /* 写真を縦横比付きフレームへ収める内在サイズ制御。 */
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.frame-image {
  display: block;
  overflow: hidden;
  position: relative;
}

.photo-frame--portrait .frame-image {
  aspect-ratio: 2 / 3;
}

.photo-frame--wide .frame-image {
  aspect-ratio: 3 / 2;
}

.photo-window:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

.photo-soft {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.chapter-gallery .photo-window {
  /* 章内写真だけを真鍮三層枠・紙マット・壁掛け影で額装する。 */
  background-color: #f7f1e7;
  background-repeat: repeat;
  border: 1px solid #d8bc72;
  box-shadow:
    inset 0 0 0 1px #e6cb7c,
    inset 0 0 0 2px #3a2b21,
    inset 0 0 0 3px #aa7a2c,
    0 2px 2px rgba(46, 31, 20, 0.14),
    0 14px 22px rgba(46, 31, 20, 0.16),
    0 30px 54px rgba(46, 31, 20, 0.12);
  padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 2.2vw, 2rem) clamp(2.8rem, 4vw, 3.8rem);
  overflow: hidden;
}

.chapter-gallery {
  isolation: isolate;
  position: relative;
}

.chapter-gallery::before,
.chapter-gallery::after {
  content: "";
  inset-block: 0;
  inset-inline-start: 50%;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  /* 固定テーマ層の色を見せながら、screen合成の下地を全面に確保する装飾幅。 */
  width: 100vw;
}

.chapter-gallery::before {
  background-color: var(--theme-morning);
  background-repeat: repeat;
  mix-blend-mode: normal;
  opacity: 0.22;
  z-index: -2;
}

.light-chapter--daylight .chapter-gallery::before {
  background-color: var(--theme-daylight);
}

.light-chapter--golden .chapter-gallery::before {
  background-color: var(--theme-golden);
}

.light-chapter--night .chapter-gallery::before {
  background-color: var(--theme-night);
}

.chapter-gallery::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: min(68rem, 88vw) auto;
  -webkit-mask-image: radial-gradient(ellipse 50% 48% at center, #000 36%, transparent 86%);
  mask-image: radial-gradient(ellipse 50% 48% at center, #000 36%, transparent 86%);
  mix-blend-mode: multiply;
  opacity: 0.07;
  z-index: -1;
}

.light-chapter--golden .chapter-gallery::after,
.light-chapter--night .chapter-gallery::after {
  mix-blend-mode: soft-light;
  opacity: 0.06;
}

.gallery-light-pass {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  inset-block: 8%;
  left: 0;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate3d(-150%, 0, 0) scale(1.08);
  /* 既存の事前描画光スプライトを横切らせるための装飾幅。 */
  width: min(34rem, 48vw);
  z-index: 3;
}

.chapter-gallery .frame-image {
  border: 1px solid #a9792c;
  box-shadow:
    -1px -1px 0 rgba(255, 244, 191, 0.82),
    1px 1px 0 rgba(73, 48, 22, 0.62),
    inset 1px 1px 0 rgba(255, 247, 205, 0.54),
    inset -1px -1px 0 rgba(72, 46, 19, 0.38);
}

.frame-caption {
  color: rgba(70, 53, 39, 0.48);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  margin-top: 1.1rem;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(79, 57, 39, 0.14);
  position: relative;
  z-index: 8;
  transition:
    opacity 1.08s ease-in-out,
    transform 1.08s ease-in-out;
}

.frame-caption-gold {
  color: #f5daac;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-shadow: 0 0 18px rgba(218, 176, 93, 0.45), 0 0 8px rgba(233, 200, 136, 0.5);
  top: 0;
  transform: translate3d(0, 4px, 0);
  transition:
    opacity 1.08s ease-in-out,
    transform 1.08s ease-in-out;
}

@keyframes photo-dust-rise {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.12);
  }

  18% {
    opacity: 0.48;
  }

  100% {
    opacity: 0;
    transform: translate3d(
      calc(-50% + var(--photo-dust-rise-x, -12%)),
      calc(-50% + var(--photo-dust-rise-y, -48%)),
      0
    ) scale(0.78);
  }
}

.photo-glow,
.photo-window-reflection,
.photo-dust,
.photo-dust i {
  pointer-events: none;
}

.photo-glow,
.photo-window-reflection {
  background-repeat: no-repeat;
  background-size: 132% 132%;
  inset: -18%;
  opacity: 0;
  position: absolute;
  transform: translate3d(0, 0, 0) scale(0.9);
  transition:
    opacity var(--photo-hover-out-duration) var(--ease-light),
    transform var(--photo-hover-out-duration) var(--ease-light);
}

.photo-glow {
  background-position: var(--photo-light-origin, 52% 24%);
  transform-origin: var(--photo-light-origin, 52% 24%);
  z-index: 5;
}

.photo-window-reflection {
  background-position: var(--photo-glass-origin, 52% 24%);
  mix-blend-mode: soft-light;
  transform-origin: var(--photo-glass-origin, 52% 24%);
  z-index: 4;
}

.photo-dust {
  inset: 0;
  position: absolute;
  z-index: 7;
}

.photo-dust i {
  --photo-dust-rise-x: -12%;
  --photo-dust-rise-y: -48%;
  background: #e9cd95;
  border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(225, 203, 147, 0.24);
  height: 0.28rem;
  left: var(--photo-dust-x, 48%);
  opacity: 0;
  position: absolute;
  top: var(--photo-dust-y, 58%);
  transform: translate3d(-50%, -50%, 0) scale(0.12);
  transition:
    opacity var(--photo-hover-out-duration) var(--ease-light),
    transform var(--photo-hover-out-duration) var(--ease-light);
  width: 0.28rem;
  z-index: 8;
}

.photo-dust i:nth-child(1) {
  --photo-dust-x: 32%;
  --photo-dust-y: 54%;
  --photo-dust-rise-x: -24%;
  --photo-dust-rise-y: -72%;
}

.photo-dust i:nth-child(2) {
  --photo-dust-x: 44%;
  --photo-dust-y: 62%;
  --photo-dust-rise-x: 9%;
  --photo-dust-rise-y: -58%;
  height: 0.22rem;
  width: 0.22rem;
}

.photo-dust i:nth-child(3) {
  --photo-dust-x: 63%;
  --photo-dust-y: 52%;
  --photo-dust-rise-x: 18%;
  --photo-dust-rise-y: -44%;
  height: 0.2rem;
  width: 0.2rem;
}

.photo-soft.is-ready {
  opacity: 1;
}

.night-lamp-glow {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  inset: 0 -4% 62% 82%;
  -webkit-mask-image: radial-gradient(circle at center, #000 24%, rgba(0, 0, 0, 0.7) 54%, transparent 86%);
  mask-image: radial-gradient(circle at center, #000 24%, rgba(0, 0, 0, 0.7) 54%, transparent 86%);
  mix-blend-mode: screen;
  opacity: 0.62;
  pointer-events: none;
  position: absolute;
  transform-origin: center;
  z-index: 1;
}

.darkroom {
  background: #120708;
}

.darkroom-scrim {
  background: rgba(18, 3, 5, 0.34);
  z-index: -2;
}

.darkroom-red-wash {
  background: rgba(113, 0, 8, 0.16);
  opacity: 0.54;
  pointer-events: none;
  z-index: -1;
}

.darkroom-heading {
  color: var(--night-paper);
}

.darkroom-heading h2 {
  letter-spacing: 0.14em;
}

.darkroom-heading p {
  font-family: var(--font-serif);
  letter-spacing: 0.06em;
  margin-top: 1rem;
}

.darkroom-tray {
  background: rgba(21, 13, 14, 0.78);
  border: 1px solid rgba(248, 238, 225, 0.22);
  padding-block: clamp(1rem, 2vw, 1.5rem);
}

.darkroom-print {
  aspect-ratio: 3 / 2;
  background: #fffdf8;
  overflow: hidden;
  position: relative;
  transform-origin: center bottom;
}

.darkroom-print img {
  /* 印画紙の縦横比付きフレームへKVを収める内在サイズ制御。 */
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.darkroom-paper-wash {
  background: #fffdf8;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  position: absolute;
}

.profile {
  background: #f4ecdf;
}

.profile-photo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.profile-copy h2 {
  margin-bottom: 1.75rem;
}

.profile-copy p {
  line-height: 2.15;
  text-wrap: pretty;
}

.menu-card {
  border-block: 1px solid transparent;
  overflow: hidden;
  padding: clamp(1.75rem, 3vw, 2.5rem) 1.25rem;
  position: relative;
  transition: border-color 0.32s var(--ease-light), transform 0.32s var(--ease-light);
}

.menu-card::before {
  background: linear-gradient(90deg, var(--champagne-gold), var(--line));
  content: "";
  /* MENUのビューイン罫線を1pxに固定する。 */
  height: 1px;
  inset: 0 0 auto;
  position: absolute;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.82s var(--ease-light);
}

.menu-card::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  inset: -70% -35%;
  -webkit-mask-image: radial-gradient(ellipse 54% 48% at center, #000 34%, transparent 100%);
  mask-image: radial-gradient(ellipse 54% 48% at center, #000 34%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate3d(-92%, 0, 0) scale(1.08);
}

.menu-card:focus-visible {
  border-color: var(--champagne-gold);
  transform: translateY(-4px);
}

.menu-card:focus-visible::after {
  animation: menu-card-shine-sweep var(--shine-duration) var(--ease-light) 1;
}

.menu-card h3 {
  margin-bottom: 1.25rem;
}

.menu-card > p:not(.menu-price) {
  color: var(--ink-soft);
  line-height: 1.9;
  text-wrap: pretty;
}

.menu-price {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.08em;
  margin-top: 1.75rem;
}

.section-light-pass {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  inset-block: 4%;
  left: 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, #000 42%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at center, #000 42%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate3d(-150%, 0, 0) scale(1.08);
  /* MENU/FLOWを横切る事前描画ひだまりの装飾幅。 */
  width: min(40rem, 52vw);
  z-index: 0;
}

.section-light-pass--flow {
  transform: translate3d(270%, 0, 0) rotate(180deg) scale(1.08);
}

.menu > .inner,
.flow > .inner {
  position: relative;
  z-index: 1;
}

.flow-grid {
  counter-reset: flow-step;
  position: relative;
}

.flow-grid::after {
  background: linear-gradient(90deg, var(--champagne-gold-soft), var(--champagne-gold), var(--champagne-gold-soft));
  content: "";
  /* 4ステップを接続する金線を1pxに固定する。 */
  height: 1px;
  inset: 3.65rem 5% auto;
  position: absolute;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 1.35s var(--ease-light) 0.24s;
  z-index: 0;
}

.flow-grid li {
  counter-increment: flow-step;
  padding: 4.4rem 0.5rem 0;
  position: relative;
  z-index: 1;
}

.flow-grid li::before {
  color: var(--champagne-gold-soft);
  content: "0" counter(flow-step);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.75rem, 6vw, 5.5rem);
  left: 0;
  line-height: 1;
  opacity: 1;
  position: absolute;
  top: 0;
  transform: translateY(0) scale(1);
  transform-origin: left bottom;
  transition: color 0.72s var(--ease-light), opacity 0.72s var(--ease-light), transform 0.72s var(--ease-light);
}

.js .menu-card::before,
.js .flow-grid::after {
  transform: scaleX(0);
}

.js .flow-grid li::before {
  opacity: 0.26;
  transform: translateY(8px) scale(0.96);
}

.js .is-furnished .menu-card::before,
.js .is-furnished .flow-grid::after {
  transform: scaleX(1);
}

.js .is-furnished .flow-grid li::before {
  color: var(--champagne-gold);
  opacity: 1;
  transform: translateY(0) scale(1);
}

.js .is-furnished .flow-grid li:nth-child(2)::before {
  transition-delay: 0.12s;
}

.js .is-furnished .flow-grid li:nth-child(3)::before {
  transition-delay: 0.24s;
}

.js .is-furnished .flow-grid li:nth-child(4)::before {
  transition-delay: 0.36s;
}

.flow-grid h3 {
  margin-bottom: 0.9rem;
}

.flow-grid p {
  color: var(--ink-soft);
  line-height: 1.85;
}

.shutter-studio {
  background: #ad8153;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

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

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

.shutter-background img {
  /* 幅別配信する机写真をセクション背景の描画枠へ収める内在サイズ制御。 */
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.shutter-scrim {
  background: rgba(61, 39, 23, 0.12);
  z-index: -1;
}

.shutter-control {
  background: rgba(250, 246, 239, 0.76);
  border: 1px solid rgba(80, 55, 34, 0.22);
  box-shadow: 0 12px 30px rgba(55, 34, 18, 0.14);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}

.shutter-button {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  cursor: pointer;
  letter-spacing: 0.1em;
  overflow: hidden;
  padding: 0.95rem 2rem;
  position: relative;
  isolation: isolate;
  transition: background-color 0.3s var(--ease-light), border-color 0.3s var(--ease-light), transform 0.3s var(--ease-light);
}

.shutter-button::before {
  background-position: 42% 52%;
  background-repeat: no-repeat;
  background-size: 128% 94%;
  content: "";
  inset: -85% -45%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate3d(-88%, 14%, 0) rotate(-8deg) scale(1.2, 0.8);
  z-index: 2;
}

.shutter-button::after,
.contact-button::after {
  background-position: 58% 42%;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  inset: -160% -55%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate3d(13%, -8%, 0) rotate(-6deg) scale(0.78, 0.72);
  transition: opacity 0.3s var(--ease-light), transform 0.3s var(--ease-light);
  z-index: 1;
}

.shutter-button > span,
.contact-button > span {
  position: relative;
  z-index: 3;
}

.shutter-button:disabled {
  cursor: default;
  opacity: 0.68;
}

.shutter-message {
  background-color: #faf6ee;
  background-repeat: repeat;
  border: 1px solid rgba(99, 76, 54, 0.18);
  box-shadow: 0 7px 16px rgba(55, 34, 18, 0.16);
  color: #594333;
  display: inline-block;
  font-family: var(--font-serif);
  letter-spacing: 0.08em;
  margin-top: 1.25rem;
  opacity: 0;
  padding: 0.7rem 1.25rem;
  transform: rotate(-2deg);
  transition: opacity 0.3s var(--ease-light), transform 0.3s var(--ease-light);
  visibility: hidden;
}

.shutter-message[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.shutter-stack {
  /* 5枚の配置外接範囲を先に確保し、クリック前後の高さ差を0pxにする。 */
  aspect-ratio: 4 / 3;
  display: grid;
  /* 1440pxで写真追加時に内容由来で29.016px伸びたため、aspect-ratioの確保高を優先する。 */
  min-height: 0;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  place-items: center;
  position: relative;
}

.polaroid {
  background: #fffdf8;
  box-shadow: 0 16px 36px rgba(55, 34, 18, 0.22);
  grid-area: 1 / 1;
  margin-inline: clamp(1rem, 12vw, 7rem);
  padding: 0.65rem 0.65rem 2.35rem;
  position: relative;
}

.shutter-stack .polaroid--landscape {
  /* 縦横枠の面積を±10%へ揃えるため、横枠を基準幅72%に固定する装飾例外。 */
  width: 72%;
}

.shutter-stack .polaroid--portrait {
  /* 2:3枠を3:2枠と同面積にするため、横枠幅の2/3へ固定する装飾例外。 */
  width: 48%;
}

.polaroid img {
  /* ポラロイド枠内へ写真を収める内在サイズ制御。 */
  height: auto;
  object-fit: cover;
  width: 100%;
}

.polaroid--landscape img {
  aspect-ratio: 3 / 2;
}

.polaroid--portrait img {
  aspect-ratio: 2 / 3;
}

.polaroid--morning img { object-position: 50% 42%; }
.polaroid--park img { object-position: 50% 38%; }
.polaroid--night img { object-position: 50% 36%; }
.polaroid--sunset img { object-position: 50% 45%; }
.polaroid--cafe img { object-position: 50% 34%; }

.polaroid-photo {
  opacity: 0;
}

.keep-together {
  white-space: nowrap;
}

.contact {
  background: #d8caaf;
  border-top: 1px solid var(--line);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.contact-letter {
  background-color: #faf6ee;
  background-repeat: repeat;
  border: 1px solid rgba(102, 76, 51, 0.2);
  box-shadow: 0 18px 44px rgba(58, 38, 22, 0.2);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
  transform: rotate(-0.35deg);
}

.contact-tape {
  background-color: rgba(222, 204, 164, 0.7);
  background-position: center;
  background-repeat: repeat;
  left: 50%;
  opacity: 0.84;
  pointer-events: none;
  position: absolute;
  top: -1rem;
  transform: translateX(-50%) rotate(-1.8deg);
  /* 便箋を留める和紙テープとして成立する装飾寸法。 */
  width: clamp(7rem, 19vw, 11rem);
  height: 2rem;
  z-index: 4;
}

.contact-seal {
  bottom: clamp(1.2rem, 3vw, 2rem);
  /* 便箋に添える封蝋の実寸感を保つ装飾画像例外。 */
  inline-size: clamp(2.8rem, 4vw, 3.35rem);
  pointer-events: none;
  position: absolute;
  right: clamp(1.2rem, 3vw, 2.2rem);
  transform: rotate(7deg);
  z-index: 3;
}

.contact-seal img {
  /* 封蝋の正方形配置枠へ収める内在サイズ制御。 */
  height: auto;
  mix-blend-mode: multiply;
  width: 100%;
}

.contact-dried-flower {
  mix-blend-mode: multiply;
  opacity: 0.9;
  pointer-events: none;
  transform: rotate(-11deg);
  /* 便箋脇の小物としてデスクトップで実寸感を保つ画像例外。 */
  width: min(13rem, 20vw);
}

.contact-dried-flower img {
  /* 縦長の枝画像を解像度候補の縦横比で表示する内在サイズ制御。 */
  height: auto;
  width: 100%;
}

.contact-background,
.contact-scrim,
.contact-leaf-shadow,
.contact-bokeh-field {
  inset: 0;
  position: absolute;
}

.contact-background {
  z-index: -3;
}

.contact-background img {
  /* 幅別配信する夕方のボケ写真をCONTACT背景へ収める内在サイズ制御。 */
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.contact-scrim {
  background: rgba(250, 246, 239, 0.64);
  z-index: -2;
}

.contact-leaf-shadow {
  background-position: right center;
  background-repeat: no-repeat;
  background-size: min(58rem, 86vw) auto;
  mix-blend-mode: multiply;
  opacity: 0.12;
  pointer-events: none;
  z-index: -1;
}

.contact-bokeh-field {
  mix-blend-mode: screen;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.contact-bokeh-field i {
  background-position: left center;
  background-repeat: no-repeat;
  background-size: min(52rem, 75vw) auto;
  inset: -20%;
  opacity: 0.34;
  position: absolute;
  transform: translate3d(0, 0, 0);
}

.contact-bokeh-field i:nth-child(2) {
  background-position: right center;
  opacity: 0.26;
  transform: rotate(180deg) scale(0.92);
}

.contact-lead {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin-top: 1.75rem;
}

.contact-lead-extra {
  color: var(--ink-soft);
  font-family: var(--font-serif);
  margin-top: 0.65rem;
}

.contact-button {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  cursor: pointer;
  letter-spacing: 0.08em;
  margin-top: 0;
  opacity: 1;
  overflow: hidden;
  padding: 1.05rem 2.7rem;
  position: relative;
  isolation: isolate;
  transition: background-color 0.3s var(--ease-light), border-color 0.3s var(--ease-light), transform 0.3s var(--ease-light);
}

.contact-button-motion {
  display: inline-block;
  margin-top: 2.5rem;
}

.contact-button::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  inset: -85% -45%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate3d(-92%, 0, 0) scale(1.08);
  z-index: 2;
}

.contact-note {
  color: var(--ink-soft);
  font-size: 0.8125rem;
  margin-top: 0.8rem;
}

.social-links {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}

.social-link {
  /* SNSアイコンのタップ領域を44pxに固定する。 */
  align-items: center;
  background: rgba(250, 246, 239, 0.3);
  border: 1px solid rgba(59, 44, 34, 0.28);
  border-radius: 50%;
  display: flex;
  height: 44px;
  justify-content: center;
  transition: background-color 0.3s var(--ease-light), color 0.3s var(--ease-light), transform 0.3s var(--ease-light);
  width: 44px;
}

.social-link svg {
  /* 44pxタップ領域内のアイコン本体を20pxに固定する。 */
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
  width: 20px;
}

.social-link .social-dot {
  fill: currentColor;
  stroke: none;
}

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

.footer-inner p:first-child {
  font-family: var(--font-serif);
  letter-spacing: 0.08em;
}

.footer-inner p:last-child {
  color: rgba(250, 246, 239, 0.72);
  font-size: 0.75rem;
  margin-top: 0.75rem;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}