/* ============================================================
   HOKUTOU GROUP - Shared Stylesheet
   全ページ共通スタイルシート。ページ固有のスタイルは各 HTML の
   <style> ブロックに記述し、このファイルを上書きする。
   ============================================================ */

/* ── 1_RESET & BASE ──
   全要素のデフォルト margin/padding をゼロにし、
   box-sizing を border-box に統一する。
   これにより padding/border が要素の width/height に含まれ、
   レイアウト計算が直感的になる。 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── CSS カスタムプロパティ（変数）定義 ──
   :root に定義することで全セレクタから var() で参照できる。
   色・フォント・サイズなどをここで一元管理し、
   テーマ変更時はここだけ修正すればよい。 */
:root {
  /* ── ブランドアクセント（青） ──
     primary      : ボタン・下線・アクセント要素の基本色
     primary-light: hover 時・ラベル・リンクなど明るめ表示
     primary-dark : ボタン hover 時の暗転色、hero グラデ開始色 */
  --color-primary:       #0066cc;
  --color-primary-light: #0099ff;
  --color-primary-dark:  #0050a7;

  /* ── 背景・サーフェス ──
     bg         : <body> の最背面背景色（ダークグレー）
     surface    : カード・テーブル th・ヘッダーなど浮き上がった面の色
     light-gray : 旧ライトテーマ時の #f5f7fa を置き換えた後方互換エイリアス
     footer-bg  : フッター専用の最も暗い背景色 */
  --color-bg:         #2e2e34;   /* ページ背景 */
  --color-surface:    #3a3a42;   /* カード・セクション面 */
  --color-light-gray: #3a3a42;   /* 旧 #f5f7fa の後方互換エイリアス */
  --color-footer-bg:  #1e1e22;   /* フッター背景 */

  /* ── ボーダー・区切り ──
     テーブル・カード・フォーム枠線など区切り線に使用 */
  --color-border:     #525260;

  /* ── テキスト ──
     dark  : 本文・見出しなど主要テキスト（ダーク背景なので明るい色）
     gray  : 説明文・補足など優先度の低いテキスト
     white : 白抜き文字が必要な箇所（ボタン・フッターなど） */
  --color-dark:  #f0f2f6;   /* メインテキスト（ライト） */
  --color-gray:  #9aa8c0;   /* サブテキスト */
  --color-white: #ffffff;

  /* ── アクセント（赤） ──
     ホクトウ工業株式会社（子会社）セクションの見出し・テーブルに使用。
     red       : 見出し文字色・左ボーダーなど
     red-dark  : hover 時・枠線の暗転色
     red-table : .info-table の th.th-red 専用（やや暗め） */
  --color-accent-red:       #cc3333;   /* ホクトウ系セクション見出し */
  --color-accent-red-dark:  #a02020;   /* 同・hover / border */
  --color-accent-red-table: #c42929;   /* テーブル th.th-red */

  /* ── システム変数 ──
     font-main    : 日本語優先のフォントスタック
     header-height: JS でモバイルナビ top 位置の計算に使用（64px）
     transition   : hover アニメーションの共通イージング（0.2s ease）
     inner-width  : コンテンツ最大幅（1200px）。.inner に適用 */
  --font-main:     'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  --header-height: 64px;
  --transition:    0.2s ease;
  --inner-width:   1200px;
}

/* ── スクロール挙動 ──
   アンカーリンク（#rinen など）でジャンプする際に
   瞬間移動せず滑らかにスクロールする */
html { scroll-behavior: smooth; }

/* ── ページ全体の基本スタイル ──
   font-family: 全テキストに日本語フォントスタックを適用
   color      : ダーク背景に映える明るい文字色
   background : ページ全面のダークグレー背景
   line-height: 1.7 で和文テキストの可読性を確保
   font-size  : 基準フォントサイズ（rem の基点にはなっていない） */
body {
  font-family: var(--font-main);
  color: var(--color-dark);
  background: var(--color-bg);
  line-height: 1.7;
  font-size: 15px;
}

