@charset "utf-8";

/* ==================================================
  TOKUYAMA THEME — style.css
  INDEX（並び順＝カスケード優先度。ブロックの物理移動は行わない）
  --------------------------------------------------
  00. Settings / Variables ........ :root, tokens
  01. Base ........................ reset, body, typography
  02. Layout / Common ............. container, section, grid
  03. Components .................. cards, forms, tables, nav parts
  04. Header ...................... .site-header, .brand, back-to-top
  05. Drawer / Hamburger .......... .nav-toggle, .global-nav drawer
  06. Footer ...................... .site-footer
  07. Common CTA .................. .cta--contact
  08. Buttons / Badges / Labels ... .btn, .badge, .chip
  09. TOP Page .................... .page--home, .hero
  10. Lower Pages Common .......... breadcrumb, lower content
  11. Lower Page KV ............... .subkv, .page-kv
  12. Page Specific ............... service, works, recruit, etc.
  13. Responsive .................. @media overrides（最終カスケード段）
================================================== */

/* ==================================================
  00. Settings / Variables
================================================== */

/* ------------------------------------------------------------
  徳山電気ブランドカラー（主徴）
  黄＝面の主役（セクション帯など単色面）／緑＝締め（見出し・罫線・ボタン・ラベル）
  白・アイボリーで抜き、冷たいネイビー全面は避ける

  【グラデーション運用】
  - 面・ページ背景・セクション背景・カード全面・CTA面・ボタン面にはグラデーションを使わない
  - 背景のぼかし色面・にじみ・発光風の色演出・オーバーレイのグラデーションは使わない
  - 黄×緑のグラデーションは「細い縦線／細い区切り／キッカー線／ごく小さいアクセント」にのみ可
  - 世界観の黄×緑は単色面・余白・文字組み・写真の配色で見せる
------------------------------------------------------------ */
:root{
  --bg: #fffdf8;
  --surface: #ffffff;
  --surface-warm: #fff9f0;
  --text: #1e2933;
  --muted: #4e5a55;
  --ink: #15231c;
  --on-yellow: #3d2a0a;
  --line: rgba(15, 122, 67, .14);
  /* Yellow (primary) */
  --main: #ffea35;
  --main-2: #8f6a0f;
  --main-weak: #fff7a6;
  --main-weak-2: #fffdde;
  /* 薄い「面」用（セクション背景の控えめな単色） */
  --yellow-plane-top: #f5f6f8;
  --yellow-plane-mid: #fff4a3;
  --yellow-plane-deep: #ffea35;
  --accent: #0f7a43;
  /* 黄×緑グラデ（細い線・極小アクセント専用。面には使わない） */
  --brand-line-grad-y: linear-gradient(180deg, var(--main) 0%, var(--accent) 100%);
  --brand-line-grad-x: linear-gradient(90deg, var(--main) 0%, var(--accent) 100%);
  /* 導線ボタン共通：黄→緑の枠線のみ（面は白・MV内 .hero-recruit は除外） */
  --btn-outline-grad: var(--brand-line-grad-x);
  --btn-outline-w: 2px;
  --btn-surface: #fff;
  --accent-2: #075a33;
  --accent-weak: #ecf8f1;
  --accent-weak-2: #f4fbf7;
  --heat: var(--main);
  --heat-2: var(--main-2);
  --heat-weak: rgba(232, 188, 30, .22);
  /* 可読性用の濃色（スレートではなく暖みのあるダーク） */
  --navy-900: #2a2418;
  --navy-800: #3d3428;

  --radius: 12px;
  --shadow: 0 10px 30px rgba(17, 24, 39, .08);
  --shadow-2: 0 18px 50px rgba(17, 24, 39, .14);
  --shadow-3: 0 26px 70px rgba(2, 6, 23, .16);

  /* Dummy images（サイト全体で共通利用） */
  --dummy-hero: url("../images/top/pc/hero-construction.jpg");
  --dummy-biz: url("../images/top/pc/top_service.webp");
  --dummy-recruit: url("../images/top/pc/31739472_m.jpg");

  /* ------------------------------------------------------------
    Layout width tokens（責務分離）
    - --wrap-max / --wrap-pad を“セクション単位”で上書きできるようにする
    - 旧: --container / --gutter は互換エイリアス（段階的に廃止）
  ------------------------------------------------------------ */
  /* 1440px基準セクション用の左右余白（TOPの見え方に近い“しっかり余白”） */
  --wide-pad: clamp(20px, 3.8vw, 56px);
  /* サイト全体の基本最大幅（原則ここを基準に設計） */
  --wrap-max: 1440px;
  /* 既定の本文余白（下層は必要に応じて上書き） */
  --wrap-pad: 24px;
  --container: var(--wrap-max);
  --gutter: var(--wrap-pad);
  /* 下層KV：body の --wrap-max 上書きと無関係に同一幅を保つ */
  --page-kv-max: 1440px;
  /* 下層パンくず：本文の .container / container--narrow と無関係に同一幅 */
  --breadcrumb-max: 1440px;
}

/* ==================================================
  01. Base
================================================== */
*{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.7;
  letter-spacing: .01em;
}
/* Worksページはセクション背景を白に */
body.page-works{
  background: #fff;
}
body.page-works-detail{
  background: #fff;
}
body.page-news,
body.page-news-detail{
  background: #fff;
}

/* ==================================================
  12. Page Specific
  --------------------------------------------------
  Works detail（カスケード優先のためファイル冒頭付近に配置）
================================================== */

