/* 色は次の :root 内でまとめて変更できます */
:root {
  --font-sans:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-mono:"SFMono-Regular",Consolas,monospace
}

:root {
  --paper:#f3f0e7;
  --ink:#111310;
  --cyan:#20d7f2;
  --coral:#ff604e;
  --lime:#c9ff42;
  --blue:#3157ff;
  --violet:#a66bff
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans),"Hiragino Kaku Gothic ProN",sans-serif
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

.site-header {
  height:88px;
  padding:0 4vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #1113;
  position:absolute;
  z-index:10;
  width:100%
}

.brand {
  display:flex;
  gap:12px;
  align-items:center;
  font-weight:800
}

.brand-mark {
  width:34px;
  height:34px;
  background:var(--ink);
  color:var(--paper);
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:20px
}

.site-header nav {
  display:flex;
  gap:30px;
  align-items:center;
  font-size:13px;
  font-weight:600
}

.lab-link {
  background:var(--ink);
  color:white;
  padding:12px 18px;
  border-radius:30px
}

.hero {
  min-height:100vh;
  padding:145px 4vw 60px;
  position:relative;
  overflow:hidden;
  display:grid;
  align-content:end
}

.hero-index {
  position:absolute;
  top:145px;
  left:4vw;
  font:11px/1.5 var(--font-mono);
  letter-spacing:.08em
}

.hero h1 {
  font-size:clamp(6rem,17vw,16rem);
  line-height:.68;
  letter-spacing:-.09em;
  margin:0;
  font-weight:800;
  position:relative;
  z-index:2
}

.hero h1 span {
  color:transparent;
  -webkit-text-stroke:2px var(--ink)
}

.hero-copy {
  display:flex;
  justify-content:flex-end;
  align-items:end;
  gap:12vw;
  position:relative;
  z-index:3;
  margin-top:-2rem
}

.hero-copy p {
  font-size:clamp(1.5rem,3vw,3.4rem);
  font-weight:600;
  line-height:1.35;
  margin:0
}

.round-arrow {
  width:64px;
  height:64px;
  border:1px solid;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:24px
}

.orbit {
  position:absolute;
  border:1px solid #1115;
  border-radius:50%;
  animation:float 7s ease-in-out infinite
}

.orbit:after {
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--cyan);
  top:6%;
  left:22%;
  box-shadow:0 0 35px var(--cyan)
}

.orbit-one {
  width:42vw;
  height:42vw;
  right:8vw;
  top:12vh
}

.orbit-two {
  width:26vw;
  height:26vw;
  right:16vw;
  top:23vh;
  animation-delay:-3s
}

.ticker,.lab-marquee {
  background:var(--cyan);
  overflow:hidden;
  border-block:1px solid var(--ink);
  padding:16px 0;
  font:700 18px var(--font-mono);
  white-space:nowrap
}

.ticker div,.lab-marquee div {
  width:max-content;
  animation:marquee 22s linear infinite
}

.section-pad {
  padding:130px 7vw
}

.eyebrow {
  font:700 11px var(--font-mono);
  letter-spacing:.18em
}

.statement h2 {
  font-size:clamp(3rem,8vw,8rem);
  line-height:.98;
  letter-spacing:-.07em;
  margin:55px 0
}

.statement h2 em {
  color:var(--cyan);
  font-style:normal
}

.statement-body {
  margin-left:42%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px;
  font-size:15px;
  line-height:2
}

.dark {
  background:var(--ink);
  color:var(--paper)
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:start;
  margin-bottom:70px
}

.section-head>p:last-child {
  font-size:18px;
  line-height:1.8
}

.service-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid #fff4
}

.service-card {
  position:relative;
  padding:42px 65px 55px 0;
  border-bottom:1px solid #fff4;
  min-height:310px
}

.service-card:nth-child(odd) {
  border-right:1px solid #fff4
}

.service-card:nth-child(even) {
  padding-left:45px
}

.service-card span {
  font:11px var(--font-mono);
  color:var(--cyan)
}

.service-card h3 {
  font-size:clamp(2.2rem,4vw,4.8rem);
  letter-spacing:-.06em;
  margin:35px 0 22px
}

.service-card p {
  max-width:490px;
  color:#c7c7c0;
  line-height:1.9
}

.service-card b {
  position:absolute;
  right:25px;
  top:48px;
  color:var(--lime);
  font-size:28px
}

.works h2 {
  font-size:clamp(3rem,6vw,6rem);
  line-height:1;
  letter-spacing:-.06em;
  margin:0
}

.work-list {
  border-top:1px solid
}

.work-row {
  display:grid;
  grid-template-columns:50px 1.5fr 1fr 40px;
  align-items:center;
  gap:20px;
  padding:34px 0;
  border-bottom:1px solid;
  transition:.3s
}

.work-row:hover {
  padding-inline:20px;
  background:var(--cyan)
}

.work-row>span,.work-row small {
  font:10px var(--font-mono);
  letter-spacing:.12em
}

.work-row h3 {
  font-size:clamp(1.5rem,3vw,3rem);
  margin:7px 0;
  letter-spacing:-.04em
}

.lab-teaser {
  background:var(--blue);
  color:white;
  padding:9vw 7vw;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  min-height:680px;
  overflow:hidden
}

