@charset "UTF-8";

/* =========================================================
   Reset (minimal)
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* アンカー移動時、固定ヘッダーにリンク先が隠れないよう頭を空ける */
  scroll-padding-top: calc(var(--header-height) + 1.2rem);
}
body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; background: none; border: none; cursor: pointer; }
ul, li { list-style: none; margin: 0; padding: 0; }

/* =========================================================
   Tokens
========================================================= */
:root {
  /* Colors */
  --color-bg: #FFFFFF;
  --color-text: #333333;
  --color-header-bg: #FFFFFF;
  --color-accent: #2ABFD4;
  /* 黄色は白背景だと文字が読めないため、文字用に濃色を用意する */
  --color-accent-ink: #3F3F3F;

  /* 全セクション共通のコンテンツ幅。
     以前はセクションごとに計算式が違い、画面幅によって左端がずれていた */
  --content-inner: min(78%, 1040px);
}

/* 画面が狭いほど余白の割合は小さくする。
   PCと同じ78%だとスマホでは余白ばかりになり、本文が読みにくくなるため */
@media (max-width: 1024px) {
  :root { --content-inner: 84%; }
}
@media (max-width: 768px) {
  :root { --content-inner: 88%; }
}

:root {

  /* Fonts — 丸ゴシックは可愛らしさが出すぎるため、癖のない Noto Sans JP に統一する */
  --font-serif: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  /* 英字・数字用。旧式数字（0がO、1がIに見える）のセリフ体をやめ、
     数字の形がはっきり読めるジオメトリックサンセリフに統一する */
  --font-en: "Josefin Sans", "Noto Sans JP", sans-serif;

  /* Header — edge to edge, blends with page background (no floating card) */
  --header-height: clamp(4.6rem, 8vw, 6.2rem);
  --header-side-pad: clamp(1.2rem, 4vw, 3.4rem);

  /* FV セクション全体の高さ（背景イラストが下部固定で乗る土台） */
  --fv-min-height: clamp(42rem, 100vh, 92rem);

  /* FV 縦の余白（ゆとり） */
  --fv-gap-after-header: clamp(3.6rem, 9vw, 7.5rem);   /* ヘッダー → 見出し */
  --fv-gap-heading-text: clamp(2rem, 4vw, 3.2rem);      /* 見出し → 本文 */
  --fv-gap-text-cta: clamp(2.4rem, 5vw, 4rem);          /* 本文 → CTA */

  --fv-side-pad: clamp(1.4rem, 6vw, 5.5rem);
}

/* =========================================================
   Header（レイヤー5：最前面・上部固定・フラット）
========================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* モバイルナビ（z-index:150）より前面に出す。
     そうしないとメニューを開いたときハンバーガー→×の
     閉じるボタンがオーバーレイの下に隠れてタップできなくなる */
  z-index: 200;
  background-color: var(--color-header-bg);
}

.header__inner {
  height: var(--header-height);
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--header-side-pad);
  gap: clamp(0.8rem, 2vw, 2rem);
}

.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo-img {
  height: clamp(2.1rem, 3.4vw, 2.7rem);
  width: auto;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.7rem);
  flex: 1;
  justify-content: center;
}

.header__nav a {
  /* ラベルが日本語になったぶん、英字より一回り大きくして視認性を確保する */
  font-size: clamp(0.82rem, 0.95vw, 0.95rem);
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.header__nav a:hover { opacity: 0.55; }

/* =========================================================
   外部サイト（コーポレートサイト）へのリンク
   ・サイト内ナビと混ざらないよう、手前に仕切り線を入れる
   ・別タブで開くことを示す矢印アイコンを文字の後ろに添える
   ・文字色を一段薄くし、採用サイト本来の導線より優先度を下げる
========================================================= */
.nav-external {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #767676 !important;
}
/* 矢印アイコン（外部リンクの標準的な記号）。
   ::after は各ナビのホバー下線で既に使われているため、専用のspanで描く */
.nav-external__icon {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ext-icon) no-repeat center / contain;
          mask: var(--ext-icon) no-repeat center / contain;
}
:root {
  --ext-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}

/* PCヘッダー：左に縦の仕切り線を立てる */
.header__nav .nav-external {
  padding-left: clamp(1.1rem, 2.6vw, 2.7rem);
  border-left: 1px solid rgba(0, 0, 0, 0.18);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.8vw, 1.2rem);
  flex-shrink: 0;
}

/* 新卒／中途でエントリーの入り口を分けるため、ヘッダーには2つ並べて配置する */
.entry-group {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1vw, 0.6rem);
}

.btn-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.3em;
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: clamp(0.72rem, 0.82vw, 0.85rem);
  letter-spacing: 0.04em;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--color-accent);
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn-entry:hover { opacity: 0.85; }
.btn-entry:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }

/* 中途採用はゴールドの縁取りのみにして、新卒（塗り）との違いを一目でわかるようにする */
.btn-entry--outline {
  background-color: transparent;
  color: var(--color-accent-ink);
}
.btn-entry--outline:hover {
  opacity: 1;
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.menu-circle {
  display: none; /* PCではナビが表示されているため非表示。タブレット以下でのみ表示 */
  width: clamp(2.5rem, 3.6vw, 3.1rem);
  height: clamp(2.5rem, 3.6vw, 3.1rem);
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  flex-shrink: 0;
}
.menu-circle span {
  display: block;
  width: 1em;
  height: 1px;
  background-color: var(--color-text);
}

/* =========================================================
   FV Section
   写真は使わず、左にコピー／右に街並みイラストの2カラム構成
========================================================= */
.fv {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: var(--fv-min-height);
  background-color: var(--color-bg);
  display: flex;
  align-items: center;
}

/* 左にコピー、右に街並みイラストの2カラム。
   写真をやめたので重ね合わせ（絶対配置）は不要になった */
.fv__inner {
  width: 100%;
  display: grid;
  /* イラストは背景扱いで絶対配置にしたため、ここはコピー1列だけ */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  /* 左端は他セクション（コンセプトカード・工程など）と揃える */
  padding: calc(var(--header-height) + clamp(1.5rem, 4vw, 3rem))
           var(--fv-side-pad)
           clamp(3.5rem, 7vw, 5.5rem)
           calc((100% - var(--content-inner)) / 2);
}

.fv__copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  /* イラストを大きくしたぶん、コピーは左側にコンパクトに収める */
  max-width: 26rem;
}

/* イラストは背景。コンテンツ幅に収めず、画面の右端まで置く。
   ただしヘッダーに食い込まない高さに抑える */
