/* ========================================
   株式会社VERTA トップページ専用スタイル
   VERTA_TOP_PAGE_SPEC.md 準拠
   ※このファイルは index.html のみで読み込む。
     他ページの css/style.css には影響しない。
   ======================================== */

/* ---------- Tokens ---------- */
:root {
  --color-bg: #ffffff;
  --color-bg-soft: #f5fafb;
  --color-primary: #00586c;
  --color-primary-hover: #004958;
  --color-primary-light: #ddeff1;
  --color-primary-very-light: #eef7f8;

  --color-text: #172129;
  --color-text-sub: #46545a;
  --color-text-muted: #6c777c;

  --color-line: #d8e3e5;
  --color-line-light: #e9eff0;

  --color-white: #ffffff;

  --font-sans-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", sans-serif;
  --font-serif-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* コンテンツ左端までの距離。全幅セクションの内側揃えに使う */
  --gutter: 24px;

  --header-h: 64px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: max(48px, calc((100vw - 1400px) / 2 + 48px));
    --header-h: 88px;
  }
}

@media (min-width: 1440px) {
  :root {
    --gutter: max(64px, calc((100vw - 1400px) / 2 + 64px));
  }
}

/* ---------- Reset / Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* 固定ヘッダーの下にアンカー先（#news 等）が潜らないようにする */
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--font-sans-jp);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/*
  写真枠は「枠の高さ＝CSSで決める / 画像は中に敷く」構造にする。
  こうしないと画像の内在サイズがグリッド行の高さを決めてしまう。
*/
.media-frame {
  position: relative;
  overflow: hidden;
}

.media-frame picture,
.media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.media-frame img {
  object-fit: cover;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* 参照デザインどおりの改行位置をスマホでだけ再現する */
.br-sp {
  display: inline;
}

@media (min-width: 768px) {
  .br-sp {
    display: none;
  }
}

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

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 12px 20px;
  color: #fff;
  background: var(--color-primary);
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  /* ヘッダー・各セクション・フッターで共通のグリッド幅。左端をすべて揃える */
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 24px;
}

@media (min-width: 768px) {
  .container {
    padding-inline: 32px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 48px;
  }
}

@media (min-width: 1440px) {
  .container {
    padding-inline: 64px;
  }
}

.section {
  position: relative;
  padding-block: 72px 80px;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .section {
    padding-block: 120px 140px;
  }
}

/* ---------- Typography ---------- */
.section-label {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.11em;
  color: var(--color-primary);
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .section-label {
    font-size: 14px;
    letter-spacing: 0.12em;
  }
}

/* ラベル下の細いティールライン */
.label-rule {
  display: block;
  width: 32px;
  height: 1px;
  margin-top: 12px;
  background: var(--color-primary);
}

.section-heading {
  font-family: var(--font-serif-jp);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .section-heading {
    font-size: clamp(38px, 3.2vw, 56px);
    line-height: 1.4;
  }
}

.section-sub {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.body-text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

@media (min-width: 1024px) {
  .body-text {
    font-size: 16px;
    line-height: 2;
  }
}

/* ---------- CTA ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  height: 56px;
  padding-inline: 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-primary .arrow {
  flex: none;
  transition: transform 0.2s ease;
}

@media (min-width: 1024px) {
  .btn-primary {
    width: auto;
    min-width: 240px;
    height: 60px;
    padding-inline: 30px;
  }

  .btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
  }

  .btn-primary:hover .arrow {
    transform: translateX(4px);
  }
}

.link-secondary {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  transition: color 0.2s ease;
}

.link-secondary .arrow {
  flex: none;
  transition: transform 0.2s ease;
}

@media (min-width: 1024px) {
  .link-secondary {
    font-size: 15px;
  }

  .link-secondary:hover {
    color: var(--color-primary-hover);
  }

  .link-secondary:hover .arrow {
    transform: translateX(4px);
  }
}

/* ---------- 装飾モチーフ ---------- */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.deco-line {
  width: 1px;
  background: var(--color-primary);
  opacity: 0.28;
}

.deco-word {
  font-family: var(--font-en);
  font-weight: 400;
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0.05;
}

/* ========================================
   HEADER
   ======================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(6px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
}

.site-logo {
  flex: none;
  display: block;
}

.site-logo img {
  width: 112px;
  height: auto;
}

@media (min-width: 1024px) {
  .site-logo img {
    width: 138px;
  }
}

.global-nav {
  display: none;
}

@media (min-width: 1024px) {
  .global-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  .global-nav__list {
    display: flex;
    align-items: center;
    gap: 38px;
  }

  .global-nav__list a {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
    transition: color 0.2s ease;
  }

  .global-nav__list a:hover {
    color: var(--color-primary);
  }

  /* 現在地（page＝そのページ／true＝配下のページ）。文字色＋下線で示す */
  .global-nav__list a[aria-current] {
    position: relative;
    color: var(--color-primary);
  }

  .global-nav__list a[aria-current]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    background: var(--color-primary);
  }

  .site-header .btn-primary {
    min-width: 210px;
    height: 64px;
    margin-left: 40px;
    gap: 22px;
    font-size: 14px;
  }
}

