@charset "utf-8";


/* --- 2. レイアウト構造 --- */
.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 20px;
}

/* 2ページ目以降で横いっぱいに広げるための設定 */
.full-width-container {
  display: block; /* Flexを解除して1カラムに */
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 20px;
}

.full-width-container .main-content {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
}

/* --- 3. ページ共通の装飾パーツ --- */
  .page-detail {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 15px;
  }

  .detail-title {
    font-size: 28px;
    color: #002D06;
    border-bottom: 2px solid #002D06;
    padding-bottom: 10px;
    margin-bottom: 15px; /* 下のサブタイトルとの距離を縮める */
    text-align: center;
  }

.detail-subtitle {
  font-size: 22px;
  color: #a02020;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
}

  .page-intro-subtitle {
    font-size: 18px;
    color: #333;
    text-align: center;
    margin-bottom: 10px; /* セクション開始までの距離 */
    font-weight: 500;
    letter-spacing: 0.1em;
  }
  
    /* 各セクションの設定 */
  .photo-section {
    margin-bottom: 60px;
  }

  .detail-subtitle-main {
    font-size: 22px;
    color: #a02020;
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
  }

  .detail-subtitle-sub {
    font-size: 15px;
    color: #555;
    margin-bottom: 30px;
    text-align: center;
    font-weight: normal;
  }

  .photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .photo-item {
    width: calc(50% - 10px);
  }

  .photo-item img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  .photo-caption {
    font-size: 13px;
    color: #666;
    margin-top: 10px;
    text-align: center;
  }

/* 共通の角丸・影（写真や地図、ボックス用） */
.common-card-style {
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* --- 4. 各ページ固有のレイアウトパーツ --- */

/* 5ページ目：横並び（PC） */
.intro-flex-container {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 50px;
  background-color: #f9fbfb;
  padding: 40px;
  border-radius: 15px;
}

/* 6ページ目：地図 */
.map-container iframe {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* --- 5. スマホ対応 --- */
@media screen and (max-width: 768px) {
  .container, .full-width-container {
    padding: 10px 15px;
  }
  
   .photo-item { width: 100%; }
    .page-intro-subtitle { font-size: 15px; margin-bottom: 40px; }
  
  .intro-flex-container {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
  }
  
  .detail-title { font-size: 24px; }
}

/* --- 以下、既存のHeader/Footer/News/Navのスタイルを維持 --- */