.fv__illustration {
  position: absolute;
  top: 50%;
  /* 背景なので画面の外まで少し逃がす。
     こうすると絵を大きくしても左のコピーへ寄ってこない */
  right: clamp(-8rem, -7vw, -2rem);
  /* ヘッダーのぶんだけ下へずらし、ヘッダー下の領域で上下中央に置く */
  transform: translateY(calc(-50% + var(--header-height) / 2));
  z-index: 0;
  width: clamp(22rem, 60vw, 70rem);
  pointer-events: none;
}
.fv__illustration img {
  width: 100%;
  height: auto;
  display: block;
  /* イラスト側で外周が白に抜けるよう描かれているため、
     CSSのマスクはかけない（かけると手前の人物の足元まで消えてしまう） */
}

.fv__heading {
  margin: 0;
  font-family: var(--font-serif);
  /* サイズを落としたぶん、線の細さと字間で見せる。
     大きく太くするより、抑えた字面のほうがスタイリッシュに見える */
  font-weight: 400;
  font-size: clamp(1.5rem, 2.3vw, 2.6rem);
  /* 行間を詰めて、3行がひとかたまりのロゴタイプのように見えるようにする */
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: var(--color-text);
  white-space: nowrap; /* <br>で区切った各行が途中で折り返さないように固定 */
}

.fv__text {
  max-width: 34rem; /* 本文は読みやすい幅で折り返す（見出しとは別扱い） */
  margin: var(--fv-gap-heading-text) 0 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.25rem);
  line-height: 2.1;
  color: var(--color-text);
}

.fv__cta {
  margin-top: var(--fv-gap-text-cta);
  display: inline-flex;
  align-items: center;
  gap: 1.2em;
  padding: 1.1em 2em;
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.06em;
  font-weight: 600;
  border-radius: 999px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fv__cta:hover { opacity: 0.88; transform: translateX(0.2em); }
.fv__cta .arrow { font-size: 1.05em; }

/* --- スクロール誘導 --- */
.fv__scroll {
  position: absolute;
  bottom: clamp(1.2rem, 3vw, 2.4rem);
  /* 中央に置くとイラストと重なるため、コピー側（左）へ寄せる */
  left: var(--fv-side-pad);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
}
.fv__scroll span:first-child {
  writing-mode: vertical-rl;
  font-size: clamp(0.6rem, 0.8vw, 0.7rem);
  letter-spacing: 0.15em;
  color: #8C8C8C;
}
.fv__scroll-line {
  width: 1px;
  height: clamp(2.4rem, 5vw, 3.6rem);
  background: linear-gradient(to bottom, #8C8C8C, transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0.3); transform-origin: top; opacity: 0.4; }
  50%  { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0.3); transform-origin: bottom; opacity: 0.4; }
}

/* =========================================================
   Responsive: Tablet
========================================================= */
@media (max-width: 1024px) {
  .header__nav { display: none; }
  .menu-circle { display: flex; }
}

/* =========================================================
   Responsive: Mobile
   表示順：1 コピー → 2 CTA(コピー内) → 3 写真 → 4 背景イラスト
   写真は3枚に間引き、背景イラストは通常フローで下部に表示。
========================================================= */
@media (max-width: 768px) {
  /* 横スクロールの発生を防ぐ保険（はみ出た装飾があっても画面幅は固定） */
  html, body { overflow-x: clip; }

  .header__inner { padding: 0 clamp(0.9rem, 4vw, 1.4rem); }

  /* スマホの固定ヘッダーは横幅が狭く、新卒/中途の2ボタン+ハンバーガーが
     収まりきらないため、上部バーのボタンは非表示にする。
     新卒/中途エントリーへの導線はハンバーガーメニュー内（.mobile-nav__entry-group）に残す */
  .header .entry-group { display: none; }

  /* ===== FV：スマホは1カラムに積む =====
     上にコピー、下に街並みイラスト。写真は使わない */
  .fv {
    min-height: 0;
    display: block;
  }
  .fv__inner {
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 6vw, 2.4rem);
    padding: calc(var(--header-height) + clamp(2.4rem, 9vw, 4rem))
             var(--fv-side-pad)
             clamp(2.4rem, 8vw, 3.5rem);
  }

  /* 見出し：1行が突き抜けて「と、」だけが孤立しないサイズに抑え、行間も締める */
  .fv__heading { font-size: clamp(1.7rem, 7.2vw, 2.4rem); letter-spacing: 0.06em; line-height: 1.7; white-space: normal; }
  .fv__text { max-width: none; font-size: clamp(0.9rem, 4vw, 1rem); line-height: 1.9; }

  /* スマホは重ねずに縦積み。背景ではなくコピーの下に置く1枚の絵に戻す */
  .fv__illustration {
    position: static;
    transform: none;
    width: 100%;
    margin-left: 0;
    margin-top: clamp(1.5rem, 6vw, 2.4rem);
  }

  .fv__scroll { display: none; }
}

/* =========================================================
   ABOUT Section
   仕様：背景 #FFFFFF／上下余白は大きめ／
   ABOUT見出しは中央上・英字は Josefin Sans／
   コピー左・イラスト右の2カラム→3カード→4工程フロー→クロージング
========================================================= */
:root {
  --about-accent: #2ABFD4;
  --about-card-radius: clamp(0.8rem, 1.6vw, 1.4rem);
  --about-section-gap: clamp(4rem, 9vw, 7.5rem);
}

.about {
  position: relative;
  width: 100%;
  background-color: var(--color-bg);
  padding: clamp(5rem, 11vw, 9rem) 0 clamp(6rem, 12vw, 10rem);
  overflow: hidden;
}

/* --- ABOUT ラベル（中央上） --- */
.about__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.about__label span:first-child {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  letter-spacing: 0.14em;
  color: var(--color-accent-ink);
}
.about__label-line {
  width: clamp(1.6rem, 3vw, 2.4rem);
  height: 2px;
  background-color: var(--color-accent);
}

/* --- コピー + 街イラスト --- */
.about__intro {
  position: relative;
  width: 100%;
  margin-bottom: var(--about-section-gap);
}

.about__copy {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /* 左の余白は画面が広いほど大きくなるが、max-width は余白込みの値なので、
     そのままだと画面を広げるほど本文の幅が痩せて1〜2文字だけが行に残る。
     余白ぶんを足して本文そのものの幅を一定に保つ。
     31rem は、文字が最大サイズ（1.1rem）になる広い画面でも
     「暮らしのつながりまで考えた街づくりを実現しています。」の26文字が
     1行に収まる幅 */
  max-width: calc(31rem + (100% - var(--content-inner)) / 2);
  /* 他セクションと左端を揃えるため、余白は共通コンテンツ幅から逆算する */
  padding: clamp(2rem, 6vw, 4.5rem) 0 0 calc((100% - var(--content-inner)) / 2);
}

.about__heading {
  margin: 0 0 clamp(1.6rem, 3vw, 2.2rem);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.8vw, 2rem);
  line-height: 1.8;
  color: var(--color-text);
  white-space: nowrap; /* <br>で分けた2行がそれぞれ途中で折り返さないように固定 */
}
.about__heading-quote { font-style: normal; }

