@charset "UTF-8";

/* ==========================================================================
 * TECH 21 official site
 * 出力先: wp-content/themes/tech-21/assets/css/style.css
 *
 * 命名規則（FLOCSS ベース・フラット構成）
 *   l-  : レイアウト
 *   p-  : ページ／プロジェクト固有ブロック
 *   c-  : 再利用コンポーネント
 *   u-  : ユーティリティ
 *   js- : JS フック（スタイルを当てない）
 *   is- : JS が付け外しする状態クラス
 *
 * ブレークポイント: 640 / 800 / 1000 / 1200px（レンジ記法）
 * ========================================================================== */

/* ※ 和文フォントは未確定。TypeSquare を使う場合はこの @import を削除し、
 *    --ff-base の値のみ差し替えてください。 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

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

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
  border-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease, color 0.3s ease;
}

a:hover {
  opacity: 0.7;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

iframe {
  border: none;
}

[hidden] {
  display: none;
}

[aria-disabled=true],
[disabled] {
  cursor: not-allowed;
}

/* ==========================================================================
 * Design tokens
 * ========================================================================== */
:root {
  /* --- フォントサイズスケール --- */
  --fz9: calc(9 / 16 * 1rem);
  --fz10: calc(10 / 16 * 1rem);
  --fz11: calc(11 / 16 * 1rem);
  --fz12: calc(12 / 16 * 1rem);
  --fz13: calc(13 / 16 * 1rem);
  --fz14: calc(14 / 16 * 1rem);
  --fz15: calc(15 / 16 * 1rem);
  --fz16: 1rem;
  --fz17: calc(17 / 16 * 1rem);
  --fz18: calc(18 / 16 * 1rem);
  --fz19: calc(19 / 16 * 1rem);
  --fz20: calc(20 / 16 * 1rem);
  --fz21: calc(21 / 16 * 1rem);
  --fz22: calc(22 / 16 * 1rem);
  --fz23: calc(23 / 16 * 1rem);
  --fz24: calc(24 / 16 * 1rem);
  --fz26: calc(26 / 16 * 1rem);
  --fz28: calc(28 / 16 * 1rem);
  --fz30: calc(30 / 16 * 1rem);
  --fz32: calc(32 / 16 * 1rem);
  --fz34: calc(34 / 16 * 1rem);
  --fz36: calc(36 / 16 * 1rem);
  --fz38: calc(38 / 16 * 1rem);
  --fz40: calc(40 / 16 * 1rem);
  --fz42: calc(42 / 16 * 1rem);
  --fz44: calc(44 / 16 * 1rem);
  --fz45: calc(45 / 16 * 1rem);

  /* --- 本文 --- */
  /* ▼ タイポグラフィの基準
   * デザイン案の文字は印刷用に大きく描かれているため絶対値は使えない。
   * Illustrator で採寸した実寸から「本文に対する比率」を求め、
   * 本文サイズだけを Web 用に決めて、他はすべてその比率で算出する。
   *   本文 1.00 ／ 見出し 1.36 ／ ファーストビュー縦書き 1.40
   *   縦書きラベル 2.44 ／ MADE WITH PRIDE 3.41
   * 比率を変えたいときは各所の係数を、全体を大小したいときは
   * --txt-body-size だけを変更する。 */
  /* デザイン案 P1 の実測：本文の 1 文字送りがモック幅（1210px）の 1.85%。
     letter-spacing 0.10em を差し引くと font-size = 画面幅の 1.69%。
     ただし原稿は印刷用に文字を大きく描いているため、そのままでは 1440px で 24.3px、
     1600px で 27px になり画面では過大。ブラウザ 80% が読みやすいというユーザー判断で
     係数・上限ともに 0.8 倍した（2026-10-17）：1.69vw → 1.352vw、27px → 21.6px。
     1440px → 19.5px / 1597px 以上 → 21.6px で頭打ち。
     SP は原稿どおりだと 11.8px まで落ちて読めないため、下限 15px で止める
     （原稿は SP モックを実機より大幅に大きく描いているため、そのままは使えない）。
     下限 15px は 1109px 以下で効くので、SP の見え方は従来どおり変わらない。
     ※ さらに 0.8 倍したことがあるが、ユーザーの意図は文字サイズではなかったので戻した。 */
  --txt-body-size: clamp(0.9375rem, 1.352vw, 1.215rem);   /* 15px 〜 19.44px */
  --txt-body-weight: 400;
  --txt-body-line-height: 2;
  /* デザイン案のフォントは字面が細身（約0.78em）、Noto Sans JP は太め（0.833em）。
     送りの数値だけ合わせると見た目の余白が足りなくなるため、
     「字面幅 ÷ 送り」がデザイン案と一致するよう字間を足している。 */
  --txt-body-letter-spacing: 0.10em;

  /* --- カラー --- */
  --c-bg: #FFFFFF;
  --c-text: #1A1A1A;
  --c-text-light: #666666;
  --c-accent: #E0304F;      /* 赤ピンク（見出し・ラベル・リンク）※デザイン案から採色 */
  --c-mint: #A8D8DC;        /* 淡いミント（ブロック背景） */
  --c-mint-light: #CBE8EB;
  /* RECRUIT ボタン等。ユーザーが PDF ビューアで見た実際の色 #656666 を採用（2026-10-16）。
     pdf-to-img でレンダリングすると #596669 と青緑寄りに転ぶので、採色はこの値を正とする。 */
  --c-dark: #656666;
  --c-navy: #2B3436;        /* QUALITY セクション背景 */
  --c-gray: #F2F2F2;
  --c-line: #DDDDDD;
  --c-blue: #7BC2E0;        /* CONTACT フォームのタブ・入力枠・送信ボタン ※デザイン案から採色 */
  --c-teal: #6FA0AC;        /* お問い合わせボタン ※デザイン案 P1 から採色 */

  /* --- フォント --- */
  --ff-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --ff-en: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;

  /* --- 寸法 --- */
  --layout-max: 1600px;   /* % ベースのレイアウトが伸び続けない上限 */
  /* デザイン案 P1 の実測：ヘッダーの高さはモック幅の 12.64%（ロゴ上 3.55% / ロゴ 6.53% / 下 2.56%）。
     原稿どおりだと 1440px で 182px になるが、表示領域を取りすぎるというユーザー判断で
     上限 140px（2026-10-16）。ロゴは原稿どおりの高さ 94px（幅 134px）をそのまま使うので、
     ヘッダーに占める比率は原稿の 51.6% より大きい 67% になる。
     SP 側は下の @media で据え置く。 */
  /* 上限は 2026-10-17 にユーザー判断で 140px → 126px（0.9 倍）。ヘッダー内のロゴ・ナビ・
     RECRUIT ボタンの px 上限も同じ 0.9 を掛けてある（ヘッダーだけ縮めると中身が窮屈になるため）。 */
  --header-h: clamp(64px, 12.64vw, 126px);
  --inner-max: 1200px;
  --inner-pad: 5vw;

  /* --- 横方向の基準帯（PC） ---
     上限は 1600px（帯の実幅は 1600 × --band-scale = 1440px）。画面幅 1778px で頭打ちになる。
     以前は 2100px 基準だったが、1920px で本文が 1 行 50 文字、2200px 以上で 55 文字まで
     伸びて読みにくかった（和文の適正は 35〜45 文字）。1600px なら上限 42 文字で収まる。
     ※ 帯の % から逆算している px 上限（ラベル幅・各オフセット）も同じ 1600px 基準にすること。
     ※ 全幅の写真帯（FACILITY / QUALITY の height）はここに追従させない。追従させると
        広い画面で帯が平たくなり、写真が切り詰められて間延びする。
     全セクションの横幅と左右の余白は、この帯 1 つで決まる。
     セクション内の列はすべて帯に対する % なので、--band-scale を変えると
     レイアウト全体が相似に縮み、そのぶん左右の余白が増える。
     1 = 画面いっぱい（原稿どおり）、0.9 = 画面幅の 90% を使う。
     「セクションが横に広がりすぎている／左右の余白をもう少し」というユーザー指摘で
     一度 0.8 にしたが「少し狭くなりすぎた」とのことで 0.9 に戻した（2026-10-17）。
     整列ラインは画面に対して 16.4% / 85.7% → 20.8% / 79.3% に移る。
     vw で指定しているラベル幅・オフセットも同じ係数を掛けないとラインがずれるので、
     それらは calc(… * var(--band-scale)) で書いてある。 */
  --band-scale: 0.9;
  --band-w: min(calc(100% * var(--band-scale)), calc(1600px * var(--band-scale)));
}

@media (width < 800px) {
  :root {
    /* SP は --inner-pad による全幅レイアウトなので、帯の縮小は掛けない */
    --band-scale: 1;
    --header-h: 64px;
    --inner-pad: 6vw;
    /* デザイン案（P6）実測：セクション縦組みラベル（ABOUT/TECHNOLOGY等）は
       本文と違い画面端ぎりぎりまで寄っている（実測 1.5〜3.5vw）。
       本文の余白（--inner-pad）とは別に、ラベル専用の狭い余白を持たせる。 */
    --label-edge-pad: 3vw;
  /* SP の TECHNOLOGY 行で、ラベル幅と余白を Swiper の幅計算に使う（img.c-label-vertical と同値） */
  --tech-label-w: clamp(17px, 5.18vw, 42px);
  --tech-label-gap: clamp(10px, 3vw, 20px);
  }
}

/* ==========================================================================
 * Base
 * ========================================================================== */
html {
  scroll-behavior: smooth;
  background-color: var(--c-bg);
  touch-action: manipulation;
}

body {
  overflow-x: hidden;
  font-family: var(--ff-base);
  font-size: var(--txt-body-size);
  font-weight: var(--txt-body-weight);
  line-height: var(--txt-body-line-height);
  letter-spacing: var(--txt-body-letter-spacing);
  color: var(--c-text);
  background-color: var(--c-bg);
  font-feature-settings: "palt";
}

