
:root {
  --black: #0a0d10;
  --black2: #11161b;
  --ink: #171b20;
  --gray: #6c737a;
  --line: #dfe3e6;
  --light: #f4f5f6;
  --gold: #b78a4a;
  --gold2: #d6b176;
  --white: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  background: var(--white);
  line-height: 1.8;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.container { width: min(1180px, calc(100% - 44px)); margin: auto; }
.section { padding: 110px 0; }
.section-label {
  margin: 0 0 14px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
}
.section-label.light { color: var(--gold2); }
h2 {
  margin: 0;
  font-size: clamp(38px, 5.5vw, 62px);
  line-height: 1.25;
  letter-spacing: -.035em;
}
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(8,11,14,.76);
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
}
.header-inner {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand img {
  display: block;
  height: 44px;
  width: 132px;
  object-fit: contain;
  filter: invert(1);
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 700;
}
.desktop-nav a { transition: .2s; }
.desktop-nav a:hover { color: #fff; }
.nav-contact {
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.35);
}
.menu-button {
  display: none;
  color: white;
  border: 0;
  background: transparent;
  font-size: 26px;
}
.hero {
  position: relative;
  min-height: 820px;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 70% 30%, rgba(183,138,74,.25), transparent 35%),
    linear-gradient(125deg, #080b0e 20%, #101820 75%, #06090c);
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(4,7,9,.95) 0%, rgba(4,7,9,.65) 48%, rgba(4,7,9,.15) 100%);
}
.hero-content {
  position: relative;
  z-index: 3;
  padding-top: 80px;
}
.kicker {
  margin: 0 0 18px;
  color: var(--gold2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .24em;
}
.hero h1 {
  margin: 0;
  max-width: 940px;
  font-size: clamp(48px, 7.1vw, 88px);
  line-height: 1.16;
  letter-spacing: -.05em;
}
.hero-copy {
  margin: 28px 0 34px;
  color: rgba(255,255,255,.73);
  font-size: 17px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.button {
  min-height: 54px;
  padding: 0 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  transition: transform .2s, background .2s;
}
.button:hover { transform: translateY(-2px); }
.button.gold { background: var(--gold); color: #fff; }
.button.ghost { border: 1px solid rgba(255,255,255,.45); color: #fff; }
.button.white { background: #fff; color: var(--black); }
.hero-side-label {
  position: absolute;
  z-index: 4;
  right: 26px;
  bottom: 120px;
  writing-mode: vertical-rl;
  color: rgba(255,255,255,.45);
  font-size: 10px;
  letter-spacing: .28em;
}
.rail-visual {
  position:absolute;
  z-index:1;
  right:-4%;
  bottom:-16%;
  width:56%;
  height:105%;
  transform: perspective(800px) rotateX(61deg) rotateZ(-6deg);
  transform-origin: bottom;
  opacity:.7;
}
.rail {
  position:absolute;
  bottom:0;
  width:12px;
  height:100%;
  background: linear-gradient(#b7c0c8,#3e464d);
  box-shadow: 0 0 30px rgba(214,177,118,.18);
}
.rail-left { left:28%; }
.rail-right { right:28%; }
.sleepers {
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(to bottom, transparent 0 7%, rgba(128,99,63,.9) 7.3% 9.5%, transparent 9.8% 14%);
}
.intro-grid {
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:90px;
}
.intro-text { padding-top: 48px; color: var(--gray); font-size: 17px; }
.business { background: var(--light); }
.section-heading-row {
  display:grid;
  grid-template-columns: 1fr .8fr;
  gap:70px;
  align-items:end;
  margin-bottom:48px;
}
.section-heading-row > p { margin:0; color:var(--gray); }
.business-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.business-card {
  position:relative;
  min-height:640px;
  overflow:hidden;
  color:white;
  background:var(--black);
}
.business-card-bg { position:absolute; inset:0; }
.business-card-bg::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(4,6,8,.98) 12%, rgba(4,6,8,.63) 65%, rgba(4,6,8,.28));
}
.repair-bg img { width:100%; height:100%; object-fit:cover; filter:grayscale(.3) brightness(.7); }
.track-bg { background: linear-gradient(145deg,#25313a,#080b0e); }
.mini-rail {
  position:absolute;
  width:13px;
  height:105%;
  bottom:-20%;
  background:linear-gradient(#e4e8eb,#444c52);
  transform: rotate(23deg);
}
.mini-rail.one { left:35%; }
.mini-rail.two { right:28%; }
.track-bg::before {
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(155deg,transparent 0 52px,rgba(154,112,64,.72) 54px 70px,transparent 72px 122px);
}
.business-card-content {
  position:relative;
  z-index:2;
  min-height:640px;
  padding:48px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.business-index { color:var(--gold2); font-size:12px; font-weight:800; }
.business-en { margin:8px 0 0; color:rgba(255,255,255,.55); font-size:11px; letter-spacing:.18em; }
.business-card h3 { margin:6px 0 16px; font-size:40px; }
.business-card p { color:rgba(255,255,255,.72); }
.business-card ul { margin:10px 0 26px; padding-left:20px; color:rgba(255,255,255,.88); }
.business-card a { font-weight:800; }
.business-card a span { margin-left:8px; color:var(--gold2); }
.track-section { color:white; background:#0a0e12; }
.track-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }
.track-graphic {
  aspect-ratio:1/1;
  display:grid;
  place-content:center;
  gap:22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(135deg,rgba(183,138,74,.12),transparent 45%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 1px,transparent 1px 24px);
}
.track-graphic span {
  display:block;
  color:rgba(255,255,255,.82);
  font-size:28px;
  font-weight:800;
  letter-spacing:.22em;
}
.track-content > p { color:rgba(255,255,255,.65); }
.principles { margin-top:36px; }
.principles div {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:20px;
  padding:17px 0;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.principles strong { color:var(--gold2); }
.works { background:white; }
.works-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.work { padding:24px; background:var(--light); }
.work-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:16px; }
.work-head span { color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.14em; }
.work-head h3 { margin:0; font-size:24px; }
.ba-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.ba-grid figure { position:relative; margin:0; aspect-ratio:4/5; overflow:hidden; background:#d9dde0; }
.ba-grid img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.ba-grid figure:hover img { transform:scale(1.03); }
.ba-grid figcaption {
  position:absolute;
  left:10px;
  bottom:10px;
  padding:5px 9px;
  color:white;
  background:rgba(9,12,15,.8);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}
.recruit { color:white; background:#151a1f; }
.white-text p { color:rgba(255,255,255,.62); }
.recruit-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.recruit-grid article { padding:42px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.025); }
.recruit-grid article > span { color:var(--gold2); font-size:12px; font-weight:800; }
.recruit-en { margin:8px 0 0; color:rgba(255,255,255,.45); font-size:10px; letter-spacing:.18em; }
.recruit-grid h3 { margin:4px 0 10px; font-size:32px; }
.recruit-grid article > p:not(.recruit-en) { color:rgba(255,255,255,.68); }
.recruit-grid dl { margin-top:26px; }
.recruit-grid dl div { display:grid; grid-template-columns:100px 1fr; gap:18px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.recruit-grid dt { color:var(--gold2); font-size:12px; font-weight:800; }
.recruit-grid dd { margin:0; color:rgba(255,255,255,.82); }
.company-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; }
.company table { width:100%; border-collapse:collapse; }
.company th,.company td { padding:20px 0; text-align:left; border-bottom:1px solid var(--line); }
.company th { width:160px; color:var(--gray); }
.contact { color:white; text-align:center; background:var(--gold); }
.contact-box h2 { margin-bottom:18px; }
.contact-box p { color:rgba(255,255,255,.85); }
.contact small { display:block; margin-top:18px; color:rgba(255,255,255,.72); }
footer { padding:28px 0; color:rgba(255,255,255,.55); background:#07090b; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-brand { display:flex; align-items:center; gap:16px; }
.footer-brand img { height:34px; width:110px; object-fit:contain; filter:invert(1); opacity:.8; }
.footer-brand span { font-size:12px; letter-spacing:.1em; }
footer p { margin:0; font-size:12px; }

@media (max-width: 900px) {
  .desktop-nav {
    position:absolute;
    top:78px;
    right:22px;
    display:none;
    width:240px;
    padding:22px;
    flex-direction:column;
    align-items:flex-start;
    background:#0c1014;
    box-shadow:0 16px 40px rgba(0,0,0,.3);
  }
  .desktop-nav.open { display:flex; }
  .menu-button { display:block; }
  .hero { min-height:720px; }
  .rail-visual { width:86%; right:-34%; opacity:.46; }
  .intro-grid,.section-heading-row,.track-layout,.company-grid { grid-template-columns:1fr; gap:38px; }
  .intro-text { padding-top:0; }
  .business-grid,.works-grid,.recruit-grid { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .section { padding:78px 0; }
  .container { width:min(100% - 30px,1180px); }
  .hero h1 { font-size:44px; }
  .hero-copy .pc { display:none; }
  .business-card,.business-card-content { min-height:570px; }
  .business-card-content { padding:30px; }
  .ba-grid { grid-template-columns:1fr; }
  .ba-grid figure { aspect-ratio:4/3; }
  .track-graphic span { font-size:20px; }
  .recruit-grid article { padding:28px; }
  .company th { width:110px; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
}


.contact-details {
  display: grid;
  gap: 10px;
  max-width: 620px;
  margin: 26px auto;
}

.contact-link {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.08);
  text-align: left;
}

.contact-link span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  opacity: .75;
}

.contact-link strong {
  font-size: clamp(16px, 3vw, 22px);
  word-break: break-all;
}

.contact-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.contact-mail-button {
  border-color: rgba(255,255,255,.65);
}

.company a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 620px) {
  .contact-link {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