.about__text {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  line-height: 2;
  color: var(--color-text);
  margin: 0 0 clamp(1.2rem, 2.4vw, 1.6rem);
}

.about__cta {
  display: inline-flex;
  align-items: center;
  gap: 1.2em;
  margin-top: clamp(1rem, 2.4vw, 1.6rem);
  padding: 1em 1.9em;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  font-size: clamp(0.82rem, 0.95vw, 0.95rem);
  letter-spacing: 0.04em;
  color: var(--color-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.about__cta:hover {
  background-color: var(--color-text);
  color: #fff;
}

/* --- 街イラスト（画面幅いっぱいに全幅表示） --- */
.about__illustration {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.about__city-main {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
  /* 画像の四角い縁がそのまま出ないよう、外周を白へ溶かす */
  -webkit-mask-image: radial-gradient(ellipse 82% 82% at 62% 50%, #000 55%, rgba(0, 0, 0, 0) 97%);
          mask-image: radial-gradient(ellipse 82% 82% at 62% 50%, #000 55%, rgba(0, 0, 0, 0) 97%);
}


/* --- セクション見出し（中央・線区切り） --- */
.about__section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.6vw, 2rem);
  margin: 0 auto var(--about-section-gap);
  width: var(--content-inner);
  margin-inline: auto;
}
.about__section-heading .line {
  width: clamp(2rem, 5vw, 4.5rem);
  height: 1px;
  background-color: rgba(0, 0, 0, 0.3);
}
.about__section-heading h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1rem, 1.45vw, 1.3rem);
  letter-spacing: 0.08em;
  color: var(--color-text);
  white-space: nowrap;
}

/* =========================================================
   GALLERY：私たちがつくる家
   ・住宅写真は職種ページに散らさず、ここに集約して見せる
   ・キャプションは付けず、事例の「量」で見せるギャラリービュー
   ・上段は左へ、下段は右へ自動で流し続ける
   ・同じ並びを2本つなげ、-50% 進んだ時点で先頭に戻すことで
     継ぎ目なくループさせる（gap ではなく item の右マージンで
     間隔をつくらないと、半分の位置が1コマ分ずれる）
========================================================= */
.gallery {
  margin-top: var(--about-section-gap);
  --gallery-gap: clamp(0.6rem, 1.2vw, 1rem);
  --gallery-item: clamp(13rem, 21vw, 19rem);
  --gallery-speed: 64s;
}

.gallery__head {
  width: var(--content-inner);
  margin-inline: auto;
}
.gallery__lead {
  margin: calc(-1 * clamp(1rem, 2.4vw, 1.8rem)) auto clamp(1.8rem, 4vw, 2.6rem);
  text-align: center;
  font-size: clamp(0.88rem, 1.05vw, 0.98rem);
  line-height: 2;
  color: #6E6E6E;
}

.gallery__rows {
  display: flex;
  flex-direction: column;
  gap: var(--gallery-gap);
  /* 画面端まで見せて「まだ続く」ことを伝える */
  width: 100%;
  overflow: hidden;
}

.gallery__row {
  overflow: hidden;
}
.gallery__marquee {
  display: flex;
  width: max-content;
  animation: gallery-marquee var(--gallery-speed) linear infinite;
  will-change: transform;
}
.gallery__row--reverse .gallery__marquee {
  animation-direction: reverse;
  /* 上下段が同じ位置で揃って見えないよう、下段は流れ始めをずらす */
  animation-delay: calc(var(--gallery-speed) / -3);
}
@keyframes gallery-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* マウスを乗せている間は止めて、写真をゆっくり見られるようにする */
.gallery__rows:hover .gallery__marquee {
  animation-play-state: paused;
}

/* 1枚ずつがコーシンホーム様の施工事例ページへのリンク */
.gallery__item {
  flex: 0 0 auto;
  width: var(--gallery-item);
  aspect-ratio: 4 / 3;
  margin-right: var(--gallery-gap);
  border-radius: var(--about-card-radius);
  display: block;
  overflow: hidden;
  background-color: #F2F2F2;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 流れている最中でも「押せる」と分かるよう、乗せた1枚だけ少し寄る
   （帯全体はホバーで停止するので、狙って押せる） */
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* 動きを減らす設定の端末では自動送りを止め、手で送れるようにする */
@media (prefers-reduced-motion: reduce) {
  .gallery__marquee { animation: none; }
  .gallery__row {
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

/* =========================================================
   街づくりに関わる仕事（3カード）
   ・写真を上、テキストを下に置くカード。カードごとリンクにする
========================================================= */
.jobs {
  width: var(--content-inner);
  margin-inline: auto;
  margin-top: var(--about-section-gap);
}

.jobs__intro {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto clamp(2.5rem, 5.5vw, 4rem);
}

.jobs__intro-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 2;
  color: #6E6E6E;
  /* 3行はほぼ同じ文字量になるよう手動改行済みのため、
     justifyで無理に引き伸ばさずシンプルな中央揃えにする */
  text-align: center;
}

.job-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
}

.job-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: var(--about-card-radius);
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.06);
  color: inherit;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}
.job-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.12);
}
.job-card:focus-visible {
  outline: 2px solid var(--about-accent);
  outline-offset: 4px;
}

.job-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.job-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.job-card:hover .job-card__image img { transform: scale(1.05); }

.job-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(1.4rem, 2.6vw, 2rem);
}

.job-card__number {
  display: block;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  color: var(--color-accent-ink);
  margin-bottom: 0.3em;
}

.job-card__title {
  margin: 0 0 0.7em;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.35vw, 1.2rem);
  color: var(--color-text);
}

.job-card__list {
  margin: 0 0 clamp(1.4rem, 2.4vw, 1.8rem);
  padding: clamp(0.9rem, 1.6vw, 1.2rem) 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0.9em;
}
.job-card__list li {
  font-family: var(--font-body);
  font-size: clamp(0.76rem, 0.85vw, 0.82rem);
  color: #6E6E6E;
  position: relative;
  padding-left: 1em;
}
.job-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.4em;
  height: 1px;
  background-color: var(--color-accent);
}

.job-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  color: var(--color-accent-ink);
}
.job-card__link .arrow { display: inline-block; transition: transform 0.3s ease; }
.job-card:hover .job-card__link .arrow { transform: translateX(0.3em); }
.job-card:hover .job-card__link .arrow { transform: translateX(0.3em); }

/* --- クロージング（背景：広域イラスト） --- */
.about__closing {
  position: relative;
  width: 100%;
  margin-top: var(--about-section-gap);
}
.about__closing-bg {
  position: relative;
  z-index: 1;
  /* 全幅だとイラストが強く、左のコピーの印象が負けるため一回り小さくして右に寄せる */
  width: 72%;
  margin-left: auto;
  height: auto;
  display: block;
  /* 帯の左端だけを白へ溶かし、文字と重なる側の輪郭を出さない */
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 18%);
          mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 18%);
}
.about__closing-copy {
  position: absolute;
  z-index: 2;
  top: clamp(1.5rem, 4vw, 3rem);
  /* 他セクションと左端を揃える */
  left: calc((100% - var(--content-inner)) / 2);
  max-width: 30rem;
}
.about__closing-copy h3 {
  margin: 0 0 clamp(1rem, 2vw, 1.4rem);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  line-height: 1.6;
  color: var(--color-text);
}
.about__closing-copy p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1vw, 0.98rem);
  line-height: 1.9;
  color: var(--color-text);
}