/* ── 基本要素リセット ──
   a  : 下線と継承色を除去し、親要素の color をそのまま使う
   img: はみ出し防止（max-width:100%）と高さ自動調整、
        ブロック化でインライン時の下の謎スペースを除去
   ul : デフォルトの黒丸リストを非表示 */
a   { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul  { list-style: none; }

/* ============================================================
   2_LAYOUT HELPERS
   ページ全体で繰り返し使うレイアウト補助クラス
   ============================================================ */

/* .inner  : コンテンツを中央寄せで最大幅 1200px に制限する
             左右の余白は各 section の padding で制御
   section : 全セクションに上下 64px・左右 24px の余白を付与 */
.inner  { max-width: var(--inner-width); margin: 0 auto; }
section { padding: 64px 24px; }

/* ── セクション見出し（ヘッダーブロック） ──
   .section-header : 見出し全体を中央寄せ。下に 48px の余白でコンテンツと分離
   .section-label  : 英語の小見出し（例: ABOUT US）
                     letter-spacing と uppercase で装飾的なラベルに
   .section-title  : 日本語の大見出し
                     clamp() で画面幅に応じて 20〜28px にスケール */
.section-header { text-align: center; margin-bottom: 48px; }

.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;          /* 文字間を広げて装飾ラベル風に */
  color: var(--color-primary-light);
  text-transform: uppercase;      /* 小文字英字を自動で大文字表示 */
  margin-bottom: 8px;
}
.section-title {
  font-size: clamp(20px, 3vw, 28px); /* 最小20px〜最大28px、3vwで画面幅に追従 */
  font-weight: 700;
  color: var(--color-dark);
}
/* 見出し下の青いアクセントライン
   ::after で実装することで HTML に要素を追加せず装飾できる
   width:40px / height:3px の短い横線を中央に表示 */
.section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-primary);
  margin: 12px auto 0;
  border-radius: 2px;
}

/* ============================================================
   3_HEADER / NAV
   全ページ共通のグローバルナビゲーション
   ============================================================ */

/* ── ヘッダー本体 ──
   position:sticky で画面上部に固定（スクロールしても追従）
   ※ index.html のみ JS で fixed !important に上書きされる
   z-index:100  : コンテンツより手前、モバイルナビ(99)より奥に重ねる
   transition   : index.html の is-top クラス切り替え時に
                  背景色・影・ボーダーをなめらかに変化させる */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-primary);
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
  transition: background 0.4s ease, box-shadow 0.4s ease, border-bottom-color 0.4s ease;
}

/* ── nav 内部レイアウト ──
   flex で ロゴ / ナビリンク / ハンバーガーを横並びに配置
   max-width で .inner と同じ 1200px に制限して中央寄せ */
nav {
  max-width: var(--inner-width);
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ── ロゴ ──
   flex-shrink:0 でナビリンクに圧縮されないよう固定
   filter: brightness(0) invert(1) で画像を白色に変換
   → 暗い背景・透過背景どちらでも白ロゴが映える */
.logo { flex-shrink: 0; display: flex; align-items: center; margin-left: -12px; }
.logo img {
  height: 50px;
  width: auto;
  /* スクロール後（メニューバー表示時）はカラーロゴをそのまま表示 */
  filter: none;
  opacity: .9;
  transition: filter 0.4s ease;
}

/* ── デスクトップナビリンク ──
   gap:4px で各リンク間に少し余白
   1000px 以下では display:none で非表示（ハンバーガーに切替） */
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links li a {
  display: block;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-dark);
  position: relative;             /* ::after の基点 */
  white-space: nowrap;            /* 改行防止 */
  transition: color var(--transition);
}

/* ── ナビホバーアンダーライン（shamaison 風） ──
   通常時: width:0 / left:50% で中央に幅ゼロの不可視線
   hover 時: width が広がり left が 12px(padding分)に移動
   → 中央から左右に広がるように見えるアニメーション */
