.column { container-type: inline-size; }
.column .page { word-break: keep-all; overflow-wrap: anywhere; }   

.column .site-header { padding-inline: var(--gutter); border-bottom: 1px solid var(--color-line); }
.logo--text { width: auto; font-family: var(--font-en); font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: 0.02em; color: var(--color-main); }
.site-header .header-nav { gap: 8px; }
.header-nav .hb { height: 34px; padding: 0 12px; font-weight: 400; font-family: var(--font-en); color: var(--color-white); background: var(--bg-accent); border: 0; }
@media (hover: hover) { .header-nav .hb:hover { color: var(--color-white); background: var(--color-main); } }

.page.page--accent { background: var(--color-accent); color: var(--color-white); }
.page.page--steel { background: var(--color-steel); }

.hd { font-family: var(--font-head); font-size: var(--fs-head); font-weight: 700; line-height: var(--lh-head); letter-spacing: var(--ls-head); }
.hd--ed { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--color-line); }
.hd--big { font-size: var(--fs-head-big); line-height: 1.25; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--color-line); }
.hd--flat { margin-top: 0; }
.page[data-tone="dark"] .hd--ed, .page[data-tone="dark"] .hd--big { border-top-color: var(--color-on-dark-line); }
.page--accent .hd--ed { border-top-color: var(--color-on-white-line); }
.copy { font-size: var(--fs-base); line-height: var(--lh-body); }
.copy p + p { margin-top: var(--sp-1); }
.copy strong { font-weight: 700; }
.copy--14 { font-size: 14px; }
.copy--intro { margin-top: 16px; }

.disp { display: block; width: 100%; height: auto; overflow: visible; fill: currentColor; font-family: var(--font-disp); font-size: 184px; font-weight: 700; flex-shrink: 0; }
.disp--ink { fill: var(--color-main); }
.big-en { padding-top: 4px; font-family: var(--font-disp); font-weight: 700; font-size: clamp(76px, 30cqw, 144px); line-height: 0.86; letter-spacing: -0.025em; text-transform: uppercase; flex-shrink: 0; }

.cta {
  position: relative; display: flex; align-items: flex-end; flex-shrink: 0; height: var(--btn-h); padding: 0 10px 10px;
  font-family: var(--font-en); font-weight: 400; font-size: 17px; line-height: 1.5; color: var(--color-white); background: var(--bg-accent); border: 0; cursor: pointer;
  transition: background var(--dur-hover) ease-in;
}
.cta__ar { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; }
@media (hover: hover) { .cta:hover { background: var(--color-main); } }

.sway { animation: sway 0.65s steps(1, end) infinite; transform-origin: 50% 50%; }
@keyframes sway {
  0%, 100% { rotate: -1.5deg; scale: 0.995 1; }
  25% { rotate: 0.5deg; scale: 1.005 0.995; }
  50% { rotate: 1.5deg; scale: 1.005 1; }
  75% { rotate: -0.5deg; scale: 1 0.995; }
}

.orbit {
  position: absolute; inset: var(--header-h) 0 0; z-index: 0; overflow: hidden; pointer-events: none; perspective: 850px; opacity: 0.115;
  -webkit-mask-image: linear-gradient(to bottom, transparent 12%, var(--color-main) 34%, var(--color-main) 67%, transparent 90%);
  mask-image: linear-gradient(to bottom, transparent 12%, var(--color-main) 34%, var(--color-main) 67%, transparent 90%);
}
.orbit__tilt { position: absolute; left: 52%; top: 50%; width: 0; height: 0; transform: rotateZ(-24deg) rotateX(-14deg); transform-style: preserve-3d; }
.orbit__ring { position: absolute; width: 0; height: 0; transform-style: preserve-3d; animation: orbit-spin var(--orbit-dur) linear infinite; }
.page:not(.is-active) .orbit__ring { animation-play-state: paused; }
.orbit__card { --card-w: clamp(115px, 34cqw, 164px); position: absolute; left: 0; top: 0; width: var(--card-w); aspect-ratio: 5 / 7; transform-style: preserve-3d; transform: rotateY(var(--a)) translateZ(clamp(130px, 39cqw, 187px)); }
.orbit__card > img { display: block; width: 100%; height: 100%; transform: translate(-50%, -50%); backface-visibility: visible; }
.orbit__card.is-curved > img { visibility: hidden; }
.orbit__surface { position: absolute; inset: 0; transform: translate(-50%, -50%); transform-style: preserve-3d; }
.orbit__strip {
  position: absolute; top: 0; width: calc(100% / 32 + 1.5px); height: 100%; background-color: var(--color-main); background-repeat: no-repeat;
  background-size: 100% 100%, var(--card-w) 100%; backface-visibility: visible;
  transform: translateX(-50%) translateZ(calc(var(--card-w) * var(--d))) rotateY(var(--ang));
}
@keyframes orbit-spin { from { transform: rotateY(-20deg); } to { transform: rotateY(340deg); } }