/* ------------------------------------------------------------
  Works detail: 量産しやすい静かな記事レイアウト
------------------------------------------------------------ */
.works-detail{
  background: #fff;
}
.works-detail__header{
  margin-bottom: 18px;
}
.works-detail__topmeta{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 10px;
}
.works-detail__cats{
  margin: 0;
}
.works-detail__date{
  margin-left: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--muted);
}
.works-detail__title{
  margin: 0 0 12px;
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1.25;
}
.works-detail__meta{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(15, 122, 67, .12);
  border-radius: 16px;
  background: rgba(255,255,255,.9);
}
.works-detail__meta > div{
  display: grid;
  gap: 4px;
  min-width: 0;
}
.works-detail__meta dt{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--muted);
}
.works-detail__meta dd{
  margin: 0;
  font-weight: 800;
  color: #0b1220;
}
.works-detail__hero{
  margin: 18px 0 14px;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  border: 1px solid rgba(15, 122, 67, .12);
  background: center / cover no-repeat;
}
.works-detail__intro .lead{
  margin-bottom: 0;
}
.works-detail__sections{
  margin-top: 26px;
  display: grid;
  gap: 18px;
}
.works-detail__sections h2,
.works-detail__sections h3,
.works-detail__sections h4{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #0b1220;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.works-detail__sections h2::before,
.works-detail__sections h3::before,
.works-detail__sections h4::before{
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: .9;
}
.works-detail__sections p{
  margin: 0;
  color: var(--muted);
  line-height: 1.95;
}
.works-detail__sections ul,
.works-detail__sections ol{
  margin: 0;
  padding-left: 1.25em;
  color: var(--muted);
  line-height: 1.95;
}
.works-detail__sections li{ margin: 0; }
.works-detail__sections strong{ font-weight: 900; color: #0b1220; }
.works-detail__sections em{ font-style: italic; }
.works-detail__sections a{
  color: #0f7a43;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.works-detail__sections a:hover{ opacity: .85; }
.works-detail__sections a:focus-visible{
  outline: 2px solid rgba(15,122,67,.35);
  outline-offset: 2px;
  border-radius: 6px;
}
.works-detail__section{
  padding-top: 2px;
}
.works-detail__h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #0b1220;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.works-detail__h3::before{
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: .9;
}
.works-detail__section p{
  margin: 0;
  color: var(--muted);
  line-height: 1.95;
}
.works-detail__gallery{
  margin-top: 34px;
}
.works-detail__nav{
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.works-detail__nav-btn{
  width: min(260px, 100%);
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
  border-radius: 999px;
  border: var(--btn-outline-w) solid transparent;
  background-color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #000;
  box-shadow: 0 3px 12px rgba(17, 24, 39, .07);
  transform: none;
}
.works-detail__nav-btn:hover{
  background-image:
    linear-gradient(#fffef9, #fffef9),
    var(--btn-outline-grad);
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(17, 24, 39, .1);
  transform: translateY(-1px);
  color: #000;
}
.works-detail__nav-btn:active{
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(17, 24, 39, .08);
}
.works-detail__nav-prev{ justify-self: start; }
.works-detail__nav-list{ justify-self: center; }
.works-detail__nav-next{ justify-self: end; }

@media (max-width: 768px){
  .works-detail__meta{
    grid-template-columns: 1fr;
  }
  .works-detail__nav{
    grid-template-columns: 1fr auto 1fr;
  }
  .works-detail__nav-prev,
  .works-detail__nav-list,
  .works-detail__nav-next{
    justify-self: stretch;
  }
  .works-detail__nav-btn{
    width: 100%;
    min-height: 44px;
    padding: 12px 12px;
    font-size: 13px;
    letter-spacing: .01em;
    white-space: nowrap;
  }
}
/* TOPだけ横幅を広く使う（中央詰めに見せない） */
/* ページ単位で全体幅を一括変更しない（セクション単位で管理） */
img{ max-width: 100%; height: auto; vertical-align: middle; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ==================================================
  02. Layout / Common
  --------------------------------------------------
  03. Components（セクション見出し・カード等）
================================================== */

/* ------------------------------------------------------------
  Section title (recruit banner style)
  - 大きい英字 → 日本語タイトル → 本文 の階層をTOP全体で統一
------------------------------------------------------------ */
.section-title__en{
  margin: 0 0 6px;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}
.section-title__ja{
  margin: 0 0 10px;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.35;
  color: var(--ink);
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 14px;
  background: var(--text);
  color: #fff;
  z-index: 9999;
}
.skip-link:focus{ left: 12px; top: 12px; }

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

/* TOPなどで「横幅をしっかり使う」セクション用 */
.container--wide{
  --wrap-max: 1440px;
  --wrap-pad: var(--wide-pad);
}

/* 情報を整理してコンパクトに見せるセクション用 */
.container--narrow{
  --wrap-max: 1024px;
  --wrap-pad: 24px;
}
.section{
  padding: 72px 0;
  border-top: 1px solid rgba(232, 188, 30, .2);
}
.section--tight{ padding: 48px 0; }
/* 白で抜く（情報の区切り） */
.section--surface{
  background: var(--surface);
  border-top: 1px solid rgba(15, 122, 67, .08);
}
/* 黄＋淡色の面（アクセント帯・単色） */
.section--accent{
  background: var(--yellow-plane-mid);
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid rgba(232, 188, 30, .28);
}

.section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  position: relative;
}
.page--home .section-head .btn{
  width: 260px;
  justify-content: center;
}

/* 大きい薄英字を背景に敷く演出はTOPでは不使用 */
.section-watermark{ display: none; }
.kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--accent-2);
  text-transform: uppercase;
}
.kicker::before{
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

.h2{
  font-size: 28px;
  margin: 0 0 8px;
  letter-spacing: .01em;
  color: var(--accent-2);
}
.lead{
  margin: 0 0 24px;
  color: var(--muted);
}

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

.card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
}
.card__body{ padding: 20px; }
.card__title{ font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.card__meta{ font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.card__text{ margin: 0; color: var(--muted); }
.card:hover{
  box-shadow: 0 10px 34px rgba(17, 24, 39, .08);
  border-color: rgba(203, 213, 225, .95);
}

.media{
  background: var(--main-weak-2);
  border-bottom: 1px solid rgba(232, 188, 30, .22);
}
.media--photo{
  background: #f8fafc;
}
.media--16x9{ aspect-ratio: 16 / 9; }
.media--3x2{ aspect-ratio: 3 / 2; }
.media--square{ aspect-ratio: 1 / 1; }
.media__label{
  display: grid;
  place-items: center;
  height: 100%;
  color: #4b5563;
  font-size: 14px;
  letter-spacing: .04em;
}

/* ==================================================
  08. Buttons / Badges / Labels
================================================== */
.btns{ display: flex; gap: 12px; flex-wrap: wrap; }
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 999px;
  border: var(--btn-outline-w) solid transparent;
  background-color: var(--btn-surface);
  background-image:
    linear-gradient(var(--btn-surface), var(--btn-surface)),
    var(--btn-outline-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #000;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(17, 24, 39, .08);
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease, box-shadow .15s ease, background-image .15s ease, color .12s ease;
}
.btn:hover{
  text-decoration: none;
  background-image:
    linear-gradient(#fffef9, #fffef9),
    var(--btn-outline-grad);
  box-shadow: 0 6px 22px rgba(17, 24, 39, .11);
  transform: translateY(-1px);
  color: #000;
}
.btn:active{
  transform: translateY(0);
  box-shadow: 0 3px 12px rgba(17, 24, 39, .08);
}
.btn:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.btn--primary{
  /* 主CTA＝ベースと同一（黄緑枠・白面・黒字） */
  color: #000;
}
.btn--primary:hover{
  text-decoration: none;
  color: #000;
}
.btn--ghost{
  background-color: transparent;
  background-image:
    linear-gradient(transparent, transparent),
    var(--btn-outline-grad);
  color: var(--accent-2);
  box-shadow: 0 2px 10px rgba(17, 24, 39, .05);
}
.btn--ghost:hover{
  background-image:
    linear-gradient(rgba(255, 255, 255, .65), rgba(255, 255, 255, .65)),
    var(--btn-outline-grad);
  color: var(--accent-2);
}
.btn--small{
  min-height: 44px;
  padding: 11px 22px;
  font-size: 14px;
  gap: 8px;
}
button.btn{
  font: inherit;
  font-family: inherit;
  cursor: pointer;
}

.badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255, 251, 235, .95);
  color: var(--main-2);
  border: 1px solid rgba(232, 188, 30, .38);
}
.chip{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(203, 213, 225, .9);
  background: rgba(255,255,255,.8);
  color: #334155;
}
.chip--accent{
  border-color: rgba(232, 188, 30, .4);
  background: rgba(255, 251, 235, .98);
  color: var(--main-2);
}
.chips{ display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------
  Works: カテゴリ色は緑（黄色はNEWS側）
------------------------------------------------------------ */
body.page-works .badge,
body.page-works-detail .badge,
.section--works-showcase .badge{
  background: rgba(15, 122, 67, .08);
  border-color: rgba(15, 122, 67, .22);
  color: var(--accent-2);
}
body.page-works .chip--accent,
body.page-works-detail .chip--accent,
.section--works-showcase .chip--accent{
  background: rgba(15, 122, 67, .06);
  border-color: rgba(15, 122, 67, .18);
  color: var(--accent-2);
}

/* ==================================================
  04. Header
  --------------------------------------------------
  .site-header / .brand / back-to-top
================================================== */

.back-to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 950; /* header(1000) < overlay(1100) より下 */
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid transparent; /* 枠は背景の2層で表現 */
  background-color: rgba(255, 255, 255, .92);
  background-image:
    linear-gradient(rgba(255, 255, 255, .92), rgba(255, 255, 255, .92)),
    var(--brand-line-grad-x);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 10px 30px rgba(17, 24, 39, .12);
  color: #000;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.back-to-top::before{
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(-45deg) translateY(1px);
}
.back-to-top:hover{
  background-color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    var(--brand-line-grad-x);
  box-shadow: 0 14px 36px rgba(17, 24, 39, .16);
}
.back-to-top:focus-visible{
  outline: 2px solid rgba(7, 90, 51, .55);
  outline-offset: 3px;
}
.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (max-width: 1024px){
  /* 下部固定の黄色CTAと干渉しないよう上に逃がす */
  .back-to-top{
    right: 14px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}
.page-contact .back-to-top{
  display: none !important;
}
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 2px solid rgba(15, 122, 67, .14);
  box-shadow: 0 3px 14px rgba(17, 24, 39, .06);
  /* 本文 `.container` と同じ基準線に揃える */
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
  box-sizing: border-box;
}
/* 明るめヘッダー（全ページ共通） */
.site-header--bright{
  background: #fff;
  border-bottom: 2px solid rgba(15, 122, 67, .14);
  box-shadow: 0 3px 14px rgba(17, 24, 39, .06);
}
.site-header--bright .global-nav a{
  color: var(--ink);
}
.site-header--bright .nav-toggle{
  border-color: rgba(203,213,225,.95);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 3px 14px rgba(17, 24, 39, .08);
}
.site-header--bright .nav-toggle:hover{
  background: var(--main-weak-2);
  border-color: rgba(232, 188, 30, .55);
  box-shadow: 0 6px 18px rgba(17, 24, 39, .10);
  text-decoration: none;
}
/* 下層ページ：KVに重なるヘッダーはシンプルな白系（色かぶりなし） */
body:not(.page--home).is-header-over-kv .site-header{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
body:not(.page--home).is-header-over-kv:not(.is-header-solid) .site-header,
body:not(.page--home).is-header-over-kv:not(.is-header-solid) .site-header.site-header--bright{
  background: rgba(255, 255, 255, .72);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 1px 10px rgba(17, 24, 39, .04);
}
body:not(.page--home).is-header-over-kv.is-header-solid .site-header,
body:not(.page--home).is-header-over-kv.is-header-solid .site-header.site-header--bright{
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 2px 12px rgba(17, 24, 39, .05);
}
body:not(.page--home).is-header-over-kv .global-nav a{
  color: var(--ink);
}
body:not(.page--home).is-header-over-kv .nav-toggle{
  border-color: rgba(203, 213, 225, .9);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: 0 1px 8px rgba(17, 24, 39, .05);
}
body:not(.page--home).is-header-over-kv .nav-toggle:hover{
  background: #fff;
  border-color: rgba(15, 23, 42, .12);
  box-shadow: 0 2px 10px rgba(17, 24, 39, .06);
  text-decoration: none;
}
/* ロゴ：白背景向けの通常ロゴ（logo.svg）を使用 */
.brand__logo--light{ display: none !important; }
.brand__logo--dark{ display: block; }
.brand .brand__logo:only-child{ display: block; }

/* 下層KV：タイトル左に縦線（黄→緑グラデ） */
body:not(.page--home) .subkv--photo .page-kv__inner{
  /* 縦線とタイトルの間隔を少し広めに */
  padding-left: calc(var(--home-title-bar-pad, 14px) + 12px);
}
body:not(.page--home) .subkv--photo .page-kv__inner::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 6px;
  border-radius: 999px;
  background: var(--brand-line-grad-y);
  opacity: .92;
}
@media (max-width: 640px){
  body:not(.page--home) .subkv--photo .page-kv__inner{
    /* 縦線とタイトルの距離が離れすぎないよう微調整 */
    padding-left: 16px;
  }
  body:not(.page--home) .subkv--photo .page-kv__inner::before{
    width: 5px;
  }
}
/* ヘッダー内は本文 .container の max-width 制限を外し、上記パディング幅いっぱいに並べる */
.site-header > .container{
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
}
@media (max-width: 640px){
  .site-header{
    padding-left: max(var(--wrap-pad), env(safe-area-inset-left, 0px));
    padding-right: max(var(--wrap-pad), env(safe-area-inset-right, 0px));
  }
}

/* 下層ページ（TOP以外）：ノートPC〜デスクトップは TOP同様“しっかり余白”に寄せる */
@media (min-width: 1025px){
  body:not(.page--home){
    --wrap-pad: var(--wide-pad);
  }
}
.page--home .site-header,
.page--home .site-header--bright{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  /* TOP初期表示：MV上に自然に乗る半透明の白 */
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 3px 14px rgba(17, 24, 39, .05);
  /* 横幅・余白は :root の --wrap-max / --wrap-pad に統一（下層と同じヘッダー幅） */
}

/* TOP：MV通過後は下層と同じ固定ヘッダー見た目へ */
.page--home.is-header-solid .site-header,
.page--home.is-header-solid .site-header--bright{
  background: #fff;
  border-bottom: 2px solid rgba(15, 122, 67, .14);
  box-shadow: 0 3px 14px rgba(17, 24, 39, .06);
}
.page--home.is-header-solid .global-nav a{
  color: var(--ink);
}
.page--home.is-header-solid .global-nav a:hover{
  text-decoration: none;
  background: transparent;
}
.page--home.is-header-solid .global-nav a[aria-current="page"]{
  background: transparent;
  border: none;
  text-decoration: none;
}
.page--home.is-header-solid .nav-toggle{
  border-color: rgba(203,213,225,.95);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 3px 14px rgba(17, 24, 39, .08);
}
.page--home.is-header-solid .nav-toggle:hover{
  background: var(--main-weak-2);
  border-color: rgba(232, 188, 30, .55);
  box-shadow: 0 6px 18px rgba(17, 24, 39, .10);
  text-decoration: none;
}
.page--home .header__inner{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 0;
}
.page--home .header__actions{
  width: 100%;
  min-width: 0;
  justify-content: flex-end;
  gap: 30px;
}
.page--home .brand__name{ color: var(--ink); }
.page--home .brand__tagline{ color: var(--muted); }
.page--home .global-nav a{
  padding: 8px 10px;
  color: var(--ink);
}
.page--home .global-nav a:hover{
  text-decoration: none;
}
.page--home .global-nav a[aria-current="page"]{
  background: transparent;
  border: none;
  text-decoration: none;
}
.page--home .nav-toggle{
  border-color: rgba(203,213,225,.95);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 3px 14px rgba(17, 24, 39, .08);
}
.page--home .nav-toggle:hover{
  background: var(--main-weak-2);
  border-color: rgba(232, 188, 30, .55);
  box-shadow: 0 6px 18px rgba(17, 24, 39, .10);
  text-decoration: none;
}
.page--home .header__actions .btn--cta-recruit,
.page--home .header__actions .btn--cta-contact{
  box-shadow: 0 3px 14px rgba(17, 24, 39, .1);
}
.page--home .header__actions .btn--cta-recruit:hover,
.page--home .header__actions .btn--cta-contact:hover{
  box-shadow: 0 5px 18px rgba(17, 24, 39, .12);
}
.header__inner{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 0;
}
.brand{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.brand__logo{
  display: block;
  height: 34px;
  width: auto;
}
/* .page--home .brand__logo{
  height: 36px;
} */
.brand__mark{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(232, 188, 30, .35);
  background: var(--main-weak-2);
}
.brand__text{ display: grid; }
.brand__name{ font-weight: 800; letter-spacing: .02em; }
.brand__tagline{ font-size: 12px; color: var(--muted); }

.header__actions{
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
  width: 100%;
}
.header__cta-group{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 2px;
}
/* --------------------------------------------------
  Header: Recruit CTA（PC右端 / SPドロワー最上部）
-------------------------------------------------- */
.header__cta-group--pc{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.header-recruit-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 35px 9px 15px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  color: var(--on-yellow);
  background: var(--main);
  border: 1px solid rgba(180, 134, 11, .52);
  box-shadow: 0 6px 20px rgba(17, 24, 39, .10);
  white-space: nowrap;
}
.header-recruit-cta:hover{
  text-decoration: none;
  filter: brightness(1.02);
  box-shadow: 0 8px 26px rgba(17, 24, 39, .12);
  transform: translateY(-1px);
}
.header-recruit-cta:active{
  transform: translateY(0);
}
.header-recruit-cta:focus-visible{
  outline: 2px solid rgba(7, 90, 51, .55);
  outline-offset: 3px;
}
.header-recruit-cta__top{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  opacity: .95;
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .14);
  border: 1px solid rgba(17, 24, 39, .12);
}
.header-recruit-cta__main{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  flex: 0 0 auto;
}

/* ドロワー内CTA（SP/タブレットで表示。PCでは非表示） */
.global-nav__cta{
  display: none;
}
.global-nav__cta .header-recruit-cta{
  width: 100%;
  justify-content: center;
}
/* ヘッダー専用CTA：本文ボタンと同じ黄緑枠・白面（コンパクト） */
.header__actions .btn--cta-recruit,
.header__actions .btn--cta-contact{
  min-height: 40px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.35;
  border-radius: 999px;
  border: var(--btn-outline-w) solid transparent;
  background-color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #000;
  box-shadow: 0 3px 12px rgba(17, 24, 39, .08);
}
.header__actions .btn--cta-recruit:hover,
.header__actions .btn--cta-contact:hover{
  text-decoration: none;
  background-image:
    linear-gradient(#fffef9, #fffef9),
    var(--btn-outline-grad);
  box-shadow: 0 5px 16px rgba(17, 24, 39, .1);
  transform: translateY(-1px);
  color: #000;
}
@media (min-width: 1025px){
  /* 右側に「ナビ＋CTA」をひとかたまりで寄せる（nav を全幅にしない） */
  .header__actions{
    justify-content: flex-end;
    gap: 30px;
  }
  .global-nav{
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    display: block;
  }
  .global-nav ul{
    justify-content: flex-start;
    width: auto;
    flex-wrap: nowrap;
    gap: 30px;
  }
  .global-nav a{
    padding: 8px 10px;
    font-size: 14px;
  }
}
@media (max-width: 1024px){
  .header__actions{
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .header__cta-group{
    gap: 6px;
  }
  .header__actions .btn--cta-recruit,
  .header__actions .btn--cta-contact{
    padding: 6px 11px;
    font-size: 12px;
  }

  /* SP/タブレット：ヘッダー右端の採用CTAは出さず、ドロワー最上部に集約 */
  .header__cta-group--pc{
    display: none;
  }
  .global-nav__cta{
    display: block;
    padding: 0 0 10px;
    margin: 0 0 10px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
  }
  /* ドロワー先頭：採用は“黄色ボタン”として見せる（通常メニューと区別） */
  .global-nav .global-nav__cta .header-recruit-cta{
    min-height: 52px;
    padding: 12px 14px;
    justify-content: flex-start;
    gap: 12px;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .12);
    background: var(--main);
    border: 1px solid rgba(180, 134, 11, .55);
    color: var(--on-yellow);
    transform: none;
  }
  .global-nav .global-nav__cta .header-recruit-cta:hover{
    background: var(--main);
    filter: brightness(1.01);
    box-shadow: 0 12px 34px rgba(17, 24, 39, .14);
    transform: translateY(-1px);
    text-decoration: none;
  }
  .global-nav .global-nav__cta .header-recruit-cta:active{
    transform: translateY(0);
  }
  .global-nav .global-nav__cta .header-recruit-cta__top{
    /* ボタン色に馴染むラベル */
    background: rgba(255, 255, 255, .24);
    border-color: rgba(255, 255, 255, .22);
    color: rgba(17, 24, 39, .72);
  }
  .global-nav .global-nav__cta .header-recruit-cta__main{
    font-size: 15px;
  }

  /* SP/タブレット：ドロワー専用リストのみ表示（PCの並びは維持） */
  .global-nav__list--desktop{
    display: none;
  }
  .global-nav__list--drawer{
    display: flex;
  }
}
/* レガシー修飾子：現行は .btn ベースに統一 */
.btn--recruit{
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  border: var(--btn-outline-w) solid transparent;
  color: var(--accent-2);
  box-shadow: 0 4px 14px rgba(17, 24, 39, .08);
}
.btn--recruit:hover{
  background-image:
    linear-gradient(#fffef9, #fffef9),
    var(--btn-outline-grad);
  color: var(--accent-2);
  text-decoration: none;
  transform: translateY(-1px);
}
.btn--heat{
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  border: var(--btn-outline-w) solid transparent;
  color: #000;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(17, 24, 39, .1);
}
.btn--heat:hover{
  text-decoration: none;
  background-image:
    linear-gradient(#fffef9, #fffef9),
    var(--btn-outline-grad);
  transform: translateY(-1px);
  color: #000;
}
.btn--lg{
  padding: 15px 26px;
  font-size: 15px;
  border-radius: 999px;
}
/* ==================================================
  05. Drawer / Hamburger Menu
  --------------------------------------------------
  .gnav-check / .nav-toggle / .global-nav drawer
================================================== */
.gnav-check{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.nav-toggle{
  display: none;
  border: 1px solid rgba(203,213,225,.95);
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  cursor: pointer;
  color: var(--ink);
  position: relative;
}
.nav-toggle:hover{
  border-color: rgba(232, 188, 30, .45);
  background: var(--main-weak);
}
.global-nav ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 30px;
  align-items: center;
}
.global-nav__list--desktop{
  display: flex;
}
.global-nav__list--drawer{
  display: none !important;
}
.global-nav a{
  display: inline-block;
  padding: 6px 8px;
  border-radius: 0;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: none;
}
.global-nav a[aria-current="page"]{
  background: transparent;
  border: none;
  text-decoration: underline;
}
.global-nav a:hover{
  text-decoration: underline;
  background: transparent;
}
.global-nav a:focus-visible{
  outline: 2px solid var(--main);
  outline-offset: 2px;
}

/* PCデスクトップ：現在地/ホバーは黄→緑の細い下線で統一（ドロワー側には影響させない） */
.global-nav__list--desktop a{
  position: relative;
  background: transparent;
}
.global-nav__list--desktop a::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.global-nav__list--desktop a:hover,
.global-nav__list--desktop a:focus-visible,
.global-nav__list--desktop a[aria-current="page"]{
  text-decoration: none;
  background: transparent;
  border: none;
}
.global-nav__list--desktop a:hover::after,
.global-nav__list--desktop a:focus-visible::after{
  opacity: .92;
  transform: translateY(0);
}
.global-nav__list--desktop a[aria-current="page"]::after{
  opacity: 1;
  transform: translateY(0);
}

/* タブレット以降：ハンバーガー展開時の背景オーバーレイ（HTMLに label.nav-overlay を追加して利用） */
.nav-overlay{
  display: none;
}

/* ------------------------------------------------------------
  共通フッター（.site-footer 内のみ。--wrap-* / .container と独立）
------------------------------------------------------------ */

/* ==================================================
  06. Footer
================================================== */

.site-footer{
  --footer-max: 1440px;
  --footer-pad: 24px;
  border-top: 1px solid rgba(15, 122, 67, .12);
  background: #fff;
  color: rgba(17, 24, 39, .92);
}

.site-footer__wrap{
  box-sizing: border-box;
  width: min(100% - (var(--footer-pad) * 2), var(--footer-max));
  margin-inline: auto;
  padding: 56px 0 30px;
}

.site-footer .footer__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 100px;
}
.site-footer .footer__left{ flex: 0 0 auto; }
.site-footer .footer__right{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.site-footer .footer-logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--ink);
}
.site-footer .footer__address{
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(55, 65, 81, .92);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.site-footer .footer-logo__img{
  display: block;
  width: min(300px, 70vw);
  height: auto;
}

@media (max-width: 768px){
  .site-footer .footer-logo__img{
    width: min(250px, 70vw);
  }
}

@media (max-width: 640px){
  .site-footer .footer-logo__img{
    width: min(200px, 70vw);
  }
}
.site-footer .footer-logo:hover{ text-decoration: none; color: var(--ink); }
.site-footer .footer-logo:focus-visible{
  outline: 2px solid var(--main);
  outline-offset: 3px;
  border-radius: 12px;
}
.site-footer .footer-logo__mark{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(15, 122, 67, .16);
  background: rgba(255, 234, 53, .18);
}
.site-footer .footer-logo__text{
  font-size: 18px;
  line-height: 1.1;
}
.site-footer .footer-menu{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 50px;
}
.site-footer .footer-menu a{
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  border-radius: 0;
  font-size: 20px;
  letter-spacing: .02em;
  color: rgba(17, 24, 39, .88);
}
.site-footer .footer-menu a:hover{
  text-decoration: underline;
  color: rgba(15, 122, 67, .95);
}

/* スマホ：フッターメインメニューを2カラムで行揃え */
@media (max-width: 640px){
  .site-footer .footer-menu.footer-menu--main{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 57px;
    row-gap: 10px;
    align-items: start;
  }
  .site-footer .footer-menu.footer-menu--main li{
    margin: 0;
    padding: 0;
  }
  .site-footer .footer-menu.footer-menu--main a{
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 0;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: .02em;
    white-space: nowrap;
  }
}
.site-footer .footer__divider{
  width: 100%;
  height: 1px;
  background: var(--brand-line-grad-x);
  opacity: .9;
  margin-top: 10px;
}
.site-footer .footer__subnav{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  border-top: none;
}
.site-footer .footer-menu--sub a{
  font-size: 16px;
  color: rgba(55, 65, 81, .92);
}
.site-footer .footer-menu--sub a:hover{
  color: rgba(15, 122, 67, .95);
  text-decoration: underline;
}

/* ------------------------------------------------------------
  共通フッター：サイトマップ型（TOP完成版を全ページへ統一）
  - 影響範囲を .site-footer--sitemap 付与時に限定
  - PC/タブレットは .footer-menu--sitemap-desktop、640px以下は .footer-sitemap-mobile
------------------------------------------------------------ */
.site-footer.site-footer--sitemap .footer__right{
  /* 右側ナビの縦余白（独立調整用）
     - blue: 上段サイトマップ → 横ライン（.footer__divider）まで
     - red : 横ライン（.footer__divider）→ 下段リンク列まで */
  --footer-sitemap-gap-blue: 30px;
  --footer-sitemap-gap-red: 10px;
}
.site-footer.site-footer--sitemap .footer-sitemap-mobile{
  display: none;
}
.site-footer.site-footer--sitemap .footer-menu.footer-menu--main.footer-menu--sitemap.footer-menu--sitemap-desktop{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* 要望：親メニュー列の横方向 gap を 50px 基準に揃える */
  column-gap: 50px;
  row-gap: 20px;
  align-items: start;
}
.site-footer.site-footer--sitemap .footer-menu.footer-menu--main.footer-menu--sitemap.footer-menu--sitemap-desktop > li{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.site-footer.site-footer--sitemap a.footer-sitemap__parent{
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .03em;
  color: rgba(17, 24, 39, .92);
  text-decoration: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.site-footer.site-footer--sitemap a.footer-sitemap__parent::before{
  content: "";
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  flex: 0 0 auto;
  opacity: .95;
}
.site-footer.site-footer--sitemap a.footer-sitemap__parent:hover{
  text-decoration: none;
  color: rgba(15, 122, 67, .95);
  opacity: 1;
}

.site-footer.site-footer--sitemap .footer-sitemap__children{
  list-style: none;
  margin: 0;
  padding: 0 0 0 45px;
  display: grid;
  gap: 8px;
}
.site-footer.site-footer--sitemap .footer-sitemap__children a{
  font-size: 16px;
  line-height: 1.65;
  padding: 0;
  color: rgba(55, 65, 81, .92);
  text-decoration: none;
}
.site-footer.site-footer--sitemap .footer-sitemap__children a:hover{
  color: rgba(15, 122, 67, .95);
  text-decoration: none;
  opacity: 1;
}

/* 下段リンク（お知らせを追加した版） */
.site-footer.site-footer--sitemap .footer-menu.footer-menu--sub.footer-menu--subhome{
  /* 要望：下段リンクの横方向 gap を 50px 基準に揃える */
  gap: 10px 50px;
}
.site-footer.site-footer--sitemap .footer-menu.footer-menu--sub.footer-menu--subhome a{
  font-size: 16px;
}

/* 青/赤の縦余白を別要素で制御 */
.site-footer.site-footer--sitemap .footer__right .footer__mainnav{
  margin-bottom: var(--footer-sitemap-gap-blue);
}
.site-footer.site-footer--sitemap .footer__right .footer__divider{
  /* 既存の margin-top(10px) はTOPのみ無効化して、赤の余白を divider 側に付与 */
  margin-top: 0;
  margin-bottom: var(--footer-sitemap-gap-red);
}
.site-footer.site-footer--sitemap .footer__right .footer__subnav{
  margin-top: 0;
}

/* フッター左ロゴを少し小さく（300px → 260px） */
.site-footer.site-footer--sitemap .footer-logo__img{
  width: min(260px, 70vw);
  height: auto; /* 念のため比率維持 */
}

/* 1440px時点：フッターロゴを 240px 程度に抑える */
@media (max-width: 1440px){
  .site-footer.site-footer--sitemap .footer-logo__img{
    width: min(240px, 70vw);
  }
}

/* タブレット：3列（641px〜1024px。スマホ専用ブロックは非表示のまま） */
@media (max-width: 1024px) and (min-width: 641px){
  .site-footer.site-footer--sitemap .footer-menu.footer-menu--main.footer-menu--sitemap.footer-menu--sitemap-desktop{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* スマホ：デスクトップ用 ul 非表示＋モバイル専用サイトマップ */
@media (max-width: 640px){
  /* スマホのみ：フッターロゴを約200pxに */
  .site-footer.site-footer--sitemap .footer-logo__img{
    width: min(200px, 70vw);
  }
  .site-footer.site-footer--sitemap .footer-menu.footer-menu--main.footer-menu--sitemap.footer-menu--sitemap-desktop{
    display: none !important;
  }
  .site-footer.site-footer--sitemap .footer-sitemap-mobile{
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .site-footer.site-footer--sitemap .footer-sitemap-mobile a{
    white-space: normal;
  }
  .site-footer.site-footer--sitemap .footer-sitemap-mobile a.footer-sitemap__parent{
    font-size: 18px;
  }
  .site-footer.site-footer--sitemap .footer-sitemap-mobile__upper{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 57px;
    align-items: start;
  }
  .site-footer.site-footer--sitemap .footer-sitemap-mobile__lower{
    margin-top: 28px;
  }
  .site-footer.site-footer--sitemap .footer-sitemap-mobile .footer-menu.footer-menu--main.footer-menu--sitemap.footer-sitemap-mobile__upper-left{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
  }
  .site-footer.site-footer--sitemap .footer-sitemap-mobile .footer-menu.footer-menu--main.footer-menu--sitemap.footer-sitemap-mobile__upper-right{
    display: block;
    width: 100%;
    min-width: 0;
  }
  .site-footer.site-footer--sitemap .footer-sitemap-mobile .footer-menu.footer-menu--main.footer-menu--sitemap.footer-sitemap-mobile__list-lower{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 57px;
    row-gap: 10px;
    align-items: start;
    width: 100%;
    min-width: 0;
  }
  .site-footer.site-footer--sitemap .footer-sitemap-mobile .footer-menu.footer-menu--main.footer-menu--sitemap > li{
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .site-footer.site-footer--sitemap .footer__right{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 57px;
    align-items: start;
    row-gap: 12px;
  }
  .site-footer.site-footer--sitemap .footer__mainnav,
  .site-footer.site-footer--sitemap .footer__divider,
  .site-footer.site-footer--sitemap .footer__subnav{
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
  .site-footer.site-footer--sitemap .footer-menu.footer-menu--sub.footer-menu--subhome{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 4px;
    width: 100%;
    min-width: 0;
    gap: 0;
  }
  .site-footer.site-footer--sitemap .footer-menu.footer-menu--sub.footer-menu--subhome > li{
    flex: 0 1 auto;
    min-width: 0;
  }
  .site-footer.site-footer--sitemap .footer-menu.footer-menu--sub.footer-menu--subhome a{
    display: inline-flex;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    padding: 4px 0;
  }
}
@media (max-width: 360px){
  .site-footer.site-footer--sitemap .footer-menu.footer-menu--sub.footer-menu--subhome a{
    font-size: 13px;
    letter-spacing: -0.02em;
  }
}

/* 旧レイアウト用ブロック（.site-footer 内に置いた場合のみ有効） */
.site-footer .footer__grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
}
.site-footer .footer__brand{
  display: grid;
  gap: 10px;
}
.site-footer .footer__tag{
  color: rgba(253, 230, 138, .85);
  font-size: 13px;
  margin: 0;
}
.site-footer .footer__contact{
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-top: 3px solid var(--accent);
  background: rgba(255,255,255,.06);
}
.site-footer .footer__phone{
  font-size: 20px;
  font-weight: 900;
  margin: 0;
  letter-spacing: .02em;
}
.site-footer .footer__hours{
  margin: 0;
  color: rgba(203, 213, 225, .92);
  font-size: 13px;
}
.site-footer .footer__navgrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
.site-footer .footer__navtitle{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #fde68a;
  margin: 0 0 10px;
}
.site-footer .footer__title{ font-weight: 800; margin: 0 0 8px; }
.site-footer .footer__meta{ margin: 0; color: rgba(226, 232, 240, .88); }
.site-footer .footer-nav{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.site-footer .footer-nav a{ color: #e7e5e0; }
.site-footer .footer-nav a:hover{ text-decoration: none; color: #bbf7d0; }
.site-footer .footer__bottom{
  border-top: 1px solid rgba(15, 122, 67, .08);
  padding: 18px 0 22px;
  color: rgba(31, 41, 55, .82);
  font-size: 12px;
}

.site-footer .site-footer__bottom-inner{
  box-sizing: border-box;
  width: min(100% - (var(--footer-pad) * 2), var(--footer-max));
  margin-inline: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

@media (max-width: 1280px){
  .site-footer{ --footer-pad: 22px; }
  /* 1280px時：左ブロックと右ブロックの間隔を調整 */
  .site-footer .footer__top{ gap: 50px; }
  /* 1280px時：サイトマップ列間を詰めて崩れを抑える（デスクトップ用 ul のみ） */
  .site-footer.site-footer--sitemap .footer-menu.footer-menu--main.footer-menu--sitemap.footer-menu--sitemap-desktop{ column-gap: 40px; }
}
@media (max-width: 1024px){
  /* タブレット・スマホ：左右余白ルールを 15px に統一 */
  .site-footer{ --footer-pad: 15px; }
}
@media (max-width: 768px){
  .site-footer{ --footer-pad: 15px; }
}
@media (max-width: 480px){
  .site-footer{ --footer-pad: 15px; }
}

/* ------------------------------------------------------------
  Page: common blocks
------------------------------------------------------------ */

/* ==================================================
  Fade In Animation
================================================== */

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.fade-in.is-show {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-delay {
  transition-delay: 0.15s;
}

.fade-in-delay-02 {
  transition-delay: 0.3s;
}

.fade-in-delay-03 {
  transition-delay: 0.45s;
}

/* ==================================================
  10. Lower Pages Common
  --------------------------------------------------
  11. Lower Page KV（Base / Filter / Title / Responsive）
================================================== */

.subkv{
  padding: 56px 0;
  background: var(--yellow-plane-mid);
  border-bottom: 3px solid var(--accent);
}
.subkv .kicker{ margin: 0 0 10px; }
/* 下層ページKV（専用。section-title / .container と混在させない） */
.page-kv__inner{
  box-sizing: border-box;
  width: min(
    100% - (var(--wrap-pad) * 2),
    var(--page-kv-max)
  );
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.page-kv__en{
  margin: 0 0 8px;
  font-size: 52px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  color: #000;
}
.page-kv__title{
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.35;
  color: #000;
}
.page-kv__text{ margin: 0; color: var(--muted); max-width: 75ch; }
.subkv--photo{
  position: relative;
  padding: 120px 0 64px;
  border-bottom: 1px solid var(--line);
  background: var(--dummy-hero) 80% center / cover no-repeat;
}

/* --------------------------------------------------
  Lower KV: 事業内容（背景画像）
-------------------------------------------------- */
body.page-biz .subkv--photo{
  background-image: url("../images/service/pc/service_kv.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------
  Lower KV: 施工実績（背景画像）
-------------------------------------------------- */
body.page-works .subkv--photo{
  background-image: url("../images/works/pc/works_kv.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
body.page-works-detail .subkv--photo{
  background-image: url("../images/works/pc/works_kv.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------
  Lower KV: 会社情報（背景画像）
-------------------------------------------------- */
body.page-company .subkv--photo{
  background-image: url("../images/company/pc/company_kv.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------
  Lower KV: 採用情報（背景画像）
-------------------------------------------------- */
body.page-recruit .subkv--photo{
  background-image: url("../images/recruit/pc/recruit_kv.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------
  Lower KV: お問い合わせ（背景画像）
-------------------------------------------------- */
body.page-contact .subkv--photo{
  background-image: url("../images/contact/pc/contact_kv.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------
  Lower KV: プライバシーポリシー（背景画像）
-------------------------------------------------- */
body.page-privacy .subkv--photo{
  background-image: url("../images/privacy/pc/privacy_kv.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------
  Lower KV: お知らせ（背景画像）
-------------------------------------------------- */
body.page-news .subkv--photo,
body.page-news-detail .subkv--photo{
  background-image: url("../images/news/pc/news_kv.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.subkv--photo::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Lower KV: Filter（共通・明るさ調整） */
body:not(.page--home) .subkv--photo{
  filter: brightness(1.08) contrast(0.95) saturate(1.02);
}
body:not(.page--home) .subkv--photo::after{
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .18) 0%,
    rgba(255, 255, 255, .08) 45%,
    rgba(255, 255, 255, .02) 100%
  );
}
/* Lower KV: Title（白文字 + text-shadow） */
body:not(.page--home) .subkv--photo .page-kv__en,
body:not(.page--home) .subkv--photo .page-kv__title,
body:not(.page--home) .subkv--photo .page-kv__text{
  color: #fff;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .32),
    0 2px 8px rgba(0, 0, 0, .35);
}
body:not(.page--home) .subkv--photo .page-kv__en{
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .28),
    0 2px 6px rgba(0, 0, 0, .30);
}

/* ------------------------------------------------------------
  Lower KV: Filter（ページ別 明るさ・視認性）
  - お知らせ・事業内容・施工実績は共通値のまま
  - 会社情報 / お問い合わせ / 採用 / プライバシーのみ個別上書き
------------------------------------------------------------ */

/* 会社情報：やや明るい背景。タイトル周辺の視認性を少し上げる */
body.page-company .subkv--photo{
  filter: brightness(1.04) contrast(0.98) saturate(1.01);
}
body.page-company .subkv--photo::after{
  background: linear-gradient(
    90deg,
    rgba(17, 24, 39, .12) 0%,
    rgba(17, 24, 39, .05) 38%,
    rgba(255, 255, 255, .04) 72%,
    rgba(255, 255, 255, 0) 100%
  );
}
body.page-company .subkv--photo .page-kv__en,
body.page-company .subkv--photo .page-kv__title{
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .38),
    0 2px 10px rgba(0, 0, 0, .40);
}

/* お問い合わせ：背景が明るく白文字が弱い。コントラストを上げる */
body.page-contact .subkv--photo{
  filter: brightness(1.02) contrast(1.0) saturate(1.0);
}
body.page-contact .subkv--photo::after{
  background: linear-gradient(
    90deg,
    rgba(17, 24, 39, .17) 0%,
    rgba(17, 24, 39, .08) 42%,
    rgba(255, 255, 255, .03) 76%,
    rgba(255, 255, 255, 0) 100%
  );
}
body.page-contact .subkv--photo .page-kv__en,
body.page-contact .subkv--photo .page-kv__title{
  text-shadow:
    0 1px 4px rgba(0, 0, 0, .44),
    0 3px 12px rgba(0, 0, 0, .46);
}

/* 採用情報：白飛び気味。少し締めてタイトルをはっきり */
body.page-recruit .subkv--photo{
  filter: brightness(0.99) contrast(1.03) saturate(0.99);
}
body.page-recruit .subkv--photo::after{
  background: linear-gradient(
    90deg,
    rgba(17, 24, 39, .22) 0%,
    rgba(17, 24, 39, .11) 40%,
    rgba(255, 255, 255, .02) 74%,
    rgba(255, 255, 255, 0) 100%
  );
}
body.page-recruit .subkv--photo .page-kv__en,
body.page-recruit .subkv--photo .page-kv__title{
  text-shadow:
    0 1px 4px rgba(0, 0, 0, .48),
    0 3px 14px rgba(0, 0, 0, .50);
}

/* プライバシーポリシー：明るい背景。タイトル周辺をやや強化 */
body.page-privacy .subkv--photo{
  filter: brightness(1.03) contrast(0.99) saturate(1.01);
}
body.page-privacy .subkv--photo::after{
  background: linear-gradient(
    90deg,
    rgba(17, 24, 39, .15) 0%,
    rgba(17, 24, 39, .07) 36%,
    rgba(255, 255, 255, .03) 70%,
    rgba(255, 255, 255, 0) 100%
  );
}
body.page-privacy .subkv--photo .page-kv__en,
body.page-privacy .subkv--photo .page-kv__title{
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .40),
    0 2px 11px rgba(0, 0, 0, .42);
}

.breadcrumb{
  font-size: 14px;
  color: var(--muted);
  padding: 14px 0;
  background: var(--yellow-plane-top);
  border-bottom: 1px solid rgba(15, 122, 67, .10);
}
.breadcrumb__inner{
  box-sizing: border-box;
  width: min(
    100% - (var(--wrap-pad) * 2),
    var(--breadcrumb-max)
  );
  margin-inline: auto;
}
.breadcrumb ol{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.breadcrumb li{ display: inline-flex; gap: 8px; align-items: center; }
.breadcrumb li:not(:last-child)::after{ content: "/"; color: #9ca3af; }

/* ------------------------------------------------------------
  Hero — 背景＋左コピー・CTAのみ（引き算レイアウト）
------------------------------------------------------------ */

/* ==================================================
  09. TOP Page
  --------------------------------------------------
  TOP: MV / Hero
================================================== */

.hero{
  position: relative;
  isolation: isolate;
  min-height: min(82vh, 880px);
  padding: 0;
  border-bottom: none;
  display: flex;
  align-items: stretch;
  color: #fff8ec;
  background: var(--navy-900);
  /* 既定：MVも本文とは別に上書き可能 */
}
.page--home .hero{
  /* TOP MV専用の横幅（ヘッダー/本文と切り離す） */
  --wrap-max: 1440px;
  /* 他セクション（container--wide）の左端と揃える */
  --wrap-pad: clamp(20px, 3.8vw, 56px);
  /* MV内の下揃え基準（RECRUITボタンと共有） */
  --mv-bottom: clamp(14px, 3vw, 44px);
}
.hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    var(--dummy-hero) center / cover no-repeat;
  overflow: hidden;
  /* クリックを邪魔しない */
  pointer-events: none;
}
.page--home .hero__bg{
  /* TOPだけ背景を静かにスライド（文字・ボタンは固定） */
  background: none;
}
.page--home .hero__bg-slide{
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* cover 相当 */
  opacity: 0;
  will-change: opacity;
  animation: hero-bg-fade 15s linear infinite;
}
.page--home .hero__bg-slide--1{
  background-image: url("../images/top/pc/mv_01.webp");
  animation-delay: 0s;
}
.page--home .hero__bg-slide--2{
  background-image: url("../images/top/pc/mv_02.webp");
  animation-delay: 5s;
}
.page--home .hero__bg-slide--3{
  background-image: url("../images/top/pc/mv_03.webp");
  animation-delay: 10s;
}
@keyframes hero-bg-fade{
  0%{ opacity: 0; }
  6%{ opacity: 1; }      /* フェードイン */
  32%{ opacity: 1; }     /* しばらく静止 */
  38%{ opacity: 0; }     /* フェードアウト */
  100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .page--home .hero__bg-slide{
    animation: none;
    opacity: 0;
  }
  .page--home .hero__bg-slide--1{ opacity: 1; }
}
.hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 暖色寄りのシェード（冷たいスレートを避ける） */
  background: rgba(42, 30, 14, .62);
}
.hero__inner{
  position: relative;
  z-index: 2;
  display: block;
  padding: clamp(5.5rem, 14vh, 7.5rem) 0 clamp(4.5rem, 11vh, 6.5rem);
}
.page--home .hero__inner.container{
  /* MVは他セクションと幅を統一しない（左端をヘッダーロゴ基準へ） */
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
}
.hero--impact .hero__inner{
  /* 左の暗いコピーエリア内でバランスよく（画面全体の中央揃えはしない） */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  /* キャッチをさらに下げて視線バランスを取る（vh＋remの上限で極端に下げすぎない） */
  padding-top: clamp(9rem, 40vh, 17rem);
  padding-bottom: clamp(4rem, 10vh, 6rem);
  padding-right: var(--wrap-pad);
  box-sizing: border-box;
}

/* TOP MV：コピー塊を左下へ（構造は維持） */
.page--home .hero--impact .hero__inner{
  align-items: flex-end;
  /* もう少し下に落として左下に寄せる */
  /* vh依存を弱めて、幅/高さが変わっても左下基準がブレないようにする */
  padding-top: clamp(6.5rem, 18vh, 9.5rem);
  /* 下揃えを強める（下端へ寄せる） */
  padding-bottom: var(--mv-bottom);
}

/* TOP MV：タブレット/スマホは高さをコンパクトに（このセクションのみ） */
@media (max-width: 1024px){
  .page--home .hero.hero--impact{
    min-height: min(56vh, 560px);
  }
  .page--home .hero--impact .hero__inner{
    padding-top: clamp(3.5rem, 10vh, 5.5rem);
    padding-bottom: 4.2rem; /* CTAと干渉しにくい最低ライン */
  }
}
@media (max-width: 768px){
  .page--home .hero.hero--impact{
    min-height: min(64vh, 520px);
  }
  .page--home .hero--impact .hero__inner{
    padding-top: clamp(3rem, 8vh, 4.5rem);
    padding-bottom: 4.2rem;
  }
}
.page--home .hero--impact .hero__main{
  margin-top: auto;
  padding-left: 1.1rem;
}

/* TOP MV：ノートPC〜タブレット以上は RECRUIT と同じ bottom 基準で“下揃え” */
@media (min-width: 769px){
  .page--home .hero--impact .hero__inner{
    position: relative;
  }
  .page--home .hero--impact .hero__main{
    position: absolute;
    left: var(--wrap-pad);
    bottom: var(--mv-bottom);
    margin: 0;
    padding-left: 1.1rem; /* 縦ライン分の内側余白 */
    max-width: min(34rem, calc(100% - (var(--wrap-pad) * 2)));
  }
}

/* 1440px相当の見え方を基準に、下端位置を揃える */
@media (max-width: 1280px){
  .page--home .hero--impact .hero__inner{
    padding-bottom: clamp(4rem, 5vh, 5.1rem);
  }
}
@media (max-width: 768px){
  .page--home .hero--impact .hero__inner{
    padding-bottom: 4.2rem; /* CTAと干渉しにくい最低ライン */
  }
  .page--home .hero--impact .hero__main{
    padding-left: 1rem;
  }
}
.hero__main{
  max-width: 36rem;
  margin-left: clamp(0.75rem, 5.5vw, 5rem);
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero--impact .hero__main{
  /* 左オーバーレイ内・画面左から約10〜12%相当のガター（写真中央へ食い込みすぎない） */
  margin-left: 0;
  margin-right: auto;
  max-width: min(46rem, calc(100% - 1rem));
  width: 100%;
  position: relative;
  padding-left: 1.35rem;
  box-sizing: border-box;
}
/* 左端フルハイトの帯はやめ、コピー塊に付随するアクセントに変更（HTML の .hero__accent-bar は非表示） */
.hero--impact .hero__main::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  bottom: 0.15rem;
  width: 5px;
  border-radius: 2px;
  background: var(--accent);
  pointer-events: none;
}
.hero__badge{
  margin: 0 0 1rem;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(35, 26, 14, .52);
  color: rgba(255, 248, 235, .95);
}
.hero__title{
  margin: 0 0 1.25rem;
  font-size: clamp(30px, 3.9vw, 44px);
  line-height: 1.22;
  letter-spacing: .02em;
  color: #ffffff;
  font-weight: 800;
  text-shadow:
    0 1px 2px rgba(35, 24, 12, .5),
    0 12px 40px rgba(45, 32, 16, .4);
}

/* TOP MV：コピーの存在感を上げる（構造は維持／サイズ感のみ調整） */
.page--home .hero--impact .hero__title{
  /* 依頼：現状比 約1.5倍 */
  /* 1440px付近から段階的に小さくなるように（上限で張り付かない） */
  /* 1920pxを基準に、そこから下は少しずつ小さくなる */
  font-size: clamp(46px, 4.1vw, 96px);
  line-height: 1.3;
  letter-spacing: .01em;
  margin-bottom: .6rem;
}
.page--home .hero--impact .hero__title-line:last-child{
  white-space: nowrap; /* 「現場」と「力」を分断しない */
}
/* TOP MV：スマホのみキャッチを3行固定にする（このMVのみ） */
.page--home .hero--impact .hero__title-line-part--sp{ display: none; }
.page--home .hero--impact .hero__title-line-part--pc{ display: inline; }

/* TOP MV：タブレット〜ノート幅での収まりを最適化（このセクションのみ） */
@media (max-width: 1024px){
  .page--home .hero--impact .hero__title{
    font-size: clamp(40px, 6vw, 64px);
  }
}
.page--home .hero--impact .hero__lead{
  /* MVはキャッチを主役に（補足文は直下セクションで補完） */
  display: none;
  max-width: 56ch; /* 1〜2行に収めやすく */
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255, 248, 238, .92);
}

/* TOP MV：スマホは文字切れを防ぐ（このセクションのみ） */
@media (max-width: 640px){
  .page--home .hero--impact .hero__title{
    /* SP最優先：はみ出し防止（画面内に必ず収める） */
    font-size: clamp(28px, 7.6vw, 36px);
    line-height: 1.18;
    max-width: 100%;
  }
  .page--home .hero--impact .hero__title-line--accent{
    white-space: nowrap; /* 1行目は固定（低圧・高圧・弱電まで、） */
  }
  .page--home .hero--impact .hero__title-line-part--pc{ display: none; }
  .page--home .hero--impact .hero__title-line-part--sp{
    display: block; /* 2〜3行目を固定表示 */
    white-space: normal;
  }
  .page--home .hero--impact .hero__main{
    /* 余白/幅を画面内に収める（このMVのみ） */
    margin-left: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .page--home .hero--impact .hero__main{
    max-width: none;
  }
}
@media (max-width: 390px){
  .page--home .hero--impact .hero__title{
    font-size: clamp(26px, 7.8vw, 34px);
    max-width: 100%;
  }
}
.hero__lead{
  margin: 0 0 2rem;
  max-width: 38rem;
  color: rgba(255, 248, 238, .94);
  font-size: 15px;
  line-height: 1.82;
}
.hero--impact .hero__lead{
  /* MV内ボタン削除に合わせ、下の余白を詰める */
  margin-bottom: .75rem;
}
/* MV内CTA（TOPでは削除済み） */

/* 右下：採用バナー（合同電設のようにMVの世界観に乗せる） */
.hero-recruit{
  position: absolute;
  right: clamp(12px, 2.2vw, 40px);
  bottom: clamp(14px, 3vw, 44px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  color: var(--on-yellow);
  background: var(--main);
  border: 1px solid rgba(180, 134, 11, .52);
  box-shadow:
    0 18px 55px rgba(0,0,0,.32),
    0 6px 18px rgba(17, 24, 39, .14);
  transform: translateZ(0);
  width: clamp(360px, 38vw, 560px);
  /* どの要素よりも前面にして、確実にクリック可能にする */
  z-index: 6;
  pointer-events: auto;
}

/* TOP MV：RECRUITボタンも下揃え基準を共有 */
.page--home .hero-recruit{
  bottom: var(--mv-bottom);
}
.hero-recruit:hover{
  text-decoration: none;
  filter: brightness(1.02);
  box-shadow:
    0 22px 64px rgba(0,0,0,.36),
    0 8px 22px rgba(17, 24, 39, .16);
}
.hero-recruit__top{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
  opacity: .95;
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .14);
  border: 1px solid rgba(17, 24, 39, .12);
}
.hero-recruit__main{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .06em;
  flex: 1 1 auto;
}
.hero-recruit__sub{
  font-size: 12px;
  font-weight: 900;
  color: rgba(17, 24, 39, .78);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-recruit__sub::after{
  content: "→";
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, .18);
  background: rgba(255, 255, 255, .24);
  display: inline-grid;
  place-items: center;
}

/* 下層ページ main 末尾に置いた .hero-recruit：PC では非表示（タブレット以下のみ黄色固定 CTA） */
@media (min-width: 1025px){
  body:not(.page--home) .hero-recruit{
    display: none !important;
  }
  /* TOP（PC）：採用導線はヘッダー右CTAに集約し、MV内（.hero-recruit）は非表示 */
  .page--home .hero-recruit{
    display: none !important;
  }
}

@media (max-width: 960px){
  /* TOP：MV上でも半透明白ヘッダー（PCと同一トーン） */
  .page--home .site-header{
    position: fixed;
    background: rgba(255, 255, 255, .86);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 3px 14px rgba(17, 24, 39, .05);
  }
  .hero-recruit{ right: 12px; bottom: 12px; padding: 12px 14px; }
}

@media (max-width: 640px){
  .hero-recruit{ left: 12px; right: 12px; min-width: auto; width: calc(100% - 24px); max-width: none; }
  .hero-recruit__top{ font-size: 10px; padding: 5px 8px; }
  .hero-recruit__main{ font-size: 15px; }
  .hero-recruit__sub{ font-size: 12px; }
}

/* --------------------------------------------------
  TOP: Section tokens & surfaces（Service / Works / Recruit 等）
-------------------------------------------------- */
.page--home{
  --top-black: #111827;
  --top-ink: #0b1220;
  --top-gray-1: #f3f4f6;
  --top-gray-2: #e5e7eb;
  /* TOPの「薄い面」は全体ルールに合わせてグレーへ */
  --top-yellow: var(--yellow-plane-top);
  --top-yellow-strong: var(--yellow-plane-deep);
  --top-green: var(--accent);
  /* TOP内「1440px基準セクション」用の左右余白（基準線） */
  --home-wide-pad: clamp(20px, 3.8vw, 56px);
}

/* 余白ルール（PCの見え方を統一） */
.page--home .section{
  padding: 72px 0;
  border-top-color: rgba(17, 24, 39, .10);
}
.page--home .section-head{
  margin-bottom: 20px;
}
.page--home .lead{
  margin-bottom: 22px;
}
.page--home .home-section-actions{
  /* PC：一覧ボタンは見出し横（.section-head > .btn）のみを表示 */
  display: none;
}
/* TOP：見出し左の縦線（黄→緑）を共通化 */
.page--home{
  --home-title-bar-w: 5px;
  --home-title-bar-pad: 14px;
}
/* TOP：事業内容タイトル左に縦棒（黄→緑） */
.page--home .section--biz .home-biz-title{
  position: relative;
  padding-left: var(--home-title-bar-pad);
}
.page--home .section--biz .home-biz-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: var(--home-title-bar-w);
  border-radius: 999px;
  background: var(--brand-line-grad-y);
  opacity: .95;
}

/* TOP：WORKS / NEWS（見出し横ボタンのある section-head） */
.page--home .section-head.section-head--impact > div{
  position: relative;
  padding-left: var(--home-title-bar-pad);
}
.page--home .section-head.section-head--impact > div::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: var(--home-title-bar-w);
  border-radius: 999px;
  background: var(--brand-line-grad-y);
  opacity: .95;
}

/* TOP：採用バナー内タイトル */
.page--home .recruit-kv__copy .home-kv-title{
  position: relative;
}
.page--home .recruit-kv__copy .home-kv-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: var(--home-title-bar-w);
  border-radius: 999px;
  background: var(--brand-line-grad-y);
  opacity: .95;
}

/* TOP：会社情報タイトル */
.page--home .company-teaser__copy .home-company-title{
  position: relative;
  padding-left: var(--home-title-bar-pad);
}
.page--home .company-teaser__copy .home-company-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: var(--home-title-bar-w);
  border-radius: 999px;
  background: var(--brand-line-grad-y);
  opacity: .95;
}

/* セクション面の切替（白/黄/グレー） */
.page--home .section--surface{
  background: #ffffff;
}
.page--home .section--biz{
  background: #ffffff;
  /* 採用スポットと同程度の横幅（container--wide）＋メイン級の余白 */
  padding-top: clamp(64px, 7vw, 92px);
  padding-bottom: clamp(64px, 7vw, 92px);
}
.page--home .section--works-showcase,
.page--home .company-teaser{
  background: var(--top-yellow);
}
/* TOPの 1440px基準セクションは container--wide の左右余白を統一 */
.page--home .container--wide{
  --wrap-max: 1440px;
  --wrap-pad: var(--home-wide-pad);
}
/* TOPヘッダーも基準線に揃える（下層 1024px設計には影響させない） */
.page--home .site-header{
  padding-left: var(--home-wide-pad);
  padding-right: var(--home-wide-pad);
}
/* 事業内容：スクショのように左右余白をしっかり確保 */
.page--home .section--biz .container--wide{
  --wrap-max: 1440px;
  --wrap-pad: var(--home-wide-pad);
}

/* 会社概要：事業内容と同じ横幅・余白ルールで“1塊の2カラム”に */
.page--home .company-teaser .container--wide{
  --wrap-max: 1440px;
  --wrap-pad: var(--home-wide-pad);
}
/* 事業セクション冒頭：信頼・実績・人 → 事業への導入（2カラム） */
.page--home .section--biz .biz-section-lead{
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 4.2vw, 72px);
  align-items: stretch;
}
.page--home .section--biz .biz-section-lead__copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(6px, 1vw, 14px) 0;
  position: relative;
}
.page--home .section--biz .biz-section-lead__catch{
  margin: -2px 0 10px;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--accent-2);
}
.page--home .section--biz .biz-section-lead__copy .h2--display{
  margin-bottom: clamp(12px, 2vw, 18px);
}
.page--home .section--biz .biz-section-lead .h2__ja{
  font-size: clamp(28px, 3.2vw, 42px);
}
.page--home .section--biz .biz-section-lead__text{
  margin-top: clamp(10px, 1.4vw, 16px);
  margin-bottom: clamp(18px, 2.2vw, 24px);
  font-size: clamp(15px, 1.12vw, 17px);
  line-height: 1.85;
  padding-bottom: 14px;
  padding-left: 20px; /* PC：説明文のみ少し内側へ */
}

/* TOP「事業内容」：箇条書きの左位置を微調整（このセクションのみ） */
.page--home .section--biz .biz-block__points{
  margin-left: 20px; /* PC */
  padding-left: 18px; /* 既定値を明示（他の影響を受けないように） */
}

/* TOP「事業内容」内の小見出しは、事業内容ページ（概要/特徴）と同じ見出しデザインに揃える */
.page--home .section--biz .biz-block__subhead{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px 20px; /* PC：箇条書きの位置と揃えて自然につなぐ */
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--accent-2);
}
.page--home .section--biz .biz-block__subhead::before{
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: .9;
}
.page--home .section--biz .biz-section-lead__actions .btn{
  min-width: min(260px, 100%);
}
.page--home .section--biz .biz-section-lead__visual{
  min-height: clamp(280px, 34vw, 520px);
  border-radius: 26px;
  background: var(--dummy-biz) center / cover no-repeat;
  border: 1px solid rgba(15, 122, 67, .14);
  box-shadow: 0 18px 60px rgba(17, 24, 39, .1);
  position: relative;
  overflow: hidden;
}
.page--home .section--biz .biz-section-lead__visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(42, 30, 14, .14);
  pointer-events: none;
}

@media (max-width: 1024px){
  /* タブレット・スマホ：箇条書きのみ左位置を約10px */
  .page--home .section--biz .biz-section-lead__text{
    padding-left: 10px;
  }
  .page--home .section--biz .biz-block__subhead{
    margin: 0 0 10px 10px;
  }
  .page--home .section--biz .biz-block__points{
    margin-left: 10px;
    padding-left: 18px;
  }
}

@media (max-width: 768px){
  /* スマホ：左余白は付けない（タイトル/ボタン以外もリセット） */
  .page--home .section--biz .biz-section-lead__text{
    padding-left: 0;
  }
  .page--home .section--biz .biz-block__subhead{
    margin-left: 0;
  }
  .page--home .section--biz .biz-block__points{
    margin-left: 0;
  }
}
@media (max-width: 960px){
  .page--home .section--biz .biz-section-lead{
    grid-template-columns: 1fr;
  }
  .page--home .section--biz .biz-section-lead__visual{
    order: -1;
    min-height: clamp(220px, 52vw, 320px);
  }
  .page--home .section--biz .biz-section-lead__text{
    max-width: none;
  }
}
.page--home .section--works-showcase{
  border-bottom: 1px solid rgba(17, 24, 39, .10);
  box-shadow: none;
}
.page--home .recruit-teaser--panel{
  background: var(--top-yellow);
  border-bottom: 1px solid rgba(17, 24, 39, .10);
}
.page--home .cta--warm:not(.cta--contact){
  background: var(--top-yellow);
  border-top: 1px solid rgba(17, 24, 39, .10);
}

/* 見出し（英字は補助、和文が主役） */
.page--home .kicker{
  color: var(--top-green);
}
.page--home .kicker::before{
  background: var(--top-green);
  opacity: 1;
}
.page--home .h2__ja{
  color: var(--top-black);
}
.page--home .h2__en{
  color: rgba(17, 24, 39, .50);
}
.page--home .lead{
  color: rgba(17, 24, 39, .72);
}

/* ボタン：下層と同じ黄緑枠・白面（TOPも統一） */
.page--home .btn--primary:hover{
  color: #000;
}
.page--home .btn--recruit{
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  border: var(--btn-outline-w) solid transparent;
  color: var(--top-black);
  box-shadow: 0 4px 16px rgba(17, 24, 39, .08);
}
.page--home .btn--recruit:hover{
  background-image:
    linear-gradient(#fffef9, #fffef9),
    var(--btn-outline-grad);
  color: var(--top-black);
}

/* WORKSカード：写真比率/余白/導線を仕上げ */
.page--home .section--works-showcase .work-card{
  background: #ffffff;
  border-color: rgba(17, 24, 39, .10);
  box-shadow: 0 18px 44px rgba(17, 24, 39, .10);
}
.page--home .section--works-showcase .work-card:hover{
  border-color: rgba(15, 122, 67, .26);
  box-shadow: 0 26px 60px rgba(17, 24, 39, .14);
}
.page--home .badge{ background: rgba(15, 122, 67, .08); border-color: rgba(15, 122, 67, .18); color: var(--top-green); }
.page--home .chip--accent{ background: rgba(232, 188, 30, .14); border-color: rgba(232, 188, 30, .28); color: rgba(17, 24, 39, .72); }
.page--home .news-cat{
  background: rgba(232, 188, 30, .14);
  border-color: rgba(180, 134, 11, .42);
  color: var(--main-2);
}
.page--home .news-cat--works{
  background: rgba(15, 122, 67, .08);
  border-color: rgba(15, 122, 67, .18);
  color: var(--accent-2);
}

/* MV：写真＋明るめオーバーレイ（TOP MVのみ） */
.page--home .hero{
  /* 写真読み込み前の下地も明るめに */
  background: #e8ecf1;
}
.page--home .hero--bright .hero__overlay,
.page--home .hero--impact.hero--bright .hero__overlay{
  /* 白〜透明に近いヴェールで全体を明るく（現場写真は残す） */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .18) 55%, rgba(255, 255, 255, .10) 100%),
    rgba(17, 24, 39, .14);
}
.page--home .hero__accent-bar,
.page--home .hero__main::before{
  background: var(--brand-line-grad-y);
  box-shadow: none;
}
.page--home .hero__catch-en{
  color: rgba(255, 255, 255, .88);
  text-shadow:
    0 1px 2px rgba(17, 24, 39, .55),
    0 6px 18px rgba(17, 24, 39, .25);
}
.page--home .hero__lead{
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 14px rgba(0,0,0,.35);
}

/* MV明る化に合わせ：黄ラインは維持、白文字は輪郭を強めて可読性確保 */
.page--home .hero--bright .hero__title-line--accent,
.page--home .hero--impact.hero--bright .hero__title-line--accent{
  text-shadow:
    0 1px 2px rgba(17, 24, 39, .42),
    0 2px 22px rgba(17, 24, 39, .28);
}
.page--home .hero--bright .hero__title-line:last-child,
.page--home .hero--impact.hero--bright .hero__title-line:last-child{
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(17, 24, 39, .92),
    0 2px 18px rgba(17, 24, 39, .62),
    0 8px 42px rgba(17, 24, 39, .38);
}

/* 採用：黄色面＋写真で見せ場に（英字背景は使わない） */
.page--home .recruit-banner{
  border-color: rgba(17, 24, 39, .12);
  box-shadow: 0 26px 70px rgba(17, 24, 39, .16);
  background: rgba(255,255,255,.96);
}
.page--home .recruit-banner__panel{
  background: rgba(255,255,255,.96);
}
.hero__btns{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
}
.hero__btns .btn--hero-primary{
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 800;
  border: 1px solid rgba(180, 134, 11, .45);
  background: var(--main);
  color: var(--on-yellow);
  box-shadow: 0 2px 10px rgba(17, 24, 39, .12);
}
.hero__btns .btn--hero-primary:hover{
  background: #f0c940;
  border-color: rgba(146, 110, 15, .52);
  box-shadow: 0 3px 12px rgba(17, 24, 39, .14);
  color: var(--on-yellow);
  text-decoration: none;
}
.hero__btns .btn--hero-secondary{
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(248, 250, 252, .95);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .38);
}
.hero__btns .btn--hero-secondary:hover{
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .52);
  color: #fff;
  text-decoration: none;
}

/* Hero — 合同電設寄り：キャッチ・帯・オーバーレイ強化 */
.hero--impact{
  min-height: min(88vh, 920px);
}
/* 暗さのピークを左〜やや左寄りに（コピーエリア内で読みやすく、右は写真を残す） */
.hero--impact .hero__overlay{
  background: rgba(0, 0, 0, .62);
}
.hero__accent-bar{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  z-index: 2;
  background: var(--accent);
}
.hero--impact .hero__accent-bar{
  /* 帯は .hero__main::before に移し、コピー塊と一体に */
  display: none;
}
.hero__catch-en{
  margin: 8px 0 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 700;
  font-style: italic;
  letter-spacing: .16em;
  color: rgba(253, 230, 138, .95);
  text-transform: none;
}
.hero__title-line{
  display: block;
}
.hero__title-line--accent{
  color: var(--main);
  text-shadow: 0 1px 14px rgba(20, 12, 6, .45);
}
.hero--impact .hero__title{
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.14;
  letter-spacing: .03em;
}
.hero--impact .hero__badge{
  border-left: 3px solid var(--heat);
  padding-left: 12px;
  background: rgba(25, 20, 12, .42);
  border-color: rgba(255, 255, 255, .18);
}
.hero--impact .hero__lead{
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 1.85;
  max-width: 36rem;
  border-left: none;
  padding-left: 0;
  margin-left: 0;
  color: rgba(255, 250, 240, .95);
  text-shadow: 0 1px 14px rgba(20, 12, 6, .45);
}

/* MV直下の導線帯（TOPから削除済み） */

.section--biz{
  background: #ffffff;
  border-top: 1px solid rgba(15, 122, 67, .08);
  position: relative;
}
.section--biz::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--accent);
  opacity: .98;
}
/* MV直下（TOP事業導入）の緑ラインは出さない */
.page--home .section--biz::before{
  display: none;
}

/* TOP 事業セクション冒頭 `.biz-section-lead`（index.html）— `.page--home .section--biz` 内で定義 */

/* TOP 事業内容：説明ではなく「導線」1本で見せる（レガシー・未使用HTML向け） */
.biz-teaser{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
}
.biz-teaser__copy{
  padding: clamp(6px, 1.2vw, 10px) 0;
}
.biz-teaser__title{
  margin: 10px 0 10px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--accent-2);
  line-height: 1.12;
}
.biz-teaser__lead{
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.9;
}
.biz-teaser__actions .btn{
  min-width: min(320px, 100%);
}
.biz-teaser__visual{
  border-radius: 22px;
  min-height: clamp(220px, 26vw, 340px);
  background: var(--biz-visual, var(--dummy-biz)) center / cover no-repeat;
  box-shadow: 0 18px 44px rgba(17, 24, 39, .14);
  border: 1px solid rgba(15, 122, 67, .14);
  position: relative;
  overflow: hidden;
}
.biz-teaser__visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, .22);
  pointer-events: none;
}

@media (max-width: 960px){
  .biz-teaser{
    grid-template-columns: 1fr;
  }
  .biz-teaser__visual{
    order: -1;
    min-height: 220px;
  }
  .biz-teaser__lead{
    max-width: none;
  }
}

/* --------------------------------------------------
  TOP: Service showcase
-------------------------------------------------- */

/* ==================================================
  12. Page Specific
  --------------------------------------------------
  Service（事業内容ページ）
================================================== */

.biz-showcase{
  margin-top: clamp(18px, 2.4vw, 26px);
  display: grid;
  gap: clamp(18px, 3.2vw, 34px);
}
.service-biz{
  padding: clamp(56px, 7vw, 84px) 0;
  border-top: 1px solid rgba(15, 122, 67, .10);
}
/* 導入セクション直後は区切り線を出さない */
.section.section--tight + .service-biz{ border-top: none; }
.service-biz--white{ background: #fff; }
.service-biz--yellow{ background: var(--yellow-plane-top); }
.service-biz__inner{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3.2vw, 54px);
  align-items: start;
}
.service-biz--reverse .service-biz__inner{
  grid-template-columns: .95fr 1.05fr;
}
.service-biz--reverse .service-biz__media{ order: 2; }
.service-biz--reverse .service-biz__body{ order: 1; }
.service-biz__media{
  min-height: clamp(240px, 28vw, 420px);
  background: center / cover no-repeat;
  border-radius: 22px;
  border: 1px solid rgba(15, 122, 67, .12);
  position: relative; /* img表示（abs）用。PCは後段で sticky に上書き */
  overflow: hidden;
}
.service-biz__media-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.service-biz__media{
  /* sticky時のために“自分の高さで止まれる”ようにする（常時無害） */
  align-self: start;
}
.service-biz__body{
  padding-top: 6px;
}
.service-biz__requests{
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.85;
  max-width: 70ch;
}

/* Service: 見出し（項目ラベル感＋控えめな線演出） */
.service-biz .biz-block__kicker{
  margin: 0 0 8px;
  color: #000;
}
.service-biz .biz-block__title{
  color: #000;
  margin: 0 0 14px;
  line-height: 1.25;
}
.service-biz .biz-block__subhead{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--accent-2);
}
.service-biz .biz-block__subhead::before{
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: .9;
}

/* Recruit: 「仕事のポイント」見出しを Service の項目見出しに揃える */
body.page-recruit .recruit-points__heading.biz-block__subhead{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--accent-2);
}
body.page-recruit .recruit-points__heading.biz-block__subhead::before{
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: .9;
}

/* Recruit: 応募・ご相談カード内の項目見出しも同ルールに */
body.page-recruit #entry .entry-subhead.biz-block__subhead{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--accent-2);
}
body.page-recruit #entry .entry-subhead.biz-block__subhead::before{
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: .9;
}

/* 応募・ご相談：フォームボタンは他ボタンと同じサイズ感に */
body.page-recruit #entry .entry-form-btn{
  min-width: min(260px, 100%);
  justify-content: center;
}
.service-biz .biz-block__subhead + .biz-block__lead{
  margin-top: 0;
}

@media (max-width: 960px){
  .service-biz__inner,
  .service-biz--reverse .service-biz__inner{
    grid-template-columns: 1fr;
  }
  .service-biz--reverse .service-biz__media{ order: 0; }
  .service-biz__media{ min-height: 220px; }
}

/* Service（事業内容）：画像カラムをsticky（PC〜ノートPCまで） */
@media (min-width: 961px){
  .service-biz__media{
    position: sticky;
    top: 96px; /* stickyヘッダー分＋視認余白 */
    max-height: calc(100vh - 96px - 24px);
  }
}
.biz-block{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(16px, 3vw, 44px);
  align-items: center;
  background: var(--main-weak-2);
  border: 1px solid rgba(15, 122, 67, .12);
  border-radius: 24px;
  overflow: clip;
  box-shadow: 0 18px 55px rgba(17, 24, 39, .08);
}
.biz-block--reverse{
  grid-template-columns: .95fr 1.05fr;
}
.biz-block--reverse .biz-block__media{ order: 2; }
.biz-block--reverse .biz-block__body{ order: 1; }

.biz-block__media{
  min-height: clamp(240px, 28vw, 420px);
  background: center / cover no-repeat;
  position: relative;
}
.biz-block__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(42, 30, 14, .35);
  pointer-events: none;
}
.biz-block__body{
  padding: clamp(18px, 2.8vw, 32px);
}
.biz-block__kicker{
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  color: var(--accent-2);
  text-transform: uppercase;
}
.biz-block__title{
  margin: 0 0 10px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--accent-2);
  list-style: 1;
}
.biz-block__lead{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.95;
}
.biz-block__points{
  margin: 0 0 18px;
  padding-left: 18px;
  color: #475569;
  display: grid;
  gap: 6px;
}
.biz-block__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 30px;
}
.biz-block__actions .btn{
  min-width: min(260px, 100%);
}
.biz-block__recruit{
  margin: 14px 0 0;
  color: rgba(30, 41, 51, .9);
  font-weight: 700;
}
.biz-block__recruit .link{ font-weight: 900; }

/* Service: 事業ブロック内の詳細（下層で読む想定の情報量） */
.biz-block__details{
  margin-top: 18px;
  display: grid;
  gap: 18px;
}
.biz-block__subhead{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--accent-2);
}
.biz-block__list{
  margin: 0;
  padding-left: 18px;
  color: #475569;
  display: grid;
  gap: 6px;
}
.biz-block__works-note{
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.85;
}

@media (max-width: 960px){
  .biz-block,
  .biz-block--reverse{
    grid-template-columns: 1fr;
  }
  .biz-block--reverse .biz-block__media{ order: 0; }
  .biz-block__media{
    min-height: 220px;
  }
  .biz-block__media::after{
    background: rgba(42, 30, 14, .35);
  }
}

/* 下層ページでも事業ブロックを使う */
.page-biz .biz-showcase{
  margin-top: 0;
}
.page-biz .biz-block{
  margin-top: clamp(14px, 2.2vw, 18px);
}

/* ------------------------------------------------------------
  Works: 一覧（カテゴリ/業種の絞り込みUIの土台）
------------------------------------------------------------ */
.works-cat-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 16px;
}
.works-cat-nav a,
.works-cat-nav__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(15, 122, 67, .16);
  background: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 13px;
  color: var(--accent-2);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(17, 24, 39, .06);
}
.works-cat-nav__btn{
  cursor: pointer;
  appearance: none;
}
.works-cat-nav a:hover,
.works-cat-nav__btn:hover{
  background: rgba(15, 122, 67, .06);
  border-color: rgba(15, 122, 67, .28);
}
.works-cat-nav a[aria-current="true"]{
  background: var(--accent);
  border-color: rgba(15, 122, 67, .75);
  color: #fff;
}
.works-cat-nav__btn.is-active{
  background: var(--accent);
  border-color: rgba(15, 122, 67, .75);
  color: #fff;
}
.works-cat-nav__btn.is-active:hover{
  background: rgba(15, 122, 67, .92);
  border-color: rgba(15, 122, 67, .92);
  color: #fff;
}
.works-cat-nav__btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(17, 24, 39, .08);
}

