/* ==========================================================
   株式会社信越電装 — Site Styles
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ダークセクション（クリーム） */
  --dark1:       #f2f0eb;
  --dark2:       #ebe8e2;
  --dark3:       #e4e1db;
  /* ライトセクション（ピュアホワイト・暖かいクリーム） */
  --lt1:         #ffffff;
  --lt2:         #eef1f6;
  /* ダーク背景の文字色（クリーム背景用に黒系へ変更） */
  --dt:          #1a1a1a;
  --dtm:         rgba(0,0,0,0.80);
  --dtl:         rgba(0,0,0,0.55);
  /* ライト背景の文字色 */
  --ltt:         #2a2a26;
  --ltm:         #555048;
  --ltl:         #8a8478;
  --lt-border:   #c8d0dc;
  --dk-border:   rgba(0,0,0,0.12);
  /* アクセント（ゴールド） */
  --accent:      #007d72;
  --accent-lt:   #00b8a8;
  --accent-pale-dk: rgba(0,125,114,0.18);
  --accent-pale-lt: #d0eeeb;
}

html { scroll-behavior: smooth; font-size: 18px; }
body { font-family: 'Noto Sans JP', sans-serif; color: var(--ltt); overflow-x: hidden; font-size: 18px; }

/* スクロールバー */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #0a1628; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.40); }

