/* =========================================================
   AWAI 2026 — one page site
   Layout concept: 白い余白の上に、横組みの本文と縦組みの一言を
   ずらして置く。ロゴの三色（紅・藍・鶸）が重なる「あわい」を
   ヒーローと、写真の背後の色面だけに使う。
   ========================================================= */
:root {
  /* color */
  --paper: #ffffff;
  --ink: #262422;          /* 墨 */
  --ink-2: #5d5853;        /* 本文サブ */
  --ink-3: #8c8680;        /* キャプション */
  --line: #e6e2dc;
  --beni: #a24484;         /* 紅（ロゴ） */
  --ai: #3b489b;           /* 藍（ロゴ） */
  --hiwa: #99923c;         /* 鶸（ロゴ） */
  --beni-t: #f0dfe9;
  --ai-t: #dfe2f1;
  --hiwa-t: #edebd8;
  --sumi-t: #f1efec;

  /* type */
  --f-ja: "Shippori Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --f-en: "Cormorant Garamond", "Cormorant", "Shippori Mincho", "Hiragino Mincho ProN", serif;

  --fs-body: clamp(14.5px, 0.42vw + 13px, 16px);
  --fs-lead: clamp(18px, 0.9vw + 14px, 24px);
  --fs-small: 12.5px;
  --fs-tate: clamp(24px, 1.6vw + 16px, 42px);
  --fs-sec: clamp(54px, 7.4vw, 128px);

  /* space */
  --gutter: clamp(20px, 5.5vw, 96px);
  --sec-pad: clamp(112px, 14vw, 232px);
  --nav-w: 0px;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ja);
  font-size: var(--fs-body);
  line-height: 2.2;
  letter-spacing: .06em;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p, h1, h2, h3, figure, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
sup { font-size: .65em; line-height: 0; }
:focus-visible { outline: 2px solid var(--ai); outline-offset: 4px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 8px 14px; text-decoration: none;
}
.skip:focus { top: 12px; }

.pc { display: none; }
.sp { display: inline; }
@media (min-width: 900px) { .pc { display: inline; } .sp { display: none; } }

.wrap {
  max-width: 1440px;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
@media (min-width: 1100px) {
  :root { --nav-w: 150px; }
  .wrap { padding-right: max(calc(var(--gutter) + var(--nav-w)), env(safe-area-inset-right, 0px)); }
}

/* ---------- shared type ---------- */
.tate {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: var(--fs-tate);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .22em;
  white-space: nowrap;
}
.prose { display: grid; gap: 1.5em; max-width: 34em; }
.prose p { text-wrap: pretty; }
.lead {
  font-size: var(--fs-lead);
  line-height: 2;
  font-weight: 500;
  letter-spacing: .08em;
  margin-bottom: .4em;
}
.muted { color: var(--ink-3); }

.sec { padding-block: var(--sec-pad); position: relative; scroll-margin-top: 0; }
@media (max-width: 1099px) { .sec { scroll-margin-top: 40px; } }
.sec + .sec { padding-top: 0; }

.sec-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em 1.1em;
  font-weight: 400;
  margin-bottom: clamp(56px, 7vw, 120px);
}
.sec-head .en {
  font-family: var(--f-en);
  font-weight: 300;
  font-size: var(--fs-sec);
  line-height: .95;
  letter-spacing: -.005em;
  color: var(--ink);
}
.sec-head .ja {
  font-size: 13px; letter-spacing: .32em; color: var(--ink-2);
}
.sec-intro {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 2;
  margin: calc(-1 * clamp(24px, 3vw, 56px)) 0 clamp(56px, 7vw, 112px);
  max-width: 30em;
  margin-left: clamp(0px, 8vw, 140px);
}
.sub-head { display: flex; align-items: baseline; gap: .9em; font-weight: 400; }
.sub-head .en { font-family: var(--f-en); font-weight: 300; font-size: clamp(36px, 3.6vw, 56px); line-height: 1; }
.sub-head .ja { font-size: 13px; letter-spacing: .3em; color: var(--ink-2); }

