:root {
  --bg: #000;
  --paper: #e4e4e4;
  --ink: #fff;
  --accent: #9efe37;
  --scale: 1;
  --scene-height: 900px;
  --composition-scale: 1;
  --hero-scale: 1;
  --background-scale: 1;
  --refraction-scale: 1;
  --refraction-zoom: .9;
  --scroll-distance: 0px;
  --news-hold-distance: 0px;
  --news-scale: 1;
  --news-heading-rule-scale: 1;
  --news-row-rule-scale: 1;
}

* { box-sizing: border-box; }
html { background: var(--bg); scrollbar-gutter: stable; }
/* motion.js preserves scroll position during resize; avoid a second browser adjustment. */
html.has-motion { overflow-anchor: none; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; }
.about-label, .static-content h2, .hero-tagline, .tagline-track, .static-tagline,
.section-title, .menu-item-title, .menu-open-label, .menu-close-label, .footer-nav,
.artist-label, .artist-name, .news-category, .news-badge {
  font-family: "termina", "Noto Sans JP", sans-serif;
  font-weight: 400;
}
.type-label { display: block; }
.work-artist, .work-title:lang(en), .footer-top, .footer-bottom small {
  font-family: "termina", "Noto Sans JP", sans-serif;
}
.work-title:lang(ja), .news-entry-title { font-family: "Noto Sans JP", sans-serif; }
body:has(.site-menu[open]) { overflow: hidden; }
html:has(.site-menu[open]) { background: var(--paper); }
button, a { -webkit-tap-highlight-color: transparent; }
a, button { transition: color .3s cubic-bezier(.2,.7,.3,1), background-color .3s cubic-bezier(.2,.7,.3,1), border-color .3s cubic-bezier(.2,.7,.3,1), opacity .3s cubic-bezier(.2,.7,.3,1); }
/* Each inline fragment carries its own underline, including wrapped titles. */
.link-label, .breadcrumb a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .3s cubic-bezier(.2,.7,.3,1);
}
a:not(.work-link):focus-visible .link-label,
.breadcrumb a:focus-visible { background-size: 100% 1px; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
img { display: block; }
p, h1, h2 { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Figma coordinates remain width-scaled. The circle/About also fit the height;
   the wide hero logo and backgrounds have independent size constraints. */
.story { position: relative; height: 100svh; }
.has-motion .story { height: calc(200svh + var(--scroll-distance) + var(--news-hold-distance)); }
.viewport { position: sticky; top: 0; height: 100svh; overflow: clip; isolation: isolate; }
.scene { position: absolute; left: 0; top: 0; width: 1440px; height: var(--scene-height); transform: scale(var(--scale)); transform-origin: 0 0; }
.opening-background, .second-background { position: absolute; inset: 0; }
.opening-background, .photo-stack { isolation: isolate; }
/* Full 1800 × 1200 export supplies the extra image area needed to pull back.
   Change only --refraction-zoom to tune the rear layer (1 = original, .9 = 10% smaller). */
.refraction { position: absolute; left: calc(50% - 900px * var(--refraction-scale) * var(--refraction-zoom)); top: calc(50% - 600px * var(--refraction-scale) * var(--refraction-zoom)); width: calc(1800px * var(--refraction-scale) * var(--refraction-zoom)); height: calc(1200px * var(--refraction-scale) * var(--refraction-zoom)); object-fit: cover; }
.photo-mask { position: absolute; inset: 0; background: var(--bg); mask: url("assets/circle-mask.svg") center / 772px 772px no-repeat; }
.live-photo { position: absolute; left: calc(50% - 720px * var(--background-scale)); top: calc(50% - 534px * var(--background-scale)); width: calc(1440px * var(--background-scale)); height: calc(960px * var(--background-scale)); object-fit: cover; }
.second-background { opacity: 0; background: var(--bg); }
.second-photo { position: absolute; left: calc(50% - 792px * var(--background-scale)); bottom: calc(-24px * var(--background-scale)); width: calc(1584px * var(--background-scale)); height: calc(1056px * var(--background-scale)); object-fit: cover; opacity: .25; filter: blur(10px); }
.photo-stack > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.photo-stack > img:first-child { opacity: 1; }

.moving-logo { position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: translate(60px, calc(var(--scene-height) * .4155555556)); mix-blend-mode: normal; }
.circle-type { position: absolute; left: 334px; top: calc(50% - 386px); transform-origin: center; }
.circle-type > img { transform-origin: center; animation: circle-rotation 60s linear infinite paused; }
.circle-type-mobile { display: none; }
@keyframes circle-rotation { to { transform: rotate(1turn); } }
.hero-tagline { position: absolute; left: calc(720px + 405px * var(--hero-scale)); top: calc(50% + 107px * var(--hero-scale)); font-size: 14px; line-height: 21px; white-space: nowrap; transform: scale(var(--hero-scale)); transform-origin: top left; }

.motion-about { position: absolute; inset: 0; display: none; }
.has-motion .motion-about { display: block; }
.about-content { position: absolute; left: 0; top: calc(50% - 450px); width: 1440px; height: 900px; transform: scale(var(--composition-scale)); transform-origin: center; }
.about-label { position: absolute; left: 663.164px; top: 220px; font-size: 20px; line-height: 26px; }
/* Figma rounds each 18px × 225% paragraph to 41px (5 lines / 205px). */
.about-copy { position: absolute; left: 478.664px; top: 446px; width: 483px; font-size: 18px; font-weight: 400; line-height: 41px; text-align: center; }
.about-copy p { white-space: nowrap; }
.about-tagline { position: absolute; left: 0; bottom: calc(15px * var(--hero-scale)); width: 1440px; height: calc(62px * var(--hero-scale)); }
/* Four copies cover even the short, ultrawide composition throughout a full lap.
   Scroll reveal moves the outer element; this inner track keeps its own phase. */
.tagline-track { display: flex; width: max-content; animation: tagline-loop 28s linear infinite paused; }
.tagline-track > span { flex: none; width: calc(1443px * var(--hero-scale)); height: calc(62px * var(--hero-scale)); margin-right: calc(80px * var(--hero-scale)); font-size: calc(48px * var(--hero-scale)); line-height: calc(62px * var(--hero-scale)); white-space: nowrap; }
@keyframes tagline-loop { to { transform: translateX(calc(-1523px * var(--hero-scale))); } }
.reveal { opacity: 0; }

/* Use the supplied light/dark logos without blending their brand colors. */
.site-header { height: 0; pointer-events: none; }
.home-link { position: fixed; z-index: 5; left: calc(60px * var(--scale)); top: calc(45px * var(--scale)); display: block; width: calc(141.278px * var(--scale)); height: calc(24px * var(--scale)); mix-blend-mode: normal; pointer-events: auto; }
.home-link img { position: absolute; inset: 0; transform: scale(var(--scale)); transform-origin: top left; }
.header-logo-dark { visibility: hidden; }
.subpage .header-logo-light, .home-link[data-tone="light"] .header-logo-light { visibility: hidden; }
.subpage .header-logo-dark, .home-link[data-tone="light"] .header-logo-dark { visibility: visible; }
.home-link[data-tone="dark"] .header-logo-light { visibility: visible; }
.home-link[data-tone="dark"] .header-logo-dark { visibility: hidden; }
.menu-button { position: fixed; z-index: 5; right: calc(60px * var(--scale)); top: calc(57px * var(--scale) - 17px); display: grid; grid-template-columns: 14px 55px; grid-template-rows: 14px; align-content: center; align-items: center; gap: 8px; width: 113px; height: 34px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--accent); color: var(--bg); transform: scale(var(--scale)); transform-origin: right center; pointer-events: auto; }
/* The button's own lines morph into the ×; the icon box matches the 14px SVG it replaced. */
.menu-icon { position: relative; grid-column: 1; grid-row: 1; width: 14px; height: 14px; }
.menu-icon i { position: absolute; left: 0; top: 0; width: 14px; height: 1px; background: currentColor; transition: transform .3s cubic-bezier(.2, .7, .3, 1), opacity .3s cubic-bezier(.2,.7,.3,1); }
.menu-icon i:nth-child(1) { transform: translateY(2px); }
.menu-icon i:nth-child(2) { transform: translateY(6.5px); }
.menu-icon i:nth-child(3) { transform: translateY(11px); }
.menu-button[aria-expanded="true"] .menu-icon i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-icon i:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] .menu-icon i:nth-child(3) { transform: translateY(6.5px) rotate(-45deg); }
.menu-open-label, .menu-close-label { grid-column: 2; grid-row: 1; width: 55px; height: 14px; font-size: 14px; line-height: 14px; text-align: left; }
.menu-close-label { visibility: hidden; }
.menu-button[aria-expanded="true"] .menu-open-label { visibility: hidden; }
.menu-button[aria-expanded="true"] .menu-close-label { visibility: visible; }
.site-header .home-link, .site-header .menu-button { transition: opacity .3s cubic-bezier(.2,.7,.3,1), visibility .3s, background-color .3s cubic-bezier(.2,.7,.3,1), color .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s cubic-bezier(.2,.7,.3,1); }
.site-header.is-over-footer .home-link, .site-header.is-over-footer .menu-button { opacity: 0; visibility: hidden; pointer-events: none; }
/* Non-modal dialog below the fixed header (z-index 5): the same logo and button stay put while it opens. */
.site-menu { position: fixed; inset: 0; z-index: 4; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: calc(88px * var(--scale)) calc(60px * var(--scale)) 48px; border: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; background: var(--paper); color: var(--bg); }
.site-menu::-webkit-scrollbar { display: none; }
.site-menu::before { content: ''; position: fixed; z-index: 1; inset: 0 0 auto; height: calc(88px * var(--scale)); background: var(--paper); }
.menu-layout { min-height: calc(100svh - 160px); padding-top: 40px; }
.site-menu a { color: inherit; text-decoration: none; }
.menu-item { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; align-content: center; gap: 24px; min-height: clamp(96px, 14svh, 132px); padding: 12px 0; border-bottom: 1px solid #aaa; transition: background-color .3s cubic-bezier(.2,.7,.3,1); }
.menu-item:focus-visible { background: var(--accent); }
.menu-item-title { display: block; font-size: clamp(44px, 5.2vw, 80px); font-weight: 500; line-height: 1.3; letter-spacing: normal; }
.menu-item-ja { font-size: 13px; }
.menu-item-arrow { align-self: center; font: 500 24px/1 "Noto Sans JP", sans-serif; }

/* Native-flow alternative for reduced motion and when JavaScript is unavailable. */
.static-about { position: relative; display: grid; place-items: center; min-height: 100svh; overflow: clip; background: var(--bg); }
.has-motion .static-about { display: none; }
.static-background { position: absolute; inset: 0; overflow: clip; }
.static-background img { position: absolute; width: 110%; height: auto; min-height: 100%; left: -5%; bottom: -24px; object-fit: cover; opacity: .25; filter: blur(10px); }
.static-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 100px 20px 140px; text-align: center; }
.static-content h2 { margin-bottom: 80px; font-size: 20px; line-height: 26px; }
.static-logo { width: min(693.329px, 100%); margin-bottom: 40px; }
.static-logo img { width: 100%; height: auto; }
.static-copy { font-size: 18px; line-height: 2.25; }
.static-tagline { position: absolute; left: 50%; bottom: 15px; font-size: 48px; line-height: 62px; white-space: nowrap; transform: translateX(-50%); }

