/* トップとPortfolioのページ固有CSS。セクション順は旧読込順を維持する。 */

/* ===== トップ基盤・Hero・作品・GFX ===== */

:root {
  --bg: #09090a;
  --surface: #101013;
  --ink: #f2f2f3;
  --muted: #85858d;
  --line: rgba(240, 21, 45, 0.16);
  --accent: #f0152d;
  --accent-bright: #ff1735;
  --pad: clamp(18px, 2.6vw, 46px);
  --ease: cubic-bezier(.2,.78,.16,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
html.booting { overflow: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 14%, rgba(240,21,45,.065), transparent 26rem),
    var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  cursor: none;
}
body.booting { position: fixed; inset: 0; width: 100%; overflow: hidden; }
/* 初回表示でもリロード後でも挙動を揃えるため、メニュー・ライトボックス表示中にページスクロールは止めない。 */
body.menu-open, body.gfx-open { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
a, button, [data-cursor], .project-card, .project-card * { cursor: none; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
::selection { color: var(--accent); background: #18181b; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

.boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  align-content: center;
  padding: var(--pad);
  background:
    radial-gradient(circle at 78% 22%, rgba(240,21,45,.10), transparent 28rem),
    var(--bg);
  color: var(--accent);
  transition: clip-path 1.05s var(--ease-out) .1s, visibility 0s 1.2s;
  clip-path: inset(0 0 0 0);
}
.boot.is-hidden { clip-path: inset(0 0 100% 0); visibility: hidden; }
.boot__top { position:absolute; inset:var(--pad) var(--pad) auto; display:flex; justify-content:space-between; font-size:9px; letter-spacing:.18em; }
.boot__word { font-size:clamp(56px,13vw,210px); line-height:.74; font-weight:800; letter-spacing:-.09em; text-transform:uppercase; }
.boot__line { width: 100%; height: 1px; margin-top:28px; background: rgba(240,21,45,.18); overflow: hidden; }
.boot__line span { display:block; width:100%; height:100%; background:var(--accent); box-shadow:0 0 18px rgba(240,21,45,.45); transform:scaleX(0); transform-origin:left; animation:load 1.15s var(--ease) forwards; }
.boot__label { margin:11px 0 0; font-size:9px; letter-spacing:.18em; }
@keyframes load { to { transform:scaleX(1); } }

.cursor {
  position: fixed;
  z-index: 1500;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border:1px solid rgba(255,255,255,.65);
  background: var(--accent);
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  mix-blend-mode: normal;
  transition: width .34s var(--ease-out), height .34s var(--ease-out), background .25s, border-color .25s;
}
.cursor span { opacity:0; color:#fff; font-size:8px; font-weight:700; letter-spacing:.13em; white-space:nowrap; transition:opacity .2s; mix-blend-mode:normal; }
.cursor.is-active { width:72px; height:72px; border-color:transparent; mix-blend-mode:normal; }
.cursor.is-active span { opacity:1; }

.page-progress { position:fixed; z-index:95; left:0; bottom:0; width:100%; height:2px; pointer-events:none; background:rgba(240,21,45,.055); }
.page-progress span { display:block; width:100%; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; }

.site-header {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height:68px;
  padding: 0 var(--pad);
  border-bottom:1px solid transparent;
  color:white;
  transition:transform .55s var(--ease), background .4s, border-color .4s, backdrop-filter .4s;
}
.site-header.is-scrolled { background:rgba(9,9,10,.82); border-color:var(--accent); backdrop-filter:blur(18px); }
.brand { justify-self:start; display:flex; align-items:center; gap:10px; font-weight:700; font-size:12px; letter-spacing:.015em; }
.header-meta { display:flex; gap:36px; font-size:8px; letter-spacing:.17em; text-align:center; }
.header-meta__location { color:#c5c1bb; }
.menu-toggle { justify-self:end; border:0; background:none; padding:12px 0 12px 14px; display:flex; gap:12px; align-items:center; cursor:none; font-size:9px; letter-spacing:.14em; transform:translate3d(0, 0, 0); transition:transform .45s var(--ease-out), color .35s var(--ease); transform-origin:center center; }
.menu-toggle:hover, .menu-toggle:focus-visible { color:var(--accent-bright); transform:translate3d(0, -2px, 0); text-shadow:0 0 24px rgba(240,21,45,.18); }
.menu-toggle__icon { position:relative; width:24px; height:12px; display:block; }
.menu-toggle__icon i { position:absolute; right:0; width:100%; height:1px; background:currentColor; transition:transform .4s var(--ease-out), top .4s var(--ease-out), width .4s var(--ease-out); }
.menu-toggle__icon i:first-child { top:2px; }
.menu-toggle__icon i:last-child { top:9px; width:65%; }
.menu-open .menu-toggle__icon i:first-child { top:6px; transform:rotate(45deg); }
.menu-open .menu-toggle__icon i:last-child { top:6px; width:100%; transform:rotate(-45deg); }

.menu { position:fixed; inset:0; z-index:70; pointer-events:none; visibility:hidden; }
.menu.is-open { pointer-events:auto; visibility:visible; }
.menu__backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(0,0,0,.76); opacity:0; cursor:none; transition:opacity .45s; backdrop-filter:blur(4px); }
.menu__panel { position:absolute; top:0; right:0; width:min(760px,100%); height:100%; background:var(--bg); color:var(--ink); padding:105px var(--pad) 34px; transform:translateX(102%); transition:transform .72s var(--ease-out); display:flex; flex-direction:column; border-left:1px solid rgba(240,21,45,.32); box-shadow:-24px 0 90px rgba(0,0,0,.58); }
.menu__panel::before { content:""; position:absolute; top:0; left:0; width:5px; height:100%; background:var(--accent); }
.menu.is-open .menu__backdrop { opacity:1; }
.menu.is-open .menu__panel { transform:translateX(0); }
.menu__top { display:flex; justify-content:space-between; gap:24px; padding-bottom:32px; border-bottom:1px solid rgba(240,21,45,.26); }
.menu__links { margin-top:18px; }
.menu__links > a { display:grid; grid-template-columns:34px minmax(0, 1fr) auto; align-items:end; gap:16px; border-bottom:1px solid rgba(240,21,45,.20); padding:17px 16px 13px 0; overflow:visible; color:var(--ink); transition:color .35s var(--ease); }
.menu__links > a span { align-self:start; padding-top:7px; font-size:9px; letter-spacing:.1em; }
.menu__links > a strong { font-size:clamp(54px,8vw,112px); line-height:.82; letter-spacing:-.075em; color:inherit; transition:transform .45s var(--ease-out), color .35s; }
.menu__links > a i { font-style:normal; font-size:22px; color:inherit; transition:transform .45s var(--ease-out), color .35s; }
/* メニューリンク全体を1つの要素として扱い、文字と矢印のホバー挙動を同期する */
.menu__links > a:hover,
.menu__links > a:focus-visible { color:var(--accent-bright); }
.menu__links > a:hover strong,
.menu__links > a:focus-visible strong { transform:translateX(12px); text-shadow:0 0 24px rgba(240,21,45,.18); }
.menu__links > a:hover i,
.menu__links > a:focus-visible i { transform:translateX(12px); }

.hero { min-height:100svh; position:relative; overflow:hidden; padding:94px var(--pad) 25px; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; }
.hero::after { content:""; position:absolute; inset:auto var(--pad) 0; height:1px; background:rgba(255,255,255,.22); z-index:3; }
.hero__media { position:absolute; inset:0; background:#111; }
.hero__interaction { position:absolute; inset:0; z-index:1; }
.hero__media video { transform:scale(1.045); filter:saturate(.42) contrast(1.16) brightness(.78); animation:heroZoom 12s ease-in-out infinite alternate; }
@keyframes heroZoom { to { transform:scale(1.095); } }
.media-frame__noise { position:absolute; inset:0; opacity:.16; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.hero__shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.02) 38%,rgba(0,0,0,.82)); }
.hero__topline { position:absolute; z-index:2; inset:86px var(--pad) auto; display:flex; justify-content:space-between; font-size:8px; letter-spacing:.16em; }
/* VIEW除外範囲は、shared-ui.jsが実際に描画された文字境界から計算する。 */
.hero__copy { position:relative; z-index:2; pointer-events:none; }
.hero__kicker { margin:0 0 13px; font-size:9px; letter-spacing:.18em; color:#d6d1ca; }
.hero h1 { margin:0; font-size:clamp(76px,14.5vw,248px); line-height:.72; font-weight:800; letter-spacing:-.09em; text-transform:uppercase; }
.hero h1 .line { display:block; overflow:hidden; padding-right:.09em; }
.hero h1 .line > span { display:block; transform:translateY(112%) rotate(2deg); animation:heroIn 1.15s var(--ease-out) 1s forwards; }
.hero h1 .line:nth-child(2) > span { animation-delay:1.13s; }
.hero h1 .line--offset { margin-left:9vw; color:transparent; -webkit-text-stroke:clamp(1px,.11vw,2px) var(--ink); }
@keyframes heroIn { to { transform:translateY(0) rotate(0); } }
.hero__bottom { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto auto; align-items:end; gap:36px; margin-top:34px; pointer-events:none; }
.hero__bottom > p { margin:0; max-width:390px; font-size:9px; line-height:1.5; letter-spacing:.18em; color:#d6d1ca; }
.hero__reel-meta { display:flex; gap:18px; padding-bottom:7px; font-size:9px; letter-spacing:.18em; color:#d6d1ca; }

.marquee { overflow:hidden; border-top:1px solid var(--accent); border-bottom:1px solid var(--accent); background:var(--bg); color:var(--accent); transform:none; box-shadow:0 0 32px rgba(240,21,45,.08); }
.marquee__track { display:flex; width:max-content; animation:marquee var(--marquee-duration, 25s) linear infinite; padding:14px 0 12px; font-weight:800; font-size:12px; letter-spacing:.035em; will-change:transform; }
.marquee__group { display:flex; flex:0 0 auto; }
.marquee__item { display:flex; align-items:center; gap:28px; padding-right:28px; }
.marquee__item i { width:7px; height:7px; background:var(--accent); transform:rotate(45deg); box-shadow:0 0 12px rgba(240,21,45,.32); }
@keyframes marquee { to { transform:translateX(calc(var(--marquee-shift, 0px) * -1)); } }

.section-shell { padding:clamp(100px,12vw,190px) var(--pad); }
.eyebrow { margin:0; font-size:8px; letter-spacing:.19em; line-height:1.4; }
.section-heading { display:grid; grid-template-columns:minmax(150px,.6fr) 2.1fr auto; align-items:end; gap:30px; margin-bottom:76px; }
.section-heading > div { display:grid; gap:12px; }
.section-heading h2 { margin:0; font-size:clamp(42px,7vw,104px); line-height:.82; letter-spacing:-.07em; }

.works { position:relative; overflow:visible; }
.works .section-heading { grid-template-columns:1fr; justify-items:center; text-align:center; gap:18px; width:100%; margin-inline:auto; }
.works .section-heading > div { justify-items:center; }
.works .section-heading h2 { justify-self:center; }
.works::before { content:none; }
.works .section-heading, .work-list { position:relative; z-index:1; }
.work-list { display:grid; gap:0; width:min(50vw, 960px); margin:0 auto; overflow:visible; }
.project-list__error { margin:0; padding:24px 0; color:var(--muted); font-size:10px; letter-spacing:.12em; text-align:center; }
.project-card { position:relative; display:block; color:var(--ink); transform:translate3d(0, 0, 0) scale(1); transition:transform .7s cubic-bezier(.18,.82,.22,1), box-shadow .7s cubic-bezier(.18,.82,.22,1), z-index .01s linear; transform-origin:center center; box-shadow:0 0 0 rgba(0,0,0,0); will-change:transform, box-shadow; }
.project-card.is-entering { opacity:0; transform:translate3d(0, 28px, 0) scale(.985); filter:blur(3px); }
.project-card.is-visible { opacity:1; transform:translate3d(0, 0, 0) scale(1); filter:blur(0); transition:opacity .68s var(--ease-out), transform .82s cubic-bezier(.18,.82,.22,1), filter .68s var(--ease-out), box-shadow .7s cubic-bezier(.18,.82,.22,1), z-index .01s linear; }
.project-card:hover, .project-card:focus-visible, .project-card.is-playing { z-index:3; transform:translate3d(0, -14px, 0) scale(1.03); box-shadow:none; }
.project-card__media { position:relative; aspect-ratio:1920 / 492; overflow:hidden; background:var(--surface); isolation:isolate; }
.project-card__media::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.03) 36%, rgba(0,0,0,.52)); z-index:1; pointer-events:none; transition:background .35s var(--ease); }
.project-card:hover .project-card__media::before, .project-card:focus-visible .project-card__media::before, .project-card.is-playing .project-card__media::before { background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02) 36%, rgba(0,0,0,.42)); }
.project-card img, .project-card video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .3s var(--ease), filter .4s var(--ease); transform:scale(1); }
.project-card img { opacity:1; filter:saturate(.9) contrast(1.03); }
.project-card video { opacity:0; filter:saturate(.86) contrast(1.06) brightness(1.02); }
.project-card:hover img, .project-card:focus-visible img, .project-card.is-playing img { opacity:0; }
.project-card:hover video, .project-card:focus-visible video, .project-card.is-playing video { opacity:1; }
.project-card__meta { position:absolute; left:18px; right:18px; bottom:16px; z-index:2; display:grid; grid-template-columns:34px minmax(0, 1fr); gap:12px; align-items:end; }
.project-card__copy { display:grid; gap:6px; min-width:0; justify-items:start; }
.project-card__number { color:#d3d0cb; font-size:7px; letter-spacing:.14em; padding-bottom:4px; }
.project-card__details { display:flex; gap:12px; flex-wrap:wrap; order:-1; }
.project-card__type, .project-card__year { font-size:7px; letter-spacing:.16em; white-space:nowrap; color:#d3d0cb; }
.project-card__title { margin:0; font-size:clamp(20px,2.5vw,38px); letter-spacing:-.05em; line-height:.95; text-shadow:0 0 18px rgba(0,0,0,.3); }

.gfx-section { padding-top:0; overflow:hidden; }
.gfx-section__head { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:34px; border-bottom:1px solid var(--line); padding-bottom:20px; }
.gfx-section__head > p:last-child { margin:0; color:var(--muted); font-size:8px; line-height:1.55; letter-spacing:.14em; text-align:right; }
.gfx-gallery { position:relative; min-height:clamp(780px, 72vw, 1220px); }
.gfx-card { position:absolute; left:var(--gfx-x); top:var(--gfx-y); width:var(--gfx-w); border:0; padding:0; background:transparent; color:var(--ink); text-align:left; cursor:none; transform:translate3d(0, 0, 0) scale(1); transition:transform .7s cubic-bezier(.18,.82,.22,1), color .35s var(--ease); transform-origin:center center; will-change:transform; }
.gfx-card:hover, .gfx-card:focus-visible { z-index:3; color:var(--accent-bright); transform:translate3d(0, -14px, 0) scale(1.03); }
/* 画像とラベルを別々に動かさず、カード全体を1つのホバー対象として扱う */
.gfx-card img { width:100%; height:auto; aspect-ratio:var(--gfx-ratio, 1 / 1); object-fit:cover; background:var(--surface); filter:saturate(.92) contrast(1.04); transition:filter .4s var(--ease); }
.gfx-card:hover img, .gfx-card:focus-visible img { filter:saturate(.98) contrast(1.07); }
.gfx-card__label { display:block; margin-top:9px; font-size:8px; letter-spacing:.12em; line-height:1.35; color:inherit; transition:color .35s var(--ease); }
.gfx-card.is-missing { min-height:120px; padding:18px; border:1px dashed rgba(240,21,45,.42); background:rgba(240,21,45,.025); }
.gfx-card.is-missing img { display:none; }
.gfx-card.is-missing::before { content:"ADD IMAGE"; display:block; margin-bottom:11px; color:var(--muted); font-size:8px; letter-spacing:.18em; }
.gfx-lightbox { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:var(--pad); visibility:hidden; opacity:0; transition:opacity .24s var(--ease), visibility 0s .24s; }
.gfx-lightbox.is-open { visibility:visible; opacity:1; transition-delay:0s; }
.gfx-lightbox__backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,0,.82); cursor:pointer; }
.gfx-lightbox__figure { position:relative; z-index:1; display:grid; gap:14px; width:min(92vw, 1120px); max-height:88svh; margin:0; }
.gfx-lightbox__figure img { max-width:100%; max-height:78svh; width:auto; height:auto; margin:auto; object-fit:contain; background:#050506; }
.gfx-lightbox__caption { display:flex; justify-content:space-between; gap:20px; color:var(--ink); font-size:10px; letter-spacing:.12em; }
.gfx-lightbox__caption p { margin:0; color:var(--muted); text-align:right; }
.gfx-lightbox__close { position:absolute; z-index:2; top:18px; right:18px; width:42px; height:42px; border:1px solid var(--accent); background:var(--bg); color:var(--accent-bright); cursor:pointer; font-size:18px; line-height:1; }

.reveal { opacity:0; transform:translateY(46px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal.is-visible { opacity:1; transform:none; }
.gfx-card.reveal.is-visible { transform:translate3d(0, 0, 0) scale(1); }
.gfx-card.reveal.is-visible:hover, .gfx-card.reveal.is-visible:focus-visible { z-index:3; color:var(--accent-bright); transform:translate3d(0, -14px, 0) scale(1.03); }
.gfx-card.reveal.is-visible:hover .gfx-card__label,
.gfx-card.reveal.is-visible:focus-visible .gfx-card__label {
  color:var(--accent-bright);
  /* 赤色ホバー時も通常時と同じ視認性になるよう文字を補正する */
  font-weight:600;
  text-shadow:0 0 24px rgba(240,21,45,.18);
}

@media (max-width: 900px) {
  body { cursor:auto; }
  .cursor { display:none; }
  .site-header { grid-template-columns:1fr auto; }
  .header-meta { display:none; }
  .menu-toggle, .menu__backdrop, .gfx-card { cursor:pointer; }
  .hero { padding-top:82px; }
  .hero h1 { font-size:clamp(65px,18vw,150px); line-height:.76; }
  .hero h1 .line--offset { margin-left:0; }
  .hero__topline { top:82px; }
  .hero__bottom { grid-template-columns:1fr auto; }
  .hero__reel-meta { display:none; }
  .section-heading { grid-template-columns:1fr auto; }
  .section-heading h2 { grid-row:2; grid-column:1/-1; }
  .work-list { width:min(72vw, 960px); }
  .project-card__meta { left:14px; right:14px; bottom:14px; grid-template-columns:28px minmax(0, 1fr); gap:10px; }
  .gfx-gallery { min-height:1020px; }
  .gfx-card { width:var(--gfx-w-tablet, min(42vw, 260px)); }
}

@media (max-width: 560px) {
  :root { --pad:16px; }
  .site-header { min-height:58px; }
  .menu__panel { padding-top:86px; }
  .menu__top { display:block; }
  .menu__links > a { grid-template-columns:24px minmax(0, 1fr) auto; padding-right:12px; }
  .menu__links > a strong { font-size:52px; }
  .hero__topline { top:69px; }
  .hero__kicker { max-width:260px; }
  .hero__bottom > p { max-width:230px; font-size:10px; }
  .section-shell { padding-top:104px; padding-bottom:104px; }
  .section-heading { margin-bottom:48px; }
  .work-list { width:100%; }
  .project-card__meta { left:12px; right:12px; bottom:12px; grid-template-columns:24px minmax(0, 1fr); gap:8px; }
  .project-card__copy { gap:6px; }
  .project-card__number, .project-card__type, .project-card__year { font-size:6px; }
  .project-card__title { font-size:clamp(16px, 4.8vw, 24px); }
  .gfx-section__head > p:last-child { display:none; }
  .gfx-gallery { min-height:auto; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px 18px; }
  .gfx-card, .gfx-card.reveal.is-visible { position:relative; left:auto; top:auto; width:100%; transform:translate3d(0, 0, 0) scale(1); }
  .gfx-card:hover, .gfx-card:focus-visible, .gfx-card.reveal.is-visible:hover, .gfx-card.reveal.is-visible:focus-visible { transform:translate3d(0, -14px, 0) scale(1.03); }
  .gfx-lightbox__caption { display:grid; }
  .gfx-lightbox__caption p { text-align:left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
  .boot { display:none; }
  .hero h1 .line > span { transform:none; }
  .project-card, .project-card.is-entering, .project-card.is-visible { opacity:1; filter:none; transform:translate3d(0, 0, 0) scale(1); }
}

/* ===== トップ作品カード補正 ===== */

.marquee {
  position: relative;
  z-index: 2;
  border-top: 0;
  border-bottom: 0;
  isolation: isolate;
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent), 0 -1px 0 var(--bg), 0 1px 0 var(--bg), 0 0 32px rgba(240, 21, 45, .08);
}

.marquee::before,
.marquee::after {
  content: none;
}

.marquee__track {
  position: relative;
  z-index: 1;
}

.works {
  overflow-x: clip;
}

.works .section-heading .eyebrow {
  color: var(--accent);
}

.work-list {
  width: min(51.8vw, 985px);
}

.works__actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: clamp(34px, 5vw, 72px);
}

.works__view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: min(100%, 320px);
  padding: 16px 22px 15px;
  border: 1px solid var(--accent);
  color: var(--accent-bright);
  background: rgba(240, 21, 45, .035);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease);
}

