/* Minerva.Co — TOP
   Ported from the Claude Design prototype "Minerva TOP.dc.html" (desktop design at 1440px). */

:root {
  --bg: #0A0C0A;
  --ink: #E9E6DE;
  --muted: #9A9C94;
  --muted-light: #C9C8C0;
  --line: rgba(233, 230, 222, 0.16);
  --line-strong: rgba(233, 230, 222, 0.28);
  --hover-bg: #121712;
  --placeholder: #1a211b;
  --glow: #A6D69C;           /* soft forest green, used sparingly for highlights */

  --font-sans: "Zen Kaku Gothic New", sans-serif;
  --font-mincho: "Zen Old Mincho", serif;
  --font-cinzel: Cinzel, serif;
  --font-playfair: "Playfair Display", serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gutter: 60px;
  --col-gap: 24px;
  --shadow-text: 0 0 16px rgba(10, 12, 10, 0.8);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.intro-on { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  /* Japanese lines break only at the phrase boundaries marked with <wbr> at build time
     (src/phrase.mjs), in every browser. A phrase that still cannot fit wraps instead of overflowing. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
p, li, dd, dt, blockquote { text-wrap: pretty; }
/* Headings spread their words evenly so the last line is never one or two characters */
h1, h2, h3 { text-wrap: balance; }
html.br-fit br.br-off { display: none !important; }
.rows__name, .cols__name, .num-title__name, dt { text-wrap: balance; }
.nowrap { white-space: nowrap; }
img { display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
p, h1, h2, dl, dd { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Shared pieces ---------- */

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.brand img { width: 56px; height: 56px; }
.brand > span { font-family: var(--font-cinzel); font-size: 12px; letter-spacing: 0.24em; }
.brand--start { align-items: flex-start; }

.eyebrow {
  font-family: var(--font-playfair);
  font-size: 28px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--light { color: var(--muted-light); }

.heading {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.label {
  font-family: var(--font-cinzel);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

/* Text link with a leading rule that stretches on hover */
.line-link {
  font-family: var(--font-mincho);
  font-size: 15px;
  line-height: 44px;
  letter-spacing: 0.1em;
  color: var(--ink);
  padding-left: 84px;
  background: linear-gradient(var(--ink), var(--ink)) left center / 60px 1px no-repeat;
  transition: all 400ms var(--ease);
}
.line-link:hover { padding-left: 120px; background-size: 96px 1px; }

.btn {
  display: inline-block;
  line-height: 1.5;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.08em;
  padding: 20px 40px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  transition: all 300ms var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
/* TOP page buttons keep the line height of the original TOP design */
.recruit__actions .btn, .contact__btn { line-height: normal; }

/* Header-nav link: a small dot grows above the word on hover */
.dot-link {
  color: var(--ink);
  padding: 14px 0 12px;
  background: radial-gradient(circle, var(--ink) 2px, transparent 2.5px) center top / 0 0 no-repeat;
  transition: background-size 300ms var(--ease);
}
.dot-link:hover { background-size: 6px 6px; }

.status { display: flex; align-items: center; gap: 10px; }
.status__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.status.is-open .status__dot { background: var(--ink); }

/* ---------- Intro ---------- */

.intro { display: none; }
html.intro-on .intro,
.intro.is-fading {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 1800ms cubic-bezier(0.4, 0, 0.2, 1);
}
.intro.is-fading { opacity: 0; pointer-events: none; }
.intro__mark { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.intro__logo { width: 112px; height: 112px; opacity: 0; }
.intro__word {
  font-family: var(--font-cinzel);
  font-size: 22px;
  letter-spacing: 0.36em;
  padding-left: 0.36em;
  color: var(--ink);
  opacity: 0;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 48px var(--gutter);
  pointer-events: none;
}
.site-header__brand { pointer-events: auto; transition: opacity 300ms var(--ease); }
.site-header__brand.is-hidden { opacity: 0; }
.site-header__nav {
  pointer-events: auto;
  display: flex;
  gap: 48px;
  font-family: var(--font-cinzel);
  font-size: 14px;
  letter-spacing: 0.18em;
}

main { position: relative; z-index: 1; }

/* ---------- Fog background (hero + contact/footer) ---------- */

.fog-bg { overflow: hidden; pointer-events: none; }
.fog-bg > * { position: absolute; inset: 0; }
.fog-bg__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.4) brightness(0.66) contrast(0.96);
}
.fog-bg__tint-color { background: #2c4a3e; mix-blend-mode: color; opacity: 0.55; }
.fog-bg__tint-multiply { background: #1c3029; mix-blend-mode: multiply; opacity: 0.35; }
.fog-bg__shade {
  background: linear-gradient(180deg, rgba(10, 12, 10, 0.25) 0%, rgba(10, 12, 10, 0.4) 45%, rgba(10, 12, 10, 0.88) 100%);
}
.fog-bg__fog { width: 100%; height: 100%; transform-origin: 50% 100%; }
.fog-bg .fog-bg__grain {
  inset: -60px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.5%200%200%200%200%200.5%200%200%200%200%200.5%200%200%200%201.6%20-0.35%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
  opacity: 0.55;
}
.fog-bg__vignette {
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(10, 12, 10, 0) 55%, rgba(10, 12, 10, 0.45) 100%);
}
.fog-bg__dense {
  opacity: 0;
  background: radial-gradient(120% 90% at 50% 100%, rgba(150, 162, 154, 0.9) 0%, rgba(120, 134, 126, 0.75) 45%, rgba(70, 84, 76, 0.6) 100%);
}

/* ---------- Hero ---------- */

.hero { position: relative; height: 100svh; min-height: 720px; }
/* Fixed behind the page: copy and sections scroll over it while it fogs over and fades out. */
.hero__bg { position: fixed; inset: 0; z-index: -1; will-change: opacity; }

.hero__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding: 0 var(--gutter) 56px;
  align-content: end;
}
.hero__copy {
  grid-column: 4 / 11;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.hero__title {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.6;
  letter-spacing: 0.12em;
  font-feature-settings: 'palt' 1;
  word-break: keep-all;
}
.hero__title--en {
  font-family: var(--font-playfair);
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.375rem);
  line-height: 1.45;
  letter-spacing: 0.06em;
  font-feature-settings: normal;
}
.hero__title-indent { padding-left: 3em; }
.hero__lead {
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  line-height: 2.1;
  letter-spacing: 0.1em;
  font-feature-settings: 'palt' 1;
}

.fade-in { opacity: 0; transition: opacity 1200ms var(--ease); }
.fade-in--late { transition-delay: 400ms; }
.fade-in.is-in { opacity: 1; }

.news {
  grid-column: 8 / 13;
  grid-row: 2;
  justify-self: end;
  width: min(380px, 100%);
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.news__head { display: flex; justify-content: space-between; align-items: baseline; }
.news__title {
  font-family: var(--font-cinzel);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-shadow: var(--shadow-text);
}
.news__all {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-cinzel);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-shadow: var(--shadow-text);
}
.news__all-line { display: block; width: 24px; height: 1px; background: var(--ink); }
.news__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line-strong); }
.news__list li { border-top: 1px solid var(--line-strong); }
.news__list a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  text-shadow: 0 0 16px rgba(10, 12, 10, 0.85);
  transition: opacity 300ms;
}
.news__list a:hover { opacity: 0.7; }
.news__date {
  font-family: var(--font-playfair);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted-light);
  font-variant-numeric: tabular-nums;
}
.news__text {
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero__foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.hero__scroll {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  font-family: var(--font-cinzel);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--muted);
}
.hero__scroll:hover { color: var(--muted); }

/* ---------- Section frame ---------- */

.section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding: 0 var(--gutter) 200px;
  max-width: 1440px;
  margin: 0 auto;
}
/* Vertical section name that sticks while its section scrolls past */
.rail {
  grid-column: 1 / 3;
  align-self: start;
  position: sticky;
  top: 40vh;
  writing-mode: vertical-rl;
  font-family: var(--font-cinzel);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--muted);
}
.section__body { grid-column: 3 / 13; }

/* ---------- Philosophy ---------- */

.section--philosophy { padding: 200px var(--gutter); }
.rail--ph { grid-row: 1 / 3; }
.ph-mission {
  grid-column: 3 / 13;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--col-gap);
  align-items: end;
  padding-bottom: 96px;
  border-bottom: 1px solid var(--line);
}
.ph-mission__body { display: flex; flex-direction: column; gap: 40px; }
.ph-mission__body .line-link { align-self: flex-start; }
.ph-mission__text { display: flex; flex-direction: column; gap: 16px; }
.ph-mission__statement {
  font-family: var(--font-mincho);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.9;
  letter-spacing: 0.12em;
  font-feature-settings: 'palt' 1;
  word-break: keep-all;
}

