/* ===== 会社案内ページ ===== */

/* --- MESSAGEセクション --- */
.message-company {
  padding: 100px 0;
}
.message-company__heading {
  display: flex;
  align-items: center; /* 要素を中央揃えに */
  gap: 25px;
  margin-bottom: 60px; /* 下のコンテンツとの余白を広げる */

  background-color: var(--color-light); /* 白い背景 */
  padding: 20px 40px;
  border-left: 8px solid var(--color-accent-orange); /* オレンジの太い左枠線 */
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07); /* わずかに影をつけて浮かせる */
}
/* セクション番号 */
.section-number {
  font-size: 4rem;
  font-weight: 900;
  color: var(--color-accent-orange);
  line-height: 1;
  opacity: 0.2; /* 少し薄くしてデザインに馴染ませる */
}

/* セクションタイトル */
.message-company__heading h3 {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--color-dark);
}
.message-company__content {
  display: grid;
  /*
  grid-template-columns: 2fr 1fr;
  */
  gap: 50px;
  align-items: center;
}
.message-company__text h4 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 30px;
}
.message-company__text p {
  line-height: 2;
}
.message-company__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: #e0e0e0;
}
.message-company__image img {
  width: 100%;
}
/* --- COMPANY INFOセクション --- */
.company-info {
  padding: 100px 0;
}
.company-info__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 80px;
}
.company-info__main h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 50px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ddd;
}
.info-table {
  display: flex;
  flex-direction: column;
}
.info-row {
  display: flex;
  border-bottom: 1px solid #eee;
}
.info-row .label {
  background-color: #efefef;
  padding: 15px 20px;
  font-weight: 700;
  flex-basis: 180px; /* ラベルの幅を固定 */
  flex-shrink: 0;
}

.info-row .data {
  padding: 15px 20px;
  /* 親要素のspanのデフォルトの振る舞いをリセット */
  display: block;
}

.address-line {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.5em;
  /* ★ 文字サイズを一回り小さくする */
  font-size: 0.9rem;
  /* ★ 改行された際の行間を少し広げて読みやすくする */
  line-height: 1.7;
}
.address-line:last-child {
  margin-bottom: 0;
}

.address-prefix {
  flex-shrink: 0; /* 「関東：」などが縮まないようにする */
  margin-right: 0.5em; /* 「関東：」と「〒」の間に少し余白 */
  white-space: nowrap; /* 「関東：」が改行されないようにする */
}

.address-content {
  /* 長い単語がはみ出すのを防ぎ、適切に折り返すように設定 */
  word-break: break-word;
}
@media (max-width: 767px) {
  .info-row {
    /* ラベルとデータを縦に並べる */
    flex-direction: column;
  }

  .info-row .label {
    /* 固定幅を解除し、横幅いっぱいに広げる */
    flex-basis: auto;
    /* 縦積みに伴い、下のデータとの区切り線を追加 */
    border-bottom: 1px solid #eee;
  }

  .info-row .data {
    /* 縦積みになったので、左右の余白を少し詰める */
    padding: 15px 10px;
  }
}
.timeline {
  position: relative;
  padding-left: 30px;
  border-left: 3px solid #ddd;
}
/* ... 以降のCSSはそのまま ... */
.timeline {
  position: relative;
  padding-left: 30px;
  border-left: 3px solid #ddd;
}
.timeline-item {
  padding: 20px 0;
  position: relative;
}
.timeline-item::before {
  /* タイムライン上のドット */
  content: "";
  position: absolute;
  left: -38px;
  top: 28px;
  width: 12px;
  height: 12px;
  background-color: var(--color-primary); /* 仮のメインカラー */
  border-radius: 50%;
}
.timeline-item .year {
  font-weight: 900;
  display: block;
  margin-bottom: 5px;
}
.company-info__map-area {
  position: sticky;
  top: 120px;
  height: fit-content;
}
.map-container {
  position: relative;
  margin-top: 20px;
}
.map-container img {
  width: 100%;
  height: auto;
  display: block;
}
/* --- ポインター全体のレイアウトをFlexboxに変更 --- */
.map-pointer {
  position: absolute;
  /* ★★★ 座標の基準点をマーカーに合わせるための修正 ★★★ */
  transform: translate(-50%, -100%);

  /* Flexboxでマーカー(::before)とラベル(span)の順序と配置を制御 */
  display: flex;
  flex-direction: column-reverse; /* ★ラベルを上、マーカーを下にする */
  align-items: center; /* 水平方向の中央揃え */
}