/* Works now covers the pinned About. Subsequent sections share one top gap. */
.news { position: relative; z-index: 2; overflow: clip; padding: calc(161px * var(--news-scale)) calc(60px * var(--scale)) 161px; background: var(--paper); color: var(--bg); }
.has-motion .works { margin-top: -100svh; }
.section-heading { position: relative; padding-bottom: calc(12px * var(--news-scale)); }
.section-title { position: relative; height: calc(104px * var(--news-scale)); font-size: calc(80px * var(--news-scale)); font-weight: 500; line-height: calc(104px * var(--news-scale)); }
.section-heading-rule, .news-row-rule { position: absolute; left: 0; bottom: 0; transform-origin: left bottom; }
.section-heading-rule { transform: scaleX(var(--news-heading-rule-scale)); }
.news-row-rule { transform: scaleX(var(--news-row-rule-scale)); }
.news-content { display: grid; grid-template-columns: 335fr 985fr; gap: 0; margin-top: calc(40px * var(--news-scale)); }
.news-category { position: relative; height: calc(23px * var(--news-scale)); font-size: calc(18px * var(--news-scale)); line-height: calc(23px * var(--news-scale)); }
.news-list { display: grid; gap: calc(40px * var(--news-scale)); list-style: none; padding: 0; margin: 0; min-width: 0; }
.news-row { position: relative; display: grid; grid-template-columns: calc(168px * var(--news-scale)) minmax(0, 1fr); align-items: start; padding-bottom: calc(40px * var(--news-scale)); }
.news-row:first-child { grid-template-columns: calc(178px * var(--news-scale)) minmax(0, 1fr); }
.news-badge { position: relative; display: flex; align-items: center; justify-content: center; height: calc(28px * var(--news-scale)); border: 1px solid var(--bg); border-radius: 999px; font-size: calc(14px * var(--news-scale)); line-height: calc(18px * var(--news-scale)); }
.news-badge-goods { width: calc(97px * var(--news-scale)); }
.news-badge-release { width: calc(115px * var(--news-scale)); }
.news-badge-info { width: calc(74px * var(--news-scale)); }
.news-date { display: block; position: relative; height: calc(16px * var(--news-scale)); font: 400 calc(13px * var(--news-scale))/calc(16px * var(--news-scale)) "Noto Sans JP", sans-serif; }
.news-entry-title { margin: calc(20px * var(--news-scale)) 0 0; font-size: calc(15px * var(--news-scale)); line-height: calc(23px * var(--news-scale)); font-weight: 500; }
.news-entry-title a, .news-view-all { color: inherit; text-decoration: none; }
.news-entry-title a::after { content: ''; position: absolute; inset: 0; }
.news-entry-title a:focus-visible { outline: none; }
.news-entry-title a:focus-visible::after { outline: 2px solid var(--bg); outline-offset: -2px; }
.news-view-all:focus-visible { outline-color: var(--bg); outline-offset: -2px; }
.section-more { display: flex; align-items: center; width: max-content; min-height: 44px; color: inherit; font: 400 18px/1.4 "termina", "Noto Sans JP", sans-serif; letter-spacing: .03em; white-space: nowrap; text-decoration: none; }

