/* theme.css — tools/sync-theme-css.mjs が生成する。直接編集しない。
   元は prototype/src/styles/ で、index.css の @import 順に連結してある。 */

/* ===== ./tokens.css ===== */
/* ==========================================================================
   tokens.css — 値の唯一の正（Single Source of Truth）
   出どころ: Figma h4rVNRlGiHthKsl95uO0NV
             PC ページ 315:2187 / SP ページ 242:493
   このファイル以外に生の #rrggbb / px を書かない。
   Figma に名前付きスタイルは 0 件なので、すべて実使用ノードの実測値。
   ========================================================================== */

:root {
  /* --- Color / Brand ------------------------------------------------- */
  /* 実測使用数: 塗り・線 1588 / 文字 426 */
  --color-primary: #0092e5;
  /* TOP・下層のカード背景（不透明度つきで重ねる） */
  --color-navy: #0b325d;
  --color-navy-deep: #061f3b;
  /* 強調（必須マーク・エラー・電話番号など） 実測 104 */
  --color-accent: #dc000c;
  /* TOP COMPANY セクションの英字見出し 実測 8 */
  --color-highlight: #fff200;

  /* --- Color / Text -------------------------------------------------- */
  /* 本文の既定色。実測 1828 件で最多 */
  --color-text-body: #474645;
  --color-text-strong: #1b1b1b;
  --color-text-black: #000000;
  --color-text-muted: #959392;
  --color-text-caption: #909090;
  --color-text-inverse: #ffffff;

  /* --- Color / Surface ----------------------------------------------- */
  --color-bg-base: #ffffff;
  --color-bg-tint: #cde7f7;      /* 淡青の帯 実測 168 */
  --color-bg-tint-weak: #ecf8ff; /* さらに淡い青 実測 11 */
  --color-bg-gray: #f2f2f2;
  --color-bg-alert: #fdf3f4;     /* 入力の誤りを示す淡い赤（#DC000C の 4%） */
  --color-bg-gray-weak: #fafafa;
  --color-bg-illust-top: #fbfeff;    /* 製品イラストのカード（線形グラデーション） */
  --color-bg-illust-bottom: #e3f5ff;
  --color-bg-placeholder: #d9d9d9; /* カンプの画像プレースホルダ矩形 */

  /* --- Color / Line -------------------------------------------------- */
  --color-border: #474645;
  --color-border-light: #cfcfcf;
  --color-border-soft: #a7a8ba;   /* CONTACT まわりの区切り線（カンプ Line 9 / Line 10） */
  --color-border-primary: #0092e5;
  --color-border-primary-light: #87cbf2; /* SP のタブ（現在地）の枠 */
  --color-border-input: #a2a2a2; /* フォームの入力枠 */
  /* SP メニューの区切り線（カンプ 997:2111 の Line 37〜41・#FFFFFF 50%） */
  --color-border-menu: rgb(255 255 255 / 50%);

  /* --- Color / Composite（不透明度つきの重ね。カンプの値をそのまま） -- */
  --color-card-navy-50: rgb(11 50 93 / 0.5);
  --color-card-navy-85: rgb(11 50 93 / 0.85);
  --color-white-50: rgb(255 255 255 / 0.5);
  --color-drone-veil: rgb(0 146 229 / 0.6); /* KV の次のセクションの水色 #0092E5 60%（Ellipse 6） */
  /* RECRUIT の背景にかける幕（カンプ Rectangle 48 / 縦グラデーション 80%） */
  --color-recruit-veil-from: #164375;
  --color-recruit-veil-to: #2a7edb;
  --color-hero-veil-solid: #a7a8ba;            /* TOP ヒーローの MULTIPLY 幕（不透明度なし） */
  --color-hero-veil: rgb(167 168 186 / 0.66); /* 下層ヒーローの MULTIPLY 幕 */
  /* TOP ABOUT / COMPANY の白い幕。カンプは白 80% SCREEN だが、それだと後ろの
     ドローン映像がほぼ飛ぶので、映像が見える 50% にしている（2026-09-06 ユーザー指示）*/
  /* カンプ 489:6890 / 489:6891 の Rectangle 10・11（白・不透明度 80%・SCREEN）。
     0.5 では薄いという指摘を受けてカンプの値に戻した（FB 2026-09-08 p4） */
  --color-veil-white: rgb(255 255 255 / 0.8);
  --color-veil-white-0: rgb(255 255 255 / 0);  /* 同グラデーションの起点 */
  --color-line-70: rgb(71 70 69 / 0.7);        /* お知らせの分類バッジの枠 */

  /* --- Typography / Family ------------------------------------------- */
  --font-family-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Meiryo", sans-serif;
  --font-family-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN",
    "Hiragino Sans", sans-serif;
  --font-family-en: "Krona One", "Albert Sans", system-ui, sans-serif;
  --font-family-en-alt: "Albert Sans", system-ui, sans-serif;

  /* --- Typography / Weight ------------------------------------------- */
  --font-weight-light: 350;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Typography / Size（カンプの実数値をそのまま名前にする） -------- */
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-23: 23px;
  --font-size-25: 25px;
  --font-size-28: 28px;
  --font-size-30: 30px;
  --font-size-35: 35px;
  --font-size-40: 40px;
  --font-size-45: 45px;
  --font-size-50: 50px;
  --font-size-55: 55px;
  --font-size-60: 60px;
  --font-size-70: 70px;
  --font-size-80: 80px;
  --font-size-100: 100px;
  --font-size-120: 120px;

  /* --- Typography / Line height（実測。単位なしの比率に直したもの） --- */
  --line-height-tight: 1.2;   /* 16px/19.2・14px/16.8・18px/21.6 */
  --line-height-heading: 1.25;/* Krona One 系（35/43.75・100/125） */
  --line-height-body: 1.8;    /* 20px/36・18px/32.4 */
  --line-height-body-sp: 1.72;/* SP 16px/27.52 */
  --line-height-loose: 2.1;   /* 18px/38 */

  /* --- Typography / Letter spacing ----------------------------------- */
  --letter-spacing-none: 0;
  --letter-spacing-wide: 0.17em; /* 14px に ls 2.38px（ヘッダーの電話見出し） */

  /* --- Spacing（カンプの実数値をそのまま名前にする） ------------------ */
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-21: 21px;
  --space-24: 24px;
  --space-25: 25px;
  --space-26: 26px;
  --space-27: 27px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-33: 33px;
  --space-34: 34px;
  --space-35: 35px;
  --space-36: 36px;
  --space-37: 37px;
  --space-42: 42px;
  --space-38: 38px;
  --space-40: 40px;
  --space-41: 41px;
  --space-43: 43px;
  --space-46: 46px;
  --space-47: 47px;
  --space-44: 44px;
  --space-45: 45px;
  --space-48: 48px;
  --space-50: 50px;
  --space-52: 52px;
  --space-55: 55px;
  --space-58: 58px;
  --space-60: 60px;
  --space-66: 66px;
  --space-70: 70px;
  --space-75: 75px;
  --space-79: 79px;
  --space-80: 80px;
  --space-87: 87px;
  --space-88: 88px;
  --space-90: 90px;
  --space-98: 98px;
  --space-100: 100px;
  --space-110: 110px;
  --space-120: 120px;
  --space-140: 140px;
  --space-160: 160px;
  --space-180: 180px;
  --space-200: 200px;

  /* --- Radius --------------------------------------------------------- */
  --radius-5: 5px;    /* ボタン・カード */
  --radius-10: 10px;  /* 大きな画像 */
  --radius-20: 20px;  /* FAQ カード */
  --radius-34: 34px;  /* 固定ハンバーガーの左下だけの角丸 */
  --radius-pill: 50px;
  --radius-circle: 50%;

  /* --- Shadow / Blur（カンプの effects より） ------------------------- */
  --shadow-card: 0 4px 10px rgb(0 0 0 / 0.25); /* DROP_SHADOW(10) */
  --shadow-panel: 0 4px 20px rgb(0 0 0 / 0.25); /* DROP_SHADOW(20)。TOP の FAQ カード */
  --shadow-tab: 0 0 20px rgb(0 0 0 / 0.2);     /* DROP_SHADOW(20)・ずれ 0。下層ページのタブ */
  --blur-card: 5px;                             /* BACKGROUND_BLUR(5) */

  /* --- Layout（PC 1920 アートボード。左右 180px 余白 → 中身 1560px） -- */
  --layout-artboard: 1920px;
  --layout-container: 1560px;
  --layout-gutter: 180px;
  /* ヘッダーはコンテナと別の余白。カンプ実測: 左 43px / 右 47px */
  --layout-header-gutter: var(--space-43);
  --layout-header-gutter-right: var(--space-47);
  --layout-header-height: 89px;    /* 41(上余白) + 5(ロゴのずれ) + 43(ロゴの高さ) */
  /* 下層 FV で青ベタがメインビジュアルに重なる量。
     カンプは写真（1560×599）の下端より 336px 上 ＝ 写真の高さの 56%。
     写真は幅なりに縮むので 336px 固定にすると狭い画面で写真をほぼ覆ってしまう
     （FB 2026-09-14 p10）。写真の高さ ＝ コンテンツ幅 × 599/1560 なので、
     重なりは コンテンツ幅 × 336/1560 で出す。
     ※ 100% は使う側の包含ブロック幅で解決される（container.css と同じ書き方） */
  --band-overlap: calc(
    min(var(--layout-container), 100% - var(--layout-gutter) * 2) * 336 / 1560
  );
  --layout-header-height-sp: 51px; /* 14(上余白) + 37(ロゴ高) */

  /* WordPress にログインしているときだけ画面の上に出る管理バー（#wpadminbar）の高さ。
     値は WP コアの admin-bar.css（783px 以上 32px ／ 782px 以下 46px）。
     画面に固定する要素はこのぶん下げる（base.css の body.admin-bar で切り替える。
     prototype とログアウト中は 0） */
  --admin-bar-height-pc: 32px;
  --admin-bar-height-sp: 46px;
  --admin-bar-offset: 0px;

  /* --- z-index -------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-loader: 500;

  /* --- Motion（Figma プロトタイプ実測。docs/motion-top-pc.md 参照） ---- */
  --duration-fast: 0.2s;
  --duration-hover: 0.3s; /* カンプのホバーはほぼすべて 0.3s / LINEAR */
  --duration-base: 0.4s;
  --duration-veil: 0.5s; /* COMPANY の写真が濃くなる尺（87:1547 → 87:1546 実測） */
  --duration-drone: 0.6s; /* KV の次のセクションの映像が出る尺（159:671 → 159:670 実測） */
  /* 水色の円が広がる速さ。2026-09-06 に 0.35s まで短くしたが、
     速すぎるという指摘でカンプ実測（0.5s / 0.6s）に戻した（FB 2026-09-18 p4） */
  --duration-arc: 0.6s;
  --easing-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* カンプの SMART_ANIMATE はすべて LINEAR */
  --easing-linear: linear;

  /* KV スライドショー（489:6839 / ComponentSet 33:569） */
  --hero-slide-hold: 5.5s;       /* ゆっくりズームしている時間 */
  --hero-slide-wipe: 0.4s;       /* 円が中央から広がって次の画像に切り替わる時間 */
  --hero-slide-zoom: 1.04375;    /* 画像 1920 → 2004px（中心固定） */
  --hero-slide-wipe-from: 3.21%; /* 円 100φ */
  --hero-slide-wipe-to: 71.13%;  /* 円 2216φ。70.71% で画面の対角を覆いきる */

  /* オープニング（489:6998 → 489:6982 → TOP） */
  --loader-delay: 0.5s;      /* 白のみで待つ */
  --loader-fade-in: 1s;      /* ブルーのロゴが出る */
  --loader-hold: 2.8s;       /* 保持（待機 0.5s の直後から数える） */
  --loader-fade-out: 0.8s;   /* 幕が消えて TOP が現れる */

  /* マークの押下アニメーション（ComponentSet 14:43 実測）。
     オープニングの終わりと、KV のスライドが切り替わるたびに 1 回ずつ走る */
  --press-in: 0.5s;    /* 148 → 138 に沈む */
  --press-out: 0.3s;   /* 138 → 148 に戻る */
  --press-scale: 0.9324; /* 138 ÷ 148 */

  /* マークの影（同 14:43 実測）。押下で外側の影が消えて内側の影に入れ替わる。
     影は SVG からは外してあり、ここが唯一の持ち主 */
  --shadow-mark: 0 0 30px rgb(16 16 16 / 0.3); /* 通常 DROP_SHADOW #101010 30% / radius 30 */
  --shadow-mark-off: 0 0 0 rgb(16 16 16 / 0);
  --shadow-mark-inset: inset 0 0 20px rgb(16 16 16 / 0.4); /* 押下 INNER_SHADOW #101010 40% / radius 20 */
  --shadow-mark-inset-off: inset 0 0 0 rgb(16 16 16 / 0);

  /* --- Semantic（用途別のエイリアス。CSS からはこちらを参照） --------- */
  --font-size-body: var(--font-size-18);
  --font-size-body-sm: var(--font-size-16);
  --font-size-caption: var(--font-size-14);
  --font-size-nav: var(--font-size-16);
  --font-size-lead: var(--font-size-20);
  --font-size-heading-hero: var(--font-size-100);
  --font-size-heading-xl: var(--font-size-70);
  --font-size-heading-lg: var(--font-size-45);
  --font-size-heading-md: var(--font-size-35);
  --font-size-heading-sm: var(--font-size-23);
  --font-size-en-hero: var(--font-size-120);
  --font-size-en-lg: var(--font-size-80);
  --font-size-en-md: var(--font-size-35);
  --font-size-en-sm: var(--font-size-30);
  --font-size-en-xs: var(--font-size-20);

  --space-section: var(--space-160);
  --space-section-inner: var(--space-80);
  --space-heading-gap: var(--space-30);

  /* 見出し系だけに掛ける縮尺。中間幅の崩れは分岐ではなくこれで受ける */
  --font-scale: 1;
}

/* --- TAB: 768〜1279px ------------------------------------------------- */
@media (max-width: 1279px) {
  :root {
    --font-scale: 0.8;
    --layout-container: 100%;
    --layout-gutter: var(--space-40);
    --layout-header-gutter: var(--space-24);
    --layout-header-gutter-right: var(--space-24);
    --space-section: var(--space-100);
    --space-section-inner: var(--space-60);
  }
}

/* --- SP: 767px 以下（SP カンプ 393px の実数値をそのまま使う） --------- */
@media (max-width: 767px) {
  :root {
    --font-scale: 1;
    --layout-artboard: 393px;
    --layout-container: 353px;
    --layout-gutter: var(--space-20);
    --layout-header-gutter: 13px;       /* SP カンプのロゴ左端 */
    --layout-header-gutter-right: 18px; /* SP カンプ 393 - 339 - 36.3 */

    --font-size-body: var(--font-size-16);
    --font-size-body-sm: var(--font-size-14);
    --font-size-caption: var(--font-size-13);
    --font-size-lead: var(--font-size-16);
    --font-size-heading-hero: var(--font-size-40);
    --font-size-heading-xl: var(--font-size-40);
    --font-size-heading-lg: var(--font-size-30);
    --font-size-heading-md: var(--font-size-25);
    --font-size-heading-sm: var(--font-size-20);
    --font-size-en-hero: var(--font-size-35);
    --font-size-en-lg: var(--font-size-30);
    --font-size-en-md: var(--font-size-20);
    --font-size-en-sm: var(--font-size-20);

    --line-height-body: var(--line-height-body-sp);

    --space-section: var(--space-80);
    --space-section-inner: var(--space-40);
    --space-heading-gap: var(--space-20);
  }
}

/* ===== ./reset.css ===== */
/* reset.css — 正規化。値は持たない（値は tokens.css だけ） */

*,
*::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, ul, ol {
  margin: 0;
}

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

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

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

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

address {
  font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important; /* 動きを止めるための例外。reduced-motion の尊重 */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== ./base.css ===== */
/* base.css — 要素セレクタの既定 */

body {
  min-width: 320px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
  background-color: var(--color-bg-base);
  /* 和文の約物を詰める（Figma の和文は palt 相当で組まれている） */
  font-feature-settings: "palt" 1;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--easing-standard);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* カンプのテキストノードは leadingTrim = CAP_HEIGHT（＝行送りの上下のアキを落とす）。
   これを当てないと、カンプから写した margin が行送りのぶんだけ広く出る。 */
/* WordPress の管理バー（#wpadminbar）は WP 側の CSS で組まれているので外す。
   当てると項目の文字が上に寄る（2026-09-30 指摘）。:where で包んで詳細度 0 を保つ */
:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, figcaption, address, a, time, span):where(:not(#wpadminbar *)) {
  text-box: trim-both cap alphabetic;
}

/* 和文はどこでも折り返せるが英数字は折り返さない。型番・URL の溢れ止め */
:where(p, span, dd, li, td, th):where(:not(#wpadminbar *)) {
  overflow-wrap: anywhere;
}

/* WordPress にログイン中は、管理バーが画面の上に固定で重なり、ページ全体は WP が
   html の margin-top でそのぶん下げる。画面に固定しているハンバーガーと全画面メニューは
   その対象にならないので、--admin-bar-offset で同じだけ下げる（2026-10-04 指摘。
   ヘッダーだけ下がってハンバーガーが 32px 上にずれ、SP では管理バーの下に隠れて押せなかった）。
   782px は WP コアの admin-bar.css の切り替え幅 */
body.admin-bar {
  --admin-bar-offset: var(--admin-bar-height-pc);
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --admin-bar-offset: var(--admin-bar-height-sp);
  }

  /* WP は 600px 以下で管理バーをスクロールで流す（position: absolute）。流れると
     ハンバーガーの上に 46px の隙間が空くので、ここでは画面に固定したままにする */
  body.admin-bar #wpadminbar {
    position: fixed;
  }
}

/* 本文＋フッターの箱。下端からはみ出した装飾（RECRUIT の背景など）を切って、
   フッターの下にスクロールできる余りが生まれないようにする。
   clip はスクロール領域を作らないので、中の position: sticky は
   これまでどおり画面に対して効く。 */
.site-body {
  overflow-y: clip;
}

/* ===== ./typography.css ===== */
/* typography.css — カンプのテキストスタイルを .type-* として写したもの
   Figma に名前付きスタイルは無いので、実使用ノードの実測値から起こしている。 */

/* 英字の大見出し（Krona One）。TOP と各下層のセクション頭
   カンプの Krona One のテキストノードは leadingTrim が無い（枠の高さ＝行送り）ので、
   和文と違って text-box のトリムを当てない。当てると次の要素との間隔が広くなる。 */
.type-en-hero,
.type-en-lg,
.type-en-md,
.type-en-sm,
.type-en-date {
  text-box: normal;
}

.type-en-hero {
  font-family: var(--font-family-en);
  font-size: calc(var(--font-size-en-hero) * var(--font-scale));
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
}

.type-en-lg {
  font-family: var(--font-family-en);
  font-size: calc(var(--font-size-en-lg) * var(--font-scale));
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
}

.type-en-md {
  font-family: var(--font-family-en);
  font-size: calc(var(--font-size-en-md) * var(--font-scale));
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
}

.type-en-sm {
  font-family: var(--font-family-en);
  font-size: calc(var(--font-size-en-sm) * var(--font-scale));
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
}

/* 日付・英数字の小見出し（Albert Sans 600） */
.type-en-date {
  font-family: var(--font-family-en-alt);
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* 和文の大見出し（Zen Maru Gothic 700） */
.type-heading-hero {
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-heading-hero) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.type-heading-xl {
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-heading-xl) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.type-heading-lg {
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-heading-lg) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.type-heading-md {
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-heading-md) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.type-heading-sm {
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-heading-sm) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* 本文（Noto Sans JP 500 18px / lh 32.4 = 1.8） */
.type-body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

.type-body-sm {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

.type-caption {
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
}

/* ===== ./common.css ===== */
/* common.css — 複数ページに同じ見た目で現れるものだけを置く。
   ページ固有の差分は pages/*.css の固有クラスに書き、同じ要素へ併記する。

     <div class="common__inner company__inner container">
     <h2 class="common__heading company__heading">会社概要</h2>

   ルール（`design-comp-to-code` / references/03-tokens-and-css.md）
     ・.common__* は単独で見た目が完成していること
     ・固有クラスには差分だけ書く（全プロパティを再宣言しない）
     ・詳細度を上げない（`.company .common__heading` は禁止）
     ・3 ページ以上で同じ見た目になってから共通化する

   出どころ: カンプ 315:2302（会社概要）・315:2457（会社沿革）・322:2726（部署紹介）ほか
     ラベル  x=180  Krona One 15px #0092E5
     見出し  x=180  Zen Maru Gothic 700 45px
     見出し列 180〜369（189px）／ 本文列 561 から（間 192px） */

/* --- セクションの縦余白 ------------------------------------------------- */

.common__section {
  padding-block-start: 200px; /* カンプ: 前の区画の下端 → 次のラベルまで */
}

/* --- 見出し列 ＋ 本文列の 2 段組 ---------------------------------------- */

.common__inner {
  display: grid;
  grid-template-columns: 189px 1fr;
  column-gap: 192px;
}

.common__head {
  /* 本文が長いので見出しは列の先頭に貼り付ける（カンプ Frame 26 / Frame 34 も同じ高さを持つ枠） */
  position: sticky;
  inset-block-start: var(--space-40);
  align-self: start;
}

/* --- 英字ラベル --------------------------------------------------------- */

.common__label {
  font-family: var(--font-family-en);
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  color: var(--color-primary);
  text-box: normal; /* カンプの Krona One は leadingTrim なし */
  /* カンプは COMPANY HISTORY（194px）も 1 行。見出しの列（189px）より
     少し広いが、右の本文列までは 192px あるので折り返さずに置く
     （FB 2026-09-08 p10） */
  white-space: nowrap;
}

/* --- 和文の大見出し ----------------------------------------------------- */

.common__heading {
  margin-block-start: var(--space-25); /* ラベルの枠の下端 1385 → 見出し 1410 */
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-45) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-body);
  /* カンプの見出しは列（189px）より広くても折り返さない
     （「主な取扱製品・」315px）。
     折る位置は文言側の改行だけ（FB 2026-09-08 p18） */
  white-space: nowrap;
}

/* --- リード文（カンプ 322:3095 ほか: 22px / 行送り 44・中央寄せ） -------- */

.common__lead {
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-medium);
  line-height: 2; /* カンプ実測: 22px に対し行送り 44px */
  text-align: center;
}

/* --- 本文（カンプ 322:3202 ほか: 18px / 行送り 38） --------------------- */

.common__body {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 2.11; /* カンプ実測: 18px に対し行送り 38px */
}

/* --- 青帯（下層のタブ帯。カンプ Rectangle 61 / 1920×445 #0092E5） ------- */

.common__band {
  /* 帯はメインビジュアル（下端 1127）より --band-overlap 上の 791 から始まる */
  margin-block-start: calc(var(--band-overlap) * -1);
  /* 帯の上端 791 → 親タブ 1070 ／ タブの下端 1217 → 帯の下端 1236。
     タブは写真の下端から 57px（336 − 279）上のままにしたいので、
     重なりを減らしたぶんは padding に戻す */
  padding-block: calc(var(--band-overlap) - 57px) 19px;
  /* 現在地のタブ（109px）は帯からはみ出すが、カンプでは帯の外に影も角も出ていない。
     隣のセクションが白で覆っている状態なので、帯で切って同じ見た目にする */
  overflow: hidden;
  background-color: var(--color-primary);
}

@media (max-width: 1279px) {
  .common__section {
    padding-block-start: var(--space-120);
  }

  /* 白い札の下のアキもカンプの半分にする（FB 2026-09-17 p2 / p4）。
     上側（写真の下端 → 札）は page-tabs.css 側 */
  .common__band {
    padding-block-end: var(--space-10); /* PC は 19px */
  }

  .common__inner {
    grid-template-columns: 160px 1fr;
    column-gap: var(--space-40);
  }
}

@media (max-width: 767px) {
  .common__section {
    padding-block-start: var(--space-80);
  }

  .common__inner {
    grid-template-columns: 1fr;
    row-gap: var(--space-32);
  }

  .common__head {
    position: static;
  }

  .common__heading {
    margin-block-start: var(--space-12);
    font-size: var(--font-size-30);
  }

  .common__lead {
    font-size: var(--font-size-16);
    line-height: var(--line-height-body-sp);
    text-align: start;
  }

  .common__body {
    font-size: var(--font-size-16);
    line-height: 1.9;
  }

  .common__band {
    margin-block-start: -100px;
    padding-block: var(--space-70) var(--space-20);
  }
}

/* --- マークの押下 ------------------------------------------------------ */

/* カンプ ComponentSet 14:43 実測。0.5s で 148 → 138 に沈み、0.3s で 148 に戻る。
   オープニング（.site-loader__mark）と KV 見出し（.hero__mark）の両方で使う。
   沈むと同時に、外側の影（DROP_SHADOW）が内側の影（INNER_SHADOW）に入れ替わる。
   要素の位置は各所の CSS が決めるので、ここでは拡大率と影だけを持つ。 */
@keyframes mark-press {
  0% {
    box-shadow: var(--shadow-mark);
    transform: scale(1);
  }

  /* 0.5s ÷ (0.5s + 0.3s) = 62.5% で沈みきる。外側の影はここで消える */
  62.5% {
    box-shadow: var(--shadow-mark-off);
    transform: scale(var(--press-scale));
  }

  100% {
    box-shadow: var(--shadow-mark);
    transform: scale(1);
  }
}

/* 入れ替わりで出てくる内側の影。上のキーフレームと同じ尺で重ねる */
@keyframes mark-press-inset {
  0% {
    box-shadow: var(--shadow-mark-inset-off);
  }

  62.5% {
    box-shadow: var(--shadow-mark-inset);
  }

  100% {
    box-shadow: var(--shadow-mark-inset-off);
  }
}

/* --- SP で消す改行 ----------------------------------------------------- */

/* カンプは SP で改行位置が変わる箇所がある。PC でだけ折りたいところに使う */
@media (max-width: 767px) {
  .u-br-pc {
    display: none;
  }
}

/* ===== ./layout/container.css ===== */
/* container.css — 画面骨格。PC カンプは 1920 アートボードの左右 180px 余白 → 中身 1560px */

.container {
  width: min(var(--layout-container), 100% - var(--layout-gutter) * 2);
  margin-inline: auto;
}

/* ヘッダーだけ左右 43px 起点（カンプ実測） */
.container--header {
  width: calc(100% - var(--layout-header-gutter) * 2);
  max-width: none;
  margin-inline: auto;
}

.section {
  padding-block: var(--space-section);
}

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

/* 改行位置は PC と SP で違う（カンプがそれぞれ別のアートボード）。
   <br> にこのクラスを付けて、効かせたい幅でだけ改行させる。
   ※ 見えなくするだけだと改行は残るので display で消す */
.u-br-pc {
  display: inline;
}

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

/* PC とタブレット横だけ。タブレット縦（1023 以下）では折らない */
.u-br-wide {
  display: inline;
}

/* タブレット縦（768〜1023）だけ折る。PC・タブレット横・SP では折らない。
   下層 FV の下の導入見出しがこの幅だけ収まらず、末尾が 1〜2 字だけ
   次の行に残るため（FB 2026-09-18 p1） */
.u-br-tab {
  display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .u-br-tab {
    display: inline;
  }
}

@media (max-width: 1023px) {
  .u-br-wide {
    display: none;
  }
}

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

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

/* ===== ./layout/site-header.css ===== */
/* site-header.css
   カンプ実測（PC 1920 アートボード / 会社案内 315:2211・TOP 489:6837）
     ロゴ            x=43   y=46  236×43
     ナビ 会社案内    x=913  y=57（16px / 500）
       └ 印(＋)      x=982  12×12  #0092E5   ※ラベルとの間 5px
     ナビ 私達のしごと x=1029、お知らせ x=1177、お問い合わせ x=1276  → 項目間 35px
     採用情報ボタン   x=1404 y=41  122×43  r=50  #0092E5
     電話ブロック     x=1558 y=43  198.3×39
     ハンバーガー     x=1823 y=49  50×23.4（右端 1873 = 1920-47）
   SP（245:989 ほか。カンプ上端 62px の iOS ステータスバーは実装しない）
     ロゴ            x=13  y=14  203.2×37
     ハンバーガー     x=339 y=22  36.3×17（線 3 本・間隔 8.5px） */

.site-header {
  position: relative;
  z-index: var(--z-header);
}

/* TOP のようにヒーローへ重ねる版。カンプではナビ文字が白 */
.site-header--overlay {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  color: var(--color-text-inverse);
}

.site-header__inner {
  display: flex;
  align-items: center;
  padding-block-start: var(--space-41); /* カンプ: 採用情報ボタンの上端 41 */
  padding-inline: var(--layout-header-gutter) var(--layout-header-gutter-right);
}

.site-header__logo {
  display: block; /* インラインだと親の行送りぶんヘッダーが高くなる */
  flex: none;
  /* カンプではロゴだけ 46px 起点（他は 41〜43）。5px 下げて合わせる */
  margin-block-start: 5px;
}

.site-header__logo img {
  width: 236px;
  height: auto;
}

.site-header__cluster {
  /* ハンバーガーは position: fixed で流れから外れているので、
     その幅ぶん（50px）＋ カンプの間隔（34px）を空けておく */
  padding-inline-end: 84px;
  display: flex;
  align-items: center;
  margin-inline-start: auto;
  column-gap: var(--space-32);
}

/* --- グローバルナビ --------------------------------------------------- */

.global-nav__list {
  display: flex;
  align-items: center;
  column-gap: var(--space-34); /* 印の右端 994 → 次のラベル 1029 = 35px。印 12px を含めた実装値 */
}

.global-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  column-gap: var(--space-4); /* ラベル 977 → 印 982 */
  padding-block: var(--space-16); /* ホバー時に隙間で閉じないための当たり判定 */
}

.global-nav__link {
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: inherit;
}

.global-nav__mark {
  display: flex;
  color: var(--color-primary);
}

/* 開くと「＋」が「−」になる。カンプ 265:4196 は縦棒に rotation -90 が入っているので、
   縦棒だけを回す（横棒は動かさない） */
.global-nav__mark .icon-plus__bar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--duration-hover) var(--easing-linear);
}

.global-nav__item.is-open .global-nav__mark .icon-plus__bar {
  transform: rotate(-90deg);
}

/* ドロップダウン（カンプ 265:4203 / 220×200・白・角丸 10・枠 #0092E5・区切り #CDE7F7）
   開き方はホバー（2026-09-05 ユーザー確認）。
   開くときは下から上へ出ながら現れ、閉じるときは下へ沈みながら消える
   （2026-09-06 ユーザー指示）。閉じている間は visibility で当たり判定も消す */
.global-nav__child {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  min-width: 220px;
  padding-inline: 21px; /* カンプ Line 14: 区切りは x=21 から幅 179 */
  visibility: hidden;
  opacity: 0;
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-10);
  translate: 0 var(--nav-child-shift);
  transition:
    opacity var(--duration-hover) var(--easing-linear),
    translate var(--duration-hover) var(--easing-linear),
    visibility 0s linear var(--duration-hover);

  --nav-child-shift: 10px;
}

.global-nav__item.is-open .global-nav__child {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--duration-hover) var(--easing-linear),
    translate var(--duration-hover) var(--easing-linear),
    visibility 0s;
}

.global-nav__child-item {
  border-block-end: 1px solid var(--color-bg-tint);
}

.global-nav__child-item:last-child {
  border-block-end: 0;
}

.global-nav__child-link {
  display: flex;
  align-items: center;
  column-gap: 7px; /* カンプ: 罫の右端 36 → 文字 43 */
  padding-block: var(--space-16); /* 項目の間隔 48px（78 → 126 → 174 → 222） */
  padding-inline-start: var(--space-5); /* 枠の内側 21 → 罫 26 */
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  color: var(--color-text-body);
  white-space: nowrap;
}

.global-nav__child-link::before {
  /* カンプ Line 10〜13: 子項目の左の罫（10×2 / #0092E5）。動きは付けない */
  flex: none;
  width: 10px;
  height: 2px;
  background-color: var(--color-primary);
  content: "";
}

/* --- 採用情報ボタン ---------------------------------------------------- */

.site-header__recruit {
  display: flex;
  flex: none;
  align-items: center;
  column-gap: var(--space-8);
  min-width: 122px; /* カンプ 122×43。文字幅は実測に合わせて伸びてよい */
  height: 43px;
  white-space: nowrap;
  padding-inline: 23px 17px; /* カンプ: 文字 23px 起点 / 右端まで 17px */
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
}

/* --- 電話ブロック ------------------------------------------------------ */

.site-header__tel {
  flex: none;
  color: inherit;
}

.site-header__tel-label {
  display: block;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
}