.l-main {
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
 * Layout / Header
 * ========================================================================== */
/* PC では固定しない（ユーザー指定）。原稿どおりの高さ（画面幅の 12.64%）だと
 * 固定した場合に表示領域を大きく削ってしまうため、ふつうに流す。
 * SP はドロワーの基準になるので下の @media で fixed に戻す。 */
.l-header {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: var(--header-h);
  background-color: var(--c-bg);
}

/* デザイン案 P1 の実測：ロゴの字面はモック幅の 9.34%、その左の余白は 6.53%。
 * 実装の余白が 3vw しかなく「ロゴの回りに余白がない」状態だったのを合わせたもの。 */
.l-header__logo {
  display: flex;
  align-items: center;
  padding-inline: clamp(16px, 6.53vw, 84.6px);
}

.l-header__logo img {
  width: clamp(75px, 9.34vw, 120.6px);
}

.l-header__nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.l-header__list {
  display: flex;
  align-items: center;
  /* 原稿の実測：ナビ項目の間隔は 1440px 換算で 59px（= 4.1vw）。 */
  gap: clamp(18px, 4.1vw, 66px);
}

/* 原稿ではナビの和文が英字の左端に揃っている（中央揃えではない）。
 * RECRUIT ボタンの中だけは原稿でも中央揃え。 */
.l-header__item a {
  display: block;
  text-align: left;
}

.l-header__recruit {
  text-align: center;
}

/* 原稿の実測（1440px 換算）：ナビ項目の幅が 69 / 123 / 79 / 86px。
 * 書体が違うのでラテンの字幅は再現できず、サイズは「組んだときの長さ」で合わせている
 * （TECHNOLOGY が 123px になる値）。ヘッダー自体が画面幅連動なので文字も vw で追従させる。 */
.l-header__en {
  display: block;
  font-family: var(--ff-en);
  font-size: clamp(12px, 1.128vw, 16.29px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.l-header__ja {
  display: block;
  /* 原稿では英字と和文の間が実装より広い（ベースライン間 24px 対 16px @1440） */
  margin-top: 0.35em;
  font-size: clamp(9px, 0.685vw, 9.9px);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--c-text-light);
}

/* 右端の RECRUIT ボタン */
.l-header__recruit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 原稿の実測：ボタンはモック幅の 14.13%（1440px → 204px）。
     ナビとの間隔は 2.8%（40px @1440）。 */
  width: clamp(88px, 14.13vw, 203.4px);
  margin-left: clamp(18px, 2.8vw, 40.5px);
  color: #FFFFFF;
  background-color: var(--c-dark);
}

/* 原稿では RECRUIT だけ他のナビより一回り大きい（英字 23.7px / 和文 14.4px @1440）。 */
.l-header__recruit .l-header__en {
  font-size: clamp(12px, 1.6vw, 23.04px);
}

.l-header__recruit .l-header__ja {
  font-size: clamp(9px, 1vw, 14.4px);
  color: rgba(255, 255, 255, 0.8);
}

/* ハンバーガー */
.l-header__btn {
  display: none;
  position: relative;
  width: var(--header-h);
  height: var(--header-h);
}

.l-header__btn i,
.l-header__btn i::before,
.l-header__btn i::after {
  position: absolute;
  left: 50%;
  width: 26px;
  height: 2px;
  background-color: var(--c-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
  content: "";
}

.l-header__btn i {
  top: 50%;
  transform: translate(-50%, -50%);
}

.l-header__btn i::before {
  top: -8px;
  left: 0;
  transform: none;
}

.l-header__btn i::after {
  top: 8px;
  left: 0;
  transform: none;
}

.l-header__btn.is-open i {
  background-color: transparent;
}

.l-header__btn.is-open i::before {
  top: 0;
  transform: rotate(45deg);
}

.l-header__btn.is-open i::after {
  top: 0;
  transform: rotate(-45deg);
}

.l-header__item--sp {
  display: none;
}

@media (width < 1000px) {
  /* ドロワーが出る幅ではヘッダーを固定する（PC は固定しない）。
     固定する以上、高さは画面幅連動のままだと表示領域を削るので固定値にする
     （デザイン案の SP も実測 55px 相当）。 */
  :root {
    --header-h: 64px;
  }

  .l-header {
    position: fixed;
    top: 0;
    left: 0;
  }

  .l-main {
    padding-top: var(--header-h);
  }

  html {
    scroll-padding-top: var(--header-h);
  }

  .l-header__btn {
    display: block;
    order: 2;
    margin-left: auto;
  }

  .l-header__recruit {
    order: 3;
    width: auto;
    min-width: 72px;
    padding-inline: 14px;
    margin-left: 12px;
  }

  .l-header__recruit .l-header__en {
    font-size: var(--fz11);
  }

  .l-header__recruit .l-header__ja {
    font-size: var(--fz9);
  }

  .l-header__nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: 100%;
    height: calc(100dvh - var(--header-h));
    padding: 8vh var(--inner-pad);
    overflow-y: auto;
    background-color: var(--c-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .l-header.is-open .l-header__nav {
    opacity: 1;
    visibility: visible;
  }

  .l-header__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .l-header__item {
    border-bottom: 1px solid var(--c-line);
  }

  .l-header__item a {
    padding: 1.4em 0;
    text-align: left;
  }

  .l-header__list .l-header__en {
    font-size: var(--fz16);
  }

  .l-header__list .l-header__ja {
    font-size: var(--fz11);
  }

  .l-header__item--sp {
    display: block;
  }
}

/* ==========================================================================
 * Layout / Footer
 * ========================================================================== */
.l-footer {
  position: relative;
  padding: clamp(60px, 8vw, 100px) var(--inner-pad) clamp(30px, 4vw, 50px);
  text-align: center;
}

.l-footer__inner {
  max-width: var(--inner-max);
  margin-inline: auto;
}

/* 原稿の実測：ロゴは画面幅の 21.2%（1440px で 305px）。旧実装の 160px は半分ほどだった。 */
.l-footer__logo {
  /* 原稿は画面幅の 21.2% だったが、実際の画面では大きすぎるというユーザー判断で
     65% に縮めた（2026-10-18）：21.2 × 0.65 = 13.78vw、上限 339.2 × 0.65 = 220.5px。
     上限の基準は非推奨の --layout-max ではなく実数で持つ。 */
  width: min(13.78vw, 220.5px, 80vw);
  margin: 0 auto clamp(20px, 3vw, 34px);
}

/* 原稿ではリンク 3 本とコピーライトが行間 43px（@1440）で詰まって並ぶ。
 * 旧実装は 0.6em 空けたうえに文字が小さく、間延びして見えていた。 */
.l-footer__list {
  display: flex;
  flex-direction: column;
  /* li をテキスト幅まで縮める。既定の stretch のままだと li が全幅になり、
     中の a（display: block）もそれに合わせて広がってクリック領域が行全体になる。 */
  align-items: center;
  gap: 0;
  margin-bottom: 0;
}

/* 行送りは li 側で持たせる。a に padding を付けると、その分だけ
   クリック領域がテキストの外へ広がってしまう。 */
.l-footer__item {
  padding-block: 0.18em;
}

/* 原稿の実測：「Security Policy」の字面が 219px（@1440）。 */
.l-footer__item a {
  display: block;
  font-family: var(--ff-en);
  /* 原稿の実測から起こした 1.75vw（1440px で 25.2px）は本文より大きく、フッターとして過大。
     本文は原稿比 0.8 倍にしてあるのにここだけ原稿のままだったので、同じ 0.8 を掛けた
     （ユーザー指示 2026-10-17）。1440px で 20.2px。下限 11px は SP 用で据え置き。 */
  /* 2026-10-17 に原稿比 0.8 倍（1.4vw）にしたが、まだ大きいとのことで
     さらに縮めた（2026-10-18）：1.2vw / 上限 19.2px。1440px で 17.3px。 */
  font-size: clamp(11px, 1.2vw, 19.2px);
  line-height: 1.3;
  letter-spacing: 0.12em;
}

.l-footer__copy {
  /* 原稿ではコピーライトも上のリンクとほぼ同じ大きさ（1 文字 15.2px 対 14.6px @1440）。
     リンクを 0.8 倍したので、上下の関係が崩れないよう同じ係数を掛けてある。 */
  margin-top: 0.3em;
  font-family: var(--ff-en);
  font-size: clamp(10px, 1.16vw, 18.4px);
  line-height: 1.3;
  letter-spacing: 0.08em;
}

/* SP は PC と構成が違う。デザイン案（SP）の実測：
 *   ロゴが左（10.2%〜31.3%、幅 21.3%）、リンクとコピーライトは右揃え（右端 92.2%）、
 *   4 行が行ピッチ 3.4%（390px で 13px）で詰まって並ぶ。
 * PC のような「中央寄せの縦積み」ではない。 */
@media (width < 800px) {
  .l-footer {
    padding-inline: 0;
    /* 右下の「トップへ戻る」ボタン（48px + 余白 20px）とテキストが重ならないようにする */
    padding-bottom: 88px;
    text-align: left;
  }

  .l-footer__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding-inline: 10.2% 7.8%;
  }

  .l-footer__logo {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 21.3vw;
    margin: 0;
  }

  .l-footer__list {
    grid-column: 2;
    grid-row: 1;
    /* PC の中央寄せを解除して右端に揃える（li はテキスト幅のまま） */
    align-items: flex-end;
    text-align: right;
  }

  .l-footer__item {
    padding-block: 0;
  }

  .l-footer__copy {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    text-align: right;
  }

  .l-footer__item a {
    line-height: 1.2;
  }
}

/* bottom が 20px ではなく 88px なのは reCAPTCHA v3 のバッジを避けるため。
 * バッジは Google が bottom: 14px / height: 60px / z-index: 2000000000 で固定する
 * ので下端から 74px を占め、z-index もこちらの 900 を大きく上回る。20px のままだと
 * バッジがボタンを覆って見えなくなる（2026-10-19、テストサイトで実際に発生）。
 * 88px = バッジの 74px + 余白 14px。バッジ側を動かさないのは、ホバーで幅 256px に
 * 展開したときに本文へかぶらないようにするため。 */
.l-footer__btn {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 900;
  width: 48px;
  height: 48px;
  background-color: var(--c-dark);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.l-footer__btn.is-show {
  opacity: 1;
  visibility: visible;
}

.l-footer__btn::before {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  transform: translate(-50%, -50%) rotate(-45deg);
  content: "";
}

/* ==========================================================================
 * Component / 見出し・テキスト
 * ========================================================================== */
.c-ttl {
  margin-bottom: 1em;
  font-size: calc(var(--txt-body-size) * 1.36);   /* デザイン案比 1.36 */
  font-weight: 700;
  line-height: 1.7;
  /* 同上。見出しはデザイン案でさらに字間が広い */
  letter-spacing: 0.26em;
}

/* SP は字間を詰める（ユーザー指定 2026-10-20）。
 * メディアクエリは詳細度を上げないので、必ず基本ルールより後ろに置くこと。 */
@media (width < 800px) {
  .c-ttl {
    letter-spacing: 0.14em;
  }
}

/* 縦組みテキスト */
.c-txt-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1.9;
  letter-spacing: 0.12em;
}

/* セクションの縦組み英字ラベル（ABOUT / TECHNOLOGY / COMPANY PROFILE …）。
 * 2026.10.16 版デザインで支給された画像ラベル（assets/images/labels/）を使う。
 *   画像には既に読み方向（回転）が焼き込まれているため、CSS 側では回転させない。
 *   幅だけを指定し、高さは画像の比率に委ねる。
 *   デザイン案の実測（P1 / P2 のモック幅 393px に対し字面 14px）：
 *   字面（ink）の幅 ＝ 画面幅の 3.56%。
 *   支給画像は ink 幅が画像幅の 93.3% なので、指定幅は 3.56 / 0.933 ≒ 3.8vw。
 *   clamp の上限は --layout-max（1600px）に達したときの値で止める。 */
.c-label-vertical {
  display: block;
  flex: none;
}

/* サイズは img だけに効かせる（.c-label-vertical 自体は配置専用）。
 * 上限は 61px（＝1600px 時代の値）ではなく、他のレイアウトと同じ 2100px の帯で頭打ちにする。
 * 幅を px で止めてしまうと、% で置いているラベルの位置が広い画面でラインからずれる
 * （1920px で ABOUT のラベル右端が 85.7% → 84.0% まで内側に入り込んでいた）。 */
img.c-label-vertical {
  width: max(22px, min(calc(3.8vw * var(--band-scale)), calc(60.8px * var(--band-scale))));   /* 60.8px = 1600px × 3.8% */
  height: auto;
}

/* SP ではラベルが相対的に大きい。デザイン案 P6 の実測で字面の幅が画面幅の 4.83%
 * （PC の 3.56% より大きい）。画像幅に直すと 4.83 / 0.933 ≒ 5.18vw。 */
@media (width < 800px) {
  img.c-label-vertical {
    width: clamp(17px, 5.18vw, 42px);
  }
}

/* flex コンテナ内での配置（DOM 順に依存させない）
 * デザイン案のルール：
 *   左側のラベル（TECHNOLOGY / QUALITY / CONTACT）は下から上に読ませる
 *   右側のラベル（ABOUT / FACILITY / PEOPLE / ACCESS）は上から下に読ませる */
.c-label-vertical--left {
  order: -1;
  align-self: flex-start;
}

.c-label-vertical--right {
  order: 99;
  align-self: flex-start;
}

/* 読み方向の反転。
 * 支給画像は TOP での向きで作られているため、同じラベルが下層ページで
 * 反対側に置かれる場合だけ付ける：FACILITY / PEOPLE / COMPANY PROFILE の下層ページ。
 * `transform: rotate()` を使う。u-fade-in 側は個別プロパティの translate を使っているので
 * 両者は競合しない（rotate プロパティで書くと img では視覚的に反映されなかった）。 */
.c-label-vertical--flip {
  transform: rotate(180deg);
}

/* 矢印付きテキストリンク（〜>>） */
/* デザイン案の実測では、リンクの 1 文字送り（27.6px @1440）は本文（26.7px）とほぼ同じ。
 * letter-spacing 0.14em を差し引いた font-size も本文と一致するので、本文サイズをそのまま使う。 */
.c-link-arrow {
  display: inline-block;
  font-size: var(--txt-body-size);
  font-weight: 500;
  /* 原稿のリンクは本文よりはっきり字間が広い。実測（1440px 換算）で
     和文「私たちについて>>」が 283px、ラテン「VIEW PRODUCTS>>」が 334px。
     両方に合う値が 0.32em（和文 277px / ラテン 338px）。
     0.45em まで広げるとラテンが伸びて QUALITY のパネルから溢れる。 */
  letter-spacing: 0.32em;
  color: var(--c-accent);
}

.c-link-arrow::after {
  margin-left: 0.4em;
  content: ">>";
}

/* ボタン */
/* 原稿の実測（1440px 換算）：ボタンは 305×42px、文字は 22px、地色はくすんだ青緑 #6FA0AC。
 * 旧実装はミント（#A8D8DC）の 200×46px・12px で、色も大きさも違っていた。 */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 帯（--band-scale）に追従させる。帯を縮めたときにボタンだけ元の幅のままだと、
     CONTACT の 2 枚のカードが横に並びきらず折り返す。 */
  width: clamp(calc(180px * var(--band-scale)), calc(21.2vw * var(--band-scale)), calc(339px * var(--band-scale)));
  max-width: 100%;
  padding: 0.45em 1em;
  font-size: clamp(12px, 1.53vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.16em;
  color: #FFFFFF;
  background-color: var(--c-teal);
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.c-btn::after {
  margin-left: 0.5em;
  content: ">>";
}

/* パンくず（下層ページ用）
 * デザイン案に l-heading のような見出しバナーはなく、ヘッダー直下に来る。
 * 固定ヘッダー分の逃げは呼び出し側で .l-main の中に置くことで確保する
 * （l-heading を使う旧テンプレートと二重に効かせないため）。 */
/* 原稿ではパンくずの左端が本文の左端と揃っている（p2 でどちらも 19.5%）。
 * 実装の下層ページは本文列を 25% で統一しているので、パンくずもそこに合わせる。 */
.l-breadcrumb {
  /* パンくずから見出しまでが空きすぎていたので、ここの下余白と
     直後のセクションの上余白をそれぞれ半分にした（ユーザー指定 2026-10-18）。
     1440px の ABOUT で 140px → 70px。上余白はヘッダーとの間隔なので据え置き。 */
  padding: 20px 0 10px;
}

.l-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  /* % のパディングは「自分の幅」ではなく「包含ブロックの幅」に対して解決されるので、
     max-width で帯に収めたうえで padding-left: 22.8% と書くと、帯を縮めたときだけ
     パディングが取り残されて本文列より右にずれる（帯 0.8 のとき 32.8% になっていた）。
     margin で帯の 22.8% の位置に置く方式に変えてある。 */
  margin-left: calc((100% - var(--band-w)) / 2 + var(--band-w) * 0.228);
  margin-right: auto;
  font-size: var(--fz10);
  letter-spacing: 0.08em;
  color: var(--c-text-light);
}

/* SP は本文が全幅なので、左の余白は --inner-pad に戻す */
@media (width < 800px) {
  .l-breadcrumb__list {
    /* PC の margin-left（帯の 22.8%）を解除しないと SP でも右に寄ったままになる */
    margin-left: 0;
    padding-left: var(--inner-pad);
  }
}

.l-breadcrumb__item + .l-breadcrumb__item::before {
  margin-right: 0.4em;
  content: "»";
}

/* 下層ページの中見出し（会社概要／沿革など、c-ttl より一段小さい） */
.c-ttl-sub {
  margin-bottom: 1.2em;
  font-size: calc(var(--txt-body-size) * 1.15);
  font-weight: 700;
  letter-spacing: 0.15em;
}

/* ラベル＋値の定義リスト（COMPANY PROFILE / HISTORY で共用） */
/* 原稿（p2）の行ピッチは 55px（@1440）。line-height 2 の本文に 0.6em の上下パディングを
 * 足すと 78px になり広すぎたので、パディングを詰めて行高も単独で指定する。 */
.c-dl-table > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4em;
  padding-block: 0.1em;
  line-height: 2;
}

/* dt は「主要製品及び加工内容」が 1 行に収まる幅。これより狭くすると会社概要の項目名が
 * 折り返し、広くすると沿革の dd が足りなくなる。 */
.c-dl-table dt {
  width: 10em;
  flex-shrink: 0;
  font-weight: 500;
}

.c-dl-table dd {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
}

@media (width < 800px) {
  .c-dl-table dt {
    width: 100%;
    margin-bottom: 0.2em;
  }
}

/* ==========================================================================
 * Project / A1 ファーストビュー
 * ========================================================================== */
.p-visual {
  position: relative;
}

/* 2026.10.16 版のデザインでは、ファーストビューの 3 枚はコピー（「まっすぐ、ものづくり。」
 * MADE WITH PRIDE 等）を焼き込んだ完成画像として支給された。文字を HTML で重ねる組み方をやめ、
 * PC 用・SP 用の画像をそのまま出し分ける。文言は alt と sr-only の h1 が保持する。 */
.p-visual__slide {
  display: block;
}

.p-visual__img,
.p-visual__img img {
  display: block;
  width: 100%;
}

.p-visual__img img {
  height: auto;
}

/* ==========================================================================
 * Project / A2 ABOUT
 * ========================================================================== */
.p-about {
  padding: clamp(60px, 9vw, 120px) 0;
}

/* デザイン案の実測：本文 16.4%〜78.2% / ABOUT ラベル 81.9% */
.p-about__inner {
  display: grid;
  grid-template-columns: 16.4% minmax(0, 62%) 1fr;
  align-items: start;
  /* カラムは % 指定なので、上限を設けないと広い画面で1行が長くなりすぎる。
     1600px で頭打ちにして中央寄せ（CONTACT / ACCESS も同じ考え方）。 */
  max-width: var(--band-w);
  margin-inline: auto;
}

.p-about__body {
  grid-column: 2;
  min-width: 0;
}

.p-about__inner > .c-label-vertical {
  grid-column: 3;
  justify-self: start;
  /* 列 3 は 78.4% から。ここに 3.5% 足してラベル幅 3.8% を置くと、
     右端がちょうど整列ライン（85.7%）に乗る。上限は 2100px の帯に合わせる。 */
  margin-left: max(14px, min(calc(3.5vw * var(--band-scale)), calc(56px * var(--band-scale))));   /* 56px = 1600px × 3.5% */
}

.p-about__body p + p {
  margin-top: 1.6em;
}

@media (width < 1000px) {
  .p-about__inner {
    grid-template-columns: 10% minmax(0, 74%) 1fr;
  }
}

@media (width < 800px) {
  .p-about {
    padding-inline: var(--inner-pad);
  }

  .p-about__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .p-about__body {
    grid-column: 1;
  }

  .p-about__inner > .c-label-vertical {
    grid-column: 2;
    margin-left: clamp(10px, 3vw, 20px);
    margin-right: calc(var(--label-edge-pad) - var(--inner-pad));
  }
}

/* ==========================================================================
 * Project / B1 TECHNOLOGY
 * ========================================================================== */
.p-technology {
  position: relative;
  padding-block: clamp(60px, 9vw, 120px) clamp(70px, 10vw, 140px);
  /* 行の左右位置は __inner 側の % で決めるので、PC では padding を持たせない。
     padding があると __inner の % がその内側で解決され、ABOUT と左端が揃わなくなる
     （西条チタン村バナーで踏んだのと同じ罠）。SP 用の padding は下の @media で入れ直す。 */
  padding-inline: 0;
  background-color: var(--c-mint);
}

/* デザイン案 P1 の実測（モック幅に対する比）：
 *   ラベル 17.1%〜20.5% ／ 本文 23.1%〜52.4%（幅 29.3%）／ 写真 57.6%〜86.2%（幅 28.6%）
 * 行全体は 69.1% で、他セクションの --inner-max（1200px）より狭い。 */
.p-technology__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 2.6vw, 42px);
  /* ABOUT と同じ帯（最大 2100px）を基準に、その左から 16.4% の位置に幅 69.1% で置く。
     原稿 P1 の実測でも TECHNOLOGY のラベル左端 16.28% は ABOUT の本文左端 16.19% と
     揃っており、写真の右端 86.5% も ABOUT のラベル右端 85.2% とほぼ一致する。
     以前は max-width: min(69.1vw, --layout-max * 0.691) の中央寄せだったが、
     --layout-max（1600px）で頭打ちになるのはこのセクションだけなので、
     広い画面では TECHNOLOGY だけが内側に入り込んで左端が揃わなかった
     （1440px では 15.45% で揃って見えるが、2032px では 22.8% まで食い込む）。
     ここで grid を使ってはいけない理由は下の SP ブロックのコメントを参照。 */
  --tech-band: var(--band-w);
  width: calc(var(--tech-band) * 0.691);
  margin-left: calc((100% - var(--tech-band)) / 2 + var(--tech-band) * 0.164);
  margin-right: auto;
}

