.brand-lockup { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brand-mark { position: relative; display: block; width: 31px; aspect-ratio: 473 / 494; overflow: hidden; flex-shrink: 0; mix-blend-mode: multiply; }
.brand-mark img { position: absolute; width: var(--brand-crop-width); max-width: none; height: auto; left: var(--brand-crop-x); top: var(--brand-crop-y); }
.brand-name { font-size: var(--fs-min); font-weight: 700; line-height: 1.35; letter-spacing: 0.01em; }
.site-header { background-image: var(--paper-image); background-size: var(--paper-size); border-bottom: 1px solid var(--color-line); }
.page-composition { display: flex; flex-direction: column; gap: inherit; flex-shrink: 0; width: 100%; }
.content-head { display: grid; gap: var(--sp-1); flex-shrink: 0; }
.section-tag { display: flex; align-items: center; gap: 12px; font-family: var(--font-en); font-size: var(--fs-min); font-weight: 500; letter-spacing: 0.12em; color: var(--color-main); line-height: 1.2; }
.section-tag::before { content: ""; width: 25px; height: 1px; background: currentColor; }
.catch { font-family: var(--font-head); font-size: var(--fs-catch); font-weight: 900; line-height: 1.3; letter-spacing: var(--ls-head); }
.catch-intro, .catch-emphasis { display: block; }
.catch-intro { font-size: max(13px, 0.55em); line-height: 1.5; letter-spacing: var(--ls-head); margin-bottom: 0.25em; }
.catch-emphasis { font-size: 1.08em; line-height: 1.3; }
.paper-page .catch-intro { color: var(--color-main); }
.history-page .catch-emphasis { font-size: 1.3em; }
.operations-page .catch-emphasis { font-size: 1.08em; }
.page .body, .question-copy, .final-copy { word-break: keep-all; overflow-wrap: anywhere; }
.question-copy, .final-copy { font-size: var(--fs-close); font-weight: 700; line-height: 1.5; color: var(--color-main); }
.paper-page { background-color: var(--color-paper-blue); background-image: var(--paper-image); background-size: var(--paper-size); background-repeat: repeat; background-blend-mode: normal, multiply; }
.paper-arcs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.paper-arcs::before, .paper-arcs::after { content: ""; position: absolute; aspect-ratio: 1; border: 1px solid var(--color-paper-arc); border-radius: 50%; }
.paper-arcs::before { width: 170%; left: -35%; top: 10%; }
.paper-arcs::after { width: 190%; left: -45%; top: 7%; }
.paint-mark { position: absolute; z-index: 5; pointer-events: none; width: 62%; height: auto; aspect-ratio: 8 / 3; }
.paint-mark img { width: 100%; height: 100%; object-fit: contain; }
.paint-edge { position: absolute; z-index: 5; pointer-events: none; overflow: hidden; }
.paint-edge { inset: 0; }
.paint-mark--corner { width: 100%; top: -10px; right: -55%; transform: rotate(-24deg); }
.paint-mark--mix { width: 115%; right: -30%; top: auto; bottom: -45px; transform: rotate(-18deg); }
.paint-mark--history { width: 95%; right: -45%; top: -15px; transform: rotate(-20deg); }
.paint-mark--reward-top { width: 90%; top: -35px; right: -34%; transform: rotate(-16deg); }
.paint-mark--dark { width: 105%; left: -32%; top: auto; bottom: -55px; transform: rotate(15deg); }
.paint-mark--hours { width: 66%; aspect-ratio: 1; right: -44%; top: -38px; transform: rotate(118deg); }
.paint-mark--portrait { width: 68%; aspect-ratio: 1; right: -47%; top: -40px; transform: rotate(-45deg); }
.paint-mark--company { width: 95%; top: -15px; right: -50%; transform: rotate(18deg); }
.paint-mark--forms { width: 94%; top: -42px; right: -52%; transform: rotate(-20deg); }
.paint-mark--entry { width: 95%; bottom: -35px; left: -25%; transform: rotate(17deg); }
.paint-mark--work-bottom { width: 58%; aspect-ratio: 1; left: -12%; bottom: -190px; transform: rotate(-30deg); }
.paint-mark--hours-bottom { width: 66%; left: -30%; bottom: -75px; transform: rotate(-14deg); }
.paint-mark--company-bottom { width: 145%; left: -12%; bottom: calc(var(--pad-y) * -1 - 38px); transform: rotate(-10deg); }
html[data-motion-ready] .catch.pf-char-in { --pf-dur: var(--motion-title); --pf-step: var(--motion-step); --pf-delay: 100ms; --pf-dist: 0.32em; --pf-blur: 7px; }
html[data-motion-ready] .motion-copy { flex-shrink: 0; --pf-rise: 20px; --pf-dur: 850ms; --pf-delay: 100ms; }
html[data-motion-ready] .photo-window.pf-fade-in { --pf-dur: 1000ms; --pf-delay: 0ms; }

.company-lockup { position: relative; display: grid; gap: 22px; width: min(100%, 290px); justify-items: start; }
.company-lockup .brand-mark { width: clamp(84px, 10vw, 140px); }
.company-title { font-size: clamp(20px, 2.3vw, 29px); line-height: 1.6; font-weight: 700; color: var(--color-main); letter-spacing: 0.03em; }
.company-detail { font-size: 15px; line-height: 1.8; font-weight: 500; color: var(--color-main); }
.company-en { font-family: var(--font-en); font-size: 14px; line-height: 1; letter-spacing: 0.2em; color: var(--color-main); }
.rail { position: relative; overflow: hidden; background-color: var(--color-paper-blue); background-image: var(--paper-image); background-size: var(--paper-size); background-repeat: repeat; background-blend-mode: normal, multiply; }
.rail::after { content: ""; position: absolute; z-index: 2; width: 135%; aspect-ratio: 8 / 3; background: var(--paint-blue) center / contain no-repeat; pointer-events: none; }
.rail--left::after { left: -66%; top: 1%; transform: rotate(-28deg); }
.rail--right::after { right: -245px; top: calc(50% + 145px); bottom: auto; width: 400px; aspect-ratio: 1; background-image: var(--paint-curl); transform: rotate(60deg); }
.rail--left::before { content: ""; position: absolute; z-index: 2; width: 145%; aspect-ratio: 8 / 3; left: -56%; bottom: -5%; transform: rotate(12deg); background: var(--paint-mix) center / contain no-repeat; pointer-events: none; }
.rail-side { position: relative; z-index: 3; }
.section-direction { display: none; position: absolute; z-index: 6; width: 108px; height: 108px; bottom: 34px; left: var(--gutter); color: var(--color-on-dark); pointer-events: none; }
.section-direction svg { width: 100%; height: 100%; overflow: visible; }
.section-direction .direction-base { stroke: var(--color-on-dark-line); }
.direction-base { fill: none; stroke: var(--color-line); stroke-width: 0.8; }
.direction-loop { fill: none; stroke: currentColor; stroke-width: 0.8; stroke-dasharray: 302; transform: rotate(-90deg); transform-origin: center; animation: circle-progress var(--motion-circle) linear infinite; }
.direction-arrow { fill: none; stroke: currentColor; stroke-width: 1.1; animation: arrow-down var(--motion-circle) ease-in-out infinite; }
.direction-arrow--second { animation-delay: -2.5s; }
@keyframes circle-progress { 0% { stroke-dashoffset: 302; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -302; } }
@keyframes arrow-down { 0%, 18% { opacity: 0; transform: translateY(-8px); } 38%, 60% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(8px); } }