/* --- ラベル(span)の調整 --- */
.map-pointer span {
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  color: var(--color-primary);
  background-color: rgba(255, 255, 255, 0.7);
  padding: 3px 8px;
  border-radius: 4px;
  display: block;
  text-align: center; /* テキスト揃えをspanに移動 */

  /* ★マーカーとの間に5pxの余白を確保 */
  margin-bottom: 5px;
}

/* --- マーカー(::before)の調整 --- */
.map-pointer::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--color-primary);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

  /* ★marginはspan側で制御するためリセット */
  margin: 0;
}


/* ========================================= */
/* 駐車場案内ポップアップ (CSSチェックボックス・ハック) */
/* ========================================= */

/* 非表示チェックボックスを完全に隠す */
.popup_trigger {
    display: none;
}

/* ポップアップのオーバーレイ（背景を暗くする部分） */
.popup_overlay {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒 */
    display: flex; /* 中央寄せのため */
    justify-content: center;
    align-items: center;
    opacity: 0; /* 最初は透明 */
    visibility: hidden; /* 最初は非表示 */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* アニメーション */
    z-index: 1000; /* 他のコンテンツより手前に表示 */
}

/* 背景クリックで閉じるための透明ラベルのスタイル */
.popup_background_close {
    position: absolute; /* 親(overlay)を基準に */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer; /* クリックできることを示す */
    z-index: 1001; /* 他の要素より手前、でも画像よりは後ろ */
}

/* ポップアップ本体のコンテナ */
.popup_wrap {
    position: relative;
    z-index: 1002;
    background-color: #fff; /* ポップアップ背景色 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: scale(0.9); /* 最初は少し縮小 */
    opacity: 0; /* 最初は透明 */
    transition: transform 0.3s ease, opacity 0.3s ease; /* アニメーション */
    /* 最大幅と高さを設定して、大きな画像でも画面からはみ出さないように */
    max-width: 95vw; 
    max-height: 95vh;
    overflow: auto; /* 内容が多い場合にスクロール可能に */
}

/* チェックボックスがチェックされたらポップアップを表示 */
.popup_trigger:checked + .parking-map-thumb-area + .popup_overlay {
    opacity: 1;
    visibility: visible;
}

.popup_trigger:checked + .parking-map-thumb-area + .popup_overlay .popup_wrap {
    transform: scale(1);
    opacity: 1;
}

/* 閉じるボタンのスタイル */
.close_btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2em;
    font-weight: bold;
    color: #fff; /* オーバーレイの色に合わせて白に */
    cursor: pointer;
    line-height: 1;
    z-index: 1003; /* ポップアップ画像より手前に */
}
/* ポップアップが開いているときは、閉じるボタンの色を暗い背景に合わせる */
.popup_trigger:checked + .parking-map-thumb-area + .popup_overlay .close_btn {
    color: #000000; 
}


/* 区画図を拡大ボタンのスタイル */
.open_btn {
    display: inline-block;
    padding: 8px 15px;
    background-color: #007bff; /* サイトのテーマカラー */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9em;
    margin-top: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.open_btn:hover {
    background-color: #0056b3;
}

/* サムネイル画像の下にボタンを配置するための調整 */
.parking-map-label-trigger {
    display: block; /* label要素全体がクリック領域になるように */
    cursor: pointer;
    text-align: center;
}
.parking-map-label-trigger img {
    margin-bottom: 10px; /* 画像とボタンの間の余白 */
}

/* 補足情報リストのスタイル (前回と同じ) */
.parking-notes {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
    font-size: 0.9em;
    color: #555;
    line-height: 1.6;
}
.parking-notes li {
    margin-bottom: 5px;
}

/* スマートフォンでの表示調整 */
@media (max-width: 768px) {
    .close_btn {
        top: 5px;
        right: 10px;
        font-size: 1.5em; /* スマホでは小さめに */
    }
    .popup_wrap {
        padding: 10px; /* スマホではパディングを減らす */
    }
}


/* レスポンシブ対応 */
@media (max-width: 991px) {
  .message-company__heading {
    padding: 15px 20px;
    gap: 15px;
  }
  .section-number {
    font-size: 3rem;
  }
  .message-company__heading h3 {
    font-size: 1.8rem;
  }
  .message-company__content,
  .company-info__grid {
    grid-template-columns: 1fr;
  }
  .company-info__map-area {
    position: static;
    margin-top: 50px;
  }
}

/* ===== CATCHPHRASE SECTION ===== */
.catchphrase {
  padding: 100px 0;
  text-align: center;
}

.catchphrase h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.6;
  margin-bottom: 30px;
}