.p-technology__body {
  flex: none;
  width: 42.4%;   /* 行全体 69.1% のうち 29.3% */
}

/* 写真スライド（2026.10.16 版で動画から差し替え）。
 * PC は原稿の実測どおり幅 28.6%（行の 41.4%）・縦長 0.87:1、SP は横長 16:9。
 * margin-left: auto で右端に寄せ、本文との間だけ広い余白（原稿 5.2%）を作る。 */
.p-technology__slider {
  width: 41.4%;
  flex-shrink: 0;
  margin-left: auto;
}

.p-technology__slider img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 0.87;
  object-fit: cover;
}

/* FACILITY / QUALITY への導線（2026-10-20、ディレクター指示で SCROLL と差し替え）。
 * PC の本文列は帯の 29.3%（1440px で約 380px）しかなく、c-link-arrow は
 * 和文「TECH21 の設備>>」が 277px、ラテン「VIEW PRODUCTS>>」が 338px あるので、
 * 横並びにすると必ず折り返す。初めから縦に積む。
 * 文言は TOP の FACILITY / QUALITY セクションと同じ（コピーデッキ p10 由来）。
 * SP には既に「TECH21のテクノロジーの詳細はこちら」があるので、下の @media で隠す。 */
.p-technology__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8em;
  /* 余白は vw ではなく em で持たせる（文字サイズが clamp で頭打ちになる幅でも
     文字と余白の比が崩れないようにするため。SCROLL と同じ考え方）。 */
  margin-top: 2em;
}

/* SP（2026.10.16 版で変更）：PC の「ラベル／本文／写真」の横並びをやめ、
 * 上段に「ラベル＋写真」、下段に本文を置く縦積みにする。
 * DOM 順（ラベル → 本文 → 写真）に依存しないよう grid の行列を明示する。 */
@media (width < 800px) {
  /* ※ ここで grid を使ってはいけない。Swiper を grid セルに入れると、Swiper の幅測定と
     トラックの幅計算が互いを参照して発散し、スライド幅が 2^25px まで膨らむ
     （CLAUDE.md の「grid-area: 1/1 に Swiper を重ねるな」と同じ罠。列を分けても起きる）。
     flex-wrap で 1 行目に「ラベル＋写真」、2 行目に本文を置き、
     Swiper には calc() で確定した幅を直接与える。 */
  /* デザイン案（SP）の実測：ラベル 3.6%〜8.0%、写真 14.1%〜88.6%（幅 74.5%・比率 1.73）、
     見出しと本文は 14.5% から。ラベルの上端は写真の上端に一致する。 */
  .p-technology {
    /* 原稿の SP ではミント帯の上下余白が狭い（上 7.7% / 下 8.5%）。
       PC 用の clamp 下限（60px / 70px）だと空きすぎる。 */
    padding-block: 7.7vw 8.5vw;
    padding-inline: 0;
  }

  .p-technology__inner {
    flex-wrap: wrap;
    /* ラベル右端 8.8% と写真左端 14.1% の差。% ではなく vw で指定する */
    column-gap: 5.3vw;
    align-items: flex-start;
    /* PC の width / margin-left（帯の 16.4% から 69.1%）を解除しないと、
       SP でも中央の狭い帯に収まってしまう */
    width: auto;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 3.6% 11.4%;
  }

  .p-technology__inner > .c-label-vertical {
    margin-left: 0;
  }

  .p-technology__slider {
    order: 0;
    width: 87.6%;   /* inner（幅 85%）に対して。画面幅では 74.5% */
    /* PC の margin-left: auto を解除しないと gap が潰れる */
    margin-left: 0;
  }

  .p-technology__slider img {
    aspect-ratio: 1.73;
  }

  .p-technology__body {
    order: 1;
    flex: none;
    width: 100%;
    padding-left: 12.8%;
    margin-top: clamp(18px, 4vw, 30px);
  }

  .p-technology__links {
    display: none;
  }
}

/* ==========================================================================
 * Project / B2 FACILITY
 * ========================================================================== */
/* デザイン案（P1 B2）の構造：
 * 画面幅いっぱいの写真が1枚あり、その上に「半透明の白パネル」が乗る。
 * パネル越しに背景の写真がうっすら透けて見える。
 * 位置・透明度はデザイン案から実測：左 52% / 幅 34% / 白 88%。 */
.p-facility {
  padding: clamp(50px, 7vw, 90px) 0;
}

.p-facility__inner {
  position: relative;
}

.p-facility__img {
  /* 原稿の実測：帯の高さは画面幅の 51.3%＝写真の元比率（1.95:1）そのまま。
     px で高さを止める（旧 clamp(380px, 46vw, 660px)）と画面が広いほど帯が平たくなり、
     object-fit: cover で写真の上下が切り詰められて間延びして見える
     （1440px で 2.18:1、1920px で 2.91:1 になっていた）。
     上限は他と同じ 2100px の帯に達したときの高さで止める。 */
  height: min(51.3vw, 1077px);
  overflow: hidden;
}

.p-facility__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* パネルの位置・幅も上限幅 1600px の枠内で決める（広い画面で間延びしないように） */
.p-facility__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  /* デザイン案 P1 の実測（2026-10-16 に再測定）：パネルは 52.5%〜86.1%、幅 33.6%。
     56% / 28% だと本文の折り返し幅が足りず、リンクが 2 行に割れる。 */
  /* 基準は --layout-max（1600px）ではなく、他のセクションと同じ 2100px の帯。
     1600px で頭打ちにしていたため、1920px の画面ではパネルごと内側に寄って
     FACILITY のラベルが ABOUT のラインから 6% もずれていた。 */
  --band: var(--band-w);
  left: calc((100% - var(--band)) / 2 + var(--band) * 0.52);
  display: flex;
  align-items: center;
  /* 原稿のパネルは 52.5%〜86.1%（幅 33.6%）だが、ラベルの右端を整列ライン（帯の 85.7%）に
     乗せたうえで、原稿と同じだけ（約 2%）ラベルの右に白を残す必要がある。
     そのため右端を 87.7% まで伸ばして幅 35.7% とし、右の余白 2% をラベルの外側に取る。
     （右余白を 0.3% まで詰めるとラベルがパネルの端に貼り付いて見える） */
  width: calc(var(--band) * 0.357);
  padding: clamp(20px, 3vw, 44px) calc(var(--band) * 0.02) clamp(20px, 3vw, 44px) calc(var(--band) * 0.024);
  /* ベースカラーはユーザーが PDF 上で確認した #ffffff（2026-10-16）。
     不透明度は、パネルの境界をまたいで内外の色を突き合わせた推定。
     背景が暗い箇所ほど誤差が小さく、そこでは 0.94〜0.97 に収束した（中央値 0.94）。 */
  background-color: rgba(255, 255, 255, 0.94);
}

/* ラベルと本文は上端を揃え、そのまとまりをパネルの縦中央に置く */
.p-facility__group {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.6vw, 24px);
  width: 100%;
}

.p-facility__txt {
  flex: 1;
  min-width: 0;
}

@media (width < 1000px) {
  .p-facility__panel {
    left: 44%;
    width: 50%;
  }
}

/* SP は写真の下に白地でテキスト（デザイン案 P6）。パネルを通常フローに戻す */
@media (width < 800px) {
  /* デザイン案（SP）の実測：写真 0.3%〜87.6%（幅 87.3%・比率 1.97）、
     ラベルはその右外（右端から 3.1%）、本文は 14.6% から。
     QUALITY と左右対称の構成で、写真は全幅ではなく右に余白を残す。 */
  .p-facility__img {
    width: 87.3%;
    height: auto;
  }

  .p-facility__img img {
    height: auto;
    aspect-ratio: 1.97;
  }

  .p-facility__panel {
    position: static;
    left: auto;
    width: 100%;
    padding-inline: 14.6% var(--inner-pad);
    background-color: var(--c-bg);
  }

  /* デザイン案（SP）ではラベルだけ写真に乗ったまま。本文パネルだけが
     通常フローで写真の下に落ちるので、ラベルは写真の高さ基準で
     独立して絶対配置し直す。上端は写真の上端にほぼ一致する。 */
  .p-facility__panel .c-label-vertical {
    position: absolute;
    top: 0;
    right: 3.1%;
    transform: none;
  }
}

/* ==========================================================================
 * Project / B3 QUALITY
 * ========================================================================== */
.p-quality {
  padding: 0;
  color: #FFFFFF;
  background-color: var(--c-navy);
}

/* デザイン案（P1 B3）の構造：FACILITY と同じく「写真の上に半透明パネル」。
 * ただしパネルは黒。実測値 → 左 13% / 幅 37% / 黒 45%、帯の縦横比 2.27:1
 * ※ 2026.10.16 版でスライダーは廃止され、写真 1 枚になった（構造図 P14 の
 *   ビジュアル欄から「スライド」の記載が消えている）。 */
.p-quality__inner {
  position: relative;
}

.p-quality__img {
  width: 100%;
}

.p-quality__img img {
  display: block;
  width: 100%;
  /* 原稿の実測は FACILITY と同じ 1.95:1（写真の元比率）。
     旧値 2.27 は測り損ねで、写真が上下に切り詰められていた。 */
  aspect-ratio: 1.95;
  max-height: 1077px;
  object-fit: cover;
}

.p-quality__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  /* FACILITY と同じく 2100px の帯基準にする（--layout-max だと広い画面で右へずれる）。 */
  --band: var(--band-w);
  left: calc((100% - var(--band)) / 2 + var(--band) * 0.13);
  z-index: 2;
  display: flex;
  align-items: center;
  width: calc(var(--band) * 0.37);
  /* パネルの左端は 13%。左の余白を 3.4% 取ると、ラベルの左端が
     整列ライン（帯の 16.4%）に乗る。 */
  padding: clamp(20px, 3vw, 44px) calc(var(--band) * 0.024) clamp(20px, 3vw, 44px) calc(var(--band) * 0.034);
  /* ベースカラーはユーザーが PDF 上でスポイトした #231815（2026-10-16）。
     不透明度は原稿に記載がなく、パネルの境界付近で内外の色を突き合わせた推定が 0.5 前後
     （写真の内容が境界で変わるため 0.02〜0.89 とばらつく）。現状は 0.45 を採用。 */
  background-color: rgba(35, 24, 21, 0.45);
}