.ph-visual {
  grid-column: 3 / 13;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--col-gap);
  margin-top: 96px;
}
.ph-visual__frame {
  grid-column: 1 / 7;
  grid-row: 1;
  align-self: start;
  position: relative;
  aspect-ratio: 2816 / 1536;
}
.ph-visual__main { position: absolute; inset: 0; overflow: hidden; background: #000; }
.ph-visual__main img { width: 100%; height: 100%; object-fit: contain; }
/* Tree diagram overlapping the lower-right of the equipment photo; drifts at its own parallax speed */
.ph-visual__overlay {
  position: absolute;
  top: 60%;
  left: 76%;
  width: 46%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg);
  outline: 12px solid var(--bg);
  will-change: transform;
}
.ph-visual__overlay img { width: 100%; height: 100%; object-fit: contain; background: var(--bg); }
.ph-visual__spacer {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
  aspect-ratio: 100 / 112;
  pointer-events: none;
}
.ph-visual__copy {
  grid-column: 1 / 5;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  width: 380px;
  max-width: 100%;
  height: 109px;
  margin-top: 48px;
  font-family: var(--font-mincho);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.1em;
  color: var(--muted);
  word-break: keep-all;
  text-align: right;
}

/* ---------- Projects ---------- */

#projects .section__body { display: flex; flex-direction: column; }
.pj-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 56px;
}
.heading-stack { display: flex; flex-direction: column; gap: 16px; }
.pj-head__lead {
  font-family: var(--font-mincho);
  font-size: 16px;
  line-height: 2.1;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: right;
}

.services {
  list-style: none;
  margin: 0 -24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.services > li { border-left: 1px solid var(--line); }
.service {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  padding: 32px 24px 40px;
  color: var(--ink);
  transition: background 400ms var(--ease);
}
.service:hover { background: var(--hover-bg); }
.service__no { font-family: var(--font-playfair); font-size: 20px; line-height: 1; color: var(--muted); }
.service__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: var(--placeholder) repeating-linear-gradient(135deg, rgba(233, 230, 222, 0.035) 0 1px, transparent 1px 14px);
}
.service__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.service__media--diagram { background: var(--bg); }
.service__en {
  font-family: var(--font-playfair);
  font-size: 24px;
  line-height: 1.3;
  min-height: 3.9em;
  hyphens: auto;
  overflow-wrap: break-word;
}
.service__ja {
  font-family: var(--font-mincho);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  min-height: 3.4em;
}
.service__more {
  font-family: var(--font-mincho);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-left: 84px;
  background: linear-gradient(var(--muted), var(--muted)) left center / 60px 1px no-repeat;
}

.llm-diagram { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.llm-diagram circle {
  fill: var(--ink);
  fill-opacity: 0.05;
  stroke: var(--ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.llm-diagram text { text-anchor: middle; dominant-baseline: central; }
.llm-diagram__ja { fill: var(--ink); font-family: var(--font-mincho); font-weight: 400; font-size: 26px; letter-spacing: 0.08em; }
.llm-diagram__en { fill: var(--muted); font-family: var(--font-cinzel); font-size: 18px; letter-spacing: 0.06em; }
.llm-diagram__ctr { fill: var(--ink); font-family: var(--font-playfair); font-weight: 400; font-size: 28px; letter-spacing: 0.01em; }

/* ---------- Company ---------- */

.company {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding-top: 128px;
  border-top: 1px solid var(--line);
}
.outline {
  margin-top: 40px;
  width: 100%;
  max-width: 760px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.outline > div {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.outline dt { font-family: var(--font-mincho); font-size: 16px; line-height: 1.85; letter-spacing: 0.1em; }
.outline dd { font-size: 16px; line-height: 1.85; letter-spacing: 0.04em; }
.company__more { margin-top: 32px; }

/* ---------- Recruit ---------- */

.recruit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 96px;
  padding-top: 128px;
  border-top: 1px solid var(--line);
}
.recruit__intro { display: flex; flex-direction: column; gap: 32px; }
.recruit__job { font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--muted); }
.recruit__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-feature-settings: 'palt' 1;
}
/* Break only between phrases, never mid-phrase */
.recruit__title span { display: inline-block; }
.recruit__lead { font-family: var(--font-mincho); font-size: 1.0625rem; line-height: 2.1; letter-spacing: 0.1em; }
.recruit__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 40px; margin-top: 16px; }
.recruit__facts { display: flex; flex-direction: column; gap: 24px; }

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.facts__item { display: flex; flex-direction: column; gap: 16px; padding: 40px 24px; }
.facts__item:first-child { padding-left: 0; }
.facts__item + .facts__item { border-left: 1px solid var(--line); }
.facts dt { font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--muted); }
.facts dd { font-size: 1rem; letter-spacing: 0.04em; }
.facts__num {
  font-family: var(--font-playfair);
  font-size: clamp(2.5rem, 1.8rem + 2.8vw, 4rem);
  line-height: 1.1;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
}
.facts__num--overtime { font-size: 61.98px; line-height: normal; padding-right: 0; font-variant-numeric: normal; }
.facts__holiday { display: flex; flex-direction: column; gap: 4px; }
/* The first line lines up with "月10時間" next to it; the second sits close under it */
.facts__holiday > span + span .facts__num { line-height: 1.1; }
.facts__salary { display: flex; flex-direction: column; gap: 8px; }
.facts__note { font-size: 0.875rem; color: var(--muted); }
.recruit__notes { font-size: 0.875rem; line-height: 1.85; letter-spacing: 0.04em; color: var(--muted); }

/* ---------- Footer area on the fog background ----------
   The footer (and the contact block or CTA above it) share one background. */

.fog-wrap { position: relative; z-index: 1; overflow: hidden; isolation: isolate; }
.fog-wrap__bg { position: absolute; inset: 0; z-index: 0; }
.fog-bg .fog-bg__fade { background: linear-gradient(180deg, var(--bg) 0%, rgba(10, 12, 10, 0) 240px); }

.contact {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: var(--shadow-text);
}
.contact__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 160px var(--gutter);
}
.contact__note { margin-top: 24px; font-size: 1rem; line-height: 1.85; letter-spacing: 0.04em; }
.contact__tel {
  font-family: var(--font-playfair);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.contact__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--muted-light);
}
.contact .status { font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--muted-light); }
.contact__btn { margin-top: 40px; text-shadow: none; }

.site-footer { position: relative; z-index: 1; }
.site-footer__inner {
  position: relative;
  z-index: 1;
  padding: 96px var(--gutter) 40px;
  max-width: 1440px;
  margin: 0 auto;
  text-shadow: var(--shadow-text);
}
.site-footer__inner--plain { padding-top: 240px; }
.site-footer__inner--cta { padding-top: 128px; }
.site-footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 64px;
  padding-bottom: 96px;
}
.site-footer__company { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 32px; }
.site-footer__company p { font-size: 0.875rem; line-height: 1.85; letter-spacing: 0.04em; color: var(--muted-light); }
.site-footer__nav {
  grid-column: 7 / 13;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-content: start;
}
.site-footer__nav a { display: flex; align-items: baseline; gap: 16px; min-height: 44px; }
.site-footer__nav .en { font-family: var(--font-cinzel); font-size: 20px; letter-spacing: 0.08em; }
.site-footer__nav .ja { font-size: 0.8125rem; color: var(--muted-light); }
.site-footer__nav .site-footer__privacy { align-items: center; font-size: 0.8125rem; color: var(--muted-light); }
.site-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--muted-light);
}
.site-footer__top-link {
  justify-self: end;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-cinzel);
  letter-spacing: 0.24em;
  color: var(--muted-light);
}
.site-footer__top-link:hover { color: var(--muted-light); }