.lab-teaser h2 {
  font-size:clamp(6rem,15vw,14rem);
  letter-spacing:-.1em;
  line-height:.68;
  margin:80px 0 0
}

.lab-intro {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between
}

.lab-intro p {
  font-size:clamp(1.2rem,2vw,2rem);
  line-height:1.6
}

.lab-intro>a {
  background:var(--lime);
  color:var(--ink);
  padding:22px 28px;
  font-weight:800;
  min-width:280px;
  display:flex;
  justify-content:space-between
}

.lab-sticker {
  background:var(--coral);
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:50%;
  width:145px;
  height:145px;
  display:grid;
  place-items:center;
  text-align:center;
  font:800 14px var(--font-mono);
  transform:rotate(9deg);
  box-shadow:8px 8px 0 var(--ink)
}

.contact h2 {
  font-size:clamp(3.2rem,7vw,7rem);
  line-height:1.08;
  letter-spacing:-.06em
}

.contact h2 span {
  -webkit-text-stroke:1px var(--ink);
  color:transparent
}

.contact-button {
  margin-left:60%;
  background:var(--coral);
  padding:24px 30px;
  font-weight:800;
  display:flex;
  justify-content:space-between
}

.contact-button:hover {
  background:var(--cyan)
}

footer {
  padding:40px 4vw;
  border-top:1px solid;
  display:flex;
  align-items:end;
  justify-content:space-between;
  font-size:11px;
  line-height:1.7
}

/* Open Labの作品画像。HTMLのコメント例どおりに追加できます */
.work-image {
  display:block;
  width:100%;
  height:35vw;
  max-height:570px;
  min-height:350px;
  object-fit:cover
}

/* OPEN LAB */
.lab-page {
  background:#111210;
  color:#f4f1e9;
  min-height:100vh
}

.lab-header {
  height:88px;
  padding:0 3vw;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  border-bottom:1px solid #fff5;
  font:700 11px/1.4 var(--font-mono);
  letter-spacing:.08em
}

.lab-header>div {
  text-align:center
}

.lab-header>a:last-child {
  text-align:right
}

.lab-logo {
  font-size:20px
}

.lab-logo i {
  background:var(--lime);
  color:var(--ink);
  padding:5px 8px;
  font-style:normal;
  transform:rotate(-2deg);
  display:inline-block
}

.lab-hero {
  min-height:calc(100vh - 88px);
  padding:6vh 3vw;
  position:relative;
  overflow:hidden
}

.lab-kicker {
  font:700 12px var(--font-mono);
  color:var(--lime)
}

.lab-hero h1 {
  font-size:clamp(6rem,17vw,16rem);
  line-height:.69;
  letter-spacing:-.09em;
  margin:7vh 0 0
}

.lab-hero h1 span {
  color:var(--coral)
}

.lab-hero>p {
  position:absolute;
  right:5vw;
  bottom:7vh;
  font-size:clamp(1.1rem,2vw,2rem);
  font-weight:600;
  line-height:1.5
}

.lab-burst {
  position:absolute;
  right:8vw;
  top:8vh;
  background:var(--lime);
  color:var(--ink);
  width:150px;
  height:150px;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:50%;
  font:900 18px var(--font-mono);
  transform:rotate(12deg);
  box-shadow:10px 10px 0 var(--blue);
  z-index:2
}

.lab-marquee {
  background:var(--coral);
  color:var(--ink);
  transform:rotate(-1deg);
  position:relative;
  z-index:3
}

.experiments {
  padding:140px 3vw
}

.lab-section-title {
  display:grid;
  grid-template-columns:70px 1fr 1fr;
  align-items:end;
  margin-bottom:90px
}

.lab-section-title span {
  font:12px var(--font-mono);
  color:var(--lime)
}

.lab-section-title h2 {
  font-size:clamp(3rem,7vw,7rem);
  line-height:.85;
  letter-spacing:-.07em;
  margin:0
}

.lab-section-title p {
  max-width:360px;
  line-height:1.8
}

.experiment-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4vw 2vw
}

.experiment {
  margin-bottom:80px
}

.experiment:nth-child(even) {
  margin-top:130px
}

.fake-visual {
  height:35vw;
  max-height:570px;
  min-height:350px;
  background:var(--accent);
  color:var(--ink);
  position:relative;
  overflow:hidden;
  padding:25px;
  font:800 14px var(--font-mono);
  transition:transform .35s
}

.fake-visual:hover {
  transform:rotate(1deg) scale(.99)
}

.fake-visual i {
  position:absolute;
  width:55%;
  aspect-ratio:1;
  border:2px solid;
  border-radius:50%;
  left:22%;
  top:17%;
  box-shadow:0 0 0 45px #1112,0 0 0 90px #1112
}

.fake-visual b {
  position:absolute;
  right:25px;
  bottom:25px;
  font-size:clamp(2.5rem,6vw,6rem);
  line-height:.75;
  letter-spacing:-.08em
}

.coral {
  --accent:var(--coral)
}

.blue {
  --accent:var(--blue)
}

.lime {
  --accent:var(--lime)
}

.violet {
  --accent:var(--violet)
}

.experiment small {
  font:11px var(--font-mono);
  color:var(--accent);
  display:block;
  margin-top:25px
}