/* 既存カードを「work-card」に寄せて説得力を出す */
.works-grid{
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* 施工実績一覧グリッド内：概要文のみ2行で省略（page-works かつ #works-list 内。詳細・TOP・お知らせには影響しない） */
body.page-works .works-grid .work-card .card__text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 960px){
  /* 施工実績一覧：タブレット以降も2カラムで一覧性を維持 */
  .works-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  /* 施工実績一覧（スマホ）：1カラムで読みやすさ優先（詳細ページには影響させない） */
  body.page-works .works-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.page-works .works-grid .card__body{
    padding: 14px 14px 12px;
  }
  body.page-works .work-card__meta{
    margin-bottom: 8px;
    font-size: 12px;
  }
  body.page-works .work-card .card__title{
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  body.page-works .works-grid .work-card .card__text{
    font-size: 12.5px;
    line-height: 1.75;
  }
  body.page-works .work-card__cta{
    margin-top: 12px;
  }
}

/* 施工実績一覧：カード全体がリンクのため「詳細を見る」導線は非表示（全幅共通） */
body.page-works .work-card__cta{
  display: none;
}

.work-card--list{
  position: relative;
  padding-top: 4px;
  border-radius: 18px;
  overflow: clip;
  border: 1px solid rgba(15, 122, 67, .18);
  border-top: none;
  box-shadow: 0 14px 36px rgba(45, 38, 20, .08);
}
.work-card--list::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: var(--accent);
  pointer-events: none;
  z-index: 2;
}
.work-card--list:hover{
  border-color: rgba(15, 122, 67, .32);
  box-shadow: 0 22px 48px rgba(45, 38, 20, .12);
}
.work-card--clickable{
  cursor: pointer;
}
.work-card--clickable:hover .card__title{
  text-decoration: underline;
}
.work-card--list .media{
  border-bottom: 1px solid rgba(15, 122, 67, .12);
}