.site-header__tel-number {
  display: flex;
  align-items: center;
  column-gap: 2px; /* カンプ: アイコン右端 14 → 数字 16.3 */
  margin-block-start: var(--space-10);
  font-family: var(--font-family-en-alt);
  font-size: var(--font-size-25);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.site-header__tel-icon {
  flex: none;
}

/* --- ハンバーガー ------------------------------------------------------ */

.site-header__menu-button {
  /* ヘッダーはスクロールで流れるが、メニューはどこからでも開けるように
     ボタンだけ画面に固定する（2026-09-06 ユーザー指示） */
  /* 画面の右上に貼り付く。下地は角に食い込ませ、左下だけを丸める */
  position: fixed;
  inset-block-start: var(--admin-bar-offset); /* ログイン中は管理バーの下（base.css） */
  inset-inline-end: 0;
  z-index: var(--z-header);
  flex: none;
  /* 線の位置はカンプどおり（上端 54 / 右端 1873 ＝ 右から 47） */
  padding: 54px 47px 40px 47px;
  color: inherit;
  border-end-start-radius: var(--radius-34);
  transition:
    color var(--duration-hover) var(--easing-linear),
    background-color var(--duration-hover) var(--easing-linear),
    opacity var(--duration-hover) var(--easing-linear);
}

/* ヘッダーが流れきったあとは、白い区間（NEWS / CONTACT）の上にも来る。
   線が消えないよう、メニューと同じ濃紺を下地に敷く */
.site-header__menu-button.is-floating {
  color: var(--color-text-inverse);
  background-color: var(--color-navy); /* 透過なし。後ろは透けない */
}

.site-header__menu-bars {
  display: grid;
  row-gap: var(--menu-bar-gap);
  width: 50px;

  /* カンプ 315:2296（Vector 1〜3）: 線 50×1px・中心 232 / 243.72 / 255.44
     ＝ 送り 11.72。1 本の高さも送りも整数にしないと、3 本が画素の切れ目を
     またぐ位置に落ちて、真ん中だけ 2px に太って見える */
  --menu-bar-gap: 11px;
  --menu-bar-height: 1px;
  --menu-bar-pitch: calc(var(--menu-bar-gap) + var(--menu-bar-height));
}

.site-header__menu-bars span {
  display: block;
  height: var(--menu-bar-height);
  background-color: currentcolor;
}

/* 開いているあいだはメニュー側の × に役目を渡す。
   メニューは全画面の overlay なので、ここのボタンは押せなくなる。
   出したままだと × が二重に見えるので隠す */
.site-header__menu-button[aria-expanded="true"] {
  visibility: hidden;
  opacity: 0; /* メニュー側の DISSOLVE 0.3s と同じ速さで入れ替わる */
}

/* --- TAB --------------------------------------------------------------- */

@media (max-width: 1279px) {
  .site-header__cluster {
    column-gap: var(--space-20);
    padding-inline-end: 70px; /* ハンバーガー 50 ＋ 間隔 20 */
  }

  .site-header__menu-button {
    padding: 53px 24px 34px; /* 線の上端 52.9 / 右から 24（整数に丸める） */
  }

  .site-header__tel {
    display: none; /* 1280px 未満では電話ブロックが入らない（198.3px + ナビ 459px + ボタン 122px > 実幅） */
  }
}

/* --- タブレット縦 ------------------------------------------------------ */

@media (max-width: 1023px) {
  .global-nav,
  .site-header__recruit {
    /* 1024px 未満はナビの各項目が 2 行に折り返してしまう。
       ハンバーガーから開く全画面メニューに任せる（FB 2026-09-14 p12） */
    display: none;
  }
}

/* --- SP ---------------------------------------------------------------- */

@media (max-width: 767px) {
  .site-header__inner {
    padding-block-start: 14px;
  }

  .site-header__cluster {
    padding-inline-end: 0; /* SP はナビも電話も出ないので空けなくてよい */
  }

  .site-header__logo {
    margin-block-start: 0;
  }

  .site-header__logo img {
    width: 203.2px;
  }

  .global-nav,
  .site-header__recruit {
    display: none; /* SP カンプのヘッダーはロゴとハンバーガーだけ（245:989） */
  }

  .site-header__menu-button {
    /* SP は PC と違い、角に食い込ませず角丸の箱を浮かせる
       （カンプ 997:7836 ほか: 61×51・角丸 10・右端から 6px。FB 2026-09-08 p23）。
       上端 13px は、線がカンプのヘッダー（線の上端 30）と同じ高さに来る位置 */
    inset-block-start: calc(13px + var(--admin-bar-offset));
    inset-inline-end: 6px;
    display: grid;
    place-items: center;
    width: 61px;
    height: 51px;
    padding: 0;
    border-radius: var(--radius-10);
  }

  .site-header__menu-bars {
    width: 36.3px;

    --menu-bar-gap: 8px; /* カンプは 22 → 30.5 → 39（送り 8.5）。整数の送り 9 に丸める */
  }

  .site-header__menu-bars span {
    height: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 動かさずに切り替える */
  .global-nav__child,
  .global-nav__mark .icon-plus__bar {
    transition: none;
  }
}

/* ===== ./layout/site-footer.css ===== */
/* site-footer.css — カンプ PC 299:1147（1920×1230）/ SP 928:6463（394×1445）
   PC 実測
     CONTACT 帯   0〜786px  #0092E5
       見出し     x=180 y=126  Krona One 80px 白
       リード     x=185 y=246  18px/32.4
       電話ラベル  x=180 y=359  20px/700 ＋ 右に白い罫 x=432 幅 224
       電話番号    x=220 y=401  Albert Sans 600 60px（アイコン x=180）
       受付時間    x=180 y=470  18px/500
       ボタン      x=180 y=574  322×71 白地・枠 #0092E5・角丸 5 ／ 文字 x=220 20px ／ 矢印 x=454 22×22
       写真        x=816 y=126  924×520 角丸 10
     ナビ帯       786〜1230px  白
       ロゴ       x=180 y=885  228×41.5
       住所       x=180 y=955  18px/35
       1 列目     見出し x=1137 y=885 ／ 子 x=1159 y=928 から 37px ピッチ
       2 列目     見出し x=1381 y=885 ／ 子 x=1403 y=928 から 37px ピッチ
       3 列目     x=1610 y=885 から 43px ピッチ ／ プライバシー y=1057 13px
       コピーライト x=180 y=1166 13px #909090 */

/* RECRUIT の背景写真は 1 画面ぶん下まで貼り付いたままなので、
   フッター全体をその上に重ねる（CONTACT もナビ帯も写真を透かさない） */
.site-footer {
  position: relative;
  z-index: 1;

  --contact-rule-gutter: 35px; /* カンプ: 罫線は x=35〜1885（1920 のうち幅 1850） */
}

/* --- CONTACT 帯 -------------------------------------------------------- */

.contact-cta {
  position: relative;
  padding-block: 126px 141px; /* 見出し 126 ／ ボタン下端 645 → 帯下端 786 = 141 */
}

/* 白地（カンプ TOP 489:6837 の Rectangle 63 #FFFFFF）。見出しだけ青 */
.contact-cta--light {
  color: var(--color-text-body);
  background-color: var(--color-bg-base);
}

.contact-cta--light .contact-cta__title {
  color: var(--color-primary); /* カンプ 142:602 は #0092E5 */
}

/* 青地（下層ページ共通。カンプ 315:2302 ほかの Rectangle 65 #0092E5）。
   見出しも本文も白 */
.contact-cta--primary {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
}

.contact-cta--primary .contact-cta__title {
  color: var(--color-text-inverse);
}

/* 上下の罫（カンプ TOP の Line 10 y=9338 / Line 9 y=10124。
   x=35 / 幅 1850 / #A7A8BA 1px）。上は RECRUIT との、下はナビ帯との境目 */
.contact-cta--light::before,
.contact-cta--light::after {
  position: absolute;
  inset-inline: 0;
  width: calc(100% - var(--contact-rule-gutter) * 2);
  height: 1px;
  margin-inline: auto;
  background-color: var(--color-border-soft);
  content: "";
}

.contact-cta--light::before {
  inset-block-start: 0;
}

.contact-cta--light::after {
  inset-block-end: 0;
}

/* 青地は帯の色で境目がつくので罫は出さない（カンプにも Line 9 / 10 は無い） */

.contact-cta__inner {
  display: flex;
  align-items: flex-start;
  column-gap: 116px; /* 本文列は 180〜700、写真 816 */
  width: min(var(--layout-container), 100% - var(--layout-gutter) * 2);
  margin-inline: auto;
}

.contact-cta__body {
  flex: none;
  width: 543px; /* カンプ Group 77 の幅 */
}

.contact-cta__lead {
  margin-block-start: var(--space-20); /* 見出し下端 226 → リード 246 */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

.contact-cta__tel-label {
  display: flex;
  align-items: center;
  column-gap: var(--space-20); /* 文字の右端 412 → 罫 432 */
  margin-block-start: var(--space-70); /* 291 → 359 */
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.contact-cta__tel-label::after {
  /* カンプ Line 8: ラベルの右に伸びる罫（x=432 幅 224）。
     幅が狭いときは残りぶんに縮むので、列からはみ出さない */
  flex: 1;
  max-width: 224px;
  height: 1px;
  background-color: currentcolor;
  content: "";
}

.contact-cta__tel {
  margin-block-start: var(--space-25); /* 374 → 399.5 */
}

.contact-cta__tel a {
  display: flex;
  align-items: center;
  column-gap: var(--space-20); /* アイコン x=180 → 数字 x=220 */
  font-family: var(--font-family-en-alt);
  font-size: var(--font-size-60);
  font-weight: var(--font-weight-semibold);
  /* カンプ 299:1063 の枠は 436×42（キャップ高）。行送りのアキを持たせない */
  line-height: 0.7;
}

.contact-cta__tel-icon {
  flex: none;
  width: 32px;
  height: 41px; /* PC は受話器を 60px の数字に合わせて拡大（カンプ Group 10 の高さ 43.7） */
}

.contact-cta__hours {
  margin-block-start: var(--space-25); /* 443 → 470 */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.contact-cta .button {
  margin-block-start: 91px; /* 受付時間の下端 9821 → ボタン 9912 */
}

.contact-cta__visual {
  flex: 1;
}

.contact-cta__visual video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-10);
}

.wpcf7 .contact-form .turnstile {
  display: block;
  width: 100%;
  margin: 36px 0;
  text-align: center;
}

/* CF7が生成する内側の要素も中央配置 */
.wpcf7 .contact-form .turnstile > * {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* --- フッターナビ ------------------------------------------------------ */

.site-footer__main {
  position: relative;
  padding-block: 99px 64px; /* 帯下端 786 → ロゴ 885 ／ コピーライト下端 1176 → 1230 */
  color: var(--color-text-body);
  background-color: var(--color-bg-base);
}

.site-footer__inner {
  display: flex;
  align-items: flex-start;
  width: min(var(--layout-container), 100% - var(--layout-gutter) * 2);
  margin-inline: auto;
}

.site-footer__identity {
  flex: none;
  width: 400px;
}

.site-footer__logo img {
  width: 228px;
  height: auto;
}

.site-footer__address {
  margin-block-start: var(--space-30); /* ロゴ下端 926.5 → 住所 955 */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 35px; /* カンプ実測（18px に対して行送り 35px 固定） */
}

.footer-nav {
  /* カンプの列の左端: 1137 / 1381 / 1610、右端 1740。
     列の間隔は不揃いなので、幅を固定したグリッドで位置を合わせる */
  display: grid;
  grid-template-columns: 244px 229px 130px;
  margin-inline-start: auto;
}

.footer-nav__heading {
  display: block; /* インラインブロックだと親の行送りぶん上に隙間が出る */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

/* 採用サイトは別サイト（カンプ 299:1130: 文字の右端 1700 → 印 1708・12×12） */
.footer-nav__heading--external {
  display: flex;
  align-items: center;
  column-gap: var(--space-8);
}

.footer-nav__external {
  flex: none;
  width: 14px;
  height: 14px;
}

.footer-nav__children {
  margin-block-start: var(--space-30); /* 885+13 → 928 */
}

.footer-nav__children li + li {
  margin-block-start: var(--space-25); /* 37px ピッチ − 文字高 12px */
}

.footer-nav__child-link {
  position: relative;
  display: inline-block;
  padding-inline-start: 22px; /* 見出し 1137 → 子の線 1142（+5）→ 文字 1159（+17） */
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
}

.footer-nav__child-link::before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 5px;
  width: 10px;
  height: 2px;
  background-color: var(--color-primary);
  content: "";
}

.footer-nav__utility li + li {
  margin-block-start: var(--space-30); /* 43px ピッチ − 文字高 13px */
}

.footer-nav__privacy {
  display: block;
  margin-block-start: var(--space-30); /* 1014+13 → 1057 */
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
}

.site-footer__copyright {
  width: min(var(--layout-container), 100% - var(--layout-gutter) * 2);
  margin-block-start: 74px; /* ナビの下端（相対 302）→ コピーライト（相対 380） */
  margin-inline: auto;
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  color: var(--color-text-caption);
}

/* --- TAB --------------------------------------------------------------- */

@media (max-width: 1279px) {
  .contact-cta__inner {
    column-gap: var(--space-40);
  }

  .contact-cta__body {
    /* 文字が主役の列なので広めに取る。45% だと見出しと電話番号が収まらない */
    width: 55%;
  }

  .contact-cta__title {
    /* Krona One は字幅が広い。列に収まるところまで落とす */
    font-size: min(var(--font-size-80) * var(--font-scale), 7.6vw);
  }

  .contact-cta__tel a {
    /* 12 桁 ＋ 受話器が 1 行に収まるところまで落とす */
    font-size: min(var(--font-size-60), 5.5vw);
  }

  .contact-cta__tel-icon {
    width: 24px;
    height: 31px;
  }

  .footer-nav {
    grid-template-columns: repeat(3, auto);
    column-gap: var(--space-40);
  }

  .site-footer__identity {
    width: auto;
  }
}

/* --- SP ---------------------------------------------------------------- */

/* --- タブレット縦・SP の組み方 -----------------------------------------
   タブレット縦は 2 列だとフッターナビの項目が折り返して重なるので、
   組み方だけ SP に合わせる（文字の大きさはタブレットのまま。FB 2026-09-14 p15）。
   文字の大きさの違いはこのあとの min-width: 768px のブロックで戻す */

@media (max-width: 1023px) {
  .contact-cta {
    padding-block: 70px 50px; /* SP カンプ 928:6464: 見出し y=70 ／ ボタン下端 651 → 帯下端 701 */
  }

  .contact-cta__inner {
    /* SP カンプ 928:6464 は PC と組み方が違い、写真がリードと電話の間に入る
       （FB 2026-09-08 p28）。DOM は PC のまま、並べ替えだけ order で受ける */
    display: flex;
    flex-direction: column;
    /* PC の flex-start のままだと中身が字面の幅に縮み、text-align: center が
       効かずに左へ寄る（FB 2026-09-14 p3）。列いっぱいに伸ばして中で中央に置く */
    align-items: stretch;
  }

  .contact-cta__body {
    display: contents; /* 中身を .contact-cta__inner の並びに出す */
    width: auto;
  }

  .contact-cta__title {
    order: 1;
  }

  .contact-cta__lead {
    order: 2;
  }

  .contact-cta__visual {
    order: 3;
  }

  .contact-cta__tel-label {
    order: 4;
  }

  .contact-cta__tel {
    order: 5;
  }

  .contact-cta__hours {
    order: 6;
  }

  .contact-cta .button {
    order: 7;
  }

  .contact-cta__title {
    /* SP カンプ 928:6382: Krona One 45px・x=53 幅 289 で中央
       （タブレットの 7.6vw を引き継ぐと 30px まで落ちる。FB 2026-09-14 p3） */
    font-size: var(--font-size-45);
    text-align: center;
  }

  .contact-cta__lead {
    margin-block-start: var(--space-20);
    font-size: var(--font-size-16);
    line-height: var(--line-height-body-sp);
    text-align: center; /* SP カンプ 928:6383 は中央揃え */
  }

  .contact-cta__tel-label {
    justify-content: center; /* PC から display: flex を引き継ぐので text-align では寄らない */
    margin-block-start: var(--space-33); /* 写真の下端 435 → ラベル 468 */
    font-size: var(--font-size-18);
    text-align: center;
  }

  .contact-cta__tel-label::after {
    content: none; /* SP カンプに罫は無い */
  }

  .contact-cta__tel a {
    justify-content: center;
    column-gap: var(--space-10);
    font-size: var(--font-size-35);
  }

  .contact-cta__tel-icon {
    width: 19px;
    height: 24px;
  }

  .contact-cta__hours {
    font-size: var(--font-size-14);
    text-align: center;
  }

  .contact-cta__visual {
    margin-block-start: var(--space-21); /* リードの下端 215 → 写真 236 */
  }

  .contact-cta .button {
    /* カンプ Frame 4: 271.1×55.1 で中央。SP の .button（幅いっぱい）は使わない */
    align-self: center;
    width: 271px;
    margin-block-start: var(--space-36); /* 受付時間の下端 560 → ボタン 596 */
  }

  .site-footer__main {
    padding-block: 55px 40px;
  }

  .site-footer__inner {
    display: block;
  }

  .site-footer__identity {
    text-align: center;
  }

  .site-footer__logo img {
    width: 203.2px;
    margin-inline: auto;
  }

  .site-footer__address {
    margin-block-start: var(--space-24);
    font-size: var(--font-size-14);
    line-height: 25px;
  }

  .footer-nav {
    /* SP カンプ 928:6464: 1 列目 x=42 ／ 2 列目 x=234（1 列目の右端 177 → 隙間 57）。
       2 列ぶんの中身なりの幅にして中央へ置くと、左右の余白がどの画面幅でも
       同じだけ空く（FB 2026-09-08 p38。393 幅でカンプの 42 / 39 とほぼ同じ）。
       入りきらない幅では列が縮む */
    grid-template-columns: minmax(0, auto) minmax(0, auto);
    column-gap: 57px;
    width: max-content;
    max-width: 100%;
    margin-block-start: var(--space-60);
    margin-inline: auto;
  }

  .footer-nav__group--utility {
    grid-column: 1 / -1;
    margin-block-start: var(--space-40);
  }

  .footer-nav__heading {
    font-size: var(--font-size-16);
  }

  .footer-nav__children {
    margin-block-start: var(--space-20);
  }

  .footer-nav__children li + li {
    margin-block-start: var(--space-20); /* 30px ピッチ − 文字高 10px */
  }

  .footer-nav__child-link {
    font-size: var(--font-size-14);
  }

  .footer-nav__utility li + li {
    margin-block-start: var(--space-20); /* 32px ピッチ − 文字高 12px */
  }

  .site-footer__copyright {
    margin-block-start: var(--space-50);
    font-size: var(--font-size-11);
    text-align: center;
  }
}

/* --- タブレット縦だけ文字の大きさを戻す --------------------------------
   組み方は SP と同じにするが、文字はタブレットのまま（FB 2026-09-14 p15） */

@media (min-width: 768px) and (max-width: 1023px) {
  .contact-cta__title {
    font-size: min(calc(var(--font-size-80) * var(--font-scale)), 7.6vw);
  }

  .contact-cta__lead,
  .contact-cta__hours {
    font-size: var(--font-size-18);
  }

  .contact-cta__tel-label {
    font-size: var(--font-size-20);
  }

  .contact-cta__tel a {
    font-size: min(var(--font-size-60), 5.5vw);
  }

  .contact-cta__tel-icon {
    width: 24px;
    height: 31px;
  }

  .site-footer__logo img {
    width: 228px;
  }

  .site-footer__address {
    font-size: var(--font-size-18);
    line-height: 35px;
  }

  .footer-nav__heading {
    font-size: var(--font-size-18);
  }

  .footer-nav__child-link {
    font-size: var(--font-size-16);
  }

  .site-footer__copyright {
    font-size: var(--font-size-13);
  }
}

/* ===== ./layout/site-loader.css ===== */
/* site-loader.css — サイト読み込み時のオープニング
   カンプ Frame 8（489:6998）→ Frame 7（489:6982）→ TOP（489:6837）

     0.0〜0.5s  白 #FFFFFF のみ（ロゴ opacity 0）
     0.5〜1.5s  ブルーのロゴがフェードイン（DISSOLVE / LINEAR）
     1.5〜2.5s  保持
     2.5〜3.0s  押下：マークが 148 → 138 に沈む（ComponentSet 14:43 実測）
     3.0s       最小になったところで幕が消え始める
     3.0〜3.3s  マークは 138 → 148 に戻る
     3.0〜3.8s  幕ごとフェードアウトして TOP が現れる（DISSOLVE 0.8s / LINEAR）

   ロゴはカンプ 1920×1080 の実測
     マーク      x 886〜1034 / y 471〜619（148φ・中心 960, 545）
                 円 #0092E5・グリフ #FFFFFF・点 #DC000C（KV 見出しのマークは白地に青の逆）
     ロゴタイプ  x 826〜1077 / y 648〜688（251×40）

   ★ マークの中心を KV 見出しのマークと 1px もずらさないため、基準はロゴ全体ではなく
     「マークの箱」。ロゴタイプはその箱からの相対で置き、--loader-mark だけで全体が
     比率どおりに追従する。 */

.site-loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background-color: var(--color-bg-base);
  /* 幕が消え始めるのはマークが最小になった瞬間（押下の戻り 0.3s ぶん手前） */
  animation: site-loader-out var(--loader-fade-out) var(--easing-linear)
    calc(var(--loader-delay) + var(--loader-hold) - var(--press-out)) forwards;

  /* KV のマークと同じ寸法・同じ中心に置くための 2 つ。
     --loader-mark は円の直径。SiteLoader が KV 見出しのマークを実測すると上書きされる */
  --loader-mark: 148px;
  --loader-center-y: 5px; /* カンプのマーク中心 545 は画面中央 540 の 5px 下 */
  /* 押下は保持の最後に置く。沈みきる 3.0s ＝ 幕が消え始める時刻 */
  --loader-press-at: calc(
    var(--loader-delay) + var(--loader-hold) - var(--press-in) - var(--press-out)
  );
}

.site-loader__logo {
  /* この箱＝マークの円そのもの（148φ）。
     --loader-cx / --loader-cy は SiteLoader が KV 見出しのマークを実測して入れる。
     KV が無いページではカンプ実測の中央（画面中央 ＋5px）に落とす */
  position: absolute;
  inset-block-start: var(--loader-cy, calc(50% + var(--loader-center-y)));
  inset-inline-start: var(--loader-cx, 50%);
  width: var(--loader-mark);
  height: var(--loader-mark);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: site-loader-in var(--loader-fade-in) var(--easing-linear)
    var(--loader-delay) forwards;
}

.site-loader__mark {
  /* 影は CSS が持つ（押下で内側の影に入れ替わるため）。SVG からは外してある */
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-mark);
  animation: mark-press calc(var(--press-in) + var(--press-out))
    var(--easing-linear) var(--loader-press-at) both;
}

.site-loader__mark::after {
  /* 押下のあいだだけ出る内側の影 */
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-mark-inset-off);
  animation: mark-press-inset calc(var(--press-in) + var(--press-out))
    var(--easing-linear) var(--loader-press-at) both;
  content: "";
}

.site-loader__mark-glyph {
  display: block;
  width: 100%;
  height: 100%;
}

.site-loader__type {
  /* カンプ: 円の左上 (886, 471) から見て x −60 / y +177、251×40 */
  position: absolute;
  inset-block-start: calc(var(--loader-mark) * 177 / 148);
  inset-inline-start: calc(var(--loader-mark) * -60 / 148);
  max-width: none; /* reset.css の img{max-width:100%} が切り詰めてしまう */
  width: calc(var(--loader-mark) * 251 / 148);
  height: auto;
}

@keyframes site-loader-in {
  to {
    opacity: 1;
  }
}

@keyframes site-loader-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* 幕が出ているあいだはスクロールさせない */
body.is-loading {
  overflow: hidden;
}

@media (max-width: 767px) {
  .site-loader {
    /* SP カンプにローディング画面は無い。KV のマーク（102φ）に合わせて縮める */
    --loader-mark: 102px;
    --loader-center-y: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* JS 側で即座に外すので、こちらは保険 */
  .site-loader {
    display: none;
  }
}

/* ===== ./components/swap.css ===== */
/* swap.css — ホバーで中身が入れ替わる窓（カンプの Mask group ＋ 2 枚重ね）

   カンプはボタン・タブ・カードの矢印・TOP の行など、どれも同じ作りをしている。
     窓（Mask group）に同じものを 2 枚重ね、ホバーで 1 枚ぶん動かす。
     1 枚目が窓から出ていき、2 枚目が反対側から入ってくる（SMART_ANIMATE 0.3s / LINEAR）
   違うのは「動く向き」と「窓の大きさ」だけなので、向きをクラスで、
   大きさを呼び出し側の CSS で決める。送りは窓 1 枚ぶん（100%）に固定。

   使い方
     <Swap direction="up">…</Swap> が
       .swap > .swap__inner > .swap__item ×2（2 枚目は --in・aria-hidden）
     を組む（components/Swap.tsx）。窓の幅・高さは呼び出し側のクラスで与える。
     direction は「中身が動いていく向き」。
       up    文字が上へ出て、下から入る（ボタン・タブ・TOP の行）
       right 矢印が右へ出て、左から入る（ボタン・タブ・カードの矢印）
       down / left はその逆。戻るタブの矢印は left

   受け皿の変数（呼び出し側で指定する）
     --swap-in-color  2 枚目の色（既定は 1 枚目と同じ）
     --swap-duration  尺（既定 --duration-hover ＝ 0.3s）

   動かすきっかけはリンク・ボタンのホバー。カンプでも入れ替えは必ず
   リンクかボタンの中にあるので、:where(a, button) で受ける。 */

.swap {
  display: block;
  overflow: hidden; /* カンプの Mask group。窓から出たものは見えない */

  /* 1 枚目と 2 枚目の間のアキ。0 だと入れ替わりの途中で 2 枚が接して見えるので
     少しだけ離す。送りもこのぶん増える（2026-09-06 ユーザー指示） */
  --swap-gap: 2px;
}

.swap__inner {
  display: flex;
  /* 窓と同じ大きさにしておく。1 枚が 100%、送りは窓 1 枚ぶん ＋ アキ */
  gap: var(--swap-gap);
  width: 100%;
  height: 100%;
  translate: var(--swap-from);
  transition: translate var(--swap-duration, var(--duration-hover)) var(--easing-linear);
}

.swap__item {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  /* base.css の text-box: trim-both を外す。トリムしたままだと窓の中で
     字面が上に寄る（縦の中央は align-items が取る） */
  text-box: normal;
}

.swap__item--in {
  color: var(--swap-in-color, inherit);
}

/* --- 向き -------------------------------------------------------------- */

.swap--up .swap__inner,
.swap--down .swap__inner {
  flex-direction: column;
}

/* down / right は 2 枚目が先（上・左）に来て、そこから入ってくる */
.swap--down .swap__item--in,
.swap--right .swap__item--in {
  order: -1;
}

.swap--up {
  --swap-from: 0 0;
  --swap-to: 0 calc(-100% - var(--swap-gap));
}

.swap--down {
  --swap-from: 0 calc(-100% - var(--swap-gap));
  --swap-to: 0 0;
}

.swap--left {
  --swap-from: 0 0;
  --swap-to: calc(-100% - var(--swap-gap)) 0;
}

.swap--right {
  --swap-from: calc(-100% - var(--swap-gap)) 0;
  --swap-to: 0 0;
}

/* --- きっかけ ---------------------------------------------------------- */

/* キーボード操作でも同じように見えるよう :focus-visible でも動かす */
:where(a, button):hover .swap__inner,
:where(a, button):focus-visible .swap__inner {
  translate: var(--swap-to);
}

@media (prefers-reduced-motion: reduce) {
  /* 動かさずに切り替える */
  .swap__inner {
    transition: none;
  }
}

/* ===== ./components/global-menu.css ===== */
/* global-menu.css — ハンバーガーから開く全画面メニュー
   カンプ PC Component 39（232:1021・1919×1080）／ 開いた状態は Component 50 の
   「プロパティ1=Frame 24」（275:5722）で、中身は同じ Component 40。

   カンプ実測（フレーム左上を原点にした相対座標）
     幕            Rectangle 17  0,0 1919×1080  #0B325D 85% ＋ 背景ぼかし 50px
     ロゴ          Group 37      44,46   231×42.1
     閉じる        Group 16      1825.3,48.2  43.3×25.3（右端まで 50.4）
     写真          Mask group    189,321 698×394・角丸 5
     見出し        980,344 ／ 980,477 ／ 980,610（Noto Sans JP 700 20px 白）
     子項目        985,389 ／ 985,522（350 18px）。139px 間隔＝幅＋50px の隙間
     子の印        Line 10…  10×2 の #0092E5。文字はその 17px 右（1002）
     並びの項目    お知らせ 980 ／ よくある質問 1105 ／ 採用サイト 1270（45px 間隔）
     外部リンク印  Group 50      1379,611  15×15（文字の 9px 右）
     お問い合わせ  Group 66      1439,599  169×39（button.css の .button--menu）
     プライバシー  981,680（350 16px）＝ 並びの次の行

   開く動き（カンプ 275:5718 の ON_CLICK）
     DISSOLVE 0.3s / LINEAR。ずらしたり動かしたりはせず、まるごとフェードする

   ⚠ カンプは 1080px 固定の版面だが、実装ではビューポート高に追従させる必要がある。
      上下の余白は中央寄せで受け、横方向の実測値はそのまま使う。 */

.global-menu {
  position: fixed;
  inset: var(--admin-bar-offset) 0 0; /* ログイン中は管理バーの下から（base.css） */
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  color: var(--color-text-inverse);
  /* カンプ Rectangle 17 は #0B325D 85% ＋ 背景ぼかし 50px だが、後ろに何も無い
     版面なので書き出しは #0B325D の平らな塗りになる。実装で後ろの KV を
     透かすと場所によって色が変わってしまうため、書き出しと同じ平らな塗りにする */
  background-color: var(--color-navy);

  /* カンプ 275:5718: ハンバーガー押下で DISSOLVE 0.3s / LINEAR。
     display を切り替えると transition が走らないので、見えなくするのは
     opacity ＋ visibility で行う（visibility は遅らせて消えきってから効かせる） */
  /* 写真が縦長になる幅では中身が画面より高くなることがあるので、
     はみ出したぶんは幕ごとスクロールさせる */
  overflow-y: auto;
  /* 端までスクロールしても後ろのページへスクロールを渡さない */
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--duration-hover) var(--easing-linear),
    visibility 0s var(--easing-linear) var(--duration-hover);
}

.global-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition:
    opacity var(--duration-hover) var(--easing-linear),
    visibility 0s var(--easing-linear);
}

.global-menu__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-block-start: var(--space-44); /* カンプ y=46（ロゴ）− text-box ぶん */
  padding-inline: var(--space-44) var(--space-50); /* ロゴ 44 ／ 閉じるの右 50.4 */
}

.global-menu__logo img {
  width: 231px;
  height: auto;
}

.global-menu__close {
  /* ヘッダーのハンバーガーと同じ場所に重ねて、切り替わって見えるようにする。
     ずれ量は GlobalMenu が実測して入れる（幅ごとにヘッダーの組み方が変わるため） */
  display: grid;
  place-items: center;
  width: 43.3px;
  height: 25.3px;
  color: inherit;
  transform: translate(var(--close-shift-x, 0px), var(--close-shift-y, 0px));
}

.global-menu__close-mark {
  position: relative;
  display: block;
  width: 43.3px;
  height: 25.3px;
}

.global-menu__close-mark span {
  position: absolute; /* ×印は 2 本の線を交差させる図形そのもの。カンプでも重なっている */
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 1.4px;
  background-color: currentcolor;
}

.global-menu__close-mark span:first-child {
  transform: rotate(30deg);
}

.global-menu__close-mark span:last-child {
  transform: rotate(-30deg);
}

.global-menu__body {
  display: flex;
  align-items: flex-start;
  /* カンプは 1920 幅の版面なので写真は x=189 に置かれているが、それより広い画面では
     右が大きく空いてしまう。写真＋ナビのブロックごと中央に置く（FB 2026-09-08 p2） */
  justify-content: center;
  column-gap: 93px; /* 写真右端 887 → ナビ 980 */
  /* 本文 1560px の版面より広く使う。ここは中央寄せなので、左右は
     画面端に触れないための最低限だけ空ける */
  padding-inline: var(--space-40);
  /* カンプ: 写真の上端 321（バーの下端 86 から 235px 下）。
     中央寄せにすると 1080px では 57px 下がるので、カンプの位置をそのまま使う。
     画面が低いときは同じ割合（235/1080 ＝ 21.8svh）まで詰める */
  margin-block: min(235px, 21.8svh) auto;
}

.global-menu__visual {
  /* カンプ幅では 698px。それより狭い画面では左右で半分ずつ分け合う
     （写真だけが痩せて小さくなるのを避ける。FB 2026-09-08 p2 の指示） */
  flex: none;
  width: min(698px, calc((100% - 93px) / 2));
}

.global-menu__visual img {
  width: 100%;
  height: auto;
  /* 幅が半分になると横長のままでは高さが足りなくなるので、
     画面幅に応じて 元の比 → 1:1 → 2:3（縦長）と切り替える。
     切り抜きは cover（縦横比は変えない） */
  aspect-ratio: 698 / 394;
  object-fit: cover;
  border-radius: var(--radius-5); /* カンプ Rectangle 62 */
}

.global-menu__nav {
  /* 中身なりの幅にする。1 にすると残り幅を全部取ってしまい、
     ブロックの中央寄せ（.global-menu__body）が効かなくなる。
     入りきらない幅では縮んで、子項目が折り返す */
  flex: 0 1 max-content;
  min-width: 0;
  padding-block-start: var(--space-24); /* 写真 321 → 見出し 344 */
}

.global-menu__group,
.global-menu__flat > li {
  /* 見出しは inline-block（text-box のトリムを効かせるため）。
     親の行ボックスに行間が残ると見出しの下に 8px の隙間が出るので、
     ここでは行間を持たせない（中の文字はそれぞれ line-height を持つ） */
  line-height: 0;
}