.nav-links li a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary-light);
  border-radius: 1px;
  transition: width 0.25s ease, left 0.25s ease;
}
.nav-links li a:hover,
.nav-links li a.active {
  color: var(--color-primary-light);
}
.nav-links li a:hover::after,
.nav-links li a.active::after {
  width: calc(100% - 24px);  /* padding 12px × 2 を除いた幅 */
  left: 12px;
}

/* ── ドロップダウンメニュー ──
   has-sub      : 親 <li> を position:relative にして子メニューの基点に
   has-sub > a::after: ▾ 記号を追加して子メニューがあることを示す
   .nav-sub     : 通常は display:none で非表示
                  position:absolute で親リンク直下に重なって表示
                  z-index:200 でヘッダー(100)より手前に出る
   :hover .nav-sub: 親 li にホバーで表示（CSS のみ、JS 不要） */
.nav-links li.has-sub { position: relative; }
.nav-links li.has-sub > a::after { content: ' ▾'; font-size: 10px; }
.nav-sub {
  display: none;
  position: absolute;
  top: 100%;                      /* 親リンクのすぐ下に配置 */
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  min-width: 160px;
  padding: 4px 0;
  z-index: 200;
}
.nav-links li.has-sub:hover .nav-sub { display: block; }
.nav-sub li a {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--color-dark);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
/* ドロップダウン項目ホバー: 背景を primary 色に塗り文字を白に */
.nav-sub li a:hover { background: var(--color-primary); color: var(--color-white); }

/* ── 透過ヘッダー状態（index.html トップのみ） ──
   JS のスクロールイベントで header に .is-top クラスを付与/除去する。
   スクロール量が少ない（ヒーロー表示中）ときだけ透明になる。
   background:transparent にすることでヒーロー画像がヘッダー下まで見える。
   ナビ文字・アンダーライン・ロゴを白系に切り替え視認性を確保。
   .nav-sub はドロップダウンなので透明にせず surface 色を維持。 */
header.is-top {
  background: transparent;
  box-shadow: none;
  border-bottom-color: transparent;
}
header.is-top .nav-links li a              { color: rgba(255,255,255,.9); }
header.is-top .nav-links li a:hover,
header.is-top .nav-links li a.active      { color: #fff; }
header.is-top .nav-links li a::after      { background: rgba(255,255,255,.75); }
header.is-top .logo img                   { opacity: 1; filter: brightness(0) invert(1); /* 動画上では白ロゴ */ }
header.is-top .nav-sub                    { background: var(--color-surface); }
header.is-top .nav-sub li a               { color: var(--color-dark); }

/* ── メニューを開いている間は透過を解除（index トップでも通常表示） ──
   ハンバーガーを押してモバイルメニューを開くと、最上部（動画透過）でも
   ヘッダーを通常のグレー背景タイプに切り替える。
   （開いたときに付く .hamburger[aria-expanded="true"] を :has() で検知）
   → ロゴも白抜きをやめて通常のカラーロゴに戻し、暗いメニュー背景となじませる。 */
header.is-top:has(.hamburger[aria-expanded="true"]) {
  background: var(--color-surface);
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
  border-bottom-color: var(--color-primary);
}
header.is-top:has(.hamburger[aria-expanded="true"]) .logo img {
  filter: none;
  opacity: .9;
}

/* ── ハンバーガーボタン ──
   通常: display:none で非表示（デスクトップ）
   1000px 以下: display:flex で表示（モバイル）
   3本の <span> が縦に並び、ハンバーガーアイコンを構成する。
   JS でクリック時に transform（回転・移動）を付与してバツ印に変化させる。 */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;                       /* 3本線の間隔 */
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-dark);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
/* ── メニューを開いた状態（aria-expanded="true"）でバツ印に変化 ──
   common.js が開閉時に aria-expanded を切り替える。
   上下の線を中央に寄せて回転、中央の線を消すことで × を表現する。
   （span の間隔 gap:5px + 線の高さ 2px = 中心間 7px 分 translateY） */
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── モバイルナビ オーバーレイ ──
   inset: ヘッダー高さ分だけ上を空けて画面下端まで覆う
   z-index:99 でヘッダー(100)より 1 段下に重ねる（ヘッダーが見える）
   overflow-y:auto で項目が多い場合にスクロール可能
   背景は rgba で不透明度 97% の暗色（背景がうっすら透ける）

   ▼ 開閉アニメーション
   display は transition できないため display:none は使わず、常に配置しておき
   clip-path（カーテン）と opacity/visibility で開閉する。
   閉：clip-path: inset(0 0 100% 0) で上端に巻き上げて隠す
   開：clip-path: inset(0 0 0 0)   で下端まで「下に広がる」ように展開
   visibility は閉じ切ってから hidden にして、閉じるアニメを最後まで見せる。 */
