/* ========================================
   MESSAGE 代表ご挨拶
   ======================================== */
.company-message .common-title-left {
  padding: 0;
  margin-bottom: 20px;
}

.company-message h2 {
  font-size: 3.8rem;
}

@media screen and (max-width: 768px) {
  .company-message h2 {
    font-size: 2.6rem;
  }
}

/* テキストエリアと画像エリアを横並びにするコンテナ */
.company-message-inner {
  display: flex; /* 横並びレイアウトを実現 */
  flex-direction: column;
  align-items: center;
  max-width: 1190px;
  gap: 70px; /* 要素間の隙間を70px */
}

.company-message-inner .common-title-center {
  padding-bottom: 30px;
}

@media screen and (max-width: 768px) {
  .company-message-inner {
    margin-top: 0;
  }
}

/* テキストエリアと画像エリアを同じ幅に設定 */
.company-message-inner .text-area {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .company-message-inner .text-area {
    width: 100%;
  }
}

/* 代表者名の右寄せ設定 */
.company-message-description .president {
  display: flex; /* フレックスボックスレイアウトを使用 */
  justify-content: right; /* 右寄せ */
}

/* 代表者名のテキストスタイル */
.company-message-description .president p {
  font-size: 1.7rem; /* フォントサイズ16px（remはルート要素基準） */
  margin-top: 30px; /* 上部に30pxの余白 */
}

/* セクションタイトルのスタイル */
.company-message-inner .text-area .common-title-left {
  font-size: 3.8rem; /* 大きめのフォントサイズ36px */
  margin-bottom: 30px; /* 下部に30pxの余白 */
}

/* MESSAGE レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .company-message-inner {
    flex-direction: column;
    gap: 30px;
  }

  .company-message-inner .text-area .common-title-left {
    font-size: 2.6rem;
    margin-bottom: 20px;
  }

  .company-message-inner .text-area .common-title-left h2 {
    line-height: 1.4;
  }

  .company-message-description .text {
    font-size: 1.7rem;
    line-height: 1.8;
  }

  .company-message-inner .image-area {
    order: -1; /* 画像を上に配置 */
  }

  .company-message-inner .image-area img {
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 480px) {
  .company-message-inner .text-area .common-title-left {
    font-size: 2rem;
  }
}

/* ========================================
   COMPANY PROFILE 会社概要
   ======================================== */
/* 会社概要セクション全体のスタイル */
.company-info {
  background-image: url("/assets/images/common/bg-image01.png"); /* 背景画像を設定 */
  padding: 60px 60px; /* 上下に60pxの内側余白 */
  margin: 80px 0; /* 上下に80pxの外側余白 */
}

/* 会社情報テーブルの基本設定 */
.company-info .company-table {
  width: 100%; /* テーブルの幅を100%に */
  font-size: 1.8rem; /* フォントサイズ18px */
  border-collapse: collapse; /* セル間の隙間を無くす */
  margin: 45px 0; /* 上下に45px、左右に45pxの外側余白 */
  padding-bottom: 60px;
}

/* テーブルの各行（tr）のスタイル */
.company-info .company-table tr {
  width: 100%; /* 行の幅を100%に */
  border-bottom: 1px solid #002244; /* 下部に1pxの実線（紺色） */
  padding-bottom: 10px; /* 下部に10pxの内側余白 */
}

/* テーブルのヘッダー（項目名）セルのスタイル */
.company-info .company-table th {
  min-width: 200px; /* 最小幅を200pxに設定 */
  text-align: left; /* テキストを左寄せ */
  padding: 15px 20px; /* 上下15px、左右20pxの内側余白 */
  font-weight: 500; /* フォントの太さを中程度に */
}

/* テーブルのデータセルのスタイル */
.company-info .company-table td {
  padding: 15px 20px; /* 上下15px、左右20pxの内側余白 */
  font-weight: 500; /* フォントの太さを中程度に */
}