@media (min-width: 1440px) {
  .global-nav__list {
    gap: 44px;
  }
}

/* ハンバーガー */
.nav-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  margin-right: -10px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

body.is-nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

body.is-nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

body.is-nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* モバイルドロワー */
.drawer {
  position: fixed;
  top: var(--header-h);
  left: 0;
  z-index: 99;
  display: none;
  width: 100%;
  height: calc(100dvh - var(--header-h));
  padding: 8px 24px 40px;
  overflow-y: auto;
  background: var(--color-white);
}

body.is-nav-open .drawer {
  display: block;
}

@media (min-width: 1024px) {
  .drawer {
    display: none !important;
  }
}

.drawer__list a {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-line-light);
}

.drawer__list a[aria-current] {
  color: var(--color-primary);
}

.drawer .btn-primary {
  margin-top: 28px;
}

/* ========================================
   FV / HERO
   ======================================== */
.hero {
  position: relative;
  background: var(--color-white);
}

.hero__media {
  z-index: 1;
  width: 100%;
  /* スマホ専用画像 805x604 の実比率。切り抜かずに全体を出す */
  aspect-ratio: 805 / 604;
}

.hero__media img {
  object-position: 50% 50%;
}

.hero__body {
  position: relative;
  z-index: 1;
  padding: 46px 24px 56px;
}

.hero__title {
  font-family: var(--font-sans-jp);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--color-text);
  /* <br> の位置でのみ改行させ、必ず2行に固定する */
  white-space: nowrap;
}

.hero__lead {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-primary);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  margin-top: 32px;
}


@media (min-width: 768px) {
  .hero__media {
    /* PC用画像 965x917 の実比率。横長に潰して都市とV字を切らない */
    aspect-ratio: 965 / 917;
  }

  .hero__body {
    padding: 52px 32px 64px;
  }

  .hero__title {
    font-size: 44px;
  }
}

@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: 45% 55%;
    height: clamp(680px, calc(100svh - var(--header-h)), 880px);
  }

  .hero__body {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 左端をロゴ・各セクションと同じ共通グリッドに揃える */
    padding: 0 24px 0 var(--gutter);
    padding-top: 2vh;
  }

  .hero__inner {
    position: relative;
    top: -14px;
    max-width: 620px;
  }

  .hero__title {
    font-size: clamp(56px, 4.6vw, 72px);
    line-height: 1.3;
  }

  .hero__lead {
    margin-top: 36px;
    font-size: 20px;
  }

  .hero__actions {
    gap: 22px;
    margin-top: 40px;
  }

  /* 「採」と「V」の開始X座標を揃える */
  .hero__actions .btn-primary {
    min-width: 280px;
    padding-inline: 30px;
  }

  .hero__actions .link-secondary {
    margin-left: 31px; /* padding-inline 30px + border 1px */
  }

  .hero__media {
    order: 2;
    aspect-ratio: auto;
    height: 100%;
    /*
      斜めのV字形状は画像そのものに焼き込まれている。
      ここで clip-path を重ねると斜めが二重になるため、指定しない。
    */
  }

  .hero__media img {
    /*
      画像を切らずに全体を見せる。左右の白はサイト背景と同色なので、
      contain でも継ぎ目は出ない。上端をヘッダー直下へ寄せる。
    */
    object-fit: contain;
    object-position: 50% 0%;
  }
}

/* FV 装飾：コピーと写真の間の薄いティール斜面 */
.hero__deco {
  display: none;
}

