/* ============================================================
   ALSOK茨城 RECRUIT 2026 ─ Editorial cinematic recruitment site
   Type: Shippori Mincho B1 (display, JP serif) /
         Zen Kaku Gothic New (body, JP sans) /
         Bodoni Moda (Latin, numerics, editorial flavour)
   Palette: ALSOK navy + paper white + ALSOK yellow + warm gold
   ============================================================ */

:root{
  --navy:        #0a1d3f;
  --navy-deep:   #06122a;
  --navy-soft:   #142a52;
  --navy-line:   rgba(255,255,255,0.14);
  --yellow:      #ffd400;
  --gold:        #c9a14a;
  --paper:       #f5f3ee;
  --paper-deep:  #ece8de;
  --white:       #ffffff;
  --ink:         #1a1a1a;
  --ink-soft:    #3a3a3a;
  --line:        rgba(10,29,63,0.14);
  --line-soft:   rgba(10,29,63,0.08);

  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --latin: "Bodoni Moda", "Didot", serif;

  --max: 1320px;
  --gut: clamp(20px, 4vw, 56px);
  --rad: 0;
}

/* ─── reset ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; padding:0;
  font-family:var(--sans);
  font-weight:400; font-size:16px; line-height:1.85;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
  /* Japanese kinsoku-correct line breaks: keep particles with their preceding character,
     keep punctuation from leading a line. Lets characters break naturally otherwise. */
  line-break:strict;
}
/* Headlines benefit from balanced multi-line wrapping where supported (2026 baseline). */
h1, h2, .hero__title, .section__h, .statement__h, .philo__h, .entry__h, .ladder h2{
  text-wrap:balance;
}
/* Body paragraphs: 'pretty' rebalances the LAST few lines to prevent 1-2 character
   widows / orphans (e.g. 「なる。」 alone). Falls back gracefully on older browsers. */
p, dd, .num__d, .field__cap, .flip__truth, .welfare__card p, .ladder__desc, .flow__desc, .job__lead{
  text-wrap:pretty;
}
/* Phrases that must never break across a line (e.g., 「お困りですか？」, 巡回路).
   .nb softens to wrappable on small mobile so headlines don't overflow.
   .nb-strict stays nowrap regardless — use for short critical tokens (names, phone numbers). */
.nb{ white-space:nowrap; }
.nb-strict{ white-space:nowrap; }
img,video{display:block;max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--yellow);color:var(--navy)}

/* ─── shared utility ────────────────────────────────── */
.section__num{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(48px,9vw,120px); line-height:.85; letter-spacing:.04em;
  color:var(--navy); opacity:.10; margin:0;
  position:absolute; top:clamp(28px,4vw,48px); right:clamp(22px,4vw,56px);
  pointer-events:none; user-select:none;
}
.section__kicker{
  font-family:var(--latin); font-weight:500; font-style:italic;
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--navy); margin:0 0 24px;
  display:inline-flex; align-items:center; gap:14px;
}
.section__kicker::before{
  content:""; display:inline-block; width:42px; height:1px;
  background:var(--navy);
}
.section__kicker--light{ color:var(--yellow); }
.section__kicker--light::before{ background:var(--yellow); }
.section__h{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(34px,5.4vw,72px); line-height:1.18; letter-spacing:.02em;
  color:var(--navy); margin:0 0 56px; max-width:18ch;
}
.section__h--light{ color:var(--white); }
.section__h em{ font-style:normal; color:var(--gold); }
.accent{ color:var(--gold); }
.accent-y{ color:var(--yellow); }