.works__view-all:hover,
.works__view-all:focus-visible {
  background: var(--accent);
  color: #050506;
  box-shadow: 0 0 28px rgba(240, 21, 45, .16);
}

.project-card {
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  will-change: transform, filter;
}

.project-card:hover,
.project-card:focus-visible,
.project-card.is-playing {
  z-index: 3;
  transform: translate3d(0, 0, 0) scale(1.035);
}

.project-card__media {
  container: project-card / inline-size;
}

.project-card__meta {
  left: clamp(10px, 1.65cqw, 18px);
  right: clamp(10px, 1.65cqw, 18px);
  bottom: clamp(10px, 1.45cqw, 16px);
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.project-card__number {
  display: none;
}

.project-card__copy {
  grid-column: 1 / -1;
  justify-items: start;
  align-items: start;
  gap: clamp(3px, .55cqw, 6px);
}

.project-card__details {
  margin-left: clamp(1px, .16cqw, 3px);
  padding-left: 0;
  gap: clamp(6px, 1.08cqw, 12px);
}

.project-card__type,
.project-card__year {
  /* title / type / yearは同じ倍率で大胆に拡大し、文字同士の比率を維持する */
  font-size: clamp(10px, 1.29cqw, 14px);
  line-height: 1.12;
  letter-spacing: .15em;
}

.project-card__title {
  margin-left: -.018em;
  padding-left: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: clamp(25px, 4.83cqw, 53px);
  font-weight: 700;
  font-synthesis: none;
  line-height: .95;
  letter-spacing: .012em;
  text-shadow: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@container project-card (max-width: 520px) {
  .project-card__meta {
    left: clamp(8px, 2.6cqw, 12px);
    right: clamp(8px, 2.6cqw, 12px);
    bottom: clamp(8px, 2.45cqw, 12px);
  }

  .project-card__copy {
    gap: clamp(2px, .7cqw, 4px);
  }

  .project-card__details {
    margin-left: 1px;
    gap: clamp(5px, 1.75cqw, 8px);
  }

  .project-card__type,
  .project-card__year {
    font-size: clamp(7.7px, 2.03cqw, 10px);
    letter-spacing: .14em;
  }

  .project-card__title {
    font-size: clamp(24px, 6.09cqw, 31px);
    letter-spacing: .006em;
  }
}

@media (max-width: 900px) {
  .work-list {
    width: min(70.5vw, 985px);
  }

}

@media (max-width: 560px) {
  .work-list {
    width: 100%;
  }

  .works__view-all {
    width: 100%;
    min-width: 0;
  }
}

/* ===== Portfolio固有 ===== */

:root {
  color-scheme: dark;
}

.portfolio-body {
  min-height: 100vh;
  background: #050506;
  color: var(--ink);
  cursor: none;
}

.portfolio-body a,
.portfolio-body button,
.portfolio-body [data-cursor],
.portfolio-card__thumb,
.portfolio-card__thumb * {
  cursor: none;
}

.portfolio-page {
  min-height: 100vh;
  padding: clamp(108px, 12vw, 160px) 0 80px;
}

.portfolio-hero {
  display: grid;
  place-items: center;
  gap: 16px;
  padding: 0 var(--pad) clamp(48px, 6vw, 82px);
  text-align: center;
}

.portfolio-hero .eyebrow {
  color: var(--accent);
}

.portfolio-hero h1 {
  margin: 0;
  font-size: clamp(52px, 7.2vw, 118px);
  line-height: .78;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.portfolio-hero__count {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .12em;
}

.portfolio-hero__mode {
  margin: 0;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .18em;
}

.portfolio-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 var(--pad) clamp(30px, 4vw, 44px);
}

.portfolio-tab {
  min-width: 140px;
  border: 1px solid rgba(240, 21, 45, .34);
  background: rgba(240, 21, 45, .035);
  color: #e7e7ec;
  padding: 14px 18px 13px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}

.portfolio-tab:hover,
.portfolio-tab:focus-visible,
.portfolio-tab.is-active {
  background: var(--accent);
  color: #050506;
  border-color: var(--accent);
  box-shadow: 0 0 28px rgba(240, 21, 45, .16);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: stretch;
  gap: 0;
  width: 100%;
  background: #030304;
  overflow: visible;
}

.portfolio-grid.is-gfx {
  display: block;
  position: relative;
  --gfx-masonry-gap: clamp(10px, 1.2vw, 18px);
  padding: 0 var(--pad);
  background: transparent;
}

.portfolio-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: visible;
  color: var(--ink);
  background: #08080a;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  transition: transform .7s cubic-bezier(.18, .82, .22, 1), filter .7s cubic-bezier(.18, .82, .22, 1), z-index .01s linear;
  will-change: transform, filter;
}

.portfolio-card.is-entering {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.985);
  filter: blur(3px);
}