/* =========================================================
   ABOUT Responsive: Tablet
========================================================= */
@media (max-width: 1024px) {
  .about__copy { max-width: none; }

  /* カード幅が狭くなるぶん、内側の余白と文字を詰めて
     説明文が3行を超えないようにする */

  /* 4列のままだと1列が120px程度になり、見出しが2行に折れてしまう。
     この幅からは2列×2段に切り替えて、1行に収まる幅を確保する */
}

/* =========================================================
   ABOUT Responsive: Mobile
   表示順：コピー → 街画像 → 3カード → 工程
========================================================= */
@media (max-width: 768px) {
  .about { padding: clamp(3.5rem, 14vw, 5rem) 0 clamp(4rem, 16vw, 6rem); }

  /* コピーは通常フローの先頭に。
     イラストは全幅の別ブロックにせず、コピーの下端（ボタン右あたり）に
     食い込ませて背景のように配置する。元画像は左半分・上部が余白の
     横長絵なので、ここでは建物のある右下エリアだけを切り出して使う。 */
  .about__intro {
    position: relative;
    /* 下に絶対配置するイラストの高さぶんを確保しつつ、次のセクションとの間隔を持たせる */
    padding-bottom: clamp(10rem, 44vw, 14rem);
    margin-bottom: clamp(2.5rem, 8vw, 3.5rem);
  }
  .about__copy {
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    max-width: none;
    width: var(--content-inner);
    margin-inline: auto;
    /* PC用に左余白をpaddingで作っているが、スマホでは width と二重になるため打ち消す */
    padding-left: 0;
    margin-bottom: 0;
  }

  .about__illustration {
    position: absolute;
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
    z-index: 1;
    width: 68vw;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: clamp(0.8rem, 3vw, 1.2rem) 0 0 0;
    /* 右辺以外を淡くぼかし、背景に溶け込ませる（カードっぽい四角さを消す） */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 22%),
      linear-gradient(to bottom, transparent 0%, #000 22%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(to right, transparent 0%, #000 22%),
      linear-gradient(to bottom, transparent 0%, #000 22%);
            mask-composite: intersect;
  }
  .about__city-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 元画像の余白（左・上）を避け、右下の建物エリアだけを見せる */
    object-position: 78% 68%;
  }

  .about__heading { font-size: clamp(1.3rem, 5.6vw, 1.7rem); line-height: 1.6; white-space: normal; }

  /* 線付き見出しが横幅を圧迫しないよう、線は縮められるようにする */
  .about__section-heading h3 { font-size: clamp(1.1rem, 4.8vw, 1.3rem); }
  .about__section-heading .line { flex: 0 1 auto; min-width: 1rem; }

  /* カード画像はスマホでは浅めの比率にして縦長になりすぎるのを防ぐ */




  /* ギャラリー：スマホは1画面に2枚弱が入る大きさにして、
     流れている感じが分かるようにする。速度も少し上げる */
  .gallery {
    --gallery-item: 58vw;
    --gallery-speed: 46s;
  }
  .gallery__lead { text-align: justify; }


  /* 街づくりに関わる仕事：「街ができるまで」からの間隔を詰め、
     3カテゴリは縦並びにする */
  .jobs { margin-top: clamp(2.4rem, 8vw, 3rem); }
  .jobs__intro { margin-bottom: clamp(2rem, 7vw, 2.6rem); }
  .jobs__intro-text { font-size: clamp(0.85rem, 3.8vw, 0.95rem); }

  .job-cards {
    grid-template-columns: 1fr;
    gap: clamp(1.2rem, 5vw, 1.6rem);
  }

  /* 職種例が5件ある管理部門カードのみ、3件+「ほか」に省略する */

  .about__closing-copy {
    position: relative;
    top: auto; left: auto;
    max-width: none;
    padding: clamp(1.6rem, 6vw, 2.4rem) var(--fv-side-pad) 0;
  }
  .about__closing {
    display: flex;
    flex-direction: column;
  }
  .about__closing-copy { order: -1; }
}

/* =========================================================
   INTERVIEW Section
   仕様：背景 #FFFFFF／全体幅 min(90%,1200px) 中央寄せ／
   上下余白 clamp(5rem,10vw,10rem)／px固定は使わない
========================================================= */
:root {
  --interview-accent: #2ABFD4;
}

.interview {
  position: relative;
  width: 100%;
  background-color: var(--color-bg);
  padding: clamp(5rem, 10vw, 10rem) 0;
  overflow: hidden;
}

.interview__inner {
  position: relative;
  z-index: 1;
  width: var(--content-inner);
  margin-inline: auto;
}

/* --- 見出し（中央上） --- */
.interview__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.interview__label span:first-child {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 2.2rem);
  letter-spacing: 0.18em;
  color: var(--color-accent-ink);
}
.interview__label-line {
  width: clamp(1.6rem, 3vw, 2.4rem);
  height: 2px;
  background-color: var(--color-accent);
}

/* --- 背景イラスト（コンテンツ幅を無視し、画面右端まで抜ける背景） ---
   画像そのものが白地に溶けるように描かれている前提。
   右端で切らず画面外まで抜くので、上下右のぼかしマスクは持たせない。
   文字側（左）だけ、なだらかに白へ落として可読性を確保する */
.interview__bg-city {
  position: absolute;
  /* 見出しより上に絵が出ないよう、セクション上端から少し下げる */
  top: clamp(4rem, 9vw, 8rem);
  right: 0;
  left: auto;
  z-index: 0;
  /* コンテンツ幅は無視。画面右端まで抜ける大きさ */
  width: clamp(26rem, 54vw, 58rem);
  height: auto;
  opacity: 1;
  /* 絵自体が四辺で白へ溶けるように描かれているため、CSSのマスクは不要 */
  pointer-events: none;
}

/* --- リードエリア：コピー（左、背景イラストの上に重ねる） --- */
.interview__lead {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(3.5rem, 8vw, 6rem);
}

.interview__copy {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}

.interview__heading {
  margin: 0 0 clamp(1.4rem, 3vw, 2rem);
  font-family: var(--font-serif);
  font-weight: 500;
  /* セクション見出しなので、FVのメインコピーではなくABOUTの見出しと同じ大きさに揃える */
  font-size: clamp(1.3rem, 1.8vw, 2rem);
  line-height: 1.75;
  letter-spacing: 0.08em;
  color: #252525;
  white-space: nowrap;
}