/* The right edge reveals half of the fifth card on desktop. */
.works { position: relative; z-index: 2; overflow: clip; padding: 161px calc(60px * var(--scale)) 0; background: var(--paper); color: var(--bg); }
.works-controls { display: flex; justify-content: flex-end; align-items: center; gap: 24px; margin-top: 24px; min-height: 44px; }
.works-directions { display: flex; gap: 4px; }
.works-directions[hidden] { display: none; }
.works-directions button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; color: inherit; background: transparent; font: 28px/1 "Noto Sans JP", sans-serif; transition: background-color .3s cubic-bezier(.2,.7,.3,1), opacity .3s cubic-bezier(.2,.7,.3,1); }
.works-directions button:disabled { opacity: .35; cursor: default; }
.works-directions button:focus-visible { outline-color: var(--bg); }
.works-view-all, .news-view-all { position: absolute; right: 0; bottom: calc(12px * var(--news-scale)); }
.works-gallery { container-type: inline-size; margin-top: 16px; margin-right: calc(-60px * var(--scale)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.works-gallery::-webkit-scrollbar { display: none; }
.works-gallery:focus-visible { outline: 2px solid var(--bg); outline-offset: 6px; }
.works-grid { display: grid; grid-auto-flow: column; gap: 24px; list-style: none; margin: 0; padding: 0; }
/* Padding follows the entire track; cqw keeps the initial 4.5-card view unchanged. */
.works-gallery .works-grid { width: max-content; grid-auto-columns: calc((100cqw - 96px) / 4.5); padding-right: calc(60px * var(--scale)); }
.work-card { min-width: 0; scroll-snap-align: start; }
.work-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.work-link:focus-visible { outline-color: var(--bg); outline-offset: -2px; }
.work-link .work-image img { object-fit: contain; }
.outbound-arrow { font: 500 18px/1.7 "Noto Sans JP", sans-serif; }
.work-image { position: relative; isolation: isolate; aspect-ratio: 1; overflow: hidden; background: var(--bg); }
.work-image::before { content: ''; position: absolute; z-index: 1; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .3s cubic-bezier(.2,.7,.3,1); }
.work-hover { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(64px,5.6vw,80px); aspect-ratio: 1; border-radius: 50%; color: var(--bg); background: var(--accent); opacity: 0; transform: translate(-50%,-50%) scale(.88); pointer-events: none; transition: opacity .3s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1); }
.work-image img { width: 100%; height: 100%; object-fit: cover; }
/* Show the left cover from the supplied two-edition sheet (695px square).
   Keep the original image intact; the gallery clips its surrounding margins. */
.work-image--album-limited img { width: calc(100% * 1460 / 695); height: auto; max-width: none; transform: translate(-1.541096%, -2.721088%); }
.work-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-bottom: 10px; border-bottom: 1px solid #8d8d8d; }
.work-date { flex: none; font-family: "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.work-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; list-style: none; margin: 0; padding: 0; }
.work-tags li { padding: 4px 12px; border: 1px solid var(--bg); border-radius: 999px; font: 400 11px/1.4 "termina", "Noto Sans JP", sans-serif; letter-spacing: .06em; }
.work-artist { margin-top: 10px; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.work-title { margin: 2px 0 0; font-size: 16px; line-height: 1.7; font-weight: 500; overflow-wrap: anywhere; }

/* Figma 68:2878: preserve the 480 × 656 card and its position below the heading.
   The following News section supplies the gap after the card. */
.artists { position: relative; isolation: isolate; overflow: clip; padding: 161px calc(60px * var(--scale)) 0; background: var(--paper); color: var(--bg); }
.artist-card { position: relative; display: grid; grid-template-columns: 83px minmax(0, 325px); gap: 24px; width: 480px; margin-top: 70px; padding: 24px; background: #d6d6d6; color: var(--bg); transition: background-color .3s cubic-bezier(.2,.7,.3,1); }
.artist-index { position: relative; height: 83px; }
.artist-star { position: absolute; left: -1px; top: -1px; }
.artist-number { position: relative; display: block; width: 17px; height: 16px; font: 400 12px/16px "Noto Sans JP", sans-serif; }
.artist-content { min-width: 0; }
.artist-portrait { position: relative; width: 100%; aspect-ratio: 325 / 433; mask: url("assets/artists-portrait-mask.svg") center / 100% 100% no-repeat; }
.artist-portrait > img { position: absolute; left: calc(-28 / 325 * 100%); top: 0; width: calc(362 / 325 * 100%); height: calc(556 / 433 * 100%); object-fit: cover; }
.artist-caption { display: grid; gap: 8px; margin-top: 30px; }
.artist-label { min-height: 19px; font-size: 15px; line-height: 19px; }
.artist-name { min-height: 26px; margin: 0; font-size: 20px; line-height: 26px; }
.artist-more { margin: 48px 0 0 auto; color: inherit; font-family: "termina", "Noto Sans JP", sans-serif; font-weight: 400; }

/* The footer follows News in native flow. */
.site-footer { position: relative; display: flex; flex-direction: column; padding: 112px calc(60px * var(--scale)) 40px; background: var(--bg); color: var(--ink); }
/* This landmark receives programmatic focus; its individual links keep visible outlines. */
.site-footer:focus { outline: none; }
.footer-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 80px; align-items: start; margin-bottom: 64px; }
.footer-brand { max-width: 500px; }
.footer-brand-link { display: block; width: min(320px, 100%); }
.footer-brand-link img { width: 100%; height: auto; }
.footer-description { margin-top: 32px; color: #999; font-size: 12px; line-height: 2; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.site-footer a { color: inherit; text-decoration: none; }
.footer-nav a { display: flex; align-items: center; min-height: 44px; }
.footer-nav .type-label { flex-shrink: 0; font-size: 20px; line-height: 26px; }
.footer-top:focus-visible { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 12px; border-top: 1px solid #666; color: #999; }
.footer-bottom small { font-size: 12px; }
.footer-privacy { display: flex; justify-content: flex-end; align-items: center; width: 100%; min-height: 44px; margin-top: 24px; font: 400 11px/1.5 "termina", "Noto Sans JP", sans-serif; }
.footer-privacy:focus-visible { color: var(--accent); }
.footer-top { display: flex; align-items: center; gap: 28px; min-height: 44px; font-size: 12px; }
.footer-top > span { color: var(--ink); font-size: 20px; }
/* Thanksと同じ太さ・切り取り比率・細い段間で、上側の隙間を少し広くする。 */
.footer-wordmark { container-type: inline-size; margin-top: 24px; overflow: hidden; pointer-events: none; }
.footer-wordmark-display { display: grid; font: 700 16cqw/.78 "termina", "Noto Sans JP", sans-serif; letter-spacing: -.05em; }
.footer-wordmark-line { display: block; font: inherit; letter-spacing: inherit; white-space: nowrap; }
.footer-wordmark-trace { height: .32em; margin-bottom: .012em; overflow: hidden; }
.footer-wordmark-trace-first { height: .14em; margin-bottom: .025em; }

@media (max-width: 1023px) {
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .footer-brand { max-width: 560px; }
  .footer-links { max-width: 500px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .works-gallery .works-grid { grid-auto-columns: calc((100cqw - 48px) / 2.5); }
}

/* Mobile composition: readable copy, large artwork and touch-sized controls. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .site-menu { padding: 80px 20px max(28px, env(safe-area-inset-bottom)); }
  .site-menu::before { height: 80px; }
  .menu-layout { min-height: 0; padding-top: 16px; }
  .menu-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; padding: 16px 0; min-height: 88px; }
  .menu-item-title { font-size: clamp(32px, 8.8vw, 44px); }
  .menu-item-ja { grid-column: 1; grid-row: 2; font-size: 12px; }
  .menu-item-arrow { grid-column: 2; grid-row: 1 / 3; }
  .home-link { left: 20px; top: 16px; width: 132px; height: 44px; }
  .home-link img { top: 11px; width: 100%; height: auto; }
  .menu-button { right: 20px; top: 16px; width: 108px; height: 44px; padding-inline: 15px; }
  .home-link img, .menu-button { transform: none; }
  .live-photo { top: 0; height: 100%; }
  .second-photo { top: 0; bottom: auto; height: 100%; }
  .moving-logo { z-index: 1; isolation: isolate; }
  .moving-logo > img { filter: brightness(0) invert(1); }
  .circle-type > img:not(.circle-type-mobile) { display: none; }
  .circle-type > .circle-type-mobile { display: block; animation-duration: 90s; }
  .hero-tagline { left: calc(20px / var(--scale)); right: calc(20px / var(--scale)); top: min(calc(50% + 386px * var(--composition-scale) + 24px / var(--scale)), calc(100% - 92px / var(--scale))); font-size: calc(13px / var(--scale)); line-height: 1.6; text-align: center; transform: none; }
  .about-content { top: 0; height: 100%; transform: none; }
  .about-label { left: 720px; top: 21%; font-size: calc(20px / var(--scale)); line-height: 1.3; }
  .about-label .type-label { transform: translateX(-50%); transform-origin: center; }
  .about-copy { left: calc(20px / var(--scale)); top: 43%; width: calc(1440px - 40px / var(--scale)); font-size: calc(15px / var(--scale)); line-height: 1.95; text-align: center; }
  .about-copy p { display: block; white-space: normal; text-wrap: pretty; }
  .about-copy p + p, .static-copy p + p { margin-top: .45em; }
  .about-phrase { display: inline-block; max-width: 100%; }
  .about-tagline { bottom: 8%; height: calc(28px / var(--scale)); }
  .tagline-track { animation-name: tagline-loop-mobile; animation-duration: 36s; }
  .tagline-track > span { width: auto; height: auto; margin-right: calc(32px / var(--scale)); font-size: calc(20px / var(--scale)); line-height: 1.4; }
  .static-content { padding-block: 100px 120px; }
  .static-content h2 { margin-bottom: 36px; }
  .static-logo { width: min(312px, 100%); margin-bottom: 32px; }
  .static-copy { font-size: 15px; line-height: 1.95; text-align: center; }
  .static-copy p { display: block; }
  .static-tagline { transform: translateX(-50%) scale(.45); }
  body > main#home { background: var(--paper); }
  .story { background: var(--bg); }
  /* 一枚の不透明な面でFVを覆い、セクション間にも固定中の背景を透かさない。 */
  .content-sections { position: relative; z-index: 2; background: var(--paper); }
  .has-motion .content-sections { margin-top: -100svh; }
  .has-motion .works { margin-top: 0; }
  .works, .artists, .news { padding: 80px 20px 0; }
  .artists { padding-bottom: 32px; background: transparent; isolation: auto; overflow: visible; }
  .news { padding-top: 48px; padding-bottom: 80px; background: transparent; overflow: visible; }
  /* SPはSVGの1px線を使わず、拡縮時も途切れないCSSの罫線で描く。 */
  .section-heading-rule, .news-row-rule { display: none; }
  .section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--bg); }
  .works .section-heading { padding-bottom: 0; }
  .artists .section-heading { border-bottom: 0; }
  .works-view-all, .news-view-all { position: static; align-self: auto; }
  .works-controls { margin-top: 8px; }
  .works-gallery { margin-right: -20px; }
  .works-grid { gap: 12px; }
  .works-gallery .works-grid { grid-auto-columns: calc((100cqw - 12px) / 1.15); padding-right: 20px; }
  .work-meta { margin-top: 12px; }
  .work-date { font-size: 12px; }
  .work-tags li { padding: 3px 9px; font-size: 10px; letter-spacing: .02em; }
  .work-artist { font-size: 12px; }
  .work-title { font-size: 15px; line-height: 1.75; }
  .section-title { height: auto; font-size: clamp(38px, 12.3vw, 52px); line-height: 1.15; }
  .section-heading:has(.section-more) { container-type: inline-size; }
  .section-heading:has(.section-more) .section-title { font-size: clamp(36px, 12cqw, 52px); }
  .news-content { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 28px; }
  .news-category { font-size: 12px; line-height: 1.5; height: auto; }
  .news-list { gap: 24px; }
  .news-row, .news-row:first-child { grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; padding-bottom: 28px; border-bottom: 1px solid #8d8d8d; }
  .news-row:last-child { border-bottom: 0; }
  .news-badge { height: 25px; font-size: 11px; line-height: 1.4; width: auto; padding-inline: 12px; }
  .news-entry-main { display: contents; }
  .news-date { align-self: center; height: auto; font-size: 12px; line-height: 1.5; }
  .news-entry-title { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.85; }
  .section-more { font-size: 12px; }
  .artist-card { display: block; width: min(100%, 480px); margin-top: 28px; padding: 16px; }
  .artist-index { height: 28px; margin-bottom: 12px; }
  .artist-star { left: auto; right: 0; top: -8px; transform: scale(.38); transform-origin: top right; }
  .artist-caption { margin-top: 20px; }
  .artist-label { min-height: 0; font-size: 12px; line-height: 1.5; }
  .artist-name { min-height: 0; font-size: clamp(17px, 4.7vw, 22px); line-height: 1.4; }
  .artist-more { width: max-content; min-height: 44px; margin-top: 24px; border: 0; font-size: 14px; }
  .site-footer { padding: 72px 20px max(28px, env(safe-area-inset-bottom)); }
  .footer-brand-link { display: flex; align-items: center; width: min(240px, 75%); min-height: 44px; }
  .footer-description { margin-top: 24px; font-size: 13px; line-height: 1.95; }
  .footer-main { gap: 32px; margin-bottom: 40px; }
  .footer-links { max-width: none; }
  .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
  .footer-nav .type-label { font-size: 17px; }
  .footer-privacy { margin-top: 16px; }
  .footer-bottom { gap: 16px; }
  .footer-top { gap: 8px; }
  .footer-top > span { font-size: 14px; }
  .footer-wordmark { margin-top: 20px; }
  .footer-wordmark-trace { margin-bottom: 2px; }
  .footer-wordmark-trace-first { margin-bottom: max(4px, .04em); }
  .menu-button:active { background: var(--bg); color: var(--accent); }
  .work-link:active .work-image::before { opacity: .12; }
  .artist-card:has(.artist-more:active) { background: var(--accent); }
  .footer-nav a:active, .footer-privacy:active { color: var(--accent); }
}
@keyframes tagline-loop-mobile { to { transform: translateX(-25%); } }
@media (max-width: 359px) {
  .about-copy { font-size: calc(14px / var(--scale)); line-height: 1.8; }
}

/* Shared motion: 300ms for feedback, 450ms for image/text travel; one easing.
   Keep hover on pointing devices and give keyboard users the same visual response. */
.motion-label { display: block; flex: none; overflow: hidden; }
.motion-label-track { position: relative; display: block; transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.motion-label-track > * { display: block; }
.motion-label-copy { position: absolute; left: 0; top: 100%; }
.work-image img, .artist-portrait > img { scale: 1; transition: scale .45s cubic-bezier(.2,.7,.3,1); }
.outbound-arrow, .menu-item-arrow, .footer-top > span {
  transition: transform .3s cubic-bezier(.2,.7,.3,1), color .3s cubic-bezier(.2,.7,.3,1);
}
.works-directions button { border-radius: 50%; }
.menu-item-title, .menu-item-ja { transition: translate .3s cubic-bezier(.2,.7,.3,1); }
.menu-item-arrow { margin-right: 8px; }
.artist-more::after { content: ''; position: absolute; inset: 0; }
.artist-more:focus-visible { outline: none; }
.artist-more:focus-visible::after { outline: 2px solid var(--bg); outline-offset: -2px; }
.artist-card:has(.artist-more:focus-visible) { background-color: var(--accent); }

a:focus-visible .motion-label-track { transform: translateY(-100%); }
.work-link:focus-visible .work-image img, .artist-card:has(.artist-more:focus-visible) .artist-portrait > img { scale: 1.035; }
.work-link:focus-visible .work-image::before { opacity: .42; }
.work-link:focus-visible .work-hover { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.outbound-link:focus-visible .outbound-arrow { transform: translate(3px,-3px); }
.footer-top:focus-visible > span { transform: translateY(-3px); color: var(--accent); }
.menu-item:focus-visible .menu-item-title, .menu-item:focus-visible .menu-item-ja { translate: 8px 0; }
.menu-item:focus-visible .menu-item-arrow { transform: translateX(4px); }
.category-filters button:focus-visible { border-color: var(--bg); background-color: var(--accent); }
.works-directions button:not(:disabled):focus-visible { background-color: var(--accent); }
.menu-button:focus-visible { background-color: var(--bg); color: var(--accent); box-shadow: inset 0 0 0 1px var(--bg); }
.home-link:focus-visible, .footer-brand-link:focus-visible { opacity: .72; }

@media (hover: hover) and (pointer: fine) {
  a:not(.work-link):hover .link-label, .breadcrumb a:hover { background-size: 100% 1px; }
  a:hover .motion-label-track { transform: translateY(-100%); }
  .work-link:hover .work-image img, .artist-card:has(.artist-more:hover) .artist-portrait > img { scale: 1.035; }
  .work-link:hover .work-image::before { opacity: .42; }
  .work-link:hover .work-hover { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  .artist-card:has(.artist-more:hover) { background-color: var(--accent); }
  .outbound-link:hover .outbound-arrow { transform: translate(3px,-3px); }
  .footer-top:hover > span { transform: translateY(-3px); color: var(--accent); }
  .menu-item:hover { background-color: var(--accent); }
  .menu-item:hover .menu-item-title, .menu-item:hover .menu-item-ja { translate: 8px 0; }
  .menu-item:hover .menu-item-arrow { transform: translateX(4px); }
  .related-artist:hover { background-color: var(--accent); }
  .profile-links .outbound-link:hover, .footer-top:hover { color: var(--accent); }
  .footer-privacy:hover { color: var(--accent); }
  .category-filters button:hover { border-color: var(--bg); background-color: var(--accent); }
  .works-directions button:not(:disabled):hover { background-color: var(--accent); }
  .menu-button:hover { background-color: var(--bg); color: var(--accent); box-shadow: inset 0 0 0 1px var(--bg); }
  .home-link:hover, .footer-brand-link:hover { opacity: .72; }
}

/* Discrete display transitions preserve native show/close, Escape and focus behavior. */
.site-menu { opacity: 0; transition: opacity .3s cubic-bezier(.2,.7,.3,1), display .3s allow-discrete; }
.site-menu[open] { opacity: 1; }
.site-menu:not([open]) { pointer-events: none; }
.menu-layout { opacity: 0; transform: translateY(12px); transition: opacity .45s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1); }
.site-menu[open] .menu-layout { opacity: 1; transform: none; }
@starting-style {
  .site-menu[open] { opacity: 0; }
  .site-menu[open] .menu-layout { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .site-menu { transition-duration: .2s; }
  .menu-layout { transform: translateY(6px); transition-duration: .3s; }
  .site-menu[open] .menu-layout { transform: none; }
  @starting-style { .site-menu[open] .menu-layout { transform: translateY(6px); } }
}
@media (max-width: 767px) and (max-height: 500px), (max-width: 1023px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .hero-tagline { top: auto; bottom: calc(8px / var(--scale)); font-size: calc(12px / var(--scale)); }
  .hero-tagline br { display: none; }
  .about-label { top: 23%; font-size: calc(16px / var(--scale)); }
  .about-copy { top: 55%; font-size: calc(14px / var(--scale)); line-height: 1.65; }
  .about-copy p { display: inline; }
  .about-copy p + p { margin-top: 0; }
  .about-tagline { bottom: 4%; }
  .tagline-track > span { font-size: calc(16px / var(--scale)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .motion-label-track, .menu-item-title, .menu-item-ja, .outbound-arrow,
  .menu-item-arrow, .footer-top > span { transform: none !important; translate: none !important; }
  .work-image img, .artist-portrait > img { scale: 1 !important; }
  .work-hover { transform: translate(-50%,-50%) !important; }
  .tagline-track, .circle-type > img { animation: none; }
  .has-motion .story { height: 100svh; }
  .has-motion .static-about { display: grid; }
  .has-motion .motion-about { display: none; }
  .has-motion .works { margin-top: 0; }
  .has-motion .content-sections { margin-top: 0; }
}