/* 重なりの色面：写真の背後に少しずらした色面を敷く */
.ov { position: relative; isolation: isolate; }
.ov::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translate(clamp(14px, 2.2vw, 36px), clamp(14px, 2.2vw, 36px));
  background: var(--beni-t);
  mix-blend-mode: multiply;
}
.ov--ai::before { background: var(--ai-t); transform: translate(calc(-1 * clamp(14px, 2.2vw, 36px)), clamp(18px, 2.6vw, 44px)); }
.ov--hiwa::before { background: var(--hiwa-t); }

/* details */
.more { margin-top: 1em; }
.more summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: .7em;
  font-size: 13px; letter-spacing: .14em; color: var(--ink-2);
  padding: .2em 0;
  border-bottom: 1px solid var(--line);
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after {
  content: ""; width: 9px; height: 9px;
  background:
    linear-gradient(currentColor, currentColor) center / 9px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 9px no-repeat;
  transition: transform .3s ease;
}
.more[open] summary::after { transform: rotate(45deg); }
.more summary:hover { color: var(--ink); }
.more > p { margin-top: 1em; font-size: .94em; color: var(--ink-2); }

/* ---------- header / nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(18px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; transition: opacity .4s ease; position: relative; z-index: 2; }
.brand__mark { width: 34px; height: auto; }
.brand__word { width: 70px; height: auto; }
.is-hero .brand { opacity: 0; pointer-events: none; }

.gnav { font-family: var(--f-en); }
.gnav ul { display: grid; gap: 2px; }
.gnav a {
  display: grid; grid-template-columns: 14px auto; align-items: baseline; column-gap: 6px;
  text-decoration: none; color: var(--ink-3);
  font-size: 17px; line-height: 1.7; letter-spacing: .02em;
  transition: color .3s ease;
}
.gnav a::before {
  content: ""; width: 8px; height: 1px; background: currentColor;
  transform: translateY(-5px) scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.gnav a .ja { display: none; }
.gnav a:hover, .gnav a[aria-current="true"] { color: var(--ink); }
.gnav a[aria-current="true"]::before { transform: translateY(-5px) scaleX(1); }

.menu-btn { display: none; }

@media (min-width: 1100px) {
  /* ロゴとメニューは右端の専用の列にまとめ、本文と重ならないようにする */
  .site-header {
    inset: 0 0 auto auto;
    width: calc(var(--nav-w) + max(var(--gutter), env(safe-area-inset-right, 0px)));
    flex-direction: column; justify-content: flex-start; gap: 30px;
    padding: calc(24px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) 0 0;
  }
  .brand { gap: 8px; }
  .brand__mark { width: 30px; }
  .brand__word { width: 62px; }
  .is-hero .gnav { transform: translateY(-58px); }
  .gnav { transition: transform .5s ease; }
}