.page--fv .page__inner { justify-content: flex-start; gap: 24px; }
.fv-head { position: relative; padding: 14px 0 8px; flex-shrink: 0; font-size: min(clamp(84px, 30cqw, 144px), var(--disp-h) * 0.5); }
.fv-head__type { display: grid; font-family: var(--font-disp); font-weight: 700; line-height: 0.88; letter-spacing: -0.025em; text-transform: uppercase; color: var(--color-main); white-space: nowrap; }
.fv-head__balloon { position: absolute; left: 4.3%; top: calc(14px + 0.37em); width: 39.7%; height: auto; }
.fv-body { display: grid; gap: var(--sp-g); }
.hd--fv { font-size: clamp(22px, 6.2cqw, 30px); font-weight: 900; line-height: 1.4; }
.copy--fv { font-size: clamp(16px, 4.4cqw, 20px); }
.copy--fv p + p { margin-top: 3px; }
.quote { position: relative; isolation: isolate; justify-self: start; font-size: clamp(17px, 5.2cqw, 25px); font-weight: 700; line-height: 1.5; }
.quote__brush { position: absolute; left: -4px; top: -3px; z-index: -1; width: calc(100% + 8px); height: calc(100% + 6px); color: var(--color-white); }
.cta--end { margin-top: auto; }

.page__inner--pay { gap: 20px; }
.collage { width: min(100%, calc(var(--disp-h) * 440 / 340)); position: relative; isolation: isolate; flex-shrink: 0; margin-bottom: 19px; }
.collage__type { position: relative; z-index: 4; display: block; width: 100%; height: auto; overflow: visible; fill: var(--color-main); font-family: var(--font-disp); font-size: 212px; font-weight: 700; }
.collage__ph { position: absolute; aspect-ratio: 1; height: auto; object-fit: cover; opacity: 0.28; pointer-events: none; animation: photo-shift 1.2s steps(1, end) infinite; }
.collage__ph--front { width: 29%; left: 28%; top: 25%; z-index: 3; animation-delay: -0.2s; }
.collage__ph--back { width: 22%; left: 51%; top: 43%; z-index: 1; animation-delay: -0.6s; animation-direction: reverse; }
.collage__ph--bottom { width: 18%; left: 43%; top: 62%; z-index: 2; animation-delay: -0.9s; }
@keyframes photo-shift { 0%, 100% { translate: 0 0; } 33% { translate: 2px -2px; } 66% { translate: -2px 1px; } }
.hd--pay { font-size: clamp(23px, 6.3cqw, 30px); font-weight: 400; padding-top: 18px; border-top: 1px solid var(--color-line); }
.uline { position: relative; }
.uline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 60% 35% 55% 20%; transform: rotate(-0.6deg); background: var(--color-accent); }
.pay-desc { display: grid; gap: var(--sp-p); }
.band-wrap { position: relative; }
.band { padding: 14px 64px 14px 16px; font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--color-white); background: var(--bg-accent); }
.band strong { font-size: 1.35em; font-weight: 900; white-space: nowrap; }
.band__ar { position: absolute; right: -6px; top: -12px; width: 76px; height: auto; transform: rotate(145deg); filter: brightness(0) invert(1); pointer-events: none; }

