@charset "UTF-8";
/* 下層で使う緑（各ページ節の $fd-/$jd-/$pd- と同値。先に使う箇所があるので冒頭で定義） */
/* ホバー時に entry-area のボタンを塗る濃緑（カンプ TOP260819_B_hover.ai 実測 #135E1D） */
/* SPカンプ（横750px）の実測値を vw に変換する。sp(750) = 100vw。
   375px 幅ではカンプの px 値と一致する。 */
/* SPブレークポイントは 1199px まであるため、vw だけだと大画面で文字や部品が肥大する。
   下限＝375px 時のカンプ値（= カンプ値 ÷ 2）、上限＝PCカンプの値、で挟む。
   例: 見出しは 375px で 15px、そこから伸びて PC の 20px で頭打ちになる。 */
/* カンプの紙面（bg-header / bg-footer スライスの平均色 #F6F6F2）。
   テクスチャ画像が読めないときのフォールバック色も兼ねる */
/* Webフォントは各HTMLの <link>（preconnect + css2）で読む。@import はレンダリングブロックするため廃止 */
* {
  box-sizing: border-box;
}

html {
  /* ナビを開くと .is-nav-open で overflow:hidden にするため、
     ガターを常に確保しないとページが約15pxずれる（フェード中に見えてしまう） */
  scrollbar-gutter: stable;
  /* ヘッダーを上部固定にしたので、ページ内アンカーの着地位置をヘッダー分ずらす */
  scroll-padding-top: 80px;
  font-size: 20px;
  font-family: "Zen Kaku Gothic New", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

body {
  margin: 0;
  color: #211815;
  background: #fff;
  font-family: inherit;
  font-weight: normal;
  letter-spacing: 0.04em;
}

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

img {
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

button {
  font: inherit;
}

/* 各ページのラッパー共通。旧 .faq-page（FAQ以外にも付いていた名残）を各ページ名に置き換えたもの。 */
.about-page,
.benefits-page,
.club-page,
.culture-page,
.dual-career-page,
.faq-page,
.future-detail-page,
.future-page,
.jobs-detail-page,
.jobs-page,
.people-detail-page,
.people-top-page,
.requirements-page,
.training-page,
.working-environment-page {
  width: 100%;
  overflow: hidden;
  background: #fff;
}

/* 装飾画像が右にはみ出して横スクロールが出るため clip する
   （.top-people__photo は position:absolute のためセクション側では止められない）
   以前は min-width: 1200px を置いて 768〜1199px のヘッダー崩れを避けていたが、
   その幅では常に横スクロールが出ていた。SPブレークポイントを 1199px まで
   引き上げ、1199px 以下はSPレイアウトを使うことで解消している。 */
/* 試験（切り戻し前提）: SP は 767px まで。768〜1199px は PC レイアウト（1200px 固定）を横スクロールで見せる */
@media (min-width: 768px) {
  body {
    min-width: 1200px;
  }
}
.top-page {
  overflow-x: hidden;
}

.site-header {
  /* 20260904修正: Gナビを上部固定（PC/SP共通） */
  position: fixed;
  top: 0;
  left: 0;
  /* 20260928修正: 本文側の装飾（people-card__image::after など z-index:100）が
     固定ヘッダーに重なってリンクを塞いでいたため、本文より前面に出す */
  z-index: 200;
  /* 100vw はスクロールバー幅を含むため、絶対配置のヘッダーが右にはみ出して横スクロールが出る */
  width: 100%;
  height: 80px;
  /* カンプ（共通/header_PC.ai）は #339c4a の70%。背景の page-hero（#339c4a）と重なって
     ベタと同じ色に見え、::before の装飾だけが薄く透ける。 */
  background: rgba(51, 156, 74, 0.7);
  color: #fff;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1000px;
  height: 80px;
  margin: 0 auto;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header__logo {
  display: block;
  width: 90px;
  height: auto;
}

/* カンプ実測（開閉共通）: 1行目 ink 幅118.5 / 高11.0 → 13px、
   2行目 ink 幅109.0 / 高14.5 → 17px、行送り 18.25、字送りは詰めなし。
   body の 0.04em（20px 基準で 0.8px）を継承すると 30px ほど広がるので打ち消す。 */
.site-header__brand-text {
  display: grid;
  gap: 3px;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0;
}
.site-header__brand-text strong {
  font-size: 17px;
}

/* カンプ実測（1200px 基準）の並び:
   ラベル 637.5-740.25 / Insta 760.75-787.75 / YT 807.5-841.75 / X 861.75-885
   / ENTRY 909-1019 / ☰ 1049-1081。素の間隔は 20px で、ENTRY 前が 24、☰ 前が 30。 */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* measure-comp: 16.00pt / 実効字送り 16.00pt → letter-spacing 0 */
.site-header__sns-label {
  font-size: 16px;
  letter-spacing: 0;
}

/* 3種のアイコンは縦横比が違う（Insta 正方形 / YT 横長 / X 縦長）。
   共通の 34px 角の箱に入れると箱の余白ぶん間隔が広がるので、
   SVG の固有サイズをそのまま置く */
.site-header__sns {
  display: block;
}
.site-header__sns img {
  display: block;
  width: 100%;
  height: 100%;
}

.site-header__sns[aria-label=Instagram] {
  width: 27px;
  height: 27px;
}

.site-header__sns[aria-label=YouTube] {
  width: 34.28px;
  height: 24px;
}

.site-header__sns[aria-label=X] {
  width: 23.48px;
  height: 24px;
}

.site-header__entry {
  display: grid;
  place-items: center;
  width: 110px;
  /* hover で塗りが緑になると輪郭が消えるため白の枠線を持たせ、その分（1px×2）高さを足す */
  height: 50px;
  /* カンプ実測: X との間隔は 24px（基準の 20px + 4px） */
  margin-left: 4px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: #fff;
  color: #2f9b4b;
  font-size: 15px;
}

/* カンプ実測: 2px の線3本・送り10px（外接 32×22）。右端は 1200px 基準で x=1081。
   開いたときの .global-nav__close と同一位置・同一サイズにすること。 */
.site-header__menu {
  display: grid;
  gap: 8px;
  width: 32px;
  margin-right: 19px;
  margin-left: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.site-header__menu span {
  display: block;
  height: 2px;
  background: #fff;
}

/* カンプは「全画面オーバーレイ」ではなく、上から降りてくる高さ 787px のパネル。
   .global-nav 自体は背景を持たない透明レイヤーにして、パネルの外側をクリックすると
   閉じる当たり判定（common.js の event.target === nav）だけ残す。 */
.global-nav {
  position: fixed;
  inset: 0;
  /* ヘッダー（200）より前面。開いたパネルがヘッダーを覆う */
  z-index: 300;
  overflow-y: auto;
  /* display はトランジションできないので visibility + opacity で出し入れする。
     閉じているあいだは visibility:hidden なのでクリックもタブ移動も拾わない。 */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  color: #2f9b4b;
}

.is-nav-open {
  overflow: hidden;
}

.is-nav-open body {
  height: 100vh;
  overflow: hidden;
}

.is-nav-open .global-nav {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .global-nav,
  .is-nav-open .global-nav {
    transition: none;
  }
}
/* 紙パネル本体。カンプ実測: 全幅 × 高さ 787px、下端まで 62px 空く。
   テクスチャは bg-header スライス（全面が標準偏差2.2の均一ノイズ）から
   400px 角を切り出したタイル。200px で敷いて 2x 相当にしている。 */
.global-nav__inner {
  position: relative;
  width: 100%;
  padding-bottom: 62px;
  background: #f6f6f2 url("../img/common/bg-header.webp") repeat;
  background-size: 200px 200px;
}

/* ヘッドは閉じた .site-header__inner と同じ帯（高さ80px・幅1000px・中央寄せ）にする。
   カンプはブランド左端 100 / ✕ 右端 1081 で、開閉とも同一座標。 */
.global-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1000px, 100%);
  height: 80px;
  margin: 0 auto 18px;
}

/* .site-header__brand と同じ間隔にする（ロゴ右端 190 → 文字左端 210） */
.global-nav__brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

.global-nav__brand-logo {
  display: block;
  width: 90px;
  height: auto;
  filter: brightness(0) saturate(100%) invert(39%) sepia(74%) saturate(535%) hue-rotate(82deg) brightness(92%) contrast(90%);
}

/* .site-header__brand-text と完全に同じ組みにする */
.global-nav__brand-text {
  display: grid;
  gap: 3px;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0;
}

.global-nav__site-name {
  font-size: 17px;
}

/* カンプ実測: ✕ の外接ボックスは 33×22 で、閉じたときの ☰（32×22）と同位置。
   2px の線を長さ38pxで ±32° に振ると 33.3×21.8 になる。 */
.global-nav__close {
  position: relative;
  width: 33px;
  height: 22px;
  margin-right: 19px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.global-nav__close::before, .global-nav__close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 2px;
  margin: -1px 0 0 -19px;
  background: #2f9b4b;
  content: "";
}
.global-nav__close::before {
  transform: rotate(32deg);
}
.global-nav__close::after {
  transform: rotate(-32deg);
}

/* カンプ実測: 本文は 1200px 基準で x=150〜1050（幅900）。
   3列の左端は 150 / 450 / 750 なので列送りは 300px ＝ 300px幅・列間0。
   2列目の最長行「ビジネスプロモーション（事業推進）」が 272px なので収まる。 */
.global-nav__menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px 0;
  width: min(900px, 100%);
  margin: 0 auto 42px;
}

.global-nav__menu-column {
  display: contents;
}

/* measure-comp: 見出し 20.00pt / 実効字送り 20.00pt → letter-spacing 0
   （body の 0.04em ＝ 20px 基準で 0.8px を継承してしまうので明示的に打ち消す） */
.global-nav__heading {
  margin: 0 0 15px;
  color: #2f9b4b;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0;
}

.global-nav__list {
  display: grid;
  /* カンプ実測: 項目の送り 32px（行送り20 + 12） */
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* measure-comp: 16.00pt / 実効字送り 16.50pt → letter-spacing 0.031em(0.5px)
   行内の送りは 20px なので line-height は 1.25。
   カンプは 2行目が「- 」のぶんだけ字下げされる（PC 10px / SP 8px ＝ 約 0.625em） */
.global-nav__item {
  padding-left: 0.625em;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.03125em;
  text-indent: -0.625em;
}

.global-nav__link::before {
  content: "- ";
}

.global-nav__group--people {
  grid-column: 2;
  grid-row: 2;
  margin-top: 76px;
}

.global-nav__group--training {
  grid-column: 2;
  grid-row: 2;
}

.global-nav__group--about {
  grid-column: 1;
  grid-row: 1;
}

.global-nav__group--jobs {
  grid-column: 2;
  grid-row: 1;
}

.global-nav__group--environment {
  grid-column: 3;
  grid-row: 1;
}

.global-nav__group--future {
  grid-column: 1;
  grid-row: 2;
}

/* カンプ実測（本文900px に対して）: 300 / 40 / 180 / 10 / 180 / 10 / 180。
   1列目と2〜4列目の間だけ 40px 空くので、column-gap ではなくスペーサー列で表す。
   % は 900px に対する比率で、狭い幅では同じ比率のまま縮む。 */
.global-nav__entry {
  display: grid;
  grid-template-columns: min(300px, 33.3333%) min(40px, 4.4444%) min(180px, 20%) min(10px, 1.1111%) min(180px, 20%) min(10px, 1.1111%) min(180px, 20%);
  gap: 12px 0;
  width: min(900px, 100%);
  margin: 0 auto;
  /* stretch だと1列目の塗りボタンが右列のワイドボタン（80px）まで伸びてしまう。
     カンプは塗り59 / ワイド80 / 小47 でそれぞれ固有の高さを持ち、行内では中央に来る */
  align-items: center;
}

.global-nav__entry-button {
  position: relative;
  display: flex;
  align-items: center;
  /* カンプ実測: 小ボタン 47px */
  min-height: 47px;
  /* ボタン幅と同率で余白を縮めると文字が入らないので、余白だけ速く詰める。
     右 = 1120px→46px / 768px→27px、左 = 1120px→18px / 768px→9px を通る直線。 */
  padding: 0 clamp(24px, 5.398vw - 14.45px, 46px) 0 clamp(8px, 2.557vw - 10.63px, 18px);
  border: 1px solid rgba(47, 155, 75, 0.55);
  /* カンプ実測: 紙地 rgb(247,247,248) に対しボタン内は rgb(253,252,252) ＝ 白ベタ */
  background: #fff;
  color: #2f9b4b;
  /* 1.3393vw × 1120 = 15px。1120px 未満はボタン幅に合わせて 13px まで落とす */
  font-size: clamp(13px, 1.3393vw, 15px);
  line-height: 1.45;
  /* 折り返したときに「ー」「ィ」などの行頭禁則を効かせる（既定の normal だと
     「エントリ／ー」「採用メデ／ィア」のように割れる） */
  line-break: strict;
}

.global-nav__entry-arrow {
  position: absolute;
  /* 左パディングと同じ直線。右パディングの内側に必ず収まる */
  right: clamp(8px, 2.557vw - 10.63px, 18px);
}

.global-nav__entry-button--fill {
  /* カンプ実測: 塗りボタン 59px */
  min-height: 59px;
  background: #2f9b4b;
  color: #fff;
}

.global-nav__entry-button--fill:first-child {
  grid-column: 1;
  grid-row: 1;
}

.global-nav__entry-button--fill:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.global-nav__entry-button--wide {
  display: grid;
  grid-column: 3/-1;
  grid-row: 1;
  /* カンプ実測: ワイドボタン 80px */
  min-height: 80px;
  justify-content: center;
  text-align: center;
}

.global-nav__entry-text {
  position: static;
}

.global-nav__entry-button:nth-child(4) {
  grid-column: 3;
}

.global-nav__entry-button:nth-child(5) {
  grid-column: 5;
}

.global-nav__entry-button:nth-child(6) {
  grid-column: 7;
}

/* カンプ実測: 3列目と同じ左端 x=750（本文中央から +150px）、ラベル上端 y≈298。
   .global-nav__inner が全幅になったので、本文と同じ「中央基準」で置く。 */
.global-nav__sns {
  position: absolute;
  top: 300px;
  left: 50%;
  right: auto;
  bottom: auto;
  margin-left: 150px;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 14px 20px;
  align-items: center;
}

/* カンプ実測: ヘッダーのラベルと同寸（幅 102.75 / 高さ 11.75 = 16px）で、PCは1行。
   SPだけ OFFICIAL / SNS の2行（改行は .u-br-sp で切り替え） */
.global-nav__sns-label {
  grid-column: 1/-1;
  font-size: 16px;
  letter-spacing: 0;
}

.global-nav__sns-icon {
  display: block;
  filter: brightness(0) saturate(100%) invert(39%) sepia(74%) saturate(535%) hue-rotate(82deg) brightness(92%) contrast(90%);
}

/* ヘッダーと同じく SVG の固有サイズ。1クラスで3種の縦横比は持てないので
   aria-label で個別に指定する（SP 側も同じ形で上書きすること） */
.global-nav__sns-link[aria-label=Instagram] .global-nav__sns-icon {
  width: 27px;
  height: 27px;
}

.global-nav__sns-link[aria-label=YouTube] .global-nav__sns-icon {
  width: 34.28px;
  height: 24px;
}

.global-nav__sns-link[aria-label=X] .global-nav__sns-icon {
  width: 23.48px;
  height: 24px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  width: 1000px;
  /* カンプ実測（PC1200px基準・A/B両カンプ共通）: 文字の ink が y=121.9〜132.4、
     字送り 16.17px − 文字サイズ 14px ＝ letter-spacing 2.17px(0.155em)。 */
  margin: 36px auto 0;
  font-size: 14px;
  letter-spacing: 0.155em;
  /* ヘッダーを固定化するにあたり header の外（main 先頭）へ移動。
     元の見た目（ヘッダー 80px の直下）に絶対配置で戻す */
  position: absolute;
  top: 80px;
  right: 0;
  left: 0;
  z-index: 5;
  /* header 内では #fff を継承していた */
  color: #fff;
}

/* 区切りはカンプ通り全角「＞」（カンプ実測 ink 10.6 × 10.1px ＝ 14px 相当）。
   親の letter-spacing が＞の後ろに乗って左右のアキがずれるので打ち消す。 */
.breadcrumb__separator {
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
}

.page-hero {
  position: relative;
  height: 405px;
  overflow: hidden;
  background: #339c4a;
  color: #fff;
}
.page-hero::before {
  position: absolute;
  right: -260px;
  content: "";
  top: 30px;
  width: 1010px;
  height: 100%;
  background: url("../img/common/bg-main-side.svg") no-repeat;
  background-size: cover;
  mix-blend-mode: multiply;
  aspect-ratio: 97/75;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  width: 990px;
  margin: 0 auto;
  /* カンプ実測（下層8ページ共通）: 見出しの ink 上端が帯上端から 214.5px */
  padding-top: 207px;
}

h1 {
  margin: 0;
  /* 20260904修正: 各見出しのウエイトを一段上げる（700→900） */
  font-weight: 900;
  font-size: 54px;
  line-height: 1.1;
  letter-spacing: 0.03em;
}

/* 下層のヒーロー見出し。カンプ実測で8ページとも 50px 相当だった */
.page-hero__title {
  font-size: 50px;
}

.hero-image {
  /* picture はインラインのままだと height が効かず画像が幅なりに伸びる */
  display: block;
  height: 315px;
  overflow: hidden;
}

.faq-intro {
  position: relative;
  padding: 88px 0 79px;
  overflow: hidden;
}

.site-intro {
  position: relative;
  overflow: hidden;
}
.site-intro::after {
  position: absolute;
  top: -348px;
  right: -278px;
  width: 619px;
  height: 748px;
  background: url("../img/common/bg-intro-side.svg") no-repeat;
  background-size: 619px 748px;
  content: "";
}

/* デュアルキャリアは背景の筆装飾を出さない */
.dual-career-page .site-intro::after {
  display: none;
}

.faq-intro__inner {
  max-width: 988px;
  width: 100%;
  margin: 0 auto;
}

.faq-intro__title {
  margin: 0 0 38px;
  color: #16833a;
  font-size: 40px;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

h2 {
  margin: 0 0 38px;
  color: #16833a;
  font-weight: 900;
  font-size: 40px;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.faq-intro__text {
  margin: 0;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.09em;
}

.arrow-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 375px;
  height: 64px;
  border: 2px solid currentColor;
  color: #008a42;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.arrow-button__arrow {
  position: absolute;
  right: 18px;
  font-size: 30px;
  line-height: 1;
}

.arrow-badge {
  display: grid;
  place-items: center;
  width: 76px;
  height: 36px;
  border: 1px solid #278a3d;
  border-radius: 999px;
  color: #278a3d;
  font-size: 30px;
  line-height: 1;
}

.u-br-pc {
  display: inline;
}

.u-br-sp {
  display: none;
}

.site-text--pc {
  display: inline;
}

.site-text--sp {
  display: none;
}

.faq-section {
  padding: 0 0 120px;
}

.faq-section--last {
  padding-bottom: 126px;
}

.faq-section__inner {
  max-width: 1000px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  margin: 0 auto;
}

.faq-section__title {
  margin: 0 0 40px;
  color: #16833a;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: 0.03em;
}

h3 {
  margin: 0 0 40px;
  color: #16833a;
  font-weight: 900;
  font-size: 40px;
  line-height: 1.3;
  letter-spacing: 0.03em;
}

.faq-list {
  width: 100%;
  border-top: 1px solid #000;
  box-sizing: border-box;
}

.faq-item {
  border-bottom: 1px solid #000;
  color: #000;
}

.faq-item__question {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 120px;
  padding: 0 70px 0 0;
  list-style: none;
  cursor: pointer;
  transition: min-height 0.35s ease;
  /* ＋ / − アイコン: 18px 角の同じ箱を2つ重ね、横棒・縦棒（線幅2px）は背景で中央に描く。18-2 が偶数なので位置が整数になる */
}
.faq-item__question::-webkit-details-marker {
  display: none;
}
.faq-item__question::before, .faq-item__question::after {
  position: absolute;
  top: 50%;
  right: 45px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  content: "";
  transition: transform 0.2s ease;
}
.faq-item__question::before {
  background: linear-gradient(#858585, #858585) center/18px 2px no-repeat;
}
.faq-item__question::after {
  background: linear-gradient(#858585, #858585) center/2px 18px no-repeat;
}

.faq-item[open] .faq-item__question {
  min-height: 95px;
}
.faq-item[open] .faq-item__question::after {
  transform: scaleY(0);
}

.faq-item__label {
  flex: 0 0 25px;
  color: #16833a;
  font-size: 24px;
  font-weight: 900;
}

.faq-item__text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
}

.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.25s ease;
}

.faq-item[open] .faq-item__answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-item__answer-inner {
  display: flex;
  gap: 24px;
  min-height: 0;
  overflow: hidden;
  padding: 0 0 34px;
}

.faq-item__answer-text {
  margin: 0;
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: 0.03em;
}

.faq-item__answer-text a {
  text-decoration: underline;
}

.entry-area {
  position: relative;
  margin-top: 0;
  /* カンプ実測（TOP/下層とも同一）: 見出しinkの上端が帯上端+86px、最終ボタン下端から帯下端が80px */
  padding: 58px 0 80px;
  background: #2f9b4b;
  color: #fff;
}
.entry-area::before {
  position: absolute;
  top: -150px;
  left: 50%;
  width: 79vw;
  max-width: 948px;
  height: auto;
  aspect-ratio: 948/723;
  background: url("../img/top/bg-top-entry.webp") center top/contain no-repeat;
  transform: translateX(-50%);
  mix-blend-mode: multiply;
  /* 上に 150px はみ出すため、募集要項の下タブに重なってホバー・クリックを奪わないようにする（No.117） */
  pointer-events: none;
  content: "";
}

.entry-area__inner {
  position: relative;
  z-index: 1;
  width: 770px;
  margin: 0 auto;
  text-align: center;
}

.entry-area__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  margin: 0 0 14px;
  /* カンプ実測: 筆緑(18,107,31)上のグリフ(183,210,187) → α=0.696 ≒ #FFF 70% */
  color: rgba(255, 255, 255, 0.7);
  /* 見出しの欧文は Jost Regular（カンプ実測: ink 235.5 x 61px、字幅比・線幅とも一致） */
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  font-size: 83px;
  font-weight: bold;
  letter-spacing: 0;
  /* HTMLは「Entry」で保持し表示だけ大文字化（読み上げ時のE-N-T-R-Y分解を避ける） */
  text-transform: uppercase;
}

/* 見出し両脇の▼ */
.entry-area__mark {
  width: 0;
  height: 0;
  border-top: 25px solid rgba(255, 255, 255, 0.7);
  border-right: 14px solid transparent;
  border-left: 14px solid transparent;
}

.entry-area__buttons {
  display: grid;
  gap: 20px;
}
.entry-area__buttons a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 1.45;
}

/* ボタン右端の矢印（primary / secondary / 自社サイト枠とも同じ大きさ） */
.entry-area__arrow {
  position: absolute;
  right: 20px;
  font-size: 30px;
}

.entry-area__buttons--primary {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 40px;
}
.entry-area__buttons--primary a {
  background: rgba(255, 255, 255, 0.8);
  color: #2f9b4b;
}

.entry-area__wide {
  position: relative;
  display: grid;
  place-items: center;
  /* 自動行がmin-height余剰で伸びないよう中身は中央に寄せる */
  align-content: center;
  /* カンプ実測: 枠高110px。タイトル→本文のインク間隔13px（行送りは1.5相当） */
  min-height: 110px;
  margin-bottom: 19px;
  background: rgba(255, 255, 255, 0.8);
  color: #2f9b4b;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1.5;
}
.entry-area__wide strong {
  font-size: 22px;
}

.entry-area__buttons--secondary {
  grid-template-columns: repeat(3, 1fr);
}
.entry-area__buttons--secondary a {
  /* カンプ実測: 高さ57px・テキスト左寄せ（箱左端から21px）・矢印は右端 */
  justify-content: flex-start;
  min-height: 57px;
  padding-left: 21px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #fff;
  font-size: 20px;
}

.site-footer {
  padding: 42px 0 58px;
  /* bg-footer スライスは全面が均一な紙ノイズなので、400px 角のタイルを 200px で敷く。
     以前の center / 110% 110% は 1枚を引き伸ばしていて解像度が安定しなかった */
  background: #f6f6f2 url("../img/common/bg-footer.webp") repeat;
  background-size: 200px 200px;
  color: #2f9b4b;
  position: relative;
  z-index: 100;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px 22px;
  width: 905px;
  margin: 0 auto;
}

.site-footer__logo {
  margin-bottom: 28px;
}

.site-footer__logo-image {
  display: block;
  width: 160px;
  height: auto;
}

.site-footer__site-name {
  margin: 0 0 27px;
  font-size: 14px;
  line-height: 1.55;
}

.site-footer address {
  margin: 0;
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
}

.site-footer__space {
  display: none;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 左カラム（住所）より背が低いので、stretch だと行が伸びてカンプの90px送りにならない */
  align-content: start;
  gap: 0 20px;
  padding-top: 32px;
}

/* measure-comp: 見出し 20.00pt / 実効字送り 20.00pt → letter-spacing 0 */
.site-footer__nav-heading {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0;
}

.site-footer__nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* カンプ実測: 区切り線の送りが90px（=89 + 下線1px） */
  min-height: 89px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(47, 155, 75, 0.22);
  background: transparent;
  color: inherit;
  font-size: inherit;
  /* 見出し(h2)の太字を継承させず、カンプどおり 500 で出す */
  font-weight: 500;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.site-footer__nav-toggle:disabled {
  cursor: default;
}

/* 行box を見出しと同じ 28px に揃える（既定の 1.4 だと 39px になり、
   開いたときの帯の高さを ＋/− が決めてしまう） */
.site-footer__nav-icon {
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.site-footer__nav-list {
  display: grid;
  /* カンプ実測（開）: 項目の送り 32px（行送り20 + 12） */
  gap: 12px;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(47, 155, 75, 0);
  opacity: 0;
  list-style: none;
  transition: max-height 0.48s ease, padding 0.48s ease, border-color 0.48s ease, opacity 0.32s ease;
}

/* measure-comp: 16.00pt / 実効字送り 16.50pt。行内の送り 20px・項目の送り 32px。
   2行目はグローバルナビと同じく「- 」ぶん字下げする */
.site-footer__nav-item {
  padding-left: 0.625em;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.03125em;
  text-indent: -0.625em;
}

.site-footer__nav-link::before {
  content: "- ";
}

/* カンプ実測（開）: 見出しの位置は閉じたときと同じ（フッター上端から ink 109px）だが、
   見出しの下の余白が 35px → 18px に詰まって 1項目めの ink が 149px に来る。
   閉じたままの 89px を保つと項目が 17px 下がるので、開いたときだけ帯を縮める。 */
.site-footer__nav-group.is-footer-nav-open .site-footer__nav-toggle {
  align-items: flex-start;
  min-height: 0;
  /* 30.5 は閉じたときの帯（89px）で見出しが来る位置と同じ。
     下 12px でカンプの「見出し ink → 1項目 ink = 40px」になる */
  padding-top: 30.5px;
  padding-bottom: 12px;
  border-bottom: 0;
}

.site-footer__nav-group.is-footer-nav-open .site-footer__nav-list {
  max-height: 360px;
  /* カンプ実測: 最終項目の ink から区切り線まで 69px */
  padding-bottom: 52px;
  border-bottom-color: rgba(47, 155, 75, 0.22);
  opacity: 1;
}

.site-footer__nav-group {
  padding-top: 0;
}

.site-footer__bottom {
  display: flex;
  grid-column: 1/-1;
  align-items: center;
  justify-content: space-between;
  padding-top: 39px;
  font-size: 14px;
}

.site-footer__copyright {
  font-size: inherit;
}

.site-footer__bottom-links {
  display: flex;
  gap: 24px;
}

.site-footer__bottom-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.site-footer__bottom-link::after {
  display: block;
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  background: url("../img/common/ic-footer-link.svg") center/contain no-repeat;
  content: "";
}

.people-hero-image {
  position: relative;
  height: 310px;
  background: url("../img/people-hero.webp") center/cover no-repeat;
}
.people-hero-image::after {
  display: none;
}

.people-inner {
  width: 1000px;
  margin: 0 auto;
}

.people-intro {
  position: relative;
  padding: 92px 0 86px;
  overflow: hidden;
}
.people-intro::after {
  position: absolute;
  top: 0;
  right: -62px;
  width: 325px;
  height: 380px;
  background: rgba(47, 155, 75, 0.72);
  content: "";
}

.people-intro__title,
.value-section__title,
.role-section__title,
.numbers-section__title {
  margin: 0 0 22px;
  color: #16833a;
  font-size: 30px;
  line-height: 1.35;
}

.people-intro__text,
.value-section__text,
.role-section__text {
  margin: 0;
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.06em;
}

.history-list {
  position: relative;
  display: grid;
  gap: 34px;
  width: 660px;
  margin: 54px 0 0;
  padding: 0;
  list-style: none;
}
.history-list::before {
  position: absolute;
  top: 35px;
  bottom: 35px;
  left: 35px;
  width: 1px;
  background: rgba(47, 155, 75, 0.35);
  content: "";
}

.history-item {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 24px;
}

.history-item__number {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #2f9b4b;
  color: #fff;
  font-size: 26px;
  line-height: 1;
}

.history-item__body {
  padding-top: 5px;
}

.history-item__title,
.value-section__subtitle,
.role-section__subtitle,
.numbers-section__subtitle {
  margin: 0 0 14px;
  color: #16833a;
  font-size: 18px;
  line-height: 1.5;
}

.history-item__text {
  font-size: 11px;
  line-height: 1.9;
}

.value-section {
  padding: 82px 0;
  background: #eaf4ef;
}

.value-section__inner {
  display: grid;
  grid-template-columns: 420px 1fr;
  align-items: center;
  gap: 80px;
}

.value-map {
  position: relative;
  height: 330px;
}

.value-map__item {
  position: absolute;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #2f9b4b;
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.value-map__item--top {
  top: 0;
  left: 196px;
}

.value-map__item--left {
  top: 110px;
  left: 56px;
}

.value-map__item--center {
  top: 110px;
  left: 196px;
  width: 128px;
  height: 128px;
}

.value-map__item--right {
  top: 110px;
  right: 64px;
}

.value-map__item--bottom {
  bottom: 0;
  left: 196px;
}

.role-section {
  position: relative;
  padding: 94px 0 102px;
  overflow: hidden;
}
.role-section::after {
  position: absolute;
  top: 0;
  right: -70px;
  width: 315px;
  height: 330px;
  background: rgba(47, 155, 75, 0.72);
  content: "";
}

.role-section__lead {
  margin-bottom: 46px;
}

.role-list {
  display: grid;
  gap: 34px;
  margin-top: 28px;
}

.role-card {
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: center;
  gap: 70px;
}
.role-card span {
  color: #16833a;
  font-size: 15px;
}
.role-card h4 {
  margin: 10px 0 14px;
  color: #16833a;
  font-size: 18px;
}
.role-card img {
  width: 320px;
  height: 120px;
  object-fit: cover;
}

.numbers-section {
  padding: 92px 0 110px;
  background: #eaf4ef;
}

.numbers-section__title {
  margin-bottom: 34px;
}

.numbers-section__subtitle {
  margin: 44px 0 20px;
}

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

.numbers-grid--people {
  grid-template-columns: repeat(4, 1fr);
}

.number-card {
  min-height: 175px;
  padding: 28px 24px;
  background: #fff;
  color: #2f9b4b;
}
.number-card span {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
}
.number-card strong {
  display: inline-block;
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0;
}
.number-card em {
  font-style: normal;
  font-size: 16px;
}

.number-card--wide {
  grid-column: span 2;
}

.number-card--map {
  background: radial-gradient(circle at 73% 45%, rgba(47, 155, 75, 0.18) 0 34px, transparent 35px), #fff;
}

.bar-chart {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 70px;
  margin-top: 18px;
}
.bar-chart span {
  flex: 1;
  margin: 0;
  background: #2f9b4b;
}
.bar-chart span:nth-child(1) {
  height: 24%;
}
.bar-chart span:nth-child(2) {
  height: 34%;
}
.bar-chart span:nth-child(3) {
  height: 46%;
}
.bar-chart span:nth-child(4) {
  height: 58%;
}
.bar-chart span:nth-child(5) {
  height: 71%;
}
.bar-chart span:nth-child(6) {
  height: 86%;
}
.bar-chart span:nth-child(7) {
  height: 100%;
}

.people-hero-image {
  height: 310px;
}

.people-inner {
  width: 983px;
}

.people-intro {
  min-height: 2150px;
  padding: 92px 0 82px;
}

.people-intro__title,
.value-section__title,
.role-section__title,
.numbers-section__title {
  margin-bottom: 26px;
  font-size: 32px;
  line-height: 1.35;
}

.history-list {
  width: 900px;
  gap: 63px;
  margin-top: 94px;
}

.history-list::before {
  left: 35px;
}

.history-item {
  grid-template-columns: 70px 1fr;
  gap: 76px;
}

.history-item__title {
  margin-bottom: 28px;
  font-size: 30px;
  line-height: 1.35;
}

.history-item__text {
  font-size: 16px;
  line-height: 2;
}

.value-section {
  min-height: 760px;
  padding: 90px 0;
}

.value-section__inner {
  grid-template-columns: 430px 1fr;
  gap: 86px;
}

.value-section__subtitle {
  margin-bottom: 28px;
  font-size: 24px;
}

.value-section__text,
.value-business {
  font-size: 16px;
  line-height: 2;
}

.value-business {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px 46px;
  margin: 32px 0 0;
  padding: 0;
  color: #16833a;
  list-style: none;
}

.value-business__item::before {
  content: "- ";
}

.value-map {
  height: 330px;
}

.value-map__item {
  width: 118px;
  height: 118px;
  font-size: 13px;
}

.value-map__item--center {
  width: 136px;
  height: 136px;
  font-size: 15px;
}

.role-section {
  min-height: 1580px;
  padding: 94px 0 96px;
}

.role-section__lead {
  margin-bottom: 115px;
}

.role-section__subtitle {
  margin-bottom: 54px;
  font-size: 32px;
}

.role-list {
  gap: 52px;
}

.role-card {
  grid-template-columns: 560px 320px;
  gap: 108px;
}

.role-card__label,
.role-card__title {
  color: #16833a;
}

.role-card__label {
  font-size: 16px;
}

.role-card__title {
  margin: 8px 0 24px;
  font-size: 24px;
}

.role-card__text {
  font-size: 16px;
  line-height: 2.12;
}

.role-card__image {
  width: 320px;
  height: 147px;
  object-fit: cover;
}

.numbers-section {
  min-height: 2140px;
  padding: 92px 0 70px;
}

.numbers-section__title {
  margin-bottom: 58px;
}

.numbers-section__subtitle {
  margin: 0 0 24px;
  font-size: 20px;
}

.numbers-section__subtitle + .numbers-grid {
  margin-bottom: 88px;
}

.numbers-grid {
  gap: 10px;
}

.numbers-grid--company {
  grid-template-columns: repeat(3, 1fr);
}

.numbers-grid--people {
  grid-template-columns: repeat(4, 1fr);
}

.number-card {
  min-height: 188px;
  padding: 26px 24px;
}

.number-card__label {
  margin-bottom: 18px;
  font-size: 20px;
  line-height: 1.35;
}

.number-card strong {
  font-size: 56px;
  line-height: 1;
}

.number-card em {
  font-size: 20px;
}

.number-card small {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
}

.numbers-grid--company .number-card:first-child strong,
.numbers-grid--company .number-card:nth-child(4) strong,
.numbers-grid--company .number-card:nth-child(5) strong {
  font-size: 84px;
}

.numbers-grid--people .number-card:nth-child(5) strong,
.numbers-grid--people .number-card:nth-child(6) strong,
.numbers-grid--people .number-card:nth-child(7) strong {
  font-size: 81px;
}

.numbers-grid--people .number-card:nth-child(3) strong,
.numbers-grid--people .number-card:nth-child(4) strong {
  font-size: 47px;
}

.requirements-section {
  padding: 94px 0 0;
}

.requirements-section__inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.requirements-tabs {
  margin-bottom: 78px;
}

.requirements-tabs__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.requirements-tabs__item {
  min-width: 0;
}

.requirements-tabs__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 120px;
  border-bottom: 1px solid #339c4a;
  color: #211815;
  font-size: 18px;
  line-height: 1.45;
  text-align: center;
}
.requirements-tabs__link:hover {
  background: #339c4a;
  color: #fff;
}
.requirements-tabs__link:hover::after {
  border-top: 8px solid #fff;
}
.requirements-tabs__link::after {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 8px solid #339c4a;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  transform: translateX(-50%);
}

.requirements-tabs__link.is-current {
  background: #339c4a;
  color: #fff;
}
.requirements-tabs__link.is-current::after {
  border-top-color: #fff;
}

.requirements-heading {
  margin: 0 0 48px;
  color: #278a3d;
  font-size: 32px;
  line-height: 1.35;
}

.requirements-table {
  margin: 0;
  border-top: 1px solid #339c4a;
}

.requirements-row {
  display: grid;
  /* カンプ実測: ラベル左端x107 / 本文左端x267 → ラベル列+ガター=160px。
     200px+42pxだと本文が242px位置になりカンプより82px右に寄る */
  grid-template-columns: 118px 1fr;
  gap: 0 42px;
  padding: 36px 0 35px;
  border-bottom: 1px solid #339c4a;
}

.requirements-row__title {
  margin: 0;
  color: #278a3d;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.45;
}

.requirements-row__body {
  margin: 0;
  padding-top: 2px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.92;
  letter-spacing: 0.055em;
}
.requirements-row__body p {
  margin: 0 0 8px;
}
.requirements-row__body p:last-child {
  margin-bottom: 0;
}

/* 20260904修正: 「（7月・12月）」「（雇用保険…）」のかっこ部分は少し小さく */
.requirements-row__small {
  font-size: 14px;
}

.requirements-row__link {
  color: #278a3d;
  text-decoration: underline;
}

.requirements-note {
  padding-top: 18px;
}

.requirements-link {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  margin-top: 36px;
  color: #278a3d;
  font-size: 18px;
  font-weight: normal;
}

.requirements-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.requirements-list li {
  position: relative;
  padding-left: 24px;
}
.requirements-list li::before {
  position: absolute;
  top: 0.84em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #339c4a;
  content: "";
}

.requirements-list--inline {
  gap: 0;
  margin-top: 10px;
}

.selection-section {
  padding: 78px 0 200px;
}

.selection-section__heading {
  margin: 0 0 68px;
  color: #278a3d;
  font-size: 32px;
  line-height: 1.35;
}

.selection-flow {
  display: grid;
  gap: 0;
  margin: 0 0 98px;
  padding: 0 0 0 90px;
  list-style: none;
}

.selection-flow__item {
  position: relative;
  min-height: 200px;
}
.selection-flow__item::before {
  position: absolute;
  left: 79px;
  width: 2px;
  height: 40px;
  bottom: -20px;
  background: #339c4a;
  content: "";
}
.selection-flow__item:last-child::before {
  display: none;
}

.selection-flow__item-inner {
  display: flex;
  gap: 24px;
  align-items: center;
  min-height: inherit;
}
.selection-flow__item-inner p.selection-flow__text {
  flex: 1;
  margin: 0;
  font-size: 16px;
  line-height: 2.15;
  letter-spacing: 0.05em;
}

.selection-flow__badge {
  display: grid;
  place-items: center;
  align-content: center;
  flex: 0 0 160px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #339c4a;
  color: #fff;
  font-size: 24px;
  line-height: 1.25;
  text-align: center;
}
.selection-flow__badge .selection-flow__text {
  display: block;
  margin-bottom: 8px;
  font-size: 36px;
  line-height: 1;
}
.selection-flow__badge small {
  font-size: 18px;
}

.requirements-tabs--bottom {
  margin-bottom: 0;
  border-bottom-color: #339c4a;
}
.requirements-tabs--bottom .requirements-tabs__link {
  color: #211815;
}
.requirements-tabs--bottom .requirements-tabs__link::after {
  border-top: 0;
  border-bottom: 8px solid #339c4a;
}
.requirements-tabs--bottom .requirements-tabs__link:hover {
  color: #fff;
}
.requirements-tabs--bottom .requirements-tabs__link:hover::after {
  border-bottom: 8px solid #fff;
}
.requirements-tabs--bottom .requirements-tabs__link.is-current {
  color: #fff;
}
.requirements-tabs--bottom .requirements-tabs__link.is-current::after {
  border-bottom: 8px solid #fff;
}

.future-hero-image {
  display: block;
  height: 315px;
  overflow: hidden;
}

.future-intro {
  position: relative;
  overflow: hidden;
  padding: 82px 0 140px;
}

.future-intro__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  min-height: 0;
  margin: 0 auto;
}

.future-intro__title {
  margin: 0 0 34px;
  color: #16833a;
  font-size: 47px;
  line-height: 1.35;
  letter-spacing: 0.04em;
}
.future-intro__title span {
  font-size: 86px;
  line-height: 0.9;
}

.future-intro__text {
  margin: 0;
  font-size: 17px;
  line-height: 2.2;
  letter-spacing: 0.09em;
}

/* 描く未来のブラシ見出し（TOP・描く未来TOP・個別の「他の未来を見る」で共通）
   位置・大きさ・文字サイズは各カードの側で指定する。ブラシはカンプのベクターを
   2x の透過画像に書き出したもの（PC 用 568x207 と SP 用 385x146 の2形）。 */
.future-brush {
  position: absolute;
  z-index: 2;
  display: block;
  color: #fff;
  pointer-events: none;
}

.future-brush__paint {
  position: absolute;
  inset: 0;
  display: block;
}
.future-brush__paint img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* カンプの文字の下に敷かれたぼかし影（#2b2b2b）の近似 */
.future-brush__text {
  position: absolute;
  display: block;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(43, 43, 43, 0.6);
}

/* 描く未来TOP カンプ 261008：写真 640x260、右端 1100 / 1016、間隔 19.69 */
.future-card-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 50px;
  padding: 0;
  list-style: none;
}