.experiment h3 {
  font-size:clamp(2rem,4vw,4rem);
  margin:12px 0;
  letter-spacing:-.05em
}

.experiment p {
  color:#bdbdb5;
  max-width:480px;
  line-height:1.7
}

.experiment button {
  border:0;
  border-bottom:1px solid;
  background:none;
  color:white;
  padding:10px 0;
  cursor:pointer
}

.lab-manifesto {
  background:var(--lime);
  color:var(--ink);
  padding:100px 5vw;
  display:grid;
  grid-template-columns:100px 1.2fr 1fr;
  align-items:start
}

.lab-manifesto>span {
  font:11px var(--font-mono)
}

.lab-manifesto h2 {
  font-size:clamp(4rem,10vw,10rem);
  line-height:.75;
  letter-spacing:-.09em;
  margin:0
}

.lab-manifesto h2 i {
  color:var(--blue);
  font-style:normal
}

.lab-manifesto ol {
  list-style:none;
  margin:0;
  padding:0;
  border-top:2px solid
}

.lab-manifesto li {
  padding:24px 0;
  border-bottom:2px solid;
  font-size:22px;
  font-weight:700
}

.lab-manifesto li b {
  font:12px var(--font-mono);
  margin-right:30px
}

.lab-submit {
  padding:130px 5vw;
  text-align:center;
  background:var(--blue)
}

.lab-submit>p {
  font:12px var(--font-mono);
  color:var(--lime)
}

.lab-submit h2 {
  font-size:clamp(4rem,11vw,11rem);
  line-height:.78;
  letter-spacing:-.08em
}

.lab-submit h2 span {
  color:var(--coral)
}

.lab-submit a {
  display:inline-block;
  background:var(--lime);
  color:var(--ink);
  padding:22px 30px;
  font-weight:900;
  transform:rotate(-2deg)
}

.lab-footer {
  border-color:#fff5
}

.lab-footer a {
  font-size:20px;
  font-weight:900
}

@keyframes marquee {
  to {
    transform:translateX(-50%)
  }
}

@keyframes float {
  50% {
    transform:translateY(18px) rotate(6deg)
  }
}

@media(max-width:760px) {
  .site-header {
    height:72px
  }
  .site-header nav>a:not(.lab-link) {
    display:none
  }
  .hero {
    padding-top:110px;
    min-height:800px
  }
  .hero h1 {
    font-size:25vw
  }
  .hero-copy {
    margin-top:70px;
    justify-content:space-between
  }
  .hero-copy p {
    font-size:1.5rem
  }
  .orbit-one {
    width:80vw;
    height:80vw;
    right:-15vw
  }
  .orbit-two {
    width:50vw;
    height:50vw
  }
  .section-pad {
    padding:85px 6vw
  }
  .statement-body {
    margin-left:0;
    grid-template-columns:1fr
  }
  .service-grid {
    grid-template-columns:1fr
  }
  .service-card:nth-child(odd) {
    border-right:0
  }
  .service-card:nth-child(even) {
    padding-left:0
  }
  .section-head {
    display:block
  }
  .work-row {
    grid-template-columns:35px 1fr 25px
  }
  .work-row>p {
    display:none
  }
  .lab-teaser {
    grid-template-columns:1fr;
    min-height:850px
  }
  .lab-teaser h2 {
    font-size:28vw;
    margin:55px 0
  }
  .lab-intro {
    gap:40px
  }
  .contact-button {
    margin-left:0
  }
  .site-header nav {
    gap:8px
  }
  footer {
    display:grid;
    gap:25px
  }
  .lab-header {
    grid-template-columns:1fr 1fr
  }
  .lab-header>div {
    display:none
  }
  .lab-hero {
    min-height:750px
  }
  .lab-hero h1 {
    font-size:24vw;
    margin-top:14vh
  }
  .lab-burst {
    width:110px;
    height:110px;
    right:5vw;
    font-size:13px
  }
  .lab-hero>p {
    left:5vw;
    right:auto
  }
  .lab-section-title {
    grid-template-columns:40px 1fr
  }
  .lab-section-title p {
    grid-column:2;
    margin-top:30px
  }
  .experiment-grid {
    grid-template-columns:1fr
  }
  .experiment:nth-child(even) {
    margin-top:0
  }
  .fake-visual {
    height:100vw
  }
  .lab-manifesto {
    grid-template-columns:1fr
  }
  .lab-manifesto>span {
    margin-bottom:40px
  }
  .lab-manifesto ol {
    margin-top:70px
  }
  .lab-submit {
    padding-inline:3vw
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    scroll-behavior:auto!important
  }
}

/* 追加画像と動画枠：画像の比率はここで変更できます */
.editorial-image {
  margin:0;
  padding:0 7vw 120px;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:30px;
  align-items:end
}

.editorial-image img {
  width:100%;
  grid-column:1/3;
  max-height:72vh;
  object-fit:cover
}

.editorial-image figcaption {
  grid-column:2;
  display:flex;
  flex-direction:column;
  gap:10px;
  line-height:1.7
}

.editorial-image figcaption b {
  font:800 12px var(--font-mono)
}

.services-collage {
  display:block;
  width:100%;
  height:min(52vw,720px);
  object-fit:cover;
  margin-top:80px;
  filter:saturate(.88)
}

.panorama {
  margin:0;
  background:var(--ink);
  color:white
}

