/* ============================================================
   山雅電設HP サンプル版【v2: cent-linkage直系】
   - 配色は紺#0c1628＋金#c8a24a を維持
   - タイポ・余白・アニメ・ヘッダー挙動は cent-linkage 実コード準拠
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS変数（cent-linkage を山雅電設カラーに置換）
   ------------------------------------------------------------ */
:root {
  /* ベース配色 */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f5;             /* cent-linkage の --bg__gray */
  --color-bg-tint: #f4f7fb;             /* cent-linkage の --bg__blue 相当を金寄りに */
  --color-bg-dark: #0c1628;
  --color-bg-dark-soft: #16213a;

  /* テキスト：cent-linkage に倣い純黒は使わない */
  --color-text: #0c1628;               /* dark-blue（既存ブランドカラー） */
  --color-text-soft: #1a2a4a;          /* 本文段落用に少し緩めた色 */
  --color-text-muted: #556173;
  --color-text-subtle: #8b94a5;
  --color-text-on-dark: #f5f6f8;
  --color-text-on-dark-muted: #b8c0d0;
  --color-gray-line: #a2a2a2;          /* cent-linkage の区切り線 */

  /* アクセント：金 */
  --color-accent: #c8a24a;
  --color-accent-hover: #b48d37;
  --color-accent-light: #e2c980;
  --color-accent-soft: rgba(200, 162, 74, 0.08);

  /* 罫線 */
  --color-border: #e4e6eb;
  --color-border-dark: rgba(255, 255, 255, 0.12);

  /* フォント（cent-linkage 実装：英字は Barlow Condensed コンデンス体！） */
  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Barlow Condensed", "Noto Sans JP", sans-serif;

  /* レイアウト（cent-linkage 3段階コンテナ） */
  --container-l: 1200px;
  --container-m: 1000px;
  --container-s: 800px;
  --container: var(--container-l);   /* デフォルト */
  --radius: 2px;
  --radius-lg: 4px;

  /* 影 */
  --shadow-sm: 0 2px 12px rgba(15, 26, 46, 0.06);
  --shadow-md: 0 20px 50px rgba(15, 26, 46, 0.12);
  --shadow-lg: 0 30px 80px rgba(15, 26, 46, 0.18);

  /* 余白（cent-linkage 実値：12.5em = 約200px） */
  --section-margin: 12.5em;

  /* アニメーション（cent-linkage 完全準拠） */
  --easing-1: cubic-bezier(0.65, 0.05, 0.36, 1);
  --easing-2: cubic-bezier(0.79, 0.14, 0.15, 0.86);
  --duration-fast: 0.2s;
  --duration-base: 0.6s;
  --duration-slow: 1.4s;
  --hover-opacity: 0.5;

  /* ヘッダー高さ（cent-linkage 11rem） */
  --header-h: 110px;
  --header-h-scrolled: 72px;
}

/* ------------------------------------------------------------
   2. リセット・ベース（cent-linkage 実値）
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 62.5%;            /* 1rem = 10px に正規化（cent-linkage と同じ rem 設計） */
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h-scrolled);
}
body {
  margin: 0;
  font-family: var(--font-ja);
  font-size: 1.6rem;            /* 16px */
  font-weight: 400;
  letter-spacing: 1px;           /* cent-linkage 直系 */
  line-height: 2;                /* cent-linkage 直系：厳密に 2 */
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 0.6em;
  letter-spacing: 0.05em;
  word-break: keep-all;
}
.btn, .tag, .work-tag,
.brand span, .nav-cta-pair a {
  word-break: keep-all;
  white-space: nowrap;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity var(--duration-fast) var(--easing-1); }
a:hover { opacity: var(--hover-opacity); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
p { margin: 0 0 1em; color: var(--color-text-soft); }
ul { padding: 0; margin: 0; list-style: none; }

/* ------------------------------------------------------------
   3. 共通ユーティリティ
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
}
.container--m { max-width: var(--container-m); }
.container--s { max-width: var(--container-s); }

/* セクション余白：cent-linkage 実値 12.5em（margin-block） */
.section {
  margin-block: var(--section-margin);
  position: relative;
}
.section-alt { background: var(--color-bg-alt); margin-block: 0; padding-block: var(--section-margin); }
.section-dark {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  margin-block: 0;
  padding-block: var(--section-margin);
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--color-text-on-dark); }
.section-dark p { color: var(--color-text-on-dark-muted); }

/* ------------------------------------------------------------
   4. セクション見出し（cent-linkage の英字大型番号スタイル）
   ------------------------------------------------------------ */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4em;
  align-items: start;
  margin-bottom: 5em;
  position: relative;
}
.section-num {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12rem;             /* 120px */
  line-height: 0.9;
  color: var(--color-accent);
  letter-spacing: -0.02em;
  margin: 0;
}
.section-num small {
  font-family: var(--font-en);
  font-size: 2.4rem;
  color: var(--color-accent);
  letter-spacing: 0.15em;
  display: block;
  margin-top: 4px;
  font-weight: 600;
}
.section-head-body { padding-top: 2.4em; }

.section-label {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 1.4em;
  padding-left: 2.6em;
  position: relative;
}
.section-label::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1.8em; height: 1px;
  background: var(--color-accent);
}
.section-title {
  font-size: clamp(2.6rem, 3.8vw, 4rem);
  margin: 0 0 0.6em;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.section-lead {
  font-size: 1.5rem;
  color: var(--color-text-soft);
  margin: 0;
  max-width: 64rem;
}

/* ------------------------------------------------------------
   5. cent-linkage 直系：blur-fade アニメーション
   ------------------------------------------------------------ */
.fade-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity var(--duration-base) var(--easing-1),
              transform var(--duration-base) var(--easing-1),
              filter var(--duration-base) var(--easing-1);
}
.js-fade-ready .fade-in:not(.is-visible) {
  opacity: 0;
  transform: translateY(1em);
  filter: blur(5px);
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .js-fade-ready .fade-in:not(.is-visible) {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ------------------------------------------------------------
   6. ボタン（cent-linkage 直系：円形矢印アイコン内蔵）
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  background-color: var(--color-accent);
  color: #fff;
  padding: 1.2em 2em;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  border: 1px solid var(--color-accent);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-ja);
  width: min(28rem, 100%);
  transition: background-color var(--duration-fast) var(--easing-1),
              border-color var(--duration-fast) var(--easing-1),
              color var(--duration-fast) var(--easing-1);
  text-align: left;
  white-space: nowrap;
}
.btn:hover {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: #fff;
  opacity: 1;
}
.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--easing-1);
  color: var(--color-accent);
  font-size: 0.9em;
}
.btn-arrow::after {
  content: "→";
  font-weight: 700;
  line-height: 1;
}
.btn:hover .btn-arrow { color: var(--color-text); }

.btn-outline {
  background: transparent;
  border-color: var(--color-text);
  color: var(--color-text);
}
.btn-outline .btn-arrow {
  background-color: var(--color-text);
  color: #fff;
}
.btn-outline:hover {
  background: var(--color-text);
  color: #fff;
}
.btn-outline:hover .btn-arrow {
  background-color: #fff;
  color: var(--color-text);
}

.btn-outline-light {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.btn-outline-light .btn-arrow {
  background-color: #fff;
  color: var(--color-text);
}
.btn-outline-light:hover {
  background: #fff;
  color: var(--color-text);
}

.btn-lg { padding: 1.5em 2.4em; font-size: 1.4rem; width: min(32rem, 100%); }

/* ------------------------------------------------------------
   7. ヘッダー（cent-linkage 直系：TOPで透明→スクロールで白blur）
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999;
  transition: height var(--duration-fast) var(--easing-1),
              background-color var(--duration-fast) var(--easing-1),
              color var(--duration-fast) var(--easing-1);
}
.site-header.is-scrolled {
  height: var(--header-h-scrolled);
}

/* トップページのみ：初期は透明 + 白文字 */
.page--top .site-header {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
}
.page--top .site-header .brand { color: #fff; }
.page--top .site-header .global-nav a { color: #fff; }
/* v30-fix: Moreドロワー内のリンクは紺文字（白背景に白文字で見えなくなる事故防止） */
.page--top .site-header .nav-more-panel a { color: var(--color-text); }
.page--top .site-header .nav-more-panel a:hover { color: var(--color-accent); }
.page--top .site-header .nav-cta-pair .cta-tel { color: #fff; }

/* v31: ヘッダーの「+」ボタン＋Moreドロワーを一旦非表示（HTMLは残置、後で復活可能） */
.nav-more-btn,
.nav-more-panel { display: none !important; }
.page--top .site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text);
}
.page--top .site-header.is-scrolled .brand,
.page--top .site-header.is-scrolled .global-nav a { color: var(--color-text); }
/* v123: 電話番号の箱は背景が紺なので、スクロール後も文字は白のまま（以前は紺地に紺文字で読めなかった） */
.page--top .site-header.is-scrolled .brand-logo { filter: none; }
.page--top .site-header:not(.is-scrolled) .brand-logo {
  filter: brightness(0) invert(1);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 2em;
  padding: 0 4em;
  max-width: 100%;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  transition: opacity var(--duration-fast) var(--easing-1);
}
.brand-logo {
  height: 64px;
  width: auto;
  transition: height var(--duration-fast) var(--easing-1);
}
.site-header.is-scrolled .brand-logo { height: 44px; }

/* ナビ4項目 */
.global-nav ul {
  display: flex;
  align-items: center;
  gap: 2.8em;
}
.global-nav a {
  position: relative;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  padding: 6px 0;
}
.global-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--easing-1);
}
.global-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.global-nav a:hover { opacity: 1; }

/* More ドロワーボタン */
.nav-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  font-size: 1.6rem;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--easing-1);
  position: relative;
}
.page--top .site-header:not(.is-scrolled) .nav-more-btn { border-color: #fff; color: #fff; }
.nav-more-btn:hover, .nav-more-btn.is-active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  transform: rotate(45deg);
}
.nav-more-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: 1.4em 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--duration-fast) var(--easing-1),
              transform var(--duration-fast) var(--easing-1),
              visibility var(--duration-fast);
  z-index: 110;
}
.nav-more-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-more-panel ul { display: block; }
.nav-more-panel a {
  display: block;
  padding: 10px 24px;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  color: var(--color-text);
  transition: background-color var(--duration-fast) var(--easing-1);
}
.nav-more-panel a:hover {
  background: var(--color-bg-alt);
  color: var(--color-accent);
  opacity: 1;
}