/* ─── btn ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--sans); font-weight:500; font-size:15px;
  padding:16px 26px; border:1px solid currentColor;
  letter-spacing:.10em;
  transition:transform .35s ease, background .35s ease, color .35s ease, border-color .35s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.btn--primary:hover{ background:var(--yellow); color:var(--navy); border-color:var(--yellow); }
.btn--ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.6); }
.btn--ghost:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }
.btn--lg{ padding:20px 34px; font-size:16px; }
.btn--phone{
  flex-direction:column; align-items:flex-start; gap:6px;
  background:transparent; color:var(--white); border-color:var(--yellow);
  padding:18px 26px;
}
.btn--phone:hover{ background:var(--yellow); color:var(--navy); }
.btn--phone .btn__phoneTop{
  font-family:var(--latin); font-style:italic; font-size:11px;
  letter-spacing:.32em; text-transform:uppercase; opacity:.9;
}
.btn--phone .btn__phoneNum{
  font-family:var(--latin); font-size:28px; font-weight:500; letter-spacing:.04em;
}
.btn--phone .btn__phoneSub{
  font-size:11px; letter-spacing:.16em; opacity:.7;
}

/* ─── reveal ────────────────────────────────────────── */
.js [data-reveal]{ opacity:0; transform:translateY(40px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{ opacity:1; transform:none; transition:none; }
}
.nofx [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
.nofx .hero{ min-height:820px !important; }
.nofx .hero__bar{ height:48px !important; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px clamp(20px,4vw,56px);
  transition:background .45s ease, border-color .45s ease, padding .35s ease;
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
.nav.is-scrolled{
  background:rgba(245,243,238,.96);
  backdrop-filter:saturate(160%) blur(10px);
  border-color:var(--line-soft);
  padding:12px clamp(20px,4vw,56px);
}
.nav__brand{ display:inline-flex; align-items:center; position:relative; height:34px; }
.nav__logo{ height:34px; width:auto; display:block; transition:opacity .35s ease; }
.nav__logo--color{ position:absolute; inset:0; opacity:0; }
.nav.is-scrolled .nav__logo--white{ opacity:0; }
.nav.is-scrolled .nav__logo--color{ opacity:1; }
.nav__links{
  display:flex; gap:clamp(14px,2vw,32px);
  font-family:var(--latin); font-weight:500; font-size:13px;
  letter-spacing:.18em; color:var(--white);
  transition:color .35s ease;
}
.nav.is-scrolled .nav__links{ color:var(--navy); }
.nav__links a{ position:relative; padding:6px 0; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .35s ease;
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  font-family:var(--latin); font-weight:500; font-size:13px;
  letter-spacing:.18em; padding:10px 18px;
  background:var(--yellow); color:var(--navy); border:1px solid var(--yellow);
  transition:background .35s ease, color .35s ease;
}
.nav__cta:hover{ background:transparent; color:var(--yellow); }
.nav.is-scrolled .nav__cta:hover{ color:var(--navy); border-color:var(--navy); }

@media (max-width:840px){
  .nav__links{ display:none }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  padding:120px clamp(20px,4vw,56px) 120px;
  color:var(--white); overflow:hidden;
  background:var(--navy-deep);
}
.hero__media{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:brightness(.78) contrast(1.05) saturate(1.05);
}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,18,42,.55) 0%, rgba(6,18,42,.28) 35%, rgba(6,18,42,.85) 100%),
    linear-gradient(90deg, rgba(6,18,42,.78) 0%, rgba(6,18,42,.42) 45%, rgba(6,18,42,.20) 100%);
  pointer-events:none;
}
.hero__bar{
  position:absolute; left:0; right:0; height:8vh; background:#000;
  z-index:2; pointer-events:none;
}
.hero__bar--top{ top:0; }
.hero__bar--bot{ bottom:0; }
.hero__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.12;
  mix-blend-mode:overlay;
  background-image:
    radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.18) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1.5px 1.5px;
}

.hero__inner{
  position:relative; z-index:3; max-width:var(--max); width:100%;
}
.hero__eyebrow{
  font-family:var(--latin); font-style:italic; font-weight:500; font-size:13px;
  letter-spacing:.32em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:14px;
  margin:0 0 38px; color:var(--yellow);
}
.hero__eyebrow .dot{ font-size:6px; line-height:1; }
.hero__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(56px,10.4vw,162px); line-height:.96; letter-spacing:.02em;
  margin:0 0 32px; color:var(--white);
  text-shadow:0 2px 32px rgba(6,18,42,.6);
}
.hero__title .line{
  display:block; opacity:0; transform:translateY(60px);
  animation:heroIn 1.2s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__title .line--1{ animation-delay:.30s; }
.hero__title .line--2{ animation-delay:.55s; padding-left:.35em; }
.hero__title .line--3{ animation-delay:.80s; padding-left:.7em; color:var(--yellow); }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

.hero__sub{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(20px,2.4vw,30px); margin:0 0 18px; opacity:.92;
  text-shadow:0 2px 24px rgba(6,18,42,.5);
}
.hero__sub span{ color:var(--yellow); font-weight:500; }
.hero__tag{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(14px,1.4vw,17px); letter-spacing:.12em;
  margin:0 0 44px; opacity:.78;
}
.hero__ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:clamp(40px, 9vh, 110px); }

/* meta corner */
.hero__meta{
  position:absolute; left:clamp(20px,4vw,56px); bottom:calc(8vh + 12px); z-index:3;
  display:flex; gap:clamp(12px,2vw,28px); flex-wrap:wrap;
  font-family:var(--latin); font-style:italic; font-weight:500; font-size:11px;
  letter-spacing:.24em; color:rgba(255,255,255,.78); text-transform:uppercase;
  padding-top:clamp(16px,3vh,32px);
  border-top:1px solid rgba(255,255,255,.18);
  width:calc(100% - clamp(40px,8vw,112px));
  max-width:var(--max);
}
.hero__meta-item{ display:inline-flex; align-items:center; gap:8px; }
.hero__meta-item span{ color:var(--yellow); font-style:normal; font-weight:500; }
.hero__meta-item .dot.live{
  width:7px; height:7px; border-radius:50%; background:var(--yellow);
  box-shadow:0 0 0 0 var(--yellow); animation:pulse 1.6s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,212,0,.7); }
  70%{ box-shadow:0 0 0 14px rgba(255,212,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,212,0,0); }
}

.hero__scroll{
  position:absolute; right:clamp(20px,4vw,56px); bottom:calc(8vh + 12px); z-index:3;
  font-family:var(--latin); font-style:italic; font-size:11px; letter-spacing:.32em;
  text-transform:uppercase; color:rgba(255,255,255,.78);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero__scroll-line{
  width:1px; height:54px; background:rgba(255,255,255,.5); position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--yellow); animation:scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ top:-100%; }
  100%{ top:200%; }
}

