:root {
  --accent: #0b5f8a;
  --bg: #f7f7f7;
  --text: #222;
  --glass: rgba(255, 255, 255, 0.85);
  --site-header-height: 64px;
  --accent-dark: #0b3f5a;
  --hero-offset: 200px;
  --header-transition: 0.38s;
}

/* =========================================
   基本レイアウト（修正箇所）
========================================= */
html,body {
  height: 100%;
  margin: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background-color: aliceblue;
  
  /* --- 追加：横スクロールを強制的に禁止する --- */
  overflow-x: hidden; 
  width: 100%;
  overscroll-behavior-y: none;
}

/* =========================================
   オーバーレイ（メニュー）の修正
========================================= */
.overlay {
  position: fixed;
  right: 0;
  top: var(--site-header-height);
  bottom: 0;
  width: 320px;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(8px);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
  
  /* 待機位置を110%ではなく100%（画面の端ぴったり）にする */
  transform: translateX(100%); 
  
  transition: transform 0.35s ease;
  z-index: 110;
  padding: 28px;
  box-sizing: border-box;
  color: #fff;
  
  /* --- 追加：メニュー内も縦以外のスクロールを禁止 --- */
  overflow-x: hidden;
}

/* =========================================
   ヘッダー（白ベース・透明感）
========================================= */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--site-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 120;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  transition: color var(--header-transition) ease, background-color var(--header-transition) ease;
}

/* Brandエリア自体の設定 */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Brand内のリンクに対する装飾解除 */
.brand a {
  color: #000000 !important;   /* 文字色を黒に固定（!importantでリンク色を上書き） */
  text-decoration: none !important; /* 下線を強制的に消す */
  font-weight: 700;            /* 太字にする（任意） */
  cursor: pointer;             /* カーソルは指の形にする（クリックできることを示すため） */
}

/* 訪問済み、クリック中、ホバー時も色が変わらないように固定 */
.brand a:visited,
.brand a:hover,
.brand a:active {
  color: #000000 !important;   /* ずっと黒のままにする */
  text-decoration: none !important; /* ずっと下線なし */
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* =========================================
   ハンバーガーメニュー（完全入れ替え・位置固定版）
========================================= */
.hamburger {
  /* ボタン全体の幅を完全に固定。これで隣の要素への干渉を防ぐ */
  width: 70px; 
  height: 44px;
  position: relative; /* 中身を重ねるための基準 */
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 132;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 三本線（通常時）と ✕印（開閉時）の共通設定 */
.hamburger-icon,
.close-icon {
  position: absolute; /* 同じ場所に重ねる */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, visibility 0.2s;
}

/* 三本線のバーのスタイル */
.hamburger .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #000 !important;
  position: relative;
}
.hamburger .bar::before,
.hamburger .bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #000 !important;
  transition: all 0.25s;
}
.hamburger .bar::before { top: -7px; }
.hamburger .bar::after { top: 7px; }

/* ✕ボタンのスタイル */
.close-icon {
  font-size: 24px;
  color: #000;
  font-weight: bold;
  opacity: 0;         /* 最初は隠す */
  visibility: hidden; /* クリックもできないようにする */
}

/* --- 切り替えの仕組み --- */

/* 通常時：三本線を表示、✕を隠す */
.hamburger-icon {
  opacity: 1;
  visibility: visible;
}

/* メニューが開いた時 (.openクラスがついた時) */
.hamburger.open .hamburger-icon {
  opacity: 0;          /* 三本線を消す */
  visibility: hidden;
}

.hamburger.open .close-icon {
  opacity: 1;          /* ✕を表示する */
  visibility: visible;
}

/* ホバー時の微調整 */
.hamburger:hover {
  filter: brightness(0.8);
}

@media (max-width: 640px) {
  .hamburger {
    width: 48px; /* スマホでも幅を固定 */
  }
}

/* =========================================
   オーバーレイ（メニュー）
========================================= */
.overlay {
  position: fixed;
  right: 0;
  top: var(--site-header-height);
  bottom: 0;
  width: 320px;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(8px);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
  transform: translateX(110%);
  transition: transform 0.35s ease;
  z-index: 110;
  padding: 28px;
  box-sizing: border-box;
  color: #fff;
}

.overlay.open {
  transform: translateX(0);
}

.overlay nav a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* =========================================
   メインコンテンツ・ヒーロー
========================================= */
/* 1. ヘッダーの背後に画像を回り込ませるため、mainの余白を消す */
main {
  padding-top: 0; /* calc(...) を 0 に変更 */
  box-sizing: border-box;
}

/* 2. 背景画像の表示を整える */
.hero {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  
  /* 画像の表示設定を追加 */
  background-size: cover;      /* 画面いっぱいに広げる */
  background-position: center; /* 中央に合わせる */
  background-repeat: no-repeat;
}

.hero-label {
  display: block;
  font-size: 14px;
  letter-spacing: 0.3em;
  margin-bottom: 15px;
  opacity: 0.8;
}

.hero-scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.2em;
}
.hero-scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 60px;
  background: #fff;
  margin: 10px auto 0;
  animation: scrollDown 2s infinite;
}