.empathy-page { --bg-dark: var(--color-charcoal); --empathy-blank: clamp(44px, 10dvh, 84px); }
.photo-window { position: relative; z-index: 0; flex: 1; min-height: 0; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); }
.photo-window__images { position: absolute; inset: auto 0 calc(var(--empathy-blank) * -1); height: 65dvh; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, var(--color-on-dark) 18%); mask-image: linear-gradient(transparent, var(--color-on-dark) 18%); }
.photo-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; opacity: 0; }
.photo-slide--group { object-position: 60% 50%; }
.photo-slide:nth-child(3) { object-position: 58% 50%; }
.photo-slide:nth-child(4) { object-position: 56% 50%; }
.photo-slide.is-current, .photo-slide.is-previous { animation: photo-zoom var(--motion-zoom) linear both; }
.photo-slide.is-current { z-index: 2; opacity: 1; transition: opacity var(--motion-photo) ease; }
.photo-slide.is-previous { z-index: 1; opacity: 1; }
@keyframes photo-zoom { from { transform: scale(1); } to { transform: scale(1.1); } }
.photo-shade { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--color-photo-solid) 0%, var(--color-photo-heavy) 45%, var(--color-photo-soft) 80%, var(--color-photo-floor) 100%); }
.empathy-page .page__inner { z-index: auto; justify-content: flex-start; padding-top: calc(var(--header-h) + var(--empathy-blank)); padding-bottom: var(--empathy-blank); }
.empathy-page .page-composition { position: relative; z-index: 2; min-height: 0; gap: var(--sp-g); }
.empathy-page .section-tag, .empathy-page .question-copy { color: var(--color-on-dark); }
.empathy-page .question-copy { margin-top: var(--sp-p); }