@media (max-width:720px){
  .hero{ padding:120px 24px 140px; }
  .hero__meta{ display:none; }
  .hero__bar{ height:5vh; }
  .hero__title .line--2{ padding-left:.4em; }
  .hero__title .line--3{ padding-left:.8em; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:var(--navy); color:var(--yellow);
  border-top:1px solid var(--navy-line); border-bottom:1px solid var(--navy-line);
  padding:18px 0; overflow:hidden; white-space:nowrap;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(15px,1.6vw,20px); letter-spacing:.16em;
}
.marquee__track{
  display:inline-flex; gap:0; animation:marquee 38s linear infinite;
}
.marquee__track span{ padding:0 12px; }
.marquee__track .sep{ color:rgba(255,212,0,.45); }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ============================================================
   STATEMENT
   ============================================================ */
.statement{
  position:relative; padding:140px clamp(20px,4vw,56px) 140px;
  background:var(--paper); color:var(--navy);
  text-align:center;
}
.statement .section__kicker{ justify-content:center; display:inline-flex; }
.statement__h{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(36px,5.6vw,86px); line-height:1.18; letter-spacing:.04em;
  margin:.4em auto .8em; max-width:none;
  color:var(--navy);
  display:flex; flex-wrap:nowrap; gap:0 .25em; justify-content:center; align-items:baseline;
  white-space:nowrap;
}
.statement__h span{ display:inline-block; }
.statement__h i{ font-style:normal; color:var(--gold); padding:0 .2em; }
@media (max-width:880px){
  .statement__h{ flex-wrap:wrap; font-size:clamp(34px,8vw,56px); }
}
.statement__lede{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(15px,1.7vw,21px); line-height:2.1; letter-spacing:.04em;
  max-width:42ch; margin:0 auto 60px; color:var(--ink-soft);
}
.statement__lede em{ font-style:normal; background:linear-gradient(180deg, transparent 60%, rgba(255,212,0,.42) 60%); padding:0 .15em; white-space:nowrap; }
.statement__pull{
  margin:0 auto; max-width:680px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:48px 24px;
}
.statement__pull p{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(22px,3.4vw,40px); line-height:1.55; letter-spacing:.04em;
  color:var(--navy); margin:0;
}
.statement__pull strong{ color:var(--gold); font-weight:500; }

/* ============================================================
   NUMBERS (dark)
   ============================================================ */
.numbers{
  position:relative; padding:140px clamp(20px,4vw,56px);
  background:var(--navy); color:var(--white);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 40%),
    radial-gradient(80% 60% at 80% 0%, rgba(255,212,0,.05), transparent 60%);
}
.numbers .section__num{ color:var(--white); opacity:.07; }
.numbers__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--navy-line); border:1px solid var(--navy-line);
  margin-top:24px;
}
.num{
  background:var(--navy); padding:48px clamp(20px,2vw,32px);
  display:flex; flex-direction:column; gap:14px;
  position:relative; transition:background .4s ease;
}
.num:hover{ background:var(--navy-soft); }
.num__big{
  font-family:var(--latin); font-weight:500; line-height:.95;
  margin:0; display:flex; align-items:baseline; gap:8px;
  color:var(--yellow);
}
.num__v{ font-size:clamp(72px,9vw,128px); letter-spacing:-.02em; }
.num__u{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(15px,1.6vw,20px); letter-spacing:.06em;
  color:var(--white); padding-left:6px;
}
.num__l{
  font-family:var(--sans); font-weight:500; font-size:14px;
  letter-spacing:.12em; color:var(--white); margin:0;
  padding-bottom:14px; border-bottom:1px solid var(--navy-line);
}
.num__d{
  font-family:var(--sans); font-weight:300; font-size:13.5px; line-height:1.95;
  color:rgba(255,255,255,.74); margin:0;
}
@media (max-width:920px){ .numbers__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .numbers__grid{ grid-template-columns:1fr; } }

/* ============================================================
   PHILOSOPHY
   ============================================================ */
.philo{
  position:relative; padding:140px clamp(20px,4vw,56px);
  background:var(--paper);
}
.philo__grid{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(40px,6vw,96px); align-items:center;
}
.philo__h{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(34px,5.6vw,76px); line-height:1.2; letter-spacing:.02em;
  color:var(--navy); margin:0 0 36px;
}
.philo__copy p{
  font-family:var(--sans); font-weight:300;
  font-size:16px; line-height:2.1; letter-spacing:.04em;
  margin:0 0 20px; color:var(--ink-soft); max-width:46ch;
}
.philo__sign{
  font-family:var(--latin); font-style:italic; font-size:11.5px;
  letter-spacing:.16em; color:var(--ink-soft) !important;
  margin-top:32px !important;
  padding-top:18px; border-top:1px solid var(--line-soft);
  opacity:.78;
}
.philo__art{ margin:0; }
.philo__frame{
  position:relative; border:1px solid var(--line);
  background:var(--navy);
  aspect-ratio:4/5; overflow:hidden;
}
.philo__frame img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.04) saturate(1.05); }
.philo__frame::before{
  content:""; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.2); pointer-events:none; z-index:2;
}
.philo__art figcaption{
  font-family:var(--latin); font-style:italic; font-size:12px;
  letter-spacing:.16em; color:var(--ink-soft); margin-top:14px; text-align:right;
}
@media (max-width:840px){ .philo__grid{ grid-template-columns:1fr; } }

/* ============================================================
   MESSAGE (代表メッセージ)
   ============================================================ */