.global-menu__group + .global-menu__group {
  margin-block-start: var(--space-75); /* 子項目下端 402 → 次の見出し 477 */
}

.global-menu__heading {
  /* text-box のトリムを効かせたいので inline-flex にはしない。
     外部リンクの印（採用サイトのみ）は文字と同じ行に流す */
  position: relative; /* 外部リンクの印を右へ逃がす基準 */
  display: inline-block;
  font-family: var(--font-family-base);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: inherit;
}

.global-menu__external {
  /* 行ボックスに入れると見出しの高さが変わってしまうので、外に逃がして置く。
     カンプ Group 50: 文字の右端から 9px・上端から 1px の位置に 15×15 */
  position: absolute;
  inset-block-start: 1px;
  inset-inline-start: 100%;
  width: 15px;
  height: 15px;
  margin-inline-start: 9px;
}

.global-menu__children {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-50); /* 139px 間隔 − 項目幅 89px */
  row-gap: var(--space-20);
  margin-block-start: var(--space-30); /* 見出し 344+15 → 子 389 */
  padding-inline-start: var(--space-5); /* 見出し 980 → 子の印 985 */
}

.global-menu__child-link {
  position: relative;
  display: block;
  padding-inline-start: 17px; /* 印 10px + 間 7px（カンプ 985 → 1002） */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
  color: inherit;
  white-space: nowrap;
}

.global-menu__child-link::before {
  position: absolute; /* 「┣」の代わりの短い線。カンプでも本文の左に重ねて置かれている */
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 10px;
  height: 2px;
  background-color: var(--color-primary);
  content: "";
}

.global-menu__flat {
  /* カンプ: お知らせ 980 ／ よくある質問 1105 ／ 採用サイト 1270 ／
     お問い合わせボタン 1439 が同じ行に並ぶ（いずれも 45px の隙間） */
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-45);
  row-gap: var(--space-20);
  align-items: center;
  /* 子項目の下端 535 → 見出し 610 ＝ 75px。ただしこの行の高さは
     お問い合わせボタン（39px）で決まり、見出し（トリム後 15px）はその中央に来る。
     行の箱は見出しより --menu-row-overhang だけ上に張り出す */
  margin-block-start: calc(var(--space-75) - var(--menu-row-overhang));

  --menu-row-overhang: 12px; /* (39 − 15) ÷ 2 */
}

.global-menu__foot {
  /* PC は中身（ボタンとプライバシー）を並びの行の要素に戻す。
     ボタンは行の中央に合わせ（カンプ 599〜638 と文字 610〜625）、
     プライバシーだけ 100% 幅で次の行へ送る */
  display: contents;
}

.global-menu__privacy {
  /* カンプ 981,680 ＝ 並びの次の行。当たりは文字の幅だけ */
  flex-basis: 100%;
  /* 見出し 610+15 → 680 ＝ 55px。並びの行はボタンのぶんだけ下にも張り出すので
     43px、うち 20px は行の row-gap で出る */
  margin-block-start: calc(var(--space-55) - 12px - var(--space-20));
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-light);
  color: inherit;
}

@media (max-width: 1279px) {
  .global-menu__body {
    column-gap: var(--space-40);
    /* 写真が 1:1 / 2:3 に変わって背が高くなるので、カンプの 235px（21.8svh）を
       そのまま取るとロゴとの間だけが大きく空く（FB 2026-09-14 p6 / p13）。
       上は 100px で止めて、余りは下へ回す */
    margin-block: var(--space-100) auto;
  }

  .global-menu__visual {
    width: calc((100% - var(--space-40)) / 2);
  }

  .global-menu__visual img {
    aspect-ratio: 1 / 1;
  }
}

/* タブレット横（1024〜1279）は写真が 1:1 になってもまだ横長で、ロゴとの間だけが
   大きく空いて見える。カンプに無い幅なので、支給の赤線（ビューポート上端から
   127px あたり）に合わせて 30px まで詰める（FB 2026-09-17 p1） */
@media (min-width: 1024px) and (max-width: 1279px) {
  .global-menu__body {
    margin-block-start: var(--space-30);
  }
}

@media (max-width: 1023px) {
  .global-menu__visual img {
    aspect-ratio: 2 / 3;
  }
}

@media (max-width: 767px) {
  .global-menu__bar {
    padding-block-start: 14px;
    padding-inline: 13px 18px;
  }

  .global-menu__logo img {
    width: 203.2px;
  }

  .global-menu__close,
  .global-menu__close-mark {
    width: 31.4px;
    height: 18.1px;
  }

  .global-menu__body {
    /* 縮めずに中身の高さのまま置き、はみ出したぶんは幕（.global-menu）ごとスクロールさせる。
       以前は本文だけをスクロール領域にしていて（overflow-y: auto）、高さの低い端末では
       いちばん下までスクロールしてもプライバシーポリシーが画面の下端に貼り付き、
       ブラウザのツールバーに隠れてタップできなかった（2026-10-02 修正依頼） */
    display: block;
    flex: none;
    padding-block-start: 65px; /* 閉じる 21+18 → 見出し 116 */
    /* カンプ 997:7593: ボタンの下端 614 → 幕の下端 693。ホームバーのぶんは足す */
    padding-block-end: calc(var(--space-79) + env(safe-area-inset-bottom, 0px));
    padding-inline: var(--space-36); /* カンプ 997:2068 の x=36 */
    margin-block: 0;
  }

  .global-menu__visual {
    display: none; /* SP カンプ 997:7593 に写真は無い */
  }

  .global-menu__nav {
    padding-block-start: 0;
  }

  /* SP カンプ 997:2111 は区切り線（Line 37〜41・x=26 幅 341・#FFFFFF 50%）で
     ブロックを仕切る。線の上下はどこも 25px（FB 2026-09-08 p22） */
  .global-menu__group + .global-menu__group,
  .global-menu__flat,
  .global-menu__flat > li + li {
    margin-block-start: var(--space-25);
    /* 線は本文（x=36）より 10px 外まで伸びるので、その 10px を負のマージンで
       外へ出し、同じだけ内側に戻して文字の位置は動かさない */
    margin-inline: -10px;
    padding-block-start: var(--space-25);
    padding-inline: 10px;
    border-block-start: 1px solid var(--color-border-menu);
  }

  .global-menu__heading {
    font-size: var(--font-size-18);
  }

  .global-menu__children {
    /* カンプ 997:2111: 子項目の送りは 116px（項目幅 81 ＋ 隙間 35）、
       行の送りは 37px（字面 12 ＋ 25） */
    column-gap: var(--space-35);
    row-gap: var(--space-25);
    margin-block-start: var(--space-25); /* 116+13 → 154 = 25px */
    padding-inline-start: 0;
  }

  .global-menu__child-link {
    font-size: var(--font-size-16);
  }

  .global-menu__flat {
    display: block;
  }

  .global-menu__foot {
    /* カンプ 997:2103 / 997:2110: ボタン（36,579 153×35）の 27px 右に
       プライバシーポリシー。ボタンの高さの中央で揃う。
       393 幅ぴったりで収まる並びなので、それより狭い画面では
       ボタンを縮めずにプライバシーを次の行へ送る */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 27px;
    row-gap: var(--space-20);
  }

  .global-menu__foot .button {
    flex: none;
  }

  .global-menu__privacy {
    flex-basis: auto;
    margin-block-start: 0;
    font-size: var(--font-size-14); /* カンプ 997:2110 */
  }
}

/* ===== ./components/button.css ===== */
/* button.css — カンプのボタン
   PC 実測
     フッター  Component 28 322×71  白地・枠 #0092E5・角丸 5  文字 20px（左 40px）・矢印 22px（右 26px）
     TOP      Component 14 239×71  白地・角丸 5              文字 20px（左 40px）・矢印 22px（右 25px）
     TOP      Component 16 201×71
   SP
     Component 66 相当 353×56 前後（幅いっぱい）

   ホバー（ComponentSet 106:561 実測・SMART_ANIMATE 0.3s / LINEAR）
     文字  同じ文字が 2 つ重ねてあり、両方が 1 行ぶん上へ動く。
           上の #474645 が窓から出て、下の #0092E5 が下からせり上がる
     矢印  円（22φ #0092E5）は動かさず、中の矢印だけが 2 本とも右へ動く。
           1 本目が右へ出て、2 本目が左から入る
     外すと それぞれ元の位置に戻る（同じ transition が逆に走る）

   2 枚重ねと動きは swap.css（<Swap>）が持つ。ここは窓の大きさと色だけ。 */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-40);
  min-width: 239px;
  height: 71px;
  padding-inline: var(--space-40) var(--space-25);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-body);
  background-color: var(--color-bg-base);
  border-radius: var(--radius-5);
}

.button--outline {
  min-width: 322px;
  padding-inline-end: var(--space-25);
  border: 1px solid var(--color-border-primary);
}

/* 全画面メニューのお問い合わせ（カンプ Group 66: 169×39・角丸 5・#061F3B・文字 17px） */
.button--menu {
  /* カンプ Group 66: 左 21 → 文字 102 → 間 11 → 印 22 → 右 13 ＝ 169 */
  column-gap: 11px;
  min-width: 169px;
  height: 39px;
  padding-inline: 21px 13px;
  font-size: var(--font-size-17);
  color: var(--color-text-inverse);
  background-color: var(--color-navy-deep);
}

/* 全画面メニューのお問い合わせは入れ替えのギミックを付けない（2026-09-06 ユーザー指示）。
   Button.tsx が <Swap> をやめて .button__text と矢印 1 本だけを出す */
.button__text {
  display: block;
}

.button--primary {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
}

/* --- 文字（下からせり上がって入れ替わる。窓と 2 枚重ねは swap.css） ---- */

.button__label {
  /* 窓の高さ＝入れ替わる送り。
     カンプのテキスト枠は 22px（＝1.1em）だが、その高さだと Noto Sans JP の
     字面（20px で 29px ＝ 1.45em）が箱から 7px はみ出し、入れ替わりのときに
     前の文字の下端が窓に残る。字面がちょうど収まる 1.45em にする */
  height: 1.45em;

  --swap-in-color: var(--color-primary);
}

/* 青地なので、せり上がってくる文字は青ではなく白のまま */
.button--primary .button__label {
  --swap-in-color: var(--color-text-inverse);
}

/* --- 矢印（円は動かさず、中身だけ左から右へ入れ替わる） ---------------- */

.button__icon {
  flex: none;
  width: 22px; /* カンプの Mask group。送りは窓 1 枚ぶん（カンプは 25px） */
  height: 22px;
  overflow: hidden;
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-radius: var(--radius-circle);
}

.button--primary .button__icon {
  color: var(--color-primary);
  background-color: var(--color-text-inverse);
}

/* メニューのお問い合わせの円は、カンプでも Rectangle 25 がマスクなので塗られず、
   白い矢印がそのまま見える */
.button--menu .button__icon {
  color: var(--color-text-inverse);
  background-color: transparent;
}

@media (max-width: 767px) {
  .button,
  .button--outline {
    justify-content: center;
    column-gap: var(--space-16);
    width: 100%;
    min-width: 0;
    height: 56px;
    padding-inline: var(--space-20);
    font-size: var(--font-size-18);
  }

  /* 全画面メニューの中だけは横幅いっぱいにしない。
     カンプ 997:2103: 36,579 153×35（左 13 → 文字 102 → 間 11 → 印 22 → 右 5） */
  .button--menu {
    column-gap: 11px;
    width: 153px;
    height: 35px;
    padding-inline: 13px 5px;
    font-size: var(--font-size-17);
  }
}

/* ===== ./components/prose.css ===== */
/* prose.css — 本文のかたまり

   固定ページはブロックエディタで入力する前提なので、エディタが出す素の要素
   （h2 / h3 / p / ul / ol / a）にクラス無しでそのまま効くようにしてある。
   WordPress 側は本文の入れ物に .prose を 1 つ付けるだけでよい。

   カンプ 542:3794（プライバシーポリシー）実測
     本文      18px / 行送り 38・#000000
     見出し    30px / 行送り 45・700・#0092E5
     本文の下端 → 次の見出し 80 ／ 見出しの下端 → 本文 45
     段落どうし 空行 1 行
     箇条書き  番号 x=360 → 本文 384（24）／ 入れ子は 405 / 429 ／ 項目どうし 30

   カンプは 1 つのテキストノードの中で段落を \n\n（空行 1 行）で分けている。
   HTML で <p> に分けると text-box: trim-both で上下の行間が落ちるので、
   「行送り 2 行ぶん − キャップハイト」を足し戻すと同じ間隔になる。
   0.73em ＝ キャップハイト（trim の基準）。 */

.prose {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 2.11; /* カンプ実測: 18px に対し行送り 38px */
  color: var(--color-text-black);
}

/* 段落・リストなどのかたまりどうしは空行 1 行ぶん空ける */
.prose > * + * {
  margin-block-start: calc(2lh - 0.73em);
}

/* --- 見出し ------------------------------------------------------------ */

.prose :is(h2, h3, h4) {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.prose h2 {
  font-size: calc(var(--font-size-30) * var(--font-scale));
  line-height: 1.5; /* カンプ実測: 30px に対し行送り 45px */
}

.prose h3 {
  font-size: calc(var(--font-size-20) * var(--font-scale));
  line-height: 1.5;
}

.prose h4 {
  font-size: var(--font-size-18);
  line-height: 1.5;
}

/* 見出しの前は広く、見出しと本文の間は狭く（カンプ 80 / 45） */
.prose :is(h2, h3, h4):not(:first-child) {
  margin-block-start: var(--space-80);
}

.prose :is(h2, h3, h4) + * {
  margin-block-start: var(--space-45);
}

/* --- 箇条書き ----------------------------------------------------------

   カンプ実測（542:3794・第 5 条）
     印の左   180 / 225 / 270（1 段 45px ずつ下がる）
     印 → 本文 24（どの段も同じ）
     項目どうし 30 ／ 項目 → その中の入れ子 30
     入れ子の終わり → 親の次の項目 45

   ブラウザ既定の ::marker は本文の左端に右揃えで置かれるので、
   印と本文の間が 24 にならない。印は ::before で自分で組む。 */

.prose :is(ul, ol) {
  padding-inline-start: 0;
  list-style: none;
}

.prose ol {
  counter-reset: prose-ol;
}

.prose li {
  padding-inline-start: var(--space-24); /* 印 180 → 本文 204 */
}

/* 印は行内に置いて、負の余白で本文の左端より外に出す（折り返しはぶら下げ） */
.prose li::before {
  display: inline-block;
  width: var(--space-24);
  margin-inline-start: calc(var(--space-24) * -1);
}

.prose ol > li {
  counter-increment: prose-ol;
}

.prose ol > li::before {
  content: counter(prose-ol) ".";
}

.prose ul > li::before {
  content: "・";
}

/* 入れ子は親の本文より 21 内側 ＝ 印の左が 225 / 270 になる */
.prose li > :is(ul, ol) {
  margin-inline-start: 21px;
}

/* リストは直前の段落から続くので、空行は入れず 1 行ぶんだけ送る */
.prose p + :is(ul, ol) {
  margin-block-start: calc(1lh - 0.73em);
}

.prose li + li {
  margin-block-start: var(--space-30);
}

/* 入れ子の手前は、親の項目の文の下端が字面で切れていない
   （text-box が切るのは項目全体の最後の行だけ）ので、その余りを引く */
.prose li > :is(ul, ol) {
  margin-block-start: calc(var(--space-30) - (1lh - 0.73em) / 2);
}

/* 入れ子が終わって親の段に戻るところだけ広い */
.prose li:has(> :is(ul, ol)) + li {
  margin-block-start: var(--space-45);
}

/* --- リンク ------------------------------------------------------------ */

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

@media (max-width: 767px) {
  .prose {
    font-size: var(--font-size-16);
    line-height: 1.9;
  }

  .prose h2 {
    font-size: var(--font-size-20);
  }

  .prose h3 {
    font-size: var(--font-size-18);
  }

  .prose :is(h2, h3, h4):not(:first-child) {
    margin-block-start: var(--space-50);
  }

  .prose :is(h2, h3, h4) + * {
    margin-block-start: var(--space-24);
  }

  .prose li + li,
  .prose li > :is(ul, ol) {
    margin-block-start: var(--space-16);
  }
}

/* ===== ./components/news-list.css ===== */
/* news-list.css — カンプ 489:6934（TOP）/ 537:1808（お知らせ一覧）
   日付 x=0（Albert Sans 600 18px）／ 分類 x=123（67×22・角丸 50・枠 #474645 70%・13px）
   タイトル x=221（16px 400）／ 行の間隔 92px ／ 区切り線 #D9D9D9（行の 35px 下） */

.news-list__item {
  border-block-end: 1px solid var(--color-bg-placeholder);
}

.news-list__item:last-child {
  border-block-end: 0; /* カンプ 489:6934: 罫は行と行の間だけ（区間の高さ 298 に最終行の下の罫は含まれない） */
}

.news-list__item:first-child .news-list__link {
  padding-block-start: 0;
}

.news-list__item:last-child .news-list__link {
  padding-block-end: 0;
}

.news-list__link {
  display: grid;
  grid-template-columns: 123px 98px 1fr; /* 日付 0〜123 ／ 分類 123〜221 ／ タイトル 221〜 */
  align-items: center;
  /* カンプ: 行の中身 22px ／ 罫まで 35px ／ 罫から次の行まで 35px ＝ ピッチ 92px */
  padding-block: 35px 34px;
  color: var(--color-text-body);
}

.news-list__date {
  font-family: var(--font-family-en-alt);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.news-list__category {
  display: grid;
  place-items: center;
  width: 67px;
  height: 22px;
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  border: 1px solid var(--color-line-70); /* カンプ: #474645 を不透明度 70% で重ねた枠 */
  border-radius: var(--radius-pill);
}

.news-list__title {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  /* タイトルには下線をつける（2026-09-06 ユーザー指示） */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* --- タブレット縦 ------------------------------------------------------ */

/* 一覧ページは列が狭く、タイトルが 2 行に折り返してはみ出して見える。
   SP と同じく「日付＋分類」の下にタイトルを置く（FB 2026-09-14 p22）。
   TOP の一覧はこの幅でも 1 行に収まるので、付けた側だけ積む */
@media (max-width: 1023px) {
  .news-list--stacked .news-list__link {
    grid-template-columns: 123px 1fr;
    grid-template-areas:
      "date category"
      "title title";
    row-gap: var(--space-10);
  }

  .news-list--stacked .news-list__date {
    grid-area: date;
  }

  .news-list--stacked .news-list__category {
    grid-area: category;
    justify-self: start;
  }

  .news-list--stacked .news-list__title {
    grid-area: title;
  }
}

@media (max-width: 767px) {
  .news-list__link {
    grid-template-columns: 92px 1fr;
    grid-template-areas:
      "date category"
      "title title";
    row-gap: var(--space-10);
    padding-block: var(--space-20);
  }

  .news-list__date {
    grid-area: date;
    font-size: var(--font-size-15);
  }

  .news-list__category {
    grid-area: category;
    justify-self: start;
    width: 61px;
    height: 20px;
    font-size: var(--font-size-12);
  }

  .news-list__title {
    grid-area: title;
    font-size: var(--font-size-14);
  }
}

/* ===== ./components/breadcrumb.css ===== */
/* breadcrumb.css — カンプ PC 315:2255（14px・罫 34px）/ SP 928:6886（11px・罫 21.1px） */

.breadcrumb__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* base.css の overflow-wrap: anywhere を打ち消す。これが効いていると
     パンくずの min-content が 1 文字ぶんになり、英字ページ名の隣に置いたとき
     グリッドが幅をほとんど渡してくれず、1 文字ずつ縦に折れる */
  white-space: nowrap;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
}

/* 先頭も含めて全部 flex にする。先頭だけ list-item のままだと中のリンクが
   インライン（ほかは flex アイテム）になり、下線の位置が 1 つ目だけずれる */
.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__item + .breadcrumb__item::before {
  /* カンプの区切りは記号ではなく罫（Line 14 / #959392） */
  width: 34px;
  height: 1px;
  margin-inline: 19px 13px;
  background-color: var(--color-text-muted);
  content: "";
}

.breadcrumb__link {
  color: var(--color-text-body);
  /* カンプに下線は無いが、リンクだと分かるように引く（2026-09-06 ユーザー指示） */
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.breadcrumb__current {
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .breadcrumb__list {
    font-size: var(--font-size-11);
  }

  .breadcrumb__item + .breadcrumb__item::before {
    width: 21.1px;
    margin-inline: 7px 6px;
  }
}

/* ===== ./components/page-hero.css ===== */
/* page-hero.css — 下層ページ共通の頭
   カンプ PC（会社案内 315:2204）
     和文ページ名     x=191 y=336  Zen Maru Gothic 700 30px #474645（高さ 21）
     英字ページ名     x=180 y=369  Krona One 120px #0092E5（枠の高さ 150 → 下端 519）
     パンくず         右寄せ y=471（高さ 17 → 下端 488。英字の枠と縦に重なる）
     メインビジュアル  x=180 y=528  1560×599  角丸 10 ＋ #A7A8BA 66% の乗算幕
   カンプ SP（926:5777。上端 62px の iOS ステータスバーのモックは除外済み）
     パンくず  x=262 y=79 ／ 和文 x=20 y=179（18px）／ 英字 x=20 y=202（35px）
     メインビジュアル x=20 y=260  353×328

   縦の重なり（英字とパンくず）は絶対配置ではなくグリッドの行で受ける。 */

.page-hero__inner {
  display: grid;
  grid-template-areas:
    "title  ."
    "en     meta"
    "visual visual";
  /* パンくずは中身なりの幅を先に確保する。英字ページ名の側を 1fr にしておくと、
     DISTRIBUTION BOARD のような長い名前はカンプ 634:7996 と同じく 2 行で折れる。
     auto 1fr のままだと英字が幅を取り切ってパンくずが潰れる */
  grid-template-columns: minmax(0, 1fr) max-content;
  /* 英字ページ名とパンくずが詰まらないように最低限のアキ
     （カンプ 333:4945 では SWITCHBOARD の右端 1380 → パンくず 1449） */
  column-gap: var(--space-40);
}

.page-hero__title {
  grid-area: title;
  padding-inline-start: 11px; /* カンプ: 英字 180 に対し和文は 191 */
  margin-block-start: 247px;  /* ヘッダー下端 89 → 和文 336 */
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-30) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-body);
}

.page-hero__title-en {
  grid-area: en;
  /* 中の文字が列幅を見て縮めるようにする。列は minmax(0, 1fr) なので
     文字の大きさが列幅を押し広げることはなく、循環しない */
  container-type: inline-size;
  /* カンプで 2 行になっているページ（634:7996 / 542:3794）は行送りを
     130px＝1.083 に詰めてある。1 行のページは既定の 1.25 のままだが、
     共通コンポーネントなので詰めたほうに揃える */
  line-height: 1.0833;
  /* 行がキャップ高でトリムされるので、カンプの字面どうしの間隔で置く
     （和文の下端 357 → 英字の字面の上 397） */
  margin-block-start: var(--space-40);
  color: var(--color-primary);
}

.page-hero__title-en > span {
  /* ブロックにして、見出し自身の行送り（120px ぶんのストラット）が
     行間に残らないようにする */
  display: block;
  /* base.css の overflow-wrap: anywhere を打ち消す。語の途中で折れると
     SWITCHBOA / RD のようになるので、折るなら語の切れ目だけ */
  word-break: keep-all;
  overflow-wrap: normal;
  /* カンプは 1920 幅で 120px、いちばん長い SWITCHBOARD がちょうど 1200px（＝10em）。
     列がそれより狭いときは列幅の 1/10 まで落として 1 行に収める。
     1920 では 10cqi = 126.9px なので min() はカンプの 120px を選ぶ（SP も同じで 35px） */
  font-size: min(calc(var(--font-size-en-hero) * var(--font-scale)), 10cqi);
}

.page-hero__meta {
  grid-area: meta;
  align-self: end;
  /* 英字の字面の下 490 − パンくずの下端 481（2 行のページも 619 − 612 でほぼ同じ） */
  margin-block-end: var(--space-8);
}

.page-hero__visual {
  position: relative;
  grid-area: visual;
  /* 英字の字面の下 490 → ビジュアル 528（2 行の 634:7996 でも 619 → 658 で同じ） */
  margin-block-start: var(--space-38);
  overflow: hidden;
  border-radius: var(--radius-10);
}

.page-hero__visual::after {
  /* カンプ Rectangle 60: #A7A8BA 66% の MULTIPLY 幕 */
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background-color: var(--color-hero-veil);
  content: "";
}

/* 写真が来るまでは幕も写真も出さない。幕だけが先に出ると、
   遷移した瞬間に幕の色だけの帯に見える（FB 2026-09-08 p6）。
   場所（高さ）は width / height 属性で確保済みなので、動かずに入れ替わる */
.page-hero__visual:not(.is-loaded)::after,
.page-hero__visual:not(.is-loaded) img {
  opacity: 0;
}

.page-hero__visual img,
.page-hero__visual::after {
  transition: opacity var(--duration-hover) var(--easing-linear);
}

.page-hero__visual img {
  width: 100%;
  height: auto;
}

@media (max-width: 1279px) {
  .page-hero__title {
    margin-block-start: var(--space-160);
  }
}

@media (max-width: 767px) {
  .page-hero__inner {
    grid-template-areas:
      "meta"
      "title"
      "en"
      "visual";
    grid-template-columns: 1fr;
  }

  .page-hero__meta {
    align-self: auto;
    margin-block-start: var(--space-28); /* ヘッダー下端 51 → パンくず 79 */
    margin-block-end: 0;
  }

  .page-hero__title {
    padding-inline-start: 0;
    margin-block-start: var(--space-87); /* パンくず下端 92 → 和文 179 */
    font-size: var(--font-size-18);
  }

  .page-hero__title-en {
    /* SP カンプ 934:11136 ほか: 和文の字面の下 254 → 英字の字面の上 276 */
    margin-block-start: 22px;
  }

  .page-hero__visual {
    margin-block-start: var(--space-14); /* 英字の枠の下端 246 → ビジュアル 260 */
  }

  .page-hero__visual img {
    /* SP カンプは KV の比率が PC と違う（353×328。PC は 1560×599）。
       下層の KV があるページはすべて同じ（FB 2026-09-08 p29） */
    aspect-ratio: 353 / 328;
    object-fit: cover;
  }
}

/* ===== ./components/page-tabs.css ===== */
/* page-tabs.css — 下層ページのタブ（カンプ PC 315:2302 ほか / SP 931:7012）

   PC 実測（青帯 y=791〜1236・1920×445・#0092E5 の上に置く）
     戻るタブ Component 65  x=180 y=1070  183×57
       板       x=180 y=1080  173×47  #0092E5・右上だけ角丸 10
       逆アール Subtract 10×10 を左上（x=180 y=1070）と右下（x=353 y=1117）に足して、
                メインビジュアル（角丸 10・下端 1127）の左下から帯へ流れる形にしている
       アイコン x=180 y=1100  18×18 の白枠（線 1px）＋ 左向き矢印 10px（線 1.5px・白）
       文字     x=207 y=1102  18px 700 白（アイコンとの間 9・右の余白 20）
     タブ  363×62 ／ x=180 / 579 / 978 / 1377（間 36 ＝ 363×4 + 36×3 で 1560）
       現在地 x=180 y=1155  363×109  白・角丸 10・影 0 0 20 rgb(0 0 0 /.2)
              文字 20px 700 #474645 中央（y=1185）／ 下線 78×2 #0092E5（y=1213）
       他     y=1155  白・角丸 10・同じ影 ／ 文字 20px 500 #474645 中央（y=1179）
              矢印 16×12（線 1.5px #474645）x=906（右の余白 21）

   SP 実測（393 アートボード）
     戻るタブ 149×47 ／ アイコン枠 14×14 ／ 文字 16px 700（間 4・右の余白 19）
     タブ 171×38・角丸 10 を 2 列（間 10 / 行間 8）・影なし
       現在地 #0092E5・枠 #87CBF2 1px・文字 14px 700 白
       他     白・文字 14px 500 #474645 ／ 矢印 8px（線 1px）右の余白 9

   ホバー（2 枚重ねと動きは swap.css の <Swap>。ここは窓の大きさと色だけ）
     戻るタブ 文字は上へ ／ 矢印は左へ（1 本目が左へ出て 2 本目が右から入る）
     タブ     文字は #0092E5 に入れ替わりながら上へ ／ 矢印は右へ（青い矢印が左から入る）
   文字の窓はカンプでは 18〜19px だが、その高さだと Noto Sans JP の字面がはみ出して
   入れ替えのときに前の文字が残る。button.css と同じく 1.45em にしている。
   矢印の送りは窓 1 枚ぶん（カンプは 17px）。 */

.page-tabs {
  /* 戻るタブはメインビジュアル（position: relative）の左下に重なるので前に出す */
  position: relative;
  z-index: 1;
  /* 下の帯はタブの margin-block-end で帯の下端を作る。
     flow-root にしておかないとその margin が帯の外へ抜ける */
  display: flow-root;

  --page-tabs-notch: 10px;
}

/* --- 戻るタブ ---------------------------------------------------------- */

.page-tabs__parent {
  /* リンクは inline-flex なので、行送りで位置がぶれないよう flex で受ける */
  display: flex;
}

/* カンプ Component 65 の枠は 57px ＝ 逆アール 10 ＋ 板 47。
   逆アールは板の外（下の ::before）なので、その 10px は上余白で取る */
.page-tabs--top .page-tabs__parent {
  padding-block-start: var(--space-10);
}

.page-tabs__parent-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  column-gap: 9px; /* アイコンの右端 198 → 文字 207 */
  height: 47px;
  /* カンプの文字とアイコンは板の中心より 5px 下にある（窓 1099〜1117 と板 1080〜1127） */
  padding-block-start: var(--space-10);
  padding-inline-end: var(--space-20);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-start-end-radius: var(--radius-10);
}

/* 左上と右下の逆アール（カンプ Subtract 719:4023 / 719:4024）。
   10px の四角を板の外に置き、内側を円で抜く */
.page-tabs__parent-link::before,
.page-tabs__parent-link::after {
  position: absolute;
  width: var(--page-tabs-notch);
  height: var(--page-tabs-notch);
  content: "";
}

.page-tabs__parent-link::before {
  inset-block-end: 100%;
  inset-inline-start: 0;
  background: radial-gradient(
    circle var(--page-tabs-notch) at 100% 0,
    transparent var(--page-tabs-notch),
    var(--color-primary) var(--page-tabs-notch)
  );
}

.page-tabs__parent-link::after {
  inset-block-end: 0;
  inset-inline-start: 100%;
  background: radial-gradient(
    circle var(--page-tabs-notch) at 100% 0,
    transparent var(--page-tabs-notch),
    var(--color-primary) var(--page-tabs-notch)
  );
}

/* 下の帯（カンプ Component 74）は青い板も逆アールも持たず、帯の上に文字だけが乗る */
.page-tabs--under .page-tabs__parent-link {
  height: 18px; /* カンプ: アイコンと文字の窓と同じ 18px */
  padding: 0;
  background-color: transparent;
  border-start-end-radius: 0;
}

.page-tabs--under .page-tabs__parent-link::before,
.page-tabs--under .page-tabs__parent-link::after {
  display: none;
}

.page-tabs__parent-icon {
  flex: none;
  width: 18px; /* カンプの Mask group ＋ Rectangle 121 の白枠 */
  height: 18px;
  border: 1px solid currentColor;
}

/* --- タブ -------------------------------------------------------------- */

.page-tabs__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 行は他のタブの高さ。現在地（109px）はここから帯の外へはみ出す */
  grid-auto-rows: 62px;
  column-gap: var(--space-36); /* 363×4 ＋ 36×3 ＝ 1560 */
}

/* 上の帯: 戻るタブの下に置き、現在地は下へ出っ張る（カンプ 1155〜1264 と帯の下端 1236） */
.page-tabs--top .page-tabs__list {
  align-items: start;
  margin-block-start: var(--space-28); /* 戻るタブの下端 1127 → タブ 1155 */
}

/* 下の帯: 現在地は上へ出っ張る（カンプ 3758〜3867 と帯の上端 3781）。
   他のタブと下端をそろえるので align-items は end */
.page-tabs--under .page-tabs__list {
  align-items: end;
  margin-block-end: var(--space-36); /* タブの下端 3867 → 戻るリンク 3903 */
}

.page-tabs__link {
  position: relative;
  display: grid;
  place-items: center;
  height: 62px;
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-body);
  background-color: var(--color-bg-base);
  border-radius: var(--radius-10);
  box-shadow: var(--shadow-tab);

  /* 入れ替わって出てくる文字と矢印（カンプ Arrow 12 も #0092E5） */
  --swap-in-color: var(--color-primary);
}

.page-tabs__item.is-current .page-tabs__link {
  height: 109px;
  font-weight: var(--font-weight-bold);
}

/* カンプの 109px の札は、文字と罫が「帯に入っている側」に寄っていて
   反対側が 50px ほど空く。行を伸ばして中央に置くと罫が札の外れた側まで落ちる */
.page-tabs--top .page-tabs__item.is-current .page-tabs__link {
  align-content: start;
  padding-block-start: 30px; /* 札の上端 1155 → 文字 1185 */
}

.page-tabs--under .page-tabs__item.is-current .page-tabs__link {
  align-content: end;
  padding-block-end: 29px; /* 罫の下端 3838 → 札の下端 3867 */
}