@media (max-width: 1099px) {
  .site-header { align-items: center; padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: 14px; transition: background-color .4s ease; }
  .site-header.is-scrolled { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .brand__mark { width: 28px; }
  .brand__word { width: 58px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 12px;
    background: none; border: 0; padding: 8px 0 8px 12px; cursor: pointer;
    font-family: var(--f-en); font-size: 17px; letter-spacing: .04em; color: var(--ink);
    position: relative; z-index: 2;
  }
  .menu-btn__lines { width: 26px; height: 7px; position: relative; }
  .menu-btn__lines::before, .menu-btn__lines::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
    transition: transform .35s ease, top .35s ease;
  }
  .menu-btn__lines::before { top: 0; }
  .menu-btn__lines::after { top: 6px; }
  .menu-open .menu-btn__lines::before { top: 3px; transform: rotate(20deg); }
  .menu-open .menu-btn__lines::after { top: 3px; transform: rotate(-20deg); }

  .gnav {
    position: fixed; inset: 0; z-index: 1;
    background: var(--paper);
    display: flex; align-items: center;
    padding: 96px max(var(--gutter), env(safe-area-inset-right, 0px)) 48px max(calc(var(--gutter) + 8vw), env(safe-area-inset-left, 0px));
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease, visibility 0s linear .4s;
  }
  .menu-open .gnav { opacity: 1; visibility: visible; transition: opacity .4s ease; }
  .gnav ul { gap: 6px; }
  .gnav a { grid-template-columns: auto; color: var(--ink); font-size: clamp(36px, 9vw, 56px); line-height: 1.25; display: flex; align-items: baseline; gap: .6em; }
  .gnav a::before { display: none; }
  .gnav a .ja { display: inline; font-family: var(--f-ja); font-size: 12px; letter-spacing: .3em; color: var(--ink-2); }
  .menu-open .brand { opacity: 1; pointer-events: auto; }
  .menu-open .site-header { background: transparent; backdrop-filter: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  padding: calc(88px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) clamp(36px, 6vh, 72px) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.14  0 0 0 0 0.13  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero__copy {
  position: relative; grid-column: 2; grid-row: 1 / span 2; align-self: start;
  margin-top: clamp(8px, 6vh, 80px);
  margin-right: calc(var(--nav-w) + clamp(0px, 3vw, 56px));
  font-size: clamp(26px, 2.4vw + 12px, 48px);
  letter-spacing: .3em;
  line-height: 1.9;
}
.hero__lockup { position: relative; grid-column: 1; grid-row: 2; align-self: end; display: grid; gap: 18px; }
.hero__genre { font-size: clamp(14px, .8vw + 10px, 19px); letter-spacing: .32em; }
.hero__title { display: flex; align-items: flex-end; gap: clamp(12px, 1.4vw, 24px); font-weight: 400; line-height: 1; }
.hero__mark { width: clamp(64px, 6.6vw, 112px); height: auto; margin-bottom: .2em; }
.hero__word { width: clamp(190px, 22vw, 380px); height: auto; }
.hero__year { font-family: var(--f-en); font-weight: 300; font-size: clamp(40px, 4.6vw, 80px); letter-spacing: .02em; transform: translateY(.12em); font-variant-numeric: lining-nums; }
.hero__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .7em; font-family: var(--f-en); margin-top: 6px; }
.hero__date { font-size: clamp(26px, 2.2vw + 10px, 40px); font-weight: 400; letter-spacing: .04em; font-variant-numeric: lining-nums; }
.hero__dow { font-size: clamp(18px, 1vw + 10px, 24px); font-style: italic; font-weight: 300; }
.hero__time { font-size: clamp(18px, 1vw + 10px, 24px); letter-spacing: .06em; padding-left: .6em; border-left: 1px solid var(--line); font-variant-numeric: lining-nums; }
.hero__where { font-size: 14px; letter-spacing: .2em; }
.hero__where span { color: var(--ink-2); }
.hero__scroll {
  position: absolute; right: max(var(--gutter), env(safe-area-inset-right, 0px)); bottom: clamp(36px, 6vh, 72px);
  font-family: var(--f-en); font-size: 14px; letter-spacing: .14em; text-decoration: none; color: var(--ink-2);
  writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 64px; background: linear-gradient(var(--ink-2) 50%, transparent 50%) 0 0 / 1px 200%;
  animation: drip 2.4s ease-in-out infinite;
}
@keyframes drip { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll::after { animation: none; background: var(--ink-3); } }

/* load sequence (single orchestrated moment) */
.js .hero__lockup > *, .js .hero__copy { opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.js .hero.is-in .hero__lockup > *, .js .hero.is-in .hero__copy { opacity: 1; transform: none; }
.js .hero.is-in .hero__copy { transition-delay: .9s; }
.js .hero.is-in .hero__genre { transition-delay: 1.2s; }
.js .hero.is-in .hero__title { transition-delay: 1.35s; }
.js .hero.is-in .hero__when { transition-delay: 1.5s; }
.js .hero.is-in .hero__where { transition-delay: 1.6s; }
@media (prefers-reduced-motion: reduce) {
  .js .hero__lockup > *, .js .hero__copy { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1099px) {
  .hero__scroll { display: none; }
}
@media (max-width: 640px) {
  .hero { grid-template-rows: 1fr auto; padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
  .hero__copy { margin-top: 4vh; margin-right: 0; font-size: 25px; }
  .hero__lockup { grid-column: 1 / -1; gap: 12px; }
  .hero__title { gap: 10px; }
  .hero__mark { width: 46px; }
  .hero__word { width: 150px; }
  .hero__year { font-size: 34px; }
  .hero__where { font-size: 12.5px; }
}

/* ---------- concept ---------- */
.concept__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
}
.concept__grid .sec-head { grid-column: 1 / -1; }
.concept__body { grid-column: 2 / span 6; grid-row: 2; }
.concept__tate { grid-column: 9 / span 3; grid-row: 2; justify-self: center; align-self: start; margin-top: clamp(40px, 8vw, 140px); }
@media (max-width: 899px) {
  .concept__grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
  .concept__body { grid-column: 1; grid-row: 2; }
  .concept__body .lead { font-size: 17px; }
  .concept__tate { grid-column: 2; grid-row: 2; margin-top: 0; font-size: clamp(20px, 5vw, 28px); }
}

/* ---------- place ---------- */
.place__intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: start;
}
.place__photo { grid-column: 1 / span 7; grid-row: 1 / span 2; margin-left: calc(-1 * var(--gutter)); }
.place__photo img { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; }
.place__tate { grid-column: 10 / span 3; grid-row: 1; justify-self: center; }
.place__text { grid-column: 8 / span 5; grid-row: 2; padding-left: clamp(0px, 1.5vw, 24px); margin-top: clamp(48px, 5vw, 88px); }
.place__text .lead { font-size: clamp(17px, .7vw + 13px, 21px); }

.place__story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(96px, 12vw, 200px);
  align-items: start;
}
.place__note { grid-column: 2 / span 4; display: grid; gap: 1.2em; font-size: .94em; color: var(--ink-2); padding-top: clamp(0px, 6vw, 120px); }
.note-title { font-size: 18px; font-weight: 600; letter-spacing: .16em; color: var(--ink); margin-bottom: .2em; }
.note-small { font-size: var(--fs-small); color: var(--ink-3); }
.place__map { grid-column: 6 / span 7; margin-right: calc(-1 * var(--gutter)); }
.place__map img { width: 100%; }
figcaption { font-size: var(--fs-small); color: var(--ink-3); letter-spacing: .14em; margin-top: 12px; }

.place__strip {
  display: flex; gap: clamp(12px, 1.6vw, 28px); align-items: flex-start;
  margin-top: clamp(80px, 10vw, 160px);
  padding-left: clamp(0px, 6vw, 120px);
}
.place__strip li { flex: 0 1 auto; }
.place__strip img { width: 100%; height: auto; object-fit: cover; }
.place__strip .s1 { width: 23%; }
.place__strip .s2 { width: 13%; margin-top: 12%; }
.place__strip .s3 { width: 20%; margin-top: 4%; }
.place__strip .s4 { width: 12%; margin-top: 16%; }
.place__strip .s5 { width: 15%; margin-top: 7%; }

@media (max-width: 899px) {
  .place__intro { grid-template-columns: minmax(0, 1fr) auto; row-gap: 48px; }
  .place__photo { grid-column: 1 / -1; grid-row: 1; margin-right: 0; }
  .place__text { grid-column: 1; grid-row: 2; padding: 0; margin-top: 0; }
  .place__text .lead br { display: none; }
  .place__tate { grid-column: 2; grid-row: 2; margin-top: 0; font-size: clamp(20px, 5vw, 28px); }
  .place__story { grid-template-columns: 1fr; row-gap: 56px; }
  .place__note { grid-column: 1; padding-top: 0; order: 2; max-width: 34em; }
  .place__map { grid-column: 1; margin-right: calc(-1 * var(--gutter)); margin-left: 0; }
  .place__strip { overflow-x: auto; padding-left: 0; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); padding-bottom: 8px; scrollbar-width: thin; }
  .place__strip li { flex: 0 0 auto; }
  .place__strip .s1 { width: 58vw; }
  .place__strip .s2 { width: 34vw; }
  .place__strip .s3 { width: 50vw; }
  .place__strip .s4 { width: 32vw; }
  .place__strip .s5 { width: 40vw; }
}