.message{
  position:relative; padding:140px clamp(20px,4vw,56px);
  background:var(--paper); color:var(--navy);
  text-align:center;
}
.message .section__kicker{ justify-content:center; display:inline-flex; }
.message__body{
  margin:0 auto; max-width:64ch;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(15px,1.5vw,18px); line-height:2.15; letter-spacing:.05em;
  color:var(--ink); text-align:left;
  position:relative; padding:0 clamp(0px,2vw,20px);
}
.message__body::before, .message__body::after{
  position:absolute;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(80px,8vw,128px); line-height:1; color:var(--gold); opacity:.22;
  pointer-events:none;
}
.message__body::before{ content:"\201C"; top:-20px; left:-30px; }
.message__body::after{ content:"\201D"; bottom:-60px; right:-20px; }
.message__head{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(28px,3.6vw,46px); line-height:1.4; letter-spacing:.04em;
  color:var(--navy); margin:0 0 36px;
  text-wrap:balance;
}
.message__body p{ margin:0 0 22px; }
.message__body .accent{ color:var(--gold); font-weight:500; }
.message__close{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(16px,1.7vw,21px); letter-spacing:.06em;
  color:var(--navy); margin-top:36px !important;
  padding-top:28px; border-top:1px solid var(--line);
}
.message__sig{
  display:flex; flex-direction:column; gap:6px;
  margin-top:28px; padding-top:24px; border-top:1px solid var(--line-soft);
  font-family:var(--latin); font-style:italic; font-size:13px;
  letter-spacing:.16em; color:var(--ink-soft); text-align:right;
}
.message__sig strong{ font-style:normal; font-family:var(--serif); font-weight:500; color:var(--navy); font-size:15px; letter-spacing:.04em; }

/* ============================================================
   FIELD (photo essay)
   ============================================================ */
.field{
  position:relative; padding:140px clamp(20px,4vw,56px);
  background:var(--paper-deep);
}
.field__grid{
  display:grid; grid-template-columns:repeat(5, 1fr); grid-auto-rows:minmax(220px, auto);
  gap:18px;
}
.field__cell{
  position:relative; margin:0; overflow:hidden;
  background:var(--navy);
  grid-column:span 2;
}
.field__cell--lg{ grid-column:span 3; grid-row:span 2; }
.field__cell img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s ease, filter .6s ease;
  filter:saturate(1.02);
}
.field__cell:hover img{ transform:scale(1.04); filter:saturate(1.18); }
.field__cell figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:32px clamp(16px,2vw,28px) 22px;
  color:var(--white);
  background:linear-gradient(0deg, rgba(6,18,42,.95) 0%, rgba(6,18,42,.80) 50%, rgba(6,18,42,0) 100%);
  display:flex; align-items:flex-end; gap:18px;
}
.field__no{
  font-family:var(--latin); font-style:italic; font-size:14px; letter-spacing:.18em;
  color:var(--yellow); flex:0 0 auto;
}
.field__cap{
  font-family:var(--sans); font-weight:300; font-size:14px; line-height:1.7; letter-spacing:.04em;
}
.field__cap strong{ color:var(--yellow); font-weight:500; }
@media (max-width:980px){
  .field__grid{ grid-template-columns:repeat(2,1fr); }
  .field__cell, .field__cell--lg{ grid-column:span 1; grid-row:auto; min-height:280px; }
}

/* ============================================================
   PERCEPTION FLIP
   ============================================================ */