.page-tabs__item.is-current .page-tabs__link::after {
  /* カンプ Line 30: 文字の下の青い罫（78×2） */
  width: 78px;
  height: 2px;
  margin-block-start: 13px; /* 文字の下端 1200 → 罫 1213 */
  background-color: var(--color-primary);
  content: "";
}

.page-tabs__arrow {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 21px; /* 矢印の右端 921 → タブの右端 942 */
  width: 16px; /* カンプの Mask group */
  height: 12px;
  margin-block-start: -6px;
  color: var(--color-border);
}

/* --- 文字（戻るタブとタブで共通） -------------------------------------- */

.page-tabs__label {
  /* 窓の高さ＝入れ替わる送り。1.45em の理由は button.css と同じ */
  height: 1.45em;
}

/* --- タブレット（1279 以下の共通） ------------------------------------- */

@media (max-width: 1279px) {
  /* 白い札の上下のアキはカンプの半分にする（FB 2026-09-17 p2 / p4）。
     下側（札の下端 → 帯の下端）は common.css の .common__band 側 */
  .page-tabs--top .page-tabs__list {
    margin-block-start: var(--space-14); /* PC は 28px */
  }

  /* 他の札の右余白（20px）は矢印の逃げ。現在地には矢印が無いので、
     そのままだと文字が 6px 左へ寄る（2026-09-17 ユーザー指摘）。左右そろえる */
  .page-tabs__item.is-current .page-tabs__link {
    padding-inline: var(--space-8);
  }
}

/* --- タブレット横（1024〜1279） ---------------------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {
  /* 5 枚並ぶページ（私達のしごと）は札が 203px しかなく、20px のままだと
     「事例紹介・実績」が矢印に重なる。文字を落として矢印も小さくし、
     矢印は札の右端へ寄せる（FB 2026-09-17 p2） */
  .page-tabs__link {
    font-size: var(--font-size-16);
    /* 札の高さも字なりに。カンプの比（62 ÷ 20 ＝ 3.1）を保つ
       （2026-09-17 ユーザー指摘。字だけ小さくして 62px のままだと間延びする） */
    height: 50px;
    /* 右は矢印のぶんを空けて、文字が矢印に重ならないようにする */
    padding-inline: var(--space-8) var(--space-20);
  }

  .page-tabs__list {
    grid-auto-rows: 50px;
  }

  /* 現在地の札も同じ比で（PC 109 × 50/62） */
  .page-tabs__item.is-current .page-tabs__link {
    height: 88px;
  }

  .page-tabs--top .page-tabs__item.is-current .page-tabs__link {
    padding-block-start: var(--space-24); /* PC は 30px */
  }

  .page-tabs--under .page-tabs__item.is-current .page-tabs__link {
    padding-block-end: 23px; /* PC は 29px */
  }

  .page-tabs__item.is-current .page-tabs__link::after {
    width: 66px; /* 文字が小さくなったぶん罫も短く（PC は 78px ／ 縦は 60px） */
    margin-block-start: var(--space-10); /* PC は 13px */
  }

  .page-tabs__arrow {
    inset-inline-end: var(--space-12); /* PC は 21px */
    width: 12px;
    height: 9px;
    margin-block-start: -5px;
  }

  .page-tabs__arrow .swap__item > svg {
    width: 12px;
    height: 9px;
  }
}

/* --- タブレット縦 ------------------------------------------------------ */

@media (max-width: 1023px) {
  /* 4〜5 枚を 1 行に並べたままにするため、文字と矢印を小さくして間隔も詰める
     （FB 2026-09-14 p18。20px のままだと「イトウテックの歩み」がはみ出す） */
  .page-tabs__list {
    column-gap: var(--space-10);
  }

  .page-tabs__link {
    font-size: var(--font-size-14);
    /* 札の高さも字なりに。カンプの比（62 ÷ 20 ＝ 3.1）を保つ
       （2026-09-17 ユーザー指摘） */
    height: 44px;
    /* 右は矢印のぶんを空けて、文字が矢印に重ならないようにする */
    padding-inline: var(--space-8) var(--space-20);
  }

  .page-tabs__list {
    grid-auto-rows: 44px;
  }

  /* 現在地の札も同じ比で（PC 109 × 44/62） */
  .page-tabs__item.is-current .page-tabs__link {
    height: 77px;
  }

  .page-tabs--top .page-tabs__item.is-current .page-tabs__link {
    padding-block-start: var(--space-21); /* PC は 30px */
  }

  .page-tabs--under .page-tabs__item.is-current .page-tabs__link {
    padding-block-end: var(--space-20); /* PC は 29px */
  }

  .page-tabs__item.is-current .page-tabs__link::after {
    width: 60px; /* 文字が小さくなったぶん罫も短く（PC は 78px） */
    margin-block-start: 9px; /* PC は 13px */
  }

  .page-tabs__arrow {
    inset-inline-end: 9px;
    width: 9px;
    height: 8px;
    margin-block-start: -4px;
  }

  .page-tabs__arrow .swap__item > svg {
    width: 9px;
    height: 7px;
  }
}

@media (max-width: 767px) {
  .page-tabs__parent-link {
    column-gap: var(--space-4); /* アイコンの右端 34 → 文字 38 */
    padding-block-start: 0;     /* SP は板の中心（窓 624〜642 と板 609〜656） */
    padding-inline-end: 19px;
    font-size: var(--font-size-16);
  }

  .page-tabs__parent-icon {
    width: 14px;
    height: 14px;
  }

  .page-tabs__parent-icon .swap__item > svg {
    width: 8px; /* カンプ Arrow 13 (Stroke) 8×8 */
    height: 8px;
  }

  .page-tabs__list {
    grid-auto-rows: auto; /* SP は現在地も他のタブも 38px */
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-10);
    row-gap: var(--space-8);
  }

  .page-tabs--top .page-tabs__list {
    margin-block-start: var(--space-16);
  }

  .page-tabs--under .page-tabs__list {
    margin-block-end: var(--space-16); /* SP カンプ: タブの下端 3068 → 戻るリンク 3083 */
  }

  /* SP カンプ 931:7012: 下の帯の戻るリンクは中央（x=132〜262 / 393 幅） */
  .page-tabs--under .page-tabs__parent {
    justify-content: center;
  }

  .page-tabs__link {
    height: 38px;
    font-size: var(--font-size-14);
    /* 影は PC と同じ（SP カンプ 931:7639 ほかも DROP_SHADOW 20 / 20%。
       FB 2026-09-08 p31 で指摘） */
  }

  /* SP は現在地だけ青地・白文字（カンプ Rectangle 263）。
     他のタブと同じ 38px なので、PC の上寄せ（罫のぶんの余白）は戻す */
  .page-tabs--top .page-tabs__item.is-current .page-tabs__link,
  .page-tabs--under .page-tabs__item.is-current .page-tabs__link {
    align-content: center;
    padding-block: 0;
  }

  .page-tabs__item.is-current .page-tabs__link {
    height: 38px;
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border: 1px solid var(--color-border-primary-light);
  }

  .page-tabs__item.is-current .page-tabs__link::after {
    display: none; /* 高さが揃うので下線は出さない（カンプの SP にも罫は無い） */
  }

  .page-tabs__arrow {
    inset-inline-end: 9px;
    width: 9px; /* カンプ Arrow 20 は 8px（線 1px） */
    height: 8px;
    margin-block-start: -4px;
  }

  .page-tabs__arrow .swap__item > svg {
    width: 9px;
    height: 7px;
  }
}

/* ===== ./components/link-card.css ===== */
/* link-card.css — カンプ 719:3878 ほか（550×405）
   写真 550×355.8 角丸 5 ／ 和文 y=383（25px）／ 英字 和文の 14px 右・y=390（12px #A8A8A8）
   矢印 右端 x=529 y=387（16×12・線 1.5px #474645）

   ホバー（ComponentSet 719:3876 の Frame 46 → Frame 47 実測）
     写真  中心そのままで 819.7 → 877px ＝ 1.07 倍
     矢印  2 本とも右へ 17px（窓 1 枚ぶん）。色は変わらない
   2 枚重ねと動きは swap.css（<Swap direction="right">）が持つ */

.link-card {
  display: block;
  color: var(--color-text-body);
}

.link-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-5);
}

.link-card__image {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--duration-hover) var(--easing-linear);
}

.link-card:hover .link-card__image,
.link-card:focus-visible .link-card__image {
  transform: scale(1.07); /* カンプ: 819.7 → 877px（中心そのまま） */
}

.link-card__foot {
  display: flex;
  align-items: baseline;
  column-gap: var(--space-14); /* 和文の右端 → 英字（カンプ 100 → 114） */
  margin-block-start: var(--space-27); /* 写真の下端 355.8 → 和文 383 */
}

.link-card__label {
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-25) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.link-card__label-en {
  font-family: var(--font-family-en);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  color: var(--color-text-caption);
  text-box: normal;
}

.link-card__arrow {
  align-self: center;
  width: 16px; /* カンプの Mask group。送りは窓 1 枚ぶん（カンプは 17px） */
  height: 12px;
  margin-inline-start: auto;
  color: var(--color-border);
}

@media (max-width: 767px) {
  .link-card__media {
    /* SP カンプ 931:6911 ほか: 写真は 353×154（PC の 550×355.8 と比率が違う） */
    aspect-ratio: 353 / 154;
  }

  .link-card__image {
    height: 100%;
    object-fit: cover;
  }

  .link-card__label {
    font-size: var(--font-size-23); /* SP カンプ 931:6914 */
  }

  .link-card__label-en {
    font-size: var(--font-size-11); /* SP カンプ 931:6919 */
  }

  .link-card__foot {
    column-gap: var(--space-15); /* 和文の右端 112 → 英字 127 */
    margin-block-start: var(--space-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 動かさずに切り替える */
  .link-card__image {
    transition: none;
  }
}

/* ===== ./components/accordion.css ===== */
/* accordion.css — よくある質問（カンプ 607:6762）
   カード x=361 幅 1199・角丸 20・白地・枠 #0092E5
     閉じた状態 150px ／ 開いた状態 326px ／ カードの間隔 35px
     Q      x=399（カード内 38）y=+52  Krona One 60px #0092E5
     質問   x=497（カード内 136）y=+48  20px / 行送り 40・幅 941
     開閉印 x=1488（右端から 72）26×26
     罫     カード内 y=+147 幅 1200 #D9D9D9
     A      x=497 y=+190  Krona One 30px #DC000C
     回答   x=549（カード内 188）幅 881  18px / 行送り 38 */

.accordion__item + .accordion__item {
  margin-block-start: var(--space-35);
}

.accordion__button {
  display: grid;
  grid-template-columns: 98px 1fr 72px; /* Q 38〜136 ／ 質問 136〜1127 ／ 印 */
  align-items: center;
  width: 100%;
  min-height: 150px;
  /* 質問が 150px を超える幅（1280〜1350 あたり）でも札からはみ出さないように */
  padding-block: var(--space-24);
  padding-inline-start: var(--space-38);
  color: var(--color-text-black);
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-20);
  text-align: start;
}

.accordion__item:has(.accordion__panel:not([hidden])) .accordion__button {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  border-block-end: 0;
}

.accordion__mark-q {
  font-family: var(--font-family-en);
  font-size: calc(var(--font-size-60) * var(--font-scale));
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  color: var(--color-primary);
  text-box: normal;
}

.accordion__question {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-medium);
  line-height: 2; /* カンプ実測: 20px に対し行送り 40px */
  /* base.css の text-box: trim-both のままだと、箱が行送りのアキのぶん
     短くなり、行数が増えたときに字が札の外へはみ出す */
  text-box: normal;
}

.accordion__toggle {
  position: relative; /* 「＋」「−」は 2 本の棒を重ねた図形そのもの */
  width: 26px;
  height: 26px;
  justify-self: center;
}

.accordion__toggle::before,
.accordion__toggle::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 26px;
  height: 2px;
  background-color: var(--color-primary);
  content: "";
}

.accordion__toggle::after {
  transform: rotate(90deg);
  transition: transform var(--duration-fast) var(--easing-standard);
}

.accordion__toggle.is-open::after {
  transform: rotate(0deg);
}

.accordion__panel {
  padding: var(--space-44) var(--space-38) var(--space-50);
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-border-primary);
  border-block-start: 1px solid var(--color-border-light); /* カンプ Line 36 */
  border-end-start-radius: var(--radius-20);
  border-end-end-radius: var(--radius-20);
}

.accordion__answer {
  display: grid;
  /* カンプ: A はカード内 136（枠の 38 ＋ 98）、回答は 188 から ＝ A の列は 52 */
  grid-template-columns: 52px 1fr;
  align-items: start;
  padding-inline-start: var(--space-98);
}

.accordion__mark-a {
  font-family: var(--font-family-en);
  font-size: calc(var(--font-size-30) * var(--font-scale));
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  color: var(--color-accent);
  text-box: normal;
}

.accordion__answer-text {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 2.11; /* カンプ実測: 18px に対し行送り 38px */
}

/* --- SP（カンプ 946:16830）--------------------------------------------
   カード 353・角丸 20・左右の余白 24 ／ 上 22
     Q      45px（カードの左 24・上 22）
     質問   17px / 行送り 33（Q の下端 917 → 941 ＝ 24）
     罫     カードいっぱい（質問の下端 1085 → 1120 ＝ 35）
     A      40px（罫 → 1155 ＝ 35）／ 回答 16px / 行送り 33（A の右端 81 → 105 ＝ 24）
     開閉   カードの下端いっぱいの青い帯 353×51・白い印 20px
            （回答の下端 1365 → 帯 1400 ＝ 35） */
@media (max-width: 767px) {
  .accordion__item {
    position: relative; /* 開閉の帯をカードの下端に置くため */
  }

  .accordion__item + .accordion__item {
    margin-block-start: var(--space-16);
  }

  /* Q は質問の上に置く（PC は左に並ぶ） */
  .accordion__button {
    display: block;
    min-height: 0;
    padding: 22px var(--space-24) 86px; /* 下 ＝ 35 ＋ 帯 51 */
    /* SP は帯（＋／−）を押したときだけ開閉する（2026-09-07 ユーザー指示）。
       キーボード操作は pointer-events の影響を受けないので、
       タブで当てて Enter でも開ける */
    pointer-events: none;
  }

  .accordion__item:has(.accordion__panel:not([hidden])) .accordion__button {
    padding-block-end: var(--space-35); /* 開いているときは帯が本文側に付く */
  }

  .accordion__mark-q {
    display: block;
    font-size: var(--font-size-45);
  }

  .accordion__question {
    margin-block-start: var(--space-24);
    font-size: var(--font-size-17);
    line-height: 1.94; /* カンプ実測: 17px に対し行送り 33px */
  }

  /* 開閉ボタンはカードの下端いっぱいの青い帯（カンプ Rectangle 286） */
  .accordion__toggle {
    position: absolute;
    /* パネル（白地）はこの要素より後ろに来るので、前に出さないと隠れる */
    z-index: 1;
    pointer-events: auto; /* 押せるのはここだけ */
    cursor: pointer;
    inset-block-end: 0;
    inset-inline: 0;
    /* 基本の justify-self: center が残っていると、絶対配置でも
       内容なりの幅（＝0）に縮んでしまう */
    justify-self: stretch;
    width: auto;
    height: 51px;
    background-color: var(--color-primary);
    border-end-start-radius: var(--radius-20);
    border-end-end-radius: var(--radius-20);
  }

  .accordion__toggle::before,
  .accordion__toggle::after {
    inset-inline-start: 50%;
    width: 20px;
    margin-inline-start: -10px;
    background-color: var(--color-text-inverse);
  }

  .accordion__panel {
    padding: var(--space-35) var(--space-24) 86px; /* 下 ＝ 35 ＋ 帯 51 */
  }

  .accordion__answer {
    grid-template-columns: 61px 1fr; /* A 44〜81 ／ 回答 105 から */
    padding-inline-start: 0;
  }

  .accordion__mark-a {
    font-size: var(--font-size-40);
  }

  .accordion__answer-text {
    font-size: var(--font-size-16);
    line-height: 2.06; /* カンプ実測: 16px に対し行送り 33px */
  }
}

/* ===== ./components/form.css ===== */
/* form.css — お問い合わせフォーム（カンプ 540:2763）
   行 x=566 ／ ラベル 18px 500（幅 212）／ 入力 x=778 幅 962・高さ 67・角丸 5・枠 #A2A2A2
   お問い合わせ内容だけ 241px ／ ご住所は 2 段（154px）
   行の区切り罫 x=543 幅 1197 #D9D9D9
   必須の * は #DC000C */

.contact-form__row {
  display: grid;
  grid-template-columns: 212px 1fr; /* ラベル 566〜778 ／ 入力 778〜1740 */
  align-items: start;
  padding-block: var(--space-50); /* 罫 1153 → 次の入力 1203 */
  border-block-end: 1px solid var(--color-border-light);
}

/* 先頭の行だけ上の余白を消す。:first-child ではなく「前に .contact-form__row が
   1 つも無い」ことで判定する（:not() ＋ 一般兄弟結合子）。
   WordPress 側は誤りの知らせ（.contact-form__alert）を contact-form.php が常に
   静的に出力するため（assets/js/contact.js が is-invalid / is-failed クラスで
   出し分ける設計。prototype は React の条件レンダリングでエラー時以外は DOM に
   存在しない）、先頭の子要素が .contact-form__row にならず :first-child がずれる。 */
.contact-form__row:not(.contact-form__row ~ .contact-form__row) {
  padding-block-start: 0;
}

.contact-form__label {
  padding-block-start: var(--space-20); /* 入力枠 1036 → ラベル 1056 */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: 1.56; /* カンプ実測: 18px に対し行送り 28px */
}

.contact-form__required {
  padding-inline-start: var(--space-4);
  color: var(--color-accent);
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  height: 67px;
  padding-inline: var(--space-20);
  font-size: var(--font-size-18);
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-5);
}

.contact-form__textarea {
  height: 241px;
  padding-block: var(--space-20);
  resize: vertical;
}

.contact-form__address {
  display: grid;
  row-gap: var(--space-20); /* カンプ ご住所の枠 154px ＝ 67 + 20 + 67 */
}

.contact-form__zip {
  display: flex;
  align-items: center;
  column-gap: 15px; /* 〒 の右端 796 → 入力 811 */
}

/* 郵便番号だけ幅が狭い（カンプ Rectangle 235: 287×67。住所は 962） */
.contact-form__zip .contact-form__input {
  width: 287px;
}

.contact-form__zip-mark {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
}

/* --- 誤りの知らせ -------------------------------------------------------

   カンプに専用の絵はないので、必須の * と同じ #DC000C と、
   同意の枠と同じ角丸 20 で組んでいる。 */

.contact-form__alert {
  padding: var(--space-30) var(--space-40);
  margin-block-end: var(--space-40);
  color: var(--color-accent);
  background-color: var(--color-bg-alert);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-20);
}

.contact-form__alert-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}

.contact-form__alert-text {
  margin-block-start: var(--space-16);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: 1.9;
  color: var(--color-text-body);
}

/* 入力欄と、その下の説明をひとまとまりにする */
.contact-form__field {
  min-width: 0;
}

/* CF7 は入力欄ごとに <span class="wpcf7-form-control-wrap"> で包む（prototype には
   無い要素）。この span は base.css の `:where(..., span) { text-box: trim-both
   cap alphabetic }`（Figma の leadingTrim 再現）にも一致するが、この span 自体は
   テキストを持たず中身が <input> だけなので、text-box のトリムが効くと
   行ボックスの高さがフォントの字面基準まで潰れてしまい、中の <input>（67px）が
   すべて隠れる（Chromium で再現・確認済み）。テキストを持たない
   フォーム制御用の span なのでトリムの対象外にする。 */
.wpcf7-form-control-wrap {
  text-box: none;
}

.contact-form__error {
  margin-block-start: var(--space-12);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: 1.75;
  color: var(--color-accent);
}

.contact-form__input.is-invalid,
.contact-form__textarea.is-invalid {
  background-color: var(--color-bg-alert);
  border-color: var(--color-accent);
}

/* 同意のチェックは中央寄せの枠の中にあるので、説明もそろえる */
.contact-form__consent .contact-form__error {
  text-align: center;
}

.contact-form__checkbox[aria-invalid="true"] {
  border-color: var(--color-accent);
}

.contact-form__consent {
  padding: var(--space-60) var(--space-40);
  margin-block-start: var(--space-50); /* 最後の罫 → 同意の枠 2247 */
  background-color: var(--color-bg-tint-weak);
  border-radius: var(--radius-20);
  text-align: center;
}

.contact-form__consent-title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-23);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.contact-form__consent-text {
  margin-block-start: var(--space-40); /* 見出しの下端 2340 → 本文 2377 */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 2.5; /* カンプ実測: 18px に対し行送り 45px */
}

/* カンプ 540:2763 では「プライバシーポリシー」だけ青い下線つきのリンク */
.contact-form__policy-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.contact-form__agree {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-10); /* 印 984〜1020 → 文字 1030 */
  margin-block-start: var(--space-30);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
}

/* CF7 は同意のチェックを span 3 重（form-control-wrap > form-control >
   list-item）で包む。list-item は inline-block で、CF7 の既定 CSS の
   `margin: 0 0 0 1em` と base.css の text-box のトリムが効き、丸が文字より
   約 15px 上・9px 右にずれる（2026-09-25 FB）。3 つとも flex にして
   丸を直接 flex の子として並べ、prototype と同じ位置にする */
.contact-form__agree .wpcf7-form-control-wrap,
.contact-form__agree .wpcf7-form-control,
.contact-form__agree .wpcf7-list-item {
  display: flex;
  margin: 0;
  text-box: none;
}

/* 丸も文字も押せる（label が input と結び付いている） */
.contact-form__agree .contact-form__checkbox,
.contact-form__agree label {
  cursor: pointer;
}

/* カンプ Ellipse 2: 36φ の丸・白地・枠 #A2A2A2。
   既定のチェックボックスは角丸が効かないので、見た目を自前で作る */
.contact-form__checkbox {
  appearance: none;
  flex: none;
  width: 36px;
  height: 36px;
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-circle);
}

/* チェックしたときの見た目はカンプに無い。丸の中にチェックを出す（2026-09-07 ユーザー指示） */
.contact-form__checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none'%3E%3Cpath d='M1.5 7L6.5 12L16.5 2' stroke='%230092E5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 14px;
  border-color: var(--color-primary);
}

.contact-form__checkbox:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.contact-form__submit {
  /* インラインで並べるとボタンの位置が行送りに左右されるので flex で中央に置く */
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-50); /* 同意の枠の下端 2624 → ボタン 2695 */
}

/* カンプ Rectangle 24: 311×91・白地・枠 #0092E5・角丸 5。
   文字はボタンの中央、矢印だけ右端から 21px のところに置く */
.contact-form__submit-button {
  position: relative;
  justify-content: center;
  min-width: 311px;
  height: 91px;
  padding-inline: var(--space-40);
}

.contact-form__submit-button .button__icon {
  position: absolute;
  inset-inline-end: 21px;
}

/* --- 確認画面 ------------------------------------------------------------

   カンプに無い画面（2026-09-25 ユーザー指示）。同じページのまま .contact-form に
   is-confirm を付けて切り替える。行・罫・ラベルは入力画面のまま、入力欄の
   代わりに入力した値（.contact-form__value）を文字で出す。
   入力欄は消さずに隠すだけ（display: none でも値は送られる）。
   ボタンは 入力画面「確認画面へ」／ 確認画面「戻る」「送信する」。 */

.contact-form .contact-form__confirm-lead,
.contact-form .contact-form__value,
.contact-form .contact-form__back-button,
.contact-form .contact-form__send-button,
.contact-form.is-confirm .contact-form__field > :not(.contact-form__value),
.contact-form.is-confirm .contact-form__address > :not(.contact-form__value),
.contact-form.is-confirm .contact-form__consent,
.contact-form.is-confirm .contact-form__confirm-button {
  display: none;
}

.contact-form.is-confirm .contact-form__confirm-lead,
.contact-form.is-confirm .contact-form__value {
  display: block;
}

.contact-form.is-confirm .contact-form__back-button,
.contact-form.is-confirm .contact-form__send-button {
  display: flex;
}

.contact-form__confirm-lead {
  margin-block-end: var(--space-40);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: 1.56;
}

/* ラベルと同じ字の大きさ・行送り・上の余白にして、行の頭を揃える。
   ラベル（label）は base.css の text-box のトリムの対象外なので、p のこちらも
   外す（当てたままだと字面が行送りの半分ほど上にずれる） */
.contact-form__value {
  min-height: 1lh;
  text-box: none;
  padding-block-start: var(--space-20);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 1.56;
  white-space: pre-wrap;
}

/* 「戻る」「送信する」は 1 行に並べる。2 つで 311 × 2 ＋ 30 に満たない幅
   （タブレット横のフォーム列 543px・SP）では、どちらも同じだけ縮める */
.contact-form__submit {
  column-gap: var(--space-30);
}

.contact-form.is-confirm .contact-form__submit-button {
  flex: 0 1 311px;
  min-width: 0;
}

/* 「戻る」だけ矢印を左端に置き、左向きにする（2026-09-25 ユーザー指示）。
   円ごと左右反転するので、ホバーで矢印が流れる向きも左になる */
.contact-form__back-button .button__icon {
  inset-inline: 21px auto;
  scale: -1 1;
}

/* --- タブレット縦 ------------------------------------------------------ */

@media (max-width: 1023px) {
  .contact-form__row {
    /* 列が狭いので、ラベルと入力を横に並べると入力欄が画面からはみ出す
       （FB 2026-09-14 p23）。ラベルの下に入力を置く */
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-12);
    padding-block: var(--space-24);
  }

  .contact-form__label,
  .contact-form__value {
    padding-block-start: 0;
  }

  .contact-form__input,
  .contact-form__textarea {
    /* input の既定の最小幅（size 属性ぶん）で列が広がらないようにする */
    min-width: 0;
  }

  .contact-form__zip .contact-form__input {
    width: min(287px, 100%);
  }

  .contact-form__consent-text {
    /* base.css の overflow-wrap: anywhere は禁則処理まで無効にしてしまい、
       行頭に読点が来ることがある。流し込みで折る幅なので既定に戻す
       （2026-09-15 ユーザー指示） */
    overflow-wrap: normal;
    text-align: left;
  }
}

@media (max-width: 767px) {
  .contact-form__row {
    padding-block: var(--space-24);
  }

  .contact-form__label,
  .contact-form__value,
  .contact-form__confirm-lead {
    font-size: var(--font-size-16);
  }

  .contact-form__confirm-lead {
    margin-block-end: var(--space-24);
  }

  .contact-form__input,
  .contact-form__textarea {
    height: 56px;
    font-size: var(--font-size-16);
  }

  .contact-form__textarea {
    height: 180px;
  }

  .contact-form__consent {
    padding: var(--space-32) var(--space-20);
  }

  .contact-form__consent-title {
    font-size: var(--font-size-18);
  }

  .contact-form__consent-text {
    margin-block-start: var(--space-20);
    font-size: var(--font-size-14);
    line-height: 2;
  }

  .contact-form__agree {
    font-size: var(--font-size-14);
  }

  .contact-form__checkbox {
    width: 24px;
    height: 24px;
  }

  .contact-form__alert {
    padding: var(--space-24) var(--space-20);
    margin-block-end: var(--space-24);
  }

  /* .wpcf7-response-output は .contact-form__alert と同じ枠なので、
     767px 以下の余白の縮小も揃える（コードレビュー指摘：ここが抜けていて
     SP 幅だけ CF7 の全体エラー枠の余白が大きいままになっていた）。
     セレクタの詳細度を上げている理由（`.wpcf7 form .wpcf7-response-output` では
     足りない理由）は下の本体側のコメントを参照。ここは「本体の宣言より前の
     行にある @media」なので、詳細度で確実に勝たないと本体側の宣言に
     負けてしまう（メディアクエリはソース順のタイブレークに関与しない） */
  .wpcf7 .contact-form ~ .wpcf7-response-output {
    margin-block-start: var(--space-24);
    padding: var(--space-24) var(--space-20);
  }

  .contact-form__alert-title {
    font-size: var(--font-size-18);
  }

  .contact-form__alert-text,
  .contact-form__error {
    font-size: var(--font-size-14);
  }

  .contact-form__submit-button {
    min-width: 0;
    height: 64px;
  }
}

/* --- WordPress（Contact Form 7）専用 ------------------------------------

   ここから下は prototype 側では使わない（CF7 が生成する要素の見た目合わせ）。
   お問い合わせと Contact Form 7 の自動導入まわりの用途。 */

/* .contact-form__alert は prototype では React の state に応じて 1 つだけ
   描画されるが、CF7 のフォームは静的な HTML しか差し込めないので、
   parts/contact-form.php には data-alert="invalid" / "failed" の 2 つを
   仕込んである。既定では両方隠し、assets/js/contact.js が .contact-form に
   付ける is-invalid / is-failed クラスに応じて出し分ける。 */
.contact-form__alert {
  display: none;
}

.contact-form.is-invalid .contact-form__alert[data-alert="invalid"],
.contact-form.is-failed .contact-form__alert[data-alert="failed"] {
  display: block;
}

/* Contact Form 7 のエラー表示を、プロトタイプの .contact-form__error に合わせる。
   CF7 は入力欄の直後に span.wpcf7-not-valid-tip を出すので、それを同じ見た目にする
   （値は .contact-form__error と同じ変数。font-size は --font-size-body-sm が
   767px 以下で --font-size-14 に落ちる semantic トークンなので、.contact-form__error
   のように 767px 用の個別のメディアクエリを重ねる必要が無い）。 */
.wpcf7-not-valid-tip {
  display: block;
  margin-block-start: var(--space-12);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.75;
  color: var(--color-accent);
}

/* CF7 の全体エラー（.wpcf7-response-output）は .contact-form__alert と同じ枠
   （色・角丸・枠は #DC000C 系で共通。背景も --color-bg-alert（#FDF3F4）で揃える）。
   767px 以下の余白の上書きは上の @media ブロックにまとめてある。

   ⚠ セレクタが `.wpcf7-response-output` 単体ではなく `.wpcf7 form .wpcf7-response-output`
   なのは、CF7 自身の既定 CSS（includes/css/styles.css）が
   `.wpcf7 form .wpcf7-response-output { margin / padding / border }` という
   詳細度 (0,2,1) のセレクタで margin・padding を当てているため。テーマの CSS は
   CF7 の CSS より後に読み込まれるが、詳細度 (0,1,0) の単体クラスのままだと
   詳細度で負けて margin/padding が CF7 の既定値（0.2em 1em 系）のまま
   （SP・PC のどちらでも `.contact-form__alert` と揃わない）になる。
   実機で computed style を測って気づいた（コードレビュー指摘の追検証）。
   `.wpcf7-not-valid-tip` / `.wpcf7-spinner` は CF7 側も単体クラス
   （詳細度 (0,1,0)）なので、読み込み順だけで上書きできている。

   767px 以下の上書き（上の @media ブロック）は詳細度をさらに上げて
   `.wpcf7 .contact-form ~ .wpcf7-response-output`（詳細度 (0,3,0)）にしてある。
   ファイルの中ではこの宣言（本体）より前の行に書かれているため、詳細度で
   確実に勝たないと「後に書かれているこちらの宣言」に負けてしまう
   （メディアクエリの中かどうかはソース順のタイブレークに関係しない）。 */
.wpcf7 form .wpcf7-response-output {
  margin-block-start: var(--space-40);
  padding: var(--space-30) var(--space-40);
  font-size: var(--font-size-body-sm);
  color: var(--color-accent);
  background-color: var(--color-bg-alert);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-20);
}

/* 読み込み中のくるくる（既定は img）。prototype に対応する絵が無いので出さない。 */
.wpcf7-spinner {
  display: none;
}

/* ===== ./components/pagination.css ===== */
/* pagination.css — カンプ PC 539:2195（298×37.1・右寄せ）／ SP 946:15320（224×27.9・中央寄せ）
   枠 37.1×37.1・角丸 5・枠線 #CBCBCB ／ 現在地は #0092E5 に白文字
   並びの間隔 6.4px（枠 7 つ 259.7 ＋ 間 6 つ ＝ 298 の実測から）。
   矢印の枠だけ広く空けたりはしない（カンプの x は 0 / 44 / 87.4 / 130.9 / 174.4 /
   217.9 / 260.9 で、どの間隔も 6 前後で揃っている） */

.pagination__list {
  display: flex;
  justify-content: flex-end;
  column-gap: 6.4px;
}

.pagination__link {
  display: grid;
  place-items: center;
  width: 37.1px;
  height: 37.1px;
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-body);
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-5);
}

