/* ==========================================================================
   RERIDE TAXI — style.css
   Design system: navy/white rhythm, generous whitespace, quiet motion.
   ========================================================================== */

:root{
  --brand:#043F8B;
  --brand-600:#0A55B5;
  --sky:#4A8FD4;
  --navy-900:#041B3D;
  --navy-950:#020F24;
  --accent:#F5B301;
  --ink:#0E1726;
  --text:#243042;
  --muted:#55606F;
  --line:#DCE3EC;
  --bg:#FFFFFF;
  --bg-alt:#F2F5F9;
  --on-dark-muted:#BFCBD9;
  --line-green:#06C755;

  --container:1200px;
  --gutter:clamp(20px,5vw,40px);
  --section-y:clamp(80px,12vw,160px);

  --radius-card:16px;
  --radius-img:12px;
  --radius-pill:999px;
  --radius-input:8px;

  --shadow-1:0 10px 30px rgba(4,27,61,.08);

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.8s;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:112px;}
@media (max-width:768px){ html{ scroll-padding-top:136px; } }
body{
  margin:0;
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  font-size:16px;
  line-height:1.9;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
@media (max-width:600px){ body{ font-size:15px; } }
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;margin:0;padding:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
h1,h2,h3,h4,p{margin:0;}
input,textarea{font:inherit;}
svg{display:block;}

h1,h2,h3,h4,.palt{font-feature-settings:"palt";}
.font-en{
  font-family:"Montserrat",sans-serif;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}
h1{
  font-size:clamp(2.25rem,5.2vw,4.5rem);
  line-height:1.3;
  letter-spacing:.04em;
  font-weight:700;
}
h2{
  font-size:clamp(1.75rem,3.2vw,2.75rem);
  line-height:1.4;
  font-weight:700;
  letter-spacing:.02em;
}
h3{ font-size:clamp(1.15rem,1.8vw,1.4rem); font-weight:700; line-height:1.6; }

.label-en{
  display:inline-block;
  font-family:"Montserrat",sans-serif;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brand-600);
}
.label-en.on-dark{ color:var(--sky); }
.label-en--tight{ letter-spacing:.12em; }
.label-en::after{
  content:"";
  display:block;
  width:28px;height:2px;
  margin-top:.6em;
  background:currentColor;
  opacity:.45;
}

