/* =========================================================
   GALLERY BAR NEMORU
   洗練されたダーク・ミニマル / 余白とサンセリフ
   ========================================================= */

:root {
  --bg:      #080a0a;   /* 霧に沈む冷たい夜の森 */
  --bg-2:    #0e1010;
  --fg:      #d4d8d3;   /* 冷たい霧のオフホワイト */
  --muted:   #74786f;
  --line:    rgba(212, 216, 211, 0.10);
  --accent:  #8c958d;   /* 冷たいセージ・グレー（北欧の森） */

  --jp: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --en: "Syne", "Zen Old Mincho", sans-serif;

  --max: 1120px;
  --gut: clamp(1.25rem, 5vw, 3.25rem);
  --ease: cubic-bezier(0.4, 0, 0.1, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--jp);
  font-weight: 300;
  color: var(--fg);
  background: var(--bg);
  line-height: 2;
  letter-spacing: 0.06em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

::selection { background: var(--accent); color: #111; }

/* ---------- 多層の間接照明（スクロールで移ろう） ---------- */
/* --p : スクロール進行度 0〜1（JSが更新） */
.lighting {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  background:
    radial-gradient(120% 70% at 50% -10%, #11171a 0%, transparent 55%),
    linear-gradient(180deg, #0a0d0e 0%, #080a0b 45%, #050707 100%);
}
.light {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.25s linear, opacity 0.4s linear;
}
/* 上部の層：スクロールで大きく下に沈み、弱まる（ほぼ無彩） */
.light--warm {
  width: 95vw; height: 80vh;
  left: 50%; top: -30vh;
  background: radial-gradient(circle, rgba(150, 162, 162, 0.16), transparent 62%); /* 高い冷たい霧 */
  transform: translateX(calc(-50% + var(--p, 0) * -18vw)) translateY(calc(var(--p, 0) * 120vh));
  opacity: calc(0.95 - var(--p, 0) * 0.5);
}
/* 中間の層：スクロールで大きく昇り、横にも流れる */
.light--cool {
  width: 78vw; height: 78vh;
  right: -18vw; top: 35vh;
  background: radial-gradient(circle, rgba(86, 108, 104, 0.14), transparent 62%); /* 森の冷たい霞 */
  transform: translate(calc(var(--p, 0) * -22vw), calc(var(--p, 0) * -120vh));
  opacity: calc(0.3 + var(--p, 0) * 0.6);
}
/* 下部の層：スクロールで大きく立ち上がる */
.light--low {
  width: 100vw; height: 65vh;
  left: 50%; bottom: -28vh;
  background: radial-gradient(circle, rgba(96, 112, 110, 0.18), transparent 60%); /* 地表の霧 */
  transform: translateX(calc(-50% + var(--p, 0) * 16vw)) translateY(calc(var(--p, 0) * -70vh));
  opacity: calc(0.2 + var(--p, 0) * 0.75);
}
/* 動くスポット：スクロールで斜めに大きく横断 */
.light--spot {
  width: 46vw; height: 46vw;
  left: calc(2vw + var(--p, 0) * 78vw);
  top: calc(55vh - var(--p, 0) * 55vh);
  background: radial-gradient(circle, rgba(176, 188, 188, 0.10), transparent 60%); /* 月光 */
  opacity: calc(0.25 + var(--p, 0) * 0.5);
}
/* 木立のシルエット（多層・視差で奥行きが変化） */
.forest {
  position: absolute;
  left: -10vw; right: -10vw;
  bottom: 0;
  height: 130vh;
  background-repeat: repeat-x;
  background-position: bottom;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 6%, rgba(0,0,0,0.85) 38%, transparent 78%);
  mask-image: linear-gradient(to top, #000 6%, rgba(0,0,0,0.85) 38%, transparent 78%);
}
/* 遠景：細く淡い木立。霧でぼやける */
.forest--far {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 4.2vw, rgba(18,24,24,0.55) 4.2vw 4.7vw, transparent 4.7vw 9vw),
    repeating-linear-gradient(90deg, transparent 0 6.6vw, rgba(14,20,20,0.4) 6.6vw 6.9vw, transparent 6.9vw 13vw);
  filter: blur(3.5px);
  opacity: 0.55;
  transform: translate(calc(var(--p, 0) * 4vw), calc(var(--p, 0) * -6vh));
}
/* 中景：やや濃い木立 */
.forest--mid {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 8vw, rgba(7,11,11,0.72) 8vw 8.9vw, transparent 8.9vw 17vw),
    repeating-linear-gradient(90deg, transparent 0 11vw, rgba(5,8,8,0.5) 11vw 11.5vw, transparent 11.5vw 23vw);
  filter: blur(1.6px);
  opacity: 0.8;
  transform: translate(calc(var(--p, 0) * -6vw), calc(var(--p, 0) * -16vh));
}
/* 近景：太く濃い幹。最も大きく動く */
.forest--near {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 17vw, rgba(0,0,0,0.92) 17vw 19.2vw, transparent 19.2vw 36vw),
    repeating-linear-gradient(90deg, transparent 0 25vw, rgba(0,0,0,0.7) 25vw 26vw, transparent 26vw 52vw);
  filter: blur(0.6px);
  opacity: 0.95;
  transform: translate(calc(var(--p, 0) * 10vw), calc(var(--p, 0) * -34vh));
}

/* 中奥：もう一層の幹（層を増やす） */
.forest--deep {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 5.6vw, rgba(11,16,16,0.62) 5.6vw 6.2vw, transparent 6.2vw 12vw),
    repeating-linear-gradient(90deg, transparent 0 9vw, rgba(8,12,12,0.45) 9vw 9.4vw, transparent 9.4vw 18vw);
  filter: blur(2.6px);
  opacity: 0.7;
  transform: translate(calc(var(--p, 0) * -2vw), calc(var(--p, 0) * -11vh));
}

