/* Work's approved Figma composition is 1440 × 900. The header keeps the
   shared markup, navigation and hover behavior; only its paper-surface ink changes. */
.work-hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #f1efeb;
  color: #150000;
  touch-action: pan-y;
}
.work-hero-art,
.work-hero-content {
  position: absolute;
  top: calc((100% - 62.5vw) / 2);
  left: 0;
  width: 1440px;
  height: 900px;
  transform: scale(var(--art-scale, 1));
  transform-origin: top left;
}
.work-hero-art { z-index: 0; pointer-events: none; }
.work-hero-content { z-index: 1; }
.work-hero-ring { position: absolute; pointer-events: none; }
.work-hero-ring img { position: absolute; display: block; max-width: none; }
.work-hero-ring--right { top: -228px; left: 456px; width: 1309.314px; height: 1210px; }
.work-hero-ring--right img { top: -75px; left: -75px; width: 1459.314px; height: 1360px; }
.work-hero-ring--left { top: -760px; left: -800.02px; width: 1349.35px; height: 1247px; }
.work-hero-ring--left img { top: -75px; left: -75px; width: 1499.35px; height: 1397px; }
.work-hero-title {
  position: absolute;
  z-index: 1;
  top: 407px;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  color: #fff;
  font: 700 160px/.95 var(--font-en);
  letter-spacing: -3.2px;
  white-space: pre;
  pointer-events: none;
}
.work-hero-title span {
  display: block;
  width: max-content;
  padding-right: .16em;
  animation: work-title-slide 42s linear infinite;
  will-change: transform;
}
.work-hero-title .work-title-repeat { position: absolute; top: 0; left: 100%; }
.work-hero:not([data-work-title-ready='true']) .work-hero-title span { animation-play-state: paused; }
@keyframes work-title-slide { to { transform: translateX(-100%); } }
.work-mascot {
  position: absolute;
  z-index: 2;
  top: 336px;
  left: 569px;
  width: 301px;
  height: 302px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.work-mascot [data-work-still],
.work-mascot [data-work-canvas] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.work-mascot [data-work-canvas] { opacity: 0; }
.work-hero[data-work-frame-ready='true'] [data-work-canvas] { opacity: 1; }
.work-hero[data-work-frame-ready='true'] [data-work-still] { opacity: 0; }
.work-mascot:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.work-preparing-bubble {
  position: absolute;
  z-index: 3;
  top: 327px;
  left: 816px;
  width: 126px;
  height: 87.804px;
  color: #000;
  pointer-events: none;
}
.work-preparing-bubble img {
  position: absolute;
  top: -19.3613%;
  left: -14.2857%;
  width: 133.3333%;
  height: 147.8349%;
  max-width: none;
}
.work-preparing-bubble span {
  position: absolute;
  top: 40.999%;
  left: 51.1905%;
  transform: translate(-50%, -50%);
  font: 700 25px/1.45 var(--font-ja);
  white-space: nowrap;
}
.work-header-stage {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 1440px;
  height: 96px;
  transform: scale(var(--art-scale, 1));
  transform-origin: top left;
}
.work-hero .site-header { color: #150000; border-bottom: 1px solid #060606; }
.work-page .floating-chat[data-hero-visible='true'] { opacity: 0; visibility: hidden; }
.work-hero .header-divider { background: #060606; }
.work-hero .site-header .nav-contact { background: #150000; color: #fff; }
.work-hero .site-header .nav-contact:is(:hover, :focus-visible) { background: #d43b00; }

@media (max-width: 767px) {
  .work-hero { --work-mascot-size: clamp(220px, 60vw, 260px); --work-bubble-width: clamp(88px, 26.5vw, 110px); }
  .work-hero-art,
  .work-hero-content { inset: 0; width: 100%; height: 100%; transform: none; }
  .work-hero-ring--right { top: 8%; left: -72%; width: 232%; height: auto; aspect-ratio: 1309.314 / 1210; }
  .work-hero-ring--right img { top: -6.198347%; left: -5.7282%; width: 111.4564%; height: 112.3967%; }
  .work-hero-ring--left { top: -25%; left: -220%; width: 270%; height: auto; aspect-ratio: 1349.35 / 1247; }
  .work-hero-ring--left img { top: -6.0144%; left: -5.5582%; width: 111.1164%; height: 112.0289%; }
  .work-hero-title {
    top: 34%;
    font-size: clamp(80px, 25.5vw, 160px);
    letter-spacing: -.02em;
    transform: translateX(-50%);
  }
  .work-mascot {
    top: 54%;
    left: 50%;
    width: var(--work-mascot-size);
    height: auto;
    aspect-ratio: 301 / 302;
    transform: translate(-50%, -50%);
  }
  .work-preparing-bubble {
    top: calc(54% - var(--work-mascot-size) * .5 - 8px);
    left: min(calc(50% + var(--work-mascot-size) * .32), calc(100% - var(--work-bubble-width) - 16px));
    width: var(--work-bubble-width);
    height: auto;
    aspect-ratio: 126 / 87.804;
  }
  .work-preparing-bubble span { font-size: clamp(18px, 5.25vw, 22px); }
  .work-header-stage { width: 100%; transform: none; }
  .work-hero .site-header { height: 84px; }
  .work-hero .site-header .nav-service { background: #150000; color: #fff; }
  .work-hero .site-header .nav-service:is(:hover, :focus-visible) { background: #d43b00; }
}

@media (prefers-reduced-motion: reduce) {
  .work-hero-title { transform: translateX(-50%); }
  .work-hero-title span { animation: none; will-change: auto; }
  .work-hero [data-work-canvas] { animation: none; }
}
html[data-motion-paused='true'] .work-hero [data-work-canvas] { animation: none; }
html[data-motion-paused='true'] .work-hero-title { transform: translateX(-50%); }
html[data-motion-paused='true'] .work-hero-title span { animation-play-state: paused; }