@charset "utf-8";

/* ==========================================================================
   デザイントークン（Figma のバリアブル定義に対応）
   ========================================================================== */
:root {
  /* 色 */
  --c-white: #ffffff;
  --c-navy: #1a2b4c;          /* 紺テキスト */
  --c-black-text: #2d3136;    /* 黒テキスト（本文ベース） */
  --c-corporate: #ff8a45;     /* コーポレートカラー */
  --c-orange-text: #e66e26;   /* テキストオレンジ2 */
  --c-orange-emphasis: #d85e1a; /* 強調テキスト（本文中の太字） */
  --c-corporate-50: #ffc5a2;  /* コーポレート50% */
  --c-bg-1: #f4f6f9;          /* 背景1 */
  --c-bg-2: #fff8f4;          /* 背景2 */
  --c-bg-3: #fff1e8;          /* 背景3 */
  --c-gray-text: #6e6e6e;     /* グレイテキスト */
  --c-placeholder: #aaaaaa;   /* 入力欄のプレースホルダー */

  /* タイポグラフィ */
  --font-base: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
  --fs-body: 1.6rem;
  --lh-body: 1.7;
  --ls-body: 0.06em;
  --fs-h3: 2.8rem;
  --lh-h3: 1.6;
  --ls-h3: 0.1em;
  --fs-caption: 1.4rem;
  --lh-caption: 1.4;

  /* 効果 */
  --shadow-text: 0 0 20px rgba(0, 0, 0, 0.5);
  --shadow-button: 4px 4px 10px rgba(0, 0, 0, 0.25);

  /* レイアウト */
  --w-content: 1000px;   /* デザイン幅 1280px に対する本文カラム */
  --pad-side: 4rem;

  /* 斜めの帯の高さ。デザイン幅1280pxで210pxとなる比率を保ち、
     画面幅が変わっても角度（約9.3度）を一定にする */
  --diagonal: 16.406vw;

  /* ヘッダーの寸法。390px 〜 1400px で連続的に変える（Figma のコメント
     「成り行きで小さくしていって欲しい」）。両端は固定。
       高さ 64→100 / ロゴ 50x44→70x60 / 社名 12→18 / 斜め 32→50 / ボタン 40→60
     係数は2点（390, 1400）を通る直線から出している。
     ページ内リンクの着地点（scroll-margin-top）からも参照するので :root に置く */
  --hdr-h:     clamp(6.4rem, 3.5644vw + 5.010rem, 10rem);
  --hdr-logo-w: clamp(5rem, 1.9802vw + 4.228rem, 7rem);
  --hdr-logo-h: clamp(4.4rem, 1.5842vw + 3.782rem, 6rem);
  /* 社名だけは 18px に達する幅を 1500px にしてある。1400px で 18px にすると
     グローバルメニューと合わせて数px 足りず、「…」で省略されてしまうため */
  --hdr-name:  clamp(1.2rem, 0.54054vw + 0.9892rem, 1.8rem);
  --hdr-wedge: clamp(3.2rem, 1.7822vw + 2.505rem, 5rem);
  --hdr-gap:   clamp(1rem, 0.5941vw + 0.7683rem, 1.6rem);
  --hdr-pad:   clamp(1rem, 0.9901vw + 0.614rem, 2rem);
  --hdr-toggle: clamp(4rem, 1.9822vw + 3.227rem, 6rem);
}

/* ==========================================================================
   ベース
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-navy);
  background: var(--c-white);
  overflow-wrap: break-word; /* 長い英数字の連続でレイアウトが崩れないように */
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}

/* ヘッダーが画面上部に残るので、ページ内リンクの着地点をその高さぶん下げる。
   入れないと飛んだ先の見出しがヘッダーの下に潜る */
[id] {
  scroll-margin-top: var(--hdr-h, 10rem);
}

/* サイト内のリンク共通のホバー。
   hover: hover の中に入れているのは、タッチ端末でタップ後に
   薄いままになるのを避けるため。aria-disabled のリンク（ファイル未登録の
   ダウンロードボタンなど）は押せないので対象外にする */
@media (hover: hover) {
  a:hover:not([aria-disabled="true"]) {
    opacity: 0.8;
  }
}

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

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

/* ==========================================================================
   レイアウト部品
   ========================================================================== */
.l-inner {
  width: min(var(--w-content), 100% - var(--pad-side) * 2);
  margin-inline: auto;
}

.c-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  text-align: center;
}

/* ==========================================================================
   共通コンポーネント
   ========================================================================== */

/* オレンジ角の矢印アイコン（Figma: 29.55px 角 / 白い矢印） */
.c-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: var(--c-corporate);
}

/* 矢印の形は Figma の SVG パスをマスクとして使う（色は background で変える） */
.c-arrow::before {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  background: var(--c-white);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.6713 15.6713"><path d="M0 1.84368L11.2188 13.0624L0.912621 13.0624L0.921839 15.6713L15.6713 15.6713L15.6713 0.921837L13.0717 0.921837L13.0624 11.2188L1.84368 0L0 1.84368Z"/></svg>') center / contain no-repeat;
  rotate: -45deg;
}

/* 左向き（TOPへ戻る） */
.c-arrow--left::before {
  rotate: 135deg;
}

/* 白ボタン（Figma: 紺2px枠 / 角丸8px / padding24 / 高さ77.55px / 本文20px Regular） */
.c-btn {
  /* <button> は親のフォントを継承しない（ブラウザの既定が当たる）。
     .c-btn は <a> と <button> の両方で使うので、ここで揃えておく。
     入れないとフォームの送信ボタンだけ Arial で出る */
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  height: 7.8rem;
  padding: 2.4rem;
  border: 0.2rem solid var(--c-navy);
  border-radius: 0.8rem;
  background: var(--c-white);
  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.25);
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

/* オレンジボタン（Figma btnB: bg #FF8A45 / 文字 Bold 20px 白 / アイコンは白地） */
.c-btn--orange {
  justify-content: center;
  gap: 2.4rem;
  height: auto;
  padding: 1.6rem 4rem;
  border: 0;
  background: var(--c-corporate);
  color: var(--c-white);
  font-weight: 700;
  line-height: 1.6;
}

/* オレンジボタンのアイコンは白地・矢印がオレンジ（Figma: 25px 角 / 矢印 13.26px） */
.c-btn--orange .c-arrow {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--c-white);
}

.c-btn--orange .c-arrow::before {
  width: 1.3rem;
  height: 1.3rem;
  background: var(--c-corporate);
}

/* 紺ボタン（Figma: padding 16px 40px / 矢印が左 / 文字との間隔24px） */
.c-btn--navy {
  justify-content: center;
  gap: 2.4rem;
  height: auto;
  padding: 1.6rem 4rem;
  border: 0;
  background: var(--c-navy);
  color: var(--c-white);
  line-height: 1.4;
}

/* ==========================================================================
   ヘッダー / フッター
   ※ 静的コーディング段階では各ページに直書き。MT テンプレート化時に
   　 テンプレートモジュールへ切り出す
   ========================================================================== */
/* Figma: 高さ100px / 背景は紺の 90%（KV が透ける） */
/* スクロールしても画面上部に残る。fixed ではなく sticky なのは、
   .p-hero と .p-kv がヘッダーの高さぶん負のマージンで食い込む作りのため。
   fixed にすると header が流れから外れて、その食い込みが効かなくなる */
/* ヘッダーの寸法は 390px 〜 1400px で連続的に変える（Figma のコメント
   「成り行きで小さくしていって欲しい」）。1400px 以上と 390px 以下は固定。
     高さ         64 → 100
     ロゴ         50x44 → 70x60
     社名         12 → 18
     斜めの区切り   32 → 50
   係数は2点（390, 1400）を通る直線から出している */
.l-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--hdr-h);
  background: rgba(26, 43, 76, 0.9);
  color: var(--c-white);
}

.l-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-right: 2.4rem;
}

/* ロゴ＋社名の白いブロック。右隣の斜めは疑似要素で継ぎ足す。
   幅が足りないときはここだけが縮み、社名が「…」で省略される */
.l-header__logo {
  position: relative;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: var(--hdr-gap);
  min-width: 0;
  height: 100%;
  /* 右端の斜めは別要素にせず、この白いブロックごと切り抜く。
     疑似要素で継ぎ足すと、継ぎ目に1pxの縦線が出る（2026-09-29） */
  padding-left: var(--hdr-pad);
  padding-right: var(--hdr-wedge);
  background: var(--c-white);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--hdr-wedge)) 100%, 0 100%);
}

.l-header__logo-mark {
  flex: 0 0 auto;
  width: var(--hdr-logo-w);
  height: var(--hdr-logo-h);
  object-fit: contain;
}

/* 社名。折り返さない。入りきらないときは「…」で省略する。
   1400px ちょうどだとグローバルメニューと合わせて約6px 足りないので、
   ここが数文字ぶん削れて収まる */
.l-header__logo-name {
  min-width: 0;
  overflow: hidden;
  color: var(--c-navy);
  font-size: var(--hdr-name);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ナビとお問い合わせは1つのグループとして下揃え（Figma: items-end / gap 10px） */
.l-header__right {
  flex: 0 0 auto; /* 幅が足りないときはロゴ側（社名）を縮める。ここを縮めると項目が折り返す */
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.l-header__menu {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* 1400px 付近で項目が2行に割れないようにする */
  gap: 3.2rem;
  padding-bottom: 0.8rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.l-header__menu .is-current {
  color: var(--c-corporate);
}

/* 境界立会依頼（Figma: bg #E66E26 / padding 6px 24px / 角丸20px / 字送り0.96px） */
.l-header__pill {
  display: grid;
  place-items: center;
  padding: 0.6rem 2.4rem;
  border-radius: 2rem;
  background: var(--c-orange-text);
  color: var(--c-white);
  letter-spacing: 0.06em;
}

/* 業務紹介のドロップダウン */
.l-header__menu .has-child {
  position: relative;
}

/* 「業務紹介」はリンクではなくドロップダウンの起点。Figma: 開いているとき文字はコーポレートカラー */
.l-header__menu .has-child > span {
  cursor: default;
}

.l-header__menu .has-child:hover > span,
.l-header__menu .has-child:focus-within > span {
  color: var(--c-corporate);
}

/* ドロップダウン（Figma: 背景1 #F4F6F9 / padding16 / gap6 / 本文 Regular 16px 行間1.7） */
.l-header__submenu {
  position: absolute;
  top: calc(100% + 3.1rem);
  left: 50%;
  translate: -50% 0;
  display: grid;
  gap: 0.6rem;
  padding: 1.6rem;
  background: var(--c-bg-1);
  color: var(--c-navy);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.06em;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s;
}

.l-header__submenu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
  border: 0.95rem solid transparent;
  border-bottom: 1.6rem solid var(--c-bg-1);
}

/* ナビとの隙間（3.1rem）を透明な領域で埋め、マウスが通過しても閉じないようにする */
.l-header__submenu::after {
  content: "";
  position: absolute;
  inset: auto 0 100% 0;
  height: 3.1rem;
}

.l-header__submenu li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.l-header__submenu li::before {
  content: "";
  flex: 0 0 auto;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--c-navy);
}

.l-header__menu .has-child:hover .l-header__submenu,
.l-header__menu .has-child:focus-within .l-header__submenu {
  visibility: visible;
  opacity: 1;
}

/* お問い合わせ（Figma: 白1px枠 / 角丸8px / padding 8px 10px / gap 4px） */
.l-header__contact {
  flex: 0 0 auto;
  padding: 0.8rem 1rem;
  border: 1px solid var(--c-white);
  border-radius: 0.8rem;
  text-align: center;
}

.l-header__contact-label {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.l-header__contact-list {
  display: flex;
  gap: 1rem;
  margin-top: 0.4rem;
}

.l-header__contact-list a {
  display: grid;
  place-items: center;
  padding: 0.6rem 1.6rem;
  border-radius: 2rem;
  background: var(--c-white);
  color: var(--c-navy);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* 1つめのボタンだけ幅154px固定（Figma） */
.l-header__contact-list li:first-child a {
  width: 15.4rem;
  padding-inline: 0;
}

/* フッター（Figma: 1280×265。紺地に左上の白い三角を重ねる） */
/* Figma: 1280px幅で高さ265px（斜め210px + 下の紺帯55px）。
   幅が変わっても斜めが収まるよう、高さを斜めに追従させる */
.l-footer {
  position: relative;
  z-index: 0;
  overflow: hidden;
  height: calc(var(--diagonal) + 5.5rem);
  background: var(--c-navy);
  color: var(--c-white);
}

/* 上に 1px はみ出させて、サブピクセルのズレで下地の紺が線状に見えるのを防ぐ */
.l-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px 0 auto 0;
  height: calc(var(--diagonal) + 1px);
  background: var(--c-white);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}


.l-footer__inner {
  position: relative;
  height: 100%;
  width: min(100rem, 100% - 8rem);
  margin-inline: auto;
}

/* バナーは白い領域に置くため上端基準。
   他の要素は紺の領域に置くため下端基準（フッターの高さが幅に応じて伸びる） */
.l-footer__bnr {
  position: absolute;
  top: 6.4rem;
  left: 0;
  display: block;
  width: 21.1rem;
}

.l-footer__privacy {
  position: absolute;
  bottom: 8.3rem;
  right: 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
}

/* コピーライトは Montserrat Regular 12px（Figma） */
.l-footer__copyright {
  position: absolute;
  bottom: 4rem;
  left: 0;
  width: 100%;
  font-family: "Montserrat", var(--font-base);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: right;
}

/* ==========================================================================
   下層ページ共通
   ========================================================================== */

/* キービジュアル */
/* KV（高さ 500px。ヘッダーが上に重なる） */
.p-kv {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 50rem;
  margin-top: -10rem; /* ヘッダー分。KV は Figma 上 y=0 から 500px */
  padding: 0 0 5.2rem;
  /* 画像は HTML 側からカスタムプロパティで渡す。SP は切り抜きが違うページがあるため
     `--kv-photo-sp` を用意し、未指定なら PC 用にそのまま落ちる */
  background: var(--c-navy) center / cover no-repeat;
  background-image: var(--kv-photo);
}

/* お知らせ系の KV は低い（Figma: 340px。業務紹介ページは 500px） */
.p-kv--short {
  min-height: 34rem;
  padding-bottom: 3.2rem;
}

/* パンくず（白い角丸ピル）Figma: 223×32 / 左右 padding 20px / y=110 */
.p-kv__breadcrumb {
  position: absolute;
  top: 11rem;
  left: 2.4rem;
  max-width: calc(100% - 4.8rem); /* KV からはみ出さない。左の 2.4rem と対称 */
  padding: 0.4rem 2rem;
  border-radius: 2rem;
  background: var(--c-white);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: var(--c-navy);
}

/* Figma: 中身の行は 24px（矢印アイコン 12×24 が高さを決めている）→ ピル全体 32px */
.p-kv__breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.4rem;
  min-width: 0; /* 最後の項目を縮められるようにする */
}

.p-kv__breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto; /* 途中の項目は縮めない。縮むと文字がはみ出して重なる */
  white-space: nowrap; /* 幅が足りないとき、途中の項目が折り返してピルが2段になる */
}

/* 現在位置（記事名）は折り返さずに省略する。
   text-overflow は flex コンテナ直下のテキストには効かないので block に戻す */
.p-kv__breadcrumb li:last-child {
  display: block;
  flex: 0 1 auto; /* 幅が足りなければ現在地だけを縮める */
  min-width: 0;
  max-width: 28rem; /* Figma: 記事名の幅 268px。これを超えたら「…」で省略する */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.p-kv__breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* 区切りのオレンジ山括弧（Figma: 12×24 のアイコン） */
.p-kv__breadcrumb li:not(:last-child)::after {
  content: "";
  width: 1.2rem;
  height: 0.9rem;
  border-top: 0.2rem solid var(--c-corporate);
  border-right: 0.2rem solid var(--c-corporate);
  rotate: 45deg;
  scale: 0.8;
}

/* Figma: 1つのテキスト。字送りは 3.6px 固定、区切りは半角スペース1文字（60px） */
.p-kv__title {
  width: min(100rem, 100% - 8rem);
  margin-inline: auto;
  /* 副題を持たないページ（業務実績など）はこの値がそのまま効く */
  font-size: 6rem;
  line-height: 1.2;
  letter-spacing: 0.36rem;
  color: var(--c-white);
  text-shadow: var(--shadow-text);
}

.p-kv__title-sub {
  font-size: 6rem;
}

.p-kv__title-main {
  font-size: 4rem;
}

/* 本文エリア（背景は一面の背景3。上下の角に白い三角を重ねて斜めに見せる） */
.p-body {
  position: relative;
  z-index: 0; /* 下端の白い三角（z-index:-1）を背景の上・本文の下に置くため */
  /* 背景の英字（.p-body__en）が字送りの打ち消しで右に 10px はみ出し、
     どの画面幅でも横スクロールバーが出ていた。ここで切る。
     hidden ではなく clip なのは、hidden だとスクロールコンテナになり、
     ヘッダーの position: sticky が効かなくなるため */
  overflow-x: clip;
  padding-bottom: var(--diagonal); /* 最後の 210px 相当が斜めの帯になる */
  background: var(--c-bg-3);
}

/* 下端：右下の白い三角（背景3 → 白へのつなぎ）
   Figma: 1280×210、TOPへ戻るボタン枠の上端から始まる（下端はフッターに隠れる） */
.p-body::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0 0;
  height: var(--diagonal);
  background: var(--c-white);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* 本文を白地にする。既定は一面が背景3（業務紹介系）
   Figma: お知らせ系・プライバシーポリシー系がこれ */
.p-body--white {
  background: var(--c-white);
  /* 既定の padding-bottom は下端の斜め帯（210px）のための空き。
     白地のページは斜めが入らないので Figma どおり 80px に詰める */
  padding-bottom: 8rem;
}

/* KV直下に背景3の斜め帯を重ねる（Figma: Rectangle 89 / 1280×210）。
   形と高さはフッターの斜めと共通なので角度が揃う。
   お知らせ系は --white と併用、プライバシーポリシーは --white のみ */
.p-body--wedge::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 0;
  height: var(--diagonal);
  background: var(--c-bg-3);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* 本文が背景3のページ（フロー・境界立会）は、逆に白い三角が乗る。
   同じ色どうしだと帯が見えないため、本文の色に応じて三角の色を反転させる
   （Figma: Rectangle 89 は白／背景3 のどちらもある） */
.p-body--wedge:not(.p-body--white)::before {
  background: var(--c-white);
}

/* 背景に敷く大きな英字（Figma: Montserrat 700 / 100px / 行間100% / 字送り10px） */
.p-body__en {
  position: absolute;
  /* Figma: 英字の「下端」が大見出しフレームの下端（本文上端から 240px）に揃う。
     行数が変わっても位置が合うよう、上端固定ではなく下端基準で配置する
     （2行=COMPENSATION CONSULTING / 1行=Projects のどちらも成立する） */
  top: 24rem;
  translate: 0 -100%;
  right: 0;
  margin-right: -0.1em; /* 字送りの末尾分を打ち消す */
  color: var(--c-white);
  font-family: "Montserrat", var(--font-base);
  font-size: 10rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
  pointer-events: none;
}

/* 大見出し（Figma: 見出し 40px、下のオレンジ帯 400×5px） */
.p-heading {
  position: relative;
  padding-top: 18.3rem;
}

/* 下線の幅は見出しの文字数に追従させる（Figma: 調査測量=400px / 鉄道用地管理=488px） */
.p-heading__text {
  position: relative;
  /* 英字の装飾（.p-heading__en）は絶対配置で HTML の後ろにあるため、
     指定が無いと手前に描かれる。画面が狭くて重なったとき和文が隠れるので、
     ここで和文を手前に上げる */
  z-index: 1;
  display: inline-block;
  /* 下線は画面左端から。テキストの開始位置だけ本文カラムの左端に合わせる。
     1280px では (1280-1000)/2 = 140px となり Figma と一致する */
  padding: 0 0 0.4rem max(var(--pad-side), (100% - var(--w-content)) / 2);
  border-bottom: 0.5rem solid var(--c-corporate);
  font-size: 4rem;
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
  white-space: nowrap;
}

.p-lead {
  margin-top: 8.4rem;
}

/* リード文の下に置く大きな図版（DX推進ページ）Figma: 1000×600 / 上 40px */
.p-lead__img {
  margin-top: 4rem;
}

.p-lead__img img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: 1rem;
  background: var(--c-bg-1);
}