/* 重なり順（奥→手前） */
.light { z-index: 0; }
.forest--far      { z-index: 1; }
.forest--deep     { z-index: 2; }
.forest--mid      { z-index: 3; }
.forest--near     { z-index: 4; }
.forest--firs-far { z-index: 5; }
.forest--firs-mid { z-index: 6; }
.forest--firs     { z-index: 7; }

/* ムーミン谷のとんがりモミ（3層・密に） */
.forest--firs-far,
.forest--firs-mid,
.forest--firs {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='240'%3E%3Cg fill='%23050807'%3E%3Crect x='46' y='196' width='8' height='30'/%3E%3Cpath d='M50 30 L66 84 L56 84 L78 134 L66 134 L92 196 L8 196 L34 134 L22 134 L42 84 L34 84 Z'/%3E%3Crect x='116' y='200' width='7' height='24'/%3E%3Cpath d='M120 86 L132 124 L124 124 L142 162 L132 162 L150 200 L90 200 L108 162 L98 162 L116 124 L108 124 Z'/%3E%3Crect x='196' y='200' width='8' height='26'/%3E%3Cpath d='M200 56 L214 104 L204 104 L226 150 L214 150 L236 200 L164 200 L186 150 L174 150 L196 104 L186 104 Z'/%3E%3Crect x='286' y='198' width='8' height='30'/%3E%3Cpath d='M290 34 L306 88 L296 88 L318 138 L306 138 L332 198 L248 198 L274 138 L262 138 L282 88 L274 88 Z'/%3E%3Crect x='366' y='200' width='7' height='24'/%3E%3Cpath d='M370 92 L382 128 L374 128 L392 164 L382 164 L400 200 L340 200 L358 164 L348 164 L366 128 L358 128 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  -webkit-mask-image: none;
  mask-image: none;
}
/* 遠景のモミ：小さく霞む */
.forest--firs-far {
  background-size: auto 24vh;
  filter: blur(2.4px);
  opacity: 0.6;
  transform: translate(calc(var(--p, 0) * -5vw), calc(var(--p, 0) * -14vh));
}
/* 中景のモミ */
.forest--firs-mid {
  background-size: auto 34vh;
  filter: blur(1.1px);
  opacity: 0.85;
  transform: translate(calc(var(--p, 0) * 8vw), calc(var(--p, 0) * -26vh));
}
/* 前景のモミ：大きく濃く、最も動く */
.forest--firs {
  background-size: auto 48vh;
  filter: blur(0.4px);
  opacity: 0.98;
  transform: translate(calc(var(--p, 0) * -14vw), calc(var(--p, 0) * -46vh));
}


/* 周辺減光（ヴィネット） */
.lighting::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  background:
    linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 34%),
    radial-gradient(125% 90% at 50% 38%, transparent 46%, rgba(0, 0, 0, 0.62) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .light, .forest { transform: none !important; }
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem var(--gut);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), border-color 0.4s;
  border-bottom: 1px solid transparent;
  /* 独立した合成レイヤーにして、スマホの再描画ゴーストを防ぐ */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.site-header.scrolled {
  background: #0a0b0b;
  padding: 0.9rem var(--gut);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; flex-direction: column; line-height: 1.3; }