/* 実績詳細：文章テンプレを“読み物”にする */
.case-block{
  padding: 14px 0;
  border-top: 1px solid rgba(15, 122, 67, .10);
}
.case-block:first-child{ border-top: none; padding-top: 0; }
.case-block h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  color: var(--accent-2);
  letter-spacing: .03em;
}
.case-block p{ margin: 0; color: var(--muted); line-height: 1.95; }

/* 採用文脈ブロック（詳細/下層共通で使える） */
.recruit-context{
  background: #fff;
  border: 1px solid rgba(15, 122, 67, .14);
  border-radius: 24px;
  padding: clamp(18px, 2.6vw, 28px);
  box-shadow: 0 10px 28px rgba(17, 24, 39, .05);
}
.recruit-context__title{
  margin: 0 0 10px;
  font-weight: 900;
  color: var(--accent-2);
  letter-spacing: .03em;
}
.recruit-context__title.biz-block__subhead{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--accent-2);
}
body.page-recruit .recruit-context__title.biz-block__subhead::before{
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: .9;
}
.recruit-context__text{
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.95;
}
.recruit-context__list{
  margin: 0;
  padding-left: 18px;
  color: #475569;
  display: grid;
  gap: 8px;
}
body.page-recruit .recruit-context__list li{
  line-height: 1.8;
}
body.page-recruit .recruit-context__list strong{
  color: var(--ink);
  font-weight: 900;
}

/* 採用：働く人の声（`#fit` と同系統、少しシンプル） */
body.page-recruit .recruit-voice{
  padding: clamp(16px, 2.2vw, 24px);
}
body.page-recruit .recruit-voice .recruit-context__text{
  margin-bottom: 0;
}

.section-head--impact .h2--display{
  margin-bottom: 0.35rem;
}
.h2--display{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.h2__ja{
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--accent-2);
  line-height: 1.2;
}
.h2__en{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--accent);
  text-transform: uppercase;
}

/* TOP：余白ルールを揃える（見出し周り/画像とテキストの距離） */
.page--home .section{
  padding: clamp(56px, 6vw, 72px) 0;
}
.page--home .section-head{
  margin-bottom: clamp(16px, 2.2vw, 22px);
}
.page--home .lead{
  margin-bottom: clamp(14px, 2vw, 22px);
}

.section--strength-warm{
  background: var(--yellow-plane-mid);
  border-top: 1px solid rgba(15, 122, 67, .1);
}
.section--strength-warm .feature{
  border-radius: 20px;
  border-left: 4px solid var(--accent);
}
.section--strength-warm .feature:hover{
  border-left-color: var(--main);
}

/* ------------------------------------------------------------
  TOP: 採用セクション（横長ビジュアルバナー／現場の入口）
  左＝太字の採用導線、中央＝現場写真、右＝CTA（黄はボタン中心・面で広げない）
------------------------------------------------------------ */
.section--recruit-kv{
  background: var(--bg);
  border-top: 1px solid rgba(15, 122, 67, .1);
  padding: clamp(32px, 4.8vw, 60px) 0;
  background: var(--yellow-plane-deep);
}
.recruit-kv{
  display: grid;
  grid-template-columns: minmax(320px, 40%) 1fr;
  align-items: stretch;
  min-height: clamp(220px, 26vw, 360px);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 122, 67, .14);
  box-shadow: var(--shadow-2);
}
.recruit-kv__copy{
  position: relative;
  background: var(--navy-900);
  color: #fff;
  padding: clamp(18px, 2.8vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 16px);
}
.recruit-kv__actions{
  margin-top: clamp(14px, 2vw, 18px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.recruit-kv__btn{
  width: min(280px, 100%);
  justify-content: center;
  text-align: center;
  font-weight: 900;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  min-height: 48px;
  border-radius: 999px;
}
.recruit-kv__en{
  margin: 0;
  padding-left: 14px;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
}
.recruit-kv__title{
  margin: 0;
  padding-left: 14px;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 900;
  letter-spacing: .06em;
  color: #fff;
}
.recruit-kv__lead{
  margin: 0;
  padding-left: 14px;
  font-size: clamp(13px, 1.35vw, 15px);
  font-weight: 650;
  line-height: 1.75;
  color: rgba(255, 255, 255, .86);
  max-width: 36em;
}
.recruit-kv__photo{
  position: relative;
  background: #2a2418;
  min-height: 220px;
  overflow: hidden;
}
.recruit-kv__photo-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* 矢印サークル：白面＋黄緑枠（本文ボタンと同系統） */
.recruit-kv__btn-ico{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: var(--btn-outline-w) solid transparent;
  background-color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  position: relative;
  box-shadow: 0 2px 8px rgba(17, 24, 39, .08);
}
.recruit-kv__btn-ico::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--accent-2);
  transform: translate(-45%, -50%);
}
@media (max-width: 960px){
  .recruit-kv{
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .recruit-kv__photo{
    min-height: clamp(200px, 42vw, 280px);
    order: 2;
  }
  .recruit-kv__copy{ order: 1; }
  .recruit-kv__actions{ margin-top: 14px; }
}

/* TOP：採用バナー（スマホのみ）— 画像→テキストの順に入れ替え */
@media (max-width: 640px){
  .page--home .recruit-kv__photo{ order: 1; }
  .page--home .recruit-kv__copy{ order: 2; }
}

/* 施工実績：黄色い「面」の上に白カード（参考：黄主役・緑で締める・白で抜く） */
.section--works-showcase{
  color: var(--text);
  border-top: none;
  border-bottom: 3px solid var(--accent);
  padding: 80px 0;
  position: relative;
}
.section--works-showcase > .container{ position: relative; z-index: 1; }
.section--works-showcase .kicker{
  color: var(--accent-2);
}
.section--works-showcase .kicker::before{
  background: var(--accent);
  height: 2px;
}
.section--works-showcase .h2__ja{ color: var(--accent-2); }
.section--works-showcase .h2__en{ color: var(--accent); }
.section--works-showcase .lead{
  color: var(--muted);
}
.section--works-showcase .work-card{
  position: relative;
  background: #fff;
  border: 1px solid rgba(15, 122, 67, .18);
  border-top: none;
  box-shadow: 0 14px 36px rgba(45, 38, 20, .1);
}
.section--works-showcase .work-card::before{
  content: none;
}
.section--works-showcase .work-card:hover{
  border-color: rgba(15, 122, 67, .32);
  box-shadow: 0 22px 48px rgba(45, 38, 20, .14);
}
.section--works-showcase .work-card .card__title{ color: var(--ink); }
.section--works-showcase .work-card .card__text{ color: var(--muted); }
.section--works-showcase .work-card__meta{ color: var(--muted); }
.page--home .section--works-showcase .home-works-empty{
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(28px, 5vw, 48px) 16px;
  text-align: center;
  color: var(--muted);
  line-height: 1.85;
  font-size: 15px;
}
.section--works-showcase .media--photo{
  background: #f8fafc;
}
.section--works-showcase .media__label{
  color: rgba(55, 48, 40, .9);
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 13px;
}
.section--works-showcase .work-card__cta .link--more,
body.page-works .work-card__cta .link--more{
  margin-top: 4px;
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 999px;
  border: var(--btn-outline-w) solid transparent;
  background-color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #000;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .03em;
  box-shadow: 0 3px 12px rgba(17, 24, 39, .07);
}
.section--works-showcase .work-card__cta .link--more:hover,
body.page-works .work-card__cta .link--more:hover{
  background-image:
    linear-gradient(#fffef9, #fffef9),
    var(--btn-outline-grad);
  box-shadow: 0 5px 16px rgba(17, 24, 39, .1);
  color: #000;
}
.section--works-showcase .link{
  color: var(--accent-2);
}
.section--works-showcase .link:hover{
  color: var(--accent);
}
.section--works-showcase .chip--accent{
  border: 1px solid rgba(15, 122, 67, .35);
  background: var(--accent-weak);
  color: var(--accent-2);
}
.section--works-showcase .btn--outline-light{
  width: 260px;
  justify-content: center;
}
.section--works-showcase .btn--outline-light:hover{
  color: #000;
}

@supports not (background-clip: text){
  .hero__title-line--accent{
    color: var(--main);
    background: none;
  }
}

.link--more::after{
  content: "→";
  display: inline-block;
  margin-left: 8px;
  font-weight: 900;
  color: var(--accent-2);
  transition: transform .15s ease;
}
.section--works-showcase .work-card__cta .link--more::after,
body.page-works .work-card__cta .link--more::after{
  color: var(--accent-2);
}
.link--more:hover::after{
  transform: translateX(3px);
}

/* 採用ページ：本文内の補助導線も同一トーンの枠線ボタンに */
body.page-recruit a.link--more{
  margin-top: 0;
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 999px;
  border: var(--btn-outline-w) solid transparent;
  background-color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #000;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .03em;
  box-shadow: 0 3px 12px rgba(17, 24, 39, .07);
  text-decoration: none;
}
body.page-recruit a.link--more:hover{
  background-image:
    linear-gradient(#fffef9, #fffef9),
    var(--btn-outline-grad);
  color: #000;
  box-shadow: 0 5px 16px rgba(17, 24, 39, .1);
}
body.page-recruit a.link--more::after{
  color: var(--accent-2);
}

.work-card--lift{
  transition: transform .2s ease, box-shadow .2s ease;
}
.work-card--lift:hover{
  transform: translateY(-4px);
}

.icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(232, 188, 30, .4);
  border-left: 3px solid var(--accent);
  background: var(--main-weak-2);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--accent-2);
  box-shadow: 0 6px 18px rgba(17, 24, 39, .08);
}
.section--strength:not(.section--strength-warm){
  background: var(--main-weak-2);
}
.feature{
  display: grid;
  gap: 14px;
  padding: 24px 22px;
  border: 1px solid rgba(232, 188, 30, .2);
  border-left: 3px solid rgba(232, 188, 30, .55);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(17, 24, 39, .06);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.feature:hover{
  border-color: rgba(15, 122, 67, .22);
  border-left-color: var(--accent);
  box-shadow: 0 20px 50px rgba(17, 24, 39, .10);
  transform: translateY(-2px);
}
.feature__top{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}
.feature__label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--accent-2);
  margin: 0;
}
.feature__title{ margin: 0; font-weight: 900; font-size: 16px; color: var(--ink); }
.feature__text{ margin: 0; color: var(--muted); }