.mobile-nav {
  display: flex;
  position: fixed;
  inset: var(--header-height) 0 0 0; /* top=64px, right=0, bottom=0, left=0 */
  background: rgba(28,28,32,.97);
  z-index: 99;
  padding: 20px 24px;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);   /* 閉：上端に巻き上げ */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    clip-path .3s cubic-bezier(.4, 0, .2, 1),
    opacity .2s ease,
    visibility 0s linear .3s;
}
.mobile-nav.open {
  clip-path: inset(0 0 0 0);      /* 開：下端まで展開（下に広がる） */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    clip-path .38s cubic-bezier(.33, 1, .68, 1),
    opacity .16s ease;
}

/* 各項目を少しずつ遅らせて上からフワッと降ろす（カスケード表示） */
.mobile-nav > * {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .26s ease, transform .26s ease;
}
.mobile-nav.open > * {
  opacity: 1;
  transform: translateY(0);
}
.mobile-nav.open > *:nth-child(1)  { transition-delay: .04s; }
.mobile-nav.open > *:nth-child(2)  { transition-delay: .06s; }
.mobile-nav.open > *:nth-child(3)  { transition-delay: .08s; }
.mobile-nav.open > *:nth-child(4)  { transition-delay: .10s; }
.mobile-nav.open > *:nth-child(5)  { transition-delay: .12s; }
.mobile-nav.open > *:nth-child(6)  { transition-delay: .14s; }
.mobile-nav.open > *:nth-child(7)  { transition-delay: .16s; }
.mobile-nav.open > *:nth-child(8)  { transition-delay: .18s; }
.mobile-nav.open > *:nth-child(9)  { transition-delay: .20s; }
.mobile-nav.open > *:nth-child(10) { transition-delay: .22s; }
.mobile-nav.open > *:nth-child(11) { transition-delay: .24s; }
.mobile-nav.open > *:nth-child(12) { transition-delay: .26s; }

/* 動きを抑える設定の利用者にはアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav > * { transition-duration: .01ms; }
}
.mobile-nav a {
  color: var(--color-white);
  font-size: 16px;                /* デスクトップより大きく、タップしやすく */
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08); /* 薄い区切り線 */
  display: block;
  transition: color var(--transition);
}
.mobile-nav a:hover { color: var(--color-primary-light); }
/* .mob-section : モバイルナビ内のカテゴリラベル（「会社情報」など）
   ナビリンクより小さく・大文字・primary 色でカテゴリ区切りを示す */
.mobile-nav .mob-section {
  color: var(--color-primary-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 12px;
  padding: 4px 8px 0;
}
/* 先頭セクションは上の余白を詰める（コンテナの padding と二重になるため） */
.mobile-nav .mob-section:first-child { margin-top: 0; }

/* ============================================================
   4_PAGE HERO（サブページ用タイトルバー）
   company / message / process などのサブページ最上部に表示する
   ページタイトル + パンくずリストのブロック
   ============================================================ */

/* ── page-hero 全体 ──
   linear-gradient で primary-dark → primary の青グラデ背景
   高さは padding で制御（固定 height は使わない） */
.page-hero {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 24px;
  color: var(--color-white);
}
.page-hero .inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── パンくずリスト ──
   文字色は白の 45% 透明（控えめな表示）
   margin-top: -10px でページタイトルと詰めて縦幅を圧縮 */
.page-hero .breadcrumb {
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,.45);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  margin-top: -10px;
  margin-bottom: 3px;
  padding: 3px;
}
.page-hero .breadcrumb a      { color: rgba(255,255,255,.45); transition: color var(--transition); }
.page-hero .breadcrumb a:hover{ color: var(--color-white); }
.page-hero .breadcrumb .sep   { color: rgba(255,255,255,.25); } /* 区切り文字「›」などを薄く */
.page-hero .breadcrumb .cur   { color: rgba(255,255,255,.75); } /* 現在ページは少し明るく */