.p-quality__group {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.6vw, 24px);
  width: 100%;
}

.p-quality__body {
  flex: 1;
  min-width: 0;
}

@media (width < 1000px) {
  .p-quality__panel {
    left: 7%;
    width: 54%;
  }
}

/* SP は写真の下に白地でテキスト（デザイン案 P6） */
@media (width < 800px) {
  .p-quality {
    color: var(--c-text);
    background-color: var(--c-bg);
  }

  /* デザイン案（SP）の実測：写真 14.5%〜99.3%（幅 85.1%・比率 1.93）、
     ラベルはその左外 2.7%〜8.0%、本文は 15.4% から。
     写真を全幅にしてラベルを重ねるのは誤りだった。 */
  .p-quality__img {
    width: 85.5%;
    margin-left: 14.5%;
  }

  .p-quality__img img {
    aspect-ratio: 1.93;
  }

  .p-quality__panel {
    position: static;
    left: auto;
    width: 100%;
    padding: clamp(24px, 6vw, 40px) var(--inner-pad) clamp(24px, 6vw, 40px) 15.4%;
    background-color: transparent;
  }

  /* デザイン案（P6）ではラベルは写真の左脇に、写真と同じ高さで乗ったまま。
     本文パネルだけが通常フローで写真の下に落ちるので、ラベルは写真の
     高さ基準で独立して絶対配置し直す（写真の縦中央）。
     ※ .p-quality__panel の z-index: 2 は position: static になると効かなくなる
     （z-index は positioned 要素にしか効かない）ので、ラベル自身に持たせる。 */
  .p-quality__panel .c-label-vertical {
    position: absolute;
    z-index: 2;
    /* 写真（左 14.5%・幅 85.1%・比率 1.93）の上端から 3.3% の位置に上端を置く */
    top: calc(100vw * 0.851 / 1.93 * 0.033);
    left: 2.7%;
    transform: none;
  }
}

/* ==========================================================================
 * Project / C PEOPLE
 * ========================================================================== */
/* 原稿では写真の下端から RECRUIT バナーまでが 4.96%（1440px で 71px）しかない。
   clamp(60px, 9vw, 120px) だと 120px 空いて離れすぎる。 */
.p-people {
  padding: clamp(50px, 7vw, 112px) 0 clamp(36px, 4.96vw, 79px);
  background-color: var(--c-bg);
}

/* PC では PEOPLE と RECRUIT バナーの間が空きすぎるので下余白を半分にする（ユーザー指定 2026-10-16） */
@media (width >= 800px) {
  .p-people {
    padding-bottom: clamp(18px, 2.48vw, 40px);
  }
}

/* デザイン案 P1（右カラム）の実測：
 *   写真 7.6%〜55.2%（幅 47.6%）／ 本文 55.9%〜78.5%（幅 22.6%）／ ラベル 80.4%〜84.7%
 * 行全体は 77.1% で、他セクションの --inner-max（1200px）より広い。
 * 旧実装は写真が 26%（1920px 時）しかなく、人物が小さく写っていた。 */
.p-people__inner {
  position: relative;
  display: flex;
  /* 原稿では写真とテキストが上端から始まる（上下中央揃えではない） */
  align-items: flex-start;
  gap: 0.9%;
  /* 上限は他のセクションと同じ 2100px の帯で揃える（--layout-max × 0.771 = 1234px で
     止めると、1920px の画面で写真が 39.6% まで縮み、原稿の 47.6% より明らかに小さくなる）。 */
  --band: var(--band-w);
  max-width: calc(var(--band) * 0.771);
  /* 原稿では行全体が 7.6%〜84.7% と中央より左に寄っている（中央寄せではない）。
     2100px を超えたら帯ごと中央に寄せる（他セクションと同じ挙動にするため）。 */
  margin-left: calc((100% - var(--band)) / 2 + var(--band) * 0.076);
  margin-right: auto;
}

/* 写真は画面幅の 40.5%（行全体 77.1% のうち 52.6%）。
   原稿と重ねると 45% だが、それだと大きいというユーザー判断で 90% に縮めた値。 */
.p-people__img {
  width: 52.6%;
  flex-shrink: 0;
}

/* 支給画像は背景を抜いた切り抜き（人物＋吹き出し）。支給時は右に 45% の透明余白が
 * 入っていて人物とテキストが大きく離れて見えたので、余白を切り落として配置してある
 * （結果 1.01:1 のほぼ正方形）。トリミングはしない。 */
.p-people__img img {
  display: block;
  width: 100%;
  height: auto;
}

.p-people__body {
  flex: none;
  width: 29.3%;   /* 行全体 77.1% のうち 22.6% */
}

/* ラベルは行の右端まで送って、右端を整列ライン（帯の 85.7%）に乗せる。
 * 行自体は 7.6%〜84.7% なので、残り 1% ぶんを負のマージンで外に出す
 * （原稿でもラベルだけが行の右端から少しはみ出して 85.2% まで来ている）。
 * ここで % を使うと __inner の幅（77.1%）に対する割合になってしまうので vw で指定する。 */
.p-people__inner > .c-label-vertical {
  margin-left: auto;
  margin-right: calc(min(calc(1vw * var(--band-scale)), calc(16px * var(--band-scale))) * -1);   /* 16px = 1600px × 1% */
}

@media (width < 800px) {
  /* PC 用の横並び（写真 52.6% / 本文 29.3% / 行全体 77.1% を左寄せ）を全部戻す。
     これを戻し忘れると、SP でも写真と本文が数十％幅のまま縦に積まれて崩れる。 */
  /* デザイン案（SP）の実測（画面幅に対する比）：
   *   写真 23.3%〜70.1%（幅 46.8%）／ 本文 15.6%〜87.6% ／ ラベル 89.6%〜94.7%
   * 写真は全幅ではなく中央やや左に置かれ、本文はそれより左から始まる。
   * 本文の左右を inner の padding として持たせ、写真はその中で margin-left で寄せる。 */
  .p-people__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 15.6% 12.4%;
  }

  .p-people__img {
    width: 65%;      /* inner（幅 72%）に対して。画面幅では 46.8% */
    margin-left: 10.7%;
  }

  .p-people__body {
    width: 100%;
    margin-top: clamp(18px, 4vw, 30px);
  }

  /* デザイン案（P6）ではラベルは写真の右脇に、写真と同じ高さで乗ったまま。
     本文は通常フローで写真の下に落ちるので、ラベルは写真の高さ基準で
     独立して絶対配置し直す（写真の縦中央）。
     写真は切り抜き後 1.01:1 なので、高さは「内側の幅 ÷ 1.01」。 */
  .p-people__inner > .c-label-vertical {
    position: absolute;
    /* ラベルの上端を写真の上端に合わせる（ユーザー指定）。
       translateY(-50%) で中心を置くので、写真の高さ（46.8vw ÷ 1.01）に対して
       ラベル高さの半分ぶん下げた位置を指定する。ラベルは幅の 5.08 倍の高さ。 */
    top: calc(100vw * 0.0518 * 5.08 / 2);
    right: 5.3%;
    margin-left: 0;
    transform: translateY(-50%);
  }
}

/* ==========================================================================
 * Project / D1 RECRUIT バナー
 * ========================================================================== */
.p-recruit {
  position: relative;
}

.p-recruit__link {
  position: relative;
  display: block;
}

/* PEOPLE ページ下部の横長バナーは全幅ではない。原稿（p4）は 20.53%〜82.29% だが、
   **すぐ上のインタビュー写真と同じ幅に揃える**というユーザー指定（2026-10-18）で、
   インタビュー本文と同じ列（帯の 22.8%〜79%）にしてある。
   TOP で使う通常版は全幅のままなので、横長版の修飾子だけに効かせる。 */
.p-recruit--wide .p-recruit__link {
  width: calc(var(--band-w) * 0.562);
  margin-left: calc((100% - var(--band-w)) / 2 + var(--band-w) * 0.228);
}

@media (width < 800px) {
  /* SP は全幅に戻す */
  .p-recruit--wide .p-recruit__link {
    width: auto;
    margin-left: 0;
  }
}

/* 2026.10.16 版の支給バナーはコピー焼き込み済みの完成画像。
 * トリミングせず、素の比率（TOP 用 1.95:1 / 横長版 3.42:1）のまま出す。 */
.p-recruit__bg {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--c-mint-light);
}

/* ==========================================================================
 * Project / D2 CONTACT
 * ========================================================================== */
.p-contact {
  padding: clamp(60px, 9vw, 120px) 0 clamp(40px, 5.5vw, 88px);
}

/* ACCESS と同じコンテンツ列（全幅の 58%・中央寄せ）に揃える。
 * デザイン案では CONTACT の本文・ボタン・SNS アイコンがすべて
 * ACCESS のマップ左端と同じ位置から始まっている。 */
/* 原稿では CONTACT の本文が 22.8% から、ACCESS の地図が 14.8% から始まるが、
 * ユーザーの指示で「地図も CONTACT の左位置から」揃えることにした（2026-10-16）。
 * 右端は地図の 78.6% に合わせ、共通の列を 22.8%〜79% とする。 */
.p-contact__inner {
  display: grid;
  grid-template-columns: 22.8% minmax(0, 56.2%) 1fr;
  align-items: start;
  /* 列が viewport の % で決まっているので、--layout-max で中央寄せすると広い画面で
     左端が原稿とずれる（1920px で 22.8% のはずが 27% になる）。実寸で頭打ちにする。 */
  max-width: var(--band-w);
  margin-inline: auto;
}

.p-contact__inner > .c-label-vertical {
  grid-column: 1;
  justify-self: end;
  /* 列 1 の右端は 22.8%。そこから 2.6% + ラベル幅 3.8% を戻すと、
     左端が整列ライン（16.4%）に乗る。上限は 2100px の帯に合わせる。 */
  margin-right: max(12px, min(calc(2.6vw * var(--band-scale)), calc(41.6px * var(--band-scale))));   /* 41.6px = 1600px × 2.6% */
}

.p-contact__body {
  grid-column: 2;
  min-width: 0;
}

@media (width < 1000px) {
  .p-contact__inner {
    grid-template-columns: 14% minmax(0, 76%) 1fr;
  }
}

@media (width < 800px) {
  /* デザイン案（SP）の実測：CONTACT ラベル 8.1%〜13.0%、イラスト 25.2% から、
   * 「事業者の方」とボタンは 35.8% から。見出しと本文は SP には無い。 */
  .p-contact {
    padding-inline: 0;
  }

  .p-contact__inner {
    grid-template-columns: 25.2% minmax(0, 1fr);
  }

  .p-contact__inner > .c-label-vertical {
    grid-column: 1;
    justify-self: start;
    margin-right: 0;
    /* % だと 1 列目（25.2%）に対する比になってしまうので vw で指定する */
    margin-left: 8.1vw;
  }

  .p-contact__body {
    grid-column: 2;
    padding-right: var(--inner-pad);
  }

  /* 原稿の実測：イラストは幅 7.3%、ボタンは幅 40.7% */
  .p-contact__item img {
    width: 7.3vw;
  }

  .p-contact__item .c-btn {
    width: 40.7vw;
  }
}

.p-contact__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(calc(20px * var(--band-scale)), calc(4vw * var(--band-scale)), calc(60px * var(--band-scale)));
  margin-top: clamp(24px, 4vw, 44px);
}

/* SP は見出し「お問い合わせ」と本文を出さない（u-only-pc）ので、本文との間隔として
   入れているこの margin-top が、そのままイラストの上の無駄な空きとして残ってしまう。
   ※ .p-contact 系の SP 用 @media はこの基本ルールより前にあるため、そこに書くと
      記述順で負けて効かない。必ずこの直後に置くこと。 */
@media (width < 800px) {
  .p-contact__list {
    margin-top: 0;
  }
}

.p-contact__item {
  display: flex;
  align-items: center;
  gap: calc(16px * var(--band-scale));
}

/* PC では 2 枚を必ず 1 行に並べる。画像幅・余白・ボタン幅の積み上げが列幅を
   数 px 超えただけで折り返してしまい、--band-scale を動かすたびに再発するので、
   固定幅の積み上げではなく列を等分する方式にする（ボタンは max-width: 100% で縮む）。
   SP は 1 枚ずつ縦に積むので、この指定は PC だけに効かせること。 */