.pagination__link.is-current {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* 「…」もカンプでは番号と同じ枠に入っている（Rectangle 48 / 枠線 #CBCBCB） */
.pagination__link--gap {
  cursor: default;
}

/* 端に来た矢印。カンプに無い状態なので **暫定**。
   枠は残して薄くするだけにして、どのページでもカンプの幅 298px から動かさない */
.pagination__link.is-disabled {
  color: var(--color-border-light);
  cursor: default;
}

.pagination__arrow {
  width: 16px;
  height: 16px;
}

.pagination__arrow--prev {
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  /* SP カンプ 946:15320 は PC のちょうど 0.75 倍（枠 27.9・軸 10.5・線 1.5）で、
     右寄せではなく中央寄せ。間隔は 224 −（27.9×7）÷ 6 ＝ 4.8 */
  .pagination__list {
    justify-content: center;
    column-gap: 4.8px;
  }

  .pagination__link {
    width: 27.9px;
    height: 27.9px;
    font-size: var(--font-size-14);
  }

  .pagination__arrow {
    width: 12px;
    height: 12px;
  }
}

/* ===== ./sections/hero.css ===== */
/* home.css — TOP（カンプ PC 489:6837 / SP 245:494）
   PC の縦位置（アートボード 1920×10568 の実測 y）
     ヒーロー         0〜1080     シンボル 471 ／ 見出し 510 ／ 新着 1007
     スクロール連動    1081〜3699
     ABOUT           写真 3639 ／ ラベル 3762 ／ 見出し 3860 ／ 本文 4168 ／ ボタン 4574 ／ 製品 4727〜5080
     COMPANY         帯 5594〜6674 ／ シンボル 5701 ／ ラベル 5896 ／ 見出し 5983 ／ 本文 6123
                     カード 6426〜6800 ／ ボタン 6851〜6922
     NEWS/FAQ パネル  7033〜8258（1980×1225・角丸 5・左右 30px はみ出す）
                     NEWS 7165 ／ 一覧リンク 7196 ／ リスト 7273〜7571
                     FAQ カード 7727〜8110（1200×383・角丸 20・#0092E5）
     RECRUIT         8258〜9338 ／ ラベル 8589 ／ 見出し 8686 ／ 本文 8798 ／ ボタン 8965 */

/* --- ヒーロー ---------------------------------------------------------- */

.top-stage {
  /* 固定した KV の効く範囲。ドローン映像の区間（ABOUT / COMPANY まで）で終える */
  position: relative;
}

.hero {
  /* 写真・見出し・新着を同じマスに積む（重なりが構成そのもの。絶対配置にはしない） */
  display: grid;
  grid-template-areas: "stack";
  /* dvh。svh だとモバイルのアドレスバーが隠れたぶんだけ画面の下に隙間ができ、
     後ろの白が帯になって出る（FB 2026-09-14 p2 / p7）。
     スクロール量を決める svh（.drone-scene__spacer など）とは役割が違う */
  min-height: 100dvh;
  overflow: hidden;
  color: var(--color-text-inverse);
  /* スクロールしても動かず、次のセクション（ドローン映像）が上に乗り上げてくる */
  position: sticky;
  inset-block-start: 0;
}

.hero__media,
.hero__headline,
.hero__news {
  grid-area: stack;
}

.hero__media,
.hero__headline,
.hero__news {
  /* 同じマスに積んだ 3 つ。DOM 順どおりに重ねるため全部を位置指定要素にする
     （背景だけ position を付けると、位置指定していない文字より前に描画されてしまう） */
  position: relative;
}

/* 背景の写真はスライドショー。中身は hero-slideshow.css */

.hero__media::after {
  /* カンプ Rectangle 9: #A7A8BA の MULTIPLY 幕 */
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background-color: var(--color-hero-veil-solid);
  content: "";
}

.hero__headline {
  /* カンプのマーク中心は y=545。画面中央 540 より 5px 下なので、その分だけ下げる
     （オープニングのロゴと 1px もずらさないための実測値） */
  align-self: center;
  padding-block-start: 10px;
}

.hero__title {
  /* 1fr auto 1fr の中央列にマークを置く。行全体ではなく「マーク」が画面中央にくる
     （カンプ: マーク 886〜1034 ＝ 中心 960。前後の余白は 16px と 18px で非対称） */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--font-family-display);
  /* 1 行は文字 4 字 ＋ シンボル ＋ 文字 4 字 ＝ ちょうど 10em（下の em 指定より）。
     カンプの 100px のままだとタブレット縦で画面に入らず「つなぐ。」が折り返すので、
     入らない幅では 9.2vw まで落とす（FB 2026-09-14 p12） */
  font-size: min(calc(var(--font-size-100) * var(--font-scale)), 9.2vw);
  font-weight: var(--font-weight-bold);
  line-height: 0.7; /* カンプ実測: 100px に対し行送り 57px */
  color: var(--color-text-inverse);
}

.hero__word:first-of-type {
  justify-self: end;
  margin-inline-end: 0.16em; /* くらしを 右端 870 → シンボル 886（100px のとき 16px） */
}

.hero__word:last-of-type {
  justify-self: start;
  margin-inline-start: 0.18em; /* シンボル 1034 → つなぐ。1052（100px のとき 18px） */
  letter-spacing: 0.06em; /* カンプ: つなぐ。だけ ls 6px */
}

.hero__mark {
  /* SVG は円ぴったり（148φ）。影は CSS が持つ（押下で内側の影に入れ替わるため）。
     見出しと同じ割合で縮むように em で持つ（カンプ: 文字 100px に対し 148φ）*/
  --mark-size: 1.48em;
  position: relative;
  display: block;
  flex: none;
  width: var(--mark-size);
  height: var(--mark-size);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-mark);
}

.hero__mark::after {
  /* 押下のあいだだけ出る内側の影 */
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-mark-inset-off);
  content: "";
}

.hero__mark-glyph {
  display: block;
  width: 100%;
  height: 100%;
}

/* スライドが切り替わるたびに 1 回だけ押し込む（カンプ ComponentSet 14:43 実測）。
   0.5s で 148 → 138 に沈み、0.3s で 148 に戻る。
   沈むと同時に外側の影が消え、内側の影に入れ替わる */
.hero__mark.is-pressing {
  animation: mark-press calc(var(--press-in) + var(--press-out))
    var(--easing-linear);
}

.hero__mark.is-pressing::after {
  animation: mark-press-inset calc(var(--press-in) + var(--press-out))
    var(--easing-linear);
}

.hero__news {
  align-self: end;
  padding-inline-start: 58px; /* カンプ x=58 */
  padding-block-end: 51px;    /* 1080 − 1029 */
}

.hero__news-link {
  display: flex;
  align-items: center;
  column-gap: var(--space-16);
  color: inherit;
}

.hero__news-date {
  font-family: var(--font-family-en-alt);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.hero__news-category {
  display: grid;
  place-items: center;
  width: 67px;
  height: 22px;
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  border: 1px solid var(--color-white-50); /* カンプ: 白 70% の枠 */
  border-radius: var(--radius-pill);
}

.hero__news-title {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
}

/* ===== ./sections/hero-slideshow.css ===== */
/* hero-slideshow.css — TOP KV のスライドショー
   カンプ 489:6839（Frame 6 / 1920×1080 の中に 2216φ の円マスク）
   ComponentSet 33:569（17 バリアント）の Figma プロトタイプ実測:

     5.5s / linear  画像を 1920×1080 → 2004×1128（中心固定・scale 1.04375）へ拡大
     0.4s / linear  次の画像が 100φ → 2216φ の円で中央から広がって覆う

   8 枚 × 5.9s ＝ 1 周 47.2s。無限ループ。
   円の半径はビューポート比で持つ（circle() の % は sqrt(w²+h²)/√2 が基準。
   画面の対角を覆いきる下限が 70.71% で、カンプの 71.13% はそれをわずかに超える）。 */

.hero-slideshow {
  position: absolute;
  inset: 0;
  /* 重なり順をこの中だけで閉じる。ヒーローの幕（.hero__media::after）は常にこの上 */
  isolation: isolate;
  overflow: hidden;
}

.hero-slideshow__slide {
  position: absolute; /* 8 枚を同じマスに積む。重なりが構成そのもの */
  inset: 0;
}

.hero-slideshow__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}

/* 表示中の 1 枚。0.4s の切り替えが終わってからゆっくり拡大する */
.hero-slideshow__slide--current .hero-slideshow__image {
  animation: hero-slideshow-zoom var(--hero-slide-hold) var(--easing-linear)
    var(--hero-slide-wipe) forwards;
}

/* 入ってくる 1 枚。中央から円が広がって前の画像を覆う */
.hero-slideshow__slide--entering {
  animation: hero-slideshow-wipe var(--hero-slide-wipe) var(--easing-linear) forwards;
}

/* 覆われながら原寸に戻る 1 枚（カンプの挙動。円の外側でだけ見える） */
.hero-slideshow__slide--leaving .hero-slideshow__image {
  animation: hero-slideshow-unzoom var(--hero-slide-wipe) var(--easing-linear) forwards;
}

@keyframes hero-slideshow-zoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(var(--hero-slide-zoom));
  }
}

@keyframes hero-slideshow-unzoom {
  from {
    transform: scale(var(--hero-slide-zoom));
  }

  to {
    transform: scale(1);
  }
}

@keyframes hero-slideshow-wipe {
  from {
    clip-path: circle(var(--hero-slide-wipe-from) at 50% 50%);
  }

  to {
    clip-path: circle(var(--hero-slide-wipe-to) at 50% 50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 動きを止める。JS 側もタイマーを張らないので 1 枚目のまま */
  .hero-slideshow__slide--current .hero-slideshow__image,
  .hero-slideshow__slide--entering,
  .hero-slideshow__slide--leaving .hero-slideshow__image {
    animation: none;
  }
}

/* ===== ./sections/drone-scene.css ===== */
/* drone-scene.css — KV の次のセクション（水色のフィルターをかけたドローン映像）
   カンプ ComponentSet 159:672（Component 30）／ TOP では 489:6889

   カンプ実測（1920×1080 のアートボード）
     映像      Mask group（1920×1080）。基本状態 opacity 0 → 変化後 1
     水色の円  Ellipse 6 #0092E5 60%。基本状態 1×1 → 変化後 3894φ
     円の中心  ⚠ カンプは画面上端から 1620px（＝ 1.5 画面ぶん下）だが、
               実装は画面の下端の中央に置く（2026-09-06 ユーザー指示）

   動き（2026-09-06 ユーザー指示）
     ・KV は固定（hero.css の position: sticky）
     ・映像は下からせり上がるのではなく、KV の頭から画面いっぱいに貼り付いたまま
       フェードで現れる
     ・水色の円は画面の下端の中央から広がり、画面全体を覆う
     ・スクロール量には連動させない。発火位置まで来たら自動で再生し、
       上へ戻すと同じ transition が逆に走って元に戻る（発火位置は DroneScene.tsx） */

.drone-scene {
  position: relative;
  z-index: var(--z-base); /* 位置指定＋後ろの DOM 順で、固定された KV の上に乗る */

  /* 円の中心。既定は画面の下端の中央（2026-09-06 ユーザー指示）。
     下へスクロールして開くときだけ KV のロゴに移す（2026-09-07 ユーザー指示） */
  --drone-arc-center: 100%;
  /* その中心から上の四隅までを覆いきる大きさ ＝ √(幅² + 4×高さ²)。
     横長・縦長どちらでも足りる値にする */
  --drone-arc-diameter: max(165vw, 275svh);
}

/* 開くとき（下へスクロール）は KV のロゴが中心。
   ロゴの中心は画面の中央より 5px 下（hero.css の .hero__headline と同じ実測値）。
   閉じるとき（上へスクロール）は既定の下端中央に戻る。
   切り替わるのは円が画面を覆いきっているときなので、中心が動いても見えない */
.drone-scene--from-logo {
  --drone-arc-center: calc(50% + 5px);
}

.drone-scene__bg {
  /* 映像だけを敷く層。KV の頭（1 画面ぶん上）から始めることで、
     スクロールの最初から画面に貼り付いた状態になる（せり上がらない） */
  position: absolute;
  inset: -100dvh 0 0;
  /* 見た目だけの層。KV の上に伸びているので、そのままだと KV の新着リンクが
     押せなくなる（FB 2026-09-08 p1）。当たり判定は下の KV に通す */
  pointer-events: none;
}

.drone-scene__stage {
  position: sticky;
  inset-block-start: 0;
  /* 画面を埋める層は dvh（svh だと下に白い隙間が出る。FB 2026-09-14 p2 / p7） */
  height: 100dvh;
  overflow: hidden;
}

.drone-scene__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* カンプ: Mask group の opacity 0 → 1 */
  opacity: 0;
  transition: opacity var(--duration-drone) var(--easing-linear);
}

.drone-scene.is-open .drone-scene__video {
  opacity: 1;
}

.drone-scene__veil {
  /* カンプ Ellipse 6: #0092E5 60%。画面下方の中心から広がる */
  position: absolute;
  inset-block-start: var(--drone-arc-center);
  inset-inline-start: 50%;
  width: var(--drone-arc-diameter);
  height: var(--drone-arc-diameter);
  background-color: var(--color-drone-veil);
  border-radius: var(--radius-circle);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--duration-arc) var(--easing-linear);
}

.drone-scene.is-open .drone-scene__veil {
  transform: translate(-50%, -50%) scale(1);
}

.drone-scene__spacer {
  position: relative; /* 背景の層より上に重ねる */
  /* カンプは 1081〜3699 の 2618px（＝ 1080 の 2.42 倍）だが、
     次のコンテンツが出るまでが長いという指摘を受けて詰めた
     （FB 2026-09-08 p3 → 2026-09-09 さらに短く）。
     100svh＝ちょうど 1 画面ぶんスクロールすると次が出る */
  height: 100svh;
  /* カンプ Rectangle 10: 下端 458px を透明 → 白のグラデーションで受ける */
  background-image: linear-gradient(
    to bottom,
    var(--color-veil-white-0) calc(100% - 458px),
    var(--color-veil-white) 100%
  );
}

.drone-scene__content {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  /* 動きを止める。JS 側が最初から開いた状態にする */
  .drone-scene__video,
  .drone-scene__veil {
    transition: none;
  }
}

/* ===== ./sections/top-about.css ===== */
/* home.css — TOP（カンプ PC 489:6837 / SP 245:494）
   PC の縦位置（アートボード 1920×10568 の実測 y）
     ヒーロー         0〜1080     シンボル 471 ／ 見出し 510 ／ 新着 1007
     スクロール連動    1081〜3699
     ABOUT           写真 3639 ／ ラベル 3762 ／ 見出し 3860 ／ 本文 4168 ／ ボタン 4574 ／ 製品 4727〜5080
     COMPANY         帯 5594〜6674 ／ シンボル 5701 ／ ラベル 5896 ／ 見出し 5983 ／ 本文 6123
                     カード 6426〜6800 ／ ボタン 6851〜6922
     NEWS/FAQ パネル  7033〜8258（1980×1225・角丸 5・左右 30px はみ出す）
                     NEWS 7165 ／ 一覧リンク 7196 ／ リスト 7273〜7571
                     FAQ カード 7727〜8110（1200×383・角丸 20・#0092E5）
     RECRUIT         8258〜9338 ／ ラベル 8589 ／ 見出し 8686 ／ 本文 8798 ／ ボタン 8965 */

/* --- ABOUT ------------------------------------------------------------- */

.top-about {
  /* z-index は付けない。COMPANY の水色（.company-veil）が ABOUT の「背景」の上には
     乗り、「中身」の下には潜るようにするため（中身側は .top-about__inner で持ち上げる） */
  position: relative;
  /* カンプ: 背景が切り替わる 3699 → ラベル 3762 ／
     ギャラリーの下端 5296 → COMPANY の帯 5594 */
  padding-block: 63px 298px;
  /* すぐ上（.drone-scene__spacer）の下端が透明 → --color-veil-white の
     グラデーションで終わるので、同じ値をそのまま受けて継ぎ目を出さない */
  background-color: var(--color-veil-white);
}

/* COMPANY の水色が広がったら、上に残る ABOUT US の中身は
   水色と一緒に消す（FB 2026-09-08 p5・2026-09-09 追加指示）。
   セクションの背景（白い幕）は残したいので、消すのは中身だけ */
.top-stage:has(.company-veil.is-open) .top-about__inner {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .top-about__inner {
    transition: none;
  }
}

.top-about__inner {
  /* 水色の幕より上に置く。幕は ABOUT の背景の上まで広がるが、
     本文・製品リスト・ギャラリーはその上に見えていてほしい */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  column-gap: 117px; /* 本文列 180〜814 ／ 写真 931 */
  transition: opacity var(--duration-arc) var(--easing-linear);
}

.top-about__body {
  flex: none;
  width: 634px; /* カンプ: 本文 632 / 製品リスト 633 */
  /* ギャラリーが貼り付いていられる範囲は .top-about__inner の高さで決まる
     （sticky の入れ物が inner なので、その下端で追従が終わる）。
     カンプのギャラリーは 3639〜5296 なので、本文の列を製品リストの下端 5080 から
     さらに 216 伸ばして、inner の下端を 5296 に合わせる */
  padding-block-end: 216px;
}

.top-about__label {
  color: var(--color-primary); /* カンプ 489:6901 #0092E5 */
}

.top-about__title {
  margin-block-start: var(--space-60); /* ラベル下端 3800 → 見出し 3860 */
  line-height: 1.33; /* カンプ実測: 70px に対し行送り 93px */
  color: var(--color-text-body);
}

.top-about__text {
  /* カンプは 1 つのテキストノードに空行を入れている。段落に分けると text-box のトリムで
     上下の行間が消えるので、段落間は「行送り × 2 − キャップハイト」で足し戻す（32.4×2−13） */
  margin-block-start: var(--space-52);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

.top-about__title + .top-about__text {
  margin-block-start: 73px; /* 見出し下端 4095 → 本文 4168 */
}

.top-about__button {
  margin-block-start: 103px; /* 本文の最終行（トリム後）→ ボタン 4574 */
}

.top-about__visual {
  /* ギャラリーは次のセクションに入るまで貼り付く（2026-09-06 ユーザー指示）。
     貼り付く範囲は .top-about__inner ＝ ABOUT の中身の高さ */
  position: sticky;
  inset-block-start: 0;
  flex: 1;
  /* カンプのマスクは 809×1140。画面より高いと下が切れるので画面の高さで止める */
  height: min(1140px, 100svh);
  margin-block-start: -123px; /* 写真 3639 は ラベル 3762 より上から始まる */
}

/* 私達のしごと（配電盤・分電盤・制御盤）の切り替え
   カンプ ComponentSet 87:1227（633×353）

     行      118px ずつ。区切り線は各行の「下」だけ（y 117 / 235 / 353・#474645 1px）
     文字    Zen Maru Gothic 500 35px。枠 105×24、その右 x=128 に矢印 19×15
     画像    x 202〜633 / y 0〜353。何にも触れていないときは出さない

   1 行目はカンプの「配電盤」を「高圧／キュービクル」の 2 行に変えた（2026-09-25 FB）。
   長くなったぶん矢印を右へ送り、画像の左端も同じだけ右へ寄せる（高さは 3 行ぶんの
   まま ＝ 431×353 から約 326×353 の縦長になる）

   ホバー（SMART_ANIMATE 0.2s / LINEAR）
     文字と矢印がまるごと 54px 上へ動き、#474645 から #0092E5 に入れ替わる
     画像はその行のものが下から上へワイプして出る */

.product-switch {
  position: relative;
  margin-block-start: 82px; /* ボタン下端 4645 → 製品リスト 4727 */

  /* 窓の幅。いちばん長い行「キュービクル」6 字（35px で 210。実測も 210）
     ＋ 文字から矢印まで 23 ＋ 矢印 19（カンプの「配電盤」105 → 矢印 x 128〜146 と同じ間隔）。
     3 行とも同じ幅にして、矢印の位置を揃える */
  --product-switch-window: calc(6 * var(--font-size-35) * var(--font-scale) + 42px);
}

.product-switch__item {
  /* カンプの線は各行の下だけ。1 行目の上には線を引かない */
  border-block-end: 1px solid var(--color-border);
}

.product-switch__link {
  display: flex;
  align-items: center;
  /* ホバーの当たりは行いっぱい（区切り線の右端まで）。
     文字だけだと反応する範囲が狭い（FB 2026-09-14 p25） */
  width: 100%;
  height: 117px; /* カンプ: 区切り線の間隔 117 / 118 / 118 */
  padding-inline-start: 1px;
  color: var(--color-text-body);
}

/* 窓と 2 枚重ねは swap.css（<Swap direction="up">）。ここは窓の大きさと色だけ */
.product-switch__swap {
  width: var(--product-switch-window);
  height: 54px; /* カンプ: 文字の枠が y 46 → 100 */

  /* せり上がってくる方。文字も矢印も currentColor なので色が一緒に変わる */
  --swap-in-color: var(--color-primary);
  --swap-duration: var(--duration-fast);
}

/* 2 行の文言（高圧／キュービクル）は窓を 1 行ぶん高くする。送りも窓 1 枚ぶんなので
   入れ替わりの動きはそのまま */
.product-switch__swap:has(br) {
  height: calc(54px + var(--font-size-35) * var(--font-scale) * var(--line-height-tight));
}

.product-switch__swap .swap__item {
  justify-content: space-between; /* カンプ: 文字は左、矢印は右端 */
}

.product-switch__label {
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-35) * var(--font-scale));
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.product-switch__arrow {
  flex: none;
  width: 19px;
  height: 15px;
}

.product-switch__media {
  /* カンプ: 画像は矢印の右端から 56px あけて右端まで（カンプは x=202）、
     上下は行いっぱい（隙間なし） */
  position: absolute;
  inset: 0 0 0 calc(var(--product-switch-window) + 56px);
  /* 見た目だけの層。行いっぱいに広げたリンクの当たりを塞がない */
  pointer-events: none;
}

.product-switch__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 下端に畳んでおき、ホバーで下から上へワイプして出す */
  clip-path: inset(100% 0 0);
  transition: clip-path var(--duration-fast) var(--easing-linear);
}

.product-switch__image.is-active {
  z-index: 1; /* 出てくる方が、畳まれていく前の画像の上にくる */
  clip-path: inset(0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .product-switch__image {
    transition: none;
  }
}

/* ===== ./sections/about-gallery.css ===== */
/* about-gallery.css — ABOUT US の右のギャラリー（縦マーキー）
   カンプ 489:6894（Mask group 809×1140・TOP の y=3639）

     列       369px を 2 本、間隔 71px（＝ 809）
     タイル   369×479、縦の間隔 45px。ピッチ 524px
     流れ     左（489:6898）は上へ／右（489:6897）は下へ
     速さ     10.0s ごとに 524px ＝ 52.4px/s。4 枚 2096px で 1 周 ＝ 40s
              （プロトタイプ実測・easing はどちらも LINEAR）

   タイルを 2 周ぶん並べ、track を自身の高さの 50% 動かすと継ぎ目なくつながる。
   間隔は「列の幅に対する割合」で持たせているので、幅が変わっても比率が崩れない。 */

.about-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8.78%; /* 71 ÷ 809 */
  height: 100%;
  overflow: hidden;

  --gallery-fade: 14%; /* 上下のフェードの高さ */

  /* 上下を白へ溶かす。塗りを重ねるのではなく写真側を抜くので、
     背景（白 80% の幕ごしのドローン映像）にそのままなじむ */
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--gallery-fade),
    #000 calc(100% - var(--gallery-fade)),
    transparent 100%
  );
}

.about-gallery__column {
  overflow: hidden;

  /* 1 枚ぶん（524px）を 10s で送る。周期は枚数 × 10s で、カンプの 4 枚なら 40s。
     WordPress は列ごとに枚数を変えられるので、テンプレートが --gallery-tiles を渡す（既定 4） */
  --gallery-cycle: calc(10s * var(--gallery-tiles, 4));
}

.about-gallery__track {
  /* flow-root にして最後のタイルの下余白を track の高さに含める。
     こうすると track の高さがちょうど 2 周ぶん（524 × 8）になり、
     50% ＝ 1 周 2096px で継ぎ目なくつながる */
  display: flow-root;
  will-change: transform;
  animation: about-gallery-up var(--gallery-cycle) var(--easing-linear) infinite;
}

.about-gallery__column--down .about-gallery__track {
  animation-name: about-gallery-down;
  /* カンプの初期位置（右列は左列より 911px ずれている ＝ 17.4s ぶん）。
     下へ流れる動きは -50% から始まるので、周期から 17.4s を引いたところから再生する
     （4 枚 40s なら -22.6s。枚数が変わってもずれの量は同じ） */
  animation-delay: calc(17.4s - var(--gallery-cycle));
}

.about-gallery__tile {
  display: block;
  width: 100%;
  height: auto;
  /* カンプのタイル 369×479。WordPress では写真を差し替えられる（2026-10-02 修正依頼）ので、
     比の違う写真でも列の長さ（＝流れる速さ）が変わらないよう枠の比を固定して切り抜く */
  aspect-ratio: 369 / 479;
  object-fit: cover;
  /* 45 ÷ 369。% のマージンは列の幅が基準なので、幅が変わっても間隔の比が保たれる */
  margin-block-end: 12.195%;
}

@keyframes about-gallery-up {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

@keyframes about-gallery-down {
  from {
    transform: translateY(-50%);
  }

  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-gallery__track {
    animation: none;
  }
}

/* --- SP の横スライド（カンプ 256:2786 / Component 42・1254×184.6） ---------
   タイル 141×183・角丸 5・送り 159px（隙間 18）。帯はコンテナからはみ出して
   画面の左右いっぱいに流れる。変体 5 つが 159px ずつずれるので、PC のギャラリーと
   同じ 10.0s 刻みとみて 15.9px/s ＝ 8 枚 1272px で 1 周 80s。
   カンプの帯は 2 段（2825.4〜3194.6）。上段は右へ、下段は左へ流す。 */

.about-slide {
  display: none;
  /* 段どうしの間も、タイルの隙間と同じ 18px 空ける（FB 2026-09-14 p1） */
  row-gap: 18px;
}

.about-slide__row {
  overflow: hidden;
}

.about-slide__track {
  display: flex;
  column-gap: 18px;
  width: max-content;
  animation: about-slide-right var(--slide-cycle) var(--easing-linear) infinite;
}

.about-slide__row--left .about-slide__track {
  animation-name: about-slide-left;
}

.about-slide__tile {
  display: block;
  width: 141px;
  height: 183px;
  object-fit: cover;
  border-radius: var(--radius-5);
}

/* 2 周ぶん並べてあるので、隙間 1 つぶん（18 ÷ 2）を足した半分だけ動かすとつながる */
@keyframes about-slide-right {
  from {
    transform: translateX(calc(-50% - 9px));
  }

  to {
    transform: translateX(0);
  }
}

@keyframes about-slide-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 9px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-slide__track {
    animation: none;
  }
}

/* ===== ./sections/top-company.css ===== */
/* home.css — TOP（カンプ PC 489:6837 / SP 245:494）
   PC の縦位置（アートボード 1920×10568 の実測 y）
     ヒーロー         0〜1080     シンボル 471 ／ 見出し 510 ／ 新着 1007
     スクロール連動    1081〜3699
     ABOUT           写真 3639 ／ ラベル 3762 ／ 見出し 3860 ／ 本文 4168 ／ ボタン 4574 ／ 製品 4727〜5080
     COMPANY         帯 5594〜6674 ／ シンボル 5701 ／ ラベル 5896 ／ 見出し 5983 ／ 本文 6123
                     カード 6426〜6800 ／ ボタン 6851〜6922
     NEWS/FAQ パネル  7033〜8258（1980×1225・角丸 5・左右 30px はみ出す）
                     NEWS 7165 ／ 一覧リンク 7196 ／ リスト 7273〜7571
                     FAQ カード 7727〜8110（1200×383・角丸 20・#0092E5）
     RECRUIT         8258〜9338 ／ ラベル 8589 ／ 見出し 8686 ／ 本文 8798 ／ ボタン 8965 */

/* --- COMPANY ----------------------------------------------------------- */

.top-company {
  position: relative;
  /* ABOUT との間隔 298px は .top-about__body の padding-block-end に持たせている
     （ギャラリーを COMPANY の手前まで貼り付かせるため。位置は変わらない） */
  /* 水色の円は画面幅よりかなり広いので、横だけ切る
     （縦は ABOUT US まで届かせたいので切らない） */
  overflow-x: clip;
  /* 素の背景は ABOUT US と同じ（白 80% の幕ごしにドローン映像が透ける） */
  background-color: var(--color-veil-white);
  color: var(--color-text-inverse);
}

/* --- 水色の背景（円状に広がる） -----------------------------------------
   カンプ ComponentSet 87:1548（Component 13 / clipsContent=false）
     基本   Ellipse 5 が 1×1・opacity 0
     変化後 Ellipse 5 が 4664φ #0092E5 ＋ 写真（opacity 20%・上 15% を透明にする
            縦グラデーションでマスク）
     遷移   SMART_ANIMATE 0.5s / LINEAR

   カンプではホバーで代用されているが、実装は COMPANY の上端が画面の上端に
   来たら発火する。上へ戻すと同じ transition が逆に走り、縮みながら消える。
   円の中心（--company-veil-center）と半径（--company-veil-radius）は
   CompanyVeil.tsx が実測して渡す。中心は「未来に進化する」の下の本文、
   半径は ABOUT US の上端までの距離。 */

.company-veil {
  /* 次のセクション（NEWS）がかぶさってくるあいだも写真を止めておきたいので、
     箱をセクションの 1 画面ぶん下まで伸ばす */
  position: absolute;
  inset: 0 0 -100dvh;
  pointer-events: none;
}

.company-veil__clip {
  /* 円だけを閉じ込める。上は ABOUT US まではみ出させ、
     下は COMPANY の下端で切る（NEWS を覆わないように） */
  position: absolute;
  inset: calc(var(--company-veil-radius, 0px) * -1) 0 100dvh;
  display: block;
  overflow: hidden;
}

.company-veil__circle {
  /* 中心は「未来に進化する」の下の本文。そこから広がる
     （箱を半径ぶん上へ伸ばしてあるので、その分を足した位置に置く） */
  position: absolute;
  inset-block-start: calc(
    var(--company-veil-radius, 0px) + var(--company-veil-center, 0px) +
      var(--company-veil-shift, 0px)
  );
  inset-inline-start: 50%;
  display: block;
  width: calc(var(--company-veil-radius, 0px) * 2);
  height: calc(var(--company-veil-radius, 0px) * 2);
  opacity: 0;
  background-color: var(--color-primary);
  border-radius: var(--radius-circle);
  /* 円だけが広がる。写真は大きさを変えずフェードだけ（2026-09-06 ユーザー指示） */
  transform: translate(-50%, -50%) scale(0);
  /* 尺は CompanyVeil.tsx が KV の円との半径の比から出す。
     同じ 0.6s のままだと半径が大きいぶん縁の進む速さが KV より速い
     （2026-09-18 ユーザー指示）。測れないときは素の --duration-arc */
  transition:
    transform var(--company-veil-duration, var(--duration-arc)) var(--easing-linear),
    opacity var(--company-veil-duration, var(--duration-arc)) var(--easing-linear);
}

.company-veil__photo {
  position: absolute;
  inset: 0;
  display: block;
}

.company-veil__photo-inner {
  /* パララックス。最初はセクションと一緒に動き、画面いっぱいになったら固定。
     箱が 1 画面ぶん下まで伸びているので、COMPANY を通り過ぎるまで動かず、
     NEWS がその上にかぶさってくる（2026-09-06 ユーザー指示）。
     JS を使わない position: sticky なので、スクロール中に揺れない。
     カンプ: opacity 20%、上 15% を透明にする縦グラデーションでマスク */
  position: sticky;
  inset-block-start: 0;
  display: block;
  height: 100dvh; /* 画面を埋める層は dvh（FB 2026-09-14 p2 / p7） */
  opacity: 0;
  background-image: url("../img/company-veil.webp");
  background-position: center;
  background-size: cover;
  /* 色は問わない（不透明かどうかだけを見るマスク） */
  mask-image: linear-gradient(to bottom, transparent 0%, #000 15%);
  transition: opacity var(--duration-veil) var(--easing-linear);
}

.company-veil.is-open .company-veil__circle {
  /* 開くとき（下へスクロール）だけ中心を 50px 上げる。閉じるときは元の位置
     （2026-09-18 ユーザー指示）。ドローンの円の --drone-arc-center と同じ考え方で、
     開く瞬間は scale(0)、閉じる瞬間は画面を覆いきっているので、
     どちらも中心が動いたことは見えない */
  --company-veil-shift: -50px;

  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 写真はズームせず、カンプどおり 20% までフェードするだけ */
.company-veil.is-open .company-veil__photo-inner {
  opacity: 0.2;
}

@media (prefers-reduced-motion: reduce) {
  .company-veil__circle,
  .company-veil__photo-inner {
    transition: none;
  }
}

.top-company__inner {
  position: relative;
  /* 上 107px: 帯上端 5594 → シンボル 5701
     下 111px: ボタン下端 6922 → NEWS パネル 7033 */
  padding-block: 107px 111px;
  text-align: center;
  /* 水色が広がる前は中身を出さず、円と同じ尺で一緒に現れる
     （FB 2026-09-08 p5）。円は .company-veil が開いたときに広がる */
  opacity: 0;
  transition: opacity var(--company-veil-duration, var(--duration-arc)) var(--easing-linear);
}

.company-veil.is-open ~ .top-company__inner {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .top-company__inner {
    transition: none;
  }
}

.top-company__mark {
  width: 148px;
  height: 148px;
  margin-inline: auto;
}

.top-company__label {
  margin-block-start: var(--space-47); /* シンボル下端 5849 → 5896 */
  color: var(--color-highlight);
}

.top-company__title {
  margin-block-start: var(--space-50); /* ラベル下端 5934 → 5983 */
  color: var(--color-text-inverse);
}

.top-company__text {
  margin-block-start: var(--space-52); /* 段落間 ＝ 行送り × 2 − キャップハイト */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

.top-company__title + .top-company__text {
  margin-block-start: var(--space-90); /* 見出し下端 6032 → 本文 6123 */
}

.company-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-28); /* 369×4 ＋ 隙間 3 つ ＝ 1560 → 28px */
  margin-block-start: var(--space-66); /* 本文下端 6360 → カード 6426 */
}

.company-cards__link {
  display: block;
  height: 100%; /* 見出しが 2 行になったカードに合わせて、同じ行のカードの高さをそろえる */
  /* カンプ 369×374 の内訳: 上 40 ／ 左 25 ／ 右 24（画像 320 が x=25〜345）／ 下 26。
     高さは固定しない。固定にすると幅が変わったときに画像がカードからはみ出したり、
     下に余白が余ったりする */
  padding: var(--space-40) 24px 26px var(--space-25);
  color: var(--color-text-inverse);
  background-color: var(--color-card-navy-50);
  border-radius: var(--radius-5);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--blur-card));
  text-align: start;
}