.work-intro { flex-shrink: 0; }
.choice-diagram { position: relative; display: grid; gap: 18px; flex-shrink: 0; padding-block: 9px 7px; }
.work-choice { position: relative; color: var(--color-ink); font-size: clamp(13px, 4vw, 18px); font-weight: 900; line-height: 1.7; white-space: nowrap; }
.brush-emphasis { position: relative; z-index: 0; display: inline-block; }
.brush-emphasis::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(100% - 0.32em); aspect-ratio: 8 / 3; background: var(--paint-blue) center / 100% 100% no-repeat; transform: translateY(-50%) scale(0.92) scaleY(0.18) rotate(17deg); transform-origin: center; opacity: 0.2; pointer-events: none; }
.work-summary { border-top: 1px solid var(--color-line); padding-top: var(--sp-p); }

.history-page, .page--reward { --bg-dark: var(--color-charcoal); }
.history-page .page__inner { justify-content: center; }
.history-page .page-composition { min-height: 0; gap: var(--sp-g); }
.job-photo { position: absolute; z-index: 0; inset: 0; height: 100%; width: 100%; margin: 0; overflow: hidden; filter: grayscale(1) brightness(0.65); }
.job-photo::after { content: ""; position: absolute; z-index: 3; inset: 0; background: linear-gradient(180deg, var(--color-job-photo-top), var(--color-job-photo-middle) 60%, var(--color-job-photo-bottom)); }
.job-photo img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; object-fit: cover; object-position: center; opacity: 0; }
.job-photo-slide.is-current { z-index: 2; opacity: 1; animation: job-photo-arrive var(--motion-job-photo) ease both; }
.job-photo-slide.is-previous { z-index: 1; opacity: 1; animation: job-photo-leave var(--motion-job-photo) ease both; }
@keyframes job-photo-arrive { from { opacity: 0; filter: blur(12px); transform: scale(1.04); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes job-photo-leave { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(8px); } }
.job-photo img:first-child { object-position: 55% 50%; }
.job-photo img:nth-child(3) { object-position: 54% 50%; }
.job-photo img:nth-child(4) { object-position: 45% 50%; }
.history-page .content-head { position: relative; z-index: 2; padding-bottom: var(--sp-1); }
.history-page .job-copy, .history-page .job-quote { position: relative; z-index: 2; }
.history-page .section-tag, .history-page .final-copy { color: var(--color-on-dark); }
.job-copy { display: grid; gap: var(--sp-p); }
.job-copy strong { font-weight: 700; }
.job-quote { display: grid; grid-template-columns: 0.8em 1fr; align-items: center; gap: var(--sp-1); padding-top: var(--sp-1); }
.job-quote__mark { align-self: start; font-family: var(--font-en); font-size: 2em; line-height: 1; font-weight: 500; }
.page--reward { --sp-g: clamp(14px, 2.6dvh, 23px); }
.page--reward .section-tag, .page--reward .final-copy { color: var(--color-on-dark); }
.dark-grain { position: absolute; inset: 0; background: url("assets/paper-cotton-v2.webp?v=20261028j") repeat; background-size: 280px 280px; opacity: 1; mix-blend-mode: normal; filter: grayscale(1) brightness(0.38) contrast(1.65); pointer-events: none; }
.reward-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-g); flex-shrink: 0; }
.reward-case { display: grid; align-content: start; gap: var(--sp-p); padding: clamp(12px, 2.1dvh, 18px) 10px; border: 1px solid var(--color-reward-card-line); border-radius: 8px; background: var(--color-reward-card); }
.reward-case__days { font-size: var(--fs-min); font-weight: 700; letter-spacing: var(--ls-head); }
.reward-case__salary { display: grid; gap: var(--sp-1); }
.reward-case__prefix { display: block; font-weight: 700; }
.reward-case__amount { display: block; white-space: nowrap; font-family: var(--font-en); font-weight: 500; font-size: clamp(31px, 5.8dvh, 38px); line-height: 1.2; letter-spacing: -0.03em; }
.reward-case__number { font-variant-numeric: tabular-nums; }
.reward-case__unit { display: inline-block; margin-inline-start: 0.13em; font-family: var(--font-body); font-size: var(--fs-base); letter-spacing: 0; }
.reward-case__range { display: inline-block; margin-inline: 0.08em; font-size: 0.52em; letter-spacing: 0; }
.reward-case__amount strong { font-weight: 700; }
.reward-question { font-size: var(--fs-close); line-height: 1.8; }
.reward-question strong { color: var(--color-mix-yellow); font-weight: 700; }
.reward-close { padding-left: var(--sp-p); border-left: 1px solid var(--color-on-dark-line); }
html[data-motion-ready] .reward-case__amount.pf-char-in { --pf-dur: var(--motion-title); --pf-step: var(--motion-step); --pf-dist: 0.25em; }