@media (width >= 800px) {
  .p-contact__item {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* SP 側の指定（上の @media）より後ろに書かれているので、ここは PC だけに効かせる。
 * 同じ詳細度のルールは後勝ちになるため、min-width で囲わないと SP の値が潰れる。 */
@media (width >= 800px) {
  .p-contact__item img {
    width: calc(48px * var(--band-scale));
    flex-shrink: 0;
  }
}

.p-contact__txt {
  flex: 1;
}

/* 原稿の実測：「事業者の方」の 1 文字が 28.8px（@1440）で、本文（26.7px）より少し大きい。
 * ボタンのすぐ上に置くので下マージンは詰める。 */
.p-contact__label {
  margin-bottom: 0.35em;
  font-size: calc(var(--txt-body-size) * 1.08);
  font-weight: 500;
  line-height: 1.4;
}

/* ==========================================================================
 * Project / ACCESS
 * ========================================================================== */
.p-access {
  /* CONTACT とマップの間隔。2026-10-27 に SNS 行を削除したので、この余白と
     .p-contact の padding-bottom だけが両セクションの境界になる（1440px で約 137px）。 */
  padding: clamp(24px, 4vw, 64px) 0 clamp(50px, 7vw, 112px);
}

/* デザイン案の実測値をそのままカラム比率にする：
 *   マップ（＝コンテンツ列）は 左端 21.5% / 幅 57%、ACCESS ラベルはその右。
 * ※ 2026.10.16 版で左の縦書き英文と横書き英文キャッチは削除された。 */
/* 地図の左端は縦書き CONTACT ラベルの左端に合わせる（ユーザー指示）。
 * CONTACT 側のラベルは 1 列目の右寄せ＋margin で左端が 16.5% に来るので、その値を使う。
 * 原稿そのものは地図 14.8% / ラベル 15.3% と僅かにずれているが、揃える方を採った。 */
.p-access__inner {
  position: relative;
  display: grid;
  grid-template-columns: 16.5% minmax(0, 62.1%) 1fr;
  align-items: start;
  max-width: var(--band-w);
  margin-inline: auto;
}

.p-access__inner > .p-access__main {
  grid-column: 2;
}

.p-access__inner > .c-label-vertical {
  grid-column: 3;
  justify-self: start;
  /* 列 3 は 78.6% から。3.3% + ラベル幅 3.8% で右端が整列ライン（85.7%）に乗る。 */
  margin-left: max(14px, min(calc(3.3vw * var(--band-scale)), calc(52.8px * var(--band-scale))));   /* 52.8px = 1600px × 3.3% */
}

/* マップ・住所をひとつの列にまとめ、左端を揃える */
.p-access__main {
  min-width: 0;
}

.p-access__map {
  aspect-ratio: 2 / 1;   /* デザイン案の実測 2.03:1 */
}

.p-access__map iframe {
  width: 100%;
  height: 100%;
}

/* 原稿では住所・TEL も本文と同じ大きさ（1 文字 27px @1440）。旧実装の 12px は小さすぎた。
 * ただし SP では本文サイズだと大きすぎるので一段落とす（ユーザー指定）。 */
.p-access__info {
  /* 原稿の実測（1440px 換算）：地図の下端から住所の字面まで 33px、住所→TEL の送り 35px。
     line-height 2.2 だと送りが 53px になり、行ボックスが高いぶん地図との間も開いて見える。 */
  margin-top: 0.8em;
  font-size: var(--txt-body-size);
  line-height: 1.44;
}

@media (width < 800px) {
  .p-access__info {
    font-size: var(--fz13);
    line-height: 2;
  }
}

.p-access__tel {
  letter-spacing: 0.06em;
}

@media (width < 1000px) {
  .p-access__inner {
    grid-template-columns: 14% minmax(0, 76%) 1fr;
  }
}

@media (width < 800px) {
  .p-access {
    padding-inline: var(--inner-pad);
  }

  .p-access__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .p-access__inner > .p-access__main {
    grid-column: 1;
  }

  .p-access__inner > .c-label-vertical {
    grid-column: 2;
    margin-left: clamp(10px, 3vw, 20px);
  }

  .p-access__addr {
    line-height: 1.9;
  }
}

/* ==========================================================================
 * Project / 下層ページ ABOUT
 * ========================================================================== */
/* デザイン案（P2 A2）の実測：本文列は左 19.7%〜右 86%（幅 66%）、
 * ラベルは列の外側。TOP の p-about__inner とは別ページのため個別に定義。 */
.p-about-lead {
  /* 上余白はパンくず直下のため半分（旧 clamp(60px, 9vw, 120px)） */
  padding: clamp(30px, 4.5vw, 60px) 0 clamp(60px, 8vw, 110px);
}

.p-about-lead__inner {
  display: grid;
  grid-template-columns: 22.8% minmax(0, 56.2%) 1fr;
  align-items: start;
  max-width: var(--band-w);
  margin-inline: auto;
}

.p-about-lead__body {
  grid-column: 2;
  min-width: 0;
}

.p-about-lead__inner > .c-label-vertical {
  grid-column: 3;
  justify-self: start;
  margin-left: clamp(14px, 3.5vw, 50px);
}


/* 代表者写真＋署名（デザイン案では写真の右に役職名を並べる） */
.p-about-lead__signature {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 40px);
  margin-top: 2em;
}

.p-about-lead__photo {
  width: 58%;
  flex-shrink: 0;
}

/* 肩書き・氏名のブロックは左の写真に対して縦中央に置く（ユーザー指定 2026-10-17）。
   PEOPLE のインタビュー署名が同じクラスを流用しているので、
   ABOUT のセクションにスコープして向こうには影響させない。 */
.p-about-lead .p-about-lead__signature {
  align-items: center;
}

/* 原稿（p2）の署名は 4 行・中央揃え：
 *   代表取締役 / 小倉 政幸 / President & CEO / MASAYUKI OGURA
 * 旧実装は「代表取締役　小倉 政幸」「President & CEO　MASAYUKI OGURA」の 2 行左揃えだった。 */
.p-about-lead__meta {
  flex: 1;
  /* padding-top は上端揃えだった頃の微調整。縦中央揃えにしたぶん
     パディングの高さだけ文字が下にずれるので外してある。 */
  text-align: center;
}

.p-about-lead__role {
  display: block;
  font-size: var(--txt-body-size);
  letter-spacing: 0.12em;
}

.p-about-lead__name {
  display: block;
  margin-top: 0.4em;
  font-size: calc(var(--txt-body-size) * 1.25);
  font-weight: 500;
  /* 「小倉　政幸」の全角アキに字間が足されて開きすぎていたので詰める */
  letter-spacing: 0.04em;
}

/* 英文は PC で 2 行、SP で 1 行に並べ替えるため span で包んである */
.p-about-lead__en span {
  display: block;
}

.p-about-lead__en {
  display: block;
  margin-top: 1.4em;
  font-family: var(--ff-en);
  font-size: calc(var(--txt-body-size) * 0.55);
  line-height: 1.9;
  letter-spacing: 0.08em;
}

@media (width < 1000px) {
  .p-about-lead__inner {
    grid-template-columns: 14% minmax(0, 76%) 1fr;
  }
}

@media (width < 800px) {
  .p-about-lead {
    padding-inline: var(--inner-pad);
  }

  .p-about-lead__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .p-about-lead__body {
    grid-column: 1;
  }

  .p-about-lead__inner > .c-label-vertical {
    grid-column: 2;
    margin-left: clamp(10px, 3vw, 20px);
  }

  .p-about-lead__signature {
    flex-direction: column;
  }

  /* SP は縦積みなので、PC 用の縦中央揃え（横方向の中央寄せになってしまう）を解除する */
  .p-about-lead .p-about-lead__signature {
    align-items: flex-start;
  }

  /* 原稿（p7 の A2）の SP は、署名が写真の「上」に右揃えで 2 行
     （代表取締役　小倉 政幸 ／ President & CEO　MASAYUKI OGURA）、
     その下に本文と同じ幅の写真、という並び。PC の「写真 → 4 行中央揃え」とは
     順序・揃え・行数のすべてが違うので、SP 側で全部組み直す。 */
  /* 並べ替えは ABOUT だけ。PEOPLE も .p-about-lead__photo を流用しているので、
     スコープしないと PEOPLE のインタビューで氏名が写真の上に来てしまう。 */
  .p-about-lead .p-about-lead__meta {
    order: 1;
  }

  .p-about-lead .p-about-lead__photo {
    order: 2;
  }

  .p-about-lead__meta {
    /* 親が align-items: flex-start の縦並びなので、幅を指定しないと
       内容幅のまま左に寄り、text-align: right が右端まで届かない */
    width: 100%;
    text-align: right;
  }

  .p-about-lead__photo {
    width: 100%;
  }

  /* 役職と氏名を 1 行に並べる */
  .p-about-lead__role,
  .p-about-lead__name {
    display: inline;
  }

  /* 原稿の実測（p7 A2）：役職・氏名・本文はどれも字面高 31〜32px で同じ大きさ。
     PC の 1.25 倍は SP には効かせない。役職との間は実測 40px ≒ 1.2em。 */
  .p-about-lead__name {
    margin-top: 0;
    margin-left: 1.2em;
    font-size: var(--txt-body-size);
    letter-spacing: 0.02em;
  }

  /* 原稿の SP の署名はほとんど字間を取っていない（実測で約 0.01em）。
     PC 用の 0.12em のままだと和文行が 15% 長くなる。 */
  .p-about-lead__role {
    letter-spacing: 0.02em;
  }

  /* 英文も 1 行に並べる */
  /* 原稿の実測：英文のキャップハイトが 17px（和文の字面 31px に対して）。
     フォントサイズに直すと本文の約 0.71 倍で、PC 用の 0.55 倍では小さすぎた。 */
  .p-about-lead__en {
    margin-top: 0.6em;
    font-size: calc(var(--txt-body-size) * 0.71);
  }

  .p-about-lead__en span {
    display: inline;
  }

  /* 原稿では英文行の全幅が本文列の 64%（390px 換算で約 220px）。
     2 つのかたまりの間を 1.5em 取るとその長さに揃う。 */
  .p-about-lead__en span + span {
    margin-left: 1.5em;
  }
}

/* COMPANY PROFILE */
.p-profile {
  padding: clamp(50px, 7vw, 90px) 0;
}

.p-profile__inner {
  display: grid;
  grid-template-columns: 22.8% minmax(0, 56.2%) 1fr;
  align-items: start;
  max-width: var(--band-w);
  margin-inline: auto;
}

.p-profile__inner > .c-label-vertical {
  grid-column: 1;
  justify-self: end;
  margin-right: clamp(12px, 2.5vw, 46px);
}

.p-profile__body {
  grid-column: 2;
  min-width: 0;
}

@media (width < 1000px) {
  .p-profile__inner {
    grid-template-columns: 14% minmax(0, 76%) 1fr;
  }
}

@media (width < 800px) {
  .p-profile {
    padding-inline: var(--inner-pad);
  }

  .p-profile__inner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .p-profile__inner > .c-label-vertical {
    grid-column: 1;
    margin-right: clamp(10px, 3vw, 20px);
  }

  .p-profile__body {
    grid-column: 2;
  }
}

/* HISTORY */
.p-history {
  padding: clamp(50px, 7vw, 90px) 0 clamp(60px, 8vw, 110px);
}

.p-history__inner {
  display: grid;
  grid-template-columns: 22.8% minmax(0, 56.2%) 1fr;
  align-items: start;
  max-width: var(--band-w);
  margin-inline: auto;
}

.p-history__inner > .c-label-vertical {
  grid-column: 3;
  justify-self: start;
  margin-left: clamp(14px, 3.5vw, 50px);
}

.p-history__body {
  grid-column: 2;
  min-width: 0;
}

@media (width < 1000px) {
  .p-history__inner {
    grid-template-columns: 14% minmax(0, 76%) 1fr;
  }
}

@media (width < 800px) {
  .p-history {
    padding-inline: var(--inner-pad);
  }

  .p-history__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .p-history__body {
    grid-column: 1;
  }

  .p-history__inner > .c-label-vertical {
    grid-column: 2;
    margin-left: clamp(10px, 3vw, 20px);
  }
}

/* ==========================================================================
 * Project / 下層ページ FACILITY
 * ========================================================================== */
/* 本文列は ABOUT / CONTACT と同じ 25% / minmax(0,50%) / 1fr に揃える
 * （デザイン案の実測ではもっと左に寄っているが、同一ページ内で CONTACT と
 *   横位置が揃うことを優先する。[[tech21-progress]] 参照）。 */
.p-facility-list {
  /* 上余白はパンくず直下のため半分（旧 clamp(60px, 9vw, 120px)） */
  padding: clamp(30px, 4.5vw, 60px) 0 clamp(50px, 7vw, 90px);
}

.p-facility-list__inner {
  display: grid;
  grid-template-columns: 22.8% minmax(0, 56.2%) 1fr;
  align-items: start;
  max-width: var(--band-w);
  margin-inline: auto;
}

.p-facility-list__inner > .c-label-vertical {
  grid-column: 1;
  justify-self: end;
  margin-right: clamp(12px, 2.5vw, 46px);
}

.p-facility-list__body {
  grid-column: 2;
  min-width: 0;
}

.p-facility-list__lead {
  margin: 0 0 1.6em;
  font-size: calc(var(--txt-body-size) * 1.05);
  font-weight: 700;
  line-height: 1.9;
}

@media (width < 1000px) {
  .p-facility-list__inner {
    grid-template-columns: 14% minmax(0, 76%) 1fr;
  }
}

@media (width < 800px) {
  .p-facility-list {
    padding-inline: var(--inner-pad);
  }

  .p-facility-list__inner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .p-facility-list__inner > .c-label-vertical {
    grid-column: 1;
    margin-right: clamp(10px, 3vw, 20px);
  }

  .p-facility-list__body {
    grid-column: 2;
  }
}

/* 機械一覧（名称＋台数、行ごとに罫線） */
.c-list-spec > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding-block: 0.2em;
  border-bottom: 1px solid var(--c-line);
}

.c-list-spec__name {
  flex: 1;
  min-width: 0;
}

.c-list-spec__qty {
  flex-shrink: 0;
  color: var(--c-text-light);
}

/* 設備写真ギャラリー（2列） */
.p-facility-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.6vw, 20px);
  margin-top: clamp(30px, 4vw, 50px);
}

.p-facility-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (width < 800px) {
  .p-facility-gallery {
    grid-template-columns: 1fr;
  }
}

/* TECHNOLOGY ページ。列構成は FACILITY ページと同じ .p-facility-list を共有し、
 * 本文と写真 3 枚ぶんのルールだけ足している。 */
.p-facility-list__body > p {
  margin-bottom: 1.6em;
}

.p-facility-list__body > *:last-child {
  margin-bottom: 0;
}

.p-facility-list__body .c-list-spec {
  margin-bottom: clamp(30px, 4vw, 50px);
}

/* ヒーローのスライド。デザイン案 p8「B1 TECHNOLOGY」ではページ上部に
 * 画面幅いっぱいの写真が入る（実測 1.758:1、ほぼ 16:9）。
 * 写真帯は全幅なので --band-scale も帯の上限も掛けない（FACILITY / QUALITY の帯と同じ考え方）。 */
.p-technology-hero {
  width: 100%;
  overflow: hidden;
}

/* 下層 2 ページへのリンクを横並びに。SP では折り返して縦に積む。 */
.p-technology-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em 2.4em;
}

/* PC は 2.57:1（1440px で 560px）。PEOPLE ページのヒーローと同じ高さで、
 * 下層ページのヒーローとしての基準にしている。
 *   16:9 → 810px、1.95:1 → 738px はどちらも TOP のファーストビュー（737px）と
 *   同等になってしまい「大きすぎる」（ユーザー指摘 2026-10-20）。
 * SP は原稿（p8）の実測 1.758 どおり 16:9。 */
.p-technology-hero .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 2.57;
  object-fit: cover;
}