/* ------------------------------------------------------------
  Service / Works / News (TOP)
------------------------------------------------------------ */
a.service-card{
  display: block;
  text-decoration: none;
  color: inherit;
}
a.service-card:hover .card__title{
  color: var(--accent-2);
}
.service-card{
  transition: transform .12s ease, box-shadow .15s ease;
}
.service-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.service-card .media{
  border-bottom: 3px solid var(--accent);
  background: #f8fafc;
}
.service-card .card__title{ font-weight: 900; font-size: 17px; }
.service-card__list{
  margin: 12px 0 0;
  padding-left: 18px;
  color: #475569;
  font-size: 14px;
}

.work-card .card__title{ font-weight: 900; }
.work-card__meta{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}
.work-card__meta .badge{ transform: translateY(-1px); }
.work-card__cta{
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 施工実績カード：余白/比率/導線を整理して“見せ場”に */
.page--home .section--works-showcase .grid{
  gap: clamp(14px, 2vw, 22px);
}
.page--home .section--works-showcase .work-card{
  border-radius: 18px;
}
.page--home .section--works-showcase .work-card .media{
  border-bottom: 1px solid rgba(17, 24, 39, .12);
}
.page--home .section--works-showcase .work-card .media--photo{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.works-card__image{
  position: relative;
  overflow: hidden;
}
.works-card__image > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.works-detail__hero.works-card__image{
  overflow: hidden;
}
.page--home .section--works-showcase .work-card .card__body{
  padding: 20px 20px 18px;
}
.page--home .section--works-showcase .work-card .card__title{
  font-size: 16px;
  line-height: 1.45;
  margin-bottom: 8px;
}
.page--home .section--works-showcase .work-card__meta{
  font-size: 12px;
  color: rgba(17, 24, 39, .65);
  margin-bottom: 8px;
}
.page--home .section--works-showcase .work-card .card__text{
  font-size: 13px;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.page--home .section--works-showcase .work-card__cta{
  margin-top: 12px;
  align-items: flex-end;
}
.page--home .section--works-showcase .link--more{
  gap: 6px;
}
/* TOP施工実績カードのみ：枠線グラデは維持しつつボタンを小ぶり・軽めに（一覧・詳細ページは非対象） */
.page--home .section--works-showcase .work-card__cta .link--more{
  margin-top: 0;
  padding: 7px 15px;
  min-height: 34px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(17, 24, 39, .055);
}
.page--home .section--works-showcase .work-card__cta .link--more:hover{
  box-shadow: 0 3px 10px rgba(17, 24, 39, .075);
}
.page--home .section--works-showcase .work-card__cta .link--more::after{
  margin-left: 5px;
  font-size: 11px;
}

/* 採用：見せ場感を強める（写真と文字のコントラスト・CTAの位置） */
.page--home .recruit-teaser--panel{
  background: var(--yellow-plane-mid);
}
.page--home .recruit-banner{
  border-color: rgba(17, 24, 39, .16);
  box-shadow: 0 26px 70px rgba(17, 24, 39, .16);
}
.page--home .recruit-banner__word{
  opacity: .55;
  font-size: clamp(52px, 6.6vw, 108px);
}
.page--home .recruit-banner__panel{
  background: rgba(255,255,255,.96);
}
.page--home .recruit-banner__cta{
  margin-top: 6px;
}

/* CTA：背景写真の強さを抑えて整理（白〜薄グレーで成立）— お問い合わせCTAは除外 */
.page--home .cta:not(.cta--contact){
  background: #ffffff;
}
.page--home .cta--warm:not(.cta--contact){
  background: var(--mono-100);
}
.page--home .cta__box{
  box-shadow: 0 16px 44px rgba(17, 24, 39, .12);
  border-left-width: 4px;
}

/* 事業と会社で“見せ方”を変える（会社は写真小さめ＆情報は縦に整理） */
.company-teaser__grid{
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 4.2vw, 72px);
  align-items: stretch;
}
.company-teaser__visual{
  border-radius: 26px;
  min-height: clamp(280px, 34vw, 520px);
  background: var(--dummy-biz) center / cover no-repeat;
  border: 1px solid rgba(17, 24, 39, .12);
  box-shadow: 0 18px 60px rgba(17, 24, 39, .10);
}
.company-teaser__copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(6px, 1vw, 14px) 0;
}
.company-teaser__catch{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: clamp(17px, 1.25vw, 19px);
  letter-spacing: .02em;
  color: var(--mono-900);
}
.company-teaser__text{
  margin: 0 0 clamp(18px, 2.2vw, 24px);
  color: var(--mono-700);
  line-height: 1.9;
  padding-bottom: 14px;
}
.company-teaser__points{
  margin: 0 0 18px;
  padding-left: 18px;
  color: var(--mono-700);
  display: grid;
  gap: 6px;
}
.company-teaser__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.page--home .company-teaser__actions .btn{
  width: 260px;
  justify-content: center;
}

@media (max-width: 960px){
  .company-teaser__grid{
    grid-template-columns: 1fr;
  }
  .company-teaser__visual{
    order: -1;
  }
}
.link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  color: var(--accent-2);
}
.link:hover{ text-decoration: none; color: var(--accent); }

.news-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(15, 122, 67, .18);
}
.news-item{
  display: block;
  padding: 0;
  border-bottom: 1px solid rgba(15, 122, 67, .18);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.news-item__link{
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.news-item__link:hover{
  background: rgba(17, 24, 39, .02);
  text-decoration: none;
}
.news-item__meta{
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
}
.news-item time{
  flex: 0 0 auto;
}
.news-cat{
  flex: 0 0 auto;
  min-width: 120px;
}
.news-item__body{
  flex: 1 1 auto;
}
.news-item time{
  font-size: 14px;
  font-weight: 800;
  color: rgba(17, 24, 39, .66);
  letter-spacing: .02em;
}
.news-cat{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  border: 1px solid rgba(180, 134, 11, .42);
  background: rgba(232, 188, 30, .14);
  color: var(--main-2);
  width: fit-content;
}
.news-cat--works{
  /* 施工実績：施工実績カードのカテゴリ（badge）に寄せた緑アウトライン */
  background: rgba(15, 122, 67, .08);
  border-color: rgba(15, 122, 67, .18);
  color: var(--accent-2);
}
.news-item__body{
  display: grid;
  gap: 6px;
  min-width: 0;
}
.news-item__body .card__text{ margin: 0; font-size: 14px; }
.news-item__title{
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------
  News: pagination（一覧下部）
  - WordPress化を見据えて、ページネーション専用クラスで閉じる
  - 右寄せ/大きい囲み枠は作らず、中央でコンパクトに
------------------------------------------------------------ */
.pagination{
  margin-top: 22px;
}
.pagination__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.pagination__item{
  display: inline-flex;
}
.pagination__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(7, 90, 51, .30);
  background-color: #fff;
  background-image: none;
  color: var(--accent-2);
  font-weight: 900;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(17, 24, 39, .06);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.pagination__link:hover{
  background-color: rgba(7, 90, 51, .06);
  border-color: rgba(7, 90, 51, .38);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(17, 24, 39, .08);
  transform: translateY(-1px);
  color: var(--accent-2);
}
.pagination__link:active{
  transform: translateY(0);
}
.pagination__link:focus-visible{
  outline: 2px solid rgba(7, 90, 51, .55);
  outline-offset: 2px;
}
.pagination__link--current{
  background-color: rgba(7, 90, 51, .10);
  border-color: rgba(7, 90, 51, .40);
  color: var(--accent-2);
  box-shadow: 0 3px 12px rgba(17, 24, 39, .08);
}
.pagination__link--current:hover{
  background-color: rgba(7, 90, 51, .14);
  border-color: rgba(7, 90, 51, .48);
  box-shadow: 0 4px 14px rgba(17, 24, 39, .1);
  transform: translateY(-1px);
  color: var(--accent-2);
}
.pagination__link--disabled{
  opacity: .45;
  background-color: rgba(255, 255, 255, .85);
  border-color: rgba(7, 90, 51, .18);
  box-shadow: none;
  pointer-events: none;
}
.pagination__link--disabled:hover{
  background-color: rgba(255, 255, 255, .85);
  border-color: rgba(7, 90, 51, .18);
  box-shadow: none;
  transform: none;
}

/* ------------------------------------------------------------
  News detail: Works詳細に寄せた詳細レイアウト
------------------------------------------------------------ */
.news-detail{
  background: #fff;
}
.news-detail__header{
  margin-bottom: 18px;
}
.news-detail__meta{
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
}
.news-detail__date{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--muted);
}
.news-detail__title{
  margin: 0 0 12px;
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1.25;
  color: var(--ink);
}
.news-detail__lead{
  margin-bottom: 0;
}
.news-detail__content{
  margin-top: 6px;
}
.news-detail__body{
  line-height: 1.95;
}

/* WordPress本文（the_content()）想定の器 */
.news-content{
  color: var(--muted);
  overflow-wrap: anywhere;
}
.news-content > :first-child{ margin-top: 0; }
.news-content > :last-child{ margin-bottom: 0; }

/* 段落・インライン */
.news-content p{
  margin: 0 0 14px;
}
.news-content strong{
  font-weight: 900;
  color: var(--ink);
}
.news-content em{
  font-style: italic;
}
.news-content a{
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.news-content a:hover{
  color: var(--accent);
  text-decoration: underline;
}
.news-content a:focus-visible{
  outline: 2px solid var(--main);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 見出し（WP本文内 h2/h3/h4） */
.news-content h2,
.news-content h3,
.news-content h4{
  margin: 22px 0 10px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #0b1220;
  line-height: 1.35;
}
.news-content h2{
  font-size: clamp(18px, 2.2vw, 22px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.news-content h2::before{
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: .9;
}
.news-content h3{
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.news-content h3::before{
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: .9;
}
.news-content h4{
  font-size: 16px;
}

/* リスト */
.news-content ul,
.news-content ol{
  margin: 0 0 14px;
  padding-left: 18px;
  color: #475569;
  display: grid;
  gap: 6px;
}
.news-content li{ margin: 0; }
.news-content li > ul,
.news-content li > ol{
  margin-top: 8px;
  margin-bottom: 0;
}

/* 引用 */
.news-content blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid rgba(15, 122, 67, .12);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  background: rgba(255, 249, 240, .8);
  color: rgba(30, 41, 51, .88);
}
.news-content blockquote p{ margin: 0; }
.news-content blockquote cite{
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-style: normal;
  color: var(--muted);
}

/* 画像（Gutenberg/クラシック両対応の最低限） */
.news-content img{
  max-width: 100%;
  height: auto;
}
.news-content figure{
  margin: 18px 0;
}
.news-content figure img{
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(15, 122, 67, .12);
  background: #fff;
}
.news-content figcaption,
.news-content .wp-caption-text{
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}
.news-content .wp-caption{ max-width: 100%; }
.news-content .aligncenter{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.news-content .alignleft{
  float: left;
  margin: 6px 16px 10px 0;
}
.news-content .alignright{
  float: right;
  margin: 6px 0 10px 16px;
}
.news-content::after{
  content: "";
  display: block;
  clear: both;
}

/* テーブル（崩れない最低限） */
.news-content table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(15, 122, 67, .14);
  border-radius: 14px;
  overflow: clip;
  background: #fff;
  margin: 18px 0;
}
.news-content th,
.news-content td{
  padding: 12px 12px;
  border-top: 1px solid rgba(15, 122, 67, .12);
  vertical-align: top;
}
.news-content th{
  text-align: left;
  background: rgba(255, 247, 166, .45);
  font-weight: 900;
  color: var(--accent-2);
  border-right: 1px solid rgba(15, 122, 67, .10);
}

/* 仕切り */
.news-content hr{
  border: none;
  height: 1px;
  background: rgba(15, 122, 67, .14);
  margin: 22px 0;
}
.news-detail__h3{
  margin: 18px 0 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #0b1220;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.news-detail__h3::before{
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: .9;
}
.news-detail__body ul{
  margin: 0 0 14px;
  padding-left: 18px;
  color: #475569;
  display: grid;
  gap: 6px;
}

@media (max-width: 768px){
  .news-content .alignleft,
  .news-content .alignright{
    float: none;
    margin: 12px 0;
  }
}

.news-detail__nav{
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.news-detail__nav-btn{
  width: min(260px, 100%);
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
  border-radius: 999px;
  border: var(--btn-outline-w) solid transparent;
  background-color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #000;
  box-shadow: 0 3px 12px rgba(17, 24, 39, .07);
  transform: none;
}
.news-detail__nav-btn:hover{
  background-image:
    linear-gradient(#fffef9, #fffef9),
    var(--btn-outline-grad);
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(17, 24, 39, .1);
  transform: translateY(-1px);
  color: #000;
}
.news-detail__nav-btn:active{
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(17, 24, 39, .08);
}
.news-detail__nav-prev{ justify-self: start; }
.news-detail__nav-list{ justify-self: center; }
.news-detail__nav-next{ justify-self: end; }

@media (max-width: 768px){
  .news-detail__nav{
    grid-template-columns: 1fr auto 1fr;
  }
  .news-detail__nav-prev,
  .news-detail__nav-list,
  .news-detail__nav-next{
    justify-self: stretch;
  }
  .news-detail__nav-btn{
    width: 100%;
    min-height: 44px;
    padding: 12px 12px;
    font-size: 13px;
    letter-spacing: .01em;
    white-space: nowrap;
  }
}

@media (max-width: 768px){
  .news-item__link{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 0;
  }
  .news-item__meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
  }
  .news-item time{
    min-width: 0;
  }
  .news-cat{
    min-width: 0;
  }
  .news-item__title{ white-space: normal; }
}

/* WORKS：カード全体リンク（入れ子リンク禁止） */
.work-card__link{
  display: block;
  color: inherit;
  text-decoration: none;
}
.work-card__link:hover{
  text-decoration: none;
}

/* 採用：バナー全体リンク */
.recruit-kv__link{
  text-decoration: none;
  color: inherit;
  display: grid;
}
.recruit-kv__link:hover{
  text-decoration: none;
  box-shadow: var(--shadow-3);
  transform: translateY(-1px);
}

.cta{
  background: #ffffff;
  color: var(--text);
  border-top: 2px solid var(--accent);
  border-bottom: none;
}
.cta .kicker{ margin-bottom: 6px; }
.cta .lead{ color: var(--muted); }
.cta__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: center;
}
.cta__box{
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 18px;
  padding: 22px 22px 22px calc(22px + 5px);
  box-shadow: 0 18px 50px rgba(17, 24, 39, .10);
  border-left: none;
  border-right: 1px solid rgba(15, 122, 67, .12);
}
.cta__box::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 18px 0 0 18px;
  background: var(--accent);
  pointer-events: none;
}
.cta__phone{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .02em;
  margin: 0 0 6px;
  color: var(--accent-2);
}
.cta__hours{ margin: 0; color: #475569; font-size: 14px; }

.cta--warm{
  position: relative;
}
.cta--warm:not(.cta--contact){
  background: var(--yellow-plane-mid);
}
.cta--warm > .container{ position: relative; z-index: 1; }
.cta--warm .cta__box{
  padding-left: calc(22px + 6px);
  border-top: 1px solid rgba(15, 122, 67, .12);
}
.cta--warm .cta__box::before{
  width: 6px;
}

/* ==================================================
  07. Common CTA
  --------------------------------------------------
  共通CTA（お問い合わせ専用・1ブロック）
================================================== */
.cta--contact{
  border-top: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: transparent;
  --cta-parallax-y: 0px;
}

/* CONTACT（セクション外側）背景：パララックス写真（フィルターなし） */
.cta--contact.cta--warm{
  position: relative;
  background-color: transparent;
}
.cta--contact::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: none;
  transform: none;
}
.cta--contact::after{
  content: none;
}
.cta--contact > .container{
  position: relative;
  z-index: 2;
}

/* パララックス：PCのみ（モバイルは不安定なのでフォールバック） */
@media screen and (min-width: 1025px){
  .cta--contact.cta--warm{
    background-color: transparent;
    background-image: url("../images/common/pc/cta.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

/* タブレット・スマホ：fixedは使わない */
@media screen and (max-width: 1024px){
  .cta--contact.cta--warm{
    background-color: transparent;
    background-image: url("../images/common/pc/cta.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
  .cta--contact::before{ display: none; }
}

/* スマホ疑似パララックス（JSが有効化したときのみ、背景レイヤーだけを微小に動かす） */
@media (max-width: 1024px){
  .is-cta-parallax .cta--contact{
    background-position: center calc(50% + var(--cta-parallax-y));
    background-attachment: scroll;
  }
}
.cta-contact{
  background: #ffffff;
  border: 1px solid rgba(15, 122, 67, .14);
  border-radius: 26px;
  padding: clamp(18px, 3.2vw, 34px);
  box-shadow: 0 18px 55px rgba(17, 24, 39, .10);
  text-align: center;
}
/* CONTACT CTA：タイトル装飾（全ページ共通）
  - PC：タイトル下に横線（TOPと同じ）
  - 〜768px：左寄せレイアウトに合わせて縦線に切替 */
@media (min-width: 769px){
  .cta--contact .cta-contact__head .section-title__ja::after{
    content: "";
    display: block;
    width: min(96px, 24vw);
    height: 3px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: var(--brand-line-grad-x);
    opacity: .9;
  }
}
@media (max-width: 768px){
  .cta--contact .cta-contact__head .section-title__ja::after{
    content: none;
  }
  .cta--contact .cta-contact__head{
    position: relative;
    padding-left: 16px;
  }
  .cta--contact .cta-contact__head::before{
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    height: 60px;
    width: 5px;
    border-radius: 999px;
    background: var(--brand-line-grad-y);
    opacity: .92;
  }
}
.cta-contact .lead{
  margin-left: auto;
  margin-right: auto;
}
.cta-contact__body{
  margin-top: clamp(14px, 2.4vw, 22px);
  padding-top: clamp(14px, 2.4vw, 22px);
  border-top: 1px solid rgba(15, 122, 67, .12);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 4.4vw, 50px);
}
.cta-contact__divider{
  width: 1px;
  height: 56px;
  background: rgba(15, 122, 67, .22);
  justify-self: center;
}
.cta-contact__tel{
  justify-self: end;
  text-align: left;
}
.cta-contact__actions{
  justify-self: start;
  display: flex;
  justify-content: flex-start;
}
.cta-contact__phone{
  margin: 0 0 6px;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--accent-2);
}
.cta-contact__hours{
  margin: 0;
  font-size: 13px;
  color: #475569;
}
.cta-contact__btn{
  width: min(280px, 100%);
  justify-content: center;
}
@media (max-width: 768px){
  .cta-contact{
    text-align: left;
  }
  .cta-contact__body{
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(15, 122, 67, .12);
  }
  .cta-contact__divider{
    display: none;
  }
  .cta-contact__tel,
  .cta-contact__actions{
    justify-self: stretch;
    text-align: left;
  }
  .cta-contact__actions{
    justify-content: flex-start;
  }
  .cta-contact__btn{
    width: min(280px, 100%);
  }
}

/* 最終CTA：受け皿を2つに分ける */
.cta--dual{
  border-top: none;
}
.cta-dual{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 22px);
  align-items: stretch;
}
.cta-panel{
  background: #ffffff;
  border: 1px solid rgba(15, 122, 67, .14);
  border-radius: 24px;
  padding: clamp(18px, 2.8vw, 30px);
  box-shadow: 0 18px 55px rgba(17, 24, 39, .10);
  position: relative;
  overflow: hidden;
}
.cta-panel::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--accent);
  opacity: .95;
}
.cta-panel .h2{
  color: var(--accent-2);
}
.cta-panel__sub{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 122, 67, .12);
}
.cta-panel__sub .cta__phone{
  font-size: 22px;
}
@media (max-width: 960px){
  .cta-dual{ grid-template-columns: 1fr; }
}

/* スマホ下部固定CTA（採用導線を落とさない） */
.mobile-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid rgba(15, 122, 67, .14);
}
.mobile-cta[hidden]{ display: none !important; }
.mobile-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
  border: var(--btn-outline-w) solid transparent;
  background-color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #000;
  box-shadow: 0 4px 14px rgba(17, 24, 39, .1);
  text-decoration: none;
}
.mobile-cta__btn:hover{
  background-image:
    linear-gradient(#fffef9, #fffef9),
    var(--btn-outline-grad);
  box-shadow: 0 6px 18px rgba(17, 24, 39, .12);
}
.mobile-cta__btn--recruit,
.mobile-cta__btn--contact{
  color: #000;
}
@media (max-width: 640px){
  .mobile-cta{ display: grid; }
}

/* ------------------------------------------------------------
  Tables / Forms
------------------------------------------------------------ */
.table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
  background: #fff;
}
.table th, .table td{
  padding: 14px 14px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.table th{
  width: 28%;
  text-align: left;
  background: var(--main-weak-2);
  font-weight: 800;
  color: var(--accent-2);
  border-right: 1px solid rgba(15, 122, 67, .12);
}

/* Recruit: 募集要項（静かに読みやすく、ラベルの単調さを軽減） */
body.page-recruit .table.table--recruit{
  border-radius: 18px;
  border-color: rgba(15, 122, 67, .16);
  box-shadow: 0 18px 55px rgba(17, 24, 39, .06);
}
body.page-recruit .table.table--recruit th{
  background: #fff;
  color: rgba(7, 60, 35, .95);
  font-weight: 900;
  letter-spacing: .02em;
  position: relative;
}
body.page-recruit .table.table--recruit th::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand-line-grad-x);
  opacity: .55;
}
body.page-recruit .table.table--recruit td{
  color: #334155;
}
body.page-recruit .table.table--recruit .table__note{
  margin-top: 10px;
}
body.page-recruit .table.table--recruit .table__note .link{
  font-weight: 900;
}
body.page-recruit .table.table--recruit .table__row--highlight th,
body.page-recruit .table.table--recruit .table__row--highlight td{
  background: #fff;
}
body.page-recruit .table.table--recruit .table__row--highlight td strong{
  color: var(--ink);
  font-weight: 900;
}

/* ------------------------------------------------------------
  Company page: 信頼感のある会社情報レイアウト（page-company）
  - 横幅は他下層と同様（:root の --wrap-max）
  - “枠で囲うだけ”を避け、余白/背景/見出し階層で整理
------------------------------------------------------------ */
body.page-company{
  background: #fff;
}
body.page-company .section{
  padding: clamp(56px, 6vw, 82px) 0;
  border-top: 1px solid rgba(15, 122, 67, .10);
}
body.page-company .section--tight{
  padding: clamp(44px, 5vw, 66px) 0;
}
body.page-company .company-section--message{
  border-top: none;
  background: #fff;
}

/* 会社情報：会社概要だけ薄いグレー面にする */
body.page-company .company-section--overview{
  background: var(--yellow-plane-top);
  border-top-color: rgba(15, 122, 67, .10);
}

/* 会社概要 / 募集要項：タブレット・スマホは中央基準で揃える（15px余白ルールの中で収める） */
@media (max-width: 1024px){
  body.page-company .company-section--overview > .container,
  body.page-recruit #requirements > .container{
    margin-left: auto;
    margin-right: auto;
  }
  body.page-company .table--company,
  body.page-recruit .table--recruit{
    margin: 0 auto;
  }
}

/* ------------------------------------------------------------
  Recruit page: 情報量を“背景と見出し”で受け止める（page-recruit）
  - ベースは淡いグレー（白ベタで散る印象を抑える）
  - `section--surface` で必要箇所のみ白面に抜く
------------------------------------------------------------ */
body.page-recruit{
  background: var(--yellow-plane-top);
}
body.page-recruit .section{
  padding: clamp(56px, 6vw, 82px) 0;
  border-top: 1px solid rgba(15, 122, 67, .10);
}
body.page-recruit .section--tight{
  padding: clamp(44px, 5vw, 66px) 0;
}