/* ヘッダーCTA：メール＋電話の2ボタン */
.nav-cta-pair {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin-left: 1em;
}
.nav-cta-pair a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 1em 1.8em;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #fff;
  transition: opacity var(--duration-fast) var(--easing-1);
}
.nav-cta-pair a:hover { opacity: 0.85; }
.nav-cta-pair .cta-mail { background: var(--color-accent); }
.nav-cta-pair .cta-tel {
  background: var(--color-text);
  flex-direction: column;
  align-items: flex-start;
  padding: 0.6em 1.8em;
  line-height: 1.2;
}
.nav-cta-pair .cta-tel .num {
  font-family: var(--font-en);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.nav-cta-pair .cta-tel .hours {
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.7;
  letter-spacing: 0.08em;
}
.nav-cta-pair svg { width: 14px; height: 14px; }

/* モバイル：ハンバーガー */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: transparent;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  transition: transform var(--duration-fast) var(--easing-2),
              opacity var(--duration-fast) var(--easing-2);
}
.page--top .site-header:not(.is-scrolled) .nav-toggle span { background: #fff; }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(25deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-25deg); }

/* ------------------------------------------------------------
   8. HERO（cent-linkage 直系：右寄せキャッチ＋グラデーション）
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--header-h);
  overflow: hidden;
  color: #fff;
  background-color: var(--color-bg-dark);
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.35) 0%, rgba(12, 22, 40, 0.70) 100%),
    url("../img/hero/la-night.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 0 12rem;
}
/* cent-linkage 流の右寄せキャッチ */
.hero-catch-wrap {
  display: flex;
  justify-content: flex-end;
  padding-right: 8%;
}
.hero-catch-block {
  max-width: 56rem;
  text-align: left;
}
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-en);
  font-size: calc(1.3rem * var(--hero-eyebrow-scale, 1));
  font-weight: 500;
  letter-spacing: 0.5em;
  color: var(--color-accent);
  margin-bottom: 3em;
  text-transform: uppercase;
  padding-left: 3.2em;
  position: relative;
}
.hero-eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2.4em; height: 1px;
  background: var(--color-accent);
}
.hero-title {
  font-size: clamp(3.6rem, 5.6vw, 7rem);
  line-height: 1.4;
  letter-spacing: 0.12em;
  margin-bottom: 1em;
  font-weight: 700;
  color: #fff;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}
/* cent-linkage 直系：グラデーションテキスト（金グラデ） */
.hero-accent {
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-family: var(--font-en);
  letter-spacing: 0.04em;
}
.hero-sub {
  max-width: 52rem;
  font-size: calc(1.4rem * var(--hero-sub-scale, 1));
  margin-bottom: 3em;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.06em;
  line-height: 2.2;
}
.hero-ctas {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

/* スクロールインジケータ */
.scroll-indicator {
  position: absolute;
  left: 5%;
  bottom: 4em;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-en);
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-indicator::after {
  content: "";
  width: 1px; height: 60px;
  background: rgba(255, 255, 255, 0.5);
  animation: scrollLine 2s var(--easing-1) infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* サブページ用のスリムなヒーロー */
.hero-sub-page {
  min-height: 60vh;
  align-items: center;
}
/* v123: 左右は .container と同じ余白（以前は 0 で、見出しが画面の端に付いていた） */
.hero-sub-page .hero-inner { padding: 6rem 28px 0; }
.hero-sub-page .hero-catch-wrap {
  justify-content: flex-start;
  padding-right: 0;
}

/* ------------------------------------------------------------
   9. NEWS セクション（cent-linkage 直系：フラットボーダーリスト）
   ------------------------------------------------------------ */
.news-list-flat {
  max-width: var(--container-m);
  margin: 0 auto;
}
.news-row {
  display: grid;
  grid-template-columns: 120px 100px 1fr auto;
  gap: 3em;
  align-items: center;
  padding-block: 1.5em;
  border-bottom: 1px solid var(--color-gray-line);
  transition: padding-left var(--duration-fast) var(--easing-1),
              background-color var(--duration-fast) var(--easing-1);
}
.news-row:first-child { border-top: 1px solid var(--color-gray-line); }
.news-row:hover {
  padding-left: 1em;
  opacity: 1;
}
.news-row .date {
  font-family: var(--font-en);
  font-size: 1.4rem;
  color: var(--color-text-soft);
  letter-spacing: 0.1em;
}
.news-row .cat {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-bg-dark);
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-align: center;
  width: fit-content;
}
.news-row h3 {
  font-size: 1.5rem;
  margin: 0;
  letter-spacing: 0.04em;
  line-height: 1.6;
  font-weight: 600;
}
.news-row .arrow {
  font-family: var(--font-en);
  font-size: 1.8rem;
  color: var(--color-accent);
}
.news-footer {
  text-align: center;
  margin-top: 5em;
}

/* ------------------------------------------------------------
   10. SERVICE（cent-linkage 直系：sticky画像レイアウト）
   ------------------------------------------------------------ */
.service-sticky-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8em;
  align-items: flex-start;
  position: relative;
}
.service-sticky-text { padding-top: 2em; }
.service-item {
  padding-block: 4em;
  border-bottom: 1px solid var(--color-border);
}
.service-item:last-child { border-bottom: none; }
.service-item .num {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  margin-bottom: 0.6em;
  display: block;
}
.service-item h3 {
  font-size: 2.2rem;
  margin: 0 0 0.6em;
  letter-spacing: 0.06em;
}
.service-item p {
  font-size: 1.4rem;
  color: var(--color-text-soft);
  line-height: 2;
  margin: 0 0 1.4em;
}
.service-item .more {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: 0.25em;
  color: var(--color-accent);
  font-weight: 600;
}
.service-item .more::after {
  content: "→";
  transition: transform var(--duration-fast) var(--easing-1);
}
.service-item:hover .more::after { transform: translateX(4px); }

.service-sticky-image {
  position: sticky;
  top: calc(var(--header-h-scrolled) + 4em);
  height: 60rem;
  background-color: var(--color-bg-alt);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* services.html 用：9事業フル展開時のグリッド */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3em;
}
.service-card-slim {
  background: #fff;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--duration-fast) var(--easing-1),
              box-shadow var(--duration-fast) var(--easing-1),
              border-color var(--duration-fast) var(--easing-1);
  position: relative;
  scroll-margin-top: 120px;
}
.service-card-slim:hover {
  transform: translateY(-8px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  opacity: 1;
}
.service-card-slim .num {
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  font-weight: 600;
  z-index: 2;
}
.service-card-slim .thumb {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; /* 横長画像がホバー拡大時に縦へ繰り返す不具合を防止 */
  background-color: var(--color-bg-alt);
}
.service-card-slim .body {
  padding: 2.4em 2em 2.8em;
  flex: 1;
}
.service-card-slim h3 {
  font-size: 1.7rem;
  margin: 0 0 1em;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.service-card-slim p {
  font-size: 1.3rem;
  color: var(--color-text-soft);
  line-height: 2;
  margin: 0 0 1.4em;
}

/* ------------------------------------------------------------
   11. WORKS（施工実績）
   ------------------------------------------------------------ */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3em 2em;
}
.work-card {
  display: block;
  background: transparent;
}
.work-thumb {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #d8dde4;
  overflow: hidden;
  margin-bottom: 1.6em;
  transition: transform 0.5s var(--easing-1);
}
.work-card:hover .work-thumb { transform: scale(1.02); }
.work-thumb.is-placeholder {
  background-image: linear-gradient(135deg, #e8eaee 25%, #f5f6f8 25%, #f5f6f8 50%, #e8eaee 50%, #e8eaee 75%, #f5f6f8 75%);
  background-size: 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8b94a5;
  font-family: var(--font-en);
  font-size: 1.1rem;
  letter-spacing: 0.25em;
  gap: 6px;
}
.work-thumb.is-placeholder::before {
  content: "";
  width: 38px; height: 28px;
  border: 2px solid #b6bcc7;
  border-radius: 4px;
}
.work-thumb.is-placeholder::after { content: "PHOTO COMING"; }
.work-tag {
  display: inline-block;
  font-size: 1.1rem;
  font-family: var(--font-en);
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin-bottom: 0.6em;
  font-weight: 600;
}
.work-card h3 {
  font-size: 1.6rem;
  margin: 0 0 0.4em;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.work-meta {
  font-size: 1.2rem;
  color: var(--color-text-subtle);
  letter-spacing: 0.08em;
}
.works-footer { text-align: center; margin-top: 5em; }

/* ------------------------------------------------------------
   12. RECRUITバナー（フルブリード写真＋オーバーレイ）
   ------------------------------------------------------------ */
.recruit-banner {
  position: relative;
  background: var(--color-bg-dark);
  overflow: hidden;
  margin-block: 0;
  padding: 0;
}
.recruit-banner-inner {
  position: relative;
  min-height: 60rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 2;
}
.recruit-banner-text {
  padding: 8em 4em;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.recruit-banner h2 {
  font-size: clamp(3rem, 4vw, 5rem);
  margin: 0 0 1em;
  letter-spacing: 0.06em;
  color: #fff;
}
.recruit-banner p {
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 2em;
  max-width: 48rem;
}
.recruit-banner-image {
  background-color: #0c1628;  /* v119: 写真は子要素 .rb-img（2枚を切替表示）。読み込み前の地色だけ持つ */
}
/* v119: 代表と社員の写真2枚を重ね、2枚目を施工実績カードと同じ wtFade（8秒周期）で出し入れする */
.recruit-banner-image .rb-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
.recruit-banner-image .rb-alt {
  background-position: center 50%;
  opacity: 0;
  animation: wtFade 8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .recruit-banner-image .rb-alt { animation: none; }
}

/* ------------------------------------------------------------
   13. MESSAGE（代表挨拶・2カラム）
   ------------------------------------------------------------ */
.message-2col {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 6em;
  align-items: start;
  max-width: var(--container-m);
  margin: 0 auto;
}
.message-photo {
  aspect-ratio: 3 / 4;
  background-image: linear-gradient(135deg, #e8eaee 25%, #f5f6f8 25%, #f5f6f8 50%, #e8eaee 50%, #e8eaee 75%, #f5f6f8 75%);
  background-size: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b94a5;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
}
/* v118: 代表写真（背景を切り抜いた透過画像）。枠は淡いグラデーション、人物は上寄せで枠いっぱいに表示 */
.message-photo.has-photo {
  display: block;
  aspect-ratio: 2 / 3;
  background: linear-gradient(165deg, #f2f5fa 0%, #dce4ee 100%);
  overflow: hidden;
}
.message-photo.has-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.message-body p { font-size: 1.5rem; line-height: 2.2; color: var(--color-text-soft); margin-bottom: 1.4em; }
.message-body .signature {
  margin-top: 3em;
  text-align: right;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
}
.message-body .signature .name {
  /* v76: 署名部分を毛筆行書体に。Yuji Mai(行書寄り)→Yuji Syuku(楷書寄り筆文字)→Klee One(手書き)→明朝の順でフォールバック */
  font-family: "Yuji Mai", "Yuji Syuku", "Klee One", "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 3.2rem;
  font-weight: 400;
  color: var(--color-text);
  margin-left: 16px;
  letter-spacing: 0.18em;
  line-height: 1.2;
  vertical-align: middle;
}
/* v115: 署名画像（HG行書体で2段・右揃えに作成済み）。幅は文字署名時と同程度、スマホでは横幅いっぱいまで縮小 */
.message-body .signature-img {
  display: inline-block;
  width: 36rem;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.philosophy-box {
  margin-top: 4em;
  padding: 3em 3.4em;
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-accent);
}
.philosophy-box h3 {
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  margin: 0 0 1.4em;
  color: var(--color-accent);
}
.philosophy-box ul li {
  font-size: 1.5rem;
  padding: 0.6em 0 0.6em 2.2em;
  position: relative;
  letter-spacing: 0.06em;
}
.philosophy-box ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.6em;
  width: 14px; height: 1px;
  background: var(--color-accent);
}
.profile-table { margin-top: 4em; }
.profile-table h3 {
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 1.4em;
}
.profile-table dl {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.2em 2em;
  border-top: 1px solid var(--color-border);
  padding-top: 1.4em;
}
.profile-table dt {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.12em;
}
.profile-table dd {
  font-size: 1.4rem;
  margin: 0;
  color: var(--color-text-soft);
  line-height: 2;
}

/* ------------------------------------------------------------
   14. OUTLINE（会社情報・定義リスト）
   ------------------------------------------------------------ */
.company-table {
  max-width: var(--container-m);
  margin: 0 auto;
}
.company-table dl {
  display: grid;
  grid-template-columns: 20rem 1fr;
  border-top: 1px solid var(--color-gray-line);
}
.company-table dt,
.company-table dd {
  padding: 2em 1.4em;
  border-bottom: 1px solid var(--color-gray-line);
  margin: 0;
}
.company-table dt {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.14em;
}
.company-table dd {
  font-size: 1.4rem;
  color: var(--color-text-soft);
  line-height: 2;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   15. CONTACT（巨大電話＋フォーム）
   ------------------------------------------------------------ */
.contact-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8em;
  align-items: start;
  max-width: var(--container-m);
  margin: 0 auto;
}
.contact-tel-block .label {
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: 0.3em;
  color: var(--color-accent);
  margin-bottom: 1.4em;
  text-transform: uppercase;
}
.contact-tel-huge {
  display: inline-block;
  font-family: var(--font-en);
  font-size: clamp(4rem, 5.4vw, 6.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: 0.4em;
  transition: opacity var(--duration-fast) var(--easing-1);
  white-space: nowrap;
}
.contact-tel-huge:hover { opacity: var(--hover-opacity); }
.contact-tel-block .hours {
  font-size: 1.3rem;
  color: var(--color-text-soft);
  letter-spacing: 0.08em;
  margin-bottom: 2em;
}

.contact-form-block {
  background: var(--color-bg-alt);
  padding: 4em 3.6em;
}
.contact-form-block h3 {
  font-size: 1.8rem;
  margin: 0 0 1.8em;
  letter-spacing: 0.08em;
}

/* フォーム共通 — cent-linkage 直系：下線型 */
.form { display: flex; flex-direction: column; gap: 1.4em; }
.form-row { display: flex; flex-direction: column; gap: 0.6em; }
.form-row label {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text);
}
.form-row .required {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  background: var(--color-accent);
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.1em;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="date"],
.form select,
.form textarea {
  font-family: var(--font-ja);
  font-size: 1.4rem;
  padding: 1em 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--easing-1);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}
.form textarea { resize: vertical; min-height: 12rem; }
.form-submit { margin-top: 1.6em; }

/* ------------------------------------------------------------
   16. 採用Q&A
   ------------------------------------------------------------ */
.qa-block {
  padding: 3.6em 0;
  border-bottom: 1px solid var(--color-border);
}
.qa-block:last-child { border-bottom: none; }
.qa-block .q,
.qa-block .a {
  display: grid;
  grid-template-columns: 5.6em 1fr;
  gap: 1.8em;
  align-items: start;
}
.qa-block .q { margin-bottom: 1.6em; }
.qa-block .q::before,
.qa-block .a::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4em; height: 4em;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.6rem;
  border-radius: 50%;
}
.qa-block .q::before {
  content: "Q";
  background: var(--color-accent);
  color: #fff;
}
.qa-block .a::before {
  content: "A";
  background: var(--color-bg-alt);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.qa-block .q-text {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--color-text);
  padding-top: 0.6em;
}
.qa-block .a-text {
  font-size: 1.4rem;
  line-height: 2;
  color: var(--color-text-soft);
  padding-top: 0.6em;
}
.qa-block .tag-temp {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 8px;
  background: rgba(220, 100, 50, 0.1);
  color: #d4683a;
  font-size: 1rem;
  letter-spacing: 0.1em;
}

/* 一日のスケジュール */
.schedule-list {
  display: grid;
  grid-template-columns: 11rem 1fr;
  border-top: 1px solid var(--color-border);
  max-width: var(--container-s);
  margin: 0 auto;
}
.schedule-list dt,
.schedule-list dd {
  padding: 1.8em 1.6em;
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}
.schedule-list dt {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.06em;
}
/* 時刻の直下に添える小さな注記（集合時間は現場により変動する旨） */
.schedule-list dt .dt-note {
  display: inline-block;
  margin-top: 0.5em;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text-subtle);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.schedule-list dd {
  font-size: 1.4rem;
  color: var(--color-text-soft);
}
.schedule-list dd strong {
  display: block;
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: 0.4em;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   17. 募集要項テーブル
   ------------------------------------------------------------ */
.job-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 5em;
  background: #fff;
}
.job-table th,
.job-table td {
  text-align: left;
  padding: 1.8em 2.4em;
  border-bottom: 1px solid var(--color-border);
  font-size: 1.4rem;
  vertical-align: top;
  line-height: 2;
}
.job-table th {
  background: var(--color-bg-alt);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text);
  width: 28%;
}
.job-table td { color: var(--color-text-soft); }
.job-title {
  font-size: 1.8rem;
  margin: 0 0 1.8em;
  padding-left: 1.6em;
  border-left: 4px solid var(--color-accent);
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   18. 働く環境 3カード
   ------------------------------------------------------------ */
.env-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3em;
}
.env-card {
  background: #fff;
  padding: 4em 3.2em;
  border-top: 3px solid var(--color-accent);
}
.env-card .num {
  font-family: var(--font-en);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: 0.6em;
}
.env-card h3 {
  font-size: 1.7rem;
  margin: 0 0 1em;
  letter-spacing: 0.06em;
}
.env-card p {
  font-size: 1.3rem;
  line-height: 2;
  color: var(--color-text-soft);
  margin: 0;
}

/* ------------------------------------------------------------
   19. ブログ・お知らせ（サブページ）
   ------------------------------------------------------------ */
.blog-filter {
  display: flex;
  gap: 0.8em;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 5em;
}
.blog-filter a {
  display: inline-block;
  padding: 0.8em 2em;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  background: var(--color-bg-alt);
  border-radius: 999px;
  color: var(--color-text-soft);
  transition: all var(--duration-fast) var(--easing-1);
}
.blog-filter a:hover,
.blog-filter a.active {
  background: var(--color-accent);
  color: #fff;
  opacity: 1;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3em;
}
.blog-card {
  display: block;
  background: #fff;
  transition: transform var(--duration-fast) var(--easing-1);
}
.blog-card:hover { transform: translateY(-6px); opacity: 1; }
.blog-thumb {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
  margin-bottom: 1.8em;
}
.blog-card .meta {
  display: flex;
  align-items: center;
  gap: 1.4em;
  margin-bottom: 1.2em;
  font-family: var(--font-en);
  font-size: 1.2rem;
  color: var(--color-text-subtle);
  letter-spacing: 0.1em;
}
.blog-card .cat {
  padding: 3px 10px;
  background: var(--color-accent);
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.1em;
}
.blog-card h3 {
  font-size: 1.5rem;
  margin: 0 0 1em;
  padding: 0 1.6em;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.blog-card p {
  font-size: 1.3rem;
  color: var(--color-text-soft);
  padding: 0 1.6em 2.4em;
  line-height: 2;
}

/* ------------------------------------------------------------
   20. アクセス（地図フルブリード）
   ------------------------------------------------------------ */
.access-grid {
  display: grid;
  grid-template-columns: 38rem 1fr;
  gap: 0;
  margin-bottom: 0;
}
.access-info {
  background: var(--color-bg-dark);
  color: #fff;
  padding: 5.6em 4.4em;
}
.access-info h3 {
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin: 0 0 2.4em;
}
.access-info dl {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.4em 1.2em;
}
.access-info dt {
  font-size: 1.2rem;
  color: var(--color-accent);
  letter-spacing: 0.12em;
}
.access-info dd {
  margin: 0;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 2;
}
.access-info a { color: rgba(255, 255, 255, 0.88); }
.access-info a:hover { color: var(--color-accent); opacity: 1; }
.access-map { background: var(--color-bg-alt); min-height: 48rem; }
.access-map iframe { width: 100%; height: 100%; min-height: 48rem; border: none; display: block; }
.access-routes {
  margin-top: 5.6em;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.2em;
}
.access-routes h4 {
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  margin: 0 0 1.2em;
  padding-bottom: 0.8em;
  border-bottom: 1px solid var(--color-border);
}
.access-routes p {
  font-size: 1.3rem;
  color: var(--color-text-soft);
  line-height: 2;
  margin: 0;
}

/* ------------------------------------------------------------
   21. プライバシー本文
   ------------------------------------------------------------ */
.privacy-body {
  max-width: var(--container-s);
  margin: 0 auto;
  color: var(--color-text-soft);
}
.privacy-body h2 {
  color: var(--color-text);
  font-size: 1.8rem;
  margin-top: 4.8em;
  letter-spacing: 0.08em;
  padding-left: 1.4em;
  border-left: 4px solid var(--color-accent);
}
.privacy-body p, .privacy-body li { font-size: 1.4rem; line-height: 2; }
.privacy-body ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1em; }

/* ------------------------------------------------------------
   22. CTA 帯（共通）
   ------------------------------------------------------------ */
.contact-cta {
  padding: 10em 0;
  background: var(--color-bg-dark);
  background-image: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-dark-soft) 100%);
  color: #fff;
  text-align: center;
  margin-block: 0;
}
.contact-cta h2 {
  font-size: clamp(2.6rem, 3.5vw, 3.8rem);
  margin: 0 0 1em;
  letter-spacing: 0.1em;
  color: #fff;
}
.contact-cta p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 2em;
  font-size: 1.5rem;
}
.contact-cta .tel-big {
  display: inline-block;
  font-family: var(--font-en);
  font-size: clamp(4.2rem, 5vw, 5.6rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 0.4em;
  line-height: 1;
}
.contact-cta .hours {
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2.4em;
}

/* ------------------------------------------------------------
   23. フッター
   ------------------------------------------------------------ */
.site-footer {
  background: var(--color-bg-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 8em 0 3em;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 5em;
  margin-bottom: 5em;
}
.footer-brand .brand {
  color: #fff;
  margin-bottom: 1.4em;
}
.footer-brand .brand-logo {
  filter: invert(1) brightness(1.2);
  height: 54px;
}
.footer-brand p {
  font-size: 1.3rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.footer-col h4 {
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: 0.3em;
  color: var(--color-accent);
  margin: 0 0 1.6em;
  padding-bottom: 0.8em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-col ul li { padding: 0.4em 0; }
.footer-col a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  transition: color var(--duration-fast) var(--easing-1), padding-left var(--duration-fast) var(--easing-1);
}
.footer-col a:hover {
  color: var(--color-accent);
  padding-left: 0.6em;
  opacity: 1;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2.4em;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.1em;
}
.footer-bottom a { color: rgba(255, 255, 255, 0.45); }
.footer-bottom a:hover { color: var(--color-accent); opacity: 1; }

/* ============================================================
   v4: 電気工事会社らしい「稲妻イントロ」演出
   - ページロード時に金色稲妻が描画される（stroke draw アニメ）
   - フラッシュ瞬間に画面が一瞬白く光る（電気ショック演出）
   - 完了後にオーバーレイがフェードアウトしてページが現れる
   - ヒーロー背景には小型稲妻が散らばってランダムフリッカー
   ============================================================ */

/* ------------------------------------------------------------
   v5. 落雷イントロ本格演出（枝分かれ稲妻＋連続落雷＋画面シェイク）
   ------------------------------------------------------------ */
.intro-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 36%, #1b2742 0%, #0a1322 55%, #03070f 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 全演出（追い落雷まで）が終わってからフェードアウト：2.6s開始→0.8sで消える */
  animation: introFade 0.8s var(--easing-1) 2.6s forwards;
}
/* ビネット：四隅を暗く落として夜空の奥行きを出す */
.intro-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
/* 雷光フラッシュ：落雷の瞬間に画面全体が白く明滅（多段・計4回） */
.intro-overlay::after {
  content: "";
  position: absolute;
  inset: -20px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  mix-blend-mode: screen;
  animation:
    flashStrike 0.5s var(--easing-1) 0.5s,    /* 第1落雷（メイン） */
    flashStrike 0.4s var(--easing-1) 0.9s,    /* 第2落雷（左） */
    flashStrike 0.4s var(--easing-1) 1.2s,    /* 第3落雷（右） */
    flashStrike 0.35s var(--easing-1) 2.2s;   /* 追い落雷（余韻） */
}

@keyframes introFade {
  0% { opacity: 1; visibility: visible; transform: scale(1); }
  100% { opacity: 0; visibility: hidden; transform: scale(1.06); }
}
/* 多段明滅：ピカ・ピカpiカッという稲光のゆらぎ */
@keyframes flashStrike {
  0% { opacity: 0; }
  6% { opacity: 0.92; }
  14% { opacity: 0.1; }
  24% { opacity: 0.78; }
  34% { opacity: 0.15; }
  50% { opacity: 0.4; }
  100% { opacity: 0; }
}

/* 稲妻＋文字を包むステージ（落雷の衝撃で揺れる） */
.intro-stage {
  position: relative;
  width: min(680px, 92vw);
  height: min(88vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  animation:
    boltShake 0.45s var(--easing-1) 0.5s,
    boltShake 0.32s var(--easing-1) 0.9s,
    boltShake 0.32s var(--easing-1) 1.2s,
    boltShake 0.3s var(--easing-1) 2.2s;
}
@keyframes boltShake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-6px, 4px); }
  30% { transform: translate(5px, -5px); }
  45% { transform: translate(-4px, -2px); }
  60% { transform: translate(4px, 5px); }
  75% { transform: translate(-2px, 2px); }
  90% { transform: translate(2px, -1px); }
}