.flip{
  position:relative; padding:140px clamp(20px,4vw,56px);
  background:var(--navy-deep); color:var(--white);
  background-image:
    radial-gradient(120% 60% at 0% 0%, rgba(255,212,0,.06), transparent 60%);
}
.flip .section__num{ color:var(--white); opacity:.07; }
.flip__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:18px; margin-top:24px;
}
.flip__card{
  padding:38px 32px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--navy-line);
  position:relative;
  transition:transform .45s ease, border-color .45s ease, background .45s ease;
}
.flip__card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,212,0,.4);
  background:rgba(255,212,0,.03);
}
.flip__myth{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(20px,2vw,26px); line-height:1.55; letter-spacing:.02em;
  color:var(--white); margin:0 0 24px;
}
.flip__myth span{
  display:block; font-family:var(--latin); font-style:italic;
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.flip__myth em{ font-style:normal; color:var(--gold); text-decoration:line-through; text-decoration-color:rgba(201,161,74,.7); }
.flip__truth{
  font-family:var(--sans); font-weight:300;
  font-size:14.5px; line-height:2.05; letter-spacing:.04em;
  color:rgba(255,255,255,.85); margin:0;
  padding-top:24px; border-top:1px solid var(--navy-line);
}
.flip__truth span{
  display:block; font-family:var(--latin); font-style:italic;
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:14px;
}
@media (max-width:880px){ .flip__grid{ grid-template-columns:1fr; } }

/* ============================================================
   JOBS
   ============================================================ */
.jobs{
  position:relative; padding:140px clamp(20px,4vw,56px);
  background:var(--paper);
}
.jobs__list{ display:flex; flex-direction:column; gap:18px; }
.job{
  display:grid; grid-template-columns:1.05fr 1.55fr;
  gap:clamp(24px,4vw,72px);
  padding:clamp(28px,4vw,56px);
  background:var(--white); border:1px solid var(--line);
  position:relative; overflow:hidden;
  transition:border-color .45s ease, background .45s ease;
}
.job:hover{ border-color:var(--navy); }
.job::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--yellow);
  transform:scaleY(0); transform-origin:top; transition:transform .55s ease;
}
.job:hover::before{ transform:scaleY(1); }
.job__head{}
.job__tag{
  font-family:var(--latin); font-style:italic; font-size:12px;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin:0 0 18px;
}
.job__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(28px,3.4vw,44px); line-height:1.2; letter-spacing:.02em;
  color:var(--navy); margin:0 0 18px;
}
.job__lead{
  font-family:var(--sans); font-weight:300; font-size:14.5px; line-height:1.95;
  color:var(--ink-soft); margin:0; max-width:36ch;
}
.job__data{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:0; margin:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.job__data > div{
  display:grid; grid-template-columns:96px 1fr;
  gap:12px; padding:18px 20px;
  border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  align-items:start;
}
.job__data dt{
  font-family:var(--latin); font-style:italic; font-size:10.5px;
  letter-spacing:.20em; text-transform:uppercase; color:var(--gold);
  margin-top:4px; white-space:nowrap;
}
.job__data dd{
  margin:0; font-family:var(--sans); font-weight:400; font-size:14px; line-height:1.8;
  color:var(--ink);
}
.job__data dd small{ display:block; font-size:12px; color:var(--ink-soft); margin-top:4px; }
.job__data dd small.dd-note{ font-family:var(--latin); font-style:italic; font-size:11px; color:var(--gold); letter-spacing:.04em; margin-top:6px; line-height:1.5; }
@media (max-width:880px){
  .job{ grid-template-columns:1fr; }
  .job__data{ grid-template-columns:1fr; }
}

/* ============================================================
   LADDER
   ============================================================ */
.ladder{
  position:relative; padding:140px clamp(20px,4vw,56px);
  background:var(--paper-deep);
}
.ladder__steps{
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
  gap:clamp(20px,3vw,48px); align-items:stretch; margin-top:32px;
}
.ladder__step{
  background:var(--white); border:1px solid var(--line);
  padding:42px 32px; position:relative;
  transition:transform .4s ease, box-shadow .4s ease;
}
.ladder__step:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(10,29,63,.35); }
.ladder__rank{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(36px,5vw,64px); letter-spacing:.04em; line-height:1; color:var(--navy);
  margin:0 0 8px;
}
.ladder__rankEn{
  font-family:var(--latin); font-style:italic; font-size:13px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin:0 0 22px;
}
.ladder__desc{
  font-family:var(--sans); font-weight:300; font-size:14px; line-height:1.95;
  color:var(--ink-soft); margin:0;
}
.ladder__arrow{
  align-self:center; font-family:var(--latin); font-style:italic;
  font-size:32px; color:var(--gold); line-height:1;
}
@media (max-width:880px){
  .ladder__steps{ grid-template-columns:1fr; }
  .ladder__arrow{ transform:rotate(90deg); justify-self:center; }
}

/* ============================================================
   WELFARE
   ============================================================ */
.welfare{
  position:relative; padding:140px clamp(20px,4vw,56px);
  background:var(--navy); color:var(--white);
}
.welfare .section__num{ color:var(--white); opacity:.07; }
.welfare__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--navy-line); border:1px solid var(--navy-line); margin-top:24px;
}
.welfare__card{
  background:var(--navy); padding:36px 28px;
  transition:background .4s ease;
}
.welfare__card:hover{ background:var(--navy-soft); }
.welfare__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(18px,2vw,24px); letter-spacing:.04em; color:var(--yellow);
  margin:0 0 14px; padding-bottom:14px; border-bottom:1px solid rgba(255,212,0,.3);
}
.welfare__card p:last-child{
  font-family:var(--sans); font-weight:300; font-size:13.5px; line-height:1.95;
  color:rgba(255,255,255,.78); margin:0;
}
@media (max-width:880px){ .welfare__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .welfare__grid{ grid-template-columns:1fr; } }

/* ============================================================
   FLOW
   ============================================================ */
.flow{
  position:relative; padding:140px clamp(20px,4vw,56px);
  background:var(--paper);
}
.flow__steps{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,3vw,36px); margin-top:32px;
  counter-reset:flow;
}
.flow__step{
  position:relative; padding:40px 32px 38px;
  background:var(--white); border:1px solid var(--line);
}
.flow__step::before{
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--yellow) 0%, transparent 100%);
}
.flow__no{
  font-family:var(--latin); font-style:italic; font-weight:500;
  font-size:14px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  display:block; margin-bottom:14px;
}
.flow__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(22px,2.4vw,30px); letter-spacing:.03em;
  color:var(--navy); margin:0 0 14px;
}
.flow__desc{
  font-family:var(--sans); font-weight:300; font-size:14.5px; line-height:1.95;
  color:var(--ink-soft); margin:0;
}
.flow__desc strong{ font-weight:500; color:var(--navy); background:linear-gradient(180deg, transparent 60%, rgba(255,212,0,.42) 60%); padding:0 .15em; }
@media (max-width:880px){ .flow__steps{ grid-template-columns:1fr; } }

/* ============================================================
   ENTRY (CTA + form)
   ============================================================ */
.entry{
  position:relative; padding:140px clamp(20px,4vw,56px);
  background:var(--navy-deep); color:var(--white);
  background-image:
    radial-gradient(60% 80% at 100% 0%, rgba(255,212,0,.10), transparent 60%),
    radial-gradient(40% 60% at 0% 100%, rgba(201,161,74,.06), transparent 70%);
}
.entry__inner{ max-width:1080px; margin:0 auto; }
.entry__h{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(34px,5.4vw,72px); line-height:1.25; letter-spacing:.03em;
  color:var(--white); margin:0 0 56px;
}
.entry__h em{ font-style:normal; color:var(--yellow); }
.entry__choices{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:60px;
}
.entry__choices .btn--primary{
  background:var(--yellow); color:var(--navy); border-color:var(--yellow);
  justify-content:center; padding:24px;
}
.entry__choices .btn--primary:hover{ background:transparent; color:var(--yellow); }
.entry__choices .btn--phone{ justify-content:center; align-items:center; text-align:center; }
@media (max-width:760px){ .entry__choices{ grid-template-columns:1fr; } }