/* ---------- Menu overlay ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 48px var(--gutter) 40px;
}
.menu[hidden] { display: none; }
.menu__head { display: flex; justify-content: space-between; align-items: flex-start; }
.menu__close {
  font-family: var(--font-cinzel);
  font-size: 14px;
  letter-spacing: 0.18em;
  padding: 14px 0 12px;
}
.menu__nav {
  list-style: none;
  margin: auto 0 auto auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: right;
}
.menu__nav > li { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.menu__nav > li > a { display: flex; align-items: baseline; justify-content: flex-end; gap: 20px; }
.menu__nav .ja { font-size: 13px; color: var(--muted); }
.menu__nav .en { font-family: var(--font-cinzel); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.menu__subs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 28px;
  max-width: 560px;
}
.menu__subs a {
  display: flex;
  align-items: center;
  min-height: 36px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted-light);
  transition: color 300ms;
}
.menu__subs a:hover { color: var(--ink); }
.menu__foot { display: flex; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--muted); }
.menu__foot a { color: var(--muted); }

/* =====================================================================
   Lower pages
   ===================================================================== */

[hidden] { display: none !important; }
.ib { display: inline-block; }
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.is-muted { color: var(--muted); }
.is-ink { color: var(--ink); }
.tnum { font-variant-numeric: tabular-nums; }
.stack-20, .stack-24, .stack-48 { display: flex; flex-direction: column; }
.stack-20 { gap: 20px; }
.stack-24 { gap: 24px; }
.stack-48 { gap: 48px; }

/* ---------- Lower-page hero (same background and effects as TOP) ---------- */

.hero--sub {
  height: auto;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  /* Top padding keeps a long hero (e.g. CONTACT on a short phone) clear of the fixed header logo */
  padding: 160px var(--gutter) 120px;
  align-content: end;
}
.sub-hero__body {
  position: relative;
  grid-column: 3 / 12;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sub-hero__body--tall { padding-top: 60px; }
.sub-hero__body--article { gap: 28px; }
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-cinzel);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-shadow: var(--shadow-text);
}
.sub-hero__en {
  font-family: var(--font-playfair);
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(10, 12, 10, 0.7);
}
.sub-hero__en--xl { font-size: clamp(3rem, 2rem + 4vw, 6rem); }
.sub-hero__en--lg { font-size: clamp(2.5rem, 1.8rem + 3vw, 5rem); }
.sub-hero__en--md { font-size: clamp(2rem, 1.4rem + 2.6vw, 4rem); line-height: 1.15; }
.sub-hero__en--sm { font-size: 28px; line-height: 1.2; text-shadow: var(--shadow-text); }
.sub-hero__sub { font-size: 0.875rem; letter-spacing: 0.08em; text-shadow: var(--shadow-text); }
.sub-hero__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2.125rem);
  line-height: 1.75;
  letter-spacing: 0.1em;
  text-shadow: 0 0 24px rgba(10, 12, 10, 0.7);
}
.sub-hero__title--keep { word-break: keep-all; }
.sub-hero__title--recruit {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.6;
  font-feature-settings: 'palt' 1;
  word-break: keep-all;
}
.sub-hero__title--article {
  max-width: 24em;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-wrap: pretty;
}
.sub-hero__lead {
  max-width: 40em;
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  line-height: 2.1;
  letter-spacing: 0.1em;
  word-break: keep-all;
  text-shadow: var(--shadow-text);
}
/* The "（※…）" note always starts its own line */
.sub-hero__note { display: block; }
.sub-hero__date {
  font-family: var(--font-playfair);
  font-size: 15px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--shadow-text);
}
/* Philosophy: the client cut this hero down to one copy line, set at the left */
.sub-hero__body--philosophy { grid-column: 1 / -1; }
.philosophy-hero-copy {
  width: 607px;
  max-width: 100%;
  min-height: 426px;
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  line-height: 2.1;
  letter-spacing: 0.1em;
  font-feature-settings: 'palt' 1;
}

/* ---------- Section building blocks ---------- */

.section--lead { padding-top: 40px; }
.section--pb160 { padding-bottom: 160px; }
.block {
  grid-column: 3 / 13;
  display: flex;
  flex-direction: column;
  gap: var(--gap, 56px);
  padding-top: 128px;
  border-top: 1px solid var(--line);
}
.block--bare { padding-top: 0; border-top: 0; }
.block--center { align-items: center; text-align: center; }
.block--center-items { align-items: center; }
.block--two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
}
.title-stack { display: flex; flex-direction: column; gap: 16px; }
.heading--md, .heading--lg {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.6;
  word-break: keep-all;
  font-feature-settings: 'palt' 1;
}
.heading--sm { font-size: clamp(1.375rem, 1.05rem + 1.3vw, 1.875rem); line-height: 1.6; word-break: keep-all; }
.heading--h3 { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.7; word-break: keep-all; }
.sub-label { font-size: 0.875rem; letter-spacing: 0.08em; color: var(--muted); }
.sub-label--h { margin: 0; font-weight: 400; }
.muted-note { font-size: 1rem; line-height: 2; letter-spacing: 0.04em; color: var(--muted); }
.btn--spaced { margin-top: 24px; }
.line-link--spaced { margin-top: 8px; }
.prose-mincho {
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  line-height: 2.2;
  letter-spacing: 0.1em;
  word-break: keep-all;
}
.body-text, .body-text p { font-size: 1rem; line-height: 2; letter-spacing: 0.04em; }
.body-mincho { font-family: var(--font-mincho); font-size: 1.125rem; line-height: 2; letter-spacing: 0.1em; }
.body-mincho--sm { font-size: 1.0625rem; }

.statement {
  grid-column: 3 / 13;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  line-height: 1.8;
  letter-spacing: 0.1em;
  word-break: keep-all;
}

/* Title on the left, text on the right; stacks when narrow */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 48px 64px;
  align-items: start;
}
.split__right { display: flex; flex-direction: column; gap: 32px; padding-top: 44px; }

/* Diagram on the left, text on the right */
.figure-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 64px;
  align-items: center;
}
.figure-split__fig { width: 100%; max-width: 440px; justify-self: center; }
.llm-diagram--inline { position: static; height: auto; }
.tree-diagram { display: block; width: 100%; height: auto; overflow: visible; }
.tree-diagram path {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tree-diagram .l { stroke: var(--ink); }
.tree-diagram .m { stroke: var(--muted); }
.tree-diagram .t {
  fill: var(--ink);
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.12em;
  dominant-baseline: central;
}

/* Tinted "mist" panel */
.mist {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 72px clamp(24px, 5vw, 80px);
  background: rgba(150, 162, 154, 0.09);
}
.mist--32 { gap: 32px; }

/* Bulleted list with hairlines */
.dot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 360px)), 1fr));
  column-gap: 48px;
  border-bottom: 1px solid var(--line);
}
.dot-list--300 { --min: 300px; }
.dot-list--single { display: block; }
.dot-list li {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  line-height: 2.1;
  letter-spacing: 0.04em;
}
.dot-list__dot { flex: none; width: 5px; height: 5px; margin-top: 0.9em; border-radius: 50%; background: var(--muted); }

.num-title { display: flex; align-items: baseline; gap: 20px; }
.num-title__no { flex: none; font-family: var(--font-playfair); font-size: 20px; color: var(--muted); }
.num-title__name { min-width: 0; font-family: var(--font-mincho); font-size: 1.375rem; line-height: 1.6; letter-spacing: 0.08em; }

