/* =========================================================
   株式会社オー・エム・シー（OMC） コーポレートサイト
   共通スタイルシート
   ========================================================= */

:root {
  --color-text: #212a37;
  --color-primary: #006ffa;
  --color-white: #fefefe;
  --color-bg: #f3f6fa;
  --color-gray: #90959b;

  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-en: "Outfit", sans-serif;

  --container: 1240px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: calc(100% - 40px);
  max-width: 1240px;
  transition: top 0.3s ease, width 0.3s ease, max-width 0.3s ease;
}

/* Once the page has been scrolled past the FV (hero) section, the
   floating pill straightens out into a full-width bar pinned to the
   very top of the screen, like a standard sticky header - added via
   main.js toggling this class on scroll. */
.site-header.is-fixed-top {
  top: 0;
  left: 0;
  transform: none;
  width: 100vw;
  max-width: none;
}

.site-header__inner {
  background: var(--color-white);
  border-radius: 40px;
  display: flex;
  align-items: center;
  padding: 15px 15px 15px 50px;
  box-shadow: 0 4px 20px rgba(33, 42, 55, 0.08);
  transition: border-radius 0.3s ease;
}

/* The pill's rounded ends square off now that the bar spans the full
   screen width (100vw on .site-header itself, per the latest follow-up -
   the earlier var(--container) cap here was fighting that, keeping the
   inner bar stuck at 1240px instead of also going edge-to-edge). */
.site-header.is-fixed-top .site-header__inner {
  border-radius: 0;
  padding: 15px 50px;
}

.site-header__right {
  display: flex;
  align-items: center;
  /* same continuous shrink curve as .site-nav, so the nav block
     and the contact button keep breathing room as the header narrows */
  gap: clamp(4px, calc(12vw - 108px), 40px);
  margin-left: auto;
}

/* Mark + EN caption + JA name are now a single flattened image
   (exported straight from the Figma lockup group) rather than three
   separately-sized elements. The old per-element approach (icon img
   + two text spans) couldn't keep its proportions intact once the JA
   name's font-size and the icon's width were shrunk independently
   for narrow viewports, which is what caused the JA name to butt
   against the hamburger button with zero gap on SP. A single image
   scales as one rigid unit, so that gap can never collapse. */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo__img {
  height: 44px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  /* stays at a 40px feel on wide screens, then eases down
     continuously (no abrupt jump) as the viewport narrows,
     reaching its floor right around the 900px SP cutoff */
  gap: clamp(4px, calc(12vw - 108px), 40px);
  font-size: clamp(15px, 1.8vw, 18px);
}

.site-nav a {
  white-space: nowrap;
  transition: color 0.2s;
}

.site-nav a:hover {
  color: var(--color-primary);
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 180px;
  height: 50px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 25px;
  font-size: 18px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.btn-contact:hover {
  opacity: 0.85;
}

.btn-contact img {
  width: 16px;
  height: 16px;
}

.hamburger-btn {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Three lines that morph into an X on .is-open - each line
   transitions its own top/rotate/opacity, so the bars themselves
   animate into the X rather than swapping a static icon image. */
.hamburger-btn__icon {
  position: relative;
  width: 25px;
  height: 16px;
  flex-shrink: 0;
}

.hamburger-btn__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--color-primary);
  transition: top 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-btn__icon span:nth-child(1) { top: 0; }
.hamburger-btn__icon span:nth-child(2) { top: 7px; }
.hamburger-btn__icon span:nth-child(3) { top: 14px; }

.hamburger-btn.is-open .hamburger-btn__icon span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.hamburger-btn.is-open .hamburger-btn__icon span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.is-open .hamburger-btn__icon span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

/* SP nav - Figma node 18:5/18:128 "menu_sp" (open state).
   Rather than a separate overlay, the existing header pill itself
   (.site-header__panel) grows from 60px to fill the screen, revealing
   this menu below the same logo/hamburger row - see the SP media
   query for the panel's height/radius animation and
   .site-header__menu's fade-in. A list of large EN/JA menu pairs on
   a 68px row pitch (38px item + 30px gap). The contact button is
   taken out of flow and pinned 20px above the menu's own bottom
   edge via position:absolute, independent of how tall the nav list
   ends up being. */
.site-header__menu {
  position: relative;
  display: none;
}

.sp-nav__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px 30px 0;
}

.sp-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sp-nav__item-en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 30px;
  /* 1.2 rendered each row at 36px; Figma's row height is 38px
     (110->178->246... = 68px pitch, 30px gap => 38px item). */
  line-height: 1.267;
  color: var(--color-primary);
}

.sp-nav__item-ja {
  font-size: 14px;
  line-height: 1.2;
}

/* Floats above the nav list and docks 20px off the menu's bottom
   edge, overriding .btn-contact's fixed 180px width to stretch
   (minus a 20px L/R inset) to match the Figma button.
   Selector uses both classes (.btn-contact.sp-nav__contact) so its
   specificity beats the SP media query's ".btn-contact{display:none}"
   regardless of source order - that rule is meant only to hide the
   desktop pill the hamburger replaces, not this drawer's own button. */