.page--hours { --sp-g: clamp(8px, 1.3dvh, 12px); }
.hours-principle { color: var(--color-main); }
.hours-principle strong { font-weight: 700; }
.hours-diagram { display: grid; gap: var(--sp-g); flex-shrink: 0; }
.hours-case { display: grid; grid-template-columns: minmax(0, 1fr) 8.3em; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-paper-button); }
.hours-case__calculation { display: grid; gap: 3px; min-width: 0; }
.hours-case__lead { font-size: 13px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.hours-case__equation { font-family: var(--font-en); font-size: clamp(22px, min(3.7dvh, 6.2vw), 29px); font-weight: 500; letter-spacing: 0; line-height: 1.25; white-space: nowrap; color: var(--color-main); }
.hours-case__equation strong { margin-left: 0.08em; font-size: 1.15em; font-weight: 600; }
.hours-case__days { padding-left: 10px; border-left: 1px solid var(--color-line); font-size: var(--fs-min); font-weight: 700; line-height: 1.8; white-space: nowrap; text-align: left; color: var(--color-main); }
.hours-note { display: grid; gap: var(--sp-1); }
.hours-note__small { font-size: var(--fs-min); font-weight: var(--fw-body); line-height: 1.6; }

.message-page .page-composition { min-height: 0; gap: var(--sp-g); }
.message-page .catch { font-size: min(var(--fs-catch), 8.6vw); }
.message-page .catch strong { font-weight: inherit; }
.message-photo { position: relative; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); height: clamp(150px, 30dvh, 280px); overflow: hidden; flex-shrink: 0; }
.message-photo__image { width: 100%; height: 100%; overflow: hidden; }
.message-photo__image > img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.message-body { display: grid; gap: var(--sp-p); word-break: keep-all; overflow-wrap: anywhere; }
.message-close { display: block; margin-top: var(--sp-p); }
html[data-motion-ready] .message-photo__image.pf-develop, html[data-motion-ready] .operations-photo.pf-develop { --pf-dur: 1200ms; --pf-delay: 100ms; }

.operations-page { --bg-dark: var(--color-charcoal); }
.operations-photo { position: absolute; inset: 0; overflow: hidden; }
.operations-photo img { position: absolute; bottom: 0; left: 0; width: 100%; height: 230%; max-width: none; object-fit: cover; object-position: center bottom; }
.operations-page .photo-shade { background: linear-gradient(180deg, var(--color-photo-soft), var(--color-photo-medium) 30%, var(--color-photo-heavy) 60%, var(--color-photo-solid) 100%); }
.operations-page .page__inner { justify-content: center; }
.operations-page .page-composition { min-height: 0; gap: clamp(8px, 1.4dvh, 13px); padding-bottom: 0; }
.operations-page .catch { font-size: min(var(--fs-catch), 8vw); }
.operations-page .section-tag, .operations-page .final-copy { color: var(--color-on-dark); }
.operations-body strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.service-card { overflow: hidden; margin: 0; padding: 5px 8px 8px; border: 1px solid var(--color-line); border-radius: 8px; background-color: var(--color-paper-blue); background-image: var(--paper-image); background-size: var(--paper-size); color: var(--color-main); }
.service-card img, .service-card .service-illustration { width: 100%; height: clamp(44px, 9dvh, 80px); object-fit: contain; }