.glapf-image-area {
  display: flex; /* 横並びレイアウトを実現 */
  max-width: 1190px;
  margin: 0 auto;
}

.glapf-image-area img {
  width: 100%;
  height: auto;
}

/* COMPANY PROFILE レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .company-info {
    padding: 40px 0;
    margin: 60px 0;
  }

  .company-info .company-table {
    font-size: 1.7rem;
    margin-top: 30px;
  }

  .company-info .company-table th {
    min-width: auto;
    width: 30%;
    padding: 10px;
    font-size: 1.7rem;
    vertical-align: top;
  }

  .company-info .company-table td {
    padding: 10px;
    font-size: 1.7rem;
    word-break: break-word;
  }

  /* 長い住所の改行対応 */
  .company-info .company-table td strong {
    display: block;
  }

  .glapf-image-area {
    display: flex; /* 横並びレイアウトを実現 */
    margin: 0 auto;
    max-width: 100%;
  }

  .glapf-image-area img {
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 1300px) {
  .glapf-image-area {
    display: flex; /* 横並びレイアウトを実現 */
    max-width: 100%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 480px) {
  .company-info .company-table th,
  .company-info .company-table td {
    font-size: 1.7rem;
    padding: 8px;
  }
  .glapf-image-area {
    display: flex; /* 横並びレイアウトを実現 */
    max-width: 100%;
    margin: 0 auto;
  }
}

/* ========================================
   HISTORY 沿革
   ======================================== */
/* テーブルのラッパー（グラデーション用） */
.history-table-wrapper {
  position: relative; /* グラデーションオーバーレイの基準位置 */
  margin-top: 20px; /* 上部に20pxの余白 */
}

@media screen and (max-width: 768px) {
  .history-table-wrapper {
    margin-top: 0;
  }
}

/* 沿革テーブルの基本設定 */
.company-history-table {
  width: 100%; /* テーブルの幅を100%に */
  border-collapse: separate; /* セル間に隙間を設ける */
  border-spacing: 0 20px; /* 行間に20pxの隙間 */
}

/* テーブルボディのスタイル */
.company-history-table tbody {
  display: table; /* テーブルとして表示 */
  width: 100%; /* 幅を100%に */
}

/* テーブルの行のスタイル */
.company-history-table tr {
  display: table-row; /* 行として表示 */
}

/* テーブルのセルの基本スタイル */
.company-history-table td {
  padding: 15px 0; /* 上下15pxの内側余白 */
  vertical-align: top; /* 内容を上揃え */
  font-size: 1.7rem;
  color: #333; /* テキスト色をダークグレーに */
}

/* 年のセルのスタイル（左側の青い線付き） */
.company-history-table .year {
  min-width: 130px; /* 最小幅130px */
  font-weight: bold; /* 太字 */
  font-size: 1.9rem;
  border-left: 3px solid #007acc; /* 左側に3pxの青い実線 */
  padding-left: 30px; /* 左側に30pxの内側余白 */
  margin: 10px 0; /* 上下10pxの外側余白 */
}

/* 月のセルのスタイル */
.company-history-table .month {
  min-width: 60px; /* 最小幅60px */
  font-size: 1.9rem;
  font-weight: 500; /* フォントの太さを中程度に */
}

/* 内容のセルのスタイル */
.company-history-table .content {
  flex: 1; /* 利用可能な幅を使用 */
}

/* 初期状態で非表示 */
.company-history-table tr.history-hidden {
  display: none;
}

/* 展開時の表示 */
.company-history-table.history-expanded tr.history-hidden {
  display: table-row;
}

/* アニメーション用のスタイル */
.company-history-table tr.history-hidden td {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.company-history-table tr.history-hidden.hiding td {
  opacity: 0;
  transform: translateY(-5px);
}

.company-history-table tr.history-hidden.showing td {
  opacity: 1;
  transform: translateY(0);
}

/* グラデーションオーバーレイ */
.history-gradient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 30%,
    rgba(255, 255, 255, 0.9) 60%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* 展開時はグラデーションを非表示 */
.history-table-wrapper.expanded .history-gradient-overlay {
  opacity: 0;
}

/* HISTORY レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .company-history {
    margin: 60px auto;
  }

  .company-history-table {
    border-spacing: 0 15px;
  }

  .company-history-table td {
    font-size: 1.7rem;
    padding: 10px 0;
  }

  .company-history-table .year {
    min-width: 80px;
    font-size: 1.7rem;
    padding-left: 15px;
  }

  .company-history-table .month {
    min-width: 50px;
    font-size: 1.7rem;
  }

  .company-history-table .content {
    font-size: 1.7rem;
    line-height: 1.6;
  }

  /* もっと見るボタン */
  .history-toggle-btn {
    font-size: 1.7rem;
    padding: 10px 20px;
  }
}

@media screen and (max-width: 480px) {
  .company-history-table .year {
    min-width: 70px;
    font-size: 1.7rem;
  }

  .company-history-table .month {
    min-width: 45px;
    font-size: 1.7rem;
  }

  .company-history-table .content {
    font-size: 1.7rem;
  }
}

/* ========================================
   MAINTENANCE BASE メンテナンス拠点
   ======================================== */
/* メンテナンス拠点セクション全体のコンテナ */
.company-maintenance {
  margin-top: 60px; /* 上部に60pxの余白 */
}

/* テキストエリアと画像エリアを横並びにするコンテナ */
.company-maintenance-inner {
  display: flex; /* 横並びレイアウトを実現 */
  align-items: center; /* 垂直方向の中央揃え */
  gap: 70px; /* 要素間の隙間を70px */
  margin-top: 70px; /* 上部に70pxの余白 */
}

/* テキストエリアと画像エリアを同じ幅に設定 */
.company-maintenance-inner .text-area,
.company-maintenance-inner .image-area {
  flex: 1; /* 利用可能な幅を均等に分割 */
}

/* エリアマップリストのヘッダー（地域名）セルのスタイル */
.company-maintenance-inner .area-map-list th {
  min-width: 135px; /* 最小幅135px */
  text-align: left; /* テキストを左寄せ */
  font-size: 2.3rem;
  font-weight: bold; /* 太字 */
}

/* エリアマップリストのデータセルのスタイル */
.company-maintenance-inner .area-map-list td {
  font-size: 1.9rem;
}

/* MAINTENANCE BASE レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .company-maintenance {
    margin-top: 40px;
  }

  .company-maintenance .gray-text {
    font-size: 1.7rem;
    line-height: 1.6;
    display: block;
    margin-top: 10px;
  }

  .company-maintenance-inner {
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
  }

  .company-maintenance-inner .image-area {
    order: 1; /* 画像を下に配置 */
  }

  .company-maintenance-inner .image-area img {
    width: 100%;
    height: auto;
  }

  .company-maintenance-inner .area-map-list {
    width: 100%;
  }

  .company-maintenance-inner .area-map-list th {
    min-width: auto;
    width: 35%;
    font-size: 1.7rem;
    padding: 8px 10px 8px 0;
    vertical-align: top;
  }

  .company-maintenance-inner .area-map-list td {
    font-size: 1.7rem;
    padding: 8px 0;
    line-height: 1.6;
  }

  .company-maintenance-inner .area-map-list tr {
    border-bottom: 1px solid #e0e0e0;
  }

  .company-maintenance-inner .area-map-list tr:last-child {
    border-bottom: none;
  }
}