@media (min-width: 1024px) {
  .hero__deco {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    overflow: hidden;
  }

  .hero__deco::before,
  .hero__deco::after {
    content: "";
    position: absolute;
    top: -10%;
    height: 120%;
  }

  .hero__deco::before {
    left: 46%;
    width: 8%;
    background: var(--color-primary-very-light);
    opacity: 0.75;
    transform: skewX(-11deg);
  }

  .hero__deco::after {
    left: 53.5%;
    width: 3%;
    background: var(--color-primary-light);
    opacity: 0.35;
    transform: skewX(-11deg);
  }
}

/* ========================================
   ABOUT VERTA
   ======================================== */
.about {
  background: var(--color-white);
}

.about__deco-word {
  top: 0;
  left: 50%;
  font-size: clamp(104px, 14.5vw, 213px);
  transform: translateX(-42%);
  opacity: 0.03;
}

.about__deco-line-1 {
  top: 0;
  left: 4%;
  height: 200px;
  transform: rotate(24deg);
  transform-origin: top center;
}

.about__deco-line-2 {
  right: 6%;
  bottom: 0;
  height: 240px;
  transform: rotate(24deg);
  transform-origin: bottom center;
}

.about__inner {
  position: relative;
}

.about__heading {
  margin-top: 26px;
  font-family: var(--font-sans-jp);
  font-size: 34px;
  font-weight: 650;
  line-height: 1.5;
  color: var(--color-text);
}

.about__text {
  margin-top: 24px;
}

.about .btn-primary {
  margin-top: 32px;
}

/* スマホのみ（〜767px）。タブレット(768〜)・PC(1024〜)には影響させない */
@media (max-width: 767px) {
  .about {
    /* .section の padding-block(72px 80px) のうち下だけ35px詰めて
       BUSINESS の写真へのつながりを近づける。BUSINESS 側は変更なし */
    padding-bottom: 45px;
  }

  .about__deco-word {
    /* 背景の巨大「ABOUT」を見出しより弱く。
       104px → 88px（-15%）／opacity 0.03 → 0.022 */
    font-size: 88px;
    opacity: 0.022;
  }
}

@media (min-width: 1024px) {
  .about {
    display: flex;
    align-items: center;
    min-height: 500px;
    padding-block: 100px;
  }

  .about__inner {
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: start;
    gap: 72px;
    width: 100%;
  }

  /*
    右カラムの本文が上に浮かないよう、左カラムの
    ラベル(20px)＋私たちについて(23px)＋見出しmargin(40px) を基準に
    大見出しの少し上から読み始められる位置へ下げる。
  */
  .about__body-col {
    padding-top: 63px;
    /*
      行送りの差（見出しは半レディング13px、本文は8px）で本文が
      見出しより約25px上に見えるため、レイアウト高さを変えない
      相対位置で25px下げて1行目の見た目を揃える。
    */
    position: relative;
    top: 25px;
  }

  .about__heading {
    margin-top: 40px;
    font-size: clamp(42px, 4vw, 64px);
    line-height: 1.45;
  }

  .about__text {
    margin-top: 0;
  }

  .about .btn-primary {
    margin-top: 36px;
  }
}

/* ========================================
   BUSINESS
   ======================================== */
.business {
  padding-block: 0;
  background: var(--color-white);
}

.business__visual {
  width: 100%;
  aspect-ratio: 1.02 / 1;
}

.business__body {
  padding: 34px 24px 72px;
}

.business__label {
  display: none;
}

.business__label--mobile {
  display: block;
  padding: 64px 24px 24px;
}

.business__heading {
  font-family: var(--font-serif-jp);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.45;
}

.business__text {
  margin-top: 20px;
}

.business .btn-primary {
  margin-top: 30px;
}

.business__services {
  margin-top: 40px;
  font-size: 13px;
  line-height: 2.1;
  color: var(--color-text-sub);
}

.business__services::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin-bottom: 18px;
  background: var(--color-primary);
}

.business__services span {
  white-space: nowrap;
}

.business__services .sep {
  margin-inline: 10px;
  color: var(--color-line);
}

/* スマホのみ（〜767px）。タブレット(768〜)・PC(1024〜)には影響させない */
@media (max-width: 767px) {
  .business__services {
    /* 4事業名の行間を 27.3px → 32.5px に広げて1件ずつ拾いやすくする。
       文字サイズ(13px)・文言・separator は変更なし */
    line-height: 2.5;
  }

  .business__services .sep {
    /* 同じ行に並ぶ事業名どうしの間も少し離す */
    margin-inline: 14px;
  }

  .business__body {
    /* 下だけ 72px → 47px。RECRUIT 側は変更なし */
    padding-bottom: 47px;
  }
}