.btn-contact.sp-nav__contact {
  display: inline-flex;
  width: auto;
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  margin: 0;
}

/* ---------------------------------------------------------
   Buttons (shared "more" style)
   --------------------------------------------------------- */
.btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 180px;
  height: 50px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 16px;
  white-space: nowrap;
}

/* Arrow icon as a small overflow:hidden window holding two
   copies of the same icon (::before = current, ::after =
   incoming). On hover the current one slides out past the right
   edge while the incoming one slides in from the left, so the
   arrow appears to "step" to the right. */
.btn-more__arrow {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  flex-shrink: 0;
}

.btn-more__arrow::before,
.btn-more__arrow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  /* Inlined as a data URI (rather than url("../img/arrow-right.svg"))
     because Chrome fetches CSS mask images in CORS mode even for a
     same-origin reference, and that fetch is rejected outright when
     the page itself is opened via file:// (no http/https origin to
     satisfy it) - this broke the arrow + threw a console error
     whenever the site was opened by double-clicking the HTML file
     instead of via a local server. A data: URI needs no fetch at all. */
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M3.33331 8H12.6666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 3.33325L12.6667 7.99992L8 12.6666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M3.33331 8H12.6666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 3.33325L12.6667 7.99992L8 12.6666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.btn-more__arrow::after {
  transform: translateX(-150%);
}

.btn-more:hover .btn-more__arrow::before {
  transform: translateX(150%);
}

.btn-more:hover .btn-more__arrow::after {
  transform: translateX(0);
}

.btn-more--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-more--white {
  background: var(--color-white);
  color: var(--color-primary);
}

/* ---------------------------------------------------------
   Section heading
   --------------------------------------------------------- */
.sec-heading {
  margin-bottom: 30px;
}

.sec-heading__en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 40px;
  color: var(--color-primary);
  display: block;
}

.sec-heading__ja {
  font-size: 14px;
  display: block;
  margin-top: 4px;
}

/* ---------------------------------------------------------
   FV (hero) - index only, but kept here for shared tokens
   --------------------------------------------------------- */
.fv {
  position: relative;
  /* Information's bg slides up underneath FV by 100px (see its
     negative margin-top below) - keep FV painted above it. */
  z-index: 1;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  max-height: 940px;
  overflow: hidden;
  background: transparent;
}

/* The image itself always fills the entire .fv area at full size —
   it never resizes. Only the clip-path "window" onto it grows, so it
   looks like a large photo is being revealed through an expanding
   crop, rather than the photo itself scaling up. */
.fv__shape {
  position: absolute;
  inset: 0;
  background: #ddd;
  transition: clip-path 1.5s cubic-bezier(0.65, 0, 0.35, 1);
  /* initial (small) state: 600x348px window, centered, 178px radius */
  clip-path: inset(calc(50% - 174px) calc(50% - 300px) round 178px);
}

.fv__shape img,
.fv__shape video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fv.is-expanded .fv__shape {
  /* fullscreen window with a fixed 20px margin on every edge */
  clip-path: inset(20px round 40px);
}

.fv__headline {
  position: absolute;
  left: 50%;
  top: 50%;
  /* centered both axes within the FV area; slides up 40px while fading in */
  transform: translate(-50%, calc(-50% + 40px));
  z-index: 5;
  text-align: center;
  color: var(--color-white);
  opacity: 0;
  /* shape expand takes 1.5s; headline fades/slides in only
     after the expand has fully finished */
  transition: opacity 1s cubic-bezier(0.65, 0, 0.35, 1) 1.5s,
              transform 1s cubic-bezier(0.65, 0, 0.35, 1) 1.5s;
  pointer-events: none;
  width: 90%;
}

.fv.is-expanded .fv__headline {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.fv__headline-en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(36px, 6vw, 80px);
  line-height: 1.15;
  margin-bottom: 30px;
}

.fv__headline-ja {
  font-size: 24px;
  font-weight: 600;
}

/* ---------------------------------------------------------
   Information section
   --------------------------------------------------------- */
.topics {
  background: var(--color-bg);
  /* Figma: ~137px from bg-top to the heading, and exactly 80px from
     the "一覧を見る" button's bottom to bg-bottom (matching the same
     80px inter-section rhythm used elsewhere) - was a flat 100px
     both sides. */
  padding: 140px 0 80px;
  /* FV's background is white; Information's background is designed
     to creep up underneath FV by 100px rather than starting right
     at FV's bottom edge. Pull it up to match, staying behind FV
     (see .fv's z-index) so FV's photo/content stays on top. */
  position: relative;
  z-index: 0;
  margin-top: -100px;
}

/* Figma update: the heading now sits full-width above the news
   grid (stacked vertically) instead of in a narrow side column
   beside it. */
.topics__layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 40px;
}

.topics__side {
  flex: 0 0 auto;
}

.topics__main {
  min-width: 0;
}

.info-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-filters button {
  width: 150px;
  height: 60px;
  border-radius: 30px;
  font-size: 16px;
  background: var(--color-white);
  color: var(--color-text);
  transition: background 0.2s, color 0.2s;
}