@media (width < 800px) {
  .p-technology-hero .swiper-slide img {
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
 * Project / 下層ページ QUALITY（製品ギャラリー）
 * ========================================================================== */
/* デザイン案 P3 B3 の構造：
 *   PC → 全幅のヒーロー写真（左上に QUALITY ラベルを重ねる）→ 中央寄せの見出し → 製品 3 列
 *   SP（P8 A2）→ ヒーロー写真はなく、見出し + QUALITY ラベルから始まり、製品は 1 列
 * ラベルは DOM 上 1 つだけ置き、PC では絶対配置でヒーローに重ね、SP では通常フローに戻す。 */
.p-products {
  position: relative;
  /* 原稿ではパンくずの字面からヒーロー写真の上端まで 6.89%（1440px で 99px）空いていて、
     その白地に QUALITY ラベルの上 4.73% ぶんが乗る。ここを 0 にすると、写真の上に
     はみ出したラベルがヘッダーの下に潜って「Y」が見えなくなる（2026-10-18 に発生）。
     ラベルのはみ出しは vw 指定なので、この余白も頭打ちさせずに vw で追従させる。 */
  padding-top: max(40px, 5.9vw);
  padding-bottom: clamp(50px, 7vw, 100px);
}

.p-products__hero img {
  display: block;
  width: 100%;
  height: auto;
}

.p-products__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  /* 基準は非推奨の --inner-max ではなく共通の帯。ラベルを % で置くので、
     ここが画面幅に応じて動くとラベルの位置も一緒にずれる。 */
  max-width: var(--band-w);
  margin-inline: auto;
  /* 原稿の実測：写真の下端からリードの字面まで 10.79%（1440px で 155px）。
     行ボックスの余白ぶんを引いて 9.9vw にしてある。 */
  padding: clamp(40px, 9.9vw, 143px) var(--inner-pad) 0;
}

/* PC：ヒーロー写真の左上に重ねる。デザイン案の実測（モック幅比）：
 *   ラベル左端 12.45%、上端は写真の上端より 4.73% 上（＝白地にはみ出す）。
 * __inner の上辺＝写真の下端なので、写真の高さ（100vw ÷ 1.953 = 51.2vw）と
 * そのはみ出し分 4.73vw を足して戻す。left は __inner（＝帯）に対する % なので、
 * 帯が中央に寄っても位置が狂わない。 */
.p-products__label {
  position: absolute;
  /* 写真の上へのはみ出しは当初 4.73vw（原稿の実測）にしたが、実装のラベルは
     原稿より相対的に小さいぶん「写真の上に出ている割合」が大きく見えるため、
     ユーザー判断で 3.0vw に減らした（2026-10-18）。1440px で 25px 下がる。 */
  top: calc(-51.2vw - 3vw);
  /* 原稿のラベル左端は画面幅の 12.45%。left は __inner（＝帯、画面の 5%〜95%）に
     対する % なので (12.45 - 5) / 90 = 8.28% とする。 */
  left: 8.28%;
  z-index: 2;
}

.p-products__body {
  grid-column: 2;
}

.p-products__lead {
  margin-bottom: 0;
  font-size: calc(var(--txt-body-size) * 1.36);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.18em;
  text-align: center;
}

/* 製品グリッドは本文列の中ではなく内枠いっぱいに広がる（原稿で 11.95%〜88.71%）。
 * そのため __inner の外に出し、同じ帯と余白を自前で持たせている。
 * 原稿の実測：リードの字面からグリッド上端まで 10.04%（1440px で 145px）。 */
.p-products__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 22px);
  max-width: var(--band-w);
  margin: clamp(30px, 9.2vw, 133px) auto 0;
  padding-inline: var(--inner-pad);
  list-style: none;
}

.p-products__list img {
  display: block;
  width: 100%;
  height: auto;
}

@media (width < 800px) {
  /* SP ではヒーロー写真を出さず（デザイン案 P8）、ラベルは見出しの左へ戻す。
     写真が無いので、その上に空けていた余白も不要。 */
  .p-products {
    padding-top: 0;
  }

  .p-products__hero {
    display: none;
  }

  /* 原稿（p8 A2）の実測：ラベル左端 4.66%、リードの左端 16.91%（間は 7.31%）。
     他ページの --label-edge-pad（3vw）より少し内側で、このページ固有の値。 */
  .p-products__label {
    position: static;
    margin-left: calc(4.66vw - var(--inner-pad));
    margin-right: 7.31vw;
  }

  .p-products__lead {
    text-align: left;
  }

  /* 原稿（P8）では製品写真が画面幅いっぱい。帯も左右の余白も外す */
  .p-products__list {
    grid-template-columns: 1fr;
    max-width: 100%;
    padding-inline: 0;
  }
}

/* ==========================================================================
 * Project / 下層ページ PEOPLE
 * ========================================================================== */
/* ヒーロー写真＋見出しをまとめて position:relative の基準にし、
 * PC では PEOPLE ラベルを写真の上にオーバーレイさせる（デザイン案どおり）。
 * SP ではラベルは見出し横の通常フローに戻る（デザイン案 SP 版どおり）。 */
.p-people-top {
  position: relative;
  /* 原稿ではパンくずの字面からヒーロー写真まで 8.48% 空き、そこに PEOPLE ラベルの
     上 4.99% ぶんが乗る。0 のままだとラベルが写真の中に収まってしまう（2026-10-18）。
     ラベルのはみ出しが vw なので、この余白も vw で追従させる。 */
  --people-hero-gap: max(40px, 7.5vw);
  padding-top: var(--people-hero-gap);
}

.p-people-hero img {
  display: block;
  width: 100%;
  height: clamp(320px, 40vw, 560px);
  object-fit: cover;
}

/* PEOPLE はパンくずの直後がヒーロー写真で、このセクションはその下に来る。
   パンくず直下の余白ではないので、2026-10-18 の「半分にする」対象から外してある。 */
.p-people-intro {
  /* 下余白はユーザー指定で詰めた（2026-10-18、旧 clamp(50px, 7vw, 90px)） */
  padding: clamp(40px, 6vw, 70px) 0 clamp(30px, 4.2vw, 60px);
}

.p-people-intro__inner {
  display: grid;
  grid-template-columns: 22.8% minmax(0, 56.2%) 1fr;
  align-items: start;
  max-width: var(--band-w);
  margin-inline: auto;
}

.p-people-intro__inner > .c-label-vertical {
  grid-column: 1;
  justify-self: end;
  margin-right: clamp(12px, 2.5vw, 46px);
}

.p-people-intro__inner > .c-ttl {
  grid-column: 2;
  margin: 0;
}

@media (width >= 800px) {
  /* 原稿の実測：ラベル左端は画面の 11.8%、上端は写真の上端より 4.99% 上。
     包含ブロックは .p-people-top（全幅・position: relative）で、その上辺は
     パンくずの下。写真はそこから --people-hero-gap だけ下にあるので、その差で置く。
     （以前は --layout-max 基準で、広い画面ほど内側にずれていた） */
  .p-people-intro__inner > .c-label-vertical {
    position: absolute;
    top: calc(var(--people-hero-gap) - 4.99vw);
    left: 11.8%;
    margin-right: 0;
  }
}

@media (width < 1000px) {
  .p-people-intro__inner {
    grid-template-columns: 14% minmax(0, 76%) 1fr;
  }
}

@media (width < 800px) {
  .p-people-intro {
    padding-inline: var(--inner-pad);
  }

  .p-people-intro__inner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .p-people-intro__inner > .c-label-vertical {
    grid-column: 1;
    margin-right: clamp(10px, 3vw, 20px);
  }

  .p-people-intro__inner > .c-ttl {
    grid-column: 2;
  }
}

/* 署名（写真＋名前）は ABOUT の p-about-lead__signature / __photo を流用し、
 * 名前まわりのテキストだけ専用クラスにする（名前・入社年次・ローマ字の3行構成のため）。 */
/* 原稿の実測：氏名・入社年次・ローマ字は中央揃えで、写真の上端から 4.33% 下から始まる
   （1440px で 62px）。実装は左揃え・8px で原稿と違っていた（2026-10-18）。 */
.p-people-interview__meta {
  padding-top: 0.4em;
  /* 原稿では PC・SP とも中央揃え（SP は写真の下に置く） */
  text-align: center;
}

/* PC だけ：写真の右で縦中央・中央揃え（原稿 p4）。SP は写真の下に積むので
   横方向の中央寄せになってしまい意味が変わるため、PC に限定する。 */
@media (width >= 800px) {
  .p-people-interview__meta {
    flex: 1;
    align-self: center;
    padding-top: 0;
  }
}

@media (width < 800px) {
  /* SP は写真の下に積む。幅を指定しないと内容幅のまま左に寄り、
     text-align: center が写真の中央まで届かない。 */
  .p-people-interview__meta {
    width: 100%;
  }

  /* 原稿（p9）では 1 本目だけ、縦組み英文がリードのすぐ下から始まり、写真はそこから
     17.7% 下にある（タグラインの頭がリードの左に並ぶ構図）。写真だけを下げて
     タグラインを相対的に上へ出す。
     **2 本目（深谷）は上にリードが無いので、原稿でもタグラインの上端＝写真の上端。**
     そのため 1 本目だけを隣接セレクタで狙う（ユーザー指摘 2026-10-18）。 */
  .p-people-top + .p-people-interview .p-about-lead__photo {
    margin-top: 17.7vw;
  }

  /* 原稿（p9）ではリードの字面から縦組み英文の字面まで 1.83%（390px で 7px）しかない。
     実装はリードの下余白 3vw に加えてインタビュー節の padding-top 50px が乗っていて
     62px 空いていた。**2 本目（深谷）の上余白は節の区切りとして必要なので、
     最初のインタビューだけ**を隣接セレクタで狙って詰める。 */
  .p-people-intro {
    padding-bottom: 0;
  }

  .p-people-top + .p-people-interview {
    padding-top: 2vw;
  }
}

/* 固定 px（15/12/11px）は原稿より小さく、画面幅にも追従しなかった。
   本文サイズ基準にして一回り大きくした（ユーザー指定 2026-10-18）。 */
.p-people-interview__meta strong {
  display: block;
  font-size: calc(var(--txt-body-size) * 1.1);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.p-people-interview__tenure {
  display: block;
  /* 行間はユーザー指定で詰めた（2026-10-18、旧 0.6em） */
  margin-top: 0.25em;
  font-size: calc(var(--txt-body-size) * 0.85);
  letter-spacing: 0.06em;
}

.p-people-interview__romaji {
  display: block;
  margin-top: 0.25em;
  font-family: var(--ff-en);
  font-size: calc(var(--txt-body-size) * 0.8);
  letter-spacing: 0.06em;
  color: var(--c-text-light);
}

/* インタビュー1件分（本文列は他の下層ページと同じ 25% / 50% / 1fr） */
.p-people-interview {
  padding: clamp(50px, 7vw, 90px) 0;
}

.p-people-interview__inner {
  display: grid;
  grid-template-columns: 22.8% minmax(0, 56.2%) 1fr;
  align-items: start;
  max-width: var(--band-w);
  margin-inline: auto;
}

.p-people-interview__inner > .p-people-interview__tagline {
  grid-column: 1;
  justify-self: end;
  margin-right: clamp(12px, 2.5vw, 46px);
}

.p-people-interview__body {
  grid-column: 2;
  min-width: 0;
}

/* 署名ブロックは ABOUT と共用で margin-top: 2em を持つが、PEOPLE では __body の
   先頭に来るため、その 2em ぶん写真だけが下がってタグライン（縦組み英文）の上端と
   ずれていた。「today. の後ろを画像の上端と平行に」というユーザー指定で 0 にする。 */
.p-people-interview .p-about-lead__signature {
  margin-top: 0;
}

/* 英文タグライン（縦組み・上から下に読む固定方向。セクション共通ラベルとは別物） */
/* 2026.10.16 版で支給された画像（縦組み・回転焼き込み済み）を使う。
 * 字面の幅が画像幅の 75.8% なので、旧テキスト版の cap height（約 0.95vw）に合わせて
 * 画像幅を 1.25vw とする。 */
.p-people-interview__tagline {
  display: block;
  flex: none;
  width: clamp(14px, 1.25vw, 24px);
  height: auto;
}

.p-people-interview__quote {
  margin: 1.6em 0 1em;
}

.p-people-interview__body p + p {
  margin-top: 1.6em;
}

.p-people-interview__photo {
  margin-top: clamp(30px, 4vw, 50px);
}

.p-people-interview__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (width < 1000px) {
  .p-people-interview__inner {
    grid-template-columns: 14% minmax(0, 76%) 1fr;
  }
}

@media (width < 800px) {
  .p-people-interview {
    padding-inline: var(--inner-pad);
  }

  .p-people-interview__inner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .p-people-interview__inner > .p-people-interview__tagline {
    grid-column: 1;
    margin-right: clamp(10px, 3vw, 20px);
  }

  .p-people-interview__body {
    grid-column: 2;
  }
}

/* ==========================================================================
 * Project / 下層ページ RECRUIT
 * ========================================================================== */
/* ヒーローは part-recruit.php のバナーと同じく画像 1 枚（.p-recruit__bg を再利用）。
 * 2026.10.16 版の支給画像は RECRUIT の文字が焼き込み済みのため、見出しは重ねない。 */
.p-recruit-hero {
  position: relative;
}

.p-recruit-body {
  padding: clamp(50px, 7vw, 90px) 0 clamp(60px, 8vw, 110px);
}

/* RECRUIT ページは .p-recruit-body のセクションが 4 本続くので、既定のままだと
 * 境界が下 110px ＋ 上 90px = 200px に膨らむ。原稿（＝原稿サイトのスクリーン
 * ショット）の境界はどれも 45〜64px しかない。下側を持つセクションに --stack を
 * 付けて 0 にし、上側は隣接セレクタで入れ直す。 */
.p-recruit-body--stack {
  padding-bottom: 0;
}

.p-recruit-body + .p-recruit-body {
  padding-top: max(28px, 4.2vw);   /* 1440px で 60px */
}

/* リード枠 → 「TECH21で働くということ」だけは原稿がさらに詰まっている（3.70%）。
 * 隣接セレクタと同じ詳細度なので、必ずこの順（後ろ）に置くこと。 */
.p-recruit-body + .p-recruit-body--work {
  padding-top: max(24px, 3.1vw);   /* 1440px で 45px */
}

/* このページには c-label-vertical が無いため、ラベル列を持たない
 * 25% / minmax(0,50%) / 1fr の中央カラムだけを他ページと揃えて使う。 */
.p-recruit-body__inner {
  display: grid;
  grid-template-columns: 22.8% minmax(0, 56.2%) 1fr;
  max-width: var(--band-w);
  margin-inline: auto;
}

.p-recruit-body__inner > * {
  grid-column: 2;
  min-width: 0;
}

.p-recruit-body__inner p + p {
  margin-top: 1.6em;
}

@media (width < 1000px) {
  .p-recruit-body__inner {
    grid-template-columns: 14% minmax(0, 76%) 1fr;
  }
}

@media (width < 800px) {
  .p-recruit-body {
    padding-inline: var(--inner-pad);
  }

  .p-recruit-body__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-recruit-body__inner > * {
    grid-column: 1;
  }
}

/* 採用情報リード枠（2026.10.16 版で追加。デザイン案 P5 の淡い水色のボックス） */
.p-recruit-lead {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  /* 色は原稿サイト https://www.tech-21.jp/operator/ の CSS が出典（--color-hero-bg）。
   * デザイン案 p5 はこのページのスクリーンショットなので、PDF から採らずこちらを使う。 */
  background-color: #e6f1fb;
  border-radius: 10px;
  text-align: center;
}

.p-recruit-lead__en {
  font-family: var(--ff-en);
  font-size: var(--fz11);
  font-weight: 500;
  letter-spacing: 0.24em;
  color: #185fa5;   /* 原稿サイト --color-text-blue */
}

.p-recruit-lead__ttl {
  margin: 0.4em 0 0.8em;
  font-size: calc(var(--txt-body-size) * 1.36);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #0c447c;   /* 原稿サイト --color-heading */
}

.p-recruit-lead__txt {
  line-height: 2;
  color: #185fa5;   /* 原稿サイト --color-text-blue */
}

/* 「TECH21で働くということ」の写真 3 枚（2026.10.16 版で追加） */
.p-recruit-gallery {
  margin-top: clamp(24px, 4vw, 40px);
}

.p-recruit-gallery__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-recruit-gallery__list img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.p-recruit-gallery__caption {
  margin-top: 1em;
  font-size: calc(var(--txt-body-size) * 0.8);
  text-align: center;
  color: #999999;
}

@media (width < 640px) {
  .p-recruit-gallery__list {
    grid-template-columns: 1fr;
  }
}

/* 募集職種カード */
.c-job-card {
  padding: clamp(20px, 3vw, 32px);
  background-color: #f5f5f4;   /* 原稿サイト --color-card-bg */
  border: 1px solid #e0e0e0;   /* 原稿サイト --color-border */
  border-radius: 12px;
}

.c-job-card + .c-job-card {
  margin-top: clamp(20px, 3vw, 32px);
}

.c-job-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  margin-bottom: 1em;
}