.equipment { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.equipment__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px 56px;
  padding: 56px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.equipment__text { display: flex; flex-direction: column; gap: 20px; }
.equipment__text p, .steps3 p, .pricing p { font-size: 1rem; line-height: 2.1; letter-spacing: 0.04em; }
.equipment__photo { aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.equipment__photo img { width: 100%; height: 100%; object-fit: cover; }

.steps3 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  border-top: 1px solid var(--line);
}
.steps3 li { display: flex; flex-direction: column; gap: 20px; padding: 40px 32px 48px 24px; border-left: 1px solid var(--line); }
.steps3 .num-title { gap: 16px; }
.steps3__name { font-family: var(--font-mincho); font-size: 1.5rem; letter-spacing: 0.16em; }

/* Numbered rows: number / name / description */
.rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.rows li {
  display: grid;
  grid-template-columns: 3rem minmax(8rem, 14rem) minmax(0, 1fr);
  gap: 16px 32px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.rows__no { font-family: var(--font-playfair); font-size: 20px; color: var(--muted); }
.rows__name { font-family: var(--font-mincho); font-size: 1.125rem; letter-spacing: 0.1em; }
.rows__text { font-size: 1rem; line-height: 2.1; letter-spacing: 0.04em; }

.faq { border-bottom: 1px solid var(--line); }
.faq > div { display: flex; flex-direction: column; gap: 16px; padding: 32px 0; border-top: 1px solid var(--line); }
.faq dt { display: flex; gap: 20px; font-family: var(--font-mincho); font-size: 1.125rem; line-height: 1.8; letter-spacing: 0.08em; }
.faq dd { display: flex; gap: 20px; font-size: 1rem; line-height: 2.1; letter-spacing: 0.04em; color: var(--muted-light); }
.faq__mark { flex: none; font-family: var(--font-playfair); color: var(--muted); }
.faq dd .faq__mark { font-size: 1.125rem; }

/* Term / description pairs with hairlines */
.defs { border-bottom: 1px solid var(--line); }
.defs > div { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; border-top: 1px solid var(--line); }
.defs dt { font-family: var(--font-mincho); font-size: 1.125rem; letter-spacing: 0.1em; }
.defs dd { font-size: 1rem; line-height: 2.1; letter-spacing: 0.04em; color: var(--muted-light); }
.defs--tight > div { gap: 8px; }
.defs--tight dd { line-height: 1.9; }
.defs--loose > div { gap: 12px; padding: 28px 0; }
.defs--loose dt, .defs--pair dt { line-height: 1.8; letter-spacing: 0.08em; }
.defs--grid > div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 8px 24px; align-items: baseline; }
.defs--grid dt { letter-spacing: 0.12em; }
.defs--grid dd { line-height: 1.9; }
.defs--pair > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px 48px;
  padding: 28px 0;
}

.next-project {
  grid-column: 3 / 13;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 56px 24px 56px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 400ms var(--ease);
}
.next-project:hover { background: var(--hover-bg); }
.next-project__label { font-family: var(--font-cinzel); font-size: 12px; letter-spacing: 0.2em; color: var(--muted); }
.next-project__en { font-family: var(--font-playfair); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.3; }
.next-project__ja { display: flex; align-items: center; gap: 24px; font-family: var(--font-mincho); font-size: 1.125rem; letter-spacing: 0.1em; }
.next-project__line { display: block; width: 60px; height: 1px; background: var(--ink); }

.arrow-link { align-self: flex-start; display: flex; align-items: center; gap: 16px; min-height: 44px; letter-spacing: 0.08em; }
.arrow-link__line { display: block; width: 40px; height: 1px; background: var(--ink); }
.arrow-link--back { margin-top: 24px; }

/* Contact call to action above the footer */
.footer-cta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  max-width: 1440px;
  margin: 0 auto;
  padding: 200px var(--gutter) 0;
  text-shadow: var(--shadow-text);
}
.footer-cta__inner { grid-column: 3 / 13; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.footer-cta__btn { margin-top: 24px; text-shadow: none; }

/* ---------- Projects ---------- */

.project-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.project-list > li { border-top: 1px solid var(--line); }
.project-list__item {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, min(320px, 32%));
  gap: 24px 48px;
  padding: 56px 24px 56px 0;
  transition: background 400ms var(--ease);
}
.project-list__item:hover { background: var(--hover-bg); }
.project-list__no { font-family: var(--font-playfair); font-size: 20px; line-height: 1.3; color: var(--muted); }
.project-list__text { display: flex; flex-direction: column; gap: 20px; }
.project-list__en { font-family: var(--font-playfair); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.3; }
.project-list__ja { font-family: var(--font-mincho); font-size: 1.25rem; line-height: 1.7; letter-spacing: 0.1em; }
.project-list__body { font-size: 1rem; line-height: 2; letter-spacing: 0.04em; color: var(--muted-light); }
.project-list__more {
  margin-top: 8px;
  font-family: var(--font-mincho);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-left: 84px;
  background: linear-gradient(var(--muted), var(--muted)) left center / 60px 1px no-repeat;
}
.project-list__media { position: relative; overflow: hidden; align-self: start; aspect-ratio: 2 / 3; background: var(--bg); }
.project-list__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }

.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px 56px; }

/* ---------- Company ---------- */

.table { border-bottom: 1px solid var(--line); }
.table > div {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.table dt { font-family: var(--font-mincho); font-size: 1rem; letter-spacing: 0.08em; }
.table dd { display: flex; flex-direction: column; gap: 6px; font-size: 1rem; line-height: 1.9; letter-spacing: 0.04em; }
.table--history > div { align-items: baseline; }
.table--history dt { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-sans); font-size: 0.875rem; letter-spacing: normal; color: var(--muted); }
.table--history .num { font-family: var(--font-playfair); font-size: 1.375rem; color: var(--ink); }
.table--history .num--gap { margin-left: 6px; }
.makers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  column-gap: 48px;
  border-bottom: 1px solid var(--line);
}
.makers li { padding: 24px 0; border-top: 1px solid var(--line); font-size: 1rem; letter-spacing: 0.04em; }
.access { display: flex; flex-direction: column; gap: 24px; font-size: 1rem; line-height: 1.9; letter-spacing: 0.04em; }
.access__station { color: var(--muted-light); }
.access__map { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); }
.access__map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  /* Monochrome, dark map to sit in the site's dark tone. For plain black and white, use: filter: grayscale(1); */
  filter: grayscale(1) invert(0.92) contrast(0.9) brightness(0.95);
}
@media (max-width: 639px) { .access__map { aspect-ratio: 4 / 3; } }

/* ---------- News ---------- */

.news-list { grid-column: 3 / 13; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.news-list li {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr);
  gap: 12px 32px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.news-list time { font-family: var(--font-playfair); font-size: 1.125rem; letter-spacing: 0.06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.news-list p { font-family: var(--font-mincho); font-size: 1.0625rem; line-height: 1.9; letter-spacing: 0.08em; }

/* ---------- Privacy policy ---------- */

.policy { grid-column: 3 / 13; gap: 64px; padding: 80px clamp(24px, 5vw, 96px); }
.policy__group { max-width: 40em; display: flex; flex-direction: column; gap: 20px; }
.policy__group--list { gap: 32px; }
.policy p { font-size: 1rem; line-height: 2; letter-spacing: 0.04em; }
.policy h2 { margin: 0; font-weight: 500; font-size: 1.125rem; line-height: 1.8; letter-spacing: 0.06em; }
.policy__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.policy__list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 16px; padding: 32px 0; border-top: 1px solid var(--line); }
.policy__list li > div { display: flex; flex-direction: column; gap: 12px; }
.policy__no { font-family: var(--font-playfair); font-size: 1.125rem; line-height: 1.8; color: var(--muted); }
.policy a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.policy .policy__date { color: var(--muted); }
.policy h3 { margin: 0; font-weight: 500; font-size: 1rem; line-height: 1.8; letter-spacing: 0.06em; }

/* ---------- Philosophy ---------- */

.story {
  grid-column: 3 / 13;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 120px;
}
.story__part { display: flex; flex-direction: column; gap: 40px; }
.story__part--a { grid-column: 1 / 7; }
.story__part--b { grid-column: 3 / 10; }
.story__part--c { grid-column: 1 / 8; }
.story p { font-family: var(--font-mincho); font-size: 1.0625rem; line-height: 2.3; letter-spacing: 0.1em; word-break: keep-all; }
.story .story__key { font-weight: 500; font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem); line-height: 1.8; }
.story__close {
  grid-column: 1 / 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
  padding: 96px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.story .story__after { color: var(--muted); }
.mission-statement {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2.125rem);
  line-height: 1.75;
  letter-spacing: 0.1em;
  font-feature-settings: 'palt' 1;
  word-break: keep-all;
}
.vision { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; }
.vision__item { display: flex; flex-direction: column; gap: 20px; padding-top: 32px; border-top: 1px solid var(--line); }
.vision__term { display: flex; align-items: baseline; gap: 16px; }
.vision__term [lang] { font-family: var(--font-playfair); font-size: 1.5rem; }
.vision__term span + span { font-size: 0.875rem; letter-spacing: 0.08em; color: var(--muted); }
.vision p { font-size: 1rem; line-height: 2.1; letter-spacing: 0.04em; }
.values {
  list-style: none;
  margin: 0 -24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.values li {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 48px 40px 56px 24px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.values__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; }
.values__no { font-family: var(--font-playfair); font-size: 20px; color: var(--muted); }
.values__ja { font-family: var(--font-mincho); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: 0.16em; }
.values__en { font-family: var(--font-playfair); font-size: 1.125rem; color: var(--muted); }
.values__lead { font-family: var(--font-mincho); font-size: 1.125rem; line-height: 1.8; letter-spacing: 0.08em; }
.values__body { font-size: 0.9375rem; line-height: 2; letter-spacing: 0.04em; color: var(--muted-light); }
.message { display: flex; flex-direction: column; gap: 40px; }
.message p { font-size: 1rem; line-height: 2.1; letter-spacing: 0.04em; }
.message__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(1.375rem, 1rem + 1.3vw, 2rem);
  line-height: 1.7;
  letter-spacing: 0.08em;
  word-break: keep-all;
}
.signature { display: flex; justify-content: flex-end; }
.signature > span { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.signature__role { font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--muted); }
.signature__name { font-family: var(--font-mincho); font-size: 1.375rem; letter-spacing: 0.2em; }