.panorama img {
  display:block;
  width:100%;
  height:min(42vw,620px);
  object-fit:cover
}

.panorama figcaption {
  padding:14px 4vw;
  font:11px var(--font-mono);
  letter-spacing:.12em
}

.work-image {
  display:block;
  width:100%;
  height:35vw;
  max-height:570px;
  min-height:350px;
  object-fit:cover;
  transition:filter .35s,transform .35s
}

.experiment:hover .work-image {
  filter:saturate(1.15);
  transform:scale(.99)
}

.video-lab {
  padding:100px 3vw 140px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:5vw;
  align-items:end
}

.video-lab>* {
  min-width:0
}

.video-lab h2 {
  font-size:clamp(3rem,7vw,7rem);
  line-height:.8;
  letter-spacing:-.07em
}

.video-lab p {
  color:#aaa
}

.video-placeholder {
  aspect-ratio:16/9;
  background:var(--coral);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:4vw;
  font-weight:900;
  font-size:clamp(2rem,6vw,6rem);
  line-height:.8;
  letter-spacing:-.06em
}

.video-placeholder code {
  font:12px var(--font-mono);
  letter-spacing:0
}

.video-showreel {
  width:100%;
  max-width:100%;
  min-width:0;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#050608
}

.video-showreel video {
  display:block;
  width:100%;
  max-width:100%;
  height:100%;
  object-fit:cover
}

@media(max-width:760px) {
  .editorial-image {
    grid-template-columns:1fr;
    padding:0 6vw 80px
  }
  .editorial-image img,.editorial-image figcaption {
    grid-column:1
  }
  .services-collage {
    height:100vw;
    margin-top:50px
  }
  .panorama img {
    height:80vw
  }
  .video-lab {
    grid-template-columns:1fr
  }
  .work-image {
    height:100vw
  }
}

/* ヒーローの日本語コピーが英字見出しと重ならないための安全な余白 */
.hero-copy {
  margin-top:clamp(3.5rem,7vw,8rem);
  align-items:center
}

.hero-copy p {
  position:relative;
  z-index:4;
  background:var(--paper);
  padding:.15em .25em
}

@media(max-width:760px) {
  .hero-copy {
    margin-top:clamp(3rem,12vw,6rem);
    align-items:flex-end
  }
  .hero-copy p {
    padding:.2em 0
  }
}

/* スクロール・ポインター演出 */
.scroll-progress {
  position:fixed;
  z-index:100;
  left:0;
  top:0;
  width:100%;
  height:4px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left;
  pointer-events:none
}

.lab-page~.scroll-progress {
  background:var(--lime)
}

.js-enabled .reveal-item {
  opacity:0;
  transform:translateY(54px) scale(.985);
  filter:blur(5px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),transform .85s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),filter .85s ease var(--reveal-delay,0ms)
}

.js-enabled .reveal-item.is-visible {
  opacity:1;
  transform:none;
  filter:none
}

.hero h1 {
  transform:translateY(calc(var(--scroll-y,0px) * .045));
  will-change:transform
}

.hero-index {
  transform:translateY(calc(var(--scroll-y,0px) * .12))
}

.orbit-one {
  transform:translateY(calc(var(--scroll-y,0px) * -.035))
}

.orbit-two {
  transform:translateY(calc(var(--scroll-y,0px) * -.065))
}

.lab-hero h1 {
  transform:translateY(calc(var(--scroll-y,0px) * .04))
}

.lab-burst {
  translate:0 calc(var(--scroll-y,0px) * -.055)
}

.editorial-image img,.panorama img,.work-image {
  transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition:transform .28s ease,filter .35s;
  will-change:transform
}

.work-row b,.service-card b {
  transition:transform .25s
}

.work-row:hover b,.service-card:hover b {
  transform:translate(5px,-5px)
}

.lab-sticker {
  animation:sticker-wobble 4s ease-in-out infinite
}

.lab-link,.contact-button,.lab-intro>a,.lab-submit a {
  transition:transform .25s,box-shadow .25s
}

.lab-link:hover,.contact-button:hover,.lab-intro>a:hover,.lab-submit a:hover {
  transform:translateY(-4px);
  box-shadow:7px 7px 0 var(--cyan)
}

@keyframes sticker-wobble {
  0%,100% {
    transform:rotate(9deg)
  }
  50% {
    transform:rotate(4deg) scale(1.04)
  }
}

@media(max-width:760px) {
  .hero h1,.hero-index,.orbit-one,.orbit-two,.lab-hero h1 {
    transform:none
  }
  .js-enabled .reveal-item {
    transform:translateY(30px);
    filter:none
  }
}

@media(prefers-reduced-motion:reduce) {
  .reveal-item {
    opacity:1!important;
    transform:none!important;
    filter:none!important
  }
  .scroll-progress {
    display:none
  }
  .hero h1,.hero-index,.orbit-one,.orbit-two,.lab-hero h1,.lab-burst {
    transform:none!important;
    translate:none!important
  }
}

/* キャラクターアーカイブ：旧実績欄は削除せず非表示 */
.legacy-works {
  display:none
}

.character-showcase {
  padding:120px 0 105px;
  background:#e8e4da;
  overflow:hidden
}