@media (min-width: 768px) {
  .business__visual {
    aspect-ratio: 1.6 / 1;
  }

  .business__label--mobile {
    padding-inline: 32px;
  }

  .business__body {
    padding-inline: 32px;
  }
}

@media (min-width: 1024px) {
  .business {
    display: grid;
    /* ABOUT（.container）と同じコンテンツ幅・左右余白・中央配置に揃える */
    /* 写真は 573x646。高さは据え置きで横だけ広げている */
    grid-template-columns: minmax(0, 1fr) min(573px, 47%);
    gap: 48px;
    align-items: start;
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    /* ABOUTとの間隔を詰める。padding-topは0にし、残り10pxは
       負のmargin-topで上げる（ABOUT側のCSSは触らない）。計40px上へ。
       ABOUTは position:relative なので、重ねた10pxがABOUTの白背景に
       隠れないよう z-index で前面に出す。 */
    position: relative;
    z-index: 1;
    margin-top: -10px;
    padding: 0 48px 100px;
  }

  .business__label--mobile {
    display: none;
  }

  .business__label {
    display: block;
  }

  .business__body {
    padding: 0;
  }

  .business__heading {
    margin-top: 26px;
    font-size: clamp(38px, 3.2vw, 56px);
    line-height: 1.4;
  }

  .business__text {
    margin-top: 28px;
  }

  .business .btn-primary {
    margin-top: 38px;
  }

  .business__services {
    margin-top: 74px;
    font-size: 14px;
  }

  .business__visual {
    order: 2;
    aspect-ratio: auto;
    /*
      左テキストと同じ上下位置に収める。
      margin は .business__body の padding と同値にしているので、
      写真の上端＝「BUSINESS」ラベル、下端＝4事業名の下端で揃う。
    */
    /* 高さ646pxを保ったまま横だけ広げた比率。
       縦は約5.6%だけトリミングされる（4現場はすべて残る） */
    align-self: start;
    aspect-ratio: 573 / 646;
    height: auto;
    margin: 0;
  }
}

/* ========================================
   RECRUIT
   ======================================== */
.recruit {
  padding-block: 0;
  background: var(--color-white);
}

.recruit__visual {
  width: 100%;
  aspect-ratio: 0.94 / 1;
}

.recruit__body {
  padding: 40px 24px 72px;
}

.recruit__label-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.recruit__label-row .rule {
  flex: 1;
  max-width: 150px;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.6;
}

.recruit__heading {
  margin-top: 14px;
  font-family: var(--font-serif-jp);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.4;
}

.recruit__message {
  margin-top: 24px;
  font-family: var(--font-sans-jp);
  font-size: 34px;
  font-weight: 650;
  line-height: 1.5;
  color: var(--color-primary);
}

.recruit__text {
  margin-top: 22px;
}

.recruit .btn-primary {
  margin-top: 30px;
}

.recruit__targets {
  /* リンクの上下パディング12px分を差し引き、見た目の余白は従来の26pxのまま */
  margin-top: 14px;
  font-size: 13px;
  color: var(--color-primary);
}

.recruit__targets a {
  /* SPでもタップしやすい高さを確保（見た目の文字サイズは変えない） */
  display: inline-block;
  padding-block: 12px;
}

.recruit__targets .sep {
  margin-inline: 10px;
  color: var(--color-line);
}

/* スマホのみ（〜767px）。タブレット(768〜)・PC(1024〜)には影響させない */
@media (max-width: 767px) {
  .recruit__visual {
    /*
      横幅は100%のまま、高さだけ 0.94/1 → 1/1 で約6%縮める
      （375px幅で 399px → 375px）。元画像555x800の見せ幅は
      73.8% → 69.4% とわずかに狭まるだけで、3人の会話／2人の会話／
      男性の説明の3シーンはすべて残る
    */
    aspect-ratio: 1 / 1;
  }

  .recruit__body {
    /* 下だけ 72px → 47px。NEWS 側は変更なし */
    padding-bottom: 47px;
  }
}