.brand__name { font-family: var(--en); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.42em; }
.brand__sub { font-size: 0.6rem; letter-spacing: 0.5em; color: var(--muted); }

.nav { display: flex; gap: clamp(1.2rem, 3vw, 2.6rem); }
.nav a {
  font-family: var(--en);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding: 0.4em 0;
  transition: color 0.35s;
}
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--accent); transition: width 0.4s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }

.nav-toggle { display: none; flex-direction: column; gap: 6px; background: none; border: 0; cursor: pointer; padding: 6px; z-index: 60; }
.nav-toggle span { width: 26px; height: 1px; background: var(--fg); transition: transform 0.4s var(--ease), opacity 0.4s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8rem var(--gut) 6rem;
  overflow: hidden;
}
.hero__eyebrow { font-family: var(--en); letter-spacing: 0.5em; font-size: 0.74rem; color: var(--accent); text-transform: uppercase; margin-bottom: 2rem; animation: fade 1.4s var(--ease) both; }
.hero__title {
  font-family: var(--en);
  font-weight: 500;
  font-size: clamp(3.4rem, 13vw, 9rem);
  line-height: 0.98;
  letter-spacing: 0.04em;
  text-transform: none;
  animation: fade 1.4s 0.15s var(--ease) both;
}
.hero__kicker {
  display: block;
  font-size: clamp(0.8rem, 2.2vw, 1.05rem);
  font-weight: 300;
  letter-spacing: 0.42em;
  color: var(--muted);
  text-transform: lowercase;
  margin-bottom: 1.1rem;
}
.hero__lead { margin: 2.4rem auto 0; max-width: 40rem; color: var(--muted); font-size: clamp(0.92rem, 2vw, 1.05rem); letter-spacing: 0.1em; animation: fade 1.4s 0.3s var(--ease) both; }
.hero__actions { display: flex; gap: 2.2rem; justify-content: center; flex-wrap: wrap; margin-top: 3rem; animation: fade 1.4s 0.45s var(--ease) both; }
.hero__scroll { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); font-family: var(--en); letter-spacing: 0.4em; font-size: 0.66rem; color: var(--muted); text-transform: uppercase; }
.hero__scroll::after { content: ""; display: block; width: 1px; height: 42px; margin: 0.8rem auto 0; background: linear-gradient(var(--muted), transparent); animation: drop 2.4s ease-in-out infinite; }

@keyframes fade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes drop { 0%,100% { transform: scaleY(1); opacity: 0.8; transform-origin: top; } 50% { transform: scaleY(0.35); opacity: 0.2; transform-origin: top; } }

/* ---------- リンク（テキスト） ---------- */
.link {
  font-family: var(--en);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--accent);
  transition: color 0.35s, border-color 0.35s, letter-spacing 0.35s;
}
.link:hover { color: var(--accent); letter-spacing: 0.3em; }
.link--muted { color: var(--muted); border-color: var(--line); }
.link--muted:hover { color: var(--fg); border-color: var(--fg); }

