@charset "utf-8";

/* =========================================================
   都道府県別花火一覧ページ CSS
   PrefPageBatchMain_full_dayevent_aligned_replacement.java 対応版
   - DayEvent 側カードデザインへ寄せる
   - 既存 multi-days / update-info も統合
   ========================================================= */

/* ---------- 上部導入文 ---------- */
.pref-intro {
  margin: 10px 0 0;
  font-size: 0.98rem;
  line-height: 1.8;
  color: #333;
}

.notice-past-events {
  margin: 16px 0 22px;
  padding: 14px 16px;
  background: #fff7e8;
  border: 1px solid #f0ddb2;
  border-radius: 8px;
  line-height: 1.8;
  font-size: 0.95rem;
}

.notice-past-events p {
  margin: 0;
}

.notice-past-events p + p {
  margin-top: 8px;
}

/* ---------- セクション ---------- */
.hanabi-section {
  margin: 0 0 24px;
}

.hanabi-month {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #de6c6c;
  color: #fff;
  border-radius: 4px;
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: bold;
}

.hanabi-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hanabi-item {
  margin: 0 0 14px;
  padding: 0;
}

/* ---------- カード本体 ---------- */
.hanabi-content {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.hanabi-text {
  flex: 1 1 auto;
  min-width: 0;
}

.hanabi-date-wrap {
  margin: 0 0 8px;
}

.hanabi-date {
  display: inline-block;
  line-height: 1.4;
}

.hanabi-header {
  margin: 0 0 10px;
}

.hanabi-title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  font-weight: bold;
}

.hanabi-title a {
  color: #222;
  text-decoration: none;
}

.hanabi-title a:hover {
  text-decoration: underline;
}

.hanabi-details {
  font-size: 0.95rem;
  color: #333;
}

.hanabi-details p {
  margin: 0 0 7px;
  line-height: 1.75;
  word-break: break-word;
}

.hanabi-details p:last-child {
  margin-bottom: 0;
}

.hanabi-details a {
  color: #1a5fb4;
  text-decoration: underline;
}

.hanabi-details a:hover {
  opacity: 0.85;
}

.hanabi-image {
  flex: 0 0 160px;
  width: 160px;
}

.hanabi-image a {
  display: block;
}

.hanabi-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

/* ---------- 複数日開催 ---------- */
.multi-days-wrap {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 10px 0;
}

.multi-days-label {
  margin-right: 8px;
  white-space: nowrap;
  font-weight: bold;
  line-height: 2;
}

.multi-days {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
}

.multi-days li {
  margin: 0;
  padding: 0;
}

.multi-days li a {
  display: inline-block;
  background-color: #eef5ff;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: #0073aa;
  font-size: 0.93em;
  line-height: 1.5;
}

.multi-days li a:hover {
  background-color: #d0e7ff;
  text-decoration: none;
}

.multi-link {
  display: inline-block;
  background-color: #eef5ff;
  padding: 3px 8px;
  border-radius: 6px;
  text-decoration: none !important;
  color: #0073aa !important;
  font-size: 0.93em;
  line-height: 1.5;
  margin: 0;
  vertical-align: middle;
}

.multi-link:hover {
  background-color: #d0e7ff;
}

/* ---------- メインビジュアル ---------- */
.main-visual {
  margin: 0 0 18px;
}

.main-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.photo-credit {
  margin: 8px 0 0;
  font-size: 0.88rem;
  color: #666;
}

/* ---------- 更新情報 ---------- */
.update-info {
  margin: 1rem 0;
  padding: 0.65rem 0.9rem;
  background-color: #f5f5f5;
  border-left: 3px solid #e88e8e;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #333;
  line-height: 1.7;
}

.update-info p {
  margin: 0;
}

.update-info p + p {
  margin-top: 4px;
}

/* ---------- ライター情報（共通メソッド出力を想定した最低限の見た目調整） ---------- */
.author-box,
.writer-box,
.profile-box {
  margin: 18px 0;
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 900px) {
  .pref-intro {
    font-size: 0.94rem;
    line-height: 1.75;
  }

  .notice-past-events {
    padding: 12px 14px;
    font-size: 0.92rem;
  }

  .hanabi-month {
    font-size: 0.96rem;
    padding: 9px 10px;
  }

  .hanabi-content {
    display: block;
    padding: 14px;
  }

  .hanabi-title {
    font-size: 0.98rem;
    line-height: 1.6;
  }

  .hanabi-details {
    font-size: 0.92rem;
  }

  .hanabi-image {
    width: 100%;
    margin-top: 12px;
  }

  .multi-days-wrap {
    display: block;
  }

  .multi-days-label {
    display: block;
    margin: 0 0 6px;
    line-height: 1.6;
  }

  .multi-days {
    gap: 6px;
  }

  .multi-days li a,
  .multi-link {
    font-size: 0.9em;
    padding: 5px 8px;
  }
}