/* floor plan */
.floor {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(112px, 13vw, 220px);
  align-items: start;
}
.floor__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 48px; margin-bottom: clamp(32px, 4vw, 64px); }
.floor__head p { color: var(--ink-2); }
.floor__plan { grid-column: 1 / span 8; position: relative; }
.floor__mark { position: absolute; right: 0; top: 0; font-family: var(--f-en); font-size: 15px; color: var(--ink-3); }
.plan { width: 100%; height: auto; display: block; overflow: visible; }
.plan__floor { fill: #fff; }
.plan__tatami { fill: var(--sumi-t); }
.z-fill { mix-blend-mode: multiply; transition: opacity .35s ease; }
.z-beni { fill: var(--beni-t); }
.z-ai { fill: var(--ai-t); }
.z-hiwa { fill: var(--hiwa-t); }
.z-sumi { fill: var(--sumi-t); }
.zone { transition: opacity .35s ease; }
.plan.has-focus .zone { opacity: .25; }
.plan.has-focus .zone.is-focus { opacity: 1; }
.plan__walls { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: square; }
.plan__thin { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.plan__room text { font-family: var(--f-ja); font-size: 13px; fill: var(--ink-3); text-anchor: middle; letter-spacing: .08em; }
.plan__room text.v { writing-mode: vertical-rl; }
.plan__label text { font-family: var(--f-ja); font-size: 25px; font-weight: 600; fill: var(--ink); text-anchor: middle; letter-spacing: .2em; }
.plan__label text.s { font-size: 17px; letter-spacing: .14em; }

.floor__legend { grid-column: 9 / span 4; display: grid; gap: 4px; padding-top: 8px; }
.floor__legend button {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; row-gap: 2px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  transition: opacity .3s ease;
}
.floor__legend button:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }
.floor__legend.has-focus button { opacity: .38; }
.floor__legend.has-focus button.is-focus { opacity: 1; }
.chip { grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%; margin-top: 7px; mix-blend-mode: multiply; }
.chip--beni { background: var(--beni-t); box-shadow: inset 0 0 0 1px rgba(162,68,132,.35); }
.chip--ai { background: var(--ai-t); box-shadow: inset 0 0 0 1px rgba(59,72,155,.35); }
.chip--hiwa { background: var(--hiwa-t); box-shadow: inset 0 0 0 1px rgba(153,146,60,.4); }
.chip--sumi { background: var(--sumi-t); box-shadow: inset 0 0 0 1px rgba(38,36,34,.18); }
.chip--awai { background:
  radial-gradient(circle at 30% 62%, rgba(162,68,132,.38) 0 38%, transparent 39%),
  radial-gradient(circle at 70% 62%, rgba(59,72,155,.34) 0 38%, transparent 39%),
  radial-gradient(circle at 50% 30%, rgba(153,146,60,.40) 0 38%, transparent 39%); border-radius: 0; }
.lg-name { font-size: 17px; font-weight: 600; letter-spacing: .14em; }
.lg-text { font-size: 13.5px; line-height: 1.95; color: var(--ink-2); }
.floor__note { grid-column: 9 / span 4; font-size: var(--fs-small); color: var(--ink-3); margin-top: 16px; }
@media (max-width: 899px) {
  .floor { grid-template-columns: 1fr; }
  .floor__plan, .floor__legend, .floor__note { grid-column: 1; }
  .floor__plan { overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .plan { min-width: 560px; }
  .floor__mark { right: var(--gutter); }
  .floor__legend { margin-top: 28px; }
}

/* ---------- information ---------- */
.info__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(64px, 8vw, 128px);
  align-items: start;
}
.info__date { grid-column: 1 / span 9; }
.info__tate { grid-column: 11 / span 2; grid-row: 1 / span 2; justify-self: end; }
.info__list { grid-column: 1 / span 5; grid-row: 2; display: grid; gap: 0; }
.access { grid-column: 6 / span 5; grid-row: 2; padding-left: clamp(0px, 2vw, 32px); }

.bigdate {
  font-family: var(--f-en); font-weight: 300; line-height: .9;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .22em;
  font-variant-numeric: lining-nums;
}
.bigdate__y { font-size: clamp(40px, 5vw, 84px); letter-spacing: .02em; color: var(--ink-2); }
.bigdate__md { font-size: clamp(88px, 15vw, 248px); letter-spacing: -.01em; }
.bigdate__dow { font-size: clamp(26px, 2.8vw, 46px); font-style: italic; display: inline-flex; align-items: baseline; gap: .4em; }
.bigdate__dow .ja { font-family: var(--f-ja); font-style: normal; font-size: .62em; }
.info__time {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .5em;
  font-family: var(--f-en); font-size: clamp(22px, 2.2vw, 36px); font-style: italic; font-weight: 300;
  margin-top: clamp(18px, 2vw, 32px);
}
.info__time span:not(.dash) { font-style: normal; font-weight: 400; font-size: 1.22em; font-variant-numeric: lining-nums; }
.info__time .dash { display: inline-block; width: 2.2em; height: 1px; background: var(--ink); align-self: center; margin-inline: .2em; }
.info__free { margin-top: 1.6em; color: var(--ink-2); }

.info__list > div { display: grid; grid-template-columns: 6.5em 1fr; gap: 1em; padding: 22px 0; border-top: 1px solid var(--line); }
.info__list > div:last-child { border-bottom: 1px solid var(--line); }
.info__list dt { font-size: 13px; letter-spacing: .24em; color: var(--ink-2); padding-top: .25em; }
.info__list dd { line-height: 2; min-width: 0; }
.info__list small { display: block; font-size: var(--fs-small); color: var(--ink-3); line-height: 1.9; margin-top: .4em; }
.maplink {
  display: inline-flex; align-items: center; gap: .6em; margin-top: .9em;
  font-size: 13.5px; letter-spacing: .12em; text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid currentColor;
}
.maplink::after { content: ""; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(1px); }
.maplink:hover { color: var(--ai); }

.access__map { width: 100%; height: auto; display: block; }
.m-river { fill: var(--ai-t); }
.m-park { fill: var(--hiwa-t); }
.m-road { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.m-road--main { stroke: var(--ink-2); stroke-width: 3.4; }
.m-rail { fill: none; stroke: var(--ink); stroke-width: 5; }
.m-rail--tie { stroke: #fff; stroke-width: 3; stroke-dasharray: 12 12; }
.m-route { fill: none; stroke: var(--beni); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .1 11; }
.m-station circle { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.m-label { font-family: var(--f-ja); font-size: 19px; fill: var(--ink-2); letter-spacing: .14em; }
.m-label--small { font-size: 17px; }
.m-label--river { fill: var(--ai); font-size: 20px; letter-spacing: .4em; }
.m-label--park { fill: #6f6a2a; text-anchor: middle; font-size: 19px; }
.m-label--strong { fill: var(--ink); font-size: 23px; font-weight: 600; }
.m-label--venue { fill: var(--ink); font-size: 27px; font-weight: 600; letter-spacing: .2em; }
.m-label--venue-sub { fill: var(--ink-2); font-size: 18px; letter-spacing: .3em; }
.m-north path { fill: var(--ink); }
.m-north text { font-family: var(--f-en); font-size: 20px; text-anchor: middle; fill: var(--ink); }

@media (max-width: 899px) {
  .info__grid { grid-template-columns: minmax(0, 1fr) auto; row-gap: 56px; column-gap: 16px; }
  .info__date { grid-column: 1 / -1; }
  .info__tate { grid-column: 2; grid-row: 2; font-size: clamp(20px, 5vw, 28px); }
  .info__list { grid-column: 1; grid-row: 2; }
  .access { grid-column: 1 / -1; grid-row: 3; }
  .info__list > div { grid-template-columns: 1fr; gap: .2em; }
}

/* ---------- music ---------- */
.music__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(72px, 9vw, 160px);
  align-items: start;
}
.artist { display: grid; gap: 28px; align-content: start; }
.artist figure img { width: 100%; height: auto; }
.artist__body { display: grid; gap: .9em; max-width: 30em; }
.artist__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .7em; font-weight: 400; line-height: 1.3; }
.artist__name .en { font-family: var(--f-en); font-weight: 300; font-size: clamp(30px, 2.6vw, 44px); letter-spacing: .01em; }
.artist__name .ja-name { font-size: clamp(22px, 1.6vw, 28px); font-weight: 500; letter-spacing: .2em; }
.artist__name .ja-sub { font-size: 13px; letter-spacing: .24em; color: var(--ink-2); }
.artist__role { font-family: var(--f-en); font-style: italic; font-size: 18px; color: var(--ink-2); letter-spacing: .02em; margin-top: -.4em; }
.artist__body > p:not(.artist__role) { font-size: .95em; }

.artist--imanishi { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.artist--atarashiiasa { grid-column: 7 / span 6; grid-row: 1; margin-top: clamp(40px, 10vw, 180px); }
.artist--saara { grid-column: 8 / span 4; grid-row: 2 / span 2; }
.artist--soon { grid-column: 2 / span 5; grid-row: 3; align-self: end; margin-bottom: clamp(0px, 6vw, 96px); gap: .6em; padding-left: clamp(0px, 4vw, 64px); border-left: 1px solid var(--line); }
.soon__en { font-family: var(--f-en); font-style: italic; font-weight: 300; font-size: clamp(30px, 3vw, 48px); line-height: 1.2; }
.artist--soon p:last-child { color: var(--ink-2); }

@media (max-width: 899px) {
  .music__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 88px; }
  .artist--imanishi { grid-column: 1 / span 5; grid-row: auto; }
  .artist--atarashiiasa { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
  .artist--saara { grid-column: 2 / span 5; grid-row: auto; }
  .artist--soon { grid-column: 1 / -1; grid-row: auto; margin-bottom: 0; }
}

/* ---------- art ---------- */
.art__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(80px, 9vw, 160px);
  align-items: start;
}
.work { display: grid; gap: .6em; align-content: start; }
.work > p { font-size: .92em; color: var(--ink-2); max-width: 30em; }
.work__pics { display: flex; gap: clamp(10px, 1.2vw, 18px); align-items: flex-end; margin-bottom: 1.2em; }
.work__pics img { min-width: 0; }
.work__name { font-family: var(--f-en); font-weight: 300; font-size: clamp(28px, 2.3vw, 40px); line-height: 1.15; letter-spacing: .01em; }
.work__role { font-size: 13px !important; letter-spacing: .14em; color: var(--ink-3) !important; margin-bottom: .4em; }

.work--anzai { grid-column: 1 / span 6; }
.work--anzai .p1 { width: 34%; }
.work--anzai .p2 { width: 62%; margin-bottom: 18%; }
.work--nakamura { grid-column: 8 / span 4; margin-top: clamp(40px, 12vw, 220px); }
.work--nakamura .p1 { width: 58%; }
.work--nakamura .p2 { width: 34%; margin-bottom: 26%; }
.work--hashiba { grid-column: 2 / span 4; }
.work--hashiba .p1 { width: 100%; }
.work--tanaka { grid-column: 7 / span 6; margin-top: clamp(40px, 8vw, 140px); }
.work--tanaka .p1 { width: 100%; }
.work--iwasaka { grid-column: 1 / span 5; }
.work--iwasaka .work__pics { position: relative; isolation: isolate; }
.work--iwasaka .p1 { width: 100%; }
.work--hyodo { grid-column: 8 / span 4; margin-top: clamp(40px, 10vw, 180px); }
.work__pics--soon { position: relative; height: clamp(160px, 16vw, 240px); width: 100%; }
.work__pics--soon span { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); }
.work__pics--soon span:nth-child(1) { left: 6%; top: 18%; background: rgba(162,68,132,.08); }
.work__pics--soon span:nth-child(2) { left: 30%; top: 18%; background: rgba(59,72,155,.07); }
.work__pics--soon span:nth-child(3) { left: 18%; top: -6%; background: rgba(153,146,60,.09); }

@media (max-width: 899px) {
  .art__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 88px; }
  .work--anzai { grid-column: 1 / -1; }
  .work--nakamura { grid-column: 2 / span 5; margin-top: 0; }
  .work--hashiba { grid-column: 1 / span 5; }
  .work--tanaka { grid-column: 1 / -1; margin-top: 0; }
  .work--iwasaka { grid-column: 2 / span 5; }
  .work--hyodo { grid-column: 1 / span 5; margin-top: 0; }
}

/* ---------- apparel ---------- */
.brand-name { font-family: var(--f-en); font-weight: 300; font-size: clamp(34px, 3vw, 52px); line-height: 1.1; letter-spacing: .02em; display: flex; align-items: baseline; gap: .5em; }
.brand-kana { font-family: var(--f-ja); font-size: 13px; letter-spacing: .24em; color: var(--ink-2); }
.brand-lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.9; }
.brand-block p { color: var(--ink-2); font-size: .94em; }
.brand-block .brand-lead { color: var(--ink); font-size: clamp(17px, .7vw + 13px, 21px); }