.c-job-card__title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: max(15px, calc(var(--txt-body-size) * 0.89));
  font-weight: 700;
  letter-spacing: 0.1em;
}

.c-job-card__icon {
  display: inline-flex;
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
  color: #0c447c;   /* 原稿サイト --color-heading */
}

.c-job-card__icon svg {
  width: 100%;
  height: 100%;
}

.c-job-card .c-dl-table dt {
  width: 7.7em;   /* 原稿サイト 100px ÷ 13px */
  color: #777777;   /* 原稿サイト td:first-child */
}

/* カード内の明細は原稿サイトで本文より 1 段小さい（13px 対 15px）。 */
.c-job-card .c-dl-table {
  font-size: max(12px, calc(var(--txt-body-size) * 0.72));
}

/* デザイン案では行ごとに薄い罫線が入る（ABOUT の会社概要テーブルとは違い、
 * 罫線ありがこのカードの仕様）。 */
.c-job-card .c-dl-table > div {
  border-bottom: 1px solid var(--c-line);
}

.c-job-card .c-dl-table > div:last-child {
  border-bottom: none;
}

/* 仕事内容・待遇欄の箇条書き（1行=1項目で入力された場合） */
.c-job-card .c-dl-table dd ul {
  list-style: disc;
  padding-left: 1.2em;
}

/* 「一般事務を行っていただきます。」のようなリード文のあとに箇条書きが続く形。
 * ACF の入力で行頭に「・」を付けた行だけが li になる（page-recruit.php の
 * tech21_lines_to_html を参照）。 */
.c-job-card .c-dl-table dd p + ul,
.c-job-card .c-dl-table dd ul + p {
  margin-top: 0.4em;
}

.c-job-card .c-dl-table dd li + li {
  margin-top: 0.3em;
}

/* バッジ（雇用形態） */
.c-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4em 1em;
  font-size: max(11px, calc(var(--txt-body-size) * 0.66));
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: #0c447c;
  background-color: #e6f1fb;
  border-radius: 999px;
}

/* 応募の流れ（3ステップ） */
.c-step-list {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(20px, 3vw, 36px);
  text-align: center;
}

.c-step-list__item {
  flex: 1;
}

/* 原稿サイトは枠線ではなく淡いグレーの塗り、数字は見出しと同じ紺。 */
.c-step-list__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3em;
  height: 2.3em;
  margin: 0 auto 0.8em;
  font-family: var(--ff-en);
  font-size: max(13px, calc(var(--txt-body-size) * 0.77));
  font-weight: 700;
  color: #0c447c;
  background-color: #f0f0ef;
  border-radius: 50%;
}

.c-step-list__label {
  font-size: max(12px, calc(var(--txt-body-size) * 0.72));
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #555555;
}

/* 原稿サイトではここはリンクではなく、ただの注記（div）。
 * 応募フォームへの導線は下の CTA ボタンだけ。リンクに戻さないこと。
 * セレクタを子孫にしてあるのは、.p-recruit-body__inner p + p（margin-top: 1.6em、
 * 詳細度 0,1,2）に裸のクラス（0,1,0）では負けて 1.6em が効いてしまうため。 */
.c-step-list__text .c-step-list__note {
  display: inline-block;
  margin-top: 0.4em;
  font-size: max(11px, calc(var(--txt-body-size) * 0.61));
  color: #185fa5;
}

@media (width < 640px) {
  .c-step-list {
    flex-direction: column;
    gap: 16px;
    text-align: left;
  }

  .c-step-list__item {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
  }

  /* SP ではラベルと注記を 1 行に並べる（エントリー＋余白＋Web応募フォームから）。
   * ユーザー指定 2026-10-19。縦積みのままだと注記を持つステップ 1 だけ 2 行になり、
   * 番号がラベルと注記の間に落ちて見えた。1 行になったので番号側は center のままで
   * 3 ステップとも正しく中央に揃う。 */
  .c-step-list__text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.9em;
  }

  .c-step-list__text .c-step-list__note {
    margin-top: 0;
  }

  .c-step-list__num {
    flex-shrink: 0;
    margin: 0;
  }
}

/* Googleフォーム誘導ボックス */
.c-recruit-cta {
  /* 左右だけ半分にしてある（ユーザー指定 2026-10-20）。上下は据え置き。
     注記「※応募フォームは…」が折り返すため本文幅を稼ぐのが目的。 */
  padding: clamp(28px, 4vw, 44px) clamp(14px, 2vw, 22px);
  margin-top: clamp(40px, 5vw, 60px);
  font-size: max(13px, calc(var(--txt-body-size) * 0.77));
  text-align: center;
  color: #555555;
  background-color: #f5f5f4;   /* 原稿サイト --color-card-bg */
  border-radius: 12px;
}

.c-recruit-cta__btn {
  margin: 1.2em 0;
}

/* 原稿サイト基準では 0.66（12px 相当）だが、こちらは本文が大きいぶん注記が
 * 2 行に折り返すため 1 段下げてある（ユーザー指定 2026-10-20）。
 * なお 1 行に収めるには 10.3px 以下が必要で、それは小さすぎるので
 * 2 行のままになる。 */
.c-recruit-cta__note {
  font-size: max(11px, calc(var(--txt-body-size) * 0.61));
  color: #999999;
}

/* c-btn の赤版（Googleフォームへの応募ボタン用）。
 * 色・角丸・パディング・文字サイズは原稿サイトの --color-button-bg / radius 8px /
 * padding 12px 32px / 14px に合わせてある。サイト共通の --c-accent（#E0304F）とは
 * 別の赤なので注意。
 * c-btn の固定幅（21.2vw）だと「応募する（履歴書を提出）」が 2 行に折れるので、
 * このボタンだけ内容幅にし、>> の矢印も原稿に無いので消している。 */
.c-btn--accent {
  width: auto;
  padding: 0.86em 2.3em;
  font-size: max(13px, calc(var(--txt-body-size) * 0.77));
  font-weight: 700;
  letter-spacing: 0.08em;
  background-color: #d64545;
  border-radius: 8px;
}

.c-btn--accent::after {
  content: none;
}

/* 文字数の短いボタン用。c-btn の固定幅（21.2vw）だと「検索」の 2 文字に対して
   広すぎるので、幅を内容に合わせて矢印も消す。地色は c-btn のまま。 */
.c-btn--compact {
  width: auto;
  flex: none;
  padding: 0.55em 2em;
  font-size: max(12px, calc(var(--txt-body-size) * 0.72));
  letter-spacing: 0.12em;
}

.c-btn--compact::after {
  content: none;
}

/* ==========================================================================
 * Project / 下層ページ CONTACT
 * ========================================================================== */
.p-contact-page {
  /* 上余白はパンくず直下のため半分（旧 clamp(50px, 7vw, 90px)） */
  padding: clamp(25px, 3.5vw, 45px) 0 clamp(60px, 8vw, 110px);
}

/* このページにも c-label-vertical が無いため、RECRUIT と同じ考え方で
 * ラベル列を持たない 25% / minmax(0,50%) / 1fr の中央カラムだけを使う。 */
.p-contact-page__inner {
  display: grid;
  grid-template-columns: 22.8% minmax(0, 56.2%) 1fr;
  max-width: var(--band-w);
  margin-inline: auto;
}

.p-contact-page__inner > * {
  grid-column: 2;
  min-width: 0;
}

.p-contact-page__inner p + p {
  margin-top: 1.6em;
}

@media (width < 1000px) {
  .p-contact-page__inner {
    grid-template-columns: 14% minmax(0, 76%) 1fr;
  }
}

@media (width < 800px) {
  .p-contact-page {
    padding-inline: var(--inner-pad);
  }

  .p-contact-page__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-contact-page__inner > * {
    grid-column: 1;
  }
}

/* タブ切替（事業者の方 / 当社についてご質問など） */
/* 原稿（p5 D2）のフォーム枠は本文列より広く、帯に対して 12.07%〜89.43%。
 * 本文（見出し・リード）は列 2 のままで、枠だけ左右にせり出す。
 * 本文列の幅に押し込むとパネル内のリード文が 3 行に収まらず 6 行に折れる。 */
.c-tabs {
  grid-column: 1 / -1;
  width: 77.36%;
  margin-top: clamp(30px, 4vw, 50px);
  margin-left: 12.07%;
}

@media (width < 800px) {
  .c-tabs {
    width: auto;
    margin-left: 0;
  }
}

.c-tabs__nav {
  display: flex;
}

/* 原稿（p5 D2）のタブはパネル幅いっぱいではなく左寄せ。実測でパネル幅に対し
 * 「事業者の方」30.0% / 「当社についてご質問など」35.4%。文字数に比例しないので
 * min-width + 左右パディングで近似している。 */
.c-tabs__btn {
  flex: 0 0 auto;
  min-width: 30%;
  padding: 1.3em 3.8em;
  line-height: 1.6;
  font-size: max(12px, calc(var(--txt-body-size) * 0.72));
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-text);
  background-color: var(--c-bg);
  border: 1px solid var(--c-blue);
  border-bottom: none;
}

.c-tabs__btn + .c-tabs__btn {
  border-left: none;
}

/* 原稿のアクティブタブは「青地に白」ではなく「青地に黒」（実測 #111315）。 */
.c-tabs__btn.is-active {
  color: var(--c-text);
  background-color: var(--c-blue);
}

/* パネルの左右パディングは原稿実測（パネル幅に対し 左 19.9% / 右 15.6%）。
 * % のパディングは包含ブロック＝パネルと同幅の .c-tabs を基準に解決されるので、
 * ここでは意図どおりパネル幅に対する比になる。 */
.c-tabs__panel {
  display: none;
  padding: clamp(24px, 3.33vw, 53px) 15.6% clamp(24px, 2.92vw, 47px) 19.9%;
  border: 1px solid var(--c-blue);
}

.c-tabs__panel.is-active {
  display: block;
}

/* part-contact.php から /contact/#business や #general で飛んでくるが、
 * id を持っているのはパネルなので、そのままだとパネルの上端が画面の上端に来て
 * タブの見出しが画面外に隠れる（ユーザー指摘 2026-10-19）。
 * タブの高さぶん＋余白を scroll-margin-top で戻しておく。
 * ドロワーが出る 1000px 未満では html の scroll-padding-top（固定ヘッダー分）が
 * さらに加算されるので、ここではヘッダー分を見込まなくてよい。 */
.c-tabs__panel {
  scroll-margin-top: clamp(105px, 8.3vw, 140px);
}

/* パネル冒頭のリードは原稿で 3 行（文末ごとに <br> が入っている）。
 * 帯（--band-scale 0.9）のぶんパネルが原稿より約 10% 狭いので、本文サイズの
 * ままだと 3 行目だけ折り返して 4 行になる。字送りを少し詰めて収めている。 */
.c-tabs__panel > p {
  /* リード最終行から最初の入力欄まで、原稿実測で 1440px 換算 71px。 */
  margin-bottom: clamp(24px, 4.93vw, 79px);
  font-size: calc(var(--txt-body-size) * 0.95);
  letter-spacing: 0.06em;
}

/* フォーム（CF7 の生成する input / textarea を直接スタイリング） */
/* 原稿ではラベルと入力欄が同じ行に並ぶ 2 カラム。パネルの内容幅に対して
 * ラベル列 29.5% / 入力列 70.5%（原稿実測：ラベル左 19.9%、入力 38.9%〜84.4%）。 */
.c-form-row {
  display: grid;
  grid-template-columns: 29.5% 1fr;
  align-items: start;
  margin-top: clamp(20px, 2.78vw, 44px);
}

.c-form-row:first-child {
  margin-top: 0;
}

/* CF7 は各コントロールを span.wpcf7-form-control-wrap で包む。
 * インラインのままだとグリッドの 2 列目で高さが揃わない。 */
.c-form-row .wpcf7-form-control-wrap {
  display: block;
}