/* 稲妻SVG共通（pathLength=100 で正規化し描画を統一） */
.intro-bolt {
  position: absolute;
  overflow: visible;
  color: var(--color-accent);
  opacity: 0;
}
.intro-bolt .bolt-trunk,
.intro-bolt .bolt-branch {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.intro-bolt .bolt-trunk { stroke-width: 5; }
.intro-bolt .bolt-branch { stroke-width: 2.6; }
/* グロー層：太い白ストロークをぼかして発光感を出す */
.intro-bolt .bolt-glow {
  fill: none;
  stroke: #fff;
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0.8;
  filter: blur(6px);
}

/* メイン落雷（中央・最大）：第1落雷 0.5s */
.intro-bolt-main {
  width: 48%;
  height: 104%;
  z-index: 5;
  filter:
    drop-shadow(0 0 18px rgba(200, 162, 74, 0.85))
    drop-shadow(0 0 44px rgba(255, 255, 255, 0.5));
  animation: boltAppear 1.9s var(--easing-1) 0.5s forwards;
}
.intro-bolt-main .bolt-trunk,
.intro-bolt-main .bolt-glow {
  animation: boltDraw 0.2s var(--easing-2) 0.5s forwards;
}
.intro-bolt-main .bolt-branch {
  animation: boltDraw 0.18s var(--easing-2) 0.62s forwards;
}

/* 左落雷：第2落雷 0.9s */
.intro-bolt-left {
  width: 30%;
  height: 80%;
  left: 1%;
  top: 4%;
  transform: rotate(-12deg);
  filter: drop-shadow(0 0 14px rgba(200, 162, 74, 0.8));
  animation: boltAppear 1.3s var(--easing-1) 0.9s forwards;
}
.intro-bolt-left .bolt-trunk,
.intro-bolt-left .bolt-glow,
.intro-bolt-left .bolt-branch {
  animation: boltDraw 0.18s var(--easing-2) 0.9s forwards;
}

/* 右落雷：第3落雷 1.2s */
.intro-bolt-right {
  width: 28%;
  height: 74%;
  right: 2%;
  top: 10%;
  transform: rotate(14deg);
  filter: drop-shadow(0 0 14px rgba(200, 162, 74, 0.8));
  animation: boltAppear 1.1s var(--easing-1) 1.2s forwards;
}
.intro-bolt-right .bolt-trunk,
.intro-bolt-right .bolt-glow,
.intro-bolt-right .bolt-branch {
  animation: boltDraw 0.18s var(--easing-2) 1.2s forwards;
}

@keyframes boltDraw {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}
/* 出現→残光→ゆっくり減衰 */
@keyframes boltAppear {
  0% { opacity: 0; }
  6% { opacity: 1; }
  40% { opacity: 0.9; }
  100% { opacity: 0.16; }
}

/* 巨大2段タイトル（落雷同期で「ドンッ」と登場） */
.intro-titles {
  position: absolute;
  top: 47%;                       /* 文字ブロックの上端をこの位置に固定（中身は下へ伸びる） */
  left: 50%;
  transform: translate(-50%, 0);  /* 上端基準＝文字サイズを変えても上端が動かない */
  text-align: center;
  z-index: 7;
  width: 100%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.intro-title-en {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(clamp(2.4rem, 8vw, 6.4rem) * var(--intro-scale, 1));
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  line-height: 1;
  margin: 0 0 0.12em;
  background: linear-gradient(180deg, #f0d98a 0%, #d8b25c 50%, #b58a32 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  animation: titleStrike 0.7s var(--easing-1) 1.35s forwards;
}
.intro-title-jp {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: calc(clamp(3.2rem, 13vw, 9rem) * var(--intro-scale, 1));
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1.05;
  margin: 0;
  background: linear-gradient(180deg, #f0d98a 0%, #d8b25c 50%, #b58a32 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  animation: titleStrike 0.7s var(--easing-1) 1.5s forwards;
}
/* 白発光で「ドンッ」と出現 → 金グローに収束 */
@keyframes titleStrike {
  0% {
    opacity: 0;
    transform: scale(1.18);
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1)) drop-shadow(0 0 60px rgba(255, 255, 255, 0.7)) blur(3px);
  }
  35% {
    opacity: 1;
    transform: scale(0.99);
    filter: drop-shadow(0 0 22px rgba(255, 240, 200, 0.9)) blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 26px rgba(200, 162, 74, 0.85)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.5)) blur(0);
  }
}

/* 【重要】イントロ中も本体は visibility を維持する。
   以前は hidden にしていたが、JS が is-intro-active を外し損ねると
   本体が永久に隠れて「真っ暗」になる事故が起きたため visible に変更。
   intro-overlay は不透明・最前面(z-9999)で上に乗るため演出中は本体が見えず、
   intro-overlay 自体は introFade(forwards) で必ず消えるので、
   JS が一切動かなくても本体は必ず表示される（真っ暗ゼロを保証）。 */
.is-intro-active body > *:not(.intro-overlay) {
  visibility: visible;
}
.is-intro-done body > *:not(.intro-overlay) {
  visibility: visible;
}

/* ヒーロー内に散らばる小型稲妻（intro 終了後にランダムフリッカー） */
.hero-bolts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hero-bolt {
  position: absolute;
  color: var(--color-accent);
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(200, 162, 74, 0.5));
}
.hero-bolt svg { width: 100%; height: 100%; }
.hero-bolt svg path { fill: currentColor; }
.hero-bolt-1 {
  top: 18%; right: 6%;
  width: 38px; height: 56px;
  transform: rotate(8deg);
  animation: heroBoltFlicker 8s var(--easing-1) 2.8s infinite;
}
.hero-bolt-2 {
  top: 45%; left: 8%;
  width: 28px; height: 42px;
  transform: rotate(-15deg);
  animation: heroBoltFlicker 9s var(--easing-1) 3.6s infinite;
}
.hero-bolt-3 {
  bottom: 22%; right: 18%;
  width: 32px; height: 48px;
  transform: rotate(20deg);
  animation: heroBoltFlicker 10s var(--easing-1) 4.4s infinite;
}
.hero-bolt-4 {
  top: 10%; left: 28%;
  width: 22px; height: 34px;
  transform: rotate(-8deg);
  animation: heroBoltFlicker 12s var(--easing-1) 5.2s infinite;
}

@keyframes heroBoltFlicker {
  0%, 92%, 100% { opacity: 0; }
  93% { opacity: 0.8; }
  94% { opacity: 0.2; }
  95% { opacity: 1; }
  96% { opacity: 0.4; }
  97% { opacity: 0.9; }
  98% { opacity: 0; }
}

/* イントロ無効化（パフォーマンス重視ユーザー向け） */
@media (prefers-reduced-motion: reduce) {
  .intro-overlay,
  .hero-bolts { display: none; }
}

/* ============================================================
   v3: 動き・画像演出強化（cent-linkage 直系の動きを追加）
   ============================================================ */

/* ------------------------------------------------------------
   v3-1. clip-path reveal（ヒーロー画像が下から開く演出）
   ------------------------------------------------------------ */
.hero {
  /* v116: 終了後に clip-path を残すと 88〜100vh のマスク層が常駐して重いので、
     静的 clip-path を外し fill-mode を backwards に（開始前は 0% の値、終了後は要素本来の値＝マスクなし） */
  animation: heroReveal 1.4s var(--easing-1) 0.2s backwards;
}
@keyframes heroReveal {
  0% { clip-path: inset(20% 0 20% 0); opacity: 0; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
.hero-eyebrow,
.hero-title,
.hero-sub,
.hero-ctas {
  /* v116: 基底は「表示済み」の状態にし、開始前は fill-mode: backwards が 0% の値（透明・ぼかし）を適用する。
     以前は基底を透明＋blur(8px) にして both で最終値を保持していたため、終了後も blur(0) の filter 層が残っていた */
  animation: heroContentReveal 1s var(--easing-1) backwards;
}
.hero-eyebrow { animation-delay: 0.8s; }
.hero-title   { animation-delay: 1.0s; }
.hero-sub     { animation-delay: 1.3s; }
.hero-ctas    { animation-delay: 1.5s; }
@keyframes heroContentReveal {
  0% { opacity: 0; transform: translateY(2em); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: none; } /* v116: blur(0) だと filter 層が残るため none */
}

/* ------------------------------------------------------------
   v3-2. stagger fade-in（複数要素を順に遅延フェード）
   ------------------------------------------------------------ */
.fade-in-stagger > * {
  opacity: 0;
  transform: translateY(1em);
  filter: blur(5px);
  transition: opacity var(--duration-base) var(--easing-1),
              transform var(--duration-base) var(--easing-1),
              filter var(--duration-base) var(--easing-1);
}
.fade-in-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.fade-in-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.fade-in-stagger.is-visible > *:nth-child(3) { transition-delay: 0.24s; }
.fade-in-stagger.is-visible > *:nth-child(4) { transition-delay: 0.36s; }
.fade-in-stagger.is-visible > *:nth-child(5) { transition-delay: 0.48s; }
.fade-in-stagger.is-visible > *:nth-child(6) { transition-delay: 0.60s; }
.fade-in-stagger.is-visible > *:nth-child(7) { transition-delay: 0.72s; }
.fade-in-stagger.is-visible > *:nth-child(8) { transition-delay: 0.84s; }
.fade-in-stagger.is-visible > *:nth-child(9) { transition-delay: 0.96s; }
.fade-in-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ------------------------------------------------------------
   v3-3. 巨大セクション番号の reveal 演出
   ------------------------------------------------------------ */
.section-num {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.fade-in.section-head .section-num,
.fade-in .section-num {
  opacity: 0;
  transform: translateX(-1em);
  transition: opacity 0.8s var(--easing-1),
              transform 0.8s var(--easing-1);
}
.fade-in.is-visible .section-num {
  opacity: 0.85;
  transform: translateX(0);
}

/* ------------------------------------------------------------
   v3-4. work-card / blog-card / service-card 画像ズーム＋オーバーレイ
   ------------------------------------------------------------ */
.work-thumb,
.blog-thumb,
.service-card-slim .thumb {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.work-thumb::before,
.blog-thumb::before,
.service-card-slim .thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 22, 40, 0) 60%, rgba(12, 22, 40, 0.4) 100%);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-1);
  z-index: 2;
  pointer-events: none;
}
.work-card:hover .work-thumb::before,
.blog-card:hover .blog-thumb::before,
.service-card-slim:hover .thumb::before {
  opacity: 1;
}
/* 画像本体のズームは background-image なので疑似要素で実現 */
.work-thumb:not(.is-placeholder),
.blog-thumb,
.service-card-slim .thumb {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; /* ホバーで background-size:110% auto になっても画像を繰り返さない */
  transition: background-size 0.8s var(--easing-1),
              transform 0.6s var(--easing-1);
}
/* v116: タッチ端末はタップ後に :hover が固着してズームが残るため、ホバーできる端末（PC）だけに限定 */
@media (hover: hover) {
  .work-card:hover .work-thumb:not(.is-placeholder),
  .blog-card:hover .blog-thumb,
  .service-card-slim:hover .thumb {
    background-size: 110% auto;
  }
}

/* placeholder の場合は枠が浮き出るアニメ */
.work-card:hover .work-thumb.is-placeholder {
  background-color: #ecedf1;
}

/* ------------------------------------------------------------
   v3-5. ボタン矢印のスライドアニメ
   ------------------------------------------------------------ */
.btn .btn-arrow {
  position: relative;
  overflow: hidden;
}
.btn .btn-arrow::after {
  transition: transform var(--duration-fast) var(--easing-1);
}
.btn:hover .btn-arrow::after {
  transform: translateX(0.2em);
}

/* ------------------------------------------------------------
   v3-6. サービス sticky 画像のクロスフェード
   ------------------------------------------------------------ */
.service-sticky-image {
  transition: background-image var(--duration-base) var(--easing-1),
              opacity var(--duration-fast) var(--easing-1);
  background-color: var(--color-bg-alt);
  position: sticky;
  isolation: isolate;
}
/* v117: 電気土木（10-civil.jpg＝市街地で溝を掘る作業員とミニユンボ）は主役がやや右寄りなので、縦長のsticky枠では少し右側を見せる */
.service-sticky-image[data-label="電気土木工事"] { background-position: 60% 50%; }
.service-sticky-image::after {
  content: attr(data-label);
  position: absolute;
  left: 1.5em;
  bottom: 1.5em;
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: 0.3em;
  color: #fff;
  background: rgba(12, 22, 40, 0.7);
  padding: 0.6em 1.2em;
  z-index: 2;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity var(--duration-base) var(--easing-1),
              transform var(--duration-base) var(--easing-1);
}
.service-sticky-image.is-active::after {
  opacity: 1;
  transform: translateY(0);
}

/* 現在 active な service-item にハイライト */
.service-item {
  transition: padding-left var(--duration-base) var(--easing-1),
              opacity var(--duration-fast) var(--easing-1);
}
.service-item .num {
  display: inline-block;
  transition: color var(--duration-fast) var(--easing-1),
              transform var(--duration-base) var(--easing-1);
}
.service-item.is-active {
  padding-left: 1.4em;
  border-left: 2px solid var(--color-accent);
}
.service-item.is-active .num {
  color: var(--color-accent);
  transform: translateX(0.4em);
}

/* ------------------------------------------------------------
   v3-7. 画像プレースホルダーの呼吸感アニメ
   ------------------------------------------------------------ */
.work-thumb.is-placeholder {
  position: relative;
  overflow: hidden;
}
.work-thumb.is-placeholder::after {
  content: "PHOTO COMING";
  /* 既存のスタイル維持 */
}
.work-thumb.is-placeholder {
  background-image:
    linear-gradient(135deg, #e8eaee 25%, #f5f6f8 25%, #f5f6f8 50%, #e8eaee 50%, #e8eaee 75%, #f5f6f8 75%),
    linear-gradient(90deg, transparent 0%, rgba(200, 162, 74, 0.04) 50%, transparent 100%);
  background-size: 16px 16px, 200% 100%;
  animation: placeholderShine 3.5s var(--easing-1) infinite;
}
@keyframes placeholderShine {
  0% { background-position: 0 0, -100% 0; }
  100% { background-position: 0 0, 100% 0; }
}

/* ------------------------------------------------------------
   v3-8. NEWS row のホバー演出強化（左にずれる + 矢印が右にスライド）
   ------------------------------------------------------------ */
.news-row .arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--easing-1);
}
.news-row:hover .arrow { transform: translateX(0.4em); }

/* ------------------------------------------------------------
   v3-9. recruit-banner の画像オーバーレイ・hover演出
   ------------------------------------------------------------ */
.recruit-banner-image {
  position: relative;
  overflow: hidden;
  transition: filter var(--duration-base) var(--easing-1);
}
.recruit-banner-image::before {
  content: "";
  position: absolute;
  inset: 0;
  /* v124: 左の紺の文字欄から写真へ自然につながるよう、境目（左端）だけ紺でぼかす。人物にはかけない */
  background: linear-gradient(90deg, var(--color-bg-dark) 0%, rgba(12, 22, 40, 0.55) 12%, rgba(12, 22, 40, 0) 38%);
  z-index: 1;
}
.recruit-banner:hover .recruit-banner-image {
  filter: brightness(1.1);
}

/* ------------------------------------------------------------
   v3-10. footer リンク hover で下線アニメ
   ------------------------------------------------------------ */
.footer-col a {
  position: relative;
  display: inline-block;
}
.footer-col a::before {
  content: "→";
  position: absolute;
  left: -1.2em;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-1),
              left var(--duration-fast) var(--easing-1);
  color: var(--color-accent);
}
.footer-col a:hover::before {
  opacity: 1;
  left: -1em;
}

/* ------------------------------------------------------------
   v3-11. section-alt の境界に微妙な装飾線
   ------------------------------------------------------------ */