.company-cards__head {
  /* 見出しの右端に矢印（カンプ: 文字 x=25 ／ 矢印の窓 x=321・18×14。
     どちらも y=48 が中心） */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.company-cards__title {
  display: block;
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-23) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* --- 矢印（円のボタンと同じく、中身だけ左から右へ入れ替わる） ----------- */

/* 窓と 2 枚重ねは swap.css（<Swap direction="right">）。送りは窓 1 枚ぶん（カンプは 22px） */
.company-cards__arrow {
  flex: none;
  width: 18px; /* カンプ Mask group 18×14。矢印 16×12 が中央＝カンプの 1px 右 */
  height: 14px;
}

/* --- 画像（ホバーでズーム） --------------------------------------------- */

.company-cards__media {
  display: block;
  overflow: hidden; /* カンプの Mask group 320×219 */
  margin-block-start: var(--space-70); /* カード内 40+16 → 129 */
}

.company-cards__image {
  display: block;
  width: 100%;
  height: auto;
  /* カンプ: 491×367 → 552×414（中心そのまま）＝ 1.124 倍 */
  transition: transform var(--duration-hover) var(--easing-linear);
}

.company-cards__link:hover .company-cards__image,
.company-cards__link:focus-visible .company-cards__image {
  transform: scale(1.124);
}

@media (prefers-reduced-motion: reduce) {
  .company-cards__image {
    transition: none;
  }
}

.top-company__button {
  min-width: 201px; /* カンプ Component 16 は 201×71（ABOUT の 239 と違う） */
  margin-block-start: var(--space-50); /* カード下端 6800 → ボタン 6851 */
}

/* ===== ./sections/top-panel.css ===== */
/* home.css — TOP（カンプ PC 489:6837 / SP 245:494）
   PC の縦位置（アートボード 1920×10568 の実測 y）
     ヒーロー         0〜1080     シンボル 471 ／ 見出し 510 ／ 新着 1007
     スクロール連動    1081〜3699
     ABOUT           写真 3639 ／ ラベル 3762 ／ 見出し 3860 ／ 本文 4168 ／ ボタン 4574 ／ 製品 4727〜5080
     COMPANY         帯 5594〜6674 ／ シンボル 5701 ／ ラベル 5896 ／ 見出し 5983 ／ 本文 6123
                     カード 6426〜6800 ／ ボタン 6851〜6922
     NEWS/FAQ パネル  7033〜8258（1980×1225・角丸 5・左右 30px はみ出す）
                     NEWS 7165 ／ 一覧リンク 7196 ／ リスト 7273〜7571
                     FAQ カード 7727〜8110（1200×383・角丸 20・#0092E5）
     RECRUIT         8258〜9338 ／ ラベル 8589 ／ 見出し 8686 ／ 本文 8798 ／ ボタン 8965 */

/* --- NEWS ＋ FAQ のパネル ---------------------------------------------- */

.top-panel {
  /* COMPANY の背景写真は 1 画面ぶん下まで貼り付いたままなので、その上に重ねる
     （＝ NEWS がかぶさってくる）。パネルの上の余白も塗っておかないと、
     そこだけ写真が透けて帯になる */
  position: relative;
  z-index: 1;
  padding-block-start: 111px; /* ボタン下端 6922 → パネル 7033 */
  background-color: var(--color-bg-base);
}

.top-panel__inner {
  /* パネル 7033 → NEWS 7165 ／ 下 8110 → 8258。
     左右はカンプの中身 x=360〜1560（幅 1200）に合わせて 210px */
  padding: 132px 210px 148px;
  background-color: var(--color-bg-base);
  border-radius: var(--radius-5);
  /* カンプではパネルが版面の外へ 30px はみ出す */
  width: min(calc(var(--layout-container) + 60px), 100%);
  margin-inline: auto;
}

.top-news__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-news__title {
  font-size: calc(var(--font-size-50) * var(--font-scale));
  color: var(--color-primary);
}

/* お知らせ一覧リンク（カンプ ComponentSet 232:1309 / 150×32）
     窓   Frame 23 145×18。中に「文字＋矢印」を 2 組み重ねる
     罫   Line 4（y=32 / 150×1px / #000000）
     動き ホバーで 2 組みとも 18px 上へ。上の #474645 が出て、下の #0092E5 が入る
          （SMART_ANIMATE 0.3s / LINEAR） */

.top-news__more {
  display: block;
  width: 150px;
  padding-block-end: 14px; /* 窓の下端 18 → 罫 32 */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
  border-block-end: 1px solid var(--color-text-black); /* カンプ Line 4 は #000000 */
}

/* 窓と 2 枚重ねは swap.css（<Swap direction="up">）。ここは窓の大きさと色だけ */
.top-news__more-window {
  width: 145px; /* カンプ Frame 23 */
  height: 18px; /* 文字の入れ替わる送り＝窓の高さ */

  --swap-in-color: var(--color-primary);
}

.top-news__more-window .swap__item {
  justify-content: space-between; /* カンプ: 文字は左、矢印は右端 */
}

.top-news__more-arrow {
  flex: none;
  width: 13px;
  height: 12px;
}

.top-news .news-list {
  margin-block-start: var(--space-44); /* NEWS 下端 7228 → リスト 7273 */
}

.top-faq {
  position: relative;
  margin-block-start: 156px; /* リスト下端 7571 → カード 7727 */
  overflow: hidden;
  background-color: var(--color-primary);
  border-radius: var(--radius-20);
  box-shadow: var(--shadow-panel);
}

.top-faq__media {
  /* faq-visual.png はカードと同じ 1200×383。書き出し時に付いていた
     四辺 20px の透明な余白は切り落としてある（余白があるとカードの端に
     写真が届かず、青地が帯になって出る） */
  position: absolute; /* カンプでもカードの塗りの上に写真が重ねられている */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* カンプ 489:6961 のグラデーションマスク（左 16.5% で透明 → 右端で不透明）は
     書き出した PNG のアルファに焼き込み済み。CSS で重ねると二重になる */
}

.top-faq__body {
  position: relative;
  padding: 57px 83px 54px; /* カード 7727 → FAQ 7784 ／ 360 → 443 ／ ボタン下端 8056 → 8110 */
  color: var(--color-text-inverse);
}

.top-faq__title {
  font-size: calc(var(--font-size-50) * var(--font-scale));
  color: var(--color-text-inverse);
  /* カンプ 489:6964 だけ leadingTrim = CAP_HEIGHT（枠 138×38） */
  text-box: trim-both cap alphabetic;
}

.top-faq__text {
  margin-block-start: var(--space-36); /* FAQ 下端 7822 → 本文 7859 */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: 2.1; /* カンプ実測: 18px に対し行送り 37.8px */
}

.top-faq__body .button {
  margin-block-start: var(--space-36); /* 本文下端 7948 → ボタン 7985 */
}

/* ===== ./sections/top-recruit.css ===== */
/* home.css — TOP（カンプ PC 489:6837 / SP 245:494）
   PC の縦位置（アートボード 1920×10568 の実測 y）
     ヒーロー         0〜1080     シンボル 471 ／ 見出し 510 ／ 新着 1007
     スクロール連動    1081〜3699
     ABOUT           写真 3639 ／ ラベル 3762 ／ 見出し 3860 ／ 本文 4168 ／ ボタン 4574 ／ 製品 4727〜5080
     COMPANY         帯 5594〜6674 ／ シンボル 5701 ／ ラベル 5896 ／ 見出し 5983 ／ 本文 6123
                     カード 6426〜6800 ／ ボタン 6851〜6922
     NEWS/FAQ パネル  7033〜8258（1980×1225・角丸 5・左右 30px はみ出す）
                     NEWS 7165 ／ 一覧リンク 7196 ／ リスト 7273〜7571
                     FAQ カード 7727〜8110（1200×383・角丸 20・#0092E5）
     RECRUIT         8258〜9338 ／ ラベル 8589 ／ 見出し 8686 ／ 本文 8798 ／ ボタン 8965 */

/* --- RECRUIT ----------------------------------------------------------- */

.top-recruit {
  position: relative;
  color: var(--color-text-inverse);

  --recruit-marquee-cycle: 80s; /* 3840px ÷ 48px/s */
}

.top-recruit__media {
  /* 次のセクション（CONTACT）がかぶさってくるあいだも写真を止めておきたいので、
     箱をセクションの 1 画面ぶん下まで伸ばす */
  position: absolute;
  inset: 0 0 -100dvh;
}

.top-recruit__media-inner {
  /* パララックス。最初はセクションと一緒に動き、画面いっぱいになったら固定。
     JS を使わない position: sticky なので、スクロール中に揺れない */
  position: sticky;
  inset-block-start: 0;
  height: 100dvh; /* 画面を埋める層は dvh（FB 2026-09-14 p2 / p7） */
  overflow: hidden;
}

.top-recruit__veil {
  /* カンプ Rectangle 48: #164375 → #2A7EDB の縦グラデーション（塗り 80%）。
     グラデーションは帯の 7.3%〜92.3% で終わる */
  position: absolute;
  inset: 0;
  opacity: 0.8;
  background-image: linear-gradient(
    to bottom,
    var(--color-recruit-veil-from) 7.3%,
    var(--color-recruit-veil-to) 92.3%
  );
}

/* --- 背景の横マーキー -----------------------------------------------------
   カンプ ComponentSet 127:938（Group 33 / 7680×1080）
     タイル 480×1080 が 8 枚。それを 2 周ぶん並べて 7680
     速さ   10.0s ごとに 480px ＝ 48px/s（プロトタイプ実測・LINEAR）
            1 周 3840px ＝ 80s

   track を自身の幅の 50% 動かすと継ぎ目なくつながる。
   タイルは高さを画面に合わせるので、幅もそれに追従する（480:1080 の比のまま）。 */

.top-recruit__marquee {
  display: flex;
  width: max-content;
  height: 100%;
  animation: top-recruit-marquee var(--recruit-marquee-cycle)
    var(--easing-linear) infinite;
}

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

@keyframes top-recruit-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-recruit__marquee {
    animation: none;
  }
}

.top-recruit__inner {
  position: relative;
  padding-block: 331px 302px; /* 帯上端 8258 → ラベル 8589 ／ ボタン下端 9036 → 9338 */
  text-align: center;
}

.top-recruit__label {
  color: var(--color-highlight); /* カンプ 489:6930 は #FFF200 */
}

.top-recruit__title {
  margin-block-start: var(--space-60); /* ラベル下端 8627 → 8686 */
  color: var(--color-text-inverse);
}

.top-recruit__text {
  margin-block-start: var(--space-60); /* 見出し下端 8735 → 本文 8798 */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

.top-recruit__button {
  margin-block-start: var(--space-90); /* 本文下端 8875 → ボタン 8965 */
}

/* ===== ./sections/top-responsive.css ===== */
/* top-responsive.css — TOP の TAB / SP の差分（カンプ PC 489:6837 / SP 245:494） */

/* --- TAB --------------------------------------------------------------- */

@media (max-width: 1279px) {
  .top-about__inner {
    column-gap: var(--space-40);
  }

  .top-about__body {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .product-switch__media {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 431 / 353;
    margin-block-start: var(--space-24);
  }

  .product-switch__link {
    width: auto;
  }

  .product-switch__swap {
    /* 矢印は行の右端に置く。文字の横（PC と同じ窓の幅）だと、行に重なって出る
       画像に矢印ごと隠れるため（2026-09-25 ユーザー指示） */
    width: 100%;
  }

  .top-about__body {
    /* 間隔は ABOUT の中に持たせる。セクションの外に置くと背景が塗られず、
       後ろのドローン映像（水色）が帯になって出てしまう */
    padding-block-end: var(--space-160);
  }

  .company-cards {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-28);

    .company-cards__media {
        margin-block-start: var(--space-30);
    }
  }

  .top-panel__inner {
    padding-inline: var(--space-40);
  }

  /* --font-scale の縮小が SP の値を下回らないようにする（check-font-floor） */
  .company-cards__title {
    font-size: var(--font-size-20);
  }

  .top-news__title,
  .top-faq__title {
    font-size: var(--font-size-35);
  }

  .top-recruit__inner {
    padding-block: var(--space-160);
  }
}

/* --- SP ---------------------------------------------------------------- */

@media (max-width: 767px) {
  /* SP カンプ 245:494（上端 62px の iOS ステータスバーは実装しない）
     ヒーロー 0〜694 ／ シンボル 296（102×102）／ くらしを 239 ／ つなぐ。422（50px）
     新着 628 ／ ABOUT ラベル 2512（20px）／ 見出し 2570（40px）／ 本文 3176
     COMPANY 帯 3820〜4575 ／ カード 4634 から 126px ピッチ（353×111）
     NEWS 白帯 5294 から */
  .hero__title {
    /* PC は 1fr auto 1fr の横並び。SP は 1 列に積む（カンプ: くらしを 239 ／
       シンボル 296 ／ つなぐ。422） */
    grid-template-columns: auto;
    justify-items: center;
    row-gap: var(--space-20);
    font-size: var(--font-size-50);
  }

  .hero__word:first-of-type,
  .hero__word:last-of-type {
    justify-self: center;
    margin-inline: 0;
  }

  .hero__word:last-of-type {
    /* 「。」の右に空きが出るので、箱を中央に置くと文字は左に寄って見える。
       カンプ 245:966 は x=111（箱 209px ＝ 中心 215.5）で、アートボード中心 196.5 より
       19px 右に置いてこれを打ち消している（FB 2026-09-14 p1）。
       CSS は末尾の字送り 3px も箱に含めるぶん、その半分を足して字面を x=111 に合わせる */
    translate: 20.5px 0;
  }

  .hero__mark {
    --mark-size: 102px;
  }

  .hero__news {
    padding-inline-start: var(--space-20);
    padding-block-end: var(--space-24);
  }

  .hero__news-link {
    display: grid;
    grid-template-columns: 85px 1fr;
    grid-template-areas:
      "date category"
      "title title";
    row-gap: var(--space-10);
    column-gap: 0;
  }

  .hero__news-date {
    grid-area: date;
    font-size: var(--font-size-15);
  }

  .hero__news-category {
    grid-area: category;
    justify-self: start;
    width: 63px;
    height: 21px;
    font-size: var(--font-size-12);
  }

  .hero__news-title {
    grid-area: title;
    font-size: var(--font-size-14);
  }

  .drone-scene__spacer {
    /* SP カンプ（Component 40 / 256:2263）は 映像 694〜1452 ／ 水色 1452〜2212 ／
       ABOUT ラベル 2574（1880px ÷ 758 ≒ 248svh）。2026-10-02 修正依頼で
       「今の半分くらい」にした（248 → 124svh）。⚠ 同じ依頼の「COMPANY（未来に進化する）の
       スクロール量より少し多いくらい」とは数字が合わない（393×852 で 1056px ／ COMPANY 1474px）。
       どちらに寄せるか確認中 */
    height: 124svh;
  }

  .top-about {
    padding-block-start: var(--space-80);
    /* 製品 3 つの下端 3794 → COMPANY 3882 */
    padding-block-end: var(--space-88);
  }

  .top-about__inner {
    /* SP カンプ 245:494 は「ラベル → 見出し → 横スライド → 本文 → ボタン →
       製品 3 つ」の順（FB 2026-09-08 p23）。DOM は PC のままにして、
       並べ替えだけ order で受ける（本文の箱は display: contents で外す） */
    display: flex;
    flex-direction: column;
    /* PC は flex-start（本文列とギャラリーを上で揃える）だが、
       SP は 1 列なので幅いっぱいに伸ばす */
    align-items: stretch;
  }

  .top-about__body {
    display: contents;
    width: auto;
  }

  .top-about__label {
    order: 1;
  }

  .top-about__title {
    order: 2;
  }

  .top-about__visual {
    order: 3;
  }

  .top-about__text {
    order: 4;
  }

  .top-about__button {
    order: 5;
  }

  .product-switch {
    order: 6;
  }

  .top-about__label,
  .top-about__title {
    text-align: center;
  }

  .top-about__title {
    margin-block-start: var(--space-24);
    line-height: 1.4; /* SP カンプ実測: 40px に対し行送り 56px */
  }

  .top-about__title + .top-about__text {
    /* SP は見出しと本文の間に帯が入るので、PC の 73px は効かせない。
       帯の下端 3194.6 → 本文 3238.5 の 44px は帯の 20px と本文の 24px で持つ
       （FB 2026-09-14 p2「マージンを詰めてください」） */
    margin-block-start: var(--space-24);
  }

  .top-about__text {
    margin-block-start: var(--space-24);
    font-size: var(--font-size-16);
    line-height: var(--line-height-body-sp);
  }

  .top-about__button {
    /* SP カンプ 256:2946（Group 30）: 197×53 で中央。幅いっぱいにはしない */
    align-self: center;
    width: 197px;
    height: 53px;
    margin-block-start: var(--space-40);
  }

  .product-switch {
    margin-block-start: var(--space-40);
  }

  .product-switch__list {
    display: flex;
    column-gap: var(--space-28); /* SP カンプ: 21 / 148 / 275（99px 幅） */
  }

  .product-switch__item {
    /* SP カンプ 256:2918〜2920: 99×28。線は文字の下だけ（上には引かない）
       カンプは 3 列とも 99px だが、1 列目の「キュービクル」は 16px でも矢印ごとは
       99px に入らない。等幅をやめて文言なりの幅を土台にし、残りを 3 列で等分する
       （文字から矢印までの空きがどの列も同じになる。2026-09-25 ユーザー指示） */
    flex: 1 1 auto;
    /* 1 列目だけ 2 行（高圧／キュービクル）で背が高い。1 行の列は下に寄せて、
       文字から線までの間をどの列も同じにする */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .product-switch__link {
    /* カンプ: 文字の字面 0〜14、その 14px 下に線。文字は左・矢印は右端 */
    width: auto;
    height: auto;
    /* 窓は字面（14）ではなく行ボックス（24）で取らないと 20px の字が切れる。
       字面の上に (24 − 14) ÷ 2 ＝ 5px 乗るので、下は 14 − 5 ＝ 9px */
    padding-block-end: 9px;
    padding-inline-start: 0;
  }

  .product-switch__swap {
    width: 100%; /* PC の 146px 固定ではなく列いっぱい。矢印は右端（カンプ x=86〜99） */
    /* カンプの字面は 14px（キャップ高）だが、窓をその高さにすると字が切れる。
       行ボックスぶん（24px）取り、足したぶんは下の余白から引く */
    height: 24px;
  }

  .product-switch__arrow {
    /* カンプ 256:2869: 文字の右端に 13px の矢印（線 1.5） */
    width: 13px;
    height: 12px;
  }

  .product-switch__media {
    /* SP カンプ 256:2918〜2920 は文字だけの 3 つ並び。ホバーが無いので
       切り替え用の写真は場所も取らせない（空きすぎの原因） */
    display: none;
  }

  .product-switch__label {
    /* カンプは 20px。1 行目を「高圧／キュービクル」にしたら 20px では 1 行に並ばない
       ので、3 列とも 16px にそろえる（2026-09-25 ユーザー指示） */
    font-size: var(--font-size-16);
  }

  .product-switch__swap:has(br) {
    /* 2 行ぶん。PC の :has(br) の指定が詳細度で勝つので、ここでも上書きする */
    height: calc(24px + var(--font-size-16) * var(--line-height-tight));
  }

  .top-about__visual {
    /* SP は貼り付けない。カンプ 256:2786 の帯は見出しの下・本文の上に入り、
       画面の左右いっぱいに流れる（コンテナからはみ出す） */
    position: static;
    width: 100vw;
    height: auto;
    /* 見出しの字面の下 2772 → 帯 2825.4 ／ 帯の下 3194.6 → 本文 3238.5。
       本文側が 24px 持っているので、下は 44 − 24 = 20px */
    margin-block: 53px 20px;
    margin-inline: calc(50% - 50vw);
  }

  .about-gallery {
    display: none; /* SP は縦 2 列ではなく横流れの帯 */
  }

  .about-slide {
    display: grid; /* 2 段。段間は about-gallery.css の row-gap */

    /* 1 枚ぶん（159px）を 10s で送る（15.9px/s）。周期は枚数 × 10s で、カンプの 8 枚なら 80s。
       WordPress は枚数を変えられるので、テンプレートが --slide-tiles を渡す（既定 8） */
    --slide-cycle: calc(10s * var(--slide-tiles, 8));
  }


  .top-company__inner {
    /* SP カンプ 245:494: 帯の上端 3882 → シンボル 4111 ／
       ボタン下端 5288 → NEWS パネル 5356 */
    padding-block: 229px 68px;
  }

  .top-company__mark {
    width: 83px;
    height: 83px;
  }

  .top-company__label {
    margin-block-start: var(--space-18); /* シンボル下端 4194 → ラベル 4212 */
  }

  .top-company__title {
    margin-block-start: var(--space-32); /* ラベル下端 4237 → 見出し 4269 */
  }

  .top-company__title + .top-company__text {
    margin-block-start: var(--space-37); /* 見出し下端 4297 → 本文 4334 */
  }

  .top-company__text {
    /* 段落の間はカンプでは空行 1 つぶん。字面でトリムしているので、
       空行 27.52 ＋ 行送りのアキ 18.5 ＝ 46px（カンプの本文 4334〜4654 と一致） */
    margin-block-start: var(--space-46);
    font-size: var(--font-size-16);
    line-height: var(--line-height-body-sp);
  }

  .company-cards {
    grid-template-columns: 1fr;
    row-gap: var(--space-15); /* SP カンプ: カードの高さ 111 ／ ピッチ 126 */
    margin-block-start: var(--space-42); /* 本文下端 4654 → カード 4696 */
  }

  .company-cards__link {
    display: flex;
    flex-direction: row-reverse; /* 画像が左・文字が右（SP カンプ） */
    align-items: center;
    justify-content: space-between;
    column-gap: var(--space-20);
    height: 111px;
    padding: var(--space-12);
  }

  .company-cards__head {
    flex: 1;
  }

  .company-cards__title {
    font-size: var(--font-size-20);
  }

  .company-cards__media {
    flex: none;
    width: 131.5px;
    margin-block-start: 0 !important;
  }

  .top-company__button {
    /* SP カンプ 260:3194（Frame 4）: 161×53 で中央。カード下端 5185 → 5235 */
    width: 161px;
    min-width: 0;
    height: 53px;
    margin-block-start: var(--space-50);
    margin-inline: auto;
  }

  .top-panel {
    padding-block-start: var(--space-60);
  }

  .top-panel__inner {
    width: 100%;
    padding: var(--space-40) var(--space-20);
  }

  .top-news__title,
  .top-faq__title {
    font-size: var(--font-size-30); /* SP カンプ 260:3108 の NEWS は 30px */
  }

  .top-news__head {
    /* SP カンプ 260:3168: 「お知らせ一覧」は見出しと同じ行の右上
       （x=256 幅 117・見出しは 20〜143）。FB 2026-09-08 p26 */
    align-items: flex-end;
  }

  .top-news__more {
    width: 117px;
    /* 窓は行ボックスぶん（18px）取るので、字面の上に (18 − 11) ÷ 2 ＝ 3.5px 乗る。
       字面の下 11 → 罫 24 にするため下は 13 − 3.5 ＝ 9.5px */
    padding-block-end: 9.5px;
    margin-block-end: 1px;   /* 見出しの字面の下 5451 に対し罫は 5450 */
    font-size: var(--font-size-15); /* カンプ 260:3164 */
  }

  .top-news__more-window {
    width: 117px;
    height: 18px; /* 15px の行ボックス。字面（11px）にすると上下が切れる */
  }

  .top-news__more-arrow {
    width: 8px; /* カンプ 260:3165 */
  }

  .top-faq {
    margin-block-start: var(--space-60);
  }

  .top-faq__body {
    padding: var(--space-32) var(--space-20);
  }

  .top-faq__text {
    margin-block-start: var(--space-24);
    font-size: var(--font-size-16);
    line-height: var(--line-height-body-sp);
  }

  .top-recruit__inner {
    /* カンプは写真の上端 6288 → ラベル 6468 の 180px（帯の上端 6226 からは 242px）
       だが、空きすぎという指摘を受けて詰めた（FB 2026-09-09） */
    padding-block: 100px 60px;
  }

  .top-recruit__title {
    margin-block-start: var(--space-30); /* ラベル下端 6493 → 見出し 6523 */
  }

  .top-recruit__text {
    margin-block-start: var(--space-46); /* 見出し下端 6607 → 本文 6653 */
    font-size: var(--font-size-16);
    line-height: var(--line-height-body-sp);
  }

  .top-recruit__button {
    /* カンプ 260:3837（Frame 4）: 197×53 で中央。本文下端 6861 → 6899 */
    width: 197px;
    min-width: 0;
    height: 53px;
    margin-block-start: var(--space-38);
    margin-inline: auto;
  }
}

/* ===== ./pages/about.css ===== */
/* about.css — 会社案内（カンプ PC 315:2204 / SP 926:5777）
   PC 実測
     青帯 Rectangle 61  y=791〜2048（1920×1257・#0092E5）
       MESSAGE      x=180  y=1204（Krona One 30px #FFF200）
       見出し        x=180  y=1292（Zen Maru Gothic 700 60px / 行送り 83・白）
       本文          x=181  y=1487（20px / 行送り 36・幅 1017）
       署名          x=181  y=1918（25px。「代表取締役社長」は 18px、氏名は 27px 太字）
       顔写真        x=1339 y=1412  401×526  角丸 10
     カード 4 枚      x=360 / 1010、y=2198 / 2712（550×405・間隔 100 / 109）
   SP 実測（上端 62px のステータスバーは除外済み）
     青帯 y=386〜1904 ／ MESSAGE y=612（18px）／ 見出し y=655（30px / 行送り 43）
     本文 y=752（18px / 行送り 30.6）／ 顔写真 y=1462（243.2×319）／ 署名 y=1809
     カード y=1974 / 2205 / 2439（353×189.5） */

.about-message {
  /* 帯はメインビジュアル（下端 1127）より --band-overlap（カンプ 336px）上の 791 から始まる */
  margin-block-start: calc(var(--band-overlap) * -1);
  /* 帯の上端 791 → MESSAGE 1204 ／ 署名の下端 1938 → 帯の下端 2048。
     重なりが減ったぶんは padding に戻して、写真の下端との関係を変えない */
  padding-block: calc(var(--band-overlap) + 77px) 110px;
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
}

.about-message__inner {
  display: grid;
  grid-template-areas:
    "label   ."
    "title   portrait"
    "text    portrait"
    "sign    portrait";
  grid-template-columns: minmax(0, 1017px) 401px; /* 1560px 未満では本文列が縮む */
  column-gap: 141px; /* 本文の右端 1198 → 顔写真 1339 */
}

.about-message__label {
  grid-area: label;
  color: var(--color-highlight);
}

.about-message__title {
  grid-area: title;
  margin-block-start: var(--space-50); /* MESSAGE の枠の下端 1242 → 見出し 1292 */
  font-size: calc(var(--font-size-60) * var(--font-scale));
  line-height: 1.38; /* カンプ実測: 60px に対し行送り 83px */
  color: var(--color-text-inverse);
}

.about-message__text {
  grid-area: text;
  margin-block-start: var(--space-70); /* 見出しの下端 1417 → 本文 1487 */
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-medium);
  line-height: 1.8; /* カンプ実測: 20px に対し行送り 36px */
}

.about-message__text p + p {
  /* カンプは 1 つのテキストノードに空行。段落間 ＝ 行送り × 2 − キャップハイト */
  margin-block-start: var(--space-58);
}

.about-message__sign {
  grid-area: sign;
  margin-block-start: var(--space-50); /* 本文の下端（トリム後）→ 署名 1918 */
  font-size: var(--font-size-25);
  font-weight: var(--font-weight-regular);
  line-height: 1.8;
}

.about-message__sign-role {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
}

.about-message__sign-name {
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-bold);
}

.about-message__portrait {
  grid-area: portrait;
  align-self: start;
  margin-block-start: 165px; /* 行の上端（見出しの余白を含む 1247）→ 顔写真 1412 */
  overflow: hidden;
  border-radius: var(--radius-10);
}

.about-message__portrait img {
  width: 100%;
  height: auto;
}

.about-links {
  padding-block: 150px 200px; /* 帯の下端 2048 → カード 2198 ／ カードの下端 3117 → フッター 3317 */
}

.about-links__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 550px));
  column-gap: var(--space-100); /* カンプ 360 → 1010 */
  row-gap: 109px;               /* カンプ 2198 → 2712 のうちカードの高さ 405 を除いた値 */
  justify-content: center;
}

@media (max-width: 1279px) {
  .about-message__inner {
    grid-template-columns: 1fr 320px;
    column-gap: var(--space-40);
  }

  .about-links__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-40);
    row-gap: var(--space-60);
  }
}

/* --- タブレット縦 ------------------------------------------------------ */

@media (max-width: 1023px) {
  /* 本文と顔写真を横に並べると本文の列が狭くなりすぎるので 1 カラムに積む。
     文字の大きさはタブレットのまま（FB 2026-09-14 p17） */
  .about-message__inner {
    grid-template-areas:
      "label"
      "title"
      "text"
      "portrait"
      "sign";
    grid-template-columns: minmax(0, 1fr);
  }

  .about-message__portrait {
    width: 320px; /* タブレット横の列幅と同じ。中央に置く */
    margin-block-start: var(--space-60); /* 本文の下端 → 顔写真 */
    margin-inline: auto;
  }

  .about-message__sign {
    margin-block-start: var(--space-24);
    text-align: center;
  }
}

@media (max-width: 767px) {
  .about-message {
    margin-block-start: -204px; /* SP: ビジュアルの下端 588 → 帯 386 */
    padding-block: 226px 60px;  /* 帯 386 → MESSAGE 612 */
  }

  .about-message__title {
    margin-block-start: var(--space-24);
    font-size: var(--font-size-30);
    line-height: 1.43; /* SP カンプ実測: 30px に対し行送り 43px */
  }

  .about-message__text {
    margin-block-start: var(--space-40);
    font-size: var(--font-size-18);
    line-height: 1.7; /* SP カンプ実測: 18px に対し行送り 30.6px */
  }

  .about-message__text p + p {
    margin-block-start: var(--space-48);
  }

  .about-message__portrait {
    width: 243.2px;
    margin-block: var(--space-60) 0;
    margin-inline: auto;
  }

  .about-message__sign {
    margin-block-start: var(--space-24);
    text-align: center;
  }

  .about-links {
    padding-block: var(--space-70) var(--space-80);
  }

  .about-links__list {
    grid-template-columns: 1fr;
    row-gap: var(--space-40);
  }
}

/* ===== ./pages/company.css ===== */
/* company.css — 会社概要 / 会社沿革（カンプ PC 315:2302・315:2457 / SP 931:7012・934:8199）
   共通の見た目は common.css の .common__* にあり、ここには差分だけ書く。

   PC 実測
     青帯 y=791〜1236 ／ 親タブ y=1070（183×57）／ タブ y=1155（363×62・現在地は 109）
     COMPANY PROFILE y=1366 ／ 会社概要 y=1410
     定義リスト x=561（見出し）/ 810（値）  行 1371・1463・1586・1709・1801・1893・1985・2077
     ACCESS y=2290 ／ アクセス y=2334
     拠点 3 件  名前 x=540 y=2290 / 2755 / 3218（28px 700）
               住所 y=2336（20px 500）／ 補足 y=2380（18px / 行送り 30）／ 写真 x=1014（726×363）
     下部の青帯 y=3781〜3963 ／ タブ y=3758
     会社沿革の年表 行 y=1373 から 93px ピッチ ／ 行の 53px 下に罫（#CFCFCF・年の下だけ #0092E5） */

.company__band--foot {
  margin-block-start: 200px;  /* 最後の写真の下端 3581 → 帯 3781 */
  /* 帯の上端 3781 → タブ 3805 ／ 戻るリンクの下端 3921 → 帯の下端 3963 */
  padding-block: var(--space-24) var(--space-41);
}

.company__profile,
.company__history {
  padding-block-start: 130px; /* 帯の下端 1236 → ラベル 1366 */
}

.company__inner--access {
  column-gap: 171px; /* アクセスの本文は x=540 から（会社概要の 561 と違う） */
}

/* 会社概要・会社沿革の本文列が他の下層ページより 150px ほど左から始まっていた
   （.common__inner のタブレット用の間隔 40px を、この 2 ページだけがそのまま
   使っていたため）。部署紹介・製品ページと同じルールに揃える
   （FB 2026-09-14 p9 ／ 縦は 2026-09-15 ユーザー指示） */
@media (max-width: 1279px) {
  .company__inner--profile {
    column-gap: 171px; /* 同じページのアクセスと同じ位置から始める */
  }
}

/* --- 表（会社概要・会社沿革の共通）--------------------------------------
   「項目 ／ 内容」の対なので <table>（th[scope=row] ＋ td）で組む。
   会社沿革の年表と同じ罫で区切る見た目に揃えてある。
   行の下に灰の罫を引き、見出しの列のぶんだけ青を重ねる。 */