.c-form-row label {
  display: block;
  /* 入力欄（約 40px）に対してラベルの 1 行を光学的に中央へ。 */
  padding-top: 0.63em;
  font-size: max(12px, calc(var(--txt-body-size) * 0.72));
  font-weight: 500;
  line-height: 1.6;
}

.c-form-row input[type="text"],
.c-form-row input[type="email"],
.c-form-row input[type="tel"],
.c-form-row textarea {
  width: 100%;
  /* 原稿の入力欄の高さは 1440px 換算で約 40px。角丸は無し。 */
  padding: 0.55em 0.8em;
  font-family: inherit;
  line-height: 1.6;
  font-size: max(12px, calc(var(--txt-body-size) * 0.72));
  color: var(--c-text);
  background-color: var(--c-bg);
  border: 1px solid var(--c-blue);
  border-radius: 0;
}

.c-form-row textarea {
  height: 8em;      /* 原稿 1440px 換算で約 114px */
  min-height: 0;
  resize: vertical;
}

.c-form-privacy {
  /* 原稿 1440px 換算で約 90px。中身はプライバシーポリシー全文なので、
     4 行目が途中で切れて見えるのは「続きがある」ことを示す意図的な状態。
     overflow が切るのは padding ボックスの下端なので、高さをどう刻んでも
     行の途中で切れる（padding-bottom の内側にも本文が入り込むため）。 */
  height: 7em;
  padding: 0.8em 1em;
  overflow-y: auto;
  font-size: max(11px, calc(var(--txt-body-size) * 0.66));
  line-height: 1.8;
  color: var(--c-text-light);
  border: 1px solid var(--c-blue);
}

/* 枠の中はプライバシーポリシーの全文（条文が 10 段落ほど続く）。
 * .p-contact-page__inner p + p の 1.6em がそのまま効くと条文ごとに大きく空くので、
 * ここで詰める。詳細度はどちらも (0,1,2) で同じなので、記述順で勝たせるために
 * このブロックは .p-contact-page__inner のルールより後ろに置くこと。 */
.c-form-privacy p + p {
  margin-top: 0.8em;
}

.c-form-privacy strong {
  font-weight: 500;
  color: var(--c-text);
}

/* 同意チェックと送信ボタンは、原稿では入力欄の列に揃う。 */
.c-form-agree {
  margin-top: 0.7em;
  margin-left: 29.5%;
  font-size: max(11px, calc(var(--txt-body-size) * 0.66));
}

.c-form-agree .wpcf7-list-item {
  margin: 0;
}

.c-form-submit {
  margin-top: clamp(24px, 3.33vw, 53px);
  margin-left: 29.5%;
}

/* 原稿のボタンは入力欄の左端に揃い、幅はその 65.3%、角丸は半円。
 * 文字は白ではなく黒（アクティブタブと同じ扱い）。 */
.c-form-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 65.3%;
  min-width: 0;
  padding: 1.3em 1em;
  font-size: max(12px, calc(var(--txt-body-size) * 0.72));
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--c-text);
  background-color: var(--c-blue);
  border: none;
  border-radius: 999px;
  transition: opacity 0.3s ease;
}

.c-form-submit input[type="submit"]:hover {
  opacity: 0.8;
}

/* 「上記内容に同意する」が未チェックの間は押せない（modules/formGate.js）。 */
.c-form-submit input[type="submit"]:disabled {
  background-color: #c6dbe6;
  cursor: not-allowed;
}

.c-form-submit input[type="submit"]:disabled:hover {
  opacity: 1;
}

/* ⚠ CF7 の styles.css は header.php の wp_head() で読み込まれるため、
 * テーマの style.css より後に来る。詳細度が同じだと CF7 が勝つので、
 * CF7 の既定を上書きするルールは必ず 1 段深いセレクタで書くこと。
 *   CF7: .wpcf7-not-valid-tip { font-size: 1em }      （0,1,0）
 *   CF7: form .wpcf7-response-output { … }            （0,1,1）
 * 裸の .wpcf7-not-valid-tip だと本文サイズのまま出る（2026-10-19 に実際に発生）。 */
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.4em;
  font-size: max(11px, calc(var(--txt-body-size) * 0.66));
  line-height: 1.6;
  color: var(--c-accent);
}

.wpcf7 form .wpcf7-response-output {
  margin-top: 1.6em;
  margin-left: 29.5%;
  padding: 1em;
  font-size: max(11px, calc(var(--txt-body-size) * 0.66));
  line-height: 1.6;
  border: 1px solid var(--c-line);
}

@media (width < 800px) {
  .wpcf7 form .wpcf7-response-output {
    margin-left: 0;
  }
}

/* SP では 2 カラムをやめて縦積みに戻し、パネルのパディングも % ではなく
 * 通常の余白にする。※ .p-contact-page 系の @media は上の方にあって記述順で
 * 負けるので、基本ルールの直後にこの @media を置くこと。 */
@media (width < 800px) {
  .c-tabs__btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.9em 0.6em;
  }

  .c-tabs__panel {
    padding: clamp(20px, 5vw, 32px) var(--inner-pad);
  }

  .c-form-row {
    display: block;
  }

  .c-form-row label {
    padding-top: 0;
    margin-bottom: 0.5em;
  }

  .c-form-agree,
  .c-form-submit {
    margin-left: 0;
  }

  .c-form-submit input[type="submit"] {
    width: 100%;
  }
}

/* ==========================================================================
 * Project / 下層ページ 規約・ポリシー系（Privacy Policy / Terms / Security Policy）
 * ========================================================================== */
/* デザイン案に構成が無いページ。他の下層ページと同じ規則（ラベル無しの
 * 25% / minmax(0,50%) / 1fr 中央カラム）に揃えている。 */
.p-legal-page {
  /* 上余白はパンくず直下のため半分（旧 clamp(50px, 7vw, 90px)） */
  padding: clamp(25px, 3.5vw, 45px) 0 clamp(60px, 8vw, 110px);
}

.p-legal-page__inner {
  display: grid;
  grid-template-columns: 22.8% minmax(0, 56.2%) 1fr;
  max-width: var(--band-w);
  margin-inline: auto;
}

.p-legal-page__inner > * {
  grid-column: 2;
  min-width: 0;
}

@media (width < 1000px) {
  .p-legal-page__inner {
    grid-template-columns: 14% minmax(0, 76%) 1fr;
  }
}

@media (width < 800px) {
  .p-legal-page {
    padding-inline: var(--inner-pad);
  }

  .p-legal-page__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-legal-page__inner > * {
    grid-column: 1;
  }
}

/* 規約・ポリシー本文の共通タイポグラフィ */
.c-article {
  margin-top: clamp(30px, 4vw, 50px);
}

/* ※ 2026-10-28 時点では、正式な文書が未提示なので 3 ページとも制定日の行を外してある。
   日付が決まったら content/*.html 側にこの <p> を戻すだけでよい。 */
.c-article__updated {
  margin-bottom: 2em;
  font-size: var(--fz11);
  letter-spacing: 0.04em;
  color: var(--c-text-light);
}

/* 本文の下に置くボタン（404 と検索結果で共用）。
   .c-article p + p（0,1,2）に勝たせるため、クラス 2 つのセレクタで書く。
   裸の .c-article__btn（0,1,0）だと要素セレクタ 2 つぶん負けて、本文と同じ間隔になる。 */
.c-article .c-article__btn {
  margin-top: clamp(28px, 3.5vw, 50px);
}

.c-article section + section {
  margin-top: 2.4em;
}

.c-article p + p {
  margin-top: 1.2em;
}

.c-article ol,
.c-article ul {
  margin-top: 1em;
  padding-left: 1.4em;
}

.c-article ol {
  list-style: decimal;
}

.c-article ul {
  list-style: disc;
}

.c-article li + li {
  margin-top: 0.5em;
}

.c-article address {
  margin-top: 1em;
  font-style: normal;
  line-height: 1.9;
}

/* ==========================================================================
 * Project / 西条チタン村バナー
 * ========================================================================== */
/* 左右の padding は持たせない（バナーの位置は __link の margin で画面幅基準に決める）。
   SP だけ下の @media で余白を戻す。 */
.p-banner {
  padding: 0 0 clamp(50px, 7vw, 90px);
}

/* 原稿の再実測（2026-10-16）：バナーは 14.8%〜83.5%、幅 68.8%、比率 5.70:1
 * （1440px で 990×174px）。最初に測った 84.7% / 2.56:1 は、灰色検出が隣の要素まで
 * 拾ってしまった誤りだった。
 * ※ 2026-10-27 に実物のロゴ（800×124、6.45:1）が支給されたので、原稿の 5.70:1 で
 *    切り抜くのをやめ、画像本来の比率で出している（1440px で 868×135px）。 */
.p-banner__link {
  display: block;
  /* 原稿ではバナーの左端が地図の左端と同じ。地図は帯の 16.5% から始まるので、
     バナーも帯基準で同じ位置・幅 67% にする。画面幅に対する % で書くと、
     --band-scale で帯を縮めたときにバナーだけ取り残されて地図とずれる。 */
  width: calc(var(--band-w) * 0.67);
  margin-left: calc((100% - var(--band-w)) / 2 + var(--band-w) * 0.165);
  margin-right: auto;
}

@media (width < 800px) {
  .p-banner {
    padding-inline: var(--inner-pad);
  }

  .p-banner__link {
    /* PC の width / margin-left を解除しないと、SP でも帯の中に収まってしまう */
    width: auto;
    max-width: 100%;
    margin-inline: auto;
  }
}

.p-banner__link img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
 * Project / 404
 * ========================================================================== */
/* 列も上下の余白も .p-legal-page（ポリシー 3 ページ）と共有する。
 * ここに書くのは 404 固有のパーツ（大きな数字とボタン）だけ。
 * 本文が 3 行しかないぶん下に白が余るが、独自の padding を足して他ページと
 * 違うリズムにするより、同じ値のまま揃えておく方がよい。 */

/* 「404」は読む文字ではなく構図の一部なので、本文比ではなく vw で決める
   （ファーストビューの見出しや c-label-vertical と同じ考え方）。 */
.p-404__code {
  /* 見出し（c-ttl）とくっつかないように。英文と和文は 1 組に見せたいので、
     c-ttl 自身の margin-bottom（0.59em ≒ 26px @1440）より少し狭くしてある。 */
  margin-bottom: clamp(12px, 1.4vw, 22px);
  font-family: var(--ff-en);
  font-size: clamp(44px, 6.4vw, 102px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--c-accent);
}

/* 英文は数字の下に小さく置く（ヘッダーナビの「英文 → 和文」と同じ組み方）。 */
.p-404__en {
  display: block;
  margin-top: 0.5em;
  font-size: calc(var(--txt-body-size) * 0.92);
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--c-text);
}



@media (width < 800px) {
  .p-404__en {
    letter-spacing: 0.16em;
  }
}

/* ==========================================================================
 * Project / 検索結果
 * ========================================================================== */
/* 列も上下の余白も .p-legal-page（ポリシー 3 ページ・404）と共有する。 */

/* 入力欄とボタンを 1 行に。入力欄の見た目は CONTACT のフォームに合わせてある。 */
.p-search__form {
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 1vw, 16px);
  margin-top: clamp(24px, 3vw, 40px);
}

.p-search__form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55em 0.8em;
  font-family: inherit;
  font-size: max(12px, calc(var(--txt-body-size) * 0.72));
  line-height: 1.6;
  color: var(--c-text);
  background-color: var(--c-bg);
  border: 1px solid var(--c-blue);
  border-radius: 0;
  appearance: none;
}

.p-search__count {
  margin-top: clamp(28px, 3.5vw, 50px);
  font-size: max(12px, calc(var(--txt-body-size) * 0.8));
  color: var(--c-text-light);
}

.p-search__list {
  margin-top: clamp(12px, 1.5vw, 20px);
  border-top: 1px solid var(--c-line);
}

.p-search__item {
  border-bottom: 1px solid var(--c-line);
}

.p-search__item a {
  display: block;
  padding: 0.9em 0;
  font-weight: 500;
  line-height: 1.6;
  transition: color 0.3s ease;
}

.p-search__item a:hover {
  color: var(--c-accent);
}

/* the_posts_pagination() の既定マークアップ（.nav-links / .page-numbers）。
   固定ページだけのサイトなので普段は出ないが、出たときに崩れないようにしておく。 */
.p-search .pagination {
  margin-top: clamp(28px, 3.5vw, 50px);
}

.p-search .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.p-search .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  padding: 0.4em 0.7em;
  font-family: var(--ff-en);
  font-size: max(12px, calc(var(--txt-body-size) * 0.72));
  line-height: 1.6;
  border: 1px solid var(--c-line);
}

.p-search .page-numbers.current {
  color: #FFFFFF;
  background-color: var(--c-teal);
  border-color: var(--c-teal);
}

@media (width < 640px) {
  .p-search__form {
    flex-wrap: wrap;
  }

  .p-search__form input[type="search"] {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
 * Utility
 * ========================================================================== */
.u-txt-center { text-align: center; }
.u-txt-left   { text-align: left; }
.u-txt-right  { text-align: right; }
.u-txt-nowrap { white-space: nowrap; }
.u-zero-top    { margin-top: 0 !important; }
.u-zero-bottom { margin-bottom: 0 !important; }

/* SP時のみ改行させる（PCでは非表示） */
.u-br-sp { display: none; }

@media (width < 800px) {
  .u-br-sp {
    display: inline;
  }
}

/* PC時のみ改行させる（SPでは非表示） */
.u-br-pc { display: inline; }

@media (width < 800px) {
  .u-br-pc {
    display: none;
  }
}

/* PC/SP でどちらかにしか出さない要素の出し分け */
.u-only-pc { display: block; }
.u-only-sp { display: none; }

@media (width < 800px) {
  .u-only-pc {
    display: none;
  }

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

/* 読み込み後のふわっと表示 */
.u-fade {
  opacity: 0;
  animation: fadeIn 1.2s ease 0.2s forwards;
}

/* スクロール連動フェードイン（.js-fade-in と併用） */
/* ★ transform ではなく translate プロパティを使うこと。
 *   transform だと .c-label-vertical--left の rotate() を打ち消してしまい、
 *   縦書きラベルの向きが is-show 付与と同時に元に戻ってしまう。 */
.u-fade-in {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.9s ease, translate 0.9s ease;
}

.u-fade-in.is-show {
  opacity: 1;
  translate: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* アニメーションを控えたいユーザー向け */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .u-fade,
  .u-fade-in {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}