.portfolio-card.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition:
    opacity .68s var(--ease-out),
    transform .82s cubic-bezier(.18, .82, .22, 1),
    filter .68s var(--ease-out),
    z-index .01s linear;
}

.portfolio-card:hover,
.portfolio-card:focus-within {
  z-index: 3;
  transform: translate3d(0, 0, 0) scale(1.035);
  filter: drop-shadow(0 18px 46px rgba(0, 0, 0, .34));
}

.portfolio-card__thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: inherit;
  background: var(--surface);
  isolation: isolate;
}

.portfolio-card__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .03) 36%, rgba(0, 0, 0, .52));
  transition: background .35s var(--ease);
  pointer-events: none;
}

.portfolio-card:hover .portfolio-card__thumb::before,
.portfolio-card:focus-within .portfolio-card__thumb::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .02) 36%, rgba(0, 0, 0, .42));
}

.portfolio-card__thumb img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transform: scale(1);
  opacity: 1;
  filter: saturate(.9) contrast(1.03);
  transition: opacity .3s var(--ease), filter .4s var(--ease);
}

.portfolio-card__preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.portfolio-card:hover .portfolio-card__thumb img,
.portfolio-card:focus-within .portfolio-card__thumb img {
  opacity: 1;
  filter: saturate(.86) contrast(1.06) brightness(1.02);
}