@media (min-width: 768px) {
  .recruit__visual {
    aspect-ratio: 1.5 / 1;
  }

  .recruit__body {
    padding-inline: 32px;
  }
}

@media (min-width: 1024px) {
  .recruit {
    display: grid;
    /* ABOUT / BUSINESS と同じコンテンツ幅・左右余白・中央配置 */
    /* 写真の存在感を上げるため右カラムを 512px → 573px に拡張。
       右端は共通グリッド（max-width 1400 + padding-inline）のままなので、
       広がるのは左方向だけでページ右端からは飛び出さない */
    grid-template-columns: minmax(0, 1fr) min(573px, 46%);
    gap: 48px;
    align-items: start;
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding: 60px 48px 100px;
  }

  .recruit__body {
    padding: 0;
  }

  .recruit__heading {
    margin-top: 24px;
    font-size: clamp(32px, 2.6vw, 44px);
  }

  .recruit__message {
    margin-top: 40px;
    font-size: clamp(42px, 4vw, 64px);
  }

  .recruit__text {
    margin-top: 36px;
  }

  .recruit .btn-primary {
    margin-top: 36px;
  }

  .recruit__targets {
    margin-top: 36px;
    font-size: 14px;
  }

  .recruit__visual {
    order: 2;
    /* 上端は左の「RECRUIT」ラベルと揃えたまま（align-self: start）、
       右方向 573px・下方向 704px へ拡大。
       元画像 555x800 に対する上下のトリミングは 13.3% → 14.8%（片側 +0.75%）
       とほぼ据え置きで、3枚＋プレゼン写真はすべて残る */
    align-self: start;
    aspect-ratio: 573 / 704;
    height: auto;
    margin: 0;
  }
}

@media (min-width: 1440px) {
  .business,
  .recruit {
    padding-inline: 64px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .business {
    grid-template-columns: minmax(0, 1fr) min(573px, 47%);
  }

  .recruit {
    grid-template-columns: minmax(0, 1fr) min(573px, 46%);
  }
}

/* ========================================
   NEWS
   ======================================== */
.news {
  background: var(--color-white);
}

.news__deco-line {
  top: 6%;
  right: 12%;
  height: 260px;
  transform: rotate(30deg);
  opacity: 0.2;
}

.news__heading {
  margin-top: 22px;
}

.news__lead {
  margin-top: 18px;
}

.news__list {
  margin-top: 34px;
  /*
    JS描画前に高さを確保してCLSを防ぐ。
    js/home.js の VERTA_NEWS の件数に合わせること（現在1件 = 149px + 罫線1本）。
    件数を増やしたら 1件あたり149pxずつ足す。
  */
  min-height: 150px;
  border-top: 1px solid var(--color-line);
}

.news__item {
  display: grid;
  grid-template-columns: 1fr 24px;
  grid-template-areas:
    "date arrow"
    "cat arrow"
    "title arrow";
  align-items: center;
  gap: 6px 12px;
  padding-block: 20px;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text);
  transition: background-color 0.2s ease;
}

.news__date {
  grid-area: date;
  font-family: var(--font-en);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
}

.news__cat {
  grid-area: cat;
  justify-self: start;
  padding: 3px 12px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-primary);
  background: var(--color-primary-very-light);
  border-radius: 3px;
}

.news__title {
  grid-area: title;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text);
}

.news__arrow {
  grid-area: arrow;
  justify-self: end;
  color: var(--color-primary);
  transition: transform 0.2s ease;
}

.news__more {
  margin-top: 34px;
}

/* スマホのみ（〜767px）。タブレット(768〜)・PC(1024〜)には影響させない */
@media (max-width: 767px) {
  .news {
    /* .section の padding-block(72px 80px) のうち下だけ40px詰める。
       CONTACT 側（padding-top 72px）は変更なし */
    padding-bottom: 40px;
  }
}