/* 業務ブロック（白カード + 写真3枚） */
.p-work {
  margin-top: 8rem;
}

.p-work__card {
  width: min(80rem, 100% - 8rem);
  margin-inline: auto;
  /* Figma: カード 800×316、下 120px に写真が 80px 重なる */
  padding: 4rem 4rem 12rem;
  background: var(--c-white);
  border-radius: 1rem;
}

.p-work__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--c-orange-text);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.p-work__title::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--c-corporate);
}

.p-work__desc {
  margin-top: 2.4rem;
}

/* 説明文が複数段落になった場合、段落間は行間のみとする（カードの gap を打ち消す） */
.p-work__desc + .p-work__desc {
  margin-top: 0;
}

/* 追加文（説明文とボタンの間に入る一文） */
.p-work__extra {
  margin-top: 2.4rem;
}

.p-work__extra + .p-work__extra {
  margin-top: 0;
}

.p-work__note {
  margin-top: 2.4rem;
  font-size: var(--fs-caption);
  line-height: 1.5;
}

/* ブロック内のボタン（鉄道用地管理ページなど） */
.p-work__btn {
  display: flex;
  justify-content: center;
  margin-top: 2.4rem;
}

/* 写真なしブロックは重なり分の余白が不要（Figma: 下 40px） */
.p-work:not(:has(.p-work__photos)) .p-work__card {
  padding-bottom: 4rem;
}

/* --------------------------------------------------------------------------
   サブセクション入りのブロック（DX推進ページ）
   写真をカードの外に重ねず、カード内に収める。カード幅は 1000px
   -------------------------------------------------------------------------- */
.p-work__card:has(.p-work__sub) {
  width: min(100rem, 100% - 8rem);
  padding-bottom: 4rem;
}

.p-work__sub {
  margin-top: 4rem;
}

/* Figma: BIZ UDPGothic Bold 20px / 前後に全角の縦罫 */
.p-work__sub-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
}

.p-work__sub-title::before,
.p-work__sub-title::after {
  content: "｜";
  margin: 0 1em;
}

.p-work__sub-desc {
  margin-top: 2.4rem;
}

.p-work__sub-desc + .p-work__sub-desc {
  margin-top: 0;
}

/* Figma: 920px 幅に 300×200 を3枚（間隔は両端揃えで 10px） */
.p-work__sub-photos {
  display: flex;
  justify-content: space-between;
  margin-top: 2.4rem;
}

.p-work__sub-photos li {
  width: 30rem;
}

.p-work__sub-photos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 1rem;
  background: var(--c-bg-1);
}

.p-work__sub-photos figcaption {
  margin-top: 0.4rem;
}

.p-work__photos {
  display: flex;
  justify-content: center;
  gap: 1rem;
  width: min(92rem, 100% - 4rem);
  margin: -8rem auto 0;
}

/* 写真2枚のときは間隔を 20px にする（Figma: 3枚=10px / 2枚=20px） */
.p-work__photos:has(li:nth-child(2):last-child) {
  gap: 2rem;
}

.p-work__photos li {
  width: 30rem;
}

.p-work__photos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 1rem;
  background: var(--c-bg-1); /* 画像未配置時のプレースホルダ */
}

.p-work__photos figcaption {
  margin-top: 0.4rem;
}

/* --------------------------------------------------------------------------
   業務実績のリスト（Figma: 800px 幅 / 各行 padding 16px 0 / 1px 破線 / 本文強調 Bold）
   項目は「テキスト（複数行）」の1行＝1項目をテンプレート側で <li> に変換している
   -------------------------------------------------------------------------- */
.p-record {
  width: min(80rem, 100% - var(--pad-side) * 2);
  margin: 8rem auto 0;
}

.p-record li {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.6rem 0;
  border-bottom: 0.1rem dashed var(--c-navy);
  font-weight: 700;
  line-height: 1.6;
}

.p-record li::before {
  content: "";
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--c-corporate);
}

/* --------------------------------------------------------------------------
   お知らせ一覧（Figma: 800px幅 / 1行 87px / 1px破線 / ホバーで背景 #F4F6F9）
   本文上端から 120px。.p-body に padding-top が無く margin だと相殺されるため padding で空ける
   -------------------------------------------------------------------------- */
.p-newslist {
  width: min(80rem, 100% - var(--pad-side) * 2);
  margin-inline: auto;
  padding-top: 12rem;
}

.p-newslist a {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.6rem;
  border-bottom: 0.1rem dashed var(--c-navy);
  transition: background-color 0.2s;
}

.p-newslist a:hover {
  background: var(--c-bg-1);
}

/* JS がページ外の記事を隠す。JS が動かない環境では全件が並ぶ */
.p-newslist li[hidden] {
  display: none;
}

.p-newslist__meta {
  display: flex;
  flex-wrap: wrap; /* カテゴリーが複数付いたら折り返す。詰め込むとバッジ内で改行されて潰れる */
  align-items: center;
  gap: 1.6rem;
}

/* Figma: Montserrat Bold 16px（2026.00.00 形式） */
.p-newslist__date {
  flex: 0 0 auto;
  font-family: "Montserrat", var(--font-base);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.p-newslist__title {
  font-size: 1.4rem;
  line-height: 1.6;
}

/* カテゴリーバッジ（Figma: オレンジ地 / 文字は紺 / 角丸20px）。複数付くと横に並ぶ */
.c-badge {
  flex: 0 0 auto; /* 縮めない。縮むとバッジの中で文字が改行される */
  padding: 0.4rem 1rem;
  white-space: nowrap;
  border-radius: 2rem;
  background: var(--c-corporate);
  color: var(--c-navy);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   ページネーション（Figma: gap 24px / 上下 padding 40px / 現在ページは50pxの円）
   -------------------------------------------------------------------------- */
.p-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  padding: 4rem 0;
  color: var(--c-gray-text);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.p-pager__current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-white);
}

/* Prev / Next。リンクが無い側（1ページ目の Prev など）はグレーのまま */
.p-pager__nav {
  display: flex;
  align-items: center;
  gap: 0;
  color: var(--c-navy);
}

.p-pager__nav--disabled {
  color: var(--c-gray-text);
}

/* Figma の二重シェブロン。SVG を mask で抜いて currentColor で塗るため、
   無効時のグレーにもそのまま追従する */
.p-pager__nav::before,
.p-pager__nav::after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 5 9.5 10 4.5 15M10.5 5 15.5 10 10.5 15' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 5 9.5 10 4.5 15M10.5 5 15.5 10 10.5 15' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.p-pager__nav--prev::after { content: none; }
.p-pager__nav--prev::before { rotate: 180deg; }
.p-pager__nav--next::before { content: none; }

/* 業務紹介一覧 */
.p-servicelist {
  margin-top: 8rem;
}

.p-servicelist__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--c-orange-text);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.p-servicelist__title::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--c-corporate);
}

/* Figma: 幅800px / 2列 / 間隔32px / 見出しとの間隔24px */
.p-servicelist__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.2rem;
  width: min(80rem, 100%);
  margin: 2.4rem auto 0;
}

/* Figma: 斜めの帯の下（白い領域）に配置。枠は上下 12px の余白 */
.p-pagetop {
  display: flex;
  justify-content: center;
  padding: 1.2rem 0;
  background: var(--c-white);
}

/* --------------------------------------------------------------------------
   お知らせ記事詳細
   -------------------------------------------------------------------------- */

/* 記事ヘッダー（Figma: 日付＋バッジの下 24px / タイトル 28px / 下にオレンジ 5px） */
.p-article__head {
  padding-top: 8rem;
}

.p-article__meta {
  display: flex;
  flex-wrap: wrap; /* カテゴリーが複数付いたら折り返す。詰め込むとバッジ内で改行されて潰れる */
  align-items: center;
  gap: 1.6rem;
  padding-bottom: 2.4rem;
}

.p-article__date {
  flex: 0 0 auto;
  font-family: "Montserrat", var(--font-base);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.p-article__title {
  margin-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 0.5rem solid var(--c-corporate);
  font-size: 2.8rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

/* 本文はブロックエディタの出力。要素セレクタで当てる */
.p-article__body {
  padding-top: 8rem;
  color: var(--c-black-text); /* Figma: PC本文ベース。見出しなど紺のものは個別に戻す */
}

.p-article__body > * + * {
  margin-top: 2.4rem;
}

/* 先頭の見出しは .p-article__body の padding-top と二重にならないようにする
   （Figma: タイトルの下線から最初の H3 まで 80px） */
.p-article__body > :first-child {
  margin-top: 0;
}

.p-article__body h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 8rem;
  color: var(--c-orange-text);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.p-article__body h3::before {
  content: "";
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--c-corporate);
}

.p-article__body h4 {
  margin-top: 4rem;
  color: var(--c-navy); /* Figma: 紺テキスト。本文の黒を継承させない */
  font-size: 1.8rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
}

/* ブロックエディタの太字。strong / b のどちらが出力されても効かせる */
.p-article__body strong,
.p-article__body b {
  color: var(--c-orange-emphasis);
}

.p-article__body a {
  color: var(--c-orange-text);
  text-decoration: underline;
}

/* Figma: 本文幅 1000px に対して画像は 800px・中央 */
.p-article__body img {
  display: block;
  width: min(80rem, 100%);
  margin-inline: auto;
  border-radius: 1rem;
}

/* 記事送り（Figma: 3つを 1000px 幅に等間隔 / 各 283.55×52 / 上下 64px） */
.p-entrynav {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  width: min(100rem, 100% - 8rem);
  margin-inline: auto;
  padding: 6.4rem 0;
  background: var(--c-white);
}

.c-btn--pill {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  width: 28.4rem;
  height: 5.2rem;
  padding: 1rem 2rem;
  border: 0.2rem solid var(--c-navy);
  border-radius: 3rem;
  background: var(--c-bg-1);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* 記事送りの矢印はオレンジの四角を持たず、線だけの紺（Figma btnD）。
   currentColor で塗るので、無効時のグレーにも自動で追従する */
.c-btn--pill .c-arrow {
  background: none;
}

.c-btn--pill .c-arrow::before {
  width: 2.2rem;
  height: 2.2rem;
  background: currentColor;
}

/* 前後の記事が無いときはレイアウトを保ったまま無効表示にする */
.c-btn--pill.is-disabled {
  border-color: var(--c-gray-text);
  color: var(--c-gray-text);
  opacity: 0.5;
}

/* ==========================================================================
   プライバシーポリシー
   ========================================================================== */

/* KV に写真が無いページ。Figma はコーポレートカラー50%の乗算レイヤーのみ。
   後から写真が入る場合は .p-kv に background-image を足すだけで、
   同じオレンジの乗算がその上に乗る */
.p-kv--flat {
  z-index: 0; /* 乗算レイヤー（z-index:-1）を背景の上・文字の下に置くため */
  background: var(--c-white);
}

/* Figma ではオレンジの矩形が文字の背面にある。
   z-index を指定しないと、位置指定のある擬似要素が見出しより前面に来て
   白文字まで乗算で潰れる */
.p-kv--flat::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(255, 138, 69, 0.5);
  mix-blend-mode: multiply;
}

/* 大見出し。業務紹介系は背景の英字ぶん padding-top 18.3rem を取るが、
   このページは英字が無いので Figma どおり本文上端から 80px */
.p-heading--flat {
  padding-top: 8rem;
}

.p-policy {
  width: min(100rem, 100% - 8rem);
  margin: 4rem auto 0; /* Figma: 大見出しの下線から 40px */
}


/* 本文（ブロックエディタ出力）。装飾は要素セレクタで当てる */
.p-policy__body > * + * {
  margin-top: 1.6rem; /* Figma: ブロック間 16px */
}

/* 小見出し。Figma: 12px の丸 + 10px の間隔 / Bold 18px / テキストオレンジ1 */
.p-policy__body h3 {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--c-orange-emphasis);
  font-size: 1.8rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
}

.p-policy__body h3::before {
  content: "";
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--c-corporate);
}

/* 段落とリストは小見出しより 20px 内側に入る */
.p-policy__body p,
.p-policy__body ul,
.p-policy__body ol {
  padding-left: 2rem;
  color: var(--c-black-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* 見出し直後の段落は間隔を詰める（Figma: 小見出しと本文は連続） */
.p-policy__body h3 + p {
  margin-top: 0;
}

/* 入れ子の階層ごとに記号を変える。
   Figma: 1. →（1）→（ア）→ 中黒 の4階層 */
@counter-style p-paren-decimal {
  system: extends decimal;
  prefix: "（";
  suffix: "）";
}

@counter-style p-paren-katakana {
  system: fixed;
  symbols: "ア" "イ" "ウ" "エ" "オ" "カ" "キ" "ク" "ケ" "コ";
  prefix: "（";
  suffix: "）";
}

.p-policy__body ol {
  list-style: decimal;
}

.p-policy__body ol ol {
  list-style: p-paren-decimal;
}

.p-policy__body ol ol ol {
  list-style: p-paren-katakana;
}

.p-policy__body ul {
  list-style: "・";
}

/* Figma: 1階層目の項目だけ、記号（1. や ・）の幅ぶん 24px 下げる。
   段落の 20px と合わせて、文字は小見出しから 44px の位置に来る */
.p-policy__body li {
  margin-left: 0;
}

.p-policy__body > ol > li,
.p-policy__body > ul > li {
  margin-left: 2.4rem;
}

/* Figma: 2階層目以降は下げない。（1）（ア）・ が同じ左端に並び、
   折り返しもその位置に戻る（記号を行内に置く＝ぶら下げにしない） */
.p-policy__body ol ol,
.p-policy__body ol ul,
.p-policy__body ul ol,
.p-policy__body ul ul {
  padding-left: 0;
}

.p-policy__body ol ol > li,
.p-policy__body ol ul > li,
.p-policy__body ul ol > li,
.p-policy__body ul ul > li {
  list-style-position: inside;
}

.p-policy__body li::marker {
  color: var(--c-black-text);
}

.p-policy__body ul,
.p-policy__body ol {
  margin-top: 0;
}

/* Figma: 本文とリストの間だけ空行1つぶん（16px × 行間1.7）空く */
.p-policy__body > ul,
.p-policy__body > ol {
  margin-top: 2.7rem;
}

.p-policy__body a {
  color: var(--c-orange-text);
  text-decoration: underline;
}

/* ==========================================================================
   会社案内
   ========================================================================== */

/* セクションごとに背景がクリームと白で交互に切り替わる。
   境目の斜め帯（Figma: Rectangle 89/90 / 1280×210）は「次のセクションの色」で塗る。
   装飾英字の色が背景と逆（クリーム背景=白文字 / 白背景=クリーム文字）なのも同じ理由 */
.p-section {
  position: relative;
  z-index: 0; /* 帯（z-index:-1）を背景の上・中身の下に置くため */
  overflow: hidden; /* 沿革の写真が左右にはみ出す分を隠す */
  padding-bottom: 10rem; /* Figma: 全セクション共通で中身の末尾から下端まで 100px */
}

.p-section--cream { background: var(--c-bg-3); }
.p-section--white { background: var(--c-white); }

.p-section--cream .p-heading__en { color: var(--c-white); }
.p-section--white .p-heading__en { color: var(--c-bg-3); }

/* 下端の斜め帯。次のセクションの色で塗る。
   向きは白・クリームとも共通で「左に向かって下がる」（Figma 実測） */
.p-section--cream:not(.p-section--last)::after,
.p-section--white:not(.p-section--last)::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--diagonal);
}

.p-section--cream::after { background: var(--c-white); }
.p-section--white::after { background: var(--c-bg-3); }