/* ── ページタイトル (h1) ──
   clamp() で 22〜30px にスケール。line-height:1.2 でコンパクトに */
.page-hero h1 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

/* ── 英語サブタイトル ──
   h1 の下に小さく英字で表示するキャプション
   margin-bottom:-3px でブロック全体の下余白を調整 */
.page-hero .page-hero-sub {
  font-size: clamp(10px, 3vw, 13px);
  line-height: 1;
  margin-top: 4px;
  margin-bottom: -3px;
  color: rgba(255,255,255,.5);
}

/* ============================================================
   5_CARDS（カードグリッド）
   会社トップの事業紹介など複数カードを並べるレイアウト
   ============================================================ */

/* ── カードグリッド ──
   auto-fit + minmax(220px, 1fr) で列数が自動調整される
   → 画面幅に応じて 1〜4列などに折り返す（固定列数不要） */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

/* ── カード本体 ──
   surface 色の角丸ボックス
   hover 時: 上に 4px 浮き上がり、影が濃くなり、枠線が primary 色に変化 */
.card {
  background: var(--color-surface);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  border-color: var(--color-primary);
}

/* ── カードアイコン ──
   44×44px の角丸正方形にアイコン（絵文字 or SVG）を中央配置
   背景は primary 色の薄い半透明（rgba で 15% 不透明度） */