.future-card {
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}
.future-card:nth-child(even) {
  padding-right: 84px;
}
.future-card .future-card__link {
  position: relative;
  display: block;
  width: 640px;
}
.future-card .future-card__image {
  transition: opacity 0.4s ease;
}
.future-card .future-card__link:hover .future-card__image {
  opacity: 0.7;
}

/* ブラシ 568x207。写真の左端から -278 / -275、上端から +27 */
.future-card__label {
  top: 27px;
  left: -278px;
  width: 568px;
  height: 207px;
}
.future-card__label .future-brush__text {
  top: 59px;
  left: 119px;
  font-size: 30px;
  line-height: 40px;
}

.future-card:nth-child(even) .future-card__label {
  left: -275px;
}

.future-card__pic {
  display: block;
  margin: 0;
  position: relative;
  z-index: 1;
}

.future-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640/260;
}

.benefits-hero-image {
  display: block;
  height: 315px;
  overflow: hidden;
}

.benefits-inner {
  width: 1000px;
  margin: 0 auto;
}

.benefits-intro {
  position: relative;
  overflow: hidden;
  padding: 71px 0 74px;
}

.benefits-intro .benefits-inner {
  position: relative;
  z-index: 1;
}

.benefits-inner__title {
  margin: 0 0 26px;
  color: #16833a;
  font-size: 40px;
  line-height: 1.4;
  letter-spacing: 0;
}

.benefits-inner__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.88;
  letter-spacing: 0.05em;
}

.benefits-list-section {
  padding: 0 0 71px;
}

.benefits-category {
  padding: 78px 0 72px;
  border-top: 1px solid #2f9b4b;
}

.benefits-category--last {
  border-bottom: 0;
}

.benefits-category__title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 55px;
  color: #16833a;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;
}

.benefits-category__icon {
  flex: none;
  width: 55px;
  height: auto;
}

.benefits-category__icon--job {
  width: 57px;
}

.benefits-items {
  display: grid;
  gap: 48px;
}

.benefits-item__title {
  margin: 0 0 16px;
  color: #16833a;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0;
}

.benefits-item__text {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.88;
  letter-spacing: 0.05em;
}

.benefits-detail {
  display: grid;
  gap: 10px;
  margin-top: 36px;
}

.benefits-detail__title {
  margin: 0;
  color: #16833a;
  font-size: 21px;
  line-height: 1.42;
  letter-spacing: 0;
}

.benefits-detail__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.88;
  letter-spacing: 0.05em;
}

/* 数値ボックスは SP でカンプどおり1件目の直後に入るため、DOM上は .benefits-items の中。
   PC では本文欄を右に空けて絶対配置で右カラムに戻す（本文幅・ボックス位置は従来と同じ）。 */
.benefits-category--with-stat {
  position: relative;
  padding-right: 240px;
}

.benefits-category--wide-stat {
  padding-right: 280px;
}

.benefits-stat {
  position: absolute;
  top: 78px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background: #f0f7f2;
  color: #16833a;
  text-align: center;
}

.benefits-stat--wide {
  width: 240px;
  height: 240px;
}

.benefits-stat__label {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: 0;
}

.benefits-stat__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 6px 0 0;
  color: #02853c;
  line-height: 1;
}

.benefits-stat__number {
  font-size: 100px;
  font-weight: bold;
  line-height: 0.78;
  letter-spacing: -0.02em;
}

.benefits-stat__unit {
  font-size: 46px;
  line-height: 1;
  letter-spacing: 0;
}

.benefits-stat__note {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
}

/* ---- 育成・研修制度を知る ---- */
/* PC値はデザイン（1200px幅）の実測に合わせている */
.training-inner {
  width: 1000px;
  margin: 0 auto;
}

.training-hero-image {
  display: block;
  height: 315px;
  overflow: hidden;
}

/* 共通：セクション見出し */
.training-section-head__title {
  margin: 0;
  color: #16833a;
  font-size: 40px;
  line-height: 1.55;
}

.training-section-head__text,
.training-section-head__lead {
  margin: 18px 0 0;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.025em;
}

.training-section-head__lead {
  margin-top: 32px;
  letter-spacing: 0;
}

/* 20260904修正: 「人間関係の成長」「業務スキルの成長」だけ太く（色は本文と同じ） */
.training-section-head__strong {
  color: #211815;
  font-weight: 700;
}

/* 0からプロへ */
.training-intro {
  padding: 74px 0 79px;
  background: #fff;
}

.training-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 339px;
  gap: 0 22px;
  align-items: start;
}

.training-intro__title {
  display: flex;
  align-items: baseline;
  margin: 0 0 44px;
  color: #16833a;
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.training-intro__zero {
  font-size: 100px;
  line-height: 1;
}

.training-intro__pro {
  font-size: 97px;
  line-height: 1;
}

.training-intro__text {
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.025em;
}

.training-intro__figure {
  margin: 4px 0 0;
}
.training-intro__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* 2つのストリーム／2つの仕組み 共通カード */
.training-duo {
  display: grid;
  grid-template-columns: repeat(2, 450px);
  justify-content: space-between;
  position: relative;
}

.training-duo__card {
  display: flex;
  flex-direction: column;
  padding: 41px 40px 41px;
  background: #fff;
}

.training-duo--filled .training-duo__card {
  padding: 21px 40px 0;
  background: #f0f7f2;
}

.training-duo__title {
  margin: 0 0 23px;
  color: #278a3d;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
}

.training-duo__accent {
  color: #278a3d;
  font-size: 40px;
  font-weight: 900;
}

.training-duo__note {
  font-size: 30px;
  font-weight: 700;
}

.training-duo__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.training-duo__item {
  position: relative;
  padding-left: 20px;
  font-size: 18px;
  line-height: 1.78;
}
.training-duo__item::before {
  position: absolute;
  top: 0.63em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2f9b4b;
  content: "";
}

.training-duo__figure {
  margin: auto 0 0;
  padding-top: 33px;
  text-align: center;
}
.training-duo__figure img {
  display: block;
  width: 201px;
  height: auto;
  margin: 0 auto;
}

.training-duo__photo {
  margin: 43px -40px 0;
}
.training-duo__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.training-duo__cross {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  color: #2f9b4b;
  font-size: 70px;
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.training-stream {
  position: relative;
  padding: 75px 0 84px;
  background: #f0f7f2;
  overflow: hidden;
  /* 見出し右の筆 */
}
.training-stream::before {
  position: absolute;
  top: -361px;
  right: 0;
  z-index: 0;
  width: 580px;
  height: auto;
  aspect-ratio: 62/75;
  margin-left: 90px;
  background: url("../img/common/bg-intro-side.svg") no-repeat;
  background-size: contain;
  content: "";
}
.training-stream .training-inner {
  position: relative;
  z-index: 1;
}

.training-stream .training-duo {
  margin-top: 75px;
}

/* 2つの仕組み */
.training-system {
  padding: 76px 0 78px;
  background: #fff;
}

.training-section-head--with-figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 403px;
  gap: 0 58px;
  align-items: start;
}

.training-system__figure {
  margin: 10px 0 0;
}
.training-system__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.training-system .training-duo {
  margin-top: 45px;
}

/* 年次ステップ */
.training-step {
  padding: 65px 0 56px;
  background: #f0f7f2;
}

.training-step__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 300px);
  justify-content: space-between;
  margin: 76px 0 0;
  padding: 0;
  list-style: none;
}

.training-step__card {
  position: relative;
  background: #fff;
  /* カード間のシェブロン。
     カンプ実測（育成研修制度_260824.ai / PC1200px基準）:
       ink 19 x 25px、水平方向の太さ 6px、両端は水平カットで先端は尖る。
       カード左端からの相対位置 x = -34.75px（50pxギャップのほぼ中央）、y = 274px。
     border を 45度回転させる描き方では端が斜めに切れて先端も直角に潰れ、
     カンプの「＞」の形にならないので clip-path で作図する。 */
}
.training-step__card:not(:first-child)::before {
  position: absolute;
  top: 274px;
  left: -34.75px;
  width: 19px;
  height: 25px;
  background: #16833a;
  clip-path: polygon(0 0, 6px 0, 100% 50%, 6px 100%, 0 100%, 12.5px 50%);
  content: "";
}

.training-step__year {
  margin: 0;
  padding: 6px 0 12px 0;
  background: #2f9b4b;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  text-align: center;
}

.training-step__num {
  font-size: 40px;
}

.training-step__block {
  padding: 16px 13px 0;
}
.training-step__block:last-child {
  padding-bottom: 37px;
}

.training-step__block--issue {
  padding-bottom: 31px;
  border-bottom: 1px solid #2f9b4b;
}

.training-step__label {
  margin: 0 0 6px;
  color: #16833a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.training-step__points {
  margin: 0 0 29px;
  padding: 0 0 0 8px;
  font-weight: normal;
  list-style: none;
}

.training-step__point {
  position: relative;
  padding-left: 20px;
  font-size: 18px;
  line-height: 1.78;
}
.training-step__point::before {
  position: absolute;
  top: 0.63em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2f9b4b;
  content: "";
}

.training-step__theme {
  margin: 0 0 29px;
  padding-left: 8px;
  color: #16833a;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
}

.training-step__goal {
  margin: 0;
  padding-left: 8px;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.34;
}

/* 社員の声 */
.training-voice {
  position: relative;
  padding: 65px 0 100px;
  background: #fff;
  overflow: hidden;
}
.training-voice::before {
  position: absolute;
  top: -361px;
  right: 0;
  z-index: 0;
  width: 580px;
  height: auto;
  aspect-ratio: 62/75;
  margin-left: 90px;
  background: url("../img/common/bg-intro-side.svg") no-repeat;
  background-size: contain;
  content: "";
}
.training-voice .training-inner {
  position: relative;
  z-index: 1;
}

.training-voice__list {
  margin: 100px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.training-voice__card {
  position: relative;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  grid-template-areas: "photo meta" "photo qualification" "photo comment";
  column-gap: 44px;
  padding: 20px 40px 40px 20px;
  background: #f0f7f2;
}

.training-voice__year {
  position: absolute;
  top: -20px;
  left: 0;
  display: grid;
  place-items: center;
  height: 40px;
  margin: 0;
  padding: 0 28px 0 16px;
  background: #2f9b4b;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
}

.training-voice__card picture {
  grid-area: photo;
  display: block;
}

.training-voice__photo {
  display: block;
  width: 230px;
  height: 260px;
  object-fit: cover;
}

.training-voice__meta {
  grid-area: meta;
}

.training-voice__name {
  margin: 0;
  color: #211815;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
}

.training-voice__job {
  margin: 8px 0 0;
  color: #16833a;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.6;
}

.training-voice__job-break {
  display: none;
}

.training-voice__qualification {
  grid-area: qualification;
  margin: 19px 0 0;
}

.training-voice__label {
  margin: 0 0 10px;
  color: #16833a;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}

.training-voice__license {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.training-voice__license-item {
  position: relative;
  padding-left: 16px;
  color: #231815;
  font-size: 16px;
  line-height: 1.8;
}
.training-voice__license-item::before {
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2f9b4b;
  content: "";
}

/* 取得資格の「など」（2026-09-18 修正依頼。カンプ無し） */
.training-voice__license-note {
  margin: 0;
  color: #231815;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: right;
}

.training-voice__comment {
  grid-area: comment;
  position: relative;
  width: fit-content;
  margin: 32px 0 0;
  padding: 0 32px;
  color: #16833a;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
}
.training-voice__comment::before, .training-voice__comment::after {
  position: absolute;
  color: #2f9b4b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 74px;
  line-height: 1;
}
.training-voice__comment::before {
  top: -14px;
  left: 0;
  content: "“";
}
.training-voice__comment::after {
  right: 0;
  bottom: -54px;
  content: "”";
}

/* よくある質問 */
.training-faq {
  position: relative;
  padding: 46px 0 159px;
  background: #fff;
  overflow: hidden;
}
.training-faq .training-inner {
  position: relative;
  z-index: 1;
}

.training-faq__list {
  margin-top: 90px;
}

.training-faq__item {
  border-bottom: 1px solid #3e3a39;
}

.training-faq__question {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0 22px;
  padding: 48px 60px 48px 0;
  color: #231815;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  list-style: none;
  cursor: pointer;
  /* ＋ / − アイコン: よくある質問（.faq-item__question）と同じ組み方。18px 角の箱に背景で棒を描く */
}
.training-faq__question::-webkit-details-marker {
  display: none;
}
.training-faq__question::before, .training-faq__question::after {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  content: "";
  transition: transform 0.2s ease;
}
.training-faq__question::before {
  background: linear-gradient(#888, #888) center/18px 2px no-repeat;
}
.training-faq__question::after {
  background: linear-gradient(#888, #888) center/2px 18px no-repeat;
}

.training-faq__item[open] .training-faq__question::after {
  transform: scaleY(0);
}

.training-faq__mark {
  flex: none;
  color: #2f9b4b;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.36;
}

.training-faq__answer {
  padding: 0 0 60px;
}

.training-faq__answer-lead {
  display: flex;
  align-items: flex-start;
  gap: 0 22px;
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.training-faq__block {
  margin-top: 46px;
  padding-left: 50px;
}

.training-faq__subtitle {
  position: relative;
  margin: 0 0 20px;
  padding-left: 30px;
  color: #2f9b4b;
  font-size: 24px;
  line-height: 1.33;
  letter-spacing: 0.05em;
}
.training-faq__subtitle::before {
  position: absolute;
  top: 0.42em;
  left: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #2f9b4b;
  content: "";
}

.training-faq__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0.03em;
}

.training-faq__figure {
  margin: 39px 0 0;
}
.training-faq__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.training-faq__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px 38px;
  margin: 40px 0 0;
  padding: 46px 30px;
  background: #f0f7f2;
  list-style: none;
}

.training-faq__tag {
  position: relative;
  padding-left: 20px;
  color: #16833a;
  font-size: 20px;
  line-height: 1.4;
}
.training-faq__tag::before {
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f9b4b;
  content: "";
}

.culture-hero-image {
  display: block;
  height: 315px;
  overflow: hidden;
}

.culture-inner {
  width: 1000px;
  margin: 0 auto;
}

.culture-intro {
  position: relative;
  overflow: hidden;
  padding: 76px 0 96px;
  background: #fff;
}

.culture-intro .culture-inner {
  position: relative;
  z-index: 1;
}

.culture-inner__title {
  margin: 0 0 34px;
  color: #16833a;
  font-size: 40px;
  line-height: 1.45;
}

.culture-inner__text {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.08em;
  margin: 0;
}
.culture-inner__text:last-child {
  margin-bottom: 0;
}
.culture-inner__text strong {
  font-size: 20px;
  font-weight: normal;
}

.culture-pill-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  width: 912px;
  margin: 60px 0;
  padding: 0;
}
.culture-pill-list__item {
  display: grid;
  place-items: center;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: #2f9b4b;
  color: #fff;
  text-align: center;
}
.culture-pill-list__title {
  margin: 0;
  font-size: 30px;
  line-height: 1.35;
  white-space: nowrap;
  color: #fff;
}
.culture-pill-list__text {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.6;
}

.culture-story {
  position: relative;
  padding: 88px 0 85px;
  background: #edf7f2;
}
.culture-story::before, .culture-story::after {
  position: absolute;
  content: "";
}
.culture-story::before {
  left: -306px;
  top: 630px;
  width: 580px;
  height: 680px;
  background: url("../img/culture/bg-main-side-l.svg") no-repeat;
  background-size: 580px 680px;
}
.culture-story::after {
  right: -311px;
  bottom: 200px;
  width: 620px;
  height: 812px;
  background: url("../img/culture/bg-main-side-r.svg") no-repeat;
  background-size: 620px 812px;
}

.culture-story .culture-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 72px;
}

.culture-quote {
  position: relative;
  max-width: 720px;
  width: 100%;
  padding: 42px 54px 46px;
  border-radius: 14px;
  background: #fff;
}
.culture-quote::before, .culture-quote::after {
  position: absolute;
  color: #2f9b4b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 130px;
  line-height: 1;
}
.culture-quote::before {
  left: -26px;
  top: -6px;
  content: "“";
}
.culture-quote::after {
  right: -25px;
  bottom: -70px;
  content: "”";
}

.culture-quote--left {
  justify-self: start;
}

.culture-quote--right {
  justify-self: end;
}

.culture-quote__decoration {
  display: none;
}

.bg-main-side-r {
  position: relative;
}

.bg-main-side-r::after {
  background: url("../img/culture/bg-main-side-r.svg") no-repeat;
  background-size: 580px 680px;
  position: absolute;
  right: -76px;
  top: 520px;
  content: "";
}

.culture-quote__title {
  margin: 0 0 22px;
  color: #16833a;
  font-size: 26px;
  line-height: 1.55;
}

.culture-quote__text {
  margin-block: 0;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
}

.culture-link {
  margin-top: 28px;
  color: #2f9b4b;
}

.culture-gallery {
  /* (item 300px + gap 34px) × スライス7枚 */
  --culture-gallery-loop-width: 2338px;
  overflow: hidden;
  padding: 0 0 162px;
  background: #edf7f2;
}
.culture-gallery__track {
  display: flex;
  gap: 34px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  /* 速度は従来と同じ約42px/s（2338px ÷ 56s） */
  animation: culture-gallery-scroll 56s linear infinite;
  position: relative;
  z-index: 100;
}
.culture-gallery__item {
  flex: 0 0 300px;
  height: 210px;
}
.culture-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes culture-gallery-scroll {
  to {
    transform: translateX(calc(var(--culture-gallery-loop-width) * -1));
  }
}
.working-environment-hero-image {
  display: block;
  height: 315px;
  overflow: hidden;
}

.working-environment-inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.working-environment-intro {
  position: relative;
  overflow: hidden;
  padding: 76px 0 90px;
  background: #fff;
}

.working-environment-intro .working-environment-inner {
  position: relative;
  z-index: 1;
}

.working-environment-inner__title {
  margin: 0 0 34px;
  color: #16833a;
  font-size: 48px;
  line-height: 1.22;
}

.working-environment-inner__title-emphasis {
  font-size: 90px;
}

.working-environment-inner__text {
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 2.05;
  letter-spacing: 0.08em;
}
.working-environment-inner__text:last-child {
  margin-bottom: 0;
}

.working-environment-menu {
  position: relative;
  padding: 38px 0 108px;
  background: #fff;
}

.working-environment-menu .working-environment-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 72px;
}

.working-environment-card {
  display: flex;
  width: 100%;
  gap: 64px;
  align-items: flex-start;
}

.working-environment-card--reverse {
  flex-direction: row-reverse;
}

.working-environment-card__body {
  flex: 1 1 calc(100% - 484px);
  margin-top: 18px;
  min-width: 0;
}

.working-environment-card__title {
  margin: 0 0 24px;
  color: #16833a;
  font-size: 30px;
  line-height: 1.35;
}

.working-environment-card__text {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: 0.08em;
}

.working-environment-card__image {
  display: block;
  min-width: 330px;
  width: 35vw;
  height: auto;
  aspect-ratio: 420/260;
}

/* 画像もリンクにする。サイズは上の __image が持つので中の img は敷き詰めるだけ */
.working-environment-card__image-link img,
.jobs-card__image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.people-card__image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.jobs-inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.jobs-intro {
  position: relative;
  overflow: hidden;
  padding: 76px 0 90px;
  background: #fff;
}

.jobs-intro .jobs-inner {
  position: relative;
  z-index: 1;
}

.jobs-intro__title {
  /* 「役割」90px の行ボックスに余白が含まれるため margin は小さめ（カンプ実測: 見出し→本文 124px） */
  margin: 0 0 36px;
  color: #16833a;
  font-size: 48px;
  line-height: 1.22;
  letter-spacing: 0;
}

.jobs-intro__title-emphasis {
  font-size: 90px;
}

.jobs-intro__text {
  margin: 0;
  font-size: 18px;
  line-height: 2.05;
  letter-spacing: 0.08em;
}

.jobs-menu {
  position: relative;
  padding: 38px 0 108px;
  background: #fff;
}

.jobs-menu .jobs-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 40px;
}

.jobs-card {
  display: flex;
  width: 100%;
  min-height: 380px;
  align-items: stretch;
}

.jobs-card--reverse {
  flex-direction: row-reverse;
}

.jobs-card__body {
  display: flex;
  flex: 0 0 43%;
  flex-direction: column;
  justify-content: center;
  padding: 0 60px;
  background: #f0f7f2;
}

.jobs-card__title {
  margin: 0 0 24px;
  color: #16833a;
  font-size: 30px;
  line-height: 1.35;
  letter-spacing: 0;
}

.jobs-card__role {
  margin: 0 0 26px;
  color: #16833a;
  font-size: 18px;
  letter-spacing: 0;
}

.jobs-card__image {
  display: block;
  flex: 0 0 57%;
  width: 57%;
  height: auto;
  align-self: stretch;
  object-fit: cover;
}

.dual-career-hero-image {
  display: block;
  height: 315px;
  overflow: hidden;
}

.dual-career-inner {
  width: 1000px;
  margin: 0 auto;
}

.dual-career-intro {
  position: relative;
  padding: 74px 0 86px;
  background: #fff;
}

.dual-career-intro__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 194px;
  gap: 0 80px;
  align-items: start;
}

.dual-career-inner__title {
  margin: 0 0 24px;
  color: #16833a;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.5;
}

.dual-career-inner__text {
  margin: 0;
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: 0.08em;
}

.dual-career-stat {
  display: grid;
  justify-items: center;
  width: 194px;
  height: 194px;
  align-content: center;
  padding: 12px;
  background: #f0f7f2;
  color: #16833a;
  text-align: center;
}

.dual-career-stat__text {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.dual-career-stat__number {
  margin-top: 6px;
  font-size: 64px;
  line-height: 0.9;
  letter-spacing: 0;
}

.dual-career-stat__unit {
  justify-self: end;
  margin: -16px 18px 0 0;
  font-style: normal;
  font-size: 19px;
  line-height: 1;
}

.dual-career-question {
  grid-column: 1/-1;
  max-width: 700px;
  margin-top: 66px;
  padding-left: 28px;
  border-left: 3px solid rgba(22, 131, 58, 0.72);
}

.dual-career-question__title {
  margin: 0 0 18px;
  color: #16833a;
  font-size: 22px;
  line-height: 1.55;
}

.dual-career-question__text {
  margin: 0;
  font-size: 15px;
  line-height: 2.05;
  letter-spacing: 0.08em;
}

.dual-career-question__list {
  display: grid;
  gap: 6px;
  margin: 22px 0;
  padding: 0;
  color: #16833a;
  font-size: 15px;
  line-height: 1.75;
  list-style: none;
}

.dual-career-question__item {
  position: relative;
  padding-left: 22px;
  font-size: 20px;
}
.dual-career-question__item::before {
  position: absolute;
  top: 0.55em;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

/* ---- ストーリー（仕事も、好きも、本気で向き合う人たち） ---- */
/* PC値はデザイン（1200px幅）の実測に合わせている */
.dual-career-stories {
  position: relative;
  padding: 85px 0 160px;
  background: #f0f7f2;
  overflow: hidden;
  /* 見出し右上の筆 */
  /* 左側の筆 */
}
.dual-career-stories::before {
  position: absolute;
  top: -164px;
  left: 50%;
  z-index: 0;
  width: 440px;
  height: 532px;
  margin-left: 72px;
  background: url("../img/common/bg-intro-side.svg") no-repeat;
  background-size: contain;
  content: "";
}
.dual-career-stories::after {
  position: absolute;
  top: 2480px;
  left: -120px;
  z-index: 0;
  width: 520px;
  height: 628px;
  background: url("../img/common/bg-intro-side.svg") no-repeat;
  background-size: contain;
  content: "";
}

.dual-career-stories__title {
  position: relative;
  z-index: 1;
  margin: 0 0 106px;
  color: #16833a;
  font-size: 50px;
  line-height: 1.4;
}

.dual-career-story {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 468px minmax(0, 1fr);
  width: min(1200px, 100%);
  margin: 0 auto 126px;
}

.dual-career-story--reverse {
  grid-template-columns: minmax(0, 1fr) 468px;
}

/* 図版レイヤー。本文カードと同じ行に全幅で重ね、カード下端で写真をクリップする */
.dual-career-story__figure {
  position: relative;
  z-index: 2;
  grid-column: 1/-1;
  grid-row: 1;
  overflow: hidden;
  pointer-events: none;
}

.dual-career-story__picture {
  position: absolute;
  display: block;
}

.dual-career-story__image {
  display: block;
  width: 100%;
  height: auto;
}

.dual-career-story__members {
  position: absolute;
  bottom: 45px;
  left: 99px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 466px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dual-career-story--reverse .dual-career-story__members {
  right: 113px;
  left: auto;
}

.dual-career-member {
  padding: 15px 15px 17px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.44);
  color: #fff;
}

.dual-career-member__dept {
  margin: 0;
  font-size: 14px;
  line-height: 1.56;
  letter-spacing: 0;
}

.dual-career-member__name {
  margin: 8px 0 8px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0;
}

.dual-career-member__year {
  font-size: 14px;
}

.dual-career-member__school {
  margin: 0;
  font-size: 14px;
  line-height: 1.56;
  letter-spacing: 0;
}

/* 本文カード。外側（画面端）へはみ出させる */
.dual-career-story__body {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  padding: 60px 88px 69px 144px;
  background: #fff;
}
.dual-career-story__body::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 100vw;
  background: #fff;
  content: "";
}

.dual-career-story--reverse .dual-career-story__body {
  grid-column: 1;
  padding: 60px 133px 69px 99px;
}
.dual-career-story--reverse .dual-career-story__body::after {
  right: 100%;
  left: auto;
}

.dual-career-story__title {
  margin: 0 0 27px;
  color: #16833a;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: 0;
}

.dual-career-story__text {
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0;
  text-align: justify;
  line-break: strict;
}
.dual-career-story__text:last-child {
  margin-bottom: 0;
}

.dual-career-story__qa {
  position: relative;
  z-index: 1;
  grid-column: 1/-1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 70px;
  width: 1000px;
  margin: 44px auto 0;
  padding: 38px 48px 41px;
  background: #fff;
}
.dual-career-story__qa::before {
  position: absolute;
  bottom: 100%;
  left: 25%;
  border-right: 14px solid transparent;
  border-bottom: 26px solid #fff;
  border-left: 14px solid transparent;
  content: "";
  transform: translateX(-50%);
}

.dual-career-story--reverse .dual-career-story__qa::before {
  left: 80%;
}

.dual-career-qa__title {
  position: relative;
  margin: 0 0 15px;
  padding-left: 34px;
  color: #16833a;
  font-size: 24px;
  line-height: 1.34;
}
.dual-career-qa__title::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "Q.";
}

.dual-career-qa__answer {
  margin: 0 0 25px;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0;
  text-align: justify;
  line-break: strict;
}
.dual-career-qa__answer:last-child {
  margin-bottom: 0;
}

.dual-career-qa__name {
  margin-right: 22px;
  color: #16833a;
  letter-spacing: 0.1em;
}

.dual-career-link {
  display: flex;
  justify-content: center;
  margin-top: 90px;
}

.dual-career-link__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 374px;
  min-height: 65px;
  border: 1px solid #2f9b4b;
  color: #2f9b4b;
  font-size: 20px;
}

.dual-career-link__arrow {
  position: absolute;
  right: 30px;
}

/* 写真・吹き出しの座標はデザイン実測値（PCのみ適用） */
@media (min-width: 768px) {
  .dual-career-story:nth-of-type(1) .dual-career-story__picture {
    top: 34px;
    left: 100px;
    width: 512px;
  }
  .dual-career-story:nth-of-type(2) .dual-career-story__picture {
    bottom: 0;
    left: 585px;
    width: 513px;
  }
  .dual-career-story:nth-of-type(3) .dual-career-story__picture {
    top: 45px;
    left: 98px;
    width: 512px;
  }
  .dual-career-story:nth-of-type(4) .dual-career-story__picture {
    bottom: 0;
    left: 588px;
    width: 513px;
  }
}
.people-top-hero-image {
  display: block;
  height: 315px;
  overflow: hidden;
}

.people-top-inner {
  width: 1000px;
  margin: 0 auto;
}

.people-top-intro {
  position: relative;
  overflow: hidden;
  padding: 86px 0 72px;
}

.people-top-intro .people-top-inner {
  position: relative;
  z-index: 1;
}

.people-top-inner__title {
  margin: 0 0 28px;
  color: #16833a;
  line-height: 1.35;
}

.people-top-inner__number {
  font-size: 70px;
}

.people-top-inner__to,
.people-top-inner__walk {
  font-size: 48px;
}

.people-top-inner__road {
  font-size: 90px;
  line-height: 0.9;
}

.people-top-inner__text {
  margin: 0;
  font-size: 18px;
  line-height: 2.05;
  letter-spacing: 0.075em;
}

.people-interview-section {
  position: relative;
  overflow: hidden;
  padding: 36px 0 280px;
}

.people-card-list {
  display: grid;
  gap: 120px;
}

.people-card {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 104px;
  align-items: center;
}

/* カンプ実測（人を知るTOP_260519_スライス.ai / PC1200px基準）:
   画像右のカードは 写真 x=560〜1040、本文 x=102〜（写真の手前まで）。
   1fr にすると本文列が 416px しか無く「頼り合い高め合うチームワーク。」が
   1行に収まらないため、カンプどおり 460px / 480px の2列で固定する。 */
.people-card--image-right {
  grid-template-columns: 460px 480px;
  gap: 0;
}
.people-card--image-right .people-card__image {
  order: 2;
}
.people-card--image-right .people-card__body {
  order: 1;
}

.people-card__image {
  position: relative;
}
.people-card__image::after {
  position: absolute;
  right: -80px;
  bottom: -103px;
  z-index: 100;
  width: 285px;
  height: 100%;
  aspect-ratio: 285/335;
  background: url("../img/people/bg-main-people.svg") center/contain no-repeat;
  content: "";
}
.people-card__image img {
  position: relative;
  z-index: 1;
  display: block;
  width: 480px;
  height: 400px;
  object-fit: cover;
}

.people-card__body {
  position: relative;
  z-index: 2;
  /* カンプ実測: 文字サイズ 30.00pt / 実効字送り 30.00pt → トラッキング 0。
     省略すると body の 0.8px を継承して 1行あたり最大12px 広がり折り返す。 */
}
.people-card__body .people-card__title {
  margin: 0 0 34px;
  color: #278a3d;
  font-size: 30px;
  line-height: 1.45;
  letter-spacing: 0;
}
.people-card__body p {
  margin: 0 0 18px;
  color: #278a3d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  /* 仕事を知る／描く未来の個別ページ（ページ側で字間 0）と同じ見え方に。people だけ body の 0.04em を継承していた */
  letter-spacing: 0;
}
.people-card__body > span.people-card__text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 230px;
  margin: 0 0 12px;
  border: 1px solid #278a3d;
  border-radius: 6px;
  color: #278a3d;
  font-size: 14px;
  line-height: 1.4;
  padding: 5px;
  box-sizing: border-box;
}
.people-card__body a {
  display: grid;
  place-items: center;
  width: 76px;
  height: 36px;
  margin-top: 34px;
  border: 1px solid #16833a;
  border-radius: 18px;
  color: #16833a;
  font-size: 32px;
  line-height: 1;
}

.people-interview-page {
  background: #fff;
}

.people-interview-page .breadcrumb {
  color: #fff;
}

.people-interview-hero {
  position: relative;
  padding-top: 80px;
}
.people-interview-hero::after {
  position: absolute;
  right: -320px;
  top: 100px;
  z-index: 10;
  width: 658px;
  height: auto;
  aspect-ratio: 658/775;
  background: url("../img/people/bg-main-people.svg") center/contain no-repeat;
  content: "";
}

.people-interview-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 510px;
  align-items: center;
  width: 1000px;
  min-height: 560px;
  margin: 0 auto;
}

.people-interview-hero__copy {
  padding-top: 44px;
}

.people-interview-hero__title {
  margin: 0 0 46px;
  color: #16833a;
  font-size: 42px;
  line-height: 1.45;
  letter-spacing: 0.07em;
}

.people-interview-hero__text {
  margin: 0 0 8px;
  color: #16833a;
  font-size: 14px;
  line-height: 1.75;
}

.people-interview-hero__image {
  align-self: end;
}
.people-interview-hero__image img {
  display: block;
  width: 510px;
  height: 430px;
  object-fit: cover;
  object-position: center top;
}

.people-interview-inner {
  width: 1000px;
  margin: 0 auto;
}

.people-interview-lead {
  position: relative;
  overflow: hidden;
  padding: 86px 0 100px;
  background: #f0f7f2;
}

.people-interview-inner__text {
  position: relative;
  z-index: 1;
  width: 720px;
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 2.35;
  letter-spacing: 0.06em;
}

.people-interview-qa {
  padding: 76px 0 72px;
  background: #fff;
}

.people-interview-qa--first {
  padding-top: 0;
}

.people-interview-qa__grid {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 86px;
  align-items: center;
}

.people-interview-qa--reverse .people-interview-qa__grid {
  grid-template-columns: 480px 1fr;
  gap: 88px;
}

.people-interview-qa__body {
  display: grid;
  gap: 58px;
}

.people-interview-question__title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
  color: #16833a;
  font-size: 27px;
  line-height: 1.45;
  letter-spacing: 0.05em;
}
.people-interview-question__title span {
  font-size: 34px;
  line-height: 1;
}

.people-interview-question__text {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 2.25;
  letter-spacing: 0.055em;
}

.people-interview-qa__image {
  margin: 0;
}
.people-interview-qa__image img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.people-interview-qa--reverse .people-interview-qa__image {
  height: 400px;
}

.people-interview-schedule {
  padding: 86px 0 82px;
  background: #eff8f3;
}

.people-interview-schedule__grid {
  display: grid;
  grid-template-columns: 370px 1fr;
  gap: 132px;
}

.people-interview-schedule__intro > p:first-child {
  margin: 0 0 4px;
  color: #16833a;
  font-size: 20px;
  line-height: 1.4;
}

.people-interview-schedule__title {
  margin: 0 0 36px;
  color: #16833a;
  font-size: 40px;
  line-height: 1.35;
}

