:root{
--paper: oklch(0.972 0.006 80);
--paper-2: oklch(0.955 0.008 78);
--ink: oklch(0.19 0.012 60);
--ink-soft: oklch(0.35 0.012 60);
--mist: oklch(0.88 0.006 70);
--mist-2: oklch(0.82 0.006 70);
--clay: oklch(0.52 0.065 48);
--clay-soft: oklch(0.72 0.04 55);
--line: oklch(0.78 0.008 75);
--f-display: "Zen Kaku Gothic New", "Helvetica Neue", Helvetica, Arial, sans-serif;
--f-logo: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
--f-body: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--f-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
--f-mono: "JetBrains Mono", ui-monospace, monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
/* ============ brand logo (inline SVG) ============
親の font-size に連動して 1em で拡縮。
currentColor で topbar の明暗切替にも追従。
SVG viewBox は 900x320（左側に寄った配置）— 親側で中央寄せ等を制御。 */
.osaa-logo{
display: block;
height: 1em;
width: auto;
vertical-align: baseline;
flex-shrink: 0;
}
/* hero title の巨大ロゴ — font-size のモーフをそのまま活用 */
.hero-title{ display: inline-flex; align-items: flex-end; }
.hero-title .osaa-logo{ height: 0.53em; }
/* topbar のブランド — 固定サイズ */
.topbar .brand{ display: inline-flex; align-items: center; }
.topbar .brand .osaa-logo{ height: 11px; }
/* footer の巨大マーク */
footer.site .big{ display: inline-flex; align-items: center; line-height: 0.85; }
footer.site .big .osaa-logo{ height: 0.45em; }
/* end-weave のキャプション内 */
.end-weave .weave-caption .mark{ display: inline-flex; align-items: center; }
.end-weave .weave-caption .mark .osaa-logo{ height: 23px; }
/* philosophy 見出しの「それが（改行）osaa」の SVG 部分。
見出し文字の細さに合わせて stroke を無効化し、元のパスのみ描画（細字バージョン）。 */
.philosophy-layout .ph-side h2.display .osaa-logo{
display: inline-block;
vertical-align: baseline;
height: 0.7em;
stroke: none;
}
body{
font-family: var(--f-body);
color: var(--ink);
background: var(--paper);
font-weight: 400;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
letter-spacing: 0.005em;
}
/* lang toggle */
:root[data-lang="ja"] .en{display:none;}
:root[data-lang="en"] .ja{display:none;}
/* density */
:root[data-density="loose"] main section{padding-top: 14rem; padding-bottom: 14rem;}
:root[data-density="tight"] main section{padding-top: 6rem; padding-bottom: 6rem;}
/* metaphor */
:root[data-metaphor="on"] .weave-rule{display:block;}
:root[data-metaphor="on"] body{background-image: linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), color-mix(in oklch, var(--line) 30%, transparent) 100%); background-size: 8.3333% 100%;}
/* typography pairing alt */
:root[data-type="serifhead"] .display-sans{font-family: var(--f-jp); letter-spacing: 0.02em; font-weight: 400;}
:root[data-type="serifhead"] h1.display, :root[data-type="serifhead"] h2.display{font-family: var(--f-jp); font-weight: 400;}
/* color palette alt */
:root[data-palette="mono"]{
--clay: oklch(0.3 0.005 60);
--clay-soft: oklch(0.55 0.005 60);
}
:root[data-palette="indigo"]{
--clay: oklch(0.38 0.07 255);
--clay-soft: oklch(0.6 0.05 255);
}
/* ============ layout utilities ============ */
.wrap{max-width: 1440px; margin: 0 auto; padding: 0 48px;}
.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap: 24px;}
.rule{height:1px; background: var(--line); width:100%;}
.mono{font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);}
.caps{font-family: var(--f-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 500;}
h1,h2,h3,h4{margin:0; font-weight: 400;}
p{margin:0;}
.display{
font-family: var(--f-display);
font-weight: 500; /* Zen Kaku Gothic New 適用に合わせて若干太く */
letter-spacing: -0.02em;
line-height: 1.2;
}
h1.display{font-size: clamp(48px, 7vw, 108px);}
h2.display{font-size: clamp(34px, 4.6vw, 74px);}
h3.display{font-size: clamp(24px, 2.5vw, 40px); letter-spacing: -0.01em; line-height: 1.3;}
.jp{font-family: var(--f-jp); font-weight: 300;}
.jp-poem{font-family: var(--f-jp); font-weight: 300; letter-spacing: 0.08em; line-height: 2.1;}
/* ============ top nav ============ */
.topbar{
position: fixed; top:0; left:0; right:0;
z-index: 50;
padding: 22px 72px; /* 左右 72px — 画像スライダー(hero 48px inset)よりさらに 24px 内側にロゴ/ナビを収める */
display:flex; align-items:center; justify-content:space-between;
color: var(--paper);
pointer-events: none;
transition: color .4s ease;
}
.topbar.is-on-light{
color: var(--ink);
}
.topbar > *{pointer-events:auto;}
.topbar .brand{
color: inherit;
text-decoration: none;
font-family: var(--f-logo);
font-weight: 500;
font-size: 16px;
letter-spacing: 0.24em;
text-transform: lowercase;
}
.topbar nav{display:flex; gap: 28px;}
.topbar nav a{
color: inherit; text-decoration:none;
font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
opacity: 0.85;
}
.topbar nav a:hover{opacity:1;}
.lang-toggle{
display:inline-flex; gap: 10px; align-items:center;
font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em;
}
.lang-toggle button{
appearance:none; background:transparent; color: inherit; border: 0;
padding: 4px 2px; cursor: pointer; font: inherit; opacity: 0.5;
}
.lang-toggle button[aria-pressed="true"]{opacity: 1; text-decoration: underline; text-underline-offset: 4px;}
.lang-toggle .sep{opacity: 0.4;}
/* ============ hero ============ */
.hero{
position: relative;
min-height: 100vh;
padding: 0 48px 56px; /* top 0: 画像スライダーを画面上辺にぴったり付ける */
display: grid;
grid-template-rows: auto 1fr auto;
gap: 56px;
}
.hero .eyebrow{
display:flex; gap: 40px; align-items:baseline; justify-content: space-between;
}
.hero .eyebrow .dot{width:6px; height:6px; border-radius:50%; background: var(--clay); display:inline-block; margin-right: 10px; vertical-align: middle; transform: translateY(-2px);}
.hero-main{
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
align-items: stretch;
width: 100%;
}
.hero-title{
font-family: var(--f-logo);
font-weight: 500;
font-size: clamp(72px, 11vw, 160px);
line-height: 0.82;
letter-spacing: 0.24em;
text-transform: lowercase;
margin: 0;
}
.hero-title em{font-style: italic; font-weight: 500;}
.hero-triptych{
grid-column: 1 / -1;
display: grid;
grid-template-columns: 4fr 5fr 3fr;
gap: 20px;
align-items: stretch;
min-height: 60vh;
}
.hero-triptych .frame{
position: relative;
overflow: hidden;
background: #e8e4dc;
}
.hero-triptych .frame img{
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.92);
}
.hero-triptych .frame.tall{aspect-ratio: 4 / 5;}
.hero-triptych .frame.wide{aspect-ratio: 3 / 2;}
.hero-triptych .col-left{display:flex; flex-direction:column; gap: 20px; justify-content:flex-end;}
.hero-triptych .col-mid{display:flex; flex-direction:column; gap: 20px;}
.hero-triptych .col-right{display:flex; flex-direction:column; gap: 20px; justify-content:space-between;}
.hero-triptych .caption{
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-soft);
display:flex; justify-content: space-between; align-items: baseline;
}
/* ============ hero stage (slit-reveal slider) ============ */
.hero-stage{
grid-column: 1 / -1;
display: block;
min-height: 64vh;
}
.hero-stage .stage-main{
position: relative;
overflow: hidden;
background: #e6e2da;
aspect-ratio: 16 / 9;
width: 100%;
}
/* 上端グラデーション — 白文字ヘッダーの可読性を自然に底上げ（写真に薄い幕をかける手法） */
.hero-stage .stage-main::before{
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 140px;
background: linear-gradient(to bottom, rgba(0,0,0,0.32), rgba(0,0,0,0));
pointer-events: none;
z-index: 3;
}
.hero-stage .stage-side, .hero-stage .stage-thumb{display: none;}
/* slit-reveal slider — one image per slide, animated band-reveal via layered bars */
.slit-stage{position: absolute; inset: 0; overflow: hidden;}
.slit-stage .slide{
position: absolute; inset: 0;
opacity: 0;
pointer-events: none;
}
.slit-stage .slide.is-active{opacity: 1; z-index: 2;}
.slit-stage .slide.is-prev{opacity: 1; z-index: 1;}
.slit-stage .slide-img{
position: absolute; inset: 0;
background-size: cover;
background-position: center bottom;
transform-origin: 50% 100%;
animation: kb 24s ease-out both;
animation-play-state: paused;
will-change: transform;
filter: saturate(0.92);
}
.slit-stage .slide.is-active .slide-img{animation-play-state: running;}
/* band-reveal overlay: 9 vertical bars that slide down to reveal the image */
.slit-stage .slide-bars{
position: absolute; inset: 0;
display: grid;
grid-template-columns: repeat(var(--slits, 9), 1fr);
pointer-events: none;
}
.slit-stage .slide-bars .bar{
background: var(--paper, #f5f2ec);
transform: translateY(0%);
transition: none;
}
/* When a slide becomes active (entering), its bars slide up to reveal */
.slit-stage .slide.is-entering .slide-bars .bar{
animation: barReveal 1.0s cubic-bezier(0.72, 0, 0.18, 1) forwards;
animation-delay: calc(var(--i, 0) * 65ms);
}
/* When a slide leaves, its bars slide down to cover */
.slit-stage .slide.is-leaving .slide-bars .bar{
transform: translateY(-101%);
animation: barCover 0.85s cubic-bezier(0.72, 0, 0.18, 1) forwards;
animation-delay: calc(var(--i, 0) * 40ms);
}
/* Active slide without transition classes: bars fully out of the way */
.slit-stage .slide.is-active:not(.is-entering) .slide-bars .bar{
transform: translateY(-101%);
}
@keyframes barReveal{
0%{transform: translateY(0%);}
100%{transform: translateY(-101%);}
}
@keyframes barCover{
0%{transform: translateY(-101%);}
100%{transform: translateY(0%);}
}
@keyframes kb{
0%{transform: scale(1.04) translate(0, 0);}
100%{transform: scale(1.12) translate(-1.2%, -1.4%);}
}
/* paper-warm veil during transition */
.slit-stage .veil{
position: absolute; inset: 0;
pointer-events: none;
opacity: 0;
z-index: 3;
background:
radial-gradient(60% 80% at 50% 50%, rgba(255,252,246,0.22), rgba(255,252,246,0) 70%);
}
.slit-stage.is-transitioning .veil{animation: veilPass 1.2s ease-out both;}
@keyframes veilPass{
0%{opacity: 0;}
40%{opacity: 1;}
100%{opacity: 0;}
}
/* stage chrome */
.stage-caption{
position: absolute;
left: 20px; bottom: 20px; z-index: 4;
color: var(--paper);
text-shadow: 0 1px 14px rgba(0,0,0,0.35);
font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
display: grid; gap: 6px;
}
.stage-caption .kanji{
font-family: var(--f-display); font-size: 32px; letter-spacing: 0; text-transform: none;
line-height: 1; font-weight: 300;
}
.stage-index{
position: absolute; right: 20px; top: 20px; z-index: 4;
color: var(--paper);
font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em;
display: flex; gap: 10px; align-items: baseline;
text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
.stage-index .num{font-family: var(--f-display); font-size: 22px; letter-spacing: -0.02em; line-height: 1; font-weight: 300;}
.stage-progress{
position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
height: 2px; background: rgba(255,255,255,0.2);
}
.stage-progress .bar{
height: 100%; width: 0%; background: rgba(255,255,255,0.92);
transition: width 0.12s linear;
}
.stage-thumb .thumb-label{
position: absolute; left: 14px; top: 14px; z-index: 2;
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--paper);
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.stage-thumb img{
width: 100%; height: 100%; object-fit: cover;
filter: saturate(0.9);
transition: transform 1.6s ease;
}
.stage-thumb:hover img{transform: scale(1.03);}
/* dot nav removed per design — progress bar still shows below */
.hero-title-wrap{
grid-column: 1 / -1;
display:grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end;
padding-top: 12px;
/* border-top: 1px solid var(--line); 一旦非表示。戻す場合はコメント解除 */
margin-top: 8px;
}
.hero-title-wrap .title-col{grid-column: 1 / span 9; display: flex; align-items: center; gap: 40px;}
.hero-title-wrap .title-col .hero-title{flex-shrink: 0;}
.hero-title-wrap .kicker{
font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-soft);
max-width: 32ch;
line-height: 1.7;
white-space: nowrap;
}
.hero-title-wrap .tag-col{
grid-column: 7 / span 3; align-self: end; padding-bottom: 18px;
display: grid; gap: 18px;
font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
border-left: 1px solid var(--line); padding-left: 24px;
}
.hero-title-wrap .tag-col .k{color: var(--ink); font-family: var(--f-display); font-size: 22px; letter-spacing: 0; text-transform: none; line-height: 1; font-weight: 300;}
.hero-title-wrap .meta-col{grid-column: 10 / span 3; text-align: right; align-self: end; padding-bottom: 18px;}
/* ========================================================================
Sticky / morphing logo-band
------------------------------------------------------------------------
The hero-title-wrap smoothly transforms into a compact fixed header
as you scroll past it. Instead of snap-toggling two states, we drive
a continuous progress variable (--pin-p: 0 → 1) from JS based on
scroll position. All visual properties are interpolated on that var,
so the transition is seamless.
======================================================================== */
.title-band-sentinel{
/* zero-height marker used by the observer to know when to start pinning */
height: 0; width: 100%; pointer-events: none;
}
.title-band-spacer{
/* reserves vertical space while the band is position:fixed.
Height is set by JS = natural height of the band. */
display: none;
}
body.is-band-pinned .title-band-spacer{
display: block;
}
/* The pinned band is actually position:fixed from the moment it locks,
but we use transform/opacity/font-size interpolation to make the
transition feel continuous rather than a snap. */
.hero-title-wrap{
/* progress variable: 0 = fully expanded in hero, 1 = fully compact at top */
--pin-p: 0;
/* pre-declare transitions for the final snap at the end (<80ms window
in case JS progress can't sample every frame). Mostly the visual
interp is driven by --pin-p, these just smooth micro-jitter. */
transition: background-color .25s ease, box-shadow .25s ease;
}
/* NOTE (mobile Phase 2 対応予定):
この is-pinned ブロックと下の .title-col / .meta-col の grid-column 指定は
親 .hero-title-wrap が 12 カラムグリッドである前提。mobile で親が
grid-template-columns: 1fr に畳まれた時、pinned 状態で grid-column: 9/span 4
などが参照できず meta-col が想定外位置に落ちる可能性あり。
Phase 2 で @media (max-width: 640px) 内で .meta-col を display:none にして回避予定。*/
.hero-title-wrap.is-pinned{
position: fixed;
top: 0; left: 0; right: 0;
z-index: 250; /* above topbar (50), above rest-card modal (200) so pinned header
stays visible even over the Objects detail modal; below curtain (9999)
and below detail-close (260) */
/* Critical: to avoid ANY visual jump at the moment the band switches
to position:fixed (p=0), we must mirror the band's NATURAL box:
- width = 1110 (= viewport - 2*48) → padding-left/right 48
- padding-top = 12px → same as .hero-title-wrap
- padding-bottom = 0 → same
- min-height = natural height (measured by JS, set via --band-h)
- border-top: 1px transparent → occupies same 1px as the
natural border-top
- align-items: end → keeps title at bottom
Only at p>0 do these properties ease to the pinned values. */
/* background + border fade in with progress */
background-color: color-mix(in oklch, var(--paper) calc(var(--pin-p) * 100%), transparent);
border-top: 1px solid transparent;
border-bottom: 1px solid color-mix(in oklch, var(--line) calc(var(--pin-p) * 100%), transparent);
box-shadow: 0 calc(var(--pin-p) * 1px) 0 color-mix(in oklch, var(--line) calc(var(--pin-p) * 30%), transparent);
/* Side padding stays 48 (= natural hero-main padding). */
padding-left: 48px;
padding-right: 48px;
/* padding: p=0 は natural（12/0）、p=1 は上下均等 6/6 に */
padding-top: calc(12px - var(--pin-p) * 6px);
padding-bottom: calc(var(--pin-p) * 6px);
/* height: p=0 は natural、p=1 は極小に（28px）。SVG ロゴ高さ（19px）+ 上下 padding 12px に調整 */
min-height: calc(var(--band-h, 116px) - var(--pin-p) * (var(--band-h, 116px) - 28px));
margin-top: 0;
gap: 24px;
/* keep title anchored to the bottom of the band throughout — exactly
as it was in the natural layout. */
align-items: end;
}
/* title-col: keep existing layout, but the big wordmark shrinks continuously */
.hero-title-wrap.is-pinned .title-col{
/* span narrows slightly so meta-col has room, but continuously */
grid-column: 1 / span 8;
align-items: end;
gap: calc(40px - var(--pin-p) * 12px);
padding-bottom: calc(var(--pin-p) * 4px);
}
/* Hero wordmark continuously shrinks from its natural size to ~36px.
To avoid ANY size jump at the moment the band switches to
position:fixed (p=0), the "start" size MUST exactly match the
natural .hero-title computed size. In the cascade, h1.display wins
over .hero-title, so the effective size is clamp(48px, 7vw, 108px).
We replicate that with min(108px, max(48px, 7vw)). */
.hero-title-wrap.is-pinned .hero-title{
--start-size: min(108px, max(48px, 7vw));
font-size: calc(var(--start-size) + (36px - var(--start-size)) * var(--pin-p));
/* p=0 は 0.82（natural）、p=1 は 0.5 で h1 ボックスを SVG 高さ（19px）にタイトに合わせる */
line-height: calc(0.82 - var(--pin-p) * 0.32);
letter-spacing: calc(0.24em - var(--pin-p) * 0.02em);
}
.hero-title-wrap.is-pinned .kicker{
padding-bottom: calc(18px - var(--pin-p) * 18px);
/* kicker is the small tagline; we fade it out as the band compacts
so the header stays uncluttered once pinned. */
opacity: calc(1 - var(--pin-p));
max-width: calc(32ch - var(--pin-p) * 20ch);
font-size: calc(11px - var(--pin-p) * 1px);
transform: translateY(calc(var(--pin-p) * -8px));
/* collapse height at p=1 so title-col row height shrinks with the band */
max-height: calc(60px - var(--pin-p) * 60px);
overflow: hidden;
}
.hero-title-wrap.is-pinned .meta-col{
grid-column: 9 / span 4; /* pinned時は4カラム分に拡幅して横一列で収める */
padding-bottom: calc(18px - var(--pin-p) * 18px);
align-self: end;
/* Natural font-size is inherited = 16px. Compact it to 11px at p=1. */
font-size: calc(16px - var(--pin-p) * 5px);
}
.hero-title-wrap.is-pinned .meta-col .mono:first-child{
/* "Ø Launch" — fade out as we compact. Start max-height at ~30px
(enough to show the natural 16px/line at p=0), shrink to 0 at p=1. */
opacity: calc(1 - var(--pin-p));
max-height: calc(30px - var(--pin-p) * 30px);
overflow: hidden;
margin-bottom: calc(8px - var(--pin-p) * 8px);
}
.hero-title-wrap.is-pinned .meta-col .mono:last-child{
/* inner font-size is set inline to 13px — respect it at p=0, shrink
toward 11px at p=1. line-height natural is ~1.55; keep that at p=0
and ease to 1.5 at p=1 (slightly tighter for compact state). */
font-size: calc(13px - var(--pin-p) * 2px) !important;
line-height: calc(1.55 - var(--pin-p) * 0.05);
}
/* meta-line — 非 pinned は縦積み（meta-group-clone は非表示）、pinned は横スクロール ticker */
.hero-title-wrap .meta-col .meta-line .meta-track{ display: block; }
.hero-title-wrap .meta-col .meta-line .meta-group{ display: block; }
.hero-title-wrap .meta-col .meta-line .part{ display: block; }
.hero-title-wrap .meta-col .meta-line .meta-group-clone{ display: none; }
/* pinned: ticker ループ */
.hero-title-wrap.is-pinned .meta-col .meta-line{
overflow: hidden;
white-space: nowrap;
text-align: left; /* ticker は左から流れるので強制左寄せ */
}
.hero-title-wrap.is-pinned .meta-col .meta-line .meta-track{
display: inline-flex;
animation: meta-ticker 22s linear infinite;
will-change: transform;
}
.hero-title-wrap.is-pinned .meta-col .meta-line .meta-group,
.hero-title-wrap.is-pinned .meta-col .meta-line .meta-group-clone{
display: inline-flex;
flex-shrink: 0;
}
.hero-title-wrap.is-pinned .meta-col .meta-line .part{
display: inline-block;
}
.hero-title-wrap.is-pinned .meta-col .meta-line .part::after{
content: "·";
color: var(--clay);
margin: 0 14px;
}
@keyframes meta-ticker{
from{ transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
.hero-title-wrap.is-pinned .meta-col .meta-line .meta-track{
animation: none;
}
}
/* topbar cross-fades out on the same progress — smooth, not a snap */
.topbar{
/* overridden inline by JS via --pin-p; keep fallback for reduced motion */
--pin-p: 0;
}
.topbar.is-swapping{
opacity: calc(1 - var(--pin-p));
transform: translateY(calc(var(--pin-p) * -14px));
pointer-events: auto;
}
.topbar.is-swapping[data-pinned="1"]{
pointer-events: none;
}
.hero-foot{
display:flex; justify-content: space-between; align-items: end;
margin-top: 120px;
font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-soft);
}
.scroll-cue{display:flex; gap: 14px; align-items:center;}
.scroll-cue .line{width:48px; height:1px; background: var(--ink); animation: pulse 3.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.25;} 50%{opacity:1;}}
/* ============ statement ============ */
.statement-sec{
padding: 6rem 48px 10rem;
position: relative;
}
.statement-sec .wrap-inner{max-width: 1340px; margin: 0 auto;}
.poem{
display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
}
.poem .left{grid-column: 1 / span 5;}
.poem .right{grid-column: 7 / span 6;}
.poem .mono{margin-bottom: 56px;}
.poem-lines{
font-family: var(--f-jp);
font-weight: 300;
font-size: clamp(20px, 1.7vw, 26px);
line-height: 2.1;
letter-spacing: 0.08em;
color: var(--ink);
}
.poem-lines .stanza{margin-bottom: 2em;}
.poem-lines .stanza:last-child{margin-bottom:0;}
.gloss{
font-family: var(--f-body);
font-weight: 300;
font-size: 14px;
line-height: 1.9;
color: var(--ink-soft);
max-width: 36ch;
}
.gloss strong{font-weight: 500; color: var(--ink);}
.gloss + .gloss{margin-top: 2em;}
/* ============ philosophy layout (editorial) ============ */
.philosophy-layout{
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 32px;
row-gap: 0;
position: relative;
align-items: start;
}
/* subtle vertical rule between columns — col 6 と col 7 の境界（中央）に配置 */
.philosophy-layout::before{
content: "";
position: absolute;
top: 8px; bottom: 8px;
left: 50%;
width: 1px;
background: linear-gradient(to bottom, transparent 0%, var(--line) 12%, var(--line) 88%, transparent 100%);
opacity: 0.7;
pointer-events: none;
}
.philosophy-layout .ph-side{
grid-column: 1 / span 6; /* was 2 / span 4 — 見出しが折返さないよう拡幅 */
padding-top: 8px;
position: sticky;
top: 120px;
align-self: start;
}
.philosophy-layout .ph-poem{
grid-column: 7 / span 6; /* was 7 / span 5 — 右側も対称に拡幅 */
padding-top: 8px;
}
.philosophy-layout .ph-side .mono{
display: flex;
align-items: center;
gap: 12px;
color: var(--ink-soft);
}
/* ph-side 見出しは
による意図的な2行構成。slit-reveal で .sr-content が挟まるため span を深い descendant として指定。 */
.philosophy-layout .ph-side h2.display .ja,
.philosophy-layout .ph-side h2.display .en{
white-space: nowrap;
}
.philosophy-layout .ph-side .mono::after{
content: "";
flex: 1;
height: 1px;
background: var(--line);
transform: translateY(1px);
}
.philosophy-layout .ph-poem .poem-lines{
font-family: var(--f-jp);
font-weight: 300;
font-size: clamp(19px, 1.45vw, 23px);
line-height: 2.1;
letter-spacing: 0.06em;
color: var(--ink);
}
.philosophy-layout .ph-poem .poem-lines .stanza{
margin-bottom: 2.2em;
position: relative;
}
.philosophy-layout .ph-poem .poem-lines .stanza:last-child{margin-bottom: 0;}
/* small marginalia index numbers for stanzas */
.philosophy-layout .ph-poem .poem-lines .stanza::before{
content: counter(stanza, decimal-leading-zero);
counter-increment: stanza;
position: absolute;
left: -56px;
top: 0.6em;
font-family: var(--f-mono, ui-monospace, monospace);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--ink-soft);
opacity: 0.55;
}
.philosophy-layout .ph-poem .poem-lines{counter-reset: stanza;}
/* decorative glyph anchoring the side column */
.philosophy-layout .ph-side .ph-glyph{
margin-top: 56px;
display: flex;
align-items: center;
gap: 14px;
color: var(--ink-soft);
}
.philosophy-layout .ph-side .ph-glyph svg{
width: 44px; height: 44px;
flex: none;
opacity: 0.8;
}
.philosophy-layout .ph-side .ph-glyph .cap{
font-family: var(--f-mono, ui-monospace, monospace);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-soft);
}
@media (max-width: 980px){
.philosophy-layout{grid-template-columns: 1fr; column-gap: 0;}
.philosophy-layout::before{display:none;}
.philosophy-layout .ph-side,
.philosophy-layout .ph-poem{
grid-column: 1 / -1;
position: static;
}
.philosophy-layout .ph-poem{margin-top: 64px;}
.philosophy-layout .ph-poem .poem-lines .stanza::before{
position: static;
display: block;
margin-bottom: 8px;
}
}
/* ============ marquee ============ */
.marquee{
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 22px 0;
overflow: hidden;
white-space: nowrap;
background: var(--paper);
}
.marquee-track{
display: inline-flex; gap: 80px;
animation: slide 60s linear infinite;
font-family: var(--f-display); font-weight: 300; font-size: 22px; letter-spacing: -0.01em;
}
.marquee-track span{display:inline-flex; align-items:center; gap: 80px;}
.marquee-track .sep{width:6px; height:6px; background: var(--clay); border-radius: 50%;}
@keyframes slide{from{transform:translateX(0);} to{transform:translateX(-50%);}}
/* ============ origin / dialogue ============ */
.origin{
padding: 9rem 48px;
}
.origin-grid{
max-width: 1340px; margin: 0 auto;
display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
}
.origin .sec-label{grid-column: 1 / span 2;}
.origin .intro{
grid-column: 4 / span 6;
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(26px, 2.4vw, 38px);
line-height: 1.35;
letter-spacing: -0.01em;
}
.origin .intro .jp{display:block; margin-top: 1.2em; font-size: 0.62em; line-height: 2; color: var(--ink-soft); letter-spacing: 0.05em;}
.origin .body{
grid-column: 4 / span 5; grid-row: 2;
margin-top: 120px;
font-size: 15px; line-height: 1.85; color: var(--ink-soft);
max-width: 48ch;
}
.origin .body p + p{margin-top: 1.6em;}
.origin .aside{
grid-column: 10 / span 3; grid-row: 2;
margin-top: 120px;
border-top: 1px solid var(--line);
padding-top: 20px;
}
.origin .aside dl{margin:0; display:grid; grid-template-columns: 1fr; gap: 18px;}
.origin .aside dt{font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);}
.origin .aside dd{margin:4px 0 0; font-family: var(--f-display); font-size: 18px; font-weight: 400;}
.origin .aside dd small{display:block; font-size: 11px; color: var(--ink-soft); font-family: var(--f-mono); letter-spacing: 0.08em; margin-top: 4px; font-weight: 300;}
/* ============ collection / photo lanes ============ */
.lane{
padding: 4rem 48px 8rem;
max-width: 1440px; margin: 0 auto;
}
.lane-head{
display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
padding: 0 0 56px;
}
.lane-head .l{grid-column: 1/ span 5;}
.lane-head .r{grid-column: 8/ span 5; align-self:end;}
.photos-3{
display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
}
.ph{
position: relative;
background: var(--mist);
overflow: hidden;
}
.ph::after{
content: attr(data-label);
position: absolute;
bottom: 14px; left: 14px;
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink);
background: color-mix(in oklch, var(--paper) 85%, transparent);
padding: 6px 10px;
border: 1px solid var(--line);
}
.ph.tall{aspect-ratio: 3 / 4;}
.ph.wide{aspect-ratio: 16 / 10;}
.ph.square{aspect-ratio: 1;}
.ph.hero-img{aspect-ratio: 5 / 4;}
/* striped tonal placeholder */
.ph{
background:
repeating-linear-gradient(
180deg,
oklch(0.78 0.005 70) 0 2px,
oklch(0.82 0.005 70) 2px 5px,
oklch(0.76 0.005 70) 5px 8px,
oklch(0.85 0.007 70) 8px 14px
);
}
.ph.dark{
background:
repeating-linear-gradient(
180deg,
oklch(0.28 0.005 60) 0 2px,
oklch(0.32 0.005 60) 2px 5px,
oklch(0.26 0.005 60) 5px 8px,
oklch(0.36 0.005 60) 8px 14px
);
color: var(--paper);
}
.ph.dark::after{background: color-mix(in oklch, var(--ink) 85%, transparent); color: var(--paper); border-color: color-mix(in oklch, var(--paper) 30%, transparent);}
.ph.clay{
background:
repeating-linear-gradient(
180deg,
oklch(0.56 0.06 50) 0 2px,
oklch(0.6 0.06 50) 2px 5px,
oklch(0.52 0.06 50) 5px 8px,
oklch(0.64 0.05 50) 8px 14px
);
}
/* ============ restaurants ============ */
.restaurants{
padding: 10rem 48px;
background: var(--paper-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.restaurants .inner{max-width: 1340px; margin: 0 auto;}
.restaurants .rest-head{
display:grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
margin-bottom: 96px;
}
.restaurants .rest-head .l{grid-column: 1/ span 5;}
.restaurants .rest-head .r{grid-column: 7/ span 5;}
.rest-list{display: flex; flex-direction: column; gap: 0;}
.rest-item{
display: grid; grid-template-columns: 80px 1.2fr 1fr 1fr 180px; gap: 32px;
align-items: center;
padding: 36px 0;
border-top: 1px solid var(--line);
cursor: pointer;
transition: padding .4s ease;
position: relative;
}
.rest-item:last-child{border-bottom: 1px solid var(--line);}
.rest-item .no{font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-soft);}
.rest-item .name{font-family: var(--f-display); font-size: clamp(24px, 2.4vw, 40px); font-weight: 400; letter-spacing: -0.01em;}
.rest-item .city{font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;}
.rest-item .tag{font-size: 13px; color: var(--ink-soft); max-width: 28ch;}
.rest-item .arrow{text-align: right; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);}
.rest-item .expand{
grid-column: 1 / -1;
display: grid; grid-template-columns: 80px 1fr 1fr; gap: 32px;
max-height: 0; overflow: hidden;
opacity: 0;
transition: max-height .5s ease, opacity .4s ease, margin .4s ease;
}
.rest-item.open{padding: 48px 0 56px;}
.rest-item.open .expand{max-height: 1200px; opacity: 1; margin-top: 40px;}
.rest-item .expand .pad{grid-column: 2 / span 2; display:grid; grid-template-columns: 1.2fr 1fr; gap: 48px;}
.rest-item .expand .ph{aspect-ratio: 16/9;}
.rest-item .expand p{font-size: 14px; line-height: 1.85; color: var(--ink-soft); max-width: 40ch;}
.rest-item .expand .meta{margin-top: 20px; display:grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 12px;}
.rest-item .expand .meta dt{font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px;}
.rest-item .expand .meta dd{margin: 0; font-family: var(--f-display); font-size: 15px;}
.rest-item:hover .arrow{color: var(--clay);}
/* ============ exhibition ============ */
.exhibition{
padding: 11rem 48px;
background: var(--ink);
color: var(--paper);
}
.exhibition .inner{max-width: 1340px; margin: 0 auto; display:grid; grid-template-columns: repeat(12,1fr); gap: 24px;}
.exhibition .label{grid-column: 1/ span 3; color: color-mix(in oklch, var(--paper) 70%, transparent);}
.exhibition .main{grid-column: 4/ span 9;}
.exhibition h2.display{color: var(--paper); font-size: clamp(28px, 3.2vw, 52px); letter-spacing: -0.015em; line-height: 1.25;}
.exhibition .accent{color: var(--clay-soft);}
.exhibition .meta-row{
margin-top: 80px;
display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
padding-top: 28px; border-top: 1px solid color-mix(in oklch, var(--paper) 25%, transparent);
}
.exhibition .meta-row dt{font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklch, var(--paper) 60%, transparent); margin-bottom: 10px;}
.exhibition .meta-row dd{margin:0; font-family: var(--f-display); font-size: 20px; font-weight: 400;}
.exhibition .meta-row dd small{display:block; font-size: 12px; opacity: 0.6; font-family: var(--f-mono); letter-spacing: 0.08em; margin-top: 6px; font-weight: 300;}
.exhibition .meta-row dd a{
color: var(--paper);
text-decoration: none;
border-bottom: 1px solid color-mix(in oklch, var(--paper) 35%, transparent);
transition: border-color .25s ease, color .25s ease;
}
.exhibition .meta-row dd a:hover{
color: var(--clay-soft);
border-bottom-color: var(--clay-soft);
}
.exhibition .blurb{margin-top: 48px; max-width: 64ch; color: color-mix(in oklch, var(--paper) 80%, transparent); font-size: 16px; line-height: 1.85;}
.exhibition .blurb em{font-style: normal; color: var(--paper); font-weight: 500;}
.exhibition .exh-lede{ font-size: clamp(15px, 1.4vw, 17px); }
/* ===== Food Program block — 会期中のランチ・ディナー案内 ===== */
.exhibition .exh-program{
margin-top: 64px;
padding-top: 40px;
border-top: 1px solid color-mix(in oklch, var(--paper) 22%, transparent);
max-width: 920px;
}
.exhibition .exh-program-label{
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: color-mix(in oklch, var(--paper) 60%, transparent);
margin: 0 0 22px;
font-weight: 400;
}
.exhibition .exh-program-body{
font-family: var(--f-jp);
font-size: 14.5px;
line-height: 1.95;
color: color-mix(in oklch, var(--paper) 82%, transparent);
margin: 0 0 32px;
max-width: 78ch;
}
.exhibition .exh-program-body .en{ font-family: var(--f-body); font-size: 14px; }
/* ディナー一覧 — 日時とタイトルを 2 段に並べる editorial スタイル */
.exhibition .exh-dinners{
list-style: none;
margin: 0 0 32px;
padding: 0;
border-top: 1px solid color-mix(in oklch, var(--paper) 14%, transparent);
}
.exhibition .exh-dinner{
display: grid;
grid-template-columns: 280px 1fr;
gap: 28px;
align-items: baseline;
padding: 20px 0;
border-bottom: 1px solid color-mix(in oklch, var(--paper) 14%, transparent);
}
.exhibition .exh-dinner-date{
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.16em;
color: color-mix(in oklch, var(--paper) 70%, transparent);
text-transform: uppercase;
}
.exhibition .exh-dinner-title{
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(15px, 1.3vw, 18px);
letter-spacing: -0.005em;
color: var(--paper);
}
.exhibition .exh-program-notes{
font-family: var(--f-jp);
font-size: 13px;
line-height: 1.85;
color: color-mix(in oklch, var(--paper) 65%, transparent);
margin: 0;
max-width: 78ch;
}
.exhibition .exh-program-notes .en{ font-family: var(--f-body); font-size: 12.5px; }
.exhibition .exh-program-notes a,
.exhibition .exh-program-body a{
color: var(--paper);
text-decoration: none;
border-bottom: 1px solid color-mix(in oklch, var(--paper) 40%, transparent);
transition: border-color .25s ease, color .25s ease;
}
.exhibition .exh-program-notes a:hover,
.exhibition .exh-program-body a:hover{
color: var(--clay-soft);
border-bottom-color: var(--clay-soft);
}
@media (max-width: 900px){
.exhibition .exh-program{ margin-top: 48px; padding-top: 32px; }
.exhibition .exh-dinner{
grid-template-columns: 1fr;
gap: 6px;
padding: 16px 0;
}
}
/* ===== Events ブロック — 3daysofdesign 内の個別イベント詳細 ===== */
.exhibition .events{
margin-top: 80px;
padding-top: 32px;
border-top: 1px solid color-mix(in oklch, var(--paper) 25%, transparent);
display: flex;
flex-direction: column;
gap: 80px;
}
.exhibition .event-head{ max-width: 920px; }
.exhibition .event-date{
font-family: var(--f-mono);
font-size: clamp(14px, 1.4vw, 18px);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--paper);
margin: 0 0 28px;
padding: 6px 0 6px 18px;
border-left: 2px solid var(--clay-soft);
display: inline-block;
line-height: 1.35;
}
@media (max-width: 640px){
.exhibition .event-date{
font-size: 13px;
letter-spacing: 0.1em;
padding-left: 14px;
margin-bottom: 22px;
}
}
.exhibition .event-title{
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(22px, 2.6vw, 36px);
letter-spacing: -0.012em;
line-height: 1.25;
color: var(--paper);
margin: 0 0 16px;
}
.exhibition .event-subtitle{
font-family: var(--f-display);
font-weight: 300;
font-size: clamp(14px, 1.2vw, 16px);
line-height: 1.7;
color: color-mix(in oklch, var(--paper) 75%, transparent);
margin: 0;
max-width: 56ch;
}
.exhibition .event-body{
margin-top: 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
}
/* 画像あり: 左に縦長ポスター画像、右にテキスト（restaurant + kaiseki 縦積み） */
.exhibition .event-body--with-image{
grid-template-columns: minmax(280px, 1fr) 1.25fr;
gap: 64px;
align-items: start;
}
.exhibition .event-body--with-image .event-text{
display: flex;
flex-direction: column;
gap: 56px;
}
.exhibition .event-image{
position: sticky;
top: 24px;
}
.exhibition .event-image img{
display: block;
width: 100%;
height: auto;
border: 1px solid color-mix(in oklch, var(--paper) 12%, transparent);
}
/* 画像なし: 旧来の 2 カラム（restaurant + kaiseki 横並び） */
.exhibition .event-body:not(.event-body--with-image) .event-text{
display: contents; /* event-text を grid のフォーマンスに無効化、子の event-col 2 つが直接 grid アイテムに */
}
.exhibition .event-col-heading{
font-family: var(--f-display);
font-weight: 500;
font-size: 17px;
letter-spacing: -0.005em;
color: var(--paper);
margin: 0 0 18px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in oklch, var(--paper) 15%, transparent);
display: flex;
align-items: baseline;
gap: 12px;
}
.exhibition .event-col-heading::before{
content: "";
display: inline-block;
width: 16px;
height: 1px;
background: var(--clay-soft);
transform: translateY(-4px);
flex-shrink: 0;
}
.exhibition .event-prose p{
margin: 0 0 0.9em;
font-family: var(--f-jp);
font-size: 14.5px;
line-height: 1.95;
color: color-mix(in oklch, var(--paper) 82%, transparent);
}
.exhibition .event-prose .en p{ font-family: var(--f-body); font-size: 14px; letter-spacing: 0.005em; }
.exhibition .event-lead{
font-family: var(--f-jp);
font-size: 14.5px;
line-height: 1.95;
color: color-mix(in oklch, var(--paper) 82%, transparent);
margin: 0 0 28px;
max-width: 40ch;
}
.exhibition .event-lead .en{ font-family: var(--f-body); font-size: 14px; }
.exhibition .course-block{
margin-top: 8px;
padding-top: 20px;
border-top: 1px dashed color-mix(in oklch, var(--paper) 18%, transparent);
}
.exhibition .course-label{
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in oklch, var(--paper) 55%, transparent);
margin-bottom: 16px;
}
.exhibition .course-list{
list-style: none;
margin: 0; padding: 0;
}
.exhibition .course-list li{
display: grid;
grid-template-columns: 32px 1fr 1fr;
gap: 14px;
align-items: baseline;
padding: 10px 0;
border-bottom: 1px solid color-mix(in oklch, var(--paper) 10%, transparent);
}
.exhibition .course-list li:last-child{ border-bottom: 0; }
.exhibition .course-list .num{
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: color-mix(in oklch, var(--paper) 45%, transparent);
}
.exhibition .course-list .ja-name{
font-family: var(--f-display);
font-weight: 500;
font-size: 15.5px;
letter-spacing: 0;
color: var(--paper);
}
.exhibition .course-list .romaji{
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.12em;
color: color-mix(in oklch, var(--paper) 60%, transparent);
text-align: right;
}
@media (max-width: 900px){
.exhibition .events{ margin-top: 64px; gap: 56px; }
.exhibition .event-body{
grid-template-columns: 1fr;
gap: 40px;
margin-top: 36px;
}
.exhibition .event-body--with-image{
grid-template-columns: 1fr;
gap: 40px;
}
.exhibition .event-image{
position: static; /* sticky 解除（縦積み時は不要） */
max-width: 480px; /* 中央寄せ + ポスターの過大化防止 */
margin: 0 auto;
}
.exhibition .event-body--with-image .event-text{ gap: 48px; }
}
@media (max-width: 640px){
.exhibition .course-list li{
grid-template-columns: 28px 1fr;
column-gap: 12px;
row-gap: 2px;
}
.exhibition .course-list .romaji{
grid-column: 2;
text-align: left;
font-size: 10.5px;
letter-spacing: 0.1em;
}
.exhibition .course-list .ja-name{ font-size: 14.5px; }
}
/* Program block — お呈茶/ディナー と 登り窯映像の二項目 */
.exhibition .program{
margin-top: 72px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
padding-top: 32px;
border-top: 1px solid color-mix(in oklch, var(--paper) 25%, transparent);
}
.exhibition .program .prog-item h4{
font-family: var(--f-display);
font-size: 19px;
letter-spacing: -0.005em;
color: var(--paper);
font-weight: 500;
margin: 0 0 18px;
line-height: 1.4;
display: flex;
align-items: center;
gap: 14px;
}
.exhibition .program .prog-item h4::before{
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--clay-soft);
flex-shrink: 0;
}
.exhibition .program .prog-item p{
font-size: 14px;
line-height: 1.9;
color: color-mix(in oklch, var(--paper) 80%, transparent);
max-width: 44ch;
}
.exhibition .program .prog-item p em{font-style: normal; color: var(--paper);}
@media (max-width: 900px){
.exhibition .program{ grid-template-columns: 1fr; gap: 32px; }
}
.cta-row{margin-top: 64px; display: flex; gap: 24px; flex-wrap: wrap;}
.btn{
display: inline-flex; align-items:center; gap: 12px;
padding: 18px 28px;
border: 1px solid var(--paper);
color: var(--paper);
font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
text-decoration: none;
transition: background .25s ease, color .25s ease;
}
.btn:hover{background: var(--paper); color: var(--ink);}
.btn.filled{background: var(--paper); color: var(--ink);}
.btn.filled:hover{background: var(--clay-soft); border-color: var(--clay-soft); color: var(--ink);}
.btn .arr{display:inline-block; transition: transform .3s ease;}
.btn:hover .arr{transform: translateX(4px);}
/* ============ makers ============ */
.makers{padding: 11rem 48px;}
.makers .inner{max-width: 1340px; margin: 0 auto;}
.makers .head{
display: grid; grid-template-columns: repeat(12,1fr); gap: 24px;
margin-bottom: 80px;
}
.makers .head .l{grid-column: 1/ span 3;}
.makers .head .r{grid-column: 5/ span 7; font-family: var(--f-display); font-weight: 300; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.35; letter-spacing: -0.01em;}
.maker-pair{display:grid; grid-template-columns: 1fr 1fr; gap: 80px;}
.maker{
display:grid; grid-template-columns: 1fr; gap: 28px;
}
.maker .tag{font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);}
.maker h3{font-family: var(--f-display); font-size: clamp(32px, 3vw, 52px); font-weight: 400; letter-spacing: -0.015em; line-height: 1; margin: 4px 0 0;}
.maker h3 .jpn{display:block; font-family: var(--f-jp); font-size: 0.4em; letter-spacing: 0.1em; color: var(--ink-soft); margin-top: 16px; font-weight: 300;}
.maker p{font-size: 14px; line-height: 1.85; color: var(--ink-soft); max-width: 42ch;}
.maker .facts{display:grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 12px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 20px;}
.maker .facts dt{font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px;}
.maker .facts dd{margin:0; font-family: var(--f-display); font-size: 15px;}
.maker .ph{aspect-ratio: 4/5;}
/* heritage / designer layout */
.heritage-body{
display: grid;
grid-template-columns: 6.5fr 3.5fr; /* 左画像 65% : 右テキスト 35% — Designer と対称 */
gap: 80px;
align-items: start;
}
.designer-sec .heritage-body{grid-template-columns: 3.5fr 6.5fr;} /* 左テキスト 35% : 右画像 65% */
.heritage-media{display: flex; flex-direction: column; gap: 24px; position: sticky; top: 80px;}
/* Heritage / Designer: 実画像がカラム幅にフィット（アスペクト比は画像自然、トリミングなし）
NOTE: .heritage-media .ph は app.js の slit-reveal 自動適用対象のため、
img が .sr-content にラップされる。直接子セレクタ `>` を避け descendant で指定する。 */
.heritage-media .ph{
aspect-ratio: auto;
height: auto;
}
.heritage-media .ph img{
position: static;
display: block;
width: 100%;
height: auto;
object-fit: unset;
filter: saturate(0.92);
}
/* デフォルト: .ph コンテナ内に実画像を絶対配置＋cover（restaurant cards 等で使用） */
.ph > img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.92);
display: block;
}
/* Kaksikko ブランドマーク — heritage-media カラム上部 */
.heritage-media .kaksikko-logo{
width: auto;
max-width: 160px;
height: auto;
display: block;
margin-bottom: -4px;
}
/* Asahiyaki ブランドマーク — ASAHIYAKI + Since 1600 の2ロゴを横並び（since1600 は少し小さめ、ベースライン揃え） */
.heritage-media .asahiyaki-brand{
display: flex;
align-items: flex-end;
gap: 16px;
margin-bottom: -4px;
}
.heritage-media .asahiyaki-brand .asahiyaki-logo{
height: 18px;
width: auto;
display: block;
}
.heritage-media .asahiyaki-brand .asahiyaki-since{
height: 13px;
width: auto;
display: block;
}
.heritage-media .facts{display:grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--line); padding-top: 20px;}
.heritage-media .facts dt{font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px;}
.heritage-media .facts dd{margin: 0; font-family: var(--f-display); font-size: 15px;}
.heritage-text .tag{font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);}
.heritage-prose{margin-top: 36px; max-width: 58ch; font-size: 15px; line-height: 1.95; color: var(--ink-soft);}
.heritage-prose p + p{margin-top: 1.6em;}
.heritage-prose .ja{letter-spacing: 0.02em;}
/* maker-links — Heritage / Designer の外部リンク（公式 / Instagram / YouTube / TikTok） */
.maker-links{
list-style: none;
margin: 32px 0 0;
padding: 24px 0 0;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: 8px 28px;
}
.maker-links li{ margin: 0; }
.maker-links a{
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 0;
border-bottom: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
transition: color .25s ease, border-color .25s ease, gap .35s cubic-bezier(.72, 0, .18, 1);
}
.maker-links a:hover{
color: var(--clay);
border-bottom-color: var(--clay);
gap: 12px;
}
.maker-links .ml-arr{
font-family: var(--f-mono);
font-size: 10px;
color: var(--ink-soft);
transition: color .25s ease, transform .35s cubic-bezier(.72, 0, .18, 1);
}
.maker-links a:hover .ml-arr{
color: var(--clay);
transform: translate(2px, -2px);
}
.designer-sec{border-top: 1px solid var(--line);}
/* ============ product cards (restaurants) ============ */
.rest-cards{
display: grid;
grid-template-columns: repeat(3, 1fr);
position: relative;
gap: 32px;
transition: grid-template-columns .9s cubic-bezier(.76,0,.17,1), gap .9s cubic-bezier(.76,0,.17,1);
perspective: 1600px;
perspective-origin: 50% 30%;
}
/* expanded layout: single column, expanded card takes the full width.
The other two cards are hidden inline and re-rendered in the fixed
left rail (.rest-rail) instead. */
.rest-cards.has-expanded{
grid-template-columns: 1fr;
gap: 0;
align-items: start;
}
.rest-cards.has-expanded .rest-card.is-expanded{
grid-column: 1 / -1;
}
.rest-card{
position: relative;
display: flex; flex-direction: column;
background: var(--paper);
border: 1px solid var(--line);
padding: 0;
cursor: pointer;
overflow: hidden;
transform-style: preserve-3d;
transform: translate3d(0,0,0);
transition:
border-color .28s cubic-bezier(.72,0,.18,1),
box-shadow .32s cubic-bezier(.72,0,.18,1),
transform .32s cubic-bezier(.72,0,.18,1),
opacity .28s cubic-bezier(.72,0,.18,1),
filter .28s cubic-bezier(.72,0,.18,1);
will-change: transform, box-shadow;
}
/* parallax layers: image pulls up/forward, content pushes back slightly */
.rest-card .media,
.rest-card .card-body{
transition: transform .32s cubic-bezier(.72,0,.18,1);
will-change: transform;
}
/* hover 系は pointer:fine なデバイス（マウス）かつ viewport が mobile より広い
時だけ。Mac でウィンドウ縮小して mobile サイズにした時も hover を無効化するため
min-width 条件を併用。 */
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
.rest-card:hover{
border-color: var(--ink);
transform: translate3d(0, -14px, 60px) rotateX(2.5deg);
box-shadow:
0 2px 4px -2px color-mix(in oklch, var(--ink) 18%, transparent),
0 22px 36px -20px color-mix(in oklch, var(--ink) 32%, transparent),
0 60px 110px -30px color-mix(in oklch, var(--ink) 45%, transparent);
z-index: 2;
}
/* when hovering any card in the grid, push the others back for depth.
Use :has() so hovering the gap between cards does NOT dim anything. */
.rest-cards:not(.has-expanded):has(.rest-card:hover) .rest-card:not(:hover){
opacity: 0.45;
filter: saturate(0.8) blur(0.5px);
transform: translate3d(0, 6px, -80px) rotateX(-1deg) scale(0.97);
}
.rest-card:hover .media{
transform: translate3d(0, -10px, 40px);
}
.rest-card:hover .card-body{
transform: translate3d(0, -4px, 20px);
}
}
/* hide non-expanded cards inline when a card is expanded — they live
in the fixed left rail instead */
.rest-cards.has-expanded .rest-card:not(.is-expanded){
display: none;
}
/* ---- modal takeover: 展開カードは viewport を占有する overlay、body スクロールは JS でロック ---- */
body.is-rest-modal{ overflow: hidden; }
/* ⚠️ perspective / transform / will-change が ancestor にあると
position:fixed の containing block が viewport ではなくその ancestor になる。
has-expanded 時は perspective / transform / will-change を無効化して
modal card および内部の close ボタンが viewport 基準で配置されるようにする。*/
.rest-cards.has-expanded{ perspective: none; }
/* 切替時の一瞬 modal card position:fixed が外れる（または別カードに切替わる）
タイミングで背景（Exhibition 等）が覗くのを防ぐため、has-expanded 中は
viewport 全面に paper 色の backdrop を常時敷く。z-index は modal (200) より
下・topbar / 他の fixed UI より上。**常時 opaque**（フェードインはしない）—
バー退場中の透過で古い card が覗く現象を防ぐため。 */
.rest-cards.has-expanded::after{
content: '';
position: fixed;
inset: 0;
background: var(--paper);
z-index: 190;
pointer-events: none;
}
.rest-cards.has-expanded .rest-card.is-expanded{
position: fixed;
inset: 0;
z-index: 200;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
background: var(--paper);
border: 0;
border-radius: 0;
max-width: none;
transform: none !important;
will-change: auto;
}
/* ⚠️ flash 中は is-expanded モーダル（old state）自体を非表示にして、
バー退場時に old state が revealing される現象を防ぐ。
flash 終了後に opacity 1 へトランジションで戻る（バーが消えた後に modal 登場）。*/
.rest-cards.is-flashing .rest-card.is-expanded{
opacity: 0;
transition: opacity .2s cubic-bezier(.72,0,.18,1);
}
/* card-details の transform も強制 none（base の translateY(12px) 遷移が
containing block を作り、close ボタンの fixed が card-details 基準になる
問題を回避） */
.rest-cards.has-expanded .rest-card.is-expanded .card-details{
transform: none !important;
transition: opacity .6s ease .1s !important;
}
/* ---- グローバル close ボタン（body 直下に JS で注入）----
card 内部に置くと ancestor の transform / will-change / perspective が
position:fixed の containing block を奪い viewport 基準にならない問題が
発生するため、DOM 上は body 直下に配置する。body.is-rest-modal で表示切替。*/
.detail-close-modal{
display: none;
position: fixed;
top: 16px;
right: 16px;
z-index: 260;
align-items: center;
gap: 12px;
padding: 10px 18px;
background: var(--ink);
border: 1px solid var(--ink);
color: var(--paper);
font-family: var(--f-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
overflow: hidden;
transition: padding .4s cubic-bezier(.72,0,.18,1);
}
body.is-rest-modal .detail-close-modal{ display: inline-flex; }
.detail-close-modal .detail-close-arrow{
display: inline-block;
width: 22px; height: 1px;
background: currentColor;
position: relative;
transition: width .45s cubic-bezier(.72,0,.18,1), transform .45s cubic-bezier(.72,0,.18,1);
}
.detail-close-modal .detail-close-arrow::before{
content: "";
position: absolute;
left: -1px; top: -3px;
width: 7px; height: 7px;
border-left: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg);
}
.detail-close-modal .detail-close-label{
display: inline-flex;
gap: 0;
transition: letter-spacing .45s ease, transform .45s cubic-bezier(.72,0,.18,1);
}
@media (hover: hover){
.detail-close-modal:hover .detail-close-arrow{
width: 32px;
transform: translateX(-4px);
}
.detail-close-modal:hover .detail-close-label{
letter-spacing: 0.22em;
transform: translateX(2px);
}
}
@media (max-width: 640px){
.detail-close-modal{ padding: 8px 14px; }
}
/* pinned header と modal 内容の間に余白を作らない。pinned header は背景不透明
で上端を自然にマスクするため、slider 画像の top は header 直下に吸い付く。 */
body.is-band-pinned.is-rest-modal .rest-cards.has-expanded .rest-card.is-expanded{
padding-top: 0;
}
/* mobile modal: 下端固定 rail の高さ分を内部 scroll に padding-bottom として確保して
最下部（Address 等）が rail に隠れずスクロール読み切れるようにする */
@media (max-width: 900px){
body.is-rest-modal .rest-cards.has-expanded .rest-card.is-expanded{
padding-bottom: 72px;
}
}
/* modal 時は rest-card 直下の closed-state トップ .media を非表示（100vh 画像の正体）
詳細パネル側の detail-left .media のみ表示する */
.rest-cards.has-expanded .rest-card.is-expanded > .media{
display: none !important;
}
/* 詳細画面の hero image: 上辺基準で常に画像トップを表示し、画像の自然比で
下方向に伸ばす。画像が viewport より高い場合はモーダル全体のスクロールで
下辺を確認可能。固定の 100vh 制約は撤廃（ウィンドウ縦サイズ可変でも top が
見切れない）。 */
.rest-cards.has-expanded .rest-card.is-expanded .card-details .detail-left .media{
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: auto !important;
}
.rest-cards.has-expanded .rest-card.is-expanded .card-details .detail-left .media img{
position: static !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
object-fit: initial !important;
display: block;
}
/* detail-left 自体: 画像の自然高に合わせる（align-self: start で grid のストレッチ抑止） */
.rest-cards.has-expanded .rest-card.is-expanded .card-details .detail-left{
align-self: start;
}
/* rail は z-index を 210 に（モーダル z:200 より手前）— 実際の宣言は
.rest-rail 本体定義（後出し）側で行う。ここはアンカーコメントのみ。*/
/* expanded panel spans left column, full details */
.rest-card.is-expanded{
cursor: default;
display: block; /* override flex so .card-details grid lays out at full width */
}
.rest-card.is-expanded:hover{ border-color: var(--line); box-shadow: none; }
/* modal 状態では hover 視差効果を発動させない（close ボタン等が viewport 全面に
fixed 配置のため、ボタン hover 時に cursor が card 上にも乗って
card:hover の 3D tilt / .media parallax が動いてしまう問題を回避） */
.rest-cards.has-expanded .rest-card.is-expanded:hover,
.rest-cards.has-expanded .rest-card.is-expanded:hover .media,
.rest-cards.has-expanded .rest-card.is-expanded:hover .card-body{
transform: none !important;
}
/* media image */
.rest-card .media{
aspect-ratio: 4 / 5;
position: relative;
overflow: hidden;
background: var(--paper-2);
}
.rest-card .media img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: filter .35s cubic-bezier(.72,0,.18,1);
filter: saturate(0.92);
}
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
.rest-card:hover .media img{ filter: saturate(1); }
}
.rest-card.is-expanded .media{ aspect-ratio: auto; height: 100%; min-height: 460px;}
.rest-card .media .media-overlay{
position: absolute; inset: 0;
display: flex; align-items: flex-end; justify-content: space-between;
padding: 18px 20px;
color: var(--paper);
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
background: linear-gradient(to top, color-mix(in oklch, var(--ink) 55%, transparent) 0%, transparent 40%);
pointer-events: none;
}
/* card body (closed state) */
.rest-card .card-body{
display: flex; flex-direction: column;
flex: 1;
}
.rest-card .meta-top{
display:flex; align-items:center; justify-content:space-between;
padding: 20px 24px 0;
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.rest-card .meta-top .num{color: var(--clay);}
.rest-card .name{
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(20px, 1.9vw, 28px);
letter-spacing: -0.015em;
line-height: 1.2;
padding: 14px 24px 10px;
}
.rest-card .tag{
padding: 0 24px 22px;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.6;
border-bottom: 1px solid var(--line);
}
.rest-card .quote{
padding: 24px 24px 20px;
position: relative;
flex: 1;
display: flex; flex-direction: column; gap: 14px;
}
.rest-card .quote::before{
content: "\201C";
position: absolute;
top: 4px; left: 20px;
font-family: var(--f-jp);
font-size: 60px;
line-height: 1;
color: var(--clay-soft);
font-weight: 300;
}
.rest-card .quote p{
padding-top: 18px;
font-family: var(--f-jp);
font-weight: 300;
font-size: 14px;
line-height: 1.95;
letter-spacing: 0.04em;
color: var(--ink);
}
.rest-card .quote p.en-q{
font-family: var(--f-body);
font-weight: 300;
font-style: italic;
letter-spacing: 0.005em;
line-height: 1.7;
}
.rest-card .chef{
padding: 0 24px 22px;
display: flex; align-items: baseline; gap: 10px;
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.rest-card .chef .dash{color: var(--clay);}
.rest-card .chef strong{font-family: var(--f-display); font-weight: 500; text-transform: none; font-size: 13px; letter-spacing: 0.02em; color: var(--ink);}
.rest-card .facts{
display: grid; grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--line);
margin-top: auto;
}
.rest-card .facts > div{
padding: 16px 24px;
border-right: 1px solid var(--line);
}
.rest-card .facts > div:last-child{border-right: 0;}
.rest-card .facts dt{font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px;}
.rest-card .facts dd{margin: 0; font-family: var(--f-display); font-size: 14px;}
/* hint: open (hidden — click anywhere on card) */
.rest-card .open-hint{ display: none; }
/* DETAIL PANEL — shown only inside .is-expanded */
.rest-card .card-details{
display: none;
grid-template-columns: 1.1fr 1fr;
gap: 0;
opacity: 0;
transform: translateY(12px);
transition: opacity .6s ease .1s, transform .7s cubic-bezier(.2,.5,.2,1) .1s;
}
.rest-card.is-expanded .card-body{ display: none; }
.rest-card.is-expanded .card-details{
display: grid;
opacity: 1;
transform: none;
}
/* detail-close — 展開解除ボタン
デフォルトから ink 塗り（確立感のある見た目）。hover で矢印が伸び、ラベルが僅かに
右へシフト＋トラッキングが広がる「返す」動作を想起させるマイクロアニメ。 */
.rest-card .detail-close{ display: none; }
.rest-card.is-expanded .detail-close{
position: absolute;
top: 24px;
right: 28px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
background: var(--ink);
border: 1px solid var(--ink);
color: var(--paper);
font-family: var(--f-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
overflow: hidden;
transition: padding .4s cubic-bezier(.72,0,.18,1);
}
.rest-card.is-expanded .detail-close .detail-close-arrow{
display: inline-block;
width: 22px; height: 1px;
background: currentColor;
position: relative;
transition: width .45s cubic-bezier(.72,0,.18,1), transform .45s cubic-bezier(.72,0,.18,1);
}
.rest-card.is-expanded .detail-close .detail-close-arrow::before{
content: "";
position: absolute;
left: -1px; top: -3px;
width: 7px; height: 7px;
border-left: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg);
}
.rest-card.is-expanded .detail-close .detail-close-label{
display: inline-flex;
gap: 0;
transition: letter-spacing .45s ease, transform .45s cubic-bezier(.72,0,.18,1);
}
/* hover: 矢印が左方向へ伸び + 「戻る動作」を想起させる label の微シフト */
@media (hover: hover){
.rest-card.is-expanded .detail-close:hover .detail-close-arrow{
width: 32px;
transform: translateX(-4px);
}
.rest-card.is-expanded .detail-close:hover .detail-close-label{
letter-spacing: 0.22em;
transform: translateX(2px);
}
}
/* expanded layout: [left: hero media] [right: text + product/chef photos] */
.card-details .detail-left{
position: relative;
min-width: 0;
min-height: 100%;
display: flex; flex-direction: column;
border-right: 1px solid var(--line);
}
.card-details .detail-left .media{
aspect-ratio: 4 / 5;
min-height: 420px;
width: 100%;
flex: 0 0 auto;
}
/* detail-slider: 単一画像コンテナ（旧 2 枚 → 1 枚に変更済）。 */
.card-details .detail-left .detail-slider{
display: block;
}
.card-details .detail-left .caption{
padding: 20px 28px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
display: flex; justify-content: space-between;
border-top: 1px solid var(--line);
}
.card-details .detail-right{
display: flex; flex-direction: column;
gap: 0;
background: var(--paper);
min-width: 0;
}
.card-details .header{
padding: 72px 40px 24px;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 24px;
row-gap: 2px;
border-bottom: 1px solid var(--line);
align-items: baseline;
}
.card-details .header .no{
font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--clay);
grid-column: 1 / 2; grid-row: 1;
}
.card-details .header .city-line{
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
grid-column: 2 / -1; grid-row: 1;
text-align: right;
}
.card-details .header .big-name{
grid-column: 1 / -1; grid-row: 2;
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(30px, 3vw, 46px);
letter-spacing: -0.02em;
line-height: 1.15;
margin-top: 14px;
text-wrap: balance;
}
.card-details .header .tag-line{
grid-column: 1 / -1; grid-row: 3;
margin-top: 6px;
font-size: 13px; color: var(--ink-soft); letter-spacing: 0.02em; line-height: 1.6;
}
.card-details .overview{
padding: 28px 40px;
border-bottom: 1px solid var(--line);
}
.card-details .overview p{
font-family: var(--f-jp);
font-weight: 300;
font-size: 14px;
line-height: 2;
letter-spacing: 0.04em;
color: var(--ink);
max-width: 42ch;
}
.card-details .overview p.en{
font-family: var(--f-body);
font-weight: 300;
letter-spacing: 0;
line-height: 1.75;
max-width: 52ch;
}
.card-details .duo{
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--line);
}
.card-details .duo .cell{
padding: 0;
border-right: 1px solid var(--line);
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.card-details .duo .cell:last-child{ border-right: 0; }
.card-details .duo .cell img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: saturate(0.92);
}
.card-details .duo .cell .cell-label{
position: absolute;
left: 16px; bottom: 14px;
padding: 4px 10px;
background: color-mix(in oklch, var(--paper) 82%, transparent);
backdrop-filter: blur(4px);
font-family: var(--f-mono);
font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.card-details .profile-block{
padding: 30px 40px;
border-bottom: 1px solid var(--line);
}
.card-details .profile-block h4{
font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px;
}
.card-details .profile-block p{
font-family: var(--f-jp); font-weight: 300; font-size: 13.5px; line-height: 2; letter-spacing: 0.03em; max-width: 46ch;
}
.card-details .profile-block p.en{
font-family: var(--f-body); font-weight: 300; letter-spacing: 0; line-height: 1.7;
}
.card-details .address-block{
padding: 24px 40px 36px;
display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px;
}
.card-details .address-block h4{
font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px;
}
.card-details .address-block address{
font-style: normal;
font-family: var(--f-body);
font-size: 13px; line-height: 1.7; color: var(--ink);
}
.card-details .address-block .ext-link{
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
display: inline-flex; align-items: center; gap: 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--ink);
text-decoration: none;
}
/* mobile collapse */
@media (max-width: 900px){
.rest-cards.has-expanded{
grid-template-columns: 1fr;
}
.card-details{ grid-template-columns: 1fr !important; }
.card-details .detail-left{ border-right: 0; border-bottom: 0; }
.card-details .header, .card-details .overview, .card-details .profile-block, .card-details .address-block{ padding-left: 24px; padding-right: 24px;}
/* mobile: header の top padding は slider 直下なので PC の 72px ではなく 32px に */
.card-details .header{ padding-top: 32px; }
/* duo は mobile でも 2カラム（50/50）維持 — 旧 1カラム指定を撤廃 */
}
/* ============ press ============ */
.press{
padding: 8rem 48px 6rem;
border-top: 1px solid var(--line);
}
.press .inner{max-width: 1340px; margin: 0 auto;}
.press .head{display:grid; grid-template-columns: repeat(12,1fr); gap: 24px; margin-bottom: 60px;}
.press .head .l{grid-column:1/ span 3;}
.press .head .r{grid-column: 5/ span 5; font-family: var(--f-display); font-size: clamp(22px, 1.8vw, 28px); font-weight: 300; line-height: 1.4; letter-spacing: -0.01em;}
.press .head .r.contact-lede{font-weight: 500;}
.press-grid{display:grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items:start;}
.press-grid.press-grid--form-only{grid-template-columns: 1fr; max-width: 720px; margin: 0 auto;}
.contact-block{border-top:1px solid var(--line); padding-top: 24px;}
.contact-block h4{font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 16px; font-weight: 400;}
.contact-block + .contact-block{margin-top: 36px;}
.contact-block .name{font-family: var(--f-display); font-size: 18px;}
.contact-block a{color: inherit; text-decoration:none; border-bottom: 1px solid var(--line); padding-bottom: 2px; display: inline-block; margin-top: 6px; font-size: 14px;}
.contact-block a:hover{border-color: var(--clay);}
.form{display:grid; grid-template-columns: 1fr 1fr; gap: 20px 24px;}
.form .full{grid-column: 1 / -1;}
.form label{display:block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px;}
.form input, .form textarea, .form select{
width:100%;
appearance:none;
font: inherit; font-family: var(--f-body);
background: transparent;
border: 0; border-bottom: 1px solid var(--line);
padding: 10px 0 12px;
color: var(--ink);
outline: none;
transition: border-color .3s ease;
border-radius: 0;
}
.form input:focus, .form textarea:focus, .form select:focus{border-color: var(--ink);}
.form textarea{resize: vertical; min-height: 96px;}
.form .submit-row{display:flex; align-items:center; justify-content: space-between; margin-top: 12px;}
.submit{
appearance:none; background: var(--ink); color: var(--paper); border: 0;
padding: 16px 28px;
font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
cursor: pointer;
transition: background .25s ease;
}
.submit:hover{background: var(--clay);}
.form-hint{font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase;}
/* ============ contact modal — confirm / sending / success / error ============
ブランドの paper / ink / clay 言語に沿った静かな確認・完了モーダル。
状態切替は cm-panel の data-state 属性で行い、各 .cm-state は
.is-active クラスでクロスフェード。 */
.contact-modal{
position: fixed; inset: 0; z-index: 9000;
display: grid; place-items: center;
padding: 24px;
opacity: 0; visibility: hidden;
transition: opacity .25s ease, visibility 0s linear .25s;
}
.contact-modal[hidden]{ display: none; }
.contact-modal.is-open{
opacity: 1; visibility: visible;
transition: opacity .35s ease;
}
.contact-modal .cm-backdrop{
position: absolute; inset: 0;
background: color-mix(in oklch, var(--paper-2) 88%, transparent);
backdrop-filter: blur(8px) saturate(0.95);
-webkit-backdrop-filter: blur(8px) saturate(0.95);
}
.contact-modal .cm-panel{
position: relative;
width: min(560px, 100%);
max-height: calc(100vh - 48px);
overflow-y: auto;
background: var(--paper);
border: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 30px 80px -20px rgba(0,0,0,0.18);
padding: 40px 44px 36px;
transform: translateY(12px);
opacity: 0;
transition: transform .55s cubic-bezier(.22,.7,.18,1) .05s, opacity .45s ease .05s;
}
.contact-modal.is-open .cm-panel{ transform: translateY(0); opacity: 1; }
.contact-modal .cm-close-x{
position: absolute; top: 14px; right: 18px;
background: transparent; border: 0;
font-size: 22px; line-height: 1; color: var(--ink-soft);
cursor: pointer; padding: 6px 8px;
transition: color .2s ease, transform .2s ease;
}
.contact-modal .cm-close-x:hover{ color: var(--ink); transform: rotate(90deg); }
/* state container — 既定は非表示、is-active のみ表示 */
.contact-modal .cm-state{
display: none;
opacity: 0;
transition: opacity .28s ease;
}
.contact-modal .cm-state.is-active{
display: block;
opacity: 1;
}
/* eyebrow（mono ラベル） */
.contact-modal .cm-eyebrow{
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 14px;
}
.contact-modal .cm-eyebrow-warn{ color: var(--clay); }
/* タイトル */
.contact-modal .cm-title{
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(20px, 2.2vw, 26px);
letter-spacing: -0.01em;
line-height: 1.35;
margin: 0 0 22px;
}
/* summary（送信内容のプレビュー） */
.contact-modal .cm-summary{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
margin: 0 0 28px;
padding: 18px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.contact-modal .cm-row{ min-width: 0; }
.contact-modal .cm-row-full{ grid-column: 1 / -1; }
.contact-modal .cm-row dt{
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 5px;
}
.contact-modal .cm-row dd{
margin: 0;
font-family: var(--f-jp);
font-size: 14px;
line-height: 1.65;
color: var(--ink);
word-break: break-word;
white-space: pre-wrap;
}
.contact-modal .cm-row[data-row]:has(dd:empty){ display: none; }
/* メッセージテキスト */
.contact-modal .cm-message{
font-family: var(--f-jp);
font-size: 14px;
line-height: 1.85;
color: var(--ink-soft);
margin: 0 0 24px;
}
/* アクション行 */
.contact-modal .cm-actions{
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 4px;
}
.contact-modal .cm-btn{
appearance: none;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
padding: 13px 22px;
border: 1px solid var(--ink);
background: transparent;
color: var(--ink);
display: inline-flex; align-items: center; gap: 10px;
transition: background .25s ease, color .25s ease, padding .35s cubic-bezier(.72,0,.18,1), letter-spacing .35s ease;
}
.contact-modal .cm-btn-ghost{ border-color: var(--line); color: var(--ink-soft); }
.contact-modal .cm-btn-ghost:hover{ color: var(--ink); border-color: var(--ink); }
.contact-modal .cm-btn-send{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.contact-modal .cm-btn-send:hover{ background: var(--clay); border-color: var(--clay); padding-right: 28px; letter-spacing: 0.22em; }
.contact-modal .cm-btn-send:disabled{ opacity: 0.55; cursor: wait; }
.contact-modal .cm-arrow{
display: inline-block;
transition: transform .35s cubic-bezier(.72,0,.18,1);
}
.contact-modal .cm-btn-send:hover .cm-arrow{ transform: translateX(4px); }
/* sending state — シンプルなスピナー（slit と同じ ink ベース） */
.contact-modal .cm-sending{ text-align: center; padding: 16px 0; }
.contact-modal .cm-spinner{
width: 36px; height: 36px;
border: 1px solid var(--line);
border-top-color: var(--ink);
border-radius: 50%;
margin: 0 auto 18px;
animation: cm-spin 0.9s linear infinite;
}
@keyframes cm-spin{ to{ transform: rotate(360deg); } }
.contact-modal .cm-status-text{
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0;
}
/* success — チェックマークの draw-in アニメ */
.contact-modal .cm-success{ text-align: left; }
.contact-modal .cm-mark{
width: 56px; height: 56px;
color: var(--clay);
margin: 0 0 18px;
}
.contact-modal .cm-mark svg{ display: block; }
.contact-modal .cm-mark-circle{
stroke-dasharray: 138.2;
stroke-dashoffset: 138.2;
transform-origin: center; transform: rotate(-90deg);
}
.contact-modal .cm-mark-check{
stroke-dasharray: 36;
stroke-dashoffset: 36;
}
.contact-modal .cm-success.is-active .cm-mark-circle{
animation: cm-circle-draw .65s cubic-bezier(.5,.0,.2,1) forwards;
}
.contact-modal .cm-success.is-active .cm-mark-check{
animation: cm-check-draw .35s cubic-bezier(.5,.0,.2,1) .55s forwards;
}
@keyframes cm-circle-draw{ to{ stroke-dashoffset: 0; } }
@keyframes cm-check-draw{ to{ stroke-dashoffset: 0; } }
/* mobile */
@media (max-width: 640px){
.contact-modal{ padding: 16px; }
.contact-modal .cm-panel{ padding: 32px 24px 28px; }
.contact-modal .cm-summary{ grid-template-columns: 1fr; gap: 12px; padding: 14px 0; margin-bottom: 22px; }
.contact-modal .cm-row-full{ grid-column: auto; }
.contact-modal .cm-actions{ flex-direction: column-reverse; align-items: stretch; gap: 10px; }
.contact-modal .cm-btn{ justify-content: center; }
.contact-modal .cm-title{ font-size: 20px; }
}
@media (prefers-reduced-motion: reduce){
.contact-modal,
.contact-modal .cm-panel,
.contact-modal .cm-state,
.contact-modal .cm-mark-circle,
.contact-modal .cm-mark-check,
.contact-modal .cm-spinner{ transition: none !important; animation: none !important; }
}
/* ============ NEWS section ============
Editorial list — date, title, arrow に絞った静かな 1 行レイアウト。
罫線 (var(--line)) で区切り、hover でタイトルが右へ滑る brand 言語。 */
.news-sec{
background: var(--paper);
padding: clamp(80px, 10vw, 140px) 48px clamp(80px, 10vw, 140px);
}
.news-sec .inner{ max-width: 1340px; margin: 0 auto; }
.news-sec .head{
margin-bottom: 28px;
}
.news-sec .head .l{ display: inline-block; }
.news-sec .head .display{
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(28px, 3vw, 44px);
letter-spacing: -0.015em;
line-height: 1.25;
margin: 0;
}
.news-empty{
font-family: var(--f-jp);
font-size: 14px;
color: var(--ink-soft);
padding: 24px 0;
border-top: 1px solid var(--line);
}
.news-list{
list-style: none; margin: 0; padding: 0;
border-top: 1px solid var(--line);
}
.news-item{
border-bottom: 1px solid var(--line);
}
.news-row{
appearance: none;
display: grid;
grid-template-columns: 140px 1fr auto;
align-items: baseline;
gap: 32px;
width: 100%;
background: transparent;
border: 0;
padding: 28px 4px;
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
position: relative;
transition: padding .45s cubic-bezier(.72,0,.18,1);
}
.news-row::before{
/* hover で左から伸びる subtle clay underline */
content: "";
position: absolute;
left: 0; bottom: -1px;
width: 0; height: 1px;
background: var(--clay);
transition: width .55s cubic-bezier(.72,0,.18,1);
}
.news-row:hover::before,
.news-row:focus-visible::before{ width: 100%; }
.news-row:focus-visible{ outline: none; }
.news-date{
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ink-soft);
text-transform: uppercase;
white-space: nowrap;
transition: color .35s ease;
}
.news-title{
font-family: var(--f-display);
font-weight: 500;
font-size: 16px;
letter-spacing: -0.005em;
line-height: 1.55;
color: var(--ink);
display: inline-block;
transition: transform .55s cubic-bezier(.72,0,.18,1), color .35s ease;
}
.news-arrow{
font-family: var(--f-mono);
font-size: 14px;
color: var(--ink-soft);
display: inline-block;
transform: translateX(-4px);
opacity: 0;
transition: transform .55s cubic-bezier(.72,0,.18,1), opacity .35s ease, color .35s ease;
}
@media (hover: hover){
.news-row:hover .news-title{ transform: translateX(6px); color: var(--ink); }
.news-row:hover .news-date { color: var(--ink); }
.news-row:hover .news-arrow{ transform: translateX(0); opacity: 1; color: var(--clay); }
}
.news-row:focus-visible .news-title{ transform: translateX(6px); }
.news-row:focus-visible .news-arrow{ opacity: 1; transform: translateX(0); }
/* News modal */
.news-modal{
position: fixed; inset: 0; z-index: 9100;
display: grid; place-items: center;
padding: 24px;
opacity: 0; visibility: hidden;
transition: opacity .25s ease, visibility 0s linear .25s;
}
.news-modal[hidden]{ display: none; }
.news-modal.is-open{
opacity: 1; visibility: visible;
transition: opacity .35s ease;
}
.news-modal .nm-backdrop{
position: absolute; inset: 0;
background: color-mix(in oklch, var(--paper-2) 88%, transparent);
backdrop-filter: blur(8px) saturate(0.95);
-webkit-backdrop-filter: blur(8px) saturate(0.95);
}
.news-modal .nm-panel{
position: relative;
width: min(680px, 100%);
max-height: calc(100vh - 48px);
overflow-y: auto;
background: var(--paper);
border: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 30px 80px -20px rgba(0,0,0,0.18);
padding: 48px 52px 44px;
transform: translateY(12px);
opacity: 0;
transition: transform .55s cubic-bezier(.22,.7,.18,1) .05s, opacity .45s ease .05s;
}
.news-modal.is-open .nm-panel{ transform: translateY(0); opacity: 1; }
.news-modal .nm-close-x{
position: absolute; top: 14px; right: 18px;
background: transparent; border: 0;
font-size: 22px; line-height: 1; color: var(--ink-soft);
cursor: pointer; padding: 6px 8px;
transition: color .2s ease, transform .2s ease;
}
.news-modal .nm-close-x:hover{ color: var(--ink); transform: rotate(90deg); }
.news-modal .nm-eyebrow{
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-soft);
}
.news-modal .nm-date{
display: block;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--ink-soft);
text-transform: uppercase;
margin: 8px 0 18px;
}
.news-modal .nm-title{
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 30px);
letter-spacing: -0.012em;
line-height: 1.35;
margin: 0 0 24px;
color: var(--ink);
}
.news-modal .nm-body{
font-family: var(--f-jp);
font-size: 15px;
line-height: 1.95;
color: var(--ink);
white-space: pre-wrap; /* 改行保持 */
word-break: break-word;
}
.news-modal .nm-body a{
color: var(--clay);
text-decoration: none;
border-bottom: 1px solid color-mix(in oklch, var(--clay) 50%, transparent);
transition: color .25s ease, border-color .25s ease;
}
.news-modal .nm-body a:hover{
color: var(--ink);
border-bottom-color: var(--ink);
}
/* mobile */
@media (max-width: 640px){
.news-sec{ padding: 72px 24px 80px; }
.news-sec .head{ display: block; margin-bottom: 32px; }
.news-sec .head .l{ margin-bottom: 14px; }
.news-row{
grid-template-columns: 1fr;
gap: 8px;
padding: 22px 2px;
}
.news-arrow{ display: none; }
.news-title{ font-size: 15px; }
.news-modal{ padding: 16px; }
.news-modal .nm-panel{ padding: 36px 24px 28px; }
.news-modal .nm-title{ font-size: 22px; }
.news-modal .nm-body{ font-size: 14px; line-height: 1.85; }
}
@media (prefers-reduced-motion: reduce){
.news-row,
.news-row::before,
.news-title,
.news-arrow,
.news-date,
.news-modal,
.news-modal .nm-panel{ transition: none !important; animation: none !important; }
}
/* ============ closing band (end of weave) ============
Echo of the hero slit slider — 9 tall vertical bars that slide up
from below when the section enters the viewport. Sits between the
final content section and the footer, acting as a "seal". */
.end-weave{
position: relative;
background: var(--ink);
overflow: hidden;
padding: 0;
}
.end-weave .weave-stage{
position: relative;
height: clamp(160px, 22vh, 240px);
display: flex;
gap: 0;
}
.end-weave .weave-bar{
flex: 1 1 0;
background: var(--paper);
transform: translateY(101%);
will-change: transform;
margin-right: -1px;
}
.end-weave .weave-bar:last-child{ margin-right: 0; }
.end-weave.in .weave-bar{
animation: ew-rise 1.0s cubic-bezier(.72,0,.18,1) both;
animation-delay: calc(var(--i, 0) * 65ms);
}
@keyframes ew-rise{
0% { transform: translateY(101%); }
100% { transform: translateY(0%); }
}
/* caption row that sits OVER the risen bars, revealed after */
.end-weave .weave-caption{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 48px;
color: var(--ink);
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
pointer-events: none;
opacity: 0;
transition: opacity .6s ease .9s;
z-index: 2;
}
.end-weave.in .weave-caption{ opacity: 1; }
.end-weave .weave-caption .mark{
font-family: var(--f-logo);
font-size: 40px;
letter-spacing: -0.02em;
text-transform: none;
opacity: 0.9;
font-weight: 500;
}
.end-weave .weave-caption .l,
.end-weave .weave-caption .r{ opacity: 0.5; }
@media (prefers-reduced-motion: reduce){
.end-weave .weave-bar{ transform: translateY(0%); }
.end-weave .weave-caption{ opacity: 1; transition: none; }
}
@media (max-width: 980px){
.end-weave .weave-caption{ padding: 0 24px; font-size: 9px; }
.end-weave .weave-caption .mark{ font-size: 28px; }
}
/* ============ card flash : slit pass on the whole grid ============
Before the grid re-lays itself out (closed → expanded), 9 paper
bars slide down through the whole rest-cards container. The state
swap happens while the grid is covered, hiding the jump. */
.rest-cards{ position: relative; }
.rest-cards .grid-flash{
position: absolute;
inset: 0;
display: flex;
pointer-events: none;
z-index: 6;
opacity: 0;
}
.rest-cards .grid-flash > span{
flex: 1 1 0;
background: var(--paper);
transform: translateY(-101%);
margin-right: -1px;
will-change: transform;
}
.rest-cards .grid-flash > span:last-child{ margin-right: 0; }
.rest-cards.is-flashing .grid-flash{ opacity: 1; }
.rest-cards.is-flashing .grid-flash > span{
animation: grid-flash .9s cubic-bezier(.72,0,.18,1) both;
animation-delay: calc(var(--i, 0) * 38ms);
}
/* モーダル状態（wrap が 0 高）から出入りする flash はバーを viewport 全面に
切替えて表示領域を確保する。JS 側で is-viewport-flash を付与／除去。 */
.rest-cards.is-flashing.is-viewport-flash .grid-flash{
position: fixed;
inset: 0;
z-index: 230;
}
/* opening 時（grid → modal）は flash 中ずっと非-expanded カードを非表示に。
バーが退場する際 state 変更前にグリッドが露出する現象を防ぐ。
!important: hover rule（:has(.rest-card:hover) specificity 6）がクリック時の
hover 状態で勝って非 hover カードが 0.45 で残る問題を回避。 */
.rest-cards.is-opening-flash .rest-card:not(.is-expanded){
opacity: 0 !important;
pointer-events: none;
transition: opacity .2s cubic-bezier(.72,0,.18,1);
}
@keyframes grid-flash{
0% { transform: translateY(-101%); }
42% { transform: translateY(0%); }
58% { transform: translateY(0%); }
100% { transform: translateY(101%); }
}
/* stabilise the container height during the swap so bars don't jump */
.rest-cards.is-flashing{ overflow: hidden; }
@media (prefers-reduced-motion: reduce){
.rest-cards .grid-flash{ display: none; }
}
/* ============ fixed left rail (thumbnails while expanded) ============
Typography-first rail inspired by the Exhibition launch banner.
Three vertical ink pills stacked vertically on the left edge.
Hover expands a pill horizontally to reveal the full name. */
.rest-rail{
position: fixed;
left: 16px;
top: 50%;
transform: translateY(-50%) translateX(-12px);
display: flex; flex-direction: column;
gap: 10px;
z-index: 235; /* モーダル（200）・grid-flash bar（230）より手前。
これで flash 中もバーに覆われず、クリック時に rail が
「再描画」されるように見える現象を防ぐ。pinned header(250)・
close button(260) より下 */
pointer-events: none;
opacity: 0;
transition: opacity .6s cubic-bezier(.72,0,.18,1),
transform .7s cubic-bezier(.72,0,.18,1);
}
.rest-rail.is-visible{
opacity: 1;
transform: translateY(-50%) translateX(0);
pointer-events: auto;
}
.rest-rail .rail-thumb{
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 44px;
min-height: 168px;
padding: 18px 10px;
background: var(--ink);
color: var(--paper);
border: none;
cursor: pointer;
overflow: hidden;
opacity: 0;
transform: translateX(-48px);
transition: transform .7s cubic-bezier(.72,0,.18,1),
opacity .7s cubic-bezier(.72,0,.18,1),
width .55s cubic-bezier(.72,0,.18,1),
background-color .35s ease,
color .35s ease;
text-align: left;
font-family: var(--f-body);
font-weight: 300;
}
.rest-rail.is-visible .rail-thumb{
opacity: 1;
transform: translateX(0);
}
.rest-rail.is-visible .rail-thumb:nth-child(1){ transition-delay: 0ms; }
.rest-rail.is-visible .rail-thumb:nth-child(2){ transition-delay: 40ms; }
.rest-rail.is-visible .rail-thumb:nth-child(3){ transition-delay: 80ms; }
.rest-rail:not(.is-visible) .rail-thumb:nth-child(3){ transition-delay: 0ms; }
.rest-rail:not(.is-visible) .rail-thumb:nth-child(2){ transition-delay: 40ms; }
.rest-rail:not(.is-visible) .rail-thumb:nth-child(1){ transition-delay: 80ms; }
/* vertical label stack: NN · Name · City
writing-mode: vertical-rl で縦書き（上から下）。rotate(180deg) を外したことで
JA 文字も自然に上→下の順で読めるようになる。 */
.rest-rail .rail-thumb .rail-vert{
writing-mode: vertical-rl;
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: color-mix(in oklch, var(--paper) 78%, transparent);
white-space: nowrap;
transition: opacity .35s ease, color .3s ease;
}
.rest-rail .rail-thumb .rail-vert .rail-name{
font-family: var(--f-display);
letter-spacing: 0.04em;
text-transform: none;
font-size: 13px;
color: var(--paper);
font-weight: 400;
}
.rest-rail .rail-thumb .rail-vert .sep{
writing-mode: horizontal-tb;
width: 3px; height: 3px; border-radius: 50%;
background: color-mix(in oklch, var(--paper) 42%, transparent);
flex: 0 0 auto;
}
/* horizontal expanded label (hover) */
.rest-rail .rail-thumb .rail-horiz{
position: absolute;
inset: 18px 22px 18px 22px;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
.rest-rail .rail-thumb .rail-horiz .h-kicker{
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: color-mix(in oklch, var(--paper) 55%, transparent);
margin-bottom: 10px;
}
.rest-rail .rail-thumb .rail-horiz .h-name{
font-family: var(--f-display);
font-size: 20px;
font-weight: 400;
letter-spacing: -0.005em;
line-height: 1.05;
color: var(--paper);
white-space: nowrap;
}
.rest-rail .rail-thumb .rail-horiz .h-tag{
margin-top: 8px;
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.14em;
color: color-mix(in oklch, var(--paper) 68%, transparent);
white-space: nowrap;
}
/* hover expansion — only on non-active thumbs */
@media (hover: hover){
.rest-rail .rail-thumb:not(.is-active):hover{
width: 240px;
}
.rest-rail .rail-thumb:not(.is-active):hover .rail-vert{
opacity: 0;
transition-duration: .15s;
}
.rest-rail .rail-thumb:not(.is-active):hover .rail-horiz{
opacity: 1;
transition-delay: .15s;
}
}
/* active thumb: inverted (paper ground, ink text) */
.rest-rail .rail-thumb.is-active{
background: var(--paper);
color: var(--ink);
cursor: default;
width: 44px;
}
.rest-rail .rail-thumb.is-active .rail-vert{
color: color-mix(in oklch, var(--ink) 82%, transparent);
}
.rest-rail .rail-thumb.is-active .rail-vert .rail-name{
color: var(--ink);
}
.rest-rail .rail-thumb.is-active .rail-vert .sep{
background: color-mix(in oklch, var(--ink) 55%, transparent);
}
.rest-rail .rail-thumb.is-active::before{
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 1px;
background: var(--ink);
opacity: 0.12;
}
/* mobile: rail を画面左端の縦並びから画面下端の横並びバーへレイアウト変更。
詳細コンテンツの視野を阻害しないように bottom 固定。地名を消してレストラン名のみ表示。*/
@media (max-width: 900px){
.rest-rail{
left: 0;
right: 0;
top: auto;
bottom: 0;
flex-direction: row;
gap: 0;
transform: translateY(100%); /* initial hidden: slide down off-screen */
transition: transform .5s cubic-bezier(.72,0,.18,1),
opacity .4s cubic-bezier(.72,0,.18,1);
/* border-top は active accent の 2px アクセントとスタックして二重線に見えるため廃止 */
}
.rest-rail.is-visible{
transform: translateY(0);
}
.rest-rail .rail-thumb{
flex: 1 1 0;
width: auto;
min-height: 0;
padding: 14px 8px;
transform: none;
text-align: center;
justify-content: center;
gap: 0;
}
.rest-rail.is-visible .rail-thumb{ transform: none; }
/* 縦 typography は隠し、横 typography の name だけ見せる（num / city / tag は非表示） */
.rest-rail .rail-thumb .rail-vert{ display: none; }
.rest-rail .rail-thumb .rail-horiz{
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: center;
gap: 0;
opacity: 1;
transform: none;
position: static;
}
.rest-rail .rail-thumb .rail-horiz .h-tag{ display: none; }
/* h-kicker: 数字のみ残して city と separator は隠す */
.rest-rail .rail-thumb .rail-horiz .h-kicker{
display: inline-flex;
align-items: baseline;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.14em;
color: inherit;
opacity: 0.6;
margin: 0 8px 0 0;
}
.rest-rail .rail-thumb .rail-horiz .h-kicker .h-sep,
.rest-rail .rail-thumb .rail-horiz .h-kicker .h-city{ display: none; }
.rest-rail .rail-thumb .rail-horiz .h-name{
font-family: var(--f-display);
font-weight: 500;
font-size: 13px;
letter-spacing: 0;
text-transform: none;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* active state の縦アクセントバーを横型に */
.rest-rail .rail-thumb.is-active::before{
top: 0;
left: 0;
right: 0;
bottom: auto;
height: 2px;
width: auto;
}
/* active thumb: 幅固定（44px）を解除して flex:1 を維持 */
.rest-rail .rail-thumb.is-active{ width: auto; }
/* active 時の h-name は ink に（bg paper に合わせる） */
.rest-rail .rail-thumb.is-active .rail-horiz .h-name{ color: var(--ink); }
}
@media (prefers-reduced-motion: reduce){
.rest-rail, .rest-rail .rail-thumb{ transition: none; }
}
/* ============ footer ============ */
footer.site{
padding: 96px 48px 40px;
background: var(--paper-2);
border-top: 1px solid var(--line);
}
footer.site .inner{max-width: 1340px; margin: 0 auto;}
footer.site .big{
font-family: var(--f-logo);
font-weight: 500;
font-size: clamp(80px, 14vw, 220px);
line-height: 0.85;
letter-spacing: 0.22em;
text-transform: lowercase;
margin-bottom: 80px;
color: var(--ink);
}
footer.site .cols{display:grid; grid-template-columns: repeat(12,1fr); gap: 24px; font-size: 12px;}
footer.site .cols > div{grid-column: span 3;}
footer.site h5{font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; margin-bottom: 14px;}
footer.site a{color: inherit; text-decoration:none;}
footer.site a:hover{color: var(--clay);}
footer.site ul{list-style:none; margin:0; padding: 0; display:grid; gap: 8px;}
footer.site .legal{
margin-top: 64px; padding-top: 20px;
display:flex; justify-content:space-between; gap: 24px;
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
/* section label component */
.sec-label{
font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-soft);
}
.sec-label::before{content: "—"; display:inline-block; margin-right: 10px; color: var(--clay);}
/* reveal */
.reveal{opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1s ease;}
.reveal.in{opacity: 1; transform: none;}
/* ===== refined fade ("Settle Reveal") — 帯アニメ OFF 時の motion 言語 =====
霞 (mist) からゆっくり焦点が合う印象。slit の織機的・水平リズムに対し、
こちらは「ピントを合わせる」縦方向の呼吸。brand の paper/ink/clay の静けさに沿う。 */
:root[data-bar-animation="off"] .reveal{
opacity: 0;
transform: translateY(18px) scale(1.012);
filter: blur(2.5px);
transition:
opacity 1.1s cubic-bezier(.2, .65, .2, 1),
transform 1.1s cubic-bezier(.2, .65, .2, 1),
filter 1.1s cubic-bezier(.2, .65, .2, 1);
will-change: opacity, transform, filter;
}
:root[data-bar-animation="off"] .reveal.in{
opacity: 1;
transform: none;
filter: blur(0);
}
@media (prefers-reduced-motion: reduce){
:root[data-bar-animation="off"] .reveal{
transform: none;
filter: none;
transition: opacity .35s ease;
}
}
/* ============ splash : first-visit logo reveal ============
paper 背景にロゴが blur から焦点を合わせて立ち上がり、clay の hairline が
左右に伸びる。短い hold の後、全体が translateY 上昇しつつフェード退場。
sessionStorage で初回限定（同セッション再訪時は早期 remove）。 */
.splash{
position: fixed; inset: 0;
z-index: 10000;
background: var(--paper);
display: grid;
place-items: center;
pointer-events: none;
will-change: opacity, transform;
}
body.has-splash{ overflow: hidden; }
.splash-stage{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
color: var(--ink);
/* osaa ロゴは currentColor 継承 */
}
.splash-logo{
width: clamp(140px, 22vw, 280px);
opacity: 0;
transform: scale(1.04);
filter: blur(4px);
transition:
opacity 1.05s cubic-bezier(.2, .65, .2, 1),
transform 1.35s cubic-bezier(.2, .65, .2, 1),
filter 1.05s cubic-bezier(.2, .65, .2, 1);
}
.splash-logo svg{ display: block; width: 100%; height: auto; }
.splash-line{
width: 0;
max-width: clamp(120px, 18vw, 220px);
height: 1px;
background: var(--ink);
margin-top: 28px;
transition: width 1.0s cubic-bezier(.72, 0, .18, 1) .65s;
}
.splash-caption{
margin-top: 20px;
font-family: var(--f-display);
font-size: clamp(13px, 1.2vw, 15px);
font-weight: 500;
letter-spacing: 0.04em;
line-height: 1.4;
color: var(--ink);
text-align: center;
opacity: 0;
transform: translateY(4px);
transition:
opacity .7s cubic-bezier(.2, .65, .2, 1) 1.05s,
transform .8s cubic-bezier(.2, .65, .2, 1) 1.05s;
}
.splash-caption .en{
font-family: var(--f-body);
font-weight: 400;
letter-spacing: 0.02em;
font-style: italic;
}
/* Entered: logo focused, line drawn, caption settled */
.splash.is-entered .splash-logo{
opacity: 1;
transform: scale(1);
filter: blur(0);
}
.splash.is-entered .splash-line{
width: clamp(120px, 18vw, 220px);
}
.splash.is-entered .splash-caption{
opacity: 1;
transform: none;
}
/* Leaving: 全体が穏やかに上昇しつつフェードアウト */
.splash.is-leaving{
opacity: 0;
transform: translateY(-14px);
transition:
opacity 1.0s cubic-bezier(.45, 0, .25, 1),
transform 1.2s cubic-bezier(.45, 0, .25, 1);
pointer-events: none;
}
.splash.is-leaving .splash-logo{
/* logo は一足先に微かに縮む */
transform: scale(0.985);
transition: transform .9s cubic-bezier(.45, 0, .25, 1);
}
@media (prefers-reduced-motion: reduce){
.splash{ display: none !important; }
}
/* ===== bar-animation OFF: 各所の帯系視覚要素を一括無効化 =====
- slit-curtain (opening / lang switch overlay)
- slit-reveal の content bars
- hero スライダーの slide-bars
- slit-hover の sh-bars
- end-weave の weave-bar
- grid-flash の bars
*/
:root[data-bar-animation="off"] .slit-curtain,
:root[data-bar-animation="off"] .sr-bars,
:root[data-bar-animation="off"] .slit-stage .slide-bars,
:root[data-bar-animation="off"] .sh-bars,
:root[data-bar-animation="off"] .end-weave .weave-bar,
:root[data-bar-animation="off"] .rest-cards .grid-flash{
display: none !important;
}
/* hero スライダー: バー演出に代わって simple opacity cross-fade */
:root[data-bar-animation="off"] .slit-stage .slide{
transition: opacity 1.1s cubic-bezier(.2, .65, .2, 1);
}
:root[data-bar-animation="off"] .slit-stage .slide.is-leaving{
opacity: 0;
}
/* end-weave: バーを廃止しても背景の ink band と中央 osaa ロゴは残す（締めの存在感は維持）。
バー非表示時は ink 背景の上に乗るため、caption の色を paper に反転して可読化。
weave-caption をフェードイン表示にすることで静かな締めくくり */
:root[data-bar-animation="off"] .end-weave .weave-caption{
color: var(--paper);
opacity: 0;
transform: translateY(8px);
transition: opacity 1s cubic-bezier(.2,.65,.2,1) .2s, transform 1s cubic-bezier(.2,.65,.2,1) .2s;
}
:root[data-bar-animation="off"] .end-weave.in .weave-caption{
opacity: 1;
transform: none;
}
/* 起動時に IntersectionObserver で .in が付かなくても表示できるよう、reduced-motion 時は常時可視 */
@media (prefers-reduced-motion: reduce){
:root[data-bar-animation="off"] .end-weave .weave-caption{
opacity: 1;
transform: none;
}
}
/* ============ slit-reveal : unified motion language ============
Wrap any element with .slit-reveal. On intersect, add .in
and 9 (or --slits) vertical paper-colored bars slide upward,
revealing the content below — same grammar as the hero slider.
Works for headings, text blocks, and images.
============ */
.slit-reveal{
position: relative;
display: inline-block; /* shrinks to content so bars align */
vertical-align: top;
isolation: isolate;
overflow: hidden; /* バーが上方向に translate した時に見出し外へ漏れないよう抑制 */
--slits: 9;
--stagger: 55ms;
--dur: 900ms;
--bar-color: var(--paper);
}
.slit-reveal.block{ display: block; }
.slit-reveal.full{ display: block; width: 100%; }
/* bars overlay */
.slit-reveal::before{
content: "";
position: absolute; inset: 0;
display: grid;
grid-template-columns: repeat(var(--slits), 1fr);
background: var(--bar-color);
/* we use a repeating gradient so the single ::before element paints N vertical bars
— this avoids injecting DOM for every revealed element */
background-image: repeating-linear-gradient(
to right,
var(--bar-color) 0,
var(--bar-color) calc(100% / var(--slits)),
transparent calc(100% / var(--slits)),
transparent calc(100% / var(--slits) + 1px)
);
background-color: transparent;
pointer-events: none;
z-index: 2;
}
/* --- multi-bar approach (clean, uses multiple bg layers per slit) ---
We place N vertical bars via a single element using N conic-like linear-gradients
stacked via `background-image`. Each bar is a solid vertical band whose position
is controlled by translateY on the whole ::before.
For the staggered effect we instead use a child element approach: we inject
bars via JS for true per-bar stagger (see slit-reveal builder).
============ */
.slit-reveal::before{ display: none; } /* disabled — we use bars built by JS */
/* container for the injected bars */
.slit-reveal > .sr-bars{
position: absolute; inset: -1px -1px -1px -1px; /* tiny bleed to kill sub-pixel gaps */
display: flex;
pointer-events: none;
z-index: 3;
}
.slit-reveal > .sr-bars > .sr-bar{
flex: 1 1 0;
background: var(--bar-color);
transform: translateY(0%);
will-change: transform;
/* overlap neighbours by 1px to guarantee no gaps between bars */
margin-right: -1px;
}
.slit-reveal > .sr-bars > .sr-bar:last-child{ margin-right: 0; }
/* before intersection: bars cover content */
.slit-reveal:not(.in) > .sr-bars > .sr-bar{ transform: translateY(0%); }
/* in view: each bar slides up, staggered */
.slit-reveal.in > .sr-bars > .sr-bar{
animation: sr-reveal var(--dur) cubic-bezier(0.72, 0, 0.18, 1) forwards;
animation-delay: calc(var(--i, 0) * var(--stagger));
}
@keyframes sr-reveal{
0% { transform: translateY(0%); }
100%{ transform: translateY(-101%); }
}
/* content host — no transform; bars alone do the reveal so
the mask stays perfectly registered with the text it covers. */
.slit-reveal > .sr-content{
display: block;
}
span.sr-content{ display: inline-block; }
.slit-reveal.in > .sr-content{ opacity: 1; transform: none; }
/* variants */
.slit-reveal.sr-fine{ --slits: 14; --stagger: 38ms; --dur: 750ms; }
.slit-reveal.sr-wide{ --slits: 6; --stagger: 75ms; --dur: 1000ms; }
.slit-reveal.sr-fast{ --stagger: 30ms; --dur: 650ms; }
.slit-reveal.sr-dark{ --bar-color: var(--paper-2); }
.slit-reveal.sr-ink{ --bar-color: var(--ink); }
/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
.slit-reveal > .sr-bars{ display: none; }
}
/* ============ slit-hover : 9-bar scan under links/buttons ============
Adds a row of thin vertical bars along the bottom edge. On hover,
each bar rises (scaleY 0→1) with a left-to-right stagger, forming
a quick "loom pass" under the element. Works on any inline/block
element by adding .slit-hover (or data-slit-hover).
============ */
.slit-hover{
position: relative;
/* make room for the scan line — subtle */
}
.slit-hover::before,
.slit-hover::after{ /* reserved for future variants */ }
.slit-hover > .sh-bars{
position: absolute;
left: 0; right: 0;
bottom: -3px;
height: 2px;
display: flex;
pointer-events: none;
z-index: 1;
}
.slit-hover > .sh-bars > .sh-bar{
flex: 1 1 0;
background: currentColor;
transform: scaleY(0);
transform-origin: bottom center;
transition: transform .32s cubic-bezier(.72,0,.18,1);
transition-delay: calc((9 - var(--i, 0)) * 12ms); /* reverse on leave */
opacity: 0.85;
margin-right: 1px;
}
.slit-hover > .sh-bars > .sh-bar:last-child{ margin-right: 0; }
.slit-hover:hover > .sh-bars > .sh-bar,
.slit-hover:focus-visible > .sh-bars > .sh-bar{
transform: scaleY(1);
transition-delay: calc(var(--i, 0) * 28ms);
}
/* nav links: underline replaced by scan */
.topbar nav a.slit-hover{ padding-bottom: 4px; }
.topbar nav a.slit-hover > .sh-bars{ bottom: -1px; height: 1.5px; }
/* buttons: scan sits just inside the bottom border */
.btn.slit-hover > .sh-bars{ bottom: 4px; left: 16px; right: 16px; height: 1.5px; }
.btn.slit-hover > .sh-bars > .sh-bar{ opacity: 0.7; }
/* language toggle */
.lang-toggle button.slit-hover{ padding-bottom: 6px; }
.lang-toggle button.slit-hover > .sh-bars{ bottom: 1px; height: 1.5px; }
@media (prefers-reduced-motion: reduce){
.slit-hover > .sh-bars{ display: none; }
}
/* ============ slit-curtain : full-viewport transition overlay ============
Used for language toggle. 9 vertical bars slide DOWN to cover the
viewport, content swaps underneath, then bars slide UP to reveal.
============ */
.slit-curtain{
position: fixed; inset: 0;
display: flex;
pointer-events: none;
z-index: 9999;
/* Always rendered — no opacity/visibility transitions so the first
animation frame starts exactly from translateY(-101%). */
}
.slit-curtain.is-active{ pointer-events: auto; }
.slit-curtain > .sc-bar{
flex: 1 1 0;
background: var(--paper);
transform: translateY(-101%);
will-change: transform;
margin-right: -1px;
backface-visibility: hidden;
}
.slit-curtain > .sc-bar:last-child{ margin-right: 0; }
/* cover: bars slide down from top, left-to-right stagger */
.slit-curtain.is-covering > .sc-bar{
animation: sc-cover .55s cubic-bezier(.72,0,.18,1) both;
animation-delay: calc(var(--i, 0) * 28ms);
}
/* reveal: bars slide up out of bottom, right-to-left stagger */
.slit-curtain.is-revealing > .sc-bar{
animation: sc-reveal .55s cubic-bezier(.72,0,.18,1) both;
animation-delay: calc((8 - var(--i, 0)) * 24ms);
}
/* hold : bars fully covering the viewport (between cover and reveal) */
.slit-curtain.is-holding > .sc-bar{
transform: translateY(0%);
animation: none;
}
@keyframes sc-cover{
0% { transform: translateY(-101%); }
100%{ transform: translateY(0%); }
}
@keyframes sc-reveal{
0% { transform: translateY(0%); }
100%{ transform: translateY(101%); }
}
@media (prefers-reduced-motion: reduce){
.slit-curtain{ display: none !important; }
}
/* responsive */
@media (max-width: 980px){
.wrap,.hero,.statement-sec,.origin,.restaurants,.exhibition,.makers,.press,footer.site{padding-left:24px; padding-right: 24px;}
.topbar{padding: 16px 24px;}
.topbar nav{display:none;}
.hero{padding: 96px 24px 48px; gap: 32px;}
.hero .eyebrow{flex-direction:column; gap: 8px; align-items: flex-start;}
.hero-triptych{grid-template-columns: 1fr; min-height: auto;}
.hero-title-wrap .title-col, .hero-title-wrap .meta-col{grid-column: 1 / -1; text-align: left;}
.hero-title-wrap .meta-col{margin-top: 24px;}
.poem .left, .poem .right{grid-column: 1 / -1;}
.origin-grid > *{grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 0 !important;}
.origin .body, .origin .aside{margin-top: 40px !important;}
.rest-cards{grid-template-columns: 1fr; gap: 24px;}
.rest-item{grid-template-columns: 60px 1fr; row-gap: 8px;}
.rest-item .tag, .rest-item .arrow, .rest-item .city{grid-column: 2;}
.rest-item .expand .pad{grid-template-columns: 1fr;}
.exhibition .label, .exhibition .main{grid-column: 1 / -1;}
.exhibition .meta-row{grid-template-columns: 1fr 1fr;}
.maker-pair{grid-template-columns: 1fr; gap: 60px;}
.heritage-body{grid-template-columns: 1fr !important; gap: 40px;}
.heritage-media{position: static;}
.makers .head .l, .makers .head .r{grid-column: 1 / -1;}
.press-grid{grid-template-columns: 1fr; gap: 40px;}
.press .head .l, .press .head .r{grid-column: 1 / -1;}
.form{grid-template-columns: 1fr;}
footer.site .cols > div{grid-column: span 6;}
}
/* ============ floating launch banner ============ */
.launch-banner{
position: fixed;
top: 50%;
right: 0;
transform: translate(calc(100% + 32px), -50%);
z-index: 60;
opacity: 0;
pointer-events: none;
transition: transform 0.9s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.7s ease;
}
.launch-banner.is-visible{
transform: translate(0, -50%);
opacity: 1;
pointer-events: auto;
}
.launch-banner .card{
position: relative;
background: var(--ink);
color: var(--paper);
padding: 22px 16px 20px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
border: 0;
font-family: var(--f-mono);
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: padding 0.5s cubic-bezier(0.6, 0, 0.2, 1), background 0.4s ease;
min-width: 48px;
overflow: hidden;
text-decoration: none;
}
.launch-banner .card, .launch-banner .card *{ text-decoration: none; }
.launch-banner .card::before{
/* internal progress line (page scroll progress) */
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 1px;
background: rgba(255,255,255,0.14);
}
.launch-banner .card::after{
content: '';
position: absolute;
left: 0; top: 0;
width: 1px;
height: var(--scroll-pct, 0%);
background: var(--paper);
transition: height 0.12s linear;
}
/* rotating Ø mark */
.launch-banner .mark{
position: relative;
width: 18px; height: 18px;
flex-shrink: 0;
}
.launch-banner .mark svg{
width: 100%; height: 100%;
animation: spin 18s linear infinite;
}
@keyframes spin{to{transform: rotate(360deg);}}
/* vertical label (collapsed state) */
.launch-banner .vertical{
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 10px;
letter-spacing: 0.28em;
color: rgba(255,255,255,0.9);
display: flex;
gap: 22px;
align-items: center;
transition: opacity 0.3s ease;
white-space: nowrap;
}
.launch-banner .vertical .sep{
writing-mode: horizontal-tb;
width: 4px; height: 4px; border-radius: 50%;
background: rgba(255,255,255,0.4);
}
/* expanded (hover) state */
.launch-banner .expanded{
position: absolute;
inset: 0;
padding: 26px 28px 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 16px;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease 0s;
min-width: 260px;
}
.launch-banner.is-open .card{
padding: 26px 28px 24px;
min-width: 260px;
}
.launch-banner.is-open .vertical{opacity: 0;}
.launch-banner.is-open .mark{position: absolute; top: 24px; right: 24px;}
.launch-banner.is-open .expanded{opacity: 1; pointer-events: auto; transition-delay: 0.15s;}
.launch-banner .expanded .kicker{
font-size: 10px; letter-spacing: 0.3em; color: rgba(255,255,255,0.55);
}
.launch-banner .expanded .title{
font-family: var(--f-display);
font-size: 28px;
letter-spacing: -0.015em;
line-height: 1.05;
text-transform: none;
margin-top: 10px;
font-weight: 300;
}
.launch-banner .expanded .title em{font-style: italic; font-weight: 300;}
.launch-banner .expanded .where{
font-size: 11px; letter-spacing: 0.16em;
color: rgba(255,255,255,0.75);
line-height: 1.7;
margin-top: 14px;
}
.launch-banner .expanded .dates{
font-family: var(--f-display);
font-size: 22px;
letter-spacing: 0;
text-transform: none;
color: var(--paper);
font-weight: 300;
line-height: 1;
margin-top: 8px;
}
.launch-banner .expanded .cta{
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.15);
font-size: 10px; letter-spacing: 0.22em;
}
.launch-banner .expanded .cta .arrow{
display: inline-block;
width: 28px; height: 1px; background: var(--paper);
position: relative;
transition: width 0.3s ease;
}
.launch-banner .expanded .cta .arrow::after{
content: '';
position: absolute; right: -1px; top: -3px;
width: 7px; height: 7px;
border-right: 1px solid var(--paper);
border-top: 1px solid var(--paper);
transform: rotate(45deg);
}
.launch-banner.is-open:hover .expanded .cta .arrow{width: 44px;}
/* mobile: 画面下辺にフルサイズ固定、上方向にスライドイン */
@media (max-width: 720px){
.launch-banner{
top: auto;
bottom: 0;
left: 0;
right: 0;
transform: translateY(100%);
width: 100%;
}
.launch-banner.is-visible{
transform: translateY(0);
}
.launch-banner .card{
flex-direction: row;
padding: 14px 20px;
min-width: auto;
width: 100%;
max-width: none;
}
.launch-banner .vertical{
writing-mode: horizontal-tb;
transform: none;
gap: 10px;
font-size: 9px;
letter-spacing: 0.2em;
}
/* ---- 展開時: 画面下部に居座ったまま縦積みで情報を展開 ---- */
.launch-banner.is-open .card{
flex-direction: column;
align-items: flex-start;
width: 100%;
max-width: none;
min-width: 0;
padding: 24px 22px 22px;
gap: 0;
}
.launch-banner.is-open .vertical{ display: none; }
.launch-banner.is-open .mark{
top: 20px;
right: 20px;
width: 16px; height: 16px;
}
.launch-banner.is-open .expanded{
position: relative;
inset: auto;
padding: 0;
min-width: 0;
width: 100%;
align-items: stretch;
gap: 0;
}
.launch-banner.is-open .expanded .kicker{ font-size: 9px; letter-spacing: 0.28em; }
.launch-banner.is-open .expanded .title{
font-size: 26px;
margin-top: 12px;
}
.launch-banner.is-open .expanded .where{
font-size: 10px;
line-height: 1.75;
margin-top: 14px;
}
.launch-banner.is-open .expanded .dates{
font-size: 18px;
margin-top: 10px;
}
.launch-banner.is-open .expanded .cta{
margin-top: 18px;
padding-top: 16px;
font-size: 9px;
letter-spacing: 0.22em;
}
}
/* ============================================================================
MOBILE BREAKPOINT TIER (Phase 1 基盤 / 2026-04-20〜 mobile 最適化)
----------------------------------------------------------------------------
スマホ最適化の新規ルールはこのブロックに集約する。PC 挙動を絶対に壊さない
ため、ここに書く CSS は **必ず @media (max-width: N) 内**に閉じる。
レイヤ:
@media (max-width: 980px) — tablet / small laptop
@media (max-width: 640px) — mobile portrait (iPhone 全般)
@media (max-width: 480px) — small mobile (SE 等)
@media (max-width: 900px) and (orientation: landscape) — 横向き特化
既存の分散 @media 指定（styles.css 上部の各セクション内）は当面そのまま。
Phase 2 以降の新規追加はこのブロック内に書き、既存セクションには
触れない（= PC 経路の CSS を変更しない）。
既存の mobile 指定（参考・移動はしない）:
line ~559, 722, 965, 1327, 1482, 1604, 1608, 1780, 1819, 2071, 2261
============================================================================ */
/* ---- @media (max-width: 980px) — tablet tier ---- */
/* Phase 2 以降ここに追加（既存の分散 980 指定と競合する場合のみ追加） */
/* ---- @media (max-width: 640px) — mobile portrait (Phase 2) ---- */
@media (max-width: 640px){
/* [hero] 画像を full-bleed（左右フチなし）、セクションは自然な高さに。
PC の min-height: 100vh + grid-template-rows の 1fr 空行問題 + @max-980 の
padding: 96px 24px 48px の上余白 96px を全て上書きする。*/
.hero{
padding: 0 0 32px;
min-height: auto;
gap: 24px;
grid-template-rows: auto auto;
}
.hero-stage{ min-height: auto; }
/* [hero] mobile は title-col を全幅に、meta-col はその下に縦積み表示（natural）。
pin 遷移では meta-col を max-height + opacity で滑らかに畳み、band 自体も
band-h → 28px に連続補間（PC と同じ枠組み）することでジャンプを排除。*/
.hero-title-wrap .title-col{ grid-column: 1 / -1; }
/* [hero] pinned 時も natural と同じ揃え・padding を維持してジャンプを排除。
row-gap を pin-p で 24→0 に補間することで、meta-col が畳まれた後も
grid-gap 分の空白が残って osaa ロゴが上付きになる現象を防ぐ。 */
.hero-title-wrap.is-pinned{
padding-left: 24px;
padding-right: 24px;
row-gap: calc(24px - var(--pin-p) * 24px);
}
.hero-title-wrap.is-pinned .title-col{
align-items: center; /* natural center と揃える（PC の end override を無効化） */
padding-bottom: 0; /* pinned calc の padding-bottom を打ち消し */
gap: 24px;
}
.hero-title-wrap.is-pinned .kicker{
padding-bottom: 0; /* natural 0 と揃える（18→0 補間をオフ） */
}
/* [hero] mobile pinned: meta-col は切替瞬間に完全非表示（sticky→fade の
中間状態を排除して pin 切替をスナップ感のあるスムーズな印象に）*/
.hero-title-wrap.is-pinned .meta-col{ display: none; }
/* JS-measured band-h は natural 時の meta-col 込み高さ（~180px）なので
pin 時の min-height は band-h を使わず、title-col 単体相当の短い値から
compact（28px）へ直接補間する */
.hero-title-wrap.is-pinned{
min-height: calc(56px - var(--pin-p) * 28px);
}
/* osaa ロゴ pin 時の最終サイズを mobile 用に小さめ（36px → 28px）*/
.hero-title-wrap.is-pinned .hero-title{
font-size: calc(var(--start-size) + (28px - var(--start-size)) * var(--pin-p));
}
/* mobile: topbar は画像上では透明のまま（デフォルト）。
is-on-light（明るいコンテンツに切替わった時）だけ paper 背景を入れて
固定ヘッダーが透明にならないようにする。切替は文字色と同期して fade。*/
.topbar{
background: transparent;
border-bottom: 1px solid transparent;
transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.topbar.is-on-light{
background: var(--paper);
border-bottom-color: var(--line);
}
/* [hero] 画像ステージを縦画面向けに。16:9 は狭幅で上下余白が多いため 4:5 に。 */
.hero-stage .stage-main{ aspect-ratio: 4 / 5; }
/* [hero] full-bleed にした分、タイトル部だけ側面 padding を復活させる */
.hero-title-wrap{
padding-left: 24px;
padding-right: 24px;
}
/* [philosophy] 詩句ブロックの上余白を詰める */
.philosophy-layout .ph-poem{ margin-top: 40px; }
/* [lang-toggle] mobile では tap 後の :focus-visible で slit-hover バーが現れ
text-decoration: underline と重なって二重下線に見えるため、slit-hover を
非表示にする（hover が無効な環境なので視覚効果としても不要） */
.lang-toggle button.slit-hover > .sh-bars{ display: none; }
/* [hero] スライダーキャプション: スマホでは文字を少し小さく、字間も詰める。
right を指定して横幅を確定させ、長い英文が自動改行されるようにする。*/
.stage-caption{
font-size: 9px;
letter-spacing: 0.08em;
line-height: 1.5;
left: 16px;
right: 16px;
bottom: 16px;
white-space: normal;
}
/* [hero] kicker 英語はスマホで強制改行を外して自動改行に。
カンマ区切りで2文が連結（content.json 側で "...,
..." を用意、
mobile では br を display: none で無効化）。
line-height / max-width は親 .kicker に設定する必要あり（inline の .en では
line box 高さと親の max-width 制約を突破できない）ため
:root[data-lang="en"] を使って EN 時だけ親側を上書き。*/
.hero-title-wrap .kicker .en{
font-size: 9px;
letter-spacing: 0.08em;
white-space: normal;
}
.hero-title-wrap .kicker .en br{ display: none; }
:root[data-lang="en"] .hero-title-wrap .kicker{
max-width: none;
line-height: 1.4;
white-space: normal;
}
/* [objects] mobile: rest-head を 1 カラム縦積みに（見出し → リード文） */
.restaurants .rest-head{
grid-template-columns: 1fr;
margin-bottom: 40px;
}
.restaurants .rest-head .l,
.restaurants .rest-head .r{ grid-column: 1 / -1; }
.restaurants .rest-head .r{ margin-top: 20px; }
/* [objects] カード closed-state 調整 */
.rest-cards{ gap: 20px; }
.rest-card .quote::before{ font-size: 44px; left: 16px; }
/* サムネイル画像の高さを半分に（aspect-ratio 4/5 → 8/5） */
.rest-card > .media{ aspect-ratio: 8 / 5; }
/* [objects] mobile: 3カード横並び + scroll-snap でスワイプナビ。
デフォルトは 2枚目を中央表示（JS 側で初期 scrollLeft セット）。
has-expanded（モーダル）中は適用しない（通常の grid 表示に戻す）。 */
.restaurants{ padding: 6rem 24px; }
.rest-cards:not(.has-expanded){
display: flex;
flex-direction: row;
grid-template-columns: none;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
gap: 14px;
/* セクション padding(24px) を相殺して edge-to-edge スクロール可能に */
margin-inline: -24px;
/* 先頭/末尾カードが中央に止まれるよう padding で center 空間を確保
（中央カード 72vw に対し (100-72)/2 = 14vw の padding で左右対称） */
padding-inline: 14vw;
/* scroll-snap-align: center の "center" を container padding と一致させる
ために scroll-padding-inline を明示。これがないとブラウザによって snap
位置がピクセル単位でズレる。*/
scroll-padding-inline: 14vw;
/* overflow-x: auto のため overflow-y も実質クリップされる → box-shadow が
下部で切れないよう padding-block で buffer を確保。
3 層 shadow の最大下端（offset 50 + blur 100 - spread 30 ≒ 120px）を見込む。*/
padding-block: 16px 140px;
/* mobile swipe 用 3D 視差: 子カードの rotateY に perspective を与える */
perspective: 1200px;
perspective-origin: 50% 50%;
}
.rest-cards::-webkit-scrollbar{ display: none; }
.rest-cards:not(.has-expanded) .rest-card{
flex: 0 0 72vw;
max-width: 72vw;
scroll-snap-align: center;
scroll-snap-stop: always;
/* opacity / transform / filter は JS が毎フレーム inline style で更新するので
CSS transition は入れない（transition があると補間が遅れて見える）。*/
transition: none;
}
/* [objects] 展開カード — 閉ボタンを画面端から余裕を取り、メディア高を縮小 */
.rest-card.is-expanded .detail-close{ top: 16px; right: 16px; padding: 8px 14px; }
.rest-card.is-expanded .media{ min-height: 320px; }
/* [exhibition] 全体パディング・見出し・メタ行を狭幅向けに */
.exhibition{ padding: 6rem 24px; }
.exhibition h2.display{ font-size: clamp(24px, 7vw, 36px); }
.exhibition .meta-row{ grid-template-columns: 1fr; gap: 20px; }
.exhibition .btn{ padding: 14px 20px; font-size: 10px; }
/* [heritage / designer] セクション余白・フォント調整 */
.makers{ padding: 6rem 24px; }
.heritage-media .asahiyaki-brand{ gap: 12px; }
.heritage-media .asahiyaki-brand .asahiyaki-logo{ height: 15px; }
.heritage-prose{ font-size: 14px; line-height: 1.85; }
/* [designer] mobile は画像先行に統一（Heritage と流れを揃える） */
.designer-sec .heritage-body .heritage-media{ order: 1; }
.designer-sec .heritage-body .heritage-text{ order: 2; }
/* [contact] 左右詰めて submit-row を縦積みに */
.press{ padding: 5rem 24px 4rem; }
.form .submit-row{ flex-direction: column; align-items: flex-start; gap: 16px; }
/* [end-weave] スマホでは両端テキスト不要、osaa ロゴのみ中央配置 */
.end-weave .weave-caption{ justify-content: center; }
.end-weave .weave-caption .l,
.end-weave .weave-caption .r{ display: none; }
/* [objects 詳細] detail-left の hero 画像（縦長 1 枚）を mobile では 74vh で表示。
画像は下辺基準でクロップ（下を見切らさず、上を必要に応じて見切る） */
.card-details .detail-left .detail-slider{
display: block;
position: relative;
height: 74vh;
overflow: hidden;
}
.card-details .detail-left .detail-slider > .media{
position: absolute !important;
inset: 0 !important;
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
aspect-ratio: auto !important;
}
.card-details .detail-left .detail-slider > .media img{
object-position: center bottom;
}
}
/* ---- @media (max-width: 480px) — small mobile (Phase 2) ---- */
@media (max-width: 480px){
/* [footer] 狭幅では 2x2 より 1 列縦積みが読みやすい */
footer.site .cols > div{ grid-column: span 12; }
footer.site .legal{ flex-direction: column; gap: 12px; align-items: flex-start; }
}
/* ---- landscape 特化 ---- */
/* Phase 5 で対応 */