.section-title{
  display:flex;
  align-items:center;
  gap:.7em;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text);
  margin-bottom:1.2em;
}
.section-title::before{
  content:"";
  width:24px;height:2px;
  background:var(--brand);
  flex:none;
}
.section-dark .section-title,
.section-title.on-dark{ color:#fff; }
.section-dark .section-title::before{ background:var(--sky); }

/* ---------- layout helpers ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-y); }
.section-dark{
  background:var(--navy-900);
  color:#fff;
}
.section-alt{ background:var(--bg-alt); }

/* ---------- accessibility ---------- */
.skip-link{
  position:absolute;
  left:8px;
  top:-60px;
  background:var(--accent);
  color:var(--navy-950);
  padding:.75em 1.2em;
  border-radius:var(--radius-input);
  font-weight:700;
  z-index:1000;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:8px; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- reveal animation ---------- */
html.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
html.js .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* line-break helper: shown only on narrow viewports */
br.sp{ display:none; }
@media (max-width:600px){ br.sp{ display:inline; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  min-height:52px;
  padding:.9em 1.8em;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:1.1em; height:1.1em; flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:var(--accent);
  color:var(--navy-950);
  box-shadow:var(--shadow-1);
}
.btn-primary:hover{ background:#FFC72C; }
.btn-outline{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
}
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-outline-dark{
  background:transparent;
  color:var(--brand);
  border:1.5px solid var(--line);
}
.btn-outline-dark:hover{ background:var(--bg-alt); border-color:var(--brand); }
.btn-line{
  background:var(--line-green);
  color:var(--navy-950);
  box-shadow:0 10px 24px rgba(6,199,85,.28);
}
.btn-line:hover{ background:#05b34c; }
.btn-line:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,255,255,.7);
}
.section-dark .btn-line:focus-visible,
.hero .btn-line:focus-visible,
.recruit-cta .btn-line:focus-visible,
.mobile-nav .btn-line:focus-visible{
  outline-color:var(--accent);
  box-shadow:0 0 0 4px rgba(2,15,36,.7);
}
.btn-block{ width:100%; }

/* size modifiers */
.btn--sm{ min-height:40px; padding:.6em 1.3em; font-size:.85rem; }
.btn--lg{ min-height:60px; padding:1.1em 2.4em; font-size:1.05rem; }

.pill-cta{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.6em 1.4em;
  border-radius:var(--radius-pill);
  background:var(--accent);
  color:var(--navy-950);
  font-weight:700;
  font-size:.9rem;
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.pill-cta:hover{ background:#FFC72C; transform:translateY(-1px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:500;
  height:88px;
  display:flex;
  align-items:center;
  background:transparent;
  transition:height .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.site-header.is-scrolled{
  height:64px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  box-shadow:0 4px 20px rgba(4,27,61,.06);
}

.brand{
  display:flex;
  align-items:center;
  gap:.65em;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.03em;
  color:#fff;
  transition:color .35s var(--ease);
}
.site-header.is-scrolled .brand{ color:var(--navy-950); }
.brand img{ width:40px; height:40px; border-radius:10px; flex:none; }

.main-nav{ display:flex; align-items:center; gap:clamp(1.2rem,2vw,2.2rem); }
.main-nav a:not(.pill-cta){
  color:#fff;
  font-weight:400;
  font-size:.92rem;
  position:relative;
  padding-block:.3em;
  transition:color .35s var(--ease);
}
.site-header.is-scrolled .main-nav a:not(.pill-cta){ color:var(--text); }
.main-nav a:not(.pill-cta)::after{
  content:"";
  position:absolute;
  left:0;right:100%;
  bottom:0;
  height:2px;
  background:currentColor;
  transition:right .3s var(--ease);
}
.main-nav a:not(.pill-cta):hover::after{ right:0; }
.main-nav a[aria-current="page"]:not(.pill-cta){ font-weight:700; }
.main-nav a[aria-current="page"]:not(.pill-cta)::after{ right:0; }
.mobile-nav-list a[aria-current="page"]{ color:var(--accent); }

.nav-toggle{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  color:#fff;
  transition:color .35s var(--ease);
}
.site-header.is-scrolled .nav-toggle{ color:var(--navy-950); }
.nav-toggle .bar{
  position:relative;
  width:24px;height:2px;
  background:currentColor;
}
.nav-toggle .bar::before,.nav-toggle .bar::after{
  content:"";
  position:absolute;
  left:0;width:24px;height:2px;
  background:currentColor;
  transition:transform .3s var(--ease),top .3s var(--ease);
}
.nav-toggle .bar::before{ top:-7px; }
.nav-toggle .bar::after{ top:7px; }
.nav-toggle[aria-expanded="true"] .bar{ background:transparent; }
.nav-toggle[aria-expanded="true"] .bar::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar::after{ top:0; transform:rotate(-45deg); }

.mobile-nav{
  position:fixed;
  inset:0;
  z-index:600;
  background:var(--navy-950);
  display:flex;
  flex-direction:column;
  padding:clamp(24px,6vw,40px);
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform .45s var(--ease),visibility 0s linear .45s;
}
.mobile-nav.is-open{
  transform:translateY(0);
  visibility:visible;
  transition:transform .45s var(--ease),visibility 0s linear 0s;
}
.mobile-nav-head{
  display:flex;justify-content:flex-end;
}
.mobile-nav-close{ width:44px;height:44px;color:#fff;display:flex;align-items:center;justify-content:center; }
.mobile-nav-list{
  margin-top:clamp(30px,10vh,80px);
  display:flex;flex-direction:column;gap:1.6rem;
}
.mobile-nav-list a{
  color:#fff;
  font-size:clamp(1.4rem,6vw,2rem);
  font-weight:700;
}
.mobile-nav-foot{
  margin-top:auto;
  display:flex;flex-direction:column;gap:1rem;
}

@media (max-width:900px){
  .main-nav > a:not(.pill-cta){ display:none; }
  .main-nav .pill-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--navy-950);
  color:#fff;
}
.hero-media{
  position:absolute; inset:0;
  z-index:0;
}
.hero-media video,.hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  position:absolute;inset:0;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(2,15,36,.55) 0%,rgba(2,15,36,.35) 40%,rgba(2,15,36,.85) 100%),
    linear-gradient(100deg,rgba(4,27,61,.75) 0%,rgba(4,27,61,.25) 55%,rgba(4,63,139,.15) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding-block:clamp(120px,20vh,220px) clamp(48px,8vh,96px);
}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:.6em;
  margin-bottom:1.4em;
}
.badge{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.5em 1em;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  font-size:.8rem;
  font-weight:700;
  backdrop-filter:blur(6px);
}
.badge::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  flex:none;
}
.hero-en{
  display:block;
  font-family:"Montserrat",sans-serif;
  font-weight:700;
  font-size:clamp(1rem,2vw,1.3rem);
  letter-spacing:.3em;
  color:var(--sky);
  margin-bottom:.6em;
}
.hero h1{ word-break:keep-all; }
.hero-sub{
  margin-top:1.4em;
  max-width:38em;
  font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.9;
  color:var(--on-dark-muted);
}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:1em;
  margin-top:2.2em;
}
.hero-foot{
  position:absolute;
  right:var(--gutter);
  bottom:clamp(20px,4vh,40px);
  z-index:3;
  display:flex;
  align-items:center;
  gap:1.4em;
}
.hero-scroll{
  display:flex;align-items:center;gap:.6em;
  font-size:.75rem;letter-spacing:.15em;
  color:var(--on-dark-muted);
  text-transform:uppercase;
}
.hero-scroll::after{
  content:"";
  width:1px;height:32px;
  background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);
  animation:scrollline 2.2s var(--ease) infinite;
}
@keyframes scrollline{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  50.01%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}
.video-toggle{
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex:none;
  transition:background-color .3s var(--ease);
}
.video-toggle:hover{ background:rgba(255,255,255,.15); }
.video-toggle .icon-play{ display:none; }
.video-toggle[aria-pressed="true"] .icon-play{ display:block; }
.video-toggle[aria-pressed="true"] .icon-pause{ display:none; }