.interview__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 2;
  color: #555555;
}

/* --- 社員インタビューカード（2名・PC中央寄せ48%ずつ） --- */
.interview-cards {
  /* 背景イラスト（z-index:0）より必ず前面に出す */
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.4rem, 3vw, 2.5rem);
  margin-bottom: clamp(4rem, 8vw, 6.5rem);
}

.interview-card {
  /* article から a に変更してカード全体をリンク化したため、
     ブロック要素として振る舞うよう明示する */
  display: block;
  flex: 0 1 48%;
  max-width: 48%;
  background-color: #FFFFFF;
  border-radius: 1.2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  color: inherit;
}

.interview-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.interview-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.interview-card__body {
  padding: clamp(1.4rem, 2.6vw, 2rem);
}

.interview-card__tags {
  display: flex;
  gap: 0.6em;
  margin-bottom: clamp(0.8rem, 1.6vw, 1.1rem);
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.9em;
  border-radius: 0.3rem;
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  letter-spacing: 0.02em;
}
.tag--job {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
}
.tag--year {
  background-color: #EFEFEF;
  color: #6E6E6E;
}

.interview-card__name {
  margin: 0 0 0.7em;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  color: var(--color-text);
}

.interview-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: clamp(0.88rem, 0.98vw, 0.95rem);
  color: var(--color-accent-ink);
}
.interview-card__link .arrow { transition: transform 0.2s ease; }
.interview-card__link:hover .arrow { transform: translateX(0.3em); }

/* --- Instagram投稿エリア --- */
.interview__instagram {
  position: relative;
  z-index: 2;
  text-align: center;
}

.interview__instagram-heading {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  color: var(--color-text);
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-bottom: clamp(2.4rem, 5vw, 3.5rem);
}

/* 3枚ともInstagramの公式アカウントへのリンク */
.instagram-post {
  display: block;
  background-color: #FFFFFF;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.instagram-post:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.instagram-post img {
  width: 100%;
  height: auto;
  display: block;
}

.interview__instagram-btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  padding: clamp(0.8rem, 1.6vw, 1.1rem) clamp(1.6rem, 3vw, 2.2rem);
  background-color: #FFFFFF;
  border: 1px solid var(--interview-accent);
  border-radius: 999px;
  color: var(--color-accent-ink);
}
.instagram-icon {
  width: clamp(1.3rem, 1.8vw, 1.6rem);
  height: clamp(1.3rem, 1.8vw, 1.6rem);
  flex-shrink: 0;
}
.interview__instagram-btn-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.88rem, 1vw, 1rem);
}
.interview__instagram-btn-follow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  padding-left: clamp(0.8rem, 1.6vw, 1.2rem);
  border-left: 1px solid rgba(42, 191, 212, 0.35);
}

/* --- 下部装飾（右下・薄く／文字やカードに被せない） --- */
.interview__bottom-city {
  position: relative;
  z-index: 0;
  display: block;
  margin: clamp(3rem, 7vw, 5rem) 0 0 auto;
  width: clamp(14rem, 34vw, 26rem);
  height: auto;
  opacity: 0.85;
  pointer-events: none;
}

/* =========================================================
   INTERVIEW Responsive: Tablet
========================================================= */
@media (max-width: 1024px) {
}

/* =========================================================
   INTERVIEW Responsive: Mobile
   表示順：見出し→コピー→本文→Kさん→Mさん→Instagram見出し→
           投稿画像3枚→official accountボタン→下部街イラスト
========================================================= */
@media (max-width: 768px) {
  .interview { padding: clamp(3.5rem, 14vw, 5rem) 0; }

  .interview__heading { font-size: clamp(1.3rem, 5.6vw, 1.7rem); line-height: 1.6; white-space: normal; }
  .interview__text { font-size: clamp(0.9rem, 4vw, 1rem); }

  /* スマホは本文が画面幅いっぱいになるため、重ねると読めない。
     背景ではなく、見出しの上に置く1枚の絵として通常フローに戻す */
  .interview__bg-city {
    position: static;
    width: 100%;
    height: auto;
    opacity: 1;
    -webkit-mask-image: none;
            mask-image: none;
    margin-bottom: clamp(1.2rem, 5vw, 1.8rem);
  }

  .interview-cards {
    flex-direction: column;
    align-items: stretch;
  }
  .interview-card {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .instagram-grid {
    grid-template-columns: 1fr;
  }

  .interview__instagram-btn {
    flex-wrap: wrap;
    justify-content: center;
  }

  .interview__bottom-city {
    width: 70%;
    margin-top: clamp(2rem, 8vw, 3rem);
  }
}

/* =========================================================
   BENEFIT Section
   仕様：背景 #FFFFFF／全体幅 min(90%,1200px) 中央寄せ／
   上下余白 clamp(5rem,10vw,10rem)／見出しは中央配置（他セクション統一）
========================================================= */
:root {
  --benefit-accent: #2ABFD4;
}

.benefit {
  position: relative;
  width: 100%;
  background-color: var(--color-bg);
  padding: clamp(5rem, 10vw, 10rem) 0;
  overflow: hidden;
}

.benefit__inner {
  position: relative;
  z-index: 1;
  width: var(--content-inner);
  margin-inline: auto;
}

/* --- 見出し（中央上・左寄せ禁止） --- */
.benefit__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.benefit__label span:first-child {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 2.2rem);
  letter-spacing: 0.18em;
  color: var(--color-accent-ink);
}
.benefit__label-line {
  width: clamp(1.6rem, 3vw, 2.4rem);
  height: 2px;
  background-color: var(--color-accent);
}

/* --- リードエリア：コピー + 街イラスト（全面背景として配置） --- */
.benefit__lead {
  position: relative;
  margin-bottom: clamp(4rem, 8vw, 6.5rem);
}

/* 社員紹介と同じ考え方：コンテンツ幅を無視して画面右端まで抜く背景 */
.benefit__bg-city {
  position: absolute;
  top: clamp(4rem, 9vw, 8rem);
  right: 0;
  left: auto;
  z-index: 0;
  width: clamp(26rem, 54vw, 58rem);
  height: auto;
  opacity: 1;
  pointer-events: none;
}

.benefit__copy {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  /* 左は他セクションと見出しの開始位置を揃えるため余白を持たせない */
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2rem) clamp(1.6rem, 3vw, 2.4rem) 0;
}

.benefit__heading {
  margin: 0 0 clamp(1.6rem, 3vw, 2.2rem);
  font-family: var(--font-serif);
  font-weight: 500;
  /* セクション見出しなので、FVのメインコピーではなくABOUTの見出しと同じ大きさに揃える */
  font-size: clamp(1.3rem, 1.8vw, 2rem);
  line-height: 1.75;
  color: var(--color-text);
  white-space: nowrap;
}

.benefit__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  line-height: 2;
  color: #555555;
}