@media screen and (max-width: 480px) {
  .company-maintenance-inner .area-map-list th {
    font-size: 1.7rem;
  }

  .company-maintenance-inner .area-map-list td {
    font-size: 1.7rem;
  }
}

/* ========================================
   ACCESS アクセス
   ======================================== */
/* アクセスセクション全体のスタイル */
.company-access {
  background-image: url("/assets/images/common/bg-image01.png"); /* 背景画像を設定 */
  margin-top: 80px; /* 上部に80pxの外側余白 */
  padding-bottom: 50px;
}

/* マップとテキストエリアの横並びコンテナ */
.company-access-wrapper {
  gap: 20px; /* 要素間の隙間を20px */
  display: flex; /* 横並びレイアウトを実現 */
}

/* Googleマップの表示エリア */
.google-map {
  height: 320px; /* 高さを320pxに固定 */
  overflow: hidden; /* はみ出た部分を非表示 */
}

/* アクセス情報の見出しスタイル */
.company-access-wrapper .access h3 {
  font-size: 2.1rem;
}

/* アクセス情報のパラグラフスタイル */
.company-access-wrapper .access p {
  padding-top: 10px; /* 上部に10pxの内側余白 */
}

/* テキストエリアのレイアウト設定 */
.company-access-wrapper .text-area {
  display: flex; /* フレックスボックスレイアウト */
  flex-direction: column; /* 縦方向に配置 */
  justify-content: space-between; /* 上下に均等配置 */
  align-items: baseline; /* ベースラインで揃える */
}

