.page:not([data-tone="dark"]) { background: var(--bg-paper), var(--color-base); }

.dd {
  position: absolute; z-index: 1; width: var(--dd); height: var(--dd); overflow: visible; pointer-events: none;
  fill: none; stroke: var(--color-ink); stroke-width: 3.6; stroke-linejoin: round; stroke-linecap: round;
}
.dd-f1 { fill: var(--color-pink); }
.dd-f2 { fill: var(--color-yellow); }
.dd-f3 { fill: var(--color-blue); }
.dd-f4 { fill: var(--color-sky); }
.dd-hl { stroke: var(--color-on-dark); }

.hb { font-family: var(--font-body); }

.hd {
  font-family: var(--font-head); font-weight: 400; font-size: var(--fs-head);
  line-height: var(--lh-head); letter-spacing: var(--ls-head); text-align: center;
}
.head { display: grid; justify-items: center; gap: var(--sp-1); }
.kw { font-weight: 700; font-size: 1.1em; line-height: 1; color: var(--color-main); }

.hand-en {
  position: relative; display: inline-block; padding-inline: 0.3em; rotate: -3deg;
  font-family: var(--font-hand); font-size: 1.5em; line-height: 1.2; letter-spacing: 0.08em; color: var(--color-ink);
}
.hand-en__line {
  position: absolute; left: 0; bottom: -0.3em; width: 100%; height: 0.42em;
  fill: none; stroke: var(--color-blue); stroke-width: 7; stroke-linecap: round;
}
.hand-en .pf-line-draw { --pf-delay: 300ms; --pf-dur: 600ms; --pf-ease: steps(6); }

.page--fv::before {
  content: "TOEI SERVICE"; position: absolute; z-index: 1; top: calc(var(--header-h) + 0.1em); right: -0.16em;
  writing-mode: vertical-rl; white-space: nowrap; font-family: var(--font-en); font-weight: 700; font-size: 8em; line-height: 1; letter-spacing: 0.02em;
  color: var(--color-blue-pale); pointer-events: none;
}

.copy {
  position: relative; align-self: flex-start; width: fit-content; font-family: var(--font-head); font-weight: 400; font-size: var(--fs-copy);
  line-height: 0.75; letter-spacing: var(--ls-head);
}
.copy .ln + .ln { margin-top: 0.3em; }
.copy__em { font-size: 1.12em; color: var(--color-blue-deep); }
.copy__line {
  display: block; width: 100%; height: 0.3em; margin-top: 0.08em; overflow: visible;
  fill: none; stroke: var(--color-blue); stroke-width: 5; stroke-linecap: round;
}

.page--fv .page__inner > .dd--flower { right: calc(var(--gutter) * 0.6); top: calc(var(--header-h) + var(--pad-y)); }
.page--fv .page__inner > .dd--sparkle { right: calc(var(--gutter) + 1em); top: calc(var(--header-h) + var(--pad-y) + 5.4em); width: 1.8em; height: 1.8em; }

.page--fv .page__inner { gap: var(--sp-p); }
.fv__row { display: grid; grid-template-columns: minmax(0, 1fr) 54%; align-items: end; gap: var(--sp-1); }
.fv__fig { position: relative; margin: 0 calc(var(--gutter) * -0.5) 0 0; }
.fv__worker { width: 100%; height: auto; max-height: 44dvh; object-fit: contain; object-position: bottom; }
.fv__fig .dd--drop { right: 0.4em; top: -0.6em; width: 2.4em; height: 2.4em; }

