:root { --ink:#151817; --paper:#eeece5; --lime:#d5e83b; --mist:#c9d2ca; --line:rgba(21,24,23,.26); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans JP",sans-serif; }
a { color:inherit; }
.skip-link { position:fixed; top:-60px; left:12px; z-index:100; background:#fff; padding:12px; }
.skip-link:focus { top:12px; }
.site-header { height:78px; padding:0 5vw; position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(238,236,229,.92); backdrop-filter:blur(15px); font:500 10px "DM Mono",monospace; letter-spacing:.1em; }
.site-header a { text-decoration:none; }
.site-header p { margin:0; }
.brand { font-size:12px; font-weight:500; }
.hero { min-height:calc(100svh - 78px); padding:3.7vw 6vw 5vh; display:flex; flex-direction:column; }
.meta,.eyebrow,.section-index,.way-number,.exhibit-label,.progress,.exhibit-detail { margin:0; font:500 10px "DM Mono",monospace; letter-spacing:.1em; }
.hero .meta,.entry-caption { font-size:0; }
.hero .meta::before { content:"PAGEBASE / JAPAN"; font:500 10px "DM Mono",monospace; letter-spacing:.1em; }
.entry-caption::before { content:"06:12 / FOREST"; font:500 10px "DM Mono",monospace; letter-spacing:.1em; }
.hero-copy { margin:auto 0; padding:12vh 0; }
.eyebrow { margin-bottom:25px; color:#5c7465; }
h1,h2,h3 { font-family:"Noto Serif JP",serif; font-weight:400; letter-spacing:-.135em; }
h1 { margin:0; font-size:clamp(68px,10.3vw,168px); line-height:1.03; }
h1 em,h2 em { font-style:normal; color:#5c7465; }
.hero-footer { display:flex; justify-content:space-between; align-items:end; }
.hero-footer p { margin:0; font-size:14px; line-height:2; }
.hero-footer a { font:500 10px "DM Mono",monospace; letter-spacing:.1em; text-decoration:none; }
.premise { min-height:100svh; padding:12vw 8vw; display:flex; flex-direction:column; color:var(--paper); background:var(--ink); }
.premise .section-index,.conclusion .section-index { color:var(--lime); }
.premise > div { margin:auto 0; }
.premise h2,.conclusion h2 { margin:0; font-size:clamp(50px,7.7vw,126px); line-height:1.06; }
.premise div p { margin:7vw 0 0; color:#c4c9c4; font-size:clamp(17px,2vw,29px); line-height:1.65; letter-spacing:-.04em; }
.quiet-note { margin:0; color:#959d96; font-size:14px; line-height:2; }
.world-entry { height:290vh; position:relative; background:#e7e9e4; }
.entry-stage { height:100svh; position:sticky; top:0; overflow:hidden; padding:6vw; color:var(--paper); background:var(--ink); }
.entry-stage .section-index { position:relative; z-index:4; color:var(--paper); }
.entry-word { position:absolute; z-index:1; left:4vw; top:12vh; font:400 clamp(210px,44vw,760px)/.72 "Noto Serif JP",serif; letter-spacing:-.18em; color:var(--paper); transform-origin:44% 52%; will-change:transform,opacity; }
.entry-image { position:absolute; inset:0; background:url("assets/nature-forest-morning-v2.jpg") center/cover; clip-path:circle(0% at 42% 49%); will-change:clip-path,transform; }
.entry-image:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,15,10,.43),transparent 62%); }
.entry-copy { position:absolute; z-index:3; left:8vw; bottom:12vh; max-width:33em; opacity:0; transform:translateY(24px); will-change:opacity,transform; }
.entry-copy h2 { margin:0 0 24px; font-size:clamp(48px,6.4vw,104px); line-height:1.06; }
.entry-copy p { margin:0; font-size:14px; line-height:2; }
.entry-caption { position:absolute; z-index:3; right:6vw; bottom:6vh; margin:0; font:500 10px "DM Mono",monospace; letter-spacing:.1em; opacity:0; }
.motion-alternative { display:none; }
.no-js .world-entry { height:auto; }
.no-js .entry-stage { display:none; }
.no-js .motion-alternative { display:block; position:relative; min-height:700px; overflow:hidden; color:var(--paper); background:#19221f; }
.no-js .motion-alternative img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.no-js .motion-alternative::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,11,8,.75),transparent 65%); }
.no-js .motion-alternative p { position:absolute; z-index:1; left:8vw; bottom:10vh; margin:0; font:400 clamp(70px,12vw,160px)/.9 "Noto Serif JP",serif; letter-spacing:-.15em; }
.no-js .exhibition { height:auto; }
.no-js .exhibition-stage { display:none; }
.no-js .exhibition-alternative { display:block; padding:16px 7vw 12vw; }
.no-js .exhibition-alternative article { min-height:450px; position:relative; overflow:hidden; margin-bottom:14px; padding:28px; color:#fff; display:flex; flex-direction:column; justify-content:end; }
.no-js .exhibition-alternative img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.no-js .exhibition-alternative article::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.66),transparent 70%); }
.no-js .exhibition-alternative p,.no-js .exhibition-alternative h3 { position:relative; z-index:1; margin:0; }
.no-js .exhibition-alternative h3 { margin-top:16px; font-size:clamp(38px,5vw,75px); line-height:.95; }
.three-ways { padding:13vw 7vw; background:#e2ded4; }
.section-heading { max-width:1000px; }
.section-heading h2 { margin:7vw 0 10vw; font-size:clamp(52px,7vw,114px); line-height:1.06; }
.ways-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.way { min-height:560px; overflow:hidden; position:relative; padding:29px; display:flex; flex-direction:column; }
.way h3 { margin:auto 0 0; font-size:clamp(40px,4.1vw,68px); line-height:1.06; }
.simple-way { background:#bdb59f; }
.simple-way > p:last-child { margin:30px 0 0; font-size:14px; line-height:1.9; }
.story-way,.motion-way { color:#fff; background:#20251f; }
.way img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.story-way img { opacity:.7; }
.story-way:after,.motion-way:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,8,7,.7),transparent 60%); }
.story-way div,.motion-way div { z-index:2; margin-top:auto; }
.story-way h3,.motion-way h3 { margin-top:20px; }
.motion-way img { width:57%; left:auto; object-position:center; filter:grayscale(.2); }
.motion-word { position:absolute; z-index:1; left:-.06em; top:14%; margin:0; font:500 clamp(71px,9vw,148px)/.75 "DM Mono",monospace; letter-spacing:-.15em; color:#d8d7cf; }
.motion-way:after { background:linear-gradient(90deg,rgba(7,8,7,.25),transparent),linear-gradient(0deg,rgba(7,8,7,.72),transparent 50%); }
.exhibition { height:520vh; position:relative; background:var(--paper); }
.exhibition-stage { height:100svh; position:sticky; top:0; overflow:hidden; padding:5vw 6vw; color:var(--ink); background:#c8b38b; transition:background-color .6s ease,color .6s ease; }
.exhibition-top { position:relative; z-index:4; display:flex; justify-content:space-between; }
.exhibition-intro { position:absolute; z-index:3; left:6vw; bottom:9vh; max-width:50vw; transition:opacity .35s ease,transform .35s ease; }
.exhibition-intro h2 { margin:22px 0 30px; font-size:clamp(58px,8.4vw,140px); line-height:1.04; }
.exhibition-intro p { margin:0; font-size:14px; }
.exhibit-media { position:absolute; inset:0; opacity:0; transform:scale(1.025); transition:opacity .55s ease,transform .9s cubic-bezier(.2,.7,.2,1); }
.exhibit-image { position:absolute; inset:-3%; opacity:0; background:center/cover no-repeat; filter:blur(18px) brightness(1.13) saturate(.9); transform:scale(1.09); transition:opacity .82s ease,filter 1.15s cubic-bezier(.2,.7,.2,1),transform 1.3s cubic-bezier(.2,.7,.2,1); will-change:opacity,filter,transform; }
.exhibit-image.is-active { opacity:1; filter:blur(0) brightness(1.03) saturate(1); transform:scale(1); }
.exhibit-image.is-departing { opacity:0; filter:blur(12px) brightness(.78) saturate(.82); transform:scale(.975); }
.exhibit-media:after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,rgba(8,12,10,.48),transparent 65%); pointer-events:none; }
.exhibit-copy { position:absolute; z-index:3; left:6vw; bottom:9vh; max-width:48vw; color:#fff; opacity:0; transform:translateY(25px); transition:opacity .45s ease,transform .6s ease; }
.exhibit-copy h3 { margin:22px 0 35px; font-size:clamp(52px,7.5vw,126px); line-height:1.06; }
.exhibit-detail { margin:0; }
.exhibit-nav { position:absolute; z-index:5; left:6vw; bottom:5vh; display:flex; gap:17px; }
.exhibit-nav button { padding:0 0 5px; border:0; border-bottom:1px solid transparent; appearance:none; background:none; color:inherit; cursor:pointer; font:500 10px "DM Mono",monospace; letter-spacing:.1em; }
.exhibit-nav button[aria-current="true"] { border-color:currentColor; }
.exhibition-alternative { display:none; }
.nature-pause { min-height:100svh; position:relative; overflow:hidden; background:#536872; color:var(--paper); }
.nature-pause img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.nature-pause:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,13,16,.53),transparent 67%); }
.nature-pause div { position:absolute; z-index:1; left:8vw; bottom:12vh; }
.nature-pause h2 { margin:30px 0 0; font-size:clamp(58px,8vw,131px); line-height:1.04; }
.conclusion { min-height:93svh; padding:13vw 8vw 7vw; display:flex; flex-direction:column; background:var(--ink); color:var(--paper); }
.conclusion h2 { margin:clamp(58px,9vw,150px) 0 48px; }
.conclusion > p:not(.section-index) { margin:0; font-size:16px; }
.cta-list { width:min(100%,980px); margin-top:auto; border-top:1px solid rgba(238,236,229,.42); }
.cta-list a { min-height:91px; padding:18px 0; display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:16px; border-bottom:1px solid rgba(238,236,229,.42); color:var(--paper); text-decoration:none; }
.cta-list span { font:500 10px "DM Mono",monospace; letter-spacing:.1em; color:var(--lime); }
.cta-list strong { font:400 clamp(22px,2.5vw,40px)/1 "Noto Serif JP",serif; letter-spacing:-.1em; }
.cta-list i { font:400 clamp(29px,3.5vw,55px)/1 "DM Mono",monospace; font-style:normal; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .cta-list a { transition:padding-left .35s ease,color .35s ease; }
  .cta-list a i { transition:transform .35s cubic-bezier(.2,.7,.2,1); }
  .cta-list a:hover { padding-left:18px; color:var(--lime); }
  .cta-list a:hover i { transform:translate(8px,-8px); }
}
footer { padding:28px 6vw; display:flex; align-items:center; justify-content:space-between; background:var(--ink); border-top:1px solid #515650; color:#a8afa8; font:500 10px "DM Mono",monospace; letter-spacing:.08em; }
footer a { color:var(--paper); text-decoration:none; }
footer p { margin:0; }
.page-transition { position:fixed; z-index:90; inset:0; display:grid; place-items:center; pointer-events:none; background:var(--ink); color:var(--paper); clip-path:inset(100% 0 0); transition:clip-path .7s cubic-bezier(.76,0,.24,1); }
.page-transition p { margin:0; font:500 clamp(36px,6vw,96px) "DM Mono",monospace; letter-spacing:-.08em; }
body.is-leaving .page-transition { clip-path:inset(0); }

@media (max-width:700px) {
  .site-header { height:64px; padding:0 6vw; font-size:8px; }
  .site-header p { display:none; }
  .hero { min-height:calc(100svh - 64px); padding:7vw 6vw 5vh; }
  .hero-copy { padding:12vh 0; }
  /* 冒頭の一行は端末幅に対して少し余白を残す。 */
  h1 { font-size:17vw; }
  .meta,.eyebrow,.section-index { font-size:8px; }
  .hero .meta::before,.entry-caption::before { font-size:8px; }
  .hero-footer p { font-size:13px; }
  .hero-footer a { font-size:8px; }
  .premise { min-height:780px; padding:22vw 8vw; }
  /* ひと息で読ませる単位を、端末幅による途中改行から守る。 */
  #hero-title > *,#premise-title > *,#conclusion-title > * { white-space:nowrap; }
  .premise h2 { font-size:13.2vw; }
  .conclusion h2 { font-size:12.4vw; }
  .premise div p { margin-top:55px; font-size:16px; }
  .quiet-note { font-size:13px; }
  /* モバイルでも、スクロールで「朝」から森へ入る。 */
  .world-entry { height:180vh; }
  .entry-stage { display:block; padding:8vw; }
  .entry-stage .section-index { font-size:8px; }
  .entry-word { left:5vw; top:24vh; font-size:62vw; }
  .entry-copy { left:8vw; right:8vw; bottom:15vh; max-width:none; }
  .entry-copy h2 { margin-bottom:18px; font-size:14vw; }
  .entry-copy p { font-size:12px; line-height:1.8; }
  .entry-caption { right:8vw; bottom:7vh; font-size:8px; }
  .motion-alternative { display:none; }
  .motion-alternative img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
  .motion-alternative:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,11,8,.75),transparent 65%); }
  .motion-alternative p { position:absolute; z-index:1; left:8vw; bottom:10vh; margin:0; font:400 17vw/.88 "Noto Serif JP",serif; letter-spacing:-.15em; }
  .entry-image { background-image:url("assets/nature-forest-morning-v2-768.jpg"); }
  .three-ways { padding:22vw 6vw; }
  .section-heading h2 { margin:50px 0 70px; font-size:14.5vw; }
  .ways-grid { display:block; }
  .way { min-height:480px; margin-bottom:12px; padding:25px; }
  .way h3 { font-size:13vw; }
  .way-number { font-size:8px; }
  .simple-way > p:last-child { font-size:13px; }
  .motion-word { font-size:22vw; }
  /* 写真の切替は、スマホでは短いスクロール距離とタップの両方で操作できる。 */
  .exhibition { height:400vh; }
  .exhibition-stage { display:block; padding:7vw 6vw; }
  .exhibition-top { font-size:8px; }
  .exhibition-intro { left:8vw; right:8vw; bottom:15vh; max-width:none; }
  .exhibition-intro h2 { margin:18px 0 24px; font-size:14vw; }
  .exhibition-intro p { font-size:12px; line-height:1.75; }
  .exhibit-copy { left:8vw; right:8vw; bottom:17vh; max-width:none; }
  .exhibit-copy h3 { margin:18px 0 23px; font-size:14vw; }
  .exhibit-label,.exhibit-detail { font-size:8px; }
  .exhibit-nav { right:8vw; bottom:6vh; left:8vw; flex-wrap:wrap; gap:9px 15px; }
  .exhibit-nav button { min-height:30px; font-size:8px; }
  .exhibition-alternative { display:none; }
  .exhibition-alternative article { min-height:510px; position:relative; overflow:hidden; margin-bottom:12px; padding:27px; display:flex; flex-direction:column; justify-content:end; color:#fff; background:#57645b; }
  .exhibition-alternative img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .exhibition-alternative article:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,8,7,.72),transparent 70%); }
  .exhibition-alternative p,.exhibition-alternative h3 { z-index:1; margin:0; }
  .exhibition-alternative p { font:500 8px "DM Mono",monospace; letter-spacing:.1em; }
  .exhibition-alternative h3 { margin-top:18px; font-size:12vw; line-height:1.07; }
  .exhibition-alternative .event-card { background:#e85029; color:#1b1613; }
  .event-card:after { display:none; }
  .nature-pause { min-height:720px; }
  .nature-pause div { left:8vw; bottom:11vh; }
  .nature-pause h2 { font-size:16vw; }
  .conclusion { min-height:700px; padding:22vw 8vw 7vw; }
  .cta-list { margin-top:auto; }
  .cta-list a { min-height:78px; grid-template-columns:38px 1fr auto; gap:10px; }
  .cta-list strong { font-size:20px; }
  footer { padding:24px 6vw; font-size:8px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .world-entry { height:auto; }
  .entry-stage { display:none; }
  .motion-alternative { display:block; position:relative; min-height:700px; overflow:hidden; color:var(--paper); }
  .motion-alternative img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .motion-alternative p { position:absolute; z-index:1; left:8vw; bottom:10vh; margin:0; font:400 clamp(70px,12vw,160px)/.9 "Noto Serif JP",serif; }
  .exhibition { height:auto; }
  .exhibition-stage { display:none; }
  .exhibition-alternative { display:block; padding:16px 7vw 12vw; }
  .exhibition-alternative article { min-height:450px; position:relative; overflow:hidden; margin-bottom:14px; padding:28px; color:#fff; display:flex; flex-direction:column; justify-content:end; }
  .exhibition-alternative img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .exhibition-alternative article:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.66),transparent 70%); }
  .exhibition-alternative p,.exhibition-alternative h3 { position:relative; z-index:1; margin:0; }
  .exhibition-alternative h3 { margin-top:16px; font-size:clamp(38px,5vw,75px); line-height:.95; }
  .page-transition { display:none; }
}