.p-section--cream::after,
.p-section--white::after {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* 会社案内は装飾英字がページ単位ではなくセクション単位で付く。
   .p-body__en（ページに1つ）ではなく大見出しの中に置く */
.p-heading--company {
  padding-top: 16.3rem; /* Figma: セクション上端から見出しテキストまで 163px */
}

.p-heading--section {
  padding-top: 4.4rem; /* 2つ目以降のセクション。Figma: 上端から 44px */
}

.p-heading__en {
  position: absolute;
  right: 0;
  bottom: 0; /* 英字の下端を下線の下端に揃える */
  margin-right: -0.1em; /* 字送りの末尾分を打ち消す */
  font-family: "Montserrat", var(--font-base);
  font-size: 10rem;
  font-weight: 700;
  line-height: 1.2; /* Figma: 2つ目以降のセクションは 1.2。代表挨拶だけ 1.0 */
  letter-spacing: 0.1em;
  text-align: right; /* 2行になったときに右端を揃える（IDEAL / CANDIDATE）*/
  text-transform: uppercase;
  pointer-events: none;
}

.p-heading--company .p-heading__en { line-height: 1; }

/* 項目名＋内容の定義リスト。ポリシーと会社概要で共用する。
   Figma: 項目名 200px・右寄せ・右に紺1pxの縦線 / 内容は残り全部 */
.p-deflist {
  width: min(var(--w-content), 100% - var(--pad-side) * 2);
  margin: 8rem auto 0; /* Figma: 大見出しの下線から 80px */
}

.p-deflist__row {
  display: flex;
  align-items: stretch;
}

/* セルの白背景は Figma の指定どおり入れる。
   ポリシーではセクション背景と同色だが、下端の斜め帯がテーブルの下に潜り込むため、
   これが無いと帯がテーブルの上に乗って四角く切り取られて見える */
.p-deflist__label,
.p-deflist__body {
  background: var(--c-white);
}

.p-deflist__label {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 20rem;
  padding: 1.4rem 2.4rem;
  border-right: 1px solid var(--c-navy);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: right;
}

.p-deflist__body {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 1.4rem 2.4rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* 中身はブロックエディタの出力を想定。段落間は Figma の 10px */
.p-deflist__body > * + * {
  margin-top: 1rem;
}

/* 「❶安全第一」のような見出し行は太字で行間を詰める */
.p-deflist__body strong {
  font-weight: 700;
  line-height: 1.6;
}

/* 会社概要の定義リスト。ポリシーとの違いは
   項目名 250px・左寄せ・背景1・行間が紺の破線、という3点 */
.p-deflist--company .p-deflist__row {
  border-bottom: 1px dashed var(--c-navy);
}

.p-deflist--company .p-deflist__label {
  justify-content: flex-start;
  width: 25rem;
  border-right: 0;
  background: var(--c-bg-1);
  text-align: left;
}

.p-deflist--company .p-deflist__body {
  background: var(--c-white);
}

/* 「測量業」などのバッジ。ブロックエディタでは見出し4で入力してもらう */
.p-deflist__body h4 {
  display: inline-block;
  margin-bottom: 0.8rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.p-deflist__body h4 + * {
  margin-top: 0;
}

/* 登録年月日／登録番号のような「ラベル＋値」。テーブルブロックで入力してもらう */
.p-deflist__body table {
  border-collapse: collapse;
}

.p-deflist__body th,
.p-deflist__body td {
  padding: 0;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.p-deflist__body th {
  width: 12rem;
  padding-right: 1.6rem;
  white-space: nowrap;
}

/* 有資格者・取締役のような2段組の一覧。箇条書きで入力してもらう */
.p-deflist__body ul {
  columns: 2;
  column-gap: 0;
  list-style: none;
}

/* バッジで区切られたまとまりの間隔（Figma: 24px） */
.p-deflist__body h4:not(:first-child) {
  margin-top: 2.4rem;
}

/* 所在地の行。住所テキストと地図画像を横に並べる。
   Figma: テキスト332px + 10px + 地図360×230 */
.p-office + .p-office {
  margin-top: 2.8rem; /* Figma: ブロックの下14px + 次のブロックの上14px */
}

.p-office {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.p-office__text {
  flex: 0 0 33.2rem;
}

/* 営業所名と住所は別フィールドだが、Figma では連続した行に見える。
   「改行を変換」が段落を作るので、段落の余白を消して行として並べる */
.p-office__text p {
  margin: 0;
}

/* 注記は本店ではブロックエディタ出力の p、営業所ではテンプレートの div。
   どちらでも効くよう、上の p 指定よりセレクタを強くする */
.p-office__text .p-office__note {
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 1.4;
}

.p-office__map {
  flex: 0 0 36rem;
}

.p-office__map img {
  display: block;
  width: 100%;
  aspect-ratio: 360 / 230;
  object-fit: cover;
  background: var(--c-bg-1);
}

/* ダウンロードアイコン（下向き矢印＋トレイ）。
   白い25px角にオレンジの字形という構造は .c-btn--orange .c-arrow と同じ。
   字形だけ差し替える（Figma: btnB のアイコン） */
.c-arrow--download::before,
.c-arrow--down::before {
  rotate: none;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.8571 17.8571"><path d="M8.92857 13.3929L3.34821 7.8125L4.91071 6.1942L7.8125 9.09598V0H10.0446V9.09598L12.9464 6.1942L14.5089 7.8125L8.92857 13.3929ZM2.23214 17.8571C1.6183 17.8571 1.09301 17.6388 0.65625 17.202C0.219494 16.7653 0.000744048 16.2396 0 15.625V12.2768H2.23214V15.625H15.625V12.2768H17.8571V15.625C17.8571 16.2388 17.6388 16.7645 17.202 17.202C16.7653 17.6395 16.2396 17.8579 15.625 17.8571H2.23214Z"/></svg>') center / contain no-repeat;
}

/* 会社沿革。年カラム / 点線と丸のタイムライン / 月＋内容 の3列 */
.p-history {
  width: min(var(--w-content), 100% - var(--pad-side) * 2);
  margin: 8rem auto 0;
}

.p-history__row {
  display: flex;
  align-items: stretch;
}

.p-history__year {
  flex: 0 0 20rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem 2.4rem;
  white-space: nowrap;
}

.p-history__ad {
  font-family: "Montserrat", var(--font-base);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  opacity: 0.3; /* Figma: 西暦は30%の不透明度 */
}

.p-history__era {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
}

/* Figma: 24px幅に点線と二重丸。丸の中心は行の上から34px */
.p-history__mark {
  position: relative;
  flex: 0 0 2.4rem;
}

.p-history__mark::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px dashed var(--c-corporate);
}

.p-history__mark::after {
  content: "";
  position: absolute;
  top: 3.4rem;
  left: 50%;
  translate: -50% -50%;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--c-corporate);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-corporate) 0 0.5rem, var(--c-bg-3) 0.5rem);
}

.p-history__detail {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 1.6rem;
  padding: 2.2rem 2.4rem 1rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.p-history__month {
  flex: 0 0 4.2rem;
  color: var(--c-orange-emphasis);
}

/* 沿革の本文も生の改行で入ってくる（1968年の「静岡営業所を開設」など） */
.p-history__detail > div {
  white-space: pre-line;
}

/* 沿革の下に並ぶ写真。Figma: 260×260 が5枚、左右に 26px はみ出す */
.p-history__photos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8rem;
  width: calc(100% + 5.2rem);
  margin: 4rem -2.6rem 0;
}

.p-history__photos img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1rem;
  background: var(--c-bg-1);
}

/* 組織図とパンフレットは静的な画像・PDF */
.p-orgchart,
.p-pamphlet {
  width: min(var(--w-content), 100% - var(--pad-side) * 2);
  margin: 8rem auto 0;
}

.p-orgchart img {
  display: block;
  width: 100%;
  aspect-ratio: 1000 / 540;
  object-fit: contain;
}

.p-pamphlet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}

.p-pamphlet__preview {
  width: min(80rem, 100%);
}

.p-pamphlet__preview img {
  display: block;
  width: 100%;
  aspect-ratio: 800 / 480;
  object-fit: cover;
  background: var(--c-bg-1);
}

/* 代表挨拶。白カードが左端まで抜けて、写真がその上に重なる */
.p-message {
  position: relative;
  margin-top: 8rem; /* Figma: 下線の下端から 80px */
  /* Figma: カードの下端からセクション下端まで 210px あり、そこが斜めの帯。
     この余白がないと帯がカードに食い込む */
  margin-bottom: var(--diagonal);
}

.p-message__card {
  /* Figma: 1280px で右端が x=1014。本文カラム（1000px 中央）の左端 +874px */
  width: calc(50% + 37.4rem);
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 4rem 4rem 4rem max(var(--pad-side), (100% - var(--w-content)) / 2);
  border-radius: 0 1rem 1rem 0;
  background: var(--c-white);
}

.p-message__catch {
  /* CMS の入力は生の改行で入ってくる（<br> にも <p> にもならない）。
     Figma は改行位置で折り返しているので、改行をそのまま活かす */
  white-space: pre-line;
  color: var(--c-orange-text);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

/* 本文の段落も生の改行で入ってくる。署名（.p-message__sign）は要素で組んであるので、
   タグの間の改行まで拾わないよう本文の div だけに掛ける */
.p-message__body > div:not(.p-message__sign) {
  white-space: pre-line;
}

/* 代表挨拶の写真を出さない方針になったため（2026-09-17）、本文はカード幅
   いっぱいを使う。写真があった頃は食い込みを避けて 460px に制限していた。
   署名はその右端に揃える。 */
.p-message__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4rem;
  width: 100%;
}

.p-message__sign {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
  line-height: 1.2;
  white-space: nowrap;
}

.p-message__company { font-size: 1.8rem; letter-spacing: 0.1em; }

.p-message__name {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.p-message__name span { font-size: 1.5rem; letter-spacing: 0.1em; }
.p-message__name b    { font-size: 2rem;   letter-spacing: 0.1em; }

/* 写真は本文カラムの左端 +500px に重ねる */
.p-message__photo {
  position: absolute;
  top: 17rem;
  /* Figma: 本文カラム左端 +500px。カラムは 1000px 中央寄せなので
     (100% - 1000px)/2 + 500px = 50% となり、常に画面中央と一致する */
  left: 50%;
  width: 50rem;
}

.p-message__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 500 / 640;
  object-fit: cover;
  border-radius: 1rem;
  background: var(--c-bg-1);
}

/* ==========================================================================
   採用情報
   ========================================================================== */

/* 会社案内は「クリームと白の交互」だったが、採用情報は
   背景3 → 白 → 背景1 → コーポレート → 背景3 と4色を渡り歩く。
   セクションごとに自分の色（--section-bg）と次の色（--section-next）を持たせ、
   下端の斜め帯は次の色で塗る（Figma 実測。向きは会社案内と共通で左下がり） */
.p-recruit {
  background: var(--section-bg);
}

.p-recruit:not(.p-section--last)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0 0;
  height: var(--diagonal);
  background: var(--section-next);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* セクションの高さは中身で決まるため小数になることがあり、境界が半ピクセルにかかると
   下地が 1px の筋として見える（Retina で発生。DPR=1 では再現しない）。
   次のセクションを 1px 上に重ねて隙間をなくす。フッターの斜めでも同じ手を使っている。
   斜め帯の色は次のセクションの背景色と同じなので、1px 覆っても見た目は変わらない */
.p-recruit + .p-recruit {
  margin-top: -1px;
}

/* --iv-card はプロフィールのラベル・回答ボックス・写真の影の色。
   背景がクリーム／グレーのセクションでは白、白のセクションではクリームになる。
   スケジュール表だけ INTERVIEW02 で背景2 が指定されているため別変数にした */
.p-recruit--iv1 {
  --section-bg: var(--c-bg-3);
  --section-next: var(--c-white);
  --iv-card: var(--c-white);
  --iv-schedule: var(--c-white);
}

.p-recruit--iv2 {
  --section-bg: var(--c-white);
  --section-next: var(--c-bg-1);
  --iv-card: var(--c-bg-3);
  --iv-schedule: var(--c-bg-2);
}

.p-recruit--iv3 {
  --section-bg: var(--c-bg-1);
  --section-next: var(--c-bg-3); /* 4人目が来たら iv1 に戻る */
  --iv-card: var(--c-white);
  --iv-schedule: var(--c-white);
}

/* 最後のインタビューの下は必ず「求める人材」なのでオレンジで塗る。
   人数が増えても背景の巡回（iv1→iv2→iv3→iv1…）が破綻しない */
.p-recruit--iv-last {
  --section-next: var(--c-corporate);
}

.p-recruit--ideal {
  --section-bg: var(--c-corporate);
  --section-next: var(--c-bg-3);
}

.p-recruit--careers {
  --section-bg: var(--c-bg-3);
  --section-next: var(--c-white);
}

/* インタビューは中身の末尾がそのまま斜め帯の上端になる（会社案内の 100px は付かない） */
.p-recruit--iv {
  padding-bottom: var(--diagonal);
}

/* 大見出し「社員インタビュー」が付くのは1人目だけ。
   2人目以降はセクション上端の余白だけ取る（Figma: 64px） */
.p-recruit--iv:not(.p-recruit--iv-first) .p-interview {
  margin-top: 6.4rem;
}

.p-recruit--iv-first .p-heading__en {
  color: var(--c-white);
  line-height: 1;
}

.p-recruit--careers .p-heading__en {
  color: var(--c-white);
}

/* Figma: 複数行の内容は段落間の余白なし（会社案内の会社概要は 10px 空く） */
.p-recruit--careers .p-deflist__body > * + * {
  margin-top: 0;
}

/* オレンジの丸が付く小見出し（INTERVIEW01 / FAQ / プライベートについて など） */
.p-recruit__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--c-orange-text);
  font-family: "Montserrat", var(--font-base);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
}

.p-recruit__label::before {
  content: "";
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--c-corporate);
}

/* --------------------------------------------------------------------------
   社員インタビュー（プロフィール）
   -------------------------------------------------------------------------- */

.p-interview {
  width: min(var(--w-content), 100% - var(--pad-side) * 2);
  margin: 6.4rem auto 0;
}

.p-interview__head {
  display: flex;
  align-items: flex-start;
  gap: 8rem;
}

/* Figma: 460角・角丸10px・右下に 20px ずらした無地の影（背景の反対色） */
.p-interview__photo {
  flex: 0 0 46rem;
}

.p-interview__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 2rem 2rem 0 var(--iv-card);
}

.p-interview__profile {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 4rem;
}

.p-interview__catch {
  margin-top: 2.4rem;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

/* Figma: キャッチとの間隔 24px に、さらに氏名側の上余白 24px が乗る */
.p-interview__name {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 4.8rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.p-interview__name span {
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
}

/* 所属・年次などのプロフィール表（INTERVIEW02 以降）。
   ブロックエディタのテーブルブロック（2列）で入力する。
   セル間の余白は border-spacing で作り、外周に付く分は負のマージンで打ち消す */
.p-interview__data {
  margin-top: 2.4rem;
}

.p-interview__data table {
  width: 100%;
  margin: -0.8rem -1rem;
  border-collapse: separate;
  border-spacing: 1rem 0.8rem; /* Figma: 横 10px / 縦 8px */
  /* 値が長いと自動レイアウトでは折り返さず右へはみ出すため、列幅を固定する */
  table-layout: fixed;
}

.p-interview__data th,
.p-interview__data td {
  padding: 0;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  text-align: left;
  vertical-align: top;
}

.p-interview__data p {
  margin: 0;
}

/* 項目名は背景の反対色の角丸チップ */
.p-interview__data tr > :first-child {
  width: 8rem;
  border-radius: 0.4rem;
  background: var(--iv-card);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   1日のスケジュール
   -------------------------------------------------------------------------- */

.p-schedule {
  width: min(80rem, 100% - var(--pad-side) * 2);
  margin: 6.4rem auto 0;
  padding: 2.4rem 4rem;
  border-radius: 1rem;
  background: var(--iv-schedule);
}

/* Figma: 左下だけ角を落としたオレンジのタブ */
.p-schedule__title {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 1rem 1rem 1rem 0;
  background: var(--c-corporate);
  color: var(--c-white);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
}

/* スケジュール表もブロックエディタのテーブルブロック（3列: 時刻／区分／内容） */
.p-schedule__list table {
  width: 100%;
  border-collapse: collapse;
}

.p-schedule__list th,
.p-schedule__list td {
  padding: 2.2rem 0;
  color: #000000; /* Figma の指定どおり黒。ページ全体の紺とは別 */
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  text-align: left;
  vertical-align: top;
}

.p-schedule__list p {
  margin: 0;
}

.p-schedule__list tr > * + * {
  padding-left: 1.6rem;
}

.p-schedule__list tr > :last-child {
  padding-right: 2.4rem;
}

/* 1列目＝時刻。左に目盛り（破線＋丸）を描く。
   Figma は 70px / 96px の SVG 2種を行ごとに置いているが、
   行の高さは中身の文字量で変わるため画像では追従しない */
.p-schedule__list tr > :first-child {
  position: relative;
  width: 10.8rem;
  padding-left: 4.8rem;
  color: var(--c-orange-emphasis);
  text-align: right;
  white-space: nowrap;
}

.p-schedule__list tr > :first-child::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 0;
  bottom: 0;
  width: 0.1rem;
  background: repeating-linear-gradient(
    var(--c-corporate) 0 2px,
    transparent 2px 4px
  );
}

/* 丸は行の中央ではなく「1行目の中央」に置く。説明が2行以上になると
   行が高くなり、top:50% では時刻から下にずれるため（SP は 2.4rem 固定で対応済み）。
   2.2rem = セルの上パディング / 0.8em = 1行目の半分（--lh-body: 1.7 の半分） */
.p-schedule__list tr > :first-child::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(2.2rem + 0.8em);
  translate: 0 -50%;
  width: 2.4rem;
  height: 2.4rem;
  border: 0.1rem solid var(--c-corporate);
  border-radius: 50%;
  background: var(--c-bg-3)
    radial-gradient(circle at center, var(--c-corporate) 0.5rem, transparent 0.5rem);
}

/* 2列目＝区分。内容が残り全部を取る */
.p-schedule__list tr > :nth-child(2) {
  width: 1%;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   FAQ / プライベート / 応募者へのメッセージ
   -------------------------------------------------------------------------- */

.p-qa {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 6.4rem;
}

.p-qa__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: min(var(--w-content), 100% - var(--pad-side) * 2);
  margin-inline: auto;
}

/* 写真が左に来る行。並び順を反転させるだけで両端揃えは維持される */
.p-qa__row--reverse {
  flex-direction: row-reverse;
}

/* プライベート／メッセージ行では写真が本文カードに 100px 重なる。
   重なり順は DOM の並び（本文 → 写真）に任せる。
   ここに position/z-index を付けると本文が手前に来て写真が隠れる（2026-09-03 に踏んだ） */
.p-qa__text {
  flex: 0 0 46rem;
  padding-top: 4rem;
}

.p-qa__text > * + *,
.p-qa__item > * + * {
  margin-top: 2.4rem;
}

.p-qa__photo {
  flex: 0 0 50rem;
}

.p-qa__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 500 / 640;
  object-fit: cover;
  border-radius: 1rem;
}

/* 吹き出しの角。「自分が寄っている側の下の角」だけを落とす（Figma 実測） */
.p-qa__q {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-right: 4rem;
  padding: 0.4rem 1.6rem;
  border-radius: 1rem 1rem 1rem 0;
  background: var(--c-corporate);
  color: var(--c-white);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--ls-body);
}

.p-qa__q span {
  flex: 0 0 auto;
  font-size: 1.8rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
}

.p-qa__a {
  margin-left: 4rem;
  padding: 2.4rem;
  border-radius: 1rem 1rem 0 1rem;
  background: var(--iv-card);
  color: var(--c-navy);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* 回答の段落間は行間のみ（Figma: 段落間の余白なし） */
.p-qa__a > * + * {
  margin-top: 0;
}

.p-qa__row--reverse .p-qa__q {
  margin-right: 0;
  margin-left: 4rem;
  border-radius: 1rem 1rem 0 1rem;
}

.p-qa__row--reverse .p-qa__a {
  margin-left: 0;
  margin-right: 4rem;
  border-radius: 1rem 1rem 1rem 0;
}

/* プライベート／応募者へのメッセージ。本文 900px に 200px 角の写真が 100px 重なる */
.p-qa__row--wide .p-qa__text {
  flex: 0 0 90rem;
  margin-right: -10rem;
}

.p-qa__row--wide .p-qa__photo {
  flex: 0 0 20rem;
}

.p-qa__row--wide .p-qa__photo img {
  aspect-ratio: 1;
}

.p-qa__row--wide .p-qa__a {
  margin-left: 0;
  padding: 2.4rem 12rem 2.4rem 4rem; /* 右は重なる写真を避ける分 */
}

/* --------------------------------------------------------------------------
   求める人材
   -------------------------------------------------------------------------- */

.p-recruit--ideal {
  padding-bottom: 56rem; /* 下端 640px が写真。斜め帯の 210px もこの中 */
}

/* 写真はセクション下端に敷き、上 200px をコーポレートカラーへ溶かす（Figma の
   Rectangle 87 は同じグラデーションの PNG なので CSS で置き換えた） */
.p-recruit--ideal::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0 0;
  height: 64rem;
  background:
    linear-gradient(var(--c-corporate), rgba(255, 138, 69, 0) 20rem),
    linear-gradient(rgba(255, 138, 69, 0.2), rgba(255, 138, 69, 0.2)),
    var(--ideal-photo) center / cover no-repeat;
}

/* 英字が2行のぶん、大見出しの上余白が他のセクションと違う */
.p-recruit--ideal .p-heading {
  padding-top: 14.3rem;
}

.p-recruit--ideal .p-heading__text {
  border-bottom-color: var(--c-white);
  color: var(--c-white);
}

.p-recruit--ideal .p-heading__en {
  color: var(--c-white);
  line-height: 1;
  opacity: 0.3;
}

.p-ideal {
  width: min(var(--w-content), 100% - var(--pad-side) * 2);
  margin: 6.4rem auto 0;
  padding: 4rem;
  border-radius: 2rem;
  background: var(--c-white);
  color: var(--c-orange-emphasis);
}

.p-ideal > * + * {
  margin-top: 2.4rem;
}

.p-ideal p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* `.p-ideal p` より詳細度を上げる。キャッチも <p> なので、
   クラス1つだけでは要素セレクタ付きの本文指定に負けて 16px になる */