@media (min-width: 1024px) {
  .news {
    /* .section の padding-block(120px 140px) のうち上だけ40px詰める。
       下と RECRUIT 側は変更しない */
    padding-top: 80px;
  }

  .news__heading {
    margin-top: 30px;
  }

  .news__lead {
    margin-top: 26px;
  }

  .news__list {
    margin-top: 56px;
    /* JS描画前の高さ確保。現在1件 = 88px + 罫線1本。1件増えるごとに +88px */
    min-height: 89px;
    /*
      max-width の頭打ち（1100px）を外し、共通グリッド（1400px）の
      コンテンツ幅いっぱいまで使う。見出し・本文と左右端が揃い、
      右側だけに空きが残らなくなる。
    */
  }

  .news__item {
    grid-template-columns: 120px 110px 1fr 24px;
    grid-template-areas: "date cat title arrow";
    align-items: center;
    gap: 0;
    min-height: 88px;
    padding-block: 0;
  }

  .news__date {
    font-size: 15px;
  }

  .news__title {
    font-size: 16px;
    padding-right: 24px;
  }

  .news__item:hover .news__title {
    color: var(--color-primary);
  }

  .news__item:hover .news__arrow {
    transform: translateX(4px);
  }

  .news__more {
    margin-top: 52px;
  }
}

/* ========================================
   CONTACT
   ======================================== */
/*
  CONTACT背景演出。
  白ベースは維持し、セクションの左右端にだけ薄いティールの光を重ねる。
  ティールは images/logo/verta-logo.svg のアクセント色 #33BBBD（= rgb(51 187 189)）、
  淡いブルーグレーは既存トークン --color-primary-very-light #eef7f8 の値を使用。
  文字・CTAの背面はほぼ白のまま残す。アニメーションは持たせない。
*/
.contact {
  /* 装飾が .contact__inner(z-index:1) より前面に出ないよう独立した重なり文脈にする */
  isolation: isolate;
  background:
    radial-gradient(ellipse 46% 40% at -8% 22%,
      rgb(51 187 189 / 6%) 0%, rgb(238 247 248 / 5%) 46%, transparent 74%),
    radial-gradient(ellipse 40% 38% at 108% 30%,
      rgb(51 187 189 / 5%) 0%, rgb(238 247 248 / 4%) 48%, transparent 76%),
    var(--color-white);
}

/*
  左上アクセントはPC（1024px〜）のみ表示する。
  1023px以下はCONTACT本文が左揃えのため、左端の装飾が文章へ被る。
  仕様書8章の「重なる場合は可読性を優先」に従い、背景グラデーションだけを残す。
*/
.contact__deco--left {
  display: none;
}

.contact__inner {
  position: relative;
  z-index: 1;
}

.contact__heading {
  margin-top: 22px;
}

.contact__lead {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-primary);
}

.contact__text {
  margin-top: 18px;
}

.contact .btn-primary {
  margin-top: 34px;
}

.contact__sub {
  margin-top: 30px;
}

@media (min-width: 768px) {
  .contact {
    background:
      radial-gradient(ellipse 44% 44% at -8% 24%,
        rgb(51 187 189 / 7%) 0%, rgb(238 247 248 / 6%) 46%, transparent 74%),
      radial-gradient(ellipse 40% 42% at 107% 30%,
        rgb(51 187 189 / 6%) 0%, rgb(238 247 248 / 5%) 48%, transparent 76%),
      var(--color-white);
  }
}

.contact__deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.contact__deco svg {
  position: absolute;
  right: -6%;
  bottom: -14%;
  width: min(620px, 78%);
  height: auto;
  color: var(--color-primary);
  opacity: 0.3;
}

