/* =============================================================================
   周辺環境ページ
   Figma: node-id=60:442 / 周辺環境 PC
   ============================================================================= */

/* =============================================================================
   ページコンテンツ（セクション共通コンテナ）
   ============================================================================= */

.page-content--access {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  width: 100%;
}

/* =============================================================================
   各セクション
   ============================================================================= */

.access-section {
  display: flex;
  flex-direction: column;
  gap: var(--margin-24);
  width: 100%;
}

/* =============================================================================
   イントロテキスト
   ============================================================================= */

.access-intro {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* =============================================================================
   Google マップ
   ============================================================================= */

.access-map {
  width: 100%;
  height: 480px;
  overflow: hidden;
}

.access-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =============================================================================
   施設画像グリッド（2×2）
   ============================================================================= */

.access-facility-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--margin-24);
  width: 100%;
}

/* =============================================================================
   SP レスポンシブ（max-width: 1023px）
   ============================================================================= */

@media (max-width: 1023px) {
  /* セクション間 gap を --gap-main-area-top（32px）に合わせる */
  .page-content--access {
    gap: var(--gap-main-area-top);
  }

  /* マップの高さを SP 向けに縮小 */
  .access-map {
    height: 300px;
  }

  /* 施設画像グリッドを1列に */
  .access-facility-grid {
    grid-template-columns: 1fr;
  }
}