.character-head {
  padding:0 7vw 55px;
  display:grid;
  grid-template-columns:1.5fr 1fr auto;
  align-items:end;
  gap:35px
}

.character-head h2 {
  font-size:clamp(3.6rem,8vw,8rem);
  line-height:.72;
  letter-spacing:-.08em;
  margin:35px 0 0
}

.character-head>p {
  line-height:1.9
}

.carousel-controls {
  display:flex;
  gap:8px
}

.carousel-controls button {
  width:52px;
  height:52px;
  border:1px solid var(--ink);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  font-size:20px;
  transition:.25s
}

.carousel-controls button:hover {
  background:var(--ink);
  color:var(--paper);
  transform:translateY(-3px)
}

.character-carousel {
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:0 7vw 25px;
  cursor:grab;
  scrollbar-width:none
}

.character-carousel::-webkit-scrollbar {
  display:none
}

.character-carousel:active {
  cursor:grabbing
}

.character-carousel figure {
  flex:0 0 clamp(280px,31vw,470px);
  margin:0;
  scroll-snap-align:center;
  position:relative
}

.character-carousel img {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border:1px solid #1112;
  filter:saturate(.78) contrast(.96);
  transition:transform .4s,filter .4s,box-shadow .4s
}

.character-carousel figure:hover img {
  filter:saturate(1) contrast(1);
  transform:translateY(-7px) rotate(-.5deg);
  box-shadow:12px 14px 0 var(--cyan)
}

.character-carousel figcaption {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:15px;
  font-size:13px
}

.character-carousel figcaption b {
  font:11px var(--font-mono);
  color:#777
}

.carousel-note {
  padding:15px 7vw 0;
  display:flex;
  align-items:center;
  gap:18px;
  font:10px var(--font-mono);
  letter-spacing:.12em
}

.carousel-note i {
  height:1px;
  background:#1115;
  flex:1
}

@media(max-width:760px) {
  .character-showcase {
    padding:80px 0
  }
  .character-head {
    grid-template-columns:1fr;
    padding:0 6vw 40px
  }
  .character-head>p {
    margin:0
  }
  .carousel-controls {
    position:absolute;
    right:6vw;
    margin-top:5px
  }
  .character-carousel {
    padding-inline:6vw;
    gap:14px
  }
  .character-carousel figure {
    flex-basis:78vw
  }
}

/* ヒーロー背景：動画・静止画共通。値は js/hero-media.js で変更します */
.hero-media,.hero-media-shade {
  position:absolute;
  inset:0;
  pointer-events:none
}

.hero-media {
  z-index:0;
  overflow:hidden;
  background:var(--paper);
  will-change:opacity
}

.hero-media::after {
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  opacity:var(--hero-scanline-opacity,0);
  background:
    linear-gradient(90deg,rgba(8,10,13,.13),transparent 32%,transparent 72%,rgba(8,10,13,.1)),
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(8,10,13,.34) 3px 4px);
  mix-blend-mode:multiply;
  pointer-events:none
}

.hero-media-shade {
  z-index:1;
  background:var(--paper);
  opacity:var(--hero-shade-opacity,.22)
}

.hero-media-item {
  position:absolute;
  inset:-2%;
  width:104%;
  height:104%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.3s ease;
  filter:var(--hero-media-filter,saturate(.88) contrast(.96))
}

.hero-media-item.is-active {
  opacity:var(--hero-media-opacity,.48)
}

.hero-media-item.ken-burns {
  animation:hero-ken-burns 11s ease-in-out both
}

@keyframes hero-ken-burns {
  from {
    transform:scale(1.02) translate3d(-.5%,.5%,0)
  }
  to {
    transform:scale(1.12) translate3d(1.5%,-1%,0)
  }
}

.hero-media-disabled .hero-media,.hero-media-disabled .hero-media-shade {
  display:none
}

.hero>.hero-index,.hero>h1,.hero>.hero-copy,.hero>.orbit {
  z-index:3
}

.hero h1 {
  position:relative
}

.hero-copy p {
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(8px)
}

.orbit {
  z-index:4!important
}

.orbit:after {
  z-index:5
}

@media(prefers-reduced-motion:reduce) {
  .hero-media-item.ken-burns {
    animation:none
  }
  .hero-media-item {
    transition:none
  }
}

/* Services／Character Works 共通メディア枠：imgとvideoを同じ比率で表示 */
.services-media-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:#ffffff3d;
  margin-top:80px
}

.services-media-grid figure {
  margin:0;
  background:var(--ink);
  position:relative;
  overflow:hidden
}

.services-media-grid img,.services-media-grid video {
  display:block;
  width:100%;
  height:min(31vw,440px);
  object-fit:cover;
  filter:saturate(.84);
  transition:transform .6s,filter .6s
}

.services-media-grid figure:hover img,.services-media-grid figure:hover video {
  transform:scale(1.035);
  filter:saturate(1)
}

.services-media-grid figcaption {
  position:absolute;
  left:0;
  bottom:0;
  padding:12px 15px;
  background:#111c;
  color:white;
  font:10px var(--font-mono);
  backdrop-filter:blur(10px)
}

.character-carousel video {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border:1px solid #1112;
  filter:saturate(.78) contrast(.96);
  transition:transform .4s,filter .4s,box-shadow .4s
}