@keyframes scrollDown {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- セクション共通のデザイン --- */
.highlight-section {
  padding: 120px 0;
  overflow: hidden;
}
.bg-light { background-color: #f9f9f9; }

.row-reverse { flex-direction: row-reverse; }

/* テキスト装飾 */
.highlight-text { flex: 1; position: relative; }

.sub-number {
  font-family: serif;
  font-size: 60px;
  color: rgba(11, 95, 138, 0.1);
  position: absolute;
  top: -40px;
  left: -20px;
  font-weight: bold;
}

.en-title {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 0.2em;
  margin-bottom: 5px;
}

.section-title h2 {
  font-size: 28px;
  margin-bottom: 25px;
  position: relative;
  display: inline-block;
}

.highlight-text p {
  line-height: 1.8;
  margin-bottom: 1.5em;
  color: #444;
}

/* 画像装飾 */
.highlight-image {
  flex: 1;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.highlight-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.highlight-image:hover img {
  transform: scale(1.08);
}

/* スマホ対応 */
@media (max-width: 820px) {
  .highlight-section { padding: 60px 0; }
  .highlight-row, .row-reverse {
    flex-direction: column !important;
    gap: 30px;
  }
  .highlight-text { order: 2; }
  .highlight-image { order: 1; width: 100%; }
}

/* =========================================
   アニメーション・テキスト周り
========================================= */
/* 後方にあったシンプルなslideUpを優先適用 */
@keyframes slideUp {
  0% {
    transform: translateY(24px) scale(1);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(24px) scale(1);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* 4. 文字が画像に埋もれないよう、背景（黒い半透明）を確実に効かせる */
.company-name, .hero-sub {
  background: rgba(0, 0, 0, 0.4) !important; /* 少し背景を濃く */
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.company-name {
  font-size: 75px;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  display: inline-block;
  padding: 8px 18px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.36);
  color: #fff;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  transform-origin: center;
  /* 後方のアニメーション指定を優先 */
  animation: slideUp 0.8s ease-out both;
  -webkit-animation: slideUp 0.8s ease-out both;
  transform: translateY(24px) scale(1);
  opacity: 0;
}

.hero-sub {
  display: block;
  opacity: 0;
  transform: translateY(18px);
  animation: slideUp 0.7s ease-out both;
  animation-delay: 0.9s;
  will-change: transform, opacity;
  margin-top: 8px;
  font-size: 18px;
  color: #fff;
  background: rgba(0, 0, 0, 0.36);
  transform-origin: center;
}

@media (max-width: 880px) {
  .hero-sub { animation-delay: 0.6s; }
}

@media (prefers-reduced-motion: reduce) {
  .company-name,
  .hero-sub {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

.hero p {
  max-width: 800px;
  padding: 8px 18px;
  margin: 0 auto;
  font-size: 16px;
  border-radius: 8px;
}

/* --- ヒーローコンテンツの共通設定 --- */
.hero-inner {
  text-align: center; /* 全てを中央寄せに */
  z-index: 2;
  color: #fff;
}

/* --- ヒーローコンテンツの共通設定 --- */
.hero-inner {
  text-align: center; /* 全てを中央寄せに */
  z-index: 2;
  color: #fff;
}

/* 3. 重複・競合していたアニメーションの整理 */
.hero-content-box {
  z-index: 5;
  text-align: center;
  /* heroFadeUpが確実に動くように設定 */
  animation: heroFadeUp 1.2s ease-out forwards;
  opacity: 0; 
}

/* 共通フェードアップ（これ一つに絞る） */
@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   コンポーネント・グリッド
========================================= */
.container {
  max-width: 1100px;
  margin: 119px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 980px) {
  .grid { grid-template-columns: 1fr; }
}

.card {
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 18px;
}

.card-form {
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 18px;
  margin-top: 50px !important;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title h2 {
  margin: 0;
  font-size: 20px;
  color: var(--accent);
}

.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* =========================================
   画像・ギャラリー（重複統合）
========================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.gallery img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 980px) {
  .gallery img { height: 140px; }
}

.hero .hero-img,
.hero .hero-image,
.hero img {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  border-radius: 10px;
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  z-index: 120;
}

.lightbox img {
  max-width: 92%;
  max-height: 84%;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

/* ===================================================
   画面分割（スプリット）レイアウト
=================================================== */

/* 共通のレイアウト調整 */
.highlight-section {
  width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-top: 0 !important; /* 隙間を詰めて背景を繋げる */
  padding: 60px 0; /* 上下の余白 */
}

/* コンテンツを中央に寄せるためのインナー */
.highlight-row {
  max-width: 1200px; /* サイト全体の最大幅に合わせる */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 0 20px; /* 画面端の余白 */
}

/* 偶数番目は文字と画像の並び順を左右反転させる */
.highlight-section:nth-of-type(even) .highlight-row {
  flex-direction: row-reverse;
}

/* テキストと画像の幅をそれぞれ45%（合計90%）にして中央に余白を作る */
.highlight-text, 
.highlight-image {
  flex: 0 0 45%;
  width: 45%;
}

/* 画像がコンテナからはみ出ないようにする */
.highlight-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================
   セクションの前の英語タイトル（両サイド線）
========================================= */
.section-divider {
  max-width: 1100px; /* highlight-rowの幅に合わせる */
  margin: 0 auto 20px; /* 下のコンテンツとの間隔 */
  padding: 20px 20px;
  display: flex;
  align-items: center;
}

.en-divider-text {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 40px;
  font-weight: 700;
  color: var(--accent); /* 変数--accentを使用 */
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 左右の線のスタイル */
.en-divider-text::before,
.en-divider-text::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--accent);
  opacity: 0.4; /* 線は少し控えめに */
}

/* 文字と線の間の余白 */
.en-divider-text::before {
  margin-right: 25px;
}
.en-divider-text::after {
  margin-left: 25px;
}

/* モバイルでの調整 */
@media (max-width: 820px) {
  .section-divider {
    margin-bottom: 20px;
  }
  .en-divider-text {
    font-size: 12px;
  }
}

/* -----------------------------------------
   モバイル対応（画面幅 980px 以下）
----------------------------------------- */
@media (max-width: 980px) {
  /* スマホでは塗り分けを解除して、全面同じ色にする */
  .highlight-section:nth-of-type(odd),
  .highlight-section:nth-of-type(even) {
    background: #f4f6f8;
    padding: 40px 0;
  }

  .highlight-row,
  .highlight-section:nth-of-type(even) .highlight-row {
    flex-direction: column-reverse; /* スマホは常に画像が上、文字が下 */
    gap: 30px;
  }

  .highlight-text, 
  .highlight-image {
    flex: 0 0 100%;
    width: 100%;
  }
}

/* --- 画像の初期状態とアニメーション設定 --- */

/* 1番目・3番目...（右から左へ） */
.highlight-section:nth-of-type(odd) .highlight-image {
  opacity: 0;
  transform: translateX(100px); /* 右にずらしておく */
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease;
}

/* 2番目・4番目...（左から右へ） */
.highlight-section:nth-of-type(even) .highlight-image {
  opacity: 0;
  transform: translateX(-100px); /* 左にずらしておく */
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease;
}

/* 共通：表示された時（JavaScriptで付与されるクラス） */
.highlight-row.in-view .highlight-image {
  opacity: 1;
  transform: translateX(0) !important; /* 元の位置に戻る */
}

/* モバイル対応：880px以下ではスライドを抑えめにするか、下からの動きにする */
@media (max-width: 880px) {
  .highlight-section:nth-of-type(odd) .highlight-image,
  .highlight-section:nth-of-type(even) .highlight-image {
    transform: translateY(30px); /* スマホは横揺れより縦揺れが自然 */
  }
}

/* ------------------------------------------
   モバイル対応：画面が狭いときは縦並び
------------------------------------------ */
@media (max-width: 880px) {
  .highlight-row {
    flex-direction: column !important; /* 常に「文字が上、画像が下」にする */
    min-height: auto;
  }
  .highlight-text, 
  .highlight-image {
    flex: 0 0 100%;
    width: 100%;
    padding: 30px 20px;
  }
  .highlight-image {
    transform: translateY(30px) !important; /* スマホでは下からふわっと */
  }
  .highlight-row.in-view .highlight-image {
    transform: translateY(0) !important;
  }
}

/* =========================================
   その他（テーブル・マップ・フッター等）
========================================= */
.equip-list { list-style: none; padding: 0; margin: 0; }
.equip-list li { padding: 6px 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.04); }

.map {
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
}

/* --- 会社情報テーブルの装飾 --- */
.company-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.company-table th, 
.company-table td {
  padding: 20px 15px;
  border-bottom: 1px solid #eee;
  line-height: 1.6;
}

.company-table th.label {
  width: 30%;
  background-color: azure;
  color: #333;
  font-weight: 700;
  text-align: center;
  border-left: 4px solid var(--accent);
  font-size: 18px;
}

.contact-item {
  display: block;
  margin-bottom: 5px;
}
.contact-item strong {
  width: 50px;
  display: inline-block;
  color: var(--accent);
}

/* --- 沿革（タイムライン）の装飾 --- */
.timeline {
  list-style: none;
  padding: 20px 0 20px 20px;
  border-left: 2px solid #eee; /* 縦のライン */
  margin-left: 10px;
}

.timeline li {
  position: relative;
  margin-bottom: 30px;
  padding-left: 30px;
}

/* タイムラインの「点」 */
.timeline li::before {
  content: "";
  position: absolute;
  left: -37px; /* 縦線の上に重ねる */
  top: 5px;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #eee;
}

.timeline .year {
  display: block;
  font-weight: 700;
  color: var(--accent);
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.timeline .event {
  color: #555;
  margin: 0;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .company-table th.label {
    width: 40%;
    padding: 15px 10px;
  }
}

.history { margin: 8px 0 0 18px; color: #333; line-height: 1.7; }
.contact-note { font-size: 14px; color: #333; line-height: 1.6; }
.contact-info { margin: 6px 0 12px 0; color: #333; }
.contact-card .contact-actions { margin-top: 12px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

@media (max-width: 640px) {
  .contact-link { display: none; }
}

.recruit .btn { width: 100%; text-align: center; }

/* Contact Page 専用 */
body.contact-page { display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box; }
body.contact-page main { flex: 1 0 auto; box-sizing: border-box; }
body.contact-page footer { flex-shrink: 0; }

footer {
  margin-top: 40px;
  padding: 28px 20px;
  background: #111;
  color: #fff;
}
footer .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
footer a { color: #fff; }
.footer-name { font-weight: 700; }
.footer-sub { font-size: 13px; color: #ddd; }
.phone { background: #333; }
.small { font-size: 13px; color: #666; }

/* =========================================
   作業風景セクション専用
========================================= */
.work-scene {
  margin-top: 40px;
}

.work-category {
  margin-bottom: 30px;
}

/* カテゴリー見出しのデザイン */
.work-subtitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  border-left: 5px solid var(--accent); /* 会社のアクセントカラーを使用 */
  padding: 5px 0 5px 15px;
  margin: 20px 0 15px 0;
  background: linear-gradient(to right, #eef6fa, transparent); /* ほんのり背景色 */
}

/* 作業風景用のギャラリー調整（3列表示） */
.work-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCでは3枚並び */
  gap: 15px;
}

.work-gallery img {
  width: 100%;
  height: 200px; /* 高さを揃える */
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* ホバー時に少し浮き上がる演出 */
.work-gallery img:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ページ説明文 */
.section-desc {
  color: #666;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* Before/Afterの比較エリア */
.comparison-grid {
  background: #fcfcfc;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 40px;
}
/* 画像とキャプションのセットを正しく並べる */
.image-set {
  display: flex;
  align-items: flex-start; /* 上端を揃える（画像の高さが違っても崩れにくい） */
  justify-content: center;
  gap: 15px;
}

/* figure自体の余白をリセット */
.image-set figure {
  margin: 0;           /* ブラウザ標準の余白を消す */
  flex: 1;             /* 左右の幅を均等に */
  max-width: 45%;      /* 幅が広がりすぎないよう制限 */
  display: flex;
  flex-direction: column; /* 画像とキャプションを縦に並べる */
  align-items: center;    /* 中身を中央寄せ */
}

/* 画像のサイズを固定 */
.image-set img {
  width: 100%;
  height: 300px;       /* 高さを固定すると、より綺麗に並びます */
  object-fit: cover;   /* 固定しても画像が歪まないように調整 */
  border-radius: 4px;
}

/* キャプションのデザイン調整 */
.image-set figcaption {
  margin-top: 10px;    /* 画像との隙間 */
  font-size: 18px;
  font-weight: bold;
  color: var(--accent);
  text-align: center;
  word-break: keep-all; /* 改行を不自然にしない */
}

/* 動きのある太い矢印のデザイン */
.arrow.is-animated {
  height: 300px;
  width: 80px;           /* 少し幅を広げて動きを見せやすく */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 0;          /* 元の文字は非表示 */
}

/* 矢印の「太い線」のベース */
.arrow.is-animated::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;           /* 線を太く */
  background-color: #eee; /* ベースは薄いグレー */
  border-radius: 2px;
}

/* 左から右へ流れる「光のライン」 */
.arrow.is-animated::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;           /* 線と同じ太さ */
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: arrow-fast-flow 1.2s infinite linear; /* 1.2秒で高速ループ */
  border-radius: 2px;
  z-index: 1;
}

/* 矢印の「先端（＞）」を別に作成 */
.arrow-head {
  position: absolute;
  right: 0;
  width: 15px;           /* 先端のサイズ */
  height: 15px;          /* 先端のサイズ */
  border-top: 4px solid var(--accent);   /* 太さを線に合わせる */
  border-right: 4px solid var(--accent); /* 太さを線に合わせる */
  transform: rotate(45deg);
  border-radius: 2px;
  z-index: 2;            /* 光より上に表示 */
}

/* 高速な流れのアニメーション */
@keyframes arrow-fast-flow {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* モバイル対応 */
@media (max-width: 640px) {
  .arrow.is-animated {
    height: 60px;
    width: auto;
    transform: rotate(90deg);
    margin: 20px 0;
  }
}

/* ギャラリーのラベル装飾 */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.img-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 3px;
  pointer-events: none;
}

/* 設備概要のリストをモダンに */
.equipment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.equip-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.equip-list li span {
  font-weight: 500;
}
.equip-list li strong {
  color: var(--accent);
  font-size: 1.1em;
}

/* スマホでは縦に並べる */
@media (max-width: 640px) {
  .image-set {
    flex-direction: column;
    align-items: center;
  }
  .image-set figure {
    max-width: 100%;
  }
  .arrow {
    height: auto;
    padding: 10px 0;
    transform: rotate(90deg); /* 矢印を下向きに */
  }
}

/* -----------------------------------------
   スマホ対応（980px以下）
----------------------------------------- */
@media (max-width: 980px) {
  .work-gallery {
    grid-template-columns: repeat(2, 1fr); /* スマホは2枚並び */
    gap: 10px;
  }
  
  .work-gallery img {
    height: 150px; /* スマホでは少し高さを抑える */
  }
}

/* -----------------------------------------
   スマホ対応（640px以下）
----------------------------------------- */
@media (max-width: 640px) {
  .work-gallery {
    grid-template-columns: 1fr; /* 非常に狭い画面では1枚ずつ */
  }
}

/* =========================================
   拡大表示（ライトボックス）のスタイル
========================================= */
.lightbox {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  z-index: 2000; /* ヘッダーより上に表示 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* 拡大画像本体 */
.lightbox-content {
  max-width: 90%;
  max-height: 80%;
  object-fit: contain;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  animation: zoomIn 0.3s ease;
}

/* キャプション（画像下の説明） */
.lightbox-caption {
  color: #fff;
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
}

/* 閉じるボタン */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

/* ふわっと拡大するアニメーション */
@keyframes zoomIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 表示中（JSで付与） */
.lightbox.active {
  display: flex;
}

/* =========================================
   採用情報ページ (recruit) 専用スタイル
========================================= */

/* 募集要項のテーブル調整 */
.recruit-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.recruit-table th,
.recruit-table td {
  padding: 16px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  vertical-align: middle;
}

.recruit-table th {
  background: #fdfdfd;
  color: var(--accent-dark);
  font-weight: 700;
  width: 25%; /* 項目の幅 */
}

.recruit-table td {
  color: #333;
  line-height: 1.6;
}

/* アクションボタンエリア */
.recruit-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn-large {
  padding: 16px 32px;
  font-size: 16px;
  border-radius: 8px;
  min-width: 280px;
  box-sizing: border-box;
  transition: transform 0.2s, box-shadow 0.2s;
  font-weight: bold;
}

.btn-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* プライマリーボタン（応募） */
.primary-btn {
  background: var(--accent);
  color: #fff;
  border: 2px solid transparent;
}

/* セカンダリーボタン（問い合わせ） */
.secondary-btn {
  background: #ffffff;
  color: var(--text);
  border: 2px solid #ccc;
}
.secondary-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* スマホ対応 */
@media (max-width: 640px) {
  .recruit-table th, 
  .recruit-table td {
    display: block; /* テーブルを縦積みにする */
    width: 100%;
    box-sizing: border-box;
  }
  
  .recruit-table th {
    border-bottom: none;
    padding-bottom: 4px;
    background: transparent;
  }
  
  .recruit-table td {
    padding-top: 4px;
    padding-bottom: 16px;
  }

  .btn-large {
    width: 100%;
  }
}

/* =========================================
   会社概要ページタイトル
========================================= */
.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px 0;
  display: inline-block;
  width: 100%;
}
.page-header h1 {
  font-size: 32px;
  letter-spacing: 0.1em;
  color: var(--text);
  margin: 0;
}

/* =========================================
   ご挨拶セクション (Intro Section)
========================================= */
.intro-section {
  padding: 40px 60px !important;
  background-color: #fcfcfc; /* わずかに背景色を変えて強調 */
}

.intro-flex {
  display: flex;
  align-items: flex-start;
  gap: 40px; /* 画像とテキストの間隔 */
}

.intro-image {
  margin: 0;
  line-height: 0;
}

.intro-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: block;
}

.intro-text {
  padding-top: 0;
  margin-top: 0;
}

/* 最初の段落の上の余白を消す */
.intro-body p:first-child {
  margin-top: 0;
}

/* =========================================
   ご挨拶セクションの見出し（両サイドに線）
========================================= */
.intro-title {
  display: flex;         /* 横並びにする */
  align-items: center;   /* 垂直中央に揃える */
  justify-content: center; /* 中央寄せ */
  font-size: 16px;
  color: var(--accent);
  margin-bottom: 20px;
  font-weight: 700;
  text-align: center;
}

/* --- 前半の共通設定はそのまま --- */
.intro-title::before,
.intro-title::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--accent);
  margin: 0 15px;
  max-width: 60px;
}

/* --- レスポンシブ対応（スマホ時）の修正 --- */
@media (max-width: 820px) {
  .intro-flex {
    flex-direction: column;
    gap: 24px;
  }
  .intro-image {
    flex: 0 0 100%;
    width: 80%;
    margin: 0 auto;
  }
  .intro-section {
    padding: 24px !important;
  }

  /* 修正ポイント：位置固定のプロパティを解除し、線を短く調整 */
  .intro-title {
    text-align: center;
    justify-content: center; /* flexで中央に寄せる */
    font-size: 12px;
  }

  .intro-title::before,
  .intro-title::after {
    max-width: 30px; /* スマホでは線を短くして文字スペースを確保 */
    margin: 0 10px;  /* 隙間も少し詰める */
    /* 下記の指定が干渉の原因なので、もし記述があれば削除するかリセットします */
    position: static; 
    transform: none;
    left: auto;
  }

  /* 不要な指定を上書き・削除 */
  .intro-title::after {
    left: auto !important;
    transform: none !important;
  }
}

.intro-body p {
  line-height: 1.8;
  margin-bottom: 1.5em;
  color: #444;
}

.intro-signature {
  text-align: right;
  margin-top: 30px;
  font-weight: 700;
}

.intro-signature span {
  font-size: 20px;
  margin-left: 10px;
}

/* リンクのスタイル */
.policy-link {
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}

/* モーダル外枠（背景の暗い部分） */
.modal {
  display: none; /* 最初は非表示 */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 背景を暗く */
  backdrop-filter: blur(4px); /* 背景を少しぼかすとおしゃれ */
}

/* モーダルの中身 */
.modal-content {
  background-color: #fff;
  margin: 5% auto; /* 上下に5%の余白 */
  padding: 0;
  width: 90%;
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: modal-anim 0.3s ease-out; /* ふわっと出すアニメーション */
}

@keyframes modal-anim {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 { margin: 0; font-size: 1.2rem; }

.close-btn {
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  color: #aaa;
}

.modal-body {
  padding: 20px;
  max-height: 250px; /* 長い場合にスクロールさせる */
  overflow-y: auto;
  line-height: 1.6;
}

.modal-body h4 {
  margin: 20px 0 10px;
  font-size: 1rem;
  border-left: 4px solid var(--accent);
  padding-left: 10px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  text-align: right;
}

/* お問い合わせ全体のリード文 */
.contact-lead {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 40px;
}

/* 連絡手段の並び */
.contact-methods {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

/* 個別のコンタクトボックス */
.method-item {
  flex: 1;
  padding: 30px 20px;
  background: #fcfcfc;
  border: 1px solid #eee;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.3s ease;
}

.method-item:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
}

.method-icon {
  font-size: 2rem;
  margin-bottom: 15px;
  display: block;
}

.method-item h3 {
  font-size: 1.1rem;
  margin-bottom: 15px;
  color: #333;
}

.method-value {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--accent);
  margin-bottom: 10px;
}

.method-value a {
  color: inherit;
  text-decoration: none;
}

.method-note {
  font-size: 0.85rem;
  color: #888;
}

/* 注釈エリア */
.contact-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dotted #ccc;
  font-size: 0.85rem;
  color: #777;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .contact-methods {
    flex-direction: column;
  }
}

/* 枠線ボタンのベーススタイル */
.btn-outline {
  display: inline-block;
  padding: 12px 40px;
  border: 1px solid var(--accent); /* アクセントカラーの細い線 */
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  z-index: 1;
}

/* 文字に少し強弱をつける */
.btn-outline span {
  position: relative;
  z-index: 2;
  font-weight: bold;
}

/* 右側に矢印を添える（さりげないおしゃれ） */
.btn-outline span::after {
  content: "→";
  margin-left: 10px;
  display: inline-block;
  transition: transform 0.3s ease;
}

/* マウスを乗せた時の背景塗りつぶしアニメーション */
.btn-outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; /* 最初は左に隠しておく */
  width: 100%;
  height: 100%;
  background-color: var(--accent);
  transition: all 0.4s ease;
  z-index: -1;
}

.btn-outline:hover {
  color: #fff; /* 文字を白抜きに */
}

.btn-outline:hover::before {
  left: 0; /* 背景がスッと出てくる */
}

.btn-outline:hover span::after {
  transform: translateX(5px); /* 矢印が少し右に動く */
}

/* 地図のコンテナ */
.map-container {
  width: 100%;
  line-height: 0; /* 下にできる隙間を解消 */
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid #eee;
}

.map-container iframe {
  vertical-align: bottom;
}

/* 地図下のテキストエリア */
.map-info {
  text-align: left;
  padding: 0 10px;
}

.map-info p {
  font-size: 0.95rem;
  color: #333;
  margin: 0;
}

/* スマホ対応：地図の高さを少し低くして操作しやすくする */
@media (max-width: 768px) {
  .map-container iframe {
    height: 300px;
  }
}

/* 実績ボックスのスタイル */
.track-record-box {
  margin: 25px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.6); /* ほんのり白背景 */
  border-radius: 4px;
}

.record-sub-title {
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: 15px;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.record-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列に並べる */
  gap: 8px 20px;
}

.record-list li {
  font-size: 0.9rem;
  color: #444;
  position: relative;
  padding-left: 15px;
  line-height: 1.4;
}

/* リストの先頭に小さな「・」をつける */
.record-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}

/* スマホでは1列にする */
@media (max-width: 480px) {
  .record-list {
    grid-template-columns: 1fr;
  }
}

/* --- 行動指針・企業理念のスタイル --- */

.guideline-item h3 {
  font-size: 1.2rem;
  color: var(--accent);
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.guideline-item p {
  font-size: 1rem;
  color: #444;
  margin: 0;
  padding-left: 1.2em;
}

.philosophy-footer {
  font-weight: bold;
  color: var(--accent);
  margin-top: 30px !important;
  font-size: 1.1rem;
}

/* 企業理念を少し目立たせるための薄い背景色（任意） */
.bg-accent-light {
  background-color: #f0f8ff; /* 会社概要のラベルと同じ色 */
}

/* =========================================
   スマートフォン向け追加レイアウト調整（640px以下）
========================================= */
@media (max-width: 640px) {
  .hero-sub {
    font-size: 14px;
    padding: 5px 10px;
  }

  /* 2. 見出しの文字サイズを最適化 */
  .page-header h1 {
    font-size: 24px;
  }
  .section-title h2 {
    font-size: 22px;
  }

  /* 3. 本文の文字サイズと行間を読みやすく調整 */
  .highlight-text p, .intro-body p, .section-desc {
    font-size: 14px;
    line-height: 1.7;
  }

  /* 4. 余白の調整（画面を広く使えるようにパディングを減らす） */
  .container {
    margin: 80px auto 40px; /* ヘッダー下の余白を少し詰める */
  }
  .highlight-section {
    padding: 40px 0;
  }
  .intro-section {
    padding: 24px 15px !important; /* カード内の余白を縮小 */
  }

  /* 5. ボタンの調整（タップしやすく、画面幅いっぱいに広げる） */
  .btn-outline {
    padding: 12px 15px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    display: block; /* ブロック要素にして中央揃えしやすくする */
  }
  
  /* 6. 会社情報・採用情報などのテーブル文字サイズ調整 */
  .company-table th, 
  .company-table td {
    padding: 12px 10px;
    font-size: 14px;
  }
  .company-table th.label {
    font-size: 15px;
  }
  
  /* 7. 沿革（タイムライン）の文字調整 */
  .timeline .year {
    font-size: 1rem;
  }
  .timeline .event {
    font-size: 14px;
  }

  /* 8. お問い合わせページの要素調整 */
  .method-item {
    padding: 20px 15px;
  }
  .method-value {
    font-size: 1.2rem;
  }
}

/* =========================================
   さらに小さい画面向け（480px以下）の微調整
========================================= */
@media (max-width: 480px) {
  /* 英語の背景タイトルの文字サイズ調整 */
  .en-divider-text {
    font-size: 20px;
  }
  
  /* セクションの背景番号（01, 02...）のサイズと位置を調整 */
  .sub-number {
    font-size: 40px;
    top: -20px;
    left: -10px;
  }
}

/* =========================================
   設備概要セクションのスマホ調整
========================================= */
@media (max-width: 640px) {

  /* 1. 横並びを解除して1列にする（文字の横幅を確保） */
  .equipment-grid {
    display: block; /* gridからブロック要素に変更 */
    gap: 0;
  }

  /* 2. リスト全体の余白調整 */
  .equip-list {
    margin-bottom: 0;
  }
  
  /* 2つ目のリストとの間に少し隙間を作る */
  .equip-list + .equip-list {
    margin-top: 0; 
  }

  /* 3. 各行の文字サイズを大きくし、高さを出す */
  .equip-list li {
    padding: 15px 5px;   /* 上下の余白を増やしてタップしやすく */
    font-size: 16px;     /* PCと同等、または少し大きめの読みやすいサイズに固定 */
    border-bottom: 1px solid #eee; /* 点線から実線に変えると視認性が上がります */
  }

  /* 4. 左側の名称（内面研磨機など）を強調 */
  .equip-list li span {
    font-weight: 500;
  }

  /* 5. 右側の台数（7台など）をより強調 */
  .equip-list li strong {
    font-size: 18px;     /* 数字を少し大きくして見やすく */
    color: var(--accent);
  }
    
    /* 1. 縦並び（block）を解除して、横並び（table-cell）に戻す */
  .company-table th.label, 
  .company-table td {
    display: table-cell; /* 縦積み（block）の設定を上書き */
    vertical-align: middle;
    border-bottom: 1px solid #eee;
  }

  /* 2. ラベル（左側）の調整：文字を小さくし、幅を最適化 */
  .company-table th.label {
    width: 30%;          /* 幅を少し狭める */
    font-size: 13px;     /* 文字を小さくする */
    padding: 12px 8px;   /* 余白を詰める */
    white-space: nowrap; /* 「会社名」が改行されないように固定 */
    border-left: 3px solid var(--accent); /* 線の太さもスマホ用に調整 */
  }

  /* 3. データ（右側）の調整：文字を小さくする */
  .company-table td {
    font-size: 13px;     /* ラベルに合わせて小さくする */
    padding: 12px 10px;  /* 余白を詰める */
    line-height: 1.5;    /* 行間を少し詰めてコンパクトに */
  }

  /* 住所など、長いテキストがはみ出ないようにする設定 */
  .company-table td span, 
  .company-table td a {
    word-break: break-all; /* 画面端で強制改行させる */
  }
    
  /* 行動指針全体のコンテナ */
  .guidelines {
    padding: 10px 5px; /* 全体の余白を少し詰める */
  }

  /* 各項目の枠（一、 信頼される品質 など） */
  .guideline-item {
    margin-bottom: 20px; /* 項目間の隙間 */
  }

  /* 見出し（一、 信頼される品質） */
  .guideline-item h3 {
    font-size: 16px !important; /* 文字を小さく調整 */
    margin-bottom: 8px;        /* 見出しと説明文の間の余白 */
    color: var(--accent);       /* アクセントカラーで引き締める */
    font-weight: bold;
  }

  /* 説明文（常に仕上がりの〜） */
  .guideline-item p {
    font-size: 13px !important; /* 本文の文字を小さくする */
    line-height: 1.6;           /* 行間を少し詰めて読みやすく */
    margin: 0;
    color: #444;                /* 少し色を薄くすると圧迫感が減ります */
  }

  /* 1. カード全体の余白を最小限にして横幅を確保 */
  .contact-card {
    padding: 20px 15px !important;
  }

  /* 2. リード文（お問い合わせ内容を〜）を小さく */
  .contact-lead {
    font-size: 13px !important;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  /* 3. 電話・メールの各ボックスを調整 */
  .method-item {
    padding: 15px 10px !important; /* 内側の余白を大幅にカット */
    margin-bottom: 10px;          /* ボックス同士の隙間を詰める */
  }

  /* 4. アイコン（📞 ✉）を小さくしてスペースを稼ぐ */
  .method-icon {
    font-size: 1.4rem !important;
    margin-bottom: 8px !important;
  }

  /* 5. 「お電話での〜」などのタイトルを小さく */
  .method-item h3 {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  /* 6. 電話番号・メールアドレス本体を小さく（これが途切れの原因） */
  .method-value {
    font-size: 1.1rem !important; /* 途切れないサイズまで縮小 */
    word-break: break-all;        /* 長いメールアドレスを強制改行させる */
    margin-bottom: 5px !important;
  }

  /* 7. 「受付時間」などの注釈を小さく */
  .method-note {
    font-size: 11px !important;
  }

  /* 8. 一番下の「※お急ぎの場合は〜」も縮小 */
  .contact-footer {
    margin-top: 15px;
    padding-top: 10px;
    font-size: 11px !important;
  }
    
  /* 1. セクション全体のパディングを縮小 */
  section.card[style*="text-align: center"] {
    padding: 30px 15px !important;
  }

  /* 2. 見出し「私たちと一緒に働きませんか？」を小さく */
  section.card[style*="text-align: center"] h3 {
    font-size: 18px !important;
    margin-bottom: 15px !important;
  }

  /* 3. 説明文を小さく */
  section.card[style*="text-align: center"] p.muted {
    font-size: 13px !important;
    line-height: 1.6;
    margin-bottom: 20px !important;
  }

  /* 4. ボタンエリアの調整 */
  .recruit-actions {
    display: flex;
    flex-direction: column; /* ボタンを縦に並べる */
    gap: 12px;              /* ボタン同士の隙間 */
    align-items: center;
  }

  /* 5. ボタン自体のサイズダウン */
  .recruit-actions .btn-large {
    width: 100%;           /* 横幅いっぱいにする */
    max-width: 280px;      /* 広がりすぎないよう制限 */
    padding: 12px 10px !important; /* 内側の余白を削る */
    font-size: 14px !important;    /* 文字を小さく */
    min-height: auto !important;   /* 高さを抑える */
  }
    
  /* --- 1. ヘッダーロゴ（ブランド名）の調整 --- */
  .brand a {
    font-size: 13px !important; /* 18px前後から少し小さくして1行に収まりやすく */
    letter-spacing: 0.02em;     /* 文字間をわずかに詰め、横幅を節約 */
  }

  /* --- 2. フッター全体の調整 --- */
  footer {
    padding: 20px 15px !important; /* 上下の余白を詰める */
  }

  footer .inner {
    gap: 10px;
  }

  /* フッターの会社名 */
  .footer-name {
    font-size: 13px !important; /* PCより少し小さく */
    margin-bottom: 5px;
  }

  /* フッターの事業内容（サブテキスト） */
  .footer-sub {
    font-size: 10px !important; /* かなり小さくして補助的な印象に */
    line-height: 1.4;
    color: #ccc;               /* 少し色を落としてメインの邪魔をしないように */
  }
    
    /* 1. 設備概要のグリッドを調整（必要に応じて横並びを維持、または1列に） */
  .equipment-grid {
    gap: 10px; /* 左右のリストの間隔を詰める */
  }

  /* 2. リスト全体の文字サイズを下げる */
  .equip-list li {
    padding: 8px 0;      /* 上下の余白を詰めてコンパクトに */
    font-size: 13px;     /* 文字を小さく設定 */
    display: flex;
    justify-content: space-between; /* 項目名と台数を左右に振り分け */
    align-items: center;
    border-bottom: 1px dotted #ccc;
  }

  /* 3. 左側の名称（内面研磨機など） */
  .equip-list li span {
    flex-shrink: 1;      /* 長い名前でもはみ出さないように */
    margin-right: 5px;
  }

  /* 4. 右側の台数（7台など） */
  .equip-list li strong {
    font-size: 14px;     /* 数字は少しだけ大きく、でもPCよりは小さく */
    white-space: nowrap; /* 「7台」が改行されないようにする */
    color: var(--accent);
  }
    
　/* 1. フォームを包むコンテナにヘッダー分の余白を作る */
  .card,.form-container {
    padding: 10px !important;
  }

  /* 2. フォーム内の各入力エリアをコンパクトにする */
  .form-group {
    margin-bottom: 15px !important;
  }

  .form-group label {
    font-size: 13px !important;
    margin-bottom: 5px !important;
  }

  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group textarea {
    padding: 8px !important;
    font-size: 14px !important; /* 入力時にズームされないよう16px推奨ですが、デザイン優先なら14px */
  }

  /* 3. 送信ボタンをスマホ幅に合わせる */
  .submit-area .btn {
    width: 100%;
    padding: 12px 0 !important;
    font-size: 15px !important;
  }
    
  /* 親要素：中身を強制的に中央へ、幅を広げさせない */
  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    width: 100%;
  }

  /* 会社名の箱：メインとして適度な大きさを保つ */
  .company-name {
    font-size: 32px !important;
    padding: 8px 16px !important;
    display: inline-block; /* 文字の長さで箱を止める */
    width: auto !important; /* 幅が広がるのを防ぐ */
    margin-bottom: 8px !important;
  }

  /* サブコピーの箱：会社名より「明らかに小さく」文字に密着させる */
  .hero-sub {
    font-size: 11px !important;    /* さらに文字を小さく */
    line-height: 1.3 !important;   /* 行間を極限まで詰める */
    padding: 2px 8px !important;   /* 上下2px、左右8pxで箱を極薄にする */
    
    display: inline-block !important; /* 重要：これで「箱」が文字の長さになります */
    width: auto !important;         /* 重要：横に広がろうとする動きを止める */
    max-width: 70% !important;      /* 念のため最大幅をさらに絞る */
    
    margin-top: 0 !important;
    border-radius: 2px !important;
    background: rgba(0, 0, 0, 0.4) !important; /* 会社名より薄くして存在感を抑える */
  }
    
  /* 署名エリア全体の調整 */
  .intro-signature {
    margin-top: 20px !important; /* 上の本文との隙間を少し詰める */
    text-align: right;           /* 右寄せを維持 */
  }

  /* 会社名部分 */
  .intro-signature p:first-child {
    font-size: 13px !important;  /* 小さく控えめに */
    margin-bottom: 4px !important;
  }

  /* 役職・氏名部分 */
  .intro-signature p:last-child {
    font-size: 14px !important;  /* 会社名よりは少し大きく、でもPCよりは小さく */
  }

  /* 氏名の強調（span） */
  .intro-signature p span {
    font-size: 16px !important;  /* 名前を少しだけ目立たせる */
    margin-left: 5px;
    font-weight: bold;
  }
    
  /* 1. ライトボックス全体（黒背景） */
    .lightbox {
      /* ...既存の指定... */
      z-index: 2000; 
    }

    /* 2. 拡大画像本体 */
    .lightbox-content {
      /* 画像が×ボタンに被りすぎないよう、最大幅を少し抑える */
      max-width: 88% !important; 
      max-height: 80% !important;
      object-fit: contain;
      /* 重なり順をボタンより下に設定 */
      z-index: 2010; 
    }

    /* 3. 閉じるボタン（×）のスマホ最適化 */
    .lightbox-close {
      /* position: absolute から fixed に変更して画面の右上に固定 */
      position: fixed !important;
      top: 15px !important;
      right: 15px !important;

      /* 画像より必ず上に表示されるように大きな数値を設定 */
      z-index: 2100 !important; 

      /* ボタンのデザイン調整 */
      color: #ffffff;
      font-size: 40px !important; /* スマホでも押しやすい大きさ */
      font-weight: bold;
      line-height: 1;
      cursor: pointer;

      /* --- ここが重要：視認性と押しやすさの向上 --- */
      /* 文字に影をつけて、白い画像と重なっても見えるようにする */
      text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
      /* タップできる範囲を広げる（透明な背景を広げる） */
      padding: 15px; 
    }
    
    /* --- 事業概要などのサブタイトル（外面研磨など）の調整 --- */
  .work-subtitle {
    font-size: 13px !important;    /* 18-20pxから16pxへサイズダウン */
    margin-top: 30px !important;   /* 上のセクションとの間隔を少し詰める */
    margin-bottom: 15px !important; /* 下の画像群との間隔を調整 */
    padding-left: 10px !important;  /* 左側のアクセント（もしあれば）の調整 */
    border-left: 4px solid var(--accent); /* 横線を少し細くしてバランスを取る */
    line-height: 1.4 !important;
  }

  /* --- 画像キャプション（内面#400 研磨後など）の調整 --- */
  .image-set figcaption.fig {
    font-size: 13px !important;  /* 18pxから13px程度へサイズダウン */
    margin-top: 8px !important;   /* 画像との隙間を少し詰める */
    line-height: 1.4 !important;
    font-weight: bold;            /* 太さは維持して視認性を確保 */
    color: var(--accent);         /* アクセントカラーを適用 */
    text-align: center;
  }

  /* 矢印（→）のアニメーション部分がスマホで縦になる場合の調整 */
  .arrow.is-animated {
    margin: 10px 0 !important;    /* 矢印前後の余白を圧縮 */
  }
    
 /* 採用情報の下部リード文（mutedクラス）の調整 */
  p.muted {
    font-size: 10px !important;    /* 16px前後から13pxへサイズダウン */
    line-height: 1.6 !important;   /* 行間を少し詰めてコンパクトに */
    margin-bottom: 20px !important; /* 下のボタンとの隙間を30pxから20pxに縮小 */
    color: #666 !important;        /* 文字色を少し薄くして「補足」感を出す */
    text-align: left;
  }
    
  .hero-sub {
    font-size: 11px !important; /* 全体的に小さく（以前の調整に合わせる） */
    padding: 4px 10px !important;
  }

  .hero-sub .header-highlight-text {
    font-size: 14px !important; /* スマホでもここだけは少し大きくして目立たせる */
  }
 
}

/* 4. スマホの非常に狭い画面（480px以下）での微調整 */
@media (max-width: 480px) {
  .lightbox-close {
    top: 5px !important;
    right: 5px !important;
    font-size: 36px !important;
  }
}

/* --- さらなる大型モニター（1400px以上）への対応 --- */
@media (min-width: 1400px) {
  .company-name {
    font-size: 90px;       /* 非常に広い画面ではさらに大きく */
  }
  
  .hero-sub {
    padding: 0 60px;
    font-size: 34px;
  }
}