@media (prefers-reduced-motion:reduce){
  .hero-scroll::after{ animation:none; }
}
@media (max-width:600px){
  .hero{ flex-direction:column; align-items:stretch; }
  .hero-foot{ position:static; margin-top:2rem; justify-content:space-between; }
}

/* ==========================================================================
   News
   ========================================================================== */
.news{
  background:var(--bg-alt);
  border-bottom:1px solid var(--line);
  padding-block:clamp(48px,6vw,64px);
}
.news-list{
  display:flex;
  flex-direction:column;
}
.news-item{
  display:flex;
  align-items:baseline;
  gap:clamp(1rem,3vw,2.5rem);
  padding-block:1.4em;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.news-item:last-child{ border-bottom:1px solid var(--line); }
.news-date{ font-family:"Montserrat",sans-serif;font-weight:600;color:var(--muted);font-size:.9rem;flex:none;width:6.5em; }
.news-cat{
  flex:none;
  min-width:6em;
  text-align:center;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--brand-600);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:.3em .9em;
}
.news-title{ flex:1 1 300px; font-size:.98rem; }

/* ==========================================================================
   Philosophy
   ========================================================================== */
.philosophy-grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
}
.philosophy-visual{ display:flex; flex-direction:column; gap:clamp(1.2rem,3vw,2rem); }
.philosophy-en{
  font-family:"Montserrat",sans-serif;
  font-weight:700;
  font-size:clamp(3rem,9vw,6rem);
  line-height:.9;
  letter-spacing:.02em;
  color:var(--brand);
}
.philosophy-photo{
  border-radius:var(--radius-img);
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
.philosophy-photo img{ width:100%; height:auto; }
.philosophy-lead{
  margin-top:1.6em;
  color:var(--muted);
  max-width:34em;
}
.philosophy-cols{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
}
.philosophy-col h3{ margin-bottom:.6em; }
.philosophy-col p{ color:var(--muted); font-size:.95rem; }
.philosophy-col .num{
  font-family:"Montserrat",sans-serif;
  font-weight:700;
  color:var(--brand-600);
  font-size:.85rem;
  letter-spacing:.1em;
  display:block;
  margin-bottom:.8em;
}
@media (max-width:900px){
  .philosophy-grid{ grid-template-columns:1fr; }
  .philosophy-cols{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Facts
   ========================================================================== */
.facts-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden;
}
.fact-tile{
  background:#fff;
  padding:clamp(1.8rem,3vw,2.6rem) clamp(1.2rem,2vw,1.8rem);
  text-align:center;
}
.fact-num{
  font-family:"Montserrat",sans-serif;
  font-weight:700;
  font-size:clamp(1.5rem,3vw,2.6rem);
  color:var(--brand);
  display:block;
  line-height:1.1;
  letter-spacing:.02em;
  white-space:nowrap;
}
.fact-num sup{ font-size:.5em; margin-left:.1em; }
.fact-num-prefix{ font-size:.42em; letter-spacing:.05em; margin-right:.2em; vertical-align:middle; }
.fact-label{ margin-top:.6em; color:var(--muted); font-size:.85rem; }
@media (max-width:480px){
  .fact-num{ font-size:clamp(1.3rem,6vw,1.8rem); }
}
.facts-note{
  margin-top:2rem;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.8;
}
@media (max-width:900px){
  .facts-grid{ grid-template-columns:repeat(2,1fr); }
}
.facts-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:640px){
  .facts-grid.cols-3{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Service cards
   ========================================================================== */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  flex-wrap:wrap;
  margin-bottom:clamp(2rem,4vw,3.5rem);
}
.section-head .label-en{ display:block; margin-bottom:.6em; }
.service-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2.5vw,1.75rem);
}
.service-card{
  position:relative;
  display:block;
  border-radius:var(--radius-card);
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:var(--shadow-1);
}
.service-card img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.service-card:hover img,
.service-card:focus-visible img{ transform:scale(1.04); }
.service-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(2,15,36,0) 40%,rgba(2,15,36,.82) 100%);
  transition:background .3s var(--ease);
}
.service-card:hover::after,
.service-card:focus-visible::after{
  background:linear-gradient(180deg,rgba(2,15,36,.1) 0%,rgba(2,15,36,.9) 100%);
}
.service-card-overlay{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  display:block;
  padding:clamp(1rem,2.5vw,1.6rem);
  color:#fff;
}
.service-card-label{
  display:block;
  font-weight:700;
  font-size:.98rem;
}
.service-card-desc{
  display:flex;
  align-items:center;
  gap:.4em;
  font-size:.8rem;
  color:var(--on-dark-muted);
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  transition:max-height .3s var(--ease),opacity .3s var(--ease),margin-top .3s var(--ease);
}
.service-card-desc svg{ flex:none; transition:transform .3s var(--ease); }
.service-card:hover .service-card-desc,
.service-card:focus-visible .service-card-desc{
  max-height:3em;
  opacity:1;
  margin-top:.4em;
}
.service-card:hover .service-card-desc svg,
.service-card:focus-visible .service-card-desc svg{ transform:translateX(3px); }
@media (max-width:640px){
  .service-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Why RERIDE
   ========================================================================== */
.why-grid{
  display:grid;
  grid-template-columns:.9fr 1.5fr;
  gap:clamp(2rem,5vw,4rem);
}
.why-sticky{ align-self:start; position:sticky; top:120px; }
.why-sticky p{ color:var(--on-dark-muted); margin-top:1.2em; max-width:26em; }
.why-list{ display:flex; flex-direction:column; }
.why-item{
  display:flex;
  gap:clamp(1rem,3vw,2rem);
  padding-block:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid rgba(255,255,255,.12);
}
.why-item:last-child{ border-bottom:1px solid rgba(255,255,255,.12); }
.why-num{
  font-family:"Montserrat",sans-serif;
  font-weight:700;
  font-size:1.1rem;
  color:var(--sky);
  flex:none;
  width:2.4em;
}
.why-item h3{ color:#fff; }
.why-item p{ color:var(--on-dark-muted); margin-top:.5em; font-size:.95rem; }
.why-punch{
  margin-top:clamp(2rem,4vw,3rem);
  font-size:clamp(1.1rem,2vw,1.4rem);
  font-weight:700;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:clamp(1.6rem,3vw,2.2rem);
}
@media (max-width:900px){
  .why-grid{ grid-template-columns:1fr; }
  .why-sticky{ position:static; }
}

/* ==========================================================================
   Recruit CTA (navy, full width photo)
   ========================================================================== */
.recruit-cta{
  background:var(--navy-900);
  color:#fff;
}
.recruit-cta-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.recruit-cta-copy .label-en{ margin-bottom:1em; display:block; }
.recruit-cta-copy p.lead{ margin-top:1.2em; color:var(--on-dark-muted); }
.recruit-cta-stats{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(1.5rem,4vw,3rem);
  margin-top:2em;
  padding-top:1.6em;
  border-top:1px solid rgba(255,255,255,.16);
}
.recruit-cta-stat{ display:flex; flex-direction:column; }
.stat-num{
  font-family:"Montserrat",sans-serif;
  font-weight:700;
  font-size:clamp(1.8rem,3vw,2.4rem);
  color:var(--accent);
  letter-spacing:.02em;
  white-space:nowrap;
}
.stat-num sup{ font-size:.5em; margin-left:.1em; }
.stat-label{ margin-top:.4em; font-size:.8rem; color:var(--on-dark-muted); }
.recruit-points{
  margin-top:2.2em;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1em;
}
.recruit-points li{
  display:flex; gap:.7em; align-items:flex-start;
  font-size:.92rem;
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-card);
  padding:1em 1.2em;
}
.recruit-points li svg{ flex:none; margin-top:.2em; color:var(--accent); width:1.1em;height:1.1em; }
.recruit-cta-actions{ margin-top:2.4em; display:flex; flex-wrap:wrap; gap:1em; }
.recruit-cta-photo{
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-1);
  aspect-ratio:3/4;
}
.recruit-cta-photo img{ width:100%;height:100%;object-fit:cover; }
@media (max-width:900px){
  .recruit-cta-grid{ grid-template-columns:1fr; }
  .recruit-cta-photo{ order:-1; aspect-ratio:16/9; }
}
@media (max-width:640px){
  .recruit-points{ grid-template-columns:1fr; }
  .recruit-cta-stats{ gap:1.5rem; }
}

