:root {
  color-scheme: light;
  --ink: #141616;
  --paper: #fff;
  --rule: #838787;
  --soft-rule: #c9cccc;
  --gutter: clamp(24px, 5.85vw, 84px);
  --header-height: 132px;
  --jp: 游ゴシック体, "Yu Gothic", YuGothic, "Hiragino Sans", sans-serif;
  --en: "Helvetica Neue", Helvetica, sans-serif;
  --body-size: 16px;
  --body-line: 32px;
  --body-spacing: 1.2px;
  --subheading-size: 22px;
  --subheading-line: 44px;
  --subheading-spacing: 1.65px;
  --intro-heading-size: 27px;
  --intro-heading-line: 50px;
  --nav-size: 15px;
  --nav-line: 25.3846px;
  --action-size: 17px;
  --action-line: 20px;
  --caption-size: 14px;
  --caption-line: 28px;
  --en-label-size: 16px;
  --en-label-line: 27.0769px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 300 var(--body-size)/var(--body-line) var(--jp);
  letter-spacing: var(--body-spacing);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p, figure, dl, dd, ol { margin: 0; }
h1, h2, h3, strong { font-weight: 700; }
a { color: inherit; text-underline-offset: .27em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible, #main:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
section[id] { scroll-margin-block-start: 24px; }
address { font-style: normal; }

.shell { width: min(1272px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }

.skip-link {
  position: absolute;
  inset: 12px auto auto 12px;
  z-index: 5;
  padding: 8px 16px;
  color: #151616;
  background: #fff;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.site-header {
  --nav-unavailable: #515656;
  position: relative;
  z-index: 2;
  color: var(--ink);
  background: #fff;
}

.header-layout {
  min-height: var(--header-height);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding-block: 15px;
}

.page-top .site-header,
.page-recruit .site-header {
  --nav-unavailable: #e0e3e3;
  position: absolute;
  inset: 0 0 auto;
  color: #fff;
  background: linear-gradient(180deg, #0e1113f5, #0e1113d4 65%, #0e111350);
}

.wordmark {
  flex: none;
  font-size: clamp(19px, 2.05vw, 30px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .07em;
  text-decoration: none;
}

.footer-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 36px);
}

.desktop-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 8px clamp(6px, 1.1vw, 16px);
  padding-block-start: 4px;
  border-block-start: 1px solid currentColor;
  font-weight: 700;
  font-size: var(--nav-size);
  line-height: var(--nav-line);
  letter-spacing: .035em;
}
.desktop-nav > a:not(.button), .desktop-nav > .nav-unavailable {
  min-height: 44px;
  padding-block-start: 11px;
}
.desktop-nav .nav-unavailable {
  display: grid;
  justify-items: center;
}
.nav-unavailable { color: var(--nav-unavailable); }
.nav-unavailable small {
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  font-weight: 600;
  letter-spacing: .04em;
}
.desktop-nav .nav-contact {
  min-height: 44px;
  padding-inline: clamp(10px, 1.55vw, 22px);
}
.desktop-nav > a:not(.button), .footer-nav a { text-decoration: none; }
.desktop-nav > a:not(.button):is(:hover, [aria-current]), .footer-nav a:is(:hover, [aria-current]) {
  text-decoration: underline;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .65em;
  min-height: 48px;
  padding: 10px 23px;
  border: 1px solid currentColor;
  font: 700 var(--action-size)/var(--action-line) var(--jp);
  letter-spacing: .06em;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s, color .18s;
}
.button:hover { text-decoration: none; }
.site-header .nav-contact, .button-dark {
  color: #fff;
  background: #111212;
  border-color: #777;
}
.nav-contact:hover, .button-dark:hover { background: #343737; }
.button-outline { color: #fff; background: #11121245; }
.button-outline:hover { color: #111212; background: #fff; }
.button-dark:focus-visible, .nav-contact:focus-visible { outline-color: #111212; }
.image-panel .button:focus-visible, .page-top .nav-contact:focus-visible,
.page-recruit .nav-contact:focus-visible { outline-color: #fff; }
.mobile-menu { display: none; }

.image-panel {
  isolation: isolate;
  position: relative;
  display: grid;
  align-items: center;
  color: #fff;
  background: #151a1b;
  overflow: hidden;
}

.hero-art {
  position: absolute;
  z-index: -2;
  inset: 0 0 0 30%;
  pointer-events: none;
}

.image-panel::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, #14191a 0%, #14191a 23%, #14191ab5 45%, #14191a11 76%);
}

.art { display: block; width: 100%; height: 100%; overflow: hidden; }

.hero-content { padding-block: 35px; }
.top-hero { min-height: clamp(535px, 49.4vw, 710px); }
.top-hero .hero-content { padding-block: calc(var(--header-height) + 50px) 60px; }

.top-hero h1 {
  font-size: var(--intro-heading-size);
  line-height: var(--intro-heading-line);
  letter-spacing: .055em;
  text-wrap: balance;
  max-width: 19em;
}

.top-intro {
  margin-block-start: 17px;
  font-size: 17px;
  line-height: 42px;
  font-weight: 300;
  letter-spacing: 1px;
}

.hero-actions { display: flex; gap: 22px; margin-block-start: 30px; }
.hero-actions .button { min-width: 205px; min-height: 58px; }

.image-note {
  position: absolute;
  inset: auto 12px 10px auto;
  padding: 2px 6px;
  color: #fff;
  background: #111212bb;
  font: 600 var(--caption-size)/var(--caption-line) var(--jp);
  letter-spacing: .035em;
}

.top-sections { padding-block: clamp(48px, 5.4vw, 78px) clamp(52px, 6.5vw, 94px); }
.top-sections section + section { margin-block-start: clamp(46px, 6vw, 86px); }

.rule-heading { margin-block-end: 19px; padding-block-end: 8px; border-block-end: 1px solid var(--rule); }
.top-heading { font: 700 28px/47.3846px var(--jp); letter-spacing: 1px; }
.sub-heading { font: 700 var(--subheading-size)/var(--subheading-line) var(--jp); letter-spacing: var(--subheading-spacing); }

.work-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-types > div { padding-inline: 30px; }
.work-types > div:first-child { padding-inline-start: 0; }
.work-types > div:last-child { padding-inline-end: 0; }
.work-types > div + div { border-inline-start: 1px solid var(--soft-rule); }
.work-types h3, .processes h3 {
  font-size: var(--subheading-size);
  line-height: var(--subheading-line);
}
.top-card-copy { font: 600 20px/33.8462px var(--jp); letter-spacing: 1px; }
.top-recruit-copy { font: 600 20px/33.8462px var(--jp); letter-spacing: 1px; }

.text-link {
  display: inline-flex;
  align-items: baseline;
  gap: .6em;
  min-height: 44px;
  margin-block-start: 12px;
  padding-block: 5px;
  font-size: var(--action-size);
  line-height: var(--action-line);
  font-weight: 600;
}

.photo-grid { display: grid; gap: clamp(14px, 2.1vw, 30px); }
.photo-grid-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-grid-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-frame {
  position: relative;
  aspect-ratio: 1.95;
  overflow: hidden;
  background: #242728;
}
.photo figcaption {
  margin-block-start: 5px;
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  font-weight: 700;
}

.recruit-banner { min-height: clamp(232px, 22vw, 320px); }
.recruit-banner .hero-art { inset-inline-start: 39%; }
.recruit-banner .hero-content { padding-block: 32px 44px; }
.recruit-banner .button { margin-block-start: 20px; }

.top-company { padding-block: clamp(42px, 4.7vw, 68px); }

.key-values > div {
  display: grid;
  grid-template-columns: minmax(100px, 21%) minmax(0, 1fr);
  gap: clamp(10px, 2.4vw, 35px);
  padding: 7px 12px;
  border-block-end: 1px solid var(--soft-rule);
}
.key-values, .capacity-table {
  font-size: var(--caption-size);
  line-height: var(--caption-line);
}
.key-values dt { font-weight: 700; }

.contact-band { padding-block: 32px 38px; background: #ededed; }

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 0;
  margin-block-start: 17px;
  font: 700 var(--caption-size)/var(--caption-line) var(--en);
  letter-spacing: .025em;
}
.contact-links > div {
  display: flex;
  align-items: center;
  gap: .75em;
  padding-inline: clamp(12px, 3.3vw, 47px);
}
.contact-links > div:first-child { padding-inline-start: 0; }
.contact-links > div + div { border-inline-start: 1px solid #8c8e8e; }
.contact-links span { min-width: 2.2em; }
.contact-links a { overflow-wrap: anywhere; text-decoration: none; }
.contact-links a:hover { text-decoration: underline; }
.mail-icon { flex: none; }
.contact-action { display: flex; width: min(100%, 300px); margin: 22px auto 0; }

.site-footer { padding-block: 35px; color: #fff; background: #242626; }
.site-footer .wordmark { font-size: clamp(18px, 1.85vw, 27px); }
.footer-layout { display: flex; align-items: center; gap: clamp(20px, 4.2vw, 60px); }
.footer-address {
  flex: 1;
  padding-inline: clamp(16px, 3.1vw, 44px);
  border-inline: 1px solid #b9baba;
  font: 300 13px/25px var(--jp);
  letter-spacing: .39px;
  overflow-wrap: anywhere;
}
.footer-address a { text-decoration: none; }
.footer-address a:hover { text-decoration: underline; }
.footer-nav {
  flex: none;
  font: 300 13px/25px var(--jp);
  letter-spacing: .39px;
}

.footer-nav a:first-child { font: 400 14px/26.9231px var(--en); letter-spacing: .42px; }

.subhero { min-height: clamp(300px, 29.6vw, 426px); }
.page-recruit .subhero { min-height: clamp(455px, 42.6vw, 614px); }
.page-recruit .subhero .hero-content { padding-block-start: calc(var(--header-height) + 25px); }
.subhero .hero-art { inset-inline-start: 27%; }

.subhero h1 {
  font-size: var(--intro-heading-size);
  line-height: var(--intro-heading-line);
  letter-spacing: .13em;
}
.subhero p {
  margin-block-start: 12px;
  font: 600 var(--en-label-size)/var(--en-label-line) var(--en);
  letter-spacing: .32em;
}

.subpage { padding-block: clamp(38px, 4.5vw, 65px); }
.with-section-nav {
  display: grid;
  grid-template-columns: minmax(160px, 21%) minmax(0, 1fr);
  column-gap: clamp(20px, 4vw, 58px);
}
.section-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  font: 300 var(--nav-size)/var(--nav-line) var(--jp);
  letter-spacing: 1px;
}
.section-nav a { padding-block: 3px; }
.section-nav a:hover { color: #505353; }

.business-intro h2 { font: 700 var(--intro-heading-size)/var(--intro-heading-line) var(--jp); letter-spacing: 2.025px; }
.business-intro p { margin-block-start: 12px; }
.subsection + .subsection, .business-intro + .subsection { margin-block-start: clamp(28px, 3.3vw, 47px); }
.business-content > .subsection { margin-block-start: clamp(34px, 4vw, 57px); }
.subsection .rule-heading { margin-block-end: 12px; padding-block-end: 5px; }

.processes { padding: 0; list-style: none; }
.processes > li {
  display: grid;
  grid-template-columns: 40px minmax(130px, 24%) minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 10px 5px;
  border-block-end: 1px solid var(--soft-rule);
}
.processes > li:first-child { padding-block-start: 2px; }
.processes > li > span { font: 600 var(--en-label-size)/var(--en-label-line) var(--en); text-align: center; }
.processes h3 { padding-inline-start: 15px; border-inline-start: 1px solid var(--rule); }

.capacity-table { width: 100%; border-collapse: collapse; text-align: start; }
.capacity-table th, .capacity-table td { padding: 5px 14px; border: 1px solid var(--soft-rule); text-align: start; }
.capacity-table thead { background: #e8e8e8; }
.capacity-table thead th:first-child { width: 42%; }
.capacity-table td { font-family: var(--en); }
.detail-note { margin-block-start: 6px; font-size: var(--caption-size); line-height: var(--caption-line); }
.products-note { text-align: center; }

.equipment-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.equipment-list > div { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }

.recruit-work > div { grid-template-columns: minmax(80px, 22%) minmax(0, 1fr); }
.recruit-work dd, .recruit-requirements dd {
  padding-inline-start: clamp(9px, 2vw, 26px);
  border-inline-start: 1px solid var(--soft-rule);
}
.recruit-work + .photo-grid { margin-block-start: 20px; }
.requirements-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 14px; }
.badge {
  display: inline-block;
  padding: 4px 10px;
  color: #262626;
  background: #e4e4e4;
  font-weight: 700;
  font-size: var(--caption-size);
  line-height: var(--caption-line);
}
.badge-dark { color: #fff; background: #525656; }
.recruit-requirements { margin-block-start: 12px; border-block-start: 1px solid var(--soft-rule); }
.recruit-requirements > div { grid-template-columns: minmax(107px, 35%) minmax(0, 1fr); padding-block: 4px; }
.recruit-requirements dt, .recruit-requirements dd { font: 300 var(--caption-size)/var(--caption-line) var(--jp); letter-spacing: 1.2px; }

@media (max-width: 950px) {
  .footer-layout { flex-wrap: wrap; }
  .footer-address { padding-inline-end: 0; border-inline-end: 0; }
  .footer-nav { width: 100%; padding-block-start: 12px; border-block-start: 1px solid #969898; }
}

@media (max-width: 767px) {
  :root {
    --gutter: clamp(16px, 5.6vw, 28px);
    --header-height: 65px;
    --body-size: 13.52px;
    --body-line: 27.04px;
    --body-spacing: 1.014px;
    --subheading-size: 18.72px;
    --subheading-line: 37.44px;
    --subheading-spacing: 1.404px;
    --intro-heading-size: 18.72px;
    --intro-heading-line: 37.44px;
    --nav-size: 15.6px;
    --nav-line: 26.4px;
    --action-size: 15.6px;
    --action-line: 20.8px;
    --caption-size: 13.52px;
    --caption-line: 27.04px;
    --en-label-size: 13.52px;
    --en-label-line: 22.88px;
  }

  .header-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-block: 0;
  }
  .wordmark { font-size: clamp(16px, 4.6vw, 23px); }
  .page-top .site-header, .page-recruit .site-header { position: relative; background: #202323; }
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu summary {
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    list-style: none;
  }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary span { width: 25px; height: 1.5px; background: currentColor; }
  .mobile-menu[open] summary span:first-child { transform: translateY(6.5px) rotate(45deg); }
  .mobile-menu[open] summary span:nth-child(2) { visibility: hidden; }
  .mobile-menu[open] summary span:last-child { transform: translateY(-6.5px) rotate(-45deg); }
  .mobile-menu nav {
    --nav-unavailable: #d4d7d7;
    display: grid;
    position: absolute;
    inset: 100% 0 auto;
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px var(--gutter) 18px;
    color: #fff;
    background: #202323;
    border-block-start: 1px solid #777;
    font-size: var(--nav-size);
    line-height: var(--nav-line);
  }
  .mobile-menu nav a, .mobile-menu .nav-unavailable {
    min-height: 44px;
    padding: 8px 0;
    border-block-end: 1px solid #777;
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-menu .nav-unavailable {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mobile-menu nav a[aria-current] { text-decoration: underline; }
  .mobile-menu nav .button { margin-block-start: 12px; padding-inline: 12px; }
  .mobile-menu .nav-contact:focus-visible { outline-color: #fff; }

  .top-hero { min-height: clamp(354px, 98vw, 500px); }
  .top-hero .hero-content { align-self: end; padding-block: 45px 56px; }
  .hero-art, .subhero .hero-art { inset-inline-start: 0; }
  .image-panel::before { background: linear-gradient(90deg, #111617e8, #11161766 67%, #11161722); }
  .top-hero::before { background: linear-gradient(0deg, #101415f2, #10141580 72%, #10141514); }
  .top-hero h1 {
    letter-spacing: .045em;
    text-wrap: initial;
  }
  .top-intro { margin-block-start: 11px; font-size: 13.52px; line-height: 31.2px; letter-spacing: 1.014px; }
  .hero-actions { gap: 10px; margin-block-start: 15px; }
  .hero-actions .button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 5px; }
  .button { min-height: 44px; padding: 8px 15px; }
  .image-note { inset: auto 8px 7px auto; }

  .top-sections { padding-block: 28px 34px; }
  .top-sections section + section { margin-block-start: 29px; }
  .top-heading { font-size: 20.8px; line-height: 35.2px; letter-spacing: 1.014px; }
  .rule-heading { margin-block-end: 12px; padding-block-end: 5px; }
  .work-types { grid-template-columns: 1fr; }
  .work-types > div { padding: 6px 0 8px; }
  .work-types > div + div { border-inline-start: none; border-block-start: 1px solid var(--soft-rule); }
  .top-card-copy { font-size: 15.6px; line-height: 26.4px; letter-spacing: 1.014px; }
  .top-recruit-copy { font-size: 13.52px; line-height: 22.88px; letter-spacing: 1.014px; }
  .text-link { margin-block-start: 5px; }

  .photo-grid { gap: 13px; }
  .photo-grid-pair { grid-template-columns: 1fr; }
  .photo-grid-trio { gap: 8px; }
  .photo-grid-trio .photo-frame { aspect-ratio: 1; }
  .photo-grid-trio .photo .image-note { display: none; }

  .recruit-banner { min-height: 193px; }
  .recruit-banner .hero-art { inset-inline-start: 25%; }
  .recruit-banner .hero-content { padding-block: 21px 33px; }
  .recruit-banner .button { margin-block-start: 13px; }
  .top-company { padding-block: 27px; }
  .key-values > div { padding: 5px 4px; }
  .contact-band { padding-block: 25px 28px; }
  .contact-links { flex-direction: column; gap: 8px; margin-block-start: 12px; }
  .contact-links > div, .contact-links > div + div { padding-inline: 0; border-inline-start: 0; min-height: 29px; }

  .site-footer { padding-block: 26px; }
  .footer-layout { display: grid; gap: 13px; }
  .footer-address { padding-inline: 0; border: 0; font-size: 13.52px; line-height: 20.8px; letter-spacing: 1.014px; }
  .footer-nav { justify-content: space-between; gap: 10px; font-size: 13.52px; line-height: 20.8px; letter-spacing: 1.014px; }
  .footer-nav a { min-height: 36px; padding-block: 6px; }
  .footer-nav a:first-child { font-size: 13.52px; line-height: 20.8px; letter-spacing: 1.014px; }

  .subhero, .page-recruit .subhero { min-height: clamp(199px, 56vw, 320px); }
  .page-recruit .subhero .hero-content { padding-block-start: 35px; }
  .subhero p { margin-block-start: 6px; }
  .subpage { padding-block: 14px 30px; }
  .with-section-nav, .equipment-layout { grid-template-columns: 1fr; row-gap: 18px; }
  .section-nav { gap: 0; align-items: stretch; letter-spacing: 1.014px; }
  .section-nav a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    min-height: 41px;
    padding-inline: 5px;
    border-block-end: 1px solid var(--soft-rule);
    text-decoration: none;
  }
  .section-nav a:hover { text-decoration: underline; }
  .business-content .section-nav a::after { content: "→" / ""; }

  .business-intro h2 { letter-spacing: 1.404px; }
  .business-intro p { margin-block-start: 6px; }
  .desktop-break { display: none; }

  .processes > li { grid-template-columns: 32px minmax(0, 1fr); gap: 0 7px; padding: 6px 1px; }
  .processes > li > span { grid-row: span 2; }
  .processes h3 { padding-inline-start: 0; border: 0; }
  .capacity-table th, .capacity-table td { padding: 3px 8px; }
  .products-note { text-align: start; }
  .equipment-list > div { grid-template-columns: 1fr; gap: 0; }

  .recruit-requirements dt, .recruit-requirements dd { letter-spacing: 1.014px; }
  .recruit-requirements dt { font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}