/* --- 4つのカード --- */
.benefit-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.2vw, 1.8rem);
  margin-bottom: clamp(4rem, 8vw, 6.5rem);
}

.benefit-card {
  position: relative;
  background-color: #FFFFFF;
  border-radius: 1.2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: clamp(2.4rem, 4vw, 3.2rem) clamp(1.4rem, 2.4vw, 2rem) clamp(2.2rem, 3.6vw, 2.6rem);
  text-align: center;
}

/* 円形枠はCSSで作成。PNGアイコン自体には枠を入れない */
.benefit-card__icon.circle-icon {
  width: clamp(8rem, 12vw, 11rem);
  aspect-ratio: 1 / 1;
  margin: 0 auto clamp(1.6rem, 3vw, 2.2rem);
  /* アイコン本体は濃色、囲みの丸をアクセントの黄色にして色味を添える */
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.benefit-card__icon img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  display: block;
}

.benefit-card h3 {
  margin: 0 0 clamp(1rem, 1.8vw, 1.3rem);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--color-accent-ink);
}

.benefit-card__line {
  display: block;
  width: clamp(1.4rem, 2.4vw, 1.8rem);
  height: 1px;
  margin: 0 auto clamp(1.2rem, 2.2vw, 1.6rem);
  background-color: rgba(0, 0, 0, 0.25);
}

.benefit-card p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.88rem, 0.98vw, 0.95rem);
  line-height: 1.9;
  color: #6E6E6E;
}

/* --- 横長写真エリア --- */
/* --- 福利厚生一覧 --- */
.benefit__perks-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.6vw, 2rem);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.benefit__perks-heading .line {
  width: clamp(2rem, 5vw, 4.5rem);
  height: 1px;
  background-color: rgba(0, 0, 0, 0.3);
}
.benefit__perks-heading h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  letter-spacing: 0.06em;
  color: var(--color-text);
  white-space: nowrap;
}

.benefit-perks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.benefit-perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.7rem, 1.4vw, 1rem);
  text-align: center;
}
.benefit-perk img {
  width: clamp(2.5rem, 4vw, 4rem);
  height: clamp(2.5rem, 4vw, 4rem); /* 幅だけでなく高さも固定し、画像ごとの縦横比差を吸収する */
  object-fit: contain; /* 縦横比を保ったまま、固定枠の中でできるだけ大きく表示 */
}
.benefit-perk span {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  line-height: 1.6;
  color: var(--color-text);
}

/* --- 下部装飾（背景全面・画面幅いっぱい） --- */
.benefit__bottom-city {
  position: relative;
  z-index: 0;
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(3.5rem, 8vw, 6rem);
  height: auto;
  opacity: 1;
  /* 画面端で絵がぶつ切りにならないよう、左右をぼかす */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  pointer-events: none;
}

/* =========================================================
   BENEFIT Responsive: Tablet
========================================================= */
@media (max-width: 1024px) {
  .benefit-cards { grid-template-columns: repeat(2, 1fr); }
  .benefit-perks { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   BENEFIT Responsive: Mobile
   表示順：見出し→コピー→本文→4カード→横長写真→福利厚生一覧→下部イラスト
========================================================= */
@media (max-width: 768px) {
  .benefit { padding: clamp(3.5rem, 14vw, 5rem) 0; }

  .benefit__heading { font-size: clamp(1.3rem, 5.6vw, 1.7rem); line-height: 1.6; white-space: normal; }
  .benefit__text { font-size: clamp(0.9rem, 4vw, 1rem); }

  /* スマホは本文が画面幅いっぱいになるため、重ねると読めない。
     背景ではなく、見出しの上に置く1枚の絵として通常フローに戻す */
  .benefit__bg-city {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 1;
    -webkit-mask-image: none;
            mask-image: none;
    margin-bottom: clamp(1.2rem, 5vw, 1.8rem);
  }

  /* minmax(0,1fr)でカードの中身による列幅のはみ出しを防ぐ */
  .benefit-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 4vw, 1.4rem); }

  /* アイコン円が大きすぎてカードが窮屈だったため、スマホでは一回り小さく */
  .benefit-card { padding: 1.6rem 1rem 1.5rem; }
  .benefit-card__icon.circle-icon { width: clamp(4.5rem, 22vw, 6rem); margin-bottom: 1.2rem; }
  .benefit-card h3 { font-size: clamp(0.95rem, 4.2vw, 1.1rem); margin-bottom: 0.8rem; }
  .benefit-card__line { margin-bottom: 0.9rem; }
  .benefit-card p { font-size: clamp(0.78rem, 3.4vw, 0.85rem); line-height: 1.8; }

  .benefit__perks-heading h3 { font-size: clamp(1.05rem, 4.6vw, 1.25rem); }
  .benefit__perks-heading .line { flex: 0 1 auto; min-width: 1rem; }

  .benefit-perks { grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 5vw, 1.8rem); }
}

/* =========================================================
   RECRUIT Section（最終セクション・応募導線）
   仕様：背景 #FFFFFF／全体幅 min(90%,1200px) 中央寄せ／
   上下余白 clamp(5rem,10vw,9rem)／見出しは中央配置
========================================================= */
:root {
  --recruit-accent: #2ABFD4;
}

.recruit {
  position: relative;
  width: 100%;
  background-color: var(--color-bg);
  padding: clamp(5rem, 10vw, 9rem) 0;
  overflow: hidden;
}

.recruit__inner {
  position: relative;
  z-index: 2;
  width: var(--content-inner);
  margin-inline: auto;
  text-align: center;
}

/* --- 装飾（背景より上・コンテンツより下） --- */
.recruit__deco-line {
  position: absolute;
  z-index: 1;
  width: clamp(16rem, 34vw, 28rem);
  height: auto;
  opacity: 0.7;
  pointer-events: none;
}
.recruit__deco-line--tr { top: 0; right: 0; }
.recruit__deco-line--bl { bottom: 0; left: 0; transform: rotate(180deg); }

.recruit__leaf {
  position: absolute;
  z-index: 1;
  width: clamp(1.2rem, 2.4vw, 2rem);
  opacity: 0.5;
  pointer-events: none;
}
.recruit__leaf--1 { top: 8%;  right: 12%; transform: rotate(-15deg); }
.recruit__leaf--2 { top: 46%; left: 5%;   transform: rotate(25deg); }
.recruit__leaf--3 { bottom: 10%; right: 8%; transform: rotate(10deg); }

/* --- 見出し（中央上・左寄せ禁止） --- */
.recruit__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  margin-bottom: clamp(1.6rem, 3.4vw, 2.4rem);
}
.recruit__label span:first-child {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 2.2rem);
  letter-spacing: 0.2em;
  color: var(--color-accent-ink);
}
.recruit__label-line {
  width: clamp(1.6rem, 3vw, 2.4rem);
  height: 2px;
  background-color: var(--color-accent);
}