/* ==========================================================================
   Nagoya reel (marquee)
   ========================================================================== */
.reel{ overflow:hidden; }
.reel-head{ text-align:center; margin-bottom:clamp(2rem,4vw,3rem); padding-inline:var(--gutter); }
.reel-head .label-en{ margin-bottom:.6em; }
.marquee-wrap{
  display:flex;
  flex-direction:column;
  gap:clamp(.6rem,1.5vw,1rem);
}
.marquee-row{
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{
  display:flex;
  gap:clamp(.6rem,1.5vw,1rem);
  width:max-content;
  animation:marquee-left 42s linear infinite;
}
.marquee-group{
  display:flex;
  gap:inherit;
  flex:none;
}
.marquee-row.reverse .marquee-track{ animation-name:marquee-right; }
.marquee-row:hover .marquee-track{ animation-play-state:paused; }
.marquee-track img{
  height:clamp(140px,18vw,220px);
  width:auto;
  border-radius:var(--radius-img);
  flex:none;
}
@keyframes marquee-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes marquee-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

/* Static grid fallback for reduced motion: dissolving .marquee-group via
   display:contents is unreliable for flex-wrap in some browsers, so instead
   the group itself wraps its own images (duplicate group stays hidden). */
@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; flex-wrap:wrap; width:100%; }
  .marquee-row{ overflow:visible; mask-image:none; -webkit-mask-image:none; }
  .marquee-group{ flex-wrap:wrap; width:100%; }
  .marquee-group[aria-hidden="true"]{ display:none; }
}
html.reel-static .marquee-track{ animation:none; flex-wrap:wrap; width:100%; }
html.reel-static .marquee-row{ overflow:visible; mask-image:none; -webkit-mask-image:none; }
html.reel-static .marquee-group{ flex-wrap:wrap; width:100%; }
html.reel-static .marquee-group[aria-hidden="true"]{ display:none; }