/* ---------- セクション共通 ---------- */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(5rem, 12vw, 9rem) var(--gut);
}
.section--narrow { max-width: 820px; }
.shead { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.shead__en { font-family: var(--en); font-size: 0.76rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.2rem; }
.shead__en::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.shead__ja { font-size: clamp(1.5rem, 3.8vw, 2.2rem); font-weight: 300; letter-spacing: 0.1em; line-height: 1.4; }
.shead--center { text-align: center; }
.shead--center .shead__en { justify-content: center; }
.shead--center .shead__en::after, .shead--center .shead__en::before { content: ""; flex: 0 0 32px; height: 1px; background: var(--accent); }

/* ---------- 全幅イメージ帯 ---------- */
.band {
  width: 100%;
  height: clamp(300px, 52vh, 540px);
  background-size: cover;
  background-position: center;
}
.band {
  -webkit-mask-image: none;
}
.band--1 {
  background:
    repeating-linear-gradient(90deg, transparent 0 6.5vw, rgba(0,0,0,0.32) 6.5vw 7.2vw, transparent 7.2vw 15vw),
    linear-gradient(165deg, #0a0f10 0%, #131a1b 55%, #1d2324 100%);
}
.band--2 {
  background:
    repeating-linear-gradient(90deg, transparent 0 10vw, rgba(0,0,0,0.28) 10vw 11vw, transparent 11vw 23vw),
    linear-gradient(155deg, #0b0e0f 0%, #161c1c 55%, #222827 100%);
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- コンセプト ---------- */
.prose { max-width: 40rem; }
.prose p { color: var(--muted); margin-bottom: 1.6rem; font-size: clamp(0.95rem, 2vw, 1.05rem); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--fg); font-weight: 400; }
.prose__origin { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); letter-spacing: 0.08em; }
.origin__name { font-family: var(--en); font-size: 1.05rem; letter-spacing: 0.14em; color: var(--accent); display: inline-block; margin-right: 0.5rem; }

.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 3.5rem); margin-top: clamp(3rem, 7vw, 5rem); }
.col__num { font-family: var(--en); font-size: 0.78rem; letter-spacing: 0.3em; color: var(--accent); }
.col h3 { font-weight: 400; font-size: 1.15rem; letter-spacing: 0.08em; margin: 1rem 0 0.7rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.col p { color: var(--muted); font-size: 0.92rem; }

/* ---------- 今月の展覧会 ---------- */
.feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.feature__img { aspect-ratio: 4 / 5; background: linear-gradient(150deg, #0d1212, #1a2021 60%, #232827); position: relative; overflow: hidden; }
.feature__img span { position: absolute; top: 1.2rem; left: 1.2rem; font-family: var(--en); letter-spacing: 0.26em; font-size: 0.66rem; text-transform: uppercase; color: var(--fg); border: 1px solid var(--line); padding: 0.4em 0.9em; }
.feature__period { font-family: var(--en); letter-spacing: 0.28em; font-size: 0.78rem; color: var(--accent); margin-bottom: 0.8rem; }
.feature__name { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 300; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
.feature__name em { font-style: normal; font-family: var(--en); font-size: 0.9rem; letter-spacing: 0.2em; color: var(--muted); display: block; margin-top: 0.3rem; }
.feature__bio { color: var(--muted); margin: 1.4rem 0 2rem; font-size: 0.96rem; }
.feature__meta { list-style: none; margin-bottom: 2.2rem; }
.feature__meta li { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.feature__meta b { font-family: var(--en); font-weight: 400; letter-spacing: 0.16em; font-size: 0.72rem; text-transform: uppercase; color: var(--accent); }

/* 出展作品 */
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-top: clamp(2.5rem, 6vw, 4rem); }
.work { position: relative; aspect-ratio: 4 / 5; background: var(--bg-2); overflow: hidden; }
.work::before { content: ""; position: absolute; inset: 0; transition: transform 1s var(--ease); }
.work:hover::before { transform: scale(1.06); }
.work figcaption { position: absolute; left: 1rem; bottom: 1rem; font-family: var(--en); font-size: 0.78rem; letter-spacing: 0.16em; color: var(--fg); opacity: 0; transition: opacity 0.4s; }
.work:hover figcaption { opacity: 1; }
.work--1::before { background: linear-gradient(150deg, #0f1414, #28302f); }
.work--2::before { background: linear-gradient(160deg, #121515, #343a39); }
.work--3::before { background: linear-gradient(140deg, #0d1011, #262c2c); }
.work--4::before { background: linear-gradient(155deg, #141a1a, #323a39); }
.work--5::before { background: linear-gradient(150deg, #121313, #2c302d); }
.work--6::before { background: linear-gradient(165deg, #0e1212, #272d2c); }

/* 開催スケジュール */
.schedule { list-style: none; }
.schedule li { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1.5rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.schedule li:first-child { border-top: 1px solid var(--line); }
.schedule__date { font-family: var(--en); letter-spacing: 0.16em; color: var(--accent); font-size: 0.9rem; }
.schedule__artist { font-size: 1.1rem; font-weight: 300; }
.schedule__artist em { font-style: normal; display: block; font-size: 0.82rem; color: var(--muted); letter-spacing: 0.08em; }
.schedule__tag { font-family: var(--en); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.schedule li.is-now .schedule__tag { color: var(--bg); background: var(--accent); padding: 0.25em 0.8em; }

/* ---------- アーカイブ ---------- */
.stats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: clamp(3rem, 7vw, 5rem); }
.stat { background: var(--bg); padding: 2.4rem 1.5rem; text-align: center; }
.stat__num { font-family: var(--en); font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 300; color: var(--fg); line-height: 1; }
.stat__label { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.16em; margin-top: 0.8rem; }

.archive-year { font-family: var(--en); font-size: 1.4rem; letter-spacing: 0.2em; color: var(--accent); margin: clamp(2.5rem, 6vw, 4rem) 0 0.5rem; }
.archive-list { list-style: none; }
.archive-item { display: grid; grid-template-columns: 5rem 1fr auto; gap: 1.5rem; align-items: center; padding: 1.5rem 0.4rem; border-top: 1px solid var(--line); transition: padding-left 0.4s var(--ease), background 0.4s; }
.archive-item:last-child { border-bottom: 1px solid var(--line); }
.archive-item:hover { padding-left: 1.2rem; background: rgba(185, 169, 138, 0.05); }
.archive-item__month { font-family: var(--en); font-size: 1rem; letter-spacing: 0.1em; color: var(--accent); }
.archive-item__title { font-size: 1.08rem; font-weight: 300; }
.archive-item__title em { font-style: normal; display: block; font-size: 0.82rem; color: var(--muted); letter-spacing: 0.06em; }
.archive-item__tag { font-family: var(--en); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 0.3em 0.9em; white-space: nowrap; }

/* ---------- インフォメーション（メニュー・営業） ---------- */
.info { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
.info__cat { font-family: var(--en); font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); padding-bottom: 1rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.info__list { list-style: none; }
.info__list li { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.7rem 0; }
.info__name { font-weight: 300; }
.info__name em { font-style: normal; display: block; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; }
.info__dots { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.info__price { font-family: var(--en); letter-spacing: 0.08em; color: var(--fg); }
.note { color: var(--muted); font-size: 0.82rem; letter-spacing: 0.06em; margin-top: 2.4rem; }
.note a { color: var(--accent); }

/* ---------- アクセス ---------- */
.access { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: start; }
.access__map { aspect-ratio: 4 / 3; border: 1px solid var(--line); background: repeating-linear-gradient(45deg, #131316, #131316 14px, #17171b 14px, #17171b 28px); }
.info-list { list-style: none; }
.info-list > div { display: grid; grid-template-columns: 5rem 1fr; gap: 1.2rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.info-list dt { font-family: var(--en); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); padding-top: 0.3em; }
.info-list dd { color: var(--muted); margin: 0; }
.info-list a:hover { color: var(--fg); }
.access .prose { margin-bottom: 2rem; }

/* ---------- フッター ---------- */
.site-footer { border-top: 1px solid var(--line); padding: clamp(3.5rem, 7vw, 5rem) var(--gut) 2.5rem; max-width: var(--max); margin: 0 auto; display: grid; gap: 2.4rem; justify-items: center; text-align: center; }
.site-footer .brand { align-items: center; }
.footer__sns { display: flex; gap: 1.6rem; }
.footer__sns a { font-family: var(--en); font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); transition: color 0.35s; }
.footer__sns a:hover { color: var(--accent); }
.footer__nav { display: flex; gap: 1.8rem; flex-wrap: wrap; justify-content: center; }
.footer__nav a { font-family: var(--en); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); transition: color 0.35s; }
.footer__nav a:hover { color: var(--fg); }
.footer__copy { font-family: var(--en); font-size: 0.68rem; letter-spacing: 0.16em; color: rgba(141,138,131,0.6); }

/* ---------- 下層ページ見出し ---------- */
.page-hero { padding: clamp(8rem, 16vw, 12rem) var(--gut) clamp(3rem, 7vw, 5rem); text-align: center; border-bottom: 1px solid var(--line); }
.page-hero__en { font-family: var(--en); letter-spacing: 0.45em; font-size: 0.76rem; text-transform: uppercase; color: var(--accent); }
.page-hero__ja { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 300; letter-spacing: 0.14em; margin-top: 1.2rem; }
.page-hero__lead { margin: 1.6rem auto 0; max-width: 38rem; color: var(--muted); font-size: 0.95rem; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 860px) {
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.2rem;
    background: #0a0b0b;
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease);
  }
  .nav.is-open { transform: none; }
  .nav a { font-size: 1rem; letter-spacing: 0.3em; }
  .nav-toggle { display: flex; }

  .cols, .feature, .info, .access { grid-template-columns: 1fr; }
  .feature__img { aspect-ratio: 16 / 11; }
  .stats { grid-template-columns: 1fr; }
  .works { grid-template-columns: repeat(2, 1fr); }
  .schedule li, .archive-item { grid-template-columns: 1fr; gap: 0.4rem; }
  .schedule__tag, .archive-item__tag { justify-self: start; }

  /* Access：ラベルと値を縦積みに */
  .info-list > div { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.8rem 0; }
  .info-list dt { padding-top: 0; }
  /* Information：名前と価格の行を整える */
  .info__list li { gap: 0.6rem; }
  .info__name { flex: 1 1 auto; min-width: 0; }
  .info__price { flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .works { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}