.ed-head { position: relative; flex-shrink: 0; width: min(100%, calc(var(--disp-h) * 440 / 290)); }
.ed-head__mark { position: absolute; right: 8%; top: 35%; width: 36%; height: 36%; object-fit: contain; transform: rotate(-12deg); pointer-events: none; }
.ed-head__mark--balloon { right: 3%; width: 48%; background: var(--color-accent); -webkit-mask: url("assets/img/speech-balloon.svg") center / contain no-repeat; mask: url("assets/img/speech-balloon.svg") center / contain no-repeat; }
.ed-head__mark--road { top: 42%; right: 5%; width: 40%; height: auto; aspect-ratio: 93 / 37; transform: rotate(-22deg); background: var(--color-accent); -webkit-mask: url("assets/img/promo-arrow.svg") center / contain no-repeat; mask: url("assets/img/promo-arrow.svg") center / contain no-repeat; }
.panel { align-self: flex-start; max-width: 100%; padding: 12px; font-size: 14px; line-height: 1.5; }
.panel strong { display: block; font-weight: 700; }
.panel strong + p { margin-top: 4px; }
.panel--base { color: var(--color-main); background: var(--color-base); }
.panel--ink { color: var(--color-on-dark); background: var(--color-main); }
.stat { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px; padding: 12px; font-size: 14px; line-height: 1.5; color: var(--color-main); background: var(--color-base); }
.stat__val { display: inline-flex; align-items: baseline; gap: 2px; font-size: clamp(24px, 7cqw, 32px); font-weight: 700; line-height: 1.2; }
.stat__val small { font-size: 14px; }
.tail { position: relative; flex: 0 0 clamp(44px, 8dvh, 76px); overflow: hidden; }
.tail__ar { position: absolute; right: 4px; bottom: 10%; width: min(40%, 150px); height: 85%; max-height: 110px; object-fit: contain; transform: rotate(150deg); pointer-events: none; }
.tail__ar--white { filter: brightness(0) invert(1); }
.tail__ar--ink { background: var(--color-main); -webkit-mask: url("assets/img/promo-arrow.svg") center / contain no-repeat; mask: url("assets/img/promo-arrow.svg") center / contain no-repeat; }

.page__inner--work { justify-content: flex-start; gap: 16px; }
.copy--work p + p { margin-top: 0.85em; }
.reel { position: relative; flex: 1 0 64px; margin-inline: calc(var(--gutter) * -1); overflow: hidden; }
.reel__track { position: absolute; left: 0; top: 15%; bottom: 0; display: flex; gap: 8px; width: max-content; padding-right: 8px; }
.reel__track.is-ready { animation: reel var(--reel-speed, 40s) linear infinite; }   
.page:not(.is-active) .reel__track { animation-play-state: paused; }
.reel__img { flex: 0 0 auto; width: auto; height: 100%; aspect-ratio: 1; object-fit: cover; }
@keyframes reel { to { transform: translateX(var(--reel-dist, -50%)); } }

.page__inner--company { gap: 0; }
.company-disp { width: min(100%, calc(var(--disp-h) * 440 / 290)); }
.card { position: relative; z-index: 2; width: 90%; margin: -32px 0 0 auto; padding: 18px 18px 22px; color: var(--color-main); background: var(--color-base); }
.card__ttl { font-size: 22px; font-weight: 700; line-height: 1.4; }
.facts { margin-top: 19px; font-size: 14px; line-height: 1.6; }
.facts__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); padding: 16px 0; border-top: 1px solid var(--color-line); }
.facts__row:last-child { border-bottom: 1px solid var(--color-line); }
.card .cta { margin-top: 20px; font-size: 15px; }

.page__inner--job { gap: 32px; }
.job-head { position: relative; padding-bottom: 22px; border-bottom: 3px solid var(--color-main); }
.job-head__en { font-family: var(--font-disp); font-size: clamp(72px, 23cqw, 110px); font-weight: 700; line-height: 0.9; letter-spacing: -0.025em; white-space: nowrap; }
.job-head__star { position: absolute; right: 3%; top: 8%; width: 64px; height: 64px; transform: rotate(-12deg); background: var(--color-accent); -webkit-mask: url("assets/img/star.svg") center / contain no-repeat; mask: url("assets/img/star.svg") center / contain no-repeat; }
.job-head__ttl { margin-top: 18px; font-size: 22px; font-weight: 700; line-height: 1.4; }
.job-head__ttl span { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 4px; text-underline-offset: 7px; }
.job { font-size: 14px; line-height: 1.7; }
.job__row { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: clamp(8px, 4cqw, 16px); padding-block: 22px; border-bottom: 1px solid var(--color-line); }
.job__row dt { position: relative; font-weight: 700; }   
.job__row dt::before { content: ""; position: absolute; left: 0; bottom: 100%; width: 16px; height: 3px; margin-bottom: 6px; background: var(--color-accent); }
.job__row dd { min-width: 0; overflow-wrap: anywhere; }
.job__row dd p + p { margin-top: 6px; }
.job__row--salary { margin-inline: -12px; padding-inline: 12px; background: var(--color-salary); border-bottom-color: var(--color-accent); }
.salary { display: block; font-size: clamp(19px, 5.1cqw, 24px); font-weight: 700; letter-spacing: 0; line-height: 1.6; white-space: nowrap; }
.salary small { margin-left: 3px; font-size: 14px; }
.job__list { margin-top: 4px; line-height: 1.6; }
.job__list--top0 { margin-top: 0; }
.page__inner--job > .cta { margin-top: -16px; }