.company-access-wrapper .access-button {
  display: flex; /* フレックスボックスで中身を配置 */
  align-items: center; /* 垂直方向の中央揃え */
  gap: 10px;
  max-width: 350px; /* 最大幅 */
  height: 58px; /* 高さ固定 */
  padding: 0 20px; /* 内側の余白 - 左右に30px */
  font-size: 2.1rem;
  font-weight: bold; /* 太字 */
  color: white; /* 白色 */
  background: #007acc; /* オレンジ色 - グラデーションが効かない場合の保険 */
  transition: all 0.3s ease; /* アニメーション設定 - 0.3秒かけてゆっくり変化 */
  cursor: pointer; /* カーソル設定 - マウスを乗せた時に指マークに */
  border: 1px solid transparent; /* 枠線 - 通常時は透明 */
  position: relative; /* ポジション設定 - 子要素の位置指定の基準点にする */
  overflow: hidden; /* はみ出た部分を隠す */
  margin-bottom: 20px;
}

.company-access-wrapper .text-area .guidance p {
  font-size: 1.7rem;
  font-weight: 500;
}

/* ACCESS レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .company-access {
    padding-top: 20px;
    padding-bottom: 40px;
    margin-top: 60px;
  }

  .company-access-wrapper {
    flex-direction: column;
    gap: 30px;
    margin-top: 0;
  }

  .google-map {
    width: 100%;
    height: 250px;
  }

  .google-map iframe {
    width: 100%;
    height: 100%;
    margin-top: 0;
  }

  .company-access-wrapper .text-area {
    gap: 20px;
  }

  .company-access-wrapper .access h3 {
    font-size: 1.9rem;
  }

  .company-access-wrapper .access p {
    font-size: 1.7rem;
    line-height: 1.6;
  }

  .company-access-wrapper .access-button {
    max-width: 100%;
    height: 50px;
    font-size: 1.9rem;
    padding: 0 20px;
    justify-content: center;
  }

  .company-access-wrapper .access-button img {
    width: 20px;
    height: 20px;
  }

  .company-access-wrapper .text-area .guidance p {
    font-size: 1.7rem;
  }
}

@media screen and (max-width: 480px) {
  .google-map {
    height: 200px;
  }

  .company-access-wrapper .access h3 {
    font-size: 1.7rem;
  }

  .company-access-wrapper .access-button {
    height: 45px;
    font-size: 1.7rem;
    padding: 0 15px;
  }

  .company-access-wrapper .access-button img {
    width: 18px;
    height: 18px;
  }
}

/* companyページのみfooter上の余白を削除する */
.footer {
  margin-top: 0; /* フッター上部の余白をゼロに */
}