/* ==========================================================================
   Company
   ========================================================================== */
.company-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.company-quote{
  font-size:clamp(1.1rem,2vw,1.35rem);
  line-height:2;
  color:var(--text);
}
.company-sign{
  margin-top:1.6em;
  font-weight:700;
  color:var(--muted);
  font-size:.9rem;
}
.company-table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
}
.company-table th,.company-table td{
  text-align:left;
  padding:1em 1.2em;
  border-top:1px solid var(--line);
  vertical-align:top;
}
.company-table tr:last-child th,.company-table tr:last-child td{ border-bottom:1px solid var(--line); }
.company-table th{
  width:9em;
  font-weight:600;
  color:var(--muted);
  background:var(--bg-alt);
  white-space:nowrap;
}
.company-more{ margin-top:2em; }
@media (max-width:900px){
  .company-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   LINE CTA
   ========================================================================== */
.line-cta{
  color:#fff;
  text-align:center;
}
.line-cta-inner{
  max-width:640px;
  margin-inline:auto;
}
.line-cta h2{ margin-top:.6em; }
.line-cta p.lead{ margin-top:1em; color:var(--on-dark-muted); }
.qr-card{
  margin:2.4em auto 0;
  width:fit-content;
  background:#fff;
  border-radius:var(--radius-card);
  padding:1.4em;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8em;
  box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.qr-card:hover,
.qr-card:focus-visible{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(4,27,61,.16); }
.qr-card img{ width:148px;height:148px; }
.qr-card .qr-id{ color:var(--muted); font-size:.85rem; font-weight:700; letter-spacing:.03em; text-transform:none; }
.qr-card--lg{ padding:2em; gap:1.1em; }
.qr-card--lg img{ width:200px;height:200px; }
.qr-card--lg .qr-id{ font-size:1.05rem; }
.line-cta-actions{
  margin-top:2em;
  display:flex; justify-content:center; flex-wrap:wrap; gap:1em;
}
@media (max-width:640px){
  .qr-card{ display:none; }
}
html.force-qr .qr-card{ display:flex; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:var(--navy-950);
  color:var(--on-dark-muted);
  padding-block:clamp(3.5rem,6vw,5rem) 2rem;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:clamp(2rem,5vw,4rem);
  flex-wrap:wrap;
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand{ max-width:280px; }
.footer-brand .brand{ color:#fff; margin-bottom:1em; }
.footer-brand address{ font-style:normal; font-size:.85rem; line-height:1.9; }
.footer-cols{
  display:grid;
  grid-template-columns:repeat(4,minmax(120px,1fr));
  gap:2rem;
  flex:1;
}
.footer-col h3{ color:#fff; font-size:.9rem; margin-bottom:1.2em; }
.footer-col ul{ display:flex; flex-direction:column; gap:.8em; }
.footer-col a{ font-size:.87rem; transition:color .2s var(--ease); }
.footer-col a:hover{ color:#fff; }
.site-footer a, .breadcrumbs a{ display:inline-block; padding-block:11px; }
.footer-bottom{
  margin-top:2rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1em;
  font-size:.78rem;
  color:rgba(169,184,204,.7);
}
@media (max-width:900px){
  .footer-cols{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   SP fixed bottom bar
   ========================================================================== */
.sp-fixed-bar{
  display:none;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:400;
  background:#fff;
  box-shadow:0 -6px 24px rgba(4,27,61,.14);
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  gap:.7rem;
}
@media (max-width:900px){
  .sp-fixed-bar{ display:flex; }
  .footer-bottom{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
}
.sp-fixed-bar .btn{ flex:1; min-height:48px; font-size:.85rem; padding-inline:.8em; }

/* ==========================================================================
   Shared components for lower pages (about/service/recruit/contact/privacy)
   ========================================================================== */
.page-hero{
  position:relative;
  min-height:46vh;
  display:flex;
  align-items:flex-end;
  color:#fff;
  background:var(--navy-950);
  overflow:hidden;
  padding-top:88px;
}
.page-hero img{
  position:absolute; inset:0;
  width:100%;height:100%;object-fit:cover;
  z-index:0;
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(2,15,36,.55) 0%,rgba(2,15,36,.75) 100%);
}
.page-hero-body{ position:relative; z-index:1; padding-block:clamp(2.5rem,6vw,4rem); }
.page-hero .label-en{ color:var(--sky); margin-bottom:.6em; display:block; }
/* photo-less variant: solid navy, no darkening overlay needed */
.page-hero--plain{ background:var(--navy-900); }
.page-hero--plain::after{ display:none; }

.breadcrumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5em;
  font-size:.8rem;
  color:var(--on-dark-muted);
  margin-top:1.2em;
}
.breadcrumbs a{ color:var(--on-dark-muted); }
.breadcrumbs a:hover{ color:#fff; }
.breadcrumbs .sep{ opacity:.5; }
.breadcrumbs [aria-current="page"]{ color:#fff; }

.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
}
.data-table th,.data-table td{
  text-align:left;
  padding:1em 1.2em;
  border-top:1px solid var(--line);
  vertical-align:top;
}
.data-table tr:last-child th,.data-table tr:last-child td{ border-bottom:1px solid var(--line); }
.data-table th{
  font-weight:600;
  color:var(--muted);
  background:var(--bg-alt);
}
.table-note{
  margin-top:1em;
  font-size:.8rem;
  color:var(--muted);
  line-height:1.8;
}
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:640px){
  .data-table, .data-table tbody{ display:block; width:100%; }
  .data-table tr{ display:block; padding-block:1em; border-top:1px solid var(--line); }
  .data-table tr:first-child{ border-top:0; }
  .data-table tr:last-child{ border-bottom:1px solid var(--line); }
  .data-table th, .data-table td{ display:block; width:100%; padding:.2em 0; border:0; white-space:normal; }
  .data-table th{ background:none; font-size:.8rem; }
}

.faq-list{ display:flex; flex-direction:column; gap:.8em; }
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:1.2em 1.4em;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1em;
  font-weight:700;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-size:1.4rem;
  font-weight:400;
  color:var(--brand-600);
  flex:none;
  transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-a{
  padding:0 1.4em 1.4em;
  color:var(--muted);
  font-size:.92rem;
}

.recruit-table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
}
.recruit-table th,.recruit-table td{
  text-align:left;
  padding:1.1em 1.4em;
  border-top:1px solid var(--line);
  vertical-align:top;
}
.recruit-table tr:last-child th,.recruit-table tr:last-child td{ border-bottom:1px solid var(--line); }
.recruit-table th{
  width:11em;
  font-weight:700;
  color:var(--brand);
  background:var(--bg-alt);
}

.line-inline-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5em;
  background:var(--navy-900);
  color:#fff;
  border-radius:var(--radius-card);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.line-inline-cta-actions{ display:flex; flex-wrap:wrap; gap:1em; }

/* ==========================================================================
   Lower-page component kit (used by about/service/recruit/contact/privacy)
   ========================================================================== */

/* lead paragraph */
.lead{
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  line-height:1.9;
  color:var(--muted);
}

/* long-form article body (privacy / message pages) */
.prose{ font-size:1rem; line-height:1.9; color:var(--text); }
.prose h2{ margin-top:clamp(2.5rem,5vw,3.5rem); margin-bottom:.8em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:2em; margin-bottom:.6em; }
.prose p + p{ margin-top:1.4em; }
.prose ul{ list-style:disc; padding-left:1.4em; }
.prose ol{ list-style:decimal; padding-left:1.4em; }
.prose ul li,.prose ol li{ margin-top:.5em; }
.prose a{ color:var(--brand-600); text-decoration:underline; text-underline-offset:.2em; }
/* privacy-style numbered clauses: 第n条 */
.prose ol.clauses{ list-style:none; padding-left:0; counter-reset:clause; }
.prose ol.clauses > li{ counter-increment:clause; margin-top:2em; }
.prose ol.clauses > li > h3::before{ content:"第" counter(clause) "条　"; }

/* grid helpers */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,3vw,2.5rem); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); }
@media (max-width:900px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-2,.grid-3{ grid-template-columns:1fr; }
}

/* photo + text, alternating sides */
.media-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.media-row:not(:first-child){ margin-top:clamp(3rem,6vw,5rem); }
.media-row.is-reverse .media-row-photo{ order:2; }
.media-row-photo{ border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-1); }
.media-row-photo img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:800px){
  .media-row{ grid-template-columns:1fr; }
  .media-row.is-reverse .media-row-photo{ order:0; }
}

/* icon card */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:clamp(1.6rem,3vw,2.2rem);
}
.card-icon{
  width:48px;height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--bg-alt);
  color:var(--brand);
  margin-bottom:1.2em;
}
.card-icon svg{ width:22px;height:22px; }
.card h3{ margin-bottom:.5em; }
.card p{ color:var(--muted); font-size:.92rem; }

