@charset "UTF-8";

/* =========================================================
   山田商会 採用サイト
   スケール方式: 1rem = 10px を基準とし、
     - 1440px以上 … 10px 固定（コンテンツは1440px中央寄せ）
     - 768〜1439px … 画面幅に比例して縮小（PCデザインの等倍縮小）
     - 767px以下  … SPデザイン(375px)を基準に画面幅へ比例
   したがってCSSの数値は「Figmaのpx ÷ 10」で書く。
   ========================================================= */

/* ---------- トークン ---------- */
:root {
  --c-text:   #343434;  /* Figma変数 343434-txt */
  --c-white:  #ffffff;  /* Figma変数 White */
  --c-gold:   #bab099;  /* Figma変数 logo color right */
  --c-red:    #e7161c;  /* アクセント（メニュー番号ほか） */
  --c-black:  #000000;
  --c-dark:   #3a3a3a;

  --font-en: "Barlow Condensed", sans-serif;
  --font-jp: "Barlow Condensed", "Noto Sans JP", sans-serif;
  --font-badge: "Afacad Flux", sans-serif;
  /* FigmaはLINE Seed JP。近い幾何学的サンセリフで代替する */
  --font-geo: "Poppins", "Noto Sans JP", sans-serif;

  /* スクロールバーぶんを除いた実際の表示幅。
     100vw はスクロールバーを含むため、そのまま使うと右端の要素が
     スクロールバーの下に潜り込んで画面からはみ出す。--sbw は main.js が実測して入れる */
  --sbw: 0px;
  --vw: calc(100vw - var(--sbw));

  --header-h: 6rem;     /* PC 60px */
  --page-w:  144rem;    /* 1440px */

  /* デザイン幅を超えたぶんの片側の余白。1440px以下では0 */
  --bleed: max(0px, calc((var(--vw) - var(--page-w)) / 2));
  /* 斜めの傾き（縦の落差 ÷ 横幅）。画面が広がっても角度を保つために比率で持つ */
  --slope:      0.208097;   /* カード類  257 / 1235 */
  --slope-mask: 0.208097;   /* 背景マスク 299.66 / 1440 */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 62.5%;             /* 1rem = 10px */
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }

body {
  font-family: var(--font-jp);
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--c-text);
  /* Figma: コンクリート写真 + 黒80%をoverlay合成 + モノトーンノイズ10% */
  background-color: #6b6b6b;
  background-image:
    url("../img/noise-mono.png"),
    linear-gradient(rgb(0 0 0 / .8), rgb(0 0 0 / .8)),
    url("../img/bg-page.webp");
  background-blend-mode: normal, overlay, normal;
  /* スクロールしても背景は動かさない（固定背景）。
     iOS Safari は fixed を無視して通常の背景として描くが、見え方が崩れることはない */
  background-attachment: fixed, fixed, fixed;
  /* コンクリートは cover だとページ全体（約2万px）に引き伸ばされて
     20倍近くまで拡大され、著しくぼやける。
     元画像の実寸(1920x1080)のままリピートさせて、拡大が一切かからないようにする */
  background-size: 12.8rem 12.8rem, 100% 100%, 1920px 1080px;
  background-position: 0 0, center, top center;
  background-repeat: repeat, no-repeat, repeat;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

/* ---------- ユーティリティ ---------- */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 1440px幅のデザインを中央に置くための内枠 */
.l-inner {
  width: 100%;
  max-width: var(--page-w);
  margin-inline: auto;
}

/* 1440pxを超える画面では、デザイン幅の内容を中央に置く。
   各セクションの絶対配置はこの枠を基準にする（枠がないと左端に寄る）。
   ページ背景は body に指定しているため、左右の余白にも回り込む */
main {
  width: 100%;
  max-width: var(--page-w);
  margin-inline: auto;
}
/* 追従ヘッダーは画面幅いっぱいだが、中身はデザイン幅に合わせて中央へ */
.l-header { padding-inline: max(1rem, calc((100% - var(--page-w)) / 2 + 1rem)); }

/* 装飾用の背景レイヤーはクリックを奪わない */
.p-what__bg, .p-about__bg, .p-strength__bg, .p-strength__shade,
.p-faq__bg, .l-slabs__bg, [aria-hidden="true"] { pointer-events: none; }
/* ただしメニューの背景だけは閉じるために反応させる */
.l-menu__backdrop { pointer-events: auto; }

/* スクロール連動フェードイン */
/* transform は絶対配置の子にとっての包含ブロックを作るため、
   中身が絶対配置のラッパーには付けないこと（見出しが本来と違う位置に描かれる）。
   そのため js-reveal は「実際に見える要素」自体に付ける */
.js-reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js-reveal.is-visible { opacity: 1; transform: none; }

/* 入り方のバリエーション。初期値の transform を差し替えるだけで、
   表示後は共通の .is-visible が transform: none に戻す */
.js-reveal--left { transform: translateX(-6rem); }
.js-reveal--top  { transform: translateY(-6rem); }
/* 先に出るものの後から追いかけて出る（求人の職種名など） */
.js-reveal--late { transition-delay: .45s; }

/* 左から見えていく（クリップ）。位置は動かさない */
.js-reveal--clip {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease);
}
.js-reveal--clip.is-visible { clip-path: inset(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal { opacity: 1; transform: none; transition: none; }
  .js-reveal--clip { clip-path: none; }
  .js-marquee { animation: none !important; }
}

/* =========================================================
   ヘッダー
   ========================================================= */
.l-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color .3s var(--ease);
}
/* MVを抜けたら暗い背景を敷いて白ロゴの可読性を保つ */
.l-header.is-scrolled {
  background: rgb(0 0 0 / .85);
  backdrop-filter: blur(6px);
}

.l-header__brand { display: flex; align-items: center; gap: 3rem; }
.l-header__logo  { width: 17.3rem; height: 4rem; object-fit: contain; }

.l-header__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.1rem;
  height: 2.2rem;
  padding-inline: .5rem;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-badge);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .1em;
  text-indent: .1em;
}

/* ハンバーガー: Figma 30 x 14px（2pxライン3本 + 4px間隔） */
.c-burger {
  width: 4.4rem; height: 4.4rem;      /* タップ領域を確保 */
  display: grid; place-items: center;
  margin-right: .1rem;
}
.c-burger__bars,
.c-burger__bars::before,
.c-burger__bars::after {
  display: block;
  width: 3rem; height: .2rem;
  background: var(--c-white);
  transition: transform .3s var(--ease);
}
.c-burger__bars { position: relative; }
.c-burger__bars::before,
.c-burger__bars::after { content: ""; position: absolute; left: 0; }
.c-burger__bars::before { top: -.6rem; }
/* 3本目だけ半分の長さで右寄せ */
.c-burger__bars::after  { top:  .6rem; left: 1.5rem; width: 1.5rem; }

/* =========================================================
   オーバーレイメニュー
   ========================================================= */
.l-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
}
.l-menu[hidden] { display: none; }

.l-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .5);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.l-menu.is-open .l-menu__backdrop { opacity: 1; }

.l-menu__panel {
  position: relative;
  width: 50rem;                 /* Figma 500px */
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  /* Figma: 画像の上に #3a3a3a を乗算で重ねている */
  background-image: linear-gradient(var(--c-dark), var(--c-dark)), url("../img/texture.webp");
  background-blend-mode: multiply, normal;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  transform: translateX(100%);
  transition: transform .45s var(--ease);
}
.l-menu.is-open .l-menu__panel { transform: none; }

.l-menu__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--header-h);
  padding-inline: 1rem;
}
.l-menu__brand { display: none; }   /* PCではヘッダーのロゴが見えているため非表示 */

/* 閉じるボタン: Figma 23 x 23px, stroke 2px, 白 */
.c-close {
  width: 4.4rem; height: 4.4rem;
  display: grid; place-items: center;
}
.c-close::before, .c-close::after {
  content: "";
  grid-area: 1 / 1;
  width: 2.3rem; height: .2rem;
  background: var(--c-white);
}
.c-close::before { transform: rotate(45deg); }
.c-close::after  { transform: rotate(-45deg); }

.l-menu__nav  { padding: 14rem 0 6rem 6rem; }   /* Figma: 項目開始 y=200 / x=60 */
.l-menu__list { display: grid; gap: 3rem; }     /* 行送り50px = 20px文字 + 30px */

.l-menu__list a {
  display: flex;
  align-items: baseline;
  gap: 2rem;
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--c-white);
  transition: opacity .2s;
}
.l-menu__list a:hover { opacity: .6; }
.l-menu__list i {
  flex: none;
  font-family: var(--font-en);
  font-style: normal;
  color: var(--c-red);
}

/* =========================================================
   MV
   ========================================================= */