.page__inner--entry { gap: var(--sp-g); }
.entry-lead { display: flex; align-items: center; gap: 18px; font-size: 18px; line-height: 1.55; }
.entry-lead__deco { width: 64px; height: 64px; filter: brightness(0) invert(1); }
#entry .form { gap: 28px; font-size: 14px; }
#entry .field { gap: 10px; min-width: 0; }
#entry .field__label { justify-content: space-between; font-size: 16px; font-weight: 400; line-height: 1.6; }
.field__note { font-size: var(--fs-min); }
#entry .field__input { height: 54px; padding: 14px 12px; line-height: 1.5; color: var(--color-on-dark); background-color: var(--color-field); border: 1px solid var(--color-field-line); }
#entry .field__input--area { height: auto; min-height: 160px; }
#entry select.field__input { padding-right: 48px; background-image: url("assets/img/select-chevron.svg"); background-position: right 16px center; background-size: 12px 8px; }
#entry .field__input::-webkit-calendar-picker-indicator { filter: invert(1); }

#entry input[type="datetime-local"] { -webkit-appearance: none; appearance: none; min-inline-size: 0; inline-size: 100%; max-inline-size: 100%; }
#entry input[type="datetime-local"]::-webkit-date-and-time-value { min-width: 0; max-width: 100%; text-align: left; }
#entry input[type="datetime-local"]::-webkit-datetime-edit { min-width: 0; max-width: 100%; padding: 0; }
.form__btn { width: 100%; text-align: left; }

@media (max-height: 780px) {
  .page--fv .page__inner { gap: 12px; }
  .fv-head { padding: 4px 0; font-size: min(clamp(76px, 25cqw, 120px), var(--disp-h) * 0.5); }
  .fv-head__balloon { top: calc(4px + 0.37em); }
  .fv-body { gap: 12px; }
  .hd--fv { font-size: clamp(21px, 5.7cqw, 27px); }
  .copy--fv { font-size: clamp(15px, 4cqw, 18px); line-height: 1.5; }
  .quote { font-size: clamp(16px, 4.8cqw, 23px); }
  .page__inner--pay { gap: 12px; }
  .collage { margin-bottom: 11px; }
  .hd--pay { font-size: clamp(21px, 5.7cqw, 26px); padding-top: 14px; }
  .pay-desc { gap: 10px; }
  .page__inner--ed { gap: 8px; }
  .copy--intro { margin-top: 8px; }
  .big-en { font-size: clamp(58px, 20cqw, 86px); }
  .page__inner--work { gap: 10px; }
  .copy--work p + p { margin-top: 0.6em; }
  .company-disp { width: min(100%, calc(30dvh * 440 / 290)); }
}

@media (min-width: 960px) {
  .stage { background: var(--color-pale) url("assets/img/pc-bg.jpg") center / cover no-repeat; }
  .rail-mark { font-family: var(--font-en); font-size: min(26px, calc((100vw - 544px) / 10.4)); font-weight: 700; line-height: 1; letter-spacing: -0.065em; color: var(--color-main); white-space: nowrap; }
  .rail-cta { display: flex; flex-direction: column; gap: 14px; width: 200px; max-width: 100%; }
  .rail-btn {
    position: relative; display: flex; align-items: flex-end; height: 66px; padding: 9px 9px 10px;
    font-family: var(--font-en); font-size: 17px; line-height: 20px; color: var(--color-white); background: var(--bg-accent);
    transition: background var(--dur-hover) ease-in;
  }
  .rail-btn .cta__ar { top: 9px; right: 9px; }
  .rail-btn:hover { background: var(--color-main); }
}

@media (max-height: 600px) {
  .tail { display: none; }
  .reel { flex-basis: 40px; }
  .copy--intro { margin-top: 0; }
  .hd--ed, .hd--big { margin-top: 0; padding-top: 10px; }
  .fv-body { gap: 8px; }
  .page--fv .page__inner { gap: 8px; }
  .card { padding: 12px 14px 14px; }
  .facts { margin-top: 10px; }
  .facts__row { padding: 9px 0; }
  .card .cta { margin-top: 12px; }
}