/* ---------- Recruit ---------- */

.recruit-intro {
  grid-column: 3 / 11;
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  line-height: 2.2;
  letter-spacing: 0.1em;
  word-break: keep-all;
}
.recruit-intro__close { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.9; letter-spacing: 0.12em; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 40px; margin-top: 8px; font-family: var(--font-sans); }
.facts__num--pad { padding: 0 6px; }
.balance__lead {
  font-family: var(--font-mincho);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.day { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.day li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.95;
  letter-spacing: 0.04em;
}
.day__time { font-family: var(--font-playfair); font-size: 1.75rem; line-height: 1.2; letter-spacing: normal; font-variant-numeric: tabular-nums; }

/* Equal columns separated by vertical hairlines */
.cols { list-style: none; margin: 0 -24px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols > li { display: flex; flex-direction: column; gap: 20px; padding: 32px 24px 40px; border-left: 1px solid var(--line); }
.cols--5 > li { gap: 16px; }
.cols__no { font-family: var(--font-playfair); font-size: 20px; line-height: 1; color: var(--muted); }
.cols__name { font-family: var(--font-mincho); font-size: 1.25rem; line-height: 1.5; letter-spacing: 0.1em; }
.cols__name--lg { line-height: 1.6; }
.cols__name--plain { line-height: normal; }
.cols__body { font-size: 0.9375rem; line-height: 1.95; letter-spacing: 0.04em; }
.cols__foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--muted);
}
.cols__note { margin-top: auto; padding-top: 16px; font-size: 0.8125rem; line-height: 1.7; color: var(--muted); }

.openness { row-gap: 80px; }
.openness__head { grid-column: 1 / 3; }
.quote { margin: 0; display: flex; flex-direction: column; gap: 20px; padding-left: 32px; border-left: 1px solid var(--ink); }
.quote blockquote { margin: 0; font-family: var(--font-mincho); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.9; letter-spacing: 0.1em; }
.quote figcaption { font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--muted); }
.recruit-mission {
  max-width: 40em;
  font-family: var(--font-mincho);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.9;
  letter-spacing: 0.1em;
  word-break: keep-all;
}
.recruit-concept { max-width: 36em; font-size: 1rem; line-height: 2; letter-spacing: 0.04em; color: var(--muted); }
.details { margin-top: 40px; width: 100%; max-width: 880px; border-bottom: 1px solid var(--line); }
.details > div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.details dt { font-family: var(--font-mincho); font-size: 16px; line-height: 1.85; letter-spacing: 0.1em; }
.details dd { display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.85; letter-spacing: 0.04em; }
.details__sub { font-size: 0.875rem; color: var(--muted); }

.entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(360px, 36%)); gap: 64px; }
.entry__main { display: flex; flex-direction: column; gap: 48px; }
.entry-form { display: flex; flex-direction: column; gap: 36px; }
.line-field { position: relative; display: flex; flex-direction: column; gap: 12px; }
.line-field__label { display: flex; gap: 12px; font-size: 0.875rem; letter-spacing: 0.08em; }
.line-field input:not([type="file"]), .line-field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(233, 230, 222, 0.4);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  padding: 12px 0;
}
.line-field textarea { line-height: 1.8; resize: vertical; }
.line-field input:focus, .line-field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.line-field input:focus-visible, .line-field textarea:focus-visible { outline: none; border-bottom-color: var(--ink); }
.line-field__help { font-size: 0.8125rem; line-height: 1.8; color: var(--muted); }
.line-field__error { margin: 0; font-size: 0.8125rem; color: var(--ink); }
.form-note { font-size: 0.875rem; line-height: 1.9; letter-spacing: 0.04em; color: var(--muted); }
.form-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.btn--submit { align-self: flex-start; cursor: pointer; font: inherit; font-weight: 500; font-size: 16px; letter-spacing: 0.08em; padding: 20px 56px; }
.btn--submit[disabled], .btn--submit-lg[disabled] { cursor: wait; opacity: 0.7; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.entry-done { display: flex; flex-direction: column; gap: 24px; padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.entry-done p { font-size: 1rem; line-height: 2; letter-spacing: 0.04em; }
.entry-done .entry-done__title { font-family: var(--font-mincho); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: normal; letter-spacing: 0.1em; }
.entry__aside { display: flex; flex-direction: column; gap: 48px; }
.aside-box { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.aside-box__tel { font-family: var(--font-playfair); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.aside-box__note { font-size: 0.875rem; line-height: 1.8; color: var(--muted); }
.aside-box p { font-size: 0.9375rem; line-height: 1.95; letter-spacing: 0.04em; }
.status--muted { font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--muted); }

/* Recruit lower pages */
.recruit-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  border-top: 1px solid var(--line);
}
.recruit-links > li { display: flex; border-bottom: 1px solid var(--line); }
.recruit-links__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 24px 40px 0;
  transition: background 400ms var(--ease), padding 400ms var(--ease);
}
.recruit-links__item:hover { background: var(--hover-bg); padding-left: 16px; }
.recruit-links__en { font-family: var(--font-playfair); font-size: 0.875rem; letter-spacing: 0.08em; color: var(--muted); }
.recruit-links__ja { font-family: var(--font-mincho); font-size: 1.375rem; line-height: 1.5; letter-spacing: 0.1em; }
.recruit-links__body { font-size: 0.9375rem; line-height: 1.9; letter-spacing: 0.04em; color: var(--muted); }
.recruit-links__line { display: block; width: 40px; height: 1px; margin-top: auto; background: var(--ink); transition: width 400ms var(--ease); }
.recruit-links__item:hover .recruit-links__line { width: 72px; }

.cols--grid > li { border-bottom: 1px solid var(--line); }

/* Thin-line graphics (src/line-art.mjs). Strokes are drawn in by main.js when they scroll into view. */
.line-art { display: block; overflow: visible; }
.line-art path, .line-art circle { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.line-art .la-muted { stroke: var(--line-strong); }
.line-art .la-strong { stroke-width: 2; }
.line-art .la-dash { stroke: var(--muted); stroke-dasharray: 2 6; }
.line-art .la-dot { fill: var(--bg); stroke-width: 1.5; }
.line-art text { fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
.line-art .la-num { font-family: var(--font-playfair); font-size: 22px; }
.line-art .la-time { font-family: var(--font-playfair); font-size: 18px; fill: var(--ink); }
.line-art .la-center { font-family: var(--font-playfair); font-size: 34px; fill: var(--ink); letter-spacing: 0.02em; }
.line-art .la-center-ja { font-family: var(--font-mincho); font-size: 17px; letter-spacing: 0.12em; }
.line-art.is-drawing path, .line-art.is-drawing circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease); }
.line-art.is-drawing .la-dash { stroke-dasharray: 2 6; stroke-dashoffset: 0; opacity: 0; transition: opacity 1.2s var(--ease) 1.4s; }
.line-art.is-drawing text { opacity: 0; transition: opacity 1.2s var(--ease) 1s; }
.line-art.is-drawn path, .line-art.is-drawn circle { stroke-dashoffset: 0; }
.line-art.is-drawn .la-dash, .line-art.is-drawn text { opacity: 1; }

.growth-art { display: block; width: 100%; max-width: 160px; }
.growth-art .line-art { width: 100%; height: auto; }
.cols > li:nth-child(2) .line-art path { transition-delay: 0.2s; }
.cols > li:nth-child(3) .line-art path { transition-delay: 0.4s; }
.cols > li:nth-child(4) .line-art path { transition-delay: 0.6s; }

.day-wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 72px; align-items: start; }
.day-wrap__clock { position: sticky; top: 120px; }
.day-wrap__clock .line-art { width: 100%; height: auto; }
/* Pointing at a row of the schedule lights up that time on the clock */
.line-art .la-seg { fill: none; stroke: var(--glow); stroke-width: 4; opacity: 0; transition: opacity 400ms var(--ease); filter: drop-shadow(0 0 6px var(--glow)); }
.line-art.is-drawing .la-seg { stroke-dasharray: none; stroke-dashoffset: 0; }
.line-art .la-seg.is-on { opacity: 1; }
.line-art .la-dot { transition: fill 400ms var(--ease), stroke 400ms var(--ease); }
.line-art .la-dot.is-on { fill: var(--glow); stroke: var(--glow); filter: drop-shadow(0 0 6px var(--glow)); }
.day li[data-day] { transition: background 400ms var(--ease); cursor: default; }
.day li[data-day] .day__time { transition: color 400ms var(--ease), text-shadow 400ms var(--ease); }
.day li.is-on .day__time { color: var(--glow); text-shadow: 0 0 12px rgba(166, 214, 156, 0.45); }