.service-illustration { display: block; overflow: visible; --equipment-play: paused; }
.service-grid.is-operating .service-illustration { --equipment-play: running; }
.service-rotor { transform-box: view-box; transform-origin: var(--rotor-x) var(--rotor-y); }
.service-tool { transform-box: view-box; transform-origin: var(--tool-x) var(--tool-y); }
.service-flow { stroke-width: 2.4px; stroke-dasharray: 6 12; opacity: 0; }
.service-illustration--pump-install .service-assembly--motor { animation: equipment-motor-fit 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.service-illustration--blower-install .service-assembly--duct { animation: equipment-duct-fit 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.service-illustration--pump-install .service-rotor { animation: equipment-spin 1.25s linear 1.25s infinite; }
.service-illustration--blower-install .service-rotor { animation: equipment-spin 0.9s linear 1.45s infinite; }
.service-illustration--pump-install .service-flow { animation: equipment-water-flow 0.85s linear infinite, equipment-flow-on 0.3s ease 1.4s both; }
.service-illustration--blower-install .service-flow { animation: equipment-air-flow 1.1s linear infinite, equipment-flow-on 0.3s ease 1.55s both; }
.service-illustration--pump-maintenance { --equipment-phase: -0.5s; }
.service-illustration--blower-maintenance { --equipment-phase: -2s; }
.service-illustration--pump-maintenance .service-rotor, .service-illustration--blower-maintenance .service-rotor { animation: equipment-test-rotation 6.8s linear var(--equipment-phase) infinite; }
.service-tool { animation: equipment-tool-turn 6.8s ease-in-out var(--equipment-phase) infinite; }
.service-illustration--pump-maintenance .service-flow { animation: equipment-water-flow 0.85s linear infinite, equipment-test-flow 6.8s linear var(--equipment-phase) infinite; }
.service-illustration--blower-maintenance .service-flow { animation: equipment-air-flow 1.1s linear infinite, equipment-test-flow 6.8s linear var(--equipment-phase) infinite; }
.service-illustration :is(.service-assembly, .service-rotor, .service-tool, .service-flow) { animation-play-state: var(--equipment-play); }
@keyframes equipment-motor-fit { from { transform: translateX(19px); opacity: 0.35; } to { transform: translateX(0); opacity: 1; } }
@keyframes equipment-duct-fit { from { transform: translateX(-18px); opacity: 0.35; } to { transform: translateX(0); opacity: 1; } }
@keyframes equipment-spin { to { transform: rotate(360deg); } }
@keyframes equipment-water-flow { to { stroke-dashoffset: -18; } }
@keyframes equipment-air-flow { to { stroke-dashoffset: 18; } }
@keyframes equipment-flow-on { from { opacity: 0; } to { opacity: 0.75; } }
@keyframes equipment-tool-turn {
  0%, 6% { transform: translate(0, 0) rotate(-14deg); opacity: 1; }
  16% { transform: translate(0, 0) rotate(12deg); opacity: 1; }
  21% { transform: translate(1px, -4px) rotate(-14deg); opacity: 1; }
  26% { transform: translate(0, 0) rotate(-14deg); opacity: 1; }
  37% { transform: translate(0, 0) rotate(12deg); opacity: 1; }
  45%, 89% { transform: translate(25px, -13px) rotate(12deg); opacity: 0; }
  97%, 100% { transform: translate(0, 0) rotate(-14deg); opacity: 1; }
}
@keyframes equipment-test-rotation {
  0%, 52% { transform: rotate(0deg); }
  58% { transform: rotate(40deg); }
  72% { transform: rotate(400deg); }
  82% { transform: rotate(940deg); }
  89%, 100% { transform: rotate(1080deg); }
}
@keyframes equipment-test-flow {
  0%, 53% { opacity: 0; }
  59%, 80% { opacity: 0.75; }
  89%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .service-illustration :is(.service-assembly, .service-rotor, .service-tool, .service-flow) { animation: none; transform: none; }
  .service-illustration .service-flow { opacity: 0; }
}
.service-card figcaption { display: grid; gap: 2px; text-align: center; font-size: 13px; line-height: 1.4; font-weight: 500; }
.service-card strong { font-size: 14px; font-weight: 900; letter-spacing: 0.03em; }
.operations-intro, .operations-list-end { font-size: var(--fs-min); }
.operations-close { border-top: 1px solid var(--color-on-dark-line); padding-top: var(--sp-p); }

.section-cover-surface { position: absolute; z-index: 1; inset: 0; background: var(--bg-dark); transform-origin: center bottom; }
.page[data-cover-entry] { background: transparent; }
[data-cover-entry] > .section-cover-surface > .page__inner { opacity: var(--cover-copy-opacity, 1); }
.section-underlay-surface { position: absolute; inset: 0; overflow: hidden; background-color: var(--color-paper-blue); background-image: var(--paper-image); background-size: var(--paper-size); background-repeat: repeat; background-blend-mode: normal, multiply; }
.is-cover-underlay { z-index: 0; overflow: visible; }
.is-cover-underlay > .section-underlay-surface { transform: translateY(var(--cover-hold, 0px)); }
.is-cover-entering > .section-cover-surface { will-change: transform; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-cover-entry] { view-timeline-name: --section-cover; view-timeline-axis: block; }
    [data-cover-entry].is-cover-entering > .section-cover-surface {
      animation: section-cover-stretch 1s linear both;
      animation-timeline: --section-cover;
      animation-range: entry 0% entry 100%;
    }
  }
}
@keyframes section-cover-stretch {
  0% { transform: translateY(-100%) scaleY(0.000000); }
  10% { transform: translateY(-90%) scaleY(0.001585); }
  20% { transform: translateY(-80%) scaleY(0.011038); }
  30% { transform: translateY(-70%) scaleY(0.034351); }
  40% { transform: translateY(-60%) scaleY(0.076872); }
  50% { transform: translateY(-50%) scaleY(0.143587); }
  60% { transform: translateY(-40%) scaleY(0.239234); }
  70% { transform: translateY(-30%) scaleY(0.368362); }
  80% { transform: translateY(-20%) scaleY(0.535367); }
  90% { transform: translateY(-10%) scaleY(0.744525); }
  100% { transform: translateY(0%) scaleY(1.000000); }
}