/* ── HEADER（ダーク） ── */
header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background: linear-gradient(to right, #0a1628 0%, #0d6b5a 100%); border-bottom: 1px solid rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 66px;
}
.logo-area { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-img { height: 54px; width: auto; display: block; border-radius: 3px; }
.logo-text { display: flex; flex-direction: column; gap: 2px; }
.logo-sub  { font-size: 10px; letter-spacing: 0.28em; color: rgba(255,255,255,0.55); text-transform: uppercase; }
.logo-main { font-size: 20px; font-weight: 700; color: #ffffff; letter-spacing: 0.04em; }
.header-tel { display: flex; flex-direction: column; gap: 1px; margin-left: 20px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.20); text-decoration: none; }
.header-tel-label { font-size: 9px; letter-spacing: 0.18em; color: rgba(255,255,255,0.55); }
.header-tel-num { font-size: 16px; font-weight: 700; color: #ffffff; letter-spacing: 0.06em; white-space: nowrap; }
.header-tel:hover .header-tel-num { color: #c8972a; }
.nav-wrap { display: flex; height: 66px; }
.nav-item { position: relative; }
.nav-item > a { display: flex; align-items: center; height: 66px; padding: 0 14px; font-size: 13px; color: rgba(255,255,255,0.85); text-decoration: none; letter-spacing: 0.03em; white-space: nowrap; transition: color 0.18s; }
.nav-item > a:hover { color: #c8972a; }
.nav-item > a.has-child::after { content: '▾'; font-size: 9px; margin-left: 3px; opacity: 0.4; }
.dropdown { display: none; position: absolute; top: 66px; left: 0; background: #2a2a2a; border: 1px solid var(--dk-border); border-top: 2px solid var(--accent-lt); min-width: 180px; box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
.nav-item:hover .dropdown { display: block; }
.dropdown a { display: block; padding: 11px 18px; font-size: 13px; color: rgba(255,255,255,0.85); text-decoration: none; border-bottom: 1px solid var(--dk-border); transition: background 0.15s, color 0.15s; }
.dropdown a:last-child { border-bottom: none; }
.dropdown a:hover { background: var(--accent-pale-dk); color: var(--accent); }
.h-btn { background: #ffffff; color: #0a1628; text-shadow: none; padding: 9px 20px; border-radius: 3px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,0.20); transition: background 0.18s, color 0.18s, box-shadow 0.18s; white-space: nowrap; }
.h-btn:hover { background: linear-gradient(180deg, #d9a830 0%, #c8972a 60%, #a87a1a 100%); color: #ffffff; box-shadow: 0 4px 14px rgba(200,151,42,0.45); }

/* ── HERO（フルスクリーン・シネマティック） ── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.10) translateY(0px);   }
  50%  { transform: scale(1.04) translateY(48px);  }
  100% { transform: scale(1.10) translateY(0px);   }
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('images/hero-rocket2.jpg?v=6') !important;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  background-color: #0a1628;
  filter: brightness(0.92) saturate(1.10);
  z-index: 0;
}
.hero:hover .hero-bg { animation-play-state: paused; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.10);
  z-index: 1;
}
.hero-overlay2 {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(10,22,40,0.55) 0%, transparent 42%),
    linear-gradient(to top,   rgba(0,0,0,0.22) 0%, transparent 45%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 72px;
  max-width: 820px;
  text-align: left;
  margin-left: 0;
  margin-top: 80px;
}
.hero-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
  margin-bottom: 32px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.60);
}
.hero-label::after {
  content: '';
  width: 40px;
  height: 2px;
  background: #b52020;
  display: block;
  flex-shrink: 0;
}
h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: 42px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.50;
  letter-spacing: 0.03em;
  margin-bottom: 0;
  padding-bottom: 24px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.65);
  position: relative;
}
h1::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(to right, #b52020, #3a1010);
  margin-top: 20px;
  margin-left: 0;
  margin-bottom: 28px;
}
h1 em {
  display: block;
  font-style: normal;
  color: rgba(255,255,255,0.80);
  font-size: 0.54em;
  letter-spacing: 0.18em;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(255,255,255,0.50);
}
.hero-desc {
  font-size: 15px;
  line-height: 2.0;
  color: #333330;
  margin-bottom: 44px;
  max-width: 520px;
  text-shadow: 0 1px 3px rgba(255,255,255,0.50);
  margin-left: auto;
  text-align: left;
}
.hero-company {
  font-family: 'Noto Serif JP', serif;
  font-size: 30px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.18em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.70);
  text-align: left;
  margin-top: 4px;
  margin-bottom: 56px;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
.hero-btns .btn-ghost-dk { background: transparent; color: #ffffff; border: 2px solid rgba(255,255,255,0.75); }
.hero-btns .btn-ghost-dk:hover { background: rgba(255,255,255,0.15); color: #ffffff; border-color: #ffffff; }
.btn-primary { background: linear-gradient(180deg, #00a898 0%, #007d72 60%, #005f57 100%); color: #ffffff; text-shadow: none; padding: 14px 36px; border-radius: 3px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; box-shadow: 0 4px 18px rgba(0,125,114,0.40); transition: filter 0.18s, transform 0.15s, box-shadow 0.25s; }
.btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(0,125,114,0.55); }
.btn-ghost-dk { background: transparent; color: var(--ltt); text-shadow: none; padding: 14px 32px; border-radius: 3px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; border: 2px solid var(--ltt); box-shadow: none; transition: background 0.18s, color 0.18s, transform 0.15s; }
.btn-ghost-dk:hover { background: var(--ltt); color: #ffffff; transform: translateY(-1px); }
.btn-ghost-lt { border: 1.5px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.75); padding: 14px 28px; border-radius: 3px; font-size: 14px; letter-spacing: 0.06em; text-decoration: none; background: transparent; transition: border-color 0.18s, color 0.18s; }
.btn-ghost-lt:hover { border-color: #c8972a; color: var(--accent-lt); }
/* ヒーロー統計バー */
.hero-stats-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  background: rgba(10,22,40,0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  padding: 10px 88px;
}
.hstat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 36px;
  margin-right: 36px;
  border-right: 1px solid rgba(255,255,255,0.20);
}
.hstat:last-of-type { border-right: none; }
.hstat-num { font-size: 18px; font-weight: 700; color: #ffffff; letter-spacing: 0.02em; line-height: 1; }
.hstat-lbl { font-size: 10px; color: rgba(255,255,255,0.70); letter-spacing: 0.12em; }
.hero-stats-tel {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.hero-stats-tel a {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff !important;
  color: #0d1a2e;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.18s;
}
.hero-stats-tel a:hover { color: var(--accent); }
.hero-stats-tel span { font-size: 10px; color: rgba(255,255,255,0.70); letter-spacing: 0.10em; }
/* 旧ヒーロー要素 — 非表示 */
.hero-left { display: none; }
.hero-right { display: none; }
.hero-honsha { display: none; }
.hero-contact { display: none; }
.hero-stats { display: none; }

/* ── VISION MESSAGE ── */
.vision-sec {
  position: relative;
  background: var(--dark1);
  border-top: 2px solid rgba(200,169,110,0.55);
  border-bottom: 2px solid rgba(200,169,110,0.55);
  padding: 144px 40px;
  text-align: center;
  overflow: hidden;
}
.vision-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('images/2026-08-21 16.04の画像.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.80;
  filter: saturate(1.1) brightness(1.15);
  z-index: 0;
}
.vision-sec::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(200,169,110,0.40) 0%,
    transparent 30%,
    transparent 70%,
    rgba(200,169,110,0.40) 100%);
  z-index: 1;
  pointer-events: none;
}
.vision-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
  padding-top: 32px;
}
.vision-deco {
  display: none;
}
.vision-text {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  line-height: 2.2;
  color: var(--dtm);
  letter-spacing: 0.04em;
}
.vision-text strong {
  color: #8a6000;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(255,255,255,0.6);
}
.vision-line {
  width: 48px;
  height: 2px;
  background: var(--accent);
  margin: 32px auto 16px;
  border-radius: 1px;
}
.vision-attr {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  letter-spacing: 0.18em;
  color: var(--dt);
  font-weight: 700;
  margin-top: 8px;
  text-align: center;
}

/* ヒーロー左上英語テキスト */
.hero-corner {
  position: absolute;
  top: 100px;
  right: 72px;
  left: auto;
  z-index: 3;
  max-width: 480px;
  padding-right: 18px;
  padding-left: 0;
  border-right: 4px solid #b52020;
  border-left: none;
  text-align: right;
}
.hero-corner-en {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 1.30;
  text-shadow: 0 1px 6px rgba(0,0,0,0.65);
  margin-bottom: 0;
  text-transform: uppercase;
}
.about-body-en {
  font-size: 13px;
  color: #7a9090;
  line-height: 1.8;
  margin-top: 16px;
  margin-bottom: 20px;
  font-style: italic;
  border-left: 3px solid var(--accent-pale-lt);
  padding-left: 14px;
}

/* ── STRIP（ダーク・左へスクロール） ── */
.strip {
  background: var(--dark2);
  border-top: 1px solid var(--dk-border);
  border-bottom: 1px solid var(--dk-border);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
}
/* 両端を少しフェードさせて自然な見た目に */
.strip::before, .strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.strip::before {
  left: 0;
  background: linear-gradient(to right, var(--dark2), transparent);
}
.strip::after {
  right: 0;
  background: linear-gradient(to left, var(--dark2), transparent);
}
.strip-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: strip-scroll 50s linear infinite;
}
.strip:hover .strip-track { animation-play-state: paused; }
@keyframes strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.strip-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dtm); letter-spacing: 0.07em; white-space: nowrap; flex-shrink: 0; }
.strip-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.strip-navy { background: #1a2e50; border-color: rgba(255,255,255,0.1); }
.strip-navy .strip-item { color: rgba(255,255,255,0.85); }
.strip-navy .strip-dot { background: #a07818; }

/* ── SECTION 共通 ── */
.sec { padding: 96px 80px; }
.sec-white { background: var(--lt1); }
.sec-bg    { background: var(--lt2); }
.sec-bgmid { background: var(--lt2); }
.sec-dark  { background: var(--dark1); }
.sec-dmid  { background: var(--dark2); }
.sec-dcard { background: var(--dark3); }
.sec-gray  { background: #eef5f4; } /* 爽やかライトティール */

/* タグ・タイトル（ライト用） */
.sec-tag-lt { display: flex; align-items: center; gap: 14px; font-size: 18px; letter-spacing: 0.22em; text-transform: uppercase; color: #a07818; font-weight: 700; margin-bottom: 14px; }
.sec-tag-lt::before { content: ''; width: 32px; height: 3px; background: #a07818; display: block; }
.sec-ttl-lt { font-family: 'Noto Serif JP', serif; font-size: 40px; font-weight: 700; color: var(--ltt); line-height: 1.42; margin-bottom: 16px; }
.sec-desc-lt { font-size: 18px; color: var(--ltm); line-height: 1.9; max-width: 580px; }
/* タグ・タイトル（ダーク用） */
.sec-tag-dk { display: flex; align-items: center; gap: 14px; font-size: 18px; letter-spacing: 0.22em; text-transform: uppercase; color: #a07818; font-weight: 700; margin-bottom: 14px; }
.sec-tag-dk::before { content: ''; width: 32px; height: 3px; background: #a07818; display: block; }
.sec-ttl-dk { font-family: 'Noto Serif JP', serif; font-size: 40px; font-weight: 700; color: var(--dt); line-height: 1.42; margin-bottom: 16px; }
.sec-desc-dk { font-size: 18px; color: var(--dtm); line-height: 1.9; max-width: 580px; }
.text-link-lt { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; letter-spacing: 0.06em; padding-bottom: 3px; border-bottom: 1px solid var(--accent-pale-lt); transition: border-color 0.18s; }
.text-link-lt:hover { border-color: var(--accent); }
.text-link-lt::after { content: '→'; }

/* ── ABOUT（ライト） ── */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 720px; }
.about-body { font-size: 18px; line-height: 1.9; color: var(--ltm); margin: 18px 0 28px; }

/* ── ABOUT 2カラム（左：テキスト、右：旧本社写真・スティッキー） ── */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #eef5f4;
  scroll-margin-top: 72px;
  align-items: start;
}
.about-split-text {
  padding: 64px 64px 48px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #eef5f4;
  position: relative;
  z-index: 1;
}
.about-split-img {
  position: relative;
  height: 100%;
  min-height: 380px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 18%, black 85%, transparent 100%);
}
.about-split-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: #ffffff;
  filter: brightness(1.18) contrast(0.88) sepia(0.08);
}
.about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.a-photo { overflow: hidden; background: linear-gradient(135deg, var(--lt2) 0%, var(--lt-border) 100%); position: relative; }
.a-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.a-photo:hover img { transform: scale(1.04); }
.a-photo-wide { grid-column: 1/-1; aspect-ratio: 16/7; }
.a-photo-sq   { aspect-ratio: 1; }
.a-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 14px 10px; background: linear-gradient(to top, rgba(20,18,14,0.65), transparent); font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.88); letter-spacing: 0.1em; }

/* ── ABOUT 営業所ギャラリー（2x2） ── */
.about-locations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.loc-card-featured { grid-column: 1 / 2; }
.loc-img-wide { aspect-ratio: 4/3; }
.loc-card { background: var(--lt1); border: 1px solid var(--lt-border); border-radius: 4px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.loc-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,0.06); transform: translateY(-2px); }
.loc-card-link { display: block; text-decoration: none; cursor: pointer; }
.loc-card-link .loc-name { color: var(--ltt); }
.loc-img { aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(135deg, var(--lt2) 0%, var(--lt-border) 100%); }
.loc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.loc-card:hover .loc-img img { transform: scale(1.04); }
.loc-img-placeholder { display: flex; align-items: center; justify-content: center; }
.loc-img-placeholder span { font-size: 12px; color: var(--ltl); letter-spacing: 0.18em; padding: 4px 12px; border: 1px dashed var(--ltl); border-radius: 2px; }
.loc-cap { padding: 14px 16px 16px; }
.loc-badge { display: inline-block; font-size: 9px; background: #ffffff; color: var(--accent); padding: 2px 8px; border-radius: 2px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 6px; border: 1px solid rgba(0,157,150,0.35); }
.loc-name { font-size: 14px; font-weight: 700; color: var(--ltt); }

/* ── SERVICES（写真×テキスト 交互レイアウト） ── */
.svc-head { padding: 40px 64px 36px; background: var(--lt1); }
.svc-panel {
  display: flex;
  min-height: 460px;
}
.svc-panel--rev { flex-direction: row-reverse; }
.svc-panel-photo-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.svc-panel-photo-wrap .svc-panel-photo {
  flex: 1;
  min-height: 0;
}
.svc-panel-photo {
  flex: 1;
  background-size: cover;
  background-position: center;
  min-height: 360px;
}
.svc-panel-photo--placeholder {
  background: var(--dark2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-panel-photo--placeholder span {
  font-size: 13px;
  color: rgba(0,0,0,0.35);
  letter-spacing: 0.18em;
  border: 1px dashed rgba(0,0,0,0.20);
  padding: 6px 16px;
  border-radius: 2px;
}
.svc-panel-text {
  flex: 1;
  background: #ffffff;
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.svc-panel-en {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a07818;
  margin-bottom: 8px;
}
.svc-panel-no {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #b52020;
  margin-bottom: 18px;
}
.svc-panel-name {
  font-family: 'Noto Serif JP', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--dt);
  line-height: 1.65;
  margin-bottom: 24px;
  border-left: 4px solid #b52020;
  padding-left: 14px;
  margin-left: -14px;
}
.svc-panel-body {
  font-size: 15px;
  line-height: 1.95;
  color: var(--dtm);
  max-width: 380px;
}

/* ── CLIENTS（ライト） ── */
.clients-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.client-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ctag { background: linear-gradient(135deg, #1a2e50 0%, #0d1a2e 100%); border: 1px solid #c8972a; padding: 9px 16px; font-size: 13px; color: #ffffff; letter-spacing: 0.03em; border-radius: 2px; transition: border-color 0.18s, color 0.18s; }
.ctag:hover { border-color: #e8b84b; color: #e8b84b; }
.client-service-block { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(0,0,0,0.12); }
.client-service-label { font-size: 12px; letter-spacing: 0.14em; color: #a07818; text-transform: uppercase; margin-bottom: 0; display: flex; align-items: center; gap: 10px; }
.client-service-label::before { content: ''; display: block; width: 20px; height: 2px; background: #a07818; flex-shrink: 0; }
.client-service-desc { font-size: 14px; color: #333330 !important; margin-top: 10px; margin-bottom: 0; line-height: 1.7; }
.client-tags-service { margin-top: 14px; }
.ctag-service { background: linear-gradient(135deg, #1a2e50 0%, #0d1a2e 100%) !important; border: 1px solid #c8972a !important; color: #ffffff !important; }
.ctag-service:hover { border-color: #e8b84b !important; color: #e8b84b !important; }
.certs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; }
.cert-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 28px 16px 22px;
  background: #fff;
  border: 2px solid #a07818;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 4px 16px rgba(26,46,80,0.10);
  transition: box-shadow 0.22s, transform 0.18s;
}
.cert-item:hover { box-shadow: 0 8px 28px rgba(26,46,80,0.18); transform: translateY(-3px); }
.cert-item::before {
  content: 'CERTIFIED';
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: #a07818; color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  padding: 2px 10px; border-radius: 20px;
}
.cert-icon {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #1a2e50 0%, #2a4a7a 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  color: #a07818;
  box-shadow: 0 3px 10px rgba(26,46,80,0.25), 0 0 0 4px rgba(184,148,58,0.18);
}
.cert-icon svg { width: 28px; height: 28px; }
.cert-name { font-size: 17px; font-weight: 700; color: #1a2e50; margin-bottom: 8px; line-height: 1.4; }
.cert-note { font-size: 14px; color: #4a5568; line-height: 1.7; }

/* ── PRODUCTS 取扱品目（ライト） ── */
.prod-categories {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 44px;
}
.prod-cat {
  background: var(--dark2);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 4px;
  padding: 24px 22px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.prod-cat:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.prod-cat-name {
  font-size: 14px;
  font-weight: 700;
  color: #1a2e50;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lt-border);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.04em;
}
.prod-cat-name::before {
  content: '';
  width: 14px;
  height: 2px;
  background: #a07818;
  flex-shrink: 0;
}
.prod-cat-list { list-style: none; padding: 0; margin: 0; }
.prod-cat-list li {
  font-size: 13px;
  color: #1a2e50;
  padding: 5px 0 5px 14px;
  line-height: 1.6;
  position: relative;
}
.prod-cat-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: #a07818;
  font-weight: 700;
}
.prod-note {
  font-size: 12px;
  color: var(--ltl);
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--lt-border);
  line-height: 1.7;
}

/* ── ETC SETUP ── */

/* ヒーローバナー */
.etc-hero {
  background: var(--dark1);
  padding: 80px 80px 72px;
  border-bottom: 3px solid #b52020;
}

.etc-hero-inner { max-width: 680px; }
.etc-hero-tag {
  font-size: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a07818;
  font-weight: 700;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.etc-hero-tag::before { content: ''; display: block; width: 32px; height: 3px; background: #b52020; }
.etc-hero-ttl {
  font-family: 'Noto Serif JP', serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--dt);
  line-height: 1.35;
  margin-bottom: 24px;
}
.etc-hero-sub {
  font-size: 15px;
  color: var(--dtm);
  line-height: 1.85;
  margin-bottom: 28px;
  max-width: 560px;
}
.etc-hero-locs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.etc-loc-chip {
  display: inline-block;
  background: #ffffff !important;
  border: 1px solid #b8b4ac !important;
  color: #333330 !important;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}
.etc-hero-verify {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #c8972a;
  text-decoration: none;
  border-bottom: 1px solid rgba(204,34,34,0.5);
  padding-bottom: 2px;
  letter-spacing: 0.04em;
  transition: opacity 0.18s;
}
.etc-hero-verify:hover { opacity: 0.75; }

/* コンテンツ本体 */
.etc-body {
  padding: 72px 80px 64px;
}

/* 再セットアップが必要なタイミング */
.etc-when-new {
  margin-bottom: 64px;
}
.etc-when-ttl-new {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ltt);
  margin-bottom: 28px;
}
.etc-when-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.etc-when-item {
  background: var(--lt1);
  border: 1px solid var(--lt-border);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.etc-when-icon { font-size: 28px; line-height: 1; }
.etc-when-item p { font-size: 15px; color: var(--ltm); line-height: 1.7; font-weight: 500; }

/* フロー */
.etc-flow-wrap { margin-bottom: 56px; }
.etc-section-ttl {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ltt);
  margin-bottom: 24px;
}
.etc-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.etc-step {
  flex: 1;
  background: var(--lt1);
  border: 1px solid var(--lt-border);
  border-radius: 4px;
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.etc-step:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}
.etc-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 18px;
  padding: 0 6px;
  flex-shrink: 0;
}
.etc-step-no {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #a07818;
  border-bottom: 2px solid #a07818;
  padding-bottom: 3px;
  margin-bottom: 14px;
  width: fit-content;
}
.etc-step-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ltt);
  margin-bottom: 8px;
  line-height: 1.5;
}
.etc-step-desc {
  font-size: 13px;
  color: var(--ltm);
  line-height: 1.7;
  margin-top: auto;
}

/* 所要時間・必要書類 */
.etc-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}
.etc-info-card {
  background: var(--lt1);
  border: 1px solid var(--lt-border);
  border-radius: 4px;
  padding: 28px 32px;
}
.etc-info-label {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #a07818;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.etc-info-value {
  font-family: 'Noto Serif JP', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--ltt);
  margin-bottom: 10px;
  line-height: 1.4;
}
.etc-info-note {
  font-size: 14px;
  color: var(--ltm);
  line-height: 1.7;
}

/* ── ドライブレコーダー 取扱商品 ── */
.dr-showcase { margin-top: 2em; }
.dr-showcase-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dr-showcase-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: #a07818;
  flex-shrink: 0;
}
.dr-brand-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.dr-brand-card {
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 5px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dr-brand-name {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #a07818;
}
.dr-model-name {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.06em;
}
.dr-features {
  list-style: none;
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dr-features li {
  font-size: 11px;
  color: rgba(0,0,0,0.65);
  line-height: 1.5;
  padding-left: 10px;
  position: relative;
}
.dr-features li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: #a07818;
}
.dr-brand-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid #3a3a3a !important;
  border-radius: 4px;
  padding: 7px 16px;
  background: #ffffff !important;
  letter-spacing: 0.06em;
  color: #3a3a3a !important;
  text-decoration: none;
  margin-top: auto;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.dr-brand-link::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3a3a3a; margin-right: 7px; vertical-align: middle; margin-top: -2px; }
.dr-brand-link:hover { color: #b52020 !important; border-color: #b52020 !important; background: rgba(181,32,32,0.05) !important; border-width: 1.5px !important; }
.dr-links-group { margin-top: 24px; }
.dr-links-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* ── ETC 取扱商品例 ── */
.etc-products-wrap {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--lt-border);
}
.etc-products-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: #a07818;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.etc-products-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: #a07818;
  flex-shrink: 0;
}
.etc-product-cards {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.etc-product-card {
  background: #ffffff;
  border: 1px solid var(--lt-border);
  border-radius: 6px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  max-width: 260px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.etc-product-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ffffff;
  background: #007d72;
  padding: 3px 10px;
  border-radius: 2px;
  align-self: flex-start;
}
.etc-product-img {
  max-width: 140px;
  max-height: 90px;
  object-fit: contain;
}
.etc-product-model {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ltt);
}
.etc-product-desc {
  font-size: 12px;
  line-height: 1.7;
  color: var(--ltm);
  text-align: center;
}
.etc-products-more {
  font-size: 13px;
  color: var(--ltm);
  line-height: 1.7;
}
.etc-products-more a { color: var(--accent); text-decoration: none; }
.etc-products-more a:hover { text-decoration: underline; }

.etc-note {
  font-size: 14px;
  color: var(--ltm);
  line-height: 1.7;
  padding-top: 24px;
  border-top: 1px solid var(--lt-border);
}
.etc-note a { color: var(--accent); text-decoration: none; }
.etc-note a:hover { text-decoration: underline; }

/* ── OFFICES（ライト） ── */
.offices-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; margin-top: 44px; }
.office-card { background: var(--lt1); border: 1px solid var(--lt-border); border-radius: 4px; overflow: hidden; display: grid; grid-template-columns: 1fr 380px; }
.office-main { display: flex; flex-direction: column; }
.office-info { padding: 24px 24px 0; }
.office-head { margin-bottom: 10px; }
.office-photo { overflow: hidden; background: #f5f5f3; }
.office-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; padding: 0; box-sizing: border-box; }
.office-photo-placeholder { display: flex; align-items: center; justify-content: center; background: var(--lt2); }
.office-photo-placeholder span { font-size: 12px; color: var(--ltl); letter-spacing: 0.18em; padding: 4px 12px; border: 1px dashed var(--ltl); border-radius: 2px; }
.office-badge { display: inline-block; font-size: 10px; background: #ffffff; color: var(--accent); padding: 2px 8px; border-radius: 2px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 6px; border: 1px solid rgba(0,157,150,0.35); }
.office-name { font-size: 17px; font-weight: 700; color: var(--ltt); }
.office-addr { font-size: 12px; color: var(--ltm); line-height: 1.6; margin-bottom: 8px; white-space: nowrap; }
.office-tel { font-size: 12px; color: var(--ltm); letter-spacing: 0.04em; margin-bottom: 12px; padding-top: 8px; border-top: 1px solid var(--lt-border); white-space: nowrap; }
.office-note { font-size: 11px; color: var(--ltl); margin-bottom: 16px; }
.map-wrap { width: 100%; height: 140px; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── OVERVIEW（ライト） ── */
/* ── OVERVIEW + MOTTO ── */
.overview-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 44px; }
.overview-table { width: 100%; border-collapse: collapse; }
.overview-table tr { border-bottom: 1px solid var(--lt-border); }
.overview-table tr:first-child { border-top: 2px solid #1a1a1a; }
.overview-table th { width: 148px; padding: 15px 16px 15px 20px; background: transparent; font-size: 12px; font-weight: 700; color: #1a1a1a; text-align: left; letter-spacing: 0.08em; line-height: 1.6; vertical-align: top; border-left: 3px solid #1a1a1a; }
.overview-table td { padding: 15px 18px; font-size: 14px; color: #1a1a1a; line-height: 1.9; }
.overview-table a { color: #1a1a1a; text-decoration: none; }
.overview-table a:hover { text-decoration: underline; }

/* 社訓ボックス */
.motto-box { background: none; border-radius: 0; padding: 0; position: relative; overflow: hidden; }

.motto-chairman-tag { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }
.motto-chairman-tag::before { content: ''; width: 24px; height: 2px; background: var(--accent); display: block; flex-shrink: 0; }
.motto-intro { font-size: 14px; line-height: 2; color: #1a1a1a; margin-bottom: 0; }
.motto-principles { display: flex; align-items: stretch; gap: 0; margin: 36px 0; border-top: 1px solid rgba(0,0,0,0.12); border-bottom: 1px solid rgba(0,0,0,0.12); padding: 44px 0; }
.motto-principle { flex: 1; text-align: center; padding: 0 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.motto-principle-no { font-family: 'Noto Serif JP', serif; font-size: 12px; color: #1a1a1a; letter-spacing: 0.24em; font-weight: 400; }
.motto-principle-text { font-family: 'Noto Serif JP', serif; font-size: 28px; font-weight: 700; color: #1a1a1a; letter-spacing: 0.20em; line-height: 1.5; }
.motto-divider { width: 1px; background: rgba(0,0,0,0.12); flex-shrink: 0; }
.motto-foot { font-size: 14px; line-height: 2; color: #1a1a1a; font-weight: 500; text-align: right; }
.motto-center { text-align: center; margin-bottom: 32px; padding: 32px 24px; border-top: 1px solid rgba(0,0,0,0.10); border-bottom: 1px solid rgba(0,0,0,0.10); }
.motto-label { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: #c8972a; font-weight: 700; margin-bottom: 20px; }
.motto-text { font-family: 'Noto Serif JP', serif; font-size: 30px; font-weight: 700; color: #1a1a1a; letter-spacing: 0.22em; line-height: 1.9; }

/* ── ORG CHART 組織図 ── */
.org-section { margin-top: 60px; background: #eef5f4; border-radius: 4px; padding: 48px 48px 56px; }
.org-ttl { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 700; color: var(--ltt); letter-spacing: 0.08em; margin-bottom: 44px; display: flex; align-items: center; gap: 14px; }
.org-ttl::before { content: ''; display: block; width: 24px; height: 3px; background: #b52020; flex-shrink: 0; }
.org-chart-outer { overflow-x: auto; padding-bottom: 8px; }
.org-chart { display: inline-flex; flex-direction: column; align-items: center; min-width: 100%; }
.org-top-row { position: relative; padding-bottom: 36px; }
.org-top-row::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 36px; background: var(--accent); }
.org-node-top { background: var(--accent); color: #fff; font-weight: 700; font-size: 17px; padding: 18px 72px; border-radius: 3px; letter-spacing: 0.18em; box-shadow: 0 4px 16px rgba(0,125,114,0.25); }
.org-branches { display: flex; gap: 0; align-items: flex-start; }
.org-branch { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 20px; }
.org-branch::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 28px; background: rgba(0,125,114,0.4); z-index: 1; }
.org-branch::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(0,125,114,0.4); }
.org-branch:first-child::after { left: 50%; }
.org-branch:last-child::after { right: 50%; }
.org-node-mid { margin-top: 28px; background: #ffffff; color: var(--ltt); font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 3px; white-space: nowrap; border: 3px solid var(--accent); text-align: center; position: relative; letter-spacing: 0.06em; }
.org-node-mid::after { content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 2px; height: 20px; background: rgba(0,125,114,0.4); }
.org-leafs { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-top: 20px; }
.org-leaf { display: block; background: #ffffff; color: var(--ltm); font-size: 14px; padding: 10px 22px; border-radius: 3px; border: 3px solid #9ab8b5; white-space: nowrap; text-align: center; }

/* 沿革（タイムライン） */
.history {
  margin-top: 0; /* 独立セクションになったため上余白を削除 */
  position: relative;
  overflow: hidden;
  padding: 24px 0;
}
/* 沿革セクション（リネン背景）用の色調整 */
#history .timeline { border-left-color: var(--accent); }
#history .tl-year { color: #2a2a26; }
#history .tl-body { color: var(--ltm); }
#history .tl-year-current { color: #a07818; }
#history .tl-dot { background: var(--accent); border-color: #e8e8e4; }
#history .tl-dot-current { background: var(--accent-lt); box-shadow: 0 0 0 3px rgba(200,136,42,0.30); }
/* 右側：本社ビル全体表示 */
.history-imgs {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 42%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.5fr 0.5fr 1.5fr;
  gap: 4px;
  padding: 0;
  pointer-events: none;
  z-index: 0;
  /* 左端をフェード（文字が読めるよう） */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.7) 16%, rgba(0,0,0,1) 36%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.7) 16%, rgba(0,0,0,1) 36%);
}
.hist-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(1.05) contrast(1.06) saturate(1.10);
  opacity: 1;
}
/* カメラ（上）・整備（中）・本社ビル（下・contain） */
.history-imgs .hist-img:nth-child(1) { grid-column: 1; grid-row: 1; background-size: contain; background-position: center; }
.history-imgs .hist-img:nth-child(2) { grid-column: 1; grid-row: 2; }
.history-imgs .hist-img:nth-child(3) { grid-column: 1; grid-row: 3; }
/* タイムライン内容を背景の上に・右の写真と重ならないよう幅制限 */
.history > .sec-tag-lt,
.history > .sec-tag-dk,
.history > .history-ttl,
.history > .timeline {
  position: relative;
  z-index: 1;
  max-width: 62%;
}
.history-ttl { font-size: 30px; margin-bottom: 36px; }
.timeline { position: relative; padding-left: 28px; border-left: 2px solid var(--accent); }
.tl-item { margin-bottom: 28px; position: relative; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot { position: absolute; left: -36px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--dark1); }
.tl-dot-current { background: var(--accent-lt); box-shadow: 0 0 0 3px rgba(62,99,66,0.30); }
.tl-year { font-size: 13px; color: #a07818; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 4px; }
.tl-year-current { color: #a07818; }
.tl-body { font-size: 15px; color: var(--dtm); line-height: 1.7; }

/* フライヤー画像ブロック（沿革内） */
.tl-flyer-block {
  margin-top: 18px;
  max-width: 480px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
}
.tl-flyer-img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}
.tl-flyer-block:hover .tl-flyer-img {
  transform: scale(1.02);
}
.tl-flyer-caption {
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.80);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 8px 14px;
  text-align: center;
}

/* ── RECRUIT（ダーク） ── */
#recruit {
  position: relative;
  overflow: hidden;
}
.recruit-photo-mid {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  height: 90%;
  width: auto;
  object-fit: cover;
  filter: brightness(0.90) contrast(1.08) saturate(1.35) sepia(0.25);
  opacity: 0.88;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  z-index: 0;
}
#recruit > *:not(.recruit-photo-mid) {
  position: relative;
  z-index: 1;
}
.recruit-actions { margin-top: 32px; }

/* ── RELATED（ダーク） ── */
.related-card { background: var(--lt1); border: 1px solid var(--lt-border); border-radius: 4px; padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 44px; transition: border-color 0.18s, box-shadow 0.18s; }
.related-card:hover { border-color: var(--accent); box-shadow: 0 6px 24px rgba(62,99,72,0.18); }
.related-name { font-size: 20px; font-weight: 700; color: var(--ltt); margin-bottom: 8px; }
.related-desc { font-size: 16px; color: var(--ltm); line-height: 1.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.related-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 3px; border: 1.5px solid var(--accent); color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; transition: filter 0.18s, box-shadow 0.18s; background: var(--accent); box-shadow: 0 2px 8px rgba(0,125,114,0.30); }
.related-btn:hover { filter: brightness(1.12); box-shadow: 0 4px 14px rgba(0,125,114,0.45); }

/* ── CTA（オフホワイト） ── */
.cta-sec { background: #ffffff; border-top: 1px solid #c8d0dc; padding: 88px 80px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-sec::before { display: none; }
.cta-left h2 { font-family: 'Noto Serif JP', serif; font-size: 36px; font-weight: 700; color: var(--ltt); line-height: 1.58; margin-bottom: 10px; }
.cta-left p { font-size: 15px; color: var(--ltm); }
.cta-btns { display: flex; gap: 14px; flex-shrink: 0; }
.cta-btn-g { background: linear-gradient(180deg, #d9a830 0%, #c8972a 60%, #a87a1a 100%); color: #ffffff; text-shadow: none; padding: 14px 32px; border-radius: 3px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; box-shadow: 0 4px 18px rgba(200,151,42,0.40); transition: filter 0.18s, transform 0.15s, box-shadow 0.25s; }
.cta-btn-g:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(200,151,42,0.55); }
.cta-btn-o { background: #2a2a26; color: #ffffff; text-shadow: none; padding: 14px 28px; border-radius: 3px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; border: 2px solid #2a2a26; box-shadow: 0 4px 18px rgba(0,0,0,0.20); transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.15s; }
.cta-btn-o:hover { background: linear-gradient(180deg, #d9a830 0%, #c8972a 60%, #a87a1a 100%); border-color: #c8972a; box-shadow: 0 8px 28px rgba(200,151,42,0.45); transform: translateY(-1px); }

/* マップ未掲載プレースホルダー */
.map-placeholder { background: var(--lt2); display: flex; align-items: center; justify-content: center; }
.map-placeholder p { font-size: 13px; color: var(--ltl); text-align: center; }

/* ── FOOTER（ダークネイビー） ── */
footer { background: linear-gradient(150deg, #152545 0%, #1e3868 50%, #1a3460 100%); border-top: none; padding: 52px 64px 28px; color: #f0ece4; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.f-logo-area { display: flex; flex-direction: row; align-items: center; gap: 14px; margin-bottom: 16px; }
.f-logo-img { height: 56px; width: auto; display: block; border-radius: 3px; }
.f-logo-text { display: flex; flex-direction: column; gap: 4px; }
.f-logo-sub  { display: block; font-size: 9px; letter-spacing: 0.28em; color: rgba(255,255,255,0.70); text-transform: uppercase; }
.f-logo-main { display: block; font-size: 18px; font-weight: 700; color: #ffffff; }
.f-brand p { font-size: 13px; color: #ffffff; line-height: 1.85; }
.f-nav h4 { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 14px; font-weight: 700; }
.f-nav ul { list-style: none; }
.f-nav li { margin-bottom: 9px; }
.f-nav a { font-size: 13px; color: #ffffff; text-decoration: none; transition: color 0.18s; }
.f-nav a:hover { color: #00d4c0; }
.f-contact h4 { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 14px; font-weight: 700; }
.f-addr { font-size: 13px; color: #ffffff; line-height: 1.85; margin-bottom: 14px; }
.f-mail { font-size: 13px; color: #ffffff; display: block; text-decoration: none; margin-bottom: 18px; transition: color 0.18s; }
.f-mail:hover { color: #00d4c0; }
.f-cbtn { display: inline-block; background: linear-gradient(180deg, #00a898 0%, #007d72 60%, #005f57 100%); border: none; color: #ffffff; padding: 9px 20px; border-radius: 3px; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 0 2px 8px rgba(0,125,114,0.30); transition: filter 0.18s, box-shadow 0.18s; }
.f-cbtn:hover { filter: brightness(1.10); box-shadow: 0 4px 14px rgba(0,125,114,0.45); color: #ffffff; }
.footer-btm { padding-top: 22px; }
.footer-btm p { font-size: 11px; color: rgba(255,255,255,0.60); }

/* ── ハンバーガーメニュー（デスクトップでは非表示） ── */
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--dt); transition: transform 0.25s, opacity 0.25s; }
.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.h-btn-desktop { display: inline-block; }
.nav-cta { display: none; }

/* ============================================================
   レスポンシブ：タブレット (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .sec { padding: 72px 44px; }
  .strip { padding: 14px 40px; }
  footer { padding: 44px 40px 24px; }
  .cta-sec { padding: 60px 40px; }
  header { padding: 0 24px; }

  /* HERO：タブレット */
  h1 { font-size: 50px; }
  .hero-bg { background-position: 62% 20%; }
  .hero-content { padding: 36px 44px; margin-left: 0; }
  .hero-corner { right: 44px; left: auto; top: 90px; max-width: 300px; }
  .hero-corner-en { font-size: 20px; }
  .hero-stats-bar { padding: 14px 44px; }

  /* ナビ：タブレットでハンバーガーに切り替え */
  .menu-toggle { display: flex; }
  .h-btn-desktop { display: none; }
  .header-tel { display: none; }
  .nav-wrap {
    position: fixed; top: 66px; left: 0; right: 0; bottom: 0;
    background: #1a1a1a;
    flex-direction: column; height: auto;
    padding: 20px 0 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: 999;
  }
  .nav-wrap.is-open { transform: translateX(0); }
  .nav-item { width: 100%; border-bottom: 1px solid var(--dk-border); }
  .nav-item > a { height: auto; padding: 18px 24px; font-size: 15px; width: 100%; }
  .nav-item > a.has-child::after { margin-left: auto; }
  .dropdown { position: static; display: block; min-width: 0; background: #1a1a1a; border: none; border-top: 1px solid var(--dk-border); box-shadow: none; }
  .dropdown a { padding: 14px 40px; font-size: 13px; }
  .nav-cta { display: block; margin: 24px 24px 0; text-align: center; padding: 14px 24px; font-size: 14px; }

  /* SERVICES：4→2列 */
  .svc-grid { grid-template-columns: repeat(2, 1fr); }

  /* WORKS：3→2列 */
  .works-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }

  /* ETC：タブレットで1列化 */
  .etc-hero { padding: 60px 40px 52px; flex-direction: column !important; }
  .etc-hero > div:last-child { flex: none !important; max-height: 240px !important; min-height: 160px; }
  .etc-hero-inner { max-width: 100%; }
  .etc-when-grid { grid-template-columns: repeat(2, 1fr); }
  .etc-flow { flex-direction: column; gap: 8px; }
  .etc-step-arrow { transform: rotate(90deg); }

  /* PRODUCTS：5→3列 */
  .prod-categories { grid-template-columns: repeat(3, 1fr); }

  /* CLIENTS：縦並びに */
  .clients-grid { grid-template-columns: 1fr; gap: 48px; }

  /* OVERVIEW：縦並びに */
  .overview-wrap { grid-template-columns: 1fr; gap: 32px; }

  /* OFFICES：2列維持 */
  .offices-grid { gap: 18px; }

  /* RELATED：縦並び */
  .related-card { flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px; }

  /* CTA */
  .cta-sec { flex-direction: column; align-items: flex-start; gap: 28px; }
}

/* ============================================================
   レスポンシブ：モバイル (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* ── HEADER ── */
  header { padding: 0 16px; height: 60px; }
  .logo-area { gap: 9px; }
  .logo-img { height: 36px; }
  .logo-sub { font-size: 8px; }
  .logo-main { font-size: 14px; }
  .menu-toggle { display: flex; }
  .h-btn-desktop { display: none; }
  .header-tel { display: none; }

  /* ナビメニュー：オーバーレイ式 */
  .nav-wrap {
    position: fixed; top: 60px; left: 0; right: 0; bottom: 0;
    background: #1a1a1a;
    flex-direction: column; height: auto;
    padding: 20px 0 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: 999;
  }
  .nav-wrap.is-open { transform: translateX(0); }
  .nav-item { width: 100%; border-bottom: 1px solid var(--dk-border); }
  .nav-item > a { height: auto; padding: 18px 24px; font-size: 15px; width: 100%; }
  .nav-item > a.has-child::after { margin-left: auto; }
  .dropdown { position: static; display: block; min-width: 0; background: #1a1a1a; border: none; border-top: 1px solid var(--dk-border); box-shadow: none; }
  .dropdown a { padding: 14px 40px; font-size: 13px; }
  .nav-cta { display: block; margin: 24px 24px 0; text-align: center; padding: 14px 24px; font-size: 14px; }

  /* ── 共通セクション余白 ── */
  .sec { padding: 56px 20px; }
  .strip { padding: 12px 20px; gap: 18px; }
  .strip-item { font-size: 11px; }
  footer { padding: 40px 20px 20px; }
  .cta-sec { padding: 48px 20px; }

  /* ── HERO ── */
  h1 { font-size: 36px; line-height: 1.50; margin-bottom: 22px; }
  h1 em { font-size: 0.62em; }
  .hero-bg { background-position: 58% top; }
  .hero-content { padding: 28px 24px; max-width: 100%; margin-left: 0; }
  .hero-corner { right: 20px; left: auto; top: 80px; max-width: 280px; }
  .hero-corner-en { font-size: 17px; }
  .hero-corner-sub { font-size: 11px; }
  .hero-desc { font-size: 13px; margin-bottom: 32px; max-width: 100%; }
  .hero-stats-bar { padding: 12px 28px; flex-wrap: wrap; gap: 10px 0; }
  .hstat { padding-right: 22px; margin-right: 22px; }
  .hstat-num { font-size: 15px; }
  .hero-stats-tel { display: none; }
  .hero-btns { gap: 10px; }
  .btn-primary, .btn-ghost-dk, .btn-ghost-lt { padding: 13px 22px; font-size: 13px; }

  /* ── 共通タイトル ── */
  .sec-ttl-lt, .sec-ttl-dk { font-size: 30px; line-height: 1.42; }
  .sec-tag-lt, .sec-tag-dk { font-size: 15px; letter-spacing: 0.18em; gap: 10px; }
  .sec-tag-lt::before, .sec-tag-dk::before { width: 24px; height: 2px; background: #b52020; }
  .sec-desc-lt, .sec-desc-dk { font-size: 15px; }

  /* ── ABOUT ── */
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-body { font-size: 15px; }
  .about-locations { gap: 10px; }
  .about-split { grid-template-columns: 1fr; }
  .about-split-text { padding: 56px 20px 40px; }
  .about-split-img { position: static; height: 60vw; min-height: 260px; max-height: 400px; }
  .about-split-img img { min-height: unset; }
  .loc-cap { padding: 12px 14px 14px; }
  .loc-name { font-size: 13px; }

  /* ── SERVICES ── */
  .svc-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .svc-card { padding: 28px 22px 26px; }

  /* ── WORKS：1列 ── */
  /* ── SERVICES 統合 ── */
  .svc-head { padding: 52px 20px 36px; }
  .svc-panel { flex-direction: column; }
  .svc-panel--rev { flex-direction: column; }
  .svc-panel-photo { min-height: 240px; flex: none; }
  .svc-panel-text { padding: 36px 24px; }
  .svc-panel-name { font-size: 20px; }
  .svc-panel-body { font-size: 13px; max-width: 100%; }

  /* ── PRODUCTS：2列 ── */
  .prod-categories { grid-template-columns: repeat(2, 1fr); }

  /* ── ETC SETUP：モバイル ── */
  .etc-hero { padding: 52px 20px 44px; }
  .etc-hero-ttl { font-size: 32px; }
  .etc-hero-sub { font-size: 13px; }
  .etc-body { padding: 40px 20px 48px; }
  .etc-when-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .etc-flow { flex-direction: column; gap: 8px; }
  .etc-step-arrow { transform: rotate(90deg); }
  .etc-info-grid { grid-template-columns: 1fr; gap: 14px; }
  .etc-info-card { padding: 22px 24px; }
  .etc-info-value { font-size: 18px; }

  /* ── OVERVIEW テーブル ── */
  .overview-table { display: block; }
  .overview-table tbody, .overview-table tr { display: block; width: 100%; }
  .overview-table th, .overview-table td { display: block; width: 100% !important; padding: 10px 14px; white-space: normal; border: none; }
  .overview-table th { background: transparent; border-bottom: 1px solid var(--lt-border); font-size: 12px; border-left: 3px solid var(--accent); }
  .overview-table td { font-size: 13px; padding: 12px 14px 16px; }

  /* 社訓ボックス */
  .motto-box { padding: 28px 22px; }
  .motto-text { font-size: 22px; letter-spacing: 0.18em; }
  .motto-intro, .motto-foot { font-size: 13px; }

  /* タイムライン */
  .timeline { padding-left: 22px; }
  .tl-dot { left: -30px; width: 9px; height: 9px; }
  .tl-year { font-size: 10px; }
  .tl-body { font-size: 12px; }
  /* 認証：モバイルでは1列に */
  .certs { grid-template-columns: 1fr; }
  /* モバイルでは沿革背景画像を控えめに＆幅を狭く */
  .history-imgs { width: 36%; }
  .hist-img { opacity: 0.25; }

  /* ── OFFICES：1列 ── */
  .offices-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .office-card { grid-template-columns: 1fr; }
  .office-photo { height: 180px; }
  .office-info { padding: 20px 20px 0; }
  .office-name { font-size: 16px; }
  .office-addr { font-size: 13px; }
  .map-wrap { height: 180px; }

  /* ── CLIENTS ── */
  .clients-grid { gap: 40px; }
  .ctag { font-size: 12px; padding: 8px 14px; }

  /* ── RELATED ── */
  .related-card { padding: 24px 20px; }
  .related-name { font-size: 17px; }
  .related-desc { font-size: 13px; }
  .related-btn { width: 100%; justify-content: center; }

  /* ── CTA ── */
  .cta-left h2 { font-size: 22px; }
  .cta-btns { flex-direction: column; width: 100%; gap: 10px; }
  .cta-btn-g, .cta-btn-o { text-align: center; padding: 14px 20px; }

  /* ── FOOTER ── */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 28px; }
  .f-logo-main { font-size: 16px; }
}

/* ============================================================
   レスポンシブ：小型モバイル (max-width: 420px)
   ============================================================ */
@media (max-width: 420px) {
  h1 { font-size: 30px; }
  .hero-content { padding: 0 20px; }
  .sec-ttl-lt, .sec-ttl-dk { font-size: 26px; }
  .hero-stats-bar { padding: 10px 20px; }
  .hstat { padding-right: 16px; margin-right: 16px; }
  .motto-text { font-size: 19px; letter-spacing: 0.14em; }
  .hero-btns { flex-direction: column; }
  .btn-primary, .btn-ghost-dk { width: 100%; }
  .prod-categories { grid-template-columns: 1fr; }
}

/* ============================================================
   モバイル追加修正 (2026-09)
   ============================================================ */

/* ① ハンバーガーメニューのバー色を白に（ヘッダーが濃色のため） */
.menu-toggle span { background: #ffffff; }

/* ② related-desc の nowrap 解除 */
.related-desc { white-space: normal; }

/* ③ 採用セクション：スマホでは絶対配置写真を非表示 */
@media (max-width: 768px) {
  .recruit-photo-mid { display: none; }
  #recruit { padding-left: 0; padding-right: 0; }

  /* ④ 組織図：スマホ対応 */
  .org-section { padding: 32px 16px 40px; margin-top: 40px; }
  .org-node-top { padding: 14px 24px; font-size: 14px; letter-spacing: 0.08em; }
  .org-branches { flex-direction: column; align-items: center; gap: 0; }
  .org-branch { padding: 0 12px; width: 100%; }
  .org-branch::after { display: none; }
  .org-branch::before { display: none; }
  .org-node-mid { white-space: normal; font-size: 13px; padding: 10px 16px; width: 100%; box-sizing: border-box; }
  .org-node-mid::after { display: none; }
  .org-leaf { white-space: normal; font-size: 12px; padding: 8px 14px; width: 100%; }
  .org-top-row { padding-bottom: 20px; }
  .org-top-row::after { height: 20px; }

  /* ⑤ CTA セクション横パディング */
  .cta-sec { padding: 48px 20px; }

  /* ⑥ フッター横パディング */
  footer { padding: 40px 20px 20px; }

  /* ⑦ ETC セクション：スマホでテーブル1列 */
  .etc-when-grid { grid-template-columns: 1fr; }

  /* ⑧ 会社概要 overview wrap */
  .overview-wrap { display: block; }

  /* ⑨ svc-head（サービスヘッダー）横幅 */
  .svc-head { padding: 52px 20px 36px; }

  /* ⑩ strip（帯テキスト）：スマホで折り返し */
  .strip { flex-wrap: wrap; }

  /* ⑪ 本文テキストが画面幅をはみ出さないよう強制 */
  body { overflow-x: hidden; }
  * { max-width: 100%; box-sizing: border-box; }
  img { max-width: 100%; height: auto; }

  /* ⑫ hero corner（右上テキストブロック）をスマホで非表示 */
  .hero-corner { display: none; }
}

/* スマホでiframeもレスポンシブ */
iframe { max-width: 100%; }
/* ===== ヒーロー画像差し替え ===== */
.hero-bg {
  background-image: url('images/hero-rocket2.jpg?v=6') !important;
}