.brand--cyc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; }
.cyc__strip {
  grid-column: 1 / -1;
  display: flex; gap: clamp(10px, 1.2vw, 18px); align-items: flex-start;
  overflow-x: auto; scroll-snap-type: x proximity;
  margin-right: calc(-1 * var(--gutter));
  padding-bottom: 14px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.cyc__strip img { flex: 0 0 auto; width: clamp(170px, 17vw, 280px); height: auto; scroll-snap-align: start; }
.cyc__strip img:nth-child(even) { margin-top: clamp(24px, 4vw, 72px); }
.brand--cyc .brand-block__body { grid-column: 2 / span 6; display: grid; gap: 1.2em; max-width: 36em; }

.apparel__trio {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px); row-gap: 88px;
  margin-top: clamp(112px, 12vw, 200px); align-items: start;
}
.apparel__trio .brand-block { display: grid; gap: 1em; align-content: start; }
.apparel__trio figure img, .pics2 img { width: 100%; height: auto; }
.brand--peopleap { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.pics2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(10px, 1.2vw, 18px); align-items: start; margin-bottom: 1.2em; }
.pics2 img:last-child { margin-top: 26%; }
.brand--qe { grid-column: 7 / span 4; grid-row: 1; margin-top: clamp(40px, 9vw, 160px); }
.brand--qe figure { margin-bottom: 1.2em; width: 82%; }
.brand--talky { grid-column: 8 / span 4; grid-row: 2; margin-top: clamp(24px, 4vw, 64px); }
.brand--talky figure { width: 64%; }
.brand--talky figure { margin-bottom: 1.2em; }