.people-interview-schedule__intro > p:nth-of-type(2) {
  width: 310px;
  margin: 0 0 44px;
  font-size: 16px;
  line-height: 2.1;
}

.people-interview-schedule__image {
  display: block;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

.people-interview-timeline {
  display: grid;
  gap: 30px;
  margin: 0;
  padding: 10px 0 0;
  color: #16833a;
  list-style: none;
}

.people-interview-timeline__item {
  position: relative;
  padding-left: 36px;
}
.people-interview-timeline__item::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 14px;
  height: 14px;
  border: 3px solid #2f9b4b;
  border-radius: 50%;
  background: #eff8f3;
  content: "";
}
.people-interview-timeline__item::after {
  position: absolute;
  top: 36px;
  left: 8px;
  width: 2px;
  height: calc(100% - 6px);
  background: #278a3d;
  content: "";
}

.people-interview-timeline__item:last-child::after {
  content: none;
}

.people-interview-timeline time {
  display: block;
  margin-bottom: 4px;
  font-size: 24px;
  line-height: 1.3;
}

.people-interview-timeline__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
}

.people-interview-message {
  position: relative;
  overflow: hidden;
  padding: 90px 0 116px;
  background: #fff;
}
.people-interview-message::after {
  position: absolute;
  right: -300px;
  top: -306px;
  width: 619px;
  height: 748px;
  background: url("../img/people/bg-side-people.svg") center/contain no-repeat;
  content: "";
  transform: rotate(-17deg);
}

.people-interview-message .people-interview-inner {
  position: relative;
  z-index: 1;
}

.people-interview-message__note {
  width: 720px;
  margin: 34px 0 70px;
  font-size: 12px;
  line-height: 1.9;
}

.people-interview-back {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  min-height: 58px;
  margin: 0 auto;
  border: 1px solid #16833a;
  color: #16833a;
  font-size: 20px;
}

.people-interview-back__text {
  position: absolute;
  right: 16px;
  font-size: 30px;
}

.people-interview-page--engineer .people-interview-hero__inner {
  min-height: 620px;
}

.people-interview-page--engineer .people-interview-hero__copy {
  padding-top: 8px;
}

.people-interview-page--engineer .people-interview-hero__title {
  margin-bottom: 44px;
  font-size: 38px;
}

.people-interview-page--engineer .people-interview-hero__image {
  width: 410px;
  height: 570px;
  object-position: center bottom;
}

.people-interview-page--engineer .people-interview-lead {
  padding: 78px 0 96px;
}

.people-interview-page--engineer .people-interview-qa {
  padding: 82px 0 78px;
}

.people-interview-page--engineer .people-interview-qa--first {
  padding-top: 0;
}

.people-interview-page--engineer .people-interview-qa__grid {
  grid-template-columns: 1fr 470px;
  gap: 86px;
}

.people-interview-page--engineer .people-interview-qa--reverse .people-interview-qa__grid {
  grid-template-columns: 470px 1fr;
  gap: 90px;
}

.people-interview-page--engineer .people-interview-question__title {
  font-size: 23px;
}

.people-interview-page--engineer .people-interview-question__text {
  font-size: 31px;
}

.people-interview-page--engineer .people-interview-question__text {
  font-size: 14px;
}

.people-interview-page--engineer .people-interview-qa__image {
  height: 640px;
}

.people-interview-page--engineer .people-interview-qa--reverse .people-interview-qa__image {
  height: 650px;
}

.people-interview-page--interview03 .people-interview-hero {
  padding-top: 80px;
}

.people-interview-page--interview03 .people-interview-hero::after {
  right: -52px;
  bottom: -36px;
  width: 390px;
  height: 500px;
}

.people-interview-page--interview03 .people-interview-hero__inner {
  grid-template-columns: 570px 410px;
  gap: 20px;
  align-items: start;
  min-height: 560px;
}

.people-interview-page--interview03 .people-interview-hero__copy {
  padding-top: 118px;
}

.people-interview-page--interview03 .people-interview-hero__title {
  margin-bottom: 32px;
  font-size: 36px;
  line-height: 1.45;
}

.people-interview-page--interview03 .people-interview-hero__image {
  align-self: start;
}

.people-interview-page--interview03 .people-interview-hero__image {
  width: 410px;
  height: 570px;
  object-position: center bottom;
}

.people-interview-page--interview03 .people-interview-lead {
  padding: 72px 0 84px;
}

.people-interview-page--interview03 .people-interview-qa {
  padding: 72px 0 70px;
}

.people-interview-page--interview03 .people-interview-qa--first {
  padding-top: 0;
}

.people-interview-page--interview03 .people-interview-qa__grid {
  grid-template-columns: 500px 470px;
  gap: 130px;
  align-items: start;
}

.people-interview-page--interview03 .people-interview-qa--reverse .people-interview-qa__grid {
  grid-template-columns: 470px 1fr;
  gap: 82px;
  align-items: start;
}

.people-interview-page--consultant .people-interview-hero__inner {
  min-height: 560px;
}

.people-interview-page--consultant .people-interview-hero__title {
  font-size: 39px;
}

.people-interview-page--consultant .people-interview-hero__image {
  width: 482px;
  height: 430px;
  object-position: center top;
}

.people-interview-page--consultant .people-interview-question__text strong {
  color: #16833a;
}

.people-interview-page--interview04 .people-interview-hero::after {
  right: -52px;
  bottom: -34px;
  width: 390px;
  height: 500px;
}

.people-interview-page--interview04 .people-interview-hero__inner {
  grid-template-columns: 560px 482px;
  gap: 18px;
  align-items: start;
  min-height: 560px;
}

.people-interview-page--interview04 .people-interview-hero__copy {
  padding-top: 104px;
}

.people-interview-page--interview04 .people-interview-hero__title {
  margin-bottom: 32px;
  font-size: 36px;
  line-height: 1.5;
}

.people-interview-page--interview04 .people-interview-hero__image {
  align-self: start;
  padding-top: 78px;
}

.people-interview-page--interview04 .people-interview-hero__image {
  width: 482px;
  height: 402px;
  object-position: center top;
}

.people-interview-page--interview04 .people-interview-lead {
  padding: 72px 0 84px;
}

.people-interview-page--interview04 .people-interview-qa {
  padding: 74px 0 74px;
}

.people-interview-page--interview04 .people-interview-qa--first {
  padding-top: 0;
}

.people-interview-page--interview04 .people-interview-qa__grid {
  grid-template-columns: 500px 470px;
  gap: 130px;
  align-items: start;
}

.people-interview-page--interview04 .people-interview-qa--reverse .people-interview-qa__grid {
  grid-template-columns: 470px 500px;
  gap: 130px;
  align-items: start;
}

.people-interview-page--interview04 .people-interview-qa__image,
.people-interview-page--interview04 .people-interview-qa--reverse .people-interview-qa__image {
  height: 640px;
}

.people-interview-page--interview04 .people-interview-support {
  padding: 88px 0 92px;
}

.people-interview-page--interview04 .people-interview-support__grid {
  grid-template-columns: 390px 510px;
  gap: 100px;
}

.people-interview-page--interview04 .people-interview-support__title {
  font-size: 34px;
}

.people-interview-page--interview04 .people-interview-support__image {
  width: 92px;
  height: 92px;
}

.people-interview-personal {
  position: relative;
  overflow: hidden;
  padding: 62px 0 96px;
  background: #fff;
}
.people-interview-personal::before {
  position: absolute;
  left: -104px;
  top: -30px;
  width: 260px;
  height: 460px;
  background: rgba(47, 155, 75, 0.78);
  content: "";
  transform: rotate(20deg);
}
.people-interview-personal::after {
  position: absolute;
  right: -46px;
  bottom: -112px;
  width: 230px;
  height: 320px;
  background: rgba(47, 155, 75, 0.82);
  content: "";
  transform: rotate(-16deg);
}

.people-interview-personal__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 126px;
  align-items: start;
}

.people-interview-personal__item h2 {
  display: block;
  margin-bottom: 22px;
  text-align: center;
}
.people-interview-personal__item h2 span {
  margin-right: 12px;
}
.people-interview-personal__item p {
  margin-bottom: 30px;
}
.people-interview-personal__item img {
  display: block;
  width: 300px;
  height: 190px;
  margin: 0 auto;
  object-fit: cover;
}

.people-interview-dots {
  display: flex;
  gap: 7px;
  margin-bottom: 18px;
}
.people-interview-dots span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2f9b4b;
}

.people-interview-support {
  padding: 86px 0 90px;
  background: #eff8f3;
}

.people-interview-support__grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 120px;
  align-items: start;
}

.people-interview-support__title {
  margin: 0 0 28px;
  color: #16833a;
  font-size: 34px;
  line-height: 1.45;
  letter-spacing: 0.06em;
}

.people-interview-support__text {
  margin: 0 0 42px;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.055em;
}

.people-interview-support__image {
  display: block;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

.people-interview-support__list {
  display: grid;
  gap: 32px;
  padding-top: 10px;
}

.people-interview-support__list article {
  position: relative;
  padding-left: 28px;
}
.people-interview-support__list article::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2f9b4b;
  content: "";
}

.people-interview-support__title {
  margin: 0 0 10px;
  color: #16833a;
  font-size: 22px;
  line-height: 1.45;
  letter-spacing: 0.06em;
}

.people-interview-support__text {
  margin: 0;
  font-size: 15px;
  line-height: 2.05;
  letter-spacing: 0.055em;
}

.entry-area__lead {
  margin: 0 0 18px;
  color: #fff;
  font-size: 31px;
  line-height: 1.55;
}

.club-hero-image {
  display: block;
  height: 315px;
  overflow: hidden;
}

.hero-image__image,
.benefits-hero-image__image,
.future-hero-image__image,
.culture-hero-image__image,
.working-environment-hero-image__image,
.dual-career-hero-image__image,
.training-hero-image__image,
.people-top-hero-image__image,
.requirements-hero-image__image,
.club-hero-image__image,
.future-detail-hero__image,
.future-detail-message__image,
.future-detail-job__image,
.jobs-detail-hero__image,
.people-detail-hero__image,
.people-detail-qa__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.club-inner {
  width: 1000px;
  margin: 0 auto;
}

.club-intro {
  position: relative;
  overflow: hidden;
  padding: 68px 0 79px;
  background: #fff;
}

.club-intro .club-inner {
  position: relative;
  z-index: 1;
}

.club-inner__title {
  margin: 0 0 22px;
  color: #16833a;
  font-size: 41px;
  font-weight: 700;
  line-height: 1.39;
}

.club-inner__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0.02em;
}

/* ---- 部活紹介（PC値はデザイン1200px幅の実測に合わせている） ---- */
.club-team-section {
  background: #fff;
}

.club-team {
  display: grid;
  grid-template-columns: 505px 420px;
  gap: 0 25px;
  width: 1000px;
  margin: 0 auto 40px;
  padding: 80px 0 68px 50px;
  background: #f0f7f2;
}

.club-team--last {
  margin-bottom: 0;
}

.club-team__body {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.club-team__logo {
  display: block;
  width: 160px;
  height: auto;
  margin-bottom: 12px;
}

.club-team__title {
  margin: 0 0 36px;
  color: #16833a;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.club-team__title-sub {
  font-size: 20px;
}

.club-team__links {
  display: flex;
  align-items: center;
  gap: 46px;
  margin-bottom: 31px;
}

.club-team__link-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.club-team__link-label {
  color: #2f9b4b;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.club-team__link img {
  display: block;
  width: auto;
  height: 27px;
}

.club-team__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0.03em;
}

.club-team__figure {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.club-team__figure .club-team__image {
  display: block;
  width: 420px;
  height: 640px;
  object-fit: cover;
}

/* ギャラリーはパネル（1000px）から左右100pxずつはみ出す無限スライダー */
.club-team__gallery {
  grid-column: 1/-1;
  grid-row: 2;
  /* ブラウザ幅いっぱいに流す。-25px は .club-team の padding-left:50px（右は0）による
     中心ズレの補正。overflow:hidden はトラック（約4080px）のはみ出しを止めるため必須 */
  width: 100vw;
  margin: 40px 0 0 calc(50% - 50vw - 25px);
  overflow: hidden;
}

.club-team__gallery-track {
  display: flex;
  gap: 40px;
  width: max-content;
}

/* JSで同じ並びを複製してからループを開始する */
.club-team__gallery.is-club-gallery-loop .club-team__gallery-track {
  animation: club-gallery-loop var(--club-gallery-duration, 30s) linear infinite;
  will-change: transform;
}

.club-team__gallery.is-club-gallery-loop:hover .club-team__gallery-track {
  animation-play-state: paused;
}

@keyframes club-gallery-loop {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(var(--club-gallery-distance, 0px) * -1), 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .club-team__gallery.is-club-gallery-loop .club-team__gallery-track {
    animation: none;
  }
}
.club-team__gallery .club-team__image {
  display: block;
  flex: none;
  width: 360px;
  height: 260px;
  object-fit: cover;
}

/* club.js が並びを複製すると nth-child の数え直しでパターンがずれ、ループの
   継ぎ目で幅と並びが変わる。複製されるクラスで指定して並びを固定する。
   .club-team__gallery .club-team__image（0,2,0）に負けないよう詳細度を揃える */
.club-team__gallery .club-team__image--wide {
  width: 400px;
}

/* ---- チーム戦績（アコーディオン） ---- */
.club-team__record {
  grid-column: 1/-1;
  grid-row: 3;
  width: 900px;
  margin-top: 88px;
  border-bottom: 1px solid #3e3a39;
}

.club-team__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px 46px 0;
  color: #2f9b4b;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.club-team__trigger::-webkit-details-marker {
  display: none;
}

.club-team__icon {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.club-team__icon::before, .club-team__icon::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: #888;
  content: "";
  transform: translateY(-50%);
}
.club-team__icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.club-team__record[open] .club-team__trigger {
  padding-bottom: 38px;
}

.club-team__record[open] .club-team__icon::after {
  display: none;
}

.club-team__record-body {
  padding-bottom: 51px;
  font-size: 18px;
  line-height: 1.78;
}

.club-team__record-lead {
  margin: 0 0 32px;
}

.club-team__record-group {
  margin: 0 0 32px;
}
.club-team__record-group:last-child {
  margin-bottom: 0;
}

.club-team__record-heading {
  margin: 0 0 8px;
  color: #211815;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.78;
  letter-spacing: 0.03em;
}

.club-team__record-list {
  display: grid;
  grid-template-columns: 85px 1fr;
  margin: 0;
}
.club-team__record-list dt,
.club-team__record-list dd {
  margin: 0;
}

/* ---- サークル紹介 ---- */
.club-circle-section {
  padding: 160px 0 230px;
  background: #fff;
}

.club-circle-list {
  display: grid;
  grid-template-columns: repeat(2, 460px);
  justify-content: space-between;
  gap: 82px 80px;
}

.club-circle__image {
  display: block;
  width: 460px;
  height: 260px;
  object-fit: cover;
}

.club-circle__title {
  margin: 33px 0 22px;
  color: #2f9b4b;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.4;
}

.club-circle__links {
  display: flex;
  align-items: center;
  gap: 46px;
  margin-bottom: 30px;
}

.club-circle__link-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.club-circle__link-label {
  color: #2f9b4b;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}

.club-circle__link img {
  display: block;
  width: auto;
  height: 27px;
}

.club-circle__text {
  width: 470px;
  margin: 0;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0;
}

@media (max-width: 767px) {
  .about-page,
  .benefits-page,
  .club-page,
  .culture-page,
  .dual-career-page,
  .faq-page,
  .future-detail-page,
  .future-page,
  .jobs-detail-page,
  .jobs-page,
  .people-detail-page,
  .people-top-page,
  .requirements-page,
  .top-page,
  .training-page,
  .working-environment-page {
    min-width: 0;
  }
  html {
    scroll-padding-top: 60px;
  }
  /* Google Fonts の Zen Kaku Gothic New には halt/palt が無く、約物の後ろは
     font-feature-settings では詰まらない。SPのみ手動で半角分詰める */
  .u-punct {
    margin-right: -0.5em;
  }
  .site-header {
    height: 60px;
  }
  .site-header__inner {
    width: 100%;
    height: 60px;
    padding: 10px 20px 10px 34px;
  }
  .site-header__brand {
    gap: 20px;
  }
  .site-header__logo {
    width: 90px;
  }
  .site-header__brand-text {
    font-size: 17px;
  }
  .site-header__actions {
    gap: 38px;
  }
  .site-header__sns-label,
  .site-header__sns {
    display: none;
  }
  .site-header__entry {
    width: 164px;
    height: 72px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
  }
  .site-header__menu {
    gap: 13px;
    width: 49px;
  }
  .site-header__menu span {
    height: 2px;
  }
  .breadcrumb {
    display: none;
  }
  .global-nav {
    padding: 0;
  }
  .global-nav__inner {
    width: 100%;
    min-height: 100vh;
    padding: 30px 38px 68px;
  }
  .global-nav__head {
    margin-bottom: 100px;
  }
  .global-nav__brand {
    gap: 10px;
  }
  .global-nav__brand-logo {
    width: 115px;
  }
  .global-nav__brand-text {
    font-size: 20px;
    line-height: 1.25;
  }
  .global-nav__site-name {
    font-size: 28px;
  }
  .global-nav__close {
    width: 58px;
    height: 58px;
    margin-right: 32px;
  }
  .global-nav__close::before, .global-nav__close::after {
    width: 66px;
    height: 3px;
  }
  .global-nav__menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 44px;
    margin-bottom: 96px;
  }
  .global-nav__heading {
    margin-bottom: 20px;
    font-size: 29px;
  }
  .global-nav__list {
    gap: 16px;
  }
  .global-nav__item {
    font-size: 24px;
    line-height: 1.35;
  }
  /* カンプどおり1行で出す項目。下限 13px のままだと 320px 幅で右が切れるので、
     この項目だけ下限を外して縮ませる（375px 以上では他と同じ挙動） */
  .global-nav__group--people .global-nav__item {
    font-size: min(3.4666658vw, 16px);
    white-space: nowrap;
  }
  .global-nav__menu-column {
    display: grid;
    align-content: start;
  }
  .global-nav__group,
  .global-nav__group--about,
  .global-nav__group--jobs,
  .global-nav__group--environment,
  .global-nav__group--future,
  .global-nav__group--training,
  .global-nav__group--people {
    grid-column: auto;
    grid-row: auto;
    margin-top: 0;
  }
  .global-nav__group--environment {
    margin-top: 35px;
  }
  .global-nav__group--jobs {
    margin-top: 30px;
  }
  .global-nav__entry {
    grid-template-columns: 425px 1fr;
    gap: 18px 56px;
  }
  .global-nav__entry-button {
    min-height: 68px;
    padding: 0 56px 0 20px;
    font-size: 24px;
  }
  .global-nav__entry-button--fill,
  .global-nav__entry-button--wide {
    grid-column: 1;
    grid-row: auto;
  }
  .global-nav__entry-button--fill:first-child {
    order: 1;
  }
  .global-nav__entry-button--fill:nth-child(2) {
    order: 2;
  }
  .global-nav__entry-button--wide {
    order: 3;
  }
  .global-nav__entry-button:nth-child(6) {
    order: 4;
  }
  .global-nav__entry-button:nth-child(4) {
    order: 5;
  }
  .global-nav__entry-button:nth-child(5) {
    order: 6;
  }
  .global-nav__entry-button--fill:first-child,
  .global-nav__entry-button--fill:nth-child(2),
  .global-nav__entry-button:nth-child(4),
  .global-nav__entry-button:nth-child(5),
  .global-nav__entry-button:nth-child(6) {
    grid-column: 1;
    grid-row: auto;
  }
  .global-nav__entry-button--fill {
    min-height: 100px;
  }
  .global-nav__entry-button--wide {
    display: grid;
    justify-content: start;
    min-height: 154px;
    text-align: left;
  }
  .global-nav__sns {
    position: absolute;
    right: 70px;
    bottom: 140px;
    grid-template-columns: 1fr;
    grid-column: 2;
    grid-row: 3/span 4;
    justify-items: center;
    align-self: end;
    gap: 28px;
  }
  .global-nav__sns-label {
    grid-column: auto;
    font-size: 21px;
    line-height: 1.25;
    text-align: center;
  }
  .global-nav__sns-icon {
    width: 48px;
    height: 48px;
  }
  .requirements-section,
  .selection-section {
    padding: 22px 18px 0;
  }
  .requirements-section__inner {
    width: 100%;
  }
  .requirements-page .hero-image {
    height: 154px;
  }
  /* よくある質問: 他ページ（人を知る等）と同じ SP 高さ。指定が無く 315px のままだった */
  .faq-page .hero-image {
    height: 180px;
  }
  .requirements-tabs {
    margin-bottom: 72px;
    padding: 0;
  }
  .requirements-tabs__list {
    grid-template-columns: 1fr 1fr;
  }
  .requirements-tabs__link {
    height: 60px;
    padding: 8px 3px 16px;
    border-bottom: 1px solid #339c4a;
    font-size: 14px;
    line-height: 1.25;
  }
  .requirements-tabs__link::after {
    bottom: 5px;
  }
  .requirements-heading {
    margin: 0;
    padding: 0 0 16px;
    border-bottom: 1px solid #339c4a;
    font-size: 22px;
    line-height: 1.45;
  }
  .selection-section__heading {
    margin-bottom: 30px;
    font-size: 22px;
  }
  .requirements-table {
    border-top: 0;
  }
  .requirements-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 27px 0 36px 0;
  }
  .requirements-row__title {
    font-size: 18px;
    line-height: 1.4;
  }
  .requirements-row__body {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.03em;
  }
  .requirements-row__text {
    margin-bottom: 6px;
  }
  .requirements-note {
    padding-top: 10px;
  }
  .requirements-link {
    gap: 12px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.6;
  }
  .requirements-list {
    gap: 2px;
  }
  .requirements-list__item {
    padding-left: 16px;
  }
  .requirements-list__item::before {
    top: 0.72em;
    width: 8px;
    height: 8px;
  }
  .requirements-list--inline {
    margin-top: 8px;
  }
  .selection-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .selection-flow {
    margin-bottom: 80px;
    padding-left: 0;
  }
  .selection-flow__item {
    display: flex;
    min-height: fit-content;
    padding-bottom: 36px;
  }
  .selection-flow__item::before {
    top: 120px;
    left: 59px;
    min-height: 95px;
    height: 100%;
  }
  .selection-flow__item-inner {
    gap: 14px;
    align-items: flex-start;
  }
  .selection-flow__item-inner p.selection-flow__text {
    font-size: 16px;
    line-height: 1.9;
  }
  .selection-flow__badge {
    flex-basis: 120px;
    width: 120px;
    height: 120px;
    padding-top: 20px;
    align-content: start;
    font-size: 18px;
  }
  .selection-flow__badge .selection-flow__text {
    font-size: 27px;
  }
  .selection-flow__badge small {
    font-size: 13px;
  }
  .requirements-tabs--bottom .requirements-tabs__link {
    padding: 16px 8px 8px;
    color: #211815;
  }
  .requirements-tabs--bottom .requirements-tabs__link::after {
    top: 8px;
    bottom: auto;
  }
  .requirements-tabs--bottom .requirements-tabs__link.is-current {
    color: #fff;
  }
  .requirements-tabs--bottom .requirements-tabs__link.is-current::after {
    border-bottom-color: #fff;
  }
  .future-hero-image {
    height: 180px;
  }
  .future-intro {
    padding: 74px 0 92px;
  }
  .future-intro__inner {
    width: 100%;
    min-height: 0;
  }
  .future-intro__title,
  .future-intro__text {
    width: calc(100% - 56px);
    margin-right: auto;
    margin-left: auto;
  }
  .future-intro__title {
    margin-bottom: 28px;
    font-size: 34px;
    line-height: 1.55;
  }
  .future-intro__title span {
    font-size: 62px;
  }
  .future-intro__text {
    font-size: 19px;
    line-height: 2.08;
  }
  /* SPカンプ 261008：写真は全幅（750x361）、ブラシは写真上端の 118.5px 上から、
     写真の下端 → 次のブラシ 30.5px */
  .future-card-list {
    gap: 30.5px;
    margin-top: 88px;
  }
  .future-card {
    display: block;
    padding-top: 118.5px;
  }
  .future-card:nth-child(even) {
    padding-right: 0;
  }
  .future-card .future-card__link {
    position: static;
    width: 100%;
  }
  /* ブラシ 384.8x145.9（SP用の形）、左端は画面外 -34.7px */
  .future-card__label,
  .future-card:nth-child(even) .future-card__label {
    top: 0;
    left: -34.7px;
    width: 384.8px;
    height: 145.9px;
  }
  .future-card__label .future-brush__text {
    top: 42px;
    left: 62px;
    font-size: 21.4px;
    line-height: 28.8px;
  }
  .future-card__image {
    height: auto;
    max-width: 100%;
    aspect-ratio: 750/361;
  }
  .club-hero-image {
    height: 180px;
  }
  .club-inner {
    width: 100%;
  }
  .club-intro {
    padding: 42px 20px 56px;
  }
  .club-inner__title {
    margin-bottom: 26px;
    font-size: 32px;
    line-height: 1.28;
  }
  .club-inner__text {
    font-size: 16px;
    line-height: 1.78;
    letter-spacing: 0;
  }
  .club-team-section {
    padding: 0;
  }
  .club-team {
    display: block;
    width: 100%;
    margin: 0 0 45px;
    padding: 40px 20px 60px;
  }
  .club-team__logo {
    width: 120px;
    margin-bottom: 4px;
  }
  .club-team__title {
    width: 344px;
    margin-bottom: 26px;
    font-size: 22px;
  }
  .club-team__title-sub {
    font-size: 14px;
  }
  .club-team__links {
    gap: 58px;
    margin-bottom: 24px;
  }
  .club-team__link-group {
    gap: 20px;
  }
  .club-team__link img {
    height: 30px;
  }
  .club-team__text {
    width: 100%;
    font-size: 16px;
    line-height: 1.78;
    letter-spacing: 0;
  }
  .club-team__figure {
    margin-top: 32px;
  }
  .club-team__figure .club-team__image {
    width: 100%;
    height: auto;
    aspect-ratio: 335/400;
  }
  .club-team__gallery {
    width: auto;
    margin: 20px -20px 0;
  }
  .club-team__gallery-track {
    gap: 24px;
  }
  .club-team__gallery .club-team__image,
  .club-team__gallery .club-team__image--wide {
    width: 240px;
    height: 156px;
  }
  .club-team__record {
    width: 100%;
    margin-top: 45px;
  }
  .club-team__trigger {
    padding: 0 4px 32px 0;
    font-size: 20px;
  }
  .club-team__record[open] .club-team__trigger {
    padding-bottom: 21px;
  }
  .club-team__record-body {
    padding-bottom: 32px;
    font-size: 16px;
  }
  .club-team__record-lead {
    margin-bottom: 28px;
  }
  .club-team__record-group {
    margin-bottom: 28px;
  }
  .club-team__record-heading {
    font-size: 16px;
  }
  .club-team__record-list {
    display: block;
  }
  .club-circle-section {
    padding: 66px 20px 0;
  }
  .club-circle-list {
    grid-template-columns: 1fr;
    gap: 55px;
  }
  .club-circle__image {
    width: 100%;
    height: auto;
    aspect-ratio: 460/260;
  }
  .club-circle__title {
    margin: 18px 0 10px;
    font-size: 22px;
  }
  .club-circle__links {
    gap: 30px;
    margin-bottom: 24px;
  }
  .club-circle__link-group {
    gap: 20px;
  }
  .club-circle__link img {
    height: 30px;
  }
  .club-circle__text {
    width: 100%;
    font-size: 16px;
    line-height: 1.78;
  }
  .club-page .entry-area {
    margin-top: 76px;
  }
  /* ---- フッター（SPカンプ実測 / 750px基準の÷2）---- */
  .site-footer {
    padding: 40px 52px 54px;
  }
  .site-footer__inner {
    display: block;
    width: 100%;
  }
  .site-footer__info {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 40px 20px;
    margin-bottom: 28px;
  }
  .site-footer__logo {
    margin-bottom: 0;
  }
  .site-footer__logo-image {
    width: 101px;
    height: 52px;
  }
  .site-footer__site-name {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
  }
  .site-footer address {
    grid-column: 1/-1;
    /* カンプは住所を3行で組んでおり、右の余白（52px）より21pxはみ出している。
       body の letter-spacing 0.8px も継承すると4行に折れるので、両方外す。 */
    margin-right: -30px;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.8;
  }
  .site-footer__space--sp {
    display: inline;
  }
  /* カンプSPは1カラム。エコ・プラン → 描く未来 → 仕事 → 育成 → 人 → 働く環境 の順 */
  .site-footer__nav {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    margin-bottom: 10px;
  }
  .site-footer__nav-group:nth-child(1) {
    order: 1;
  }
  .site-footer__nav-group:nth-child(3) {
    order: 2;
  }
  .site-footer__nav-group:nth-child(5) {
    order: 3;
  }
  .site-footer__nav-group:nth-child(2) {
    order: 4;
  }
  .site-footer__nav-group:nth-child(4) {
    order: 5;
  }
  .site-footer__nav-group:nth-child(6) {
    order: 6;
  }
  .site-footer__nav-heading {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
  }
  .site-footer__nav-toggle {
    min-height: 73px;
    border-bottom: 1px solid rgba(47, 155, 75, 0.22);
  }
  .site-footer__nav-icon {
    font-size: 24px;
  }
  .site-footer__nav-list {
    max-height: 0;
    gap: 10px;
  }
  .site-footer__nav-item {
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: 0.031em;
  }
  .site-footer__nav-group.is-footer-nav-open .site-footer__nav-toggle {
    /* 閉じたときの帯 73px で見出しが来る位置と同じ */
    padding-top: 24.5px;
    padding-bottom: 10px;
  }
  .site-footer__nav-group.is-footer-nav-open .site-footer__nav-list {
    padding-bottom: 42px;
  }
  .site-footer__bottom {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 30px;
    padding-top: 0;
    font-size: 12px;
  }
  .site-footer__bottom-links {
    display: grid;
    gap: 12px;
  }
  .entry-area__lead {
    font-size: 28px;
  }
  .culture-hero-image {
    height: 185px;
    background-position: center;
  }
  .culture-inner {
    width: calc(100% - 56px);
  }
  .culture-intro {
    padding: 58px 0;
  }
  .culture-inner__title {
    margin-bottom: 28px;
    font-size: 26px;
    line-height: 1.58;
  }
  .culture-inner__text {
    line-height: 1.78;
  }
  .culture-inner__text strong {
    font-weight: bold;
    font-feature-settings: "palt";
  }
  .culture-pill-list {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 28px;
    width: 100%;
    margin-top: 38px;
    margin-bottom: 0;
  }
  .culture-pill-list__item {
    width: 208px;
    height: 208px;
  }
  .culture-pill-list__title {
    font-size: 24px;
    letter-spacing: 0;
    white-space: normal;
  }
  .culture-pill-list__text {
    font-size: 16px;
    line-height: 1.25;
    font-weight: normal;
  }
  .culture-story {
    padding: 68px 0 74px;
  }
  .culture-story::before, .culture-story::after {
    display: none;
  }
  .culture-story .culture-inner {
    /* auto 列だと引用ボックスが内容幅（368px）で決まり画面からはみ出すため、列幅を親に合わせる */
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .culture-quote {
    width: 100%;
    padding: 34px 24px;
    border-radius: 12px;
  }
  .culture-quote::before, .culture-quote::after {
    font-size: 97px;
  }
  .culture-quote::before {
    left: 0px;
    top: -14px;
  }
  .culture-quote::after {
    right: 0px;
    bottom: -74px;
  }
  .culture-quote__decoration {
    position: absolute;
    left: 50%;
    top: calc(100% + 16px);
    z-index: 0;
    display: block;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    content: "";
    transform: translateX(-50%);
  }
  .culture-quote__decoration--left {
    width: 220px;
    height: 250px;
    background-image: url("../img/culture/bg-main-side-l.svg");
  }
  .culture-quote__decoration--right {
    width: 480px;
    height: 630px;
    background-image: url("../img/culture/bg-main-side-r.svg");
  }
  .culture-quote__title {
    margin-bottom: 18px;
    font-size: 22px;
    line-height: 1.36;
  }
  .culture-quote__text {
    font-size: 16px;
    line-height: 1.78;
  }
  /* 後方の .arrow-button { width: 320px }（同詳細度・後勝ち）に負けて 304px の引用ボックスから
     はみ出すため、詳細度を上げて 100% を確定させる */
  .culture-quote .culture-link {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 48px;
    margin: 24px 0 40px;
  }
  .culture-gallery {
    /* (item 240px + gap 24px) × 7枚 */
    --culture-gallery-loop-width: 1848px;
    padding: 0 0 76px;
  }
  .culture-gallery__track {
    gap: 24px;
  }
  .culture-gallery__item {
    flex-basis: 240px;
    height: 180px;
  }
  .working-environment-hero-image {
    height: 220px;
    background-position: center;
  }
  .working-environment-inner {
    width: 100%;
  }
  .working-environment-intro {
    padding: 64px 0 66px;
    padding-inline: 20px;
  }
  .working-environment-inner__title {
    margin-bottom: 28px;
    font-size: 26px;
    line-height: 1.32;
  }
  .working-environment-inner__title-emphasis {
    font-size: 45px;
  }
  .working-environment-inner__text {
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 2;
  }
  .working-environment-menu {
    padding: 0 0 92px;
    padding-inline: 20px;
  }
  .working-environment-menu .working-environment-inner {
    gap: 63px;
  }
  .working-environment-card,
  .working-environment-card--reverse {
    display: flex;
    flex-direction: column-reverse;
    gap: 18px;
    align-items: stretch;
  }
  .working-environment-card--reverse .working-environment-card__body,
  .working-environment-card--reverse .working-environment-card__image {
    grid-column: auto;
    grid-row: auto;
  }
  .working-environment-card__body {
    flex: none;
    margin-top: 0;
  }
  .working-environment-card__title {
    margin-bottom: 14px;
    font-size: 22px;
  }
  .working-environment-card__text {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 2;
  }
  .working-environment-card__image {
    /* PC指定の min-width: 330px が残ると内枠より広くなり横スクロールが出る */
    min-width: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 335/208;
  }
  .jobs-page .hero-image {
    height: 180px;
  }
  .jobs-inner {
    width: 100%;
  }
  .jobs-intro {
    padding: 53px 20px 68px;
  }
  .jobs-intro__title {
    margin-bottom: 10px;
    font-size: 26px;
    line-height: 1.16;
    letter-spacing: 0;
  }
  .jobs-intro__title-emphasis {
    font-size: 45px;
  }
  .jobs-intro__text {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0;
  }
  .jobs-menu {
    padding: 0 0 92px;
  }
  .jobs-menu .jobs-inner {
    gap: 20px;
  }
  /* カンプ実測: 750pt中640pt = 85.333%、余白110pt = 14.667% */
  .jobs-card,
  .jobs-card--reverse {
    flex-direction: column-reverse;
    width: 85.333%;
    min-height: 0;
  }
  /* 奇数カードは右寄せ、偶数カードは左寄せ（カンプの互い違い配置） */
  .jobs-card {
    margin-left: auto;
    margin-right: 0;
  }
  .jobs-card--reverse {
    margin-left: 0;
    margin-right: auto;
  }
  /* パネルは高さ200pxで、中身を上下中央に置く（カンプ実測） */
  .jobs-card__body {
    flex: none;
    min-height: 200px;
    padding: 0 20px 0 43px;
  }
  .jobs-card__title {
    margin-bottom: 8px;
    font-size: 22px;
  }
  .jobs-card__role {
    margin-bottom: 14px;
    font-size: 16px;
  }
  .jobs-card__image {
    flex: none;
    width: 100%;
    aspect-ratio: 3/2;
  }
}
/* Entry area */
/* measure-comp: 16.00pt / 実効字送り 16.07pt → 16px・letter-spacing 0 */
.global-nav__entry-title {
  font-size: 16px;
  letter-spacing: 0;
}