.p-mv {
  position: relative;
  height: 119.8rem;                 /* Figma 1198px */
  /* 背景だけ画面幅いっぱいに広げるため、上下は切り左右は開放する */
  overflow: visible;
  clip-path: inset(0 calc(var(--bleed) * -1));
}
.p-mv::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 0;
  margin-left: calc(var(--vw) / -2);
  width: var(--vw); height: 100%;
  /* Figmaの塗りは cover ではなく CROP 指定。元画像(3000x2675)の
     x:0〜89.97% / y:13.03〜96.99% を切り出しているので、その比率を再現する。
     cover のままだと写真が約11%引きで下にずれ、見出しとの重なりが変わる */
  background: var(--c-black) url("../img/mv-bg.webp") no-repeat;
  background-size: 111.14% auto;
  /* 縦位置を % で指定すると「はみ出し量に対する割合」になり、
     1440pxを超えて画像だけ大きくなる幅では切り抜きが上にずれて頭が切れる。
     Figmaの切り出し位置（元画像の上から13.03%）を画面幅から直接求める */
  background-position: 0 calc(var(--vw) * -0.12919);
}
.p-mv__copy {
  position: absolute;
  /* 画像はグループの描画範囲（外周10pxの効果ぶんを含む 919.7x413.3）で
     書き出されているため、Figmaの座標(52.8,368)から10pxずつ外へ広げて置く */
  left: 4.28rem;
  top: 35.8rem;
  width: 91.97rem;
  margin: 0;
}
.p-mv__copy img { width: 100%; height: auto; }

/* =========================================================
   共通: 番号 + 英字ラベル（01 —— SKILL）
   ========================================================= */
.c-numlabel {
  display: flex;
  align-items: flex-end;
  height: 4rem;
}
.c-numlabel__n {
  font-family: var(--font-en);
  font-weight: 700;
  font-style: italic;
  font-size: 5rem;
  line-height: 4rem;
  color: var(--c-red);
}
/* 番号と英字のあいだの20pxの罫線 */
.c-numlabel__en {
  position: relative;
  padding-left: 2rem;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 3rem;
  line-height: 2.4rem;
  color: var(--c-black);
}
.c-numlabel__en::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2rem;
  height: 1px;
  background: currentColor;
}

/* =========================================================
   02 WHAT YOU GET
   ========================================================= */
.p-what {
  position: relative;
  height: 256.7rem;               /* Figma 2567px */
  /* 上端の背景写真はMVに被さる設計なので上下は切り落とさない。
     ただし黒帯などが横にはみ出すと画面に横スクロールが出るため、左右だけ切る */
  overflow: visible;
  clip-path: inset(-30rem calc(var(--bleed) * -1) -60rem);
  /* Figmaの what セクションは塗りを持たない。
     カードで覆われていない部分はページ背景（コンクリート）が透ける */
}
.p-what__bg { position: absolute; inset: 0; }

.p-what__bgphoto {
  position: absolute;
  left: 50%; top: -26.2rem;       /* Figma y=-262 */
  margin-left: calc(var(--vw) / -2);
  width: var(--vw); max-width: none;  /* 全体指定の max-width:100% を解除 */
  height: 90.7rem;
  object-fit: cover;
}
/* 背景カードは上端（または下端）が斜めに切られている。
   Figmaのvector（M 0 257 L 1235 257 L 1235 0 L 0 257 Z）をclip-pathで再現する */