.sign-wrap { position: relative; margin: var(--sp-p) calc(var(--gutter) * -0.6) 0; padding-bottom: 1.1em; }
.sign-wrap::before, .sign-wrap::after {
  content: ""; position: absolute; bottom: 0; width: 0.55em; height: 1.4em; background: var(--color-wood);
}
.sign-wrap::before { left: 22%; }
.sign-wrap::after { right: 22%; }
.sign {
  position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.2em;
  padding: 0.5em 0.4em; font-family: var(--font-hand); font-size: min(1.6em, 5.45vw); line-height: 1.3; text-align: center; color: var(--color-ink);
}
.sign__board { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; fill: var(--color-wood); }
.sign .ln { padding-inline: 0.15em; white-space: nowrap; border-inline: 2px dashed var(--color-on-wood-line); }
.sign__icon {
  width: 0.95em; height: 0.95em; overflow: visible;
  fill: none; stroke: var(--color-ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
}
.sign__icon .dd-f4, .sign__icon .dd-ink { fill: var(--color-ink); }
.sign-wrap .dd--star { right: 8%; bottom: -0.5em; width: 2.2em; height: 2.2em; }

.page--story .page__inner { text-align: center; }

.page--story::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/scene-roof.jpg") center bottom / cover no-repeat;
  filter: sepia(0.75) saturate(0.6) brightness(1.05); opacity: 0.28;
}
.page--story .head { position: relative; }
.page--story .head .dd--flower { left: 0; top: 2.4em; }
.page--story .head .dd--wind { right: -0.2em; top: 0.4em; width: 2.4em; height: 2.4em; }
.hd--story { padding-top: 0.2em; font-size: clamp(calc(var(--fs-head) * 0.85), 4.2dvh, 2.4em); line-height: 0.75; }
.hd--story .ln + .ln { margin-top: 0.3em; }
.hd__em { position: relative; width: fit-content; margin-inline: auto; padding-inline: 0.8em; font-size: 1.3em; color: var(--color-blue-deep); }
.tool {
  position: absolute; right: 0; top: -0.1em; width: 0.7em; height: 0.7em;
  fill: none; stroke: var(--color-ink); stroke-width: 2.4; stroke-linejoin: round;
}
.txt { display: grid; gap: var(--sp-p); }
.txt--dash { justify-items: center; }
.txt--dash .ln {
  width: fit-content; margin-inline: auto; line-height: 2.2;
  border-bottom: 1.5px dashed var(--color-blue);
}

.scene {
  position: relative; flex: 1 1 auto; min-height: 7.5em; max-height: 36dvh; margin-inline: calc(var(--gutter) * -1);
  overflow: hidden; isolation: isolate;
}

.scene::after {
  content: "TOEI SERVICE × RECRUITING ✕ TOEI SERVICE × RECRUITING ✕ TOEI SERVICE × RECRUITING ✕ TOEI SERVICE × RECRUITING ✕ ";
  position: absolute; left: 0; top: 46%; z-index: -1; white-space: nowrap; transform: translateY(-50%);
  font-family: var(--font-en); font-weight: 700; font-size: 3.4em; line-height: 1; letter-spacing: 0.01em; color: var(--color-blue);
  animation: ticker var(--ticker) linear infinite;
}
@keyframes ticker { to { translate: -50% 0; } }
.scene__boss, .scene__walk { position: absolute; bottom: 0; width: auto; }
.scene__boss { left: 16%; height: 74%; }
.scene__walk { right: 12%; height: 78%; }
.scene .dd--heart { left: 4%; bottom: 18%; }
.scene .dd--snow { right: 2%; top: 46%; }

.page--pol .head { position: relative; padding-bottom: var(--sp-p); }

.page--pol .hd { line-height: 0.75; font-size: 49px; margin-bottom: 11px; }
.hd__line {
  width: 62%; height: 0.55em; overflow: visible;
  fill: none; stroke: var(--color-blue); stroke-width: 5; stroke-linecap: round;
}
.page--pol .head .dd--star { left: -0.2em; top: -0.2em; }
.page--pol .head .dd--drop { right: 0; top: 1.6em; }
.pols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3em 0.8em; }
.pol { rotate: var(--tilt-a); }
.pol:nth-child(2), .pol:nth-child(3) { rotate: var(--tilt-b); }
.pol__card {
  --pf-ink: var(--color-shadow-photo); --pf-shadow: var(--shadow-photo); --pf-from-rotate: -8deg;
  position: relative; padding: 0.45em 0.45em 0.3em; background: var(--color-paper);
}
.pol:nth-child(2) .pol__card { --pf-delay: 480ms; }
.pol:nth-child(3) .pol__card { --pf-delay: 580ms; }
.pol:nth-child(4) .pol__card { --pf-delay: 680ms; }
.pol__img { width: 100%; height: clamp(64px, 14dvh, 170px); object-fit: cover; }
.pol__cap { padding-top: 0.3em; background: var(--color-paper); font-family: var(--font-hand); font-size: var(--fs-hand); line-height: 1.3; text-align: center; }
.pol__num {
  position: absolute; right: -0.15em; top: -0.6em;
  font-family: var(--font-hand); font-size: 2.4em; line-height: 1; color: var(--color-main);
}