@media (max-width: 767px) {
  .requirements-tabs__link:hover::after {
    border-top: 0;
    border-bottom: 8px solid #fff;
  }
  .requirements-tabs--bottom .requirements-tabs__link:hover {
    color: #fff;
  }
  .requirements-tabs--bottom .requirements-tabs__link:hover::after {
    border-top: 0;
    border-bottom: 8px solid #fff;
  }
}
@media (max-width: 767px) {
  /* ここから下は「カンプ横750px = 100vw」で組む。375px 幅では従来の px と一致し、
     320〜430px の実機でもロゴ・ENTRY・☰ がカンプと同じ比率の位置に来る。 */
  .site-header__inner {
    padding: 10px 9.0666644vw 10px 5.333332vw;
  }
  .site-header__brand {
    gap: clamp(10px, 2.666666vw, 20px);
  }
  .site-header__logo {
    width: clamp(55px, 14.666663vw, 90px);
  }
  .site-header__brand-text .site-header__company {
    font-size: clamp(9px, 2.3999994vw, 13px);
    /* 375px 時 1px。文字サイズに追従させたいので em で持つ */
    letter-spacing: 0.1111em;
  }
  .site-header__brand-text .site-header__site-name {
    font-size: clamp(13px, 3.4666658vw, 17px);
  }
  .site-header__text,
  .site-header__brand-text strong {
    white-space: nowrap;
  }
  .site-header__actions {
    gap: 5.333332vw;
  }
  .site-header__entry {
    width: clamp(81px, 21.5999946vw, 110px);
    height: clamp(36px, 9.5999976vw, 48px);
    /* PC で ☰ の右端を 1081 に寄せるために付けた左マージンは SP では不要 */
    margin-left: 0;
    border-radius: 5px;
    /* ここだけ SP(18px) > PC(15px) なので、上限は SP 値＝これ以上大きくしない */
    font-size: clamp(18px, 4.7999988vw, 18px);
  }
  /* カンプ実測（SP 750px 基準 = CSS 375px）: 外接 24×16、線2px・送り7px。
     PC で右端を 1081 に寄せるために付けた左右マージンは SP では効かせない
     （SP は .site-header__inner の padding-right 34px で右端 341 を出す） */
  .site-header__menu {
    gap: clamp(5px, 1.333333vw, 8px);
    width: clamp(24px, 6.3999984vw, 32px);
    margin-right: 0;
    margin-left: 0;
  }
  /* PC はカンプ実測で字送り0だが、SP は 0.8px（body 継承）が正しい */
  /* 375px 時 0.8px。文字サイズに追従させたいので em で持つ */
  .site-header__brand-text,
  .global-nav__brand-text {
    letter-spacing: 0.0615em;
  }
  .global-nav__inner {
    min-height: 1069px;
    /* 上は .global-nav__head の 60px の帯で持つ。
       左右は sp(40) / sp(34) で、下のメニュー2列と足して丁度 100vw になる。
       ✕ だけ margin-right で ☰ と同じ位置に戻す */
    padding: 0 4.5333322vw 40px 5.333332vw;
  }
  /* 閉じた .site-header と同じ 60px の帯にして、ブランドと ✕ の位置を開閉で揃える */
  .global-nav__head {
    height: 60px;
    margin-bottom: 42px;
  }
  .global-nav__brand {
    gap: 10px;
  }
  .global-nav__brand-logo {
    width: clamp(55px, 14.666663vw, 90px);
  }
  /* .site-header__brand-text と同じ行送りにして、開閉で文字位置を揃える */
  .global-nav__brand-text {
    font-size: clamp(9px, 2.3999994vw, 13px);
    gap: 3px;
    line-height: 1.2;
  }
  .global-nav__company {
    letter-spacing: 0.1111em;
  }
  .global-nav__site-name {
    font-size: clamp(13px, 3.4666658vw, 17px);
  }
  /* カンプ実測: ✕ の外接ボックス 25×16。閉じたときの ☰（24×16）と同位置 */
  .global-nav__close {
    width: clamp(25px, 6.666665vw, 33px);
    height: clamp(16px, 4.2666656vw, 22px);
    /* padding-right が sp(34) なので、☰（sp(68) の余白）と同じ位置に戻す差分 */
    margin-right: 4.5333322vw;
  }
  .global-nav__close::before, .global-nav__close::after {
    width: clamp(28px, 7.4666648vw, 38px);
    height: 2px;
    margin: -1px 0 0 calc(clamp(28px, 7.4666648vw, 38px) / -2);
  }
  /* カンプ実測（750px基準）: 1列目 40.4-352.4 / 2列目 383.6-705.6。
     左右の padding と足して 100vw になる比率で持つ */
  /* 1列目は「確かな力を身につけたい。」がぶら下げインデント込みで1行に入る幅。
     カンプは詰め組みで 141.5px だが、Web フォントは詰められないぶん広く要る */
  .global-nav__menu {
    display: grid;
    grid-template-columns: 44.5333222vw 42.666656vw;
    column-gap: 2.9333326vw;
    margin-bottom: 42px;
    font-family: "Zen Kaku Gothic New", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
  .global-nav__menu-column {
    display: grid;
    align-content: start;
  }
  .global-nav__menu-column--left {
    gap: 0;
  }
  .global-nav__menu-column--right {
    gap: 0;
  }
  .global-nav__group {
    position: static;
    width: 44.5333222vw;
  }
  .global-nav__menu-column--right .global-nav__group {
    width: 42.666656vw;
  }
  .global-nav__group--future {
    margin-top: 30px;
  }
  .global-nav__group--jobs {
    margin-top: 30px;
  }
  .global-nav__group--people {
    margin-top: 35px;
  }
  .global-nav__group--environment {
    margin-top: 35px;
  }
  /* measure-comp(--page 2): 見出し 30.00pt / 実効字送り 30.00pt → letter-spacing 0 */
  .global-nav__heading {
    margin-bottom: clamp(14px, 3.7333324vw, 15px);
    font-size: clamp(15px, 3.999999vw, 20px);
    letter-spacing: 0;
  }
  /* measure-comp(--page 2): 26.00pt / 実効 26.81pt → 0.031em。
     項目の送りは 56pt（行box sp(32.5) + gap sp(24)） */
  .global-nav__item {
    font-size: clamp(13px, 3.4666658vw, 16px);
    line-height: 1.25;
    letter-spacing: 0;
  }
  .global-nav__list {
    gap: clamp(12px, 3.1999992vw, 12px);
  }
  .global-nav__entry {
    grid-template-columns: 58.666652vw 19.1999952vw;
    gap: 12px 6.3999984vw;
  }
  .global-nav__entry-button {
    min-height: clamp(44px, 11.7333304vw, 47px);
    padding: 0 2.9333326vw 0 3.1999992vw;
    font-size: clamp(13px, 3.4666658vw, 15px);
    letter-spacing: 0;
  }
  .global-nav__entry-arrow {
    right: 2.9333326vw;
  }
  .global-nav__entry-button--fill {
    min-height: clamp(52px, 13.8666632vw, 59px);
    font-size: clamp(13px, 3.4666658vw, 15px);
  }
  .global-nav__entry-button--wide {
    min-height: clamp(78px, 20.7999948vw, 80px);
  }
  /* measure-comp(--page 2): 24.00pt / 実効 25.79pt → 0.075em */
  .global-nav__entry-text {
    font-size: clamp(12px, 3.1999992vw, 15px);
    letter-spacing: 0.075em;
  }
  /* PC は中央基準（left/top）で置いているので、SP では右下基準に戻す */
  .global-nav__sns {
    top: auto;
    right: 7.7333314vw;
    bottom: 64px;
    left: auto;
    margin-left: 0;
    gap: clamp(14px, 3.7333324vw, 14px);
  }
  .global-nav__sns-label {
    font-size: clamp(12px, 3.1999992vw, 16px);
  }
  /* カンプ実測（SP・750px基準）。縦横比は SVG のまま */
  .global-nav__sns-link[aria-label=Instagram] .global-nav__sns-icon {
    width: clamp(20.375px, 5.433331975vw, 27px);
    height: clamp(20.375px, 5.433331975vw, 27px);
  }
  .global-nav__sns-link[aria-label=YouTube] .global-nav__sns-icon {
    width: clamp(25.875px, 6.899998275vw, 34.28px);
    height: clamp(18.125px, 4.833332125vw, 24px);
  }
  .global-nav__sns-link[aria-label=X] .global-nav__sns-icon {
    width: clamp(17.725px, 4.726665485vw, 23.48px);
    height: clamp(18.125px, 4.833332125vw, 24px);
  }
  /* 人を知る（.people-top-hero-image）と同じ高さ */
  .future-hero-image {
    height: 180px;
  }
  .future-intro {
    padding: 56px 0 86px;
  }
  .future-intro__title,
  .future-intro__text {
    width: calc(100% - 48px);
  }
  .future-intro__title {
    font-size: 25px;
  }
  .future-intro__title span {
    font-size: 46px;
  }
  .future-intro__text {
    font-size: 14px;
    line-height: 2;
  }
  .future-card-list {
    margin-top: 62px;
  }
  /* SPカンプ（750px基準・CSS値は 1/2）実測に合わせている。
     緑帯の下端 193px / 写真 180px（スライス 750x361）/ 左右の余白 20px */
  .benefits-hero-image {
    height: 180px;
  }
  .benefits-inner {
    width: calc(100% - 40px);
  }
  .benefits-intro {
    padding: 49px 0 74px;
  }
  .benefits-inner__title {
    margin-bottom: 8px;
    font-size: 26px;
    line-height: 1.5;
  }
  .benefits-inner__text {
    font-size: 16px;
    line-height: 1.78;
    letter-spacing: 0;
  }
  .benefits-list-section {
    padding-bottom: 0;
  }
  .benefits-category {
    padding: 36px 0 54px;
  }
  .benefits-category__title {
    gap: 10px;
    margin-bottom: 30px;
    font-size: 24px;
    line-height: 1.4;
  }
  .benefits-category__icon {
    flex-basis: 35px;
    width: 35px;
  }
  .benefits-items {
    gap: 29px;
  }
  .benefits-item__title {
    margin-bottom: 7px;
    font-size: 20px;
  }
  .benefits-item__text {
    font-size: 16px;
    line-height: 1.78;
    letter-spacing: 0;
  }
  .benefits-detail {
    margin-top: 31px;
    gap: 10px;
  }
  .benefits-detail__title {
    font-size: 18px;
  }
  .benefits-detail__text {
    font-size: 16px;
    line-height: 1.78;
    letter-spacing: 0;
  }
  .benefits-category--with-stat,
  .benefits-category--wide-stat {
    padding-right: 0;
  }
  /* カンプSP: 数値ボックスは左寄せで、1件目の直後に入る */
  .benefits-stat {
    position: static;
    width: 150px;
    height: 150px;
    /* .benefits-items の gap 29px との差分。上 20px / 下 35px にそろえる */
    margin: -9px 0 6px;
  }
  .benefits-stat--wide {
    width: 180px;
    height: 180px;
  }
  .benefits-stat__label {
    font-size: 15px;
  }
  .benefits-stat__value {
    margin-top: 4px;
  }
  .benefits-stat__number {
    font-size: 73px;
  }
  .benefits-stat__unit {
    font-size: 27px;
  }
  .benefits-stat__note {
    margin-top: 8px;
    font-size: 12px;
  }
  .dual-career-hero-image {
    display: block;
    height: 180px;
    background-position: center;
  }
  .dual-career-inner {
    width: 100%;
  }
  .dual-career-intro {
    padding: 50px 20px 78px;
  }
  .dual-career-intro__grid {
    display: block;
  }
  .dual-career-inner__title {
    margin-bottom: 10px;
    font-size: 26px;
    line-height: 1.68;
  }
  .dual-career-inner__text {
    /* デザインでは最長行が右マージンまで伸びるため、その分だけ広げる */
    margin-right: -12px;
    font-size: 16px;
    line-height: 1.78;
    letter-spacing: normal;
  }
  .dual-career-stat {
    width: 194px;
    height: 194px;
    margin: 33px 0 0;
    padding: 10px;
  }
  .dual-career-stat__text {
    font-size: 16px;
    line-height: 1.52;
  }
  .dual-career-stat__number {
    margin-top: 10px;
    font-size: 80px;
  }
  .dual-career-stat__unit {
    margin: -18px 14px 0 0;
    font-size: 24px;
  }
  .dual-career-question {
    max-width: none;
    margin-top: 65px;
    padding-left: 23px;
    border-left-width: 4px;
  }
  .dual-career-question__title {
    margin-bottom: 0;
    font-size: 22px;
    line-height: 1.5;
  }
  .dual-career-question__text {
    font-size: 16px;
    line-height: 1.78;
    letter-spacing: normal;
  }
  .dual-career-question__list {
    gap: 0;
    margin: 28px 0;
    font-size: 20px;
    line-height: 1.6;
  }
  .dual-career-question__item {
    padding-left: 22px;
    font-size: 18px;
  }
  .dual-career-question__item::before {
    top: 0.5em;
    width: 10px;
    height: 10px;
  }
  /* ---- ストーリー ---- */
  .dual-career-stories {
    padding: 62px 0 80px;
  }
  .dual-career-stories::before {
    top: -170px;
    right: -170px;
    left: auto;
    width: 310px;
    height: 374px;
    margin-left: 0;
  }
  .dual-career-stories::after {
    display: none;
  }
  .dual-career-stories .dual-career-inner {
    padding: 0 20px;
  }
  .dual-career-stories__title {
    margin-bottom: 60px;
    font-size: 30px;
    line-height: 1.5;
  }
  .dual-career-story {
    display: block;
    width: 100%;
    margin: 0;
  }
  .dual-career-story__figure,
  .dual-career-story--reverse .dual-career-story__figure {
    grid-column: auto;
    justify-self: auto;
    width: 100%;
    padding-top: 0;
    overflow: visible;
    pointer-events: auto;
  }
  .dual-career-story__picture {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    margin: 0 20px;
  }
  .dual-career-story__members,
  .dual-career-story--reverse .dual-career-story__members {
    right: 20px;
    bottom: 23px;
    left: 20px;
    gap: 14px;
    width: auto;
  }
  .dual-career-member {
    padding: 11px 10px 13px;
    border-radius: 6px;
  }
  .dual-career-member__dept {
    font-size: 12px;
    line-height: 1.4;
  }
  .dual-career-member__name {
    margin: 8px 0 7px;
    font-size: 18px;
  }
  .dual-career-member__year {
    font-size: 12px;
  }
  .dual-career-member__school {
    font-size: 12px;
    line-height: 1.4;
  }
  .dual-career-story__body {
    margin: 0 20px;
    padding: 50px 18px 53px;
  }
  .dual-career-story__body::after {
    display: none;
  }
  .dual-career-story--reverse .dual-career-story__body {
    margin: 0 20px;
    padding: 50px 18px 53px;
  }
  .dual-career-story__title {
    margin-bottom: 28px;
    font-size: 22px;
    line-height: 1.36;
    /* デザインの改行位置を保つため、和文の字送りを詰める */
    letter-spacing: -0.04em;
  }
  .dual-career-story__text {
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 1.78;
    letter-spacing: normal;
    text-align: left;
  }
  .dual-career-story__qa {
    display: block;
    width: auto;
    margin: 48px 20px 0;
    padding: 30px 18px 53px;
  }
  .dual-career-story__qa::before {
    left: 50%;
    border-right-width: 17px;
    border-bottom-width: 29px;
    border-left-width: 17px;
    transform: translateX(-50%);
  }
  .dual-career-story--reverse .dual-career-story__qa::before {
    right: auto;
    left: 50%;
  }
  .dual-career-qa + .dual-career-qa {
    margin-top: 48px;
  }
  .dual-career-qa__title {
    margin-bottom: 16px;
    padding-left: 0;
    font-size: 22px;
    line-height: 1.36;
  }
  .dual-career-qa__title::before {
    position: static;
    display: block;
    margin-bottom: 8px;
    font-size: 28px;
    line-height: 1.15;
  }
  .dual-career-qa__answer {
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 1.78;
    letter-spacing: normal;
    text-align: left;
  }
  .dual-career-qa__name {
    margin-right: 16px;
    letter-spacing: normal;
  }
  .dual-career-story + .dual-career-story {
    margin-top: 60px;
  }
  .dual-career-link {
    margin-top: 60px;
    padding: 0 28px;
  }
  .dual-career-link__link {
    width: 100%;
    min-height: 48px;
    font-size: 14px;
  }
  .dual-career-link__arrow {
    right: 24px;
  }
  /* カンプ実測（SP_人を知るTOP_260519_スライス.ai / SP375px基準）: 帯の高さ 180px。
     スライス bg-main-people-sp も 750x360（=375x180）なので等倍で収まる。 */
  .people-top-hero-image {
    height: 180px;
  }
  .people-top-inner {
    width: calc(100% - 56px);
  }
  .people-top-intro {
    padding: 58px 0 44px;
  }
  .people-top-inner__title {
    margin-bottom: 10px;
    line-height: 1;
  }
  .people-top-inner__number {
    font-size: 40px;
  }
  .people-top-inner__to,
  .people-top-inner__walk {
    font-size: 26px;
  }
  .people-top-inner__road {
    font-size: 45px;
  }
  .people-top-inner__text {
    font-size: 16px;
    line-height: 2.05;
  }
  .people-interview-section {
    padding: 0 0 50px;
  }
  .people-card-list {
    gap: 56px;
  }
  .people-card,
  .people-card--image-right {
    display: block;
  }
  .people-card__image {
    /* SPカンプ（750px幅）で 596px */
    width: 79.4666468vw;
    /* 左寄せ */
    margin: 0 0 40px;
    /* 描く未来 個別の .future-detail-person__brush（SP）と同じブラシ・位置・大きさ */
  }
  .people-card__image::after {
    top: 29%;
    right: auto;
    bottom: auto;
    left: 48.7%;
    width: 62.9%;
    height: 100%;
    aspect-ratio: auto;
    background: url("../img/top/bg-top-img-top-interview.svg") center/100% 100% no-repeat;
    mix-blend-mode: multiply;
  }
  .people-card__image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .people-card__body .people-card__title {
    margin-bottom: 18px;
    font-size: 22px;
    line-height: 1.45;
  }
  .people-card__text {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
  }
  .people-card__body > span.people-card__text {
    /* 「省エネコンサルタント（営業）」が180px固定だと2行に折り返すため、
       最小幅を保ちつつ文言に応じて広がるようにする */
    width: fit-content;
    min-width: 180px;
    height: 28px;
    padding: 0 10px;
    margin-bottom: 8px;
    font-size: 12px;
  }
  .people-card__body a {
    width: 94px;
    height: 44px;
    margin-top: 18px;
    border-radius: 22px;
    font-size: 36px;
  }
  .people-interview-hero {
    padding-top: 120px;
  }
  .people-interview-hero::after {
    right: -100px;
    bottom: -24px;
    width: 210px;
    height: 330px;
  }
  .people-interview-hero__inner {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    min-height: 0;
  }
  .people-interview-hero__copy {
    width: calc(100% - 56px);
    padding: 30px 0 58px;
  }
  .people-interview-hero__title {
    margin-bottom: 26px;
    font-size: 27px;
    line-height: 1.55;
  }
  .people-interview-hero__text {
    font-size: 12px;
    line-height: 1.85;
  }
  .people-interview-hero__image,
  .people-interview-qa__image {
    width: 100%;
  }
  .people-interview-hero__image {
    width: 100%;
    height: 360px;
  }
  .people-interview-inner {
    width: calc(100% - 56px);
  }
  .people-interview-lead {
    padding: 56px 0 66px;
  }
  .people-interview-lead::after {
    right: -58px;
    bottom: -38px;
    width: 210px;
    height: 132px;
  }
  .people-interview-inner__text {
    width: 100%;
    margin-bottom: 22px;
    font-size: 13px;
    line-height: 2.1;
  }
  .people-interview-qa {
    padding: 54px 0 60px;
  }
  .people-interview-qa--first {
    padding-top: 0;
  }
  .people-interview-qa__grid,
  .people-interview-qa--reverse .people-interview-qa__grid {
    display: flex;
    flex-direction: column;
    gap: 42px;
  }
  .people-interview-qa--first .people-interview-qa__grid {
    flex-direction: column-reverse;
  }
  .people-interview-qa__body {
    gap: 44px;
  }
  .people-interview-question__title {
    gap: 10px;
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 1.45;
  }
  .people-interview-question__text {
    font-size: 26px;
  }
  .people-interview-question__text {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 2.05;
  }
  .people-interview-qa__image,
  .people-interview-qa--reverse .people-interview-qa__image {
    height: auto;
    aspect-ratio: 1/1;
  }
  .people-interview-schedule {
    padding: 58px 0 62px;
  }
  .people-interview-schedule__grid {
    display: block;
  }
  .people-interview-schedule__intro {
    margin-bottom: 46px;
  }
  .people-interview-schedule__intro > p:first-child {
    font-size: 13px;
  }
  .people-interview-schedule__title {
    margin-bottom: 24px;
    font-size: 24px;
  }
  .people-interview-schedule__intro > p:nth-of-type(2) {
    width: 100%;
    margin-bottom: 34px;
    font-size: 13px;
    line-height: 2;
  }
  .people-interview-schedule__image {
    width: 86px;
    height: 86px;
  }
  .people-interview-timeline {
    gap: 24px;
    padding-top: 0;
  }
  .people-interview-timeline time {
    font-size: 18px;
  }
  .people-interview-timeline__text {
    font-size: 13px;
  }
  .people-interview-page--engineer .people-interview-hero::after {
    right: -78px;
    bottom: 194px;
    width: 190px;
    height: 300px;
  }
  .people-interview-page--engineer .people-interview-hero__copy {
    padding-top: 28px;
  }
  .people-interview-page--engineer .people-interview-hero__title {
    margin-bottom: 22px;
    font-size: 25px;
  }
  .people-interview-page--engineer .people-interview-hero__image {
    display: flex;
    justify-content: center;
    background: #f2f2f2;
  }
  .people-interview-page--engineer .people-interview-hero__image {
    width: 74%;
    max-width: 320px;
    height: 390px;
  }
  .people-interview-page--engineer .people-interview-lead {
    padding: 50px 0 58px;
  }
  .people-interview-page--engineer .people-interview-qa {
    padding: 48px 0 54px;
  }
  .people-interview-page--engineer .people-interview-qa__grid,
  .people-interview-page--engineer .people-interview-qa--reverse .people-interview-qa__grid {
    gap: 36px;
  }
  .people-interview-page--engineer .people-interview-question__title {
    font-size: 18px;
  }
  .people-interview-page--engineer .people-interview-question__text {
    font-size: 24px;
  }
  .people-interview-page--engineer .people-interview-question__text {
    font-size: 12px;
    line-height: 2;
  }
  .people-interview-page--engineer .people-interview-qa__image,
  .people-interview-page--engineer .people-interview-qa--reverse .people-interview-qa__image {
    aspect-ratio: 1.2/1;
    height: auto;
  }
  .people-interview-page--interview03 .people-interview-hero::after {
    right: -132px;
    bottom: 168px;
    width: 190px;
    height: 300px;
  }
  .people-interview-page--interview03 .people-interview-hero__copy {
    width: calc(100% - 56px);
    margin: 0 auto;
    padding-top: 28px;
  }
  .people-interview-page--interview03 .people-interview-hero__title {
    margin-bottom: 22px;
    font-size: 25px;
  }
  .people-interview-page--interview03 .people-interview-hero__image {
    display: flex;
    justify-content: center;
    background: #f2f2f2;
  }
  .people-interview-page--interview03 .people-interview-hero__image {
    width: 74%;
    max-width: 320px;
    height: 390px;
  }
  .people-interview-page--interview03 .people-interview-lead {
    padding: 50px 0 58px;
  }
  .people-interview-page--interview03 .people-interview-qa {
    padding: 48px 0 54px;
  }
  .people-interview-page--interview03 .people-interview-qa__grid,
  .people-interview-page--interview03 .people-interview-qa--reverse .people-interview-qa__grid {
    gap: 36px;
  }
  .people-interview-page--consultant .people-interview-hero__title {
    font-size: 25px;
  }
  .people-interview-page--consultant .people-interview-hero__image {
    width: 100%;
    height: 360px;
  }
  .people-interview-page--interview04 .people-interview-hero::after {
    right: -132px;
    bottom: 164px;
    width: 190px;
    height: 300px;
  }
  .people-interview-page--interview04 .people-interview-hero__copy {
    width: calc(100% - 56px);
    margin: 0 auto;
    padding-top: 28px;
  }
  .people-interview-page--interview04 .people-interview-hero__title {
    margin-bottom: 22px;
    font-size: 25px;
  }
  .people-interview-page--interview04 .people-interview-hero__image {
    padding-top: 0;
  }
  .people-interview-page--interview04 .people-interview-hero__image {
    width: 100%;
    height: 360px;
  }
  .people-interview-page--interview04 .people-interview-lead {
    padding: 50px 0 58px;
  }
  .people-interview-page--interview04 .people-interview-qa {
    padding: 48px 0 54px;
  }
  .people-interview-page--interview04 .people-interview-qa__grid,
  .people-interview-page--interview04 .people-interview-qa--reverse .people-interview-qa__grid {
    gap: 36px;
  }
  .people-interview-page--interview04 .people-interview-qa__image,
  .people-interview-page--interview04 .people-interview-qa--reverse .people-interview-qa__image {
    aspect-ratio: 1.2/1;
    height: auto;
  }
  .people-interview-personal {
    padding: 34px 0 58px;
  }
  .people-interview-personal::before {
    left: auto;
    right: -122px;
    top: 320px;
    width: 190px;
    height: 280px;
  }
  .people-interview-personal::after {
    content: none;
  }
  .people-interview-personal__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .people-interview-question__title {
    margin-bottom: 18px;
    text-align: left;
  }
  .people-interview-question__image {
    width: 100%;
    height: auto;
    aspect-ratio: 300/190;
  }
  .people-interview-dots {
    gap: 5px;
    margin-bottom: 16px;
  }
  .people-interview-dots__text {
    width: 12px;
    height: 12px;
  }
  .people-interview-message {
    padding: 58px 0 72px;
  }
  .people-interview-message::after {
    right: -90px;
    top: 26px;
    width: 210px;
    height: 330px;
  }
  .people-interview-message__note {
    width: 100%;
    margin: 30px 0 44px;
    font-size: 10px;
  }
  .people-interview-back {
    width: 100%;
    min-height: 48px;
    gap: 54px;
    font-size: 13px;
  }
  .people-interview-support {
    padding: 58px 0 62px;
  }
  .people-interview-support__grid {
    display: block;
  }
  .people-interview-support__intro {
    margin-bottom: 42px;
  }
  .people-interview-support__title {
    margin-bottom: 22px;
    font-size: 24px;
  }
  .people-interview-support__text {
    margin-bottom: 30px;
    font-size: 13px;
    line-height: 2;
  }
  .people-interview-support__image {
    width: 86px;
    height: 86px;
  }
  .people-interview-support__list {
    gap: 26px;
    padding-top: 0;
  }
  .people-interview-support__title {
    font-size: 18px;
  }
  .people-interview-support__text {
    font-size: 13px;
    line-height: 2;
  }
}
@media (max-width: 767px) {
  .training-inner {
    width: calc(100% - 56px);
  }
  .training-hero {
    height: 350px;
  }
  .training-hero::before {
    z-index: 1;
    background: linear-gradient(90deg, rgba(22, 131, 58, 0.88) 0%, rgba(22, 131, 58, 0.5) 52%, rgba(22, 131, 58, 0.12) 100%);
  }
  .training-hero::after {
    /* 900〜1199pxはPC画像を使う（SP画像751pxの引き伸ばしボケ回避） */
  }
  /* カンプ SP2 実測：ロゴ 101×52（従来 199×104 では社名が折り返していた） */
}
@media (max-width: 767px) and (max-width: 899px) {
  .training-hero::after {
    background-image: url("../img/training/hero-engineer-sp@2x.webp");
    background-position: 58% center;
  }
}
@media (max-width: 767px) {
  .training-hero__inner {
    width: 100%;
    padding: 142px 28px 0;
  }
  .training-hero__text {
    margin-bottom: 12px;
    font-size: 13px;
  }
  .training-hero__title {
    font-size: 31px;
    line-height: 1.35;
  }
  .training-intro {
    padding: 62px 0 64px;
  }
  .training-intro__grid,
  .training-program__grid,
  .training-cycle__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .training-inner__title,
  .training-section-head__title,
  .training-inner__title,
  .training-section-head__title,
  .training-section-head__title,
  .training-faq__title {
    margin-bottom: 22px;
    font-size: 24px;
    line-height: 1.5;
  }
  .training-inner__text,
  .training-inner__text,
  .training-inner__text,
  .training-inner__text,
  .training-inner__text,
  .training-faq__text {
    font-size: 14px;
    line-height: 2;
  }
  .training-goal-list {
    gap: 14px;
  }
  .training-program,
  .training-support {
    padding: 58px 0 62px;
  }
  .training-program-figure {
    width: 245px;
    margin: 0 auto;
  }
  .training-cycle {
    padding: 62px 0;
  }
  .training-inner__media {
    width: 260px;
    margin: 0 auto;
  }
  .training-support__cards {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .training-support__image {
    height: 156px;
  }
  .training-support__cards div {
    padding: 22px 24px 26px;
  }
  .training-support__title {
    margin-bottom: 10px;
    font-size: 22px;
  }
  .training-support__text {
    font-size: 13px;
    line-height: 1.9;
  }
  .training-schedule {
    padding: 62px 0 68px;
  }
  .training-schedule__image {
    margin-right: -28px;
  }
  .training-schedule__image {
    width: 690px;
    max-width: none;
  }
  .training-page .training-section-head {
    margin-bottom: 36px;
  }
  .training-inner__title {
    display: flex;
    gap: 6px;
    font-size: 32px;
  }
  .training-inner__title span {
    font-size: 54px;
  }
  .training-program-figure__image {
    width: 245px;
    margin: 0 auto;
  }
  .training-stream {
    padding: 58px 0 62px;
  }
  .training-stream__cards,
  .training-support__cards,
  .training-step__cards,
  .training-voice__cards {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .training-stream__cards section {
    min-height: 0;
    padding: 30px 24px 32px;
  }
  .training-stream__title {
    margin-bottom: 18px;
    font-size: 23px;
  }
  .training-stream__item,
  .training-support__item,
  .training-step__cards dd,
  .training-voice__item {
    font-size: 13px;
  }
  .training-stream__image {
    width: 118px;
    margin-top: 24px;
  }
  .training-cross {
    font-size: 38px;
  }
  .training-cycle .training-inner + .training-inner {
    margin-top: 42px;
  }
  .training-support__cards article {
    display: block;
  }
  .training-support__text {
    font-size: 17px;
  }
  .training-support__list {
    margin-bottom: 18px;
  }
  .training-step {
    padding: 62px 0 68px;
  }
  .training-step__title {
    padding: 10px 14px 12px;
    font-size: 25px;
  }
  .training-step__cards dl {
    padding: 22px 24px 26px;
  }
  .training-step__cards dt {
    margin: 22px 0 8px;
    font-size: 13px;
  }
  .training-step__cards dd strong {
    font-size: 16px;
  }
  .training-voice {
    padding: 62px 0 68px;
  }
  .training-voice__cards article {
    padding: 62px 24px 28px;
  }
  .training-voice__profile {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 18px;
  }
  .training-voice__photo {
    width: 140px;
    height: 156px;
  }
  .training-voice__cards strong {
    font-size: 25px;
  }
  .training-voice__list {
    grid-template-columns: 1fr;
  }
  .training-voice__cards blockquote {
    font-size: 13px;
  }
  .training-faq {
    padding-bottom: 68px;
  }
  .training-faq summary {
    gap: 14px;
    min-height: 76px;
    /* .training-faq__question（0,1,0）より詳細度が高くここが勝つ */
    padding-right: 40px;
    font-size: 18px;
  }
  .training-faq details > div {
    padding: 0 0 38px;
  }
  .training-faq__title {
    margin: 28px 0 14px;
    font-size: 17px;
  }
  .training-faq__training-list {
    display: grid;
    gap: 12px;
    padding: 22px 24px;
    font-size: 13px;
  }
}
/* ==========================================================================
   TOP（index）
   ========================================================================== */
.top-page .site-header {
  background: transparent;
  transition: background-color 0.3s ease;
}

/* 固定ヘッダーがヒーローを離れたら下層と同じ帯色を敷く（.is-scrolled は common.js が付与） */
.is-scrolled .top-page .site-header {
  background: rgba(51, 156, 74, 0.7);
}

.top-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 370px;
  min-height: 62px;
  border: 2px solid #fff;
  color: #fff;
  font-size: 18px;
  letter-spacing: 0.12em;
}
.top-button .top-button__arrow {
  position: absolute;
  top: 50%;
  right: 26px;
  font-size: 30px;
  line-height: 1;
  transform: translateY(-50%);
}

.top-button--green {
  border-color: #278a3d;
  color: #278a3d;
}

/* TOPは .top-closing から緑が続くため、上は帯ではなくクロージング本文からの間隔で決める。
   カンプ実測: 本文最終行の ink 下端から ENTRY の ink 上端まで 108px（下層は帯上端から86px）。
   筆テクスチャも .top-closing::before だけにする（カンプ実測: TOPのENTRY帯にテクスチャは無い） */
.top-page .entry-area {
  padding-top: 72px;
}

.top-page .entry-area::before {
  content: none;
}

/* ヒーロー */
.top-hero {
  position: relative;
  height: 945px;
  background: #2f9b4b;
  color: #fff;
}

/* 20260904修正: コピー全体にシャドウ（PC/SP共通）。濃さはカンプの効果に合わせて要調整 */
.top-hero {
  --hero-copy-shadow: 0 4px 16px rgb(0 0 0 / 35%);
}

.top-hero::before {
  position: absolute;
  inset: -130px -190px auto -100px;
  z-index: 2;
  /* 1494px 幅で描画したときの絵柄の全高。下端を切らずに .top-why まで垂らす */
  height: 1346px;
  background: url("../img/top/bg-top-main.webp") center top/1494px auto no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
  content: "";
}

.top-hero__inner {
  position: relative;
  z-index: 3;
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}

.top-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.top-hero__visual-list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-hero__visual-item {
  position: absolute;
  top: -175px;
  left: 8px;
  width: 1057px;
  opacity: 0;
  visibility: hidden;
  /* 切り替えに緩急をつける: 出だしゆっくり→中盤で一気に→終わりで減速。
     位置・幅・ぼかしも同じ曲線で動かして、中央⇄脇の移動として見せる。
     visibility は同じ時間を指定すると遷移中は visible のままになり、
     退場する画像が消える前にフェードし切れる */
  --hero-ease: cubic-bezier(0.7, 0, 0.3, 1);
  --hero-duration: 0.9s;
  transition: opacity var(--hero-duration) var(--hero-ease), top var(--hero-duration) var(--hero-ease), left var(--hero-duration) var(--hero-ease), width var(--hero-duration) var(--hero-ease), filter var(--hero-duration) var(--hero-ease), visibility var(--hero-duration);
}

.top-hero__visual-picture {
  display: block;
}

.top-hero__visual-image {
  display: block;
  width: 100%;
  height: auto;
}

.top-hero__visual-item.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
}

.top-hero__visual-item.is-prev,
.top-hero__visual-item.is-next {
  top: 55px;
  z-index: 1;
  width: 535px;
  opacity: 0.32;
  visibility: visible;
  filter: blur(3px) saturate(0.8);
}

.top-hero__visual-item.is-prev {
  left: -136px;
}

.top-hero__visual-item.is-next {
  top: 68px;
  left: 768px;
}

.top-hero__visual-nav {
  position: absolute;
  top: 90px;
  z-index: 2;
  width: 220px;
  height: 560px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.top-hero__visual-nav--prev {
  left: 0;
}

.top-hero__visual-nav--next {
  right: 0;
}

.top-hero__catch {
  position: absolute;
  top: 150px;
  right: 95px;
  z-index: 3;
  margin: 0;
  writing-mode: vertical-rl;
  font-size: 100px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.11em;
  text-shadow: var(--hero-copy-shadow);
}

.top-hero__title {
  position: absolute;
  top: 541px;
  left: 100px;
  z-index: 3;
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: -0.1em;
  text-shadow: var(--hero-copy-shadow);
}
.top-hero__title em {
  font-size: 110px;
  line-height: 1;
  font-style: normal;
  letter-spacing: -0.01em;
  display: inline-block;
  font-feature-settings: "palt";
  transform: scaleX(1.2);
  transform-origin: left center;
  padding-right: 0.4em;
}

.top-hero__title-count {
  display: block;
  line-height: 1;
}

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

.top-hero__title-sub {
  display: block;
}

.top-hero__title-strong {
  display: block;
  font-size: 61px;
  font-weight: inherit;
}

.top-hero__news {
  position: absolute;
  top: 695px;
  right: 100px;
  z-index: 3;
  width: 300px;
}

.top-hero__news-list {
  margin: 0;
  padding: 33px 0 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  list-style: none;
}

.top-hero__news-item {
  display: none;
}
.top-hero__news-item.is-active {
  display: block;
}

.top-hero__news-link {
  display: grid;
  gap: 4px;
  color: #fff;
}

.top-hero__news-date {
  font-size: 13px;
  letter-spacing: 0.1em;
}

.top-hero__news-text {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.top-hero__news-nav {
  position: absolute;
  top: 10px;
  right: 15px;
  display: flex;
  gap: 20px;
}

.top-hero__news-prev,
.top-hero__news-next {
  position: relative;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.top-hero__news-prev::before,
.top-hero__news-next::before {
  position: absolute;
  top: 3px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  content: "";
}

.top-hero__news-prev::before {
  left: 4px;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
}

.top-hero__news-next::before {
  right: 4px;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

/* なぜ、1000人なのか。 */
/* 背景色（.top-hero::before のテクスチャはこの上に重なる） */
.top-why {
  position: relative;
  padding: 0 0 95px;
  background: #339c4a;
  color: #fff;
}

/* 背景写真はテクスチャより前面に置くため疑似要素へ分離（z-index は .top-hero::before の 2 より上） */
.top-why::before {
  position: absolute;
  top: 95px;
  right: 0;
  z-index: 3;
  width: 970px;
  height: 717px;
  background: url("../img/top/bg-top-why1000.webp") center/100% 100% no-repeat;
  pointer-events: none;
  content: "";
}

.top-why__inner {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  width: 1000px;
  margin: 0 auto;
  padding-left: 50px;
}

.top-why__heading {
  margin: 0 0 24px;
  color: #fff;
  font-size: 68px;
  line-height: 1.1;
  letter-spacing: 0;
  /* 「1000」はMV（.top-hero__title em）と同じ表現: palt + 横120% */
}
.top-why__heading em {
  display: inline-block;
  font-size: 100px;
  font-style: normal;
  letter-spacing: -0.01em;
  font-feature-settings: "palt";
  transform: scaleX(1.2);
  transform-origin: left center;
  padding-right: 0.3em;
}

.top-why__heading-lead {
  display: block;
  margin-bottom: 6px;
  font-size: 54px;
  line-height: 1;
}

.top-why__text {
  margin: 0 0 32px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.08em;
}

.top-why__emphasis {
  margin: 35px 0 30px;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.top-why__closing {
  margin: 30px 0 54px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.1em;
}

/* 描く未来から選ぶ */
.top-future {
  overflow: hidden;
  position: relative;
  padding: 90px 0 0;
  background: #2f9b4b;
  color: #fff;
}

.top-future::before {
  position: absolute;
  top: 20px;
  left: 23%;
  width: 620px;
  height: auto;
  aspect-ratio: 920/803;
  background: url("../img/top/bg-top-future.webp") center/contain no-repeat;
  mix-blend-mode: multiply;
  transform: translateX(-50%);
  pointer-events: none;
  content: "";
}

.top-future__inner {
  position: relative;
  z-index: 1;
  width: 1000px;
  margin: 0 auto;
}

.top-future__heading {
  margin: 0 0 24px;
  padding-left: 50px;
  color: #fff;
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.top-future__heading em {
  font-size: 90px;
  font-style: normal;
}

.top-future__lead {
  margin: 0 0 45px;
  padding-left: 50px;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0.08em;
}

/* カンプ 261002_B2：写真 640x260、左端 460 / 376（inner 左端 100 からの差）、間隔 19.69 */
.top-future__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-future__item {
  position: relative;
  width: 640px;
  margin: 0;
}
.top-future__item:nth-child(odd) {
  margin-left: 360px;
}
.top-future__item:nth-child(even) {
  margin-left: 276px;
}

.top-future__link {
  display: block;
  color: #fff;
}

.top-future__pic {
  display: block;
}

.top-future__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ブラシ 568x207。写真の左端から -278 / -275、上端から +27 */
.top-future__caption {
  top: 27px;
  left: -278px;
  width: 568px;
  height: 207px;
}
.top-future__caption .future-brush__text {
  top: 59px;
  left: 119px;
  font-size: 30px;
  line-height: 40px;
}

.top-future__item:nth-child(even) .top-future__caption {
  left: -275px;
}

/* あなたが担う役割 */
.top-role {
  overflow: hidden;
  position: relative;
  padding: 157px 0 0;
  background: #2f9b4b;
  color: #fff;
}

.top-role::before {
  position: absolute;
  top: -200px;
  right: -180px;
  z-index: 1;
  width: 619px;
  height: 812px;
  background: url("../img/top/bg-top-interview02.svg") center/contain no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
  content: "";
}

.top-role__inner {
  position: relative;
  z-index: 2;
  width: 1000px;
  margin: 0 auto;
}

.top-role__heading {
  margin: 0 0 30px;
  color: #fff;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
}
.top-role__heading em {
  font-size: 90px;
  font-style: normal;
}

.top-role__lead {
  margin: 0 0 53px;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0.08em;
  text-align: center;
}

.top-role__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-role__item {
  display: flex;
  flex-direction: row-reverse;
  min-height: 380px;
  margin: 0 0 40px;
  background: #fff;
}
.top-role__item:last-child {
  margin-bottom: 0;
}

.top-role__item--reverse {
  flex-direction: row;
}

.top-role__image {
  flex: 0 0 570px;
}
.top-role__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-role__body {
  flex: 1;
  padding: 101px 40px 40px 58px;
  color: #278a3d;
}

.top-role__title {
  margin: 0 0 13px;
  color: #278a3d;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.33;
  letter-spacing: 0.08em;
}

.top-role__job {
  margin: 0 0 15px;
  color: #278a3d;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.top-role__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 36px;
  border: 1px solid #278a3d;
  border-radius: 18px;
  color: #278a3d;
  font-size: 30px;
}

/* 0からプロへ */
.top-pro {
  overflow: hidden;
  position: relative;
  padding: 231px 0 90px;
  background: #2f9b4b;
  color: #fff;
}

.top-pro::before {
  position: absolute;
  top: 130px;
  left: calc(50% - 565px);
  width: 660px;
  height: 774px;
  aspect-ratio: 1138/1335;
  background: url("../img/top/bg-top-pro.webp") center/contain no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
  content: "";
}

.top-pro__inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 70px;
  align-items: flex-start;
  width: 1000px;
  margin: 0 auto;
}

.top-pro__body {
  flex: none;
  box-sizing: border-box;
  width: 530px;
  padding-left: 50px;
}

.top-pro__heading {
  margin: 0 0 30px;
  color: #fff;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  /* 「0」はMV（.top-hero__title em）と同じ表現 */
}
.top-pro__heading em {
  display: inline-block;
  margin-right: 6px;
  font-size: 100px;
  font-style: normal;
  letter-spacing: -0.01em;
  font-feature-settings: "palt";
  transform: scaleX(1.2);
  transform-origin: left center;
  padding-right: 0.2em;
}
.top-pro__heading strong {
  font-size: 90px;
}

.top-pro__text {
  margin: 0 0 26px;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0.06em;
}

.top-pro__body .top-button {
  margin-top: 60px;
}

.top-pro__figure {
  flex: 1;
  margin: 0;
  padding-top: 68px;
  text-align: right;
}

.top-pro__figure-image {
  display: block;
  width: 480px;
  max-width: none;
  height: auto;
  margin: 0 0 0 -90px;
}

/* 1000人への道を歩く人たち */
.top-people {
  overflow: hidden;
  position: relative;
  padding: 116px 0 0;
  background: #2f9b4b;
  color: #fff;
}

/* 白ブラシ（bg-top-img-top-interview.svg）は写真画像に含まれているため ::before では出さない（20260907） */
.top-people::after {
  position: absolute;
  z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
  content: "";
}

.top-people::after {
  top: -280px;
  right: -320px;
  width: 619px;
  height: 812px;
  background-image: url("../img/top/bg-top-interview02.svg");
}

.top-people__inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
}

.top-people__heading {
  margin: 0 0 28px;
  color: #fff;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
}
.top-people__heading em {
  font-size: 90px;
  font-style: normal;
}
.top-people__heading strong {
  font-size: 70px;
  font-weight: inherit;
  letter-spacing: 0.06em;
}

.top-people__lead {
  margin: 0 0 26px;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0.08em;
  text-align: center;
  position: relative;
  z-index: 10;
}

.top-people__slider {
  position: relative;
  z-index: 2;
  width: 1200px;
  height: 920px;
  margin: -123px auto -34px;
}

.top-people__track {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-people__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.top-people__slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
}

.top-people__slide.is-prev,
.top-people__slide.is-next {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.top-people__photo {
  position: absolute;
  top: 0;
  left: 39px;
  width: 789px;
  transition: top 0.5s ease, left 0.5s ease, width 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
  /* 写真の後ろの緑ブラシ（カンプ index-pc 実測: 人物左上から左下へ抜ける）。
     スライドが stacking context を作るため mix-blend-mode は効かず、
     代わりに brightness で乗算相当の濃さにする */
}
.top-people__photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
.top-people__photo::before {
  position: absolute;
  top: 0;
  left: -20px;
  z-index: 1;
  width: 610px;
  aspect-ratio: 659/775;
  background: url("../img/top/bg-top-img-top-interview.svg") center/contain no-repeat;
  filter: brightness(0.55);
  pointer-events: none;
  content: "";
}

.top-people__slide.is-prev .top-people__photo,
.top-people__slide.is-next .top-people__photo {
  top: 187px;
  width: 492px;
  filter: blur(4px) saturate(0.85);
  opacity: 0.45;
}

.top-people__slide.is-prev .top-people__photo {
  left: -282px;
}

.top-people__slide.is-next .top-people__photo {
  left: 939px;
}

.top-people__body {
  position: absolute;
  top: 310px;
  left: 723px;
  width: 370px;
  transition: opacity 0.4s ease;
}

.top-people__slide.is-active .top-people__body {
  transition: none;
}

.top-people__slide.is-prev .top-people__body,
.top-people__slide.is-next .top-people__body {
  opacity: 0;
  visibility: hidden;
}

.top-people__quote {
  /* ワイプ演出のクリップ幅を文字幅に合わせる（箱幅のままだと余白ぶんが先に
     流れてしまい、文字が出きるのが一瞬になる）。fit-content は親幅を超えないので
     折り返しは従来どおり */
  width: fit-content;
  margin: 0 0 21px;
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.top-people__meta {
  /* 同上 */
  width: fit-content;
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.top-people__job {
  display: inline-block;
  /* 職種が2つ並ぶスライド（クロストーク）で幅を揃える。
     最長の「省エネコンサルタント（営業）」の実測幅 */
  min-width: 238px;
  margin-bottom: 20px;
  padding: 8px 16px;
  border: 1px solid #fff;
  border-radius: 6px;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-align: center;
}

.top-people__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 42px;
  border: 1px solid #fff;
  border-radius: 21px;
  color: #fff;
  font-size: 30px;
}

.top-people__nav {
  position: absolute;
  top: 187px;
  z-index: 3;
  width: 210px;
  height: 574px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.top-people__nav--prev {
  left: 0;
}

.top-people__nav--next {
  right: 0;
  width: 200px;
}

/* 挑戦と安心は、両立できる */
.top-dual {
  position: relative;
  /* 下 250px は写真帯（.top-roll）を被せる分 */
  padding: 140px 0 250px;
  background: #2f9b4b;
  color: #278a3d;
}

.top-dual::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1000px;
  background: #fff;
  transform: translateX(-50%);
  content: "";
}

.top-dual__inner {
  position: relative;
  z-index: 1;
}

.top-dual__inner {
  box-sizing: border-box;
  width: 1000px;
  margin: 0 auto;
  padding-left: 50px;
}

.top-dual__body {
  width: 540px;
}

.top-dual__heading {
  margin: 0 0 23px;
  color: #278a3d;
  font-feature-settings: "palt" 1;
  font-size: 48px;
  font-weight: 900;
  line-height: 67px;
  letter-spacing: 0.02em;
}
.top-dual__heading strong {
  font-size: 90px;
  font-weight: inherit;
  line-height: 67px;
}

.top-dual__text {
  margin: 0 0 32px;
  color: #278a3d;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0.06em;
}

.top-dual__body .top-button {
  margin-top: 52px;
}

.top-dual__photo {
  /* 基準は .top-dual__inner（上端 = セクション上端 + padding 140px） */
  position: absolute;
  z-index: 1;
  top: -60px;
  left: calc(50% + 80px);
  width: 420px;
  height: 620px;
  margin: 0;
}
.top-dual__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.top-dual__stat {
  box-sizing: border-box;
  /* 中身を上下中央に置く（高さ固定のため padding ではなく flex で寄せる） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 145px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 28px;
  background: rgba(247, 247, 247, 0.8);
  color: #00580d;
}

.top-dual__stat-label {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.1em;
}

.top-dual__stat-note {
  font-size: 13px;
}

.top-dual__stat-value {
  margin: 0;
  font-size: 70px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.02em;
  /* 行の上下のアキを字面（数字の高さ〜ベースライン）で切る。未対応ブラウザでは無視される */
  text-box: trim-both cap alphabetic;
}

.top-dual__stat-unit {
  margin-left: 4px;
  font-size: 26px;
}

/* 写真マーキー */
.top-roll {
  overflow: hidden;
  position: relative;
  /* 透過だと親（ページラッパー / body）の白が出るため、前後のセクションと同じ緑を敷く */
  z-index: 2;
  /* 背景は持たず、上は .top-dual の白/緑、下は .top-closing の緑を透かす */
  margin-top: -100px;
  background: none;
}

.top-roll::before {
  position: absolute;
  right: -180px;
  bottom: -220px;
  z-index: 1;
  width: 652px;
  height: 784px;
  background: url("../img/top/bg-top-roll.webp") center/contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
  content: "";
}

.top-roll__track {
  position: relative;
  z-index: 2;
  display: flex;
  width: max-content;
  animation: top-roll 45s linear infinite;
}

.top-roll__group {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-roll__item {
  width: 400px;
  margin-right: 40px;
}
.top-roll__item img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes top-roll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* クロージング */
.top-closing {
  position: relative;
  /* 写真帯（.top-roll）の下側を緑地に重ねる分だけ上に詰め、見出し位置は据え置く */
  /* 帯の高さ 261px − .top-dual に被せる 100px = 161px */
  margin-top: -161px;
  padding: 325px 0 0;
  background: #2f9b4b;
  color: #fff;
  text-align: center;
}

/* 背景の筆テクスチャは下の .entry-area まで垂らす（親の z-index は auto のまま） */
.top-closing::before {
  position: absolute;
  bottom: -130px;
  left: 50%;
  z-index: 1;
  width: 924px;
  height: auto;
  aspect-ratio: 1898/1465;
  background: url("../img/top/bg-top-entry.webp") center top/contain no-repeat;
  mix-blend-mode: multiply;
  transform: translateX(-50%);
  pointer-events: none;
  content: "";
}

.top-closing__inner {
  position: relative;
  z-index: 2;
  width: 1000px;
  margin: 0 auto;
}

/* 垂れてきたテクスチャより entry-area の中身を前面に置く（TOPページのみ） */
.top-page .entry-area__inner {
  z-index: 2;
}

.top-closing__heading {
  margin: 0 0 19px;
  color: #fff;
  font-size: 48px;
  font-weight: 900;
  line-height: 73px;
  letter-spacing: 0.04em;
}
.top-closing__heading em {
  font-size: 90px;
  font-style: normal;
  line-height: 73px;
}

.top-closing__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0.1em;
}

/* TOP：SP */
@media (max-width: 767px) {
  .top-button {
    /* 親より広いときは全幅、狭いときは 370px を中央に */
    width: min(370px, 100%);
    min-height: 48px;
    margin-inline: auto;
    font-size: 16px;
  }
  .top-button .top-button__arrow {
    font-size: 22px;
  }
  /* ヒーロー */
  .top-hero {
    height: 790px;
  }
  .top-hero__inner {
    width: 100%;
  }
  .top-hero__visual {
    inset: 0;
  }
  .top-hero__visual-item {
    top: -13px;
    left: calc(50% - 351px);
    width: 681px;
    max-width: none;
    transform: none;
  }
  .top-hero__visual-item.is-prev,
  .top-hero__visual-item.is-next {
    top: 144px;
    left: calc(50% + 139px);
    width: 345px;
  }
  .top-hero__visual-item.is-prev {
    left: calc(50% - 444px);
  }
  .top-hero__visual-nav {
    top: 150px;
    width: 24%;
    height: 420px;
  }
  .top-hero__catch {
    top: 80px;
    right: 13px;
    writing-mode: horizontal-tb;
    font-size: 55px;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-align: right;
  }
  .top-hero__title {
    top: 439px;
    left: 12px;
    font-size: 27px;
    line-height: 1.24;
  }
  .top-hero__title em {
    font-size: 71px;
  }
  .top-hero__title-unit {
    font-size: 27px;
  }
  .top-hero__title-strong {
    font-size: 37px;
  }
  .top-hero__news {
    top: auto;
    right: 24px;
    bottom: 38px;
    left: 24px;
    width: auto;
  }
  .top-hero__news-list {
    padding: 26px 0 16px;
  }
  .top-hero__news-date {
    font-size: 11px;
  }
  .top-hero__news-text {
    font-size: 12px;
    line-height: 1.3;
  }
  .top-hero__news-nav {
    top: 6px;
  }
  /* なぜ、1000人なのか。 */
  .top-why {
    padding: 39px 0 10px;
  }
  .top-why::before {
    right: 0;
    left: 0;
    width: auto;
    height: auto;
    /* 画像の実寸（2026-09-07 差し替え後: 1260x2148） */
    aspect-ratio: 1260/2148;
    background-image: url("../img/top/bg-top-why1000-sp.webp");
    background-size: 100% 100%;
  }
  .top-why__inner {
    width: auto;
    padding: 0 28px;
  }
  .top-why__heading {
    margin-bottom: 40px;
    font-size: 34px;
    /* 横120%にした分、58px のままだと「か。」が折り返す */
  }
  .top-why__heading em {
    font-size: 50px;
    padding-right: 0.15em;
    margin-right: 0.2em;
  }
  .top-why__heading-lead {
    font-size: 32px;
  }
  .top-why__text {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.5;
  }
  .top-why__emphasis {
    margin: 30px 0;
    font-size: 24px;
  }
  .top-why__closing {
    margin: 30px 0 40px;
    font-size: 21px;
  }
  /* 描く未来から選ぶ */
  .top-future {
    padding: 70px 0 68px;
  }
  .top-future::before {
    top: -5px;
    width: 320px;
    height: auto;
    left: 140px;
  }
  .top-future__inner {
    width: auto;
  }
  .top-future__heading {
    margin: 0 28px 30px;
    padding-left: 0;
    font-size: 32px;
    /* 55px だと「ぶ」だけ折り返す */
  }
  .top-future__heading em {
    font-size: 50px;
  }
  .top-future__lead {
    margin: 0 28px 32.5px;
    padding-left: 0;
    font-size: 16px;
    line-height: 1.6;
  }
  /* カンプ 261002_B2 SP：写真は全幅（750x361）、ブラシは写真上端の 118.5px 上から、
     写真の下端 → 次のブラシ 30.5px */
  .top-future__list {
    gap: 30.5px;
  }
  .top-future__item {
    width: 100%;
    margin: 0;
    padding-top: 118.5px;
  }
  .top-future__item:nth-child(odd), .top-future__item:nth-child(even) {
    margin-left: 0;
  }
  .top-future__link {
    position: static;
  }
  .top-future__image {
    height: auto;
    aspect-ratio: 750/361;
  }
  /* ブラシ 384.8x145.9（SP用の形）、左端は画面外 -34.7px */
  .top-future__caption,
  .top-future__item:nth-child(even) .top-future__caption {
    top: 0;
    left: -34.7px;
    width: 384.8px;
    height: 145.9px;
  }
  .top-future__caption .future-brush__text {
    top: 42px;
    left: 62px;
    font-size: 21.4px;
    line-height: 28.8px;
  }
  /* SPコピー「挑め。」の句点を詰めて、右端を「ゼロから」に揃える */
  .top-hero__catch-punct {
    margin-right: -0.5em;
  }
  /* あなたが担う役割 */
  .top-role {
    padding: 30px 0 80px;
  }
  .top-role::before {
    right: -240px;
    bottom: 180px;
    width: 390px;
    height: 511px;
  }
  .top-role__inner {
    width: auto;
    padding: 0 20px;
  }
  .top-role__heading {
    font-size: 32px;
  }
  .top-role__heading em {
    font-size: 55px;
  }
  .top-role__lead {
    margin-bottom: 50px;
    font-size: 16px;
    line-height: 1.6;
  }
  /* カンプ SP1：カードは幅 319px（375-56）で左右交互に画面端まで出す */
  .top-role__list {
    margin-inline: -28px;
  }
  .top-role__item,
  .top-role__item--reverse {
    display: block;
    min-height: 0;
    margin-bottom: 20px;
  }
  .top-role__item {
    margin-left: 56px;
    margin-right: 0;
  }
  .top-role__item--reverse {
    margin-left: 0;
    margin-right: 56px;
  }
  .top-role__image img {
    height: auto;
  }
  .top-role__body {
    padding: 30px 26px 40px 40px;
  }
  .top-role__title {
    font-size: 23px;
    line-height: 1.27;
  }
  .top-role__job {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.4;
  }
  .top-role__button {
    width: 64px;
    height: 36px;
    border-radius: 18px;
    font-size: 22px;
  }
  /* 0からプロへ */
  .top-pro {
    padding: 70px 0 70px;
  }
  .top-pro::before {
    top: 40px;
    left: calc(50% - 200px);
    width: 380px;
    height: auto;
  }
  .top-pro__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: auto;
    padding: 0 28px;
  }
  .top-pro__body {
    display: contents;
  }
  .top-pro__figure {
    order: 5;
  }
  .top-pro__body .top-button {
    order: 6;
  }
  .top-pro__heading {
    margin-bottom: 20px;
    font-size: 32px;
  }
  .top-pro__heading em {
    font-size: 65px;
  }
  .top-pro__heading strong {
    font-size: 55px;
  }
  .top-pro__text {
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.6;
  }
  .top-pro__figure {
    padding-top: 20px;
  }
  /* 図はボタンと同じ横幅まで広げる */
  .top-pro__figure-image {
    /* SPカンプ（750px幅）で 635px */
    width: 84.6666455vw;
    max-width: none;
    margin: 0 auto;
  }
  .top-pro__body .top-button {
    margin-top: 70px;
  }
  /* 1000人への道を歩く人たち */
  .top-people {
    padding: 70px 0;
  }
  .top-people::after {
    top: -330px;
    right: -290px;
    width: 470px;
    height: auto;
    aspect-ratio: 390/511;
  }
  .top-people__heading {
    margin-bottom: 30px;
    font-size: 32px;
    line-height: 1.2;
  }
  .top-people__heading strong {
    font-size: 45px;
  }
  .top-people__heading em {
    font-size: 55px;
  }
  .top-people__lead {
    margin: 0 28px 60px;
    font-size: 16px;
    line-height: 1.6;
  }
  .top-page .entry-area {
    padding-top: 35px;
  }
  .top-people__slider {
    width: 100%;
    height: auto;
  }
  .top-people__track {
    position: relative;
    inset: auto;
  }
  .top-people__slide {
    position: relative;
    inset: auto;
    display: none;
    text-align: center;
  }
  .top-people__slide.is-active {
    display: block;
  }
  .top-people__slide.is-prev,
  .top-people__slide.is-next {
    display: none;
  }
  .top-people__photo {
    position: relative;
    top: auto;
    /* 375px 設計の -111px を、どの画面幅でも写真（592px）が横中央になる形に。::before は写真基準なので位置関係は変わらない */
    left: calc(50% - 296px);
    width: 592px;
    margin-bottom: -120px;
  }
  .top-people__photo::before {
    top: 25px;
    left: 0;
    width: 430px;
    aspect-ratio: 430/506;
  }
  .top-people__body {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    padding: 0 24px;
    z-index: 10;
  }
  .top-people__quote {
    /* PCで width: fit-content にしているぶん、SPの中央寄せは auto マージンで保つ */
    margin-right: auto;
    margin-bottom: 25px;
    margin-left: auto;
    font-size: 24px;
    line-height: 1.41;
  }
  .top-people__meta {
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    font-size: 14px;
    line-height: 1.43;
  }
  .top-people__job {
    /* SP は padding 18px ぶん広い。同じく最長ラベルの実測幅 */
    min-width: 242px;
    margin-bottom: 30px;
    padding: 8px 18px;
    font-size: 14px;
  }
  .top-people__button {
    margin: 0 auto;
    font-size: 22px;
  }
  .top-people__nav {
    top: 0;
    width: 22%;
    height: 62%;
  }
  .top-people__nav--next {
    width: 22%;
  }
  /* 挑戦と安心は、両立できる */
  .top-dual {
    padding: 70px 0 40px;
  }
  .top-dual__inner {
    display: block;
    width: auto;
    /* 28px だと 375px 幅で「自分の時間も大切にしながら働きたい。」（320px）が 1px 足りず折り返す */
    padding: 0 24px;
  }
  .top-dual__body {
    /* PC の width: 540px を解除しないと .top-dual__inner（画面幅 - 56px）を
       はみ出し、「働く環境を知る」ボタンが右で切れる */
    width: auto;
    padding-top: 0;
  }
  .top-dual::before {
    left: 0;
    width: 100%;
    transform: none;
  }
  .top-dual__heading {
    margin-bottom: 30px;
    font-size: 32px;
    /* 0.06em継承だと1行目「挑戦と安心は、」が375px幅で折り返して
       「は、」が孤立行になる。カンプは詰め組みで1行に収まっている */
    letter-spacing: 0;
    line-height: 1.5;
  }
  .top-dual__heading strong {
    font-size: 55px;
    line-height: inherit;
  }
  .top-dual__text {
    margin-bottom: 30px;
    font-size: 16px;
    /* 0.06em継承だと「〜両方諦めない。」が321px>コンテナ319pxで
       「い。」だけ折り返す。カンプは約物詰めで1行に収まっている */
    letter-spacing: 0;
    line-height: 1.6;
  }
  .top-dual__photo {
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    max-width: 420px;
    height: auto;
    margin: 40px auto 0;
  }
  .top-dual__photo img {
    height: auto;
  }
  .top-dual__stat {
    /* 画像下段の写真帯（画像高さの 160/640 = 25%）に高さを合わせる */
    height: 25%;
    bottom: 0;
    padding: 0 20px;
  }
  .top-dual__stat-label {
    font-size: 16px;
  }
  .top-dual__stat-note {
    font-size: 14px;
  }
  .top-dual__stat-value {
    font-size: 62px;
    /* 25% の高さ（375px で約125px）に収めるため詰める */
    line-height: 1;
  }
  .top-dual__stat-unit {
    font-size: 23px;
  }
  /* 写真マーキー */
  .top-roll {
    /* PC の被せ（margin-top:-100px）は SP では写真に掛かるので戻す */
    margin-top: 0;
    background: none;
  }
  .top-roll::before {
    right: -245px;
    bottom: -120px;
    width: 520px;
    height: 626px;
    background: none;
  }
  /* カンプ SP2：写真幅 300px・間隔 30px */
  .top-roll__item {
    width: 300px;
    margin-right: 30px;
  }
  /* クロージング */
  .top-closing {
    margin-top: -100px;
    padding: 210px 0 30px;
  }
  .top-closing::before {
    top: 80px;
    width: 760px;
    height: 587px;
  }
  .top-closing__inner {
    width: auto;
    padding: 0 24px;
  }
  .top-closing__heading {
    margin-bottom: 40px;
    font-size: 32px;
    line-height: 50px;
  }
  .top-closing__heading em {
    font-size: 55px;
    line-height: 40px;
  }
  .top-closing__text {
    font-size: 16px;
    line-height: 1.6;
  }
  .top-page .entry-area::before {
    content: none;
  }
}
@media (max-width: 767px) {
  .page-hero {
    height: 195px;
  }
  .site-intro::after {
    width: 370px;
    top: -176px;
    right: -224px;
    height: 100%;
    background-size: contain;
  }
  /* カンプSP実測（6ページ共通）: 見出しink 高さ26.5px＝28px相当、ink上端 y=107.5 */
  .page-hero .page-hero__title {
    font-size: 28px;
  }
  .page-hero .page-hero__inner {
    width: 100%;
    padding: 104px 20px 0;
  }
  .page-hero::before {
    top: 43px;
    right: -210px;
    width: 410px;
    height: 100%;
    background-size: cover;
    background-position: right top;
  }
  .faq-intro__inner {
    max-width: 100%;
    padding: 0 20px;
  }
  .faq-intro {
    padding: 43px 0 94px;
  }
  .faq-section__inner {
    max-width: 100%;
  }
  .faq-intro__title {
    font-size: 22px;
  }
  .faq-intro__text {
    font-size: 16px;
  }
  .arrow-button {
    gap: 20px;
    width: 320px;
    height: 48px;
    font-size: 16px;
  }
  .arrow-button__arrow {
    font-size: 22px;
  }
  .arrow-badge {
    width: 56px;
    height: 26px;
    font-size: 21px;
  }
  .u-br-pc {
    display: none;
  }
  .u-br-sp {
    display: inline;
  }
  .site-text--pc {
    display: none;
  }
  .site-text--sp {
    display: inline;
  }
  .faq-section__title {
    color: #278a3d;
    font-size: 20px;
  }
  .faq-section {
    padding: 0 0 94px;
  }
  .faq-item__text {
    font-size: 16px;
  }
  .faq-item__label {
    font-size: 22px;
  }
  .faq-item__answer {
    padding-right: 43px;
  }
  .faq-item__question {
    align-items: flex-start;
    gap: 16px;
    min-height: auto;
    padding: 16px 46px 16px 0;
  }
  .faq-item__question::before, .faq-item__question::after {
    right: 15px;
  }
}
@media (max-width: 767px) {
  .entry-area {
    padding: 44px 0 58px;
  }
  /* カンプSP実測: 筆は右端寄せで、帯の上端から57px上（上のセクションの上）まで出る。
     頂点が x=348.8、帯上端での左端が x=279.8 になる大きさ＝幅360px・右-80px。 */
  .entry-area::before {
    top: -73px;
    right: -210px;
    left: auto;
    width: 660px;
    max-width: none;
    aspect-ratio: 1898/1465;
    transform: none;
  }
  .entry-area .entry-area__inner {
    width: 100%;
    padding-inline: 46px;
  }
  /* カンプ SP2：▼ はボタン幅の左右端まで開く */
  .entry-area .entry-area__heading {
    justify-content: center;
    gap: 0;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.5);
    /* カンプSP実測: ink 161 x 41px */
    font-size: 57px;
  }
  .entry-area__mark {
    border-top: 25px solid rgba(255, 255, 255, 0.5);
  }
  .entry-area__mark:first-child {
    margin-right: 20px;
  }
  .entry-area__mark:last-child {
    margin-left: 20px;
  }
  /* カンプ SP2：ラベルは左寄せ・矢印は右端 */
  .entry-area .entry-area__buttons a,
  .entry-area .entry-area__wide {
    justify-content: flex-start;
    /* カンプSP実測: 本文の左は帯内側から15px、右は矢印ぶんだけ空ける */
    padding-right: 40px;
    padding-left: 15px;
    text-align: left;
  }
  .entry-area .entry-area__wide {
    place-items: center start;
  }
  /* カンプSP実測: 【自社サイトからエントリー】は32pt=16px */
  .entry-area .entry-area__wide strong {
    font-size: 16px;
  }
  .entry-area .entry-area__buttons--primary,
  .entry-area .entry-area__buttons--secondary {
    grid-template-columns: 1fr;
  }
  /* カンプ SP2 実測：ボタン高さと間隔 */
  .entry-area .entry-area__buttons--primary {
    gap: 10px;
    margin-bottom: 40px;
  }
  .entry-area .entry-area__buttons--primary a {
    min-height: 68px;
  }
  .entry-area .entry-area__buttons--secondary {
    gap: 8px;
  }
  .entry-area .entry-area__buttons--secondary a {
    min-height: 49px;
  }
  .entry-area .entry-area__wide {
    /* カンプSP実測: 枠は179/2=89px、下の募集要項まで11px */
    min-height: 89px;
    margin-bottom: 11px;
    /* PC側の行送り1.5化（カンプPC実測）の影響を受けないようSPは従来値を維持 */
    line-height: 1.65;
  }
  .entry-area .entry-area__link,
  .entry-area .entry-area__buttons--secondary .entry-area__link {
    font-size: 16px;
  }
  /* measure-comp(--page 2): 26.00pt / 実効 26.01pt → letter-spacing 0 */
  .global-nav__entry-title {
    font-size: clamp(13px, 3.4666658vw, 16px);
    letter-spacing: 0;
  }
  .entry-area__arrow {
    font-size: 22px;
  }
  .entry-area .entry-area__wide .entry-area__text {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .culture-quote__decoration--left {
    left: 74%;
    top: calc(100% - 283px);
    z-index: -1;
    width: 340px;
    height: 100%;
    background-image: url("../img/culture/bg-main-side-l.svg");
    aspect-ratio: 220/250;
  }
  .culture-quote__decoration--right {
    left: 48%;
    top: calc(100% - 253px);
    z-index: -1;
    width: 390px;
    height: auto;
    background-image: url("../img/culture/bg-main-side-r.svg");
    aspect-ratio: 480/630;
  }
}
/* ---------------------------------------------
   仕事を知る個別：省エネコンサルタント（営業）
--------------------------------------------- */
/* ヘッダー下のパンくずバー（共通ヘッダーはページ側で位置のみ調整） */
/* ▶付きセクション見出し */
/* MV */
/* リード */
/* 行頭の「 を半角ぶら下げ（デザインの文字組みに合わせる） */
/* 特長〜フィールドまでの淡緑背景 */
/* 仕事における3つの特長 */
/* 成長ステップとキャリアパス */
/* アシスタントの矢印先端をプロフェッショナルのバーより前面に出す */
/* 年次ボックスより一段上から本文が始まるデザインのため上方向にずらす */
/* 罫線ボタン */
/* 省エネコンサルタントのフィールド */
/* 〜人たち（people-card を流用） */
/* ---------------------------------------------
   仕事を知る個別：省エネコンサルタント（営業） SP
   デザイン750px幅 → CSS375px（÷2）で実装
--------------------------------------------- */
@media (max-width: 767px) {
  /* ヘッダー：SP共通の60pxに戻す（パンくずはSP共通で非表示） */
  /* ▶付き見出し：本文よりさらに内側に入る */
  /* MV：写真が上、コピーは下の淡緑パネル */
  /* リード：図版は下に回して中央寄せ */
  /* 3つの特長：画像はテキストの下に回り込む */
  /* キャリアパス：年次ボックスの下に本文が回り込む */
  /* 罫線ボタン */
  /* フィールド：ラベルは中央寄せ、本文はその下 */
  /* 〜人たち：写真が上、テキストが下 */
  /* 写真は左寄せ・カンプ実寸。それ以外は共通SPの値を使う */
}
/* =========================================
   エコ・プランを知る（about）
   ========================================= */
/* ヒーローはPC 1200×315／SP 375×180 の書き出しを出し分ける */
.about-page .hero-image {
  display: block;
}

.about-inner {
  width: 1000px;
  margin: 0 auto;
}

/* 私たちについて --------------------------------- */
.about-intro {
  padding: 109px 0 117px;
}

.about-intro__title,
.about-value__title,
.about-mission__title,
.about-numbers__title {
  margin: 0;
  color: #16833a;
  font-size: 46px;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.about-intro__text,
.about-mission__text {
  margin: 28px 0 0;
  font-size: 22px;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.about-story {
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
}

.about-story__item {
  position: relative;
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 27px;
  min-height: 300px;
}
.about-story__item:not(:last-child)::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 58px;
  width: 2px;
  background: #2f9b4b;
  content: "";
}

.about-story__number {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  margin: 0;
  border-radius: 50%;
  background: #2f9b4b;
  color: #fff;
  font-size: 60px;
  font-weight: bold;
  line-height: 0.9;
  letter-spacing: 0.02em;
}

.about-story__label {
  margin-bottom: 0;
  font-size: 15px;
  letter-spacing: 0.12em;
}

.about-story__body {
  padding-top: 40px;
}

.about-story__title {
  margin: 0 0 25px;
  color: #16833a;
  font-size: 29px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.about-story__text {
  width: 680px;
  margin: 0;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0.02em;
}

/* 提供する価値 ----------------------------------- */
.about-value {
  padding: 108px 0 124px;
  background: #f0f7f2;
}

.about-value__inner {
  position: relative;
}

.about-value__body {
  width: 620px;
}

.about-value__lead {
  margin: 8px 0 0;
  color: #16833a;
  font-size: 29px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.about-value__text {
  margin: 30px 0 0;
  font-size: 16px;
  line-height: 2;
  /* カンプのトラッキング指定は 0.2em（PDF内部も 0.2 Tc）だが、
     イラレの日本語詰め組みが TJ で引き戻すため実効の字送りは 17.9〜18.0pt。
     CSS に詰め組みは無いので、見た目を合わせる実効値 2px を指定する */
  letter-spacing: 0.125em;
}

.about-value__text + .about-value__text {
  margin-top: 32px;
}

.about-value__list {
  display: grid;
  grid-template-columns: 215px auto;
  gap: 11px 0;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  color: #16833a;
  font-size: 18px;
  line-height: 1.78;
}

.about-value__item::before {
  content: "- ";
}

/* リンクと分かるように下線（クライアント見本：2px・$green-dark 40%・字面の下 約4px） */
.about-value__link {
  text-decoration: underline;
  text-decoration-color: rgba(22, 131, 58, 0.4);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* 4事業の図 */
.about-value__map {
  position: absolute;
  top: 41px;
  right: 2px;
  width: 486px;
  height: 450px;
}
.about-value__map::before {
  position: absolute;
  top: 71px;
  left: 82px;
  width: 311px;
  height: 311px;
  border: 1px solid #2f9b4b;
  border-radius: 50%;
  content: "";
}

.about-value__map-center {
  position: absolute;
  top: 189px;
  left: 0;
  z-index: 1;
  width: 100%;
  margin: 0;
  color: #2f9b4b;
  font-size: 24px;
  line-height: 1.3;
  text-align: center;
  font-weight: bold;
}

.about-value__map-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 137px;
  height: 137px;
  border-radius: 50%;
  background: #2f9b4b;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: center;
}

.about-value__map-item--top {
  top: 0;
  left: 169px;
}

.about-value__map-item--left {
  top: 156px;
  left: 0;
}

.about-value__map-item--right {
  top: 156px;
  left: 349px;
}

.about-value__map-item--bottom {
  top: 315px;
  left: 174px;
}

/* 大切にしていること ------------------------------ */
.about-mission {
  padding: 107px 0 121px;
}

.about-mission__subtitle {
  margin: 56px 0 0;
  color: #16833a;
  font-size: 46px;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.about-mission__number {
  font-size: 56px;
}

.about-slogan {
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}

.about-slogan__item {
  position: relative;
}

.about-slogan__item:not(:last-child) {
  min-height: 280px;
}

.about-slogan__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 26px;
  color: #16833a;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.about-slogan__number {
  font-size: 19px;
  font-weight: bold;
}

.about-slogan__text {
  width: 680px;
  margin: 0;
  font-size: 18px;
  line-height: 1.89;
  letter-spacing: 0.02em;
}

.about-slogan__image {
  position: absolute;
  top: 0;
  right: -100px;
  display: block;
  width: 360px;
  height: 221px;
}

.about-slogan__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 数字で見るエコ・プラン --------------------------- */
.about-numbers {
  padding: 114px 0 159px;
  background: #f0f7f2;
}

.about-numbers__subtitle {
  margin: 68px 0 36px;
  color: #16833a;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.about-grid {
  display: grid;
  gap: 24px;
}

.about-grid + .about-numbers__subtitle {
  margin-top: 80px;
}

.about-grid--company {
  grid-template-columns: 606px 370px;
  grid-template-rows: 188px 188px;
}

.about-grid--company .about-card--sales {
  grid-row: span 2;
}

.about-grid--people {
  grid-template-columns: repeat(4, 1fr);
}

.about-card {
  position: relative;
  padding: 36px 40px;
  background: #fff;
  color: #16833a;
  overflow: hidden;
}

.about-card__head,
.about-card__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.about-card__title {
  font-size: 24px;
  text-align: center;
}

.about-card__value {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  margin: 0;
}

.about-card__number {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

/* カンプのカンマは数字より一回り小さい（ink 8x13px → 40px相当） */
.about-card__comma {
  font-size: 40px;
}

.about-card__unit {
  margin-left: 6px;
  font-size: 18px;
  font-style: normal;
}

.about-card__note {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  font-size: 16px;
  letter-spacing: 0;
}

.about-card__sub {
  position: relative;
  z-index: 1;
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

/* 売上 -------------------------------------------- */
.about-card--sales {
  padding: 0;
}

.about-card__chart {
  display: block;
}

.about-card__chart-img {
  display: block;
  width: 100%;
  height: auto;
  /* SVG差し替え時に固有サイズが取れなくても比率を保つ（カンプ 606x400） */
  aspect-ratio: 606/400;
}

/* 設立年・取引企業数 -------------------------------- */
.about-card--founded {
  padding: 45px 27px;
}

.about-card--founded .about-card__icon {
  position: absolute;
  top: 52px;
  right: 30px;
  width: 107px;
  height: auto;
}

/* 取引企業数はビル画像と重ならないよう、カンプ実測（見出し左27px／数字上端64px）に合わせる */
.about-card--clients {
  padding: 24px 27px;
}

/* 吹き出しは書き出し画像に文字が入っていないためテキストを重ねる */
.about-card__bubble {
  position: absolute;
  top: 18px;
  right: 28px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 101px;
  height: 109px;
  margin: 0;
  padding-bottom: 6px;
  background: url("../img/about/bg-img-fukidashi.webp") 0 0/101px 109px no-repeat;
}

.about-card__bubble-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.about-card__bubble-figure {
  display: flex;
  align-items: baseline;
}

.about-card__bubble-value {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.about-card__bubble-unit {
  font-size: 15px;
  font-style: normal;
}

.about-card__icon--buildings {
  position: absolute;
  right: 30px;
  bottom: 21px;
  width: 310px;
  height: auto;
}

/* 事業所拠点・出身地割合 ---------------------------- */
.about-card--locations {
  grid-column: span 4;
  min-height: 320px;
  padding: 0;
}

.about-card__area {
  position: absolute;
  top: 34px;
  left: 40px;
}

.about-card__map {
  position: absolute;
  top: 7px;
  left: 152px;
  width: 242px;
  height: auto;
}

.about-card__map-img {
  display: block;
  width: 100%;
  height: auto;
  /* SVG差し替え時に固有サイズが取れなくても比率を保つ（カンプ 242x242） */
  aspect-ratio: 1/1;
}

.about-card__area--origin {
  top: 41px;
  left: 474px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 526px;
  height: 234px;
  padding-left: 51px;
  background: url("../img/about/ic-numbers-divider.webp") 6px 7px/18px 236px no-repeat;
}

.about-card__area--origin .about-card__head {
  margin-bottom: 22px;
}

.origin-list {
  display: grid;
  grid-template-columns: repeat(3, 145px);
  gap: 25px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.origin-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.origin-list__label {
  display: grid;
  flex: none;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #2f9b4b;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.origin-list__label--small {
  font-size: 14px;
  line-height: 1.2;
}

.origin-list__value {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.origin-list__unit {
  /* % を数字に対して下揃え（円60px・数字38px → 数字の下端は円の下端から11px） */
  align-self: flex-end;
  margin-bottom: 11px;
  margin-left: 2px;
  font-size: 17px;
  font-style: normal;
}

/* デュアルキャリア・平均年齢 ------------------------- */
.about-card--split {
  display: grid;
  /* 緑パネル幅はカンプ指定: 平均年齢190px / 社員数264px（PCカード幅488px基準） */
  grid-template-columns: 190px 1fr;
  grid-column: span 2;
  min-height: 320px;
  padding: 0;
  overflow: visible;
}

.about-card--dual {
  grid-template-columns: 264px 1fr;
}

.about-card__lead {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 22px;
  background: #2f9b4b;
  color: #fff;
}
.about-card__lead::after {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 16px;
  height: 16px;
  background: #2f9b4b;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateY(-50%);
  content: "";
}

.about-card__lead-head {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.about-card__lead-value {
  display: flex;
  align-items: baseline;
  margin: 8px 0 0;
}

.about-card__lead .about-card__number {
  font-size: 76px;
}

.about-card__lead .about-card__unit {
  font-size: 24px;
}

.about-card--age .about-card__lead {
  align-items: center;
  text-align: center;
}

.about-card--age .about-card__lead-value {
  justify-content: center;
}

.club-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 16px 20px 16px 60px;
  list-style: none;
}

.club-list__item {
  display: flex;
  align-items: center;
  gap: 18px;
}

.club-list__icon {
  flex: none;
  width: 40px;
  height: auto;
}

.club-list__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 数字と単位はひとまとまり（grid だと部名の幅が数字列に配られて「名」がずれる） */
.club-list__count {
  display: flex;
  align-items: baseline;
}

.club-list__name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}

.club-list__value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.club-list__unit {
  margin-left: 2px;
  font-size: 18px;
  font-style: normal;
}

/* 年代構成 ----------------------------------------- */
.age-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  margin: 0;
  padding: 22px 34px 22px 42px;
  list-style: none;
}

.age-list__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 0 4px;
}

.age-list__label {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}

.age-list__value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.age-list__unit {
  font-size: 18px;
  font-style: normal;
}

.age-list__bar {
  grid-column: 1/-1;
  display: block;
  height: 9px;
  margin-top: 4px;
  border-radius: 5px;
  background: #e3e3e3;
}

.age-list__bar-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: #2f9b4b;
}

.age-list__item:nth-child(2) .age-list__bar-fill {
  background: #4cae63;
}

.age-list__item:nth-child(3) .age-list__bar-fill {
  background: #a0e28a;
}

.age-list__item:nth-child(4) .age-list__bar-fill {
  background: #4d4d4d;
}

/* 円グラフ（文理比・職種比率） ---------------------- */
.about-card--chart {
  grid-column: span 2;
  min-height: 320px;
  padding: 24px 30px;
  text-align: center;
}

.about-card__graph {
  display: flex;
  justify-content: center;
  margin: 14px 0 0;
}

.about-card__graph-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* SVG差し替え時に固有サイズが取れなくても比率を保つ。
   .about-card__graph-img は文理比と職種比率で比率が違うためカード側で分ける */
.about-card--bunri .about-card__graph-img {
  /* カンプ 376x263 */
  aspect-ratio: 376/263;
}

.about-card--chart:not(.about-card--bunri) .about-card__graph-img {
  /* カンプ 415x214 */
  aspect-ratio: 415/214;
}

.about-card--bunri .about-card__graph {
  margin-top: 4px;
}

/* 新卒採用者数・リーダー ---------------------------- */
.about-card--newgrads,
.about-card--leader {
  grid-column: span 2;
  min-height: 280px;
  padding: 28px 30px;
}

.newgrads-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  justify-items: center;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.newgrads-list__item {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  justify-content: start;
}

.newgrads-list__year {
  grid-column: 1/-1;
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
}

.newgrads-list__value {
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.newgrads-list__unit {
  margin-left: 5px;
  font-size: 20px;
  font-style: normal;
}

.about-card__people {
  display: block;
  width: 394px;
  height: auto;
  margin: 20px auto 0;
}

.about-card__title--left {
  text-align: left;
}

/* リーダー・責任者はタイトル・数値を左寄せ、内容を上下中央にする */
.about-card--leader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 62px;
}

.about-card--leader .about-card__value {
  justify-content: flex-start;
  margin-top: 16px;
}

.about-card--leader .about-card__number {
  font-size: 96px;
}

.about-card--leader .about-card__unit {
  font-size: 40px;
}

.about-card--leader .about-card__icon {
  position: absolute;
  top: 96px;
  right: 64px;
  width: 106px;
  height: auto;
}

/* 小カード4つ -------------------------------------- */
.about-card--small {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 190px;
  /* 右はアイコン分を空ける（数字がアイコンに触れないように） */
  padding: 24px 84px 24px 24px;
}

/* 「（女性100％　男性13％）」はアイコンより下に出るので、アイコン分の余白を無視して1行に */
.about-card--small .about-card__sub {
  margin-right: -70px;
  white-space: nowrap;
}

.about-card--small .about-card__number {
  font-size: 64px;
}

.about-card--small .about-card__unit {
  font-size: 24px;
}

.about-card--small .about-card__icon {
  position: absolute;
  top: 50%;
  right: 16px;
  width: auto;
  height: 70px;
  transform: translateY(-50%);
}

/* =========================================
   エコ・プランを知る（about）SP
   ========================================= */
@media (max-width: 767px) {
  .about-page .hero-image {
    height: 180px;
  }
  .about-inner {
    width: auto;
    margin: 0 20px;
  }
  /* 私たちについて */
  .about-intro {
    padding: 50px 0 60px;
  }
  .about-intro__title,
  .about-value__title,
  .about-mission__title,
  .about-numbers__title {
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .about-intro__text,
  .about-mission__text {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: 0.03em;
  }
  .about-story {
    margin-top: 84px;
  }
  .about-story__item {
    grid-template-columns: 90px 1fr;
    gap: 20px;
    min-height: 0;
    /* アイテム間 58px のマージンぶん延ばさないと縦線が途切れる */
  }
  .about-story__item:not(:last-child)::before {
    bottom: -58px;
    left: 44px;
  }
  .about-story__item + .about-story__item {
    margin-top: 58px;
  }
  .about-story__number {
    width: 90px;
    height: 90px;
    font-size: 36px;
  }
  .about-story__label {
    margin-bottom: 2px;
    font-size: 11px;
  }
  .about-story__body {
    padding-top: 4px;
  }
  .about-story__title {
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 1.5;
  }
  .about-story__text {
    width: auto;
    font-size: 17px;
    line-height: 1.42;
    letter-spacing: 0.04em;
  }
  /* 提供する価値 */
  .about-value {
    padding: 57px 0 40px;
  }
  .about-value__inner {
    position: static;
  }
  .about-value__body {
    width: auto;
  }
  .about-value__lead {
    margin-top: 4px;
    font-size: 19px;
    line-height: 1.45;
  }
  .about-value__text {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.81;
    letter-spacing: 0;
  }
  .about-value__text + .about-value__text {
    margin-top: 32px;
  }
  .about-value__list {
    grid-template-columns: 1fr;
    gap: 12px 0;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.6;
  }
  .about-value__map {
    position: relative;
    top: auto;
    right: auto;
    width: 339px;
    height: 313px;
    margin: 30px auto 40px;
  }
  .about-value__map::before {
    top: 52px;
    left: 64px;
    width: 210px;
    height: 210px;
  }
  .about-value__map-center {
    top: 132px;
    font-size: 19px;
  }
  .about-value__map-item {
    width: 100px;
    height: 100px;
    font-size: 12px;
    line-height: 1.4;
  }
  .about-value__map-item--top {
    top: 0;
    left: 117px;
  }
  .about-value__map-item--left {
    top: 107px;
    left: 0;
  }
  .about-value__map-item--right {
    top: 107px;
    left: 239px;
  }
  .about-value__map-item--bottom {
    top: 213px;
    left: 120px;
  }
  /* 大切にしていること */
  .about-mission {
    padding: 58px 0 40px;
  }
  .about-mission__subtitle {
    margin-top: 17px;
    font-size: 23px;
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .about-mission__number {
    font-size: 30px;
  }
  .about-slogan {
    margin-top: 34px;
  }
  .about-slogan__item {
    min-height: 0;
  }
  .about-slogan__item:not(:last-child) {
    min-height: 0;
    margin-bottom: 30px;
  }
  .about-slogan__title {
    gap: 6px;
    margin-bottom: 8px;
    font-size: 20px;
  }
  .about-slogan__number {
    font-size: 15px;
  }
  .about-slogan__text {
    width: auto;
    font-size: 16px;
    line-height: 1.81;
    letter-spacing: 0;
  }
  .about-slogan__image {
    position: relative;
    top: auto;
    right: -20px;
    width: 72vw; /* カンプ 540/750 */
    height: auto;
    margin: 16px 0 0 auto;
    aspect-ratio: 540/330;
  }
  /* 数字で見るエコ・プラン */
  .about-numbers {
    padding: 60px 0 74px;
  }
  .about-numbers__subtitle {
    margin: 44px 0 20px;
    font-size: 21px;
  }
  .about-grid + .about-numbers__subtitle {
    margin-top: 44px;
  }
  .about-grid {
    gap: 13px;
  }
  .about-grid--company,
  .about-grid--people {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .about-grid--company .about-card--sales {
    grid-row: auto;
    /* 下の .about-card{padding} に負けて画像が小さくなるので明示 */
    padding: 0;
  }
  .about-card {
    padding: 16px 24px;
  }
  .about-card__head,
  .about-card__title {
    font-size: 16px;
  }
  .about-card__value {
    margin-top: 2px;
  }
  .about-card__number {
    font-size: 46px;
  }
  .about-card__comma {
    font-size: 10px;
  }
  .about-card__unit {
    font-size: 16px;
  }
  .about-card__note {
    margin-top: 6px;
    font-size: 13px;
  }
  .about-card__sub {
    font-size: 11px;
  }
  /* 設立年・取引企業数 */
  .about-card--founded {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 139px;
  }
  .about-card--founded .about-card__icon {
    top: 37px;
    right: 41px;
    width: 83px;
  }
  .about-card--clients {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 179px;
    /* ビルのアイコン分（下 約60px）を除いた高さに対して上下センター */
    padding-bottom: 66px;
  }
  .about-card__bubble {
    top: 18px;
    right: 36px;
    width: 92px;
    height: 99px;
    padding-bottom: 13px;
    background-size: 92px 99px;
  }
  .about-card__bubble-label {
    font-size: 14px;
  }
  .about-card__bubble-value {
    font-size: 38px;
  }
  .about-card__bubble-unit {
    font-size: 14px;
  }
  .about-card__icon--buildings {
    right: 22px;
    bottom: 19px;
    width: 293px;
  }
  /* 事業所拠点・出身地割合 */
  .about-card--locations {
    grid-column: auto;
    min-height: 509px;
  }
  .about-card--locations .about-card__number {
    font-size: 52px;
  }
  .about-card__area {
    position: static;
    min-height: 214px;
    padding: 8px 4px 0;
  }
  .about-card__map {
    position: absolute;
    top: 30px;
    right: 30px;
    left: auto;
    width: 188px;
  }
  .about-card__area--origin {
    width: auto;
    height: auto;
    padding: 46px 0 0;
    background: url("../img/about/ic-numbers-divider-sp.webp") center 20px/289px 12px no-repeat;
  }
  .about-card__area--origin .about-card__head {
    margin-bottom: 16px;
    text-align: left;
    margin-left: 2.5em;
  }
  /* 鍋ふた型の仕切りに対してセンターに */
  .origin-list {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 14px 40px;
  }
  .origin-list__item {
    gap: 8px;
  }
  .origin-list__label {
    width: 54px;
    height: 54px;
    font-size: 14px;
  }
  .origin-list__label--small {
    font-size: 12px;
  }
  .origin-list__value {
    font-size: 32px;
  }
  .origin-list__unit {
    font-size: 14px;
  }
  /* デュアルキャリア・平均年齢 */
  .about-card--split {
    grid-column: auto;
    /* PCと同じ「緑パネル:カード」比率を維持（190/488） */
    grid-template-columns: 38.934% 1fr;
    min-height: 234px;
    padding: 0;
  }
  .about-card--dual {
    grid-template-columns: 54.098% 1fr; /* PC比率 264/488 */
  }
  .about-card__lead {
    padding: 0 18px;
  }
  .about-card__lead-head {
    font-size: 16px;
  }
  .about-card__lead .about-card__number {
    font-size: 52px;
  }
  .about-card__lead .about-card__unit {
    font-size: 18px;
  }
  .about-card__lead::after {
    width: 16px;
    height: 16px;
  }
  .club-list {
    gap: 4px;
    padding: 10px 10px 10px 26px;
  }
  .club-list__item {
    gap: 10px;
    /* 人数がどの部のものか分かるよう、部名に寄せて項目間は空ける */
    margin-bottom: 6px;
  }
  .club-list__icon {
    width: 36px;
  }
  .club-list__name {
    font-size: 13px;
    line-height: 1;
  }
  .club-list__value {
    font-size: 30px;
  }
  .club-list__unit {
    font-size: 14px;
  }
  .about-card--age {
    min-height: 226px;
  }
  .age-list {
    gap: 8px;
    padding: 10px 16px 10px 24px;
  }
  .age-list__label {
    font-size: 14px;
  }
  .age-list__value {
    font-size: 30px;
  }
  .age-list__unit {
    font-size: 14px;
  }
  .age-list__bar {
    height: 7px;
  }
  /* 円グラフ */
  /* 文理比・職種比率は同じ高さ（カンプ 440/750）にして中身を上下中央に置く */
  .about-card--chart {
    display: flex;
    flex-direction: column;
    grid-column: auto;
    justify-content: center;
    min-height: 58.6667vw;
    padding: 13px;
  }
  .about-card__graph {
    margin-top: 6px;
  }
  .about-card__graph-img {
    width: 100%;
  }
  .about-card--bunri .about-card__graph-img {
    width: 68.9333vw; /* カンプ 517/750 */
  }
  /* 新卒採用者数・リーダー */
  .about-card--newgrads {
    grid-column: auto;
    min-height: 179px;
    padding: 18px 20px;
  }
  /* 375px設計時の中身幅249px（テキスト左端〜アイコン右端）を、幅が広がっても中央に保つ */
  .about-card--leader {
    grid-column: auto;
    min-height: 159px;
    padding: 18px max(20px, (100% - 249px) / 2);
  }
  .newgrads-list {
    margin-top: 12px;
    padding: 0 8px;
  }
  .newgrads-list__item {
    justify-content: center;
  }
  .newgrads-list__year {
    font-size: 15px;
  }
  .newgrads-list__value {
    font-size: 38px;
  }
  .newgrads-list__unit {
    font-size: 15px;
  }
  .about-card__people {
    width: 290px;
    margin-top: 12px;
  }
  .about-card--leader .about-card__value {
    margin-top: 8px;
  }
  .about-card--leader .about-card__number {
    font-size: 62px;
  }
  .about-card--leader .about-card__unit {
    font-size: 24px;
  }
  .about-card--leader .about-card__icon {
    top: 50px;
    right: max(20px, (100% - 249px) / 2);
    width: 73px;
  }
  /* 小カード4つ */
  .about-grid--people {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-grid--people > .about-card:not(.about-card--small) {
    grid-column: span 2;
  }
  /* 375px設計時の中身幅133px（テキスト左端〜アイコン右端）を、幅が広がっても中央に保つ */
  .about-card--small {
    justify-content: center;
    min-height: 132px;
    padding: 14px max(14px, (100% - 143px) / 2);
  }
  .about-card--small .about-card__icon.yukyu {
    right: max(14px, (100% - 163px) / 2);
  }
  .about-card--small .about-card__icon.nenkan {
    right: max(14px, (100% - 173px) / 2);
  }
  .about-card--small .about-card__head {
    font-size: 15px;
  }
  .about-card--small .about-card__number {
    font-size: 38px;
  }
  .about-card--small .about-card__unit {
    font-size: 15px;
  }
  .about-card--small .about-card__icon {
    top: 50%;
    right: max(14px, (100% - 133px) / 2);
    height: 58px;
    transform: translateY(-50%);
  }
}
/* ==========================================================================
   詳細ページ共通（描く未来／仕事／人の個別ページ）
   ヘッダーは ロゴ帯80px ＋ パンくず帯80px の2段。下段はカンプ通り #339c4a の70%で
   裏の写真や白地が透ける。上段の色だけページごとに違う。
   ========================================================================== */
.future-detail-page,
.jobs-detail-page,
.people-detail-page {
  --header-band-top: #339c4a;
}

.future-detail-page {
  --header-band-top: #008a42;
}

.future-detail-page main,
.jobs-detail-page main,
.people-detail-page main {
  padding-top: 160px;
}

.future-detail-page .site-header,
.jobs-detail-page .site-header,
.people-detail-page .site-header {
  background: var(--header-band-top);
}

/* パンくず帯（ナビ直下 80px）。ヘッダー固定化に伴い帯はスクロールさせるため、
   ヘッダーのグラデーションからパンくず自身の背景に移した。
   box-shadow + clip-path で 1000px 幅の要素から左右いっぱいに帯を広げる */
.future-detail-page .breadcrumb,
.jobs-detail-page .breadcrumb,
.people-detail-page .breadcrumb {
  --breadcrumb-band: rgb(51 156 74 / 70%);
  align-items: flex-start;
  height: 80px;
  margin: 0 auto;
  padding-top: 36px;
  background: var(--breadcrumb-band);
  box-shadow: 0 0 0 100vmax var(--breadcrumb-band);
  clip-path: inset(0 -100vmax);
  color: #fff;
}

@media (max-width: 767px) {
  .future-detail-page main,
  .jobs-detail-page main,
  .people-detail-page main {
    padding-top: 60px;
  }
  /* PC用の160px帯＋グラデ（詳細度0,2,0）がSPの .site-header{height:60px}（0,1,0）に
     勝ってヒーロー写真に緑帯が重なるため、同詳細度で通常ヘッダーに戻す */
  .future-detail-page .site-header,
  .jobs-detail-page .site-header,
  .people-detail-page .site-header {
    height: 60px;
  }
  /* 描く未来 個別のSPは PC と同じ帯色（--header-band-top） */
  .future-detail-page .site-header {
    background: var(--header-band-top);
  }
}
/* ==========================================================================
   描く未来から選ぶ｜個別ページ（PC値はデザイン1200px幅の実測に合わせている）
   ========================================================================== */
/* ヘッダーは上段（ロゴ帯）＋下段（パンくず帯）の2段 */
.future-detail-inner {
  width: 1000px;
  margin: 0 auto;
}

/* ---- FV ---- */
.future-detail-hero {
  position: relative;
  height: 560px;
  background: #dbdcdc;
}

/* カンプの写真は y=80〜720 の 640px。上80pxはヘッダー帯（.site-header は z-index:10）の
   下に潜るため、セクションを 560px のままにして media だけ上に伸ばす。
   ここで overflow:hidden すると潜り込みが切れるので付けない。 */
.future-detail-hero__media {
  position: absolute;
  top: -80px;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}

/* カンプFV右側の緑ブラシ。新しい書き出しスライスには含まれないため疑似要素で載せる。
   カンプ実測（PC1200px基準・4ページとも同位置）: 1041x804 を left=831.5 / top=6.9 に配置。
   hero の上端が 160 なので top は -153px、右端基準で right:-673px。
   SPはカンプ上ブラシの位置が違い、既存の .future-detail-thought__deco が担当するため出さない。 */
.future-detail-hero::after {
  position: absolute;
  top: -153px;
  right: -673px;
  z-index: 100;
  width: 1041px;
  height: 804px;
  background: url("../img/top/bg-top-img-top-interview.svg") no-repeat;
  background-size: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
  content: "";
}

.future-detail-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 225px;
}

.future-detail-hero__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0;
}

.future-detail-hero__line {
  padding: 6px 12px;
  background: rgba(4, 102, 25, 0.85);
  color: #fff;
  line-height: 40px;
  mix-blend-mode: multiply;
}

.future-detail-hero__role {
  margin: 37px 0 0;
  color: #008a42;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

/* ---- こんな想いを持っていませんか？ ---- */
.future-detail-thought {
  position: relative;
  padding: 106px 0 110px;
  background: #fff;
}

.future-detail-thought__deco {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 130px;
  height: 95px;
}

.future-detail-thought__inner {
  position: relative;
  z-index: 1;
}

.future-detail-thought__inner {
  display: grid;
  grid-template-columns: 587px 1fr;
  align-items: start;
}

.future-detail-thought__title {
  margin: 18px 0 0;
  color: #008a42;
  font-size: 48px;
  font-weight: 700;
  line-height: 70px;
  letter-spacing: 0;
}

.future-detail-thought__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.future-detail-thought__item {
  position: relative;
  padding-left: 32px;
  color: #008a42;
  font-size: 20px;
  font-weight: 500;
  line-height: 45px;
  letter-spacing: 0;
}
.future-detail-thought__item::before {
  position: absolute;
  top: 13px;
  left: 0;
  width: 22px;
  height: 19px;
  background: url("../img/future/ic-check.svg") center/contain no-repeat;
  content: "";
}

/* ---- メッセージ（背景写真） ---- */
.future-detail-message {
  position: relative;
  height: 666px;
  overflow: hidden;
}

.future-detail-message__media {
  position: absolute;
  inset: 0;
  display: block;
}

.future-detail-message__inner {
  position: relative;
  z-index: 1;
  padding-top: 115px;
  color: #fff;
  text-align: center;
  letter-spacing: 0;
}

.future-detail-message__lead {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 50px;
}

.future-detail-message__body {
  margin: 30px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 40px;
}

.future-detail-message__close {
  margin: 87px 0 0;
  font-size: 30px;
  font-weight: 500;
  line-height: 50px;
}

.future-detail-message__strong {
  display: block;
  font-size: 40px;
  font-weight: 900;
  line-height: 50px;
}

/* ---- 仕事内容 ---- */
.future-detail-job {
  position: relative;
  height: 640px;
  background: #fff;
}

.future-detail-job__media {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 560px;
  height: 640px;
}

.future-detail-job__inner {
  position: relative;
  z-index: 1;
  padding-top: 76px;
  letter-spacing: 0;
}

.future-detail-job__title,
.future-detail-job__text,
.future-detail-job .future-detail-button {
  margin-left: 587px;
}

.future-detail-job__title {
  margin-top: 0;
  margin-bottom: 0;
  color: #008a42;
  font-size: 40px;
  font-weight: 900;
  line-height: 60px;
}

.future-detail-job__text {
  margin-top: 19px;
  margin-bottom: 0;
  color: #231815;
  font-size: 20px;
  font-weight: 500;
  line-height: 40px;
}

.future-detail-job .future-detail-button {
  margin-top: 51px;
}

/* ---- 枠線ボタン ---- */
.future-detail-button {
  color: #008a42;
}

/* ---- STEP ---- */
.future-detail-step {
  position: relative;
  overflow: hidden;
  padding: 145px 0;
  background: #f0f7f2;
}

/* SP専用の装飾はPCでは出さない */
.future-detail-thought__deco {
  display: none;
}

.future-detail-step__deco {
  position: absolute;
  top: 0;
  left: 77px;
  z-index: 0;
  display: block;
  width: 660px;
  height: 685px;
}

.future-detail-step__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 681px 1fr;
  align-items: start;
  letter-spacing: 0;
}

.future-detail-step__title {
  margin: 0;
  color: #008a42;
  font-size: 40px;
  font-weight: 900;
  line-height: 60px;
}

.future-detail-step__text {
  margin: 22px 0 0;
  color: #231815;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.2em;
}
.future-detail-step__text + .future-detail-step__text {
  margin-top: 32px;
}

.future-detail-step__body .future-detail-button {
  margin-top: 53px;
}

.future-detail-step__list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.future-detail-step__item {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 319px;
  height: 89px;
  padding-top: 0;
  align-items: center;
  border: 2px solid #008a42;
  color: #008a42;
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  /* カード間のシェブロン */
}
.future-detail-step__item + .future-detail-step__item {
  margin-top: 78px;
}
.future-detail-step__item + .future-detail-step__item::after {
  position: absolute;
  top: -60px;
  left: 50%;
  width: 19px;
  height: 19px;
  border-right: 4px solid #008a42;
  border-bottom: 4px solid #008a42;
  transform: translateX(-50%) rotate(45deg);
  content: "";
}

.future-detail-step__label {
  position: absolute;
  top: -13px;
  left: 50%;
  padding: 0 12px;
  background: #f0f7f2;
  color: #008a42;
  font-size: 24px;
  font-weight: 900;
  line-height: 26px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.future-detail-step__num {
  margin-left: 9px;
  font-style: normal;
}

/* ---- 未来を描く人たち ---- */
.future-detail-people {
  position: relative;
  overflow: hidden;
  height: 1469px;
  padding: 109px 0 0;
  background: #fff;
  letter-spacing: 0;
}

.future-detail-people__brush {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  display: block;
  width: 401px;
  height: 376px;
}

/* SP用装飾はPCでは非表示。基底クラスの display:block より後に置かないと
   同詳細度の後勝ちでPCにも表示される（2026-09-01のQAで検出） */
.future-detail-step__deco--sp,
.future-detail-people__brush--sp {
  display: none;
}

.future-detail-people .future-detail-inner {
  position: relative;
  z-index: 1;
}

.future-detail-people__title {
  margin: 0;
  color: #278a3d;
  font-size: 48px;
  font-weight: 900;
  line-height: 90px;
}

.future-detail-people__strong {
  color: #278a3d;
  font-size: 90px;
}

.future-detail-people .people-card-list {
  margin-top: 76px;
}

.future-detail-people__lead {
  margin: 17px 0 0;
  color: #231815;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.2em;
}

/* 写真の上に重ね、右下にはみ出すブラシ（カンプ実測: 写真左上から 289/167、235x291） */
/* ---- 向いている人 / 向いていない人 ---- */
.future-detail-fit {
  padding: 88px 0 112px;
  background: #f0f7f2;
  letter-spacing: 0;
}

.future-detail-page--promotion .future-detail-fit,
.future-detail-page--management .future-detail-fit {
  background: #fff;
}

.future-detail-fit__title {
  margin: 0;
  color: #339c4a;
  font-size: 48px;
  font-weight: 900;
  line-height: 68px;
}

/* 約物のアキをデザインに合わせて詰める */
.future-detail-fit__hang {
  margin-left: -0.58em;
}

.future-detail-fit__tight {
  margin-left: -0.5em;
}

.future-detail-fit__lead {
  margin: 23px 0 0;
  color: #3e3a39;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.2em;
}

.future-detail-fit__grid {
  display: grid;
  grid-template-columns: 450px 450px;
  margin-top: 75px;
  margin-left: 50px;
}

.future-detail-fit__column {
  width: 450px;
}

.future-detail-fit__label {
  width: 278px;
  height: 40px;
  margin: 0 auto;
  letter-spacing: 0;
  border-radius: 3px;
  background: #339c4a;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
}

.future-detail-fit__list {
  margin: 29px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.future-detail-fit__item {
  color: #231815;
  font-size: 20px;
  font-weight: 500;
  line-height: 40px;
}

/* ---- ENTRY（共通パーツの個別調整） ---- */
/* 描く未来 個別: ENTRY 前の筆は帯の内側（上から 60px / SP 73px）に置く */
.future-detail-page .entry-area::before {
  top: 60px;
}

.future-detail-page .entry-area__lead {
  margin: 0 0 49px;
  font-size: 48px;
  font-weight: 900;
  line-height: 70px;
  letter-spacing: 0;
}

/* ---- 他の未来を見る ---- */
/* カンプ 261008：写真 448x182、左端 501.5 / 442.7（inner 左端 154 からの差）、間隔 13.78。
   ラベルは TOP と同じブラシの 0.7 倍（397.7x144.8）。現在のページのカードは半透明。 */
.future-detail-other {
  padding: 72px 0 120px;
  background: #fff;
  letter-spacing: 0;
}

.future-detail-other__inner {
  position: relative;
  width: 892px;
  margin: 0 auto;
}

.future-detail-other__title {
  position: relative;
  left: -5px;
  margin: 0;
  color: #339c4a;
  font-size: 40px;
  font-weight: 900;
  line-height: 50px;
}

.future-detail-other__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 35px 0 0;
  padding: 0;
  list-style: none;
}

.future-detail-other__item {
  position: relative;
  width: 448px;
  margin-left: 347.5px;
}

.future-detail-other__item:nth-child(even) {
  margin-left: 288.7px;
}

.future-detail-other__card {
  position: relative;
  display: block;
}

.future-detail-other__media {
  display: block;
}

.future-detail-other__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640/260;
  transition: opacity 0.4s ease;
}

/* ブラシ。写真の左端から -194.5 / -192.4、上端から +20 */
.future-detail-other__label {
  top: 20px;
  left: -194.5px;
  width: 397.7px;
  height: 144.8px;
}
.future-detail-other__label .future-brush__text {
  top: 41.7px;
  left: 83.1px;
  font-size: 20px;
  line-height: 28px;
}

.future-detail-other__item:nth-child(even) .future-detail-other__label {
  left: -192.4px;
}

.future-detail-other__card--current {
  opacity: 0.5;
}

.future-detail-other__card:not(.future-detail-other__card--current):hover .future-detail-other__image {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .future-detail-page .breadcrumb {
    display: none;
  }
  .future-detail-inner {
    width: auto;
    padding: 0 20px;
  }
  /* FV */
  .future-detail-hero {
    height: 320px;
  }
  /* SPは専用画像（375x320）が hero と同寸なので、PCの潜り込み(-80px)を戻す */
  .future-detail-hero__media {
    top: 0;
  }
  /* SPのブラシは .future-detail-thought__deco が担当する */
  .future-detail-hero::after {
    display: none;
  }
  .future-detail-hero__inner {
    padding-top: 174px;
  }
  .future-detail-hero__title {
    gap: 7px;
    font-size: 24px;
  }
  .future-detail-hero__line {
    padding: 3px 6px;
    line-height: 24px;
  }
  .future-detail-hero__role {
    margin-top: 20px;
    font-size: 16px;
  }
  /* こんな想いを持っていませんか？ */
  .future-detail-thought {
    position: relative;
    overflow: hidden;
    padding: 51px 0 52px;
  }
  .future-detail-thought__deco {
    display: block;
  }
  .future-detail-thought__inner {
    display: block;
  }
  .future-detail-thought__title {
    margin: 0;
    font-size: 26px;
    line-height: 39px;
  }
  .future-detail-thought__list {
    margin-top: 24px;
  }
  .future-detail-thought__item {
    padding-left: 25px;
    font-size: 14px;
    line-height: 35px;
  }
  .future-detail-thought__item::before {
    top: 10px;
    width: 18px;
    height: 15px;
  }
  /* メッセージ */
  .future-detail-message {
    height: 500px;
  }
  .future-detail-message__inner {
    padding-top: 77px;
  }
  .future-detail-message__lead {
    font-size: 22.5px;
    line-height: 37.5px;
  }
  .future-detail-message__body {
    margin-top: 22px;
    font-size: 15px;
    line-height: 30px;
  }
  .future-detail-message__close {
    margin-top: 36px;
    font-size: 22.5px;
    line-height: 37.5px;
  }
  .future-detail-message__strong {
    font-size: 30px;
    line-height: 37.5px;
  }
  /* 仕事内容 */
  .future-detail-job {
    height: auto;
  }
  .future-detail-job__media {
    position: static;
    width: 100%;
    height: 100%;
  }
  .future-detail-job__inner {
    padding-top: 57px;
    padding-bottom: 60px;
  }
  .future-detail-job__title,
  .future-detail-job__text,
  .future-detail-job .future-detail-button {
    margin-left: 0;
  }
  .future-detail-job__title {
    font-size: 26px;
    line-height: 39px;
  }
  .future-detail-job__text {
    margin-top: 7px;
    font-size: 16px;
    line-height: 28px;
  }
  .future-detail-job .future-detail-button {
    margin: 34px auto 0;
  }
  /* ボタン */
  .future-detail-button {
    gap: 20px;
    width: 320px;
    height: 48px;
    border-width: 1px;
    font-size: 16px;
  }
  /* STEP */
  .future-detail-step {
    position: relative;
    overflow: hidden;
    padding: 56px 0 80px;
  }
  .future-detail-step__deco {
    display: none;
  }
  .future-detail-step__deco--sp {
    display: block;
    top: 1px;
    left: auto;
    width: 375px;
    height: 384px;
    right: 0;
  }
  .future-detail-step__inner {
    display: block;
  }
  .future-detail-step__title {
    font-size: 26px;
    line-height: 39px;
  }
  .future-detail-step__text {
    margin-top: 8px;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0;
  }
  .future-detail-step__text + .future-detail-step__text {
    margin-top: 28px;
  }
  .future-detail-step__body .future-detail-button {
    margin: 34px auto 0;
  }
  .future-detail-step__list {
    width: 240px;
    margin: 69px auto 0;
  }
  .future-detail-step__item {
    width: 240px;
    height: 67px;
    padding-top: 12px;
    padding-bottom: 13px;
    border-width: 1px;
    font-size: 18px;
    line-height: 20px;
  }
  .future-detail-step__item + .future-detail-step__item {
    margin-top: 59px;
  }
  .future-detail-step__item + .future-detail-step__item::after {
    top: -46px;
    width: 15px;
    height: 15px;
    border-width: 3px;
  }
  .future-detail-step__label {
    top: -10px;
    padding: 0 9px;
    font-size: 18px;
    line-height: 20px;
  }
  .future-detail-step__num {
    margin-left: 7px;
  }
  /* 未来を描く人たち */
  .future-detail-people {
    height: auto;
    padding: 59px 0 56px;
  }
  .future-detail-people__brush {
    display: none;
  }
  .future-detail-people__brush--sp {
    display: block;
    width: 141px;
    height: 184px;
  }
  .future-detail-people__title {
    font-size: 26px;
    line-height: 45px;
  }
  .future-detail-people__strong {
    font-size: 45px;
  }
  .future-detail-people .people-card-list {
    margin-top: 36px;
  }
  .future-detail-people__lead {
    margin-top: 6px;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0;
  }
  /* 写真はSPカンプの幅 569（750基準）を vw で追従、比率は PC の写真（480:400）のまま cover で切らない。PC の写真幅 480px で頭打ち */
  /* SPカンプ実測（写真584x487・ブラシ425x507 @213,43）を実装の写真336x298へ相対換算し、写真の大きさに追従させる */
  /* ブラシは写真の下に 60px（top の分）出るので、見出しがそれに重ならない位置から本文を始める */
  /* 向いている人 / 向いていない人 */
  .future-detail-fit {
    padding: 50px 0 92px;
  }
  .future-detail-page--promotion .future-detail-fit,
  .future-detail-page--management .future-detail-fit {
    background: #f0f7f2;
  }
  .future-detail-fit__title {
    font-size: 26px;
    line-height: 39px;
  }
  .future-detail-fit__hang,
  .future-detail-fit__tight {
    margin-left: 0;
  }
  .future-detail-fit__lead {
    margin-top: 7px;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0;
  }
  .future-detail-fit__grid {
    display: block;
    margin: 54px 0 0;
  }
  .future-detail-fit__column {
    width: auto;
  }
  .future-detail-fit__column + .future-detail-fit__column {
    margin-top: 64px;
  }
  .future-detail-fit__label {
    width: 249px;
    height: 38px;
    font-size: 18px;
    line-height: 38px;
  }
  .future-detail-fit__list {
    margin-top: 14px;
  }
  .future-detail-fit__item {
    font-size: 16px;
    line-height: 30px;
  }
  /* ENTRY */
  .future-detail-page .entry-area::before {
    top: 73px;
  }
  .future-detail-page .entry-area__lead {
    /* inner の padding 46px はTOPカンプのボタン基準。詳細ページのリードは
       カンプでは左右約36pxで組まれており、46pxのままだと
       「会社を動かす仕組みは、」が283pxに収まらず「は、」等が孤立する */
    margin-bottom: 20px;
    margin-inline: -13px;
    font-feature-settings: "palt" 1;
    font-size: 30px;
    /* カンプ実測: 行幅307.5px÷11字=実効字送り約28px/字（ツメ組み）。
       Zen Kaku Gothic Newはpalt/halt未対応のため字間で実効値に合わせる */
    letter-spacing: -0.065em;
    line-height: 40px;
  }
  /* 他の未来を見る
     SPカンプ 261008：写真 270x130（左 77.3）、ブラシは写真上端の 88.9px 上から、
     写真の下端 → 次のブラシ 10.3px */
  .future-detail-other {
    padding: 31px 0 50px;
  }
  .future-detail-other__inner {
    width: 375px;
  }
  .future-detail-other__title {
    left: 0;
    margin: 0 0 0 25px;
    font-size: 26px;
    line-height: 39px;
  }
  .future-detail-other__list {
    gap: 10.3px;
    margin-top: 14px;
  }
  .future-detail-other__item,
  .future-detail-other__item:nth-child(even) {
    width: 270px;
    margin-left: 77.3px;
    padding-top: 88.9px;
  }
  .future-detail-other__card {
    position: static;
  }
  /* ブラシ 306.8x111.7（個別SP用の形 brush-future-other-sp）、写真の左端から -49.8 */
  .future-detail-other__label,
  .future-detail-other__item:nth-child(even) .future-detail-other__label {
    top: 0;
    left: -49.8px;
    width: 306.8px;
    height: 111.7px;
  }
  .future-detail-other__label .future-brush__text {
    top: 31.9px;
    left: 64.1px;
    font-size: 16px;
    line-height: 21.6px;
  }
  .future-detail-other__image {
    aspect-ratio: 750/361;
  }
}
/* ==========================================================================
   仕事を知る｜個別ページ（PC値はデザイン1200px幅の実測に合わせている）
   ========================================================================== */
.jobs-detail-inner {
  width: 1000px;
  margin: 0 auto;
}

/* ---- FV ---- */
.jobs-detail-hero {
  position: relative;
  height: 560px;
  overflow: hidden;
  background: #f0f7f2;
}

/* カンプFVは 淡緑パネル＋右に写真 480x560（カンプ x=720〜1200 / y=160〜720）。
   写真はカンプ右端に接しているので、1200px より広いビューポートでは右端に寄せ、
   淡緑（.jobs-detail-hero の background）が左に伸びる。 */
.jobs-detail-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 480px;
  height: 560px;
}

.jobs-detail-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 156px;
}

.jobs-detail-hero__title {
  margin: 0 0 0 1px;
  color: #008a42;
  font-size: 50px;
  font-weight: 900;
  line-height: 60px;
  letter-spacing: 0;
}

.jobs-detail-hero__role {
  margin: 36px 0 0 1px;
  color: #008a42;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

/* ---- リード（相関図つき） ---- */
.jobs-detail-intro {
  height: 521px;
  padding: 82px 0 0;
  background: #fff;
}

.jobs-detail-intro__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
}

.jobs-detail-intro__title {
  margin: 0 0 0 1px;
  color: #008a42;
  font-size: 40px;
  font-weight: 900;
  line-height: 55px;
  letter-spacing: 0;
}

.jobs-detail-intro__text {
  margin: 35px 0 0 2px;
  color: #231815;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
}

.jobs-detail-intro__figure {
  margin: 0;
  justify-self: end;
}

/* 相関図。SPカンプの図版は PC とまったく同じ絵で幅だけ違うため、
   PC/SP とも同じ SVG を使う（旧 img-jobs-*-diagram-sp.png は不要）。
   SVG は viewBox だけで width/height 属性を持たず内在サイズがないため、
   width:auto だと grid の auto トラックが 0 に潰れて図が消える。幅を明示する。
   PC幅はスライス原寸（= カンプ実寸）。 */
.jobs-detail-intro__image {
  display: block;
  height: auto;
}

.jobs-detail-intro__image--service-engineer {
  width: 324px;
}

.jobs-detail-intro__image--energy-consultant {
  width: 323px;
}

.jobs-detail-intro__image--business-promotion {
  width: 378px;
}

.jobs-detail-intro__image--business-management {
  width: 417px;
}

/* ---- 見出し共通 ---- */
.jobs-detail-heading {
  position: relative;
  margin: 0;
  color: #008a42;
  font-size: 40px;
  font-weight: 900;
  line-height: 55px;
  letter-spacing: 0;
}

.jobs-detail-heading--marker {
  padding-left: 35px;
  font-weight: 900;
}
.jobs-detail-heading--marker::before {
  position: absolute;
  top: 22px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 16px solid #008a42;
  content: "";
}

.jobs-detail-heading--lg {
  font-size: 50px;
  line-height: 60px;
}
.jobs-detail-heading--lg::before {
  top: 26px;
}

.jobs-detail-heading__num {
  font-size: 50px;
}

.jobs-detail-lead {
  margin: 35px 0 0 2px;
  color: #231815;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
}

/* ---- 帯（#f0f7f2 のかたまり） ---- */
.jobs-detail-body {
  background: #f0f7f2;
}

/* ---- 仕事における3つの特長 ---- */
.jobs-detail-features {
  padding-top: 58px;
}

.jobs-detail-feature {
  position: relative;
  display: grid;
  grid-template-columns: 680px 320px;
  align-items: start;
  margin-top: 61px;
  background: #fff;
}
.jobs-detail-feature:first-of-type {
  margin-top: 96px;
}

.jobs-detail-feature--icons {
  min-height: 268px;
}

.jobs-detail-feature__num {
  position: absolute;
  top: -37px;
  left: 49px;
  margin: 0;
  color: #008a42;
  font-size: 60px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.jobs-detail-feature__body {
  padding: 46px 0 40px 50px;
}

.jobs-detail-feature__title {
  margin: 0;
  color: #008a42;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0;
}

.jobs-detail-feature__text {
  margin: 10px 0 0 4px;
  color: #231815;
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
}

/* ● と資格名は1語として扱い、資格名の途中（「電気主任技術者」の「者」）で折り返さない（No.75） */
.jobs-detail-feature__tag {
  white-space: nowrap;
}

.jobs-detail-feature__tags {
  width: 432px;
  margin: 15px 0 0;
  padding: 10px 18px;
  letter-spacing: 0;
  background: #f0f7f2;
  color: #231815;
  font-size: 16px;
  font-weight: normal;
  line-height: 30px;
}

.jobs-detail-feature__mark {
  display: inline-block;
  color: #349c49;
  font-size: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}

.jobs-detail-feature__etc {
  white-space: nowrap;
}

.jobs-detail-feature__media,
.jobs-detail-feature__image {
  display: block;
  width: 320px;
  height: auto;
}

/* 旧PNG(351x79)はスライス境界のアンチエイリアスを 1px ずつ含んでいた。
   SVG は絵そのものの寸法(349x78)なので幅高さだけ詰める。位置は 0.5px 差なので触らない。 */
.jobs-detail-feature__icons {
  align-self: center;
  justify-self: end;
  display: block;
  width: 349px;
  height: 78px;
  margin-right: 54px;
}

/* ---- 成長ステップとキャリアパス ---- */
.jobs-detail-career {
  padding-top: 71px;
}

.jobs-detail-career__groups {
  margin-top: 74px;
}

.jobs-detail-career__group {
  position: relative;
  /* アシスタント帯の下端の三角はプロ帯に重なる。DOM順のままだと後続のプロ帯が
     三角を塗りつぶしてしまうため、先行グループを前面に置く */
  z-index: 1;
  padding-left: 154px;
}
.jobs-detail-career__group + .jobs-detail-career__group {
  margin-top: 49px;
}

.jobs-detail-career__group--pro {
  z-index: 0;
}

/* 左の縦バー（下端は矢印） */
.jobs-detail-career__rail {
  position: absolute;
  top: 0;
  bottom: -46px;
  left: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  margin: 0;
  /* カンプ実測: 帯幅62・下端の三角は高さ22（1200px基準）。
     ラベル文字は帯（矩形部分）の中央より 37px 上に置かれている（p1/p2・両帯とも同値）ので、
     三角 22 + 74 を下パディングにして中央寄せの基準を 37px 上げる */
  padding-bottom: 96px;
  background: #6bbb6e;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  writing-mode: vertical-rl;
}

.jobs-detail-career__group--pro .jobs-detail-career__rail {
  /* カンプ: プロ帯の上端はアシスタント帯の矩形下端と同じ位置（三角の下に潜る） */
  top: -25px;
  bottom: -22px;
  background: #008a42;
}

.jobs-detail-career__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  /* バッジをつなぐ縦線 */
}
.jobs-detail-career__list::before {
  position: absolute;
  top: 110px;
  bottom: 110px;
  left: 72px;
  width: 2px;
  background: #6bbb6e;
  content: "";
}

.jobs-detail-career__item {
  position: relative;
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 39px;
  /* カンプ実測: バッジ間隔は本文の行数によらず 110+40。
     3行の本文（112px）はバッジより 2px はみ出すが、項目の高さには含めない */
  height: 110px;
}
.jobs-detail-career__item + .jobs-detail-career__item {
  margin-top: 40px;
}

.jobs-detail-career__badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 110px;
  background: #6bbb6e;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.jobs-detail-career__group--pro .jobs-detail-career__badge {
  background: #008a42;
}

.jobs-detail-career__body {
  padding-top: 0;
}

.jobs-detail-career__title {
  margin: -8px 0 0;
  color: #008a42;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0;
}

.jobs-detail-career__text {
  margin: 12px 0 0;
  color: #231815;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
}

/* ---- 枠線ボタン ---- */
.jobs-detail-career .jobs-detail-button {
  margin-top: 54px;
}

.jobs-detail-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 440px;
  height: 64px;
  margin: 40px auto 0;
  border: 2px solid #008a42;
  background: #fff;
  color: #008a42;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.jobs-detail-button__arrow {
  position: absolute;
  top: 50%;
  right: 24px;
  font-size: 30px;
  line-height: 1;
  transform: translateY(-50%);
}

/* ---- 領域とセクション ---- */
.jobs-detail-field {
  padding-top: 103px;
  padding-bottom: 123px;
}

.jobs-detail-field__list {
  margin-top: 74px;
}

.jobs-detail-field__group {
  position: relative;
  display: grid;
  grid-template-columns: 296px 1fr;
  align-items: center;
}
.jobs-detail-field__group + .jobs-detail-field__group {
  margin-top: 73px;
}
.jobs-detail-field__group:last-child {
  margin-top: 56px;
}

.jobs-detail-field__domain {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 153px;
  height: 153px;
  margin: 0 0 0 58px;
  border-radius: 50%;
  background: #339c4a;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  text-align: center;
}

.jobs-detail-field__sections {
  position: relative;
}

/* 円からセクションへの接続線 */
.jobs-detail-field__group::before {
  position: absolute;
  top: 50%;
  left: 200px;
  width: 96px;
  height: 2px;
  background: #339c4a;
  content: "";
}

.jobs-detail-field__group--double::before {
  width: 54px;
}

.jobs-detail-field__group--double .jobs-detail-field__sections::before {
  position: absolute;
  top: 55px;
  height: 152px;
  left: -42px;
  width: 2px;
  background: #339c4a;
  content: "";
}

.jobs-detail-field__section {
  position: relative;
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 22px;
  align-items: center;
  min-height: 110px;
}
.jobs-detail-field__section + .jobs-detail-field__section {
  margin-top: 33px;
}

.jobs-detail-field .jobs-detail-button {
  margin-top: 62px;
}

.jobs-detail-field__group--double .jobs-detail-field__section::before {
  position: absolute;
  top: 55px;
  left: -42px;
  width: 42px;
  height: 2px;
  background: #339c4a;
  content: "";
}

.jobs-detail-field__code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 110px;
  border: 2px solid #339c4a;
  background: #fff;
  color: #008a42;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.jobs-detail-field__code--wide {
  font-size: 20px;
}

.jobs-detail-field__title {
  margin: 0;
  color: #008a42;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0;
}

.jobs-detail-field__text {
  margin: 9px 0 0;
  color: #231815;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
}

/* ---- フィールド（シンプル版：3ブロック） ---- */
.jobs-detail-field--simple {
  padding-top: 110px;
}

.jobs-detail-field__list--simple {
  margin-top: 56px;
}

.jobs-detail-field__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
  min-height: 120px;
}
.jobs-detail-field__row + .jobs-detail-field__row {
  margin-top: 40px;
}

.jobs-detail-field__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  margin: 0;
  background: #339c4a;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 29px;
  text-align: center;
}

.jobs-detail-field--simple .jobs-detail-button {
  margin-top: 80px;
}

/* デザイン側で下余白が職種ごとに異なるため個別指定 */
.jobs-detail-page--consultant .jobs-detail-field {
  padding-bottom: 119px;
}

.jobs-detail-page--promotion .jobs-detail-field {
  padding-bottom: 200px;
}

.jobs-detail-page--management .jobs-detail-field {
  padding-bottom: 168px;
}

/* ---- キャリアパス（Step版：1本のバー） ---- */
.jobs-detail-career__group--step {
  padding-left: 154px;
}
.jobs-detail-career__group--step .jobs-detail-career__rail {
  top: 0;
  bottom: 0;
  padding-bottom: 0;
  background: linear-gradient(180deg, #6bbb6e 0%, #2da24a 45%, #008a42 100%);
}
.jobs-detail-career__group--step .jobs-detail-career__badge {
  background: transparent;
}
.jobs-detail-career__group--step .jobs-detail-career__item:nth-child(1) .jobs-detail-career__badge {
  background: #6bbb6e;
}
.jobs-detail-career__group--step .jobs-detail-career__item:nth-child(2) .jobs-detail-career__badge,
.jobs-detail-career__group--step .jobs-detail-career__item:nth-child(3) .jobs-detail-career__badge,
.jobs-detail-career__group--step .jobs-detail-career__item:nth-child(4) .jobs-detail-career__badge,
.jobs-detail-career__group--step .jobs-detail-career__item:nth-child(5) .jobs-detail-career__badge {
  background: #2da24a;
}
.jobs-detail-career__group--step .jobs-detail-career__item:nth-child(6) .jobs-detail-career__badge {
  background: #008a42;
}

.jobs-detail-career__groups--single ~ .jobs-detail-button {
  margin-top: 80px;
}

/* ---- 社員紹介 ---- */
.jobs-detail-people {
  padding: 112px 0 0;
  height: 1489px;
  background: #fff;
}

.jobs-detail-people .people-card-list {
  margin-top: 78px;
}

.jobs-detail-people__title {
  margin: 0 0 0 1px;
  color: #008a42;
  font-size: 50px;
  font-weight: 900;
  line-height: 60px;
  letter-spacing: 0;
}

/* カンプでは人物写真に緑のブラシが重なり、写真の右下にはみ出す。
   新しい書き出しスライスでは写真からブラシが外れたが、ブラシ単体のスライスが無い。
   カンプ実測（PC1200px基準・写真 480x400 からの相対）:
     通常カード  left +256.5 / top +144.5 / 277x327
     reverse    left +192.5 / top +199.5 / 同サイズ
   SPカンプ（写真 335x279）も同じ比率だったので % で置く。
   絵柄は common の bg-main-side.svg で代用している。カンプの筆致とは別物なので
   専用スライスが届いたら差し替えること。 // TODO:要確認 */
/* ---- ENTRY（リード文なし） ---- */
@media (max-width: 767px) {
  .jobs-detail-page .breadcrumb {
    display: none;
  }
  .jobs-detail-inner {
    width: auto;
    padding: 0 20px;
  }
  /* FV：写真の下に見出し帯 */
  .jobs-detail-hero {
    height: auto;
    background: transparent;
  }
  .jobs-detail-hero__media {
    position: static;
    display: block;
    width: 100%;
    height: 364px;
  }
  .jobs-detail-hero__inner {
    padding: 26px 20px 0;
    background: #f0f7f2;
    padding-bottom: 39px;
  }
  .jobs-detail-hero__title {
    margin-left: 0;
    font-size: 26px;
    line-height: 39px;
  }
  .jobs-detail-hero__role {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 24px;
  }
  /* リード＋相関図 */
  .jobs-detail-intro {
    height: auto;
    padding-top: 53px;
  }
  .jobs-detail-intro__grid {
    display: block;
    padding-bottom: 104px;
  }
  .jobs-detail-intro__title {
    margin-left: 0;
    font-size: 22px;
    line-height: 33px;
  }
  .jobs-detail-intro__text {
    margin: 9px 0 0;
    font-size: 16px;
    line-height: 28px;
  }
  .jobs-detail-intro__figure {
    /* PC の justify-self: end のままだと図の幅ぶんしか広がらず中央寄せにならない */
    justify-self: stretch;
    margin-top: 37px;
    text-align: center;
  }
  /* SPカンプ実測（750px基準を CSS px に換算）: 4ページとも中央寄せ、幅だけ違う。
     engineer 293 / consultant 308 / promotion 329 / management 336 */
  .jobs-detail-intro__image {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0 auto;
  }
  /* 見出し */
  .jobs-detail-heading {
    font-size: 22px;
    line-height: 33px;
  }
  .jobs-detail-heading--marker {
    padding-left: 24px;
  }
  .jobs-detail-heading--marker::before {
    top: 12px;
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 12px;
  }
  .jobs-detail-heading--lg {
    font-size: 22px;
    line-height: 33px;
  }
  .jobs-detail-heading--lg::before {
    top: 12px;
  }
  .jobs-detail-heading__num {
    font-size: 30px;
  }
  /* ３つの領域と５つのセクション: SP は本文 20px・数字 25px */
  .jobs-detail-heading--field {
    font-size: 20px;
  }
  .jobs-detail-heading--field .jobs-detail-heading__num {
    font-size: 25px;
  }
  .jobs-detail-lead {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 28px;
  }
  /* 3つの特長 */
  .jobs-detail-features {
    padding-top: 45px;
  }
  /* flow-root にして BFC を作る。block のままだと先頭の __num の負マージンと
     末尾の __icons の下マージンが白カードのマージンと相殺され、
     カード自体が動いたり下余白が消えたりする。 */
  .jobs-detail-feature,
  .jobs-detail-feature--tall {
    display: flow-root;
    min-height: 0;
    margin-top: 53px;
  }
  .jobs-detail-feature:first-of-type,
  .jobs-detail-feature--tall:first-of-type {
    margin-top: 47px;
  }
  /* カンプでは数字の字面が白カードの上端から 12px 上に出る。
     字面は行ボックス上端から 8.4px 下なので、20px 引き上げる。 */
  .jobs-detail-feature__num {
    position: static;
    margin-top: -20px;
    padding: 0 0 0 15px;
    font-size: 36px;
    line-height: 1;
  }
  .jobs-detail-feature__body {
    padding: 12px 17px 0;
  }
  .jobs-detail-feature__title {
    font-size: 20px;
    line-height: 30px;
    /* 「自分の成果が「環境への貢献」に」15字を 286px に収める（20px×15=300px） */
    letter-spacing: -0.05em;
  }
  .jobs-detail-feature__text {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 28px;
  }
  .jobs-detail-feature__tags {
    width: 100%;
    margin: 22px 0 0;
    padding: 12px 8px;
    font-size: 14px;
    line-height: 25px;
  }
  /* SP 専用の切り抜きは持たず、PC と同じ写真を object-fit で切る */
  .jobs-detail-feature__media,
  .jobs-detail-feature__image {
    width: 100%;
    height: 180px;
  }
  .jobs-detail-feature__image {
    object-fit: cover;
  }
  .jobs-detail-feature__media {
    margin-top: 30px;
  }
  /* SPカンプ実測: 296x66、白カード下端まで 40px（旧実装は 240x54・下余白 0） */
  .jobs-detail-feature__icons {
    width: 296px;
    height: 66px;
    margin: 24px auto 40px;
  }
  /* キャリアパス */
  .jobs-detail-career {
    padding-top: 55px;
  }
  .jobs-detail-career__groups {
    margin-top: 44px;
  }
  .jobs-detail-career__group {
    padding-left: 60px;
  }
  .jobs-detail-career__group + .jobs-detail-career__group {
    margin-top: 30px;
  }
  /* SPカンプ実測(750px基準→CSS): レールは x=37.7〜68.7（幅32・グループ左端から18px）。
     アシスタント帯の矩形下端は最終項目の本文下端 +9、三角の先端は +20。
     プロ帯の上端はその矩形下端と同じ位置（三角の下に潜り、先端が 10px 被る）。
     ラベル文字は中央寄せではなく上端からの固定位置（アシスタント 42px / プロ 58px）。 */
  .jobs-detail-career__rail {
    bottom: -20px;
    left: 18px;
    justify-content: flex-start;
    width: 32px;
    padding-top: 42px;
    padding-bottom: 11px;
    font-size: 15px;
    /* カンプ実測(750px基準): 帯幅64・三角22 → CSS 32 / 11 */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), 50% 100%, 0 calc(100% - 11px));
  }
  /* プロ帯の下端はカンプでは最終項目の本文下端より上で終わる（矩形 -22 / 先端 -11） */
  .jobs-detail-career__group--pro .jobs-detail-career__rail {
    top: -20px;
    bottom: 11px;
    padding-top: 58px;
  }
  .jobs-detail-career__list::before {
    display: none;
  }
  .jobs-detail-career__item {
    display: block;
    height: auto;
  }
  .jobs-detail-career__item + .jobs-detail-career__item {
    margin-top: 34px;
  }
  /* SPカンプ実測: 68x55（旧実装は 90x44） */
  .jobs-detail-career__badge {
    width: 68px;
    height: 55px;
    font-size: 16px;
  }
  .jobs-detail-career__title {
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 25px;
  }
  .jobs-detail-career__text {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 28px;
  }
  /* ボタン */
  .jobs-detail-button {
    margin-top: 34px;
    border-width: 1px;
    font-size: 16px;
  }
  /* SPカンプ実測: 枠 321x49（文字が2行になるカードは 61）。
     文字は矢印を無視してボタン中央に来るので、左右 60px の余白で折り返させる。
     矢印は枠の右端から 20px の定位置で、上下中央。 */
  .jobs-detail-page .jobs-detail-button {
    position: relative;
    gap: 0;
    width: 321px;
    min-height: 49px;
    height: auto;
    padding: 9px 60px;
    line-height: 1.2;
    text-align: center;
  }
  .jobs-detail-career .jobs-detail-button,
  .jobs-detail-field .jobs-detail-button {
    margin-top: 40px;
  }
  /* カンプは矢印の字面の右端が枠の右端から 20px。
     22px の字送りに対し字面が 1px 内側に入るぶんを引いて right: 17px。 */
  .jobs-detail-page .jobs-detail-button__arrow {
    position: absolute;
    top: 50%;
    right: 17px;
    font-size: 22px;
    transform: translateY(-50%);
  }
  /* 領域とセクション */
  .jobs-detail-field {
    padding-top: 55px;
    padding-bottom: 60px;
  }
  .jobs-detail-field__list {
    margin-top: 34px;
  }
  .jobs-detail-field__group {
    display: block;
  }
  .jobs-detail-field__group + .jobs-detail-field__group, .jobs-detail-field__group:last-child {
    margin-top: 46px;
  }
  .jobs-detail-field__group::before,
  .jobs-detail-field__group--double .jobs-detail-field__sections::before,
  .jobs-detail-field__group--double .jobs-detail-field__section::before {
    display: none;
  }
  .jobs-detail-field__domain {
    width: 130px;
    height: 130px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 22px;
  }
  .jobs-detail-field__section {
    display: block;
    min-height: 0;
    margin-top: 34px;
  }
  .jobs-detail-field__section + .jobs-detail-field__section {
    margin-top: 44px;
  }
  .jobs-detail-field__code {
    width: 76px;
    height: 56px;
    border-width: 1px;
    font-size: 16px;
  }
  .jobs-detail-field__title {
    margin-top: 20px;
    font-size: 18px;
    line-height: 25px;
  }
  .jobs-detail-field__text {
    margin-top: 8px;
    font-size: 14px;
    line-height: 28px;
  }
  /* PC の 240px + 1fr のままだと右カラムが 80px まで潰れるので1カラムに落とす。
     ラベルとの間隔は .jobs-detail-field__title の margin-top: 20px が持つ */
  .jobs-detail-field__row {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
  }
  /* SPカンプ（750px幅）基準で 440x140 → 幅だけ vw で追従させる */
  .jobs-detail-field__label {
    width: 58.6667vw;
    height: 70px;
    margin: 0 auto;
  }
  /* PC はページごとに下余白が違うが、SPは 100px で揃える */
  .jobs-detail-page--engineer .jobs-detail-field,
  .jobs-detail-page--consultant .jobs-detail-field,
  .jobs-detail-page--promotion .jobs-detail-field,
  .jobs-detail-page--management .jobs-detail-field {
    padding-bottom: 100px;
  }
  /* 社員紹介 */
  .jobs-detail-people {
    height: auto;
    padding: 56px 0 56px;
  }
  .jobs-detail-people .people-card-list {
    margin-top: 46px;
  }
  .jobs-detail-people__title {
    margin-left: 0;
    font-size: 26px;
    line-height: 39px;
  }
  /* ENTRY */
}
/* ==========================================================================
   人を知る｜個別インタビュー（PC値はデザイン1200px幅の実測に合わせている）
   ========================================================================== */
.people-detail-inner {
  width: 1000px;
  margin: 0 auto;
  letter-spacing: 0;
}

/* ---- FV ---- */
.people-detail-hero {
  position: relative;
  height: 560px;
}

/* カンプの写真は y=80〜720 の 640px。上80pxはヘッダー帯（.site-header は z-index:10）の
   下に潜るため、セクションを 560px のままにして media だけ上に伸ばす。
   ここで overflow:hidden すると潜り込みが切れるので付けない。 */
.people-detail-hero__media {
  position: absolute;
  top: -80px;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}

/* カンプFV右側の緑ブラシ。新しい書き出しスライスには含まれないため疑似要素で載せる。
   カンプ実測（PC1200px基準）: 1123x867 を left=838.5 / top=140 に配置し、右は1200pxで切れる。
   hero の上端が 160 なので top は -20px、右端基準で right:-761px。
   はみ出しは .people-detail-page の overflow:hidden で処理される。 */
.people-detail-hero::after {
  position: absolute;
  top: -20px;
  right: -761px;
  width: 1123px;
  height: 867px;
  background: url("../img/top/bg-top-img-top-interview.svg") no-repeat;
  background-size: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
  content: "";
}

.people-detail-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 134px;
}

.people-detail-hero__title {
  margin: 0 0 0 1px;
  color: #008a42;
  font-size: 40px;
  font-weight: 900;
  line-height: 60px;
  letter-spacing: 0;
}

.people-detail-hero__profile {
  margin: 43px 0 0 1px;
  color: #008a42;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
}
.people-detail-hero__profile + .people-detail-hero__profile {
  margin-top: 22px;
}

/* クロストークはタイトル位置が上 */
.people-detail-page--04 .people-detail-hero__inner {
  padding-top: 86px;
}

/* 20260904修正: T.S の写真は頭がキツいので表示位置を下げる */
.people-detail-page--02 .people-detail-hero__image {
  object-position: center 30%;
}

/* 02・03 は Q6〜ブロックのブラシを出さない（PC/SP 共通） */
.people-detail-page--02 .people-detail-qa__block--full::after,
.people-detail-page--03 .people-detail-qa__block--full::after {
  display: none;
}

/* ---- リード ---- */
.people-detail-lead {
  height: 459px;
  padding: 68px 0 0;
  background: #f0f7f2;
}

.people-detail-lead__text {
  margin: 0 0 0 1px;
  color: #231815;
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
}

/* ---- Q&A ---- */
.people-detail-qa {
  position: relative;
  padding-top: 79px;
  background: #fff;
}

.people-detail-qa__block {
  position: relative;
}
.people-detail-qa__block + .people-detail-qa__block {
  margin-top: 90px;
}

/* カンプ実測: 回答は設問文と同じ頭位置（Q番号の右 74px）から 33文字/行・字間0。
   74 + 16px×34（34文字の行あり）= 618 → 634px */
.people-detail-qa__body {
  width: 534px;
}

.people-detail-qa__block--left .people-detail-qa__body {
  margin-left: 470px;
}

.people-detail-qa__block--full .people-detail-qa__body {
  width: auto;
}

.people-detail-qa__media {
  position: absolute;
  display: block;
  width: 470px;
  height: 640px;
}

.people-detail-qa__block--right .people-detail-qa__media {
  top: -139px;
  left: 654px;
}

.people-detail-qa__block--left .people-detail-qa__media {
  top: 0;
  left: -100px;
}

.people-detail-qa__block--pair {
  display: grid;
  grid-template-columns: 421px 1fr;
  gap: 65px;
}

.people-detail-q + .people-detail-q {
  margin-top: 45px;
}

.people-detail-q__title {
  display: flex;
  align-items: baseline; /* Q番号（40px）と設問1行目のベースラインを揃える */
  margin: 0;
  color: #008a42;
  font-size: 24px;
  font-weight: 900;
  line-height: 48px;
  letter-spacing: 0;
}

.people-detail-q__num {
  flex: none;
  width: 74px; /* 番号の幅を固定。設問が何行になっても頭はここから */
  font-size: 40px;
  line-height: 0.6;
}

.people-detail-q__question {
  flex: 1;
  min-width: 0;
}

.people-detail-q__text {
  margin: 11px 0 2em;
  color: #231815;
  font-size: 16px;
  font-weight: 500;
  line-height: 40px;
  /* body の 0.04em を継承すると 33文字目が折り返して <br> と二重改行になる */
  letter-spacing: 0;
  /* 均等揃え（20260907 指示）。固定改行 <br> があると効かないため、折り返し用の <br> は HTML から外して自然改行にしている */
  text-align: justify;
}
.people-detail-q__text:last-child {
  margin-bottom: 0;
}

/* クロストークの話者イニシャル */
.people-detail-q__speaker {
  color: #278a3d;
}

/* ---- 年表 / スケジュール ---- */
.people-detail-topic {
  position: relative;
  z-index: 10;
  margin-top: 80px;
  padding: 72px 0;
  /* 背景は ::before に持たせ、::after のブラシをその裏（z-index 0）に置く。
     擬似要素は親自身の背景より裏には描けないため */
  background: none;
}
.people-detail-topic::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #f0f7f2;
  content: "";
}
.people-detail-topic::after {
  position: absolute;
  right: -140px;
  bottom: -270px;
  z-index: 0;
  width: 360px;
  height: 560px;
  background: url("../img/top/bg-top-interview02.svg") center/contain no-repeat;
  mix-blend-mode: normal;
  pointer-events: none;
  content: "";
}

.people-detail-topic__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 470px 1fr;
  gap: 35px;
}

.people-detail-qa--rest {
  padding-top: 80px;
}

/* 20260904修正: Q6〜（全幅ブロック）の右端にブラシを追加（カンプ参照）。
   z-index:-1 をブロック内に閉じ込め、ページ背景の下に潜らないようにする */
.people-detail-qa__block--full {
  isolation: isolate;
}
.people-detail-qa__block--full::after {
  position: absolute;
  top: -20px;
  right: -380px;
  z-index: -1;
  width: 360px;
  height: 560px;
  background: url("../img/top/bg-top-interview02.svg") center/contain no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
  content: "";
}

.people-detail-topic__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: #008a42;
  font-size: 40px;
  font-weight: 900;
  line-height: 50px;
  letter-spacing: 0;
}

