@charset "utf-8";

/* Extracted feature; retain declaration order, no legacy core dependency. */
.cycleFireworks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cycleFireworks li {
  display: inline-block;
  margin-right: 5px;
  white-space: nowrap;
}
.cycleFireworks li:not(:last-child)::after { content: "、"; }
.cycleFireworks li a { color: #0073e6; text-decoration: none; }
.cycleFireworks li a:hover { text-decoration: underline; }
.canceled { color: red; font-weight: bold; margin-left: 4px; }

.legacy-breadcrumb-page .hanabi-ad-container {
  display: block;
  width: 100%;
  min-height: 280px;
  margin: 16px 0;
  text-align: center;
}
.legacy-breadcrumb-page .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.legacy-breadcrumb-page .breadcrumb a { color: #1769aa; text-decoration: none; }
.legacy-breadcrumb-page .breadcrumb a:hover { text-decoration: underline; }
.legacy-breadcrumb-page .breadcrumb li:last-child span { font-weight: 700; color: #344a62; }
@media (max-width: 900px) {
  .cycleFireworks,
  .legacy-breadcrumb-page .breadcrumb { font-size: 14px; padding: 5px; }
}

/* ナビゲーション全体 */
/* Keep this before the base navigation rules, matching the original cascade. */
@media screen and (max-width: 600px) {
  .navigation { text-align: center; }
  .prev, .next { margin: 5px 0; }
}

.navigation {
  display: flex;
  justify-content: space-between; /* 前日を左、翌日を右に配置 */
  align-items: center; /* 縦方向の中央揃え */
  background-color: #e29399; /* 背景色 */
  padding: 5px 20px; /* 内側の余白 */
  border-radius: 5px; /* 角を丸くする */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

/* 共通のリンクスタイル */
.nav-link {
  text-decoration: none; /* 下線を削除 */
  color: #ffffff; /* 文字色を白に */
  font-size: 16px;
  font-weight: bold;
  padding: 8px 12px; /* ボタン風の余白 */
  border: 1px solid transparent; /* 初期状態でボーダーなし */
  border-radius: 5px; /* ボタンの角を丸くする */
  background-color: #d86c73; /* ボタン背景色 */
  transition: all 0.3s ease; /* ホバー時のスムーズな効果 */
}

/* ホバー時のリンクスタイル */
.nav-link:hover {
  background-color: #c3545d; /* ホバー時の濃い背景色 */
  border: 1px solid #c3545d; /* ボーダーも同色に */
  color: #ffffff; /* ホバー時も文字色は白 */
}

/* 無効化された前日・翌日のラベル */
.nav-label {
  display: inline-block;
  color: #7b4a4f; /* 無効化されたリンクの文字色（薄い赤系） */
  font-size: 16px;
  font-weight: bold;
  padding: 8px 12px; /* リンクと同じ余白 */
  background-color: #f5d0d3; /* 無効化時の背景色（薄いピンク） */
  border: 1px solid #e4a3a8; /* ボーダーも薄い赤系に */
  border-radius: 5px; /* 角を丸くする */
  cursor: default; /* カーソルを無効状態に */
  text-align: center; /* テキストを中央揃え */
}

/* 左側の前日リンクまたはラベル */
.prev {
  margin-right: auto; /* 左寄せ */
  text-align: left;
}

/* 右側の翌日リンクまたはラベル */
.next {
  margin-left: auto; /* 右寄せ */
  text-align: right;
}

/* 中央またはラベル */
.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: block; /* または flex 子要素に応じて inline-block でもOK */
}

.small-font {
    font-size: 0.8em; /* 必要に応じて調整 */
}

/* ボタンのコンテナ */
.button-container {
    display: flex;
    justify-content: center; /* ボタンを中央揃え */
    gap: 15px; /* ボタン間のスペース */
    margin-top: 20px;
}

/* ボタンのデザイン */
.button-container input[type="submit"],
.button-container button {
    padding: 12px 24px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    background: #0073e6;
    color: white;
    cursor: pointer;
    transition: background 0.3s ease;
    min-width: 150px; /* 幅を統一 */
    text-align: center;
}

.button-container input[type="submit"]:hover,
.button-container button:hover {
    background: #005bb5;
}

/* スマホ向けレイアウト調整 */
@media screen and (max-width: 767px) {
    .button-container {
        flex-direction: column; /* スマホでは縦並び */
    }

    .button-container input[type="submit"],
    .button-container button {
        width: 100%; /* スマホではボタンを横幅いっぱいに */
    }
}