.section-alt {
  position: relative;
}
.section-alt::before,
.section-alt::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 4em;
  background: linear-gradient(180deg, transparent 0%, var(--color-accent) 100%);
}
.section-alt::before { top: 0; transform: translateX(-50%) scaleY(-1); }
.section-alt::after { bottom: 0; }

/* ------------------------------------------------------------
   24. レスポンシブ（cent-linkage 直系：900px / 480px）
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  :root {
    --container-l: 100%;
    --section-margin: 10em;
  }
  .services-grid,
  .blog-grid,
  .env-grid,
  .works-grid { grid-template-columns: repeat(2, 1fr); }
  .access-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root {
    --header-h: 64px;
    --header-h-scrolled: 56px;
    --section-margin: 8em;
  }
  body { font-size: 1.4rem; letter-spacing: 0.5px; }
  html { font-size: 62.5%; }
  .site-header { height: var(--header-h); }
  /* v116: backdrop-filter(blur) はスマホGPUでスクロール中に毎フレーム再計算され最も重いため、
     スマホでは不透明寄りの白に置き換える（TOP未スクロール時の透明は維持） */
  .site-header,
  .page--top .site-header.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.94);
  }
  .page--top .site-header:not(.is-scrolled) { background-color: transparent; }
  /* v116: iOS はフォーム入力が16px未満だとフォーカス時に自動ズームするため16pxに */
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="tel"],
  .form input[type="date"],
  .form select,
  .form textarea { font-size: 16px; }
  /* v116: ドロワー開放中は背景をスクロールさせない（main.js が html.nav-open を付与） */
  html.nav-open,
  html.nav-open body { overflow: hidden; }
  .header-inner { gap: 12px; padding: 0 2em; }
  .brand-logo { height: 40px; }
  .site-header.is-scrolled .brand-logo { height: 36px; }
  .brand span { font-size: 1.3rem; }
  .nav-toggle { display: flex; }
  .nav-cta-pair { display: none; }
  .global-nav .nav-more-btn { display: inline-flex; }

  .global-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: 100vw;
    height: calc(100vh - var(--header-h));
    background: #fff;
    padding: 3em 2.4em;
    transform: translateX(100%);
    transition: transform 0.35s var(--easing-1);
    border-top: 1px solid var(--color-border);
    z-index: 99;
    overflow-y: auto;
  }
  .global-nav.is-open { transform: none; }
  .global-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .global-nav li { border-bottom: 1px solid var(--color-border); }
  .global-nav a {
    display: block;
    padding: 1.8em 0.4em;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
  }
  .nav-more-btn {
    margin: 1.4em 0.4em;
    width: 100%;
    border-radius: 0;
    background: var(--color-accent);
    color: #fff;
    border: none;
    padding: 1.4em;
    font-size: 0;
  }
  .nav-more-btn::before {
    content: "MORE +";
    font-size: 1.3rem;
    letter-spacing: 0.3em;
  }
  .nav-more-btn.is-active::before { content: "CLOSE -"; }
  .nav-more-btn:hover, .nav-more-btn.is-active { transform: none; background: var(--color-accent-hover); }
  .nav-more-panel {
    position: static;
    box-shadow: none;
    border: none;
    margin-top: 8px;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .nav-more-panel.is-open { display: block; }
  .nav-more-panel a {
    padding: 1.6em 0.4em;
    border-bottom: 1px solid var(--color-border);
    font-size: 1.4rem;
  }

  .section-head {
    grid-template-columns: 1fr;
    gap: 1em;
    margin-bottom: 3em;
  }
  .section-num { font-size: 8rem; }
  .hero { min-height: 88vh; }
  .hero-inner { padding: 0 0 8em; }
  .hero-catch-wrap { justify-content: flex-start; padding-right: 0; }
  .scroll-indicator { display: none; }

  .service-sticky-wrap { grid-template-columns: 1fr; gap: 4em; }
  .service-sticky-image { position: static; height: 36rem; order: -1; }

  .services-grid,
  .works-grid,
  .blog-grid,
  .env-grid { grid-template-columns: 1fr; }

  .recruit-banner-inner { grid-template-columns: 1fr; }
  .recruit-banner-text { padding: 5em 2.4em; }
  .recruit-banner-image { min-height: 28rem; }

  .message-2col { grid-template-columns: 1fr; gap: 3em; }
  .message-photo { max-width: 32rem; aspect-ratio: 4 / 5; }

  .company-table dl { grid-template-columns: 1fr; }
  .company-table dt { border-bottom: none; padding-bottom: 0.4em; }

  .contact-block { grid-template-columns: 1fr; gap: 4em; }
  .contact-form-block { padding: 3em 2em; }

  .access-routes { grid-template-columns: 1fr; gap: 2em; }
  .news-row {
    grid-template-columns: 1fr;
    gap: 0.4em;
    padding: 1.6em 0.6em;
  }
  .news-row:hover { padding-left: 1em; }
  .footer-grid { grid-template-columns: 1fr; gap: 3em; }
  .footer-bottom { flex-direction: column; gap: 12px; }

  .schedule-list { grid-template-columns: 8em 1fr; }
  .qa-block .q,
  .qa-block .a { grid-template-columns: 4em 1fr; gap: 1.2em; }
  .qa-block .q::before,
  .qa-block .a::before { width: 3.2em; height: 3.2em; font-size: 1.3rem; }

  .btn { width: 100%; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 3.2rem; letter-spacing: 0.06em; }
  .section-title { font-size: 2.4rem; }
  .container { padding: 0 2em; }
  .contact-tel-huge { font-size: 3.6rem; }
}

/* ============================================================
   v8: デザイン設定パネル（data属性でバリエーション切替）
   - アクセント色 / スクロール演出 / 出だしアニメ を html の data-* で制御
   - クライアントとその場で切替して決めるための仕組み（サンプル専用）
   ============================================================ */

/* ------------------------------------------------------------
   v8-A. アクセントカラー切替（data-accent）
   gold は :root 既定。blue/green/orange を上書き
   ------------------------------------------------------------ */
html[data-accent="blue"] {
  --color-accent: #0076c3;
  --color-accent-hover: #015a96;
  --color-accent-light: #4aa3e0;
  --color-accent-soft: rgba(0, 118, 195, 0.08);
}
html[data-accent="green"] {
  --color-accent: #1f9d6b;
  --color-accent-hover: #167a52;
  --color-accent-light: #5cc596;
  --color-accent-soft: rgba(31, 157, 107, 0.08);
}
html[data-accent="orange"] {
  --color-accent: #e8833a;
  --color-accent-hover: #c8692a;
  --color-accent-light: #f3ab74;
  --color-accent-soft: rgba(232, 131, 58, 0.08);
}
/* v21: 銀／白／黄 アクセント（金・銀・白・黄の4種に整理） */
html[data-accent="silver"] {
  --color-accent: #a8aeb6;
  --color-accent-hover: #8d9098;
  --color-accent-light: #cbd0d6;
  --color-accent-soft: rgba(168, 174, 182, 0.12);
}
html[data-accent="white"] {
  --color-accent: #e8e8e8;
  --color-accent-hover: #c8c8c8;
  --color-accent-light: #f4f4f4;
  --color-accent-soft: rgba(232, 232, 232, 0.16);
}
html[data-accent="yellow"] {
  --color-accent: #e2b800;
  --color-accent-hover: #c2a000;
  --color-accent-light: #f0d24a;
  --color-accent-soft: rgba(226, 184, 0, 0.12);
}
/* v25: マットブラック（引き締まる黒系アクセント） */
html[data-accent="matblack"] {
  --color-accent: #1a1a1a;
  --color-accent-hover: #000000;
  --color-accent-light: #444444;
  --color-accent-soft: rgba(26, 26, 26, 0.12);
}

/* ------------------------------------------------------------
   v8-B. スクロール演出切替（data-scroll）
   blur=ぼかしフェード（既定）／ simple=opacityのみ／ none=即表示
   ------------------------------------------------------------ */
html[data-scroll="simple"] .fade-in { filter: none !important; }
html[data-scroll="none"] .fade-in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* ------------------------------------------------------------
   v8-C. 出だしアニメ切替（data-intro）
   3種のオーバーレイのうち、選択中の1つだけ表示
   ------------------------------------------------------------ */
.intro-overlay { display: none; }                 /* 既定は非表示（data-introで表示） */
html[data-intro="bolt"] .intro--bolt,
html[data-intro="fade"] .intro--fade,
html[data-intro="logo"] .intro--logo { display: flex; }

/* どのイントロも本体は隠さない（真っ暗ゼロ）。intro--bolt の introFade は既存定義を流用 */

/* --- 光のフェード（上品） --- */
.intro--fade {
  background: radial-gradient(ellipse at 50% 44%, #16213a 0%, #0a1322 60%, #050a14 100%);
  align-items: center;
  justify-content: center;
  animation: introFade 0.9s var(--easing-1) 1.7s forwards;
}
.intro--fade .fade-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(240, 217, 138, 0.5) 0%, rgba(240, 217, 138, 0.1) 28%, transparent 58%);
  opacity: 0;
  pointer-events: none;
  animation: fadeLight 1.9s var(--easing-1) 0.1s forwards;
}
@keyframes fadeLight {
  0% { opacity: 0; transform: scale(0.85); }
  45% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.18; transform: scale(1.1); }
}
/* フェード版のタイトルは早めにふわっと */
.intro--fade .intro-title-en { animation-delay: 0.5s; }
.intro--fade .intro-title-jp { animation-delay: 0.65s; }

/* --- ロゴ線描き --- */
.intro--logo {
  background: radial-gradient(ellipse at center, #16213a 0%, #0a1322 60%, #050a14 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
  animation: introFade 0.9s var(--easing-1) 3.0s forwards;
}
/* 本物ロゴ(透過PNG)をCSSマスクで金色化し、上→下のワイプ＋スキャンで描くように見せる */
.intro--logo .logo-real-wrap {
  position: absolute;              /* 文字フローから切り離し＝大ロゴの大きさが文字位置に影響しない */
  left: 50%;
  bottom: calc(53% + 0.3em);       /* ロゴ下端を画面47%（base文字上端）のすぐ上に固定 */
  transform: translateX(-50%);
  width: calc(clamp(78px, 13vw, 116px) * var(--intro-logo-scale, 1));  /* 他イントロのロゴと同じサイズ */
  aspect-ratio: 1117 / 1297;   /* 実ロゴの縦横比 */
}
.intro--logo .logo-real {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #f0d98a 0%, #d8b25c 55%, #b58a32 100%);
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(200, 162, 74, 0.45));
  clip-path: inset(0 0 100% 0);   /* 初期は上端で隠す */
  animation: logoReveal 1.3s var(--easing-1) 0.35s forwards;
}
@keyframes logoReveal { to { clip-path: inset(0 0 0 0); } }
/* 金色スキャンライン（上→下に走り「描いている」感を出す） */
.intro--logo .logo-scan {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f0d98a, transparent);
  box-shadow: 0 0 12px 2px rgba(240, 217, 138, 0.8);
  opacity: 0;
  animation: logoScan 1.3s var(--easing-1) 0.35s forwards;
}
@keyframes logoScan {
  0% { top: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
/* ロゴ内に YAMAGA があるので英字タイトルは隠し、漢字（山雅電設）はロゴの直下に */
.intro--logo .intro-title-en { display: none; }
/* .intro--logo .intro-titles は base の top:47% を継承＝他イントロと同じ位置 */
.intro--logo .intro-title-jp { animation-delay: 2.2s; }  /* font-size は base 継承＝他イントロと同じ */

/* ------------------------------------------------------------
   v8-D. デザイン設定パネル UI（サンプル専用・本番化時は撤去）
   ------------------------------------------------------------ */
.design-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0c1628;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: transform 0.2s var(--easing-1), background 0.2s;
}
.design-fab:hover { background: var(--color-accent); transform: rotate(30deg); }
.design-panel {
  position: fixed;
  right: 18px;
  bottom: 80px;
  z-index: 10000;
  width: min(320px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(12, 22, 40, 0.35);
  padding: 18px 18px 20px;
  font-family: var(--font-ja);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s var(--easing-1), transform 0.25s var(--easing-1), visibility 0.25s;
}
.design-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.design-panel__title {
  font-size: 14px;
  font-weight: 700;
  color: #0c1628;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.design-panel__note { font-size: 11px; color: #8b94a5; margin: 0 0 14px; line-height: 1.5; }
.design-row { margin-bottom: 14px; }
.design-row > span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #556173;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.design-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.design-seg button {
  flex: 1 1 auto;
  min-width: 60px;
  padding: 8px 6px;
  font-size: 12px;
  font-family: inherit;
  color: #1a2a4a;
  background: #f1f3f7;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.design-seg button:hover { background: #e4e8ef; }
.design-seg button.is-active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.design-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.design-actions { display: flex; gap: 8px; margin-top: 16px; }
.design-actions button {
  flex: 1;
  padding: 10px 8px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 700;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: #fff;
  color: #0c1628;
  transition: background 0.15s;
}
.design-actions button:hover { background: #f1f3f7; }
.design-actions .design-replay { background: #0c1628; color: #fff; border-color: #0c1628; }
.design-actions .design-replay:hover { background: var(--color-accent); border-color: var(--color-accent); }
.design-copied { font-size: 11px; color: #1f9d6b; margin: 8px 0 0; min-height: 14px; }

@media (max-width: 480px) {
  .design-fab { width: 44px; height: 44px; font-size: 20px; right: 12px; bottom: 12px; }
  .design-panel { right: 12px; bottom: 66px; }
}
@media print { .design-fab, .design-panel { display: none !important; } }

/* ============================================================
   v9: 出だしアニメ追加3種（circuit / curtain / wipe）
   いずれも本体は隠さない・CSSだけで必ず消える安全方式
   ============================================================ */
html[data-intro="circuit"] .intro--circuit,
html[data-intro="curtain"] .intro--curtain,
html[data-intro="wipe"] .intro--wipe { display: flex; }

/* --- サーキット（回路が走って光る・電気工事テーマ） --- */
.intro--circuit {
  background: radial-gradient(ellipse at center, #16213a 0%, #0a1322 60%, #050a14 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8em;
  animation: introFade 0.9s var(--easing-1) 2.1s forwards;
}
.intro--circuit .circuit-svg {
  width: min(440px, 82vw);
  height: auto;
  color: var(--color-accent);
  overflow: visible;
  filter: drop-shadow(0 0 14px rgba(200, 162, 74, 0.55));
}
.intro--circuit .circuit-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0.9;
  animation: logoDraw 0.85s var(--easing-1) 0.2s forwards;
}
.intro--circuit .circuit-line:nth-of-type(2) { animation-delay: 0.45s; }
.intro--circuit .circuit-line:nth-of-type(3) { animation-delay: 0.65s; }
.intro--circuit .circuit-node {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: circuitNode 0.5s var(--easing-1) forwards;
}
.intro--circuit .circuit-node:nth-of-type(1) { animation-delay: 0.7s; }
.intro--circuit .circuit-node:nth-of-type(2) { animation-delay: 0.95s; }
.intro--circuit .circuit-node:nth-of-type(3) { animation-delay: 1.15s; }
@keyframes circuitNode {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0.95; transform: scale(1); }
}
.intro--circuit .intro-title-en { animation-delay: 1.4s; }
.intro--circuit .intro-title-jp { animation-delay: 1.55s; }

/* --- カーテン（紺の幕が左右に開く・クラシック上品） --- */
.intro--curtain {
  background: transparent;
  align-items: center;
  justify-content: center;
  animation: curtainEnd 0.01s linear 2.0s forwards;
}
.intro--curtain .curtain-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: linear-gradient(180deg, #16213a 0%, #0a1322 60%, #050a14 100%);
  z-index: 1;
}
.intro--curtain .curtain-l { left: 0; animation: curtainL 0.9s var(--easing-2) 1.05s forwards; }
.intro--curtain .curtain-r { right: 0; animation: curtainR 0.9s var(--easing-2) 1.05s forwards; }
@keyframes curtainL { to { transform: translateX(-100%); } }
@keyframes curtainR { to { transform: translateX(100%); } }
@keyframes curtainEnd { to { visibility: hidden; } }
.intro--curtain .intro-titles { z-index: 2; }
.intro--curtain .intro-title-en,
.intro--curtain .intro-title-jp {
  animation: titleFlash 1.25s var(--easing-1) 0.2s forwards;
}
.intro--curtain .intro-title-jp { animation-delay: 0.32s; }
@keyframes titleFlash {
  0% { opacity: 0; transform: scale(1.12); filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.9)); }
  28% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 18px rgba(200, 162, 74, 0.7)); }
  68% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.97); }
}

/* --- ワイプ（オーバーレイが下から上へスッと消える・ミニマル） --- */
.intro--wipe {
  background: linear-gradient(180deg, #16213a 0%, #0a1322 60%, #050a14 100%);
  align-items: center;
  justify-content: center;
  animation: wipeUp 0.85s var(--easing-2) 1.25s forwards;
}
@keyframes wipeUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); visibility: hidden; }
}
.intro--wipe .intro-title-en { animation-delay: 0.35s; }
.intro--wipe .intro-title-jp { animation-delay: 0.5s; }

/* ============================================================
   v10: デザイン設定 追加カテゴリー
   背景 / 文字サイズ / 画像サイズ・形・動き / 余白 / 角丸
   すべて <html data-*> で制御。本体は隠さない安全方式
   ============================================================ */