/* 都道府県ページの花火カードタイトルは共通の #main h3 装飾を打ち消す */
#main .hanabi-title {
  clear: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 1.02rem;
  line-height: 1.65;
  font-weight: bold;
}

#main .hanabi-title a {
  display: inline;
  text-decoration: none;
}

#main .hanabi-title a:hover {
  text-decoration: underline;
}

/* ===============================
   日付の太さ統一（重要）
=============================== */
.hanabi-date h5bk,
.hanabi-date h5b,
.hanabi-date h5g,
.hanabi-date h5gr {
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 700; /* ← 太さを統一 */
  line-height: 1.4;
}

/* 色だけ維持（既存の意図を残す） */
.hanabi-date h5bk { color: #111; }
.hanabi-date h5g  { color: #111; }

.hanabi-date h5b  { color: #1a2ea6; }
.hanabi-date h5gr { color: #1a2ea6; }
.pref-calendar-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0 20px;
}

.pref-calendar-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78px;
  padding: 14px 16px;
  border-radius: 10px;
  text-decoration: none;
  box-sizing: border-box;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.pref-calendar-card:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.pref-calendar-card-current {
  background: #e88484;
  border: 1px solid #d77272;
  color: #fff;
}

.pref-calendar-card-prev {
  background: #f3f3f3;
  border: 1px solid #d8d8d8;
  color: #333;
}

.pref-calendar-card-year {
  display: block;
  font-size: 1.05rem;
  font-weight: bold;
  line-height: 1.3;
}

.pref-calendar-card-title {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  line-height: 1.45;
}

@media screen and (max-width: 600px) {
  .pref-calendar-links {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pref-calendar-card {
    min-height: 70px;
    padding: 12px 14px;
  }

  .pref-calendar-card-year {
    font-size: 1rem;
  }

  .pref-calendar-card-title {
    font-size: 0.86rem;
  }
}

/* ===============================
   複数日開催：月別カラー制御
=============================== */

/* 当月（現状維持ベース） */
.multi-days li a.multi-month-current {
  background-color: #eef5ff;
  color: #0073aa;
}

/* 翌月（少しグリーン寄り） */
.multi-days li a.multi-month-next1 {
  background-color: #e8f5e9;
  color: #2e7d32;
}

/* 翌々月（少しオレンジ寄り） */
.multi-days li a.multi-month-next2 {
  background-color: #fff3e0;
  color: #b26a00;
}

/* hoverも少し変化させる */
.multi-days li a.multi-month-next1:hover {
  background-color: #c8e6c9;
}

.multi-days li a.multi-month-next2:hover {
  background-color: #ffe0b2;
}

.multi-days li a.multi-month-prev1 {
  background-color: #f3e8ff;
  color: #7b1fa2;
}

.multi-days li a.multi-month-prev2 {
  background-color: #e0f2f1;
  color: #00695c;
}

.multi-days li a.multi-month-prev1:hover {
  background-color: #e1bee7;
}

.multi-days li a.multi-month-prev2:hover {
  background-color: #b2dfdb;
}

/* =========================================
   PrefPage OSM map - DayEvent準拠
   ========================================= */

.hanabi-map-wrap {
  position: relative;
  margin: 12px 0 0;
}

.pref-hanabi-map {
  width: 100%;
  height: 50vh;
  max-height: 500px;
  min-height: 360px;
  touch-action: none;
}

.map-label-toggle-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  padding: 8px 12px;
  border: 1px solid #cfcfcf;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.map-label-toggle-btn:hover {
  background: #f7f7f7;
}

.custom-marker {
  max-width: 80vw;
  word-break: break-word;
}

.marker-label {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  padding: 4px 6px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  max-width: 120px;
  text-align: left;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 1.3;
}

.marker-date {
  font-weight: bold;
  color: #d63384;
  font-size: 11px;
  margin-bottom: 2px;
}

.marker-title {
  color: #333;
  font-size: 11px;
}

.marker-icon {
  width: 40px;
  height: 40px;
}

.pref-hanabi-map.labels-hidden .marker-label {
  visibility: hidden;
}

.map-tap-note {
  margin: 8px 0 14px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
}

@media screen and (max-width: 480px) {
  .pref-hanabi-map {
    height: 52vh;
    min-height: 340px;
  }

  .map-label-toggle-btn {
    top: 8px;
    right: 8px;
    padding: 7px 10px;
    font-size: 12px;
  }
}

.map-month-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}

.map-month-btn {
  padding: 7px 12px;
  border: 1px solid #d7d7d7;
  background: #fff;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
}

.map-month-btn.active {
  background: #e45f63;
  color: #fff;
  border-color: #d64f54;
}