/* 会社情報・事業内容（強み）：セクション見出し */
body.page-company .company-head,
body.page-biz .service-biz-strength .company-head,
body.page-contact .company-head,
body.page-recruit .company-head{
  margin: 0 0 clamp(18px, 2.2vw, 28px);
}
body.page-company .company-head__kicker,
body.page-biz .service-biz-strength .company-head__kicker,
body.page-contact .company-head__kicker,
body.page-recruit .company-head__kicker{
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #000;
}
body.page-company .company-head__title,
body.page-biz .service-biz-strength .company-head__title,
body.page-contact .company-head__title,
body.page-recruit .company-head__title{
  margin: 0;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 900;
  letter-spacing: .03em;
  color: #000;
  line-height: 1.25;
}

/* 見出し直下：黄→緑の短いライン（お問い合わせCTA .cta-contact 内は除外） */
body.page-company .company-head__title::after,
body.page-biz .service-biz-strength .company-head__title::after,
body.page-recruit .company-head__title::after,
body.page-contact .company-head__title::after,
body.page-biz .service-biz .biz-block__title::after,
body.page-recruit .section-head .section-title__ja::after,
body.page-recruit main section > .container > h2.h2::after{
  content: "";
  display: block;
  width: min(112px, 22vw);
  height: 4px;
  margin-top: clamp(14px, 2vw, 18px);
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: .9;
}

body.page-company .cta-contact .section-title__en,
body.page-company .cta-contact .section-title__ja,
body.page-biz .cta-contact .section-title__en,
body.page-biz .cta-contact .section-title__ja{
  color: #000;
}

body.page-recruit .section-title__en,
body.page-recruit .section-title__ja{
  color: #000;
}
body.page-recruit main section > .container > h2.h2{
  color: #000;
}

/* 採用ページ：見出し＋CTA（右寄せ）でブロック感を作る */
body.page-recruit .recruit-section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
body.page-recruit .recruit-section-head .company-head{
  margin: 0;
}
body.page-recruit .recruit-section-head + .lead{
  margin-top: 0;
}

/* 採用ページ：冒頭キャッチ（後でデザイン差し替え前提） */
body.page-recruit #intro .recruit-message__catch{
  margin: 0 0 10px;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.45;
  color: var(--ink);
}

/* 採用ページ：冒頭を“ページの顔”に（キャッチ主役＋面＋余白） */
body.page-recruit #intro.recruit-intro{
  position: relative;
  overflow: clip;
}
body.page-recruit #intro.recruit-intro::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 520px at 12% 18%, rgba(232, 188, 30, .18), rgba(255,255,255,0) 55%),
    radial-gradient(900px 520px at 88% 10%, rgba(15, 122, 67, .12), rgba(255,255,255,0) 52%);
  pointer-events: none;
}
/* 左下〜中央に淡いベージュの面（やりすぎない） */
body.page-recruit #intro.recruit-intro::after{
  content: "";
  position: absolute;
  /* 参考イメージ寄せ：左下から中央へ“形として見える”大きな面 */
  left: -34%;
  bottom: -66%;
  width: 102%;
  height: 170%;
  border-radius: 48% 52% 60% 40% / 55% 45% 55% 45%;
  background:
    radial-gradient(closest-side at 58% 44%, rgba(250, 244, 232, .96), rgba(250, 244, 232, 0) 72%),
    radial-gradient(closest-side at 24% 78%, rgba(232, 188, 30, .08), rgba(255,255,255,0) 70%);
  transform: rotate(-7deg);
  pointer-events: none;
  z-index: 0;
}
body.page-recruit #intro.recruit-intro > .container{
  position: relative;
  z-index: 1;
}
body.page-recruit #intro .recruit-message__catch{
  margin: 0 0 30px;
  /* コピーを“主役”に：明らかに大きく、視線を止める */
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1.12;
  letter-spacing: .03em;
  /* レスポンシブでも改行させない（1行固定） */
  white-space: nowrap;
  max-width: none;
  text-shadow: 0 10px 34px rgba(17, 24, 39, .08);
}
body.page-recruit #intro .recruit-intro__left{
  padding-top: clamp(10px, 1.2vw, 18px);
}
body.page-recruit #intro .recruit-intro__lead.lead{
  margin-top: 0;
  margin-bottom: clamp(18px, 2.2vw, 26px);
  /* 説明文ではなく“採用メッセージ”として読ませる */
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: .01em;
  color: rgba(71, 85, 105, .92);
}
body.page-recruit #intro .recruit-nav__lead{
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(71, 85, 105, .92);
}
body.page-recruit #intro .recruit-nav__lead::before{
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background: rgba(15, 122, 67, .55);
}

/* 採用：採用メッセージ（2カラム＋写真主役） */
body.page-recruit #intro .recruit-intro__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(18px, 4.4vw, 56px);
  align-items: start;
}
body.page-recruit #intro .recruit-intro__head.company-head{
  margin: 0 0 18px;
}
body.page-recruit #intro .recruit-intro__left{
  min-width: 0;
}
body.page-recruit #intro .recruit-intro__right{
  min-width: 0;
}
body.page-recruit #intro .recruit-intro__visual{
  position: relative;
  isolation: isolate;
  /* 右写真を大きく見せるため、内側余白は最小化 */
  padding: 0;
  /* 少し外へ出して“主役感” */
  margin-top: clamp(2px, .8vw, 8px);
}

/* 背景の薄い有機面（盛りすぎない） */
body.page-recruit #intro .recruit-intro__visual::before{
  content: "";
  position: absolute;
  /* 左下の“もたつき”が出やすいので、左下は少し控えめに */
  inset: -18px -22px -18px -10px;
  z-index: 0;
  border-radius: 54px 120px 64px 136px;
  background:
    radial-gradient(980px 600px at 80% 32%, rgba(15, 122, 67, .14), rgba(255,255,255,0) 62%),
    radial-gradient(820px 540px at 30% 72%, rgba(232, 188, 30, .12), rgba(255,255,255,0) 66%);
  filter: saturate(.98) blur(.2px);
  pointer-events: none;
}

body.page-recruit #intro .recruit-intro__photo-main{
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-position: 70% 35%;
  /* 参考画像寄せ：右上/左下が大きい“やわらか角丸” */
  border-radius: 28px 96px 28px 72px;
  border: 1px solid rgba(15, 122, 67, .08);
  box-shadow:
    0 30px 74px rgba(17, 24, 39, .14),
    0 10px 22px rgba(17, 24, 39, .06);
  overflow: clip;
}

/* キャッチコピーだけ、右画像に“少しかぶせる” */
@media (min-width: 961px){
  /* PCは「必ず1行」優先 */
  body.page-recruit #intro .recruit-intro__grid{
    /* 見出しが収まるよう、左カラムを少し広げる */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr);
    gap: clamp(18px, 4vw, 52px);
  }
  body.page-recruit #intro .recruit-message__catch{
    position: relative;
    z-index: 6; /* 画像より手前 */
    font-size: clamp(42px, 3.7vw, 62px);
    line-height: 1.3;
    letter-spacing: .02em;
    /* かぶり量：やりすぎない（右へはみ出して画像側へ乗せる） */
    margin-right: clamp(-14px, -2.6vw, -46px);
  }
}

/* タブレット〜スマホ：1行固定のままサイズで収める */
@media (max-width: 960px){
  body.page-recruit #intro .recruit-message__catch{
    font-size: clamp(30px, 5.2vw, 44px);
    line-height: 1.12;
    letter-spacing: .02em;
  }
}
@media (max-width: 640px){
  body.page-recruit #intro .recruit-message__catch{
    margin-bottom: 20px;
    font-size: clamp(24px, 6.4vw, 34px);
    line-height: 1.14;
    letter-spacing: .01em;
  }
}

/* ボタン群はセクション下部へ（テキスト→画像のあと） */
body.page-recruit #intro .recruit-intro__nav{
  /* コピー→導線への“繋ぎ”を強く */
  margin-top: clamp(10px, 2.2vw, 18px);
}
body.page-recruit #intro .recruit-nav{
  margin: 0;
}

/* 導線としてのまとまり感（ボタン群） */
body.page-recruit #intro .recruit-intro__nav{
  padding-top: clamp(12px, 2vw, 18px);
  padding-bottom: clamp(6px, 1.2vw, 10px);
  border-top: none;
}
body.page-recruit #intro .recruit-nav{
  gap: 10px 10px;
}
body.page-recruit #intro .recruit-nav a{
  padding: 10px 16px;
  min-height: 40px;
  justify-content: center;
  box-shadow: none;
}
body.page-recruit #intro .recruit-nav a:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(17, 24, 39, .08);
}
body.page-recruit #intro .recruit-nav a::after{
  opacity: .55;
}

@media (max-width: 960px){
  body.page-recruit #intro .recruit-intro__grid{
    grid-template-columns: 1fr;
    align-items: start;
  }
  body.page-recruit #intro .recruit-intro__visual{
    margin-top: 0;
  }
  body.page-recruit #intro .recruit-intro__photo-main{
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px){
  body.page-recruit #intro.recruit-intro::after{
    /* スマホは背景面をかなり控えめに */
    opacity: .32;
    left: -44%;
    bottom: -70%;
    width: 118%;
  }
  body.page-recruit #intro .recruit-intro__photo-main{
    aspect-ratio: 16 / 9;
    border-radius: 26px 40px 26px 40px;
    box-shadow: 0 16px 40px rgba(17, 24, 39, .10);
    background-position: 60% 30%;
  }
  body.page-recruit #intro .recruit-intro__visual::before{
    inset: -8px -8px -10px -8px;
    border-radius: 28px 44px 32px 50px;
    opacity: .8;
  }
  body.page-recruit #intro .recruit-intro__nav{
    background: rgba(255, 255, 255, .78);
    border-color: rgba(15, 122, 67, .08);
    box-shadow: 0 12px 32px rgba(17, 24, 39, .06);
  }
  body.page-recruit #intro .recruit-nav a:hover{
    transform: none;
  }
}

/* ------------------------------------------------------------
  Privacy policy page（page-privacy）
  - 下層ページと同じ見出しトーンに寄せつつ、項目見出しだけ最小追加
------------------------------------------------------------ */
body.page-privacy{
  background: var(--yellow-plane-top);
}
body.page-privacy .policy-list{
  margin: 10px 0 0;
  padding-left: 1.2em;
  color: #475569;
  font-size: 14px;
  line-height: 1.85;
}
body.page-privacy .policy-contact{
  margin-top: 12px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
body.page-privacy .policy-contact__name{
  margin: 0 0 6px;
  font-weight: 800;
  color: var(--ink);
}
body.page-privacy .policy-contact__line{
  margin: 0;
  color: var(--muted);
}
body.page-privacy .policy-contact__line a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
body.page-privacy .policy-contact__line a:hover{
  text-decoration-thickness: 2px;
}
body.page-privacy .policy-contact__line a:focus-visible{
  outline: 2px solid var(--main);
  outline-offset: 2px;
  border-radius: 4px;
}
body.page-privacy .policy-contact__line + .policy-contact__line{
  margin-top: 6px;
}
body.page-privacy .policy__date{
  margin-top: 12px;
  font-weight: 700;
  color: var(--ink);
}

/* 会社情報「代表挨拶」相当の面に寄せる */
body.page-privacy .company-section--message{
  border-top: none;
  background: #fff;
}

/* カード枠線は不要（本文は“面”で見せる） */
body.page-privacy .policy.card{
  border: none;
  background: transparent;
}
body.page-privacy .policy .card__body{
  padding: 0;
}
body.page-privacy .policy__lead{
  margin: 0 0 18px;
  color: var(--muted);
}

/* 「特徴」と同じ見出しパーツ（番号＋英ラベル＋タイトル）を流用 */
body.page-privacy .policy-feature.feature{
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
  gap: 10px;
}
body.page-privacy .policy-feature.feature:hover{
  box-shadow: none;
  transform: none;
  border-color: var(--line);
}
body.page-privacy .policy.card:hover{
  box-shadow: none;
  border-color: transparent;
}
body.page-privacy .policy-feature + .policy-feature{
  margin-top: 22px;
}
body.page-privacy .policy-feature .feature__top{
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}
body.page-privacy .policy-feature .feature__no{
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--ink);
  background: #fff;
  border: 2px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    var(--brand-line-grad-y);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 10px 28px rgba(17, 24, 39, .06);
}
body.page-privacy .policy-feature .feature__label{
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(100, 116, 139, .88);
}
body.page-privacy .policy-feature .feature__title{
  margin: 0;
  font-size: clamp(16px, 1.35vw, 18px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.45;
  color: var(--ink);
}
body.page-privacy .policy-feature .feature__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: #475569;
}

/* ==================================================
  12. Page Specific
  --------------------------------------------------
  Recruit（採用情報ページ）
================================================== */

/* 採用ページ：冒頭のページ内リンクは囲み無しで軽く見せる */
body.page-recruit #intro .recruit-nav{
  margin: 14px 0 0;
}

/* 採用ページ：ページ内リンクは“導線”として整列（ボタン列感を弱める） */
body.page-recruit #intro .recruit-nav{
  gap: 10px 10px;
  margin-top: 0;
}
body.page-recruit #intro .recruit-nav a{
  padding: 10px 16px;
}
body.page-recruit #intro .recruit-nav a::after{
  content: "→";
  margin-left: 8px;
  font-weight: 900;
  opacity: .65;
}

/* 採用：仕事内容カード（画像の効き＋ラベルで差を出す） */
body.page-recruit .recruit-job-grid{
  gap: clamp(16px, 2.4vw, 22px);
}
body.page-recruit .recruit-job-card{
  position: relative;
  overflow: clip;
  border-radius: 18px;
}
body.page-recruit .recruit-job-card__media{
  position: relative;
  border-bottom: 1px solid rgba(15, 122, 67, .12);
  overflow: hidden;
}
body.page-recruit .recruit-job-card__image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
body.page-recruit .recruit-job-card__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(17,24,39,.18), rgba(17,24,39,0) 55%);
  pointer-events: none;
}
body.page-recruit .recruit-job-card__badge{
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(15, 122, 67, .16);
  box-shadow: 0 8px 26px rgba(17, 24, 39, .10);
  font-size: 12px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: .04em;
}
body.page-recruit .recruit-job-card .card__title{
  font-weight: 900;
  letter-spacing: .02em;
}
body.page-recruit .recruit-job-card .card__text{
  line-height: 1.9;
}

/* 採用：働く人の声（コメント主役の引用風） */
body.page-recruit .recruit-voice{
  position: relative;
}
body.page-recruit .recruit-voice::before{
  content: "“";
  position: absolute;
  left: clamp(14px, 2.2vw, 22px);
  top: 10px;
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  color: rgba(232, 188, 30, .55);
  pointer-events: none;
}
body.page-recruit .recruit-voice .recruit-context__text{
  margin: 0;
  color: var(--muted);
  line-height: 1.95;
}

/* ------------------------------------------------------------
  Recruit: VOICE cards（2カラムコメント＋右縦長写真＋ウェーブ境界）
  - 影響範囲は #voice のみ
------------------------------------------------------------ */
body.page-recruit #voice .recruit-voice-grid{
  gap: clamp(18px, 2.6vw, 26px);
}
/* RECRUIT: 働く人の声のセクション幅を 1024px に固定（このセクションのみ） */
body.page-recruit #voice > .container{
  --wrap-max: 1024px;
}
body.page-recruit #voice .recruit-voice-grid.recruit-voice-grid--single{
  grid-template-columns: 1fr;
}
body.page-recruit #voice .recruit-voice-grid > *{
  height: 100%;
  min-height: 0;
}
/* `recruit-voice` 単体の内側余白（padding）を重ねない */
body.page-recruit #voice .recruit-voice-card.recruit-voice{
  padding: 0;
}
body.page-recruit #voice .recruit-voice-card.recruit-context{
  padding: 0; /* 内側余白は専用レイアウトで管理 */
  border-radius: 22px;
  border-color: rgba(15, 122, 67, .14);
  overflow: clip;
  /* 2カラム行で“短い方”のカード高さを、隣のカードに合わせる */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
body.page-recruit #voice .recruit-voice::before{
  /* 旧引用符は新デザインでは使わない */
  content: none;
}
body.page-recruit #voice .recruit-voice-card__inner{
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
  /* 枠（白地）は inner に寄せる */
  background: #fff;
}
body.page-recruit #voice .recruit-voice-card__content{
  /* 上下を同量にして、本文〜補足が枠内で落ち着いて見えるように */
  padding: 30px clamp(18px, 2.3vw, 24px) 30px;
  padding-right: clamp(16px, 2.1vw, 22px);
  min-width: 0;
  /* 隣列（写真）の高いカード行では、列だけが伸びて本文下に空きを作らない */
  flex: 1 1 auto;
  align-self: flex-start;
  /* 入口（タグ行）を上にしっかり見せる */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
body.page-recruit #voice .recruit-voice-card__head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
body.page-recruit #voice .recruit-voice-card__quote{
  /* 年齢の後ろで“装飾”として控えめに */
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  color: rgba(232, 188, 30, .34);
  transform: translateY(-5px);
  margin-left: 2px;
}
body.page-recruit #voice .recruit-voice-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}
body.page-recruit #voice .recruit-voice-card__tag{
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(15, 122, 67, .08);
  border: 1px solid rgba(15, 122, 67, .16);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  color: rgba(15, 46, 26, .92);
}
/* 未経験で入社（左カード）のタグだけ：お知らせタグと同じ薄い黄色系 */
body.page-recruit #voice .recruit-voice-grid > :first-child .recruit-voice-card__tag{
  border: 1px solid rgba(180, 134, 11, .42);
  background: rgba(232, 188, 30, .14);
  color: var(--main-2);
}
body.page-recruit #voice .recruit-voice-card__who{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  color: rgba(71, 85, 105, .92);
}
body.page-recruit #voice .recruit-voice-card__text{
  font-size: 16px;
  line-height: 1.85;
  color: rgba(17, 24, 39, .82);
  /* 本文下に不自然な“伸び”を作らない */
}
body.page-recruit #voice .recruit-voice-card__text--subhead{
  font-weight: 900;
  color: var(--ink);
}
body.page-recruit #voice .recruit-voice-card__divider{
  height: 1px;
  /* 本文と区切りの距離を詰める */
  margin: 8px 0 6px;
  background: rgba(15, 122, 67, .10);
}
body.page-recruit #voice .recruit-voice-card__notes{
  display: grid;
  gap: 4px;
  /* 区切りと補足の距離を少し詰める（置き去り感を減らす） */
  margin: 0;
}
body.page-recruit #voice .recruit-voice-card__note-line{
  margin: 0;
  display: flex;
  align-items: flex-start; /* 折返し時も先頭行の高さ基準に揃える */
  gap: 8px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(71, 85, 105, .95);
  letter-spacing: .01em;
}
body.page-recruit #voice .recruit-voice-card__bullet{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  font-size: 1.2em;
  line-height: 1;
  font-weight: 900;
  color: rgba(15, 122, 67, .78);
  /* 行高（1.7）に対して、拡大した「・」の高さ（1.2em）を中央に */
  margin-top: calc((1em * 1.7 - 1.2em) / 2);
}
body.page-recruit #voice .recruit-voice-card__note-text{
  flex: 1 1 auto;
  min-width: 0;
}
body.page-recruit #voice .recruit-voice-card__term{
  font-weight: 900;
  color: rgba(15, 46, 26, .92);
}

@media (max-width: 640px){
  body.page-recruit #voice .recruit-voice-card__content{
    /* スマホは少し詰めつつ、上下は同量 */
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

/* 右：画像エリア（写真は普通の長方形）＋SVGウェーブを疑似要素で重ねる */
body.page-recruit #voice .recruit-voice-card__media{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #f8fafc;
  border-bottom: none; /* .media の下線はここでは不要 */
  /* 写真自体の角はカードに合わせて軽く丸める（右側のみ） */
  border-radius: 0 22px 22px 0;
  flex: 0 0 clamp(180px, 22vw, 200px);
  width: clamp(180px, 22vw, 200px);
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  /* 画像の自然高さが行高を押し上げないよう、写真は枠内に重ね塗りする */
}
body.page-recruit #voice .recruit-voice-card__image{
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
/* PC/タブレット：白いウェーブSVGを手前に重ねる（画像は切り抜かない） */
@media (min-width: 641px){
  body.page-recruit #voice .recruit-voice-card__media::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: url("./images/recruit/pc/parts_voice.svg") left center / auto 100% no-repeat;
  }
}

/* レスポンシブ */
@media (min-width: 641px) and (max-width: 960px){
  body.page-recruit #voice .recruit-voice-card__media{
    flex-basis: 180px;
    width: 180px;
  }
}
@media (max-width: 960px){
  body.page-recruit #voice .recruit-voice-card__quote{
    font-size: 40px;
  }
}
@media (max-width: 640px){
  body.page-recruit #voice .recruit-voice-grid{
    grid-template-columns: 1fr;
  }
  body.page-recruit #voice .recruit-voice-card__inner{
    flex-direction: column;
  }
  body.page-recruit #voice .recruit-voice-card__media{
    flex: 0 0 auto;
    width: 100%;
    height: 220px;
    /* 本文直下なので上辺は直線、下だけ角丸 */
    border-radius: 0 0 16px 16px;
  }
  body.page-recruit #voice .recruit-voice-card__media::before{
    content: none;
  }
  body.page-recruit #voice .recruit-voice-card__image{
    border-radius: inherit;
  }
}

@media (max-width: 640px){
  body.page-recruit #intro .recruit-message__catch{
    max-width: 18ch;
  }
  body.page-recruit .recruit-job-card__badge{
    left: 10px;
    top: 10px;
    padding: 7px 10px;
  }
}