.facts dt .line-art--icon { width: 40px; height: 40px; margin-bottom: 16px; }
.cols > li > .line-art--icon, .num-grid .line-art--icon, .step-icon .line-art { width: 40px; height: 40px; }
.step-icon { display: block; }
.line-art .la-on { stroke: var(--ink); stroke-width: 1.4; }
/* The year grid is drawn small and scaled up a lot, so its strokes are thinner in drawing units */
.line-art--year circle { stroke-width: 0.5; }
.line-art--year .la-on { stroke-width: 0.6; }

.year-fig { margin: 0; display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.year-fig .line-art { width: 100%; height: auto; }
.year-fig figcaption { font-size: 0.875rem; line-height: 1.85; letter-spacing: 0.04em; color: var(--muted); }

.interview__quote {
  margin: 0;
  padding-left: 32px;
  border-left: 1px solid var(--ink);
  font-family: var(--font-mincho);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.7;
  letter-spacing: 0.08em;
  word-break: keep-all;
}

/* Recruit FAQ: a larger Q / A so each question stands out when skimming */
[data-page="recruit-faq"] .faq__mark { font-size: 2rem; line-height: 1; width: 1.1em; }
[data-page="recruit-faq"] .faq dd .faq__mark { font-size: 1.5rem; }

/* ミネルバを数字で見る */
.num-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 0 40px;
}
.num-grid > li { display: flex; flex-direction: column; gap: 12px; padding: 32px 0 36px; border-top: 1px solid var(--line); }
.num-grid__label { font-size: 0.875rem; letter-spacing: 0.08em; color: var(--muted); }
.num-grid__value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.num-grid__num { font-family: var(--font-playfair); font-size: clamp(2.5rem, 1.8rem + 2.8vw, 4rem); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num-grid__unit { font-family: var(--font-mincho); font-size: 1.125rem; letter-spacing: 0.08em; }
.num-grid__note { font-size: 0.875rem; line-height: 1.85; letter-spacing: 0.04em; color: var(--muted); }
@media (min-width: 640px) { .num-grid > .num-grid__wide { grid-column: span 2; } }

.interview { gap: 48px; }
.interview__head { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 48px; align-items: end; }
.interview__photo {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--hover-bg);
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
  overflow: hidden;
}
.interview__photo img { width: 100%; height: 100%; object-fit: cover; }
.interview__photo .line-art { width: 78%; height: auto; }
.interview__who { display: flex; flex-direction: column; gap: 16px; }
.interview__profile { font-size: 0.875rem; letter-spacing: 0.06em; color: var(--muted); }
.interview__qa { margin: 0; border-bottom: 1px solid var(--line); }
.interview__qa > div { display: grid; grid-template-columns: minmax(0, 18em) minmax(0, 1fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); }
.interview__qa dt { font-family: var(--font-mincho); font-size: 1.0625rem; line-height: 1.85; letter-spacing: 0.08em; }
.interview__qa dd { margin: 0; font-size: 1rem; line-height: 2; letter-spacing: 0.04em; }

/* ---------- Contact ---------- */

.tel-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 40px 64px;
  align-items: end;
}
.tel-info__main { display: flex; flex-direction: column; gap: 12px; }
.tel-info__label { font-family: var(--font-mincho); font-size: 1rem; letter-spacing: 0.1em; color: var(--muted-light); }
.tel-info__tel { font-family: var(--font-playfair); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.2; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.tel-info__list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 24px; font-size: 1rem; line-height: 1.8; letter-spacing: 0.04em; }
.tel-info__list dt { color: var(--muted); }