.character-carousel figure:hover video {
  filter:saturate(1);
  transform:translateY(-7px) rotate(-.5deg);
  box-shadow:12px 14px 0 var(--cyan)
}

@media(max-width:760px) {
  .services-media-grid {
    grid-template-columns:1fr
  }
  .services-media-grid img,.services-media-grid video {
    height:65vw
  }
}

/* Open Lab 実験詳細モーダル */
.experiment-dialog {
  width:min(1120px,92vw);
  max-height:90vh;
  padding:0;
  border:2px solid #111;
  background:var(--paper);
  color:var(--ink);
  box-shadow:18px 18px 0 var(--lime);
  overflow:auto
}

.experiment-dialog::backdrop {
  background:#050608cf;
  backdrop-filter:blur(8px)
}

.experiment-dialog[open] {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  animation:dialog-in .35s cubic-bezier(.2,.8,.2,1)
}

.dialog-media {
  min-height:620px;
  background:#111
}

.dialog-media img,.dialog-media video {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

.dialog-content {
  padding:70px 45px 45px;
  position:relative
}

.dialog-content>small {
  font:11px var(--font-mono);
  color:var(--blue)
}

.dialog-content h2 {
  font-size:clamp(2.8rem,5vw,5rem);
  line-height:.86;
  letter-spacing:-.06em;
  margin:20px 0
}

.dialog-summary {
  line-height:1.8
}

.dialog-placeholder {
  border-top:1px solid;
  margin-top:40px;
  padding-top:25px;
  color:#666
}

.dialog-placeholder b {
  font:11px var(--font-mono);
  color:var(--ink)
}

.dialog-placeholder p {
  font-size:13px
}

.dialog-placeholder h3 {
  margin:16px 0 12px;
  font-size:clamp(1.35rem,2.2vw,2rem);
  line-height:1.15;
  letter-spacing:-.035em
}

.dialog-placeholder ul {
  list-style:none;
  margin:20px 0 0;
  padding:0;
  border-top:1px solid #1113
}

.dialog-placeholder li {
  position:relative;
  padding:11px 0 11px 18px;
  border-bottom:1px solid #1113;
  font-size:12px;
  line-height:1.55
}

.dialog-placeholder li::before {
  content:"↗";
  position:absolute;
  left:0;
  color:var(--blue)
}

.dialog-close {
  position:absolute;
  z-index:2;
  right:18px;
  top:18px;
  width:48px;
  height:48px;
  border:1px solid;
  border-radius:50%;
  background:var(--paper);
  font-size:28px;
  cursor:pointer
}

.dialog-back {
  margin-top:35px;
  border:0;
  border-bottom:1px solid;
  background:none;
  padding:12px 0;
  font-weight:800;
  cursor:pointer
}

@keyframes dialog-in {
  from {
    opacity:0;
    transform:translateY(30px) scale(.97)
  }
}

@media(max-width:760px) {
  .experiment-dialog[open] {
    grid-template-columns:1fr
  }
  .dialog-media {
    min-height:42vh
  }
  .dialog-content {
    padding:45px 24px 30px
  }
  .dialog-close {
    position:fixed;
    right:7vw;
    top:7vh
  }
  .experiment-dialog {
    box-shadow:8px 8px 0 var(--lime)
  }
}

/* OUR SERVICES 詳細モーダル */
.service-card {
  cursor:pointer
}

.service-open {
  position:absolute;
  right:25px;
  top:48px;
  border:0;
  background:none;
  color:var(--lime);
  font-size:28px;
  cursor:pointer;
  transition:transform .25s
}

.service-card:hover .service-open {
  transform:translate(5px,-5px)
}

.service-dialog {
  width:min(1120px,92vw);
  max-height:90vh;
  padding:0;
  border:2px solid #111;
  background:var(--paper);
  color:var(--ink);
  box-shadow:18px 18px 0 var(--cyan);
  overflow:auto
}

.service-dialog::backdrop {
  background:#050608cf;
  backdrop-filter:blur(8px)
}

.service-dialog[open] {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  animation:dialog-in .35s cubic-bezier(.2,.8,.2,1)
}

.service-dialog-media {
  min-height:620px;
  background:#111
}

.service-dialog-media img,.service-dialog-media video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

.service-dialog-content {
  padding:70px 45px 45px;
  position:relative
}

.service-dialog-content>small {
  font:11px var(--font-mono);
  color:var(--blue)
}

.service-dialog-content h2 {
  font-size:clamp(2.8rem,5vw,5rem);
  line-height:.86;
  letter-spacing:-.06em;
  margin:20px 0
}

.service-dialog-summary {
  line-height:1.8
}

.service-dialog-placeholder {
  border-top:1px solid;
  margin-top:40px;
  padding-top:25px;
  color:#666
}

.service-dialog-placeholder b {
  font:11px var(--font-mono);
  color:var(--ink)
}

.service-dialog-placeholder p {
  font-size:13px
}

.service-dialog-placeholder h3 {
  margin:16px 0 12px;
  font-size:clamp(1.35rem,2.2vw,2rem);
  line-height:1.15;
  letter-spacing:-.035em
}

.service-dialog-placeholder ul {
  list-style:none;
  margin:20px 0 0;
  padding:0;
  border-top:1px solid #1113
}

.service-dialog-placeholder li {
  position:relative;
  padding:11px 0 11px 18px;
  border-bottom:1px solid #1113;
  font-size:12px;
  line-height:1.55
}

.service-dialog-placeholder li::before {
  content:"↗";
  position:absolute;
  left:0;
  color:var(--blue)
}

.service-dialog-close {
  position:absolute;
  z-index:2;
  right:18px;
  top:18px;
  width:48px;
  height:48px;
  border:1px solid;
  border-radius:50%;
  background:var(--paper);
  font-size:28px;
  cursor:pointer
}

.service-dialog-back {
  margin-top:35px;
  border:0;
  border-bottom:1px solid;
  background:none;
  padding:12px 0;
  font-weight:800;
  cursor:pointer
}

@media(max-width:760px) {
  .service-dialog[open] {
    grid-template-columns:1fr
  }
  .service-dialog-media {
    min-height:42vh
  }
  .service-dialog-content {
    padding:45px 24px 30px
  }
  .service-dialog-close {
    position:fixed;
    right:7vw;
    top:7vh
  }
  .service-dialog {
    box-shadow:8px 8px 0 var(--cyan)
  }
}

/* Open Lab Broadcast Hero */
.broadcast-hero {
  height:100vh;
  min-height:760px;
  position:relative;
  overflow:hidden;
  background:#05060a;
  color:white
}

.broadcast-main {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:var(--broadcast-filter);
  transition:opacity .5s
}

.broadcast-main.is-switching {
  opacity:0
}

.broadcast-shade {
  position:absolute;
  z-index:2;
  inset:0;
  background:linear-gradient(90deg,#05060add,transparent 72%),linear-gradient(0deg,#05060add,transparent 55%)
}

.broadcast-scan {
  position:absolute;
  z-index:8;
  inset:0;
  opacity:var(--scanline-opacity,.24);
  background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px);
  pointer-events:none
}

.broadcast-scan:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:14%;
  background:linear-gradient(transparent,#ffffff20,transparent);
  animation:broadcast-scan 5s linear infinite
}

@keyframes broadcast-scan {
  from {
    top:-15%
  }
  to {
    top:110%
  }
}

.broadcast-frame {
  position:absolute;
  z-index:9;
  inset:10vh 2vw 5vh;
  border:1px solid #fff5;
  pointer-events:none
}

.broadcast-header {
  position:relative;
  z-index:20;
  background:transparent
}

.broadcast-header a {
  position:relative;
  z-index:1;
  pointer-events:auto
}

.broadcast-copy {
  position:absolute;
  z-index:15;
  left:4vw;
  bottom:12vh
}

.broadcast-live {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--coral);
  color:#111;
  padding:9px 12px;
  font:bold 11px var(--font-mono)
}