.p-ideal .p-ideal__catch {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

/* --------------------------------------------------------------------------
   ページ末尾のボタン（エントリーフォーム＋TOPへ戻る）
   -------------------------------------------------------------------------- */

.p-pagetop--stack {
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  padding-bottom: 2.4rem;
}

/* ==========================================================================
   トップページ
   ========================================================================== */

/* --------------------------------------------------------------------------
   キービジュアル（Figma: 1280×735）
   -------------------------------------------------------------------------- */

.p-hero {
  position: relative;
  height: 73.5rem;
  margin-top: -10rem; /* ヘッダー分。Figma では KV が y=0 から 735px（.p-kv と同じ手） */
  background: var(--c-bg-1);
  overflow: hidden;
}

/* 写真にコーポレートカラー 20% を焼き込み合成で重ねる（Figma の指定値）。
   画像の URL は HTML 側からカスタムプロパティで渡す。
   SP は切り抜きが違う別画像を使うため（PC用は横長に切ってあり、
   縦長の枠に cover で入れると寄りすぎる） */
.p-hero__photo {
  position: absolute;
  z-index: 0; /* 斜線（z-index:1）と文字（z-index:2）より下に置く */
  inset: 0;
  background: center / cover no-repeat;
  background-image: var(--hero-photo);
}

.p-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 138, 69, 0.2);
  mix-blend-mode: color-burn;
}

/* 左上と右下に入るオレンジの斜線（Figma: 550×5px を -30度） */
.p-hero::before,
.p-hero::after {
  content: "";
  position: absolute;
  z-index: 1; /* 写真の上・文字の下 */
  width: 55rem;
  height: 0.5rem;
  background: var(--c-corporate);
  rotate: -30deg;
}

/* Figma は 478.814×279.33 の枠の中央に置いた 550×5 を回転させている。
   その中心座標から逆算した位置（左上: 229.4,129.7 / 右下: 右から206.6・下から119.3）*/
.p-hero::before {
  left: -4.56rem;
  top: 12.72rem;
}

.p-hero::after {
  right: -6.84rem;
  bottom: 11.68rem;
}