.close {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  justify-items: center; align-items: center; column-gap: var(--sp-1); row-gap: var(--sp-1); text-align: center;
}

.close__chara { position: relative; z-index: 3; grid-row: 1 / 3; width: auto; height: 27dvh; margin-top: -2.2em; }
.close .dd--heart { right: -0.3em; bottom: -0.4em; width: 2em; height: 2em; }
.scribble {
  position: relative; display: inline-block; padding: 0.55em 0.9em;
  font-family: var(--font-hand); font-size: 2.0em; line-height: 1.3;
}
.scribble .ln { white-space: nowrap; }
.scribble.pf-stamp { --pf-delay: 900ms; --pf-from-scale: 1.8; }
.scribble__ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--color-blue); stroke-width: 3; stroke-linecap: round; overflow: visible;
}

.hd--on-blue { color: var(--color-on-dark); }
.hand-en--on-blue { color: var(--color-on-dark); }
.hand-en--on-blue .hand-en__line { stroke: var(--color-yellow); }
.page--blue .head { position: relative; }

.card { position: relative; isolation: isolate; padding: 1em 0.95em; color: var(--color-ink); text-align: left; }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-card); filter: url(#rough); }
.card::after {
  content: ""; position: absolute; inset: 0.35em; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle, var(--color-pin) 0 0.22em, transparent 0.24em) left top / 0.5em 0.5em no-repeat,
    radial-gradient(circle, var(--color-pin) 0 0.22em, transparent 0.24em) right top / 0.5em 0.5em no-repeat,
    radial-gradient(circle, var(--color-pin) 0 0.22em, transparent 0.24em) left bottom / 0.5em 0.5em no-repeat,
    radial-gradient(circle, var(--color-pin) 0 0.22em, transparent 0.24em) right bottom / 0.5em 0.5em no-repeat;
}

.band {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 0.3em; padding: 0.2em 0.5em;
  font-weight: 700; font-size: 1.05em; line-height: 1.4;
}