.portfolio-gfx-card {
  aspect-ratio: auto;
  background: rgba(11, 11, 14, .92);
  border: 1px solid rgba(240, 21, 45, .16);
  overflow: hidden;
}

/* GFXは元画像の比率を保ち、JavaScriptで最短列へ順に配置する。 */
.portfolio-grid.is-gfx .portfolio-gfx-card {
  position: absolute;
  margin: 0;
  border: 0;
  background: transparent;
}

.portfolio-gfx-card__media {
  position: relative;
  display: block;
  aspect-ratio: var(--gfx-ratio, 1 / 1);
  overflow: hidden;
  background: var(--surface);
}

.portfolio-gfx-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  transition: filter .4s var(--ease);
}

.portfolio-gfx-card__copy {
  display: grid;
  gap: 8px;
  padding: 16px 16px 18px;
}

.portfolio-gfx-card__copy strong {
  font-size: clamp(17px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -.03em;
}

.portfolio-gfx-card__copy p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1.6;
}

.portfolio-gfx-card:hover .portfolio-gfx-card__media img,
.portfolio-gfx-card:focus-within .portfolio-gfx-card__media img {
  /* VIDEO WORKSと同じく、画像内部は拡大せずカード本体だけを拡大する。 */
  filter: saturate(.86) contrast(1.06) brightness(1.02);
}