.card-icon {
  width: 44px;
  height: 44px;
  background: rgba(64,128,240,.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.card-title { font-size: 20px; font-weight: 700; color: var(--color-dark); }
.card-desc  { font-size: 16px; color: var(--color-gray); line-height: 1.7; flex: 1; }
/* flex:1 で説明文が伸縮しカードリンクを下端に揃える */

/* ── カード内リンク ──
   ::after で「→」矢印を自動追加。flex で矢印をテキストと横並び */
.card-link {
  font-size: 13px;
  color: var(--color-primary-light);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}
.card-link::after { content: '→'; }

/* ============================================================
   6_INFO TABLE（情報テーブル）
   会社概要・設備一覧などの定義リスト風テーブル
   ============================================================ */

/* ── テーブル全体 ──
   border-collapse:collapse でセル間のすき間をなくす
   width:100% で親要素いっぱいに広がる */
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* ── セル共通 ──
   border-bottom で行の区切り線を表示
   vertical-align:top で複数行テキストを上揃え */
.info-table th,
.info-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

/* ── 見出しセル (th) ──
   width:140px で左カラムの幅を固定
   surface 色の背景で視覚的に区別
   white-space:nowrap で項目名が折り返さない
   通常は primary-light 色（青系ラベル） */
.info-table th {
  width: 140px;
  font-weight: 600;
  color: var(--color-primary-light);
  background: var(--color-surface);
  white-space: nowrap;
}

/* .th-red : ホクトウ工業セクションのテーブル th に付与
   accent-red-table 色（赤）で表示 */
.info-table th.th-red {
  color: var(--color-accent-red-table);
}

/* 最終行のボーダーを除去してテーブル末端をすっきり見せる */
.info-table tr:last-child th,
.info-table tr:last-child td { border-bottom: none; }


/* ============================================================
   7_PHOTO GRID（写真グリッド）
   設備・施設の写真を格子状に並べるレイアウト
   ============================================================ */

/* auto-fit + minmax(250px, 1fr) で 1〜複数列を自動調整 */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

/* overflow:hidden で角丸を画像にも適用 */
.photo-item { border-radius: 6px; overflow: hidden; }

/* aspect-ratio:4/3 で画像を統一サイズに。
   object-fit:cover でトリミングしてはみ出しを防ぐ */
.photo-item img { width: 100%; object-fit: cover; aspect-ratio: 4/3; }

/* キャプション: 画像直下に半透明の説明テキストを表示 */
.photo-caption {
  background: var(--color-surface);
  color: var(--color-white);
  font-size: 12px;
  padding: 6px 12px;
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   8_PROCESS STEPS（製造工程）
   工程番号（丸）→ 縦線 → 次の丸 と繋がるタイムライン風レイアウト
   ============================================================ */

/* .process-list : 各工程を縦に並べるコンテナ（gap:0 で密着） */
.process-list  { display: flex; flex-direction: column; gap: 0; }

/* .process-step : グリッドで「番号列(56px) | 内容列(1fr)」に分割 */
.process-step  { display: grid; grid-template-columns: 56px 1fr; gap: 0; }

/* .process-step-num : 丸と縦線を縦に並べる flex コンテナ */
.process-step-num {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .process-step-circle : 番号を表示する青い円
   width/height:40px の正円（border-radius:50%）
   margin-top:8px で内容テキストの先頭と揃える */
.process-step-circle {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 8px;
}

/* .process-step-line : 工程間を繋ぐ縦線
   flex:1 で丸の下から次の丸まで伸びる
   最終工程（:last-child）では display:none で縦線を非表示 */
.process-step-line {
  width: 2px;
  background: var(--color-border);
  flex: 1;
  margin: 4px auto 0;
}
.process-step:last-child .process-step-line { display: none; }

/* .process-step-body : 工程タイトル・説明・写真を含む右カラム
   padding-bottom:40px で次の工程との縦の間隔を確保 */
.process-step-body  { padding: 8px 0 40px 16px; }

/* 工程タイトルは primary-light 色で目立たせる */
.process-step-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary-light);
  margin-bottom: 12px;
}

/* .process-step-photos : 工程内の写真を横並びグリッドで表示
   minmax(200px, 1fr) で 1〜複数列に自動調整 */
.process-step-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.process-step-photos img {
  width: 100%;
  border-radius: 6px;
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* ============================================================
   9_VISION CARDS
   理念・ビジョンページの各項目カード
   左に 4px の primary 色ボーダーを持つ横長カード
   ============================================================ */

/* auto-fit + minmax(250px, 1fr) で 1〜複数列に自動調整 */
.vision-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

/* border-left:4px で左端に縦線アクセント
   border-radius: 0 8px 8px 0 で右側のみ角丸（左は直角で縦線と合わせる） */
.vision-card {
  padding: 28px 24px;
  border-left: 4px solid var(--color-primary);
  background: var(--color-surface);
  border-radius: 0 8px 8px 0;
}
.vision-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-light);
  margin-bottom: 10px;
  letter-spacing: .05em;
}
.vision-card p { font-size: 14px; color: var(--color-dark); line-height: 1.8; }

/* ============================================================
   10_FORM（フォーム・ボタン）
   採用応募・お問い合わせフォームの入力コンポーネント
   ============================================================ */

/* .form-group : label + input/textarea のセット
   margin-bottom:20px で各フィールド間の縦余白 */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-group label { font-size: 14px; font-weight: 500; color: var(--color-dark); }

/* .req : 必須マーク（「必須」バッジ）
   inline-block + padding で青い小さなバッジとして表示 */
.form-group label .req {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 3px;
  padding: 1px 5px;
  vertical-align: middle;
}

/* ── 入力フィールド共通 ──
   全幅・角丸・surface 背景でダークテーマに馴染む
   appearance:none でブラウザデフォルトのスタイルをリセット
   （特に select の矢印など） */
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--color-dark);
  background: var(--color-surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}

/* フォーカス時: アウトラインを除去し、
   枠線を primary-light 色に変え、
   0 0 0 3px のリング状の box-shadow でフォーカスリングを表現 */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(64,128,240,.2);
}

/* テキストエリア: 最小高さ 120px、縦方向のみリサイズ可能 */
.form-group textarea { min-height: 120px; resize: vertical; }