.profile-list {
  /* カンプの罫は本文の列より 21px 左（x=540 幅 1200）から始まり、
     文字はそこから 21px 内側に入る（FB 2026-09-08 p7） */
  width: calc(100% + 21px);
  margin-inline-start: -21px;
  table-layout: fixed; /* 見出しの列を 239px で固定する */
  border-collapse: collapse;
}

.profile-list__term,
.profile-list__desc {
  padding-block: 0 40px; /* 行の下端 1386 → 罫 1426 */
  padding-inline-start: 21px; /* 罫 540 → 文字 561 */
  vertical-align: top;
  border-block-end: 1px solid var(--color-border-light);
}

.profile-list__row + .profile-list__row .profile-list__term,
.profile-list__row + .profile-list__row .profile-list__desc {
  padding-block-start: 39px; /* 罫 1426 → 次の行 1466 */
}

.profile-list__row:last-child .profile-list__term,
.profile-list__row:last-child .profile-list__desc {
  padding-block-end: 0;
  border-block-end: 0;
}

.profile-list__term {
  /* カンプ Line 23 の青い罫（239px）と同じ幅にして、罫そのものを th の下線にする */
  width: 239px;
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-align: start; /* th の既定の中央寄せを打ち消す */
  border-block-end-color: var(--color-primary); /* 見出しの列だけ罫が青 */
}

.profile-list__desc {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 1.67; /* カンプ実測: 18px に対し行送り 30px */
}

/* タブレット縦は列が狭いので、SP と同じ「項目の下に内容」の段落ちにする
   （FB 2026-09-17 p5。会社沿革も同じ）。
   表のままでは積めないのでブロックとして流す（中身の対応関係は th[scope=row] が保つ） */
@media (max-width: 1023px) {
  .profile-list,
  .profile-list > tbody,
  .profile-list__row,
  .profile-list__term,
  .profile-list__desc {
    display: block;
  }

  .profile-list {
    width: 100%;
    /* 縦積みでは罫と文字が同じ位置から始まる（SP カンプ 931:7665 も x=21 / 20） */
    margin-inline-start: 0;
  }

  /* 罫で区切るので行間は取らない。SP カンプ 934:8199 は
     年の下 947 → 本文 967 → 罫 1024（本文の下 1004 から）→ 次の年 1044 と
     どこも 20px で揃っている */
  .profile-list__row {
    position: relative;
    padding-block-end: var(--space-20);
    border-block-end: 1px solid var(--color-border-light);
  }

  .profile-list__row + .profile-list__row {
    padding-block-start: var(--space-20);
  }

  .profile-list__row:last-child {
    padding-block-end: 0;
    border-block-end: 0;
  }

  .profile-list__term,
  .profile-list__desc {
    padding: 0;
    border-block-end: 0;
  }

  .profile-list__row + .profile-list__row .profile-list__term,
  .profile-list__row + .profile-list__row .profile-list__desc {
    padding-block-start: 0;
  }

  .profile-list__term,
  .profile-list--history .profile-list__term {
    width: auto; /* 縦積みなので見出しの列幅は持たせない */
    margin-block-end: var(--space-20); /* 項目 → 内容 */
  }

  .profile-list__row::after {
    /* カンプ: 灰の罫のちょうど半分だけ青を重ねる */
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    width: 50%;
    height: 1px;
    background-color: var(--color-primary);
    content: "";
  }

  .profile-list__row:last-child::after {
    content: none;
  }
}

/* --- アクセス ------------------------------------------------------------ */

.access-list {
  display: grid;
  row-gap: var(--space-50); /* 写真の下端 2655 → 区切り線 2705 */
}

/* カンプ Line 16（x=540 幅 1200・#CFCFCF）: 拠点と拠点の間の区切り線
   （FB 2026-09-08 p8）。線の上下はどちらも 50px */
.access-list__item + .access-list__item {
  padding-block-start: var(--space-50);
  border-block-start: 1px solid var(--color-border-light);
}

.access-list__item {
  /* カンプ: 文字 540〜964（424）／ 間 50 ／ 地図 1014〜1740（726）＝ 1200。
     PC では 2 列のまま、狭くなったぶんは両方が同じ割合で縮む。
     タブレット幅（1279 以下）では地図が下へ回り込む（FB 2026-09-08 p9） */
  display: flex;
  flex-wrap: nowrap; /* PC は 2 列のまま（回り込むのはタブレット幅から） */
  column-gap: var(--space-50);
  row-gap: var(--space-30);
  align-items: start;
}

.access-list__body {
  flex: 0 1 424px; /* カンプの文字の列（540〜964） */
  min-width: 0;
}

.access-list__name {
  font-family: var(--font-family-base);
  font-size: calc(var(--font-size-28) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.access-list__address {
  margin-block-start: var(--space-25); /* 名前の下端 2311 → 住所 2336 */
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.access-list__note {
  margin-block-start: var(--space-30); /* 住所の下端 2351 → 補足 2380 */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 1.67;
}

.access-list__media {
  flex: 0 1 726px;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-10);
}

/* Google マップの埋め込み。カンプの写真と同じ 726×363（2:1）の枠に収める */
.access-list__media iframe {
  display: block;
  width: 100%;
  aspect-ratio: 726 / 363;
  height: auto;
  border: 0;
}

/* --- 写真の帯（カンプ Component 52 / 1919×358）--------------------------
   カンプは 465×355（角丸 15）のタイルを 40px 間隔で 8 枚 ＋ もう 1 周ぶん、
   計 8034px 並べてある。track を自身の幅の 50% 動かすと継ぎ目なくつながる。
   速さは RECRUIT の背景（48px/s）に合わせて 1 周 4037px ＝ 84s */

.photo-strip {
  margin-block-start: 101px; /* 年表の下端 2439 → 帯 2540 */
  overflow: hidden;

  --photo-strip-cycle: 84s;
}

.photo-strip__track {
  display: flex;
  column-gap: var(--space-40); /* カンプ: タイルの間隔 505 − 465 */
  width: max-content;
  padding-inline-end: var(--space-40); /* 折り返しの継ぎ目にも同じアキを作る */
  animation: photo-strip-marquee var(--photo-strip-cycle) var(--easing-linear) infinite;
}

.photo-strip__tile {
  display: block;
  flex: none;
  width: 465px;
  height: auto;
  /* カンプ Component 52 のタイル 465×355。WordPress では写真を差し替えられる
     （2026-10-02 修正依頼）ので、比の違う写真でも帯の高さが変わらないよう固定して切り抜く */
  aspect-ratio: 465 / 355;
  object-fit: cover;
  border-radius: 15px; /* カンプ Rectangle 19 の角丸 */
}

@keyframes photo-strip-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-strip__track {
    animation: none;
  }
}

.photo-strip + .company__band--foot {
  margin-block-start: 200px; /* 帯の下端 2898 → 青帯 3098 */
}

@media (max-width: 1279px) {
  /* タブレット幅からは段落ち（文字 → 地図の縦積み） */
  .access-list__item {
    flex-wrap: wrap;
  }

  .access-list__body,
  .access-list__media {
    flex-basis: 100%;
  }
}

@media (max-width: 767px) {
  .company__band--foot {
    margin-block-start: var(--space-80);
    /* SP カンプ: 帯 2959〜3121 ／ タブ 2984 ／ 戻るリンクの下端 3101 */
    padding-block: var(--space-25) var(--space-20);
  }

  .company__profile,
  .company__history {
    padding-block-start: var(--space-70);
  }

  /* 縦積みそのものはタブレット縦（1023 以下）と共通。SP は字だけ落とす */
  .profile-list__term,
  .profile-list__desc {
    font-size: var(--font-size-16);
  }

  .access-list {
    row-gap: var(--space-60);
  }

  .access-list__item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "address"
      "note"
      "media";
  }

  .access-list__name {
    font-size: var(--font-size-20);
  }

  .access-list__address {
    margin-block-start: var(--space-16);
    font-size: var(--font-size-16);
  }

  .access-list__note {
    margin-block-start: var(--space-16);
    font-size: var(--font-size-14);
  }

  .access-list__media {
    margin-block-start: var(--space-24);
  }

  .photo-strip {
    margin-block-start: var(--space-60);
  }

  .photo-strip__track {
    /* SP カンプ 934:8578 ほか: タイルは 228.7×175（送り 248.5＝隙間 19.8）。
       PC の 465px のままだと大きすぎる（FB 2026-09-08 p31） */
    column-gap: var(--space-20);
    padding-inline-end: var(--space-20);
  }

  .photo-strip__tile {
    width: 228.7px;
    height: 175px;
    object-fit: cover;
  }

  .photo-strip + .company__band--foot {
    margin-block-start: var(--space-60);
  }
}

/* ===== ./pages/department.css ===== */
/* department.css — 部署紹介（カンプ PC 322:2726 / SP 934:8604）
   共通の見た目は common.css。ここにはこのページの差分だけ書く。

   PC 実測
     リード      x=360 y=1366  1200×104（22px / 行送り 44・中央寄せ）
     QUALIFIED PERSON y=1670 ／ 有資格者 y=1714
     資格カード  x=539 / 1157、y=1670 / 1766 / 1862  582×76
                 白地・枠 #0092E5・角丸 10 ／ 名称 x=588（18px 700）
                 人数の枠 右端 110×76 #0092E5・角丸 0/10/10/0 ／ 人数 25px 白
     DEPARTMENT y=2138 ／ 部署紹介 y=2182
     部署 8 件   タグ x=540（78×78・#0092E5・角丸 5）／ 名称 20px 700 白
                 見出し x=631（Zen Maru Gothic 700 30px / 行送り 45）
                 本文   x=539 幅 601（18px / 行送り 38）
                 写真   x=1160〜1740 の自由配置（コラージュ） */

.department__lead {
  margin-block-start: 130px; /* 帯の下端 1236 → リード 1366 */
}

.department__qualification {
  padding-block-start: 200px; /* リードの下端 1470 → ラベル 1670 */
}

.department__inner--qualification {
  column-gap: 170px; /* 資格カードは x=539 から（会社概要の 561 と違う） */
}

.qualification-list {
  display: grid;
  /* PC だけ 2 列。タブレット横から下は 1 列（FB 2026-09-17 p3） */
  grid-template-columns: repeat(2, minmax(0, 582px));
  column-gap: var(--space-36); /* カンプ 1121 → 1157 */
  row-gap: var(--space-20);    /* 行のピッチ 96 − カードの高さ 76 */
}

.qualification-list__cell {
  /* カードの幅を基準にして、中の余白・人数の箱・字を縮める */
  container-type: inline-size;
}

.qualification-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  /* カンプ（カード 582）: 左余白 50 ＝ 8.6% */
  padding-inline-start: clamp(16px, 8.6cqi, var(--space-50));
  overflow: hidden;
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-10);
}

.qualification-list__name {
  /* 幅が足りないときは名称側が縮んで <wbr> の位置で折り返す。
     min-width が auto のままだと縮まず、人数の箱が枠から押し出されて切れる */
  min-width: 0;
  padding-inline-end: var(--space-16);
  font-size: var(--font-size-18); /* カンプ 322:3099。タブレット横までカンプのまま */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  /* 折るのは Departments.tsx が「・」のうしろに入れた <wbr> の位置（カンプ SP と
     同じ折り方）。ただし「・」の無い名称は 1 語扱いのままだと箱からはみ出して
     人数が切れるので、どうしても入らないときだけ任意の位置で折る */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.qualification-list__count {
  display: grid;
  flex: none;
  place-items: center;
  align-self: stretch;
  /* カンプ（カード 582）: 箱 110 ＝ 18.9%。字はカンプの 25px のまま。
     箱の幅だけカード幅なりに縮める（下限は「8名」が収まる 70px） */
  width: clamp(70px, 18.9cqi, 110px);
  font-size: var(--font-size-25);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
}

.department__list {
  padding-block-start: 200px; /* 資格カードの下端 1938 → ラベル 2138 */
}

.department__inner {
  column-gap: 170px; /* 部署の本文は x=539 から */
}

.department-list {
  display: grid;
  row-gap: 200px; /* カンプの区画の間隔（内容によって 544〜624px。実装は一定にする） */
  /* 段落ちに切り替える判断をビューポートではなく本文列の幅で行う（FB 2026-09-18 p5）。
     見出し列の幅も画面幅で変わるので、ビューポートの px では境目がずれる */
  container-type: inline-size;
  container-name: department-list;
}

.department-list__item {
  /* カンプ: 文字 539〜1140（601）／ 間 20 ／ コラージュ 1160〜1740（580）。
     文字の列はカンプの 601px のまま置き、狭くなったぶんはコラージュだけが縮む
     （FB 2026-09-18 p5。以前は両方が同じ割合で縮んでいた） */
  display: grid;
  grid-template-columns: minmax(0, 601px) minmax(0, 1fr);
  grid-template-areas:
    "head    collage"
    "body    collage";
  column-gap: var(--space-20);
  align-items: start;
}

/* コラージュがカンプ（580px）の半分を切ったら、待たずに段落ちへ切り替える
   （FB 2026-09-18 p5）。601（文字）＋ 20（間）＋ 290（580 の半分）＝ 911px。
   タブレット幅では常にこちらになる（FB 2026-09-08 p14。会社概要のアクセスと同じ扱い） */
@container department-list (max-width: 910px) {
  .department-list__item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "body"
      "collage";
    row-gap: 0; /* 間隔は要素ごとに持たせる */
  }

  .department-list__body {
    margin-block-start: var(--space-28);
  }

  .department-list__collage {
    /* 幅いっぱいだと写真が大きくなりすぎるので、カンプの 580px を上限にする */
    width: min(100%, 580px);
    margin-block-start: var(--space-40);
  }
}

/* タグ ＋ 見出しの塊（FB 2026-09-17 p8）。カンプどおり本文の列の左端から置き、
   見出しが 2 行になったときはタグがその中央に来る（2026-09-17 ユーザー指示） */
.department-list__head {
  display: flex;
  grid-area: head;
  align-items: center;
  justify-content: left;
  column-gap: 13px; /* カンプ: タグの右端 618 → 見出し 631 */
}

.department-list__tag {
  display: grid;
  flex: none;
  /* 行は中身なりの高さにして中央へ。stretch のままだと 2 行が箱いっぱいに
     引き伸ばされて行間が開く（カンプ 322:2726 の送りは 24px） */
  place-content: center;
  place-items: center;
  width: 78px;
  height: 78px;
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-text-inverse);
  text-align: center;
  background-color: var(--color-primary);
  border-radius: var(--radius-5);
}

.department-list__tag > span {
  /* base.css の text-box: trim-both を外す。トリムしたままだと 1 行の箱が
     キャップ高になり、2 行のときに字が詰まりすぎる（カンプの送りは 24px） */
  text-box: normal;
}

.department-list__title {
  min-width: 0;
  font-size: calc(var(--font-size-30) * var(--font-scale));
  line-height: 1.5; /* カンプ実測: 30px に対し行送り 45px */
  color: var(--color-primary); /* カンプ 322:2726 の見出しは #0092E5 */
}

.department-list__body {
  grid-area: body;
  margin-block-start: var(--space-50); /* タグの下端 2211 → 本文 2239（2 行見出しのとき） */
}

/* カンプ 322:3202 の本文は 1 つのテキストで、段落の切れ目は改行 1 つ
   （空行は無い）。.prose の既定（空行 1 行ぶん）だと開きすぎる
   （FB 2026-09-08 p12） */
.department-list__body > * + * {
  margin-block-start: calc(1lh - 0.73em);
}

.department-list__collage {
  /* カンプの写真は自由配置のコラージュ。重なりが構成そのものなので、
     枠に対する割合で置く（check-absolute の ALLOW に登録済み） */
  position: relative;
  grid-area: collage;
  aspect-ratio: var(--collage-ratio);
}

.department-list__photo {
  position: absolute;
  inset-block-start: var(--photo-top);
  inset-inline-start: var(--photo-left);
  width: var(--photo-width);
  height: auto;
  /* カンプでマスクされている写真は、見えている範囲の比率で切り抜く
     （画像そのままだと大きさのバランスが変わる。FB 2026-09-08 p13） */
  aspect-ratio: var(--photo-ratio);
  object-fit: cover;
  object-position: var(--photo-position);
  border-radius: var(--radius-10);
}

@media (max-width: 1279px) {
  /* タブレット横もカードは 1 列。2 列だと 1 枚 374px しかなく、資格名が
     どれも 2 行に折り返す（FB 2026-09-17 p3。1 列なら 582px で 1 行に収まる） */
  .qualification-list {
    grid-template-columns: minmax(0, 582px);
  }

  .qualification-list__item {
    min-height: 62px; /* SP カンプ 934:8604 のカードの高さ */
  }
}

/* タブレット縦（1023 以下）はタグと見出しを縦に積む。
   横向き（1024〜1279）は PC と同じくタグの右に見出しを重ねる
   （2026-09-09 ユーザー指示） */
@media (max-width: 1023px) {
  /* コラージュと次の部署の間が空きすぎるので半分に詰める（FB 2026-09-17 p6） */
  .department-list {
    row-gap: var(--space-100);
  }

  /* 見出しはタグの右ではなく下。中央寄せもやめて左端から流す */
  .department-list__head {
    display: block;
  }

  /* 見出しがタグの下に来るので、タグは SP と同じ全幅の帯にする
     （FB 2026-09-14 p20） */
  .department-list__tag {
    grid-auto-flow: column;
    place-content: center start;
    place-items: center start;
    width: auto;
    height: 48px;
    padding-inline: 15px;
    text-align: start;
  }

  .department-list__title {
    margin-block-start: var(--space-20);
  }
}

@media (max-width: 767px) {
  .department__lead {
    margin-block-start: var(--space-60);
  }

  .department__qualification,
  .department__list {
    padding-block-start: var(--space-80);
  }

  /* SP カンプ 934:8604: カード 353×62（20px 間隔で 15px アキ）
     名称 16px（2 行のときの行送り 23）／ 人数 25px・幅 72 */
  .qualification-list {
    grid-template-columns: 1fr;
    row-gap: 15px;
  }

  .qualification-list__item {
    min-height: 62px;
    padding-inline-start: var(--space-24); /* カード 20 → 名称 44 */
  }

  .qualification-list__name {
    font-size: var(--font-size-16);
    line-height: 1.44;
  }

  .qualification-list__count {
    width: 72px;
    font-size: var(--font-size-25);
  }

  .department-list {
    row-gap: var(--space-80);
  }

  /* SP カンプ 934:8604 は写真が本文のうしろに来る（PC は右の列） */
  .department-list__item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "body"
      "collage";
  }

  /* SP のタグは全幅の帯（352×48）で、文字は左から 15px。品質管理なども 1 行 */
  .department-list__tag {
    grid-auto-flow: column;
    place-content: center start;
    place-items: center start;
    width: auto;
    height: 48px;
    padding-inline: 15px;
    font-size: var(--font-size-20);
    text-align: start;
  }

  .department-list__title {
    margin-block-start: var(--space-20); /* 帯の下端 1960 → 見出し 1980 */
    font-size: var(--font-size-25);
  }

  .department-list__collage {
    /* カンプのコラージュは版面の外へはみ出す配置。SP は画面幅に収まらないので枠で切る */
    overflow: hidden;
    margin-block-start: var(--space-28); /* 本文の下端 2434 → 写真 2461 */
  }

  .department-list__body {
    margin-block-start: var(--space-28); /* 見出しの下端 2033 → 本文 2062 */
  }
}

/* ===== ./pages/story.css ===== */
/* story.css — イトウテックの歩み（カンプ PC 327:3287 / SP 934:9798）
   導入見出し y=1371（50px）／ 導入本文 x=180 y=1552 幅 1561（22px / 行送り 44）

   節（カンプ Component 54 / 1920×2660）
     ロゴマーク Group 117  x=362 y=2103  72×72（縦罫の上に中心を合わせる）
     縦罫       Line 33    x=398 y=2121  高さ 2660・線 2px
                #ECF8FF → #0092E5（5%）→ #0092E5（95%）→ #ECF8FF の縦グラデーション
     大見出し   x=458 y=2180  40px 700 #0092E5
     中見出し   x=458 y=2243  25px 700 #474645（大見出しの 63px 下）
     本文       x=458 y=2308  18px / 行送り 38・幅 1044（中見出しの 65px 下）
     ホバー     Rectangle 126 / 133: 1920 幅の #ECF8FF を節の高さぶん敷く
                （2124〜2474〜2988 と隙間なく続く）

   マークはスクロールに合わせて画面の中央に貼り付き、縦罫の上を進む。 */

.story {
  /* ホバーの帯は 100vw（＝スクロールバーを含む幅）なので、はみ出したぶんを切る。
     hidden ではなく clip にしないとスクロールの入れ物ができて、
     中のロゴマークの position: sticky が効かなくなる */
  overflow-x: clip;
  padding-block: 200px;
}

.story__inner {
  display: grid;
  /* コンテナ 180 → マーク 362（182）／ マーク 72 ／ マークの右端 434 → 見出し 458（24） */
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: var(--space-24);
  padding-inline-start: 182px;

  /* コンテナの左端から節の本文までの距離（上の 182 ＋ 72 ＋ 24） */
  --story-indent: 278px;
}

.story__list {
  /* 帯が節の見出しより上／本文より下へ出るぶん。
     Story.tsx が「マークがどの帯に入ったか」を測るのにも使う */
  --story-band-lead: 87px;
  --story-band-tail: 63px;
}

.story__item {
  /* 節の左端から画面の左端までの距離。ホバーの帯をここまで戻して画面幅いっぱいにする */
  --story-bleed: calc(
    (100vw - min(var(--layout-container), 100vw - var(--layout-gutter) * 2)) / 2 +
      var(--story-indent)
  );
}

/* --- ロゴマークと縦罫 --------------------------------------------------- */

.story__rail {
  position: relative;
}

.story__rail::before {
  /* カンプ Line 33。上下の端だけ淡い青に抜ける */
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 2px;
  margin-inline-start: -1px;
  background-image: linear-gradient(
    to bottom,
    var(--color-bg-tint-weak) 0%,
    var(--color-primary) 5%,
    var(--color-primary) 95%,
    var(--color-bg-tint-weak) 100%
  );
  content: "";
}

.story__mark {
  position: sticky;
  /* 画面の中央で止める（マークの高さの半分ぶん上げる） */
  inset-block-start: calc(50vh - 36px);
  display: block;
  width: 72px;
  height: auto;
}

/* --- 節 ---------------------------------------------------------------- */

.story__item {
  position: relative;
}

.story__item + .story__item {
  /* カンプ: 本文の下端 2411 → 次の見出し 2561 ＝ 150px
     （帯は見出しの 87px 上から本文の 63px 下まで。FB 2026-09-08 p16） */
  margin-block-start: 150px;
}

.story__item::before {
  /* ホバーの下地。カンプは画面いっぱいの帯なので、コンテナの外まで広げる。
     上下は節の間隔の半分ずつ取って、節から節へ隙間なく続くようにする。
     左右の端はグラデーションで抜き、中央から横へ広がりながら現れる */
  position: absolute;
  z-index: -1;
  /* カンプ Rectangle 126 ほか: 帯は見出しの 87px 上から本文の 63px 下まで。
     隣り合う節の帯はここで隙間なく続く（87 ＋ 63 ＝ 節の間隔 150） */
  inset-block: calc(var(--story-band-lead) * -1) calc(var(--story-band-tail) * -1);
  inset-inline-start: calc(var(--story-bleed) * -1);
  width: 100vw;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    var(--color-bg-tint-weak) 8%,
    var(--color-bg-tint-weak) 92%,
    transparent 100%
  );
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: center;
  transition:
    opacity var(--duration-base) var(--easing-standard),
    transform var(--duration-base) var(--easing-standard);
  content: "";
}

/* カンプ 327:3287 の 1 つ目の帯は 2124 から（見出しの 56px 上） */
.story__item:first-child::before {
  inset-block-start: -56px;
}

/* 帯が点くのは、追従するロゴマークがその節に入ったとき（Story.tsx が付ける）。
   マウスの位置では切り替えない（FB 2026-09-08 p16） */
.story__item.is-active::before {
  opacity: 1;
  transform: scaleX(1);
}

.story__title {
  font-family: var(--font-family-base);
  font-size: calc(var(--font-size-40) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-primary); /* カンプ 331:3712 は #0092E5 */
}

.story__sub {
  margin-block-start: var(--space-40); /* 見出しの下端 2208 → 中見出し 2243 */
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-25) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-body); /* カンプは #474645 */
}

.story__body {
  max-width: 1044px; /* カンプの本文の幅 */
  margin-block-start: var(--space-44); /* 中見出しの下端 2273 → 本文 2308 */
  line-height: 2.5; /* カンプ実測: 18px に対し行送り 45px */
  color: var(--color-text-black);
}

/* カンプの本文は 1 つのテキストで、段落の切れ目は改行 1 つ（空行は無い）。
   .prose の既定（空行 1 行ぶん）だと開きすぎる（FB 2026-09-08 p15） */
.story__body > * + * {
  margin-block-start: calc(1lh - 0.73em);
}

@media (max-width: 1279px) {
  .story__inner {
    padding-inline-start: 0;

    --story-indent: 96px; /* マーク 72 ＋ アキ 24 */
  }
}

@media (max-width: 767px) {
  .story {
    padding-block: var(--space-70) var(--space-80);
  }

  .story__inner {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: var(--space-16);

    --story-indent: 52px; /* マーク 36 ＋ アキ 16 */
  }

  .story__mark {
    inset-block-start: calc(50vh - 18px);
    width: 36px;
  }

  .story__item + .story__item {
    margin-block-start: var(--space-50);
  }

  .story__list {
    --story-band-lead: 25px; /* 節の間隔 50px の半分ずつ */
    --story-band-tail: 25px;
  }

  .story__item:first-child::before {
    inset-block-start: calc(var(--space-50) / -2);
  }

  .story__title {
    font-size: var(--font-size-20);
  }

  .story__sub {
    margin-block-start: var(--space-16);
    font-size: var(--font-size-18);
  }

  .story__body {
    margin-block-start: var(--space-20);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story__item::before {
    transition: none;
  }
}

/* ===== ./pages/works.css ===== */
/* works.css — 私達のしごと（カンプ PC 512:8210 / SP 934:10173）
   青帯 Rectangle 61  y=794〜1746（1920×952・#0092E5）
     WORKS   x=180 y=1215（Krona One 30px #FFF200）
     見出し   x=180 y=1303（Zen Maru Gothic 700 60px / 行送り 83・白）
     本文     x=181 y=1498 幅 1559（20px / 行送り 36・白）
   カード 5 枚  x=360 / 1010、y=1914 / 2428 / 2942（550×404・間隔 100 / 110）
   ⚠ カンプの英字ラベル「CONTROL PSNEL」は綴りの誤りとみて CONTROL PANEL にしている */

.works-intro {
  /* 帯はメインビジュアル（下端 1130）より --band-overlap（カンプ 336px）上の 794 から始まる */
  margin-block-start: calc(var(--band-overlap) * -1);
  /* 帯の上端 794 → WORKS 1215 ／ 本文の下端 1621 → 帯の下端 1746。
     重なりが減ったぶんは padding に戻して、写真の下端との関係を変えない */
  padding-block: calc(var(--band-overlap) + 85px) 125px;
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
}

.works-intro__label {
  color: var(--color-highlight);
}

.works-intro__title {
  margin-block-start: var(--space-50); /* ラベルの枠の下端 1253 → 見出し 1303 */
  font-size: calc(var(--font-size-60) * var(--font-scale));
  line-height: 1.38; /* カンプ実測: 60px に対し行送り 83px */
  color: var(--color-text-inverse);
}

.works-intro__text {
  margin-block-start: var(--space-70); /* 見出しの下端 1428 → 本文 1498 */
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-medium);
  line-height: 1.8; /* カンプ実測: 20px に対し行送り 36px */
}

.works-intro__text p + p {
  margin-block-start: var(--space-58); /* 行送り × 2 − キャップハイト */
}

.works__links {
  padding-block: 168px 200px; /* 帯の下端 1746 → カード 1914 ／ カードの下端 3346 → フッター 3546 */
}

.works__links .about-links__list {
  row-gap: 110px; /* カンプ 1914 → 2428 のうちカードの高さ 404 を除いた値 */
}

@media (max-width: 767px) {
  .works-intro {
    margin-block-start: -100px;
    padding-block: var(--space-120) var(--space-60);
  }

  .works-intro__title {
    margin-block-start: var(--space-24);
    font-size: var(--font-size-30);
    line-height: 1.43;
  }

  .works-intro__text {
    margin-block-start: var(--space-40);
    font-size: var(--font-size-16);
    line-height: var(--line-height-body-sp);
  }

  .works-intro__text p + p {
    margin-block-start: var(--space-28);
  }

  .works__links {
    padding-block: var(--space-70) var(--space-80);
  }

  .works__links .about-links__list {
    row-gap: var(--space-40);
  }
}

/* ===== ./pages/product.css ===== */
/* product.css — 配電盤 / 分電盤 / 制御盤（カンプ PC 333:4945・634:7996・634:8366）
   共通の見た目は common.css。ここには 3 ページ共通のこのテンプレートの差分だけ書く。

   青帯 y=791〜1236 ／ 親タブ y=1070（219×57）／ タブ 292×62（現在地 109）・5 枚・間隔 25
   導入見出し y=1371（Zen Maru Gothic 700 50px / 行送り 75・#0092E5・中央寄せ）
   導入本文   y=1627 幅 1561（22px / 行送り 44・中央寄せ）
   FEATURES  ラベル y=2025 ／ 見出し y=2069（45px）
     POINT   写真 x=541 506×353 ／ 番号 x=1086 y=+21（126×37）／ 見出し x=1086 y=+72（30px）
             本文 x=1087 y=+178 幅 654（18px / 行送り 38）／ ブロックの間隔 509 / 453
   PRODUCT LINE カード x=541 / 1177  563×353（角丸 10・#FBFEFF → #E3F5FF の線形グラデーション）
             図版 324×316 ／ 見出し 28px（カードの 30px 下）／ 本文 18px
   EXAMPLE  バナー x=180 1560×472（角丸 20）／ ラベル x=276 y=+85 ／ 見出し y=+148（55px）
             本文 y=+232 ／ ボタン y=+292（253×71） */


.product__band .page-tabs__list {
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--space-25); /* 292×5 ＋ 25×4 ＝ 1560 */
}

.product-intro {
  padding-block: 135px 0; /* 帯の下端 1236 → 見出し 1371 */
  text-align: center;
}

.product-intro__title {
  font-size: calc(var(--font-size-50) * var(--font-scale));
  line-height: 1.5; /* カンプ実測: 50px に対し行送り 75px */
  color: var(--color-primary);
}

.product-intro__text {
  margin-block-start: var(--space-70); /* 見出しの下端 1556 → 本文 1627 */
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-medium);
  line-height: 2; /* カンプ実測: 22px に対し行送り 44px */
}

.product__inner {
  column-gap: 171px; /* 見出し列 180〜360 ／ 本文 541 */
}

.feature-list {
  display: grid;
  row-gap: 100px; /* ブロックの下端 → 次のブロック（カンプ 509 / 453 のうち写真 353 を除いた値） */
}

.feature-list__item {
  display: grid;
  /* カンプ: 写真 541〜1047（506）／ 文字 1086〜1740（654）。
     幅が狭いときは写真だけが残って文字が細くなっていたので、
     2 列が同じ割合で縮むようにする（FB 2026-09-08 p19）。
     タブレット幅（1279 以下）では下の段へ回り込む */
  grid-template-columns: minmax(0, 506fr) minmax(0, 654fr);
  grid-template-areas:
    "media no"
    "media title"
    "media body";
  column-gap: var(--space-38);
  align-items: start;
}

.feature-list__media {
  grid-area: media;
  overflow: hidden;
  border-radius: var(--radius-10);
}

.feature-list__media img {
  width: 100%;
  height: auto;
}

.feature-list__no {
  display: flex;
  grid-area: no;
  justify-self: start;
  margin-block-start: var(--space-20); /* 写真の上端 2019 → 番号 2040 */
  align-items: baseline;
  column-gap: var(--space-8);
  justify-content: center;
  min-width: 126px; /* カンプ 126×37。文字が入りきる幅までは伸ばす */
  height: 37px;
  padding-inline: var(--space-12);
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-radius: var(--radius-5);
}

.feature-list__no-label {
  font-family: var(--font-family-en);
  font-size: var(--font-size-16);
  line-height: 2.3;
  text-box: normal;
}

.feature-list__no-value {
  font-family: var(--font-family-en);
  font-size: var(--font-size-20);
  line-height: 1.85;
  text-box: normal;
}

.feature-list__title {
  grid-area: title;
  margin-block-start: var(--space-25); /* 番号の下端 2056 → 見出し 2081 */
  font-size: calc(var(--font-size-30) * var(--font-scale));
  line-height: 1.5; /* カンプ実測: 30px に対し行送り 45px */
  color: var(--color-primary);
}

.feature-list__body {
  grid-area: body;
  margin-block-start: var(--space-40); /* 見出しの下端 2147 → 本文 2187 */
  color: var(--color-text-black);
}

.product-line__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-70); /* カンプ 541 → 1177（カード幅 563） */
  row-gap: 100px;              /* 本文の下端 → 次のカード（カンプ 3534 → 4119） */
}

.product-line__media {
  display: grid;
  place-items: center;
  aspect-ratio: 563 / 353;
  background-image: linear-gradient(180deg, var(--color-bg-illust-top), var(--color-bg-illust-bottom));
  border-radius: var(--radius-10);
}

.product-line__media img {
  width: 324px;
  height: auto;
}

.product-line__title {
  margin-block-start: var(--space-30); /* カードの下端 3887 → 見出し 3917 */
  font-family: var(--font-family-base);
  font-size: calc(var(--font-size-28) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.product-line__text {
  margin-block-start: var(--space-30); /* 見出しの下端 3938 → 本文 3968 */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 2.11;
}

.example-banner {
  padding-block-start: 200px;
}

.example-banner__inner {
  /* 写真と文字を同じマスに積む（カンプでも写真の上に文字が乗る）。
     絶対配置にすると幅の狭い画面で親からはみ出すのでグリッドで重ねる */
  display: grid;
  grid-template-areas: "stack";
  overflow: hidden;
  background-color: var(--color-bg-tint-weak);
  border-radius: var(--radius-20);
}

.example-banner__media,
.example-banner__body {
  grid-area: stack;
}

.example-banner__media {
  /* 文字と同じマスに重ねているので、文字のほうが背が高くなる SP でも
     写真がカード全体を覆うようにする（カンプ SP 942:11485 も塗り足し） */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.example-banner__body {
  align-self: start;
  padding: 85px 96px; /* バナー 180 → 文字 276 ／ 上端 4804 → ラベル 4889 */
}

.example-banner__label {
  color: var(--color-primary);
}

.example-banner__title {
  margin-block-start: var(--space-40); /* ラベルの下端 4914 → 見出し 4952 */
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-55) * var(--font-scale));
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.example-banner__text {
  margin-block-start: var(--space-44); /* 見出しの下端 4991 → 本文 5036 */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: 1.8;
}

.example-banner__button {
  min-width: 253px;
  margin-block-start: var(--space-44); /* 本文の下端 5049 → ボタン 5096 */
}

@media (max-width: 1279px) {
  .feature-list__item,
  .product-line__list {
    grid-template-columns: 1fr;
  }

  .feature-list__item {
    grid-template-areas:
      "media"
      "no"
      "title"
      "body";
    /* 行の間隔は各要素の margin で取る（カンプの実測がそうなっている） */
    row-gap: 0;
  }

  .example-banner__body {
    padding: var(--space-40);
  }
}

@media (max-width: 1023px) {
  /* タブレット縦は 5 枚を 1 行に並べたままにするので、間隔も詰める
     （文字と矢印は page-tabs.css 側で小さくしている。FB 2026-09-14 p18） */
  .product__band .page-tabs__list {
    column-gap: var(--space-10);
  }
}

@media (max-width: 767px) {
  .product__band .page-tabs__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-10);
  }

  /* SP カンプ 934:11136: 見出しも本文も左寄せ（25px / 行送り 38・18px / 行送り 36） */
  .product-intro {
    padding-block-start: var(--space-60);
    text-align: start;
  }

  .product-intro__title {
    font-size: var(--font-size-25);
    line-height: 1.52;
  }

  .product-intro__text {
    margin-block-start: var(--space-32);
    font-size: var(--font-size-18);
    line-height: 2;
  }

  /* SP カンプ 934:11136: 写真 → 番号 20 ／ 番号 → 見出し 20 ／ 見出し → 本文 29
     ／ 本文の下端 → 次の写真 70 */
  .feature-list {
    row-gap: var(--space-70);
  }

  .feature-list__title {
    margin-block-start: var(--space-20);
    font-size: var(--font-size-25);
    line-height: 1.4; /* カンプ SP: 25px に対し行送り 35px */
  }

  .feature-list__body {
    margin-block-start: var(--space-28);
  }

  .product-line__list {
    row-gap: var(--space-40);
  }

  .product-line__media img {
    width: 60%;
  }

  .product-line__title {
    font-size: var(--font-size-20);
  }

  /* SP カンプ 942:11509: カード 353×349・中身は中央寄せ
     ラベル 47 ／ 見出し 90 ／ 本文 146 ／ ボタン 218（218×55）／ 下 76 */
  .example-banner__body {
    padding: 52px var(--space-20) 76px;
    text-align: center;
  }

  .example-banner__button {
    width: 218px;
    min-width: 0;
    height: 55px;
  }

  .product-line__text {
    font-size: var(--font-size-14);
  }

  .example-banner {
    padding-block-start: var(--space-80);
  }

  .example-banner__title {
    margin-block-start: var(--space-25); /* ラベルの下端 5693 → 見出し 5718 */
    font-size: var(--font-size-35);
  }

  .example-banner__text {
    margin-block-start: 31px; /* 見出しの下端 5743 → 本文 5774 */
    font-size: var(--font-size-16);
  }

  .example-banner__button {
    margin-block-start: 31px; /* 本文の下端 5815 → ボタン 5846 */
  }
}

/* --- 事例紹介・実績（カンプ 607:7537）----------------------------------
   導入本文 x=180 幅 1561 ／ カード x=180 / 720 / 1260  480×353（間隔 60）
   図版 324×316（カード内 y=+23）／ 題名 28px 中央寄せ（カードの 34px 下）
   行のピッチ 558px */

.case__intro-text {
  margin-block-start: var(--space-70); /* 見出しの下端 1481 → 本文 1551 */
}

.case-list-section {
  padding-block: 200px 200px; /* 本文の下端 1611 → カード 1811 */
}

.case-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-60); /* カンプ 180 → 720（カード幅 480） */
  row-gap: 152px;              /* 行のピッチ 558 − カード 353 − 題名まわり */
}

.case-list__media {
  display: grid;
  place-items: center;
  aspect-ratio: 480 / 353;
  background-image: linear-gradient(180deg, var(--color-bg-illust-top), var(--color-bg-illust-bottom));
  border-radius: var(--radius-10);
}

.case-list__media img {
  width: 324px;
  height: auto;
}

.case-list__title {
  margin-block-start: var(--space-34); /* カードの下端 2164 → 題名 2198 */
  font-family: var(--font-family-base);
  font-size: calc(var(--font-size-28) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-align: center;
}

@media (max-width: 1279px) {
  .case-list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-60);
  }
}

@media (max-width: 767px) {
  /* SP は見出しと本文の間を詰める（カンプ 946:13753 の下端 1016 → 本文 1049。
     FB 2026-09-08 p36） */
  .case__intro-text {
    margin-block-start: var(--space-33);
  }

  .case-list-section {
    padding-block: var(--space-70) var(--space-80);
  }

  .case-list {
    grid-template-columns: 1fr;
    row-gap: var(--space-40);
  }

  .case-list__media img {
    width: 60%;
  }

  .case-list__title {
    margin-block-start: var(--space-16);
    font-size: var(--font-size-20);
  }
}

/* ===== ./pages/flow.css ===== */
/* flow.css — 制作の流れ（カンプ PC 575:4139 / SP 946:13653）

   カンプは 7 コマが同じ位置に重ねてあり、写真だけが 1080px ピッチで縦に並ぶ
   （Group 224 は 494×7108＝写真 7 枚ぶん）。左と右は画面の中央に貼り付けたまま、
   工程が変わるところでフェードで入れ替える。

   PC 実測（1 コマ目）
     写真     x=713 y=1976  494×628（次の写真 3056 ＝ ピッチ 1080）
     左       FLOW    y=2170  35px #0092E5 中央寄せ（列の中心 x=447）
              番号    y=2228  100px #0092E5（FLOW の下端 2197 → 31）
              工程名  y=2379  45px #474645（番号の下端 2304 → 75）
     右       見出し  y=2075  30px #474645 中央寄せ（幅 336・列の中心）
              本文    y=2189  18px / 行送り 38 左寄せ（見出しの下端 2142 → 47）
     左右とも写真と同じ中心（y=2290）に揃う ＝ 画面の中央に貼り付ける

   SP 実測（946:13653）
     左（FLOW 20px / 番号 50px / 工程名 30px）と写真 194×247 を横に並べ、
     その下に見出し 25px 中央寄せ・本文 16px 左寄せ。ピッチ 673px */

.flow-section {
  padding-block: 200px;
}

.flow {
  /* 貼り付く左右の余白（写真の高さの半分）をこの箱の幅から出すため。
     ％ の縦マージンだと Chromium が貼り付きの終端だけグリッドコンテナ幅で
     解決してしまい、最後のコマがずれる */
  container-type: inline-size;
  display: grid;
  /* コンテナ 1560 ＝ 左 533 ／ 写真 494 ／ 右 533（左の中心 447・右の中心 1473）。
     狭い画面では 3 列とも同じ割合で縮める。写真を 494px 固定にすると
     左右が足りなくなり、本文が写真にかぶる（FB 2026-09-08 p20） */
  grid-template-columns: minmax(0, 533fr) minmax(0, 494fr) minmax(0, 533fr);
  align-items: start;
}

/* --- 画面の中央に貼り付く左右 ------------------------------------------ */

.flow__pin {
  position: sticky;
  inset-block-start: 50vh;
  display: grid;
  grid-template-areas: "stack"; /* 7 コマを同じマスに重ねる */
  grid-template-rows: 0;        /* 行も 0。中身は点を中心に上下へはみ出す */
  /* 高さ 0 の「点」を貼り付け、コマはその点を中心に置く。
     箱に高さを持たせると、貼り付けが列の終わりで箱の高さぶん早く止まり、
     最後のコマだけ写真とずれる */
  align-items: center;
  height: 0;
  /* 上下に写真の高さの半分ずつ余白を取る。
     上 … 節に入った直後を 1 枚目の写真の中心に合わせる
     下 … 貼り付きを最後の写真の中心で終わらせる（それ以降は一緒に流れる）
     写真は幅なりに縮むので 314px 固定にすると 1 枚目と 7 枚目だけ左右がずれる
     （FB 2026-09-15）。% の縦マージンはこの列の幅が基準なので、
     カンプの「左の列 533 に対して写真の高さの半分 314」の比で書く */
  margin-block: calc(100cqw * 314 / 1560);
}

.flow__pin > * {
  grid-area: stack;
}

.flow__pin .flow__head,
.flow__pin .flow__body {
  opacity: 0;
  transition: opacity var(--duration-base) var(--easing-standard);
}

.flow__pin .is-active {
  opacity: 1;
}

/* --- 中央の写真（そのままスクロールする） ------------------------------ */

.flow__list {
  display: grid;
  row-gap: 452px; /* ピッチ 1080 − 写真 628 */
}

.flow__media {
  overflow: hidden;
  border-radius: var(--radius-10);
}

.flow__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* PC では左右を貼り付けた側で見せるので、リストの中の文字は読み上げ用に隠す */
.flow__head--inline,
.flow__body--inline {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 左（FLOW / 番号 / 工程名） ---------------------------------------- */

.flow__head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.flow__label {
  color: var(--color-primary); /* カンプ 575:4139 の FLOW は #0092E5 */
}

.flow__no {
  margin-block-start: var(--space-30); /* FLOW の下端 2197 → 番号 2228 */
  font-family: var(--font-family-en);
  font-size: calc(var(--font-size-100) * var(--font-scale));
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  color: var(--color-primary);
  text-box: normal;
}

.flow__stage {
  margin-block-start: var(--space-75); /* 番号の下端 2304 → 工程名 2379 */
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-45) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-body);
}

/* --- 右（見出し・本文） ------------------------------------------------ */

.flow__body {
  width: min(336px, 100%); /* カンプ: 本文 x=1317 幅 336。列より広くはしない */
  margin-inline: auto;
}

.flow__title {
  /* カンプ 594:5741 は Noto Sans JP 500（工程名の Zen Maru Gothic とは別。
     FB 2026-09-08 p20） */
  font-family: var(--font-family-base);
  font-size: calc(var(--font-size-30) * var(--font-scale));
  font-weight: var(--font-weight-medium);
  line-height: 1.5; /* カンプ実測: 30px に対し行送り 45px */
  color: var(--color-text-body); /* カンプは #474645（青ではない） */
  text-align: center;
}

.flow__text {
  margin-block-start: var(--space-47); /* 見出しの下端 2142 → 本文 2189 */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 2.11; /* カンプ実測: 18px に対し行送り 38px */
  color: var(--color-text-black);
}

@media (max-width: 1279px) {
  .flow__list {
    row-gap: var(--space-200);
  }

  .flow__stage {
    /* 番号と工程名の間はカンプの 75px の半分に詰める（FB 2026-09-14 p11） */
    margin-block-start: var(--space-38);
  }

  .flow__body {
    /* 列いっぱいに広げると本文が写真に接してしまうので、
       写真との間と右端に同じだけ余白を残す（FB 2026-09-14 p11） */
    width: min(336px, 80%);
  }

  .flow__text {
    /* 列が狭くなるぶん本文を 2pt 落とす（FB 2026-09-14 p11 の指示） */
    font-size: var(--font-size-16);
  }
}

/* タブレット縦から下は貼り付け（ギミック）をやめて SP と同じ積み方にする
   （FB 2026-09-14 p21） */
@media (max-width: 1023px) {
  .flow-section {
    padding-block: var(--space-70) var(--space-80);
  }

  /* 貼り付けをやめて、工程ごとに縦に積む */
  .flow {
    display: block;
  }

  .flow__pin {
    display: none;
  }

  .flow__list {
    display: grid;
    row-gap: var(--space-90); /* 本文の下端 2067 → 次の写真 2159 */
  }

  .flow__item {
    display: grid;
    /* 左の列は「品質管理」（30px × 4 字 ＝ 120px）が 1 行で入る幅を先に確保する。
       393 より狭い端末では写真のほうを縮める。
       写真は SP カンプの比（194 ÷ 353）で幅なりに大きくする */
    grid-template-columns: minmax(120px, 1fr) minmax(0, 55%);
    grid-template-areas:
      "head  media"
      "body  body";
    column-gap: var(--space-16);
    align-items: center;
  }

  .flow__head--inline,
  .flow__body--inline {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  .flow__head--inline {
    grid-area: head;
  }

  .flow__media {
    grid-area: media;
  }

  .flow__body--inline {
    grid-area: body;
    width: auto;
    margin-block-start: var(--space-28); /* 写真の下端 1733 → 見出し 1762 */
  }

  .flow__label {
    font-size: var(--font-size-20);
  }

  .flow__no {
    margin-block-start: var(--space-12); /* FLOW の下端 1564 → 番号 1579 */
    font-size: var(--font-size-50);
  }

  .flow__stage {
    margin-block-start: var(--space-38); /* 番号の下端 1617 → 工程名 1654 */
    font-size: var(--font-size-30);
    word-break: keep-all; /* base.css の overflow-wrap: anywhere を打ち消す */
  }

  .flow__title {
    font-size: var(--font-size-25);
  }

  .flow__text {
    margin-block-start: var(--space-30); /* 見出しの下端 1815 → 本文 1845 */
    font-size: var(--font-size-16);
    line-height: 1.9;
  }
}

/* タブレット縦だけ、コンテンツの左右をさらに絞る。
   .container（画面幅 − 80px）のままだと文字も写真も画面の端まで届いて窮屈だった。
   支給の参考図（820 幅で内容 494px ＝ 画面の 60%）に合わせる（FB 2026-09-17 p7）。
   SP は画面が狭く、絞ると写真が小さくなりすぎるのでカンプどおり .container のまま */
@media (min-width: 768px) and (max-width: 1023px) {
  .flow {
    /* 下限の 510px は、いちばん長い見出し（「施工とメンテナンス性を見据えた「図面化」」
       20 字 × 25px ＝ 500px）が 1 行に収まる幅。60vw だけだと 850px 未満で折り返す */
    width: min(100% - var(--layout-gutter) * 2, max(510px, 60vw));
    margin-inline: auto;
  }

  /* 見出しはカンプ（SP）の改行を使わず 1 行に並べて中央寄せ
     （2026-09-17 ユーザー指示）。SP は幅が足りないのでカンプどおり 2 行のまま */
  .flow__title br {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow__pin .flow__head,
  .flow__pin .flow__body {
    transition: none;
  }
}

/* ===== ./pages/news.css ===== */
/* news.css — お知らせ一覧・お知らせ詳細（カンプ PC 537:1808・540:2202 / SP 946:14750・946:15365）
   一覧 PC 実測
     絞り込み  x=180 y=667 から 48px ピッチ（印 23×23 ／ 文字 x=215 20px）
     一覧      x=543 幅 1197 y=664 から 92px ピッチ（日付 x=543 ／ 分類 x=673 ／ 題名 x=755 18px）
     罫        x=543 幅 1197（行の 57px 下）
     ページャ  右端 1740 y=1549
     このページにメインビジュアルは無い（見出しの直後に本文） */

.news__body {
  /* 上: 英字見出しの枠の下端 519 → 一覧 664
     下: ページャの下端 1586.1 → CONTACT（Component 51）1787 */
  padding-block: 145px 201px;
}

.news__inner {
  column-gap: 0px; /* 絞り込み 180〜436 ／ 一覧 543 */
}

/* 絞り込みの枠はカンプ Frame 37 では 256px だが、幅は持たせず列（PC 189px ／
   タブレット 160px）に収める。256px のままだと列間 0 の一覧の先頭にはみ出し、
   sticky で上に描かれるボタンが日付のクリックを奪っていた（2026-09-29 指摘。
   1 行目の日付で「すべて」、2 行目で「お知らせ」へ飛んでいた）。
   いちばん長い「お知らせ」でも約 115px なので見た目は変わらない。 */

.category-filter__item + .category-filter__item {
  margin-block-start: var(--space-25); /* ピッチ 48 − 文字の高さ 23 */
}

.category-filter__button {
  display: flex;
  align-items: center;
  column-gap: var(--space-12); /* 印 180〜203 → 文字 215 */
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  color: var(--color-text-body);
}

/* カンプ 537:1808 の Rectangle 108: 23×23・白地・枠 #0092E5 1px・角丸 5。
   中に右向きの矢印（9px・線 1.5px・#0092E5）。選ばれているかに関わらず同じ印 */
.category-filter__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 23px;
  height: 23px;
  color: var(--color-primary);
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-5);
}

/* 選ばれている項目は文字が青くなり、下線が付く（カンプの ALL） */
.category-filter__button.is-current {
  color: var(--color-primary);
}

.category-filter__button.is-current .category-filter__label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* 一覧の行は TOP と同じ .news-list。題名だけこのページの実測に合わせる */
.news__main .news-list__link {
  grid-template-columns: 130px 82px 1fr; /* 日付 543 → 分類 673 → 題名 755 */
}

.news__main .news-list__title {
  font-size: var(--font-size-18);
}

.news__main .pagination {
  margin-block-start: 35px; /* 最終行の下端 1514 → ページャ 1549。行と罫の間隔と同じ */
}

/* タブレット縦は「日付＋分類」の下にタイトルを置く（news-list.css の
   .news-list--stacked）。列が 3 つのままだとタイトルが 1〜2 列目ぶんの幅にしか
   広がらないので、列も 2 つにする（FB 2026-09-14 p22） */
@media (max-width: 1023px) {
  .news__main .news-list__link {
    grid-template-columns: 130px 1fr;
  }
}

@media (max-width: 767px) {
  .news__body {
    /* SP カンプ 946:14750: ページャの下端 1325 → CONTACT 1426 */
    padding-block: var(--space-60) 101px;
  }

  .category-filter {
    display: flex;
    column-gap: var(--space-24);
  }

  .category-filter__item + .category-filter__item {
    margin-block-start: 0;
  }

  .category-filter__button {
    font-size: var(--font-size-16);
  }

  .news__main .news-list__link {
    grid-template-columns: 92px 1fr;
  }

  .news__main .news-list__title {
    font-size: var(--font-size-14);
  }

  .news__main .pagination {
    margin-block-start: 50.6px; /* SP カンプ: 一覧の下端 1246.5 → ページャ 1297.1 */
  }
}

/* ===== ./pages/news-detail.css ===== */
/* news-detail.css — お知らせ（詳細）（カンプ PC 540:2202 / SP 946:15365）
   日付 x=365 y=672（Albert Sans 600 18px）／ 分類バッジ x=481（67×22 相当・角丸 50）
   題名 x=360 y=722（Zen Maru Gothic 700 30px / 行送り 45・#0092E5）
   本文 x=360 幅 1200（18px / 行送り 38）
   図版 x=360 y=1188 569×407 ／ 右の本文 x=989 幅 569
   一覧へ戻る 中央 y=1737（18px・下に罫） */

.news-detail__inner {
  /* カンプの内容は 1200px（コンテナ 1560 の内側 180px）。ノート PC のように
     コンテナが 1200 より狭いところでは内側の余白を作らず、
     事例紹介・実績と同じ幅にする（FB 2026-09-14 p24） */
  width: min(1200px, 100% - var(--layout-gutter) * 2);
  margin-inline: auto;
  padding-block: 145px 200px; /* 英字見出しの枠の下端 519 → 日付 664 */
}

.news-detail__meta {
  display: flex;
  align-items: center;
  column-gap: var(--space-24); /* 日付 365〜459 → バッジ 481 */
  padding-inline-start: var(--space-4);
}

.news-detail__date {
  font-family: var(--font-family-en-alt);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.news-detail__category {
  display: grid;
  place-items: center;
  min-width: 84px;
  height: 28px;
  padding-inline: var(--space-12);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  border: 1px solid var(--color-line-70);
  border-radius: var(--radius-pill);
}

.news-detail__title {
  margin-block-start: var(--space-38); /* バッジの下端 692 → 題名 722 */
  font-size: calc(var(--font-size-30) * var(--font-scale));
  line-height: 1.5; /* カンプ実測: 30px に対し行送り 45px */
  color: var(--color-primary);
}

.news-detail__body {
  margin-block-start: var(--space-50); /* 題名の下端 743 → 本文 788 */
  color: var(--color-text-black);
}

/* --- 本文のリストとテーブル（2026-10-02 修正依頼 1520:9707 の「リスト」「テーブル」）
   お知らせの本文だけに当てる（prose はプライバシーポリシー等と共通なので、そちらは変えない）
     リスト   Noto Sans JP 500 18px / 行送り 30・#474645
              印 14φ #0092E5（字面の上端に揃う）→ 本文 6 ／ 項目どうし 39 ピッチ（字面 13 ＋ 26）
     テーブル 1 列 300 × 4 ＝ 内容幅いっぱい・行 74（字面 13 ＋ 上下 30 ＋ 罫 1）
              罫 1px #0092E5 ／ 文字 Noto Sans JP 400 18px・#474645・左 30
     余白     上に文章があるとき 35（文章の字面の下端 → リスト・テーブルの上端）
              見出しの下は prose.css の 45 のまま
   ⚠ SP のカンプは無い。SP の値は暫定（下の @media） */

.news-detail__body p + :is(ul, ol, table, .wp-block-table) {
  margin-block-start: var(--space-35);
}

.news-detail__body li {
  font-weight: var(--font-weight-medium);
  line-height: calc(30 / 18);
  color: var(--color-text-body);
}

.news-detail__body ul > li {
  padding-inline-start: calc(var(--space-14) + var(--space-6)); /* 印 368 → 本文 388 */
}

.news-detail__body ul > li::before {
  width: var(--space-14);
  height: var(--space-14);
  margin-inline: calc((var(--space-14) + var(--space-6)) * -1) var(--space-6);
  /* 印の下端は字面の下端（ベースライン）より 1px 下（カンプ 印 3285〜3299 ／ 字面 3285〜3298） */
  vertical-align: -1px;
  content: "";
  background-color: var(--color-primary);
  border-radius: var(--radius-circle);
}

.news-detail__body li + li {
  margin-block-start: var(--space-26);
}

/* WordPress の表ブロック（figure.wp-block-table > table）。コアの block-library が
   .wp-block-table td/th に罫と余白を当てるので、要素を 1 つ足して詳細度で上書きする */
.news-detail__body table {
  width: 100%;
  table-layout: fixed; /* 4 列とも 300（内容幅の等分） */
}

.news-detail__body table :is(th, td) {
  padding: var(--space-30);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
  color: var(--color-text-body);
  text-align: start;
  vertical-align: middle;
  border: 1px solid var(--color-primary);
}

.news-detail__body table :is(thead, tfoot) {
  border: 0; /* コアの見出し行・集計行の太罫（3px）を外す。カンプは全部 1px */
}

.news-detail__figure-row {
  display: grid;
  grid-template-columns: 569px 1fr; /* 図版 360〜929 ／ 本文 989〜1558 */
  column-gap: var(--space-60);
  align-items: start;
  margin-block-start: var(--space-44); /* 本文の下端 1143 → 図版 1188 */
}

.news-detail__figure {
  aspect-ratio: 569 / 407;
  background-color: var(--color-bg-placeholder); /* 素材未支給。カンプも塗りだけの枠 */
  border-radius: var(--radius-10);
}

.news-detail__aside {
  color: var(--color-text-black);
}

.news-detail__back {
  margin-block-start: var(--space-80);
  text-align: center;
}

/* カンプ Component 46（150×32）: 窓 145×18 に「文字＋矢印」を 2 組み重ね、
   ホバーで 1 行ぶん上へ動かす（TOP の 232:1309 と同じ作り）。
   窓の下端 1755 → 罫 1769（150×1・#000000） */
.news-detail__back-link {
  display: inline-block;
  width: 150px;
  padding-block-end: var(--space-14);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  border-block-end: 1px solid var(--color-text-black);
}

.news-detail__back-window {
  width: 145px;
  height: 18px;

  --swap-in-color: var(--color-primary);
}

.news-detail__back-window .swap__item {
  justify-content: space-between; /* 文字は左、矢印は窓の右端 */
}

.news-detail__back-arrow {
  flex: none;
  width: 13px;
  height: 12px;
}

/* タブレット縦（1023 以下）は図版と本文を縦に積む。
   図版の 569px を残すと右の本文が数文字ぶんしか残らない（FB 2026-09-18 p3） */
@media (max-width: 1023px) {
  .news-detail__figure-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-24);
  }
}

@media (max-width: 767px) {
  .news-detail__inner {
    padding-block: var(--space-60) var(--space-80);
  }

  .news-detail__title {
    font-size: var(--font-size-20);
  }

  /* 暫定（SP のカンプが無い）。本文と同じ 16px にし、4 列が入るように内側の余白を詰める */
  .news-detail__body table :is(th, td) {
    padding: var(--space-12);
    font-size: var(--font-size-16);
  }
}

/* ===== ./pages/faq.css ===== */
/* faq.css — よくある質問（カンプ PC 607:6762 / SP 946:16830）
   リード x=361 y=664 幅 1200 ／ カード x=361 y=765 から */

.faq__inner {
  /* カンプの内容は 1200px（コンテナ 1560 の内側 180px）。ノート PC のように
     コンテナが 1200 より狭いところでは内側の余白を作らず、
     事例紹介・実績と同じ幅にする（FB 2026-09-14 p24） */
  width: min(1200px, 100% - var(--layout-gutter) * 2);
  margin-inline: auto;
}

.faq__lead {
  padding-block-start: 145px; /* 英字見出しの枠の下端 519 → リード 664 */
}

.faq__accordion {
  margin-block-start: 48px; /* リードの下端 715 → 最初のカード 765 */
}

.faq {
  padding-block-end: 200px;
}

@media (max-width: 767px) {
  .faq__lead {
    padding-block-start: var(--space-60);
  }

  .faq__accordion {
    margin-block-start: var(--space-40);
  }

  .faq {
    padding-block-end: var(--space-80);
  }
}

/* ===== ./pages/contact.css ===== */
/* contact.css — お問い合わせ（カンプ PC 540:2763 / SP 946:16110）
   電話の枠 x=180 y=664 1560×266（#ECF8FF・角丸 20）
     見出し y=+64（Zen Maru Gothic 700 25px）／ 番号 y=+120（Albert Sans 600 60px #0092E5）
     受付時間 y=+205（18px）
   見出し列 x=180 y=1036 ／ フォーム列 x=566 */

.contact__tel-panel {
  padding-block: var(--space-60) var(--space-44);
  margin-block-start: 145px; /* 英字見出しの枠の下端 519 → 枠 664 */
  background-color: var(--color-bg-tint-weak);
  border-radius: var(--radius-20);
  text-align: center;
}

.contact__tel-label {
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-25) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.contact__tel {
  margin-block-start: var(--space-32); /* 見出し 728+18 → 番号 784 */
}

.contact__tel a {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-8);
  font-family: var(--font-family-en-alt);
  font-size: calc(var(--font-size-60) * var(--font-scale));
  font-weight: var(--font-weight-semibold);
  line-height: 0.7; /* カンプ 436×42 ＝ キャップ高 */
  color: var(--color-primary);
}

.contact__tel-icon {
  flex: none;
  width: 34px;
  height: 44px;
}

.contact__hours {
  margin-block-start: var(--space-30);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.contact__inner {
  padding-block: 106px 200px; /* 枠の下端 930 → FORM 1036 */
  column-gap: 116px;          /* 見出し列 180〜450 ／ フォーム 566 */
  grid-template-columns: 270px 1fr;
}

.contact__heading {
  line-height: 1.3; /* カンプ実測: 45px に対し行送り 58.5px（2 行） */
}

.contact__required-note {
  margin-block-start: var(--space-40); /* 見出しの下端 1170 → 注記 1205 */
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 1.56;
}

/* 必須の印は各項目のラベルと同じ赤（カンプ 540:2763 の * は #DC000C） */
.contact__required-mark {
  color: var(--color-accent);
}

@media (max-width: 1279px) {
  .contact__inner {
    grid-template-columns: 220px 1fr;
    column-gap: var(--space-40);
  }
}

@media (max-width: 767px) {
  /* SP カンプ 946:16278: 枠 353×181（角丸 20）
     見出し 20px（枠の上端から 43）／ 番号 35px（見出しの下 24）／
     受付時間 16px（番号の下 22）／ 枠の下まで 41 */
  .contact__tel-panel {
    padding-block: 43px 41px;
    margin-block-start: var(--space-60);
  }

  .contact__tel-label {
    font-size: var(--font-size-20);
  }

  .contact__tel {
    margin-block-start: var(--space-24);
  }

  .contact__tel a {
    /* 60px のままだと 353px の枠に入りきらず 2 行に折れる（FB 2026-09-08 p37） */
    column-gap: var(--space-5);
    font-size: var(--font-size-35);
  }

  .contact__tel-icon {
    width: 19px;
    height: 24px;
  }

  .contact__hours {
    margin-block-start: var(--space-16);
    font-size: var(--font-size-14);
  }

  .contact__inner {
    grid-template-columns: 1fr;
    padding-block: var(--space-60) var(--space-80);
  }

  .contact__required-note {
    margin-block-start: var(--space-16);
    font-size: var(--font-size-14);
  }
}

/* ===== ./pages/privacy.css ===== */
/* privacy.css — プライバシーポリシー（カンプ PC 542:3794 / SP 946:16658）
   英字見出し 120px / 行送り 130（2 行）／ 和文ページ名 y=336
   本文は固定ページのブロックエディタで入力する前提。
   見出し・段落・箇条書きの見た目は prose.css が持つので、ここは版面だけ。
     内容 x=360 幅 1200（コンテナ 180 の内側に 180）
     英字の字面の下 618 → 導入文 763 */

.privacy__inner {
  padding-inline: 180px;     /* コンテナ 180 → 内容 360 */
  padding-block: 145px 200px; /* 英字の字面の下 618 → 導入文 763 */
}

@media (max-width: 1279px) {
  .privacy__inner {
    padding-inline: 0;
  }
}

@media (max-width: 767px) {
  .privacy__inner {
    padding-block: var(--space-40) var(--space-80);
  }
}

/* ===== ./pages/message.css ===== */
/* message.css — 1 カラムの案内ページ（送信完了・404）

   カンプに専用の絵はないので、既にあるかたちだけで組んでいる。
     枠      同意の枠（540:2763 Rectangle 236）と同じ #ECF8FF・角丸 20
     見出し  条見出し（542:3794）と同じ Zen Maru Gothic 700 30px #0092E5
     本文    18px / 行送り 38
     余白    プライバシーポリシーと同じ 145 / 200 */

.message {
  padding-block: 145px 200px;
}

.message__inner {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.message__panel {
  padding: var(--space-80) var(--space-40);
  background-color: var(--color-bg-tint-weak);
  border-radius: var(--radius-20);
}

.message__title {
  font-family: var(--font-family-display);
  font-size: calc(var(--font-size-30) * var(--font-scale));
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color: var(--color-primary);
}

.message__text {
  margin-block-start: var(--space-40);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: 2.11; /* 本文の行送り 38px */
  color: var(--color-text-black);
}

.message__note {
  margin-block-start: var(--space-30);
  font-size: var(--font-size-16);
  line-height: 2;
  color: var(--color-text-muted);
}

/* 案内の下に置く行き先。1 つでも複数でも中央に並べる */
.message__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-30);
  row-gap: var(--space-20);
  margin-block-start: var(--space-80);
}

@media (max-width: 767px) {
  .message {
    padding-block: var(--space-50) var(--space-80);
  }

  .message__panel {
    padding: var(--space-40) var(--space-20);
  }

  .message__title {
    font-size: var(--font-size-20);
  }

  .message__text {
    margin-block-start: var(--space-24);
    font-size: var(--font-size-16);
    line-height: 1.9;
    text-align: left;
  }

  .message__note {
    margin-block-start: var(--space-20);
    font-size: var(--font-size-14);
    text-align: left;
  }

  .message__actions {
    margin-block-start: var(--space-40);
  }

  /* SP のボタンは幅いっぱい（カンプ Component 66 相当） */
  .message__actions .button {
    width: 100%;
    min-width: 0;
  }
}