/*
 Theme Name:   Divi Child
 Description:  Diviの子テーマ
 Template:     Divi
 Version:      1.0.0
*/

@charset "utf-8";

/* ===== 見出しスタイル ===== */
#currentMonthHeading {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 1em auto;
  padding: 0.5em 1em;
  color: #fff;
  background-color: #1a1a1a;
  display: inline-block;
  border-radius: 6px;
}

/* ===== セクション全体 ===== */
.schedule-section {
  margin-bottom: 80px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
}
.schedule-section .intro-text {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1em;
  color: #ccc;
}
.schedule-item {
  background-color: #1a1a1a;
  margin-bottom: 30px;
  border-radius: 6px;
  overflow: hidden;
}
.date-bar {
  background-color: #333;
  padding: 16px 20px;
  font-weight: bold;
  font-size: 1rem;
  color: #fff;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* ===== スケジュール要約 ===== */
.summary {
  display: flex;
  flex-direction: row;
  padding: 20px;
  background-color: #2a2a2a;
}
.summary .text-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ===== トグルボタン ===== */
.toggle-button {
  background-color: #444;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 6px 16px;
  border-radius: 4px;
  margin-top: 20px;
  text-align: center;
  display: block;
  transition: background-color 0.3s ease;
}
.toggle-button:hover {
  background-color: #666;
}
.toggle-button .arrow {
  font-size: 1.2rem;
}

/* ===== 詳細セクション ===== */
.details {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.4s ease, opacity 0.4s ease;
}
.details.open {
  opacity: 1;
}

/* ===== ギャラリーコンテナ（共通） ===== */
.image-gallery {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* ===== ギャラリーモード（高さ自然） ===== */
.image-gallery.gallery .image-card {
  width: 300px;
  height: auto;
}

/* ===== 整列モード（高さ固定） ===== */
.image-gallery.uniform .image-card {
  width: 300px;
  height: 400px;
}

/* ===== 共通カードスタイル ===== */
.image-card {
  background-color: #222;
  border: 1px solid #444;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 30px;
}

/* ===== 画像スタイル（共通） ===== */
.image-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* ===== 拡大表示アイコン ===== */
.zoomable {
  position: relative;
  display: inline-block;
  cursor: zoom-in;
}
.zoomable img {
  transition: transform 0.3s ease;
}
.zoomable:hover img {
  transform: scale(1.02);
}
.zoom-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 1.1rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
}

/* ===== 補足テキスト ===== */
.details p.extra {
  font-size: 1rem;
  color: #ddd;
  margin: 1em auto;
  max-width: 600px;
  line-height: 1.6;
  text-align: center;
}

/* ===== 無効画像を非表示 ===== */
.details img[src=""],
.details img:not([src]),
.details img[src="null"],
.details img[src="#"],
.details img[src="undefined"] {
  display: none;
}

/* ===== レスポンシブ対応 ===== */
@media screen and (max-width: 768px) {
  .summary {
    flex-direction: column;
  }
  .image-gallery {
    flex-direction: column;
    align-items: center;
  }
  .image-gallery .image-card {
    width: 100% !important;
    height: auto !important;
  }
}
@media screen and (max-width: 480px) {
  .image-gallery img {
    width: 100%;
  }
}