/* ── ボタン共通スタイル ──
   display:inline-block で横幅をテキストに合わせる
   .btn-primary : 青背景・白文字のメインボタン
   hover 時に背景が暗くなり、1px 上に浮くアニメーション */
.btn {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 6px;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background var(--transition), transform var(--transition);
}
.btn-primary       { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); }

/* ============================================================
   11_ABOUT STRIP（会社紹介帯）
   index.html のトップページ中段に表示する
   「テキスト + 統計数値」の横並びセクション
   ============================================================ */

/* surface 背景・上下ボーダーで前後のセクションと区別 */
.about-strip {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-dark);
  padding: 56px 24px;
}

/* 「テキスト列 | 統計列」を 1:1 の 2カラムグリッドで配置
   900px 以下では 1カラムに折り返す（レスポンシブ参照） */
.about-inner {
  max-width: var(--inner-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* ── テキスト列 ── */
.about-text .tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--color-primary-light);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.about-text h2 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.4;
  color: var(--color-dark);
}
.about-text p { font-size: 14px; line-height: 1.9; color: var(--color-gray); margin-bottom: 24px; }

/* .about-btn : 「詳しく見る」などのアウトラインボタン
   border のみのゴーストボタン。hover 時にごく薄い背景と primary 色枠線 */
.about-btn {
  display: inline-block;
  padding: 10px 24px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-dark);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--transition), border-color var(--transition);
}
.about-btn:hover { background: rgba(255,255,255,.06); border-color: var(--color-primary); }

/* ── 統計列 ──
   .about-stats : 2×2 のグリッドで数値を並べる
   .stat        : 数値ボックス。超薄い白背景（3%不透明）でわずかに浮かせる
   .stat-num    : clamp() で 28〜40px にスケールする大きな数字（primary-light 色）
   .stat-label  : 数字の下の説明テキスト（小さく gray 色） */
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stat {
  text-align: center;
  padding: 20px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.stat-num {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--color-primary-light);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label { font-size: 12px; color: var(--color-gray); }

/* ============================================================
   12_FOOTER
   全ページ共通フッター
   ============================================================ */

/* footer-bg 変数（最も暗い #1e1e22）を使用
   文字色は白の 50% 透明でデフォルト表示 */
footer { background: var(--color-footer-bg); color: rgba(255,255,255,.72); }

/* .footer-inner : コンテンツを中央寄せ・最大幅 1200px
   padding-bottom:24px で著作権表示との余白を確保 */
.footer-inner { max-width: var(--inner-width); margin: 0 auto; padding: 48px 24px 24px; }

/* .footer-top : 「ブランド列(200px) + リンク列×3」の 4カラムグリッド
   900px 以下では 2カラム、680px 以下では 1カラムに折り返す */
.footer-top {
  display: grid;
  grid-template-columns: 260px 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
/* 会社情報を右へ24px、事業案内をその半分の12px右へ */
.footer-top > *:nth-child(2) { padding-left: 60px; }
.footer-top > *:nth-child(3) { padding-left: 30px; }

.footer-brand { margin-top: -16px; } /* ロゴ列を少し上へ */

/* ブランド列のロゴ画像 */
.footer-brand img {
  height: 36px;
  width: auto;
  margin-bottom: 12px;
  margin-left: -12px; /* 住所テキストより少し左に出す */
}
.footer-brand p { font-size: 12px; line-height: 1.8; }
.footer-brand .addr-sep { display: block; height: 0.9em; } /* 拠点間の余白（通常の改行1行分の半分） */

/* フッターリンク列の見出し: 白・大文字・letter-spacing でカテゴリ名を表示 */
.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-white);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a {
  font-size: 13px;
  color: rgba(255,255,255,.72);
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--color-primary-light); } /* hover で primary-light に */

/* .footer-bottom : 著作権表示エリア
   上ボーダーで本文エリアと分離、中央寄せのコピーライトテキスト */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 20px;
  text-align: center;
  font-size: 12px;
}