@media (min-width: 1024px) {
  .contact {
    /* 左右の光に加え、右下は既存線画とつながる面をフッター側へ流す */
    background:
      radial-gradient(ellipse 42% 48% at -7% 26%,
        rgb(51 187 189 / 10%) 0%, rgb(238 247 248 / 8%) 44%, transparent 74%),
      radial-gradient(ellipse 38% 46% at 106% 30%,
        rgb(51 187 189 / 8%) 0%, rgb(238 247 248 / 6%) 48%, transparent 76%),
      radial-gradient(ellipse 34% 30% at 92% 104%,
        rgb(51 187 189 / 8%) 0%, transparent 74%),
      var(--color-white);
    display: flex;
    align-items: center;
    /* 中身(432px)＋上下余白でセクション高さが決まる。min-height は
       内容が短い場合の下限で、現状(642px)では効いていない＝縦中央寄せに
       よる余白は発生していない */
    min-height: 600px;
    /* .section の padding-block(120px 140px) を 100px / 110px に */
    padding-block: 100px 110px;
    /*
      NEWS の padding-bottom(140px) は変更禁止のため、CONTACT 側の
      負の margin で 110px 引き上げて重ねる（BUSINESS が ABOUT に対して
      使っているのと同じ手法）。
      結果:「一覧を見る」下端 → CONTACT ラベルまで 220px → 130px。
      重なるのは NEWS 下部の空白のみで、CONTACT は後発の
      position: relative 要素なので前面に描画される。
    */
    margin-top: -110px;
  }

  .contact__inner {
    width: 100%;
  }

  /*
    PCは中央構成。本文ブロックを720pxに絞り、共通グリッドの中央へ置く。
    スマホ（〜1023px）は左揃えのまま変更しない。
  */
  .contact__body {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }

  /* ラベル下の短いティール線は幅32pxのブロックなので個別に中央へ */
  .contact__body .label-rule {
    margin-inline: auto;
  }

  /*
    CTAと採用リンクは inline-flex のため、親の text-align: center で中央に乗る。
    ボタン内部は justify-content: space-between のままなので、
    文字は左・矢印は右の現在の配置を維持する。
  */

  .contact__heading {
    margin-top: 30px;
  }

  .contact__lead {
    margin-top: 34px;
    font-size: 20px;
  }

  .contact__text {
    margin-top: 24px;
  }

  .contact .btn-primary {
    width: 100%;
    max-width: 400px;
    margin-top: 46px;
  }

  .contact__sub {
    margin-top: 38px;
  }

  /*
    装飾は画面の最右端ではなく、共通グリッドの右端に合わせて置く。
    right は .container の内側端（= はみ出し分の半分 + padding）と同じ計算。
    width はコンテンツ幅の44%＝右カラム幅。
  */
  /*
    本文が中央に来たので、装飾は背景として右下へ逃がし、
    主張を弱める（opacity 0.3 → 0.16）。
  */
  .contact__deco svg {
    right: max(48px, calc((100vw - 1400px) / 2 + 48px));
    bottom: -20%;
    /*
      中央のCTA（400px）と採用リンクに掛からない幅にする。
      画面中心から右へ260px空けた位置が装飾の左端の上限。
    */
    width: min(calc(50vw - 260px), 436px);
    opacity: 0.16;
  }
}

/* .container の padding-inline が 32px → 64px に変わるため、装飾も追従させる */
@media (min-width: 1440px) {
  .contact__deco svg {
    right: max(64px, calc((100vw - 1400px) / 2 + 64px));
    /* 幅は 1024px 側の min() 指定をそのまま使うため、ここでは right のみ調整 */
  }
}

/* ========================================
   FOOTER
   ======================================== */
.site-footer {
  position: relative;
  background: var(--color-bg-soft);
  overflow: hidden;
}

.site-footer__main {
  padding-block: 48px 40px;
}

.footer-brand__logo img {
  width: 132px;
  height: auto;
}

.footer-brand__tagline {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

.footer-col__title {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--color-primary);
}

.footer-links {
  display: grid;
  gap: 4px;
}

.footer-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  line-height: 2.1;
  color: var(--color-text-sub);
  transition: color 0.2s ease;
}

.footer-links a::before {
  content: "›";
  color: var(--color-primary);
  opacity: 0.7;
}

.footer-links a:hover {
  color: var(--color-primary);
}

/* --- SP アコーディオン --- */
.footer-acc {
  margin-top: 36px;
  border-top: 1px solid var(--color-line);
}

.footer-acc__item {
  border-bottom: 1px solid var(--color-line);
}

.footer-acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding-block: 8px;
  text-align: left;
}

.footer-acc__btn .chevron {
  flex: none;
  color: var(--color-primary);
  transition: transform 0.2s ease;
}

.footer-acc__btn[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.footer-acc__panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.footer-acc__panel[data-open="true"] {
  opacity: 1;
}

.footer-acc__panel > div {
  padding-bottom: 18px;
}

/* --- SNS --- */
.footer-col__title::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  margin-top: 10px;
  background: var(--color-primary);
  opacity: 0.55;
}

/* SPではアコーディオン見出しの下線は出さない（SNS見出しのみ） */
.footer-acc__item .footer-col__title::after {
  display: none;
}

.footer-sns__title {
  margin-bottom: 6px;
}

.footer-sns {
  margin-top: 32px;
}

.footer-sns__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

.footer-sns__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding-block: 8px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-line);
  transition: color 0.2s ease;
}

.footer-sns__list a:hover {
  color: var(--color-primary);
}

