/* ヘッダー、各章、フッターの骨格レイアウトを担当する。
   grid/flexは横並び・左右整列・等高配置にだけ使う。 */
.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  border-bottom: 1px solid transparent;
  color: var(--ink);
  transition: background-color .3s var(--ease-standard), border-color .3s var(--ease-standard), color .3s var(--ease-standard);
}

.site-header.is-scrolled {
  border-color: var(--line);
  background: rgba(244, 241, 232, .96);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-block: 18px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(142px, 15vw, 188px) 0 clamp(82px, 10vw, 132px);
  background: var(--ink);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.16fr .84fr;
  gap: clamp(38px, 7vw, 96px);
  align-items: end;
}

.hero-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(44px, 7vw, 88px);
}

.growth-story {
  position: relative;
}

.section-heading,
.value-heading {
  display: grid;
  grid-template-columns: .66fr 1.34fr;
  gap: clamp(36px, 8vw, 112px);
  align-items: start;
}

.about-atlas {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(42px, 8vw, 112px);
  align-items: center;
  margin-top: clamp(70px, 9vw, 120px);
}

.belief + .belief {
  margin-top: 64px;
}

.about-photo {
  margin-top: clamp(76px, 10vw, 140px);
}

.service-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(64px, 8vw, 104px);
  border-block: 1px solid var(--ink);
}

.route-catalog {
  position: relative;
  margin-top: clamp(70px, 9vw, 120px);
  padding: clamp(22px, 4vw, 44px);
}

.atlas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: clamp(44px, 6vw, 72px);
}

.service-item {
  padding: clamp(24px, 4vw, 42px);
}

.approach {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(42px, 8vw, 112px);
  margin-top: clamp(90px, 12vw, 160px);
}

.approach-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  padding-block: 26px;
  border-top: 1px solid var(--line);
}

.approach-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.value-list {
  margin-top: clamp(70px, 9vw, 120px);
}

.culture-gallery {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(26px, 5vw, 70px);
  align-items: start;
  margin-top: clamp(70px, 9vw, 120px);
}

.culture-shot--wide {
  grid-row: span 2;
}

.culture-shot--portrait + .culture-shot--portrait {
  margin-top: clamp(40px, 8vw, 108px);
}

.company-layout,
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  padding-block: 70px 52px;
  border-bottom: 1px solid var(--line-light);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 28px;
  align-content: start;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-block: 28px 36px;
}