.catchphrase p {
  font-size: 1.1rem;
  line-height: 2;
  max-width: 800px; /* 横幅が広がりすぎないように */
  margin-left: auto;
  margin-right: auto;
}
/* --- メッセージ署名欄 --- */
.message-signature {
  margin-top: 40px; /* 本文との間に余白を確保 */
  text-align: right; /* 右揃えで配置 */
  line-height: 1.5;
}

.message-signature .title {
  display: block; /* 改行させる */
  font-size: 1rem;
}

.message-signature .name {
  display: block; /* 改行させる */
  font-size: 1.8rem; /* 名前を大きく */
  font-weight: 700; /* 少し太く */
}
/* ★★★ 見出しアニメーションのための準備 ★★★ */
.message-company__text {
  /* 3D空間を定義 */
  perspective: 800px;
}

/* ★★★ 事業所マップエリアの見出し ★★★ */
.map-area-heading {
  margin-bottom: 30px; /* マップとの間に余白 */
  border-left: 4px solid var(--color-primary); /* メインカラーの左枠線 */
  padding-left: 20px;
}

.map-area-heading h2 {
  font-size: clamp(2.5rem, 6vw, 4rem); /* ダイナミックで大きなフォントサイズ */
  font-weight: 900;
  color: var(--color-primary); /* メインの青色に */
  line-height: 1;
  letter-spacing: 1px;
}

.map-area-heading p {
  font-weight: 700;
  margin-top: 5px;
  color: #555;
}

/* --- 既存のスタイル --- */
.company-info__map-area {
  position: sticky;
  top: 120px;
  height: fit-content;
}

.map-container {
  position: relative;
  margin-top: 20px;
}

/* ★★★ Google Mapセクション ★★★ */
.gmap-section {
  margin-top: 50px; /* 上のテーブルとの間に余白 */
}
.gmap-section h4 {
  /* 「アクセス」の見出し */
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ddd;
}

.gmap-grid {
  display: grid;
  /* PCでは2カラム表示 */
  grid-template-columns: 1fr 1fr;
  grid-template-columns: 1fr;
  gap: 30px; /* 地図と地図の間の余白 */
}

.gmap-wrapper h5 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.gmap-wrapper iframe {
  /* 影をつけて少し浮かせる */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

/* スマホ表示では縦積みにする */
@media (max-width: 767px) {
  .gmap-grid {
    grid-template-columns: 1fr; /* 1カラムに変更 */
  }
}

/* ===== 事業所マップの重なり解消（レイアウト修正版）===== */

/* 金沢・高岡のラベルを個別に調整 */
.pointer-kanazawa span,
.pointer-takaoka span {
  position: relative;
  /* 引き出し線の先端に来るように垂直位置を調整 */
  transform: translateY(-22px);
}

/* 金沢（左）のラベルを【左】にずらす */
.pointer-kanazawa span {
  transform: translateX(-70%) translateY(-22px);
  text-align: right;
}

/* 高岡（右）のラベルを【右】にずらす */
.pointer-takaoka span {
  transform: translateX(70%) translateY(-22px);
  text-align: left;
}

/* マーカーとラベルを繋ぐ引き出し線を追加 */
.pointer-kanazawa::after,
.pointer-takaoka::after {
  content: "";
  position: absolute;
  display: block;
  height: 25px; /* 線の長さ */
  width: 2px; /* 線の太さ */
  background-color: var(--color-primary);

  /* ★マーカーの中心から線が始まるように正確に配置 */
  bottom: 8px; /* マーカーの半径 (直径16px / 2) */
  left: 50%;

  transform-origin: bottom center; /* 下端を軸に回転 */
}

/* 金沢の引き出し線を【左】斜め上に */
.pointer-kanazawa::after {
  transform: translateX(-50%) rotate(-45deg);
}

/* 高岡の引き出し線を【右】斜め上に */
.pointer-takaoka::after {
  transform: translateX(-50%) rotate(45deg);
}