.broadcast-live i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#111;
  animation:broadcast-blink 1s steps(2) infinite
}

@keyframes broadcast-blink {
  50% {
    opacity:0
  }
}

.broadcast-copy h1 {
  font-size:clamp(4.5rem,10vw,9rem);
  line-height:.67;
  letter-spacing:-.09em;
  margin:22px 0
}

.broadcast-copy h1 em {
  font-style:normal;
  color:var(--coral)
}

.broadcast-copy p {
  font-size:17px
}

.broadcast-glitch {
  position:relative;
  animation:broadcast-glitch 3.2s steps(1) infinite
}

@keyframes broadcast-glitch {
  0%,88%,100% {
    transform:none;
    text-shadow:none
  }
  89% {
    transform:translate(8px,-3px) skewX(4deg);
    text-shadow:-7px 0 var(--cyan),7px 0 var(--coral)
  }
  91% {
    transform:translate(-6px,4px);
    text-shadow:5px 0 var(--lime),-5px 0 var(--blue)
  }
  93% {
    transform:none
  }
}

.broadcast-feeds {
  position:absolute;
  z-index:16;
  right:var(--feed-expanded-right,4vw);
  top:var(--feed-expanded-top,16vh);
  width:var(--feed-expanded-width,31vw);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  transform-origin:right bottom;
  transition:
    width .7s cubic-bezier(.2,.8,.2,1),
    right .7s cubic-bezier(.2,.8,.2,1),
    top .7s cubic-bezier(.2,.8,.2,1),
    filter .7s ease
}