.people-detail-topic__small {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.people-detail-topic__text {
  margin: 22px 0 0;
  color: #231815;
  font-size: 16px;
  font-weight: 500;
  line-height: 40px;
}

.people-detail-topic__face {
  display: block;
  width: 130px;
  height: 130px;
  margin-top: 30px;
  border-radius: 50%;
}

.people-detail-topic__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.people-detail-topic__item {
  position: relative;
  padding: 0 0 30px 39px;
}
.people-detail-topic__item::before {
  position: absolute;
  top: 6px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 2px solid #008a42;
  border-radius: 50%;
  content: "";
}
.people-detail-topic__item::after {
  position: absolute;
  top: 26px;
  bottom: 5px;
  left: 6px;
  width: 2px;
  background: #278a3d;
  content: "";
}
.people-detail-topic__item:last-child {
  padding-bottom: 0;
}
.people-detail-topic__item:last-child::after {
  display: none;
}

.people-detail-topic__label {
  margin: 0;
  color: #008a42;
  font-size: 24px;
  font-weight: 900;
  line-height: 34px;
  letter-spacing: 0;
}

.people-detail-topic__sub {
  margin-left: 4px;
  font-size: 18px;
  font-weight: 500;
}

.people-detail-topic__body {
  margin: 4px 0 0;
  color: #008a42;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
}

/* ---- 注記とボタン ---- */
.people-detail-foot {
  padding: 19px 0 160px;
  background: #fff;
}

.people-detail-note {
  margin: 0 0 0 1px;
  color: #231815;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
}

.people-detail-button {
  margin: 79px auto 0;
  color: #008a42;
}

/* ---- ENTRY（リード文なし） ---- */
@media (max-width: 767px) {
  .people-detail-page .breadcrumb {
    display: none;
  }
  .people-detail-inner {
    width: auto;
    padding: 0 20px;
  }
  /* FV：写真＋見出し帯 */
  .people-detail-hero {
    height: auto;
    /* 見出し帯の背景は __inner ではなく hero 側に持つ。
       __inner は z-index:1 のため、背景を持たせるとブラシ（::after）を覆ってしまう */
    background: #fafafa;
  }
  .people-detail-hero__media {
    position: static;
    display: block;
    /* SPカンプ750px基準の写真 750x641。375pxで320.5pxになる比率を維持する */
    height: auto;
    aspect-ratio: 750/641;
    /* 750〜1199px（タブレット〜小型ノート）。
       750x641 の比率のまま幅に追従させると 1199px で高さ1012pxになり、
       見出し・プロフィールがファーストビュー外へ出る。
       PCカンプの写真高さ 640px を上限にして、あふれた縦をトリミングする。
       カンプに無い中間幅の扱いのため pending-questions B-15 を参照 */
  }
  /* 上のトリミングで頭が切れないよう、基準を上端に寄せる（既定は center） */
  /* ブラシ SPカンプ実測: 894x690 を left=438.5 / top=251.2（750px基準）。
     hero の上端が 120 なので top は 131.2 → 17.49vw。比率維持のため vw 指定 */
  /* リード */
  /* Q&A */
  /* 年表 / スケジュール */
  /* 注記とボタン */
  /* ENTRY */
}
@media (max-width: 767px) and (min-width: 750px) {
  .people-detail-hero__media {
    height: 640px;
    aspect-ratio: auto;
  }
}
@media (max-width: 767px) and (min-width: 750px) {
  .people-detail-hero__image {
    object-position: center top;
  }
}
@media (max-width: 767px) {
  .people-detail-hero::after {
    top: 17.49vw;
    right: -77.73vw;
    width: 119.2vw;
    height: 92vw;
  }
  .people-detail-hero__inner {
    padding: 26px 20px 40px;
  }
  .people-detail-page--04 .people-detail-hero__inner {
    padding-top: 26px;
  }
  .people-detail-hero__title {
    margin-left: 0;
    font-size: 26px;
    line-height: 39px;
  }
  .people-detail-hero__profile {
    margin: 26px 0 0;
    font-size: 14px;
    line-height: 24px;
  }
  .people-detail-hero__profile + .people-detail-hero__profile {
    margin-top: 14px;
  }
  .people-detail-lead {
    height: auto;
    padding: 60px 0 80px;
  }
  .people-detail-lead__text {
    margin-left: 0;
    font-size: 16px;
    line-height: 28px;
  }
  .people-detail-qa {
    padding-top: 0;
  }
  .people-detail-qa__block {
    display: flex;
    flex-direction: column;
  }
  .people-detail-qa__block + .people-detail-qa__block {
    margin-top: 0;
  }
  .people-detail-qa__body,
  .people-detail-qa__block--left .people-detail-qa__body,
  .people-detail-qa__block--full .people-detail-qa__body {
    width: auto;
    margin-left: 0;
    padding-top: 46px;
  }
  .people-detail-qa__media {
    position: static;
    order: -1;
    /* SPカンプ750px基準で写真は 520x708（片側は画面端まで抜ける）。
       520/750 = 69.333vw。375px幅では従来と同じ260pxになり、
       600/700px幅でもカンプと同じ比率を保つ */
    width: 69.333vw;
    height: auto;
    aspect-ratio: 260/354;
    margin-top: -64px;
  }
  .people-detail-qa__block--right .people-detail-qa__media {
    margin-left: auto;
    margin-right: -20px;
    margin-top: -20px;
  }
  .people-detail-qa__block--left .people-detail-qa__media {
    margin-left: -20px;
    margin-top: 55px;
  }
  .people-detail-qa__block--pair {
    display: block;
  }
  .people-detail-q + .people-detail-q {
    margin-top: 34px;
  }
  .people-detail-qa__block--pair .people-detail-q + .people-detail-q {
    margin-top: 34px;
  }
  .people-detail-q__title {
    font-size: 22px;
    line-height: 33px;
  }
  .people-detail-q__num {
    width: 60px;
    font-size: 30px;
    line-height: 0.6;
  }
  .people-detail-q__text {
    margin-top: 10px;
    margin-bottom: 1em;
    font-size: 16px;
    line-height: 28px;
  }
  .people-detail-qa__block + .people-detail-qa__block {
    margin-top: 34px;
  }
  .people-detail-qa__block--full::after {
    top: auto;
    right: -140px;
    bottom: 120px;
    width: 240px;
    height: 380px;
  }
  .people-detail-topic {
    margin-top: 56px;
    padding: 46px 0;
  }
  .people-detail-topic__inner {
    display: block;
  }
  .people-detail-qa--rest {
    padding-top: 56px;
  }
  .people-detail-topic__title {
    font-size: 26px;
    line-height: 36px;
  }
  .people-detail-topic__small {
    font-size: 16px;
    line-height: 24px;
  }
  .people-detail-topic__text {
    margin-top: 16px;
    font-size: 15px;
    line-height: 28px;
  }
  .people-detail-topic__face {
    width: 110px;
    height: 110px;
    margin-top: 24px;
  }
  .people-detail-topic__list {
    margin-top: 34px;
  }
  .people-detail-topic__item {
    padding: 0 0 26px 30px;
  }
  .people-detail-topic__item::before {
    top: 5px;
    width: 13px;
    height: 13px;
  }
  .people-detail-topic__item::after {
    top: 29px;
    left: 6px;
  }
  .people-detail-topic__label {
    font-size: 20px;
    line-height: 30px;
  }
  .people-detail-topic__sub {
    font-size: 15px;
  }
  .people-detail-topic__body {
    font-size: 15px;
    line-height: 28px;
  }
  .people-detail-foot {
    padding: 24px 0 60px;
  }
  .people-detail-note {
    margin-left: 0;
    font-size: 12px;
    line-height: 22px;
  }
  .people-detail-button {
    gap: 20px;
    width: 320px;
    border-width: 1px;
    height: 48px;
    margin-top: 46px;
    font-size: 16px;
  }
}
/* ---- 育成・研修制度を知る：SP ---- */
@media (max-width: 767px) {
  .training-hero-image {
    height: auto;
  }
  .training-hero-image__image {
    display: block;
    width: 100%;
    height: auto;
  }
  .training-inner {
    width: calc(100% - 40px);
  }
  .training-section-head__title {
    /* カンプSP実測: 「よくある質問にお答えします。」行幅258px/14字
       （実効字送り≈18.4px、グリフ高換算でfs≈20px）。25pxだと
       「安心のステップで、〜」等が余分に折り返す */
    font-size: 22px;
    letter-spacing: -0.08em;
    line-height: 1.5;
  }
  .training-section-head__text,
  .training-section-head__lead,
  .training-intro__text {
    font-size: 16px;
    line-height: 1.85;
  }
  /* SPカンプは本文・リードも改行指定あり（PCの <br> ＋ u-br-sp）。FAQ回答は流し込みのまま */
  .training-faq__text br,
  .training-faq__answer-lead br {
    display: none;
  }
  .training-intro {
    padding: 52px 0 58px;
  }
  .training-intro__grid,
  .training-section-head--with-figure {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .training-intro__title {
    margin-bottom: 10px;
    font-size: 22px;
  }
  .training-intro__zero {
    font-size: 50px;
  }
  .training-intro__pro {
    font-size: 45px;
  }
  .training-intro__figure {
    width: 305px;
    margin: 0 auto;
  }
  .training-stream,
  .training-system,
  .training-step,
  .training-voice {
    padding: 56px 0 60px;
  }
  /* 見出し右の筆（SPカンプにもあり）。PC 380x459 / 580 を縮小して右上に */
  .training-stream::before {
    top: -100px;
    right: -70px;
    width: 220px;
    height: 266px;
  }
  .training-voice::before {
    top: -100px;
    right: -70px;
    width: 220px;
    height: 266px;
    margin-left: 0;
  }
  .training-stream .training-duo,
  .training-system .training-duo {
    margin-top: 38px;
  }
  .training-duo {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .training-duo__card,
  .training-duo--filled .training-duo__card {
    padding: 28px 24px 30px;
  }
  .training-duo__title {
    margin-bottom: 15px;
    font-size: 20px;
  }
  .training-duo__accent {
    font-size: 25px;
  }
  .training-duo__note {
    font-size: 20px;
  }
  .training-duo__item,
  .training-step__point {
    padding-left: 17px;
    font-size: 14px;
    line-height: 1.8;
  }
  .training-duo__item::before,
  .training-step__point::before {
    width: 8px;
    height: 8px;
  }
  .training-duo__figure {
    padding-top: 22px;
  }
  .training-duo__figure img {
    width: 154px;
  }
  .training-duo__photo {
    margin: 28px -24px -30px;
  }
  /* × はカード間（DOM順）に通常フローで置いて中央に出す */
  .training-duo__cross {
    position: static;
    margin: -12px 0;
    font-size: 40px;
    text-align: center;
    transform: none;
  }
  .training-system__figure {
    width: 320px;
    margin: 0 auto;
  }
  .training-step__list {
    grid-template-columns: 1fr;
    gap: 61px;
    margin-top: 58px;
  }
  /* SPは下向き。カンプ実測（SP_育成制度_260824.ai / SP375px基準）:
     ink 26.5 x 18.25px、垂直方向の太さ 5.25px、カード上端からの相対位置 y = -40.25px。 */
  .training-step__card:not(:first-child)::before {
    top: -40.25px;
    left: 50%;
    width: 26.5px;
    height: 18.25px;
    clip-path: polygon(0 0, 0 5.25px, 50% 100%, 100% 5.25px, 100% 0, 50% 13px);
    transform: translateX(-50%);
  }
  .training-step__year {
    padding: 6px 0 12px 0;
    font-size: 22px;
  }
  .training-step__num {
    font-size: 30px;
  }
  .training-step__block {
    padding: 16px 18px 0;
  }
  .training-step__block:last-child {
    padding-bottom: 27px;
  }
  .training-step__label {
    font-size: 14px;
  }
  .training-step__theme {
    font-size: 17px;
  }
  .training-step__goal {
    font-size: 14px;
    line-height: 1.6;
  }
  .training-voice__list {
    gap: 56px;
    margin-top: 56px;
  }
  .training-voice__card {
    grid-template-columns: 140px minmax(0, 1fr);
    grid-template-areas: "photo meta" "qualification qualification" "comment comment";
    column-gap: 16px;
    padding: 16px 20px 28px 0;
  }
  .training-voice__card picture {
    margin-left: 0;
  }
  .training-voice__year {
    top: -16px;
    height: 33px;
    padding: 0 22px 0 13px;
    font-size: 18px;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 100%, 0 100%);
  }
  .training-voice__photo {
    width: 140px;
    height: 157px;
  }
  .training-voice__name {
    font-size: 22px;
  }
  .training-voice__job,
  .training-voice__license-item {
    font-size: 14px;
  }
  .training-voice__job {
    margin-top: 6px;
    /* 列幅 144px に「省エネコンサルタント」（10字）が収まるよう字間 0（14px×10＝140px） */
    letter-spacing: 0;
  }
  .training-voice__job-break {
    display: inline;
  }
  .training-voice__job-sep {
    display: none;
  }
  .training-voice__qualification {
    margin-top: 16px;
    padding-left: 18px;
  }
  .training-voice__license {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .training-voice__license-item::before {
    width: 7.5px;
    height: 7.5px;
  }
  .training-voice__label {
    margin-bottom: 5px;
    font-size: 14px;
  }
  .training-voice__license-note {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.04em;
  }
  .training-voice__comment {
    margin-top: 24px;
    margin-left: 18px;
    padding: 0 24px;
    font-size: 16px;
    line-height: 1.7;
  }
  .training-voice__comment::before, .training-voice__comment::after {
    font-size: 55px;
  }
  .training-voice__comment::before {
    top: -8px;
  }
  .training-voice__comment::after {
    bottom: -38px;
  }
  .training-faq {
    padding: 0 0 72px;
  }
  .training-faq__list {
    margin-top: 42px;
  }
  .training-faq__question {
    gap: 12px;
    padding: 26px 40px 26px 0;
    font-size: 18px;
  }
  .training-faq__mark {
    font-size: 17px;
  }
  .training-faq__answer {
    padding-bottom: 38px;
  }
  .training-faq__answer-lead {
    gap: 12px;
    font-size: 16px;
  }
  .training-faq__block {
    margin-top: 32px;
    padding-left: 0;
  }
  .training-faq__subtitle {
    margin-bottom: 14px;
    padding-left: 21px;
    font-size: 17px;
  }
  .training-faq__subtitle::before {
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 9px;
  }
  .training-faq__text {
    font-size: 14px;
    line-height: 1.8;
  }
  .training-faq__figure {
    margin-top: 25px;
    overflow-x: auto;
  }
  .training-faq__figure img {
    width: 680px;
    max-width: none;
  }
  .training-faq__tags {
    display: grid;
    gap: 10px;
    margin-top: 25px;
    padding: 24px;
  }
  .training-faq__tag {
    font-size: 14px;
  }
}
/* ==========================================================================
   エントリーフォーム（Snow Monkey Forms）
   contact.html / confirm.html / thanks.html

   DOMはSMFの出力に合わせている。
   - フォーム本体は `.smf-form`（SMFはここのinnerHTMLを完了画面で差し替える）
   - コントロールは `.smf-placeholder[data-name]` の中に入る
   - 画面状態は `form.snow-monkey-form[data-screen="input|confirm|complete"]`
   - ボタンは `.smf-action`（`.smf-form` の外）に入るため、
     入力画面の薄緑ボックスは `.entry-form__box` と `.smf-action` の
     2箇所に同じ背景を敷いて1枚に見せている
   - SMF同梱CSS（dist/css/app.css）の `.smf-action .smf-button-control__control`
     （詳細度 0,2,0）に負けないよう、ボタンは `.snow-monkey-form` を足した
     0,3,0 で書いている

   カンプ実測値は docs/entry-form-plan.md の表を参照。
   ========================================================================== */
.snow-monkey-form {
  display: flex;
  flex-direction: column;
}

.snow-monkey-form > .snow-monkey-forms-turnstile {
  text-align: center;
}

.snow-monkey-form > .smf-action {
  order: 1;
}

.entry-page {
  width: 100%;
  overflow: hidden;
  background: #fff;
}

/* --- ページ枠 ------------------------------------------------------------ */
.entry-form {
  /* カンプ実測: 帯下端405 → リード文の行ボックス上端475.5 / ボックス下端2023 → エントリーエリア2254.5 */
  padding: 70px 0 230px;
  background: #fff;
}

.entry-form__inner {
  width: 1000px;
  margin: 0 auto;
}

.entry-form__lead {
  margin: 0;
  font-size: 20px;
  line-height: 36px;
  letter-spacing: 0;
  color: #211815;
}

/* 入力/確認でリード文を出し分ける（SMFは画面を切り替えても .smf-form 内のHTMLを残す） */
.snow-monkey-form[data-screen=input] .entry-form__lead--confirm,
.snow-monkey-form[data-screen=invalid] .entry-form__lead--confirm,
.snow-monkey-form[data-screen=confirm] .entry-form__lead--input {
  display: none;
}

/* --- 入力欄をまとめる薄緑ボックス ---------------------------------------- */
.entry-form__box {
  /* カンプ実測: リード文の行ボックス下端511.5 → ボックス上端604.34 */
  margin-top: 93px;
  padding: 0 20px;
}

.snow-monkey-form[data-screen=input] .entry-form__box,
.snow-monkey-form[data-screen=invalid] .entry-form__box,
.snow-monkey-form[data-screen=input] .smf-action,
.snow-monkey-form[data-screen=invalid] .smf-action,
.snow-monkey-form[data-screen=input] > .snow-monkey-forms-turnstile,
.snow-monkey-form[data-screen=invalid] > .snow-monkey-forms-turnstile {
  background: #f0f7f2;
}

.entry-form .snow-monkey-form > .snow-monkey-forms-turnstile--position\:after {
  margin-top: 0;
  padding-top: var(--_s1);
  padding-bottom: var(--_s2);
  line-height: 0;
}

.snow-monkey-form[data-screen=input] .entry-form__item--agree,
.snow-monkey-form[data-screen=invalid] .entry-form__item--agree {
  padding-bottom: 0;
}

/* --- 1行（SMFの .smf-item） ---------------------------------------------- */
.entry-form__item {
  display: grid;
  /* ラベル列 141px + 必須バッジ列 56px = 197px（カンプ: ラベル120 / バッジ261 / 入力317） */
  grid-template-columns: 197px 1fr;
  /* 行の高さはカンプが1行ずつ手置きなので padding-bottom を行ごとに持つ */
  padding: 22px 0 26px;
}

.entry-form__item--entry-type {
  padding-bottom: 36px;
}

.entry-form__item--gender {
  padding-bottom: 30px;
}

.entry-form__item--birth {
  padding-bottom: 22px;
}

.entry-form__item--tel {
  padding-bottom: 22px;
}

.entry-form__item--email {
  padding-bottom: 22px;
}

.entry-form__item--university {
  padding-bottom: 31px;
}

.entry-form__item--note {
  padding-bottom: 35px;
}

.entry-form__item--agree {
  padding-bottom: 42px;
}

/* --- ラベル列 ------------------------------------------------------------ */
.entry-form__item .smf-item__col--label {
  display: grid;
  grid-template-columns: 141px 56px;
  align-content: start;
}

.entry-form__item .smf-item__label {
  grid-column: 1;
  grid-row: 1;
  /* html の 20px を strut が拾うと行ボックスが 28px を超えるため明示する */
  font-size: 16px;
  line-height: 28px;
}

.entry-form__item .smf-item__label__text {
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0;
  color: #211815;
}

/* （全角）などの補足と、備考の説明文。SMFの item ブロックの description に相当 */
.entry-form__item .smf-item__description {
  display: block;
  grid-column: 1;
  grid-row: 2;
  font-size: 14px;
  line-height: 28px;
  letter-spacing: 0;
  color: #211815;
}

/* 備考の説明文だけカンプで4px下がっている */
.entry-form__item--note .smf-item__description {
  margin-top: 4px;
}

.entry-form__require {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  width: 40px;
  height: 20px;
  margin-top: 4px;
  background: #278a3d;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
}

/* --- コントロール列 ------------------------------------------------------ */
.entry-form__row {
  display: flex;
  align-items: center;
  /* カンプ実測: 入力欄の上端は行上端+26.7（ラベルの行ボックス上端+4.4） */
  margin-top: 4px;
}

/* 漢字性/カナ性のような小見出しを持つ行は、その小見出しが上の余白を担う */
.entry-form__row--labeled {
  align-items: flex-start;
  margin-top: 0;
}

.entry-form__row--name {
  gap: 11px;
}

.entry-form__cell {
  flex: 0 0 auto;
}

.entry-form__cell--name {
  width: 239px;
}

.entry-form__cell--year {
  width: 119px;
}

.entry-form__cell--date {
  width: 79px;
}

.entry-form__cell--tel {
  width: 79px;
}

.entry-form__cell--wide {
  width: 399px;
}

.entry-form__cell--textarea {
  width: 519px;
}

.entry-form__fieldlabel {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: #211815;
}

/* 年 / 月 / 日 / - */
.entry-form__unit {
  flex: 0 0 auto;
  margin: 0 12px 0 7px;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0;
  color: #211815;
}

/* --- SMFのコントロール本体 ----------------------------------------------- */
.entry-form__item .smf-text-control__control,
.entry-form__item .smf-textarea-control__control {
  display: block;
  width: 100%;
  padding: 0 12px;
  border: 1px solid #c3c4c5;
  border-radius: 0;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0;
  color: #211815;
}

.entry-form__item .smf-text-control__control {
  height: 43px;
  line-height: 41px;
}

.entry-form__item .smf-textarea-control__control {
  height: 199px;
  padding: 10px 12px;
  line-height: 28px;
  resize: vertical;
}

.entry-form__item .smf-text-control__control::placeholder,
.entry-form__item .smf-textarea-control__control::placeholder {
  color: #9a9a9a;
}

/* ラジオ / チェックボックス */
.entry-form__item .smf-radio-buttons-control__control,
.entry-form__item .smf-checkboxes-control__control {
  display: flex;
  flex-direction: column;
  /* カンプ実測: 選択肢の行送り38px（行ボックス28 + 10） */
  gap: 10px;
}

.entry-form__item .smf-radio-buttons-control--horizontal .smf-radio-buttons-control__control {
  flex-direction: row;
  gap: 19px;
}

.entry-form__item .smf-label {
  font-size: 16px;
  line-height: 28px;
}

/* inline-flex のままだとベースライン下のアキで行が数px伸びる */
.entry-form__item .smf-label > label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.entry-form__item .smf-radio-button-control,
.entry-form__item .smf-checkbox-control {
  display: flex;
  align-items: center;
  line-height: 28px;
}

.entry-form__item .smf-radio-button-control__control,
.entry-form__item .smf-checkbox-control__control {
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}

.entry-form__item .smf-radio-button-control__control {
  border: 1px solid #c3c4c5;
  background: #fff;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.entry-form__item .smf-radio-button-control__control:checked {
  border-color: #278a3d;
  background: radial-gradient(circle at center, #278a3d 0 5px, transparent 5px);
}

.entry-form__item .smf-checkbox-control__control {
  appearance: auto;
  width: auto;
  height: auto;
  border: revert;
  background: revert;
  accent-color: auto;
}

.entry-form__item .smf-radio-button-control__label,
.entry-form__item .smf-checkbox-control__label {
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0;
  color: #211815;
}

.entry-form__agree-link {
  color: inherit;
  text-decoration: underline;
}

.entry-form .smf-error-messages {
  font-size: 14px;
}

/* --- ボタン（.smf-action） ----------------------------------------------- */
.entry-form .smf-action {
  display: flex;
  justify-content: center;
  padding-bottom: 56px;
}

.snow-monkey-form .smf-action .smf-button-control {
  display: inline-block;
}

.snow-monkey-form .smf-action .smf-button-control + .smf-button-control {
  margin-left: 40px;
}

.snow-monkey-form .smf-action .smf-button-control__control {
  width: 375px;
  height: 64px;
  padding: 0;
  border: 2px solid #278a3d;
  border-radius: 0;
  background: #fff;
  background-image: none;
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: 0;
  color: #278a3d;
  cursor: pointer;
}

/* --- 確認画面 ------------------------------------------------------------ */
.snow-monkey-form[data-screen=confirm] .entry-form__box {
  background: none;
}

.snow-monkey-form[data-screen=confirm] .smf-action {
  padding-bottom: 0;
  background: none;
}

.snow-monkey-form[data-screen=confirm] .smf-action .smf-button-control__control {
  width: 240px;
}

/* 確認画面では 漢字性/カナ性 の小見出しは出さない（カンプは値だけ） */
.snow-monkey-form[data-screen=confirm] .entry-form__fieldlabel {
  display: none;
}

.snow-monkey-form[data-screen=confirm] .entry-form__row {
  margin-top: 0;
}

/* 確認画面は値のテキストなので幅指定を外す。
   flex-shrink を戻さないと長い値（備考）が親をはみ出して .entry-page の
   overflow:hidden で切れる */
.snow-monkey-form[data-screen=confirm] .entry-form__cell {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
}

/* 確認画面の姓名は「田中　隆弘」と全角スペースぶん空ける（カンプ実測 ink間14px） */
.snow-monkey-form[data-screen=confirm] .entry-form__row--name .entry-form__cell + .entry-form__cell {
  margin-left: 16px;
}

.snow-monkey-form[data-screen=confirm] .entry-form__item .smf-placeholder {
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0;
  color: #211815;
}

.snow-monkey-form[data-screen=confirm] .entry-form__item--note .smf-placeholder {
  line-height: 36px;
}

.snow-monkey-form[data-screen=confirm] .entry-form__item--entry-type {
  padding-bottom: 29px;
}

.snow-monkey-form[data-screen=confirm] .entry-form__item--name {
  padding-bottom: 22px;
}

.snow-monkey-form[data-screen=confirm] .entry-form__item--kana {
  padding-bottom: 22px;
}

.snow-monkey-form[data-screen=confirm] .entry-form__item--gender {
  padding-bottom: 30px;
}

.snow-monkey-form[data-screen=confirm] .entry-form__item--university {
  padding-bottom: 30px;
}

.snow-monkey-form[data-screen=confirm] .entry-form__item--note {
  padding-bottom: 62px;
}

/* --- 送信完了画面 --------------------------------------------------------- */
/* 完了画面では SMF が .smf-action を空にする。余白だけ残るので隠す */
.snow-monkey-form[data-screen=complete] .smf-action {
  display: none;
}

.entry-form--complete {
  padding: 61px 0 229px;
}

.entry-done__title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0;
  color: #278a3d;
}

.entry-done__title--result {
  margin-top: 70px;
}

.entry-done__text {
  margin: 19px 0 0;
  font-size: 16px;
  line-height: 36px;
  letter-spacing: 0;
  color: #211815;
}

.entry-done__note {
  margin-top: 38px;
}

.entry-done__note--tight {
  margin-top: 30px;
}

.entry-done__subtitle {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0;
  color: #211815;
}

.entry-done__note .entry-done__text {
  margin-top: 0;
}

.entry-done__contact {
  display: grid;
  grid-template-columns: 138px 1fr;
  margin: 40px 0 0;
  padding: 21px 20px 25px;
  background: #f0f7f2;
}

.entry-done__contact-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0;
  color: #211815;
}

.entry-done__contact-body {
  margin: 0;
}

.entry-done__contact-line {
  display: block;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 0;
  color: #211815;
}

.entry-done__action {
  margin-top: 72px;
  text-align: center;
}

.entry-done__button {
  display: inline-block;
  width: 375px;
  height: 64px;
  border: 2px solid #278a3d;
  background: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: 0;
  color: #278a3d;
  text-align: center;
  text-decoration: none;
}

/* --- SMFの読み込み中/エラー表示 ------------------------------------------ */
.snow-monkey-form[data-screen=loading] {
  visibility: hidden;
}

.smf-system-error-content-ready {
  display: none !important;
}

@media (max-width: 767px) {
  .entry-page {
    min-width: 0;
  }
  /* --- ページ枠 ---------------------------------------------------------- */
  .entry-form {
    /* SPカンプ実測: 帯下端195 → リード文の行ボックス上端228 / ボックス下端1988.7 → エントリーエリア2113.3 */
    padding: 33px 0 125px;
  }
  .entry-form__inner {
    width: 100%;
    padding: 0 20px;
  }
  .entry-form__lead {
    font-size: 18px;
    line-height: 30px;
  }
  .entry-form__box {
    margin-top: 36px;
    padding: 0 19px;
  }
  /* --- 1行 --------------------------------------------------------------- */
  .entry-form__item {
    display: block;
    padding: 19px 0 29px;
  }
  .entry-form__item--entry-type {
    padding-bottom: 24px;
  }
  .entry-form__item--name {
    padding-bottom: 35px;
  }
  .entry-form__item--kana {
    padding-bottom: 35px;
  }
  .entry-form__item--gender {
    padding-bottom: 23px;
  }
  .entry-form__item--birth {
    padding-bottom: 29px;
  }
  .entry-form__item--tel {
    padding-bottom: 29px;
  }
  .entry-form__item--email {
    padding-bottom: 29px;
  }
  .entry-form__item--university {
    padding-bottom: 29px;
  }
  .entry-form__item--note {
    padding-bottom: 34px;
  }
  .entry-form__item--agree {
    padding-bottom: 38px;
  }
  /* ラベル・補足・必須バッジはSPでは1行に並べる */
  .entry-form__item .smf-item__col--label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .entry-form__item .smf-item__description {
    display: inline;
  }
  .entry-form__require {
    margin-top: 0;
    margin-left: 8px;
  }
  /* 備考だけ説明文が複数行なので縦積みに戻す */
  .entry-form__item--note .smf-item__col--label {
    display: block;
  }
  .entry-form__item--note .smf-item__description {
    display: block;
    margin-top: 3px;
  }
  /* --- コントロール列 ----------------------------------------------------- */
  /* margin だと子の .entry-form__row の margin-top と相殺されるので padding で置く */
  .entry-form__item .smf-item__col--controls {
    padding-top: 7px;
  }
  .entry-form__row--name {
    gap: 9px;
  }
  .entry-form__cell--name {
    width: 139px;
  }
  .entry-form__cell--year {
    width: 79px;
  }
  .entry-form__cell--date {
    width: 43px;
  }
  .entry-form__cell--tel {
    width: 79px;
  }
  .entry-form__cell--wide {
    width: 294px;
  }
  .entry-form__cell--textarea {
    width: 294px;
  }
  .entry-form__unit {
    margin: 0 9px;
  }
  .entry-form__item .smf-textarea-control__control {
    height: 139px;
  }
  /* --- ボタン ------------------------------------------------------------- */
  .entry-form .smf-action {
    padding-bottom: 42px;
  }
  .snow-monkey-form .smf-action .smf-button-control__control {
    width: 295px;
    height: 48px;
    font-size: 16px;
    line-height: 44px;
  }
  .snow-monkey-form .smf-action .smf-button-control + .smf-button-control {
    margin-left: 20px;
  }
  .snow-monkey-form[data-screen=confirm] .smf-action .smf-button-control__control {
    width: 140px;
  }
  /* --- 確認画面 ----------------------------------------------------------- */
  .snow-monkey-form[data-screen=confirm] .entry-form__item--entry-type,
  .snow-monkey-form[data-screen=confirm] .entry-form__item--name,
  .snow-monkey-form[data-screen=confirm] .entry-form__item--kana,
  .snow-monkey-form[data-screen=confirm] .entry-form__item--gender,
  .snow-monkey-form[data-screen=confirm] .entry-form__item--birth,
  .snow-monkey-form[data-screen=confirm] .entry-form__item--tel,
  .snow-monkey-form[data-screen=confirm] .entry-form__item--email,
  .snow-monkey-form[data-screen=confirm] .entry-form__item--university {
    padding-bottom: 23px;
  }
  .snow-monkey-form[data-screen=confirm] .entry-form__item--note {
    padding-bottom: 24px;
  }
  .snow-monkey-form[data-screen=confirm] .entry-form__item--agree {
    padding-bottom: 38px;
  }
  .snow-monkey-form[data-screen=confirm] .entry-form__row {
    margin-top: 0;
  }
  .snow-monkey-form[data-screen=confirm] .entry-form__item--note .smf-placeholder {
    line-height: 28px;
  }
  /* --- 送信完了画面 -------------------------------------------------------- */
  .entry-form--complete {
    padding: 32px 0 125px;
  }
  /* 本文1行が 336px（21字×16px）でカンプ幅に1px足りず折り返すため、この画面だけ左右19px */
  .entry-form--complete .entry-form__inner {
    padding: 0 19px;
  }
  .entry-done__title {
    font-size: 20px;
    line-height: 32px;
  }
  .entry-done__title--result {
    margin-top: 54px;
  }
  .entry-done__text {
    margin-top: 24px;
  }
  .entry-done__note {
    margin-top: 40px;
  }
  .entry-done__note--tight {
    margin-top: 42px;
  }
  .entry-done__subtitle {
    font-size: 18px;
    line-height: 30px;
  }
  .entry-done__note .entry-done__text {
    line-height: 30px;
  }
  .entry-done__contact {
    display: block;
    margin-top: 37px;
    padding: 17px 20px 25px;
  }
  .entry-done__contact-label {
    font-size: 18px;
    line-height: 30px;
  }
  .entry-done__contact-body {
    margin-top: 10px;
  }
  .entry-done__contact-line {
    line-height: 26px;
  }
  .entry-done__contact-hours {
    display: block;
  }
  .entry-done__action {
    margin-top: 49px;
  }
  .entry-done__button {
    width: 295px;
    height: 48px;
    font-size: 16px;
    line-height: 44px;
  }
}
/* 20260928修正: ヒーローのスライスは375pxとPC幅にぴったり作られているため、その中間幅
   （400〜767px）だけ枠が横長になりすぎて上下が最大200px近く切られ、人物の頭が欠ける。
   部活・デュアルキャリアは人物が横並びで欠けが目立つので、この幅だけ高さ固定をやめて
   画像の比率のまま出す。375px のカンプ幅と768px以上は従来どおり。
   400px 始まりなのは、iPhone の 390/412/430px でも部活の写真の頭が欠けるため。 */
@media (min-width: 400px) and (max-width: 767px) {
  .club-hero-image,
  .dual-career-hero-image,
  .club-hero-image__image,
  .dual-career-hero-image__image {
    height: auto;
  }
}
/* ==========================================================================
   ホバー
   基準カンプ: TOP260819_B_hover.ai（_on.ai との差分がホバー指定）
   下層にホバーカンプは無いため、TOP と同型のパーツに同じ基準を当てている。
     - 四角い枠ボタン   … 塗りが左から右へ流れる。塗り色＝枠色、文字色は反転
     - ピル型の矢印ボタン … 塗りと文字色が入れ替わる
   カード全体リンク（.top-future__link 等）はカンプ上変化しないため対象外。
   ヘッダー / ドロワー / フッター / パンくず / 本文中のテキストリンクも指定が
   ないため対象外。
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  /* ---- 背景が左から右に流れる ---- */
  /* ラベルは素のテキストノードなので、擬似要素を負の z-index に置いて
     「自身の背景 → 擬似要素 → テキスト」の順に描かせる（HTMLは変更しない）。
     擬似要素は padding box までしか覆わないが、枠色と塗り色を揃えるので継ぎ目は出ない。 */
  .site-header__entry,
  .top-button,
  .arrow-button,
  .jobs-detail-button,
  .dual-career-link__link,
  .entry-done__button,
  .snow-monkey-form .smf-action .smf-button-control__control {
    /* 擬似要素の基準。オフセットを持たないので既存レイアウトには影響しない */
    position: relative;
    isolation: isolate;
    transition: color 0.4s ease;
  }
  .site-header__entry::before,
  .top-button::before,
  .arrow-button::before,
  .jobs-detail-button::before,
  .dual-career-link__link::before,
  .entry-done__button::before,
  .snow-monkey-form .smf-action .smf-button-control__control::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--hover-fill);
    border-radius: inherit;
    /* 通常時は右基点＝ホバーを外すと右へ抜ける */
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
    content: "";
  }
  .site-header__entry:hover,
  .top-button:hover,
  .arrow-button:hover,
  .jobs-detail-button:hover,
  .dual-career-link__link:hover,
  .entry-done__button:hover,
  .snow-monkey-form .smf-action .smf-button-control__control:hover {
    color: var(--hover-text);
  }
  .site-header__entry:hover::before,
  .top-button:hover::before,
  .arrow-button:hover::before,
  .jobs-detail-button:hover::before,
  .dual-career-link__link:hover::before,
  .entry-done__button:hover::before,
  .snow-monkey-form .smf-action .smf-button-control__control:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }
  /* ヘッダーの ENTRY（白→緑に流れる） */
  .site-header__entry {
    --hover-fill: #2f9b4b;
    --hover-text: #fff;
  }
  /* TOP */
  .top-button {
    --hover-fill: #fff;
    --hover-text: #2f9b4b;
  }
  .top-button--green {
    --hover-fill: #278a3d;
    --hover-text: #fff;
  }
  /* ---- 画像リンクはフワッと透過（hover で 0.7） ---- */
  .top-future__link .top-future__image,
  .top-dual__photo-link .top-dual__image,
  .top-role__image-link img,
  .top-people__photo-link img,
  .people-card__image-link img,
  .working-environment-card__image-link img,
  .jobs-card__image-link img {
    transition: opacity 0.4s ease;
  }
  .club-team__link-group a {
    transition: opacity 0.4s ease;
  }
  .club-team__link-group a:hover {
    opacity: 0.7;
  }
  /* 現在の職種タブ（塗り済み）だけ hover で透過。他のタブは塗りに変わるホバーのまま */
  .requirements-tabs__link.is-current {
    transition: opacity 0.4s ease;
  }
  .requirements-tabs__link.is-current:hover {
    opacity: 0.7;
  }
  .top-future__link:hover .top-future__image,
  .top-dual__photo-link:hover .top-dual__image,
  .top-role__image-link:hover img,
  .top-people__photo-link:hover img,
  .people-card__image-link:hover img,
  .working-environment-card__image-link:hover img,
  .jobs-card__image-link:hover img {
    opacity: 0.7;
  }
  /* 下層共通の枠ボタン（.arrow-button は border-color が currentColor なので、
     文字色を白にすると枠まで白くなる。塗り色を変数で持たせて枠と揃える） */
  .arrow-button {
    --hover-fill: #008a42;
    --hover-text: #fff;
    border-color: var(--hover-fill);
  }
  .future-detail-button {
    --hover-fill: #008a42;
  }
  .people-detail-button {
    --hover-fill: #008a42;
  }
  .culture-link {
    --hover-fill: #2f9b4b;
  }
  .jobs-detail-button {
    --hover-fill: #008a42;
    --hover-text: #fff;
  }
  .dual-career-link__link {
    --hover-fill: #2f9b4b;
    --hover-text: #fff;
  }
  /* エントリーフォーム（送信・戻る・完了画面） */
  .entry-done__button,
  .snow-monkey-form .smf-action .smf-button-control__control {
    --hover-fill: #278a3d;
    --hover-text: #fff;
  }
  /* ---- 色が変わる ---- */
  .top-role__button,
  .top-people__button,
  .arrow-badge,
  .people-card__body a,
  .entry-area__buttons--primary a,
  .entry-area__wide,
  .entry-area__buttons--secondary a {
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
  }
  .top-role__button:hover,
  .top-people__button:hover,
  .arrow-badge:hover,
  .people-card__body a:hover,
  .entry-area__buttons--primary a:hover,
  .entry-area__wide:hover,
  .entry-area__buttons--secondary a:hover {
    border-color: var(--hover-fill);
    background-color: var(--hover-fill);
    color: var(--hover-text);
  }
  /* 塗り無しからの補間で暗く濁らないよう、開始色を透明で明示する */
  .top-role__button,
  .top-people__button,
  .arrow-badge,
  .people-card__body a,
  .entry-area__buttons--secondary a {
    background-color: rgba(255, 255, 255, 0);
  }
  .top-role__button {
    --hover-fill: #278a3d;
    --hover-text: #fff;
  }
  .top-people__button {
    --hover-fill: #fff;
    --hover-text: #2f9b4b;
  }
  /* .jobs-card__link / .working-environment-card__link / .jobs-detail-arrow は
     色の上書きが無いので .arrow-badge の指定で足りる */
  .arrow-badge {
    --hover-fill: #278a3d;
    --hover-text: #fff;
  }
  .people-card__body a {
    --hover-fill: #16833a;
    --hover-text: #fff;
  }
  .entry-area__buttons--primary a,
  .entry-area__wide {
    --hover-fill: #135e1d;
    --hover-text: #fff;
  }
  .entry-area__buttons--secondary a {
    --hover-fill: #fff;
    --hover-text: #2f9b4b;
  }
}
@media (prefers-reduced-motion: reduce) {
  .top-button,
  .top-button::before,
  .arrow-button,
  .arrow-button::before,
  .jobs-detail-button,
  .jobs-detail-button::before,
  .dual-career-link__link,
  .dual-career-link__link::before,
  .entry-done__button,
  .entry-done__button::before,
  .snow-monkey-form .smf-action .smf-button-control__control,
  .snow-monkey-form .smf-action .smf-button-control__control::before,
  .top-role__button,
  .top-people__button,
  .arrow-badge,
  .people-card__body a,
  .entry-area__buttons a,
  .entry-area__wide {
    transition: none;
  }
}
/* ==========================================================================
   スクロール演出（TOP：1000人への道を歩く人たち）
   参考: https://recruit.positive.co.jp/ の .p-top-interview .list-item__txt
   clip-path のワイプ + transition-delay の段差。出 0.5s / 戻り 0.25s の非対称。
   発火は .top-people への .is-inview（top.js の IntersectionObserver）と
   スライドの .is-active の両方が揃ったとき。
   ※ top.js が監視するのはセクションではなく .top-people__body。セクション上端で
     発火させると本文がまだ画面外にあり、到達前に演出が終わってしまう。
   ※ SPは非アクティブスライドが display:none のため、スライド切替時はワイプが
     走らず即表示になる（初回のスクロール表示だけ演出が効く）。
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .top-people__quote,
  .top-people__meta,
  .top-people__job,
  .top-people__button {
    /* -5% はクリップの縁で文字や枠線が欠けないようにするための逃げ */
    clip-path: inset(-5% 105% -5% -5%);
    transition: clip-path 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  }
  /* .top-people__button はホバー節でも transition を持つ。shorthand は後勝ちで
     潰れるため、ここでワイプとホバーの両方を1つにまとめて指定する。 */
  .top-people__button {
    transition: clip-path 0.25s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
  }
  /* 上から順に 0.12s 刻み */
  .top-people__quote {
    --wipe-delay: 0s;
  }
  .top-people__meta {
    --wipe-delay: 0.12s;
  }
  .top-people__job {
    --wipe-delay: 0.24s;
  }
  .top-people__button {
    --wipe-delay: 0.36s;
  }
  .top-people.is-inview .top-people__slide.is-active.is-wiped .top-people__quote,
  .top-people.is-inview .top-people__slide.is-active.is-wiped .top-people__meta,
  .top-people.is-inview .top-people__slide.is-active.is-wiped .top-people__job,
  .top-people.is-inview .top-people__slide.is-active.is-wiped .top-people__button {
    clip-path: inset(-5% -5% -5% -5%);
    transition: clip-path 0.5s var(--wipe-delay) cubic-bezier(0.23, 1, 0.32, 1);
  }
  .top-people.is-inview .top-people__slide.is-active.is-wiped .top-people__button {
    transition: clip-path 0.5s var(--wipe-delay) cubic-bezier(0.23, 1, 0.32, 1), background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
  }
}
/* ==========================================================================
   スクロール演出（TOP・描く未来TOP：描く未来から選ぶ）
   カードが画面に入ったら、ブラシを左から右へ塗り（0.6s）、そのあとコピーを出す。
   発火はカードごとの .future-brush--anim への .is-inview（common.js の IntersectionObserver）。
   隠すのは common.js が html に .is-brush-ready を付けたときだけ（JS が無ければ最初から表示）。
   ブラシの塗りは mask のグラデーション（不透明 40% → 透明 60%）を 250% 幅で敷き、
   位置を 100% → 0% に動かして縁がぼけたまま進むようにしている。
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .is-brush-ready .future-brush--anim .future-brush__paint {
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  .is-brush-ready .future-brush--anim .future-brush__text {
    opacity: 0;
    transform: translateX(-12px);
  }
  .is-brush-ready .future-brush--anim.is-inview .future-brush__paint {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    transition: -webkit-mask-position 0.6s cubic-bezier(0.45, 0, 0.15, 1), mask-position 0.6s cubic-bezier(0.45, 0, 0.15, 1);
  }
  .is-brush-ready .future-brush--anim.is-inview .future-brush__text {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s 0.45s ease, transform 0.5s 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  }
}