.footer-sns__icon {
  flex: none;
  width: 28px;
  height: 28px;
}

.footer-sns__name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.footer-sns__note {
  display: block;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.footer-sns__ext {
  flex: none;
  color: var(--color-text-muted);
}

/* --- footer bottom --- */
.site-footer__bottom {
  border-top: 1px solid var(--color-line);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-block: 22px;
}

.footer-copy {
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-sub);
}

.footer-utility {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
}

.footer-utility a {
  color: var(--color-text-sub);
}

.footer-utility a:hover {
  color: var(--color-primary);
}

.footer-utility .divider {
  width: 1px;
  height: 12px;
  background: var(--color-line);
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  color: #fff;
  background: var(--color-primary);
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.back-to-top:hover {
  background: var(--color-primary-hover);
}

/* スマホのみ（〜767px）。タブレット(768〜)・PC(1024〜)には影響させない */
@media (max-width: 767px) {
  .footer-acc {
    /* キャッチコピー → 最初のアコーディオン行までを 36px → 12px（-24px）。
       ロゴ・キャッチコピーの位置とサイズは変更なし */
    margin-top: 12px;
  }

  .site-footer__bottom-inner {
    /* コピーライト行 ⇄ ポリシー/サイトマップ行の間を 23px → 11px（-12px）。
       トップへ戻るボタン(46px)のサイズ・色・位置は変更なし */
    row-gap: 0;
  }
}

@media (min-width: 1024px) {
  .site-footer__main {
    /* CONTACT からの入りを詰める（上のみ24px） */
    padding-block: 56px 72px;
  }

  .site-footer__grid {
    display: grid;
    /*
      OFFICIAL SNS 列を 1.25fr → 1.3fr に拡張（190px → 約203px / +7%）。
      増分は列間 gap を 28px → 22px にして捻出しているので、
      BUSINESS 列（最長リンク「リテールコネクトプロモーション」227px）は
      227.7px → 約234px と逆に余裕が増え、折り返しは発生しない。
      グリッド全体の幅（= .container）は変えていない。
    */
    grid-template-columns: minmax(200px, 1.2fr) 0.95fr 1.5fr 0.9fr 0.75fr 1.3fr;
    gap: 22px;
  }

  .footer-brand__logo img {
    width: 168px;
  }

  .footer-acc {
    display: contents;
  }

  .footer-acc__item {
    border: 0;
  }

  .footer-acc__btn {
    min-height: 0;
    padding-block: 0;
    cursor: default;
    pointer-events: none;
  }

  .footer-acc__item .footer-col__title::after {
    display: block;
  }

  .footer-acc__btn .chevron {
    display: none;
  }

  .footer-acc__panel {
    max-height: none !important;
    opacity: 1;
    overflow: visible;
  }

  .footer-acc__panel > div {
    padding-top: 20px;
    padding-bottom: 0;
  }

  .footer-sns {
    margin-top: 0;
    padding-left: 32px;
    border-left: 1px solid var(--color-line);
  }

  .footer-sns__list {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    margin-top: 20px;
  }

  .footer-sns__list a {
    min-height: 48px;
  }

  .site-footer__bottom-inner {
    padding-block: 26px;
  }

  .footer-utility {
    margin-left: auto;
    font-size: 13px;
  }

  .back-to-top {
    margin-left: 24px;
  }
}

/* PC幅でも狭い 1024〜1279px は6列に収まらずリンクが折り返すため、
   ロゴだけ上の段に分け、リンク4列＋SNSを1段に並べる */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, max-content) minmax(190px, 1fr);
    gap: 40px 36px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-links a {
    white-space: nowrap;
  }
}

/* ========================================
   Scroll reveal
   ======================================== */
/* JSが動く環境でだけ隠す。JS無効でも本文は必ず表示される */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- CONTACT 左上アクセント（PCのみ） ---------- */
@media (min-width: 1024px) {
  .contact__deco--left {
    display: block;
  }

  /*
    既存の右下装飾と同じ図形を左右反転して使う。
    .contact__deco svg 側の right / bottom 指定を確実に上書きするため
    詳細度を1つ上げている。
  */
  .contact .contact__deco--left svg {
    top: 8%;
    right: auto;
    bottom: auto;
    left: -5%;
    width: clamp(240px, 28vw, 460px);
    transform: scaleX(-1);
    opacity: 0.28;
  }
}