.p-what__card {
  position: absolute;
  display: block;
  height: 107.9rem;
  --card-w: calc(123.5rem + var(--bleed));
  --card-drop: calc(var(--card-w) * var(--slope));
  width: var(--card-w);
}
.p-what__card--1,
.p-what__card--3 { clip-path: polygon(0 var(--card-drop), 100% 0, 100% 100%, 0 100%); background: var(--c-white); }
.p-what__card--2 { clip-path: polygon(0 0, 100% var(--card-drop), 100% 100%, 0 100%); background: #dcdcdc; }

.p-what__card--1 { left: 20.6rem; top:  38.5rem; }   /* Figma Group53 (206,385) */
.p-what__card--2 { left: calc(var(--bleed) * -1); top: 120.6rem; }  /* Figma Group54 (0,1206)・左端まで伸ばす */
.p-what__card--3 { left: 20.5rem; top: 198.5rem; }   /* Figma Group55 (205,1985) */

.p-what__head { position: absolute; inset: 0; }
.p-what__title-en {
  position: absolute;
  left: .3rem; top: -10rem;       /* Figma (3,-100) */
  width: 143.7rem; height: 48.5rem;
}
.p-what__title-jp {
  position: absolute;
  left: 8rem; top: 28.2rem;       /* Figma (80,282) */
  width: 104.1rem;
  margin: 0;
}
.p-what__title-jp img { width: 100%; }

/* --- 3ブロック共通 --- */
/* 黒帯がセクション幅を超えるため、ここで切る。
   clip-path では見た目しか切れず、モバイルではレイアウト幅が広がって
   ヘッダーが伸び、わずかに横スクロールできてしまう */
.p-what__block { position: absolute; inset: 0; overflow: hidden; }

/* Figma上のマスクは角丸0の矩形なので、円形にはしない */
.p-what__photo {
  position: absolute;
  left: var(--px); top: var(--py);
  width: var(--ps); height: var(--ps);
  object-fit: cover;
}
.p-what__body {
  position: absolute;
  left: var(--bx); top: var(--by);
  width: var(--bw);
}

.p-what__lead {
  position: relative;
  margin-top: 3rem;               /* 番号行(40px)の下に30px空けてy=70へ */
  font-weight: 700;
  font-size: 6rem;
  line-height: 6rem;
}
.p-what__band {
  position: absolute;
  left: var(--dx); top: 6.5rem;   /* Figma: Frame341基準 (-51,65) */
  width: var(--dw);
  height: 9.5rem;
  max-width: none;
}
.p-what__lead1 { position: relative; display: block; color: var(--c-black); }
.p-what__lead2 {
  position: relative;
  display: block;
  font-size: 9rem;
  line-height: 10rem;
  color: var(--c-white);
}
.p-what__lead2--center { text-align: center; }

.p-what__text {
  margin-top: 3rem;               /* Figma: 本文はy=260 */
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.5rem;
  color: var(--c-black);
}

/* --- ブロックごとの座標（Figma実測） --- */
.p-what__block--1 { --px: 16.8rem; --py:  60.7rem; --ps: 57.3rem;
                    --bx: 82.2rem; --by:  73.9rem; --bw: 45rem;
                    --dx: -5.1rem; --dw: 61.3rem; }
.p-what__block--2 { --px: 69.5rem; --py: 130rem;   --ps: 57.3rem;
                    --bx: 17.1rem; --by: 143.2rem; --bw: 44.4rem;
                    /* 帯(460)を本文枠(444)の中央に置く */
                    --dx: -.6rem;  --dw: 46rem; }
.p-what__block--3 { --px: 12.3rem; --py: 199.4rem; --ps: 57.3rem;
                    --bx: 77.7rem; --by: 212.6rem; --bw: 54rem;
                    --dx: -5.1rem; --dw: 61.3rem; }

/* =========================================================
   03 ABOUT
   ========================================================= */
.p-about {
  position: relative;
  height: 181.6rem;               /* Figma 1816px */
  /* 背景マスクは上に少しはみ出すため、上だけ切らない */
  overflow: visible;
  clip-path: inset(-10rem calc(var(--bleed) * -1) 0);
  color: var(--c-white);
}
/* 濃色テクスチャ背景。上下が斜めに切り落とされた形（Figmaのマスク形状）。
   テクスチャは幅いっぱい（100%）に拡大する。固定の144remだと1440px超で
   左右にテクスチャの無い無地の帯ができてしまう */
.p-about__bg {
  position: absolute;
  left: 50%; top: 0;
  margin-left: calc(var(--vw) / -2);
  width: var(--vw); height: 177.6rem;
  background: #1a1a1a url("../img/about/bg-dark.webp") center 0 / 100% auto no-repeat;
  clip-path: polygon(0 0, 100% calc(var(--vw) * var(--slope-mask)),
                     100% calc(177.57rem - var(--vw) * var(--slope-mask)), 0 177.57rem);
}
/* Figmaでは乗算（MULTIPLY）合成で背景に溶け込ませている。
   通常合成のままだと明るく浮いてしまう */
.p-about__watermark {
  position: absolute;
  left: 36.3rem; top: 20.6rem;    /* Figma (363,206) */
  width: 71.3rem; height: 69.9rem;
  mix-blend-mode: multiply;
}

.p-about__title-en {
  position: absolute;
  left: 0; top: 28rem;            /* Figma (0,280) */
  width: 69.5rem; height: 15rem;
}
.p-about__title-jp {
  position: absolute;
  left: 0; top: 44rem;            /* Figma (0,440) */
  width: 14.4rem;
  margin: 0;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.5rem;
  text-align: center;
}

/* --- 120周年動画 --- */
.p-about__movie {
  position: absolute;
  left: 8rem; top: 60.9rem;       /* Figma (80,609) */
  width: 64rem; height: 36rem;
  display: grid;
  place-items: center;
  background: var(--c-black);
  border: 1px solid var(--c-white);
  box-shadow: 0 0 2rem rgb(0 0 0 / .5);
  overflow: hidden;
}
.p-about__movie-video {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;   /* 再生前は下の再生ボタンにクリックを通す */
}
.p-about__movie.is-playing .p-about__movie-video { pointer-events: auto; }
/* 再生前のバッジ（クリックで再生）。再生開始後は隠す
   アイコンは白15%不透明度で黒背景前提のため、ポスター画像が明るくても
   視認できるよう半透明の黒スクリムを敷く */
.p-about__movie-play {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgb(0 0 0 / .45);
  cursor: pointer;
}
.p-about__movie.is-playing .p-about__movie-play { display: none; }
.p-about__movie-icon  { grid-area: 1 / 1; width: 28.6rem; height: 28.6rem; }
.p-about__movie-text  {
  grid-area: 1 / 1;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 5rem;
  line-height: 5rem;
  text-align: center;
  color: var(--c-white);
}

/* --- 創業〜拠点 --- */
.p-about__intro {
  position: absolute;
  left: 80rem; top: 65.9rem;      /* Figma (800,659) */
  width: 50.4rem;
}
.p-about__founded {
  display: flex;
  align-items: center;
  gap: 0;
  height: 3.6rem;
  font-weight: 700;
  font-size: 2.4rem;
}
.p-about__rule {
  width: 5rem; height: 1px;
  margin-right: 1rem;
  background: currentColor;
}
.p-about__founded-year {
  margin: 0 .4rem;
  font-family: var(--font-en);
  font-weight: 500;
  font-style: italic;
  font-size: 4.8rem;
  color: #ff0000;
}
.p-about__lead {
  margin-top: 1rem;               /* Figma: y=705 */
  border-bottom: 1px solid var(--c-white);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 5.7rem;
}
.p-about__num {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 6.4rem;
  color: var(--c-red);
}
.p-about__bases {
  display: flex;
  align-items: center;
  margin-top: 3rem;
  font-weight: 700;
}
.p-about__bases img { width: 3.8rem; height: 3.8rem; }
.p-about__bases-num {
  margin-left: .8rem;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 5.2rem;
  line-height: 1;
}
/* 右の余白を残すと、次に来る縦線までの間隔が広がって左右が揃わない */
.p-about__bases-unit { align-self: flex-end; margin: 0 0 0 .4rem; font-size: 2rem; line-height: 2.3rem; }
.p-about__bases-note {
  margin-left: 3rem;
  padding-left: 3rem;
  border-left: 1px solid var(--c-white);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.3rem;
  /* 「グル／ープ」のような不自然な折り返しを避ける（auto-phrase 非対応環境では従来どおり） */
  line-break: strict;
  word-break: auto-phrase;
}

/* --- 数値3点 --- */
.p-about__stats {
  position: absolute;
  left: 12.5rem; top: 108.3rem;   /* Figma (125,1083) */
  width: 119rem;
  display: flex;
  gap: 0;
  margin: 0;
}
.p-about__stat { display: flex; align-items: flex-start; gap: 4rem; flex: 1 1 0; }
/* 区切り線は会社情報の都道府県リスト（.p-company__pref）と同じ作り方で、
   線の左右に同じ余白を取って境目の中央に置く */
.p-about__stat:not(:first-child) { padding-left: 2.5rem; border-left: .1rem solid #8d8d8d; }
.p-about__stat:not(:last-child)  { padding-right: 2.5rem; }
.p-about__stat-icon { flex: none; }
.p-about__stat-label {
  position: relative;
  padding-left: 3rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.3rem;
}
.p-about__stat-label::before {
  content: "";
  position: absolute;
  left: 0; top: 1.2rem;
  width: 2rem; height: 1px;
  background: currentColor;
}
.p-about__stat-value {
  margin: 0;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 4.5rem;
}
.p-about__stat-note {
  margin: 0;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.3rem;
}

/* --- 施工現場の写真5枚（横スクロールのスライダー） --- */
/* 施工現場の写真は途切れずに流れ続ける（main.js が同じ並びを1組複製する）。
   間隔は gap ではなく li の margin-right で取る。
   そうしないと複製ぶんが正確に半分にならず、折り返しで隙間ができる */
.p-about__slider {
  position: absolute;
  /* 1440pxを超える画面でも端で切れないよう、左右をはみ出させる */
  left: calc(-2.8rem - var(--bleed)); top: 125.4rem;   /* Figma (-28,1254) */
  right: calc(var(--bleed) * -1);
  overflow: hidden;
}
.p-about__circles {
  display: flex;
  width: max-content;
  margin: 0;
}
.p-about__circles li { flex: none; margin-right: 2.1rem; }  /* 中心間303px - 直径282px */
.js-marquee.is-looping { animation: p-marquee 30s linear infinite; }
@keyframes p-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.p-about__circles img {
  width: 28.2rem; height: 28.2rem;
  object-fit: cover;
  max-width: none;
}

/* =========================================================
   04 OUR WORKS
   ========================================================= */
.p-works {
  position: relative;
  height: 126.6rem;               /* Figma 1266px */
  color: var(--c-white);
}
.p-works__title-en {
  position: absolute;
  left: 26.1rem; top: 0;          /* Figma (261,0) */
  width: 117.9rem; height: 15rem;
}
.p-works__title-jp {
  position: absolute;
  left: 127.2rem; top: 16rem;     /* Figma (1272,160) */
  width: 16.8rem;
  margin: 0;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.5rem;
  text-align: center;
}

.p-works__list {
  position: absolute;
  left: 21rem; top: 20.5rem;      /* Figma (210,205) */
  display: grid;
  grid-template-columns: repeat(3, 32rem);
  gap: 3rem;
}
.p-works__card { width: 32rem; }
/* Figma: 写真の上2角とキャプションの下2角が 5px の角丸 */
.p-works__thumb {
  width: 32rem; height: 22rem;
  object-fit: cover;
  border-radius: .5rem .5rem 0 0;
}
.p-works__info {
  height: 9rem;
  padding: 2rem 2.2rem 0;
  background: #c6c6c6;
  border-radius: 0 0 .5rem .5rem;
}
.p-works__name {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.3rem;
  color: var(--c-text);
}
.p-works__tags { display: flex; gap: 1.1rem; margin-top: 1rem; }

.c-tag {
  display: inline-block;
  padding-inline: 1rem;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.7rem;
  color: var(--c-white);
  white-space: nowrap;
}
.c-tag--work { background: #0573be; }
.c-tag--cat  { background: #70b32f; }

.p-works__more {
  position: absolute;
  left: 63.6rem; top: 123.1rem;   /* Figma (636,1231) */
  width: 16.8rem;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.5rem;
  text-align: center;
}

/* =========================================================
   05 OUR STRENGTH
   ========================================================= */
.p-strength {
  position: relative;
  height: 241.3rem;               /* Figma 2413px */
  /* 上下のはみ出しは切らない。ただし写真が横にはみ出すと
     画面に横スクロールが出るため、左右だけ切る */
  overflow: visible;
  clip-path: inset(-30rem calc(var(--bleed) * -1) -30rem);
  color: var(--c-white);
}
/* ABOUTと同一のマスク形状（Figmaで同じパスを使用） */
.p-strength__bg {
  position: absolute;
  left: 50%; top: -4.07rem;
  margin-left: calc(var(--vw) / -2);
  width: var(--vw); height: 177.57rem;
  background: #1a1a1a url("../img/about/bg-dark.webp") center 0 / 100% auto no-repeat;
  clip-path: polygon(0 0, 100% calc(var(--vw) * var(--slope-mask)),
                     100% calc(177.57rem - var(--vw) * var(--slope-mask) + .1rem), 0 177.57rem);
}
.p-strength__shade {
  position: absolute;
  z-index: -10;
  left: 50%; top: 133rem;         /* Figma (0,1330) */
  margin-left: calc(var(--vw) / -2);
  width: var(--vw); height: 108.3rem;
  background: rgb(0 0 0 / .8);
}
/* 傾けた写真がセクション幅を超えるため、ここで切る。
   セクション側は背景を画面端まで広げるために左右を開放しているため、
   写真だけを別のラッパーで囲って切る */
.p-strength__photos { position: absolute; inset: 0; overflow: hidden; }
.p-strength__photo { position: absolute; object-fit: cover; }
/* 6度傾けた写真。Figmaの外接矩形(60,1674,934x683)の中心に合わせて配置する */
/* Figma PCでは傾けた写真(agaee)が縦長の写真(agrhhtt)より手前。
   SPは逆順なので、SP側で z-index を戻している */
.p-strength__photo--a {
  left: 7.3rem; top: 170.55rem;
  width: 90.8rem; height: 62rem;
  z-index: 1;
  transform: rotate(-6deg);
}
.p-strength__photo--b {
  left: 75rem; top: 167.4rem;     /* Figma (750,1674) */
  width: 58.3rem; height: 73.9rem;
}

/* --- 東海地区No.1 --- */
.p-strength__no1 { position: absolute; inset: 0; }
.p-strength__badge {
  position: absolute;
  left: 24.3rem; top: 28rem;      /* Figma (243,280) */
  width: 21.2rem; height: 3.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-white);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.5rem;
}
.p-strength__no1-main {
  position: absolute;
  left: 24.3rem; top: 26.2rem;    /* Figma (243,262) */
  width: 53.7rem; height: 34.1rem;
}
.p-strength__no1-sub {
  position: absolute;
  left: 24.3rem; top: 33.4rem;    /* Figma (243,334) */
  width: 39.9rem; height: 7.6rem;   /* 「1」の左端(実測65.2rem)と重ならないよう幅を縮小、比率(808/154)は維持 */
}
.p-strength__no1-text {
  position: absolute;
  left: 24.3rem; top: 61.3rem;    /* Figma (243,613) */
  width: 34rem;
  white-space: nowrap;   /* 実測文字幅320pxに対し旧幅31remでは狭く、末尾「内」だけ改行されていた */
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.3rem;
}
/* 注釈（伏字含む仮表示。実数値確定後に差し替え予定。Issue #269） */
.p-strength__no1-note {
  position: absolute;
  left: 24.3rem; top: 66.3rem;
  width: 40rem;
  color: var(--c-white);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.5rem;
}
.p-strength__watermark {
  position: absolute;
  left: 85.9rem; top: 28rem;      /* Figma (859,280) */
  width: 33.9rem; height: 33.3rem;
}
.p-strength__base {
  position: absolute;
  left: -2.2rem; top: 69.9rem;    /* Figma (-22,699) */
  width: 146.2rem; height: 18.2rem;   /* 右端がセクション幅に収まる値 */
  max-width: none;
}

/* --- 山田商会の魅力 --- */
.p-strength__head { position: absolute; inset: 0; }
.p-strength__title-en {
  position: absolute;
  left: 8rem; top: 106.9rem;      /* Figma (80,1069) */
  width: 68.95rem; height: 17.9rem;   /* 「OUR STRENGTHS」に差し替え、実測比率で幅を拡大 */
  max-width: none;    /* 幅がセクション幅を超えるため全体指定の max-width:100% を解除 */
}
.p-strength__title-jp {
  position: absolute;
  left: 8rem; top: 125.9rem;      /* Figma (80,1259) */
  width: 16.8rem;
  margin: 0;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.5rem;
  text-align: center;
}
.p-strength__desc {
  position: absolute;
  left: 8rem; top: 132.4rem;      /* Figma (80,1324) */
  width: 55.5rem;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.9rem;
  text-align: center;
}
.u-sp { display: none; }
.u-sp-br { display: none; }

/* --- 待遇カード --- */
.p-strength__cards {
  position: absolute;
  left: 77.3rem; top: 96.1rem;    /* Figma (773,961) */
  display: grid;
  grid-template-columns: repeat(3, 19rem);
  gap: 1rem;
}
.c-merit {
  width: 19rem; height: 16rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-radius: .5rem;
  background: #c6c6c6;
  color: var(--c-black);
  text-align: center;
}
.c-merit__label { font-weight: 700; font-size: 1.6rem; line-height: 2.3rem; }
.c-merit__label--md { font-size: 2rem; line-height: 2.4rem; }
.c-merit__label--lg { font-size: 2.4rem; line-height: 3rem; }
.c-merit__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 5rem;
}
.js-count { font-variant-numeric: tabular-nums; }   /* 桁ごとの幅を揃えて、カウント中のガタつきを防ぐ */
.c-merit__num {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 6.4rem;
  line-height: 5rem;
  color: var(--c-red);
}
.c-merit__num--dark { color: var(--c-black); min-width: 6rem; }
/* 数値の前後に付く「約」「※」。js-countのカウントアップ対象外にするため兄弟spanにし、
   本体の数値より小さいサイズにして横幅の超過（カード内はみ出し）を防ぐ */
.c-merit__unit { font-size: 1.6rem; font-weight: 400; }
.c-merit__note { font-weight: 400; font-size: 1.2rem; line-height: 1.5rem; }
.c-merit__note--bold { font-weight: 700; font-size: 1.6rem; line-height: 2rem; }
.c-merit__strong { font-weight: 700; font-size: 3.6rem; line-height: 3rem; color: #de161c; }
.c-merit__big { font-weight: 700; font-size: 3.2rem; line-height: 3rem; }
/* カードグリッド全体への出典注釈（doda比較） */
.p-strength__cards-note {
  position: absolute;
  left: 77.3rem; top: 148rem;     /* .p-strength__cards の直下（幅はグリッドに合わせる） */
  width: 59rem;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.9rem;
  color: var(--c-white);
  text-align: center;
}

/* =========================================================
   06 RECRUIT
   ========================================================= */
/* 募集要項は開閉できるため、高さを固定せず内容に合わせて伸縮させる
   （固定するとアコーディオンを閉じたときに余白だけが残る） */
.p-recruit {
  position: relative;
  padding-top: 55.3rem;           /* Figma: 見出し 553px ぶん */
  padding-bottom: 1.8rem;
  color: var(--c-white);
}
.p-recruit__title {
  position: absolute;
  left: 0; top: 0;
  width: 144rem; height: 56.45rem;   /* 差し替え後のFigmaフレーム 1440x564.5 に合わせる */
  margin: 0;   /* h2化に伴うブラウザ既定マージンのリセット（見た目は変えない） */
}

/* パネルの上の余白は padding で確保する。
   margin にすると親を突き抜けて（マージン相殺）パネルがブロック最上部まで上がり、
   写真を覆い隠してしまう */
.p-job { position: relative; }
.p-job + .p-job { margin-top: 8rem; }   /* Figma: ブロック間 80px */
.p-job--1 { padding-top: 14.8rem; }     /* Figma: 写真の上端からパネルまで148px */
.p-job--2 { padding-top: 12.8rem; }
.p-job--3 { padding-top:   .8rem; }

/* Figmaでは写真がパネルより手前に重なっている */
/* 写真と縦書きの職種名は別画像。Figmaのグループ枠を .p-job__media が持ち、
   その中で写真・職種名をそれぞれの位置に置く（写真が出たあとに職種名が続く） */
.p-job__media { position: absolute; top: .1rem; z-index: 1; }
.p-job__photo,
.p-job__jobname { position: absolute; object-fit: contain; max-width: none; }
.p-job--1 .p-job__media { left:  4rem;  width: 53.8rem; height: 58.7rem; }
.p-job--2 .p-job__media { left: 77.2rem; width: 56.8rem; height: 57.4rem; }
.p-job--3 .p-job__media { left: -.2rem;  width: 58rem;   height: 60rem; }
/* Figmaのグループ左上を原点にした写真・職種名のずれ */
.p-job--1 .p-job__photo   { left: 7.2rem;  top: 0;     width: 46.6rem; height: 55.1rem; }
.p-job--1 .p-job__jobname { left: 0;       top: 1.3rem; width: 53.8rem; height: 57.4rem; }
.p-job--2 .p-job__photo   { left: 10.2rem; top: 0;     width: 46.6rem; height: 55.1rem; }
.p-job--2 .p-job__jobname { left: 0;       top: 0;     width: 56.8rem; height: 57.4rem; }
.p-job--3 .p-job__photo   { left: 11.38rem; top: 0;    width: 46.6rem; height: 55.1rem; }
.p-job--3 .p-job__jobname { left: 0;       top: 7.2rem; width: 58rem;  height: 52.8rem; }

/* パネルは幅960、内側の表は幅650。写真がある側に余白を寄せる */
.p-job__panel {
  position: relative;
  width: 96rem;
  border-radius: .5rem;
  background: var(--c-black);
}
.p-job--1 .p-job__panel { margin-left: 38rem; padding: 5rem 5rem 5rem 26rem; }
.p-job--2 .p-job__panel { margin-left: 10rem; padding: 5rem 26rem 5rem 5rem; }
.p-job--3 .p-job__panel { margin-left: 38rem; padding: 5rem 5rem 5rem 26rem; }

.p-job__lead {
  padding: 2rem 0;
  border-bottom: 1px solid #767676;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 3rem;
}

/* 概要・詳細で共通の定義リスト行 */
.p-job__row {
  display: grid;
  grid-template-columns: var(--label-w) 3rem 1fr;
  align-items: center;              /* 複数行のセルに対して見出しを上下中央に */
  padding: 2rem 0;
  border-bottom: 1px solid var(--row-line);
}
.p-job__row dt {
  grid-column: 1;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--c-red);
}
.p-job__row dt small { font-size: 1.4rem; }
.p-job__row dd {
  grid-column: 3;
  margin: 0;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2rem;
}
.p-job__row dd small { font-size: 1.4rem; }
.p-job__row--wide dd { line-height: 2.4rem; }

.p-job__summary { --label-w: 13rem; --row-line: #767676; }

.p-job__details { --label-w: 16.6rem; --row-line: #383838; }
.p-job__toggle {
  padding: 3rem 0;
  border-bottom: 1px solid #767676;
  background: #292929;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.3rem;
  text-align: center;
  list-style: none;
  cursor: pointer;
}
.p-job__toggle::-webkit-details-marker { display: none; }
.p-job__table {
  padding: 0 3rem 5rem;
  background: #1b1b1b;
}
.p-job__details:not([open]) .p-job__toggle-close,
.p-job__details[open]      .p-job__toggle-open { display: none; }

.p-job__apply { margin-top: 3rem; }
.p-job__apply a {
  display: block;
  padding: 2rem 0;
  border-radius: 6rem;
  background: var(--c-red);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2rem;
  text-align: center;
  transition: opacity .2s;
}
.p-job__apply a:hover { opacity: .8; }

/* =========================================================
   07 MESSAGE / 08 COMPANY の背景板
   斜めに切り落とされた白・グレーの板が2セクションにまたがる
   ========================================================= */
.l-slabs { position: relative; }
/* Figmaでは背景板グループが recruit より奥にあるため、負のz-indexで後ろへ回す。
   そうしないと直前のセクションの「応募する」ボタンに白い板が被る */
.l-slabs__bg { position: absolute; inset: 0; z-index: -1; }
.l-slabs > section { position: relative; z-index: 1; }

.l-slab {
  position: absolute;
  display: block;
  --slab-w: calc(123.5rem + var(--bleed));
  --slab-drop: calc(var(--slab-w) * var(--slope));
  width: var(--slab-w);
}
.l-slab--1 {
  left: 20.5rem; top: -13.4rem; height: 222.5rem;
  background: var(--c-white);
  clip-path: polygon(0 var(--slab-drop), 100% 0, 100% 100%, 0 100%);
}
.l-slab--2 {
  left: calc(var(--bleed) * -1); top: 183.3rem; height: 170.9rem;
  background: #dcdcdc;
  clip-path: polygon(0 0, 100% var(--slab-drop), 100% 100%, 0 100%);
}
.l-slab--3 {
  left: 20.5rem; top: 326.5rem; bottom: 19.4rem; height: auto;
  background: var(--c-white);
  clip-path: polygon(0 var(--slab-drop), 100% 0, 100% 100%, 0 100%);
}

/* =========================================================
   07 MESSAGE
   ========================================================= */
/* 高さを固定せず通常フローで積む（固定すると内容量が変わったときに破綻する） */
.p-message {
  position: relative;
  padding-top: 53.4rem;           /* Figma: 1枚目のカードまで534px */
  color: var(--c-text);
}
.p-message__title {
  position: absolute;
  left: 26.8rem; top: 20rem;      /* Figma (268,200) */
  width: 117.2rem; height: 20.3rem;
}
.p-message__title-jp {
  position: absolute;
  left: 132.8rem; top: 41.3rem;   /* Figma (1328,413) */
  width: 11.2rem;
  margin: 0;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 4.1rem;
  color: var(--c-black);
  text-align: center;
}

.p-voice {
  position: relative;
  width: 124rem; height: 42.3rem;
  margin-inline: auto;
  display: flex;
  border-radius: .5rem;
  background: #bdbdbd;
  overflow: hidden;
}
.p-voice + .p-voice { margin-top: 2rem; }   /* Figma: カード間20px */

.p-voice__photo { flex: none; width: 59.3rem; height: 42.3rem; object-fit: cover; }
.p-voice__body  { padding: 6.7rem 3rem 0; }

.p-voice__job  { font-weight: 700; font-size: 2.4rem; line-height: 2.7rem; }
.p-voice__name { margin-top: .8rem; font-weight: 700; font-size: 1.6rem; line-height: 2.3rem; }
.p-voice__lead { margin-top: 3rem; font-weight: 700; font-size: 2rem; line-height: 2.9rem; }
.p-voice__text { margin-top: .8rem; font-weight: 400; font-size: 1.4rem; line-height: 2rem; }
.p-voice__text strong { font-weight: 700; }

/* =========================================================
   08 COMPANY
   ========================================================= */
.p-company {
  position: relative;
  /* 表の行数が変わっても下の余白が広がらないよう、表とCTAは通常フローで積む
     （Figmaでは「事業内容」が2行重複しており、1行に統合したぶん表が短い） */
  padding-top: 175.3rem;          /* Figma: 表の開始位置 1753px */
  padding-bottom: 0;
  color: var(--c-text);
}
.p-company__title {
  position: absolute;
  left: 0; top: 20rem;            /* Figma (0,200) */
  width: 133.9rem; height: 20.3rem;
}
.p-company__title-jp {
  position: absolute;
  left: 0; top: 41.3rem;          /* Figma (0,413) */
  width: 11.2rem;
  margin: 0;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 4.1rem;
  color: var(--c-black);
  text-align: center;
}

.p-company__bases {
  position: absolute;
  left: 8rem; top: 54.4rem;       /* Figma (80,544) */
  display: grid;
  grid-template-columns: repeat(4, 30.5rem);
  gap: 2rem;
}
.p-company__bases img { width: 30.5rem; height: 23rem; object-fit: cover; }

/* 14拠点のボックスは写真グリッドの右下2マスぶんを占める */
.p-company__count {
  position: absolute;
  left: 73rem; top: 129.4rem;     /* Figma (730,1294) */
  width: 63rem; height: 23rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 1px solid #c9c9c9;
  color: #0d0d0d;
}
.p-company__count-num {
  display: flex;
  align-items: flex-end;            /* Figma: 「拠点」は数字の下端にそろえる */
  gap: 1rem;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 3.4rem;
  color: var(--c-black);
}
.p-company__count-num img { width: 7.2rem; height: 7.2rem; }
.p-company__count-num span {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 9.6rem;
  line-height: 7.2rem;
}
.p-company__count-text { font-weight: 500; font-size: 1.6rem; line-height: 2.3rem; }
.p-company__pref { display: flex; font-weight: 500; font-size: 1.6rem; line-height: 2.3rem; }
.p-company__pref li + li { margin-left: 2.5rem; padding-left: 2.5rem; border-left: 1px solid #8a8a8a; }

.p-company__btn { position: absolute; left: 43.3rem; top: 159.4rem; width: 57.4rem; }
.p-company__cta { width: 57.4rem; margin: 18rem auto 0; }   /* Figma: 表の下に180px */
.p-company__btn a,
.p-company__cta a {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.9rem;
  color: var(--c-white);
  transition: opacity .2s;
}
.p-company__btn a { height: 6.9rem; background: var(--c-black); }
.p-company__cta a { height: 10rem; background: var(--c-red); }
.p-company__btn a:hover,
.p-company__cta a:hover { opacity: .8; }

.p-company__table {
  width: 75rem;                   /* Figma: 幅750px・中央寄せ */
  margin-inline: auto;
}
.p-company__row {
  display: grid;
  grid-template-columns: 16.6rem 3rem 1fr;
  align-items: center;              /* 複数行のセルに対して見出しを上下中央に */
  padding: 2rem 0;
  border-bottom: 1px solid #d9d9d9;
}
.p-company__row dt {
  grid-column: 1;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--c-red);
}
.p-company__row dd {
  grid-column: 3;
  margin: 0;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2rem;
}
/* 許可欄: 区分ごとに<li>化し、<br><br>の代わりに余白で区切る（.p-company__row ddの行間・文字サイズは変更しない） */
.p-company__permits {
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-company__permits li + li {
  margin-top: 1.6rem;
}
/* 外部リンクだと分かるように下線を付ける（全体指定で下線を消しているため） */
.p-company__link {
  text-decoration: underline;
  text-underline-offset: .3rem;
  transition: color .2s;
}
.p-company__link:hover { color: var(--c-red); }

/* =========================================================
   09 FAQ
   ========================================================= */
/* 質問は開閉できるため高さを固定しない
   （固定すると閉じたときに余白だけが残る） */
.p-faq {
  position: relative;
  padding-top: 60.3rem;           /* Figma: 1問目まで603px */
  padding-bottom: 28rem;          /* Figma: 最終回答からセクション下端まで280px */
  /* 上下のはみ出しは切らない。横スクロールを出さないため左右だけ切る */
  overflow: visible;
  clip-path: inset(-30rem calc(var(--bleed) * -1) -30rem);
  color: var(--c-white);
}
.p-faq__list { position: relative; z-index: 1; }
/* 背景はセクションの伸縮に追随させる。斜めの切り欠きは下端からの相対で指定する */
.p-faq__bg {
  position: absolute;
  z-index: 0;
  left: 50%; top: -7.07rem; bottom: 0;
  margin-left: calc(var(--vw) / -2);
  width: var(--vw);
  background: #1a1a1a url("../img/about/bg-dark.webp") center 0 / 100% auto no-repeat;
  clip-path: polygon(0 0, 100% calc(var(--vw) * var(--slope-mask)),
                     100% calc(100% - var(--vw) * var(--slope-mask)), 0 100%);
}
.p-faq__title {
  position: absolute;
  left: 72.7rem; top: 20rem;      /* Figma (727,200) */
  width: 71.3rem; height: 27.2rem;
}
.p-faq__title-jp {
  position: absolute;
  left: 124.4rem; top: 48.2rem;   /* Figma (1244,482) */
  width: 19.6rem;
  margin: 0;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 4.1rem;
  text-align: center;
}

.p-faq__list {
  width: 124rem;                  /* Figma: 幅1240px / 左右100pxずつ */
  margin-inline: auto;
}
.c-qa + .c-qa { margin-top: 2rem; }
.c-qa__q {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 7rem;
  padding-inline: 3rem;
  border: 1px solid #e5e5e5;
  background: var(--c-white);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: var(--c-black);
  list-style: none;
  cursor: pointer;
}
.c-qa__q::-webkit-details-marker { display: none; }

/* Figma: 11x5 の山形（線幅2・端は丸・#12297A）。開くと上下反転する */
.c-qa__q::after {
  content: "";
  flex: none;
  width: 1.3rem; height: .7rem;
  margin-left: auto;
  background: center / 100% 100% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 7'%3E%3Cpath d='M1 1 6.5 6 12 1' fill='none' stroke='%2312297A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform .3s var(--ease);
}
.c-qa[open] > .c-qa__q::after { transform: rotate(180deg); }
.c-qa__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: .5rem;
  background: var(--c-red);
  font-family: var(--font-geo);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--c-white);
}
.c-qa__a {
  padding: 2rem 3rem;
  background: rgb(229 229 229 / .67);
  font-size: 1.6rem;
  line-height: 2.3rem;
  color: var(--c-black);
}
.c-qa__a ul { margin: 0; }
/* 外部リンクだと分かるように下線を付ける（全体指定で下線を消しているため） */
.c-qa__a a {
  text-decoration: underline;
  text-underline-offset: .3rem;
  transition: color .2s;
}
.c-qa__a a:hover { color: var(--c-red); }

/* =========================================================
   10 ENTRY
   ========================================================= */
.p-entry {
  position: relative;
  height: 62.8rem;                /* フォーム削除に伴い縮小（348px + ボタン80px + 下余白200px） */
  color: var(--c-white);
}
.p-entry__title {
  position: absolute;
  left: 0; top: 0;                /* Figma (0,0) */
  width: 72rem; height: 16.4rem;
}
.p-entry__lead {
  position: absolute;
  left: 10.6rem; top: 7.4rem;     /* Figma (106,74) */
  width: 82.2rem; height: 19.4rem;
}

.p-entry__cta {
  position: absolute;
  left: 27rem; top: 34.8rem;      /* Figma のフォーム開始位置を踏襲 */
  width: 90rem;
}
.p-entry__submit { text-align: center; }
.p-entry__submit a {
  display: grid;
  place-items: center;
  width: 57.4rem; height: 8rem;   /* 「すべての採用情報」ボタン(.p-company__cta)と同じ幅に統一 */
  margin: 0 auto;
  background: var(--c-red);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--c-white);
  transition: opacity .2s;
}
.p-entry__submit a:hover { opacity: .85; }

/* =========================================================
   送信完了ページ
   ========================================================= */
.p-thanks {
  min-height: 60rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 20rem 3rem 12rem;
  color: var(--c-white);
  text-align: center;
}
.p-thanks__title { font-weight: 700; font-size: 3.6rem; line-height: 1.4; }
.p-thanks__text  { font-size: 1.6rem; line-height: 2.4; }
.p-thanks__back a {
  display: inline-grid;
  place-items: center;
  width: 30rem; height: 6rem;
  border-radius: 6rem;
  background: var(--c-red);
  font-weight: 700;
  font-size: 1.6rem;
  transition: opacity .2s;
}
.p-thanks__back a:hover { opacity: .85; }

/* =========================================================
   フッター
   ========================================================= */
.l-footer {
  background: var(--c-black);
  color: var(--c-white);
}
.l-footer__inner {
  position: relative;
  width: 100%;
  max-width: var(--page-w);
  min-height: 28rem;                /* Figma 280px */
  margin-inline: auto;
  padding: 8rem 10.4rem;            /* Figma x=104 / y=80 */
  display: flex;
  justify-content: space-between;
  gap: 4rem;
}
.l-footer__brand img { width: 26.3rem; height: 6.1rem; object-fit: contain; }
.l-footer__copy {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2rem;
}
.l-footer__nav { display: flex; gap: 5rem; }
.l-footer__nav ul { width: 13.4rem; }
.l-footer__nav a {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 3rem;
  transition: color .2s;
}
.l-footer__nav a:hover { color: var(--c-red); }

/* =========================================================
   タブレット: PCデザインを等倍で縮小（1440 → 768）
   ========================================================= */
/* メディアクエリの幅はスクロールバーを含むため、1440px ちょうどの窓でも
   実際の表示幅は 1440px 未満になりうる。min() で表示幅にも追従させる */
@media (min-width: 768px) {
  html { font-size: min(10px, calc(var(--vw) / 144)); }
}

/* =========================================================
   SP: 375pxデザインを基準に画面幅へ比例
   ========================================================= */
@media (max-width: 767.98px) {
  html { font-size: calc(var(--vw) / 37.5); }

  :root { --header-h: 4.5rem; }     /* Figma SP 45px */

  .l-header__brand { gap: 1.4rem; }
  .l-header__logo  { width: 10.4rem; height: 2.4rem; }
  .l-header__badge { min-width: 6.7rem; height: 2.5rem; font-size: 1.4rem; }

  /* SPメニューは全画面 */
  .l-menu__panel { width: 100%; }
  .l-menu__head  { justify-content: space-between; height: 4.5rem; }
  .l-menu__brand {
    display: flex;
    align-items: center;
    gap: 1.4rem;
  }
  .l-menu__brand img { width: 10.4rem; height: 2.4rem; object-fit: contain; }
  .l-menu__nav  { padding: 6rem 0 6rem 5rem; }   /* Figma SP: x=50 */
  .l-menu__list { gap: 3rem; }

  /* MV */
  .p-mv { height: 66.4rem; }                     /* Figma SP 664px */
  /* SPは元画像の x:39.76〜76.98% / y:9.41〜83.27% を切り出している */
  .p-mv::before {
    background-size: 268.67% auto;
    background-position: 63.34% 36.09%;
  }
  /* Figmaの見出しは (16,209.1) の 343.4x149.5。
     書き出し画像は外周10px（PC基準）ぶん大きいので、SPの縮尺 0.3817 を掛けて外へ広げる */
  .p-mv__copy { left: 1.22rem; top: 20.53rem; width: 35.1rem; }

  /* WHAT YOU GET */
  .p-what { height: 257rem; }                       /* Figma SP 2570px */
  .p-what__bgphoto { top: -11.5rem; height: 23.6rem; }
  .p-what__card    { width: 37.5rem; left: 0; }
  /* 斜めの切り欠きはSPでは78px */
  .p-what__card--1,
  .p-what__card--3 { clip-path: polygon(0 7.8rem, 100% 0, 100% 100%, 0 100%); }
  .p-what__card--2 { clip-path: polygon(0 0, 100% 7.8rem, 100% 100%, 0 100%); }
  .p-what__card--1 { top:   5.2rem; height:  92.9rem; }   /* Figma SP Group53 (0,52) */
  .p-what__card--2 { top:  79.2rem; height:  99rem;   }   /* Figma SP Group54 (0,792) */
  .p-what__card--3 { top: 155rem;   height: 102.8rem; }   /* Figma SP Group55 (0,1550) */

  .p-what__title-en { left: 0; top: -7.1rem; width: 37.8rem; height: 12.7rem; }
  .p-what__title-jp { left: 1rem; top: 5rem; width: 35.5rem; }

  .p-what__lead   { font-size: 4.2rem; }
  .p-what__lead2  { font-size: 6rem; line-height: 10rem; }
  .p-what__text   { margin-top: 2rem; font-size: 2.4rem; line-height: 3.2rem; }
  .p-what__band   { height: 8.3rem; }

  .p-what__block--1 { --px: 3rem;   --py:  55rem;   --ps: 31.5rem;
                      --bx: 3rem;   --by:  18rem;   --bw: 31.5rem;
                      --dx: -4rem;  --dw: 40.6rem; }
  .p-what__block--2 { --px: 3rem;   --py: 130.7rem; --ps: 31.5rem;
                      --bx: 3rem;   --by:  94.5rem; --bw: 31.5rem;
                      /* 帯(323)を本文枠(315)の中央に置く */
                      --dx: -.2rem; --dw: 32.3rem; }
  .p-what__block--3 { --px: 3rem;   --py: 209.2rem; --ps: 31.5rem;
                      --bx: 2.6rem; --by: 170.2rem; --bw: 32.4rem;
                      --dx: -3.3rem; --dw: 39.3rem; }
  .p-what__block--3 .p-what__lead { font-size: 3.6rem; }
  .p-what__block--3 .p-what__band { height: 9.5rem; }

  /* ABOUT */
  .p-about { height: 173rem; }                    /* Figma SP 1730px */
  .p-about__bg {
    top: -6.3rem; height: 168.6rem;
    /* SPはFigmaでPCと別の画像（307x4096）が使われている。
       PC用を375px幅に縮めるとコンクリートの模様が横に潰れて別物になる */
    background-image: url("../img/about/bg-dark-sp.webp");
    background-size: 37.5rem 500.6rem;
    clip-path: polygon(0 0, 100% 6.7rem, 100% 161.9rem, 0 100%);
  }
  .p-about__watermark { left: 0; top: 14.7rem; width: 37.6rem; height: 36.9rem; }

  .p-about__title-en { left: 0; top: 0; width: 30.1rem; height: 6.5rem; }
  .p-about__title-jp { left: 2rem; top: 7.5rem; width: 9.6rem; font-size: 1.6rem; line-height: 2.3rem; }

  .p-about__intro { left: 3rem; top: 17.8rem; width: 32rem; }
  .p-about__founded { font-size: 2rem; }
  .p-about__founded-year { font-size: 3.8rem; }
  /* Figma SP: 本文の下端から下線まで30px。実測5pxしかなかったぶんを足す */
  .p-about__lead { margin-top: 1rem; padding-bottom: 2.5rem; font-size: 3.2rem; line-height: 4.8rem; }
  .p-about__num { font-size: 6.4rem; }
  /* 下線が下がったぶんを差し引いて、拠点数の位置は動かさない */
  .p-about__bases { margin-top: 3.5rem; }
  .p-about__bases img { width: 3.2rem; height: 3.2rem; }
  .p-about__bases-num { font-size: 4rem; }
  .p-about__bases-unit { font-size: 1.6rem; }
  .p-about__bases-note { margin-left: 2rem; padding-left: 2rem; font-size: 1.4rem; line-height: 2rem; }

  .p-about__movie {
    left: 3rem; top: 54.3rem;                     /* Figma SP (30,543) */
    width: 31.5rem; height: 17.7rem;
  }
  .p-about__movie-icon { width: 14.1rem; height: 14.1rem; }
  .p-about__movie-text { font-size: 2.4rem; line-height: 3rem; }

  /* 数値3点は縦積み */
  .p-about__stats {
    left: 3rem; top: 80rem;
    width: 31.5rem;
    flex-direction: column;
    /* 区切り線を境目の中央に置くため、余白は gap と中央項目の padding で折半する */
    gap: 3.1rem;
  }
  .p-about__stat { width: 100%; gap: 4rem; }
  /* SPは縦積みなので、線は中央ブロックの上下に付く（PCの左右指定は解除） */
  .p-about__stat:not(:first-child) { padding-left: 0; border-left: 0; }
  .p-about__stat:not(:last-child)  { padding-right: 0; }
  .p-about__stat:nth-child(2) {
    padding: 3rem 0;
    border-top: .1rem solid #8d8d8d;
    border-bottom: .1rem solid #8d8d8d;
  }

  /* SPは画面内で横スクロールさせる */
  .p-about__slider { left: 0; right: 0; top: 134.9rem; }
  .p-about__circles li { margin-right: 1rem; }
  .p-about__circles img { width: 20.2rem; height: 20.2rem; }

  /* OUR WORKS */
  /* SP は中日ビル・コストコ・ブランシエラの3件を非表示にするぶん縮める（9枚→6枚） */
  .p-works { height: 220rem; }                    /* 169 + (6*310 + 5*20) + 71 */
  .p-works__card--sp-hide { display: none; }
  /* Figma SP: 見出し画像は右端ぴったり（-136.3 〜 375）。
     全体指定の max-width:100% で 375px に潰れて右端がズレるため解除する */
  .p-works__title-en { left: auto; right: 0; top: 0; width: 51.1rem; max-width: none; height: 12.6rem; }
  .p-works__title-jp { left: 24.3rem; top: 13.6rem; width: 11.2rem; font-size: 1.6rem; line-height: 2.3rem; }
  .p-works__list { left: 2.8rem; top: 16.9rem; grid-template-columns: 32rem; gap: 2rem; }
  .p-works__more { left: 10.4rem; top: 216.5rem; }

  /* OUR STRENGTH */
  .u-sp { display: inline; }
  .p-strength { height: 241.3rem; }               /* Figma SP 2413px */
  .p-strength__bg {
    top: 1.3rem; height: 178.2rem;
    /* SPはFigmaでPCと別の画像（307x4096）が使われている。
       PC用を375px幅に縮めるとコンクリートの模様が横に潰れて別物になる */
    background-image: url("../img/about/bg-dark-sp.webp");
    background-size: 37.5rem 500.6rem;
    clip-path: polygon(0 0, 100% 6.7rem, 100% 171.5rem, 0 100%);
  }
  .p-strength__shade { top: 172.8rem; height: 68.6rem; }
  /* SPは傾けた写真が縦長の写真の後ろ（Figma SPの重ね順） */
  .p-strength__photo--a { left: -.1rem; top: 176.65rem; width: 39.2rem; height: 26.8rem;
                          z-index: auto; transform: rotate(-6deg); }
  .p-strength__photo--b { left: 1.7rem; top: 199.6rem; width: 33rem; height: 41.8rem; }

  .p-strength__badge    { left: 2rem; top: 16rem; width: 16.4rem; height: 2.6rem; font-size: 1.8rem; line-height: 2.6rem; }
  .p-strength__no1-main { left: 2rem; top: 16rem; width: 33.5rem; height: 21.3rem; }
  .p-strength__no1-sub  { left: 2rem; top: 20.5rem; width: 24.9rem; height: 4.74rem; }
  .p-strength__no1-text { left: 2rem; top: 38.3rem; width: 34rem; text-align: center; white-space: nowrap; }
  .p-strength__no1-note { left: 2rem; top: 43.3rem; width: 33.5rem; text-align: center; font-size: .9rem; line-height: 1.3rem; }
  .p-strength__watermark { left: 1.8rem; top: 46.9rem; width: 33.9rem; height: 33.3rem; }
  .p-strength__base     { left: -0.5rem; top: 84.2rem; width: 38.5rem; height: 17.9rem; }

  .p-strength__title-en { left: 0; top: 110.7rem; width: 37.5rem; height: 9.76rem; }   /* 「OUR STRENGTHS」に差し替え。SPは画面幅に収まるよう縮小（bleedさせるとSが画面外に切れるため） */
  .p-strength__title-jp { left: 2rem; top: 121.9rem; width: auto; font-size: 1.6rem; line-height: 2.3rem;
                          text-align: left; }
  .p-strength__desc     { left: 0; top: 126.2rem; width: 37.5rem; font-size: 1.6rem; line-height: 2.3rem; }

  .p-strength__cards { left: 1.3rem; top: 137.8rem; grid-template-columns: repeat(3, 11rem); gap: 1rem; }
  .c-merit { width: 11rem; height: 11rem; padding: .4rem; border-radius: .5rem; }
  .c-merit__label      { font-size: 1.4rem; line-height: 1.8rem; }
  .c-merit__label--md  { font-size: 1.4rem; line-height: 1.8rem; }
  .c-merit__label--lg  { font-size: 1.6rem; line-height: 2rem; }
  /* 端末により改行が崩れるため、カード内テキストを 2pt 前後小さくして 110px 幅に収める */
  .c-merit__value      { font-size: 1.7rem; line-height: 3.5rem; }
  .c-merit__num        { font-size: 4.2rem; line-height: 3.5rem; }
  .c-merit__unit       { font-size: 1rem; }
  .c-merit__note       { font-size: 1rem; line-height: 1.3rem; }
  .c-merit__note--bold { font-size: .9rem; line-height: 1.4rem; letter-spacing: -.06em; }
  .c-merit__strong     { font-size: 2.6rem; line-height: 3rem; }
  .c-merit__big        { font-size: 1.7rem; line-height: 2.4rem; }
  /* 「20-30代の平均年収」カードはラベルが3行になり縦に収まらないため、
     このカードだけ行間を詰めてカード枠内に収める */
  .c-merit--income .c-merit__label { line-height: 1.4rem; }
  .c-merit--income .c-merit__value { line-height: 2.8rem; }
  .c-merit--income .c-merit__note  { font-size: .9rem; line-height: 1.1rem; }
  /* カード直下・傾いた写真の直前という限られた縦余白に収めるため、
     PC比でさらに小さく・行間を詰めて配置する */
  .p-strength__cards-note { left: 1.3rem; top: 172.85rem; width: 35rem; font-size: .85rem; line-height: 1.1rem; }

  /* RECRUIT */
  .p-recruit { padding-top: 18.1rem; padding-bottom: 2.2rem; }
  .p-recruit__title { width: 37.5rem; height: 18.1rem; }

  .p-job + .p-job { margin-top: 20.9rem; }        /* Figma SP: ブロック間 209px */
  .p-job--1, .p-job--2, .p-job--3 { padding-top: 16rem; }

  /* Figma SP: 画像は「写真＋縦書きの職種名」のグループ全体。
     旧デザインは01/03を左端、02を右端に接する配置だったが、黒背景(.p-job__panel)が
     片側だけ露出し「黒が偏って見える」との指摘（Issue #295）を受け、
     グループを左右中央寄せに変更し、パネルを画面幅いっぱいの黒背景にした。
     写真・職種名それぞれの内部の相対位置・サイズはFigma実測のまま変更していない。 */
  .p-job--1 .p-job__media,
  .p-job--2 .p-job__media,
  .p-job--3 .p-job__media { top: .2rem; }
  .p-job--1 .p-job__media { left: 7.75rem; right: auto; width: 22rem;   height: 24rem; }
  .p-job--3 .p-job__media { left: 7.74rem; right: auto; width: 22.02rem; height: 24.55rem; }
  .p-job--2 .p-job__media { left: 6.65rem; right: auto; width: 24.2rem; height: 24.2rem; }
  /* グループ左上からの写真・職種名のずれ（Figma SP実測、変更なし） */
  .p-job--1 .p-job__photo   { left: 2.94rem; top: 0;     width: 19.06rem; height: 22.53rem; }
  .p-job--1 .p-job__jobname { left: 0;       top: .53rem; width: 22rem;    height: 23.47rem; }
  .p-job--2 .p-job__photo   { left: 5.14rem; top: .2rem; width: 19.06rem; height: 22.53rem; }
  .p-job--2 .p-job__jobname { left: 0;       top: 0;     width: 24rem;    height: 24.2rem; }
  .p-job--3 .p-job__photo   { left: 2.94rem; top: 0;     width: 19.06rem; height: 22.53rem; }
  .p-job--3 .p-job__jobname { left: 0;       top: 4.5rem; width: 22.02rem; height: 20.05rem; }

  /* パネル（黒背景）は3件とも画面幅いっぱいに統一し、片側だけ黒が露出しないようにする */
  .p-job--1 .p-job__panel,
  .p-job--2 .p-job__panel,
  .p-job--3 .p-job__panel { width: 37.5rem; margin-left: 0; margin-right: 0; padding: 10rem 2rem 5rem; }

  .p-job__lead { font-size: 3rem; line-height: 3.5rem; }
  .p-job__row  { grid-template-columns: var(--label-w) 1rem 1fr; }
  .p-job__summary { --label-w: 11rem; }
  .p-job__details { --label-w: 11rem; }
  .p-job__table   { padding: 0 1rem 5rem; }

  /* Figma SP の背景板は3枚（白→グレー→白）で、斜辺はいずれも 77.9px の落差。
     3枚目の下端は COMPANY の終端より 173px 手前で終わり、
     そこから FAQ にかけてページ背景（コンクリート）が見える。
     境目は Figma と同じ基準（白/グレー = COMPANY見出しの20px上、
     グレー/白 = 会社概要テーブルの上端）に合わせている。 */
  .l-slab--1, .l-slab--2, .l-slab--3 {
    display: block;
    left: 0; right: auto;
    width: 37.5rem;
  }
  .l-slab--1 {
    top: 8rem; bottom: auto; height: 236.5rem;
    clip-path: polygon(0 7.8rem, 100% 0, 100% 100%, 0 100%);
  }
  /* グレーの下端は Figma と同じく「拠点情報のかたまり（写真＋拠点数＋ボタン）の
     終わりから約39px下」に合わせる。会社概要の表は行数が多く縦に伸びるため、
     表の上端を基準にすると下がりすぎる */
  .l-slab--2 {
    top: 236.7rem; bottom: auto; height: 166.6rem;
    clip-path: polygon(0 0, 100% 7.8rem, 100% 100%, 0 100%);
  }
  /* 会社概要の行数ぶん縦に伸びるため、下端は .l-slabs の終端から逆算する */
  .l-slab--3 {
    top: 395.4rem; bottom: 17.3rem; height: auto;
    clip-path: polygon(0 7.8rem, 100% 0, 100% 100%, 0 100%);
  }

  /* MESSAGE */
  .p-message { height: 246.5rem; }                /* Figma SP 2465px */
  .p-message__title    { left: 0; top: 16rem; width: 37.5rem; height: 6.5rem; }
  .p-message__title-jp { left: 29.1rem; top: 23.5rem; width: 6.4rem; font-size: 1.6rem; line-height: 1.7rem; }

  .p-message { padding-top: 33.2rem; }       /* Figma SP: 1枚目まで332px */
  .p-voice { width: 33.5rem; height: auto; flex-direction: column; }
  .p-voice__photo { width: 33.5rem; height: 23.9rem; }
  .p-voice__body  { padding: 3rem 2rem 2rem; }
  .p-voice__lead  { font-size: 1.8rem; line-height: 2.6rem; }

  /* COMPANY: SPは絶対配置をやめて素直に縦に流す
     （Figmaのスマホ版は会社概要が8項目に省略されているが、
       情報が欠けるため全12項目を出す。その分セクションは縦に伸びる） */
  .p-company {
    height: auto;
    padding-top: 0;               /* PC用の表の開始位置指定を打ち消す */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* 見出しは .p-company__head の中にあるため、子孫まで明示的に解除しないと
     絶対配置のまま残り、写真グリッドに重なる */
  .p-company > *,
  .p-company__title,
  .p-company__title-jp { position: static; }
  /* Figma SP: 「会社情報」は x=0 の左寄せ */
  .p-company__head { width: 100%; text-align: left; }

  .p-company__title    { width: 37.5rem; height: 5.7rem; margin: 8rem auto 0; }
  .p-company__title-jp { width: 100%; margin-top: 1rem; padding-left: 2rem; font-size: 1.6rem; line-height: 1.7rem; text-align: left; }
  .p-company__bases    { margin-top: 4rem; grid-template-columns: repeat(2, 17rem); gap: 1rem; }
  .p-company__bases img { width: 17rem; height: 12.8rem; }
  .p-company__count    { margin-top: 2rem; width: 35.5rem; height: 23rem; }
  .p-company__btn      { margin-top: 5rem; width: 35.5rem; }
  .p-company__table    { margin-top: 10rem; width: 33.5rem; }
  .p-company__row      { grid-template-columns: 11rem 2rem 1fr; }
  /* 「代表取締役社長」7文字が見出し列(110px)に1行で収まるサイズにする */
  .p-company__row dt   { font-size: 1.5rem; }
  .p-company__cta      { margin: 12rem 0 0; width: 35.5rem; }

  /* FAQ: スマホ版デザインは5問だが、PC版と同じ6問を出すため高さは可変 */
  .p-faq {
    padding-top: 31.8rem;         /* Figma SP: 1問目まで318px */
    padding-bottom: 18rem;
  }
  /* Figma SP: 背景はセクション上端から110px下で始まり、下端の13px手前で終わる */
  .p-faq__bg {
    top: 11rem; bottom: 1.3rem;
    /* SPはFigmaでPCと別の画像（307x4096）が使われている。
       PC用を375px幅に縮めるとコンクリートの模様が横に潰れて別物になる */
    background-image: url("../img/about/bg-dark-sp.webp");
    background-size: 37.5rem 500.6rem;
    clip-path: polygon(0 0, 100% 6.7rem, 100% calc(100% - 6.7rem), 0 100%);
  }
  .p-faq__title    { left: 20.5rem; top: 18rem; width: 17rem; height: 6.5rem; }
  .p-faq__title-jp { left: 24.3rem; top: 25.5rem; width: 11.2rem; font-size: 1.6rem; line-height: 2.3rem; }
  .p-faq__list     { width: 31.5rem; padding-top: 0; }
  .c-qa__q { padding-inline: 2rem; }
  .c-qa__a { padding: 2rem 3rem; }

  /* ENTRY */
  .p-entry { height: 39.2rem; }                   /* フォーム削除に伴い縮小（152px + ボタン80px + 下余白160px） */
  .p-entry__title { width: 28.6rem; height: 6.5rem; }
  .p-entry__lead  { left: 5.2rem; top: 3.9rem; width: 26.8rem; height: 6.3rem; }
  .p-entry__cta   { left: 1rem; top: 15.2rem; width: 35.5rem; }   /* 「すべての採用情報」ボタン(.p-company__cta)と同じ幅に統一。幅拡大分、左右中央（左右1rem均等）を維持 */
  .p-entry__submit a { width: 100%; }

  /* --- SPデザイン指摘（第2回）の反映 --- */
  /* 3. スマホだけの改行 */
  .u-sp-br { display: inline; }
  /* 6/7. SP専用の見出し画像は縦横比が違うので高さを指定し直す */
  .p-works__title-en img,
  .p-strength__base img,
  .p-recruit__title img { width: 100%; height: 100%; object-fit: contain; }
  /* 10. 拠点数のアイコン */
  .p-company__count-num img { width: 7.2rem; height: 7.2rem; }

  /* フッター */
  .l-footer__inner {
    min-height: 69.1rem;                          /* Figma SP 691px */
    padding: 8rem 3rem;                           /* Figma SP x=30 / y=80 */
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 8rem;
  }
  .l-footer__nav { flex-direction: column; gap: 0; }
  .l-footer__nav ul { width: auto; }
  .l-footer__nav a { font-size: 2.4rem; line-height: 5rem; }
}