/* --- メインコピー --- */
.recruit__heading {
  margin: 0 auto clamp(1.6rem, 3vw, 2.2rem);
  max-width: 46rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.8vw, 2rem);
  line-height: 1.7;
  letter-spacing: 0.12em;
  color: #252525;
  white-space: nowrap; /* <br>で分けた行が途中で折り返さないように固定 */
}

/* --- リード文 --- */
.recruit__lead-text {
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  max-width: 38rem;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 2;
  color: #555555;
}

/* --- 採用情報カード --- */
.recruit-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 5;
  border-radius: 1.2rem;
  overflow: hidden;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.recruit-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}
.recruit-card__overlay {
  position: absolute;
  inset: 0;
  /* 文字が乗る左側だけ濃くして、右側は写真をそのまま見せる。
     全体を均一に暗くすると写真が沈み、薄くすると白文字が読めなくなる */
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.5) 30%,
    rgba(0, 0, 0, 0.22) 60%,
    rgba(0, 0, 0, 0.14) 100%
  );
}
.recruit-card__body {
  position: absolute;
  top: 50%;
  left: clamp(1.6rem, 4.5vw, 4rem);
  transform: translateY(-50%);
  text-align: left;
}
.recruit-card__en {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 4rem);
  letter-spacing: 0.12em;
  color: #FFFFFF;
  line-height: 1.1;
}
.recruit-card__ja {
  margin: 0.2em 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  letter-spacing: 0.1em;
  color: #26C6B8;
}
.recruit-card__divider {
  display: block;
  width: clamp(6rem, 14vw, 11rem);
  height: 1px;
  margin: clamp(0.9rem, 2vw, 1.3rem) 0;
  background-color: rgba(255, 255, 255, 0.5);
}
.recruit-card__link {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1vw, 0.98rem);
  letter-spacing: 0.04em;
  color: #FFFFFF;
  margin-bottom: 0.6em;
}
.recruit-card__link:last-child { margin-bottom: 0; }
.recruit-card__link .arrow { display: inline-block; margin-left: 0.3em; }
/* カード全体のリンクをやめ、募集要項／新卒／中途を個別リンクにしたため、
   キーボード操作時のフォーカス位置を写真の上でも見えるようにする */
.recruit-card__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* --- 下部ナビゲーション --- */
.recruit-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /* コーポレートサイトを加えて7項目になったため、PCで1行に収まるよう間隔を詰める */
  gap: clamp(0.8rem, 1.55vw, 1.45rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.recruit-nav a {
  position: relative;
  font-family: var(--font-body);
  font-size: clamp(0.88rem, 0.98vw, 0.95rem);
  letter-spacing: 0.04em;
  color: #555555;
  /* 区切り線までの余白。7項目を1行に収めるため控えめに */
  padding-right: clamp(0.7rem, 1.4vw, 1.4rem);
}
/* PCナビが出る下限付近は、7項目が1行に収まらない。文字を一段小さくして折り返しを防ぐ */
@media (min-width: 1025px) and (max-width: 1120px) {
  .recruit-nav a { font-size: 0.8rem; }
}

.recruit-nav a:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 0.9em;
  background-color: rgba(0, 0, 0, 0.2);
}

/* --- ロゴ（最下部中央） --- */
.recruit__logo {
  display: block; /* <a>タグ化に伴い、元のdivと同じブロック表示を維持 */
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.recruit__logo img {
  width: clamp(10rem, 18vw, 16rem);
  height: auto;
  margin: 0 auto;
  display: block;
}

/* =========================================================
   RECRUIT Responsive: Tablet
========================================================= */
@media (max-width: 1024px) {
  .recruit__deco-line { width: clamp(12rem, 30vw, 20rem); }
}

/* =========================================================
   RECRUIT Responsive: Mobile
   表示順：見出し→メインコピー→リード文→採用情報カード→下部ナビ→ロゴ
========================================================= */
@media (max-width: 768px) {
  .recruit { padding: clamp(3.5rem, 14vw, 5rem) 0; }

  .recruit__heading { font-size: clamp(1.3rem, 5.6vw, 1.7rem); line-height: 1.6; letter-spacing: 0.06em; white-space: normal; }
  .recruit__lead-text { font-size: clamp(0.9rem, 4vw, 1rem); }

  .recruit-card {
    aspect-ratio: 4 / 3;
  }
  /* スマホでは可読性を優先しオーバーレイをやや濃くする */
  /* スマホはカードが縦長になり文字が写真の中央付近に乗るため、
     左右ではなく上から下へ濃くする */
  .recruit-card__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.5) 45%,
      rgba(0, 0, 0, 0.62) 100%
    );
  }
  .recruit-card__en { font-size: clamp(1.8rem, 9vw, 2.4rem); }

  /* 横スクロールだと最後のリンクが見切れて気づけないため、折返し表示にする */
  .recruit-nav {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.9rem;
  }
  .recruit-nav a { flex: 0 0 auto; white-space: nowrap; }

  .recruit__deco-line { width: 45%; opacity: 0.55; }
}

/* =========================================================
   Scroll Reveal / Motion
   控えめなフェード+スライドアップ。派手な演出は使わない。
========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(1.75rem);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   Header: スクロール後にうっすら影をつける
========================================================= */
.header {
  transition: box-shadow 0.35s ease, background-color 0.35s ease;
}
.header.is-scrolled {
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.06);
}
.header__nav a {
  position: relative;
}
.header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.4em;
  width: 100%;
  height: 1px;
  background-color: var(--color-text);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.menu-circle {
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.menu-circle:hover {
  border-color: var(--color-accent);
  background-color: rgba(42, 191, 212, 0.06);
  transform: translateY(-2px);
}
.menu-circle span { transition: background-color 0.3s ease; }

/* =========================================================
   FV: CTAのホバー演出
========================================================= */
.fv__cta {
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.fv__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 1.6rem rgba(42, 191, 212, 0.28);
}
.fv__cta .arrow { display: inline-block; transition: transform 0.3s ease; }
.fv__cta:hover .arrow { transform: translateX(0.25em); }

/* =========================================================
   ABOUT: カード・CTA・写真のホバー演出
========================================================= */
.about__cta {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.about__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.16);
}



/* 「街ができるまで」の写真はホバーで動かさない */

/* =========================================================
   INTERVIEW: カード・写真・ボタンのホバー演出
========================================================= */
.interview-card {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}
.interview-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.1);
}
.interview-card__image { overflow: hidden; }
.interview-card__image img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.interview-card:hover .interview-card__image img {
  transform: scale(1.06);
}

.instagram-post {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}
.instagram-post:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, 0.1);
}
.instagram-post img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.instagram-post:hover img { transform: scale(1.05); }