.info-filters button.is-active {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Figma update: 5 articles now sit in a single row instead of a
   2-column / 2-row grid, with a flat 20px gap between every card. */
.news-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.news-card {
  display: block;
}

.news-card__thumb {
  width: 100%;
  aspect-ratio: 440 / 280;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card__thumb img.no-image {
  width: 32%;
  height: auto;
  object-fit: contain;
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--color-primary);
}

.news-card__cat {
  border: 1px solid var(--color-primary);
  border-radius: 5px;
  padding: 3px 8px;
}

.news-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
}

.info-more {
  text-align: center;
}

/* ---------------------------------------------------------
   Company section (index)
   --------------------------------------------------------- */
.company-sec {
  padding: 100px 0 80px;
}

/* Figma layout: a narrow left column holding only the section
   heading sits beside the title/body/button column, side by side
   at the same vertical level (not stacked one above the other). */
.company-sec__inner {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 80px;
}

.company-sec__side {
  flex: 0 0 auto;
}

.company-sec__text {
  flex: 1;
  max-width: 100%;
}

.company-sec__title {
  font-size: 50px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.5;
  margin-bottom: 24px;
}

.company-sec__body {
  font-size: 18px;
  line-height: 2;
  margin-bottom: 30px;
}

/* Full-bleed: the slider intentionally breaks out of .container
   and spans the full viewport width, unlike the text content above it. */
.slider {
  overflow: hidden;
  width: 100%;
}

/* The loop distance (--marquee-distance) is measured in JS as the
   exact pixel width of one copy of the track's content (main.js,
   setupMarquee()), rather than relying on a CSS percentage. A
   percentage can be thrown off by sub-pixel rounding once the gap/
   margin math interacts with flex's max-content sizing, which is
   what caused the visible snap at the loop point. Direction is
   reversed (right-hand keyframe state first) so the photos flow
   left-to-right. */
.slider__track {
  display: flex;
  width: max-content;
  animation: slide-loop 30s linear infinite reverse;
  will-change: transform;
}

.slider__track img {
  width: 280px;
  height: 420px;
  border-radius: 20px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 20px;
}

@keyframes slide-loop {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); }
}

/* ---------------------------------------------------------
   Recruit section
   --------------------------------------------------------- */
.recruit {
  position: relative;
  /* Reduced so the background ghost text overlaps the photo card
     instead of sitting entirely in empty space above it. Bottom:
     the card's bottom edge already matches Figma's section bottom,
     so padding-bottom is just the trailing gap to Contact (80px in
     Figma, was 120px). */
  padding: 60px 0 80px;
  overflow: hidden;
  background: var(--color-white);
}

/* Background ghost text scrolls continuously, the same technique
   as the Company slider: the track is duplicated by JS and the
   loop distance (--marquee-distance) is measured in JS as the
   exact pixel width of one copy, so the loop stays seamless no
   matter how the responsive font size resolves. */
.recruit__bg-marquee {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 0;
  transform: translateY(-22%);
  pointer-events: none;
}

.recruit__bg-track {
  display: flex;
  width: max-content;
  animation: recruit-marquee 40s linear infinite;
  will-change: transform;
}

.recruit__bg-track span {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(40px, 8vw, 120px);
  color: var(--color-bg);
  white-space: nowrap;
  opacity: 0.5;
  margin-right: 80px;
}

@keyframes recruit-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); }
}

/* Figma: one large photo card with the text overlaid directly on
   top of it (over a left-side dark gradient), not a 50/50 split
   of separate photo and text columns.
   Height stays fixed; width scales with the viewport, held to a
   constant 30px margin from the screen edges. */
.recruit__card {
  position: relative;
  z-index: 1;
  width: calc(100% - 60px);
  height: 680px;
  margin: 0 auto;
  border-radius: 30px;
  overflow: hidden;
}

.recruit__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recruit__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0) 50%);
}

.recruit__text {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  max-width: 480px;
  padding: 70px 40px 70px 80px;
}

/* sec-heading__en defaults to primary blue, but on the dark photo
   overlay the "Recruit" heading must stay white per the design. */
.recruit__text .sec-heading__en {
  color: var(--color-white);
}

.recruit__text p {
  font-size: 18px;
  line-height: 2;
  margin-bottom: 30px;
}

/* ---------------------------------------------------------
   Contact bar
   --------------------------------------------------------- */
.contact-bar {
  background: var(--color-primary);
  border-radius: 15px;
  /* Figma has this card overlap the footer's top edge by 60px
     rather than leaving a gap below it - see .site-footer's
     negative margin-top. position+z-index keeps it painted above
     the footer it overlaps. */
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 1180px;
  padding: 30px 80px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  color: var(--color-white);
}

/* In Figma "Contact" and "お問い合わせ" sit side-by-side, not
   stacked like the standard .sec-heading pattern used elsewhere. */
.contact-bar__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}

.contact-bar__en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 40px;
}

.contact-bar__ja {
  font-size: 14px;
}