.company-facts { flex-shrink: 0; font-size: var(--fs-base); line-height: 1.6; }
.company-facts-row { position: relative; display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; padding-block: var(--sp-p); }
.company-facts dt { font-weight: 700; color: var(--color-main); white-space: nowrap; }
.company-facts dd { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.company-rule { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; overflow: visible; color: var(--color-line); pointer-events: none; }
.company-rule path { fill: none; stroke: currentColor; stroke-width: 1; }
html[data-motion-ready] .company-rule .pf-line-draw { --pf-dur: 700ms; }
.company-page { --company-reserve: clamp(155px, 27dvh, 235px); }
.company-layout { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) calc(var(--company-reserve) - var(--pad-y)); flex: 1; min-height: 0; width: 100%; }
.company-layout > .page-composition { grid-row: 2; gap: var(--sp-g); }
.company-art-space { position: relative; grid-row: 3 / 5; min-height: 0; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); }
.forms-page__inner { gap: calc(var(--sp-g) * 2); }
#requirements > .paint-mark { z-index: 1; }
.recruit-jumps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-p); }
.recruit-jump { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 10px; border: 1px solid var(--color-main); border-radius: var(--radius-s); background: var(--color-paper-button); color: var(--color-main); font-size: var(--fs-min); font-weight: 700; line-height: 1.5; text-align: center; }
.recruit-variant { display: grid; gap: var(--sp-g); scroll-margin-top: calc(var(--header-h) + var(--sp-g)); }
.recruit-variant + .recruit-variant { padding-top: calc(var(--sp-g) * 2); border-top: 1px solid var(--color-main); }
.recruit-variant__title { color: var(--color-main); font-size: var(--fs-close); font-weight: 700; line-height: 1.5; }
.recruit-details { font-weight: var(--fw-body); }
.recruit-details dt, .recruit-details dd { min-width: 0; }
.recruit-details dt { font-weight: var(--fw-body); }
.recruit-details strong { font-weight: 700; }
.recruit-details dd { word-break: keep-all; overflow-wrap: anywhere; }
.req-colon { font-weight: var(--fw-body); }
#entry .page__inner { padding-bottom: clamp(125px, 23dvh, 180px); }
.entry-fields { min-width: 0; }
.entry-fields .field__label { flex-wrap: wrap; align-items: baseline; gap: 0.35em; }
.entry-fields .field__input { min-width: 0; max-width: 100%; background: var(--color-paper-button); }