.interview__instagram-btn {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.interview__instagram-btn:hover {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 1.6rem rgba(42, 191, 212, 0.3);
}
.interview__instagram-btn:hover .instagram-icon,
.interview__instagram-btn:hover .interview__instagram-btn-follow {
  color: #fff;
}
.interview__instagram-btn-follow { transition: border-color 0.3s ease; }

/* =========================================================
   BENEFIT: カード・写真・アイコンのホバー演出
========================================================= */
.benefit-card {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}
.benefit-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.12);
}
.benefit-card__icon.circle-icon {
  transition: border-color 0.35s ease, transform 0.35s ease, background-color 0.35s ease;
}
.benefit-card:hover .benefit-card__icon.circle-icon {
  border-color: var(--color-accent);
  transform: scale(1.06);
}

.benefit-perk img {
  transition: transform 0.3s ease;
}
.benefit-perk:hover img {
  transform: translateY(-3px) scale(1.08);
}

/* =========================================================
   RECRUIT: カード・ナビ・リンクのホバー演出
========================================================= */
.recruit-card__photo {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.recruit-card:hover .recruit-card__photo {
  transform: scale(1.04);
}
.recruit-card__overlay {
  transition: opacity 0.4s ease;
}
.recruit-card:hover .recruit-card__overlay {
  opacity: 0.88;
}
.recruit-card__link .arrow { display: inline-block; transition: transform 0.3s ease; }
.recruit-card__link:hover .arrow { transform: translateX(0.3em); }

.recruit-nav a {
  position: relative;
  transition: color 0.3s ease;
}
.recruit-nav a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3em;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.recruit-nav a:hover {
  color: var(--color-accent-ink);
}
.recruit-nav a:hover::before {
  width: calc(100% - clamp(1rem, 2.6vw, 2rem));
}

.recruit__logo img {
  transition: opacity 0.3s ease;
}
.recruit__logo:hover img { opacity: 0.75; }

/* 共通：カード内リンクの矢印ホバー（INTERVIEW） */
.interview-card__link { transition: color 0.25s ease; }

/* =========================================================
   モバイルナビ（ハンバーガーメニューの開閉先）
   タブレット以下でのみ使用。全画面オーバーレイでナビを表示する。
========================================================= */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background-color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 5vw, 2rem);
}
.mobile-nav__list a {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 6vw, 1.8rem);
  letter-spacing: 0.06em;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(0.8rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.mobile-nav.is-open .mobile-nav__list a {
  opacity: 1;
  transform: translateY(0);
}
/* 縦並びなので、仕切りは上側に引く横線にする。文字も一回り小さく */
.mobile-nav__list .nav-external {
  margin-top: clamp(0.4rem, 2vw, 0.8rem);
  padding-top: clamp(1.4rem, 5vw, 2rem);
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  width: min(70%, 16rem);
  justify-content: center;
  font-size: clamp(1rem, 4.4vw, 1.3rem);
}
/* 開いた時、リンクを上から順に少しずつ表示する */
.mobile-nav__list a:nth-child(1) { transition-delay: 0.08s; }
.mobile-nav__list a:nth-child(2) { transition-delay: 0.13s; }
.mobile-nav__list a:nth-child(3) { transition-delay: 0.18s; }
.mobile-nav__list a:nth-child(4) { transition-delay: 0.23s; }
.mobile-nav__list a:nth-child(5) { transition-delay: 0.28s; }
.mobile-nav__list a:nth-child(6) { transition-delay: 0.33s; }
.mobile-nav__list a:nth-child(7) { transition-delay: 0.38s; }

/* 新卒／中途の入り口を分けるため、モバイルメニューでも2つ並べて配置する */
.mobile-nav__entry-group {
  display: flex;
  gap: 0.7rem;
  margin-top: clamp(0.6rem, 2vw, 1rem);
}

.mobile-nav__entry {
  margin-top: 0;
  padding: 0.75em 1.5em;
  background-color: var(--color-accent);
  color: var(--color-accent-ink) !important;
  border-radius: 999px;
  font-family: var(--font-body) !important;
  font-size: clamp(0.82rem, 3.2vw, 0.92rem) !important;
  letter-spacing: 0.04em;
  border: 1px solid var(--color-accent);
}
.mobile-nav__entry--outline {
  background-color: transparent;
  color: var(--color-accent-ink) !important;
}

/* ハンバーガー→×アイコンのアニメーション */
.menu-circle span {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-circle.is-open span:nth-child(1) {
  transform: translateY(0.35em) rotate(45deg);
}
.menu-circle.is-open span:nth-child(2) {
  opacity: 0;
}
.menu-circle.is-open span:nth-child(3) {
  transform: translateY(-0.35em) rotate(-45deg);
}

/* メニューが開いている間は背景スクロールを止める */
body.mobile-nav-open {
  overflow: hidden;
}

/* =========================================================
   セクションラベル：日本語をメイン、英字は添え字として残す
   （既存の英字ラベルは消さず、小さくして日本語の上に置く）
========================================================= */
.about__label,
.interview__label,
.benefit__label,
.recruit__label {
  gap: clamp(0.35rem, 1vw, 0.6rem);
}

/* 英字（従）：アクセントカラーのまま一回り小さく */
.about__label span:first-child,
.interview__label span:first-child,
.benefit__label span:first-child,
.recruit__label span:first-child {
  font-size: clamp(0.75rem, 1vw, 0.92rem);
  letter-spacing: 0.22em;
}

/* 日本語（主）：本文と同じ明朝で大きく見せる */
.section-label-ja {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--color-text);
}

/* 日本語見出しが入るぶん、ラベル下の余白は少し詰める */
.about__label { margin-bottom: clamp(2.2rem, 5vw, 3.8rem); }
.interview__label,
.benefit__label { margin-bottom: clamp(2.6rem, 6vw, 4.6rem); }

/* =========================================================
   本文の組み方（和文タイポグラフィ）
   ・手動改行をやめたので、折り返しはブラウザに任せる
   ・両端揃えで右端をきれいに揃える（日本語は全角なので隙間が出にくい）
   ・line-break: strict で句読点の禁則処理を厳密にする
========================================================= */
.fv__text,
.about__text,
.about__closing-copy p,
.interview__text,
.benefit__text,
.company-card__text,
.group-hero__text,
.group-message__text {
  text-align: justify;
  line-break: strict;
  overflow-wrap: anywhere; /* 長い英数字が混ざっても行からはみ出さない */
}

/* 中央寄せのリード文：両端を揃えつつ、最終行だけ中央に置いて中央寄せの体裁を保つ */
.group-intro__text,
.recruit__lead-text {
  text-align: justify;
  text-align-last: center;
  line-break: strict;
}

/* カード内の中央寄せ短文は、両端揃えだと字間が開きやすいので中央のまま */
.benefit-card p,
.strength-card p {
  line-break: strict;
}

/* PC用の意図的な改行（文節・句点で切る）。
   ※ 本文は必ず1行で記述し、この <br class="br-pc"> だけで改行位置を作る。
     ソースに改行を入れると半角スペースとして表示されてしまうため。 */
@media (max-width: 768px) {
  .br-pc { display: none; }
}