/* step flow (4STEP) */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.5rem,3vw,2rem);
  counter-reset:step;
}
.step{ position:relative; padding-top:2.6em; }
.step::before{
  counter-increment:step;
  content:"STEP " counter(step);
  font-family:"Montserrat",sans-serif;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.15em;
  color:var(--brand-600);
  display:block;
  margin-bottom:.8em;
}
.step h3{ margin-bottom:.4em; }
.step p{ color:var(--muted); font-size:.9rem; }
.step:not(:last-child)::after{
  content:"";
  position:absolute; top:.5em; left:calc(100% + clamp(.75rem,1.5vw,1rem)/2);
  width:clamp(1.5rem,3vw,2rem); height:1px;
  background:var(--line);
  display:none;
}
@media (min-width:901px){
  .step:not(:last-child)::after{ display:block; }
}
@media (max-width:900px){
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .steps{ grid-template-columns:1fr; }
}

/* vertical timeline (history / vision) */
.timeline{ position:relative; padding-left:2em; }
.timeline::before{
  content:"";
  position:absolute; left:.3em; top:.4em; bottom:.4em;
  width:1px;
  background:var(--line);
}
.timeline-item{ position:relative; padding-bottom:clamp(1.6rem,3vw,2.2rem); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:"";
  position:absolute; left:-2em; top:.4em;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 3px var(--bg);
}
.timeline-date{ font-family:"Montserrat",sans-serif; font-weight:700; font-size:.85rem; color:var(--brand-600); }
.timeline-item h3{ margin-top:.4em; margin-bottom:.3em; }
.timeline-item p{ color:var(--muted); font-size:.92rem; }