/* 事業内容：強み（グラデは見出し下ライン・番号枠・CTA縁に限定／白ベースで整理） */
body.page-biz .service-biz-strength{
  background: var(--yellow-plane-top);
  border-top-color: rgba(15, 122, 67, .1);
  /* 依頼：店舗工事等（.service-biz）と同じ上下余白に統一 */
  padding: clamp(56px, 7vw, 84px) 0;
}
.service-biz-strength__lead{
  padding-bottom: clamp(20px, 3vw, 28px);
}
.service-biz-strength__grid{
  gap: clamp(18px, 2.4vw, 24px);
}
.service-biz-strength .feature.feature--company,
body.page-recruit .recruit-points .feature.feature--company{
  gap: 14px;
  padding: clamp(22px, 2.4vw, 26px);
  border: 1px solid rgba(15, 122, 67, .12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(17, 24, 39, .06);
  transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease;
}
.service-biz-strength .feature.feature--company:hover,
body.page-recruit .recruit-points .feature.feature--company:hover{
  border-color: rgba(15, 122, 67, .18);
  box-shadow: 0 12px 32px rgba(17, 24, 39, .09);
  transform: translateY(-1px);
}
.service-biz-strength .feature__top--company,
body.page-recruit .recruit-points .feature__top--company{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px 18px;
}
/* 事業内容（強み）：アイコンを追加してもバランスを崩さない（このセクションのみ） */
body.page-biz .service-biz-strength .feature__top--company{
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px 16px;
}
.service-biz-strength__icon{
  width: 34px;
  height: 34px;
  display: block;
  flex-shrink: 0;
  opacity: .95;
  max-width: none;
}
.service-biz-strength__titles{
  min-width: 0;
}

/* 事業内容（強み）：アイコンは右側配置＋本文と干渉しない余白（このセクションのみ） */
body.page-biz .service-biz-strength:not(.service-biz-strength--v2) .feature.feature--company{
  position: relative;
  padding-right: calc(clamp(22px, 2.4vw, 26px) + clamp(64px, 6.6vw, 78px));
}
body.page-biz .service-biz-strength:not(.service-biz-strength--v2) .service-biz-strength__icon{
  position: absolute;
  right: clamp(22px, 2.4vw, 26px);
  top: 50%;
  transform: translateY(-62%);
  width: clamp(40px, 3.2vw, 44px);
  height: clamp(40px, 3.2vw, 44px);
  opacity: .45;
  filter: grayscale(1) brightness(.55) contrast(.9);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 640px){
  body.page-biz .service-biz-strength:not(.service-biz-strength--v2) .feature.feature--company{
    padding-right: calc(clamp(22px, 2.4vw, 26px) + 64px);
  }
  body.page-biz .service-biz-strength:not(.service-biz-strength--v2) .service-biz-strength__icon{
    transform: translateY(-66%);
    opacity: .42;
  }
}

/* 事業内容（強み）v2：3カード＋段差＋大番号（このセクションのみ） */
body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__grid--v2{
  gap: clamp(18px, 2.2vw, 26px);
  align-items: start;
}
body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__card{
  position: relative;
  padding: clamp(26px, 2.8vw, 48px);
  padding-top: clamp(36px, 3.6vw, 48px);
  overflow: visible; /* 番号のはみ出し */
}
body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__top--company{
  display: block;
}

/* 段差：左→右へ階段状（PC）。タブレット以下で弱める */
@media (min-width: 961px){
  body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__card:nth-child(2){
    margin-top: clamp(18px, 2.2vw, 28px);
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__card:nth-child(3){
    margin-top: clamp(36px, 4.2vw, 56px);
  }
}
@media (max-width: 960px){
  body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__card:nth-child(2){
    margin-top: 12px;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__card:nth-child(3){
    margin-top: 18px;
  }
}
@media (max-width: 640px){
  body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__card:nth-child(2),
  body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__card:nth-child(3){
    margin-top: 0;
  }
}

/* ------------------------------------------------------------
  事業内容ページ：INTRO（このページのみ）
------------------------------------------------------------ */
body.page-biz .service-intro .service-intro__inner{
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
body.page-biz .service-intro .service-intro__catch{
  position: relative;
  display: inline-block;
  margin: 0;
  padding-left: 18px;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.25;
  color: var(--ink);
}
body.page-biz .service-intro .service-intro__catch::before{
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  bottom: .12em;
  width: 6px;
  border-radius: 999px;
  background: var(--brand-line-grad-y);
  opacity: .95;
}
body.page-biz .service-intro .service-intro__desc{
  margin-top: clamp(16px, 2.6vw, 22px);
}
body.page-biz .service-intro .service-intro__text{
  margin: 0;
  color: #334155;
  line-height: 1.95;
  font-size: 15px;
}
body.page-biz .service-intro .service-intro__text + .service-intro__text{
  margin-top: 10px;
}

@media (max-width: 640px){
  body.page-biz .service-intro .service-intro__inner{
    text-align: left;
    padding-left: 2px; /* 縦ラインの分だけ微調整 */
  }
  body.page-biz .service-intro .service-intro__catch{
    padding-left: 16px;
    letter-spacing: .03em;
  }
}

/* ------------------------------------------------------------
  事業内容ページ：強みカード（段差なし＋整列）
  - 影響範囲は事業内容ページの強みセクションのみ
------------------------------------------------------------ */
body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__grid--v2{
  align-items: stretch;
}
body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__card{
  margin-top: 0 !important; /* 段差を無効化 */
  height: 100%;
  display: flex;
  flex-direction: column;
}
body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__text{
  flex: 1 1 auto;
}

/* 番号バッジ：指定デザイン（グラデ縁取り） */
body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__no{
  position: absolute;
  top: 10px;
  left: 0px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--ink);
  background: #fff;
  border: 2px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    var(--brand-line-grad-y);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 2px 10px rgba(17, 24, 39, .06);
}

/* ------------------------------------------------------------
  事業内容（強み）v2 cards：参考画像寄せ（このセクションのみ）
  - v2 を維持しつつ、右側に大きめアイコンを配置
  - 影響範囲は .service-biz-strength--cards のみ
------------------------------------------------------------ */
body.page-biz .service-biz-strength.service-biz-strength--v2.service-biz-strength--cards .service-biz-strength__card{
  /* 左右余白は揃えて“約30px”。アイコンは重ねる前提でテキスト幅を圧迫しない */
  padding-left: clamp(26px, 2.8vw, 34px);
  padding-right: clamp(26px, 2.8vw, 34px);
  isolation: isolate;
}
body.page-biz .service-biz-strength.service-biz-strength--v2.service-biz-strength--cards .service-biz-strength__icon--card{
  display: block;
  position: absolute;
  right: 18px;
  top: 18px;
  transform: none;
  width: clamp(78px, 7.2vw, 104px);
  height: auto;
  max-width: none;
  opacity: .5;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  /* 薄いベージュ〜薄黄色寄りに抑える（SVG色の差を吸収） */
  filter: grayscale(1) brightness(1.03) contrast(.92) sepia(.55) hue-rotate(6deg) saturate(1.35);
}
/* カードごとに absolute で個別調整（テキスト幅に影響させない／③を基準） */
body.page-biz .service-biz-strength.service-biz-strength--v2.service-biz-strength--cards .service-biz-strength__card:nth-child(1) .service-biz-strength__icon--card{
  top: 43px;
  right: 16px;
  opacity: .48;
}
body.page-biz .service-biz-strength.service-biz-strength--v2.service-biz-strength--cards .service-biz-strength__card:nth-child(2) .service-biz-strength__icon--card{
  top: 46px;
  right: 36px;
  opacity: .5;
}
body.page-biz .service-biz-strength.service-biz-strength--v2.service-biz-strength--cards .service-biz-strength__card:nth-child(3) .service-biz-strength__icon--card{
  top: 30px;
  right: 18px;
  opacity: .56;
}
body.page-biz .service-biz-strength.service-biz-strength--v2.service-biz-strength--cards .feature__top--company,
body.page-biz .service-biz-strength.service-biz-strength--v2.service-biz-strength--cards .feature__text{
  position: relative;
  z-index: 1;
}

body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__title{
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.45;
  letter-spacing: .02em;
}
body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__text{
  margin-top: 10px;
  color: #475569;
}

/* v2 レスポンシブ調整（このセクションのみ） */
body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__titles{
  /* 番号バッジと英字ラベルの干渉回避 */
  padding-left: 56px;
}
body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__label{
  display: inline-block;
  margin-top: 2px;
}

@media (max-width: 1024px){
  /* タブレット：2カラムで見せる（2枚＋1枚） */
  body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__grid--v2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 18px;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__card{
    margin-top: 0 !important; /* 段差解除 */
    padding: 26px 26px 24px;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2.service-biz-strength--cards .service-biz-strength__card{
    padding-left: 26px;
    padding-right: 26px;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2.service-biz-strength--cards .service-biz-strength__icon--card{
    width: 92px;
    opacity: .44;
    top: 18px;
    right: 18px;
    transform: none;
  }
}

/* タブレット帯は「番号・英字・見出し」を同じ起点で揃える */
@media (max-width: 1100px) and (min-width: 769px){
  body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__top--company{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__no{
    position: static;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__titles{
    padding-left: 0;
    padding-top: 0;
    display: grid;
    gap: 4px;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__label{
    margin-top: 0;
    line-height: 1.2;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__title{
    line-height: 1.35;
  }
}

@media (max-width: 768px){
  /* スマホ：必ず1カラム＋可読性優先 */
  body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__grid--v2{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__card{
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 22px 22px;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2.service-biz-strength--cards .service-biz-strength__card{
    /* アイコンは absolute で重ねるため、テキスト領域（左右余白）は常に一定 */
    padding-left: 22px;
    padding-right: 22px;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2.service-biz-strength--cards .service-biz-strength__icon--card{
    width: 78px;
    right: 16px;
    top: 16px;
    opacity: .42;
    transform: none;
  }
  /* スマホも「番号・英字・見出し」を同じ起点で揃える */
  body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__top--company{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__no{
    position: static;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__titles{
    padding-left: 0;
    padding-top: 0;
    display: grid;
    gap: 4px;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__label{
    margin-top: 0;
    line-height: 1.2;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__title{
    font-size: 18px;
    line-height: 1.35;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__text{
    font-size: 14px;
    line-height: 1.9;
  }
}

@media (max-width: 640px){
  /* 375px前後：左右余白＋固定CTAとの干渉回避 */
  body.page-biz .service-biz-strength.service-biz-strength--v2 .service-biz-strength__card{
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    width: min(560px, 100%);
    padding: 22px 18px 20px;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2.service-biz-strength--cards .service-biz-strength__card{
    /* アイコンは absolute で重ねるため、テキスト領域（左右余白）は常に一定 */
    padding-left: 18px;
    padding-right: 18px;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2.service-biz-strength--cards .service-biz-strength__icon--card{
    width: 66px;
    right: 12px;
    top: 14px;
    opacity: .38;
    transform: none;
  }
  body.page-biz .service-biz-strength.service-biz-strength--v2 .feature__no{
    width: 42px;
    height: 42px;
    font-size: 12px;
  }
}
.service-biz-strength .feature__label,
body.page-recruit .recruit-points .feature__label{
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(100, 116, 139, .88);
}
.service-biz-strength .feature__title,
body.page-recruit .recruit-points .feature__title{
  margin: 0;
  font-size: clamp(16px, 1.35vw, 18px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.45;
  color: var(--ink);
}
.service-biz-strength .feature__text,
body.page-recruit .recruit-points .feature__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: #475569;
}
.service-biz-strength .feature__no,
body.page-recruit .recruit-points .feature__no{
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--ink);
  background: #fff;
  border: 2px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    var(--brand-line-grad-y);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 2px 10px rgba(17, 24, 39, .06);
}

.service-biz-strength__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: clamp(28px, 4vw, 40px);
}
.service-biz-strength__actions .btn{
  min-width: min(280px, 100%);
}
.btn.service-biz-strength__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: normal;
}
.btn.service-biz-strength__cta--works,
.btn.service-biz-strength__cta--recruit{
  color: #000;
  background-color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  border: var(--btn-outline-w) solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 4px 16px rgba(17, 24, 39, .08);
}
.btn.service-biz-strength__cta--works:hover,
.btn.service-biz-strength__cta--recruit:hover{
  background-image:
    linear-gradient(#fffef9, #fffef9),
    var(--btn-outline-grad);
  box-shadow: 0 6px 22px rgba(17, 24, 39, .1);
  transform: translateY(-1px);
  color: #000;
}
.btn.service-biz-strength__cta:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.service-biz-strength__cta-ico{
  display: inline-block;
  font-weight: 900;
  background: var(--brand-line-grad-x);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.service-biz-strength__cta-ico--sub{
  background: linear-gradient(90deg, rgba(15, 122, 67, .85), rgba(15, 122, 67, .45));
  -webkit-background-clip: text;
  background-clip: text;
}
@media (max-width: 640px){
  /* 事業内容のカード：スマホは縦積みのまま */
  .service-biz-strength .feature__top--company{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* 採用「仕事のポイント」：番号左・日本語タイトル右（スマホのみ） */
  body.page-recruit .recruit-points .feature__top--company{
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 14px;
  }
  body.page-recruit .recruit-points .service-biz-strength__titles{
    display: flex;
    flex-direction: column-reverse; /* 見出し → 下に英字（補助） */
    gap: 3px;
    min-width: 0;
  }
  body.page-recruit .recruit-points .feature__label{
    font-size: 9px;
    letter-spacing: .14em;
    line-height: 1.2;
  }
  body.page-recruit .recruit-points .feature__title{
    line-height: 1.35;
  }
  body.page-biz .service-biz-strength__icon{
    width: 32px;
    height: 32px;
  }
  .service-biz-strength .feature__no,
  body.page-recruit .recruit-points .feature__no{
    width: 42px;
    height: 42px;
    justify-self: start;
  }
  .service-biz-strength__titles{
    width: 100%;
  }
}

/* ==================================================
  12. Page Specific
  --------------------------------------------------
  Company（会社情報ページ）
================================================== */

/* 代表挨拶 */
.media--portrait{ aspect-ratio: 4 / 5; }
.company-message{
  gap: clamp(16px, 2.2vw, 24px);
  align-items: stretch;
}
.company-message{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3.2vw, 54px);
  align-items: start;
}
.company-message__photo,
.company-message__text{
  background: transparent;
  border: none;
  box-shadow: none;
  min-width: 0;
}
.company-message{
  max-width: 100%;
}
.company-message__photo{
  /* Grid内stickyを確実に効かせる */
  align-self: start;
}
.company-message__media{
  /* 代表写真：大きすぎない高さに抑える */
  aspect-ratio: 16 / 9; /* media--portrait(4/5) を上書き */
  width: 100%;
  max-width: 100%;
  max-height: 450px;
  min-height: clamp(180px, 18vw, 280px);
  background: #f1f5f9;
  border-radius: 22px;
  border: 1px solid rgba(15, 122, 67, .12);
  box-shadow: 0 18px 60px rgba(17, 24, 39, .08);
  overflow: hidden;
  align-self: start;
  position: relative;
}
.company-message__media-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

/* Company（代表挨拶）：画像カラムをsticky（PC〜ノートPCまで） */
@media (min-width: 961px){
  .company-message__photo{
    position: sticky;
    top: 96px; /* stickyヘッダー分＋視認余白 */
    align-self: start;
  }
  .company-message__media{
    position: static;
  }
}
.company-message__content{
  padding-top: 6px;
}
.company-message__caption{
  margin-top: 28px;
}
.company-message__role{
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}
.company-message__name{
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #111;
}
.company-message__name span{
  display: inline-block;
  margin-right: 0.4em;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.company-message__note{
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.company-message__content > .company-message__title{
  margin-top: 0;
}
.company-message__title{
  margin: 0 0 12px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--ink);
  line-height: 1.55;
}
.company-message__title strong{
  font-weight: 900;
  color: var(--accent-2);
}
.company-message__body{
  color: var(--muted);
  line-height: 1.95;
}
.company-message__body p{
  margin: 0 0 12px;
}
.company-message__body p:last-child{
  margin-bottom: 0;
}
@media (max-width: 960px){
  .company-message{
    grid-template-columns: 1fr;
    overflow-x: clip;
  }
  .company-message__media{
    max-height: 360px;
    min-height: 200px;
  }
  .company-message__caption{
    margin-top: 22px;
  }
  .company-message__name{
    font-size: 20px;
  }
  .company-message__name span{
    font-size: 14px;
  }
}

/* 会社概要（表） */
.table--company{
  border-radius: 18px;
  border-color: rgba(15, 122, 67, .16);
  box-shadow: 0 18px 55px rgba(17, 24, 39, .06);
}
.table--company th,
.table--company td{
  padding: 16px 18px;
  border-top-color: rgba(15, 122, 67, .12);
}
.table--company th{
  width: 30%;
  background: #fff;
  color: rgba(7, 60, 35, .95);
  font-weight: 900;
  letter-spacing: .02em;
  position: relative;
  padding-bottom: 16px;
  border-right: none;
}
.table--company th::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* 罫線(1px)と重なりすぎない位置 */
  height: 2px;
  background: var(--brand-line-grad-x);
  opacity: .55;
}
.table--company td{
  color: #334155;
  background: #fff;
}
@media (max-width: 640px){
  .table--company{
    border-radius: 16px;
  }
  .table--company tr{
    display: block;
    padding: 14px 16px;
    border-top: 1px solid rgba(15, 122, 67, .12);
  }
  .table--company tr:first-child{
    border-top: none;
  }
  .table--company th,
  .table--company td{
    display: block;
    width: auto;
    padding: 0;
    border: none;
  }
  .table--company th{
    margin: 0 0 8px;
    background: transparent;
    color: var(--accent-2);
    padding-bottom: 10px;
  }
  .table--company th::after{
    left: 0;
    right: auto;
    width: min(120px, 70%);
    bottom: -1px;
    height: 2px;
    opacity: .55;
  }
  .table--company td{
    margin: 0;
    color: #334155;
  }
}

/* アクセス（会社情報：地図＋テキスト／採用・来社の安心感） */
.company-access{
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(22px, 3.2vw, 40px);
  align-items: start;
}
.company-access__map{
  min-width: 0;
}
.company-access__embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: min(440px, 58vh);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(15, 122, 67, .14);
  box-shadow: 0 18px 55px rgba(17, 24, 39, .06);
  background: #e8edf2;
}
.company-access__embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.company-access__aside{
  display: grid;
  gap: 16px;
  min-width: 0;
}
.company-access-card{
  position: relative;
  margin: 0;
  padding: 18px 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(15, 122, 67, .14);
  background: #fff;
  box-shadow: 0 10px 28px rgba(17, 24, 39, .05);
  overflow: hidden;
}
.company-access-card::before{
  content: none;
}
.company-access-card__title{
  /* 事業内容ページの項目見出し（概要/特徴）と同じ見せ方に揃える */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--accent-2);
  line-height: 1.35;
}
.company-access-card__title::before{
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: .9;
}
.company-access-card__body{
  display: grid;
  gap: 0;
}
.company-access-card__address{
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink);
  line-height: 1.75;
}
.company-access-card__text{
  margin: 0;
  font-size: 14px;
  color: #334155;
  line-height: 1.85;
}
.company-access-sub{
  margin: 0;
}
.company-access-sub__label{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--ink);
}
.company-access-sub__divider{
  height: 1px;
  margin: 16px 0;
  border: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 122, 67, .18) 0%,
    rgba(255, 234, 53, .35) 45%,
    rgba(15, 122, 67, .08) 100%
  );
  opacity: .85;
}
.company-access-dl{
  margin: 0;
  display: grid;
  gap: 12px;
}
.company-access-dl__row{
  margin: 0;
  display: grid;
  gap: 4px;
}
.company-access-dl__row dt{
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--muted);
}
.company-access-dl__row dd{
  margin: 0;
  font-size: 15px;
  color: #334155;
  line-height: 1.7;
}
.company-access__note{
  margin: 2px 0 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
  border: none;
  background: transparent;
}
.company-access__note::before{
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: var(--brand-line-grad-x);
  opacity: .55;
}
@media (max-width: 960px){
  .company-access{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .company-access__embed{
    aspect-ratio: 16 / 9;
    max-height: min(380px, 50vh);
  }
}
@media (max-width: 640px){
  .company-access__embed{
    aspect-ratio: 4 / 3;
    max-height: none;
  }
}

.form{
  display: grid;
  gap: 14px;
}
.page-contact .form .btns{
  justify-content: center;
  margin-top: 50px;
}
.field{
  display: grid;
  gap: 6px;
}
.field__label{ font-weight: 800; }
.field__hint{ color: var(--muted); font-size: 13px; margin: 0; }
.req{ color: #b91c1c; font-weight: 900; margin-left: 6px; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 12px;
  background: #fff;
  font: inherit;
}
textarea{ min-height: 140px; resize: vertical; }

/* ------------------------------------------------------------
  Responsive (scaffold)
------------------------------------------------------------ */
.recruit-teaser{
  border-top: 1px solid rgba(232, 188, 30, .35);
  background: #ffffff;
}
.recruit-teaser .card{
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .06);
}

/* 採用：黄を面で主役に（緑は帯・枠で締める） */
.recruit-teaser--panel{
  border-top: none;
  padding: 56px 0;
  background: var(--yellow-plane-mid);
  color: var(--ink);
  position: relative;
  border-bottom: 3px solid var(--accent);
}
/* TOP 採用：説明を削り、入口バナーとして強く見せる */
.recruit-banner{
  display: grid;
  grid-template-columns: 1.55fr .45fr;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, .12);
  background: #ffffff;
  box-shadow: 0 28px 72px rgba(17, 24, 39, .16);
  text-decoration: none;
  color: inherit;
  width: 100%;
  max-width: none;
}
.recruit-banner:hover{ text-decoration: none; }
.recruit-banner__photo{
  position: relative;
  min-height: clamp(320px, 30vw, 420px);
  background: url("../images/top/pc/22877276_m.jpg") center / cover no-repeat;
}
.recruit-banner__photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  pointer-events: none;
}
.recruit-banner__word{ display: none; }
.recruit-banner__tag{
  position: absolute;
  left: clamp(18px, 3vw, 34px);
  top: 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(226, 232, 240, .92);
  background: rgba(17, 24, 39, .55);
  border: 1px solid rgba(255,255,255,.18);
  padding: 8px 10px;
  border-radius: 999px;
}
.recruit-banner__panel{
  position: relative;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(26px, 3vw, 38px);
  background: var(--main);
  color: var(--on-yellow);
}
.recruit-banner__kicker{
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  color: rgba(17, 24, 39, .72);
  opacity: 1;
}
.recruit-banner__title{
  margin: 0;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--text);
}
.recruit-banner__lead{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(17, 24, 39, .78);
  line-height: 1.9;
}
.recruit-banner__cta{
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  color: rgba(17, 24, 39, .92);
}
.recruit-banner__cta > span[aria-hidden="true"]{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17, 24, 39, .16);
  color: rgba(17, 24, 39, .92);
  box-shadow: 0 12px 28px rgba(17, 24, 39, .18);
}
.recruit-banner:hover .recruit-banner__cta > span[aria-hidden="true"]{
  background: #ffffff;
}

@media (max-width: 960px){
  .recruit-banner{ grid-template-columns: 1fr; }
  .recruit-banner__panel{ padding: 18px 18px 20px; }
  .recruit-banner__photo{ min-height: 240px; }
  .recruit-banner__tag{ top: 16px; }
}
.kicker--on-dark{
  color: #fde68a;
}
.kicker--on-dark::before{
  background: var(--main);
  height: 2px;
}
.h2--on-dark .h2__ja{
  color: #fff;
}
.h2--on-dark .h2__en{
  color: var(--heat);
}

.btn--outline-light{
  background-color: rgba(255, 255, 255, .12);
  background-image:
    linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)),
    var(--btn-outline-grad);
  border: var(--btn-outline-w) solid transparent;
  color: #f8fafc;
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}
.btn--outline-light:hover{
  background-image:
    linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)),
    var(--btn-outline-grad);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}

.site-flow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(232, 188, 30, .35);
  border-left: 3px solid var(--accent);
  background: #ffffff;
  font-size: 13px;
  font-weight: 800;
  color: #475569;
}
.site-flow span{ color: var(--accent-2); font-weight: 900; }

.recruit-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.recruit-nav a{
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: var(--btn-outline-w) solid transparent;
  background-color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-size: 13px;
  font-weight: 800;
  color: #000;
  box-shadow: 0 2px 10px rgba(17, 24, 39, .06);
}
.recruit-nav a:hover{
  background-image:
    linear-gradient(#fffef9, #fffef9),
    var(--btn-outline-grad);
  text-decoration: none;
  color: #000;
}

.faq-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.faq-item{
  border: 1px solid rgba(232, 188, 30, .2);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  padding: 18px 20px;
  background: #ffffff;
}
.faq-item__q{ font-weight: 900; margin: 0 0 8px; color: var(--accent-2); }
.faq-item__a{ margin: 0; color: var(--muted); }

/* 採用：FAQ（アコーディオン） */
body.page-recruit .faq-accordion{
  display: grid;
  gap: 12px;
}
body.page-recruit .faq-accordion__item{
  border: 1px solid rgba(15, 122, 67, .14);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(17, 24, 39, .05);
  overflow: clip;
}
body.page-recruit .faq-accordion__q{
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
body.page-recruit .faq-accordion__q::-webkit-details-marker{ display: none; }
/* 右端のV字矢印（閉=下 / 開=上） */
body.page-recruit .faq-accordion__q::after{
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: translateY(-50%) rotate(45deg); /* down */
  transition: transform .18s ease, border-color .18s ease;
}
body.page-recruit .faq-accordion__item[open] .faq-accordion__q::after{
  transform: translateY(-50%) rotate(-135deg); /* up */
}
/* 閉じ動作中は即座に下向きへ（open解除はアニメ終了後） */
body.page-recruit .faq-accordion__item.is-closing .faq-accordion__q::after{
  transform: translateY(-50%) rotate(45deg); /* down */
}
body.page-recruit .faq-accordion__badge{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: .06em;
  color: #000;
  background-color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  border: var(--btn-outline-w) solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
}
body.page-recruit .faq-accordion__badge--a{
  background-image:
    linear-gradient(#fff, #fff),
    var(--brand-line-grad-y);
}
body.page-recruit .faq-accordion__q > span:last-child{
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--ink);
  line-height: 1.6;
  padding-right: 22px; /* 矢印分の余白 */
}
body.page-recruit .faq-accordion__panel{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-2px);
  transition: max-height .28s ease, opacity .22s ease, transform .22s ease;
}
body.page-recruit .faq-accordion__a{
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 0 18px 18px;
  color: var(--muted);
}
body.page-recruit .faq-accordion__a p{
  margin: 2px 0 0;
  line-height: 1.9;
}
body.page-recruit .faq-accordion__item[open] .faq-accordion__q{
  padding-bottom: 10px;
}
body.page-recruit .faq-accordion__item[open]{
  border-color: rgba(15, 122, 67, .20);
  box-shadow: 0 14px 40px rgba(17, 24, 39, .08);
}

.day-flow{
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.day-flow li{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(232, 188, 30, .22);
  border-left: 3px solid var(--accent);
  background: #ffffff;
}
.day-flow__time{
  font-weight: 900;
  font-size: 13px;
  color: var(--accent-2);
  letter-spacing: .04em;
}

/* 採用：1日の流れ（タイムライン／幅を絞って緩急を付ける） */
body.page-recruit .day-timeline{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  position: relative;
}
body.page-recruit .day-timeline::before{
  content: "";
  position: absolute;
  /* 時刻ラベル（min幅98px）中央を貫く位置 */
  left: 49px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(232, 188, 30, .55) 0%,
    rgba(15, 122, 67, .55) 100%
  );
  opacity: .8;
}
body.page-recruit .day-timeline__item{
  display: grid;
  grid-template-columns: 98px 1fr;
  gap: 16px;
  align-items: stretch;
  position: relative;
}
body.page-recruit .day-timeline__time{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center; /* 右カード高さに対して縦中央 */
  justify-content: flex-start;
}
body.page-recruit .day-timeline__time time{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* column(98px) と揃えて中央ラインを合わせる */
  min-width: 98px;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 13px;
  color: #000;
  background-color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    var(--btn-outline-grad);
  border: var(--btn-outline-w) solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 8px 26px rgba(17, 24, 39, .07);
}
body.page-recruit .day-timeline__body{
  background: #fff;
  border: 1px solid rgba(15, 122, 67, .12);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 10px 28px rgba(17, 24, 39, .05);
}
body.page-recruit .day-timeline__title{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--ink);
  line-height: 1.5;
}
body.page-recruit .day-timeline__text{
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}
@media (max-width: 640px){
  body.page-recruit .day-timeline::before{
    left: 49px;
  }
  body.page-recruit .day-timeline__item{
    grid-template-columns: 1fr;
    gap: 10px;
    padding-left: 0;
  }
  body.page-recruit .day-timeline__time{
    align-items: flex-start; /* SPは自然な縦並びを優先 */
  }
  body.page-recruit .day-timeline__time time{
    justify-content: flex-start;
    padding: 9px 12px;
  }
}

.case-block{
  margin: 0 0 22px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--line);
}
.case-block:last-child{ border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.case-block h3{
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--accent-2);
}
.case-block p{ margin: 0; color: var(--muted); }

.story-card{
  border: 1px solid rgba(232, 188, 30, .22);
  border-radius: 16px;
  padding: 22px 24px;
  border-left: 3px solid var(--accent);
  background: #fff;
}
.story-card__role{
  font-size: 13px;
  font-weight: 900;
  color: var(--accent-2);
  margin: 0 0 8px;
  letter-spacing: .06em;
}

.company-teaser{
  position: relative;
  overflow: clip;
  border-top: 1px solid rgba(15, 122, 67, .1);
  background: var(--surface-warm);
}
.company-teaser .card{
  border-radius: 18px;
  border-color: rgba(15, 122, 67, .16);
  border-left: 3px solid var(--accent);
  box-shadow: 0 10px 32px rgba(17, 24, 39, .08);
}

@media (max-width: 1024px){
  .recruit-panel{
    grid-template-columns: 1fr;
  }
  .recruit-panel__grid{
    grid-template-columns: 1fr;
  }
  .recruit-panel__visual{
    min-height: 220px;
  }
  .section--works-showcase{
    padding: 56px 0;
  }
  .grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__grid{ grid-template-columns: 1fr; }
  .site-footer .footer__grid{ grid-template-columns: 1fr; }
  /* TOP：1024px以下はロゴが内側に入りすぎないよう左右余白を少し詰める */
  .page--home .site-header{
    padding-left: var(--wrap-pad);
    padding-right: var(--wrap-pad);
  }
  /* TOP：WORKS/NEWS ボタンは見出し横に置かず、コンテンツ直下へ */
  .page--home .section--works-showcase .section-head > .btn,
  .page--home .home-news .section-head > .btn{
    display: none;
  }
  .page--home .home-section-actions{
    margin-top: 18px;
    display: flex;
    justify-content: flex-start;
  }
  .page--home .home-section-actions .btn{
    width: auto;
    min-width: min(260px, 100%);
    justify-content: center;
  }
  /* ハンバーガー（タブレット〜） */
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    font-size: 0;
    line-height: 0;
    border-color: rgba(203,213,225,.95);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 3px 14px rgba(17, 24, 39, .08);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    /* 開閉前後で位置がズレないよう固定 */
    position: fixed;
    top: 8px;
    right: 10px;
    z-index: 1300;
  }
  .nav-toggle:hover{
    background: var(--main-weak-2);
    border-color: rgba(232, 188, 30, .55);
    box-shadow: 0 6px 18px rgba(17, 24, 39, .10);
    text-decoration: none;
  }
  .nav-toggle::before,
  .nav-toggle::after{
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .2s ease, top .2s ease, opacity .2s ease, box-shadow .2s ease;
  }
  .nav-toggle::before{
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
  }
  .nav-toggle::after{
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
  }
  .nav-toggle:focus-visible{
    outline: 2px solid var(--main);
    outline-offset: 3px;
  }

  /* SP/タブレット：ドロワー専用リストのみ表示（PCの並びは維持） */
  .global-nav__list--desktop{
    display: none !important;
  }
  .global-nav__list--drawer{
    display: flex !important;
  }

  .nav-overlay{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .64);
    z-index: 1100;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
  }

  /* ドロワー（右から） */
  .global-nav{
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(82vw, 340px);
    padding: 70px 18px 20px;
    border-radius: 0;
    border-left: 1px solid rgba(15, 23, 42, .10);
    background: #fffdf8; /* ごく薄いアイボリーで“浮き”を抑える */
    box-shadow: 0 26px 70px rgba(2, 6, 23, .22);
    z-index: 1200;
    transform: translateX(100%);
    transition: transform .22s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* ドロワー上部の“見出し”帯（疑似要素で追加） */
  .global-nav::before{
    content: "MENU";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    font-weight: 900;
    letter-spacing: .14em;
    color: var(--ink);
    background: #fffdf8;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 8px 24px rgba(2, 6, 23, .05);
  }
  /* TOPはPC時にナビ文字色が白なので、ドロワー時は黒に戻す */
  .page--home .global-nav a{
    color: var(--ink);
  }
  .page--home .global-nav a[aria-current="page"]{
    color: var(--ink);
  }
  .global-nav ul{
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 0;
    margin: 0;
  }
  /* 区切り線（主張しすぎない薄い線） */
  .global-nav li{
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    padding-bottom: 6px;
    margin-bottom: 6px;
  }
  /* 採用CTAはリストの区切り線レイアウトを適用しない（上部CTA専用の区切り線を使う） */
  .global-nav li.global-nav__cta{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .global-nav li:last-child{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .global-nav a{
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 14px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: .03em;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
  }
  .global-nav a:hover{
    /* 黄・緑を“ごく淡く”だけ（派手な面にしない） */
    background: rgba(232, 188, 30, .10);
    border-color: rgba(15, 122, 67, .12);
    transform: translateY(-1px);
    text-decoration: none;
  }
  .global-nav a[aria-current="page"]{
    background: rgba(232, 188, 30, .14);
    border-color: rgba(15, 122, 67, .14);
  }
  .global-nav a:active{
    transform: translateY(0);
  }
  /* 開いた状態 */
  .gnav-check:checked ~ .nav-overlay{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .gnav-check:checked ~ .global-nav{
    transform: translateX(0);
  }
  /* 下層：KV上では白文字になるが、ドロワー内は必ず黒文字に戻す */
  .gnav-check:checked ~ .global-nav,
  .gnav-check:checked ~ .global-nav a,
  .gnav-check:checked ~ .global-nav a[aria-current="page"]{
    color: var(--ink) !important;
  }
  /* 開いた時は×に変形（位置は常に固定） */
  .gnav-check:checked + .nav-toggle::before{
    box-shadow: none;
    transform: translateY(-50%) rotate(45deg);
  }
  .gnav-check:checked + .nav-toggle::after{
    opacity: 1;
    transform: translateY(-50%) rotate(-45deg);
  }
  .hero__inner{
    padding: 5rem 0 3.5rem;
  }
  .hero--impact .hero__inner{
    justify-content: flex-start;
    padding-right: var(--gutter);
    padding-top: clamp(7rem, 36vh, 11.5rem);
    padding-bottom: clamp(3.25rem, 9vh, 5rem);
  }
  .hero__main{
    margin-left: 0;
    max-width: 100%;
  }
  .hero--impact .hero__main{
    margin-left: 0;
    margin-right: auto;
    max-width: 100%;
    padding-left: 1.1rem;
  }
  .site-footer .footer__navgrid{ grid-template-columns: 1fr; }
  .news-item{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  /* 全ページ：タブレット・スマホ幅は黄色採用 CTA（.hero-recruit）を画面下固定（採用導線の一本化）
     階層：本文（0〜2）＜ 固定CTA（90）＜ ヘッダー（1000）＜ オーバーレイ（1100）＜ ドロワー（1200） */
  .page--home .hero{
    /* MV内の重なりは維持しつつ、固定CTAが不要に最前面化しにくいよう isolate は外す */
    isolation: auto;
  }
  /* 固定CTA用の余白は body ではなく .site-footer に付ける（body の下は --bg の白帯になり、フッターと CTA の間が不自然に見えるため） */
  body{
    padding-bottom: 0;
  }
  html{
    scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .site-footer{
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-cta{
    display: none !important;
  }
  .hero-recruit{
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 90;
  }
  /* 採用ページのみ：固定「採用募集中」は重複するため非表示（スマホ/タブレット帯のみ） */
  body.page-recruit .hero-recruit{
    display: none !important;
  }
}

@media (max-width: 960px){
  .site-footer .footer__top{
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .site-footer .footer__right{
    width: 100%;
    align-items: flex-start;
  }
  .site-footer .footer-menu{
    justify-content: flex-start;
  }
  .site-footer .footer__subnav{
    justify-content: flex-start;
  }
  .site-footer .site-footer__bottom-inner{
    justify-content: flex-start;
  }
}

/* ==================================================
  13. Responsive
  --------------------------------------------------
  ブレークポイント順: 1280 → 1024 → 960 → 768 → 640 → 360
  （大きい画面幅から小さい画面幅へ。最終カスケード段）
================================================== */

/* ノートPC・小さめデスクトップ */
@media (max-width: 1280px){
  :root{
    --wrap-pad: 22px;
  }
  .section{
    padding: 64px 0;
  }
  .section--works-showcase{
    padding: 72px 0;
  }
  /* 961px以上はヘッダーが“PCナビ表示”のため、詰まりを防ぐ */
  .global-nav ul{
    gap: 18px;
  }
  .global-nav a{
    padding: 8px 8px;
  }
  .header__actions{
    gap: 10px;
  }
}

/* タブレット横・13インチ系 */
@media (max-width: 1024px){
  :root{
    /* タブレット・スマホ：全ページ共通で左右余白 15px に統一 */
    --wrap-pad: 15px;
  }
  .container--wide,
  .container--narrow{
    --wrap-pad: 15px;
  }
  /* TOP（1024px以下）：container--wide を “RECRUIT/NEWS(=narrow)” の基準線へ揃える */
  .page--home .container--wide{
    --wrap-max: 1024px;
    --wrap-pad: 15px;
  }
  /* TOPのSERVICE/COMPANYは個別に --wrap-pad を持つため、同一基準で上書き */
  .page--home .section--biz .container--wide,
  .page--home .company-teaser .container--wide{
    --wrap-max: 1024px;
    --wrap-pad: 15px;
  }

  /* 事業内容ページ（page-biz）：1024px以下は本文の基準線に揃える */
  body.page-biz .container--wide{
    --wrap-max: 1024px;
    --wrap-pad: 15px;
  }
  .section{
    padding: 56px 0;
  }
  .section--tight{
    padding: 40px 0;
  }
  .section--works-showcase{
    padding: 60px 0;
  }
  .recruit-teaser--panel{
    padding: 48px 0;
  }
  .h2__ja{
    font-size: clamp(22px, 3.8vw, 30px);
  }
  .lead{
    max-width: 100%;
  }
  /* 961〜1024px帯でナビが窮屈になりやすいので、さらに詰める */
  .global-nav ul{
    gap: 12px;
  }
  .global-nav a{
    padding: 8px 6px;
    letter-spacing: .02em;
  }
  .grid--4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* タブレット縦・大きめスマホ横：見出し＋ボタンを縦積みしやすく */
@media (max-width: 768px){
  :root{
    --wrap-pad: 15px;
  }
  body{
    overflow-x: clip;
  }
  .section{
    padding: 48px 0;
  }
  .section--works-showcase{
    padding: 48px 0;
  }
  .section-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
  }
  .section-head .btn{
    align-self: stretch;
    max-width: none;
    width: 100%;
    justify-content: center;
  }
  /* TOPは `.page--home .section-head .btn{ width:260px; }` があるため、SP側で明示的に解除 */
  .page--home .section-head .btn{
    width: 100%;
  }
  .section-head--impact .lead{
    margin-bottom: 0;
  }
  .grid--2{
    grid-template-columns: 1fr;
  }
  .company-teaser .grid--2{
    gap: 16px;
  }
  .cta__grid .btns{
    flex-direction: column;
    align-items: stretch;
  }
  .cta__grid .btns .btn{
    width: 100%;
    justify-content: center;
  }
  .hero--impact{
    min-height: min(82vh, 840px);
  }
  .page--home .site-header{
    --wrap-pad: 16px;
    background: rgba(255, 255, 255, .86);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 3px 14px rgba(17, 24, 39, .05);
  }
}

/* スマホ */
@media (max-width: 640px){
  .grid--4, .grid--3{ grid-template-columns: 1fr; }
  .day-flow li{ grid-template-columns: 1fr; gap: 8px; }
  .section-head .btn--small{
    font-size: 13px;
    padding: 11px 16px;
  }
  .card__body{
    padding: 18px 16px;
  }
  /* TOP会社導線：下部の一覧ボタン群（home-section-actions）と同じサイズ感に揃える */
  .page--home .company-teaser__actions{
    justify-content: flex-start;
  }
  .page--home .company-teaser__actions .btn{
    width: auto;
    min-width: min(260px, 100%);
    justify-content: center;
  }
  .recruit-teaser--panel{
    padding: 40px 0;
  }
  .recruit-banner__word{
    font-size: clamp(40px, 14vw, 72px);
  }
}

/* 小型スマホ・縦持ち最適化 */
@media (max-width: 480px){
  :root{
    --wrap-pad: 15px;
  }
  .section{
    padding: 36px 0;
  }
  .section--works-showcase{
    padding: 40px 0;
  }
  .brand__tagline{
    font-size: 11px;
  }
  .h2__ja{
    font-size: clamp(20px, 6.2vw, 26px);
  }
  .kicker{
    font-size: 11px;
  }
  .btn{
    min-height: 44px;
    padding: 12px 18px;
  }
  .btn--small{
    min-height: 42px;
    padding: 10px 16px;
  }
  .hero--impact .hero__title{
    font-size: clamp(26px, 8vw, 40px);
  }
  .hero--impact .hero__lead{
    font-size: 14px;
    line-height: 1.75;
  }
  .hero-recruit{
    width: auto;
    max-width: calc(100vw - 24px);
  }
  .cta__box{
    padding: 18px 16px;
  }
  .cta__phone{
    font-size: clamp(18px, 5vw, 22px);
    word-break: break-all;
  }
}

/* --------------------------------------------------
  Responsive: Lower KV / Tables / Forms（全下層共通）
-------------------------------------------------- */
@media (max-width: 1024px){
  .subkv{
    padding: 48px 0 44px;
  }
  .page-kv__en{
    font-size: clamp(40px, 6vw, 52px);
  }
  .page-kv__title{
    font-size: clamp(20px, 2.8vw, 24px);
  }
  .subkv--photo{
    padding: 80px 0 48px;
  }
}

/* 下層KV（タブレット帯）：余白・左位置・縦線バランスを最適化 */
@media (max-width: 1024px) and (min-width: 769px){
  body:not(.page--home) .subkv--photo{
    padding-top: 104px;
    padding-bottom: 56px;
  }
  body:not(.page--home) .subkv--photo .page-kv__inner{
    /* 15px基準だと詰まって見えるため、タブレットは少し内側へ */
    width: min(100% - 48px, var(--page-kv-max));
    padding-left: 18px;
  }
  body:not(.page--home) .subkv--photo .page-kv__inner::before{
    top: 4px;
    bottom: 4px;
    width: 5px;
    opacity: .9;
  }
}

@media (max-width: 768px){
  .subkv{
    padding: 40px 0 36px;
  }
  .subkv--photo{
    padding: 44px 0 40px;
    background-position: 85% center;
  }
  /* 下層KV（中間幅〜スマホ）：タイトルブロックを下げて上余白を確保 */
  body:not(.page--home) .subkv--photo{
    padding-top: 72px;
    padding-bottom: 44px;
  }
  body:not(.page--home) .subkv--photo .page-kv__inner{
    /* 縦線が左に残りすぎないよう、タイトルに寄せる */
    padding-left: 16px;
    /* 文字サイズではなくブロック位置で“詰まり”を解消 */
    margin-top: 10px;
  }
  body:not(.page--home) .subkv--photo .page-kv__inner::before{
    top: 3px;
    bottom: 3px;
    width: 5px;
  }
  .breadcrumb{
    font-size: 13px;
    padding: 12px 0;
  }
  main .section > .container > h2.h2:first-child,
  main .section .h2:not(.h2--display){
    font-size: clamp(22px, 4.5vw, 28px);
  }
  .site-flow{
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 8px;
  }
  .works-cat-nav,
  .recruit-nav{
    gap: 8px;
  }
  .works-cat-nav a,
  .recruit-nav a{
    padding: 10px 14px;
    font-size: 12px;
  }
  .faq-item{
    padding: 16px 16px;
  }
  .story-card{
    padding: 18px 16px;
  }
}

@media (max-width: 640px){
  /* 下層KV（スマホ）：高さ250px統一・背景coverで上下余白なし */
  body:not(.page--home) .subkv--photo{
    height: 250px;
    min-height: 250px;
    padding: 0;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-top: 60px;
  }
  body:not(.page--home) .subkv--photo .page-kv__inner{
    margin-top: 0;
    padding-left: 16px;
    width: min(100% - (var(--wrap-pad) * 2), var(--page-kv-max));
  }
  /* 事業内容・施工実績：スマホ版KV画像（PC版は変更しない） */
  body.page-biz .subkv--photo{
    background-image: url("../images/service/sp/service_kv.webp");
  }
  body.page-works .subkv--photo,
  body.page-works-detail .subkv--photo{
    background-image: url("../images/works/sp/works_kv.webp");
  }
  .table th,
  .table td{
    padding: 11px 10px;
    font-size: 14px;
  }
  .table th{
    width: 32%;
    min-width: 7.5em;
  }
  .table td{
    word-break: break-word;
  }
  .container:has(> table.table){
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--wrap-pad));
    margin-right: calc(-1 * var(--wrap-pad));
    padding-left: var(--wrap-pad);
    padding-right: var(--wrap-pad);
    max-width: none;
    width: calc(100% + 2 * var(--wrap-pad));
  }
  /* 会社概要 / 募集要項：表自体が収まる場合は“フルブリード化”しない（基準線ズレ対策） */
  body.page-company .container:has(> table.table),
  body.page-recruit .container:has(> table.table){
    padding-left: 0;
    padding-right: 0;
    width: auto;
    max-width: min(100% - (var(--wrap-pad) * 2), var(--wrap-max));
  }
  .card__body:has(> .table){
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .site-footer .footer__phone{
    font-size: clamp(17px, 4.5vw, 20px);
    word-break: break-all;
  }
}

/* 極狭幅（フォールド内画面など） */
@media (max-width: 360px){
  .header__actions .btn--cta-contact{
    display: none;
  }
  .hero-recruit__main{
    font-size: 14px;
  }
}

/* 縦幅が狭い端末（スマホ横・小型ノートの分割画面など） */
@media (max-height: 520px) and (orientation: landscape){
  .hero--impact{
    min-height: unset;
  }
  .hero--impact .hero__inner{
    padding-top: clamp(4rem, 12vh, 6rem);
    padding-bottom: 2rem;
  }
  .section--works-showcase{
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* お問い合わせ（page-contact）専用：エラー/確認/迷惑メール対策表示 */
.page-contact .field__error{
  margin-top: 6px;
  font-size: 14px;
  color: #b91c1c;
  line-height: 1.5;
}
.page-contact .form-error{
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(185, 28, 28, .25);
  background: rgba(185, 28, 28, .06);
  color: #7f1d1d;
  border-radius: 8px;
}
.page-contact .hp{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.page-contact .contact-confirm__list{
  display: grid;
  gap: 10px;
  margin: 18px 0 22px;
}
.page-contact .contact-confirm__row{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.page-contact .contact-confirm__dt{
  font-weight: 700;
}
.page-contact .contact-confirm__dd{
  margin: 0;
  word-break: break-word;
}
@media (max-width: 640px){
  .page-contact .contact-confirm__row{
    grid-template-columns: 1fr;
  }
}

/* お問い合わせ完了画面（左寄せ・背景/枠/中央寄せなしで整える） */
.page-contact.is-contact-complete .lead{
  margin-bottom: 18px;
}
.page-contact .contact-complete{
  margin-top: 10px;
}
.page-contact .contact-complete__title{
  margin: 0 0 14px;
  line-height: 1.35;
}
.page-contact .contact-complete__body{
  display: grid;
  gap: 10px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(0,0,0,.78);
}
.page-contact .contact-complete__body p{
  margin: 0;
}
.page-contact .contact-complete__btns{
  margin-top: 30px;
  justify-content: flex-start;
}
.page-contact .contact-complete__btns .btn{
  min-width: min(320px, 100%);
}
@media (max-width: 640px){
  .page-contact .contact-complete{
    margin-top: 6px;
  }
  .page-contact .contact-complete__btns{
    margin-top: 30px;
  }

  /* お問い合わせ確認：スマホ時のみ「戻る」を左寄せ */
  .page-contact .contact-confirm .btns{
    flex-direction: column;
    align-items: flex-start;
  }
  .page-contact .contact-confirm .btns .btn{
    width: 100%;
  }
  .page-contact .contact-confirm .btns .btn:first-child{
    width: auto;
  }
}