@media (max-width: 899px) {
  .brand--cyc { grid-template-columns: 1fr; }
  .brand--cyc .brand-block__body { grid-column: 1; }
  .cyc__strip { margin-right: calc(-1 * var(--gutter)); }
  .apparel__trio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .brand--peopleap { grid-column: 1 / -1; }
  .brand--peopleap { grid-row: auto; }
  .brand--qe { grid-column: 1 / span 5; grid-row: auto; margin-top: 0; }
  .brand--talky { grid-column: 2 / span 5; grid-row: auto; margin-top: 0; }
}

/* ---------- credit ---------- */
.credit__list { display: grid; gap: 0; max-width: 820px; margin-left: clamp(0px, 8vw, 140px); }
.credit__list > div { display: grid; grid-template-columns: 9em 1fr; gap: 1em; padding: 26px 0; border-top: 1px solid var(--line); }
.credit__list > div:last-child { border-bottom: 1px solid var(--line); }
.credit__list dt { font-size: 13px; letter-spacing: .24em; color: var(--ink-2); padding-top: .3em; }
.credit__list dd { font-size: 1.05em; }
.credit__list ul { display: flex; flex-wrap: wrap; gap: .2em 0; }
.credit__list li:not(:last-child)::after { content: "／"; color: var(--ink-3); margin: 0 .5em; }
@media (max-width: 640px) {
  .credit__list > div { grid-template-columns: 1fr; gap: .4em; }
  .credit__list ul { display: grid; }
  .credit__list li::after { display: none; }
}

