:root {
  --ink: #171716;
  --paper: #f3f0eb;
  --paper-deep: #e2d9ce;
  --beige: #c8b8a9;
  --beige-deep: #a78f7b;
  --muted: #888078;
  --line: rgba(25, 25, 24, .18);
  --white-line: rgba(244, 241, 236, .2);
  --serif: 'DM Serif Display', 'Noto Serif JP', serif;
  --sans: 'Noto Sans JP', sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; padding: 9px 13px; background: var(--paper); color: var(--ink); font-size: 11px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.job-header { display: flex; position: relative; z-index: 10; align-items: center; justify-content: space-between; min-height: 82px; padding: 0 4vw; border-bottom: 1px solid var(--white-line); background: var(--ink); color: var(--paper); }
.job-wordmark { display: inline-grid; grid-template-columns: auto 13px auto; align-items: center; width: max-content; color: currentColor; font-weight: 800; font-size: 13px; letter-spacing: -.07em; line-height: .72; }
.job-wordmark i { height: 3px; margin: 0 2px; background: var(--beige); transform: skewX(-28deg); }
.job-wordmark em { grid-column: 1 / -1; margin-top: 5px; color: currentColor; font-family: var(--sans); font-size: 6px; font-style: normal; letter-spacing: .18em; line-height: 1; }
.job-header nav { display: flex; gap: 29px; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.job-header nav a { position: relative; padding: 8px 0; }
.job-header nav a::after { position: absolute; bottom: 2px; left: 0; width: 100%; height: 1px; background: var(--beige); content: ''; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.job-header nav a:hover::after, .job-header nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.job-hero { position: relative; min-height: min(850px, calc(100svh - 82px)); padding: clamp(65px, 9.2vw, 142px) 7vw 40px; overflow: hidden; background: var(--ink); color: var(--paper); }
.job-hero::before { position: absolute; inset: 0; opacity: .55; content: ''; pointer-events: none; background-image: linear-gradient(115deg, transparent 0 30%, rgba(244,241,236,.14) 30.05% 30.14%, transparent 30.19% 100%), linear-gradient(115deg, transparent 0 70%, rgba(244,241,236,.1) 70.05% 70.14%, transparent 70.19% 100%); }
.job-hero::after { position: absolute; z-index: 0; right: -18vw; bottom: -25vw; width: 65vw; height: 65vw; border: 1px solid rgba(244,241,236,.12); border-radius: 50%; content: ''; }
.job-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(400px, .72fr); gap: clamp(35px, 7vw, 120px); align-items: end; max-width: 1450px; min-height: 590px; margin: 0 auto; }
.job-hero-copy { position: relative; z-index: 2; padding-bottom: 28px; }
.eyebrow { margin: 0; color: var(--beige); font-size: 9px; font-weight: 700; letter-spacing: .17em; line-height: 1.5; }
.job-number { margin: clamp(55px, 8.5vw, 112px) 0 19px; color: rgba(244,241,236,.5); font-family: var(--serif); font-size: 13px; letter-spacing: .08em; }
h1, h2 { margin: 0; letter-spacing: -.07em; }
h1 { max-width: 780px; font-family: var(--sans); font-size: clamp(55px, 5.3vw, 84px); font-weight: 800; line-height: .97; }
h1 em { color: var(--beige); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.05em; }
h2 { font-family: var(--sans); font-size: clamp(43px, 5vw, 78px); font-weight: 800; line-height: 1.04; }
h2 em { color: var(--beige-deep); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.045em; }
.job-lead { max-width: 485px; margin: 31px 0 0; color: rgba(244,241,236,.78); font-size: 13px; font-weight: 500; line-height: 2.1; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 23px; margin-top: 39px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 48px; min-width: 215px; padding: 17px 19px; font-size: 11px; font-weight: 700; transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.button b, .text-link b, .map-link b, .details-apply b, .environment-copy a b, .instagram-link b { font-size: 17px; font-weight: 400; }
.button-dark { background: var(--paper); color: var(--ink); }
.button-dark:hover, .button-dark:focus-visible { background: var(--beige); transform: translateX(6px); }
.text-link { display: inline-flex; align-items: center; gap: 20px; padding-bottom: 4px; border-bottom: 1px solid rgba(244,241,236,.65); color: var(--paper); font-size: 10px; font-weight: 700; }
.hero-image { position: relative; z-index: 1; align-self: stretch; min-height: 570px; margin: 0; overflow: hidden; background: #312f2e; }
.hero-image::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.4), transparent 45%); content: ''; pointer-events: none; }
.hero-image::after { position: absolute; z-index: 2; top: 14px; right: 14px; bottom: 14px; left: 14px; border: 1px solid rgba(244,241,236,.36); content: ''; pointer-events: none; }
.hero-image img { width: 100%; height: 100%; min-height: 570px; object-fit: cover; filter: saturate(.7) contrast(1.03) brightness(.84); animation: slow-drift 18s ease-in-out infinite alternate; }
.hero-image figcaption { position: absolute; z-index: 3; right: 24px; bottom: 20px; margin: 0; color: var(--paper); font-size: 8px; font-weight: 700; letter-spacing: .13em; writing-mode: vertical-rl; }
.hero-ghost { position: absolute; z-index: 0; right: 39vw; bottom: -4.8vw; color: rgba(244,241,236,.045); font-family: var(--sans); font-size: clamp(100px, 18vw, 300px); font-weight: 800; letter-spacing: -.1em; line-height: .8; pointer-events: none; }
.hero-footer { position: absolute; z-index: 2; bottom: 23px; left: 7vw; margin: 0; color: rgba(244,241,236,.52); font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.section { padding: clamp(83px, 10vw, 150px) 8vw; }
.section-meta { display: flex; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.details-intro, .fit-intro { display: grid; grid-template-columns: 1fr .56fr; gap: 8vw; align-items: end; padding-top: clamp(59px, 8vw, 110px); }
.priority-note { margin: 0; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); color: #504a44; font-size: 12px; font-weight: 700; line-height: 1.85; }
.job-spec-list { max-width: 1180px; margin: 71px 0 0 auto; border-top: 1px solid var(--line); }
.job-spec-list div { display: grid; grid-template-columns: 27% 1fr; gap: 25px; padding: 22px 3px; border-bottom: 1px solid var(--line); }
.job-spec-list dt { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; }
.job-spec-list dd { max-width: 650px; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.95; }
.details-actions { display: flex; justify-content: space-between; align-items: center; gap: 25px; max-width: 1180px; margin: 37px 0 0 auto; }
.map-link { display: inline-flex; align-items: center; gap: 18px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 700; }
.details-apply { display: inline-flex; align-items: center; gap: 25px; padding: 15px 19px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; transition: transform .3s var(--ease), background .3s var(--ease); }
.details-apply:hover, .details-apply:focus-visible { background: #383633; transform: translateX(6px); }
.job-fit { background: var(--ink); color: var(--paper); }
.job-fit .section-meta { border-color: var(--white-line); color: rgba(244,241,236,.54); }
.job-fit .eyebrow { color: var(--beige); }
.job-fit h2 em { color: var(--beige); }
.fit-intro > p { max-width: 390px; margin: 0; color: rgba(244,241,236,.66); font-size: 12px; line-height: 2.05; }
.fit-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1220px; margin: 74px auto 0; padding: 0; list-style: none; border-top: 1px solid var(--white-line); border-left: 1px solid var(--white-line); }
.fit-list li { min-height: 250px; padding: 25px; border-right: 1px solid var(--white-line); border-bottom: 1px solid var(--white-line); transition: background .4s var(--ease); }
.fit-list li:hover { background: #282725; }
.fit-list span { display: block; color: var(--beige); font-family: var(--serif); font-size: 28px; }
.fit-list p { max-width: 260px; margin: 94px 0 0; color: rgba(244,241,236,.88); font-size: 13px; line-height: 2; }
.environment { position: relative; overflow: hidden; background: var(--paper-deep); }
.environment::after { position: absolute; right: -13vw; bottom: -17vw; width: 43vw; height: 43vw; border: 1px solid rgba(25,25,24,.12); border-radius: 50%; content: ''; }
.environment-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr .62fr; gap: 10vw; align-items: center; max-width: 1220px; margin: 0 auto; }
.environment-copy > p:last-of-type { max-width: 430px; margin: 30px 0; color: #544d46; font-size: 13px; line-height: 2.1; }
.environment-copy a { display: inline-flex; gap: 18px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 700; }
.environment-image { position: relative; width: min(100%, 400px); margin: 0 0 0 auto; }
.environment-image::before { position: absolute; z-index: -1; top: -18px; right: -18px; width: 100%; height: 100%; border: 1px solid rgba(25,25,24,.24); content: ''; }
.environment-image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: saturate(.77) contrast(.95); }
.environment-image figcaption { margin-top: 13px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.job-cta { display: grid; grid-template-columns: 1fr .72fr; gap: 9vw; padding: clamp(85px, 11vw, 160px) 8vw; background: var(--beige); color: var(--ink); }
.job-cta .eyebrow { color: #695d52; }
.job-cta h2 { margin-top: 18px; }
.job-cta p:last-of-type { max-width: 410px; margin: 0 0 30px; color: #514a43; font-size: 12px; line-height: 2.05; }
.button-light { background: var(--ink); color: var(--paper); }
.button-light:hover, .button-light:focus-visible { background: #383633; transform: translateX(6px); }
.instagram-link { display: inline-flex; align-items: center; gap: 16px; margin: 22px 0 0; padding-bottom: 3px; border-bottom: 1px solid rgba(25,25,24,.65); font-size: 10px; font-weight: 700; }
.job-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 38px 4vw; background: var(--ink); color: rgba(244,241,236,.68); font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.job-footer .job-wordmark { color: var(--paper); }
.job-footer > a:last-child { padding-bottom: 3px; border-bottom: 1px solid currentColor; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--beige); outline-offset: 4px; }
@keyframes slow-drift { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@media (max-width: 1080px) {
  .job-header { min-height: 72px; padding: 0 6vw; }
  .job-hero { min-height: auto; padding: 70px 6vw 57px; }
  .job-hero-grid { grid-template-columns: 1fr; gap: 48px; min-height: auto; }
  .job-hero-copy { padding-bottom: 0; }
  .job-number { margin-top: 53px; }
  h1 { max-width: 740px; font-size: clamp(55px, 8.4vw, 80px); }
  .hero-image { width: min(86%, 620px); min-height: 440px; margin-left: auto; }
  .hero-image img { min-height: 440px; }
  .hero-footer { position: static; margin: 36px 0 0; }
  .hero-ghost { right: -5vw; bottom: 2vw; }
  .section { padding-right: 6vw; padding-left: 6vw; }
  .details-intro, .fit-intro, .environment-grid, .job-cta { grid-template-columns: 1fr; gap: 40px; }
  .details-intro, .fit-intro { padding-top: 53px; }
  .job-spec-list, .details-actions { margin-left: 0; }
  .environment-image { margin-left: 0; }
}
@media (max-width: 680px) {
  .job-header nav { gap: 14px; font-size: 8px; letter-spacing: .05em; }
  .job-header nav a:nth-child(2) { display: none; }
  .job-hero { padding-top: 58px; }
  h1 { font-size: clamp(48px, 13.5vw, 66px); line-height: .98; }
  h2 { font-size: clamp(43px, 12.7vw, 60px); }
  .job-lead { margin-top: 24px; font-size: 12px; line-height: 2; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 21px; margin-top: 30px; }
  .hero-image { width: 100%; min-height: 360px; }
  .hero-image img { min-height: 360px; }
  .hero-image::after { top: 11px; right: 11px; bottom: 11px; left: 11px; }
  .hero-ghost { right: -25vw; bottom: 8vw; font-size: 47vw; }
  .section-meta { font-size: 8px; }
  .priority-note { font-size: 11px; }
  .job-spec-list { margin-top: 48px; }
  .job-spec-list div { grid-template-columns: 1fr; gap: 7px; padding: 17px 0; }
  .details-actions { align-items: flex-start; flex-direction: column-reverse; margin-top: 27px; }
  .details-apply { width: 100%; }
  .fit-list { grid-template-columns: 1fr; margin-top: 48px; }
  .fit-list li { min-height: 0; padding: 20px; }
  .fit-list p { margin-top: 30px; }
  .environment-image { width: 84%; margin-left: auto; }
  .job-cta { padding-right: 6vw; padding-left: 6vw; }
  .job-footer { align-items: flex-start; flex-direction: column; padding: 33px 6vw; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }