@charset "UTF-8";
/* ============================================================================
   MHI コーポレートサイト — TOPページ
   Design: Figma「MHI Design Tokens」/ PC-TOP (node 9:2, canvas 1445px)
   ---------------------------------------------------------------------------
   目次
     1. Design Tokens
     2. Reset / Base
     3. Layout（container）
     4. Parts（eyebrow / sec-head / btn / tag / pill）
     5. Header
     6. Hero
     7. Stats
     8. Services
     9. Why MHI
    10. Case Studies
    11. Company
    12. News
    13. CTA
    14. Footer
    15. To Top
    16. Responsive（SP は仮実装／後日調整）
    ---------------------------------------------------------------------------
    下層ページ
    20. Page header（下層共通の見出し帯）／ Breadcrumb
    21. サービス一覧
    30. 下層ページの Responsive
   ========================================================================== */


/* ============================================================
   1. Design Tokens
   Figma Variables をそのまま CSS カスタムプロパティ化
   ============================================================ */
:root {
  /* --- Color: neutral --- */
  --white:        #ffffff;
  --black:        #000000;
  --neutral-100:  #f2f3f4;
  --neutral-300:  #d0d2da;
  --neutral-400:  #bdc1ca;
  --neutral-700:  #5a657b;
  --neutral-800:  #2f3541;
  --neutral-900:  #131925;

  /* --- Color: brand / accent --- */
  --blue-900:     #00408c;
  --blue-100:     #cce3ff;
  --maroon:       #a20238;
  --green-900:    #2a8346;
  --aqua-900:     #00737a;   /* パンくず */
  --lime:         #d6f043;   /* Figma variable「色」= ヘッダーCTA */

  /* --- Color: semantic --- */
  --text-primary: #131925;
  --text-ink:     #17262e;   /* 本文・見出しの実測値 */
  --surface:      #ffffff;
  /* 導入事例セクション背景。Figmaは #d9d9d9 をノード不透明度50%で敷いている。
     不透明色に平坦化すると背面の固定地球儀（.bg-globe）が透けなくなるため、
     半透明のまま持たせる。 */
  --surface-mute: rgba(217, 217, 217, 0.5);

  /* --- Gradient --- */
  /* Gradient/Heading Light（数値・CTA帯）: navy → purple → red */
  --grad-light:      linear-gradient(320deg, #00408c 0%, #470063 50%, #e91c24 100%);
  --grad-light-band: linear-gradient(302deg, #00408c 0%, #470063 50%, #e91c24 100%);
  /* Gradient/Heading MHI Navy-Gold（英字ラベル）: gold → brand-soft → navy */
  --grad-navy-gold:  linear-gradient(75deg, #b98a2e 0%, #12729e 50%, #014568 100%);
  /* 濃色地の見出し用（下層ページの見出し帯）: パステル3色 */
  --grad-heading-dark: linear-gradient(75deg, #c7fdff 0%, #edccff 50%, #ffe4cc 100%);
  /* カード・バッジ面（neutral-100 → blue-100） */
  --grad-surface:    linear-gradient(180deg, #f2f3f4 0%, #cce3ff 100%);

  /* --- Typography --- */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-en: "Inter", var(--font-jp);

  /* Heading/Hero      : 68 / 82 / -1.26 / Bold   */
  /* Heading/Section   : 46 / 55 / -0.85 / Bold   */
  /* Heading/Card      : 22 / 31 / -0.03 / Bold   */
  /* Number/Stat       : 46 / 48 / -0.85 / Inter Bold */
  /* Body/Lead         : 18 / 25 / 0     / Regular */
  /* Body/Base         : 15 / 21 / 0     / Regular */
  /* Body/Small        : 13 / 18 / 0     / Light   */
  /* Label/Eyebrow     : 13 / 13 / 1.32  / Medium  */
  /* Button/Label      : 15 / 21 / 0     / Medium  */
  --fs-hero:    clamp(2rem, 1.075rem + 2.9vw, 4.25rem);      /*  32 →  68 */
  --fs-section: clamp(1.75rem, 1.31rem + 1.38vw, 2.875rem);  /*  28 →  46 */
  --fs-h2:      clamp(1.625rem, 1.32rem + 0.96vw, 2.25rem);  /*  26 →  36 */
  --fs-card:    clamp(1.25rem, 1.17rem + 0.26vw, 1.375rem);  /*  20 →  22 */
  --fs-lead:    clamp(1rem, 0.95rem + 0.16vw, 1.125rem);     /*  16 →  18 */
  --fs-base:    0.9375rem;                                   /*  15 */
  --fs-small:   0.8125rem;                                   /*  13 */
  --fs-stat:    clamp(2.25rem, 1.86rem + 1.22vw, 2.875rem);  /*  36 →  46 */

  /* --- Layout --- */
  --container:  1240px;
  --gutter:     24px;
  --sec-pad:    128px;   /* セクション間の基本リズム */
  --radius-sm:  5px;
  --radius-md:  10px;
  --radius-pill: 60px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  200ms;

  /* ヘッダー全高 = 白帯 + 下端グラデーション帯6px。
     Figma指定は 56+6=62px だが、ロゴのタグラインが読めないため 80+6=86px に拡張。 */
  --header-h: 86px;
}


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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-ink);
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* 日本語の行末に1〜2文字だけ残るのを避ける。
   見出しは行長を均等化、本文は最終行の孤立を回避する。 */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, td, figcaption, blockquote {
  text-wrap: pretty;
  /* 日本語を文節単位で折り返す（Chrome／Edge）。「性／能」「警備／会社）」のような
     語の途中での改行を防ぐ。非対応ブラウザは従来どおりの折り返しになる。
     文節が枠より長い場合だけは途中で折れるよう overflow-wrap で逃がす。
     anywhere は最小幅の計算まで変えてしまい、flex の子が1文字幅まで縮む
    （導入の流れの「03」が「0／3」に割れた）ため break-word にする */
  word-break: auto-phrase;
  overflow-wrap: break-word;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--blue-900);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--blue-900);
  color: var(--white);
  font-weight: 700;
}
.skip-link:focus { left: 0; }

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


/* ============================================================
   3. Layout
   ============================================================ */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ============================================================
   4. Parts
   ============================================================ */

/* --- Label/Eyebrow ---------------------------------------- */
.eyebrow {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.32px;
  margin-bottom: 8px;
}
.eyebrow--light { color: var(--neutral-100); }
.eyebrow--grad {
  background-image: var(--grad-navy-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: max-content;
}
.sec-head--center .eyebrow--grad { margin-inline: auto; }

/* --- Section heading -------------------------------------- */
.sec-head { margin-bottom: 48px; }
.sec-head--center { text-align: center; }

.sec-head__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.53;
  letter-spacing: -0.85px;
  color: var(--blue-900);
}
.sec-head__title--light {
  color: var(--neutral-100);
  font-size: var(--fs-section);
  line-height: 1.196;
}

.sec-head__lead {
  margin-top: 24px;
  font-size: var(--fs-lead);
  line-height: 1.39;
  color: var(--text-ink);
}
.sec-head--center .sec-head__lead { margin-inline: auto; }

/* --- Button ------------------------------------------------ */
/* Figma: 164 × 58 / bg white / border 3px blue-900 / radius 10 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 26px;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 21px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn--outline {
  background: var(--white);
  border: 3px solid var(--blue-900);
  color: var(--neutral-800);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--blue-900);
  color: var(--white);
}

/* --- Tag --------------------------------------------------- */
/* Figma: 128 × 22 / radius 10 / 13px Medium / tracking 1.32 */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  height: 22px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: var(--neutral-700);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.32px;
  white-space: nowrap;
}
.tag--industry { background: var(--maroon); }
.tag--news     { background: var(--blue-900); }
.tag--media    { background: var(--green-900); }
.tag--press    { background: var(--maroon); }

/* --- Pill（ヘッダー内ボタン）------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  line-height: 21px;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.pill--lang {
  height: 28px;
  padding: 0 22px;
  background: var(--blue-900);
  border: 1px solid var(--blue-900);
  color: var(--white);
  font-weight: 500;
}
.pill--lang:hover,
.pill--lang:focus-visible {
  background: var(--white);
  color: var(--blue-900);
}
.pill--contact {
  height: 34px;
  padding: 0 19px;
  background: var(--lime);
  border: 1px solid var(--white);
  color: var(--neutral-900);
  font-weight: 700;
}
.pill--contact:hover,
.pill--contact:focus-visible {
  background: var(--neutral-900);
  color: var(--lime);
}

/* --- Arrow ------------------------------------------------- */
.arrow {
  display: inline-block;
  margin-left: 12px;
  transition: transform var(--dur) var(--ease);
}


/* ============================================================
   5. Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__bar {
  height: 80px;
  background: var(--white);
}

.site-header__edge {
  height: 6px;
  background: var(--grad-surface);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.site-header__inner {
  height: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-header__logo img { width: 241px; height: 48px; object-fit: contain; }

/* --- Global nav -------------------------------------------- */
.gnav { flex: 1 1 auto; }

.gnav__list {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* 中間幅でナビ項目が縮んで2行に折れるのを防ぐ */
.gnav__item { position: relative; flex: none; }
.gnav__item > a { white-space: nowrap; }

/* 項目間の斜めスラッシュ（Figma: -79.97deg の細線） */
.gnav__item + .gnav__item::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 1px;
  height: 17px;
  margin-top: -8.5px;
  background: var(--neutral-400);
  transform: rotate(10deg);
}

.gnav__item > a {
  display: block;
  padding: 4px 0;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 21px;
  color: var(--text-primary);
}
.gnav__item > a:hover,
.gnav__item > a:focus-visible { color: var(--blue-900); }

.gnav__foot { display: none; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}

/* --- Hamburger（SP）---------------------------------------- */
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: var(--neutral-900);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   6. Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 788px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--white);
}

.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma: neutral-800 @ 70% */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--neutral-800);
  opacity: 0.7;
}

.hero__inner { position: relative; }

.hero__title {
  margin-bottom: 24px;
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.206;
  letter-spacing: -1.26px;
  color: var(--white);
  text-shadow: 0 4px 4px rgba(15, 15, 15, 0.28);
}

.hero__lead {
  margin-bottom: 33px;
  font-size: var(--fs-lead);
  line-height: 1.39;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.28);
}


/* ============================================================
   7. Stats
   ============================================================ */
.stats {
  position: relative;
  padding: 32px 0 0;
  overflow: hidden;
}

/* 背景の地球儀ライン（Figma: Layer_1）

   Figmaプロトタイプでは「スクロール時に位置を固定」が設定されており、
   ページに追従せずビューポートに固定された背景レイヤーとして振る舞う。
   根拠: 静的レイアウト上は y=4673〜4801（CTA帯とフッターの間）は完全な
   白紙（インク量0.00）なのに、プロトタイプではその位置にも地球儀が見える。
   導入事例セクションで見えるのも同じ理由。

   z-index:-1 で body の背景の上・全コンテンツの下に敷く。背景を持つ
   セクション（ヒーロー・選ばれる理由・創業・CTA・フッター）では隠れ、
   背景の無いセクションでのみ透ける。これはFigmaの見え方と一致する。

   opacity は指定しない。Figma上のレイヤー不透明度20%は書き出しPNGに
   焼き込み済みで、CSSで再度0.2を掛けると二重適用（実効4%）になる。 */
.bg-globe {
  position: fixed;
  z-index: -1;
  top: 50%;
  right: -164px;            /* 食い込ませて表示幅640px＝PC-TOPの設計値にする */
  margin-top: -496px;       /* 991px の半分だけ引き上げて縦中央に置く */
  pointer-events: none;
}
.bg-globe img { display: block; width: 804px; max-width: none; }

.stats .container { position: relative; }

.stats__list {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 130px;
}

.stat {
  padding: 0 64px;
  text-align: center;
}
.stat + .stat { border-left: 1px dashed var(--neutral-400); }

.stat__num {
  font-family: var(--font-en);
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.85px;
  background-image: var(--grad-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__label {
  margin-top: 16px;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 21px;
  color: var(--text-ink);
  white-space: nowrap;
}


/* ============================================================
   8. Services
   ============================================================ */
.services { padding: var(--sec-pad) 0; }

.services .sec-head { margin-bottom: 64px; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 976px;
  margin-inline: auto;
}

.svc-card {
  border: 1px solid var(--white);
  border-radius: var(--radius-sm);
  background: var(--grad-surface);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 64, 140, 0.16);
}

.svc-card__link {
  display: block;
  height: 100%;
  padding: 17px 25px 24px;
}

.svc-card__thumb {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 253 / 141;
}
.svc-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.svc-card:hover .svc-card__thumb img { transform: scale(1.04); }

.svc-card__title {
  margin-top: 21px;
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.03px;
  color: var(--black);
}

.svc-card__text {
  margin-top: 8px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--text-primary);
}

.svc-card__more {
  display: inline-flex;
  align-items: center;
  margin-top: 22px;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.32px;
  color: var(--blue-900);
}
.svc-card:hover .svc-card__more .arrow { transform: translateX(4px); }


/* ============================================================
   9. Why MHI
   ============================================================ */
.reasons {
  padding: 64px 0;
  background: var(--neutral-800);
  color: var(--white);
}

.reasons .sec-head { margin-bottom: 35px; }

.reason-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 475px));
  justify-content: center;
  gap: 46px 32px;
  max-width: 982px;
  margin-inline: auto;
}

.reason__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.reason__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grad-surface);
  color: var(--neutral-800);
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
}

.reason__title {
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.03px;
  color: var(--neutral-100);
}

.reason__text {
  margin-top: 8px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--white);
}


/* ============================================================
   10. Case Studies
   ============================================================ */
.cases {
  padding: var(--sec-pad) 0;
  background: var(--surface-mute);
}

.cases .sec-head { margin-bottom: 71px; }

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

.case-card {
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.case-card__link { display: block; height: 100%; }

.case-card__thumb {
  aspect-ratio: 397 / 180;
  overflow: hidden;
}
.case-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.case-card:hover .case-card__thumb img { transform: scale(1.04); }

.case-card__body { padding: 32px 25px 42px; }

/* タグを複数行で持つカード（事例一覧・サービス詳細） */
.chips-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 6px;
}
.case-card__body:has(.chips-tags) { padding-bottom: 55px; }
.chips-tags + .case-card__title { margin-top: 32px; }

.case-card__title {
  margin-top: 16px;
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.03px;
  color: var(--text-ink);
}

.case-card__text {
  margin-top: 16px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--text-primary);
}


/* ============================================================
   11. Company
   ============================================================ */
.company {
  padding: 115px 0;
  background: var(--blue-900);
  color: var(--white);
}

.company__inner {
  display: grid;
  grid-template-columns: minmax(0, 818px) 324px;
  gap: 88px;
  align-items: start;
}

.company__text {
  margin: 32px 0 0;
  font-size: var(--fs-lead);
  line-height: 1.39;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.28);
}

.company__body .btn { margin-top: 40px; }

.company__facts { padding-top: 54px; }

.fact { padding-bottom: 16px; }
.fact + .fact {
  margin-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.55);
  padding-top: 16px;
}

.fact__label {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.32px;
}

.fact__value {
  margin: 8px 0 0 47px;
  font-size: var(--fs-base);
  line-height: 21px;
}


/* ============================================================
   12. News
   ============================================================ */
.news { padding: var(--sec-pad) 0; }

.news .sec-head { margin-bottom: 40px; }

.news-list { border-top: 1px dashed var(--neutral-400); }

.news-item { border-bottom: 1px dashed var(--neutral-400); }

.news-item__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 2px;
}

.news-item__date {
  flex: none;
  width: 78px;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 18px;
  color: var(--text-ink);
}

.news-item .tag { flex: none; }

.news-item__title {
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--text-ink);
}
.news-item__link:hover .news-item__title,
.news-item__link:focus-visible .news-item__title {
  color: var(--blue-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================
   13. CTA
   ============================================================ */
.cta { padding: var(--sec-pad) 0; }

.cta__band {
  padding: 81px 24px 37px;
  border-radius: var(--radius-sm);
  background-image: var(--grad-light-band);
  color: var(--white);
  text-align: center;
}

.cta__title {
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.03px;
}

.cta__text {
  margin-top: 16px;
  font-size: var(--fs-lead);
  line-height: 1.39;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.28);
}

.cta__band .btn { margin-top: 32px; }


/* ============================================================
   14. Footer
   ============================================================ */
.site-footer {
  padding: 67px 0 71px;
  background: var(--neutral-800);
  color: var(--white);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, auto);
  justify-content: start;
  gap: 48px 0;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 232px;
  height: 72px;
  border-radius: var(--radius-md);
  background: var(--white);
}
.site-footer__logo img { width: 171px; height: 34px; object-fit: contain; }

.site-footer__address {
  margin-top: 22px;
  max-width: 364px;
  font-size: var(--fs-base);
  line-height: 21px;
}
/* 社名は住所と別ブロックにして、間に余白を入れる */
.site-footer__company { display: block; margin-bottom: 8px; }
.site-footer__address a:hover { text-decoration: underline; }

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 154px);
}

.fnav__head {
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 21px;
  color: var(--white);
}

.fnav__list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.fnav__list a {
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 21px;
  color: var(--neutral-400);
}
.fnav__list a:hover,
.fnav__list a:focus-visible { color: var(--white); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 76px;
  padding-top: 23px;
  border-top: 1px dashed rgba(255, 255, 255, 0.45);
}
.site-footer__meta span { white-space: nowrap; }

/* 語の途中で折り返させたくない単位 */
.nb { white-space: nowrap; }

/* 見出し内の強制改行を行ブロック化し、続きの行に text-wrap: balance を効かせる */
.lb { display: block; }

.site-footer__copy,
.site-footer__meta {
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 18px;
  color: var(--neutral-100);
}


/* ブランド520px＋ナビ616pxが収まらなくなる幅で1カラムへ */
@media (max-width: 1183px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
  .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ============================================================
   15. To Top
   ============================================================ */
.to-top {
  position: fixed;
  right: 34px;
  bottom: 34px;
  z-index: 90;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 56px;
  padding: 10px 0;
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  color: var(--blue-900);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease),
              visibility var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover { background: var(--white); color: var(--neutral-900); }

.to-top__icon { width: 20px; height: 14px; }

.to-top__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.32px;
  line-height: 1;
}


/* ============================================================
   16. Responsive
   ※ SP レイアウトは仮実装。後日の調整前提。
   ============================================================ */

/* --- ~1200px : ヘッダーの詰め ------------------------------ */
@media (max-width: 1200px) {
  .site-header__inner { gap: 20px; }
  .gnav__list { gap: 24px; }
  .gnav__item + .gnav__item::before { left: -12px; }
  .site-header__actions { gap: 12px; }
  .site-header__logo img { width: 211px; height: 42px; }
}

/* --- ~1080px : 3カラム → 2カラム --------------------------- */
@media (max-width: 1080px) {
  :root { --sec-pad: 96px; }

  .company__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .company__facts { padding-top: 0; }

}

/* --- ~900px : グローバルナビをドロワー化 -------------------- */
@media (max-width: 900px) {
  :root { --header-h: 70px; }

  .hamburger { display: block; margin-left: auto; }
  .site-header__actions { display: none; }
  .site-header__bar { height: 64px; }
  .site-header__logo img { width: 191px; height: 38px; }

  .gnav {
    position: fixed;
    inset: var(--header-h) 0 0;
    display: block;
    padding: 24px var(--gutter) 40px;
    background: var(--white);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease),
                visibility var(--dur) var(--ease),
                transform var(--dur) var(--ease);
  }
  .gnav.is-open { opacity: 1; visibility: visible; transform: none; }

  .gnav__list { display: block; }
  .gnav__item + .gnav__item::before { content: none; }
  .gnav__item > a {
    padding: 18px 4px;
    border-bottom: 1px solid var(--neutral-100);
    font-size: 1rem;
  }

  .gnav__foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
  }
  .gnav__foot .pill { flex: 1 1 auto; height: 48px; }

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

/* --- ~820px : カードを2カラム／1カラムへ -------------------- */
@media (max-width: 820px) {
  .hero { min-height: 0; padding: 88px 0 96px; }

  .svc-grid  { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .reason-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 520px; }
  /* 1カラム化すると項目の切れ目が分かりにくいため区切り線を入れる
     （濃色地の区切り線はフッター・会社概要と同じ破線に揃える） */
  .reason + .reason {
    padding-top: 32px;
    border-top: 1px dashed rgba(255, 255, 255, 0.45);
  }

  /* SP: PC同様に右側の装飾として収める。全幅に広がると本文の背面に
     模様が回り込んで読みにくくなるため、縮小して右端に寄せる。
     （Figmaに1445px幅のPCアートボードしか無いためSPは実装側の判断） */
  .bg-globe { right: -108px; }
  .bg-globe img { width: 528px; }
  .deco-globe { right: -24px; }
  .deco-globe img { width: 528px; }
}

/* --- ~640px : シングルカラム -------------------------------- */
@media (max-width: 640px) {
  :root { --gutter: 20px; --sec-pad: 72px; --header-h: 66px; }

  .site-header__bar { height: 60px; }
  .site-header__logo img { width: 171px; height: 34px; }

  .hero { padding: 64px 0 72px; }
  .hero__title {
    font-size: 1.875rem;      /* 30px */
    letter-spacing: -0.5px;
    text-wrap: balance;
  }
  .hero__title br { display: none; }
  .hero__lead br { display: none; }
  /* 本文中のボタンは内容幅（Figmaの164×58相当）で中央寄せ。全幅だと見出しに対して重い */
  .hero .btn,
  .company__body .btn {
    display: flex;
    width: max-content;
    margin-inline: auto;
    min-height: 52px;
    padding: 0 24px;
  }

  .sec-head { margin-bottom: 32px; }
  .services .sec-head,
  .cases .sec-head { margin-bottom: 40px; }

  .stats { padding-top: 24px; }
  .stats__list { display: block; min-height: 0; }
  .stat { padding: 0; }
  .stat + .stat {
    margin-top: 24px;
    padding-top: 24px;
    border-left: 0;
    border-top: 1px dashed var(--neutral-400);
  }
  .stat__label { white-space: normal; }

  .svc-grid  { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  .case-grid { grid-template-columns: minmax(0, 1fr); }

  .reasons { padding: 56px 0; }
  .reason__text br { display: none; }

  .case-card__body { padding: 24px 22px 26px; }

  .company { padding: 72px 0; }
  .company__text br { display: none; }
  .company__body .btn { margin-top: 32px; }
  .fact__value { margin-left: 0; }

  .news-item__link {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 22px 0;
  }
  .news-item__date { width: auto; }
  .news-item__title { flex: 1 0 100%; }

  /* SPは上下とも48pxで統一。PCはFigma通り上下非対称（81/37） */
  .cta__band { padding: 48px 20px; }
  .cta__band .btn { width: 100%; }

  .site-footer { padding: 56px 0 20px; }
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .site-footer__bottom { margin-top: 48px; }

  .to-top { right: 16px; bottom: 16px; }
}


/* ============================================================
   20. Page header（下層共通）／ Breadcrumb
   ============================================================ */
.page-header {
  position: relative;
  height: 144px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--neutral-900);
}
.page-header__media {
  position: absolute;
  inset: 0;
}
.page-header__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Figma: neutral-800 @ 70% */
.page-header__scrim {
  position: absolute;
  inset: 0;
  background: var(--neutral-800);
  opacity: 0.7;
}
/* 募集要項だけ Figma が 50%。絵柄が明るいぶんスクリムを薄くして図版を見せる指定。
   他はすべて上の 70%（Figma通り）でよい */
.page-header--recruit .page-header__scrim { opacity: 0.5; }
/* お知らせの帯は別グラフィック。元データの見切り位置に合わせて縦位置を指定 */
.page-header--news .page-header__media img { object-position: center 11.5%; }

.page-header__title {
  position: relative;
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.03px;
  text-align: center;
  background-image: var(--grad-heading-dark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Breadcrumb -------------------------------------------- */
.breadcrumb { margin-top: 32px; }

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 18px;
  color: var(--aqua-900);
}
.breadcrumb__list a:hover { text-decoration: underline; }

.breadcrumb__home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb__home img { width: 18px; height: 17px; }

.breadcrumb__sep { color: var(--neutral-400); }

.breadcrumb__list [aria-current="page"] { color: var(--text-ink); }

/* --- 下層ページの導入部 ------------------------------------ */
.page-intro { padding: 64px 0 0; }

.page-intro .sec-head { margin-bottom: 0; }

.page-intro__lead {
  margin-top: 40px;
  font-size: var(--fs-lead);
  line-height: 1.39;
  color: var(--text-ink);
  text-align: center;
}


/* ============================================================
   21. サービス一覧
   ============================================================ */
.svc-list-sec { padding: 114px 0 var(--sec-pad); }

.svc-list {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 1000px;
  margin-inline: auto;
}

.svc-row {
  position: relative;
  border-top: 8px solid var(--maroon);
  border-radius: var(--radius-sm);
  background-image: linear-gradient(180deg, #f2f3f4 0%, #edf4fb 100%);
  overflow: hidden;
}

/* 背景の線画（Figma:「インれい」 opacity 0.3 は SVG に内包） */
.svc-row__deco {
  position: absolute;
  left: 0;
  top: 0;
  width: 822px;
  height: 439px;
  pointer-events: none;
}

.svc-row > *:not(.svc-row__deco) { position: relative; }

.svc-row__head {
  display: grid;
  grid-template-columns: 253px minmax(0, 1fr);
  gap: 17px;
  /* 2026-09-10 打合せで説明文・タグを外したため、見出しだけが残る。
     上寄せだとサムネイル右に大きな空白ができるので縦中央に置く */
  align-items: center;
  padding: 24px 32px 0;
}

.svc-row__thumb {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 253 / 141;
}
.svc-row__thumb img { width: 100%; height: 100%; object-fit: cover; }

.svc-row__title {
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.03px;
  color: var(--black);
}

.svc-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}
.svc-row__tags li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 24px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: var(--blue-900);
  color: var(--white);
  font-size: 0.625rem;   /* 10px */
  font-weight: 700;
  line-height: 18px;
}

.svc-row__text {
  margin-top: 22px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--text-primary);
}
.svc-row__text + .svc-row__text { margin-top: 16px; }

.svc-row__foot {
  display: flex;
  align-items: center;
  /* 施工写真ギャラリーを外したので「詳しく見る」だけになる。右端に寄せる */
  justify-content: flex-end;
  gap: 32px;
  padding: 32px 32px 33px;
}

.svc-row__gallery {
  display: flex;
  gap: 8px;
}
.svc-row__gallery li {
  display: grid;
  place-items: center;
  width: 200px;
  height: 150px;
  border-radius: var(--radius-sm);
  background: #d9d9d9;
}
.svc-row__gallery img { width: 26px; height: 26px; opacity: 0.85; }

.svc-row__more {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.32px;
  color: var(--blue-900);
  white-space: nowrap;
}
.svc-row__more:hover .arrow { transform: translateX(4px); }

/* --- CTA帯（リード文なしのバリエーション）------------------ */
.cta__band--simple { padding: 76px 24px 82px; }

/* --- 背景装飾 ---------------------------------------------- */
.deco-hexnet,
.deco-globe {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.deco-hexnet { top: 0; right: 0; }
/* 下層ページの地球儀。Figmaではどのページも地球儀の右端がキャンバス右端
   (1445px)を越えて切れており、「右端から食い込ませる」配置になっている。
   中央基準で置くと広い画面で右端に届かず、切り口が画面の途中に見えてしまう。
   right 基準にすれば画面幅によらず右端に貼り付き、切り口は常に画面外になる。
   -36px の食い込みで表示幅768px＝導入事例一覧・採用情報・お知らせ一覧の設計値。 */
.deco-globe  { bottom: -64px; left: auto; right: -36px; }
.deco-globe img { width: 804px; max-width: none; }

.has-deco { position: relative; overflow: hidden; }
.has-deco > .container,
.has-deco > section { position: relative; z-index: 1; }

/* 下層ページの本文ラッパー（背景装飾の基準） */
.sub-body { position: relative; }


/* ============================================================
   22. サービス詳細
   ============================================================ */

/* --- 見出し（ライムのバー＋罫線）--------------------------- */
.sec-bar {
  margin-bottom: 48px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--neutral-300);
}
.sec-bar__title {
  padding-left: 8px;
  border-left: 8px solid var(--lime);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 31px;
  color: var(--blue-900);
}

/* --- 共通タグ（サービス／業種）----------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 24px;
  padding: 0 12px;
  border-radius: 20px;
  background: var(--blue-900);
  color: var(--white);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 18px;
}
.chips--scene li { min-width: 112px; background: var(--aqua-900); }

/* --- サービス詳細ヒーロー ---------------------------------- */
.svc-hero { padding: 64px 0 0; }

.svc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 580px) minmax(0, 564px);
  gap: 37px;
  justify-content: end;
  /* 説明文・タグを外して見出しと相談ボタンだけになったため、画像と縦中央で揃える */
  align-items: center;
}

.svc-hero__title {
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 55px;
  letter-spacing: -0.85px;
  color: var(--blue-900);
}

.svc-hero .chips { margin-top: 24px; }

.svc-hero__text {
  margin-top: 24px;
  font-size: var(--fs-lead);
  line-height: 25px;
  color: var(--black);
}

.svc-hero__scene-title {
  margin-top: 64px;
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.03px;
  color: var(--blue-900);
}
.svc-hero__scene-title + .chips { margin-top: 16px; }

.svc-hero__media {
  margin-top: 71px;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 564 / 322;
}
.svc-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ライムのCTAボタン（Figma:「このサービスについて相談する」） */
.btn--lime {
  gap: 11px;
  min-height: 67px;
  min-width: 320px;
  padding: 0 27px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--lime);
  color: var(--text-primary);
  font-size: var(--fs-lead);
  line-height: 25px;
}
.btn--lime:hover,
.btn--lime:focus-visible {
  background: var(--neutral-900);
  color: var(--lime);
}
.btn--lime svg { width: 24px; height: 24px; flex: none; }
.svc-hero__cta { margin-top: 51px; }

/* --- こんな課題を解決します --------------------------------- */
.solutions { padding-top: var(--sec-pad); }

.solution-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.solution {
  display: flex;
  flex-direction: column;
  min-height: 205px;
  padding: 26px 21px 32px;
  background-image: linear-gradient(180deg, #f2f3f4 0%, #edf4fb 100%);
}
.solution:nth-child(even) {
  background-image: linear-gradient(180deg, #f2f3f4 0%, #cce3ff 100%);
}

.solution__label {
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  background-image: var(--grad-navy-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: max-content;
}

.solution__title {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-300);
  font-size: 1.25rem;   /* 20px */
  font-weight: 700;
  line-height: 31px;
  color: var(--text-primary);
}

.solution__text {
  margin-top: auto;
  padding-top: 8px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--text-primary);
}

/* --- 特徴・機能 --------------------------------------------- */
.features { padding-top: var(--sec-pad); }

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 31px;
}

.feature {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
/* 2026-09-10 打合せで特徴・機能は「文字だけ」に。画像列が残ると本文が
   310px の列に押し込まれるので、画像が無いときは1カラムにする。
   :has() で詳細度が上がるため、下のレスポンシブ指定にも負けない */
.feature:not(:has(.feature__thumb)) { grid-template-columns: minmax(0, 1fr); }

.feature__thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 310 / 233;
  border-radius: var(--radius-sm);
  background: #d9d9d9;
}
.feature__thumb img { width: 40px; height: 40px; opacity: 0.85; }
.feature__thumb--photo { padding: 0; }
.feature__thumb--photo img { width: 100%; height: 100%; object-fit: cover; opacity: 1; border-radius: var(--radius-sm); }

.feature__title {
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  color: var(--text-primary);
}

.feature__text {
  margin-top: 17px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--black);
}

/* --- 導入の流れ --------------------------------------------- */
.flow { padding-top: var(--sec-pad); }

.flow-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
}

.flow-step { position: relative; }

/* ステップ間の斜め罫線 */
.flow-step + .flow-step::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 8px;
  width: 1px;
  height: 236px;
  background: var(--neutral-300);
  transform: rotate(12deg);
  transform-origin: top center;
}

.flow-step__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.flow-step__num {
  font-family: var(--font-en);
  font-size: 4.25rem;   /* 68px */
  font-weight: 700;
  line-height: 82px;
  background-image: var(--grad-navy-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.flow-step__label {
  font-size: var(--fs-lead);
  line-height: 25px;
  color: var(--blue-900);
  white-space: nowrap;
}

.flow-step__body {
  margin-top: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--neutral-300);
  text-align: center;
}

.flow-step__icon {
  height: 70px;
  display: grid;
  place-items: center;
  color: var(--neutral-900);
}
.flow-step__icon img { max-height: 70px; width: auto; }

.flow-step__text {
  margin-top: 38px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--text-primary);
}

/* --- このサービスの導入事例 --------------------------------- */
.svc-cases { padding-top: var(--sec-pad); }


/* --- 他のサービス ------------------------------------------- */
.other-svc { padding: 68px 0 var(--sec-pad); }

.other-svc__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 400px));
  gap: 19px;
}

.other-card {
  padding: 25px;
  border-radius: var(--radius-md);
  background-image: linear-gradient(180deg, #f2f3f4 0%, #cce3ff 100%);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.other-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 64, 140, 0.16);
}

.other-card__thumb {
  max-width: 253px;
  aspect-ratio: 253 / 141;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.other-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.other-card__title {
  margin-top: 16px;
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  color: var(--black);
}

.other-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}


/* ============================================================
   23. 導入事例一覧
   ============================================================ */
.case-filter-sec { padding-top: 114px; }

.filter-group { text-align: center; }
.filter-group + .filter-group {
  margin-top: 33px;
  padding-top: 32px;
  border-top: 1px solid var(--neutral-300);
}

.filter-group__label {
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--text-primary);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.filter-chips a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  height: 22px;
  padding: 0 14px;
  border: 1px solid var(--maroon);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.32px;
  white-space: nowrap;
}
.filter-chips a:hover,
.filter-chips a:focus-visible,
.filter-chips a[aria-current="true"] {
  background: var(--maroon);
  color: var(--white);
}

.case-list-sec { padding: 114px 0 var(--sec-pad); }

.case-grid--list { row-gap: 24px; }

.pagination { margin-top: 127px; }
.pagination__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.pagination__list a,
.pagination__list span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e1e3e7;
  color: var(--neutral-700);
  font-size: var(--fs-base);
  line-height: 21px;
}
.pagination__list a:hover,
.pagination__list a:focus-visible {
  background: var(--neutral-400);
  color: var(--neutral-900);
}
.pagination__list [aria-current="page"] {
  background: var(--blue-900);
  color: var(--white);
}


/* ============================================================
   24. 導入事例詳細
   ※ Figma の PC-導入事例詳細（83:4398）は共通枠のみのため、
     ワイヤー 04_cases.html の構成に沿って既存パーツで組んでいます。
   ============================================================ */
.case-detail { padding-top: 64px; }

.case-detail__title {
  margin-top: 24px;
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 1.196;
  letter-spacing: -0.85px;
  color: var(--blue-900);
  text-wrap: balance;
}

.chips--industry li { background: var(--maroon); }

.case-detail__media {
  margin-top: 40px;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: #d9d9d9;
}
.case-detail__media img { width: 100%; height: 100%; object-fit: cover; }

.case-block { padding-top: var(--sec-pad); }

/* --- お客様・プロジェクト概要 ------------------------------- */
.info-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.info-table th,
.info-table td {
  padding: 16px 0;
  border-bottom: 1px solid var(--neutral-300);
  font-size: var(--fs-base);
  line-height: 21px;
  vertical-align: top;
}
.info-table th {
  width: 220px;
  padding-right: 24px;
  font-weight: 500;
  color: var(--blue-900);
}
.info-table td { color: var(--text-primary); }
.info-table a { color: var(--blue-900); text-decoration: underline; text-underline-offset: 3px; }

/* --- 本文（ブロックエディタ領域）---------------------------- */
.narrative {
  max-width: 900px;
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--text-primary);
}
.narrative p + p { margin-top: 24px; }

.narrative__figure {
  margin-top: 32px;
  max-width: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 6;
  background: #d9d9d9;
  display: grid;
  place-items: center;
}
.narrative__figure img { width: 40px; height: 40px; opacity: 0.85; }

/* --- KPI ---------------------------------------------------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.kpi {
  padding: 32px 24px;
  border-radius: var(--radius-sm);
  background-image: linear-gradient(180deg, #f2f3f4 0%, #cce3ff 100%);
  text-align: center;
}
.kpi__num {
  font-family: var(--font-en);
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.85px;
  background-image: var(--grad-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kpi__label {
  margin-top: 16px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--text-primary);
}

/* --- お客様の声 --------------------------------------------- */
.voice {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 24px;
  padding: 32px;
  border-left: 8px solid var(--lime);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--neutral-100);
}
.voice__avatar {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #d9d9d9;
}
.voice__avatar img { width: 32px; height: 32px; opacity: 0.85; }

.voice__quote {
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--text-primary);
}
.voice__who {
  margin-top: 16px;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 18px;
  color: var(--neutral-700);
}


/* ============================================================
   25. フォーム（お問い合わせ／採用エントリー）
   ※ Figma のフォーム4画面（83:17963 / 83:18030 / 83:18097 / 83:17896）は
     共通枠のみのため、項目定義はワイヤー 06_contact.html / 07_recruit.html、
     見た目は既存トークンで設計。
   ============================================================ */
.form-sec { padding: 64px 0 var(--sec-pad); }

/* --- ステップ表示（入力 → 確認 → 完了）--------------------- */
.form-steps {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.form-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 140px;
  text-align: center;
}
.form-steps li + li::before {
  content: "";
  position: absolute;
  left: -54px;
  top: 16px;
  width: 108px;
  height: 1px;
  background: var(--neutral-300);
}

.form-steps__dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e1e3e7;
  color: var(--neutral-700);
  font-size: var(--fs-base);
  line-height: 21px;
}
.form-steps__label {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.32px;
  color: var(--neutral-700);
}
.form-steps .is-current .form-steps__dot { background: var(--blue-900); color: var(--white); }
.form-steps .is-current .form-steps__label { color: var(--blue-900); font-weight: 700; }
.form-steps .is-done .form-steps__dot { background: var(--aqua-900); color: var(--white); }
.form-steps .is-done + li::before { background: var(--aqua-900); }

/* --- レイアウト（本体＋サイド）------------------------------ */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
  margin-top: 64px;
}

/* --- 入力項目 ----------------------------------------------- */
.form-field {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--neutral-300);
}
.form-field:first-child { border-top: 1px solid var(--neutral-300); }

.form-field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 13px;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 21px;
  color: var(--blue-900);
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}
.badge--req { background: var(--maroon); color: var(--white); }
.badge--opt {
  background: var(--white);
  border: 1px solid var(--neutral-400);
  color: var(--neutral-700);
}

.input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--text-primary);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: var(--neutral-400); }
.input:focus {
  outline: none;
  border-color: var(--blue-900);
  box-shadow: 0 0 0 2px rgba(0, 64, 140, 0.2);
}
.input:user-invalid { border-color: var(--maroon); }

textarea.input {
  height: auto;
  min-height: 160px;
  padding: 12px 14px;
  line-height: 1.8;
  resize: vertical;
}

select.input {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--neutral-700) 50%),
    linear-gradient(135deg, var(--neutral-700) 50%, transparent 50%);
  background-position: calc(100% - 21px) 55%, calc(100% - 16px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

input[type="file"].input {
  height: auto;
  padding: 10px 14px;
  line-height: 1.6;
}
input[type="file"].input::file-selector-button {
  margin-right: 16px;
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--blue-900);
  color: var(--white);
  font-family: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}
input[type="file"].input::file-selector-button:hover { background: var(--neutral-900); }

.input--mid   { max-width: 420px; }
.input--short { max-width: 260px; }

.field-hint {
  margin-top: 8px;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 18px;
  color: var(--neutral-700);
}

/* --- 同意 ---------------------------------------------------- */
.form-consent { margin-top: 48px; }

.consent-box {
  max-height: 180px;
  overflow-y: auto;
  padding: 20px 24px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  background: var(--neutral-100);
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--text-primary);
}
.consent-box a { color: var(--blue-900); text-decoration: underline; text-underline-offset: 3px; }

.consent-agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  font-size: var(--fs-base);
  line-height: 21px;
}
.consent-agree input {
  width: 20px;
  height: 20px;
  accent-color: var(--blue-900);
}

.form-submit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}

.form-captcha {
  margin-top: 24px;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 18px;
  color: var(--neutral-700);
  text-align: center;
}

/* --- サイドカード／補足カード -------------------------------- */
.form-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.aside-card {
  padding: 24px;
  border-radius: var(--radius-sm);
  background-image: linear-gradient(180deg, #f2f3f4 0%, #cce3ff 100%);
}
.aside-card__title {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 21px;
  color: var(--blue-900);
}
.aside-card__tel {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-en);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--blue-900);
}
.aside-card p {
  margin-top: 8px;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 18px;
  color: var(--text-primary);
}
.aside-card__link {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 1.32px;
  color: var(--blue-900);
}
.aside-card__link:hover .arrow { transform: translateX(4px); }

.form-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 64px;
}

/* --- 完了画面 ------------------------------------------------ */
.form-done {
  margin-top: 64px;
  padding: 64px 32px;
  border-radius: var(--radius-sm);
  background-image: linear-gradient(180deg, #f2f3f4 0%, #edf4fb 100%);
  text-align: center;
}
.form-done__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.85px;
  color: var(--blue-900);
}
.form-done__text {
  max-width: 720px;
  margin: 24px auto 0;
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--text-primary);
}
.form-done .form-submit { margin-top: 40px; }


/* ============================================================
   26. お知らせ（一覧・詳細）
   ============================================================ */
.news-sec { padding: 116px 0 var(--sec-pad); }

.news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 31px;
  align-items: start;
}

/* --- カテゴリ絞り込み --------------------------------------- */
.news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
}
.news-filter a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  height: 22px;
  padding: 0 14px;
  border: 1px solid var(--neutral-800);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.32px;
  white-space: nowrap;
}
.news-filter a:hover,
.news-filter a:focus-visible,
.news-filter a[aria-current="true"] {
  background: var(--blue-900);
  border-color: var(--blue-900);
  color: var(--white);
}

/* --- 記事リスト --------------------------------------------- */
.post-list {
  margin-top: 32px;
  border-top: 1px dashed var(--neutral-400);
}
.post-item { border-bottom: 1px dashed var(--neutral-400); }

.post-item__link {
  display: flex;
  gap: 20px;
  padding: 28px 0 32px;
}

.post-item__thumb {
  flex: none;
  width: 160px;
  height: 98px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #d9d9d9;
}
.post-item__thumb img { width: 100%; height: 100%; object-fit: cover; }

.post-item__body { flex: 1 1 auto; min-width: 0; }

.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.post-meta__date {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.32px;
  color: var(--text-ink);
}

.post-item__title {
  display: block;
  margin-top: 16px;
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  color: var(--text-ink);
}
.post-item__link:hover .post-item__title,
.post-item__link:focus-visible .post-item__title {
  color: var(--blue-900);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.post-item__excerpt {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--neutral-800);
}

.news-sec .pagination { margin-top: 127px; }

/* --- サイドバー --------------------------------------------- */
.news-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.widget {
  padding: 18px 13px 24px;
  border-radius: var(--radius-sm);
  background: var(--neutral-100);
}
.widget:nth-child(even) {
  background-image: linear-gradient(180deg, #f2f3f4 0%, #edf4fb 100%);
}

.widget__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 21px;
  color: var(--text-primary);
}
.widget__title::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--blue-900);
}

.widget__list { margin-top: 15px; }
.widget__list li a {
  display: block;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 1.32px;
  color: var(--text-primary);
}
.widget__list li a:hover { color: var(--blue-900); text-decoration: underline; }
.widget__list li + li { margin-top: 14px; }

.widget__list--archive li { padding-bottom: 14px; }
.widget__list--archive li + li {
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid var(--neutral-300);
}

.widget-post {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}
.widget-post + .widget-post { margin-top: 16px; }
.widget-post__thumb {
  width: 78px;
  height: 48px;
  overflow: hidden;
  background: var(--white);
}
.widget-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.widget-post__date {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1.32px;
  color: var(--text-ink);
}
.widget-post__title {
  display: block;
  margin-top: 7px;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 18px;
  color: var(--text-primary);
}
.widget-post:hover .widget-post__title { color: var(--blue-900); text-decoration: underline; }

.widget-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 23px 12px;
  margin-top: 15px;
}
.widget-tags a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 22px;
  padding: 0 10px;
  border: 1px solid var(--neutral-800);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 1.32px;
  color: var(--text-primary);
}
.widget-tags a:hover,
.widget-tags a:focus-visible {
  background: var(--neutral-800);
  color: var(--white);
}


/* ============================================================
   27. お知らせ 詳細（記事本文）
   ※ Figma の PC-お知らせ詳細（83:10830）はサイドバーと共通枠のみ。
     本文はワイヤー 05_news.html の構成で組んでいます。
   ============================================================ */
.post-detail__title {
  margin-top: 16px;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.5px;
  color: var(--text-ink);
  text-wrap: balance;
}

.post-detail__media {
  margin-top: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: #d9d9d9;
}
.post-detail__media img { width: 100%; height: 100%; object-fit: cover; }

/* 本文（ブロックエディタで組む範囲）------------------------- */
.post-body {
  margin-top: 40px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text-primary);
}
.post-body > * + * { margin-top: 24px; }

.post-body h2 {
  margin-top: 56px;
  padding-left: 8px;
  border-left: 8px solid var(--lime);
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  color: var(--blue-900);
}
.post-body h3 {
  margin-top: 40px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--blue-900);
}
.post-body h4 {
  margin-top: 32px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text-ink);
}

.post-body ul,
.post-body ol { padding-left: 1.4em; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li + li { margin-top: 8px; }
.post-body li::marker { color: var(--blue-900); }

.post-body a { color: var(--blue-900); text-decoration: underline; text-underline-offset: 3px; }
.post-body strong { font-weight: 700; }

.post-body blockquote {
  padding: 20px 24px;
  border-left: 4px solid var(--neutral-400);
  background: var(--neutral-100);
  color: var(--neutral-800);
}

.post-body figure img { border-radius: var(--radius-sm); }
.post-body figcaption {
  margin-top: 8px;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 18px;
  color: var(--neutral-700);
}

/* --- 記事タグ ------------------------------------------------ */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--neutral-300);
}
.post-tags__label {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 1.32px;
  color: var(--neutral-700);
}

/* --- 前後の記事 ---------------------------------------------- */
.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.post-nav__card {
  padding: 20px 24px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.post-nav__card:hover { border-color: var(--blue-900); transform: translateY(-2px); }
.post-nav__card--next { text-align: right; }
.post-nav__dir {
  display: block;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 1.32px;
  color: var(--blue-900);
}
.post-nav__title {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 21px;
  color: var(--text-ink);
}
.post-nav__card--empty { border-style: dashed; opacity: 0.5; }

.post-back { display: flex; justify-content: center; margin-top: 48px; }

/* --- 関連記事 ------------------------------------------------ */
.related-posts { margin-top: 64px; }
.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.rp-card {
  display: block;
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.rp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14); }
.rp-card__thumb { display: block; aspect-ratio: 16 / 9; background: #d9d9d9; }
.rp-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rp-card__body { display: block; padding: 16px 18px 20px; }
.rp-card__title {
  display: block;
  margin-top: 12px;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 21px;
  color: var(--text-ink);
}


/* ============================================================
   28. 会社概要
   ============================================================ */

/* このページは本文カラムが 990px（他ページの1240pxより狭い） */
.container--narrow { max-width: calc(990px + var(--gutter) * 2); }

/* 見出し（ライムバー無し・罫線のみ）------------------------- */
.sec-bar--plain { margin-bottom: 32px; }
.sec-bar--plain .sec-bar__title {
  padding-left: 0;
  border-left: 0;
  font-size: 2rem;   /* 32px */
}

/* --- 導入（リード＋キービジュアル）-------------------------- */
.company-intro { padding: 64px 0 0; }
.company-intro__lead {
  margin-top: 40px;
  font-size: var(--fs-lead);
  line-height: 25px;
  color: var(--text-ink);
  text-align: center;
}

.company-kv {
  position: relative;
  margin-top: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 990 / 557;
  background: #d9d9d9;
}
.company-kv img { width: 100%; height: 100%; object-fit: cover; }
.company-kv__label {
  position: absolute;
  right: 24px;
  top: 12px;
  font-size: clamp(2rem, 4.7vw, 4.25rem);
  font-weight: 700;
  line-height: 82px;
  color: var(--white);
  white-space: nowrap;
}

/* 会社情報テーブル（このページは18px・行間ゆったり）--------- */
.info-table--company th,
.info-table--company td {
  padding: 32px 0;
  font-size: var(--fs-lead);
  line-height: 25px;
}
.info-table--company th { width: 143px; padding-right: 24px; }
/* 募集要項は項目名が長いため列幅を広げ、行高はFigmaの78pxに合わせる */
.info-table--jobs th { width: 200px; }
.info-table--jobs th,
.info-table--jobs td { padding-top: 26px; padding-bottom: 26px; }

/* --- 代表挨拶 ------------------------------------------------ */
.company-block { padding-top: var(--sec-pad); }
.company-block--tight { padding-top: 64px; }

.greeting__text {
  font-size: var(--fs-lead);
  line-height: 25px;
  color: var(--black);
}
.greeting__text p + p { margin-top: 25px; }

.greeting__profile {
  margin-top: 32px;
  padding: 22px 0 32px;
  border-top: 1px solid var(--neutral-300);
  border-bottom: 1px solid var(--neutral-300);
}
.greeting__profile > div + div { margin-top: 31px; }

.greeting__label {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 13px;
  letter-spacing: 1.32px;
  color: var(--blue-900);
}
.greeting__value {
  margin-top: 3px;
  font-size: var(--fs-lead);
  line-height: 25px;
  color: var(--black);
}

/* --- グループ拠点 -------------------------------------------- */
.office-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 15px;
}

.office-card {
  padding: 32px;
  border-radius: var(--radius-sm);
  background-image: linear-gradient(180deg, #f2f3f4 0%, #cce3ff 100%);
}

.office-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.office-card__eyebrow {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 13px;
  letter-spacing: 1.32px;
  background-image: var(--grad-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.office-card__flag { width: 32px; height: 32px; flex: none; }
.office-card__name {
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  color: var(--blue-900);
}
.office-card__note {
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--black);
}

.office-card__address {
  margin-top: 12px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--black);
}
.office-card__tel {
  margin-top: 16px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--black);
}

/* --- 地図（プレースホルダー）---------------------------------- */
/* 実地図の埋め込みを想定した高さ（718px）を確保している */
.company-map {
  display: grid;
  place-content: center;
  min-height: 718px;
  margin-top: var(--sec-pad);
  margin-bottom: var(--sec-pad);
  padding: 64px 0;
  background: #fbf8f0;
  text-align: center;
}
.company-map__icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--neutral-900);
}
.company-map__icon img { width: 64px; height: 64px; }
.company-map__note {
  margin-top: 55px;
  font-size: var(--fs-card);
  font-weight: 400;
  line-height: 31px;
  color: var(--black);
}


/* ============================================================
   29. 採用情報（トップ・募集要項）
   ============================================================ */

/* --- 採用KV -------------------------------------------------- */
.recruit-kv {
  position: relative;
  min-height: 786px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--neutral-100);
}
.recruit-kv__media { position: absolute; inset: 0; }
.recruit-kv__media img { width: 100%; height: 100%; object-fit: cover; }
.recruit-kv__inner { position: relative; }

.recruit-kv__eyebrow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--blue-900);
}
.recruit-kv__eyebrow > span:first-child {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 13px;
  letter-spacing: 1.32px;
}
.recruit-kv__eyebrow > span + span { font-size: var(--fs-lead); line-height: 25px; color: var(--black); }

.recruit-kv__title {
  margin-top: 38px;
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.206;
  letter-spacing: -1.26px;
  color: var(--blue-900);
}
.recruit-kv__lead {
  margin-top: 32px;
  max-width: 800px;
  font-size: var(--fs-lead);
  line-height: 25px;
  color: var(--black);
}
.recruit-kv .btn { margin-top: 68px; }

/* ライムボタン（小）: 164×58 */
.btn--lime-sm {
  min-width: 164px;
  min-height: 58px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--lime);
  color: var(--neutral-900);
  font-size: 1rem;
  font-weight: 700;
}
.btn--lime-sm:hover,
.btn--lime-sm:focus-visible { background: var(--neutral-900); color: var(--lime); }

/* --- 私たちが大切にすること ---------------------------------- */
.recruit-values { padding: 64px 0 0; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 82px;
}

.value-card {
  position: relative;
  min-height: 254px;
  padding: 10px 46px 24px;
  background-image: linear-gradient(180deg, #f2f3f4 0%, #edf4fb 100%);
  overflow: hidden;
}
/* 右下の斜めアクセント（Figma: Line 43-45） */
.value-card::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: 34px;
  width: 108px;
  height: 1px;
  background: var(--neutral-400);
  transform: rotate(-45deg);
  transform-origin: right center;
}

.value-card__num {
  font-family: var(--font-en);
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 55px;
  background-image: var(--grad-navy-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.value-card__title {
  margin-top: 24px;
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  color: var(--black);
}
.value-card__text {
  margin-top: 19px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--neutral-800);
}

/* --- 働く環境・福利厚生 -------------------------------------- */
.recruit-block { padding-top: var(--sec-pad); }
/* 最終ブロックの下にもリズム分の余白を取る（Figma: 本文終端〜CTA = 256px） */
.sub-body > .recruit-block:last-child { padding-bottom: var(--sec-pad); }

.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 64px;
}

.benefit {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 47px;
  align-items: center;
  min-height: 230px;
  padding: 41px 47px;
  background-image: linear-gradient(180deg, #f2f3f4 0%, #edf4fb 100%);
}
.benefit__icon {
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: var(--blue-100);
}
.benefit__icon img { width: auto; height: 70px; max-width: 70px; object-fit: contain; }

.benefit__title {
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  color: var(--text-ink);
}
.benefit__text {
  margin-top: 15px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--neutral-800);
}

/* --- DATA IN NUMBERS（装飾）---------------------------------- */
.din-deco {
  margin-top: 128px;
  overflow: hidden;
  text-align: center;
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}
.din-deco span {
  display: inline-block;
  line-height: 1.2;
  font-family: var(--font-en);
  font-size: clamp(3.5rem, 11vw, 9.875rem);   /* → 158px */
  font-weight: 400;
  white-space: nowrap;
  background-image: var(--grad-heading-dark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- 数字で見るMHI ------------------------------------------- */
.din-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 31px 32px;
  margin-top: 64px;
}

.din-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-height: 285px;
  padding: 48px 16px 24px;
  border-radius: var(--radius-md);
  background-image: linear-gradient(180deg, #f2f3f4 0%, #cce3ff 100%);
  text-align: center;
}
.din-card:nth-child(even) { background-image: linear-gradient(180deg, #f2f3f4 0%, #edf4fb 100%); }

.din-card__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 184px;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: var(--blue-900);
  color: var(--white);
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
}
/* 数字はラベルの下〜カード下端の中央に置く。注記は下端に固定し、
   注記の有無で同じ行のカード同士の数字の高さがずれないようにする */
.din-card__figures { margin-block: auto; padding-block: 18px; }
/* 単位・見出しは数字に対する比率（em）で決め、画面幅で数字が変わっても釣り合いを保つ */
.din-card__num {
  display: inline-block;
  font-family: var(--font-en);
  font-size: clamp(2.75rem, 2.3rem + 1.4vw, 3.5rem);   /* 44 → 56 */
  font-weight: 700;
  line-height: 1.35;   /* 男女比率の2段に間をとる */
  letter-spacing: -0.02em;
  color: var(--text-ink);
}
.din-card__num small {
  margin-left: 0.5em;   /* 単位自身の大きさ基準（数字56pxで約12px） */
  font-family: var(--font-en);   /* 「%」はInter、漢字はNoto Sans JPで出る */
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.din-card__num small.is-sym {   /* 「%」は字面が漢字より小さいため大きめにして見た目を揃える */
  margin-left: 0.3em;
  font-size: 0.56em;
}
.din-card__num .k {
  margin-right: 0.9em;  /* 見出し自身の大きさ基準（数字56pxで約16px） */
  font-family: var(--font-jp);
  font-size: 0.32em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--blue-900);
}
.din-card__note {
  position: absolute;
  right: 16px;
  bottom: 24px;
  left: 16px;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 18px;
  color: var(--text-ink);
}

/* --- 募集要項カード ------------------------------------------ */
.job-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 64px;
}
/* 募集が1件のときは3カラムの左端に取り残されて見えるため、
   中央に寄せて単体でも収まりの良い幅を与える */
.job-grid:has(> .job-card:only-child) {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
}

.job-card {
  display: flex;
  flex-direction: column;
  min-height: 404px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--neutral-100);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.job-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 64, 140, 0.16); }

.job-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 0 26px;
  background: var(--blue-900);
}
.job-card__head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--blue-900);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

.job-card__body { padding: 47px 34px 0; }
.job-card__title {
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  color: var(--text-ink);
}
.job-card__text {
  margin-top: 16px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--black);
}
.job-card__foot {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding: 32px 24px 34px;
}
.job-card__foot .btn { min-width: 178px; min-height: 48px; }

/* --- FAQ ----------------------------------------------------- */
.faq-list {
  margin-top: 46px;
  border-top: 1px solid var(--neutral-300);
}
.faq-item {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  padding: 46px 12px 33px;
  border-bottom: 1px solid var(--neutral-300);
}
.faq-item__mark {
  font-family: var(--font-en);
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 1;
  background-image: var(--grad-navy-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.faq-item__q {
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  color: var(--text-primary);
}
.faq-item__a {
  margin-top: 16px;
  font-size: var(--fs-lead);
  line-height: 25px;
  color: var(--text-primary);
}

/* --- 募集要項ページ：職種ヘッダー ---------------------------- */
.job-detail__head { padding-top: 64px; }
.job-detail__title {
  margin-top: 64px;
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 55px;
  letter-spacing: -0.85px;
  color: var(--blue-900);
}
.job-detail__lead {
  margin-top: 32px;
  font-size: var(--fs-lead);
  line-height: 25px;
  color: var(--text-ink);
}

/* --- 募集要項ページ：エントリー帯 ---------------------------- */
.entry-band {
  position: relative;
  /* Figma: 採用の流れ終端〜写真帯 = 32px */
  margin-top: 32px;
  padding: 144px 0;
  overflow: hidden;
}
.entry-band__media { position: absolute; inset: 0; }
.entry-band__media img { width: 100%; height: 100%; object-fit: cover; }
.entry-band__panel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 64px 24px;
  border-radius: var(--radius-sm);
  background: rgba(0, 64, 140, 0.88);
  color: var(--white);
  text-align: center;
}
.entry-band__title {
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
}
.entry-band__text {
  margin-top: 24px;
  font-size: var(--fs-base);
  line-height: 21px;
}
.entry-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin-top: 32px;
}
.entry-band__actions .btn { min-width: 214px; }


/* ============================================================
   31. ユーティリティ（規約類・サイトマップ・404）
   ============================================================ */

/* 規約類の見出し帯は別グラフィック（回路パターン） */
.page-header--utility .page-header__media img { object-position: center 20.7%; }

/* --- 規約類の本文 -------------------------------------------- */
.legal-sec { padding: 64px 0 var(--sec-pad); }

.legal-body {
  margin-top: 64px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text-primary);
}
.legal-body > * + * { margin-top: 24px; }
.legal-body h2 {
  margin-top: 48px;
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.7;
  color: var(--text-ink);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body ul { margin-top: 8px; padding-left: 1.4em; list-style: disc; }
.legal-body li::marker { color: var(--blue-900); }
.legal-body a { color: var(--blue-900); text-decoration: underline; text-underline-offset: 3px; }
.legal-body dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; }
.legal-body li { text-wrap: balance; }
.legal-body dt { font-weight: 500; color: var(--neutral-800); }

.legal-meta {
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 18px;
  color: var(--neutral-700);
}
/* 要確定の箇所（確認シート No.28-30） */
.legal-todo { color: var(--maroon); }

/* --- 特定商取引法表記のテーブル ------------------------------ */
.info-table--legal th,
.info-table--legal td {
  padding: 28px 0;
  border-bottom: 1px dashed var(--neutral-400);
  font-size: 1rem;
  line-height: 1.7;
}
.info-table--legal th { width: 250px; padding-right: 24px; font-weight: 400; color: var(--text-primary); }

/* --- サイトマップ -------------------------------------------- */
.sitemap-sec { padding: 64px 0 var(--sec-pad); }

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 96px;
  max-width: 800px;
  margin: 64px auto 0;
  padding-top: 64px;
  border-top: 1px dashed var(--neutral-400);
}

.sitemap-group__title {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--blue-900);
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  color: var(--blue-900);
}

.sitemap-group ul { margin-top: 16px; }
.sitemap-group li { font-size: var(--fs-base); line-height: 21px; }
.sitemap-group li + li { margin-top: 12px; }
.sitemap-group a { color: var(--text-primary); }
.sitemap-group a:hover,
.sitemap-group a:focus-visible { color: var(--blue-900); text-decoration: underline; }

.sitemap-group li::before {
  content: "—";
  margin-right: 8px;
  color: var(--neutral-400);
}
.sitemap-group li li::before { content: "└"; }
.sitemap-group li ul { margin-top: 12px; padding-left: 16px; }

/* --- 404 ------------------------------------------------------ */
.err {
  padding: 100px 0 var(--sec-pad);
  text-align: center;
}
.err__code {
  font-family: var(--font-en);
  font-size: clamp(4rem, 8.9vw, 8rem);   /* → 128px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.26px;
  background-image: var(--grad-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.err__title {
  margin-top: 64px;
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 31px;
  color: var(--blue-900);
}
.err__text {
  margin-top: 32px;
  font-size: var(--fs-lead);
  line-height: 25px;
  color: var(--text-primary);
}

.err__search {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 41px;
}
.err__search .input { max-width: 480px; height: 64px; }
.err__search button {
  min-width: 112px;
  height: 64px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--blue-900);
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.err__search button:hover { background: var(--neutral-900); }

.err__back {
  display: inline-block;
  margin-top: 64px;
  font-size: var(--fs-base);
  line-height: 21px;
  color: var(--blue-900);
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* ============================================================
   30. 下層ページの Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .svc-row__gallery li { width: 33.333%; height: auto; aspect-ratio: 4 / 3; }
  .svc-row__gallery { flex: 1 1 auto; }
  .deco-hexnet { display: none; }

  .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .info-table th { width: 180px; }

  .form-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .form-aside { flex-direction: row; }
  .form-aside > * { flex: 1 1 0; }

  .office-grid { grid-template-columns: minmax(0, 1fr); }
  .sitemap-grid { gap: 48px; }
  .info-table--legal th { width: 200px; }
  .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .din-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit { grid-template-columns: 112px minmax(0, 1fr); gap: 28px; padding: 32px; }
  .benefit__icon { width: 112px; height: 112px; }
  .benefit__icon img { height: 54px; max-width: 54px; }
  .company-kv__label { line-height: 1.2; top: 8px; }

  .news-layout { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .news-side { flex-direction: row; flex-wrap: wrap; }
  .news-side > * { flex: 1 1 300px; }
  .flow-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
  .flow-step + .flow-step::before { display: none; }
  .other-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .page-intro { padding-top: 48px; }
  .svc-list-sec { padding-top: 72px; }

  .svc-row__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .svc-row__thumb { max-width: 320px; }

  .svc-row__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .svc-row__more { align-self: flex-end; }

  .svc-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .svc-hero__media { margin-top: 0; order: -1; }
  .svc-hero__scene-title { margin-top: 40px; }
  .svc-hero__cta { margin-top: 32px; }

  .feature { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 640px) {
  .page-header { height: 112px; }
  .breadcrumb { margin-top: 20px; }
  .breadcrumb__list { font-size: 0.75rem; }
  .page-intro__lead { margin-top: 24px; text-align: left; }

  .svc-list { gap: 40px; }
  .svc-row__head { padding: 20px 20px 0; }
  .svc-row__foot { padding: 24px 20px 26px; }
  .svc-row__thumb { max-width: none; }
  .svc-row__deco { display: none; }

  .cta__band--simple { padding: 48px 20px; }

  .sec-bar { margin-bottom: 32px; }
  .svc-hero { padding-top: 40px; }
  .svc-hero__title { line-height: 1.3; }
  .btn--lime { min-width: 0; width: 100%; }

  .solution-grid { grid-template-columns: minmax(0, 1fr); }
  .solution { min-height: 0; padding: 20px 20px 24px; }

  .feature { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .flow-list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .flow-step + .flow-step { padding-top: 32px; border-top: 1px solid var(--neutral-300); }
  .flow-step__body { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; text-align: left; padding-top: 20px; }
  .flow-step__text { margin-top: 0; }

  .other-svc { padding-top: 56px; }
  .other-svc__grid { grid-template-columns: minmax(0, 1fr); }

  .case-filter-sec { padding-top: 56px; }
  .case-list-sec { padding-top: 56px; }
  .filter-chips { gap: 8px; margin-top: 20px; }
  .filter-chips a { min-width: 0; padding: 0 14px; }
  .pagination { margin-top: 56px; }

  .case-detail { padding-top: 40px; }
  .case-detail__media { margin-top: 24px; aspect-ratio: 16 / 10; }
  .case-block { padding-top: 56px; }

  .info-table,
  .info-table tbody,
  .info-table tr,
  .info-table th,
  .info-table td { display: block; width: auto; }
  .info-table th { padding: 16px 0 4px; border-bottom: 0; }
  .info-table td { padding-top: 0; }

  .narrative { font-size: 1rem; }

  /* 狭幅では定義リストを1カラムにして値の潰れを防ぐ */
  .legal-body dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal-body dt { margin-top: 12px; }
  .legal-body dt:first-child { margin-top: 0; }

  .kpi-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .voice { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 20px; }
  .voice__avatar { width: 64px; height: 64px; }

  .form-sec { padding-top: 40px; }
  .form-steps { margin-top: 32px; }
  .form-steps li { width: 33.333%; }
  .form-steps li + li::before { left: -50%; width: 100%; }
  .form-layout { margin-top: 40px; }
  .form-aside { flex-direction: column; }

  .form-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 20px 0;
  }
  .form-field__label { padding-top: 0; }
  .input--mid, .input--short { max-width: none; }

  .form-consent { margin-top: 32px; }
  .form-submit { margin-top: 32px; }
  .form-submit .btn { width: 100%; }
  .form-notes { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }

  .form-done { margin-top: 40px; padding: 40px 20px; }
  .form-done__text { font-size: 1rem; }

  .legal-sec, .sitemap-sec { padding-top: 40px; }
  .legal-body { margin-top: 32px; }
  .sitemap-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 32px; padding-top: 32px; }

  .info-table--legal,
  .info-table--legal tbody,
  .info-table--legal tr,
  .info-table--legal th,
  .info-table--legal td { display: block; width: auto; }
  .info-table--legal th { padding: 20px 0 4px; border-bottom: 0; font-weight: 500; }
  .info-table--legal td { padding: 0 0 20px; }

  .err { padding: 56px 0 72px; }
  .err__title { margin-top: 32px; }
  .err__text { margin-top: 20px; font-size: 1rem; line-height: 1.8; }
  .err__search { flex-direction: column; margin-top: 32px; }
  .err__search .input { max-width: none; height: 56px; }
  .err__search button { width: 100%; height: 56px; }
  .err__back { margin-top: 40px; }

  .recruit-kv { min-height: 0; padding: 56px 0 64px; }
  .recruit-kv__title { margin-top: 24px; letter-spacing: -0.5px; }
  .recruit-kv__lead { margin-top: 20px; }
  .recruit-kv .btn { margin-top: 32px; width: 100%; }
  .recruit-values { padding-top: 56px; }
  .value-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .value-card { min-height: 0; padding: 10px 24px 24px; }
  .recruit-block { padding-top: 56px; }
  .benefit-list { margin-top: 32px; gap: 16px; }
  .benefit { grid-template-columns: minmax(0, 1fr); gap: 16px; min-height: 0; padding: 24px 20px; }
  .benefit__icon { width: 88px; height: 88px; }
  .benefit__icon img { height: 44px; max-width: 44px; }
  .din-deco { margin-top: 56px; }
  .din-grid { grid-template-columns: minmax(0, 1fr); margin-top: 32px; gap: 16px; }
  .din-card { min-height: 0; padding: 32px 16px 20px; }
  .din-card__figures { padding-bottom: 0; }
  .din-card__note { position: static; padding-top: 24px; }
  .job-grid { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .job-card { min-height: 0; }
  .job-card__body { padding: 28px 22px 0; }
  .faq-list { margin-top: 32px; }
  .faq-item { grid-template-columns: 40px minmax(0, 1fr); padding: 28px 0 24px; }
  .faq-item__mark { font-size: 2rem; }
  .faq-item__a { font-size: 1rem; line-height: 1.8; }

  .job-detail__head { padding-top: 40px; }
  .job-detail__title { margin-top: 32px; line-height: 1.35; }
  .entry-band { margin-top: 56px; padding: 56px 0; }
  .entry-band__panel { min-height: 0; padding: 40px 20px; }
  .entry-band__actions { gap: 16px; }
  .entry-band__actions .btn { width: 100%; }

  .company-intro { padding-top: 40px; }
  .company-intro__lead { margin-top: 24px; text-align: left; }
  .company-kv { margin-top: 32px; }
  .company-kv__label { right: 16px; font-size: 1.5rem; }
  .company-block { padding-top: 56px; }
  .sec-bar--plain .sec-bar__title { font-size: 1.625rem; }
  .greeting__text { font-size: 1rem; line-height: 1.8; }
  .office-card { padding: 24px 20px; }
  .company-map { min-height: 0; margin-top: 56px; padding: 56px 0; }
  .info-table--company th,
  .info-table--company td { padding: 16px 0; font-size: 1rem; line-height: 1.7; }
  .info-table--company th { width: auto; padding: 16px 0 4px; }
  .company-map__note { margin-top: 32px; font-size: 1rem; line-height: 1.7; text-align: left; }

  .news-sec { padding-top: 56px; }
  .news-side { flex-direction: column; }
  .news-filter { gap: 10px; }
  .news-filter a { min-width: 0; }
  .post-item__link { flex-direction: column; gap: 14px; padding: 20px 0 24px; }
  .post-item__thumb { width: 100%; height: auto; aspect-ratio: 160 / 98; }
  .post-item__title { margin-top: 12px; }
  .news-sec .pagination { margin-top: 56px; }

  .post-detail__media { margin-top: 24px; aspect-ratio: 16 / 10; }
  .post-body { margin-top: 32px; }
  .post-body h2 { margin-top: 40px; }
  .post-nav { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .post-nav__card--next { text-align: left; }
  .post-back .btn { width: 100%; }
  .related-posts__grid { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   32. Parallax（JS 有効時のみ／data-parallax 要素）
   ============================================================ */
/* GPU 昇格は translate3d() 側で行う。will-change / backface-visibility を
   常時掛けると Safari で「overflow:hidden の親＋合成レイヤーの子」が
   描画されなくなる既知の不具合を踏むため、ここでは指定しない。 */

/* ヒーロー背景：移動しても余白が出ないよう上下にはみ出させる
   （はみ出し量 > data-parallax の値） */
.js-parallax .hero__media { inset: -132px 0; }

/* カードサムネイル：画像を包む層を動かし、img 側のホバー時
   ズーム（scale）と transform が競合しないようにする */
.thumb-parallax {
  display: block;
  width: 100%;
  height: 100%;
}
.js-parallax .thumb-parallax {
  height: calc(100% + 48px);
  margin-top: -24px;
}



/* ============================================================
   33. Google 翻訳ウィジェットの表示調整
   ============================================================ */
/* ウィジェットが最上部に差し込むバナーと、そのために body へ付く
   top オフセットを打ち消す。翻訳箇所のハイライトもデザインを崩す
   ため無効化する。WordPress側は GTranslate プラグインのCSSが
   同じことをしているので、こちらは静的HTML用の保険も兼ねる。 */
iframe.skiptranslate,
.goog-te-banner-frame { display: none !important; }

body { top: 0 !important; }

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* ============================================================
   Motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}