@media (min-width: 400px) and (max-width: 767px) { .photo-slide--group { object-position: 53% 50%; } }
@media (min-width: 768px) { .photo-slide--group { object-position: 65% 50%; } }
@media (min-width: 960px) { .section-direction { display: block; } .paint-mark--mix { right: -50%; } }
@media (max-width: 374px) { .brand-name { letter-spacing: -0.03em; } .brand-mark { width: 26px; } }
@media (max-height: 600px) {
  .paint-mark--corner { top: -60px; }
  .paint-mark--history { top: -45px; }
  .paint-mark--reward-top { top: -65px; }
  .paint-mark--dark { bottom: -65px; }
  .paint-mark--work-bottom { bottom: -205px; }
  .paint-mark--hours { top: -100px; }
  .paint-mark--hours-bottom { bottom: -100px; }
  .history-page { --sp-p: 0.4em; }
  .message-photo { height: 110px; }
  .message-page { --sp-g: 0.6em; }
  .page--reward { --sp-g: 0.95em; }
  .page--hours { --sp-g: 0.5em; }
  .hours-case { padding: 8px 10px; }
  .operations-page .page-composition { gap: 7px; }
  .operations-page .body { font-size: 13px; line-height: 1.5; }
  .service-card { padding-bottom: 6px; }
  .empathy-page { --empathy-blank: 40px; }
}
@media (max-width: 767px) and (min-height: 900px), (min-width: 768px) and (min-height: 1000px) {
  .page-composition { min-height: calc((100dvh - var(--header-h)) * 0.68); justify-content: space-between; }
  .operations-page .page-composition { min-height: calc((100dvh - var(--header-h)) * 0.62); }
  .choice-diagram { gap: 14px; }
  .reward-options { grid-template-columns: 1fr; }
  .reward-case { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .hours-diagram { gap: clamp(22px, 3dvh, 33px); }
  .company-facts-row { padding-block: 1.2em; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-slide.is-current, .job-photo-slide.is-current, .job-photo-slide.is-previous { animation: none; transition: none; filter: none; transform: none; }
  .job-photo-slide.is-previous { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .rich-reveal { opacity: 0; transform: translate3d(0, var(--reveal-distance, 10px), 0) scale(var(--reveal-scale, 1)); filter: blur(3px); }
  html.motion-ready .rich-reveal[data-reveal-kind="card"] { --reveal-distance: 22px; --reveal-scale: 0.975; }
  html.motion-ready .rich-reveal[data-reveal-kind="field"] { --reveal-distance: 12px; }
  html.motion-ready .rich-reveal.is-revealed { opacity: 1; transform: none; filter: none; transition: opacity 700ms ease var(--reveal-delay, 0ms), transform 800ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms), filter 700ms ease var(--reveal-delay, 0ms); }
  html.motion-ready .section-tag::before { transform: scaleX(0); transform-origin: left; }
  html.motion-ready .section-tag.is-revealed::before { transform: none; transition: transform 700ms ease 80ms; }
  html.motion-ready .brush-emphasis::before { clip-path: inset(0 100% 0 0); }
  html.motion-ready .work-choice.is-on .brush-emphasis::before { animation: agt-paint-write 850ms cubic-bezier(0.19, 0.62, 0.28, 1) calc(var(--pf-delay, 0ms) + 140ms) both; }
  html.motion-ready .rail::after, html.motion-ready .rail--left::before { animation: agt-paint-write 1250ms cubic-bezier(0.19, 0.62, 0.28, 1) 100ms both; }
}
html.motion-ready .rich-reveal:focus-within { opacity: 1; transform: none; filter: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .rich-reveal { opacity: 1; transform: none; filter: none; transition: none; }
  html.motion-ready .section-tag::before { transform: none; transition: none; }
  html.motion-ready .brush-emphasis::before, html.motion-ready .rail::after, html.motion-ready .rail--left::before { clip-path: none; animation: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .paint-mark[data-paint-reveal] > img {
    clip-path: inset(0 100% 0 0);
    transform-origin: 15% 70%;
  }

  .motion-ready .paint-mark[data-paint-reveal].is-painted > img {
    animation:
      agt-paint-write var(--paint-duration, 1.04s) linear var(--paint-delay, 0s) both,
      agt-paint-pressure var(--paint-duration, 1.04s) cubic-bezier(.18, .76, .29, 1) var(--paint-delay, 0s) both;
  }

  .motion-ready .paint-mark[data-paint-reveal="curl"] > img {
    transform-origin: 33% 45%;
  }

  .motion-ready .paint-mark[data-paint-reveal="curl"].is-painted > img {
    animation-name: agt-paint-curve, agt-paint-pressure;
  }
}

@keyframes agt-paint-write {
  0% {
    clip-path: polygon(-1% -1%, -1% -1%, -1% 9%, -1% 18%, -1% 28%, -1% 40%, -1% 52%, -1% 62%, -1% 74%, -1% 87%, -1% 101%, -1% 101%);
  }
  12% {
    clip-path: polygon(-1% -1%, 15% -1%, 12% 9%, 18% 18%, 13% 28%, 22% 40%, 15% 52%, 19% 62%, 14% 74%, 16% 87%, 11% 101%, -1% 101%);
  }
  35% {
    clip-path: polygon(-1% -1%, 42% -1%, 38% 9%, 49% 18%, 43% 28%, 54% 40%, 44% 52%, 51% 62%, 39% 74%, 47% 87%, 37% 101%, -1% 101%);
  }
  69% {
    clip-path: polygon(-1% -1%, 84% -1%, 74% 9%, 90% 18%, 81% 28%, 96% 40%, 82% 52%, 91% 62%, 75% 74%, 89% 87%, 74% 101%, -1% 101%);
  }
  100% {
    clip-path: polygon(-1% -1%, 102% -1%, 102% 9%, 102% 18%, 102% 28%, 102% 40%, 102% 52%, 102% 62%, 102% 74%, 102% 87%, 102% 101%, -1% 101%);
  }
}

@keyframes agt-paint-curve {
  0% {
    clip-path: polygon(53% 46%, 53% -2%, 53% -2%, 53% -2%, 53% -2%, 53% -2%, 53% -2%, 53% -2%);
  }
  24% {
    clip-path: polygon(53% 46%, 53% -2%, -2% -2%, -2% 29%, -2% 29%, -2% 29%, -2% 29%, -2% 29%);
  }
  49% {
    clip-path: polygon(53% 46%, 53% -2%, -2% -2%, -2% 102%, 26% 102%, 26% 102%, 26% 102%, 26% 102%);
  }
  76% {
    clip-path: polygon(53% 46%, 53% -2%, -2% -2%, -2% 102%, 102% 102%, 102% 69%, 102% 69%, 102% 69%);
  }
  100% {
    clip-path: polygon(53% 46%, 53% -2%, -2% -2%, -2% 102%, 102% 102%, 102% -2%, 53% -2%, 53% -2%);
  }
}

@keyframes agt-paint-pressure {
  0% { transform: scale(.96, .73) skewX(-2deg); }
  16% { transform: scale(.985, .97) skewX(-.5deg); }
  36% { transform: scale(.995, 1); }
  58% { transform: scale(.998, .985); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .paint-mark[data-paint-reveal] > img,
  .motion-ready .paint-mark[data-paint-reveal].is-painted > img {
    animation: none;
    clip-path: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .paint-mark--portrait[data-paint-reveal].is-painted > img {
    animation: agt-paint-write var(--paint-duration, 1.04s) linear var(--paint-delay, 0s) both;
  }
}