/* Figma: 80px Bold / 字送り 8px / 行間 20px の gap。影は 4px 4px 10px */
.p-hero__title {
  position: absolute;
  z-index: 2;
  right: 16.4rem;
  top: 27.8rem;
  color: var(--c-white);
  font-size: 8rem;
  font-weight: 700;
  line-height: 1.325; /* Figma: 行の高さ(約96px)＋行間20px */
  letter-spacing: 0.1em;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

/* 2行目だけ中央揃え（Figma: text-center） */
.p-hero__title span {
  display: block;
  text-align: center;
}

/* 背景に敷く英字。Big Shoulders Inline Text は Google Fonts */
.p-hero__en {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 58.8rem;
  color: var(--c-white);
  font-family: "Big Shoulders Inline Text", "Montserrat", var(--font-base);
  font-size: 10rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: normal;
  opacity: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* 右下の丸い採用情報ボタン（Figma: 170px 円 / 白5px枠 / 影 4px 4px） */
/* 画面に固定して追従させる。z-index はヘッダー(10)より下にして、
   SP のドロワーを開いたときに前へ出ないようにする。
   フッターに差しかかったら js/sp-menu.js が .is-hidden を付けて隠す */
.p-hero__recruit {
  position: fixed;
  z-index: 9;
  right: 2rem; /* Figma: 1280px 幅で左1090＋幅170＝右端から20px。画面幅が変わっても右基準 */
  top: 54.5rem; /* KV 内にいたときと同じ見え方。fixed なので以後この高さのまま追従する */
  transition: opacity 0.3s, visibility 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 17rem;
  height: 17rem;
  padding-top: 3.4rem;
  border: 0.5rem solid var(--c-white);
  border-radius: 50%;
  background: var(--c-navy);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
  color: var(--c-white);
  text-align: center;
}

/* フッターに差しかかったら隠す（リンクの重なりを避ける） */
.p-hero__recruit.is-hidden {
  visibility: hidden;
  opacity: 0;
}

.p-hero__recruit-en {
  font-family: "Montserrat", var(--font-base);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.p-hero__recruit-ja {
  margin-top: 0.4rem;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.p-hero__recruit-icon {
  width: 4.3rem;
  height: 4rem;
  background: url("/img/common/icon-person.svg") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   リード文 ＋ バナー2枚
   -------------------------------------------------------------------------- */

/* Figma: 80(上余白) + 170(リード) + 64(gap) + 300(バナー) = 614。下余白は無い */
.p-intro {
  position: relative;
  background: var(--c-white);
}

/* オレンジの帯。Figma では 420px の帯にバナーが 340px 食い込む */
.p-intro__band {
  position: absolute;
  inset: 0 0 auto 0;
  height: 42rem;
  background: var(--c-corporate);
}

.p-intro__inner {
  position: relative;
  width: min(var(--w-content), 100% - var(--pad-side) * 2);
  margin-inline: auto;
  padding-top: 8rem; /* Figma: 帯の上端から 80px */
}

/* リード文。前後にオレンジの引用符（Figma: 56×170 の SVG） */
.p-intro__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  color: var(--c-white);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
}

.p-intro__lead::before,
.p-intro__lead::after {
  content: "";
  flex: 0 0 auto;
  width: 5.6rem;
  height: 17rem;
}

.p-intro__lead::before {
  background: url("/img/top/quote-l.svg") center / contain no-repeat;
}

.p-intro__lead::after {
  background: url("/img/top/quote-r.svg") center / contain no-repeat;
}

.p-intro__banners {
  display: flex;
  margin-top: 6.4rem;
}

/* Figma: 500×300 の写真にコーポレートカラー 50% を乗算 */
/* Figma の幅は 500px。ただし固定にすると、親（最大1000px）が画面幅に合わせて
   縮んだときに 2枚で 1000px を保とうとして右端がはみ出す。
   上限を 500px に保ったまま縮めるようにする（1040px 以上では従来どおり 500px） */
.p-banner {
  position: relative;
  flex: 1 1 50rem;
  min-width: 0;
  max-width: 50rem;
  height: 30rem;
  background: center / cover no-repeat;
  color: var(--c-white);
}

.p-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 138, 69, 0.5);
  mix-blend-mode: multiply;
}

.p-banner__label {
  position: absolute;
  left: 3rem;
  top: 19.6rem;
  display: flex;
  flex-direction: column;
  text-shadow: var(--shadow-text);
}

/* Our Works は上端の位置だけ 9px 下（Figma: mt 205 / About Us は 196）。
   Figma の items-center は和文が min-w-full で全幅になるため実質は左揃え */
.p-banner--center .p-banner__label {
  top: 20.5rem;
}

.p-banner__en {
  font-family: "Montserrat", var(--font-base);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.p-banner__ja {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
}

/* Figma は左432・上232（500×300 のバナー基準）。右下からの指定に直しても
   同じ位置になり、バナーが縮んだときに追従する */
.p-banner .c-arrow {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
}

/* --------------------------------------------------------------------------
   セクション見出し（英字 60px ＋ 和文 20px）。業務紹介・強み・お知らせで共用
   -------------------------------------------------------------------------- */

.p-sectitle {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  color: var(--c-navy);
}

.p-sectitle__en {
  font-family: "Montserrat", var(--font-base);
  font-size: 6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.p-sectitle__ja {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   業務紹介（Our Services）
   -------------------------------------------------------------------------- */

/* 下余白は背景写真の下端に合わせる。Figma のセクション高 816px は
   写真（上端 253px + 高さ 563px）が決めており、タイル側（554px）では届かない */
.p-services {
  position: relative;
  z-index: 0;
  padding-top: 12rem;
  padding-bottom: 14.2rem;
  background: var(--c-white);
}

/* 見出しの下に敷く背景写真。上端 92px を白に溶かす（Figma は同じ形の PNG） */
/* 不透明度 50% と上端 92px の白フェードを1つの背景で重ねる。
   opacity で薄めるとフェードまで一緒に薄まり、上端の境目が出る */
.p-services__photo {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 25.3rem; /* Figma: セクション上端 120px ＋ 見出しの下 133px */
  height: 56.3rem;
  background:
    linear-gradient(var(--c-white), rgba(255, 255, 255, 0) 9.2rem),
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    var(--services-photo) center / cover no-repeat;
}

.p-services__inner {
  width: min(var(--w-content), 100% - var(--pad-side) * 2);
  margin-inline: auto;
}

/* Figma: 426×426 の 2×2。右寄せでタイルは 197×200 */
.p-services__tiles {
  display: grid;
  grid-template-columns: repeat(2, 19.7rem);
  gap: 3.2rem;
  justify-content: end;
  margin-top: 2.4rem;
  list-style: none;
  padding: 0;
}

.p-services__tiles a {
  position: relative;
  display: grid;
  place-items: center;
  height: 20rem;
  padding: 0 1.6rem;
  border-radius: 0.8rem;
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 2rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
}

.p-services__tiles .c-arrow {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}

/* --------------------------------------------------------------------------
   私たちの強み（Our Strengths）
   -------------------------------------------------------------------------- */

.p-strengths {
  position: relative;
  z-index: 0;
  padding: 10rem 14rem 12rem;
  background: var(--c-bg-3);
}

/* 左端に通すオレンジの帯（Figma: 幅80px・セクション全高） */
.p-strengths::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 8rem;
  background: var(--c-corporate);
}

/* 下端の白い斜め帯。フッターまでのつなぎ */
.p-strengths::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0 0;
  height: var(--diagonal);
  background: var(--c-white);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.p-strength {
  margin-top: 6.4rem;
}

.p-strength + .p-strength {
  margin-top: 4rem;
}

/* 丸番号は見出しに 20px 食い込む（Figma: mr -20px） */
.p-strength__title {
  display: flex;
  align-items: center;
  color: var(--c-orange-emphasis);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.p-strength__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 12rem;
  height: 12rem;
  margin-right: -2rem;
  background: url("/img/top/num-circle.svg") center / contain no-repeat;
  font-size: 4rem;
  letter-spacing: 0.1em;
}

.p-strength__desc {
  margin-top: 1rem;
  padding-left: 10rem;
  color: var(--c-navy);
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

/* 有資格者の一覧（白カード・2カラム） */
/* 中身なりの幅にするが、親を超えない。max-content のままだと資格リストの
   2段組がそのまま幅になり、画面が狭いときに右端が切れる */
.p-strength__card {
  width: fit-content;
  max-width: 100%;
  margin: 4rem auto 0;
  padding: 4rem;
  border-radius: 1rem;
  background: var(--c-white);
}

/* Figma は2つのリストに分けているが、CMS では1行1項目の入力にするため
   段組は CSS に任せる（会社案内の「2段組の一覧」と同じ手法） */
/* 列数を決め打ちにすると、画面が狭いときに1列が項目より細くなり、
   資格名（white-space: nowrap）が列からあふれる。
   最小の列幅を決めておくと、入らない幅では自動で1段に落ちる。
   34rem は現状いちばん長い項目の実測幅（約339px）。
   これより長い資格名が増えたら、この値も見直すこと */
.p-strength__card ul {
  margin: 0;
  padding-left: 3rem;
  columns: 34rem 2;
  column-gap: 7rem;
}

.p-strength__card li {
  break-inside: avoid;
}

.p-strength__card li {
  color: var(--c-navy);
  font-size: 2rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 登録番号の3ブロック */
.p-strength__licenses {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin-top: 4rem;
}

.p-license {
  padding: 0 8rem;
}

.p-license__badge {
  display: inline-block;
  padding: 0.6rem 1.6rem;
  border-radius: 0.4rem;
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.p-license__body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 1.6rem 0 0;
  padding-bottom: 1.6rem;
  border-bottom: 1px dashed var(--c-navy);
}

.p-license__body > div {
  display: flex;
  gap: 1.6rem;
}

.p-license__body dt,
.p-license__body dd {
  margin: 0;
  color: var(--c-navy);
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.p-license__body dt {
  flex: 0 0 12rem;
}

/* --------------------------------------------------------------------------
   お知らせ（News）
   -------------------------------------------------------------------------- */

.p-topnews {
  position: relative;
  /* 写真は下揃えの絶対配置なので、お知らせの件数が少ないとセクションが写真より
     低くなり、写真が見出しまでせり上がって「News」に重なる。
     Figma（お知らせ 592.55px）と同じ最低高さを確保して、件数に左右されなくする。
     内訳は 見出し104 ＋ 見出し下の余白139 ＋ 写真350 = 593 */
  min-height: 59.3rem;
  padding: 0 14rem 6rem;
  background: var(--c-white);
}

/* 左下の写真。右側だけ大きく角丸にする（Figma: 521×350 / 角丸200px）。
   一覧は右寄せの 500px ＋ 右余白 140px なので、その左端（画面幅 − 640px）を
   超えないところで止める。1161px 以上では Figma どおりの 521px になる */
.p-topnews__photo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(52.1rem, calc(100% - 64rem));
  height: 35rem;
  border-radius: 0 20rem 20rem 0;
  background: center / cover no-repeat;
}

/* 一覧とボタンは右寄せ（Figma: items-end / 幅500px）。
   position を持たせているのは、写真（絶対配置）より手前に描かせるため。
   指定が無いと、万一重なったときに写真が本文を覆って読めなくなる */
/* Figma では見出しと一覧が同じ 1000px のフレーム（x=140・幅1000）に入っていて、
   写真だけがその外へ裁ち落としで出ている。カラムの上限を入れていなかったため、
   画面が 1280px より広いと見出しと一覧が左右へ流れて間延びしていた。
   1280px 以下の見え方は従来どおり（padding の内側いっぱい） */
.p-topnews .p-sectitle,
.p-topnews__body {
  width: min(var(--w-content), 100%);
  margin-inline: auto;
}

.p-topnews__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4rem;
}

.p-topnews__list {
  width: 50rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-topnews__list a {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.6rem;
  border-bottom: 1px dashed var(--c-navy);
  color: var(--c-navy);
}

.p-topnews__meta {
  display: flex;
  flex-wrap: wrap; /* カテゴリーが複数付いたら折り返す。詰め込むとバッジ内で改行されて潰れる */
  align-items: center;
  gap: 1.6rem;
}

.p-topnews__date {
  font-family: "Montserrat", var(--font-base);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.p-topnews__title {
  font-size: var(--fs-caption);
  line-height: 1.6;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   共通部品への追加（トップで初出）
   -------------------------------------------------------------------------- */

/* バナー右下の大きい矢印（Figma: 56px 角。既定は 29.55px） */
.c-arrow--lg {
  width: 5.6rem;
  height: 5.6rem;
}

.c-arrow--lg::before {
  width: 3rem;
  height: 3rem;
}

/* 矢印が文字の右に付く紺ボタン（Figma btnA。既定の c-btn--navy は矢印が左） */
.c-btn--tail {
  flex-direction: row;
}

/* ==========================================================================
   お問い合わせ案内（ログイン／フロー）
   ========================================================================== */

/* --------------------------------------------------------------------------
   ログイン
   -------------------------------------------------------------------------- */

.p-login {
  padding-top: 8rem; /* Figma: 斜め帯の下端から */
}

/* Figma: 800px 幅の白カード。背景も白なので枠は無く、余白だけで区切る */
.p-login__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  width: min(80rem, 100% - var(--pad-side) * 2);
  margin-inline: auto;
  padding: 4rem;
  border-radius: 1rem;
  background: var(--c-white);
}

.p-login__title {
  color: var(--c-orange-text);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

/* ログイン失敗時のメッセージ（PHPが出力する） */
.p-login__error {
  width: 100%;
  padding: 1.2rem 1.6rem;
  border-radius: 0.4rem;
  background: var(--c-bg-3);
  color: var(--c-orange-emphasis);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.p-login__form {
  width: 100%;
  padding: 1.6rem;
}

/* ログインボタンはカードの外（Figma: 別セクション）。form 属性で紐付けている */
.p-login__submit {
  display: flex;
  justify-content: center;
  padding: 4rem 0 2.4rem;
}

/* 入力欄（Figma: ラベル Bold 14px / 入力欄 668×50 背景1 角丸4px） */
.p-field {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-field__label {
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
}

.p-field__input {
  width: 100%;
  height: 5rem;
  padding: 0 1.6rem;
  /* 枠が無いと背景との差が弱く、入力欄だと気づきにくい（Figma 162:5430 で追加）。
     セレクトとテキストエリアも同じクラスなので、まとめて枠が付く */
  border: 1px solid var(--c-placeholder);
  border-radius: 0.4rem;
  background: var(--c-bg-1);
  color: var(--c-navy);
  font-family: inherit;
  font-size: var(--fs-body);
}

/* Figma のコード書き出しは Bold と出るが、実際の描画は太くない。見た目に合わせる */
.p-field__input::placeholder {
  color: var(--c-placeholder);
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* 指摘71。エラーが出ている入力欄は枠も色を変える。
   文字色（.p-field__error）と同じ色にして、案内文と対応が取れるようにする。
   エラーの <p> は入力欄の次の兄弟か、年月日などのまとまりの次に来る。
   郵便番号検索の JS がメッセージ用の空の <p> を常に置いているので、
   hidden と中身が空のものは除く */
.p-field__input:has(+ .p-field__error:not([hidden]):not(:empty)),
:is(.p-form__zip, .p-form__date, .p-form__range):has(+ .p-field__error:not([hidden]):not(:empty)) .p-field__input {
  border-color: var(--c-orange-emphasis);
}

/* 職歴の在籍期間は、入社年月と退職年月の両方にまたがるエラー。
   エラーの <p> は .p-form__group の直下にあり、プルダウンは
   .p-field > .p-form__date の中なので上のルールが届かない。
   その社の年月のプルダウンだけを色付ける（勤め先名は別のエラーを持つ） */
.p-form__group:has(> .p-field__error:not([hidden]):not(:empty)) .p-form__date .p-field__input {
  border-color: var(--c-orange-emphasis);
}

.p-field__input:focus-visible {
  outline: 0.2rem solid var(--c-corporate);
  outline-offset: 0.2rem;
}

/* --------------------------------------------------------------------------
   フロー（STEP01 → STEP02）
   -------------------------------------------------------------------------- */

/* Figma はステップ群に mb-[-120px] を掛け、下端の斜め帯を引き上げて
   最後のカードの背後に潜り込ませている（帯は z-1、カードは z-2）。
   .p-body::after は z-index:-1 なので、負のマージンだけで同じ重なりになる */
.p-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(80rem, 100% - var(--pad-side) * 2);
  margin: 6.4rem auto -12rem;
}

/* Figma: 白カード / コーポレート50%（#FFC5A2）の1px枠 / 角丸10px */
.p-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  padding: 2.4rem 4rem;
  border: 1px solid var(--c-corporate-50);
  border-radius: 1rem;
  background: var(--c-white);
}

/* カードの間を三角でつなぐ（Figma: 780×46 の下向き三角） */
.p-step + .p-step {
  margin-top: 4.6rem;
}

/* top / left を省くと「静的位置」＝カードの padding の内側が基準になり、
   三角がカードに潜り込む。カードの上辺を基準に、中央へ明示的に置く */
.p-step + .p-step::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -100%;
  width: 78rem;
  height: 4.6rem;
  background: var(--c-corporate-50);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.p-step {
  position: relative;
}

.p-step__head {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  width: 100%;
  color: var(--c-orange-text);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

/* 100px のオレンジの円に Step / 01 を重ねる */
.p-step__num {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: var(--c-corporate);
  color: var(--c-white);
  font-family: "Montserrat", var(--font-base);
  line-height: 1.2;
  text-align: center;
}

.p-step__num span {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.p-step__num b {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.p-step__desc {
  width: 100%;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* 記載例のダウンロード（Figma: 背景1 / 角丸8px / padding 24px） */
.p-step__note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  margin-top: 2.4rem;
  padding: 2.4rem;
  border-radius: 0.8rem;
  background: var(--c-bg-1);
}

.p-step__note p {
  width: 100%;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* --------------------------------------------------------------------------
   ボタンの追加バリエーション
   -------------------------------------------------------------------------- */

/* Figma: 本文が左寄せのステップ（境界立会の STEP02/03/05）。
   お問い合わせ案内は全て中央寄せだったが、こちらは items-start のカードがある */
.p-step--left {
  align-items: flex-start;
}

/* Figma: 境界立会 STEP01 のボタンは padding 80px で幅 383px */
.c-btn--wide {
  padding-left: 8rem;
  padding-right: 8rem;
}

/* ファイルや宛先が未登録のボタン。href を付けていないので押しても動かない。
   見た目は変えない（確認用にレイアウトを保つため）*/
.c-btn[aria-disabled="true"] {
  cursor: default;
}

/* ダウンロードボタン（Figma btnA: 紺地 / 文字 Regular 20px / アイコンはオレンジ地に下向き矢印） */
.c-btn--dl {
  font-weight: 400;
  line-height: 1.4;
}

/* ダウンロードの字形は矢印を回したものではなく、Figma では「矢印＋トレイ」。
   パンフレットの .c-arrow--download と同じ字形なので、指定をまとめる */

/* メール送信（Figma: 白地に紙飛行機。矢印と同じ 25px 角） */
.c-btn--mail .c-arrow {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--c-white);
}

.c-arrow--mail::before {
  width: 1.8rem;
  height: 1.8rem;
  rotate: none;
  background: var(--c-corporate);
  /* Figma の紙飛行機は塗りではなく輪郭。18.0714×17.122 のパスをそのまま使う */
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.0714 17.122"><path d="M1.13366 0.00288916C1.34365 -0.0115955 1.55398 0.02857 1.74443 0.119175L1.74481 0.118795L1.75402 0.122975L1.75364 0.123355L17.3739 7.46724L17.3743 7.46762C17.5835 7.56612 17.7599 7.72135 17.883 7.9149C18.0062 8.10849 18.0714 8.33284 18.0714 8.56131C18.0714 8.78974 18.0061 9.01379 17.883 9.20734C17.7599 9.40094 17.5835 9.55649 17.3743 9.65501H17.3739L1.74481 17.0038L1.74443 17.0034C1.52599 17.1071 1.28115 17.1442 1.0412 17.1091C0.798615 17.0735 0.572884 16.9661 0.393215 16.8017C0.21359 16.6372 0.0883213 16.4233 0.0329676 16.1879C-0.0223696 15.9526 -0.00554294 15.7061 0.0816911 15.4803L2.54664 8.89421L2.57273 8.81288C2.62546 8.62084 2.61685 8.41632 2.54664 8.22841L0.0816911 1.64267L0.0813075 1.64305C-0.00640239 1.417 -0.0235539 1.17009 0.0318167 0.934317L0.0559866 0.846913C0.119594 0.645688 0.235264 0.463468 0.392831 0.319446L0.462655 0.260542C0.629952 0.129273 0.82967 0.0431597 1.04235 0.0123897L1.13366 0.00288916ZM4.02024 9.43498H4.01985L1.8507 15.2303L14.3807 9.33959H4.05323C4.04275 9.3715 4.03205 9.4034 4.02024 9.43498ZM4.01985 7.68727H4.02024C4.03209 7.71894 4.04271 7.75102 4.05323 7.78303H14.3807L1.84993 1.89121L4.01985 7.68727Z"/></svg>') center / contain no-repeat;
}

/* フローの大見出しは「フロー（JR東海社員様用）」で後半だけ小さい */
.p-heading__text span {
  font-size: 2rem;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   入力フォーム（境界立会・採用エントリー共通）
   ========================================================================== */

/* リード文（Figma: 大見出しの下線から 64px、左右は本文カラムに合わせる） */
.p-form__lead {
  width: min(var(--w-content), 100% - var(--pad-side) * 2);
  margin: 6.4rem auto 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.p-form__note {
  margin-top: 1.6rem;
  font-size: var(--fs-body);
  color: var(--c-orange-emphasis);
  font-weight: 700;
  line-height: 1.6;
}

/* 項目の中に置く注記（※応募項目で「新卒採用」を選んだ方は…）。
   Figma のテキストスタイル「キャプション」= Regular 14 / 1.4 / 0.06em。
   フォームの先頭に出る「※必須項目は…」（.p-form__note）は Bold 16 で別物 */
.p-form__note--sm {
  margin-top: 0;
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

/* 項目行の集合。Figma: 1000px 幅、行間の区切りは各行の上罫線 */
.p-form {
  width: min(var(--w-content), 100% - var(--pad-side) * 2);
  margin: 6.4rem auto 0;
}

/* 行。Figma: 上罫線 #d1d5db・上下 8px の余白。
   最終行の下にも罫線が要る。:last-of-type は「最後の div」を指すため、
   後ろにハニーポットと送信ボタンの div がある今の骨格では一致しない。
   「自分より後ろに行が無い行」で取る */
.p-form__row {
  display: flex;
  align-items: flex-start;
  padding: 0.8rem 0;
  border-top: 1px solid #d1d5db;
}

.p-form__row:not(:has(~ .p-form__row)) {
  border-bottom: 1px solid #d1d5db;
}

/* 項目名の列（Figma: 300px 固定。項目名は右寄せ、必須／任意バッジは右端） */
.p-form__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
  width: 30rem;
  padding: 1.6rem;
  background: var(--c-white);
}

.p-form__label {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--ls-body);
}

/* 入力欄の列。残り全部（1000 - 300 - 左右 padding = 668px となり Figma と一致） */
.p-form__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 1.6rem;
  background: var(--c-white);
}

/* 必須／任意バッジ（Figma: 角丸 20px・左右 16px・上下 4px）
   お知らせのカテゴリーバッジ .c-badge とは別物。名前がぶつかると
   トップページとお知らせ一覧のバッジまで色が変わってしまうので、
   フォーム側は p- 接頭辞で分ける */
.p-form__badge {
  flex: 0 0 auto;
  padding: 0.4rem 1.6rem;
  border-radius: 2rem;
  color: var(--c-white);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.p-form__badge--required { background: var(--c-orange-emphasis); }
/* 「任意」と「選択必須」は Figma でどちらも紺 */
.p-form__badge--optional,
.p-form__badge--conditional { background: var(--c-navy); }

/* 1つの項目の中のグループ（●JR用地／①勤め先名 など）。
   Figma: グループ同士は 40px 空ける（.p-form__body の gap 16px との差を足す） */
.p-form__group {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.p-form__group + .p-form__group {
  margin-top: 2.4rem;
}

/* 職歴の注意書きと1社目のあいだ。body の gap 16px だけだと詰まる。
   Figma は注意書きの下端から 40px（社と社のあいだと同じ）*/
.p-form__note--sm + .p-form__group {
  margin-top: 2.4rem;
}

/* 境界立会フォームの「所在地」だけはグループ間をグレーの罫線で区切る。
   Figma: 最後のグループの下には罫線を引かない */
.p-form__body--ruled .p-form__group:not(:last-child) {
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--c-gray-text);
}

.p-form__body--ruled .p-form__group + .p-form__group {
  margin-top: 0;
}

/* Figma では「●JR用地」と黒丸込みの文字列だが、読み上げに乗せたくないので CSS で描く */
.p-form__group-title {
  padding-bottom: 1.6rem;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1;
}

.p-form__group-title::before {
  content: "●";
}

/* 「駅間」の 2 つ並び。Figma: 316px ずつで間に「〜」が入る（668 - 36 の半分） */
.p-form__range {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-form__range .p-field__input {
  width: calc((100% - 3.6rem) / 2);
}

.p-form__range-sep {
  font-size: var(--fs-caption);
  font-weight: 700;
}

/* チェックボックスの並び（Figma: 横並び・間隔 40px、折り返しあり） */
.p-form__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 4rem;
}

.p-form__checks-other {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.c-check {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* Figma: 20px 角・背景1・グレーの 1px 枠・角丸 4px。
   チェック時の見た目はデザインに無いので、枠色と同じ紺のレ点を描く */
.c-check__box {
  appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 2rem;
  height: 2rem;
  margin: 0;
  border: 1px solid var(--c-gray-text);
  border-radius: 0.4rem;
  background: var(--c-bg-1);
  cursor: pointer;
}

.c-check__box:checked::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 0.2rem;
  width: 0.5rem;
  height: 1rem;
  border: solid var(--c-navy);
  border-width: 0 0.2rem 0.2rem 0;
  rotate: 45deg;
}

.c-check__box:focus-visible {
  outline: 0.2rem solid var(--c-corporate);
  outline-offset: 0.2rem;
}

/* ラジオボタン。チェックボックスとの違いは丸いことと、選択時が塗りつぶしの点であること */
.c-check__radio {
  appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 2rem;
  height: 2rem;
  margin: 0;
  border: 1px solid var(--c-gray-text);
  border-radius: 50%;
  background: var(--c-bg-1);
  cursor: pointer;
}

.c-check__radio:checked::before {
  content: "";
  position: absolute;
  inset: 0.4rem;
  border-radius: 50%;
  background: var(--c-navy);
}

.c-check__radio:focus-visible {
  outline: 0.2rem solid var(--c-corporate);
  outline-offset: 0.2rem;
}

/* 年・月・日のセレクトを並べる行。
   Figma では「年」「月」「日」はセレクトの外の文字ではなく、未選択のときに
   セレクトの中へ出るプレースホルダー。外に出るのは単位の「歳」だけ。
   間隔はセレクト同士 16px、年齢の入力欄の前 40px、「歳」の前 10px */
.p-form__date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-caption);
  font-weight: 700;
}

.p-form__date .p-field__select + .p-field__select {
  margin-left: 0.6rem;
}

.p-field__input--age {
  width: 10rem;
  margin-left: 3rem;
}

/* 補足文（※お申し込みから1ヶ月以上先の日付でお願いします） */
.p-form__hint {
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.p-form__hint strong {
  color: var(--c-orange-emphasis);
  font-weight: 700;
}

/* 「依頼者情報」のような区切りの見出し。丸＋オレンジ 28px は .p-work__title と共通 */
.p-form__section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 4rem 0;
  color: var(--c-orange-text);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.p-form__section::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--c-corporate);
}

/* 郵便番号（Figma: 入力欄 160px ＋ 検索ボタン） */
.p-form__zip {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.p-field__input--zip {
  width: 16rem;
}

.p-field__input--area {
  height: 18rem;
  padding: 1.6rem;
  line-height: var(--lh-body);
  resize: vertical;
}

/* Figma: 幅は文字なり。矢印は自前で描く（ブラウザ既定の矢印は形が揃わない）。
   形は Figma の weui:arrow-filled（右向き 20x40）をそのまま 90 度回して下向きにした。
   表示サイズも Figma と同じ 24x12 */
.p-field__select {
  width: auto;
  align-self: flex-start;
  padding-right: 4.8rem;
  appearance: none;
  font-size: var(--fs-caption);
  font-weight: 700;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20"><path transform="translate(40,0) rotate(90)" d="M16.9283 21.185 7.5 30.6133 5.14333 28.2567 13.3933 20.0067 5.14333 11.7567 7.5 9.4l9.4283 9.4283c.3125.3126.488.7364.488 1.1784 0 .4419-.1755.8658-.488 1.1783Z" fill="%231a2b4c"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
  background-size: 2.4rem 1.2rem;
  cursor: pointer;
}

/* 年月日のセレクト。Figma: 月・日は 86px、年だけ 134px。
   文字は右寄せにして、その右に三角が来る並びにする */
.p-field__select--narrow {
  width: 8.6rem;
  padding-right: 4.4rem;
  text-align: right;
}

.p-form__date .p-field__select--narrow:first-of-type {
  width: 13.4rem;
}

/* 未選択（value="" が選ばれている）間はプレースホルダーの見た目にする */
.p-field__select:has(option[value=""]:checked) {
  color: var(--c-placeholder);
  font-weight: 400;
}

/* 入力エラー。項目のすぐ下に赤字で出す */
.p-field__error {
  color: var(--c-orange-emphasis);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

/* フォーム全体に対するお知らせ（エラーの総括・送信失敗など） */
.p-form__alert {
  margin-top: 1.6rem;
  padding: 1.2rem 1.6rem;
  border-radius: 0.4rem;
  background: var(--c-bg-3);
  color: var(--c-orange-emphasis);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.6;
}

/* ハニーポット（bot 検出用の隠し項目）。読み上げからも外す */
.u-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   確認画面・完了画面
   -------------------------------------------------------------------------- */

/* 確認画面で入力値を表示するところ。入力欄と同じ位置に同じ字送りで並べる */
.p-form__value {
  padding: 0 1.6rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  word-break: break-word;
}

.p-form__empty {
  color: var(--c-placeholder);
  font-size: var(--fs-caption);
}

/* reCAPTCHA v2 のチェックボックス。確認画面のボタンの上に中央で置く */
.p-form__recaptcha {
  display: flex;
  justify-content: center;
  padding-top: 4.8rem;
}

/* 「修正する」と「送信する」を横並びに。Figma のボタン幅（325px）を踏襲する */
.p-form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.4rem;
  padding: 8rem 0 2.4rem;
}

.p-form__recaptcha + .p-form__actions {
  padding-top: 3.2rem;
}

/* 完了画面。中央に文言とトップへ戻るボタンだけを置く */
.p-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  width: min(var(--w-content), 100% - var(--pad-side) * 2);
  margin: 6.4rem auto 0;
  padding: 8rem 4rem;
  border-radius: 1rem;
  background: var(--c-white);
  text-align: center;
}

.p-done__title {
  color: var(--c-orange-text);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.p-done__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.p-done .c-btn {
  margin-top: 1.6rem;
}

/* 郵便番号検索などの小さめのボタン（Figma: グレー地・白字・下線・角丸 4px） */
.c-btn-sub {
  padding: 1.2rem 1.6rem;
  border: 0;
  border-radius: 0.4rem;
  background: var(--c-gray-text);
  color: var(--c-white);
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-decoration: underline;
  cursor: pointer;
}

.p-form__consent {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 1.6rem;
}

.p-form__policy {
  color: var(--c-orange-emphasis);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
}

.p-form__submit {
  display: flex;
  justify-content: center;
  padding: 8rem 0 2.4rem;
}

/* Figma: 送信系のボタンだけ幅 325px 固定。文字は折り返さない */
.c-btn--form {
  width: 32.5rem;
  white-space: nowrap;
}

/* ==========================================================================
   スマートフォン
   ※ Figma の SP ページを元にした本実装は別途。ここでは崩れ防止の最小対応
   ========================================================================== */
/* お知らせ一覧の「もっと見る」。PC はページ番号なので出さない */
.c-btn-more {
  display: none;
}

/* SP のハンバーガーボタン。PC では出さない（表示は @media 側で切り替える） */
.l-header__toggle {
  display: none;
}

/* PC / SP で文言が違うところの出し分け。
   グリッドやフレックスの中に置くと項目が blockify されて改行されるため、
   文言の一部ではなく**まるごと**入れ替える */
.u-pc-only {
  display: inline;
}

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

@media (max-width: 1399px) {
  /* ヘッダーは文字量の都合で早めにハンバーガーへ切り替える。
     1079px → 1399px（先方指示 / 2026-09-29）。ロゴの横に社名テキストが
     入る予定で、グローバルメニューと干渉するため前倒しにした。
     .p-kv の食い込みはヘッダー高さに連動するためここに含める */

  /* ------------------------------------------------------------------
     ヘッダー。高さ・ロゴ・社名・斜めの寸法は幅に応じて連続的に変わるので
     （共通部分の --hdr-* を参照）、ここでは開閉ボタンまわりだけを扱う
     ------------------------------------------------------------------ */

  /* ページ内リンクの着地点は、その幅でのヘッダー高さに合わせる */
  [id] {
    scroll-margin-top: var(--hdr-h, 6.4rem);
  }

  .l-header__inner {
    padding-right: 1.2rem;
  }

  /* 開閉ボタン。3本線は1つの要素と疑似要素2つで描く */
  .l-header__toggle {
    display: grid;
    place-items: center;
    /* Figma: 390px で 40px 角、1399px で 60px 角 */
    width: var(--hdr-toggle);
    height: var(--hdr-toggle);
    padding: 0;
    border: 1px solid var(--c-white);
    background: none;
    cursor: pointer;
  }

  /* Figma の SVG は 26.67×20 の枠に太さ 3.33 の線が3本。
     表示は 28×21 なので、線は 28×3.5px・中心から上下 8.75px */
  .l-header__toggle-bar {
    position: relative;
    display: block;
    width: calc(var(--hdr-toggle) * 0.7);
    height: calc(var(--hdr-toggle) * 0.0875);
    background: var(--c-white);
  }

  .l-header__toggle-bar::before,
  .l-header__toggle-bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--c-white);
    transition: top 0.2s, rotate 0.2s;
  }

  .l-header__toggle-bar::before { top: -0.875rem; }
  .l-header__toggle-bar::after  { top: 0.875rem; }

  /* 開いているときは × になる（Figma SP-menu） */
  .is-nav-open .l-header__toggle-bar { background: transparent; }
  .is-nav-open .l-header__toggle-bar::before { top: 0; rotate: 45deg; }
  .is-nav-open .l-header__toggle-bar::after  { top: 0; rotate: -45deg; }

  /* ------------------------------------------------------------------
     ドロワー（Figma SP-menu）。ヘッダーの下に全画面で開く
     ------------------------------------------------------------------ */
  .l-header__right {
    position: fixed;
    inset: 6.4rem 0 0 0;
    z-index: 9;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    padding: 2.4rem 2rem;  /* --pad-side は 767px 側に残すため実値で持つ */
    overflow-y: auto;
    background: rgba(26, 43, 76, 0.9);
  }

  .is-nav-open .l-header__right {
    display: flex;
  }

  .l-header__nav {
    width: 100%;
  }

  .l-header__menu {
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
    font-size: 2rem;
    line-height: 1.6;
  }

  .l-header__menu > li {
    width: 100%;
    text-align: center;
  }

  /* 業務紹介の子メニューは常に開いている（Figma: アコーディオンではない） */
  .l-header__submenu {
    position: static;
    translate: none;
    display: grid;
    justify-items: center; /* グリッド項目自体を中央へ。text-align だけでは効かない */
    gap: 1.6rem;
    margin-top: 1.6rem;
    padding: 0;
    background: none;
    color: var(--c-corporate-50);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-align: center; /* PC は吹き出し内で左寄せ。SP は親に合わせて中央 */
    visibility: visible;
    opacity: 1;
  }

  /* 吹き出しの三角と、ホバーを保つための透明な帯は SP では不要 */
  .l-header__submenu::before,
  .l-header__submenu::after {
    content: none;
  }

  .l-header__pill {
    padding: 1.6rem 2.4rem;
    border-radius: 3rem;
    font-size: 1.8rem;
    letter-spacing: 0.06em;
  }

  .l-header__contact {
    width: 100%;
    padding: 2.4rem 1rem;
  }

  .l-header__contact-label {
    font-size: 1.6rem;
  }

  .l-header__contact-list {
    gap: 1rem;
    margin-top: 1.6rem;
  }

  /* PC は1つめだけ 154px 固定。SP は2つで等分する */
  .l-header__contact-list li {
    flex: 1 1 0;
  }

  .l-header__contact-list li:first-child a {
    width: auto;
  }

  .l-header__contact-list a {
    padding: 4rem 1.6rem;
    font-size: 1.8rem;
  }

  /* KV はヘッダーの高さぶん上に食い込む。PC の -10rem を SP の 6.4rem に合わせる */
  .p-kv {
    margin-top: -6.4rem;
  }
}

/* --------------------------------------------------------------------------
   タブレット（iPad 11インチ縦 = 820〜834px）
   固定幅どうしの横並びが入らなくなり、右側が画面外へ切れる帯。
   スマホ用の縦積みを、壊れる幅から前倒しで効かせる。
   767px 以下の指定はこの下に書かれているので、スマホではそちらが勝つ
   -------------------------------------------------------------------------- */

@media (max-width: 1056px) {
  /* 所在地。住所 33.2rem ＋ 地図 36rem ＋ gap 1rem = 70.2rem が入らず地図が切れる */
  .p-office {
    flex-direction: column;
  }

  .p-office__text,
  .p-office__map {
    flex: 0 0 auto;
    width: 100%;
  }

  /* 地図の画像は原寸 720px。Figma の 36rem より大きくはしない */
  .p-office__map {
    max-width: 36rem;
  }

  /* 取締役・有資格者の2段組。1列が狭くなり、氏名が途中で改行される */
  .p-deflist__body ul {
    columns: 1;
  }

  /* インタビューの Q&A。本文 46rem ＋ 写真 50rem が入らず写真が切れる */
  .p-qa__row,
  .p-qa__row--reverse {
    flex-direction: column;
    align-items: center;
  }

  .p-qa__text {
    flex: 0 0 auto;
    width: 100%;
    padding-top: 0;
  }

  /* 写真は原寸 500px。それ以上に引き伸ばさない */
  .p-qa__photo {
    flex: 0 0 auto;
    width: min(50rem, 100%);
    margin-top: 4rem;
  }

  /* 記事送り。28.4rem のボタン3つ＋gap で 89.2rem 必要だが、本文カラムは
     「画面幅 − 8rem」。972px でカラムと同じになり、そこから先ははみ出す。
     スマホと同じ2段組み（上段に前後・下段に一覧）へ前倒しで切り替える */
  .p-entrynav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
    justify-items: center;
  }

  .p-entrynav > :nth-child(1) { grid-area: 1 / 1; }
  .p-entrynav > :nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
  .p-entrynav > :nth-child(3) { grid-area: 1 / 2; }

  /* ボタンは PC と同じ 28.4rem。列が広くても引き伸ばさない */
  .p-entrynav .c-btn--pill {
    width: min(28.4rem, 100%);
  }

  /* プライベート／メッセージ行。本文 90rem も入らないので全幅にし、
     20rem の写真はスマホと同じくカードの右下へ重ねる */
  .p-qa__row--wide .p-qa__text {
    flex: 0 0 auto;
    width: 100%;
    margin-right: 0;
  }

  .p-qa__row--wide .p-qa__a {
    margin-left: 0;
    padding: 2.4rem 4rem 10rem;
  }

  .p-qa__row--wide .p-qa__photo {
    width: 20rem;
    margin: -6.4rem 0 0 auto;
  }
}

/* トップのお知らせ。写真の幅は「画面幅 − 64rem」で決まるため、画面が狭いほど痩せる。
   950px を切ると 31.1rem を下回って電車が判別しづらくなるので、ここで縦積みにする。
   閾値が 1056px と違うのは、こちらは切れているのではなく見栄えの問題だから */

@media (max-width: 950px) {
  .p-topnews {
    display: flex;
    flex-direction: column;
    /* 縦積みでは中身の高さがそのまま要るので、写真ぶんの最低高さは不要 */
    min-height: 0;
  }

  .p-topnews .p-sectitle {
    order: 1;
  }

  .p-topnews__body {
    order: 2;
    margin-top: 4rem;
  }

  .p-topnews__list {
    width: 100%;
  }

  /* 写真は Figma どおり画面の左端から出す。セクションの左 padding 分を外へ引く */
  .p-topnews__photo {
    order: 3;
    position: static;
    width: 52.1rem;
    max-width: calc(100% + 14rem);
    height: 35rem;
    margin: 4rem auto 0 -14rem;
  }

  /* インタビューの見出し部。写真 46rem が固定なので、プロフィール欄の幅は
     「画面幅 − 82rem」で決まり、狭いほど一方的に痩せる。
     33rem（キャッチが3行になる手前）を下回る前に縦積みへ逃がす。
     並び順はスマホと同じ「プロフィール → 写真」にして、767px でも入れ替わらないようにする */
  .p-interview__head {
    flex-direction: column;
    gap: 4rem;
  }

  .p-interview__photo {
    order: 2;
    flex: 0 0 auto;
    /* 画像の原寸は 460px。それ以上には引き伸ばさない */
    width: min(46rem, 100%);
  }

  .p-interview__profile {
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  :root {
    --pad-side: 2rem;
    /* Figma のテキストスタイル「SP本文」。PC本文（1.7 / 0.06em）とは行間・字送りが違う */
    --lh-body: 1.6;
    --ls-body: 0.1em;
  }

  body {
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
  }

  .u-pc-only {
    display: none;
  }

  .u-sp-only {
    display: inline;
  }

  /* ------------------------------------------------------------------
     下層ページ共通（Figma SP: KV 380px / 大見出し 28px）
     ------------------------------------------------------------------ */
  .p-kv {
    min-height: 38rem;
    padding-bottom: 3.2rem;
    background-image: var(--kv-photo-sp, var(--kv-photo));
  }

  /* Figma: パンくずは左5px・y=120。ただしこの 120px は端末のステータスバー
     （44px・ブラウザには無い）を含む座標で、ヘッダー（y=44〜108）の下端からは 12px。
     ヘッダー下端を基準にすると 64 + 12 = 76px になる */
  .p-kv__breadcrumb {
    top: 7.6rem;
    left: 0.5rem;
    padding: 0.2rem 1.6rem;
    /* 上限を親（= ページ幅）で取ると、中身がはみ出したぶんページが広がり、
       その広がった幅で上限が計算し直されて縮まなくなる。画面幅で取る */
    max-width: calc(100vw - 1rem);
  }

  /* Figma: 見出しは左15px・40px（PC は左右40px・60px）。
     字送りは PC の 3.6px（60px の 0.06em）を px で持っているので、
     40px になる SP では 0.09em 相当に広がってしまう。em で指定し直す */
  .p-kv__title {
    width: min(100rem, 100% - 3rem);
    font-size: 4rem;
    letter-spacing: 0.06em;
  }

  .p-kv__title-sub,
  .p-kv__title-main {
    display: block;
    margin-left: 0;
  }

  /* 背景に敷く大きな英字は SP には無い（Figma の SP 各ページに存在しない） */
  .p-body__en {
    display: none;
  }

  /* Figma: 本文上端（斜め帯の下端）から大見出しまで 0px。帯の高さぶんだけ空ける */
  .p-heading {
    padding-top: var(--diagonal);
  }

  /* Figma のテキストスタイル「SP-H2_大見出し」= BIZ UDPGothic Bold 28 / 1.2 / 0.1em。
     下線は文字幅に追従（PC と同じ作り）。左の余白は 15px */
  .p-heading__text {
    width: auto;
    padding-left: 1.5rem;
    font-size: 2.8rem;
  }

  /* 装飾英字（MESSAGE / POLICY …）は Figma の SP には無い */
  .p-heading__en {
    display: none;
  }

  /* Figma SP: 2行の見出し（ログイン／用地境界確認お問い合わせ）は 40px と 24px。
     Figma の見出しの枠は 295px で、「お問い合わせの／流れ」で折り返している。
     枠いっぱい（360px）にすると「お問い合わせの流／れ」と1文字だけ残るので、
     折り返し位置を Figma に合わせるために上限を持たせる。
     CSS は最後の1文字のうしろにも字送りを付けるため「お問い合わせの」は
     Figma の 295px より 2px 広い 297px になる。300px にして収める */
  .p-kv__title-sub {
    max-width: 30rem;
    font-size: 4rem;
  }

  .p-kv__title-main {
    font-size: 2.4rem;
  }

  /* ------------------------------------------------------------------
     ボタン（Figma SP btnB: padding 16/24・文字18px・矢印22px）
     ------------------------------------------------------------------ */
  .c-btn--orange {
    padding: 1.6rem 2.4rem;
    font-size: 1.8rem;
  }

  /* Figma SP btnA（紺）: 文字 Regular 18px / 行間 1.4 / アイコン 24px で高さ 57px。
     PC は文字 20px・アイコン 29.55px */
  .c-btn--navy {
    font-size: 1.8rem;
  }

  .c-btn--navy .c-arrow {
    width: 2.4rem;
    height: 2.4rem;
  }

  /* Figma SP: 上下の余白は 14px（他の btnA は 16px）。2行で高さ 78px になる */
  .c-btn--dl {
    padding-block: 1.4rem;
  }

  /* ダウンロードの2つだけ Figma は 28px の枠に 20px の字形（他の btnA は 24px） */
  .c-btn--dl .c-arrow {
    width: 2.8rem;
    height: 2.8rem;
  }

  .c-btn--dl .c-arrow::before {
    width: 2rem;
    height: 2rem;
  }

  /* トップの「お知らせ一覧」だけ、Figma で左右の余白が 24px / 10px に詰めてある
     （btnA の既定は左右 40px。TOPへ戻るはそのまま） */
  .p-topnews .c-btn--navy {
    padding: 1.6rem 1rem 1.6rem 2.4rem;
  }

  .c-btn--orange .c-arrow {
    width: 2.2rem;
    height: 2.2rem;
  }

  .c-btn--orange .c-arrow::before {
    width: 1.2rem;
    height: 1.2rem;
  }

  /* 送信（紙飛行機）は Figma で 22px の枠に 18.07×17.12。
     オレンジボタン共通の 12px では小さすぎるので、字形の実寸に戻す */
  .c-btn--mail .c-arrow::before {
    width: 1.8rem;
    height: 1.8rem;
  }

  /* ------------------------------------------------------------------
     お問い合わせ案内：ログイン画面（Figma SP: カード 360px・左右15px）
     ------------------------------------------------------------------ */
  .p-login {
    padding-top: 10.4rem; /* 斜め帯64px ＋ 見出しまで40px */
  }

  /* PC は 40px の内側余白でカードを作るが、SP は余白なしで入力欄の側だけ 16px */
  .p-login__card {
    width: min(80rem, 100% - 3rem);
    padding: 0;
  }

  .p-login__title {
    font-size: 2rem;
    line-height: 1.6;
  }

  /* Figma: ラベル 12px（PC は 14px） */
  .p-login__form .p-field__label {
    font-size: 1.2rem;
  }

  .p-login__submit {
    padding: 4rem 0 0;
  }

  .p-body--white {
    padding-bottom: 6.4rem;
  }

  /* ------------------------------------------------------------------
     お問い合わせ案内：フロー画面（Figma SP: カード360px・丸60px・三角360×21）
     ------------------------------------------------------------------ */
  /* Figma SP: カードの下からセクション下端まで 80px。
     その 80px の中に斜めの帯（64px）が収まる形なので、
     マージンは 80 - 64 = 16px にする。
     PC のような負のマージンにすると帯がカードの裏に隠れる */
  .p-flow {
    width: min(80rem, 100% - 3rem);
    margin: 4rem auto 1.6rem;
  }

  .p-step {
    gap: 1.6rem;
    padding: 2.4rem 1.6rem;
  }

  /* Figma: カード間 21px。三角はその隙間にちょうど収まる（PC は 46px） */
  .p-step + .p-step {
    margin-top: 2.2rem;
  }

  .p-step + .p-step::before {
    width: 100%;
    height: 2.2rem;
  }

  /* 丸は 100px → 60px。見出しとの間隔も 24px → 10px */
  .p-step__head {
    gap: 1rem;
    font-size: 2rem;
    line-height: 1.6;
  }

  .p-step__num {
    width: 6rem;
    height: 6rem;
  }

  .p-step__num span {
    font-size: 1.1rem;
  }

  .p-step__num b {
    font-size: 1.8rem;
  }

  /* 記載例の囲み。内側の余白は 24px → 16px */
  .p-step__note {
    margin-top: 2.4rem;
    padding: 1.6rem;
  }

  /* Figma SP: カード内のボタンは基本カードの幅いっぱい（328px）。
     文言が2行になるので、意味の切れ目に近いところで折り返るよう balance を効かせる */
  .p-step .c-btn--navy,
  .p-step .c-btn--orange {
    width: 100%;
  }

  /* メール送信だけは文字なりの 266px で中央（Figma 実測） */
  .p-step .c-btn--mail {
    width: fit-content;
    margin-inline: auto;
  }

  /* 文言が長いボタンは2行になる。Figma は2行とも中央揃えなので合わせる
     （1行に収まるボタンは文字幅ぶんしか箱が無いので、この指定では動かない） */
  .c-btn {
    text-wrap: balance;
    text-align: center;
  }

  /* 業務紹介（鉄道用地管理）の「JR用地に関するお問い合わせ」。
     Figma は文字の枠を 144px に詰めて「JR用地に関する／お問い合わせ」で折っている。
     balance は2行の幅が揃う「JR用地に関す／るお問い合わせ」を選ぶので、
     通常の折り返しに戻したうえで文字の枠を 150px にする
     （左右の余白 58px ＝(312 − 150 − 間隔 24 − アイコン 22) ÷ 2）。
     ラベルは CMS で変更できるので、文言を変えたら折り返し位置を確認すること */
  .p-work__btn .c-btn {
    text-wrap: wrap;
    padding-inline: 5.8rem;
  }

  /* 境界立会 STEP01 の左右 80px 指定は SP では幅が足りない */
  .c-btn--wide {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }

  /* ------------------------------------------------------------------
     お知らせ一覧（Figma SP: 1件 358px・下辺のみ破線・間隔24px）
     ------------------------------------------------------------------ */
  .p-newslist {
    width: min(80rem, 100% - 3rem);
    padding-top: var(--diagonal);
  }

  /* PC は四辺に 16px の余白を取るが、SP は下だけ */
  .p-newslist a {
    padding: 0 0 1.6rem;
  }

  .p-newslist li + li {
    margin-top: 2.4rem;
  }

  .p-newslist__date {
    font-size: 1.6rem;
  }

  /* Figma SP はページ番号ではなく「もっと見る」ボタン */
  .p-pager {
    display: none;
  }

  .c-btn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    width: 28.4rem;
    margin: 4rem auto 0;
    padding: 1rem 2rem;
    border: 0.2rem solid var(--c-navy);
    border-radius: 3rem;
    background: var(--c-bg-1);
    color: var(--c-navy);
    font-family: inherit;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.1em;
    cursor: pointer;
  }

  .c-btn-more[hidden] {
    display: none;
  }

  /* ＋ の記号。画像を持たず2本の線で描く */
  .c-btn-more__icon {
    position: relative;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
  }

  .c-btn-more__icon::before,
  .c-btn-more__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    background: var(--c-navy);
  }

  .c-btn-more__icon::before {
    width: 2rem;
    height: 0.2rem;
  }

  .c-btn-more__icon::after {
    width: 0.2rem;
    height: 2rem;
  }

  /* ------------------------------------------------------------------
     お知らせ記事詳細（Figma SP: 左右15px。文字は SP のテキストスタイルに従う）
       SP-H3_中見出し太 = Bold 18 / 1.8 / 0.1em
       SP-H4小見出し    = Bold 17 / 1.6 / 0.1em
     ------------------------------------------------------------------ */
  .p-article {
    width: min(100rem, 100% - 3rem);
  }

  .p-article__head {
    padding-top: var(--diagonal);
  }

  /* PC は 28px。SP はタイトルも中見出しと同じ 18px */
  .p-article__title {
    font-size: 1.8rem;
    line-height: 1.8;
  }

  .p-article__body {
    padding-top: 4rem;
  }

  /* Figma: 丸は 12px → 10px、見出しは 28px → 18px */
  .p-article__body h3 {
    margin-top: 4rem;
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: 0.1em;
  }

  .p-article__body h3::before {
    width: 1rem;
    height: 1rem;
  }

  .p-article__body h4 {
    margin-top: 2.4rem;
    font-size: 1.7rem;
    line-height: 1.6;
  }

  /* 3段のページ（お知らせ記事詳細・エントリーフォーム）でも現在地まで出す。
     以前は記事タイトルが折り返してピルが崩れるため3つ目以降を隠していたが、
     それだとエントリーフォームの「採用」まで消えていた。
     上限幅を外して、ピルの中で縮めながら「…」で省略させる
     （li には min-width: 0 が入っているので縮む） */
  .p-kv__breadcrumb li:last-child {
    max-width: none;
  }

  /* Figma SP: 前後の記事を上段に2つ並べ、一覧へ戻るを下段に幅いっぱいで置く。
     HTML の並びは 前 → 一覧 → 次 なので、グリッドで位置を指定する。
     下の 64px は Figma の記事送りブロック（Frame 84）が持つ下余白。
     この下にボタンが続くページでは、本文側の下余白が効かないのでここで取る */
  .p-entrynav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
    /* 1056px 用の指定で中央寄せにしているので、ここで列幅いっぱいに戻す */
    justify-items: stretch;
    width: min(100rem, 100% - 3rem);
    padding: 6.4rem 0;
  }

  .p-entrynav > :nth-child(1) { grid-area: 1 / 1; }
  .p-entrynav > :nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
  .p-entrynav > :nth-child(3) { grid-area: 1 / 2; }

  /* PC は 284px 固定。SP はグリッドの列幅に従わせる（Figma: 上段168px・下段360px） */
  .p-entrynav .c-btn--pill {
    width: auto;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    font-size: 1.4rem;
  }

  /* ------------------------------------------------------------------
     業務紹介（Figma SP: 白カード 360px・写真は縦積みでカードの中）
     ------------------------------------------------------------------ */
  /* Figma SP は左右15px が基準。.l-inner もそれに合わせる
     （PC の 20px のままだと、この中に入る .p-lead が二重に狭まる） */
  .l-inner {
    width: min(var(--w-content), 100% - 3rem);
  }

  /* .l-inner の内側なので、自分では幅を絞らず内側の余白だけ持つ（Figma: 本文 328px） */
  .p-lead {
    width: 100%;
    margin: 4rem auto 0;
    padding-inline: 1.6rem;
  }

  /* PC は白カードと写真が別々（写真がカードに 80px 重なる）。
     SP は写真もカードの中に入るので、外側を白いカードにして中身を平らに置く */
  /* Figma SP: リード文から 80px、カード同士も 80px（PC と同値） */
  .p-work {
    width: min(80rem, 100% - 3rem);
    margin: 8rem auto 0;
    padding: 2.4rem;
    border-radius: 1rem;
    background: var(--c-white);
  }

  /* PC 側に `.p-work__card:has(.p-work__sub)` があり、そちらのほうが詳細度が高い。
     同じ形で並べないと DX推進ページだけ幅が上書きされない */
  .p-work__card,
  .p-work__card:has(.p-work__sub) {
    width: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  /* PC は写真が無いブロックのカード下に 40px 足しているが、SP には無い。
     Figma SP はカードの下＝.p-work の内側余白 24px だけ。
     PC 側と同じ形のセレクタで書かないと詳細度が足りず消えない */
  .p-work:not(:has(.p-work__photos)) .p-work__card {
    padding-bottom: 0;
  }

  /* Figma: 丸 10px・見出し 18px（PC は 12px / 28px） */
  .p-work__title {
    gap: 1rem;
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: 0.1em;
  }

  .p-work__title::before {
    width: 1rem;
    height: 1rem;
  }

  .p-work__desc {
    margin-top: 1.6rem;
  }

  /* 写真は横並びをやめて縦に積む。300×200・角丸10px はそのまま */
  .p-work__photos,
  .p-work__photos:has(li:nth-child(2):last-child) {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin: 1.6rem 0 0;
  }

  .p-work__photos li,
  .p-work__sub-photos li {
    width: 30rem;
    max-width: 100%;
  }

  /* ------------------------------------------------------------------
     DX推進のサブブロック（Figma: 小見出し16px・写真は縦積み）
     ------------------------------------------------------------------ */

  /* Figma: 上に 32px、要素間 16px */
  .p-work__sub {
    margin-top: 3.2rem;
  }

  /* PC は 20px。SP は本文と同じ 16px（太字） */
  .p-work__sub-title {
    font-size: 1.6rem;
  }

  /* PC は記号の左右に 1em ずつ取るが、SP だと 312px の枠に収まらず
     閉じの「｜」だけが次の行に落ちる。Figma は全角スペース1つ分 */
  .p-work__sub-title::before,
  .p-work__sub-title::after {
    margin: 0 0.5em;
  }

  .p-work__sub-desc {
    margin-top: 1.6rem;
  }

  /* PC は3枚を横に並べる。SP は縦積み */
  .p-work__sub-photos {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: 1.6rem;
  }

  /* Figma: リード画像は左右の余白を持たず 360px 幅・高さ190px。
     .p-lead の子ではなく兄弟なので、そのままで .l-inner の幅になる */
  .p-lead__img {
    margin: 4rem 0 0;
  }

  .p-lead__img img {
    aspect-ratio: 36 / 19;
  }

  /* ------------------------------------------------------------------
     業務紹介一覧（Figma SP: 1列・幅いっぱい・見出しは SP-H3オレンジ）
     ------------------------------------------------------------------ */
  /* Figma SP: 最後のカードから 80px。
     下は 40px あけてから斜めの帯（本文の padding-bottom 64px）が始まる */
  .p-servicelist {
    width: min(80rem, 100% - 3rem);
    margin: 8rem auto 4rem;
  }

  .p-servicelist__title {
    gap: 1rem;
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: 0.1em;
  }

  .p-servicelist__title::before {
    width: 1rem;
    height: 1rem;
  }

  .p-servicelist__items {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    width: 100%;
  }

  /* 共通ボタンの高さ 78px は Figma SP の 62px より高い。
     .c-btn 自体を縮めると全ページのボタンに効いてしまうので、ここだけ上書きする。
     間隔は上の gap 16px のままでよい（Figma も 77 − 62 ＝ 15px 相当） */
  .p-servicelist__items a {
    height: 6.2rem;
    padding: 1.6rem 2.4rem;
    font-size: 1.8rem;
  }

  /* ------------------------------------------------------------------
     プライバシーポリシー（Figma SP: KV 320px・本文ブロック 360px）
     ------------------------------------------------------------------ */

  /* このページの KV だけ 320px（他は 380px） */
  .p-kv--flat {
    min-height: 32rem;
    padding-bottom: 3.6rem;
  }

  /* Figma は「プライバシー／ポリシー」で折り返す。
     枠いっぱい（360px）だと「プライバシーポリ／シー」と割れるので上限を持たせる。
     このページ限定。全ページに掛けると2行の見出し（お問い合わせのフローなど）が
     280px に押し込められて、Figma と違う位置で折れる */
  .p-kv--flat .p-kv__title {
    max-width: 28rem;
    margin-inline: 1.5rem auto; /* 上限を付けると auto 同士で中央に寄るため、左は固定 */
  }

  .p-policy {
    width: min(100rem, 100% - 3rem);
  }

  /* 2つ目の大見出しは、1つ目（本文上端から80px）と違って直前の内容から40px */
  .p-policy + .p-heading--flat {
    padding-top: 4rem;
  }

  /* PC は1行に収める指定だが、「「プライバシーポリシー」に基づく必要事項」は
     SP では 580px になり画面からはみ出す。Figma どおり 335px で折り返す。
     フロー画面など他の大見出しに影響しないよう、このページだけに絞る */
  .p-heading--flat .p-heading__text {
    max-width: 33.5rem;
    white-space: normal;
  }

  /* Figma SP: 丸 10px・色はテキストオレンジ2（PC は 12px・テキストオレンジ1） */
  .p-policy__body h3 {
    color: var(--c-orange-text);
  }

  .p-policy__body h3::before {
    width: 1rem;
    height: 1rem;
  }

  /* ------------------------------------------------------------------
     業務実績（Figma SP: 左右24px / 1行58px。丸と余白は PC と同値）
     ------------------------------------------------------------------ */
  .p-record {
    width: min(80rem, 100% - 4.8rem);
    margin-top: 4rem;
  }

  /* Figma SP: 本文の下端（斜め帯の下）からそのままボタン。上の余白は取らない。
     ボタンの下はフッターまで 64px */
  .p-pagetop {
    padding: 0 0 6.4rem;
  }

  /* 会社案内だけは最後のセクションが斜め帯を持たないので、40px あけてからボタン */
  .p-body:has(.p-section--last) + .p-pagetop {
    padding-top: 4rem;
  }

  .p-work__photos {
    flex-direction: column;
    align-items: center;
    margin-top: 2.4rem;
  }

  /* ------------------------------------------------------------------
     トップ：キービジュアル（Figma SP: 390×650／キャッチは縦書き）
     ------------------------------------------------------------------ */
  .p-hero {
    height: 65rem;
    margin-top: -6.4rem; /* SP のヘッダー高さ */
  }

  /* SP は Figma SP（390×650）の切り取りをそのまま画像にしてある（780×1300）。
     枠と同じ縦横比なので cover は効かず、Figma の見え方がそのまま出る */
  .p-hero__photo {
    background-image: var(--hero-photo-sp, var(--hero-photo));
  }

  /* 2本の斜め線。線そのもの（550×5・-30度）は PC と同じで、位置だけが違う。
     Figma SP は 478.814×279.33 の枠の中央に置いた線を、上は枠の上端 -100px、
     下は右 -78.81px・下 -119.33px に配置している。
     枠の中心から逆算すると、どちらも線の中心 x は 229.4 で左右方向は同じ位置になる */
  .p-hero::before {
    top: 3.72rem;
  }

  .p-hero::after {
    right: auto;
    left: -4.56rem;
    bottom: 1.78rem;
  }

  /* Figma SP はキャッチが縦2列。右の列が「今を測り、」、左が「未来を創る」。
     writing-mode: vertical-rl なら1行目が右に来るので、PC と同じ HTML のまま成立する。
     読点「、」も縦組み用の字形に切り替わる */
  .p-hero__title {
    right: 4rem;
    top: 14rem;
    writing-mode: vertical-rl;
    font-size: 5rem;
    line-height: 1.4;      /* 列と列の間隔（Figma: 字送り60px + 列間20px） */
    letter-spacing: 0.2em; /* 縦組みでは字と字の間隔になる */
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  }

  /* 2行目の中央揃えは横組み用。縦組みでは列の位置がずれるので戻す */
  .p-hero__title span {
    text-align: start;
  }

  .p-hero__en {
    top: 50.3rem;
    font-size: 10rem;
    letter-spacing: 0.04em;
  }

  /* Figma SP: 右端に貼り付く縦長のピル。丸ではなく角丸56×170 */
  /* 画面右端に貼り付く縦長タブ。PC と同じく固定で追従する */
  .p-hero__recruit {
    right: 0;
    top: 45.3rem;
    gap: 1.2rem;
    width: 5.6rem;
    height: 17rem;
    padding-top: 2rem;
    border-width: 0.3rem;
    border-radius: 3rem;
  }

  /* SP は英字を出さない（Figma: 採用情報とアイコンのみ） */
  .p-hero__recruit-en {
    display: none;
  }

  .p-hero__recruit-ja {
    margin-top: 0;
    writing-mode: vertical-rl;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
  }

  .p-hero__recruit-icon {
    width: 3.8rem;
    height: 3.5rem;
  }

  /* ------------------------------------------------------------------
     トップ：リード文とバナー2枚（Figma SP: 左右24px / バナーは縦積み）
     ------------------------------------------------------------------ */
  /* Figma SP: オレンジの帯は 360px で、About Us バナーの途中で切れる（PC は 420px） */
  .p-intro__band {
    height: 36rem;
  }

  .p-intro__inner {
    width: min(var(--w-content), 100% - 4.8rem);
    padding-top: 4rem;
  }

  /* PC は引用符を左右に置くが、SP は上下に置いて本文は左寄せ */
  .p-intro__lead {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
    font-size: 2rem;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-align: left;
  }

  /* PC 用の改行位置（「至るまで」の後）は SP だと「で」だけが残る。
     Figma SP は自然な折り返しなので、強制改行を無効にする */
  .p-intro__lead br {
    display: none;
  }

  /* 引用符は PC と別の SVG（PC は 56×170 の縦長キャンバス、SP は 34×30 の字形のみ）。
     開きは同じ画像を左右反転して使う */
  .p-intro__lead::before,
  .p-intro__lead::after {
    width: 3.4rem;
    height: 3rem;
    background-image: url("/img/top/quote-sp.svg");
  }

  .p-intro__lead::before {
    scale: -1 1;
  }

  /* 閉じ引用符は右端に置く（Figma） */
  .p-intro__lead::after {
    align-self: flex-end;
  }

  .p-intro__banners {
    flex-direction: column;
    gap: 2rem;
    margin-top: 4rem;
  }

  /* PC は 500×300 固定。SP は横幅いっぱいで、比率だけ Figma に合わせる */
  .p-banner {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 342 / 165;
  }

  .p-banner--center {
    aspect-ratio: 342 / 180;
  }

  /* Our Works 側は PC で top を上書きしているので、そちらも一緒に戻す。
     これを忘れると「Our Works / 業務実績」がバナーの外に出て見えなくなる */
  .p-banner__label,
  .p-banner--center .p-banner__label {
    left: 2rem;
    top: auto;
    bottom: 1rem;
  }

  .p-banner__en {
    font-size: 3rem;
  }

  .p-banner__ja {
    font-size: 1.4rem;
  }

  /* SP は右下の余白を少し詰める（Figma: 約35px角） */
  .p-banner .c-arrow {
    right: 1rem;
    bottom: 1rem;
  }

  .p-banner .c-arrow--lg {
    width: 3.5rem;
    height: 3.5rem;
  }

  .p-banner .c-arrow--lg::before {
    width: 1.8rem;
    height: 1.8rem;
  }

  /* ------------------------------------------------------------------
     トップ：業務紹介（Figma SP: 左右10px / タイルは 172×172 の 2×2）
     ------------------------------------------------------------------ */
  .p-services {
    /* Figma: セクション上端から見出しまで 120px */
    padding-top: 12rem;
    /* 写真は 280px。上端 46px がタイルに重なるので、下の余白は 280 - 46 */
    padding-bottom: 23.4rem;
  }

  .p-services__inner {
    width: min(var(--w-content), 100% - 2rem);
  }

  /* Figma SP: 390×280 をセクションの下端に置く。上端 46px は白へのフェード。
     このフェードが無いと写真の上辺が直線で出て、ページから浮いて見える
     （Figma の Rectangle 87 がこれにあたる。PC は 92px で同じ作り）。
     位置は固定値ではなく下端基準にする（文字の折り返しで高さが変わるため） */
  .p-services__photo {
    top: auto;
    bottom: 0;
    height: 28rem;
    background:
      linear-gradient(var(--c-white), rgba(255, 255, 255, 0) 4.6rem),
      linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
      var(--services-photo-sp, var(--services-photo)) center / cover no-repeat;
  }

  /* PC は 197px 固定を右寄せ。SP では画面に入らず左列がはみ出すので、
     画面幅に合わせて等分する */
  .p-services__tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
    justify-content: stretch;
  }

  .p-services__tiles a {
    height: auto;
    aspect-ratio: 1;
    font-size: 1.4rem;
  }

  /* セクション見出し（Our Services / Our Strengths / News 共通） */
  .p-sectitle__en {
    font-size: 4rem;
  }

  .p-sectitle__ja {
    font-size: 1.4rem;
  }

  /* ------------------------------------------------------------------
     トップ：私たちの強み（Figma SP: カードは横幅いっぱい・資格一覧は1列）
     ------------------------------------------------------------------ */
  /* PC は左右140pxの余白。SP では中身が入らないので詰める（Figma: 24px） */
  .p-strengths {
    padding: 4rem 2.4rem 6rem;
  }

  /* Figma SP: 丸60px・番号22px・見出し20px（PC は 120px / 40px / 36px） */
  .p-strength__title {
    font-size: 2rem;
    letter-spacing: 0.1em;
  }

  .p-strength__num {
    width: 6rem;
    height: 6rem;
    margin-right: -1rem;
    font-size: 2.2rem;
  }

  .p-strength__desc {
    margin-top: 1rem;
    padding-left: 2.4rem;
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.1em;
  }

  /* 左端のオレンジ帯も細くする（PC: 80px） */
  .p-strengths::before {
    width: 1.4rem;
  }

  .p-strength__card {
    width: auto;
    margin-top: 2.4rem;
    padding: 1.6rem;
  }

  /* Figma SP は「・」付きのリスト。全称セレクタの list-style: none を打ち消す */
  .p-strength__card ul {
    padding-left: 2.4rem;
    columns: 1;
    list-style: disc;
  }

  /* PC は nowrap で2段組。SP は1段なので折り返させる */
  .p-strength__card li {
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.1em;
    white-space: normal;
  }

  /* 公的登録の表。PC は左右80px の余白と 120px の項目名 */
  .p-license {
    padding: 0;
  }

  .p-license__badge {
    font-size: 1.6rem;
  }

  .p-license__body dt,
  .p-license__body dd {
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.1em;
  }

  /* Figma: 項目名 100px ＋ 間隔 16px ＝ 値は左から 116px */
  .p-license__body dt {
    flex: 0 0 10rem;
  }

  /* フレックス項目の既定 min-width:auto を外し、長い値を折り返させる */
  .p-license__body dd {
    min-width: 0;
  }

  /* ------------------------------------------------------------------
     トップ：お知らせ
     Figma SP: 見出し → 一覧 → ボタン → 写真 の順。
     写真は左端から 360px（右に30px残る）で、右側だけ大きく丸い
     ------------------------------------------------------------------ */
  .p-topnews {
    display: flex;
    flex-direction: column;
    /* SP は写真が静的配置で縦に並ぶので、PC 向けの最低高さは要らない */
    min-height: 0;
    padding: 4rem 0 6rem;
  }

  /* HTML では写真が先頭にあるので、表示順だけ入れ替える */
  .p-topnews .p-sectitle {
    order: 1;
    padding-left: 1.6rem;
  }

  .p-topnews__body {
    order: 2;
    gap: 2.4rem;
    margin-top: 4rem;
    padding: 0 1.6rem;
  }

  /* PC は 500px 固定。SP は画面幅に合わせる（ボタンは右寄せのまま） */
  .p-topnews__list {
    width: 100%;
  }

  .p-topnews__photo {
    order: 3;
    position: static;
    /* Figma SP は 360px。画面がそれより狭い端末では画面幅に収める
       （固定のままだと横スクロールが出て、右側に白い帯ができる） */
    width: min(36rem, 100%);
    height: 24.2rem;
    /* 950px 用の指定が左へ引き出しているので、ここで打ち消す。
       スマホではセクションの左 padding が 0 で、写真はそのまま画面左端から始まる */
    margin: 4rem 0 0;
    border-radius: 0 12rem 12rem 0;
  }

  /* ------------------------------------------------------------------
     フッター（Figma SP: 全体160px = 白帯30 + 斜め64 + 紺66）
     斜めの高さ（--diagonal = 16.406vw）は 390px 幅で 64px になるので、
     PC と同じ角度のまま使える。白帯の 30px だけを足す
     ------------------------------------------------------------------ */
  .l-footer {
    height: calc(var(--diagonal) + 3rem + 6.6rem);
  }

  .l-footer::before {
    height: calc(var(--diagonal) + 3rem + 1px);
    clip-path: polygon(0 0, 100% 0, 100% 3rem, 0 100%);
  }

  /* Figma SP: バナーは左端 x=0、文字は右から16px。左右の余白は取らない */
  .l-footer__inner {
    width: 100%;
  }

  .l-footer__bnr {
    top: 0;
    left: 0;
  }

  .l-footer__privacy {
    right: 1.6rem;
    bottom: 4.2rem;
    font-size: 1.4rem;
  }

  .l-footer__copyright {
    bottom: 1.8rem;
    padding-right: 1.6rem;
    font-size: 1rem;
  }

  /* ------------------------------------------------------------------
     入力フォーム（Figma SP: 境界立会 260:3412 / 採用エントリー 265:4369）
     PC は「項目名 300px ＋ 入力欄」の 2 列。SP は上下に積む
     ------------------------------------------------------------------ */
  /* 指摘68。14px だと「※お申し込みから1ヶ月以上先の日付でお願いします」が
     23文字 × 14.84px ＝ 341px になり、入る幅（328px）を超えて「ます」だけが
     2行目に送られる。1px 詰めて1行に収める */
  .p-form__hint {
    font-size: 1.3rem;
  }

  /* Figma SP: 左右 15px（本文カラムと同じ） */
  .p-form,
  .p-form__lead,
  .p-done {
    width: min(var(--w-content), 100% - 3rem);
  }

  /* Figma SP: 大見出しの下線からリード文まで 40px（PC は 64px） */
  .p-form__lead {
    margin-top: 4rem;
  }

  /* 縦積み。align-items を stretch に戻さないと、項目名も入力欄も文字幅に縮む。
     .p-form__body の flex-basis 0 は縦方向の指定になってしまうので併せて解除する */
  .p-form__row {
    flex-direction: column;
    align-items: stretch;
  }

  .p-form__head {
    align-items: center;
    width: auto;
    padding: 0.8rem 1.6rem;
  }

  .p-form__body {
    flex: 0 0 auto;
  }

  /* Figma SP: グループの区切り線は無く、白い塊が 32px あいて並ぶだけ */
  .p-form__body--ruled .p-form__group:not(:last-child) {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .p-form__group + .p-form__group,
  .p-form__body--ruled .p-form__group + .p-form__group {
    margin-top: 1.6rem;
  }

  .p-form__group-title {
    padding-bottom: 0.8rem;
  }

  /* Figma SP: 入力欄は高さ 46px・左右 8px（PC は 50px / 16px） */
  .p-field__input {
    height: 4.6rem;
    padding: 0 0.8rem;
  }

  .p-field__input--area {
    height: 18rem;
    padding: 1.6rem 0.8rem;
  }

  /* 確認画面の値も入力欄と同じ左右位置に揃える */
  .p-form__value {
    padding: 0 0.8rem;
  }

  /* Figma SP: 「駅間」は 2 つを縦に並べ、「〜」は 1 つ目の右に置く。
     1 つ目を「〜」の分だけ狭くすると、2 つ目が自然に次の行へ折り返す */
  .p-form__range {
    flex-wrap: wrap;
    gap: 1.6rem 0.5rem;
  }

  .p-form__range .p-field__input {
    width: 100%;
  }

  .p-form__range .p-field__input:first-child {
    width: calc(100% - 2.4rem);
  }

  /* Figma SP: 行の間隔だけ 24px に広がる（PC は 16px） */
  .p-form__checks {
    gap: 2.4rem 4rem;
  }

  /* Figma SP: 年月日のセレクトは 1 行に収まる幅で並べ、年齢は次の行に落とす */
  .p-form__date {
    gap: 1.6rem 1rem;
  }

  /* 左右 8px に詰めても、三角を描いている右の余白は残す
     （.p-field__input の padding 一括指定が後に来るので、ここで上書きし直す） */
  .p-field__select {
    padding-right: 4.8rem;
  }

  .p-field__select--narrow {
    width: 8.6rem;
    padding-right: 4.4rem;
  }

  /* Figma SP: 年 126px。月・日と合わせて 328px に収まるよう間隔を詰める */
  .p-form__date .p-field__select--narrow:first-of-type {
    width: 12.6rem;
  }

  .p-form__date .p-field__select + .p-field__select {
    margin-left: 0.4rem;
  }

  /* SP は年齢の入力欄が次の行に落ちるので、行頭に寄せる */
  .p-field__input--age {
    margin-left: 0;
  }

  /* Figma SP: 「依頼者情報」は SP-H3（18px）。上 64px・下 40px */
  .p-form__section {
    gap: 1rem;
    margin: 6.4rem 0 4rem;
    font-size: 1.8rem;
    line-height: 1.8;
  }

  .p-form__section::before {
    width: 1rem;
    height: 1rem;
  }

  /* Figma SP: ボタンは 342px（左右 24px）。最終行から 40px、フッターまで 64px */
  .p-form__submit,
  .p-form__actions {
    padding: 4rem 0 6.4rem;
  }

  /* Figma SP: 送信ボタンの下はフッターまで 64px。その 64px は .p-form__submit
     （確認画面は .p-form__actions）が持っているので、本文側の下余白は要らない。
     両方あると 128px 空く */
  .p-body:has(.p-form__submit),
  .p-body:has(.p-form__actions) {
    padding-bottom: 0;
  }

  .p-form__recaptcha {
    padding-top: 4rem;
  }

  .p-form__recaptcha + .p-form__actions {
    padding-top: 2.4rem;
  }

  .c-btn--form {
    width: min(34.2rem, 100%);
  }

  /* 完了画面。Figma に SP 版が無いので、余白だけ SP の幅に合わせて詰める */
  .p-done {
    padding: 6.4rem 2.4rem;
  }

  .p-done__title {
    font-size: 1.8rem;
    line-height: 1.8;
  }


  /* ------------------------------------------------------------------
     会社案内（Figma SP: 242:927）
     セクションの背景がクリームと白で交互になる作りは PC と同じ。
     斜め帯（--diagonal）は 390px 幅で 64px になる
     ------------------------------------------------------------------ */
  .p-section {
    padding-bottom: 6.4rem;
  }

  /* Figma SP: 代表挨拶は斜め帯のぶん。
     2つ目以降のセクションは 40px だが、これは会社案内だけの値。
     境界立会・フォーム2種・お問い合わせフローでも .p-heading--section を使っており、
     そちらは .p-heading の 64px（斜め帯ぶん）が正しいので、会社案内に限定する */
  .p-heading--company {
    padding-top: var(--diagonal);
  }

  .p-section--cream .p-heading--section,
  .p-section--white .p-heading--section {
    padding-top: 4rem;
  }

  /* 代表挨拶。PC は白カードが左端まで抜けて写真がその上に重なるが、
     SP は「キャッチ → 写真 → 本文 → 署名」の縦一列。
     写真は HTML ではカードの外（あと）にあるので、カードを display:contents で
     ばらしてから order で間に割り込ませる */
  .p-message {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    width: min(36rem, 100% - 3rem);
    margin: 4rem auto var(--diagonal);
    padding: 2.4rem 1.5rem;
    border-radius: 0 1rem 1rem 0;
    background: var(--c-white);
  }

  .p-message__card {
    display: contents;
  }

  .p-message__catch {
    order: 1;
    font-size: 1.8rem;
    line-height: 1.8;
  }

  .p-message__photo {
    order: 2;
    position: static;
    width: 100%;
  }

  .p-message__photo img {
    aspect-ratio: 330 / 422;
  }

  .p-message__body {
    order: 3;
    width: 100%;
  }

  /* 署名。PC は行間 1.2 で詰めているが、SP は本文と同じ 1.6（名前だけ 1.8） */
  .p-message__sign {
    line-height: var(--lh-body);
  }

  .p-message__company {
    font-size: var(--fs-body);
  }

  .p-message__name span { font-size: var(--fs-body); }

  .p-message__name b {
    font-size: 1.8rem;
    line-height: 1.8;
  }

  /* ポリシー。Figma SP: 項目名 100px・右寄せ、内容は残り全部。左右いっぱいに広がる */
  .p-deflist {
    width: 100%;
    margin-top: 4rem;
  }

  /* Figma のテキストスタイル「SP本文強調」= Bold 16 / 1.6 / 0.06em。
     本文（SP本文）だけが 0.1em で、太字は 0.06em と字送りが違う。
     0.1em のままだと「企業理念」が 70px に収まらず2行に折れる */
  .p-deflist__label {
    width: 10rem;
    padding: 1.4rem 1.5rem;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: 0.06em;
  }

  /* 行動規範の「❶安全第一」なども SP本文強調 */
  .p-deflist__body strong {
    letter-spacing: 0.06em;
  }

  .p-deflist__body {
    padding: 1.4rem 1.5rem;
  }

  /* 会社概要。Figma SP: 項目名と内容を上下に積み、左右は 15px あける */
  .p-deflist--company {
    width: min(36rem, 100% - 3rem);
    margin-inline: auto;
  }

  .p-deflist--company .p-deflist__row {
    flex-direction: column;
    align-items: stretch;
  }

  /* 会社概要の項目名は「SP-H4小見出し」= Bold 17 / 1.6 / 0.1em。
     ポリシー側の 0.06em（SP本文強調）を引き継がないよう戻す */
  .p-deflist--company .p-deflist__label {
    width: auto;
    padding: 1.4rem 2.4rem;
    font-size: 1.7rem;
    letter-spacing: 0.1em;
  }

  .p-deflist--company .p-deflist__body {
    padding: 1.4rem 2.4rem;
  }

  /* 「測量業」などのバッジ。SP は SP本文強調（Bold 16 / 1.6 / 0.06em）。
     PC は同じ 18px でも太字ではない */
  .p-deflist__body h4 {
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: var(--lh-body);
  }

  /* 登録年月日などの値だけ Figma が「PC本文ベース」（1.7 / 0.06em）のままになっている */
  .p-deflist--company .p-deflist__body td {
    line-height: 1.7;
    letter-spacing: 0.06em;
  }

  /* 登録年月日などの「ラベル＋値」は、SP では横並びをやめて上下に積む */
  .p-deflist--company .p-deflist__body table,
  .p-deflist--company .p-deflist__body tbody,
  .p-deflist--company .p-deflist__body tr,
  .p-deflist--company .p-deflist__body th,
  .p-deflist--company .p-deflist__body td {
    display: block;
  }

  .p-deflist--company .p-deflist__body th {
    width: auto;
    padding-right: 0;
  }

  .p-deflist--company .p-deflist__body tr + tr {
    margin-top: 1.6rem;
  }

  /* 有資格者・取締役の一覧は1列に戻す */
  .p-deflist__body ul {
    columns: 1;
  }

  /* 所在地。地図を住所の下に置く */
  .p-office {
    flex-direction: column;
  }

  .p-office__text,
  .p-office__map {
    flex: 0 0 auto;
    width: 100%;
  }

  /* 注記は Figma のテキストスタイル「キャプション」= Regular 14 / 1.4 / 0.06em */
  .p-office__text .p-office__note {
    letter-spacing: 0.06em;
  }

  /* 営業所名は SP本文強調（Bold 16 / 1.6 / 0.06em） */
  .p-office__name {
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  /* 沿革。Figma SP: 年 100px・西暦 30px、月と本文は横並びをやめて上下に積む */
  .p-history {
    width: min(36rem, 100% - 3rem);
    margin-top: 4rem;
  }

  .p-history__year {
    flex: 0 0 10rem;
    justify-content: flex-start;
    padding: 1.6rem 0.8rem 0 0;
  }

  .p-history__ad {
    font-size: 3rem;
  }

  .p-history__era {
    font-size: 1.2rem;
  }

  .p-history__mark {
    flex: 0 0 1.8rem;
  }

  .p-history__mark::after {
    top: 3.3rem;
    width: 1.8rem;
    height: 1.8rem;
    background: radial-gradient(circle, var(--c-corporate) 0 0.4rem, var(--c-bg-3) 0.4rem);
  }

  .p-history__detail {
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.8rem 0 1rem 0.8rem;
  }

  .p-history__month {
    flex: 0 0 auto;
  }

  /* 写真は縮めず 260px のまま、画面の外へはみ出させる（セクションが overflow:hidden）*/
  .p-history__photos {
    grid-template-columns: repeat(5, 26rem);
    width: 133.2rem;
    margin: 4rem 0 0 50%;
    translate: -50%;
  }

  /* 組織図。縮めると読めないので PC と同じ 1000px のまま横スクロールさせ、
     Figma と同じ位置にスワイプできることを示すアイコンを重ねる */
  .p-orgchart {
    position: relative;
    width: min(36rem, 100% - 3rem);
    margin-top: 4rem;
    overflow-x: auto;
  }

  .p-orgchart img {
    width: 100rem;
    max-width: none;
  }

  .p-orgchart::after {
    content: "";
    position: absolute;
    top: 22rem;
    left: 13rem;
    width: 10rem;
    height: 10rem;
    background: url("/img/about/swipe.svg") center / contain no-repeat;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  /* 一度でも触るかスクロールしたら用は済んでいるので消す（js/sp-menu.js が付ける）。
     図の上に出しっぱなしだと組織図そのものが読めない */
  .p-orgchart.is-scrolled::after {
    opacity: 0;
  }

  /* 最後のセクションは斜め帯を持たないので、帯ぶんの余白も要らない。
     Figma SP: パンフレットのボタンから「TOPへ戻る」まで 40px（.p-pagetop の上余白だけ） */
  .p-body:has(.p-section--last) {
    padding-bottom: 0;
  }

  .p-section--last {
    padding-bottom: 0;
  }

  /* パンフレット。Figma SP: 見本もボタンも幅いっぱい */
  .p-pamphlet {
    width: min(36rem, 100% - 3rem);
    margin-top: 4rem;
  }

  .p-pamphlet__preview {
    width: 100%;
  }

  .p-pamphlet__preview img {
    aspect-ratio: 360 / 216;
  }

  .p-pamphlet .c-btn {
    width: 100%;
  }

  /* この文言だけ長く、左右 24px の余白では 360px に収まらず2行になる。
     Figma も余白を詰めて1行に収めているので、それに合わせる */
  .p-pamphlet .c-btn--orange {
    padding-inline: 1.8rem;
  }


  /* ------------------------------------------------------------------
     採用情報（Figma SP: 249:2397）
     インタビュー3本 → 求める人材 → 募集要項。
     PC の「写真と本文を左右に並べる」構成をすべて縦一列に積み替える
     ------------------------------------------------------------------ */

  /* 1人目は大見出しの下、2人目以降はセクション上端から 120px（Figma 実測） */
  .p-interview {
    width: min(36rem, 100% - 3rem);
    margin-top: 4rem;
  }

  /* Figma はセクション上端から 120px だが、その最初の 64px は斜め帯。
     こちらは帯を前のセクションの下余白（padding-bottom）に持たせているので、
     同じ位置に置くには帯の高さぶんを引く（64 + 56 + ラベル上の 16 = 136px） */
  .p-recruit--iv:not(.p-recruit--iv-first) .p-interview {
    margin-top: 5.6rem;
  }

  /* 指摘33。Figma は中身の下に 104px 空けてから斜め帯に入るが、
     こちらは帯（padding-bottom）が中身の直後から始まっていた。
     そのぶん人と人のあいだが 224px → 120px と詰まっていたので 104px 足す */
  .p-recruit--iv {
    padding-bottom: calc(var(--diagonal) + 10.4rem);
  }

  /* 写真は HTML では本文より前にあるが、SP は「ラベル → キャッチ → 氏名 → 写真」 */
  .p-interview__head {
    flex-direction: column;
    gap: 4rem;
  }

  .p-interview__photo {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
  }

  .p-interview__profile {
    padding-top: 1.6rem;
  }

  /* Figma SP: キャッチは 18px、氏名は 28px。間隔はどちらも 8px。
     キャッチはコード書き出しでは Bold と出るが、実際の描画は太くない。
     同じ 18px の氏名や INTERVIEW01 と見比べると明らかに細いので、見た目に合わせる */
  .p-interview__catch {
    margin-top: 0.8rem;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.8;
  }

  .p-interview__name {
    margin-top: 3.2rem;
    font-size: 2.8rem;
  }

  .p-interview__data {
    margin-top: 4rem;
  }

  /* Figma SP: 項目名のチップは高さ 25px 固定。「その他」のように値が4行あっても伸びない。
     セルの背景だと行の高さいっぱいに塗られてしまうので、擬似要素で描く */
  .p-interview__data tr > :first-child {
    position: relative;
    z-index: 0;
    background: none;
  }

  .p-interview__data tr > :first-child::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto 0;
    height: 2.5rem;
    border-radius: 0.4rem;
    background: var(--iv-card);
  }

  /* 1日のスケジュール。Figma SP: カード 360px・内側 24px/15px */
  .p-schedule {
    width: min(36rem, 100% - 3rem);
    padding: 2.4rem 1.5rem;
  }

  /* 目盛りは 18px の丸。行の高さが変わっても丸の位置は上から 24px で固定 */
  .p-schedule__list th,
  .p-schedule__list td {
    padding: 1rem 0;
  }

  .p-schedule__list tr > * + * {
    padding-left: 1rem;
  }

  .p-schedule__list tr > :last-child {
    padding-right: 0;
  }

  /* Figma SP は行ごとに独立した flex で、区分のすぐ右から内容が始まる（列が揃わない）。
     table のままだと2列目が全行で最も広い区分に合わされてしまうので、行を flex にする */
  .p-schedule__list tr {
    display: flex;
  }

  .p-schedule__list tr > :first-child {
    flex: 0 0 9.4rem;
    width: auto;
    padding-left: 3.4rem;
  }

  .p-schedule__list tr > :nth-child(2) {
    flex: 0 0 auto;
    width: auto;
  }

  .p-schedule__list tr > :last-child {
    flex: 1 1 0;
    min-width: 0;
  }

  .p-schedule__list tr > :first-child::before {
    left: 0.85rem;
  }

  .p-schedule__list tr > :first-child::after {
    top: 2.4rem;
    translate: 0 -50%;
    width: 1.8rem;
    height: 1.8rem;
    background: var(--iv-schedule)
      radial-gradient(circle at center, var(--c-corporate) 0.4rem, transparent 0.4rem);
  }

  /* 区分（出社・業務など）は SP本文強調なので字送りが狭い */
  .p-schedule__list tr > :nth-child(2) {
    letter-spacing: 0.06em;
  }

  /* Q&A。写真は左右ではなく本文の下に回す */
  .p-qa {
    margin-top: 4rem;
  }

  .p-qa__row,
  .p-qa__row--reverse {
    flex-direction: column;
    width: min(36rem, 100% - 3rem);
  }

  .p-qa__text {
    flex: 0 0 auto;
    width: 100%;
    padding-top: 0;
  }

  .p-qa__photo {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 4rem;
  }

  /* Figma SP: 質問と回答の並びは左右交互にならず、常に「質問が左・回答が右」。
     質問文は SP本文強調なので字送りが狭い（「Q」は 18px で 0.1em のまま） */
  .p-qa__q,
  .p-qa__row--reverse .p-qa__q {
    margin-right: 4rem;
    margin-left: 0;
    border-radius: 1rem 1rem 1rem 0;
    letter-spacing: 0.06em;
    /* Figma は 16文字の質問がちょうど1行に収まる（文字幅 261px / 使える幅 261px）。
       ブラウザの字幅は 1〜2px 広く、そのままだと最後の1文字が2行目に落ちる。
       右の余白を 2px 詰めて、Figma と同じ1行に収める */
    padding-right: 1.4rem;
  }

  /* 「Q」の後ろに付く字送りのぶん（1.8px）も質問文に回す。
     「Q」と質問文の間隔は gap で取っているので見た目は変わらない */
  .p-qa__q span {
    letter-spacing: normal;
  }

  .p-qa__a,
  .p-qa__row--reverse .p-qa__a {
    margin-right: 0;
    margin-left: 4rem;
    padding: 2.4rem 1.6rem;
    border-radius: 1rem 1rem 0 1rem;
  }

  .p-qa__item > * + * {
    margin-top: 1.6rem;
  }

  /* プライベート／応募者へのメッセージ。200px 角の写真がカードの右下に 64px 重なる */
  .p-qa__row--wide .p-qa__text {
    flex: 0 0 auto;
    width: 100%;
    margin-right: 0;
  }

  .p-qa__row--wide .p-qa__a {
    margin-left: 0;
    padding: 2.4rem 1.5rem 8rem;
  }

  .p-qa__row--wide .p-qa__photo {
    width: 20rem;
    margin: -6.4rem 0 0 auto;
  }

  /* 求める人材。写真はセクション下端に 380px 敷き、上 90px をオレンジへ溶かす */
  .p-recruit--ideal {
    padding-bottom: 38.6rem;
  }

  /* 写真も SP は切り抜きが違う。未設定なら PC 用にそのまま落ちる */
  .p-recruit--ideal::before {
    height: 38rem;
    background:
      linear-gradient(var(--c-corporate), rgba(255, 138, 69, 0) 9rem),
      linear-gradient(rgba(255, 138, 69, 0.2), rgba(255, 138, 69, 0.2)),
      var(--ideal-photo-sp, var(--ideal-photo)) center / cover no-repeat;
  }

  .p-recruit--ideal .p-heading {
    padding-top: 4rem;
  }

  .p-ideal {
    width: min(36rem, 100% - 3rem);
    margin-top: 4rem;
    padding: 2.4rem 1.6rem;
  }

  .p-ideal .p-ideal__catch {
    font-size: 1.8rem;
    line-height: 1.8;
  }

  /* 募集要項。会社概要と同じ定義リストだが、項目名は 16px で余白も狭い */
  .p-recruit--careers {
    padding-bottom: 10rem;
  }

  /* 会社案内は SP-H4（17px / 0.1em）だが、募集要項は SP本文強調（16px / 0.06em） */
  .p-recruit--careers .p-deflist--company .p-deflist__label {
    padding: 0.8rem 1.6rem;
    font-size: var(--fs-body);
    letter-spacing: 0.06em;
  }

  .p-recruit--careers .p-deflist--company .p-deflist__body {
    padding: 0.8rem 1.6rem;
  }

  /* ページ末尾のボタン。エントリーは幅いっぱい（342px）、TOPへ戻るは文字なり */
  .p-pagetop--stack {
    gap: 4rem;
    padding: 0 0 6.4rem;
  }

  .p-pagetop--stack .c-btn--orange {
    width: min(34.2rem, 100% - 4.8rem);
  }

}