.portfolio-error,
.portfolio-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 42px var(--pad);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .12em;
  text-align: center;
}

@media (max-width: 1180px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio-grid.is-gfx {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .portfolio-page {
    padding-top: 94px;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-grid.is-gfx {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .portfolio-page {
    padding-top: 84px;
  }

  .portfolio-hero {
    padding-bottom: 40px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-tabs {
    flex-direction: column;
  }

  .portfolio-tab {
    width: 100%;
  }
}

@media (pointer: coarse) {
  .portfolio-body,
  .portfolio-body a,
  .portfolio-body button,
  .portfolio-body [data-cursor],
  .portfolio-card__thumb,
  .portfolio-card__thumb * {
    cursor: auto;
  }

  .portfolio-body .cursor {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card,
  .portfolio-card.is-entering,
  .portfolio-card.is-visible {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
    transition: none;
  }
}

/* ===== トップ・Portfolio共通テーマ ===== */

/* KoalaVisual Webのドット系UIを、V2のページ構成に合わせて移植する共通テーマ。 */
:root {
  --dot-bg: #050506;
  --dot-panel: #151516;
  --dot-panel-strong: #1d1d1f;
  --dot-ink: #f4f4f1;
  --dot-muted: #aaa9a4;
  --dot-accent: #ff1735;
  --dot-line: rgba(244, 244, 241, .82);
  --dot-soft-line: rgba(244, 244, 241, .18);
  --font-pixel: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-ui: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-terminal: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --pixel-round: inset(0 round 16px);
}

html {
  scrollbar-gutter: stable;
}

body,
.portfolio-body {
  background: var(--dot-bg);
  color: var(--dot-ink);
  font-family: var(--font-ui);
}

body::selection {
  background: var(--dot-accent);
  color: #fff;
}

.site-header {
  min-height: 72px;
  border-bottom: 3px solid var(--dot-line);
  background: rgba(5, 5, 6, .94);
  color: var(--dot-ink);
  backdrop-filter: blur(10px);
}

.site-header.is-scrolled {
  border-color: var(--dot-accent);
  background: rgba(5, 5, 6, .96);
}

.brand {
  font-family: var(--font-pixel);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--dot-accent);
  border: 2px solid var(--dot-ink);
}

.header-meta,
.menu-toggle,
.eyebrow,
.hero__topline,
.hero__kicker,
.hero__bottom > p,
.hero__reel-meta,
.gfx-section__head > p,
.portfolio-hero .eyebrow,
.portfolio-hero__mode,
.portfolio-hero__count {
  font-family: var(--font-pixel);
  letter-spacing: 0;
}

.header-meta {
  color: var(--dot-muted);
  font-size: .48rem;
  gap: 28px;
}

.header-meta__location {
  color: var(--dot-muted);
}

.menu-toggle {
  color: var(--dot-ink);
  font-size: .5rem;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  color: var(--dot-accent);
  transform: translate(-2px, -2px);
  text-shadow: none;
}

.menu-toggle__icon i {
  height: 2px;
}

.page-progress {
  height: 3px;
  background: rgba(244, 244, 241, .08);
}

.page-progress span {
  background: var(--dot-accent);
}

.cursor {
  width: 11px;
  height: 11px;
  border: 1px solid var(--dot-ink);
  background: var(--dot-accent);
}

.cursor.is-active {
  width: 68px;
  height: 68px;
}

.cursor span {
  font-family: var(--font-pixel);
  font-size: .42rem;
}

.menu__backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: none;
}

.menu__panel {
  width: min(720px, 100%);
  padding: 104px var(--pad) 28px;
  border-left: 3px solid var(--dot-line);
  background: var(--dot-bg);
  box-shadow: none;
}

.menu__panel::before {
  display: none;
}

.menu__top {
  border-bottom: 3px solid var(--dot-line);
}

.menu__links > a {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 18px;
  border-bottom: 1px solid var(--dot-line);
  padding: 20px 2px 18px;
  color: var(--dot-ink);
}

.menu__links > a span {
  color: var(--dot-accent);
  font-family: var(--font-pixel);
  font-size: .5rem;
  letter-spacing: 0;
}

.menu__links > a strong {
  font-family: var(--font-pixel);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
}

.menu__links > a i {
  font-size: 1rem;
}

.menu__links > a:hover,
.menu__links > a:focus-visible {
  color: var(--dot-accent);
}

.menu__links > a:hover strong,
.menu__links > a:focus-visible strong,
.menu__links > a:hover i,
.menu__links > a:focus-visible i {
  transform: translateX(6px);
  text-shadow: none;
}

.boot {
  background: var(--dot-bg);
  color: var(--dot-accent);
}

.boot__word {
  font-family: var(--font-pixel);
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
}

.boot__top,
.boot__label {
  font-family: var(--font-pixel);
  letter-spacing: 0;
}

.hero {
  /* 初期表示時に次のマーキー帯が下端へ見えないよう少しだけ延長する */
  min-height: calc(100svh + 8px);
  border-bottom: 1px solid var(--dot-accent);
}

.media-frame__noise {
  opacity: .08;
}

.hero__shade {
  background: linear-gradient(180deg, rgba(0, 0, 0, .64), rgba(0, 0, 0, .14) 42%, rgba(0, 0, 0, .86));
}

.hero__kicker,
.hero__topline,
.hero__bottom > p,
.hero__reel-meta {
  color: var(--dot-muted);
  font-size: .48rem;
}

.hero__kicker,
.hero__topline,
.hero__reel-meta {
  /* Hero上の補足テキストを読みやすく少し拡大する */
  font-size: .65rem;
}

.hero h1 {
  color: var(--dot-ink);
  font-family: var(--font-pixel);
  font-size: 6.2rem;
  font-weight: 400;
  line-height: .95;
  letter-spacing: 0;
}

.hero h1 .line {
  padding-right: 0;
}

.hero h1 .line--offset {
  margin-left: 0;
  color: var(--dot-ink);
  -webkit-text-stroke: 0;
}

.hero__bottom {
  grid-template-columns: minmax(0, 1fr) auto;
}

.hero__reel-meta {
  /* 説明文を削除しても使用ツール情報は右端に固定する */
  grid-column: 2;
  justify-self: end;
}

.marquee {
  border-block: 0;
  border-bottom: 1px solid var(--dot-accent);
  color: var(--dot-accent);
  box-shadow: none;
}

.marquee__track {
  font-family: var(--font-pixel);
  font-size: .54rem;
  letter-spacing: 0;
}

.section-shell {
  padding-block: 7rem;
}

.section-heading {
  border-bottom: 1px solid var(--dot-line);
  padding-bottom: 18px;
  margin-bottom: 3.75rem;
}

/* PROJECTS見出しの下には区切り線を表示しない */
.works .section-heading {
  border-bottom: 0;
}

.works .section-heading .eyebrow {
  /* PROJECTSの小見出しだけを読みやすくする */
  font-size: .62rem;
}

.section-heading h2,
.gfx-section__head,
.portfolio-hero h1 {
  font-family: var(--font-pixel);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.section-heading h2 {
  font-size: 2rem;
  line-height: 1.18;
}

.eyebrow,
.project-card__number,
.project-card__type,
.project-card__year,
.gfx-card__label {
  font-family: var(--font-pixel);
  font-size: .48rem;
  letter-spacing: 0;
}

.gfx-card__label {
  /* GFXカードの作品名を少しだけ読みやすくする */
  font-size: .58rem;
}

/* 後半のテーマ上書きでも作品カードの文字サイズを維持する */
.project-card__type,
.project-card__year {
  /* 実ブラウザで確実に反映されるよう、カード幅単位ではなく画面幅を基準にする */
  font-size: clamp(5.75px, .742vw, 8px) !important;
}

.work-list {
  width: min(94%, 1050px);
  gap: 0;
}

.project-card {
  border: 0;
  background: #000;
  transform: none;
  will-change: auto;
}

.project-card:hover,
.project-card:focus-visible,
.project-card.is-playing {
  transform: scale(1.035);
}

.project-card__title {
  /* 等幅のピクセル書体で、作品名ごとの字間の揺れを抑える */
  font-family: var(--font-terminal);
  /* titleは後続ルールやcqwの解釈に負けない最終指定 */
  font-size: clamp(14.4px, 2.777vw, 30.5px) !important;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: .035em;
  line-height: .9;
  text-transform: none;
  text-rendering: geometricPrecision;
  -webkit-text-stroke: .38px currentColor;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-shadow: none;
}

.works__view-all {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 24px;
  border: 0;
  clip-path: var(--pixel-round);
  background: var(--dot-line);
  color: var(--dot-ink);
  font-family: var(--font-pixel);
  font-size: .55rem;
  letter-spacing: 0;
}

.works__view-all::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  clip-path: var(--pixel-round);
  background: var(--dot-panel);
}

.works__view-all:hover,
.works__view-all:focus-visible {
  color: var(--dot-accent);
  transform: translate(-3px, -3px);
}

.gfx-section {
  border-top: 0;
  margin-top: clamp(50px, 5vw, 80px);
}

.gfx-section__head {
  border-bottom: 1px solid var(--dot-line);
}

.gfx-card img {
  /* GFX画像の周囲には追加の縁取りを表示しない */
  border: 0;
}

.gfx-card:hover,
.gfx-card:focus-visible,
.gfx-card.reveal.is-visible:hover,
.gfx-card.reveal.is-visible:focus-visible {
  color: var(--dot-accent);
  /* PROJECTSカードと同じく、移動せず手前に拡大する */
  transform: scale(1.035);
}

.portfolio-page {
  min-height: 100vh;
  background: var(--dot-bg);
}

.portfolio-page {
  padding-top: 9rem;
}

.portfolio-hero {
  /* 切替ボタンを見出しへ少し近づけ、上下の間延びを抑える。 */
  padding-bottom: clamp(28px, 4vw, 58px);
}

.portfolio-hero h1 {
  font-size: 3.8rem;
  line-height: 1.18;
}

.portfolio-hero .eyebrow,
.portfolio-hero__mode {
  color: var(--dot-accent);
  font-size: .5rem;
}

.portfolio-tabs {
  gap: 12px;
  margin-top: -24px;
}

.portfolio-tab {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  min-height: 52px;
  padding: 15px 24px;
  border: 0;
  clip-path: var(--pixel-round);
  background: var(--dot-line);
  color: var(--dot-ink);
  font-family: var(--font-pixel);
  font-size: .55rem;
  font-weight: 400;
  letter-spacing: 0;
}

.portfolio-tab::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  clip-path: var(--pixel-round);
  background: var(--dot-panel);
}

.portfolio-tab:hover,
.portfolio-tab:focus-visible {
  background: var(--dot-line);
  color: var(--dot-accent);
  box-shadow: none;
  transform: translate(-3px, -3px);
}

.portfolio-tab:hover::before,
.portfolio-tab:focus-visible::before {
  background: var(--dot-panel);
}

.portfolio-tab.is-active {
  background: var(--dot-line);
  color: var(--dot-accent);
}

.portfolio-tab.is-active::before {
  background: var(--dot-panel);
}

.portfolio-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  background: #000;
}

/* VIDEOは境界線と余白をなくし、映像だけが連続するタイルとして見せる。 */
.portfolio-grid:not(.is-gfx) .portfolio-card {
  border: 0;
  background: #000;
}

.portfolio-card:hover,
.portfolio-card:focus-within {
  z-index: 3;
  transform: translate3d(0, 0, 0) scale(1.035);
  /* 隙間なしのタイル同士で影が重ならないよう、拡大だけで前面に出す。 */
  filter: none;
}

.portfolio-card__thumb::before {
  background: linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, .56));
}