.broadcast-feeds.is-compact {
  right:var(--feed-compact-right,4vw);
  top:var(--feed-compact-top,60vh);
  width:var(--feed-compact-width,16vw);
  filter:drop-shadow(0 12px 28px #0008)
}

.broadcast-feed {
  position:relative;
  border:1px solid #fff7;
  background:#000;
  padding:0;
  aspect-ratio:16/9;
  overflow:hidden;
  cursor:pointer;
  color:white
}

.broadcast-feed video {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:var(--broadcast-filter);
  transition:opacity .35s,transform .35s
}

.broadcast-feed:hover video {
  transform:scale(1.05)
}

.broadcast-feed video.is-switching {
  opacity:0
}

.broadcast-feed span {
  position:absolute;
  left:7px;
  top:7px;
  background:#000b;
  padding:4px;
  font:8px var(--font-mono)
}

.broadcast-feed.feed-large {
  grid-column:span 2;
  border-color:var(--coral);
  box-shadow:0 0 35px #ff604e44
}

.broadcast-time {
  position:absolute;
  z-index:16;
  right:3vw;
  bottom:7vh;
  font:10px var(--font-mono)
}

.broadcast-marker {
  position:absolute;
  z-index:25;
  left:0;
  right:0;
  bottom:0;
  height:42px;
  background:var(--lime);
  color:#111;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  font:bold 11px var(--font-mono)
}

.broadcast-marker>b {
  align-self:stretch;
  display:grid;
  place-items:center;
  background:var(--coral);
  padding:0 18px
}

.broadcast-marker>div {
  overflow:hidden;
  white-space:nowrap
}

.broadcast-marker span {
  display:inline-block;
  padding-left:100%;
  animation:broadcast-news 38s linear infinite
}

.broadcast-marker time {
  padding:0 15px
}

@keyframes broadcast-news {
  to {
    transform:translateX(-100%)
  }
}

@media(max-width:760px) {
  .broadcast-hero {
    min-height:820px
  }
  .broadcast-copy {
    bottom:10vh
  }
  .broadcast-copy h1 {
    font-size:22vw
  }
  .broadcast-feeds {
    width:94vw;
    right:3vw;
    top:auto;
    bottom:64px;
    grid-template-columns:repeat(3,1fr);
    gap:5px
  }
  .broadcast-feeds.is-compact {
    width:94vw;
    right:3vw;
    top:auto;
    bottom:64px
  }
  .broadcast-feed.feed-large {
    grid-column:auto;
    box-shadow:none
  }
  .broadcast-feed span {
    font-size:6px;
    padding:3px
  }
  .broadcast-frame {
    inset:9vh 2vw 5vh
  }
  .broadcast-marker {
    font-size:9px
  }
  .broadcast-marker>b {
    padding:0 9px
  }
  .broadcast-marker time {
    display:none
  }
}

@media(prefers-reduced-motion:reduce) {
  .broadcast-glitch,.broadcast-scan:after,.broadcast-marker span {
    animation:none
  }
  .broadcast-marker span {
    padding-left:15px
  }
}

/* Open Lab ミュージックプレイヤー */
.lab-player {
  position: fixed;
  z-index: 80;
  right: 20px;
  bottom: 58px;
  font-family: var(--font-mono);
  color: var(--paper);
}

/* PLAY ON AIR の下に置くモード */
.lab-player[data-placement="hero"] {
  position: relative;
  right: auto;
  bottom: auto;
  width: max-content;
  margin-top: 24px;
}

.player-toggle {
  min-width: 154px;
  height: 48px;
  padding: 0 17px;
  border: 1px solid #ffffff59;
  border-radius: 999px;
  background: linear-gradient(115deg, #ffffff24, #080a0d8f);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff38, 0 8px 30px #0000003d;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  transition: transform 0.25s, border-color 0.25s, background 0.25s;
}

.player-toggle:hover {
  transform: translateY(-2px);
  border-color: #ffffff99;
  background: linear-gradient(115deg, #ffffff30, #080a0da8);
}

.audio-icon {
  position: relative;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--coral);
  color: #111;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
}

.audio-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--coral);
  border-radius: 50%;
  opacity: 0;
}

.is-playing .audio-icon::after {
  animation: audio-pulse-ring 1.35s ease-out infinite;
}

@keyframes audio-pulse-ring {
  from {
    opacity: 0.75;
    transform: scale(0.78);
  }
  to {
    opacity: 0;
    transform: scale(1.4);
  }
}

.player-toggle canvas {
  width: 36px;
  height: 18px;
}

.player-toggle-label {
  font-size: 9px;
  letter-spacing: 0.15em;
}

.player-panel {
  position: absolute;
  right: 0;
  bottom: 59px;
  width: min(340px, 88vw);
  background: #080a0df2;
  border: 1px solid #fff5;
  padding: 18px;
  box-shadow: 10px 10px 0 var(--blue);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: 0.25s;
}

.lab-player[data-placement="hero"] .player-panel {
  right: auto;
  left: 0;
}

.lab-player.is-open .player-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.player-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #fff4;
  padding-bottom: 12px;
}

.player-head small {
  color: var(--lime);
}

.player-close {
  border: 0;
  background: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
}

.player-title {
  display: block;
  font-family: var(--font-sans);
  font-size: 22px;
  margin: 18px 0 12px;
}

.player-select {
  width: 100%;
  background: #111;
  color: white;
  border: 1px solid #fff4;
  padding: 11px;
}

.player-controls {
  display: grid;
  grid-template-columns: 45px auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}

.player-controls button {
  border: 1px solid #fff4;
  background: none;
  color: white;
  height: 38px;
  cursor: pointer;
}

.player-controls button:disabled {
  opacity: 0.35;
}

.player-time {
  text-align: right;
  font-size: 9px;
}

.player-volume {
  width: 100%;
  accent-color: var(--lime);
}

@media (max-width: 760px) {
  .lab-player[data-placement="follow"] {
    right: 10px;
    bottom: 52px;
  }
  .player-toggle {
    min-width: 132px;
    padding-inline: 13px;
  }
  .player-panel,   .lab-player[data-placement="hero"] .player-panel {
    position: fixed;
    right: 4vw;
    left: auto;
    bottom: 105px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-playing .audio-icon::after {
    animation: none;
  }
}