.band::before, .yband .ln::before, .rq dt::before, .ribbon__bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-yellow); }
.band::before, .yband .ln::before, .rq dt::before { filter: url(#grit); }
.band__icon { width: 1.2em; height: 1.2em; flex-shrink: 0; overflow: visible; fill: none; stroke: var(--color-ink); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }

.ribbon {
  position: absolute; z-index: 2; isolation: isolate; top: -0.5em; left: -0.2em; width: 2.1em; padding: 0.35em 0 0.6em;
  font-family: var(--font-en); font-weight: 700; font-size: 1.1em; line-height: 1; text-align: center;
}
.ribbon__bg { position: absolute; inset: 0; z-index: -1; filter: url(#grit); }
.ribbon__bg::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }

.tape-photo { position: relative; margin: 0; padding: 0.3em; rotate: 1.5deg; background: var(--color-on-dark); box-shadow: var(--shadow-photo) var(--color-shadow-photo); }
.tape-photo img { display: block; width: 100%; height: clamp(60px, 11dvh, 150px); object-fit: cover; }
.tape-photo::before {
  content: ""; position: absolute; z-index: 1; top: -0.45em; left: 50%; width: 3.2em; height: 1em; translate: -50% 0; rotate: -4deg;
  background: var(--color-tape);
}

.page--hill .page__inner { text-align: center; }
.page--hill .head { position: relative; display: grid; justify-items: center; gap: var(--sp-1); }
.hd__em-s { color: var(--color-blue-deep); }
.page--hill .head .dd--sparkle { left: 0; top: 2.6em; width: 2em; height: 2em; }
.page--hill .head .dd--heart { right: 0; top: 0.4em; width: 2.2em; height: 2.2em; }
.txt--center { justify-items: center; }
.note { font-size: var(--fs-min); line-height: 1.6; }
.hill-space { flex-shrink: 0; height: var(--hill-h); }
.hill {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: var(--hill-h);
}
.hill::before {
  content: ""; position: absolute; inset: 22% -2% -2%; background: var(--bg-dark); filter: url(#rough);
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
}

.hill__car {
  position: absolute; z-index: 1; left: 6%; bottom: 68.5%; width: 28%; transform-origin: 50% 100%;
  animation: hill-drive var(--hill-t) linear infinite;
}
.hill__van { display: block; width: 100%; height: auto; animation: hill-rumble 0.22s steps(2) infinite; }
@keyframes hill-drive {
  0%, 100% { left: 6%; bottom: 68.5%; rotate: -9.6deg; scale: 1 1; }
  7.5%, 87.5% { left: 16%; bottom: 72.2%; rotate: -5.7deg; }
  15.0%, 80.0% { left: 26%; bottom: 74.5%; rotate: -2.7deg; }
  22.5%, 72.5% { left: 36%; bottom: 75.0%; rotate: 0.0deg; }
  30.0%, 65.0% { left: 46%; bottom: 74.5%; rotate: 2.7deg; }
  37.5%, 57.5% { left: 56%; bottom: 72.2%; rotate: 5.7deg; }
  45% { left: 66%; bottom: 68.5%; rotate: 9.6deg; scale: 1 1; }
  50% { left: 66%; bottom: 68.5%; rotate: 9.6deg; scale: -1 1; }
  95% { left: 6%; bottom: 68.5%; rotate: -9.6deg; scale: -1 1; }
}
@keyframes hill-rumble { 50% { translate: 0 -2%; } }
.dd--hill1 { left: 10%; bottom: 8%; }
.dd--hill2 { right: 12%; bottom: 14%; width: 2.4em; height: 2.4em; }

.page--blue .page__inner { text-align: center; }
.body--lead { text-align: center; }
.jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8em; margin-top: var(--sp-p); }
.job { position: relative; display: grid; align-content: start; gap: 0.45em; }
.job__txt { font-size: max(var(--fs-min), 0.92em); line-height: 1.6; }
.tags { display: flex; flex-wrap: wrap; gap: 0.25em; margin: 0.25em 0; }
.tag { padding: 0 0.45em; font-size: max(var(--fs-min), 0.9em); line-height: 1.6; border: 1.5px solid var(--color-main); border-radius: var(--radius-pill); color: var(--color-main); }
.hand-close { font-family: var(--font-hand); font-size: 1.6em; line-height: 1.35; color: var(--color-on-dark); }

.solo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 34%; align-items: end; gap: var(--sp-1); }
.tape-photo--big { rotate: -2deg; }
.tape-photo--big img { height: clamp(110px, 24dvh, 280px); object-position: 50% 20%; }
.solo__ring { position: absolute; left: 42%; top: 8%; width: 36%; height: 70%; overflow: visible; fill: none; stroke: var(--color-yellow); stroke-width: 4; stroke-linecap: round; }
.solo__ring .pf-line-draw { --pf-delay: 900ms; --pf-dur: 700ms; --pf-ease: steps(6); }
.solo__chara { width: 100%; height: auto; max-height: 28dvh; object-fit: contain; object-position: bottom; }
.card--note { text-align: center; }
.yband { justify-self: center; display: grid; justify-items: center; gap: 0.2em; }
.yband .ln { position: relative; isolation: isolate; padding: 0.15em 0.6em; font-weight: 700; color: var(--color-ink); }

.page.page--company { background: var(--bg-paper), var(--color-khaki); }
.page--company::before, .page--company::after {
  content: "TOEI SERVICE ✕ TOEI SERVICE ✕ TOEI SERVICE ✕ TOEI SERVICE ✕ TOEI SERVICE ✕ TOEI SERVICE ✕ ";
  position: absolute; left: 0; z-index: 1; white-space: nowrap; pointer-events: none;
  font-family: var(--font-en); font-weight: 700; font-size: 3.6em; line-height: 1; color: var(--color-blue-pale);
  animation: ticker var(--ticker) linear infinite;
}
.page--company::before { top: calc(var(--header-h) + 0.1em); }
.page--company::after { bottom: 0.1em; animation-direction: reverse; }
.page--company .page__inner { text-align: center; }
.page--company .head { display: grid; justify-items: center; gap: var(--sp-1); }
.card--company { width: 100%; max-width: 26em; margin-inline: auto; }
.card__logo { display: block; width: 9.5em; height: auto; margin: 0 auto var(--sp-p); }
.tbl { display: grid; }
.tbl__row { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 0.6em; padding: 0.6em 0.2em; border-bottom: 1.5px dashed var(--color-blue); }
.tbl dt { font-weight: 700; color: var(--color-main); }
.company__boss { position: absolute; right: 0.5em; bottom: 0.6em; z-index: 2; width: auto; height: 22%; }

.tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5em; }
.tab {
  padding: 0.6em 0.4em; font: inherit; font-weight: 700; line-height: 1.3; cursor: pointer;
  color: var(--color-on-dark); background: transparent; border: 2px solid var(--color-on-dark); border-radius: var(--radius-s);
  transition: background var(--dur-hover), color var(--dur-hover);
}
.tab.is-on { color: var(--color-ink); background: var(--color-yellow); border-color: var(--color-yellow); }
.rq { display: grid; gap: 0.9em; }
.rq__row { display: grid; gap: 0.35em; }
.rq dt { position: relative; isolation: isolate; padding: 0.15em 0.6em; font-weight: 700; }
.rq dd { padding-inline: 0.3em; line-height: 1.75; }
.rq[data-job="1"] .job-2, .rq[data-job="2"] .job-1 { display: none; }
.rq__pop { font-weight: 700; color: var(--color-main); }
.sub { font-size: max(var(--fs-min), 0.85em); }

.card--form { padding: 1.3em 1.1em; }
.form__fields { display: grid; gap: 1.1em; }
.field__opt { padding: 0.1em 0.5em; font-size: var(--fs-min); line-height: 1.4; color: var(--color-main); border: 1px solid var(--color-main); border-radius: var(--radius-s); }

.copy__line, .scribble__ring, .hand-en__line, .hd__line, .dd { animation: jitter var(--jitter) step-end infinite; }
@keyframes jitter {
  0%   { translate: 0.02em -0.012em; rotate: 0.4deg; }
  25%  { translate: -0.016em 0.016em; rotate: -0.5deg; }
  50%  { translate: 0.012em 0.02em; rotate: 0.3deg; }
  75%  { translate: -0.02em -0.016em; rotate: -0.3deg; }
}
.copy .pf-line-draw { --pf-delay: 1100ms; --pf-dur: 700ms; --pf-ease: steps(6); }
.scribble .pf-line-draw { --pf-delay: 1300ms; --pf-dur: 700ms; --pf-ease: steps(6); }
.hd__line .pf-line-draw { --pf-delay: 400ms; --pf-dur: 700ms; --pf-ease: steps(6); }
.copy .pf-char-in { --pf-dur: 300ms; --pf-step: 55ms; --pf-delay: 100ms; }
.fv__worker.pf-chara-idle { --pf-dur: 900ms; --pf-amp: 2px; }

@media (min-width: 960px) {
  .rail { overflow: hidden; background: var(--bg-paper), var(--color-pale); }
  .rail--left::after {
    content: "TOEI SERVICE"; position: absolute; left: 0.1em; top: 0; writing-mode: vertical-rl;
    font-family: var(--font-en); font-weight: 700; font-size: min(120px, 6vw); line-height: 1; color: var(--color-blue-pale); pointer-events: none;
  }
  .rail-logo { position: relative; z-index: 1; translate: clamp(0px, 12vw - 120px, 64px) 0; }
  
  @media (max-width: 1199px) { .rail--left::after { content: none; } }
  .rail .dd { --dd: 96px; }
  .dd--rail1 { right: 14%; top: 14%; }
  .dd--rail2 { left: 22%; bottom: 12%; }
  .dd--rail3 { right: 18%; bottom: 26%; width: 64px; height: 64px; }
  .dd--rail4 { left: 12%; top: 16%; width: 140px; }
  .dd--rail5 { right: 14%; bottom: 14%; }
  .dd--rail6 { left: 18%; bottom: 30%; width: 70px; height: 70px; }
}

@media (min-height: 860px) {
  .fv__row { grid-template-columns: minmax(0, 1fr) 50%; }
  .fv__worker { max-height: 46dvh; }
}
@media (max-height: 620px) {
  .fv__worker { max-height: 30dvh; }
  .copy { font-size: calc(var(--fs-copy) * 0.88); }
}