.portfolio-gfx-card {
  border: 2px solid var(--dot-line);
  background: var(--dot-panel);
}

.portfolio-grid.is-gfx .portfolio-gfx-card {
  border: 0;
  background: transparent;
}

.portfolio-gfx-card__copy strong {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  letter-spacing: 0;
}

.portfolio-gfx-card__copy p,
.portfolio-error,
.portfolio-empty {
  font-family: var(--font-pixel);
  font-size: .48rem;
  letter-spacing: 0;
}

@media (max-width: 1180px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio-grid.is-gfx {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .hero h1 {
    font-size: 4.4rem;
  }

  .work-list {
    width: 94%;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-grid.is-gfx {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 560px) {
  .site-header {
    min-height: 62px;
  }

  .brand {
    font-size: .58rem;
  }

  .menu__panel {
    padding-top: 86px;
  }

  .menu__links > a {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .menu__links > a strong {
    font-size: 1.18rem;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .hero h1,
  .portfolio-hero h1 {
    font-size: 2.65rem;
  }

  .hero__bottom {
    grid-template-columns: 1fr;
  }

  .project-card__title {
    font-size: clamp(16.1px, 4.19vw, 22.4px) !important;
  }

  .section-heading h2 {
    font-size: 1.38rem;
  }

  .portfolio-page {
    padding-top: 7rem;
  }

  .portfolio-tabs {
    flex-direction: row;
  }

  .portfolio-tab {
    min-width: 0;
    width: 100%;
  }

}

/* 作品・作品名・余白を一体化させるPROJECTSのキャンバス */
.works {
  isolation: isolate;
  background: #050506;
}

.works::before {
  /* 画面中央を基準に、左右対称へ並ぶ縦のガイドライン */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  left: 50%;
  width: 1px;
  background: rgba(244, 244, 241, .12);
  box-shadow:
    -40vw 0 0 rgba(244, 244, 241, .09),
    -20vw 0 0 rgba(244, 244, 241, .12),
    20vw 0 0 rgba(244, 244, 241, .12),
    40vw 0 0 rgba(244, 244, 241, .09);
  pointer-events: none;
}

.gfx-section {
  position: relative;
  isolation: isolate;
  padding-top: clamp(2.5rem, 4vw, 4.5rem);
  background: transparent;
}

.gfx-gallery {
  z-index: 1;
  min-height: clamp(980px, 86vw, 1460px);
}

.gfx-card__label {
  position: static;
  margin-top: 9px;
  color: inherit;
  font-size: .58rem;
  line-height: 1.35;
  white-space: normal;
}

@media (max-width: 900px) {
  .gfx-section {
    padding-top: clamp(2rem, 5vw, 3.5rem);
  }

  .gfx-gallery {
    min-height: 1020px;
  }

}

@media (max-width: 560px) {
  .gfx-gallery {
    min-height: auto;
  }
}