/* --- 背景（data-bg）：body の地色を切替（薄い色のみ・安全） --- */
html[data-bg="gray"]      { --color-bg: #eef0f3; --color-bg-alt: #e4e7ec; }
html[data-bg="cream"]     { --color-bg: #faf6ee; --color-bg-alt: #f1ead9; }
html[data-bg="bluetint"]  { --color-bg: #eef5fc; --color-bg-alt: #e2ecf6; }
/* v22: 背景色を10種に拡張（明るい色のみで統一） */
html[data-bg="mint"]      { --color-bg: #ebf6f0; --color-bg-alt: #ddedde; }
html[data-bg="lavender"]  { --color-bg: #f0eef8; --color-bg-alt: #e3e0ef; }
html[data-bg="pink"]      { --color-bg: #fbeef0; --color-bg-alt: #f3dde2; }
html[data-bg="sand"]      { --color-bg: #f5ede0; --color-bg-alt: #ebdec6; }
html[data-bg="greentint"] { --color-bg: #f4f5e2; --color-bg-alt: #e8ead0; }
html[data-bg="snow"]      { --color-bg: #f7f9fc; --color-bg-alt: #ecf0f5; }

/* --- 文字サイズ（data-textscale）：rem基準(html font-size)を変える --- */
html[data-textscale="sm"]  { font-size: 58%; }
html[data-textscale="std"] { font-size: 62.5%; }
html[data-textscale="lg"]  { font-size: 68%; }
html[data-textscale="xl"]  { font-size: 74%; }  /* v22: 特大 */

/* --- 余白（data-spacing）：セクション間マージン --- */
html[data-spacing="tight"] { --section-margin: 8em; }
html[data-spacing="std"]   { --section-margin: 12.5em; }
html[data-spacing="loose"] { --section-margin: 16em; }

/* --- 角丸（data-radius）：CSS変数＋主要要素に明示反映 --- */
html[data-radius="sharp"] { --radius: 0px; --radius-lg: 0px; }
html[data-radius="std"]   { --radius: 2px; --radius-lg: 4px; }
html[data-radius="round"] { --radius: 10px; --radius-lg: 18px; }
.btn { border-radius: var(--radius); }
.blog-card,
.work-card,
.service-card-slim,
.contact-form-block,
.qa-block,
.schedule-list { border-radius: var(--radius-lg); }

/* --- 画像サイズ（data-imgsize）：主要ビジュアルの高さ／大きさ --- */
html[data-imgsize="sm"] .hero { min-height: 80vh; }
html[data-imgsize="lg"] .hero { min-height: 112vh; }
html[data-imgsize="sm"] .service-sticky-image { height: 48rem; }
html[data-imgsize="lg"] .service-sticky-image { height: 72rem; }
html[data-imgsize="sm"] .recruit-banner-image { min-height: 26rem; }
html[data-imgsize="lg"] .recruit-banner-image { min-height: 42rem; }
html[data-imgsize="sm"] .message-photo { max-width: 26rem; }
html[data-imgsize="lg"] .message-photo { max-width: 40rem; }
html[data-imgsize="sm"] .work-thumb,
html[data-imgsize="sm"] .blog-thumb,
html[data-imgsize="sm"] .service-card-slim .thumb { aspect-ratio: 4 / 3; }
html[data-imgsize="lg"] .work-thumb,
html[data-imgsize="lg"] .blog-thumb,
html[data-imgsize="lg"] .service-card-slim .thumb { aspect-ratio: 3 / 4; }
/* v38: サブページ（hero-sub-page）のヒーロー高さは imgsize 設定の影響を受けず 60vh で固定 */
html[data-imgsize="sm"] .hero-sub-page,
html[data-imgsize="std"] .hero-sub-page,
html[data-imgsize="lg"] .hero-sub-page,
html[data-imgsize="xl"] .hero-sub-page { min-height: 60vh; }

/* v22: 画像サイズ「特大」（lg よりさらに大きく・縦長） */
html[data-imgsize="xl"] .hero { min-height: 128vh; }
html[data-imgsize="xl"] .service-sticky-image { height: 84rem; }
html[data-imgsize="xl"] .recruit-banner-image { min-height: 50rem; }
html[data-imgsize="xl"] .message-photo { max-width: 48rem; }
html[data-imgsize="xl"] .work-thumb,
html[data-imgsize="xl"] .blog-thumb,
html[data-imgsize="xl"] .service-card-slim .thumb { aspect-ratio: 2 / 3; }

/* ============================================================
   v23: スマホ/タブレット表示プレビュー（iframeオーバーレイで実機幅レンダリング）
   ============================================================ */
.device-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 26, 0.78);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.device-preview-frame {
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5), 0 0 0 8px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  width: 390px;          /* default = mobile */
  height: min(844px, 92vh);
}
html[data-device="tablet"] .device-preview-frame {
  width: 768px;
  height: min(1024px, 92vh);
  border-radius: 18px;
}
.device-preview-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #ffffff;
}
.device-preview-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #0c1628;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.device-preview-close:hover { background: #f0f0f0; }
@media (max-width: 480px) {
  .device-preview-frame { width: min(390px, 92vw); height: 86vh; }
  html[data-device="tablet"] .device-preview-frame { width: 92vw; }
}

/* ============================================================
   v24: ヒーロー英字(.hero-eyebrow)／本文(.hero-sub) の大きさを個別調整
   ============================================================ */
html[data-heroebsize="xs"] { --hero-eyebrow-scale: 0.7; }
html[data-heroebsize="sm"] { --hero-eyebrow-scale: 0.85; }
html[data-heroebsize="md"] { --hero-eyebrow-scale: 1; }
html[data-heroebsize="lg"] { --hero-eyebrow-scale: 1.25; }
html[data-heroebsize="xl"] { --hero-eyebrow-scale: 1.5; }
html[data-herosubsize="xs"] { --hero-sub-scale: 0.7; }
html[data-herosubsize="sm"] { --hero-sub-scale: 0.85; }
html[data-herosubsize="md"] { --hero-sub-scale: 1; }
html[data-herosubsize="lg"] { --hero-sub-scale: 1.25; }
html[data-herosubsize="xl"] { --hero-sub-scale: 1.5; }

/* ============================================================
   v30: TOP透明ヘッダーの文字色＋ロゴ色（金/銀/白/黄の4種）
   - TOP（page--top）の未スクロール時のみ反映、スクロール後の白背景時は不変
   - ロゴPNGは CSS mask で背景色を着色
   ============================================================ */
html[data-headercolor="gold"]   { --header-color: #f0d98a; }
html[data-headercolor="silver"] { --header-color: #cbd0d6; }
html[data-headercolor="white"]  { --header-color: #ffffff; }
html[data-headercolor="yellow"] { --header-color: #fff14a; }

html.page--top .site-header:not(.is-scrolled) .brand span,
html.page--top .site-header:not(.is-scrolled) .global-nav > ul > li > a,
html.page--top .site-header:not(.is-scrolled) .cta-mail,
html.page--top .site-header:not(.is-scrolled) .cta-tel .num,
html.page--top .site-header:not(.is-scrolled) .cta-tel .hours,
html.page--top .site-header:not(.is-scrolled) .nav-more-btn {
  color: var(--header-color, #fff);
}
/* ロゴPNG画像を CSS mask で着色 */
html.page--top .site-header:not(.is-scrolled) .brand-logo {
  background-color: var(--header-color, #fff);
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
}

/* --- 画像の形（data-imgshape）：角丸／円形／斜めカット --- */
html[data-imgshape="rounded"] .service-sticky-image,
html[data-imgshape="rounded"] .recruit-banner-image,
html[data-imgshape="rounded"] .message-photo,
html[data-imgshape="rounded"] .work-thumb,
html[data-imgshape="rounded"] .blog-thumb,
html[data-imgshape="rounded"] .service-card-slim .thumb { border-radius: 20px; overflow: hidden; }
html[data-imgshape="circle"] .service-sticky-image,
html[data-imgshape="circle"] .recruit-banner-image,
html[data-imgshape="circle"] .message-photo,
html[data-imgshape="circle"] .work-thumb,
html[data-imgshape="circle"] .blog-thumb,
html[data-imgshape="circle"] .service-card-slim .thumb { border-radius: 50%; overflow: hidden; }
html[data-imgshape="cut"] .service-sticky-image,
html[data-imgshape="cut"] .recruit-banner-image,
html[data-imgshape="cut"] .message-photo,
html[data-imgshape="cut"] .work-thumb,
html[data-imgshape="cut"] .blog-thumb,
html[data-imgshape="cut"] .service-card-slim .thumb {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
}

/* --- 画像の動き（data-imgmotion）：ホバーズーム／ゆっくり拡大／なし --- */
@keyframes kenburns {
  0% { background-size: cover; background-position: center; }
  100% { background-size: 124% auto; background-position: 60% 40%; }
}
html[data-imgmotion="kenburns"] .hero {
  animation: kenburns 18s var(--easing-1) infinite alternate;
}
html[data-imgmotion="kenburns"] .service-sticky-image {
  animation: kenburns 15s var(--easing-1) infinite alternate;
}
/* なし：ホバーズームを無効化 */
html[data-imgmotion="none"] .work-card:hover .work-thumb:not(.is-placeholder),
html[data-imgmotion="none"] .blog-card:hover .blog-thumb,
html[data-imgmotion="none"] .service-card-slim:hover .thumb { background-size: cover; }

/* ============================================================
   v11: ヒーロー装飾（data-herofx）
   トップ ヒーロー背景の小型稲妻の有無・密度・種類を切替
   ============================================================ */
/* なし：装飾を消す */
html[data-herofx="none"] .hero-bolts { display: none; }

/* 稲妻・多め：点滅を頻繁に＆やや明るく */
html[data-herofx="boltmany"] .hero-bolt-1 { animation-duration: 4s; }
html[data-herofx="boltmany"] .hero-bolt-2 { animation-duration: 4.6s; }
html[data-herofx="boltmany"] .hero-bolt-3 { animation-duration: 5.2s; }
html[data-herofx="boltmany"] .hero-bolt-4 { animation-duration: 5.8s; }
html[data-herofx="boltmany"] .hero-bolt { filter: drop-shadow(0 0 16px rgba(200, 162, 74, 0.7)); }

/* 光のゆらぎ：鋭い稲妻を消して、金のグローをはっきり明滅（修正版：遅延短縮＋強化） */
html[data-herofx="glow"] .hero-bolt { display: none; }
html[data-herofx="glow"] .hero-bolts::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 26%, rgba(216, 178, 92, 0.5) 0%, transparent 48%),
    radial-gradient(circle at 18% 64%, rgba(216, 178, 92, 0.42) 0%, transparent 46%),
    radial-gradient(circle at 50% 92%, rgba(216, 178, 92, 0.3) 0%, transparent 42%);
  animation: heroGlowPulse 5s var(--easing-1) 0.3s infinite alternate;
  opacity: 0.5;
}
@keyframes heroGlowPulse {
  0% { opacity: 0.4; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1.06); }
}

/* ============================================================
   v13: 出だしアニメ3種(cent/split/zoom) ＋ ヒーロー装飾6種
   ============================================================ */

/* --- 表示ルール（選択中の1つだけ表示） --- */
html[data-intro="cent"] .intro--cent,
html[data-intro="split"] .intro--split,
html[data-intro="zoom"] .intro--zoom { display: flex; }

/* --- cent風（参考サイト直系：金ロゴ blur-fade → カバーが opacity フェードアウト） --- */
.intro--cent {
  background: radial-gradient(ellipse at center, #16213a 0%, #0a1322 60%, #050a14 100%);
  align-items: center;
  justify-content: center;
  animation: introFade 0.8s ease 1.7s forwards;
}
.intro--cent .cent-logo {
  width: min(230px, 48vw);
  aspect-ratio: 1117 / 1297;
  background: linear-gradient(180deg, #f0d98a 0%, #d8b25c 55%, #b58a32 100%);
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
  opacity: 0;
  animation: centFade 1.0s var(--easing-2) 0.25s forwards;
}
@keyframes centFade {
  0% { opacity: 0; transform: translateY(0.5em); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0) drop-shadow(0 0 16px rgba(200, 162, 74, 0.5)); }
}

/* --- 上下開き（紺の幕が上下に割れる。titleFlash/curtainEnd を流用） --- */
.intro--split {
  background: transparent;
  align-items: center;
  justify-content: center;
  animation: curtainEnd 0.01s linear 1.9s forwards;
}
.intro--split .split-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: linear-gradient(180deg, #16213a 0%, #0a1322 60%, #050a14 100%);
  z-index: 1;
}
.intro--split .split-top { top: 0; animation: splitTop 0.9s var(--easing-2) 0.95s forwards; }
.intro--split .split-bottom { bottom: 0; animation: splitBottom 0.9s var(--easing-2) 0.95s forwards; }
@keyframes splitTop { to { transform: translateY(-100%); } }
@keyframes splitBottom { to { transform: translateY(100%); } }
.intro--split .intro-titles { z-index: 2; }
.intro--split .intro-title-en,
.intro--split .intro-title-jp { animation: titleFlash 1.15s var(--easing-1) 0.2s forwards; }
.intro--split .intro-title-jp { animation-delay: 0.32s; }

/* --- ズームフォーカス（文字がボケ→合焦、カバーが拡大して消える） --- */
.intro--zoom {
  background: radial-gradient(ellipse at center, #16213a 0%, #0a1322 60%, #050a14 100%);
  align-items: center;
  justify-content: center;
  animation: zoomOut 0.8s var(--easing-1) 1.4s forwards;
}
@keyframes zoomOut {
  0% { opacity: 1; transform: scale(1); visibility: visible; }
  100% { opacity: 0; transform: scale(1.08); visibility: hidden; }
}
.intro--zoom .intro-title-en,
.intro--zoom .intro-title-jp { animation: zoomFocus 1.0s var(--easing-1) 0.2s forwards; }
.intro--zoom .intro-title-jp { animation-delay: 0.4s; }
@keyframes zoomFocus {
  0% { opacity: 0; transform: scale(1.3); filter: blur(12px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* ============================================================
   ヒーロー装飾 追加6種（CSS のみ・.hero-bolts の疑似要素）
   ============================================================ */
/* 6種では SVG稲妻を隠す */
html[data-herofx="particles"] .hero-bolt,
html[data-herofx="lines"] .hero-bolt,
html[data-herofx="rain"] .hero-bolt,
html[data-herofx="grid"] .hero-bolt,
html[data-herofx="pulse"] .hero-bolt,
html[data-herofx="spark"] .hero-bolt { display: none; }

/* 粒子：金の光点がふわふわ漂う */
html[data-herofx="particles"] .hero-bolts::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(200, 162, 74, 0.9);
  box-shadow:
    90px 120px 0 rgba(200, 162, 74, 0.6), 240px 60px 0 rgba(200, 162, 74, 0.4),
    400px 200px 0 rgba(200, 162, 74, 0.55), 560px 100px 0 rgba(200, 162, 74, 0.35),
    720px 260px 0 rgba(200, 162, 74, 0.5), 200px 320px 0 rgba(200, 162, 74, 0.4),
    480px 380px 0 rgba(200, 162, 74, 0.45), 650px 340px 0 rgba(200, 162, 74, 0.3),
    130px 230px 0 rgba(200, 162, 74, 0.5), 330px 160px 0 rgba(200, 162, 74, 0.35),
    840px 160px 0 rgba(200, 162, 74, 0.4), 900px 320px 0 rgba(200, 162, 74, 0.3);
  animation: heroParticles 16s linear infinite, heroTwinkle 4s ease-in-out infinite alternate;
}
@keyframes heroParticles { from { transform: translateY(40px); } to { transform: translateY(-40px); } }
@keyframes heroTwinkle { from { opacity: 0.58; } to { opacity: 1; } }

/* 光のライン：細い金の縦ラインがゆっくり流れる */
html[data-herofx="lines"] .hero-bolts::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(200, 162, 74, 0.30) 55px, transparent 57px);
  animation: heroLines 14s linear infinite;
}
@keyframes heroLines { from { background-position: 0 0; } to { background-position: 114px 0; } }

/* 光の雨：細い金の筋が斜めに流れ落ちる */
html[data-herofx="rain"] .hero-bolts::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(108deg, rgba(200, 162, 74, 0.32) 0 2px, transparent 2px 24px);
  animation: heroRain 0.95s linear infinite;
}
@keyframes heroRain { from { background-position: 0 0; } to { background-position: 24px 76px; } }

/* グリッド：薄いテックグリッド＋移動グリント */
html[data-herofx="grid"] .hero-bolts::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(200, 162, 74, 0.16) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(200, 162, 74, 0.16) 0 1px, transparent 1px 44px);
}
html[data-herofx="grid"] .hero-bolts::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(200, 162, 74, 0.4) 0%, transparent 22%);
  animation: heroGridGlint 7s ease-in-out infinite;
}
@keyframes heroGridGlint {
  0% { transform: translate(-30%, -20%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translate(40%, 30%); opacity: 0; }
}

/* パルス：中心から金のリングが広がる */
html[data-herofx="pulse"] .hero-bolts::before,
html[data-herofx="pulse"] .hero-bolts::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid rgba(200, 162, 74, 0.62);
  border-radius: 50%;
  opacity: 0;
  animation: heroPulse 4.5s var(--easing-1) infinite;
}
html[data-herofx="pulse"] .hero-bolts::after { animation-delay: 2.25s; }
@keyframes heroPulse {
  0% { transform: scale(0.2); opacity: 0.7; }
  100% { transform: scale(16); opacity: 0; }
}

/* 火花：金の点がパチッと散る */
html[data-herofx="spark"] .hero-bolts::before {
  content: "";
  position: absolute;
  top: 28%;
  left: 18%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f0d98a;
  box-shadow:
    130px 40px 0 #f0d98a, 300px 120px 0 #e2c980, 450px 30px 0 #f0d98a,
    560px 160px 0 #e2c980, 220px 210px 0 #f0d98a, 380px 250px 0 #e2c980,
    660px 90px 0 #f0d98a, 740px 220px 0 #e2c980;
  opacity: 0;
  animation: heroSpark 3.2s steps(1) infinite;
}
@keyframes heroSpark {
  0%, 100% { opacity: 0; }
  6% { opacity: 1; }
  10% { opacity: 0.2; }
  16% { opacity: 0.9; }
  22% { opacity: 0; }
}

/* v21: 電撃SPARK（zap）= 短い電気アーク＋火花がバチバチ明滅する電気工事らしさMAX演出 */
html[data-herofx="zap"] .hero-bolt { display: none; }
html[data-herofx="zap"] .hero-bolts::before,
html[data-herofx="zap"] .hero-bolts::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
}
/* 左上の枝分かれアーク（紫＋金） */
html[data-herofx="zap"] .hero-bolts::before {
  top: 12%;
  left: 8%;
  width: 220px;
  height: 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23caa8ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' style='filter:drop-shadow(0 0 4px %23a07cff)'><path d='M14 8 L36 30 L24 42 L48 64'/><path d='M36 30 L52 18'/><path d='M48 64 L70 78 L60 92'/></svg>");
  opacity: 0;
  animation: heroZap 3s steps(1) infinite;
}
/* 右下のアーク（金） */
html[data-herofx="zap"] .hero-bolts::after {
  bottom: 14%;
  right: 10%;
  width: 200px;
  height: 200px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23f0d98a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' style='filter:drop-shadow(0 0 4px %23e2c980)'><path d='M86 10 L62 28 L74 40 L52 56'/><path d='M62 28 L46 16'/><path d='M52 56 L30 70 L42 86'/></svg>");
  opacity: 0;
  animation: heroZap 3s steps(1) 0.65s infinite;
}
@keyframes heroZap {
  0%, 100% { opacity: 0; }
  3% { opacity: 1; }
  7% { opacity: 0.15; }
  11% { opacity: 0.9; }
  15% { opacity: 0.25; }
  19% { opacity: 0.8; }
  25% { opacity: 0; }
  46% { opacity: 0; }
  50% { opacity: 0.85; }
  54% { opacity: 0.2; }
  58% { opacity: 0.7; }
  64% { opacity: 0; }
}

/* ============================================================
   v14: ヒーロー装飾の強さ（data-herofxlevel）
   コンテナ不透明度で全装飾を一括スケール（soft=上品 / strong=目立つ）
   ============================================================ */
html[data-herofxlevel="soft"] .hero-bolts { opacity: 0.6; }
html[data-herofxlevel="strong"] .hero-bolts { opacity: 1; }

/* ============================================================
   v15: 全イントロにロゴ＋社名を表示（.intro-titles::before に金マスクロゴ）
   ============================================================ */
.intro-titles::before {
  content: "";
  display: block;
  position: absolute;             /* 文字フローから切り離し＝ロゴの大きさが文字位置に影響しない */
  left: 0;
  right: 0;
  bottom: calc(100% + 0.3em);     /* 文字ブロック上端(top:47%)のすぐ上に下端を固定＝ロゴは上へ伸びる */
  width: calc(clamp(78px, 13vw, 116px) * var(--intro-logo-scale, 1));
  aspect-ratio: 1117 / 1297;
  margin: 0 auto;
  background: linear-gradient(180deg, #f0d98a 0%, #d8b25c 55%, #b58a32 100%);
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
  filter: drop-shadow(0 0 12px rgba(200, 162, 74, 0.5));
  opacity: 0;
  animation: brandMarkIn 0.8s var(--easing-1) 1.3s forwards;
}
@keyframes brandMarkIn {
  0% { opacity: 0; transform: translateY(10px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* 社名の柔らかフェード（cent/elec で流用） */
@keyframes brandTextFade {
  0% { opacity: 0; transform: translateY(0.4em); filter: blur(5px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* 各イントロでロゴ出現を社名のタイミングに合わせる */
.intro--fade .intro-titles::before { animation-delay: 0.35s; }
.intro--circuit .intro-titles::before { animation-delay: 1.25s; }
.intro--curtain .intro-titles::before { animation-delay: 0.1s; }
.intro--split .intro-titles::before { animation-delay: 0.1s; }
.intro--wipe .intro-titles::before { animation-delay: 0.2s; }
.intro--zoom .intro-titles::before { animation-delay: 0.1s; }

/* ロゴ描き intro は大ロゴがあるので ::before ロゴは出さず、英字も復活させ両名表示 */
.intro--logo .intro-titles::before { display: none; }
.intro--logo .intro-title-en {
  display: block;
  animation-delay: 2.05s;
  /* font-size は base 継承＝他イントロと同じ */
}

/* cent → フラッシュ演出：白い閃光がパッと走り、その瞬間にロゴ＋社名が出現→カバーがフェードアウト */
.intro--cent { animation: introFade 0.7s var(--easing-1) 1.9s forwards; }
.intro--cent::after {
  content: "";
  position: absolute;
  inset: -20px;
  background: #fff;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 6;
  animation: flashStrike 0.5s var(--easing-1) 0.15s, flashStrike 0.36s var(--easing-1) 0.7s;
}
.intro--cent .intro-titles::before { animation: flashPop 0.55s var(--easing-1) 0.2s forwards; }
.intro--cent .intro-title-en { animation: flashPop 0.5s var(--easing-1) 0.34s forwards; }
.intro--cent .intro-title-jp { animation: flashPop 0.5s var(--easing-1) 0.46s forwards; }
/* 閃光と同期して、まぶしさ→等倍へ収束 */
@keyframes flashPop {
  0% { opacity: 0; transform: scale(1.16); filter: brightness(2.6); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

/* ============================================================
   v15-B: 電気系イントロ 2種（zap=電撃ビリビリ / elec=電気・上品）
   ============================================================ */
html[data-intro="zap"] .intro--zap,
html[data-intro="elec"] .intro--elec { display: flex; }

/* --- 電撃ビリビリ（zap）：バチバチ明滅＋電気アーク＋多段フラッシュ --- */
/* v32+v33+v34: 電撃イントロ（リアル白雷＋3幕構成）。フェードは 2.9s開始→4.0s完了 */
.intro--zap {
  background: radial-gradient(ellipse at center, #16213a 0%, #0a1322 60%, #050a14 100%);
  align-items: center;
  justify-content: center;
  animation: introFade 1.3s var(--easing-1) 4.8s forwards;
}
/* v33: 3幕構成 — 電撃中の小フラ3回＋電撃停止直後の【大フラッシュ】1回（ドンッ） */
.intro--zap::after {
  content: "";
  position: absolute;
  inset: -20px;
  background: #fff;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 6;
  animation:
    flashStrike 0.32s var(--easing-1) 0.10s,
    flashStrike 0.28s var(--easing-1) 0.50s,
    flashStrike 0.30s var(--easing-1) 0.95s,
    flashStrike 0.70s var(--easing-1) 2.00s;
}
/* 稲妻SVGを画面いっぱいに広げる */
.intro--zap .zap-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
/* 全アーク：白核＋青グロー二重で「リアル雷」表現 */
.intro--zap .zap-arc {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 4px rgba(220, 235, 255, 0.95))
    drop-shadow(0 0 10px rgba(120, 170, 255, 0.75))
    drop-shadow(0 0 20px rgba(80, 140, 255, 0.4));
  opacity: 0;
  animation: zapFlicker 1.05s steps(1) 0.05s forwards;
}
/* 各アークの発火タイミング（1.05s内に集中＝1.20s 以降は暗転） */
.intro--zap .zap-arc:nth-of-type(1) { stroke-width: 4; animation-delay: 0.05s; }
.intro--zap .zap-arc:nth-of-type(2) { animation-delay: 0.15s; }
.intro--zap .zap-arc:nth-of-type(3) { stroke-width: 4; animation-delay: 0.25s; }
.intro--zap .zap-arc:nth-of-type(4) { animation-delay: 0.35s; }
.intro--zap .zap-arc:nth-of-type(5) { animation-delay: 0.45s; }
.intro--zap .zap-arc:nth-of-type(6) { animation-delay: 0.55s; }
.intro--zap .zap-arc:nth-of-type(7) { stroke-width: 4; animation-delay: 0.70s; }
.intro--zap .zap-arc:nth-of-type(8) { animation-delay: 0.85s; }
/* 1.4s で完全に消えて opacity:0 で固定（後はロゴ／文字の出番） */
@keyframes zapFlicker {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  7%   { opacity: 0.2; }
  12%  { opacity: 0.95; }
  18%  { opacity: 0.3; }
  23%  { opacity: 0.85; }
  30%  { opacity: 0; }
  45%  { opacity: 0.9; }
  50%  { opacity: 0.15; }
  55%  { opacity: 0.8; }
  62%  { opacity: 0; }
  80%  { opacity: 0.6; }
  85%  { opacity: 0; }
  100% { opacity: 0; }
}
/* v34: 第3幕 — 大フラッシュ(1.35s)後の【2.5s】にロゴ＋英字＋漢字が一斉ドンッ！と出現 */
.intro--zap .intro-titles { z-index: 2; }
.intro--zap .intro-titles::before,
.intro--zap .intro-title-en,
.intro--zap .intro-title-jp {
  animation: zapTitleIn 1.1s var(--easing-1) 2.5s both;
}
/* 白閃光から大きく/ぼやけて飛び込み→金グローに収束する派手登場 */
@keyframes zapTitleIn {
  0%   { opacity: 0; transform: scale(1.35); filter: blur(16px) drop-shadow(0 0 45px #fff) drop-shadow(0 0 90px rgba(200, 225, 255, 0.9)); }
  25%  { opacity: 1; transform: scale(1.02); filter: blur(2px) drop-shadow(0 0 36px rgba(220, 235, 255, 0.95)); }
  50%  { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 0 28px rgba(180, 210, 255, 0.8)); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 0 20px rgba(200, 162, 74, 0.85)); }
}

/* --- 電気・上品（elec）：blur-fadeで上品に登場＋ロゴに軽い通電フリッカー＋小スパーク --- */
.intro--elec {
  background: radial-gradient(ellipse at center, #16213a 0%, #0a1322 60%, #050a14 100%);
  align-items: center;
  justify-content: center;
  animation: introFade 0.8s var(--easing-1) 2.0s forwards;
}
.intro--elec .intro-titles::before { animation: elecLogoIn 1.1s var(--easing-2) 0.3s forwards; }
@keyframes elecLogoIn {
  0% { opacity: 0; filter: blur(8px) drop-shadow(0 0 12px rgba(200, 162, 74, 0.5)); }
  55% { opacity: 1; filter: blur(0) drop-shadow(0 0 12px rgba(200, 162, 74, 0.5)); }
  62% { opacity: 0.5; }
  66% { opacity: 1; }
  72% { opacity: 0.7; }
  76% { opacity: 1; }
  100% { opacity: 1; filter: blur(0) drop-shadow(0 0 16px rgba(200, 162, 74, 0.7)); }
}
.intro--elec .intro-title-en { animation: brandTextFade 0.9s var(--easing-2) 0.6s forwards; }
.intro--elec .intro-title-jp { animation: brandTextFade 0.9s var(--easing-2) 0.75s forwards; }
.intro--elec::after {
  content: "";
  position: absolute;
  top: 42%;
  left: 54%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 34px -22px 0 #f0d98a, -44px 12px 0 #f0d98a;
  opacity: 0;
  pointer-events: none;
  animation: elecSpark 0.5s steps(1) 0.95s, elecSpark 0.4s steps(1) 1.45s;
}
@keyframes elecSpark {
  0%, 100% { opacity: 0; }
  20% { opacity: 1; }
  40% { opacity: 0.2; }
  60% { opacity: 0.85; }
  80% { opacity: 0; }
}

/* ============================================================
   v16: 出だしブランド（ロゴ＋社名）の 大きさ／色／字体 カスタマイズ
   対象はイントロのみ（本体・ヒーローには影響しない）
   ============================================================ */
/* 大きさ：--intro-scale で ロゴ::before幅 と 文字font-size を一括拡縮 */
html[data-introsize="xs"] { --intro-scale: 0.7; }
html[data-introsize="sm"] { --intro-scale: 0.85; }
html[data-introsize="md"] { --intro-scale: 1; }
html[data-introsize="lg"] { --intro-scale: 1.2; }
html[data-introsize="xl"] { --intro-scale: 1.45; }

/* 色：ロゴ(::before / 大ロゴ.logo-real)＋文字グラデを上書き */
html[data-introcolor="white"] .intro-titles::before,
html[data-introcolor="white"] .intro--logo .logo-real,
html[data-introcolor="white"] .intro-title-en,
html[data-introcolor="white"] .intro-title-jp { background-image: linear-gradient(180deg, #ffffff 0%, #e2e2e2 100%); }
html[data-introcolor="silver"] .intro-titles::before,
html[data-introcolor="silver"] .intro--logo .logo-real,
html[data-introcolor="silver"] .intro-title-en,
html[data-introcolor="silver"] .intro-title-jp { background-image: linear-gradient(180deg, #eef0f3 0%, #a8aeb6 100%); }
html[data-introcolor="blue"] .intro-titles::before,
html[data-introcolor="blue"] .intro--logo .logo-real,
html[data-introcolor="blue"] .intro-title-en,
html[data-introcolor="blue"] .intro-title-jp { background-image: linear-gradient(180deg, #8fc6f2 0%, #2b6db0 100%); }
html[data-introcolor="green"] .intro-titles::before,
html[data-introcolor="green"] .intro--logo .logo-real,
html[data-introcolor="green"] .intro-title-en,
html[data-introcolor="green"] .intro-title-jp { background-image: linear-gradient(180deg, #8fd9b0 0%, #2e9d68 100%); }
/* v21: 黄（パキッとした山吹色） */
html[data-introcolor="yellow"] .intro-titles::before,
html[data-introcolor="yellow"] .intro--logo .logo-real,
html[data-introcolor="yellow"] .intro-title-en,
html[data-introcolor="yellow"] .intro-title-jp { background-image: linear-gradient(180deg, #fff14a 0%, #d4a814 100%); }

/* 字体：イントロ社名の font-family を上書き（フォントは index.html で追加読込） */
html[data-introfont="mincho"] .intro-title-en { font-family: "Noto Serif JP", Georgia, serif; }
html[data-introfont="mincho"] .intro-title-jp { font-family: "Noto Serif JP", serif; }
html[data-introfont="maru"] .intro-title-en,
html[data-introfont="maru"] .intro-title-jp { font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif; }
html[data-introfont="heavy"] .intro-title-en { font-weight: 800; }
html[data-introfont="heavy"] .intro-title-jp { font-family: "Noto Sans JP", sans-serif; font-weight: 900; }
html[data-introfont="brush"] .intro-title-en { font-family: "Yuji Syuku", "Noto Serif JP", serif; }
html[data-introfont="brush"] .intro-title-jp { font-family: "Yuji Syuku", serif; font-weight: 400; }
/* v17: 字体を10種に拡張（細明朝／ドット／極太／ポップ／手書き） */
html[data-introfont="shippori"] .intro-title-en,
html[data-introfont="shippori"] .intro-title-jp { font-family: "Shippori Mincho", "Noto Serif JP", serif; font-weight: 700; }
html[data-introfont="dot"] .intro-title-en,
html[data-introfont="dot"] .intro-title-jp { font-family: "DotGothic16", "Noto Sans JP", sans-serif; font-weight: 400; letter-spacing: 0.1em; }
html[data-introfont="reggae"] .intro-title-en,
html[data-introfont="reggae"] .intro-title-jp { font-family: "Reggae One", "Noto Sans JP", sans-serif; font-weight: 400; }
html[data-introfont="rock"] .intro-title-en,
html[data-introfont="rock"] .intro-title-jp { font-family: "RocknRoll One", "Noto Sans JP", sans-serif; font-weight: 400; }
html[data-introfont="yomogi"] .intro-title-en,
html[data-introfont="yomogi"] .intro-title-jp { font-family: "Yomogi", "Noto Sans JP", cursive; font-weight: 400; }

/* v17: ロゴだけの大きさ（--intro-logo-scale を全体introsizeと掛け合わせ。none=非表示） */
html[data-intrologosize="xs"] { --intro-logo-scale: 0.6; }
html[data-intrologosize="sm"] { --intro-logo-scale: 0.8; }
html[data-intrologosize="md"] { --intro-logo-scale: 1; }
html[data-intrologosize="lg"] { --intro-logo-scale: 1.35; }
html[data-intrologosize="xl"] { --intro-logo-scale: 1.8; }
html[data-intrologosize="none"] .intro-titles::before { display: none; }

/* v18: ローマ字の位置（上/下）＆ ローマ字の表示有無（社名2行の並びを切替） */
.intro-titles::before { order: -1; }                            /* ロゴは常に最上段 */
html[data-introorder="bottom"] .intro-title-en { order: 1; }    /* ローマ字を漢字の下へ（漢字が上＝日本企業らしい並び） */
html[data-introroman="off"] .intro-title-en { display: none; }  /* ローマ字を非表示（漢字のみ） */

/* v48: v47（日本語改行最適化）は逆に見栄えが悪化したため revert。base設定（body の line-break:strict + word-break:normal + overflow-wrap:anywhere ／ h1-h6 の word-break:keep-all）に戻す */

/* ============================================================
   v57: 電話番号「準備中」プレースホルダーのサイズ縮小
   実番号用の巨大サイズ（huge=最大106px / tel-big=最大90px）は
   「準備中」テキストには過大なので、控えめな和文サイズに。
   番号確定時は tel-pending クラスと <a> ラッパを戻すだけで復旧。
   ============================================================ */
/* CONTACT大型表示（TOP・contact.html） */
.contact-tel-huge.tel-pending {
  font-family: var(--font-jp);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.14em;
}
/* CTAセクションの大型電話（works/company/message/services/access） */
.contact-cta .tel-big.tel-pending {
  font-family: var(--font-jp);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.14em;
}
/* ヘッダー右上の電話CTA（全ページ） */
.nav-cta-pair .cta-tel .num.tel-pending {
  font-family: var(--font-jp);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
}
/* スマホ時のCONTACT大型表示（v22 mobileルールを上書き） */
@media (max-width: 768px) {
  .contact-tel-huge.tel-pending { font-size: 2.2rem; }
}

/* ============================================================
   v58: 施工実績の現場名マスキング切替（コンプライアンス対応）
   実企業名はDOMから完全削除し、「某〇〇」の2版のみを保持。
   data-workmask="industry"（既定＝業種を残す）/ "simple"（シンプル）で表示切替。
   本番確定時は選ばれた版だけ残し、もう一方の span とパネル項目を撤去。
   ============================================================ */
.wm-simple { display: none; }                                  /* 既定は業種を残す版を表示 */
html[data-workmask="simple"] .wm-industry { display: none; }
html[data-workmask="simple"] .wm-simple { display: inline; }

/* ============================================================
   v59: PC/スマホ両対応の文字列ずれ対策
   - .ph（文節span）: inline-block化により折返しは文節境界のみで発生
   - .br-pc: PC専用の改行。スマホでは非表示にして文節の自然折返しに任せる
   - 署名の氏名: nowrap＋inline-blockで「山田 純」を絶対に分割しない
   ============================================================ */
.message-body .signature .name {
  display: inline-block;
  white-space: nowrap;
}
.ph { display: inline-block; }
@media (max-width: 768px) {
  .br-pc { display: none; }
}

/* ============================================================
   v61: ①出だし社名「株式会社山雅電設」表記（data-introname）
        ②施工実績サムネイルのクロスフェード（写真2枚のカード用）
   ============================================================ */
/* ①「株式会社」行（intro-title-jpクラス併用で色グラデ・字体・アニメを継承）
   既定(full)＝株式会社(小)＋山雅電設(大)の漢字2段・ローマ字非表示。std＝従来表記 */
.intro-title-corp { display: none; }
html[data-introname="full"] .intro-title-corp {
  display: block;
  font-size: calc(clamp(3.2rem, 13vw, 9rem) * var(--intro-scale, 1) * var(--corp-scale, 0.52));
  letter-spacing: 0.06em;                  /* v65: スクショに寄せて字間を詰める（旧0.32em→0.06em） */
  text-indent: 0.06em;
  margin-bottom: 0.12em;
  white-space: nowrap;                     /* 「株式会社」は折り返さない（狭幅でも1行保証） */
}
html[data-introname="full"] .intro-title-en { display: none; }

/* v62: 「株式会社」の大きさ（jp比率）と位置（山雅電設の幅を基準に左/中央/右） */
html[data-corpsize="xs"] { --corp-scale: 0.32; }
html[data-corpsize="sm"] { --corp-scale: 0.42; }
html[data-corpsize="md"] { --corp-scale: 0.52; }
html[data-corpsize="lg"] { --corp-scale: 0.62; }
html[data-corpsize="xl"] { --corp-scale: 0.75; }
/* ============================================================
   v66: 会社写真（看板・倉庫内観）の掲載
   - .company-photo: 会社案内・アクセスで使う大判写真＋キャプション
   - .env-gallery: 採用「働く環境」の職場ギャラリー3枚グリッド
   写真は4:3（原寸比率のまま全体表示・トリミングなし）
   ============================================================ */
.company-photo { max-width: 88rem; margin: 0 auto 4em; }
.company-photo-img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  background-color: var(--color-bg-alt);
}
.company-photo figcaption {
  margin-top: 1em;
  text-align: center;
  font-size: 1.25rem;
  color: var(--color-text-soft, #4a566b);
  letter-spacing: 0.06em;
}
.env-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* v67: 2枚構成に変更（中央寄せでバランス配置） */
  gap: 2em;
  margin-top: 3em;
  max-width: 96rem;
  margin-left: auto;
  margin-right: auto;
}
.env-gallery figure { margin: 0; }
.env-photo {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  background-color: var(--color-bg-alt);
}
.env-gallery figcaption {
  margin-top: 0.8em;
  font-size: 1.2rem;
  color: var(--color-text-soft, #4a566b);
  text-align: center;
  letter-spacing: 0.04em;
}
@media (max-width: 768px) {
  .env-gallery { grid-template-columns: 1fr; }
}
/* v119: 現場作業の様子（縦長写真3枚。PC・タブレット・スマホとも横3列） */
.env-gallery-label {
  margin: 4.4em 0 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--color-text);
}
.env-gallery--site {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6em;
  max-width: 96rem;
  margin-top: 1.6em;
}
.env-gallery--site .env-photo { aspect-ratio: 3 / 4; }
@media (max-width: 900px) {
  .env-gallery--site { grid-template-columns: repeat(3, 1fr); gap: 0.8em; }
  .env-gallery--site .env-photo { border-radius: 12px; }
  .env-gallery--site figcaption { font-size: 1.1rem; letter-spacing: 0; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }  /* <wbr> の位置で折り返し、1文字だけの行を作らない */
}

html[data-corpalign="left"] .intro-title-corp { text-align: left; text-indent: 0; margin-left: 0; }
/* v64: 山雅電設の左端よりさらに左へはみ出す段階（負マージン。ラッパーはoverflow:visibleなので見切れない） */
html[data-corpalign="left2"] .intro-title-corp { text-align: left; text-indent: 0; margin-left: -1.8em; }
html[data-corpalign="left3"] .intro-title-corp { text-align: left; text-indent: 0; margin-left: -3.6em; }
html[data-corpalign="left4"] .intro-title-corp { text-align: left; text-indent: 0; margin-left: -5.6em; }
html[data-corpalign="center"] .intro-title-corp { text-align: center; margin-left: 0; }
html[data-corpalign="right"] .intro-title-corp { text-align: right; text-indent: 0; margin-left: 0; }

/* ============================================================
   v67: ①実績写真の見せ方（data-workphoto）
        fade=クロスフェード切替（既定・v61の挙動）／split=2枚を左右に並べて静止表示
        ②TOPヒーロー背景の会社写真シミュレーション（data-herobg）
        night=現行夜景（上書きなし）。TOP限定（html.page--top）でサブページには影響しない
   ============================================================ */
/* ①切替なし表示：2枚を半分ずつ並べる（中央に2pxの区切り）。1枚写真のカードは影響なし */
html[data-workphoto="split"] .work-thumb .wt-img { inset: 0 calc(50% + 1px) 0 0; }
html[data-workphoto="split"] .work-thumb .wt-alt { inset: 0 0 0 calc(50% + 1px); opacity: 1; animation: none; }

/* ②v68: TOPヒーロー自動スライドショー（hikaru-dk風・20秒ループ）
   夜景（1秒フェード→4秒表示）→会社外観→倉庫内観1→倉庫内観3 の順に自動切替。
   会社写真スライド（hs-2〜4）は昼光写真が暗く見えないよう明るめのオーバーレイ。
   data-herobg="night"（固定）でスライド層ごと非表示＝従来の夜景のみ */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  display: none;
}
/* v69: 既定4枚（夜景→会社外観→倉庫1→倉庫3）はJSなしでも動くCSSフォールバック。
   スライド構成は⚙「スライド写真（複数選択）」で変更＝design-panel.js がインラインで上書き */
.hero-slide.hs-night, .hero-slide.hs-sign, .hero-slide.hs-wh1, .hero-slide.hs-wh3 {
  display: block;
  animation: heroSlideFade 20s ease-in-out infinite;
}
.hero-slide.hs-night { animation-delay: 0s; }
.hero-slide.hs-sign  { animation-delay: 5s; }
.hero-slide.hs-wh1   { animation-delay: 10s; }
.hero-slide.hs-wh3   { animation-delay: 15s; }
/* 背景定義（夜景は現行の暗めグラデ、会社/実績写真は明るめ 0.08→0.38） */
.hero-slide.hs-night {
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.35) 0%, rgba(12, 22, 40, 0.70) 100%),
    url("../img/hero/la-night.jpg");
}
.hero-slide.hs-sign {
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/company/c-signboard.jpg");
  background-position: 30% 38%;   /* 看板（左上寄り構図）が見切れない位置 */
}
.hero-slide.hs-wh1 {
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/company/c-warehouse-1.jpg");
}
.hero-slide.hs-wh2 {
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/company/c-warehouse-2.jpg");
}
.hero-slide.hs-wh3 {
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/company/c-warehouse-3.jpg");
}
.hero-slide.hs-fnew {
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/works/w-factory-new-1.jpg");
}
.hero-slide.hs-fire {
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/works/w-station-fire-1.jpg");
  background-position: center 42%;
}
.hero-slide.hs-led {
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/works/w-market-led.jpg");
  background-position: center 42%;
}
.hero-slide.hs-cubi {
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/works/w-cubicle-renewal.jpg");
  background-position: center 45%;
}
.hero-slide.hs-civil {
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/works/w-civil.jpg?v=135");
  background-position: center 40%;
}
.hero-slide.hs-school {
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/works/w-school-led.jpg?v=135");
  background-position: center 30%;
}
/* v121: 9/27受領写真8枚（⚙「スライド写真」の選択肢。既定の構成には含めない） */
.hero-slide.hs-bend {  /* 配管の曲げ加工（IMG_6232） */
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/recruit/r-bending.jpg?v=135");
  background-position: center 75%;
}
.hero-slide.hs-cut {  /* バンドソー切断（IMG_6235） */
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/recruit/r-cutting.jpg?v=135");
  background-position: center 65%;
}
.hero-slide.hs-team1 {  /* 代表と社員（IMG_6233） */
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/recruit/r-team-1.jpg?v=135");
  background-position: center 48%;
}
.hero-slide.hs-team2 {  /* 段取り確認（IMG_6234） */
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/recruit/r-team-2.jpg?v=135");
  background-position: center 80%;
}
.hero-slide.hs-cond1 {  /* 学校 電源配管1（IMG_6240） */
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/works/w-school-conduit-1.jpg?v=135");
  background-position: center 40%;
}
.hero-slide.hs-cond2 {  /* 学校 電源配管2（IMG_6241） */
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/works/w-school-conduit-2.jpg?v=135");
  background-position: center;
}
.hero-slide.hs-stnew {  /* 駅新築工事（IMG_6242） */
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/works/w-station-new.jpg?v=135");
  background-position: center 50%;
}
.hero-slide.hs-ev {  /* 急速充電（IMG_6243） */
  background-image:
    linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.38) 100%),
    url("../img/works/w-ev-charger.jpg?v=135");
  background-position: center 65%;
}

/* ============================================================
   v70: スライドの見せ方「額装（シャープ）」（data-slidestyle="frame"・既定）
   素材解像度（869〜1477px）を全画面に引き伸ばすとボケるため、
   写真は contain（原寸以下＝シャープ）で右寄せ、余白は同写真の強ぼかしで敷く。
   夜景（hs-night）は高解像度素材のため常に全画面cover。
   背景定義は background: inherit で各スライドから流用（重複定義なし）
   ============================================================ */
html[data-slidestyle="frame"] .hero-slide:not(.hs-night) { background-size: 0 0; }
html[data-slidestyle="frame"] .hero-slide:not(.hs-night)::before {
  content: "";
  position: absolute;
  inset: -48px;
  background: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.92);
}
html[data-slidestyle="frame"] .hero-slide:not(.hs-night)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  html[data-slidestyle="frame"] .hero-slide:not(.hs-night)::after { background-position: center 40%; }
}

/* ============================================================
   v71: スライドの見せ方「貼り合わせ」（data-slidestyle="collage"）
   選択写真を3列（スマホ2列）に貼り合わせ表示。各列幅に収まる＝拡大なしでシャープ。
   ぼかしなし・紺の細目地でコラージュ感。列の写真はJS（design-panel.js）が
   5秒毎に0.3秒の時間差で順送りクロスフェードさせる
   ============================================================ */
/* v73: 貼り合わせモード＝「夜景・全画面1枚」と「その他写真・全画面コラージュ」の
   2場面が5秒ごとに交互へクロスフェード。
   夜景場面 … コラージュ層が opacity 0 → 下の hero 基底背景（夜景・全面cover）が見える
   貼り合わせ場面 … コラージュ層が opacity 1 → 選択写真（夜景以外）が全面2×2で表示
   opacity は design-panel.js が制御。各セル約半画面幅＝拡大ほぼなしでシャープ */
.hero-collage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  background: #0c1628;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
html[data-slidestyle="collage"] .hero-slides { display: none; }
html[data-slidestyle="collage"] .hero-collage { display: grid; }
html.page--top[data-herobg="night"] .hero-collage { display: none !important; }
/* v74: スマホは画面が縦長なため2×2だとセルが極端な縦長になり写真の左右が大きく切れる。
   1列×3行の横長セル（約375×273）に変更し、写真の収まりを改善（4枚目は非表示） */
@media (max-width: 768px) {
  .hero-collage {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }
  .hero-collage .hc-cell:nth-child(4) { display: none; }
}
.hc-cell { position: relative; overflow: hidden; }
.hc-cell .hc-a,
.hc-cell .hc-b {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hc-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 22, 40, 0.08) 0%, rgba(12, 22, 40, 0.35) 100%);
}
/* v75: 縦長写真（学校LED）はセル内に全体を収め、余白は同写真の強ぼかしで敷く（額装モードと同手法）。
   本体の背景は消し、::before にぼかし背景（cover）、::after に実写真（contain）を重ねる */
.hc-cell .hc-a.is-contain,
.hc-cell .hc-b.is-contain { background-size: 0 0; }
.hc-cell .hc-a.is-contain::before,
.hc-cell .hc-b.is-contain::before {
  content: "";
  position: absolute;
  inset: -48px;
  background: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.92);
}
.hc-cell .hc-a.is-contain::after,
.hc-cell .hc-b.is-contain::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@keyframes heroSlideFade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  25% { opacity: 1; }
  32% { opacity: 0; }
  100% { opacity: 0; }
}
html.page--top[data-herobg="night"] .hero-slides { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-slides { display: none; }
}

/* ②クロスフェード：.wt-img 2枚を約8秒周期で自動切替（reduced-motionでは1枚目固定） */
.work-thumb { position: relative; }
.work-thumb .wt-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.work-thumb .wt-alt {
  opacity: 0;
  animation: wtFade 8s ease-in-out infinite;
}
@keyframes wtFade {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .work-thumb .wt-alt { animation: none; }
}
/* v116: 画面外にある間はヒーロー装飾・実績カードの切替アニメを一時停止（main.js が .is-offscreen を付与）。
   スマホで下までスクロールしても、見えていないヒーローの粒子や実績写真のフェードが GPU を使い続けないようにする */
.hero.is-offscreen .hero-bolt,
.hero.is-offscreen .hero-bolts::before,
.hero.is-offscreen .hero-bolts::after,
.work-thumb.is-offscreen .wt-alt,
.recruit-banner-image.is-offscreen .rb-alt { animation-play-state: paused; }


/* ============================================================
   PRINT: A4縦・紙出力用（ブラウザの印刷／Chrome headless --print-to-pdf）
   - A4幅(≒794px)では max-width:1100px/900px のスマホ用ブレークポイントが
     発火する前提で上書きする
   - !important はインライン style や html[data-*] 系の高特異性を
     確実に上回るために付与
   ============================================================ */
@page { size: A4 portrait; margin: 12mm 10mm; }

@media print {
  /* ---- 0. 背景・色を必ず印刷／アニメ全停止 ---- */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    animation: none !important;
    transition: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html, body { overflow: visible !important; }
  html[data-bg] { --color-bg: #ffffff; --color-bg-alt: #f5f5f5; }   /* 薄青地を白紙に */
  html, html[data-spacing] { --section-margin: 3em; }                /* セクション余白を縮めて枚数を抑える */
  body { background: #fff !important; }

  /* ---- 1. フェードイン待ち要素を強制表示（IntersectionObserver は印刷で発火しない） ---- */
  .fade-in,
  .js-fade-ready .fade-in:not(.is-visible) { opacity: 1 !important; transform: none !important; filter: none !important; }
  .fade-in .section-num,
  .fade-in.section-head .section-num { opacity: 0.85 !important; transform: none !important; }
  .fade-in-stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  /* ヒーロー文言は基底が opacity:0 のため animation:none だけだと消える */
  .hero-eyebrow, .hero-title, .hero-sub, .hero-ctas { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero { clip-path: none !important; opacity: 1 !important; }

  /* ---- 2. 固定・粘着・オーバーレイ・装飾は非表示 ---- */
  .intro-overlay, .design-fab, .design-panel, .device-preview-overlay,
  .nav-toggle, .global-nav, .nav-more-btn, .nav-more-panel,
  .scroll-indicator, .hero-bolts, .hero-slides, .hero-collage, .blog-filter { display: none !important; }

  /* 固定ヘッダーを通常フローに。TOPの透明ヘッダー（白文字・白マスクロゴ）は紙で消えるので通常色へ */
  .site-header { position: static !important; height: auto !important; background: #fff !important; color: var(--color-text) !important; border-bottom: 1px solid var(--color-border); }
  .header-inner { padding: 1em 0 !important; height: auto !important; }
  .page--top .site-header .brand, .page--top .site-header .brand span,
  .page--top .site-header .nav-cta-pair .cta-tel, .page--top .site-header .nav-cta-pair .cta-tel .num,
  .page--top .site-header .nav-cta-pair .cta-tel .hours { color: var(--color-text) !important; }
  html.page--top .site-header .brand-logo,
  .page--top .site-header:not(.is-scrolled) .brand-logo { -webkit-mask: none !important; mask: none !important; background: none !important; filter: none !important; }
  .nav-cta-pair { display: none !important; }          /* 電話・Contact は紙では不要（電話はフッターに記載） */

  .service-sticky-image { position: static !important; top: auto !important; height: 20rem !important; }
  .service-sticky-image::after { display: none !important; }
  .service-item { padding-block: 1.4em !important; }               /* 画面用の 4em は紙では間延びする */
  .service-item.is-active { padding-left: 0 !important; border-left: none !important; }

  /* ---- 3. vh 依存の高さを固定値へ（印刷の vh はページ高＝A4 1枚分になってしまう） ---- */
  .hero { min-height: 95mm !important; height: auto !important; padding-top: 0 !important; align-items: center !important; }
  .hero-sub-page { min-height: 30mm !important; }
  .hero-inner { padding: 3rem 0 !important; }
  .hero-catch-wrap { padding-right: 0 !important; justify-content: flex-start !important; }
  .recruit-banner-inner { min-height: 0 !important; }
  .recruit-banner-image { min-height: 24rem !important; }
  .access-map, .access-map iframe { min-height: 40rem !important; height: 40rem !important; }

  /* ---- 4. 装飾 ---- */
  /* グラデ文字（LIGHT UP.）は背景クリップ依存で透明になるため単色に */
  .hero-accent { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: var(--color-accent) !important; color: var(--color-accent) !important; }
  .work-thumb .wt-alt, .work-thumb.is-placeholder { animation: none !important; }
  .recruit-banner-image .rb-alt { display: none !important; }  /* v119: 採用バナーは1枚目（代表と社員）だけ印刷 */
  .work-thumb, .blog-thumb, .service-card-slim .thumb { transform: none !important; background-size: cover !important; }

  /* ---- 5. レイアウト（A4幅で発火するスマホ1列化を印刷向けに戻す） ---- */
  .container { padding: 0 !important; max-width: 100% !important; }
  /* Chrome の印刷は CSS Grid / inline-block の行をページ残りに置けないことがあるため、紙では flex-wrap の3列に切り替える */
  .services-grid, .works-grid, .blog-grid, .env-grid { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 1.6em 1.5% !important; }
  .service-card-slim, .work-card, .blog-card, .env-card {
    display: flex !important; flex-direction: column !important;
    flex: 0 0 31% !important; width: 31% !important; margin: 0 !important; box-sizing: border-box !important;
  }
  .service-card-slim .thumb, .blog-thumb { aspect-ratio: 16 / 9 !important; }
  .service-card-slim .body { padding: 1.4em 1.2em 1.6em !important; }
  .service-card-slim .body p, .blog-card p { font-size: 1.2rem !important; line-height: 1.7 !important; }
  .service-card-slim h3, .work-card h3, .blog-card h3 { font-size: 1.4rem !important; }
  .service-sticky-wrap { grid-template-columns: 1fr !important; gap: 2em !important; }
  .company-table dl { grid-template-columns: 16rem 1fr !important; }
  .company-table dt { border-bottom: 1px solid var(--color-gray-line) !important; padding-bottom: 2em !important; }
  .news-row { grid-template-columns: 9rem 8rem 1fr auto !important; gap: 1.5em !important; }
  .message-2col { grid-template-columns: 1fr 1.6fr !important; gap: 3em !important; }
  .message-photo { max-width: 100% !important; }
  .contact-block { grid-template-columns: 1fr 1fr !important; gap: 3em !important; }
  .access-grid { grid-template-columns: 36rem 1fr !important; }
  .access-info { padding: 3.2em 2.4em !important; }  /* v123: 所在地欄の値が細く割れないように */
  .access-routes { grid-template-columns: repeat(3, 1fr) !important; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr !important; gap: 2em !important; margin-bottom: 2em !important; }
  .footer-bottom { flex-direction: row !important; }
  .section-head { grid-template-columns: auto 1fr !important; gap: 2em !important; margin-bottom: 2.5em !important; }
  .section-num { font-size: 8rem !important; }
  .btn { width: auto !important; min-width: 20rem; box-shadow: none !important; }
  .contact-cta { padding: 4em 0 !important; }
  .site-footer { padding: 3em 0 2em !important; }
  .env-gallery { grid-template-columns: repeat(2, 1fr) !important; }
  /* v119: 現場作業の様子（縦長3枚）は紙でも横1段に収め、見出しだけ前ページに残らないようにする */
  .env-gallery--site { grid-template-columns: repeat(3, 1fr) !important; gap: 1em !important; max-width: 150mm !important; }
  .env-gallery-label { break-after: avoid; page-break-after: avoid; }
  .env-card { padding: 1.6em !important; }
  .br-pc { display: inline !important; }

  /* ---- 6. 改ページ制御（見出しの直後や、カード・表の途中で切らない） ---- */
  /* カード内の h3 まで対象にすると flex 行ごと次ページへ押し出されるため、h1/h2 とセクション見出しに限定 */
  h1, h2, .section-title, .job-title, .section-head { break-after: avoid; page-break-after: avoid; }
  /* 改ページ禁止は「カード・表の行・写真・末尾ブロック」に限定（2段組み等の大ブロックに付けると丸ごと次ページへ飛び空白が増える） */
  .section-head, .news-row, .service-item, .service-card-slim, .work-card, .blog-card,
  .env-card, .env-gallery figure, .qa-block, .schedule-list dt, .schedule-list dd,
  .job-table tr, .company-table dt, .company-table dd, .form-row, .access-map,
  .contact-cta, .site-footer, .hero,
  .work-thumb, .blog-thumb, .service-card-slim .thumb, .company-photo-img, .env-photo, .message-photo,
  .signature, .philosophy-box {
    break-inside: avoid; page-break-inside: avoid;
  }
  .job-table { page-break-inside: auto; }
  .section { margin-block: var(--section-margin) !important; }
  .section-alt, .section-dark { padding-block: var(--section-margin) !important; }
}


/* ============================================================
   v123: デプロイ前の確認で見つかった表示の不具合の修正
   ============================================================ */
/* 下層ページのヒーロー：スマホは .container と同じ 2em */
@media (max-width: 480px) {
  .hero-sub-page .hero-inner { padding: 6rem 2em 0; }
}

/* お問い合わせ欄：1列表示で中身（長い選択肢・ボタン）に押し広げられて画面からはみ出していた */
.form input:not([type="checkbox"]):not([type="radio"]),
.form select,
.form textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 900px) {
  .contact-block { grid-template-columns: minmax(0, 1fr); }
  .contact-block > * { min-width: 0; }
}
@media (max-width: 480px) {
  .contact-form-block .btn-lg { padding-inline: 1.4em; letter-spacing: 0.08em; }
}

/* 下層ページ下部の大きな電話番号が2行に割れないように */
.contact-cta .tel-big { white-space: nowrap; }

/* フォームの入力欄：下線が背景とほぼ同じ色で見えなかった → 下線を濃くし、うっすら白地を敷く（下線型のデザインは維持） */
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="date"],
.form select,
.form textarea {
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid #8e99aa;
  padding: 1em 0.9em;
}
.form input:focus,
.form select:focus,
.form textarea:focus { border-bottom-color: var(--color-accent); background: #fff; }

/* アクセスの「所在地・連絡先」：値の欄が狭く「隔週土/曜」「山雅電/設」のように割れていた */
.access-grid { grid-template-columns: 44rem 1fr; }
.access-info { padding: 5.6em 3.6em; }
.access-info dl { grid-template-columns: 7.5rem 1fr; }
@media (max-width: 1100px) {
  .access-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .access-info { padding: 3.6em 2em; }
  .access-info dl { grid-template-columns: 6.5em 1fr; gap: 1.2em 1em; }
}

/* 採用：募集要項の表（スマホは項目名を上・内容を下に積む）と一日のスケジュール（時刻の列を細く） */
@media (max-width: 600px) {
  .job-table, .job-table tbody, .job-table tr { display: block; }
  .job-table th,
  .job-table td { display: block; width: auto; padding: 1em 1.2em; }
  .job-table th { border-bottom: none; padding-bottom: 0.5em; }
  .job-table td { padding-top: 0.6em; }
}
@media (max-width: 480px) {
  .schedule-list { grid-template-columns: 6em 1fr; }
  .schedule-list dt,
  .schedule-list dd { padding: 1.4em 0.9em; }
  .schedule-list dt .dt-note { white-space: nowrap; letter-spacing: 0; font-size: 1rem; }  /* 「現場により」を1行に */
}


/* ============================================================
   v124: iPhone での確認で出た指摘の修正
   ============================================================ */
/* 採用バナーの写真：角丸のカードに見えて紺の背景から浮いていた → 角をなくして背景になじませる（⚙「画像の形」に関係なく） */
html[data-imgshape] .recruit-banner-image { border-radius: 0; clip-path: none; }
@media (max-width: 900px) {
  /* スマホ・タブレットは写真が文字の下に来るので、境目（上端）を紺でぼかす */
  .recruit-banner-image::before {
    background: linear-gradient(180deg, var(--color-bg-dark) 0%, rgba(12, 22, 40, 0.55) 14%, rgba(12, 22, 40, 0) 40%);
  }
}

/* 社員Q&Aの丸印「Q」「A」：英字フォント（Barlow Condensed）では小さい丸の中で「Q」が「0」に見えるため、和文フォントに戻す
   （v123 で下層ページにも英字フォントを読み込んだ副作用。v117 以前と同じ見た目） */
.qa-block .q::before,
.qa-block .a::before { font-family: var(--font-ja); }

/* スマホだけの改行（.br-pc の逆）。印刷は PC と同じ見た目にする */
.br-sp { display: none; }
@media (max-width: 768px) {
  .br-sp { display: inline; }
  .hero-sub--works { letter-spacing: 0.02em; }  /* 「…手がけた」までを幅360pxでも1行に */
}
@media (max-width: 480px) {
  .section-lead--works { letter-spacing: 0.02em; font-size: min(1.5rem, calc((100vw - 60px) / 20)); }  /* TOPの同じ文も「…手がけた」まで1行に */
}
@media print {
  .br-sp { display: none !important; }
}

/* スマホで1行に収める見出し・文（文字数に合わせて画面幅から大きさを決める） */
@media (max-width: 480px) {
  .contact-cta h2.fit-1line {   /* 同様の案件をお考えですか？（13文字） */
    font-size: min(2.6rem, calc((100vw - 64px) / 14));
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  .hero-sub.fit-1line {         /* 礼儀と挨拶を大切にする仲間を募集しています。（22文字） */
    font-size: min(calc(1.4rem * var(--hero-sub-scale, 1)), calc((100vw - 64px) / 22.5));
    letter-spacing: 0;
    white-space: nowrap;
    max-width: none;
  }
  .qa-block .q-text {           /* 社員Q&Aの質問：「なぜ山雅電設を選びましたか？」（14文字）が1行に収まる大きさ */
    font-size: min(1.8rem, calc((100vw - 150px) / 14.6));
    letter-spacing: 0.02em;
  }
}

/* ============================================================
   v127: 改行を文節（言葉のまとまり）単位にする
   HTML の文章には tools/apply_budoux.py で文節の切れ目ごとに <wbr> を入れてある。
   keep-all で「<wbr> と空白・句読点の位置でだけ改行」させ、言葉の途中で切れないようにする。
   印の無い長い英数字（メールアドレス等）は body の overflow-wrap: anywhere がはみ出しを防ぐ。
   元に戻す場合はこのブロックを消すだけでよい（<wbr> はこの指定が無ければ見た目に影響しない）
   ============================================================ */
body { word-break: keep-all; }
/* 段落の最後の行が数文字だけにならないよう、前の行と調整（対応ブラウザのみ） */
p, li, dd, td, th, figcaption, label, .a-text, .q-text { text-wrap: pretty; }
/* 見出しは行の長さをそろえる */
h1, h2, h3, h4 { text-wrap: balance; }
/* 写真の説明は2行の長さをそろえる（「バンドソーで／材料を切断」） */
figcaption { text-wrap: balance; }
/* スマホでは、代表者プロフィールの表を「項目名が上・内容が下」に（内容欄が狭く言葉の途中で折れていた） */
@media (max-width: 480px) {
  .profile-table dl { grid-template-columns: 1fr; gap: 0.2em 0; }
  .profile-table dd + dt { margin-top: 0.9em; }
}
/* 幅400px以下では、アクセスの所在地欄も「項目名が上・内容が下」に（メールアドレスが途中で折れていた） */
@media (max-width: 400px) {
  .access-info dl { grid-template-columns: 1fr; gap: 0.2em 0; }
  .access-info dd + dt { margin-top: 0.9em; }
}

/* ============================================================
   v129: クライアント回答（10/3）の反映
   ============================================================ */
/* 写真を載せない施工実績（機密エリアのため写真なし）：斜線と「PHOTO COMING」をやめ、紺の無地に分野名 */
.work-thumb.is-placeholder {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, var(--color-bg-dark-soft) 0%, var(--color-bg-dark) 100%);
  background-size: 24px 24px, 24px 24px, cover;
  background-position: center;
  animation: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.work-card:hover .work-thumb.is-placeholder { background-color: var(--color-bg-dark); }
/* 分野名（data-label）：大きな英字＋金の下線 */
.work-thumb.is-placeholder::before {
  content: attr(data-label);
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  border: 0;
  border-bottom: 2px solid var(--color-accent);
  border-radius: 0;
  background: none;
  opacity: 1;
  padding-bottom: 0.45em;
  font-family: var(--font-en);
  font-size: clamp(2rem, 2.6vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #fff;
}
/* 右下に小さく「写真は非掲載」 */
.work-thumb.is-placeholder::after {
  content: "写真は非掲載";
  position: absolute;
  right: 1.2em;
  bottom: 1em;
  font-family: var(--font-ja);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: var(--color-text-on-dark-muted);
}

/* ブログ：公開時は記事がないため「記事準備中」の案内 */
.blog-empty {
  max-width: 68rem;
  margin: 0 auto;
  padding: 6em 2em;
  text-align: center;
  background: var(--color-bg-alt);
}
.blog-empty-label {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--color-accent);
}
.blog-empty-title {
  margin: 0.5em 0 0.9em;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text);
}
.blog-empty-text {
  margin: 0 0 2.6em;
  font-size: 1.4rem;
  line-height: 2;
  color: var(--color-text-soft);
}
@media (max-width: 480px) {
  .blog-empty { padding: 4.4em 1.4em; }
  .blog-empty-title { font-size: 1.9rem; }
}

/* フォーム：プライバシーポリシーへの同意欄（チェックボックスは上の入力欄の指定から外れているので個別に） */
.form-consent { margin-top: 0.4em; }
.form-row .consent-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.3rem;
  font-weight: 500;
  cursor: pointer;
}
.consent-label input[type="checkbox"] {
  width: 2rem;
  height: 2rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.consent-label a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.consent-label a:hover { color: var(--color-accent); opacity: 1; }
.form-row .consent-label .required { margin-left: 0.6em; white-space: nowrap; }

/* v130: フォームのロボット除けの欄（人には見せない。入力があった送信は Netlify が迷惑扱いにする） */
.form-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* 送信完了ページの電話番号（受付時間は途中で折らない） */
.thanks-hours { white-space: nowrap; }
.thanks-tel {
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text);
  white-space: nowrap;
}

/* v131: お知らせページの一覧は本文がない（リンクではない）ので、ホバーで動かさない */
.news-row.is-static:hover { padding-left: 0; }
@media (max-width: 900px) {
  .news-row.is-static:hover { padding-left: 0.6em; }
}

/* v135: 「必須」の文字は CSS で表示（ラベルの文字に含めると、Netlify の通知メールの項目名が「お名前必須」になるため） */
.form-row .required::before { content: "必須"; }