.mist--form { grid-column: 3 / 13; display: block; padding: 80px clamp(24px, 5vw, 96px); }
.contact-form { max-width: 44em; display: flex; flex-direction: column; }
.field { display: flex; flex-direction: column; gap: 8px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.field--types { margin: 0; padding: 0 0 40px; border: 0; border-bottom: 1px solid var(--line); gap: 20px; min-width: 0; }
.field--types legend { padding: 0 0 20px; }
.field__label { display: flex; align-items: center; gap: 12px; font-size: 1rem; line-height: 1.6; letter-spacing: 0.04em; }
.badge { font-size: 11px; letter-spacing: 0.1em; padding: 2px 8px; border: 1px solid var(--muted); color: var(--muted-light); }
.field input, .field textarea, .roles__other input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(233, 230, 222, 0.5);
  border-radius: 0;
  padding: 12px 0;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  outline: none;
  transition: box-shadow 200ms;
}
.field textarea { resize: vertical; line-height: 1.9; }
.field input:focus, .field textarea:focus, .roles__other input:focus { box-shadow: 0 1px 0 0 var(--ink); }
.field input:focus-visible, .field textarea:focus-visible, .roles__other input:focus-visible { outline: none; }
.field__error { margin: 0; font-size: 0.875rem; line-height: 1.7; color: #E0B8A8; }
.choice-row { display: flex; flex-wrap: wrap; gap: 12px; }
.choice-row--sm { gap: 10px; }
.choice {
  min-height: 48px;
  padding: 12px 22px;
  font: inherit;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid rgba(233, 230, 222, 0.5);
  background: transparent;
  color: var(--ink);
  transition: background 300ms var(--ease), color 300ms var(--ease);
}
.choice:hover { border-color: var(--ink); }
.choice[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.choice--sm { min-height: 44px; padding: 10px 18px; font-size: 0.875rem; }
.choice--count { display: flex; align-items: baseline; gap: 10px; }
.choice__count { font-family: var(--font-playfair); font-size: 0.8125rem; opacity: 0.7; }
.roles { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; }
.roles__label { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; line-height: 1.6; letter-spacing: 0.04em; color: var(--muted-light); }
.roles__other { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.roles__other label { font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.04em; color: var(--muted-light); }
.roles__other input { max-width: 24em; padding: 10px 0; font-size: 1rem; }
.contact-form__submit { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 48px; }
.contact-form__submit .form-note { color: var(--muted-light); }
.contact-form__submit .form-note a { text-decoration: none; }
.btn--submit-lg { cursor: pointer; font: inherit; font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: 0.08em; padding: 20px 48px; }
.contact-done { max-width: 40em; display: flex; flex-direction: column; gap: 24px; }
.contact-done .heading--sm { line-height: 1.7; }
.contact-done p { font-size: 1rem; line-height: 2; letter-spacing: 0.04em; }

/* ---------- Media ---------- */

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 64px 40px; }
.card { display: flex; flex-direction: column; gap: 20px; transition: opacity 300ms; }
.card:hover { opacity: 0.75; }
.card__image, .article__image { display: block; overflow: hidden; background: var(--placeholder) repeating-linear-gradient(135deg, rgba(233, 230, 222, 0.035) 0 1px, transparent 1px 14px); }
.card__image { aspect-ratio: 16 / 10; }
.card__meta { display: flex; align-items: center; gap: 16px; font-size: 12px; letter-spacing: 0.08em; }
.card__meta time { font-family: var(--font-playfair); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tag { padding: 3px 10px; border: 1px solid rgba(233, 230, 222, 0.3); color: var(--muted-light); }
.card__title { font-family: var(--font-mincho); font-size: 1.125rem; line-height: 1.8; letter-spacing: 0.06em; text-wrap: pretty; }
.article { grid-column: 3 / 12; }
.article__image { aspect-ratio: 16 / 9; }
.card__image img, .article__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Default thumbnail: the forest photo from the top-page hero, toned the same way, under the logo. */
.card__image--brand, .article__image--brand { position: relative; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.card__image--brand::before, .article__image--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../../images/hero-forest-1440.jpg") center / cover;
  filter: saturate(0.4) brightness(0.66) contrast(0.96);
}
.card__image--brand::after, .article__image--brand::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(10, 12, 10, 0) 55%, rgba(10, 12, 10, 0.45) 100%),
    radial-gradient(120% 90% at 50% 100%, rgba(150, 162, 154, 0.32) 0%, rgba(120, 134, 126, 0.18) 50%, rgba(70, 84, 76, 0) 100%),
    linear-gradient(rgba(28, 48, 41, 0.35), rgba(28, 48, 41, 0.35));
}
.card__image--brand .brand img, .article__image--brand .brand img { height: auto; }
.card__image--brand .brand img { width: 64px; }
.card__image--brand .brand > span { font-size: 13px; }
.article__image--brand .brand { gap: 16px; }
.article__image--brand .brand img { width: clamp(72px, 12vw, 112px); }
.article__image--brand .brand > span { font-size: clamp(14px, 1.6vw, 18px); }
.article__lead { max-width: 40em; font-family: var(--font-mincho); font-size: 1.125rem; line-height: 2.2; letter-spacing: 0.08em; text-wrap: pretty; }
.article__section { max-width: 40em; display: flex; flex-direction: column; gap: 20px; }
.article__section h2 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem);
  line-height: 1.7;
  letter-spacing: 0.08em;
}
.article__no { flex: none; font-family: var(--font-playfair); font-size: 1.125rem; color: var(--muted); }
.article__section p { font-size: 1rem; line-height: 2.1; letter-spacing: 0.04em; text-wrap: pretty; }
.article__section p + p { margin-top: -4px; }
.article__sources { max-width: 40em; padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.article__sources h2 { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.08em; color: var(--muted-light); }
.article__sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.article__sources li { font-size: 0.8125rem; line-height: 1.8; letter-spacing: 0.04em; color: var(--muted); overflow-wrap: anywhere; }
.article__sources a { color: var(--muted-light); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.article__sources a:hover { color: var(--ink); }

/* =====================================================================
   Responsive
   Breakpoints follow DESIGN.md: phone ~639px / tablet 640–1023px / desktop 1024px~.
   ===================================================================== */

/* Phone-only parts, hidden on larger screens */
.sp-bar, .site-footer__tel { display: none; }
.fog-bg__picture { display: block; }
.fog-bg__picture img { width: 100%; height: 100%; }
[lang="en"] { hyphens: auto; overflow-wrap: break-word; }

/* ---------- Narrow desktop (1024–1279px) ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* TOP: four project columns get narrow */
  .service__ja { font-size: clamp(0.875rem, 0.25rem + 0.95vw, 1.0625rem); letter-spacing: 0.06em; }
  .service__en { font-size: clamp(1.0625rem, 1.7vw, 1.5rem); }
  .service__more { white-space: nowrap; }
  .cols--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols--5 > li { border-bottom: 1px solid var(--line); }
}

/* The big salary figure shrinks with the screen so "480〜672" stays on one line */
@media (max-width: 1279px) and (min-width: 640px) {
  .facts__salary .facts__num { font-size: clamp(1.75rem, 4vw, 4rem); white-space: nowrap; }
}

/* ---------- Tablet and below ---------- */
@media (max-width: 1023px) {
  /* Keep content clear of the notch when a phone is held sideways */
  :root { --gutter: max(40px, env(safe-area-inset-left), env(safe-area-inset-right)); }

  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services > li { border-bottom: 1px solid var(--line); }
  .cols--4, .cols--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols--3 { grid-template-columns: minmax(0, 1fr); }
  .cols > li { border-bottom: 1px solid var(--line); }
  .cols--3.cols--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interview__qa > div { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .day-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .day-wrap__clock { position: static; width: min(100%, 300px); }
  .entry { grid-template-columns: minmax(0, 1fr); }
  .site-footer__company { grid-column: 1 / 7; }
  .site-footer__nav { grid-column: 7 / 13; }
  .hero__copy { grid-column: 2 / 13; }

  /* Desktop line breaks that would leave a short stray line are dropped; phrase breaks take over */
  br.br-wide { display: none; }
  .ib { display: inline; }

  /* Header (touch screens): transparent at the top, a 64px band with a small symbol once scrolling starts */
  .site-header {
    height: 112px;
    padding: 32px var(--gutter) 0;
    transition: height 300ms var(--ease), padding 300ms var(--ease), background-color 300ms var(--ease);
  }
  .site-header__brand img { transition: width 300ms var(--ease), height 300ms var(--ease); }
  .site-header__brand.is-hidden { opacity: 1; }
  .site-header.is-scrolled {
    height: 64px;
    padding-top: 0;
    align-items: center;
    background: rgba(10, 12, 10, 0.9);
    pointer-events: auto;
  }
  .site-header.is-scrolled .site-header__brand img { width: 32px; height: 32px; }
  .site-header.is-scrolled .site-header__brand > span { display: none; }
  .site-header.is-scrolled .dot-link { padding: 12px 0; }
}

@media (min-width: 640px) and (max-width: 767px) {
  .values, .vision, .block--two { grid-template-columns: minmax(0, 1fr); }
  .ph-mission { grid-template-columns: minmax(0, 1fr); }
  .ph-mission > div:first-child { display: none; }
  .openness__head { grid-column: auto; }
  .rows li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 8px 16px; }
  .rows__text { grid-column: 2; }
  .project-list__item { grid-template-columns: 3rem minmax(0, 1fr); gap: 24px; padding-right: 0; }
  .project-list__media { grid-column: 2; width: min(100%, 320px); }
}

/* ---------- Phone ---------- */
@media (max-width: 639px) {
  :root { --gutter: 24px; --col-gap: 16px; --rail: 48px; }
  br.br-mid { display: none; }

  .site-header { height: 96px; padding: 20px var(--gutter) 0; }
  .site-header.is-scrolled { height: 64px; padding-top: 0; }
  .site-header__nav { gap: 28px; }
  .site-header__brand img { width: 48px; height: 48px; }
  .site-header.is-scrolled .site-header__brand img { width: 32px; height: 32px; }

  /* Mincho body text tightens to 0.06em (DESIGN.md) */
  .hero__lead, .sub-hero__lead, .philosophy-hero-copy, .prose-mincho, .story p:not(.story__key), .recruit-intro,
  .recruit__lead, .pj-head__lead, .ph-visual__copy, .body-mincho, .article__lead, .news-list p { letter-spacing: 0.06em; }
  .cols__body, .values__body, .aside-box p { font-size: 1rem; }

  /* Bottom contact bar */
  .sp-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(10, 12, 10, 0.94);
    border-top: 1px solid var(--line);
    transform: translateY(100%);
    transition: transform 300ms var(--ease);
  }
  .sp-bar.is-on { transform: none; }
  .sp-bar a { display: flex; align-items: center; justify-content: center; font-size: 0.9375rem; letter-spacing: 0.08em; }
  .sp-bar__contact { background: var(--ink); color: var(--bg); font-weight: 500; }
  .sp-bar a.sp-bar__contact:hover { color: var(--bg); }
  body:has(.sp-bar) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* Rail grid: 24px | 48px rail | 16px | content | 24px */
  .section {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: 16px;
    padding: 0 var(--gutter) 96px;
  }
  .section > * { grid-column: 2; grid-row: auto; }
  .section > .rail { grid-column: 1; grid-row: 1 / span 12; justify-self: center; }
  .section--lead { padding-top: 0; }
  .section--pb160 { padding-bottom: 96px; }
  .block { padding-top: 64px; }
  .block--bare { padding-top: 0; }
  .block--center { align-items: flex-start; text-align: left; }

  /* Fog panels (forms, policy, flow, FAQ) leave the rail and span the screen */
  .section:has(> .mist, > .block--bare > .mist) > .rail { display: none; }
  .section:has(> .mist, > .block--bare > .mist) > * { grid-column: 1 / -1; }
  .section > .mist, .section > .block--bare > .mist { margin: 0 calc(var(--gutter) * -1); padding: 56px var(--gutter); }
  .mist { gap: 40px; padding: 40px 24px; }

  /* Heroes */
  .hero { height: auto; min-height: 100svh; }
  .hero__grid {
    position: relative;
    inset: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px var(--gutter) 104px calc(var(--gutter) + var(--rail) + 16px);
  }
  .hero__title-indent { padding-left: 1.5em; }
  .news { width: 100%; margin-top: 56px; }
  .hero__foot { bottom: 28px; }
  .hero--sub {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: 16px;
    padding: 128px var(--gutter) 96px;
  }
  .sub-hero__body, .sub-hero__body--philosophy { grid-column: 2; gap: 24px; }
  .sub-hero__body--tall { padding-top: 0; }
  .sub-hero__en--xl { font-size: 2.75rem; }
  .sub-hero__en--lg { font-size: 2.25rem; }
  .sub-hero__en--md { font-size: 1.875rem; }
  .philosophy-hero-copy { min-height: 0; }

  /* TOP: philosophy — photos first, then the heading and text */
  .section--philosophy { padding: 96px var(--gutter); }
  .section--philosophy > .ph-visual { order: -1; }
  .ph-mission { grid-template-columns: minmax(0, 1fr); margin-top: 56px; padding-bottom: 64px; }
  .ph-mission > div:first-child { display: none; }
  .ph-visual { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
  .ph-visual__frame { grid-column: 1; grid-row: 1; }
  .ph-visual__spacer { grid-column: 1; grid-row: 1; aspect-ratio: 100 / 110; }
  .ph-visual__overlay { left: 52%; outline-width: 8px; }
  .ph-visual__copy { grid-column: 1; grid-row: 2; justify-self: start; text-align: left; width: auto; height: auto; margin-top: 32px; }

  /* TOP: projects — text first, photo after, one per row */
  .pj-head { padding-bottom: 40px; }
  .pj-head__lead { text-align: left; }
  .services { margin-right: 0; grid-template-columns: minmax(0, 1fr); }
  .services > li { border-left: 0; }
  .service { padding: 40px 0 48px; gap: 20px; }
  .service__en { order: 1; min-height: 0; }
  .service__ja { order: 2; min-height: 0; }
  .service__more { order: 3; }
  .service__media { order: 4; }

  /* TOP: company and recruit */
  .company, .recruit { padding-top: 64px; }
  .recruit { row-gap: 64px; }
  .outline > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 20px 0; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts__item, .facts__item:first-child { padding: 28px 0; }
  .facts__item + .facts__item { border-left: 0; border-top: 1px solid var(--line); }
  .recruit__actions, .actions { gap: 24px 32px; }

  /* Contact block, footer CTA and footer */
  .contact__inner { padding: 120px var(--gutter); }
  .footer-cta { grid-template-columns: minmax(0, 1fr); padding: 120px var(--gutter) 0; }
  .footer-cta__inner { grid-column: 1; }
  .site-footer__inner { padding: 96px var(--gutter) 32px; }
  .site-footer__inner--plain { padding-top: 160px; }
  .site-footer__top { display: flex; flex-direction: column; gap: 40px; padding-bottom: 48px; }
  .site-footer__nav { order: 1; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .site-footer__nav .en { font-size: 1.5rem; }
  .site-footer__tel {
    display: block;
    order: 2;
    font-family: var(--font-playfair);
    font-size: 1.75rem;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
  }
  .site-footer__company { order: 3; gap: 24px; }
  .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 24px; }
  .site-footer__bottom .status { order: -1; flex-basis: 100%; }

  /* Lower pages */
  .split__right { padding-top: 0; }
  .figure-split { gap: 48px; }
  .equipment__row { padding: 40px 0; }
  .steps3 li { border-left: 0; border-bottom: 1px solid var(--line); padding: 32px 0 40px; }
  .steps3 li:last-child { border-bottom: 0; }
  .rows li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 8px 16px; padding: 24px 0; }
  .rows__text { grid-column: 2; }
  .faq dt, .faq dd { gap: 16px; }
  .next-project { padding: 48px 0; }
  .project-list__item { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 40px 0 48px; }
  .project-list__media { width: 100%; }
  .table > div, .details > div, .news-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .details { margin-top: 24px; }
  .story { display: flex; flex-direction: column; gap: 64px; }
  .story__close { align-items: flex-start; text-align: left; padding: 56px 0; }
  .vision, .values, .block--two, .entry { grid-template-columns: minmax(0, 1fr); }
  .values, .cols { margin-right: 0; }
  .values li { border-left: 0; padding: 32px 0 40px; }
  .openness { row-gap: 40px; }
  .openness__head { grid-column: auto; }
  .quote { padding-left: 20px; }
  .day li { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  .day__time { font-size: 1.25rem; line-height: 1.6; }
  .cols, .cols--3, .cols--4, .cols--5 { grid-template-columns: minmax(0, 1fr); }
  .cols > li { border-left: 0; padding: 28px 0 32px; }
  .cols--3.cols--grid { grid-template-columns: minmax(0, 1fr); }
  .growth-art { max-width: 120px; }
  .facts dt .line-art--icon { width: 32px; height: 32px; margin-bottom: 12px; }
  .cols > li > .line-art--icon, .num-grid .line-art--icon, .step-icon .line-art { width: 32px; height: 32px; }
  .interview__quote { padding-left: 20px; }
  .interview__head { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .interview__photo { width: 160px; }
  .interview__qa > div { padding: 24px 0; }
  .recruit-links__item { padding: 28px 0 32px; }
  .recruit-links__item:hover { padding-left: 0; }
  /* Selection steps: the time guide sits right under the step name */
  .cols--5 .cols__note { order: 1; margin-top: 0; padding-top: 0; }
  .cols--5 .cols__body { order: 2; }
  .defs--grid > div { grid-template-columns: 5em minmax(0, 1fr); gap: 4px 16px; }
  .entry { gap: 56px; }
  .tel-info { gap: 32px; }
  .field { padding: 32px 0; }
  .choice { padding: 10px 16px; }

  /* Menu */
  .menu { padding: 20px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
  .menu .brand img { width: 48px; height: 48px; }
  .menu__nav { margin: 48px 0 48px auto; gap: 18px; }
  .menu__foot { flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
}

/* ---------- Small phones (≤359px, e.g. iPhone SE 1st gen) ---------- */
@media (max-width: 359px) {
  :root { --gutter: 16px; --rail: 32px; }
  html { font-size: 15px; }
}
@media (max-width: 389px) {
  .heading--md, .heading--lg { font-size: 1.375rem; }
}