/* salary example table: numbers right-aligned, emphasis row */
.salary-table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
}
.salary-table th,.salary-table td{
  padding:1em 1.2em;
  border-top:1px solid var(--line);
  vertical-align:top;
}
.salary-table thead th{
  background:var(--bg-alt);
  color:var(--muted);
  font-weight:600;
  text-align:left;
}
.salary-table tbody th{ text-align:left; font-weight:700; color:var(--text); }
.salary-table td{ text-align:right; font-variant-numeric:tabular-nums; }
.salary-table tr:last-child th,.salary-table tr:last-child td{ border-bottom:1px solid var(--line); }
.salary-table tr.is-highlight{ background:var(--bg-alt); }
.salary-table tr.is-highlight th,.salary-table tr.is-highlight td{ color:var(--brand); font-weight:700; }
.salary-table tr.is-highlight th{ box-shadow:inset 3px 0 0 var(--accent); }
@media (max-width:640px){
  .salary-table{ font-size:.82rem; }
  .salary-table th,.salary-table td{ padding:.8em .6em; }
}

/* notes / callouts */
.note{
  margin-top:1em;
  font-size:.8rem;
  color:var(--muted);
  line-height:1.8;
}
.callout{
  background:var(--bg-alt);
  border-left:3px solid var(--brand);
  border-radius:0 var(--radius-input) var(--radius-input) 0;
  padding:clamp(1.2rem,2.5vw,1.6rem);
  font-size:.92rem;
  color:var(--text);
}
.callout + .callout{ margin-top:1em; }