/* ============================================================
   13_RESPONSIVE（レスポンシブ対応）
   各ブレークポイントでレイアウトを変更する
   ============================================================ */

/* ── 1000px 以下: ハンバーガーメニューに切り替え ──
   .nav-links を非表示 → .hamburger を表示
   ※ このブレークポイントはナビの項目数に合わせた値（変更注意） */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  /* 狭い幅ではロゴの左寄せ(-6px)を解除し、左余白をほんの少しだけ広げる */
  .logo { margin-left: 0; }
}

/* ── 900px 以下: 2カラムレイアウトを縮退 ──
   .about-inner: 左右2列 → 上下1列
   .footer-top : 4列 → 2列
   .info-table th: 幅を 100px に縮小 */
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 32px; }
  .info-table th { width: 100px; }
  /* リンク3列（会社情報・事業内容・その他）が横一列に並べられない幅になったら
     非表示にし、ブランド（ロゴ・住所）とコピーライトだけを残す。
     → .footer-top はブランド1列のみのレイアウトにする。 */
  .footer-col { display: none; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; margin-bottom: 24px; }
}

/* ── 680px 以下: スマートフォン向け調整 ──
   section   : 上下 padding を 48px に縮小（画面を有効活用）
   footer-top: 1列に縮退
   about-stats: 2列を維持（数値は 2列でもスマホで見やすい）
   page-hero : 上下 padding を詰める＋文字を少し小さく（帯をコンパクトに）
   cards-grid: 1列に縮退
   photo-grid: 1列 → 2列（横2枚並び）
   info-table: 横並び(見出し|内容) → 縦積み（見出しラベル＋全幅の内容） */
@media (max-width: 680px) {
  section { padding: 48px 20px; }

  /* ── スマホはヘッダーの縦幅を詰める ──
     ロゴを 8 割サイズ（50px→40px）にし、nav の上下 padding も縮小。
     ヘッダー高さ ≒ 40 + 10*2 + 2(border) = 62px。
     メニュー開始位置に使う --header-height も 62px に合わせ、
     モバイルメニューがヘッダー直下から始まるようにする。 */
  :root { --header-height: 62px; }
  nav { padding: 10px 20px; }
  .logo img { height: 40px; }

  .footer-top  { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  /* タイトル帯（page-hero）：上下の余白を少し詰め、文字も少し小さく。
     スマホではパンくず（ホーム › ○○）を非表示にする。 */
  .page-hero   { padding: 16px 20px; }
  .page-hero h1 { font-size: 20px; }
  .page-hero .page-hero-sub { font-size: 10px; }
  .page-hero .breadcrumb { display: none; }
  .cards-grid  { grid-template-columns: 1fr; }
  .photo-grid  { grid-template-columns: 1fr 1fr; }

  /* ── 情報テーブルをカード型（縦積み）に ──
     見出し(th)の固定幅が画面を圧迫するため、スマホでは
     各行を「見出しラベル＋その下に全幅の内容」に積み替える。
     行の区切り線は tr 側に集約し、th の背景ブロックは外してラベル化する。 */
  .info-table,
  .info-table tbody,
  .info-table tr,
  .info-table th,
  .info-table td { display: block; width: auto; }

  .info-table tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
  }
  .info-table tr:last-child { border-bottom: none; }

  .info-table th {
    background: none;     /* 全幅の背景ブロックをやめる */
    border-bottom: none;  /* 見出しと内容の間の線を消す */
    padding: 0 0 3px;
    font-size: 12px;      /* 内容より一段小さいラベルに */
    white-space: normal;  /* 長い見出しも折り返し可 */
  }
  .info-table td {
    padding: 0;
    border-bottom: none;
    line-height: 1.6;     /* 長いリストを読みやすく */
  }
}

/* ── 400px 以下: 極小スマートフォン向け ──
   about-stats / photo-grid を 1列に縮退
   非常に狭い画面でも横方向に収まるようにする */
@media (max-width: 400px) {
  .about-stats { grid-template-columns: 1fr; }
  .photo-grid  { grid-template-columns: 1fr; }
}