/* ---------- footer ---------- */
.site-footer { position: relative; overflow: hidden; padding-block: clamp(96px, 12vw, 180px) clamp(40px, 5vw, 64px); }
.footer__circles { position: absolute; right: -6vw; bottom: -10vw; width: clamp(260px, 34vw, 520px); aspect-ratio: 1; pointer-events: none; }
.footer__circles span { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: multiply; }
.footer__circles span:nth-child(1) { left: 0; top: 30%; background: rgba(162,68,132,.16); }
.footer__circles span:nth-child(2) { left: 34%; top: 30%; background: rgba(59,72,155,.14); }
.footer__circles span:nth-child(3) { left: 17%; top: 2%; background: rgba(153,146,60,.18); }
.footer__inner { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 28px 64px; align-items: end; }
.footer__brand { display: flex; align-items: flex-end; gap: 16px; }
.footer__brand img:first-child { width: 60px; }
.footer__brand img:last-child { width: 128px; margin-bottom: 4px; }
.footer__meta { font-size: 13.5px; color: var(--ink-2); letter-spacing: .12em; line-height: 2; }
.footer__copy { grid-column: 1 / -1; font-family: var(--f-en); color: var(--ink-3); letter-spacing: .06em; margin-top: 24px; }
@media (max-width: 640px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__circles { right: -28vw; bottom: -30vw; width: 300px; }
}