/*--------------------------------------------------
  page-about.css
  ──────────────────────────────────────────────────
  ABOUT ページ専用のスタイル
--------------------------------------------------*/

/* 1. .container 配下はテキストを左寄せにしたい場合 */
.container {
  text-align: left;
  /* 見出し以外は左寄せ */
  color: #0B1A70;
  /* 全体の文字色をネイビーブルー寄りに */
}

/* 2. ページタイトル、サブタイトルを中央寄せかつ色を濃いネイビーに */
.pages-title {
  font-size: 2.5rem;
  /* お好みで調整可 */
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
  color: #0B1A70;
}

.pages-subtitle {
  font-size: 1.5rem;
  margin-bottom: 30px;
  text-align: center;
  color: #0B1A70;
}

/* 3. イベントロゴ（SVG）を中央寄せしつつ適度な余白 */
.about-logo {
  display: block;
  margin: 0 auto 40px;
  max-width: 300px;
  /* お好みでサイズを変更可 */
}

/* 4. 共通「項目＋本文」ブロック */
.about-info {
  display: flex;
  padding: 15px 0;
}

.about-info-title {
  width: 200px;
  /* 「公演日時」「公演場所」などの幅を揃える */
  font-size: 1.25rem;
  font-weight: bold;
  color: #0B1A70;
}

.about-info-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #333333;
  /* 本文はダークグレーで読みやすく */
}

.about-info-text span.small-text {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  color: #555555;
}

/* 5. 会場地図（Google Maps embed） */
.about-info-map {
  margin: 30px 0;
  text-align: center;
}

.about-info-map iframe {
  width: 100%;
  max-width: 600px;
  /* 最大横幅を制限 */
  height: 400px;
  /* 高さも固定 */
  border: 0;
}

/* 6. 「アクセス」見出し */
.about-access-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 10px;
  text-align: left;
  color: #0B1A70;
}

/* 7. アクセス詳細リスト */
.access-list {
  list-style: disc inside;
  /* リストマークを表示 */
  margin-left: 20px;
  color: #333333;
}

.access-list li {
  margin-bottom: 8px;
  line-height: 1.5;
}

/* page-about.css の最後に追記してください */

@media screen and (max-width: 768px) {

  /* .about-info を縦並び（１列）にする */
  .about-info {
    flex-direction: column;
    padding: 10px 0;
    /* 若干パディングを調整 */
  }

  /* タイトル部分を幅100%にして、下に余白をつける */
  .about-info-title {
    width: 100%;
    margin-bottom: 6px;
    font-size: 1.125rem;
    /* 必要に応じてフォントサイズを少し縮小 */
  }

  /* 本文部分も幅100%に */
  .about-info-text {
    width: 100%;
    font-size: 0.95rem;
    /* 若干フォントを小さくしてもよい */
    line-height: 1.5;
  }

  /* Google Maps iframe の高さをスマホ向けに少し抑える */
  .about-info-map iframe {
    height: 250px;
    /* もとの400px → 250px に変更 */
  }

  /* .about-logo（イベントロゴ）のサイズ調整 */
  .about-logo {
    max-width: 200px;
    /* もとの300px → 200px に縮小 */
    margin-bottom: 30px;
  }

  /* ページタイトル／サブタイトルのフォントサイズを調整 */
  .pages-title {
    font-size: 2rem;
    margin-bottom: 6px;
  }

  .pages-subtitle {
    font-size: 1.25rem;
    margin-bottom: 20px;
  }
}