.form{
  background:rgba(255,255,255,.04); border:1px solid var(--navy-line);
  padding:clamp(28px,4vw,56px);
  color-scheme: dark;
}
.form__lead{
  font-family:var(--latin); font-style:italic; font-size:13px;
  letter-spacing:.18em; color:rgba(255,255,255,.78); margin:0 0 36px;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.form .field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; padding:0; background:transparent; position:static; }
.form .field:last-of-type{ margin-bottom:0; }
.form .field__l{
  font-family:var(--latin); font-style:italic; font-size:11px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--yellow);
  background:transparent;
}
.form .field input, .form .field select, .form .field textarea{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent;
  border:1px solid var(--navy-line);
  color:var(--white);
  padding:14px 16px;
  font-family:var(--sans); font-weight:300; font-size:15px; letter-spacing:.02em;
  transition:border-color .35s ease, background .35s ease;
  border-radius:0;
  width:100%;
  box-shadow:none;
}
.form .field input:-webkit-autofill, .form .field select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--navy-deep) inset !important;
  -webkit-text-fill-color:var(--white) !important;
}
.form .field select{
  background-image:linear-gradient(45deg, transparent 50%, var(--yellow) 50%),
                   linear-gradient(135deg, var(--yellow) 50%, transparent 50%);
  background-position:calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:42px;
}
.form .field textarea{ resize:vertical; min-height:120px; font-family:var(--sans); }
.form .field input::placeholder, .form .field textarea::placeholder{ color:rgba(255,255,255,.42); }
.form .field input:focus, .form .field select:focus, .form .field textarea:focus{
  outline:0; border-color:var(--yellow); background:rgba(255,212,0,.04);
}
.form .field select option{ background:var(--navy-deep); color:var(--white); }
.form__submit{ margin-top:30px; width:100%; justify-content:center; }
.form__note{
  font-family:var(--latin); font-style:italic; font-size:12px;
  color:rgba(255,255,255,.55); margin:18px 0 0; letter-spacing:.12em;
}
.form__close{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(15px,1.4vw,18px); letter-spacing:.06em;
  color:var(--yellow); text-align:center;
  margin:24px 0 0;
}
@media (max-width:680px){ .form__row{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  background:var(--navy-deep); color:rgba(255,255,255,.7);
  padding:80px clamp(20px,4vw,56px) 60px;
  display:grid; grid-template-columns:1.2fr 1.5fr 1fr; gap:48px;
  border-top:1px solid var(--navy-line);
}
.foot__brand{ display:flex; flex-direction:column; gap:18px; }
.foot__logo{ width:100%; max-width:360px; height:auto; opacity:.94; image-rendering:auto; }
.foot__sample{ font-family:var(--latin); font-style:italic; font-size:11px; color:rgba(255,255,255,.42); letter-spacing:.18em; }
.foot__addr{
  font-family:var(--sans); font-weight:300; font-size:13px; line-height:1.95;
  color:rgba(255,255,255,.7); margin:0;
}
.foot__nav{
  display:grid; grid-template-columns:repeat(2,max-content); gap:10px 32px;
  font-family:var(--latin); font-style:italic; font-size:13px; letter-spacing:.18em;
}
.foot__nav a{ color:rgba(255,255,255,.78); transition:color .3s ease; }
.foot__nav a:hover{ color:var(--yellow); }
.foot__legal{
  font-family:var(--sans); font-weight:300; font-size:12px; line-height:1.85;
  color:rgba(255,255,255,.5); margin:0; align-self:end;
}
@media (max-width:880px){
  .foot{ grid-template-columns:1fr; }
}

/* ============================================================
   shared section anchor
   ============================================================ */
section[id]{ scroll-margin-top:80px; }
.statement, .numbers, .philo, .field, .flip, .jobs, .ladder, .welfare, .flow, .entry{ position:relative; }

/* ============================================================
   NAV TOGGLE (mobile hamburger) — hidden on desktop
   ============================================================ */
.nav__toggle{
  display:none;
  width:44px; height:44px; padding:0;
  align-items:center; justify-content:center;
  position:relative; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.4);
}
.nav.is-scrolled .nav__toggle{ border-color:var(--line); }
.nav__toggle-bar{
  position:absolute; left:10px; right:10px; height:1.5px;
  background:var(--white); transition:transform .35s ease, opacity .25s ease, background .35s ease, top .35s ease;
}
.nav.is-scrolled .nav__toggle-bar{ background:var(--navy); }
.nav__toggle-bar:nth-child(1){ top:13px; }
.nav__toggle-bar:nth-child(2){ top:21px; }
.nav__toggle-bar:nth-child(3){ top:29px; }
.menu-open .nav__toggle-bar:nth-child(1){ top:21px; transform:rotate(45deg); }
.menu-open .nav__toggle-bar:nth-child(2){ opacity:0; }
.menu-open .nav__toggle-bar:nth-child(3){ top:21px; transform:rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:90;
  background:var(--navy-deep);
  display:flex; align-items:center; justify-content:center;
  padding:80px 28px 28px;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
.menu[hidden]{ display:none; }
.menu-open .menu{ opacity:1; pointer-events:auto; }
.menu__inner{
  width:100%; max-width:480px;
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--serif); font-weight:500;
}
.menu__inner a{
  display:flex; align-items:center; padding:18px 20px;
  font-size:22px; letter-spacing:.06em; color:var(--white);
  border-bottom:1px solid var(--navy-line);
  transition:color .25s ease, padding .35s ease;
}
.menu__inner a:hover{ color:var(--yellow); padding-left:28px; }
.menu__cta{
  margin-top:24px;
  background:var(--yellow); color:var(--navy) !important;
  border:0 !important; justify-content:center !important;
  font-family:var(--sans); font-weight:500; font-size:16px !important;
  letter-spacing:.18em;
}
.menu__cta:hover{ padding-left:20px !important; opacity:.9; }