/* in-page table of contents */
.toc{
  background:var(--bg-alt);
  border-radius:var(--radius-card);
  padding:clamp(1.2rem,2.5vw,1.6rem);
}
.toc-title{ font-weight:700; font-size:.85rem; margin-bottom:.8em; display:flex; align-items:center; gap:.6em; }
.toc-title::before{ content:""; display:inline-block; width:16px; height:2px; background:var(--accent); flex:none; }
.toc ol{ list-style:decimal; padding-left:1.2em; }
.toc li{ margin-top:.5em; font-size:.9rem; }
.toc a{ color:var(--text); }
.toc a:hover{ color:var(--brand-600); }
@media (min-width:901px){
  .toc{ position:sticky; top:112px; }
}

/* light-background badge (for use outside the dark hero) */
.badge--light{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.5em 1em;
  border-radius:var(--radius-pill);
  background:var(--bg-alt);
  border:1px solid var(--line);
  color:var(--text);
  font-size:.8rem;
  font-weight:700;
}
.badge--light::before{ content:""; width:6px;height:6px;border-radius:50%; background:var(--brand-600); flex:none; }

/* "LINEでできること" list */
.line-uses{ display:flex; flex-direction:column; gap:.8em; }
.line-uses li{
  display:flex; align-items:flex-start; gap:.8em;
  padding:1em 1.2em;
  background:var(--bg-alt);
  border-radius:var(--radius-input);
  font-size:.92rem;
}
.line-uses li svg{ flex:none; margin-top:.2em; color:var(--line-green); width:1.2em; height:1.2em; }

/* map embed (16:9) */
.map-embed{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius-img);
  overflow:hidden;
  background:var(--bg-alt);
}
.map-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* arrow link */
.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:700; font-size:.92rem;
  color:var(--brand-600);
}
.link-arrow svg{ transition:transform .3s var(--ease); }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ---------- misc ---------- */
.text-muted{ color:var(--muted); }
.mt-lg{ margin-top:clamp(2rem,4vw,3rem); }