/* ========================================
   横山製作所 - 会社概要ページ専用スタイル
   ======================================== */

/* セクション共通の余白調整 */
.section-hero .container {
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section-hero .section-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* 会社概要セクション */
.company-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  margin: var(--space-2xl) auto 0;
  align-items: start;
  max-width: 1200px; /* 内容の見やすさのため部分的制限 */
}

.company-image img {
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.company-details table {
  width: 100%;
  border-collapse: collapse;
}

.company-details th,
.company-details td {
  padding: var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--border-line);
  vertical-align: top;
}

.company-details th {
  background-color: var(--bg-gray);
  font-weight: var(--font-weight-bold);
  width: 35%;
  color: var(--main-text);
}

.company-details td {
  color: var(--main-text);
  line-height: 1.8;
}

/* 交互の行背景で可読性を向上 */
.company-details tr:nth-child(even) td {
  background-color: var(--bg-gray);
}

/* アクセス情報 */
.access-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
  max-width: 1200px; /* 内容の見やすさのため部分的制限 */
  margin-left: auto;
  margin-right: auto;
}

.access-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: 0 var(--space-md);
}

.access-item {
  text-align: left;
  margin-bottom: var(--space-lg);
}

.access-item h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--main-text);
  margin-bottom: var(--space-md);
  text-align: left;
}

.access-item p {
  color: var(--main-text);
  line-height: 1.8;
  text-align: left;
  margin-bottom: var(--space-md);
}

.access-item p strong {
  display: block;
  margin-bottom: var(--space-sm);
}

.map-container {
  position: relative;
  width: 100%;
  height: 450px;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* セクション余白の改善 */
.stats-section {
  padding: calc(var(--space-2xl) * 2) var(--space-lg);
}

.stats-section .container {
  margin: 0 auto;
}

/* ミッションセクションの中央配置改善 */
.section-hero {
  padding: calc(var(--space-2xl) * 2) var(--space-lg);
  text-align: center;
}

.section-hero .section-subtitle {
  max-width: 800px;
  margin: 0 auto calc(var(--space-2xl) * 1.5); /* 統一ルール適用 */
  line-height: 1.8;
  text-align: center;
}

/* 沿革（HISTORY） */
.history {
  padding: calc(var(--space-2xl) * 2) var(--space-lg);
  background: var(--bg-gray);
}

.history__wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr; /* テキストを先頭へ */
  gap: var(--space-2xl);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.history__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.history__caption {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--muted-text);
  text-align: center;
}

.history__timeline {
  position: relative;
  padding-left: 0; /* 縦ライン削除に伴い余白をリセット */
}

.history__era {
  margin-bottom: var(--space-xl);
  background: var(--bg-white);
  border: 1px solid var(--border-line);
  border-left: 4px solid var(--accent-color);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.history__era-title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-md); /* Eraカード内で下余白を付与 */
  text-align: left; /* 左揃え */
  display: inline-block; /* テキスト幅だけ装飾 */
  position: relative;
  /* マーカー風の黄色ハイライト */
  background-image: linear-gradient(transparent 60%, var(--accent-color) 0);
  background-repeat: no-repeat;
  background-size: 100% 40%;
  background-position: 0 100%;
  padding: 0 .1em; /* ハイライトの端切れ防止に微調整 */
}

.history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.history__item {
  position: relative;
  display: grid;
  grid-template-columns: 14rem 1fr; /* 年数 / 詳細（広め） */
  column-gap: var(--space-xl); /* テキストを全体的に右へ */
  line-height: 1.9;
  padding: .35rem 0;
  align-items: start;
}

.history__item::before { display: none; }

.history__year {
  font-weight: var(--font-weight-bold);
  margin-right: 0;
  padding: 0; /* 枠・背景なし */
  border: none;
  border-radius: 0;
  background: none;
  white-space: nowrap;
}

.history__text {
  grid-column: 2; /* デスクトップではテキスト位置を揃える */
}

/* 社長メッセージ 署名スタイル */
.president-signature {
  margin-top: var(--space-xl);
  text-align: right;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  color: var(--main-text);
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Hiragino Mincho Pro", serif;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .company-info {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
  }
  
  .company-details th {
    width: 40%;
  }
  
  .access-content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  .access-info {
    padding: 0;
  }
  
  .map-container {
    height: 300px;
  }
  
  .section-hero {
    padding: var(--space-2xl) var(--space-md);
  }
  
  .stats-section {
    padding: var(--space-2xl) var(--space-md);
  }

  .history {
    padding: var(--space-2xl) var(--space-md);
  }
  .history__wrap {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .history__timeline {
    padding-left: 0;
  }
  .history__media {
    order: 2;
  }
  .history__item {
    grid-template-columns: 10rem 1fr; /* スマホでも少し広めに */
  }
  .history__era {
    padding: var(--space-md) var(--space-lg);
  }
}

/* タブレット幅でも会社概要を1カラム＋写真を下に */
@media (max-width: 1024px) {
  .company-info {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
  }
  .company-details { order: 1; }
  .company-image { order: 2; margin-top: var(--space-md); }
}

/* タブレット以下は1カラムに変更 */
@media (max-width: 1024px) {
  .history__wrap {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .history__media {
    order: 2; /* 写真をテキストの下へ */
  }
}

/* 大きめ画面で写真を追従（視認性向上） */
@media (min-width: 1200px) {
  .history__media {
    position: sticky;
    top: 100px;
  }
}

/* スマホでは年数を上・詳細を下に */
@media (max-width: 560px) {
  .history__item {
    grid-template-columns: 1fr;
  }
  .history__text {
    grid-column: auto; /* スマホでは年号がない行の余白を解消 */
  }
  .history__year {
    margin-bottom: .25rem;
  }
}