/* Lock body scroll when mobile menu open */
.menu-open{ overflow:hidden; }

/* ============================================================
   RESPONSIVE — TABLET / MOBILE (≤ 768px)
   ============================================================ */
@media (max-width:768px){
  body{ font-size:15px; line-height:1.85; }

  /* Allow .nb to wrap on mobile so headlines don't overflow.
     .nb-strict (used for proper names + phone numbers) keeps nowrap. */
  .nb{ white-space:normal; }
  .nb-strict{ white-space:nowrap; }

  /* Section chrome */
  section[id], .statement, .numbers, .philo, .message, .field, .flip, .jobs, .ladder, .welfare, .flow, .entry{
    padding-top:80px; padding-bottom:80px;
  }
  .section__num{
    font-size:clamp(40px,16vw,72px);
    top:18px; right:14px; opacity:.06;
  }
  .section__kicker{ font-size:11px; letter-spacing:.24em; }
  .section__h{ font-size:clamp(28px,7.4vw,42px); margin-bottom:36px; max-width:none; }

  /* Nav */
  .nav{ padding:14px 18px; }
  .nav.is-scrolled{ padding:10px 18px; }
  .nav__logo{ height:28px; }
  .nav__cta{ font-size:11px; padding:8px 12px; letter-spacing:.14em; }
  .nav__toggle{ display:inline-flex; }

  /* Hero */
  .hero{ padding:96px 20px 100px; min-height:auto; }
  .hero__bar{ height:32px; }
  .hero__eyebrow{ font-size:11px; letter-spacing:.22em; gap:10px; margin-bottom:24px; }
  .hero__title{ font-size:clamp(48px,15.5vw,108px); line-height:1; margin-bottom:24px; text-shadow:0 2px 24px rgba(6,18,42,.7); }
  .hero__title .line--2{ padding-left:.2em; }
  .hero__title .line--3{ padding-left:.4em; }
  .hero__sub{ font-size:18px; margin-bottom:14px; }
  .hero__tag{ font-size:13px; letter-spacing:.08em; margin-bottom:32px; }
  .hero__ctas{ flex-direction:column; gap:10px; margin-bottom:0; }
  .hero__ctas .btn{ width:100%; justify-content:center; }
  .hero__meta{ display:none; }
  .hero__scroll{ display:none; }

  /* Marquee */
  .marquee{ font-size:13px; padding:14px 0; }

  /* Statement */
  .statement{ text-align:center; }
  .statement__h{ flex-wrap:wrap; font-size:clamp(32px,10vw,52px); white-space:normal; }
  .statement__lede{ font-size:15px; line-height:2; padding:0 4px; }
  .statement__lede br{ display:none; }
  .statement__pull{ padding:32px 12px; }
  .statement__pull p{ font-size:21px; line-height:1.7; }

  /* Numbers */
  .numbers__grid{ grid-template-columns:1fr; }
  .num{ padding:32px 22px; }
  .num__big{ gap:6px; }
  .num__v{ font-size:64px; }
  .num__u{ font-size:14px; }
  .num__l{ font-size:13px; letter-spacing:.08em; }
  .num__d{ font-size:13px; line-height:1.85; overflow-wrap:anywhere; }

  /* Philosophy */
  .philo__grid{ grid-template-columns:1fr; gap:36px; }
  .philo__h{ font-size:clamp(28px,7.4vw,42px); margin-bottom:24px; }
  .philo__copy p{ max-width:none; font-size:14.5px; line-height:1.95; overflow-wrap:anywhere; }
  .philo__sign{ font-size:12px; }
  .philo__art figcaption{ font-size:11px; }

  /* Message (代表メッセージ) */
  .message__body{ padding:0; }
  .message__body::before, .message__body::after{ font-size:60px; }
  .message__body::before{ top:-12px; left:-8px; }
  .message__body::after{ bottom:-40px; right:-4px; }
  .message__head{ font-size:clamp(24px,6.6vw,34px); margin-bottom:24px; }
  .message__body{ font-size:15px; line-height:1.95; max-width:none; }
  .message__body p{ overflow-wrap:anywhere; }
  .message__close{ font-size:16px; margin-top:24px !important; padding-top:20px; }
  .message__sig{ font-size:12px; }

  /* Field photo essay — 1 col */
  .field__grid{ grid-template-columns:1fr; gap:14px; grid-auto-rows:auto; }
  .field__cell, .field__cell--lg{ grid-column:span 1; grid-row:auto; min-height:240px; aspect-ratio:16/10; }
  .field__cell figcaption{ padding:18px 16px 14px; gap:10px; }
  .field__no{ font-size:12px; flex:0 0 auto; }
  .field__cap{ font-size:13px; line-height:1.6; overflow-wrap:anywhere; }

  /* Flip cards */
  .flip__grid{ grid-template-columns:1fr; gap:12px; }
  .flip__card{ padding:30px 22px; }
  .flip__myth{ font-size:18px; }
  .flip__truth{ font-size:13.5px; line-height:1.95; overflow-wrap:anywhere; }

  /* Jobs */
  .jobs__list{ gap:12px; }
  .job{ grid-template-columns:1fr; padding:28px 22px; gap:24px; }
  .job__title{ font-size:26px; }
  .job__lead{ font-size:13.5px; max-width:none; overflow-wrap:anywhere; }
  .job__data{ grid-template-columns:1fr; }
  .job__data > div{ grid-template-columns:1fr; gap:4px; padding:14px 16px; }
  .job__data dt{ font-size:10.5px; letter-spacing:.18em; margin-top:0; }
  .job__data dd{ font-size:14px; overflow-wrap:anywhere; }

  /* Ladder */
  .ladder__steps{ grid-template-columns:1fr; gap:16px; }
  .ladder__step{ padding:30px 24px; }
  .ladder__rank{ font-size:36px; }
  .ladder__rankEn{ font-size:11px; letter-spacing:.22em; margin-bottom:14px; }
  .ladder__desc{ font-size:13.5px; }
  .ladder__arrow{ transform:rotate(90deg); justify-self:center; font-size:24px; }

  /* Welfare */
  .welfare__grid{ grid-template-columns:1fr; }
  .welfare__card{ padding:28px 22px; }
  .welfare__title{ font-size:18px; }
  .welfare__card p:last-child{ font-size:13px; line-height:1.85; overflow-wrap:anywhere; }

  /* Flow */
  .flow__steps{ grid-template-columns:1fr; gap:14px; }
  .flow__step{ padding:30px 22px 28px; }
  .flow__title{ font-size:20px; }
  .flow__desc{ font-size:13.5px; overflow-wrap:anywhere; }

  /* Entry */
  .entry__h{ font-size:clamp(26px,7.6vw,40px); margin-bottom:36px; line-height:1.3; }
  .entry__choices{ grid-template-columns:1fr; gap:12px; margin-bottom:40px; }
  .entry__choices .btn--primary{ padding:20px; }
  .btn--phone{ padding:16px 18px; }
  .btn--phone .btn__phoneNum{ font-size:24px; }

  /* Form */
  .form{ padding:24px 18px; }
  .form__lead{ font-size:12px; margin-bottom:24px; }
  .form__row{ grid-template-columns:1fr; gap:0; margin-bottom:0; }
  .form .field input, .form .field select, .form .field textarea{ padding:14px 14px; font-size:16px; /* 16px prevents iOS zoom on focus */ }
  .form__submit{ margin-top:18px; padding:18px 22px; }
  .form__close{ font-size:14px; margin-top:18px; }

  /* Philosophy signature — stack neatly on narrow viewports so the president's name doesn't split. */
  .philo__sign{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }

  /* Footer */
  .foot{ grid-template-columns:1fr; gap:30px; padding:64px 22px 48px; text-align:left; }
  .foot__brand{ gap:14px; }
  .foot__logo{ max-width:280px; }
  .foot__addr{ font-size:12.5px; }
  .foot__nav{ grid-template-columns:repeat(2,1fr); gap:8px 18px; font-size:12px; }
  .foot__legal{ font-size:11px; }

  /* Touch-target safety: every <a> & <button> at least 44px tall */
  .nav__cta, .nav__toggle, .btn, .form__submit, .menu__inner a{ min-height:44px; }

  /* Phone numbers should never break across lines on mobile */
  .foot__addr{ overflow-wrap:anywhere; }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================================ */
@media (max-width:480px){
  /* Tighter padding on the smallest devices */
  section[id], .statement, .numbers, .philo, .message, .field, .flip, .jobs, .ladder, .welfare, .flow, .entry{
    padding-top:64px; padding-bottom:64px;
    padding-left:18px; padding-right:18px;
  }
  .hero{ padding:88px 18px 96px; }
  .hero__title{ font-size:clamp(44px,14vw,72px); }
  .hero__sub{ font-size:17px; }
  .hero__tag{ font-size:12.5px; }

  .marquee{ font-size:12px; letter-spacing:.12em; }

  .statement__h{ font-size:clamp(28px,9vw,40px); }
  .statement__pull p{ font-size:18px; }

  .num__v{ font-size:54px; }
  .num__u{ font-size:13px; }

  .philo__h{ font-size:clamp(26px,7vw,36px); }
  .message__head{ font-size:clamp(22px,6.4vw,30px); }

  .field__cell, .field__cell--lg{ aspect-ratio:4/3; min-height:220px; }
  .field__cap{ font-size:12.5px; }

  .flip__myth{ font-size:17px; }

  .job__title{ font-size:22px; }
  .ladder__rank{ font-size:32px; }
  .welfare__title{ font-size:17px; }
  .flow__title{ font-size:19px; }

  .entry__h{ font-size:clamp(24px,7vw,34px); }
  .btn--phone .btn__phoneNum{ font-size:22px; letter-spacing:.02em; }

  .foot{ padding:56px 18px 40px; }
  .foot__nav{ grid-template-columns:1fr; gap:6px; }
}