.contact-bar__tel,
.contact-bar__mail {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-bar__tel img,
.contact-bar__mail img {
  width: 36px;
  height: 36px;
}

.contact-bar__tel a {
  font-family: var(--font-en);
  font-size: 30px;
  white-space: nowrap;
}

.contact-bar__mail a {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer {
  background: var(--color-text);
  border-radius: 50px 50px 0 0;
  color: var(--color-white);
  padding: 80px 0 50px;
}

/* index/company only: .contact-bar is designed to overlap the
   footer's top edge by 60px (Figma: footer bg starts 60px before
   the card ends). Scoped via :has() so pages without a .contact-bar
   (e.g. contact.html) get a normal, non-overlapping footer instead
   of having their own bottom content eaten into. */
body:has(.contact-bar) .site-footer {
  margin-top: -60px;
  padding: 140px 0 50px;
}

/* Figma positions the footer's content at the same centered
   100px gutter as the rest of the page, but without the extra
   20px inner padding that .container adds elsewhere. */
.site-footer > .container {
  padding: 0;
}

.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

/* Same single flattened lockup image as the header's .site-logo,
   just the white-on-transparent export instead of the navy one.
   Figma's logo composition (icon + EN caption + JA name) is baked
   into the image itself, so there's nothing left to lay out here. */
/* Figma Index_after update: the standalone company-name paragraph
   below the logo was removed - it's now logo + address only, with a
   flat 20px gap. */
.site-footer__logo {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.site-footer__logo-img {
  height: 44px;
  width: auto;
}

.site-footer__address {
  font-size: 14px;
  line-height: 1.8;
}

.site-footer__nav {
  display: flex;
  gap: 30px;
  font-size: 18px;
  flex-wrap: wrap;
}

.site-footer__nav a,
.site-footer__links a {
  transition: text-decoration-color 0.2s, color 0.2s;
}

.site-footer__nav a:hover,
.site-footer__links a:hover {
  text-decoration: underline;
}

.site-footer__mark {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: var(--color-white);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 30px;
}

.site-footer__mark img {
  height: 50px;
  width: auto;
}


.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 14px;
  /* No rule line here per the Figma design - just open space
     below the privacy/FSA mark box. */
  padding-top: 50px;
}

.site-footer__links {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.site-footer__copy {
  font-family: var(--font-en);
}

/* ---------------------------------------------------------
   Company page: Title head
   --------------------------------------------------------- */
.title-head {
  background: var(--color-bg);
  /* Figma: heading sits 180px from the top (50px clearance below the
     floating 80px-tall header at top:50px), not 220px. */
  padding: 180px 0 60px;
}

.title-head__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}

.title-head__en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 60px;
  color: var(--color-primary);
  display: block;
}

.title-head__ja {
  font-size: 14px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.breadcrumb img {
  width: 10px;
  height: 10px;
}

/* ---------------------------------------------------------
   Message section
   --------------------------------------------------------- */
.message {
  /* Figma: 80px gap from title-head down to the heading, ~90px down
     to where Services' background begins. */
  padding: 80px 0 90px;
}

.message__inner {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.message__text {
  flex: 1 1 60%;
}

.message__text p {
  font-size: 16px;
  line-height: 2;
  margin-bottom: 1.6em;
}

.message__sign {
  text-align: right;
  font-weight: 600;
  margin-top: 30px;
}

.message__text p.message__sign {
  margin-bottom: 0; /* override .message__text p's 1.6em (higher specificity than a bare .message__sign rule) - sign is always the last line, the extra bottom space was pushing the SP photo ~26px lower than Figma intends */
}

.message__photo {
  flex: 0 0 340px;
  width: 340px;
  height: 380px;
}

.message__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------
   Contact page - notice + tel section
   --------------------------------------------------------- */
.contact-intro {
  /* Figma "Contact" frame: message group sits 80px below title-head,
     80px above the footer. */
  padding: 80px 0 90px;
}

.contact-intro__text {
  text-align: center;
  font-size: 16px;
  line-height: 2;
}

.contact-intro__tel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 350px;
  height: 80px;
  margin: 50px auto 0;
  background: var(--color-primary);
  border-radius: 40px;
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 30px;
  transition: opacity 0.2s;
}

/* Same dim-on-hover feedback as .btn-contact, for consistency. */
.contact-intro__tel:hover {
  opacity: 0.85;
}

.contact-intro__tel img {
  width: 36px;
  height: 36px;
}

/* ---------------------------------------------------------
   Services section
   --------------------------------------------------------- */
.services {
  background: var(--color-bg);
  /* Figma: heading sits 80px from the bg's top edge, not 100px. */
  padding: 80px 0 100px;
}

.services__lead {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 60px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.service-card > img {
  width: 100%;
  aspect-ratio: 360/203;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 24px;
}

.service-card__title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.service-card__body {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.service-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.service-card__list img {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   Overview / History (definition list with divider lines)
   --------------------------------------------------------- */
.dl-section {
  /* Figma: consistent 80px gap before every heading (Overview from
     Services, History from Overview), and the table's own bottom
     border line IS the section's visual bottom - no extra trailing
     padding except after the last one, before Contact. */
  padding: 80px 0 0;
}

.dl-section:last-of-type {
  padding-bottom: 80px;
}

/* Figma (Company, new "access" group): ~100px gap from Overview's table
   bottom up to the "Access" heading, and ~100px down to History's
   heading below it. History keeps its own .dl-section 80px top-padding
   (shared with Overview, for that section's gap from Services), so this
   section's own bottom padding only needs to make up the remaining
   20px to reach that measured 100px total. */
.access {
  padding: 100px 0 20px;
}

.access__inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.access__map {
  flex: 0 0 550px;
  width: 550px;
}

/* The googlemap iframe markup must be used verbatim (client-supplied),
   including its width="550" height="300" attributes - this stylesheet
   override just lets it flex to its column's width responsively
   without touching the HTML attributes themselves. */
.access__map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

.access__name {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 16px;
}

.access__address,
.access__note {
  font-size: 16px;
  line-height: 1.5;
}

.access__note {
  margin-top: 20px;
}

.dl-table {
  border-top: 1px solid #d7dce3;
}

.dl-row {
  display: flex;
  padding: 25px 0;
  border-bottom: 1px solid #d7dce3;
  font-size: 16px;
  gap: 20px;
}

.dl-row dt {
  flex: 0 0 150px;
  color: var(--color-primary);
}

.dl-row dd {
  flex: 1;
}

/* ===========================================================
   Responsive (SP) — breakpoint 900px
   =========================================================== */
@media (max-width: 900px) {
  .site-header { top: 20px; } /* Figma SP: header floats 20px from top, not 50px */
  .site-header.is-fixed-top { top: 0; }
  /* At SP the rounded white box is .site-header__panel, not
     .site-header__inner - square it off here instead. Skipped while
     the hamburger menu is open so its own border-radius(25px) for the
     expanded card isn't fought over. */
  .site-header.is-fixed-top .site-header__panel:not(.is-open) {
    border-radius: 0;
  }
  /* The white pill itself grows into the full menu card instead of a
     separate overlay opening on top of it. .site-header__panel now
     owns the background/radius/shadow that .site-header__inner used
     to have on its own; .site-header__inner becomes a plain
     transparent row (logo + hamburger) that stays pinned to the top
     as the panel grows underneath it. Figma node 6:385: bg
     height=60px, logo starts 30px from the bg's left edge,
     hamburger/MENU group ends 30px from the bg's right edge, content
     vertically centered. Figma node 18:5/18:128 (open state): same
     390px-wide card, inset 20px on every side, height 892 of a
     932-tall frame -> calc(100vh - 40px), radius 25px. */
  .site-header__panel {
    background: var(--color-white);
    border-radius: 40px;
    box-shadow: 0 4px 20px rgba(33, 42, 55, 0.08);
    height: 60px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: height 0.4s cubic-bezier(0.65, 0, 0.35, 1),
                border-radius 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .site-header__panel.is-open {
    height: calc(100vh - 40px);
    border-radius: 25px;
  }
  .site-header__inner {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    height: 60px;
    flex-shrink: 0;
    padding: 0 30px;
  }
  .site-header.is-fixed-top .site-header__inner {
    padding: 0 50px;
  }
  .site-header__menu {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .site-header__panel.is-open .site-header__menu {
    opacity: 1;
    transition: opacity 0.25s ease 0.15s;
  }
  .site-nav { display: none; }
  .btn-contact { display: none; }
  .hamburger-btn { display: flex; }
  /* .site-header__right (margin-left:auto) pins the hamburger to the
     right edge with no enforced minimum gap, so the logo's rendered
     size has to be small enough to actually leave room for it - 26px
     leaves a clear ~23px gap at the 390px SP frame Figma was designed
     for (measured via headless Chromium). Deliberately not using
     flex-shrink/max-width to let it keep shrinking below that: an img
     with a fixed height and auto width gets its width squashed out of
     aspect ratio under flex pressure, which would distort the logo -
     worse than the gap just tightening on phones narrower than the
     390px baseline. */
  .site-logo__img { height: 26px; }

  .fv { height: 100vh; min-height: 500px; }
  .fv__shape {
    /* 280x162px window, centered, scaled-down radius */
    clip-path: inset(calc(50% - 81px) calc(50% - 140px) round 80px);
  }
  .fv.is-expanded .fv__shape {
    /* Figma SP: only a 10px edge margin in the expanded state, not 20px */
    clip-path: inset(10px round 24px);
  }
  .fv__headline-ja { font-size: 16px; }

  /* Figma SP (Index_sp): bg top=822, heading top=972 -> padding-top
     150px (not 60px). The base rule's margin-top:-100px overlap with
     .fv still applies at SP, so a too-small padding-top here was
     pulling the heading up into FV's photo - this is the unintended
     overlap. bg-bottom=2624, last btn-more bottom=2574 -> padding-
     bottom 50px (not 60px). */
  .topics { padding: 150px 0 50px; }
  .topics__layout { flex-direction: column; gap: 30px; }
  .news-grid { grid-template-columns: 1fr; gap: 30px; }
  .info-filters { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .info-filters button { width: auto; height: 40px; padding: 0 16px; font-size: 14px; }

  /* Figma SP: information bg-bottom(2624) -> Company heading top(2674)
     = 50px (not 60px). Company's own bottom: slider bottom(3639) ->
     recruit image top(3719) = 80px total, and recruit already
     contributes its own 80px padding-top, so company-sec's
     padding-bottom should be ~0, not 40px (that 40px was adding an
     extra, unintended gap on top of recruit's own padding). */
  .company-sec { padding: 50px 0 0; }
  .company-sec__inner { flex-direction: column; gap: 30px; margin-bottom: 40px; }
  .company-sec__text { max-width: none; }
  .company-sec__title { font-size: 24px; }
  .company-sec__body { font-size: 16px; margin-bottom: 50px; }
  .slider__track img { width: 200px; height: 300px; margin-right: 14px; }

  /* Figma SP: recruit-image is 390 wide x 650 tall (a TALL portrait
     ratio, ~0.6), not the 390/280 landscape ratio previously set here
     - that wrong ratio was squashing the card to roughly half its
     intended height. Width margin is also 20px/side (430-390=40
     total), not 30px/side. Text must stay overlaid on the photo (as
     on desktop) rather than stacked below it - removing the
     position:static/display:none overrides restores the base rule's
     absolute image + gradient + in-flow text-on-top technique, which
     still applies correctly once the card's own height is sized
     right via aspect-ratio. */
  .recruit__card { width: calc(100% - 40px); height: auto; aspect-ratio: 390 / 650; border-radius: 24px; }
  .recruit__text { max-width: none; padding: 30px 24px 0; }
  .recruit__text p { font-size: 16px; }

  /* Figma SP: every line in this card - title, tel row, mail row -
     shares the same horizontal centerline (x=215 in a 390-wide
     card), unlike desktop's left-aligned row layout. The previous
     fix correctly stacked these into a column but kept
     align-items:flex-start, which left everything hugging the left
     edge instead of centered. */
  /* Figma SP: the card's bg is 390px wide inside the 430px frame -
     a 20px side gutter, same as the Recruit card - not full-bleed
     edge-to-edge as it was rendering before (.contact-bar has no
     .container wrapper, so it needs its own width/margin here). */
  .contact-bar {
    width: calc(100% - 40px);
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    padding: 50px 30px;
    gap: 20px;
  }
  /* "Contact"(top=4479,h=50) -> "お問い合わせ"(top=4539): gap=10.
     "お問い合わせ" -> tel row(top=4586): gap=30 (20 from the
     container gap above + 10 extra here). tel -> mail row(top=4644):
     gap=20, already covered by .contact-bar's own gap. */
  .contact-bar__title { flex-direction: column; align-items: center; gap: 10px; margin-right: 0; margin-bottom: 10px; }
  .contact-bar__mail { margin-left: 0; max-width: 100%; }
  /* Figma's full-width SP card has room for "フォームでのお問い合わせは
     こちら" on one line, but on narrower phones the desktop-only
     white-space:nowrap (meant to keep the tel/mail rows from
     wrapping mid-word) pushes this longer mail link past the card's
     edge instead of breaking onto a second line. */
  .contact-bar__mail a { white-space: normal; min-width: 0; }
  /* Figma SP keeps the same 40px size as desktop - it was
     mistakenly shrunk to 30px in an earlier pass. Real-render check
     also found the inherited body line-height (1.6) was inflating
     this and the other Contact-card text/icon rows well beyond
     Figma's tight "leading-normal" metrics, pushing the card to
     310px tall instead of Figma's fixed 280px. */
  .contact-bar__en { font-size: 40px; line-height: 1.25; }
  .contact-bar__ja { line-height: 1.2; }
  .contact-bar__tel a { line-height: 1.2; }

  /* Figma SP (Index_sp) also has a deliberate overlap here, larger
     than desktop's: contact bg bottom(4729) - footer bg top(4589) =
     140px, not the 60px used on the wide frame. .contact-bar's
     position:relative + z-index:1 from the base rule already keeps
     it painted above the footer. This only works once the bar's
     rendered height actually matches Figma's 280px (see the title
     stacking fix above) - otherwise the footer eats into real
     content instead of just the bar's bottom padding. */
  body:has(.contact-bar) .site-footer { margin-top: -140px; border-radius: 30px 30px 0 0; padding: 190px 0 70px; }
  /* contact.html has no .contact-bar overlap, but still wants the
     same rounded-top treatment on SP as the rest of the site. */
  .site-footer { border-radius: 30px 30px 0 0; }
  /* Real headless-render check (not just coordinate math) showed the
     entire footer content - logo, address, mark, nav, legal links,
     copyright - flush against the screen edges with 0px gutter. Root
     cause: ".site-footer > .container { padding: 0; }" above is an
     unconditional override (no media query) meant only for desktop's
     own wide-gutter layout; it was leaking into SP. Inset tightened
     from 50px to 30px per explicit follow-up request, matching the
     30px side gutter already used elsewhere on the page (e.g.
     .contact-bar's own 30px). */
  .site-footer > .container { padding: 0 30px; }
  /* Figma SP order is nav links FIRST, then the logo/company/address
     block - reversed from the DOM order used for desktop's side-by-
     side layout. order:-1 flips it visually for the stacked column
     without touching markup. */
  /* Base rule's align-items:flex-start (meant for desktop's row
     layout) was carrying over here, making each stacked item
     (especially the nav) shrink-wrap to its own content width
     instead of stretching to the full 330px gutter - that's why the
     nav's divider lines and text were bunched up on the left instead
     of spanning to the right edge. align-items:stretch fixes it. */
  .site-footer__top { flex-direction: column; align-items: stretch; gap: 50px; }
  /* Figma SP nav is NOT a row of plain links like desktop - it's a
     vertical list with a divider rule above the first item and
     below every item (6 lines total for 5 items), each row a fixed
     72px (25px padding + ~22px text + 25px padding). Desktop's font
     size (18px) carries over unchanged; only the previous SP override
     (16px, plain wrapped row) was wrong and is removed here. The line
     spans the full 330px content width (edge-to-edge of the new 50px
     gutter), but Figma's text sits 25px further in than the line, so
     the <a> itself needs its own horizontal padding on top of that. */
  .site-footer__nav {
    order: -1;
    flex-direction: column;
    gap: 0;
    font-size: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
  .site-footer__nav a {
    display: block;
    padding: 25px 25px;
    line-height: 1.2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  /* Headless-render measurement vs fresh get_design_context found the
     body's global line-height:1.6 was inflating every text block in
     the footer beyond Figma's actual line spacing (confirmed via the
     line-to-line deltas between the divider rules and text tops in
     the SP node data: 72px/row implies ~22px text, i.e. line-height
     1.2 for the 18px nav text - applied above). Same over-tall issue
     affects the address (14px, Figma marks this <p> explicitly as
     leading-[1.5], not the inherited 1.8). */
  .site-footer__address { line-height: 1.5; }
  /* .site-footer__bottom's base padding-top(50px) was meant for the
     desktop row layout and, stacked on top of .site-footer__mark's
     own margin-bottom(30px), was adding ~50px of unintended extra
     space here - Figma's actual mark-to-links gap is just the 30px
     already provided by .site-footer__mark. */
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 25px; padding-top: 0; }
  /* Figma: the 3 legal links stack with only 10px between each,
     not the 25px desktop row-gap that was being carried over - the
     line-height fix above brings the per-line height down so this
     10px gap reproduces Figma's true 27px line-to-line delta. */
  .site-footer__links { flex-direction: column; gap: 10px; }
  .site-footer__links a { line-height: 1.2; }

  /* Figma SP (Company_sp): bg height=250, heading top=110 (30px
     clearance below the floating 80px header), bg-bottom -
     breadcrumb-bottom = 24px (not 140/40). Breadcrumb stays
     right-aligned (Figma x=271 vs heading x=40) even though the
     column stacks below the heading, unlike the heading's own
     flex-start alignment. Real-render check (headless Chromium)
     showed the inherited body line-height:1.6 was inflating
     title-head__en/__ja/breadcrumb well past Figma's tight type
     metrics, pushing the breadcrumb ~15-20px lower than intended -
     tightened line-heights + an explicit ja margin-top + a larger
     inner gap (10->20, matching the Figma ja-bottom->breadcrumb-top
     delta) bring it back in line. */
  .title-head { padding: 110px 0 50px; }
  .title-head__en { font-size: 40px; line-height: 1.25; }
  .title-head__ja { display: block; line-height: 1.2; margin-top: 10px; }
  .title-head__inner { align-items: flex-start; flex-direction: column; gap: 20px; }
  .title-head .breadcrumb { align-self: flex-end; line-height: 1.2; }

  /* Figma SP (Company_sp): title-head-bottom -> heading-top = 30px,
     message-bottom -> Services bg top = 50px (not 60/60). The photo
     sits AFTER the 3 body paragraphs (not before them, as
     column-reverse produced) and is flush to the right edge at a
     fixed 200x223 size (not centered/max-width 280x320) - column (no
     reverse) + margin-left:auto reproduces this. The sign caption
     still renders after the photo (one position later than Figma's
     photo-then-sign), an acceptable deviation since message__sign
     lives inside message__text in the markup. */
  /* Figma SP (Company_sp) re-fetched: real text-node Y's show the
     gap between the last body paragraph and the photo, and between
     the photo and the sign, are both ~10px (not 30) - the photo
     sits between para3 and the sign in Figma, but it's a sibling
     after message__text (which contains the sign) in our markup, so
     an exact reorder isn't possible without breaking desktop's row
     layout; tightening gap/margin to the same 10px keeps the
     surrounding rhythm close to spec despite the swapped order.
     Paragraph-to-paragraph gap is 20px in Figma, not the inherited
     1.6em (25.6px). */
  .message { padding: 50px 0; }
  .message__inner { flex-direction: column; gap: 10px; }
  .message__text p { margin-bottom: 20px; }
  .message__sign { margin-top: 10px; }
  /* sign text node measures 19px in Figma (no explicit lineHeight,
     ~1.2 auto) but was inheriting .message__text p's line-height:2
     (32px) - a 13px excess on its own line. */
  .message__text p.message__sign { line-height: 1.2; }
  .message__photo { width: 200px; max-width: 200px; height: 223px; flex-basis: auto; margin: 0 0 0 auto; }
  /* 代表写真の差し替え依頼: ボックスは200px幅のまま、object-fit: cover で隙間なく表示する */
  .message__photo img { object-fit: cover; }

  /* Figma SP (Company_sp): re-derived from the gray bg box itself
     (430x1893 group) rather than from absolute Y alone - heading top
     sits 30px inside the bg top, and the last card ends 50px above
     the bg bottom, so padding is 30/50 (not the carried-over desktop
     60/60). lead -> first card = 30px (not 60, via services__lead's
     desktop margin), card -> card ~30-37px (not 50), and within each
     card: image -> title 20px, title -> body ~10-13px, body -> list
     ~10-11px (not the desktop 24/16/20). */
  /* Figma SP (Company_sp): message/service/overview/history groups are
     all x:40 width:350 inside the 430px frame - i.e. 40px side margins,
     not the global .container's 20px. The extra 20px/side was widening
     service-card images (aspect-ratio'd to card width) by ~23px each
     and is very likely a meaningful share of the broader "余白が異な
     ります" complaint beyond what line-height fixes alone explain. */
  .title-head > .container,
  .message > .container,
  .services > .container,
  .dl-section > .container,
  .access > .container { padding: 0 40px; }
  .services { padding: 50px 0; }
  .services__lead { margin-bottom: 30px; }
  .service-grid { grid-template-columns: 1fr; gap: 30px; }
  /* Scoped to the direct-child thumbnail only - ".service-card img"
     was also matching the small dot icons inside .service-card__list
     li, adding 20px margin-bottom to every list row (37px instead of
     Figma's 19px per row). */
  .service-card > img { margin-bottom: 20px; }
  .service-card__title { margin-bottom: 10px; line-height: 1.2; }
  .service-card__body { margin-bottom: 10px; }
  .service-card__list li { margin-bottom: 10px; line-height: 1.2; }

  /* Figma SP (Company_sp): Services-bottom -> Overview-top and
     Overview-bottom -> History-top are both 50px (top padding only -
     no separate bottom padding on non-last dl-sections), while
     History's own bottom -> Contact-card top is 80px, the same as
     the desktop value, so no reduction is needed there; the previous
     30px was an unverified guess made before this Figma data
     existed. Each row's date/description pair has 20px padding
     above and below the pair and a 10px gap between date and
     description (not 18px/6px). */
  .dl-section { padding: 50px 0; }
  .dl-section:last-of-type { padding-bottom: 50px; }

  /* Company_sp has no dedicated "access" frame yet, so this mirrors the
     same column-stack treatment already used for .message__inner and
     .company-sec__inner at this breakpoint, and the same 50px rhythm
     as the surrounding .dl-section blocks. */
  .access { padding: 50px 0; }
  .access__inner { flex-direction: column; gap: 24px; }
  .access__map { width: 100%; flex-basis: auto; }
  .access__map iframe { height: 220px; }

  /* Figma SP (Company_sp): real-render check showed every .sec-heading
     inside Message/Services/Overview/History was rendering noticeably
     taller than Figma's type box (inherited body line-height:1.6 vs
     Figma's tight ~1.2-1.25), which widens the visible gap below each
     label even though the margin-bottom value itself was correct.
     Scoped to these 3 company.html sections only (not the bare
     .sec-heading class) so index.html's already-verified Information/
     Company/Recruit headings are untouched. Message's English label
     ("Message") also measures 24px in Figma, smaller than the 30px
     shared by Services/Overview/History. */
  .message .sec-heading__en { font-size: 24px; line-height: 1.25; }
  .message .sec-heading__ja,
  .services .sec-heading__ja,
  .dl-section .sec-heading__ja { line-height: 1.2; margin-top: 10px; }
  .services .sec-heading__en,
  .dl-section .sec-heading__en { line-height: 1.25; }
  /* Figma SP (Company_sp): every dt/dd text node measures ~19px tall
     at font-size 16px (~1.2 line-height, Figma's "auto" leading), but
     dt/dd inherit body's line-height:1.6 (25.6px) with no override -
     a ~13px/row excess that, across 13 rows (Overview 8 + History 5),
     accounted for a large share of the overall "余白が異なります"
     drift the user flagged. */
  .dl-row { flex-direction: column; gap: 10px; padding: 20px 0; }
  .dl-row dt, .dl-row dd { line-height: 1.2; }
  .dl-row dt { flex-basis: auto; font-weight: 600; }

  .sec-heading__en { font-size: 30px; }
}