/*/* ===================================
/*   吉日カレンダーページ レイアウト調整
/*   =================================== */
/*
/*/
* カレンダーコンテンツの最大幅設定 */
/*body.page-template-page-lucky-calendar .lucky-calendar-content {
/*  max-width: 100%;
/*  padding: 20px;
/*}
/*
/*/
* カレンダーコンテナの幅調整 */
/*body.page-template-page-lucky-calendar .calendar-container {
/*  width: 100%;
/*  max-width: none;
/*}
/*
/*/
* レスポンシブ対応 */

/*@media (max-width: 768px) {
/*  body.page-template-page-lucky-calendar .lucky-calendar-content {
/*    padding: 10px 5px;
/*  }
/*}
/*
/*@media (max-width: 375px) {
/*  body.page-template-page-lucky-calendar .lucky-calendar-content {
/*    padding: 8px 3px;
/*  }
/*}


/* カレンダーテーブル */
.calendar-table {
  width: 100%;
  max-width: 100%;
}


/* ============================
   基本設定とリセット
   ============================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* 配色 */
  --bg: #ffffff;
  /* 変更: #0b0c10（暗黒） → #ffffff（白） */
  --surface: #f8f9fa;
  /* 変更: #111318（暗灰） → #f8f9fa（薄灰） */
  --muted: #6c757d;
  /* 変更: #9aa3ad（明灰） → #6c757d（中灰） */
  --text: #212529;
  /* 変更: #e8ebef（白系） → #212529（濃灰） */
  --accent: #0066cc;
  /* 変更: #3ea6ff（明青） → #0066cc（標準青） */
  --warning: #ffc107;
  /* 変更: #ffd36e（薄黄） → #ffc107（標準黄） */
  --ok: #28a745;
  /* 変更: #66d9a8（薄緑） → #28a745（標準緑） */
  --error: #dc3545;
  /* 変更: #ff6b6b（薄赤） → #dc3545（標準赤） */

  /* レイアウト */
  --radius: 16px;
  --space: 16px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --maxw: 1400px;
  /* 変更: 1024px → 1400px */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans JP", sans-serif;

  /* トランジション */
  --transition: 0.3s ease;

  /* ヘッダー＆サイドメニュー - 正確な高さ */
  --header-h: 72px;
  --header-h-mobile: 60px;
  --side-w: 220px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ============================
   タイポグラフィ
   ============================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space);
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.1rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin-bottom: var(--space);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  opacity: 0.8;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

ul,
ol {
  margin-left: calc(var(--space) * 1.5);
  margin-bottom: var(--space);
}

/* ============================
   ユーティリティクラス
   ============================ */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space);
}

/* ============================
   コンポーネント: ヘッダー
   ============================ */
.c-header {
  background: var(--surface);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow);
}

.c-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space) 0;
}

.c-header__logo {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text);
}

.c-header__logo img {
  height: 40px;
  width: auto;
}

.c-header__nav {
  display: flex;
  align-items: center;
}

.c-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.c-header__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  margin: 3px 0;
  transition: var(--transition);
}

.c-header__menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: calc(var(--space) * 1.5);
}

.c-header__menu a {
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  transition: var(--transition);
}

.c-header__menu a:hover,
.c-header__menu a.active {
  background: rgba(62, 166, 255, 0.1);
  color: var(--accent);
}

/* ============================
   コンポーネント: フッター
   ============================ */
.c-footer {
  background: var(--surface);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: calc(var(--space) * 4);
  padding: calc(var(--space) * 2) 0;
}

.c-footer__disclaimer {
  padding: var(--space);
  background: rgba(255, 211, 110, 0.1);
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  margin-bottom: calc(var(--space) * 2);
}

.c-footer__disclaimer p {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
}

.c-footer__nav ul {
  display: flex;
  list-style: none;
  margin: 0 0 var(--space) 0;
  padding: 0;
  gap: calc(var(--space) * 2);
  flex-wrap: wrap;
}

.c-footer__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  color: var(--muted);
}

.c-footer__update,
.c-footer__copyright {
  margin: 0;
}

/* ============================
   コンポーネント: ボタン
   ============================ */
.c-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  background: var(--surface);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.c-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.c-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.c-btn--primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.c-btn--secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.c-btn--tertiary {
  background: var(--ok);
  color: var(--bg);
  border-color: var(--ok);
}


.c-btn--small {
  padding: 8px 16px;
  font-size: 0.9rem;
}

.c-btn--block {
  width: 100%;
}

.c-btn small {
  font-size: 0.8em;
  opacity: 0.8;
  margin-top: 4px;
}

/* ============================
   コンポーネント: カード
   ============================ */
.c-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: var(--transition);
  position: relative;
}

.c-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.c-card__body {
  padding: calc(var(--space) * 1.5);
}

.c-card__title {
  margin-bottom: var(--space);
  font-size: 1.25rem;
}

.c-card__text {
  color: var(--muted);
  margin-bottom: var(--space);
}

.c-card--pr {
  border: 1px dashed var(--warning);
  background: linear-gradient(135deg, var(--surface), rgba(255, 211, 110, 0.05));
}

.c-card__pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space);
  margin: var(--space) 0;
  font-size: 0.9rem;
}

.c-card__pros-cons .pros {
  color: var(--ok);
}

.c-card__pros-cons .cons {
  color: var(--warning);
}

.c-card__pros-cons ul {
  margin: 8px 0 0 20px;
}


/* ============================
   コンポーネント: グリッド
   ============================ */
.c-grid {
  display: grid;
  gap: calc(var(--space) * 1.5);
  margin-bottom: calc(var(--space) * 2);
}

.c-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.c-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ============================
   コンポーネント: アラート
   ============================ */
.c-alert {
  padding: var(--space);
  border-radius: var(--radius);
  margin-bottom: calc(var(--space) * 1.5);
  border: 1px solid;
}

.c-alert--warning {
  background: rgba(255, 211, 110, 0.1);
  border-color: var(--warning);
  color: var(--text);
}

.c-alert--info {
  background: rgba(62, 166, 255, 0.1);
  border-color: var(--accent);
  color: var(--text);
}

.c-alert--primary {
  background: rgba(62, 166, 255, 0.15);
  border-color: var(--accent);
  color: var(--text);
}

.c-alert p:last-child {
  margin-bottom: 0;
}

/* ============================
   コンポーネント: ツールチップ
   ============================ */
.c-tooltip {
  position: absolute;
  background: var(--surface);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  z-index: 1000;
  pointer-events: none;
  max-width: 250px;
}

/* ============================
   ページ固有: ヒーロー
   ============================ */
.hero {
  padding: calc(var(--space) * 4) 0;
  text-align: center;
  background: linear-gradient(135deg, var(--surface), var(--bg));
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: var(--space);
  background: linear-gradient(135deg, var(--accent), var(--ok));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__sub {
  color: var(--warning);
  font-size: 1.1rem;
  margin-bottom: calc(var(--space) * 2);
}

.hero__actions {
  display: flex;
  gap: var(--space);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: calc(var(--space) * 2);
}

.hero__note {
  color: var(--muted);
  font-style: italic;
}

/* ============================
   ページ固有: セクション
   ============================ */
.section {
  padding: calc(var(--space) * 3) 0;
}

.section--alt {
  background: var(--surface);
}

.section__title {
  text-align: center;
  margin-bottom: calc(var(--space) * 2);
}

.section__footer {
  text-align: center;
  margin-top: calc(var(--space) * 2);
}

/* ============================
   ページ固有: 数字生成
   ============================ */


.page-title {
  text-align: center;
  margin-bottom: var(--space);
  /* 上の実線 */
  border-top: 2.5px solid #000000;
  padding-top: 1.5rem;
}

.page-lead {
  text-align: center;
  color: var(--muted);
  margin-bottom: calc(var(--space) * 2);
  /* 下の実線 */
  border-bottom: 2.5px solid #000000;
  padding-bottom: 1.5rem;
}

.toggle-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toggle-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.toggle-switch {
  position: relative;
  width: 48px;
  height: 24px;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  transition: var(--transition);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--muted);
  border-radius: 50%;
  transition: var(--transition);
}

.toggle-item input[type="checkbox"]:checked+.toggle-switch {
  background: rgba(62, 166, 255, 0.2);
  border-color: var(--accent);
}

.toggle-item input[type="checkbox"]:checked+.toggle-switch::after {
  left: 26px;
  background: var(--accent);
}

.toggle-item input[type="checkbox"] {
  display: none;
}




/* ============================
   ページ固有: 吉日カレンダー
   ============================ */
.calendar-section {
  padding: calc(var(--space) * 2) 0;
}

.calendar-section .wrap {
  max-width: 1200px;
}


.calendar-container {
  margin-top: calc(var(--space) * 2);
}

.calendar-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: var(--space);
  background: var(--surface);
  /* border-radius: var(--radius);*/
}

.calendar-month {
  font-size: 1.5rem;
  margin: 0;
}

.calendar-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: calc(var(--space) * 2);
}

.calendar-main {
  flex: 1;
}

/* ============================
   カレンダー固定サイズ対応
   ============================ */
.calendar-table {
  width: 100%;
  table-layout: fixed;
  background: #FFFFFF;
  overflow: visible !important;
  border: 1.5px solid #000 !important;
  /* 1.5pxに変更 */
  border-collapse: collapse;
}

.calendar-table th,
.calendar-table td {
  padding: 4px;
  text-align: center;
  border: 1px solid #000 !important;
  /* 1pxに変更 */
  vertical-align: top;
  width: 14.28%;
  height: 140px !important;
  min-height: 140px;
  position: relative;
  overflow: visible !important;
  z-index: 1;
}

.calendar-table thead th {
  background-color: #f6f6f6;
  border-bottom: 1px solid #000;
}

.calendar-table th {
  background: var(--bg);
  font-weight: 600;
  height: 40px !important;
  /* ヘッダーは低め */
  min-height: 40px;
  padding: 8px 4px;
}

.calendar-table .day-sun {
  color: #dc143c;
  /* 変更: #ff6b6b → より標準的な赤 */
}

.calendar-table .day-sat {
  color: #4169e1;
  /* 変更: var(--accent) → 標準的な青 */
}

.calendar-day {
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  padding-bottom: 2px;
  /* 追加: 下部に余白 */
  overflow: visible !important;
  /* 追加: 明示的に visible */
}

.calendar-day:hover {
  background: rgba(0, 102, 204, 0.05);
  /* 変更: 青の透明度を白背景用に調整 */
  z-index: 20 !important;
  /* 追加: ホバー時は最前面 */
}

.calendar-day--other-month {
  opacity: 0.3;
}

/* 今日の日付の青枠を削除 */
/*
.calendar-day--today {
  background: rgba(0, 102, 204, 0.08);  /* 変更: 青の透明度を白背景用に調整 
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
*/

/* 不成就日のスタイル */
.calendar-day--fujoju {
  background: #e8e8e8 !important;
  /* 変更: 薄い透明グレー → 明確なグレー背景 */
}

.calendar-day--fujoju .calendar-day__number {
  color: #495057;
  /* 変更: 薄白文字 → 濃グレー文字 */
}

.calendar-day__number {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 2px;
  line-height: 1.2;
}

/* 六曜表示 */
.calendar-day__rokuyou {
  font-size: 0.7rem;
  line-height: 1;
  margin-bottom: 4px;
  opacity: 1;
  color: #212529;
  /* 追加: 基本は黒文字 */
}

.rokuyou-taian {
  color: #ff1493 !important;
  /* 変更: 赤 → ピンク */
  font-weight: bold;
}

.rokuyou-tomobiki {
  color: #228b22 !important;
  /* 変更: 薄い黄緑 → 濃い緑 */
  font-weight: bold;
}

.rokuyou-shakku,
.rokuyou-senshou,
.rokuyou-senbu,
.rokuyou-butsumetsu {
  color: #212529 !important;
  /* 変更: グレー → 黒 */
}

/* バッジ表示エリア */
.calendar-day__badges {
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* 変更: 2px → 1px（隙間を狭く） */
  flex: 1;
  overflow: visible !important;
  /* 変更: auto → visible */
  max-height: none !important;
  /* 変更: 制限を解除 */
  padding: 0 2px;
  align-items: center;
  position: relative;
  z-index: 10;
  /* 追加: 前面に表示 */
}

.calendar-day__badges::-webkit-scrollbar {
  display: none;
  /* 変更: スクロールバー非表示 */
}

.calendar-day__badges::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  /* 変更: 白 → 黒系のスクロールバー */
  border-radius: 1px;
}

.calendar-day__badges .c-badge {
  display: block !important;
  /* 追加: インラインからブロックに変更 */
  /*font-size: 0.6rem;*/
  font-size: clamp(0.45rem, 0.8vw, 0.6rem) !important;
  padding: 2px 0 !important;
  /* 変更: 左右パディング削除、上下のみ */
  line-height: 1.2;
  white-space: nowrap;
  width: 100% !important;
  /* 追加: 親要素の幅いっぱいに */
  text-align: center;
  /* 既存: 中央揃え維持 */
  overflow: hidden;
  text-overflow: ellipsis;
  /*margin: 1px 0;              /* 追加: 上下マージン */
  box-sizing: border-box;
  /* 追加: パディング込みで幅計算 */
}

/* 土日の日付数字に色を付ける（新規追加） */
.calendar-table td:nth-child(1) .calendar-day__number {
  /* 日曜日 */
  color: #dc143c !important;
}

.calendar-table td:nth-child(7) .calendar-day__number {
  /* 土曜日 */
  color: #4169e1 !important;
}

/* 天赦日の特別デザイン - 案3（新規追加） */
.calendar-day--tenshanichi {
  background: #fff5f5 !important;
  /* 変更: 金色背景 → 薄赤背景 */
  border: 2px solid #ff6b6b !important;
  /* 変更: 金色枠 → 赤枠 */
  position: relative;
}

.calendar-day--tenshanichi::before {
  content: "★";
  position: absolute;
  top: 2px;
  right: 2px;
  color: #ffd700;
  font-size: 16px;
  text-shadow: 0 0 3px rgba(255, 215, 0, 0.5);
  z-index: 1;
  /* 追加: 他の要素より前面に */
}

/* レベル2: 上位吉日が2つ以上（濃い金色） */
.calendar-day--special-double {
  border: 2px solid #ffd700 !important;
  background: #fff8dc !important;
}

/* レベル1: 上位吉日が1つ（薄い金色） */
.calendar-day--special-single {
  border: 1px solid #f0d058 !important;
  background: #fffef5 !important;
}



/* ====================================
   統合版：吉日バッジスタイル（これを使用）
   ==================================== */

/* 主要吉日（目立つ背景色） */
.c-badge--tenshanichi {
  background: rgba(220, 53, 69, 0.85) !important;
  /* 赤系色 */
  color: #ffffff !important;
  border-color: rgba(220, 53, 69, 0.5) !important;
  font-size: 0.75rem !important;
  /* 変更: 0.6rem → 0.7rem */
  padding: 4.5px 0 !important;
  /* 変更: 2px → 4.5px */
  font-weight: 680;
  position: relative;
  z-index: 5;
  /* 追加: 他のバッジより前面 */
}

.c-badge--fujoju {
  background: rgba(128, 128, 128, 0.7) !important;
  /* グレー */
  color: #ffffff !important;
  border-color: rgba(128, 128, 128, 0.5) !important;
  font-weight: 600;
  font-size: 0.65rem;
}

/*.c-badge--sanrinbou {
  background: rgba(139, 0, 0, 0.7) !important;
  color: #ffffff !important;
  border-color: rgba(139, 0, 0, 0.5) !important;
  font-weight: 600;
  font-size: 0.65rem;
}*/

.c-badge--ichiryumanbaibi {
  background: rgba(193, 154, 0, 0.911) !important;
  /* ゴールド */
  color: #ffffff !important;
  border-color: rgba(255, 193, 7, 0.427) !important;
  font-size: 0.7rem !important;
  /* 変更: 0.6rem → 0.7rem */
  padding: 4.5px 0 !important;
  /* 変更: 2px → 4.5px */
  font-weight: 680;
  position: relative;
  z-index: 5;
  /* 追加: 他のバッジより前面 */
}

.c-badge--tsuchinoto-mi {
  background: rgba(36, 144, 61, 0.85) !important;
  /* 緑系色 */
  color: #ffffff !important;
  border-color: rgba(40, 167, 69, 0.5) !important;
  font-size: 0.7rem !important;
  /* 変更: 0.6rem → 0.7rem */
  padding: 4.5px 0 !important;
  /* 変更: 2px → 4.5px */
  font-weight: 680;
  position: relative;
  z-index: 5;
  /* 追加: 他のバッジより前面 */
}

.c-badge--tora {
  background: rgba(255, 191, 0) !important;
  /* 黄色 */
  color: #ffffff !important;
  border-color: rgba(255, 235, 59, 0.5) !important;
  font-size: 0.7rem !important;
  /* 変更: 0.6rem → 0.7rem */
  padding: 4.5px 0 !important;
  /* 変更: 2px → 4.5px */
  font-weight: 680;
  position: relative;
  z-index: 5;
  /* 追加: 他のバッジより前面 */
}

.c-badge--mi {
  background: rgba(105, 188, 105, 0.8) !important;
  /* 薄い緑系色 */
  color: #ffffff !important;
  border-color: rgba(144, 238, 144, 0.5) !important;
  font-size: 0.7rem !important;
  /* 変更: 0.6rem → 0.7rem */
  padding: 4.5px 0 !important;
  /* 変更: 2px → 4.5px */
  font-weight: 680;
  position: relative;
  z-index: 5;
  /* 追加: 他のバッジより前面 */
}

.c-badge--kishukubi {
  background: linear-gradient(135deg, #8B008B 0%, #9932CC 100%) !important;
  /* 薄黄土色 */
  color: #ffffff !important;
  border: 1px solid rgba(214, 33, 214, 0.553) !important;
  font-size: 0.7rem !important;
  /* 変更: 0.6rem → 0.7rem */
  padding: 4.5px 0 !important;
  /* 変更: 2px → 4.5px */
  font-weight: 680;
  position: relative;
  z-index: 5;
  /* 追加: 他のバッジより前面 */
}

/* 補助的吉日（控えめな背景色） */
.c-badge--daimyo {
  background: rgba(53, 177, 222, 0.5) !important;
  /* 薄青系色 */
  color: #000000 !important;
  border-color: rgba(135, 206, 235, 0.3) !important;
  font-size: 0.57rem;
  opacity: 0.9;
}

.c-badge--bosoubi {
  background: rgba(255, 182, 193, 0.5) !important;
  /* 薄ピンク色 */
  color: #000000 !important;
  border-color: rgba(255, 182, 193, 0.3) !important;
  font-size: 0.57rem;
  opacity: 0.9;
}

.c-badge--tenonbi {
  background: rgba(173, 216, 230, 0.5) !important;
  /* 薄青系色 */
  color: #000000 !important;
  border-color: rgba(173, 216, 230, 0.3) !important;
  font-size: 0.57rem;
  opacity: 0.9;
}

.c-badge--tenichitenjo {
  background: rgba(175, 238, 217, 0.5) !important;
  /* 薄青緑系色 */
  color: #000000 !important;
  border-color: rgba(175, 238, 238, 0.3) !important;
  font-size: 0.57rem;
  opacity: 0.9;
}

.c-badge--kamiyoshibi {
  background: rgba(255, 250, 205, 0.6) !important;
  /* 薄黄色 */
  color: #000000 !important;
  border-color: rgba(255, 250, 205, 0.3) !important;
  font-size: 0.57rem;
  opacity: 0.9;
}

.c-badge--tsukitokubi {
  background: rgba(221, 160, 221, 0.5) !important;
  /* 薄紫色 */
  color: #000000 !important;
  border-color: rgba(221, 160, 221, 0.3) !important;
  font-size: 0.57rem;
  opacity: 0.9;
}

/* 表示順序の制御（行1172付近に追加） */
.calendar-day__badges {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  padding: 0 2px;
  align-items: center;
}

/* 表示順序を制御 */
.calendar-day__badges .calendar-day__rokuyou {
  order: 0;
}

/* 六曜最優先 */
.calendar-day__badges .c-badge--tenshanichi {
  order: 1;
}

.calendar-day__badges .c-badge--fujoju {
  order: 2;
}

/*.calendar-day__badges .c-badge--sanrinbou { order: 2; }*/
.calendar-day__badges .c-badge--ichiryumanbaibi {
  order: 3;
}

.calendar-day__badges .c-badge--tsuchinoto-mi {
  order: 4;
}

.calendar-day__badges .c-badge--tora {
  order: 5;
}

.calendar-day__badges .c-badge--mi {
  order: 6;
}

.calendar-day__badges .c-badge--kishukubi {
  order: 7;
}

.calendar-day__badges .c-badge--daimyo {
  order: 8;
}

.calendar-day__badges .c-badge--bosoubi {
  order: 9;
}

.calendar-day__badges .c-badge--tenonbi {
  order: 10;
}

.calendar-day__badges .c-badge--tenichitenjo {
  order: 11;
}

.calendar-day__badges .c-badge--kamiyoshibi {
  order: 12;
}

.calendar-day__badges .c-badge--tsukitokubi {
  order: 13;
}


/* 凡例 */
.calendar-legend {
  margin-top: calc(var(--space) * 2);
  padding: var(--space);
  background: var(--surface);
  border-radius: var(--radius);
}

.legend-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: var(--space);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-desc {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.2;
}

/* 重複吉日ハイライト */
.lucky-highlight {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space);
  margin-bottom: calc(var(--space) * 2);
  border: 1px solid var(--accent);
}

.lucky-highlight__title {
  font-size: 1.1rem;
  margin-bottom: var(--space);
  color: var(--accent);
  font-weight: 600;
}

.lucky-highlight__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.lucky-highlight__item {
  background: rgba(0, 102, 204, 0.05);
  /* 変更: 白背景用に調整 */
  padding: 10px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(0, 102, 204, 0.2);
  /* 変更: 白背景用に調整 */
}

.lucky-highlight__date {
  font-weight: bold;
  color: var(--accent);
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.lucky-highlight__badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

/* サイドバー */
.calendar-sidebar {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 1.5);
}

.sidebar-title {
  margin-bottom: var(--space);
}

/* ホームページ用ミニカレンダー */
.calendar-mini {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space);
  overflow-x: auto;
}

.calendar-mini__month {
  text-align: center;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--accent);
}

.calendar-mini table {
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  table-layout: fixed;
}

.calendar-mini th,
.calendar-mini td {
  padding: 4px 2px;
  text-align: center;
  border: 1px solid #e9ecef;
  /* 変更: 白線 → グレー線 */
  font-size: 0.75rem;
}

.calendar-mini th {
  background: var(--bg);
  font-weight: 600;
  padding: 6px 2px;
}

.calendar-mini td {
  height: 36px;
  position: relative;
  vertical-align: middle;
}

.calendar-mini .day-sun {
  color: #dc143c;
}

/* 変更: 統一 */
.calendar-mini .day-sat {
  color: #4169e1;
}

/* 変更: 統一 */

.calendar-mini__day {
  font-weight: 600;
  display: block;
}

.calendar-mini__lucky {
  background: rgba(62, 166, 255, 0.1);
}

.calendar-mini__super-lucky {
  background: rgba(62, 166, 255, 0.2);
  color: var(--accent);
  font-weight: bold;
}

.calendar-mini__today {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.calendar-mini__other-month {
  opacity: 0.3;
}

.calendar-mini__fujoju {
  background: rgba(128, 128, 128, 0.1);
  color: var(--muted);
}




/* ============================
   ページ固有: ガイド
   ============================ */
.guide-article {
  padding: calc(var(--space) * 2) 0;
}

.guide-section {
  margin-bottom: calc(var(--space) * 3);
}

.guide-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space);
  margin-top: var(--space);
}

.rule-card {
  background: var(--surface);
  padding: var(--space);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.rule-card h3 {
  color: var(--warning);
  margin-bottom: 8px;
}

.comparison-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space);
  margin: calc(var(--space) * 2) 0;
}

.selection-methods,
.check-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space);
  margin-top: var(--space);
}

.method-item,
.method-card {
  background: var(--surface);
  padding: var(--space);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.faq-item {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.faq-item summary {
  padding: var(--space);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}

.faq-item summary:hover {
  background: rgba(62, 166, 255, 0.05);
}

.faq-item[open] summary {
  background: rgba(62, 166, 255, 0.1);
  color: var(--accent);
}

.faq-answer {
  padding: 0 var(--space) var(--space);
}

/* ============================
   ページ固有: ポリシー
   ============================ */
.policy-article {
  padding: calc(var(--space) * 2) 0;
}

.policy-section {
  margin-bottom: calc(var(--space) * 2);
  padding-bottom: calc(var(--space) * 2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.policy-section:last-child {
  border-bottom: none;
}

.last-updated {
  color: var(--muted);
  font-style: italic;
  margin-bottom: calc(var(--space) * 2);
  text-align: center;
}

/* ============================
   ページ固有: お問い合わせ
   ============================ */
.contact-section {
  padding: calc(var(--space) * 2) 0;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: calc(var(--space) * 2);
  margin-top: calc(var(--space) * 2);
}

.contact-method {
  text-align: center;
  margin: calc(var(--space) * 2) 0;
}

.contact-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: var(--space);
}

.contact-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space);
  margin: var(--space) 0;
}

.example-card {
  background: var(--surface);
  padding: var(--space);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.example-card h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.contact-guidelines {
  background: var(--surface);
  padding: calc(var(--space) * 1.5);
  border-radius: var(--radius);
  margin: calc(var(--space) * 2) 0;
}

.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 1.5);
}

.sidebar-box {
  background: var(--surface);
  padding: var(--space);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.info-list {
  display: grid;
  gap: 8px;
}

.info-list dt {
  font-weight: 600;
  color: var(--accent);
}

.info-list dd {
  margin: 0 0 8px 0;
  color: var(--muted);
}

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

.link-list li {
  margin-bottom: 8px;
}

.contact-footer {
  margin-top: calc(var(--space) * 3);
}

.contact-info {
  background: var(--surface);
  padding: var(--space);
  border-radius: var(--radius);
  margin-top: var(--space);
}

/* ============================
   その他
   ============================ */
.breadcrumb {
  padding: var(--space) 0;
  background: var(--surface);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.breadcrumb ol {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
}

.breadcrumb li::after {
  content: '/';
  margin-left: 8px;
  color: var(--muted);
}

.breadcrumb li:last-child::after {
  content: '';
}

.breadcrumb a {
  color: var(--muted);
}

.breadcrumb a:hover {
  color: var(--accent);
}

.lucky-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space);
  margin-bottom: calc(var(--space) * 2);
}

.lucky-preview-item {
  background: var(--surface);
  padding: var(--space);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.lucky-preview-date {
  font-weight: bold;
  color: var(--accent);
  margin-bottom: 8px;
}

.lucky-preview-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================
   レスポンシブ
   ============================ */
@media (max-width: 768px) {
  .c-header__toggle {
    display: flex;
  }

  .c-header__menu {
    position: fixed;
    top: 60px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 60px);
    background: var(--surface);
    flex-direction: column;
    padding: var(--space);
    transition: var(--transition);
  }

  .c-header__menu.is-open {
    left: 0;
  }

  .hero__actions {
    flex-direction: column;
  }

  .c-grid--2,
  .c-grid--3 {
    grid-template-columns: 1fr;
  }

  .calendar-layout {
    grid-template-columns: 1fr;
  }

  .contact-content {
    grid-template-columns: 1fr;
  }

  .c-footer__info {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .c-card__pros-cons {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .calendar-table {
    font-size: 0.9rem;
  }

  .calendar-table th,
  .calendar-table td {
    padding: 8px 4px;
  }

  .calendar-day {
    min-height: 60px;
  }

  .number-chip {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
}

/* ============================
   アクセシビリティ
   ============================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================
   レイアウト（吉日カレンダー専用 - 1カラム）
   ============================ */

/* Cocoonのレイアウトを上書き */
.lucky-calendar-wrapper .layout,
body.page .layout {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

.lucky-calendar-wrapper .content,
body.page .content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* カレンダーコンテンツの幅制限 */
.lucky-calendar-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: auto;
}

.skip:focus {
  left: 16px;
  top: 16px;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  z-index: 999;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .lucky-calendar-content {
    padding: 10px 5px;
  }
}

@media (max-width: 375px) {
  .lucky-calendar-content {
    padding: 8px 3px;
  }
}

/* ミニカレンダー改善 */
.calendar-mini__legend {
  margin-top: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.legend-row {
  display: flex;
  gap: 20px;
  align-items: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

.legend-box {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.calendar-mini__highlights {
  margin-top: 16px;
  padding: 12px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid rgba(62, 166, 255, 0.2);
}

.calendar-mini__highlights h4 {
  margin: 0 0 8px 0;
  color: var(--accent);
  font-size: 0.9rem;
}

.calendar-mini__highlights ul {
  margin: 0;
  padding-left: 20px;
  font-size: 0.85rem;
  list-style-type: disc;
}

.calendar-mini__highlights li {
  margin-bottom: 4px;
}

.more-link {
  margin-top: 8px;
  text-align: right;
  font-size: 0.85rem;
}

/* カレンダーページ全幅対応 */
.calendar-main-full {
  width: 100%;
}

.pr-section-calendar {
  margin-top: calc(var(--space) * 3);
  padding-top: calc(var(--space) * 2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pr-section__title {
  text-align: center;
  margin-bottom: calc(var(--space) * 2);
  color: var(--warning);
  font-size: 1.3rem;
  font-weight: 600;
}


/* =================*/
/* 今月注目の開運日セクション */
/* =================*/
.monthly-lucky {
  margin-top: 2rem;
  /* 上部の余白を追加 */
}

.monthly-lucky__header {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  /* 中央揃え */
  margin-bottom: 2rem;
  /*padding-top: 2rem;  /* タイトル上の余白 */
  padding: 1rem 1.5rem;
  /* 薄い色の背景 */
  /*background-color: #fff9f0;  /* 薄いクリーム色 */

  /* 上下の実線 */
  border-top: 1.5px solid #000000;
  border-bottom: 1.5px solid #000000;
}

.monthly-lucky__title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
  position: relative;
  display: inline-block;
}


.monthly-lucky__description {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
  margin: 0 auto;
  max-width: 500px;
  /* 説明文の幅を制限 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .monthly-lucky__title {
    font-size: 1.5rem;
  }

  .monthly-lucky__description {
    font-size: 0.9rem;
    padding: 0 1rem;
  }

  .monthly-lucky__title::before,
  .monthly-lucky__title::after {
    content: "";
    /* モバイルでは絵文字を非表示 */
  }
}


/* 今月注目の開運日リスト */

/*
.monthly-lucky { margin: 16px 0 24px; } */
.monthly-lucky__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  /* 2列に分割 */
}


/*
@media (max-width: 768px) {
  #monthly-lucky-list {
    grid-template-columns: 1fr;  /* スマホでは1列に戻す */
/*
  }
}
*/

.monthly-lucky__item {
  padding: 12px;
  margin-bottom: 1px;
  border: 2px solid #e0e0e0;
  /*border-radius: 8px;*/
  background: #fff;
  transition: all 0.3s ease;
}

.monthly-lucky__item--empty {
  text-align: center;
  color: #64748b;
  background: #f8fafc;
  border-style: dashed;
}

.monthly-lucky__date {
  font-weight: 700;
  margin-bottom: 4px;
}

.monthly-lucky__badges .c-badge {
  margin-right: 4px;
}

.monthly-lucky__memo {
  font-size: .9rem;
  margin-top: 4px;
  opacity: .9;
}

@media (max-width: 480px) {
  .monthly-lucky__item {
    padding: 8px;
  }
}

/* ===== Lucky Days Enhanced (scoped to .ldx) ===== */
.ldx {
  margin-top: 24px;
}

.ldx__header h2 {
  font-size: clamp(1.25rem, 1.2rem + 0.8vw, 1.6rem);
  margin: 0 0 6px;
}

.ldx__lead {
  color: #475569;
  margin: 0 0 12px;
}

.ldx__note {
  color: #64748b;
  font-size: .9rem;
  margin-top: 10px;
}

/* TOC chips */
.ldx__toc {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0 2px;
  scrollbar-width: thin;
}

.ldx__toc .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #e5eaf1;
  border-radius: 999px;
  background: #f8fafc;
  color: #0f172a;
  font-size: .85rem;
  white-space: nowrap;
  text-decoration: none;
}

.ldx__toc .chip:hover {
  background: #eef2f7;
}

.ldx__toc .chip--danger {
  border-color: #fecaca;
  background: #fff1f2;
  color: #7f1d1d;
}

/* info grid / card */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

@media (max-width: 800px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

.info-card {
  background: #fff;
  border: 1px solid #e7ecf5;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}

.info-card--accent {
  border-left: 4px solid #10b981;
}

.info-card--warn {
  border-left: 4px solid #ef4444;
}

.info-card__head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.info-card .icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f1f5f9, #e2e8f0);
  font-size: 18px;
}

.info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}

.info-title .yomi {
  font-size: .85rem;
  color: #64748b;
}

.info-lead {
  margin: 0;
  color: #334155;
}

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

.tags li {
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: .8rem;
  color: #475569;
}

.info-card details {
  margin-top: 8px;
}

.info-card summary {
  cursor: pointer;
  user-select: none;
  color: #0ea5e9;
}

.info-card summary:hover {
  text-decoration: underline;
}

.info-card p {
  margin: .4rem 0;
}

/* ============================
   六曜解説セクション（吉日スタイル適用版）
   ============================ */

.rokuyo-section {
  margin-top: 2rem;
  /* 上部の余白を追加 */
  padding: 60px 0;
}

.rokuyo-section__header {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  /* 中央揃え */
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
  /* タイトル上下左右の余白 */
  /* 上下の実線 */
  border-top: 1.5px solid #000000;
  border-bottom: 1.5px solid #000000;
}

.rokuyo-section__title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
  position: relative;
  display: inline-block;
}


.rokuyo-section__description {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
  margin: 0 auto;
  max-width: 500px;
  /* 説明文の幅を制限 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .rokuyo-section__title {
    font-size: 1.5rem;
  }

  .rokuyo-section__description {
    font-size: 0.9rem;
    padding: 0 1rem;
  }

}


/* 六曜セクション全体 */

.rokuyo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 各六曜のアイテム */
.rokuyo-item {
  background: #ffffff;
  /*border-radius: 12px;*/
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  margin-bottom: 4rem;
  padding: 2rem;
  transition: none;
  /* アニメーション削除 */
}

/* アニメーション削除 */
.rokuyo-item:hover {
  transform: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* 帯のベーススタイル（吉日と同様） */
.rokuyo-item__title {
  position: relative;
  font-size: 1.5rem;
  font-weight: bold;
  margin: -2rem -2rem 1.5rem -2rem;
  /* カードの外側まで拡張 */
  padding: 1.2rem 2rem;
  /*border-radius: 12px 12px 0 0;  /* 上部角丸 */
  color: #000000;
  /* 文字色は黒 */
  display: flex;
  align-items: center;
}

/* 六曜の読み仮名の色修正 */
.rokuyo-yomi {
  font-size: 1.1rem;
  font-weight: bold;
  color: #000000 !important;
  /* 黒色に変更 */
  margin-left: 0.5rem;
  opacity: 1;
  /* 透明度を100%に */
}

/* 大安の帯（ピンク系） */
.rokuyo-item--taian .rokuyo-item__title {
  background: rgba(255, 20, 147, 0.15);
  /* #ff1493を薄めた色 */
  border-top: 2px solid #ff1493;
  border-bottom: 2px solid #ff1493;
}

/* 友引の帯（黒線のみ） */
.rokuyo-item--tomobiki .rokuyo-item__title {
  background: transparent;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
}

/* 先勝の帯（黒線のみ） */
.rokuyo-item--sensho .rokuyo-item__title {
  background: transparent;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
}

/* 先負の帯（黒線のみ） */
.rokuyo-item--senbu .rokuyo-item__title {
  background: transparent;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
}

/* 赤口の帯（黒線のみ） */
.rokuyo-item--shakku .rokuyo-item__title {
  background: transparent;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
}

/* 仏滅の帯（グレー系・凶日） */
.rokuyo-item--butsumetsu .rokuyo-item__title {
  background: rgba(128, 128, 128, 0.1);
  border-top: 2px solid rgba(128, 128, 128, 0.8);
  border-bottom: 2px solid rgba(128, 128, 128, 0.8);
}

/* 六曜の画像（大安のみ） */
.rokuyo-image-placeholder {
  height: 200px;
  width: 100%;
  margin: 1rem 0;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 大安以外は画像エリアを表示しない */
.rokuyo-item:not(.rokuyo-item--taian) .rokuyo-image-placeholder {
  display: none;
}

.rokuyo-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 六曜コンテンツ構造（吉日と統一） */
.rokuyo-content {
  padding: 0 17px;
  margin: 0;
}

.rokuyo-description {
  margin: 0 0 0.3rem 0;
  line-height: 1.7;
  color: #000000;
  font-size: 1.1rem;
}


.rokuyo-description:first-of-type {
  margin-top: 1.7rem;
  /* ← 最初だけ広めに */
}


.rokuyo-description:last-of-type {
  margin-bottom: 1.5rem;
  /* ← 最後だけ広めに */
}

.rokuyo-keywords,
.rokuyo-note {
  margin: 0.8rem 0;
  line-height: 1.6;
  font-size: 1.1rem;
  color: #000000;
}

.rokuyo-keywords strong,
.rokuyo-note strong {
  color: #000000;
  font-weight: 600;
  margin-right: 0.5rem;
}

/* 大安と友引のサマリー色指定 */
.lucky-dates-summary[data-lucky-type="taian"] {
  color: #ff1493 !important;
  font-weight: 600;
}

/* 六曜バッジ（ヘッダー内） */
.rokuyo-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: bold;
  margin-left: 1rem;
  color: #fff;
}

.rokuyo-item--taian .rokuyo-badge {
  background: #ff1493;
}

.rokuyo-item--tomobiki .rokuyo-badge {
  background: #228b22;
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
  .rokuyo-item__title {
    font-size: 1.3rem;
    padding-left: 1rem;
    margin: -1.5rem -1.5rem 1.2rem -1.5rem;
    /* 追加 */
  }

  .rokuyo-item {
    padding: 1.5rem;
    /* パディングも調整 */
  }

  .ldc-item__title {
    font-size: 1.3rem;
    padding-left: 1rem;
  }

  .ldc-image-placeholder,
  .rokuyo-image-placeholder {
    height: 120px;
  }
}


.time-hints {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
}

.time-hints li {
  font-size: .8rem;
  border: 1px solid #e5eaf1;
  border-radius: 6px;
  padding: 2px 6px;
  background: #f8fafc;
}




/* Rokuyo Grid */
.ldc-rokuyo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem 3rem;
  padding-top: 1rem;
}

.ldc-rokuyo {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.ldc-rokuyo--good .ldc-rokuyo__title {
  color: #059669;
}

.ldc-rokuyo__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.ldc-rokuyo__details {
  margin: 0;
}

.ldc-rokuyo__details dt {
  font-weight: 600;
  color: #475569;
  margin: 0.75rem 0 0.25rem;
  font-size: 0.9rem;
}

.ldc-rokuyo__details:first-child dt:first-child {
  margin-top: 0;
}

.ldc-rokuyo__details dd {
  margin: 0;
  color: #334155;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* Mobile Optimization */
@media (max-width: 640px) {
  .ldc {
    margin: 1.5rem 0;
  }

  .ldc-container {
    padding: 0 0.75rem;
  }

  .ldc-title {
    font-size: 1.5rem;
  }

  .ldc-item {
    padding: 1.5rem 0;
  }

  .ldc-item__title {
    font-size: 1.125rem;
  }


  .ldc-rokuyo-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ldc-rokuyo {
    padding: 1.5rem 0;
  }

  .ldc-rokuyo__title {
    font-size: 1rem;
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  .ldc-rokuyo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;
  }
}

/* Print */
@media print {
  .ldc {
    color: #000;
  }

  .ldc-item,
  .ldc-rokuyo {
    page-break-inside: avoid;
  }
}

/* ===========================
   Lucky Days Modern UI (.ldc scope)
   =========================== */

/* Icon */
.ldc-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 0.75rem;
  font-size: 1.25rem;
  line-height: 32px;
  text-align: center;
  background: rgba(62, 166, 255, 0.1);
  border-radius: 8px;
  vertical-align: middle;
}

/* Lucky Days Items */

.ldc-item__title {
  color: var(--text, #e8ebef);
  margin: 0 0 1rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}


/* Ad Space */
.ldc-ad-space {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(255, 211, 110, 0.05);
  border: 1px dashed rgba(255, 211, 110, 0.3);
  border-radius: 8px;
  min-height: 100px;
  text-align: center;
  color: var(--muted, #9aa3ad);
}



/* Mobile Optimization */
@media (max-width: 640px) {
  .ldc {
    margin: 2rem 0;
  }

  .ldc-container {
    padding: 0 0.75rem;
  }

  .ldc-header {
    padding: 1rem;
  }

  .ldc-title {
    font-size: 1.5rem;
  }

  .ldc-item {
    padding: 1.5rem 1rem;
  }

  .ldc-item__title {
    font-size: 1.15rem;
  }

  .ldc-icon {
    width: 28px;
    height: 28px;
    font-size: 1rem;
    line-height: 28px;
  }


  .ldc-yomi {
    display: block;
    margin-left: 0;
    margin-top: 0.25rem;
  }

  .ldc-rokuyo-grid {
    grid-template-columns: 1fr;
  }

  .ldc-rokuyo {
    padding: 1.25rem;
  }

  .ldc-rokuyo__title {
    font-size: 1.05rem;
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  .ldc-rokuyo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Print */
@media print {
  .ldc {
    color: #000;
  }

  .ldc-item,
  .ldc-rokuyo {
    page-break-inside: avoid;
    background: white;
    border: 1px solid #ddd;
  }

  .ldc-icon {
    display: none;
  }

  .ldc-ad-space {
    display: none;
  }
}


/* ============================
   モードセレクタ
   ============================ */
.mode-selector {
  margin-bottom: calc(var(--space) * 1.5);
}


.mode-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}



.no-data {
  text-align: center;
  color: var(--muted);
  padding: calc(var(--space) * 2);
}

/* ============================
   レスポンシブ対応
   ============================ */

@media (max-width: 480px) {
  .draw-number {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }

}

/* ============================
   カレンダーページ追加スタイル
   ============================ */
/* 凶日バッジ */
.c-badge--sanrinbou {
  background: rgba(139, 0, 0, 0.15);
  color: #8b0000;
  border-color: #8b0000;
}

/* カレンダーの調整 */
.calendar-day__badges {
  max-height: 70px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.calendar-day__badges::-webkit-scrollbar {
  width: 3px;
}

.calendar-day__badges::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1.5px;
}

/* 三隣亡の日のスタイル */
.calendar-day--sanrinbou {
  background: rgba(139, 0, 0, 0.05);
}

.calendar-day--sanrinbou .calendar-day__number {
  color: rgba(255, 100, 100, 0.8);
}

/* 今月の吉日リストの凶日マーク */
.monthly-lucky__warn {
  color: #ff6b6b;
  font-size: 0.9em;
  margin-left: 4px;
}

/* デバッグ情報表示（開発時のみ） */
.debug-info {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  max-width: 300px;
  display: none;
  /* 本番では非表示 */
}

.debug-info.show {
  display: block;
}

/* レスポンシブ対応強化 */
@media (max-width: 768px) {
  .calendar-day__badges .c-badge {
    font-size: 0.45rem;
    padding: 0 2px;
    line-height: 1.1;
  }

  .calendar-day__rokuyou {
    font-size: 0.55rem;
  }

  .lucky-highlight__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {

  .calendar-table th,
  .calendar-table td {
    height: 100px;
  }

  .calendar-day__badges {
    max-height: 50px;
  }
}

/* 印刷対応 */
@media print {
  .calendar-day__badges {
    max-height: none;
    overflow: visible;
  }

  .c-badge {
    page-break-inside: avoid;
  }

  .calendar-controls button {
    display: none;
  }
}

/* アニメーション */
@keyframes luckyGlow {

  0%,
  100% {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
  }

  50% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  }
}

.calendar-day--super-lucky:hover {
  animation: luckyGlow 2s infinite;
}

/* ローディング表示 */
.calendar-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  color: var(--muted);
}

.calendar-loading::after {
  content: '';
  width: 40px;
  height: 40px;
  border: 3px solid var(--muted);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* カレンダーコントロールの中央揃え対応 */
.calendar-controls--prev-only,
.calendar-controls--next-only {
  position: relative;
}

.calendar-controls--prev-only .calendar-month,
.calendar-controls--next-only .calendar-month {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.calendar-controls--prev-only {
  justify-content: flex-start !important;
}

.calendar-controls--next-only {
  justify-content: flex-end !important;
}

/* 月表示の調整 */
.calendar-month {
  font-size: 1.5rem;
  margin: 0;
  white-space: nowrap;
}



/* ミニカレンダー内のリンク（より具体的に） */
#lucky-preview .more-link a,
.calendar-mini .more-link a,
.calendar-mini__highlights .more-link a {
  border: 2px solid var(--accent) !important;
  padding: 6px 12px !important;
  display: inline-block !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: var(--accent) !important;
  transition: var(--transition) !important;
}

#lucky-preview .more-link a:hover,
.calendar-mini .more-link a:hover,
.calendar-mini__highlights .more-link a:hover {
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* 今月の吉日リスト専用スタイル */
.monthly-lucky__badges .c-badge {
  /* サイズと配置のみ（色は各バッジクラスから継承） */
  font-size: 0.7rem !important;
  padding: 0.2rem 0.4rem !important;
  /* background, color, border は削除（各バッジの色を使用） */

  /* 横並び */
  display: inline-block !important;
  width: auto !important;
  margin: 0 2px 2px 0;
}


/* 今月の吉日の大安・不成就日スタイル */
.monthly-lucky__taian {
  margin-left: 8px;
  color: #ff1493;
  /* カレンダーと同じピンク色 */
  font-weight: bold;
}

.monthly-lucky__fujoju {
  margin-left: 8px;
  background: rgba(128, 128, 128, 0.7) !important;
  /* グレー */
  color: #ffffff !important;
  border-color: rgba(128, 128, 128, 0.5) !important;
  font-weight: bold;
}

/* ========================================
   今月の吉日リスト用スタイル
   ======================================== */

/* === 吉日リストアイテムの枠デザイン === */
.monthly-lucky__item {
  padding: 12px;
  margin-bottom: 3px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;
}

/* レベル3: 天赦日（赤系の枠） */
.monthly-lucky__item--tenshanichi {
  border-color: rgba(220, 53, 69, 0.8);
  background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%);
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
}

/* レベル2: 上位吉日2つ以上（金色の枠） */
.monthly-lucky__item--special-double {
  border-color: rgba(193, 154, 0, 0.8);
  background: linear-gradient(135deg, #FFFEF5 0%, #FFF9E6 100%);
  box-shadow: 0 2px 8px rgba(193, 154, 0, 0.2);
}

/* ホバー効果 */
.monthly-lucky__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* 吉日の種類と意味セクション専用スタイル */
.ldc {
  padding: 60px 0;
  background: #ffffff;
  margin: 3rem 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text, #e8ebef);
}

.ldc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.ldc-header {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 20px;
  padding: 1rem 1.5rem;
  /* 上下の実線 */
  border-top: 1.5px solid #000000;
  border-bottom: 1.5px solid #000000;
  border-radius: unset;
  /* 親から継承せず、初期値に戻す */
  background: #ffffff;
}

.ldc-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 700;
  line-height: 1.3;
}

.ldc-lead {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
  line-height: 1.75;
}

.ldc-items {
  display: grid;
  gap: 30px;
  flex-direction: column;
}

.ldc-item {
  /*border-radius: 12px;*/
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  margin-bottom: 2rem;
  padding: 2rem;
  transition: none;
  /* トランジション無効化 */
  cursor: default;
  /* カーソル変化なし */
}

/* 新しいコンテンツ構造 */
.ldc-content {
  padding: 0 17px;
  margin: 0;
}

.ldc-description {
  margin: 0 0 0.5rem 0;
  line-height: 1.7;
  color: #000000;
  font-size: 1.1rem;
}

.ldc-description:first-of-type {
  margin-top: 1.7rem;
  /* ← 最初だけ広めに */
}

.ldc-description:last-of-type {
  margin-bottom: 1.5rem;
  /* ← 最後だけ広めに */
}

.ldc-note,
.ldc-keywords {
  margin: 0.8rem 0;
  line-height: 1.6;
  font-size: 1.1rem;
  color: #000000;
}

.ldc-note strong,
.ldc-keywords strong {
  color: #000000;
  font-weight: 600;
  margin-right: 0.5rem;
}


/* ========================================
   吉日カードの帯デザイン
   ======================================== */

/* 帯のベーススタイル */
.ldc-item__title {
  position: relative;
  font-size: 1.5rem;
  font-weight: bold;
  margin: -2rem -2rem 1.5rem -2rem;
  /* カードの外側まで拡張 */
  padding: 1.2rem 2rem;
  /*border-radius: 12px 12px 0 0;  /* 上部角丸 */
  color: #000000;
  /* 文字色は黒 */
}

/* 読み仮名の色修正 */
.ldc-yomi {
  font-size: 1.1rem;
  font-weight: bold;
  color: #000000 !important;
  /* 黒色に変更 */
  margin-left: 0.5rem;
  opacity: 1;
  /* 透明度を100%に */
}

/* 天赦日の帯 */
.ldc-item--tenshanichi .ldc-item__title {
  background: rgba(220, 53, 69, 0.15);
  border-top: 2px solid rgba(220, 53, 69, 0.85);
  border-bottom: 2px solid rgba(220, 53, 69, 0.85);
}

/* 一粒万倍日の帯 */
.ldc-item--ichiryumanbaibi .ldc-item__title {
  background: rgba(193, 154, 0, 0.15);
  border-top: 2px solid rgba(193, 154, 0, 0.911);
  border-bottom: 2px solid rgba(193, 154, 0, 0.911);
}

/* 寅の日の帯 */
.ldc-item--tora .ldc-item__title {
  background: rgba(255, 191, 0, 0.2);
  border-top: 2px solid rgba(255, 191, 0, 1);
  border-bottom: 2px solid rgba(255, 191, 0, 1);
}

/* 巳の日・己巳の日の帯 */
.ldc-item--mi .ldc-item__title {
  background: rgba(36, 144, 61, 0.15);
  border-top: 2px solid rgba(36, 144, 61, 0.85);
  border-bottom: 2px solid rgba(36, 144, 61, 0.85);
}

/* 鬼宿日の帯 */
.ldc-item--kishukubi .ldc-item__title {
  background: linear-gradient(135deg, rgba(139, 0, 139, 0.15) 0%, rgba(153, 50, 204, 0.15) 100%);
  border-top: 2px solid #8B008B;
  border-bottom: 2px solid #9932CC;
}

/* 大明日の帯 */
.ldc-item--daimyo .ldc-item__title {
  background: rgba(53, 177, 222, 0.1);
  border-top: 2px solid rgba(53, 177, 222, 0.8);
  border-bottom: 2px solid rgba(53, 177, 222, 0.8);
}

/* 天恩日の帯 */
.ldc-item--tenonbi .ldc-item__title {
  background: rgba(173, 216, 230, 0.15);
  border-top: 2px solid rgba(173, 216, 230, 0.8);
  border-bottom: 2px solid rgba(173, 216, 230, 0.8);
}

/* 母倉日の帯 */
.ldc-item--bosoubi .ldc-item__title {
  background: rgba(255, 182, 193, 0.15);
  border-top: 2px solid rgba(255, 182, 193, 0.8);
  border-bottom: 2px solid rgba(255, 182, 193, 0.8);
}

/* 天一天上の帯 */
.ldc-item--tenichitenjo .ldc-item__title {
  background: rgba(175, 238, 217, 0.15);
  border-top: 2px solid rgba(175, 238, 217, 0.8);
  border-bottom: 2px solid rgba(175, 238, 217, 0.8);
}

/* 神吉日の帯 */
.ldc-item--kamiyoshibi .ldc-item__title {
  background: rgba(255, 250, 205, 0.15);
  border-top: 2px solid rgba(255, 233, 40, 0.8);
  border-bottom: 2px solid rgba(255, 233, 40, 0.8);
}

/* 月徳日の帯 */
.ldc-item--tsukitokubi .ldc-item__title {
  background: rgba(221, 160, 221, 0.15);
  border-top: 2px solid rgba(221, 160, 221, 0.8);
  border-bottom: 2px solid rgba(221, 160, 221, 0.8);
}

/* 不成就日の帯（グレー系に修正） */
.ldc-item--fujoju .ldc-item__title {
  background: rgba(128, 128, 128, 0.1) !important;
  border-top: 2px solid rgba(128, 128, 128, 0.8) !important;
  border-bottom: 2px solid rgba(128, 128, 128, 0.8) !important;
}


/* 画像プレースホルダー */
.ldc-image-placeholder {
  height: 210px;
  width: 100%;
  /* 横幅を100%に拡大 */
  margin: 1rem 0;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  /* 点線から実線に変更 */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ldc-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.ldc-divider {
  margin: 50px 0 30px;
  padding: 20px;
  text-align: center;
  border-top: 2px solid #e0e0e0;
  border-bottom: 2px solid #e0e0e0;
  background: rgba(0, 0, 0, 0.02);
}

.ldc-divider__title {
  margin: 0;
  font-size: 1.3rem;
  color: #666;
}

.ldc-divider--warn .ldc-divider__title {
  color: #dc3545;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .ldc-image-placeholder {
    height: 150px;
  }

  .ldc-item {
    padding: 20px;
  }

  .ldc-description {
    font-size: 0.9rem;
  }

  .ldc-note,
  .ldc-keywords
  .rokuyo-keywords {
    font-size: 0.85rem!important;
  }

  .ldc-item__title {
    font-size: 1.3rem;
    padding: 1rem 1.5rem;
    margin: -20px -20px 1.2rem -20px;
  }
}

/* ==========================================
   ミニカレンダー スタイル
   styles.css に追加
   ========================================== */

.mini-calendar-wrapper {
  background: #fff;
  border-radius: 8px;
  padding: 1.2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mini-calendar-title {
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0 1rem;
  color: #333;
  text-align: center;
}

.mini-calendar {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.mini-calendar th {
  font-size: 0.75rem;
  font-weight: normal;
  color: #666;
  padding: 0.3rem;
  text-align: center;
}

.mini-calendar th.sun {
  color: #e74c3c;
}

.mini-calendar th.sat {
  color: #3498db;
}

.mini-calendar td {
  position: relative;
  text-align: center;
  padding: 0.2rem;
  height: 2.2rem;
  vertical-align: top;
  border: 1px solid #f0f0f0;
}

.mini-cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.mini-cal-day.other-month {
  opacity: 0.3;
}

.mini-cal-day.today {
  border: 2px solid #e74c3c !important;
  font-weight: bold;
}

/* 吉日の背景色 */
.mini-cal-day.lucky-best {
  background: #FFD700;
  font-weight: bold;
}

.mini-cal-day.lucky-good {
  background: #FFF9C4;
}

.mini-cal-day.lucky-money-super {
  background: #FFEB3B;
}

.mini-cal-day.lucky-money {
  background: #E8F5E9;
}

.mini-cal-day.lucky-normal {
  background: #E3F2FD;
}

.mini-cal-day.lucky-bad {
  background: #F5F5F5;
  color: #999;
}

/* 日付番号 */
.day-num {
  font-size: 0.85rem;
  line-height: 1;
}

/* バッジ（アイコン付き） */
.badge-tenshanichi,
.badge-start,
.badge-money {
  display: block;
  font-size: 0.6rem;
  margin-top: 2px;
  white-space: nowrap;
}

.badge-tenshanichi {
  font-weight: bold;
}

/* 凡例 */
.mini-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 0.8rem 0;
  border-top: 1px solid #eee;
  font-size: 0.7rem;
  color: #666;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.legend-item .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.dot.lucky-best {
  background: #FFD700;
}

.dot.lucky-good {
  background: #FFF9C4;
}

.dot.lucky-money {
  background: #E8F5E9;
}

.dot.lucky-bad {
  background: #F5F5F5;
  border: 1px solid #ddd;
}

/* 注目日 */
.mini-cal-highlights {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid #eee;
}

.highlight-title {
  font-size: 0.85rem;
  font-weight: bold;
  margin: 0 0 0.5rem;
  color: #555;
}

.mini-cal-highlights ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mini-cal-highlights li {
  font-size: 0.8rem;
  padding: 0.2rem 0;
  color: #666;
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
  .mini-calendar td {
    padding: 0.1rem;
    font-size: 0.75rem;
  }

  .day-num {
    font-size: 0.75rem;
  }

  .badge-tenshanichi,
  .badge-start,
  .badge-money {
    font-size: 0.5rem;
  }

  .mini-cal-legend {
    font-size: 0.65rem;
    gap: 0.5rem;
  }

  .legend-item .dot {
    width: 10px;
    height: 10px;
  }
}

/* ==========================================
   ミニカレンダー用CSS（最新版）
   ========================================== */

.calendar-mini {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.calendar-mini__month {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
  color: #333;
}

.calendar-mini__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  display: table;
  table-layout: fixed;
}

.calendar-mini__table thead {
  display: table-header-group;
}

.calendar-mini__table tbody {
  display: table-row-group;
}

.calendar-mini__table tr {
  display: table-row;
}

.calendar-mini__table th,
.calendar-mini__table td {
  display: table-cell;
  vertical-align: top;
  width: 14.28%;
}

/* 曜日ヘッダー */
.calendar-mini__th {
  font-size: 0.8rem;
  font-weight: 500;
  color: #666;
  padding: 0.5rem 0;
  text-align: center;
  border-bottom: 2px solid #e0e0e0;
}

.calendar-mini__th--sun {
  color: #e74c3c;
}

.calendar-mini__th--sat {
  color: #3498db;
}

/* 日付セル（より縦長に） */
.calendar-mini__day {
  position: relative;
  padding: 0.4rem 0.2rem;
  border: 0.5px solid #e8e8e8;
  height: 100px;
  /* さらに縦長に */
  min-height: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* 日付番号と星 */
.calendar-mini__number {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.1;
  margin-bottom: 1px;
}

.calendar-mini__number--sun {
  color: #e74c3c;
}

.calendar-mini__number--sat {
  color: #3498db;
}

/* 天赦日の星マーク */
.calendar-mini__star {
  color: #FFD700;
  font-size: 0.7rem;
  margin-left: 2px;
}

/* 六曜 */
.calendar-mini__rokuyou {
  font-size: 0.6rem;
  text-align: center;
  color: #999;
  line-height: 1;
  margin-bottom: 4px;
}

.calendar-mini__rokuyou--taian {
  color: #ff1493;
  font-weight: bold;
}

.calendar-mini__rokuyou--tomobiki {
  color: #228b22;
}

/* バッジコンテナ */
.calendar-mini__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  width: 100%;
  padding: 0 1px;
  margin-top: auto;
}

/* バッジ */
.calendar-mini__badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
}

/* バッジの色 */
.calendar-mini__badge--tenshanichi {
  background: rgba(220, 53, 69, 0.85) !important;
  /* 赤色 */
  color: #ffffff !important;
}

.calendar-mini__badge--ichiryumanbaibi {
  background: rgba(193, 154, 0, 0.911) !important;
  color: #ffffff !important;
}

.calendar-mini__badge--tsuchinoto-mi {
  background: rgba(36, 144, 61, 0.85) !important;
  color: #ffffff !important;
}

.calendar-mini__badge--tora {
  background: rgba(255, 191, 0) !important;
  color: #ffffff !important;
}

.calendar-mini__badge--mi {
  background: rgba(105, 188, 105, 0.8) !important;
  color: #ffffff !important;
}

.calendar-mini__badge--kishukubi {
  background: linear-gradient(135deg, #8B008B 0%, #9932CC 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(214, 33, 214, 0.553) !important;
}

.calendar-mini__badge--fujoju {
  background: rgba(128, 128, 128, 0.8) !important;
  /* 不成就日はグレー */
  color: #ffffff !important;
}

/* 特別な日の背景 */
.calendar-mini__day--tenshanichi {
  background: rgba(255, 215, 0, 0.1);
  /* 薄いゴールド */
}

.calendar-mini__day--special {
  background: rgba(255, 215, 0, 0.05);
  /* 薄いゴールド（より薄く） */
}

.calendar-mini__day--fujoju {
  background: #fafafa;
}

.calendar-mini__day--fujoju .calendar-mini__number,
.calendar-mini__day--fujoju .calendar-mini__rokuyou {
  color: #bbb;
}

.calendar-mini__day--other {
  background: #fcfcfc;
}

.calendar-mini__day--other .calendar-mini__number {
  color: #ddd;
}

/* 今日の日付（薄い青枠のみ） */
.calendar-mini__day--today {
  border: 2px solid #87CEEB !important;
  /* 薄い青色 */
  background: transparent;
  /* 背景は通常と同じ */
}


/* 画面幅が広い場合 */
@media (min-width: 768px) {
  .calendar-mini__day {
    height: 110px;
  }

  .calendar-mini__badge {
    font-size: 0.75rem;
    padding: 2px 5px;
  }
}

/* スマートフォン対応 */
@media (max-width: 480px) {
  .calendar-mini__day {
    height: 80px;
    padding: 0.3rem 0.1rem;
  }

  .calendar-mini__number {
    font-size: 0.75rem;
  }

  .calendar-mini__rokuyou {
    font-size: 0.55rem;
  }

  .calendar-mini__badge {
    font-size: 0.6rem;
    padding: 1px 3px;
  }
}


/* ============================
   吉日の種類と意味セクション - 日付表
   ============================ */

/* アコーディオン用のスタイル */
.lucky-dates-toggle {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  /*text-align: center;*/
}

.lucky-dates-toggle:first-of-type {
  margin-top: 2rem;
  /* 例えば通常より大きめに */
}

/* toggleを開いた時、その中の最後の要素に余白 */
details[open].lucky-dates-toggle>*:last-child {
  margin-bottom: 2.5rem;
}



.lucky-dates-summary {
  cursor: pointer;
  padding: 0.5rem 1rem;
  background-color: #f8f9fa;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #666;
  transition: background-color 0.3s;
}

.lucky-dates-summary:hover {
  background-color: #e9ecef;
}

.lucky-dates-summary::marker {
  content: "▶ ";
}

details[open] .lucky-dates-summary::marker {
  content: "▼ ";
}

.lucky-dates-table {
  margin-top: 1rem;
  margin-bottom: 1rem;
  /* テーブル自体の下余白 */
  width: 100%;
  max-width: 500px;
  border-collapse: collapse;
  font-size: 0.85rem;
  /*table-layout: fixed;  /* 追加 */
}

.lucky-dates-table th {
  background-color: #f0f0f0;
  padding: 0.5rem;
  text-align: center;
  border: 1px solid #ddd;
  font-weight: bold;
}

.lucky-dates-table th:first-child {
  width: 60px;
  background-color: #f0f0f0;
  white-space: nowrap;
}

.lucky-dates-table td {
  padding: 0.5rem;
  text-align: center;
  border: 1px solid #ddd;
}

/* 左端（1列目）だけ幅を固定 */
.lucky-dates-table th:first-child,
.lucky-dates-table td:first-child {
  width: 70px;
  /* ← 好きな幅に変更 */
  min-width: 70px;
  /* つぶれ防止。任意 */
  white-space: nowrap;
  /* 折り返し防止（必要に応じて） */
  text-align: center;
  /* 見た目を揃えたい場合 */
}


/* ヘッダーの文字色修正（colspanでも色を維持） */
.lucky-dates-table thead th {
  color: #fff !important;
  font-weight: bold !important;
  text-align: center !important;
}

/* 各吉日のヘッダー色（プロジェクトの実際の色に修正） */
.lucky-dates-table .header-tenshanichi {
  background: rgba(220, 53, 69, 0.85) !important;
  color: #ffffff !important;
}

.lucky-dates-table .header-ichiryu {
  background: rgba(193, 154, 0, 0.911) !important;
  color: #ffffff !important;
}

.lucky-dates-table .header-tora {
  background: rgba(255, 191, 0) !important;
  color: #ffffff !important;
}

.lucky-dates-table .header-mi {
  background: rgba(105, 188, 105, 0.8) !important;
  color: #ffffff !important;
}

.lucky-dates-table .header-tsuchinoto-mi {
  background: rgba(36, 144, 61, 0.85) !important;
  color: #ffffff !important;
}

.lucky-dates-table .header-daimyo {
  background: rgba(53, 177, 222, 0.8) !important;
  color: #ffffff !important;
}

.lucky-dates-table .header-tenon {
  background: rgba(173, 216, 230, 0.8) !important;
  color: #333333 !important;
}

.lucky-dates-table .header-boso {
  background: rgba(255, 182, 193, 0.8) !important;
  color: #333333 !important;
}

.lucky-dates-table .header-tenichitenjo {
  background: rgba(175, 238, 217, 0.8) !important;
  color: #333333 !important;
}

.lucky-dates-table .header-kishukubi {
  background: linear-gradient(135deg, #8B008B 0%, #9932CC 100%) !important;
  color: #ffffff !important;
}

.lucky-dates-table .header-kamiyoshi {
  background: rgba(255, 250, 205, 0.8) !important;
  color: #333333 !important;
}

.lucky-dates-table .header-tsukitoku {
  background: rgba(221, 160, 221, 0.8) !important;
  color: #ffffff !important;
}

.lucky-dates-table .header-fujoju {
  background: rgba(128, 128, 128, 0.8) !important;
  color: #ffffff !important;
}

/* 巳の日テーブル専用 */
.mi-table th:first-child {
  width: 60px;
}

.mi-table th:nth-child(2) {
  background-color: rgba(105, 188, 105, 0.8) !important;
  color: #ffffff !important;
}

.mi-table th:nth-child(3) {
  background-color: rgba(36, 144, 61, 0.85) !important;
  color: #ffffff !important;
}

/* サマリーの色を吉日と同じに */
.lucky-dates-summary[data-lucky-type="tenshanichi"] {
  color: rgb(220, 53, 69);
  font-weight: 600;
}

.lucky-dates-summary[data-lucky-type="ichiryu"] {
  color: rgb(193, 154, 0);
  font-weight: 600;
}

.lucky-dates-summary[data-lucky-type="tora"] {
  color: rgb(255, 140, 0);
  font-weight: 600;
}

.lucky-dates-summary[data-lucky-type="mi"] {
  color: rgb(105, 188, 105);
  font-weight: 600;
}

.lucky-dates-summary[data-lucky-type="daimyo"] {
  color: rgb(53, 177, 222);
  font-weight: 600;
}

.lucky-dates-summary[data-lucky-type="tenon"] {
  color: rgb(100, 149, 237);
  font-weight: 600;
}

.lucky-dates-summary[data-lucky-type="boso"] {
  color: rgb(255, 105, 180);
  font-weight: 600;
}

.lucky-dates-summary[data-lucky-type="tenichitenjo"] {
  color: rgb(32, 178, 170);
  font-weight: 600;
}

.lucky-dates-summary[data-lucky-type="kishukubi"] {
  color: rgb(139, 0, 139);
  font-weight: 600;
}

.lucky-dates-summary[data-lucky-type="kamiyoshi"] {
  color: rgb(218, 165, 32);
  font-weight: 600;
}

.lucky-dates-summary[data-lucky-type="tsukitoku"] {
  color: rgb(186, 85, 211);
  font-weight: 600;
}

.lucky-dates-summary[data-lucky-type="fujoju"] {
  color: rgb(128, 128, 128);
  font-weight: 600;
}

/* 今月の強調表示 */
.lucky-dates-table .current-month {
  background-color: #fff8dc;
  font-weight: bold;
}

.lucky-dates-table .current-month th {
  background-color: #ffeb3b;
  color: #333;
}

/* 今日の強調表示 */
.today-highlight {
  padding: 2px 6px;
  border: 2px solid #ff4444;
  border-radius: 4px;
  background-color: none;
  font-weight: bold;
  text-decoration: none;
}

/* 不成就日と重なる日 */
.with-fujoju {
  color: #999;
  text-decoration: line-through;
  position: relative;
}

/* 不成就日重複の説明 */
.fujoju-note {
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.5rem;
  padding: 0.3rem 0.5rem;
  background-color: #f9f9f9;
  border-left: 3px solid #999;
}

/* 天一天上・天恩日の不成就日表示は取り消し線ナシ、ただしグレー色は維持 */
.lucky-dates-table[data-lucky-type="tenichitenjo"] .with-fujoju,
.lucky-dates-table[data-lucky-type="tenon"] .with-fujoju {
  text-decoration: none;
  color: #999;
  /* inheritではなくグレー色を指定 */
  font-size: 0.8rem;
  /* 少し小さく */
  margin-left: 0.5rem;
  /* 左に少し余白 */
}


/* 己巳の日のハイライト */
.tsuchinoto-mi {
  background-color: #ffd700;
  border-radius: 3px;
  padding: 2px 4px;
  font-weight: bold;
}

/* ============================
   個別設定：天赦日（tensha）
   - 左端列を広めに
   - 日付テキストを太字で強調
   ============================ */
.lucky-dates-table[data-lucky-type="tenshanichi"] th:first-child,
.lucky-dates-table[data-lucky-type="tenshanichi"] td:first-child {
  width: 150px !important;
  /* ← 好みで 72〜96px 程度に調整 */
  min-width: 150px !important;
  /* つぶれ防止 */
  text-align: center;
  /* 見出しと並びを揃えるなら */
  white-space: nowrap;
}

/* 2列目＝日付の文字を太く（天赦日は強めに見せたい） */
.lucky-dates-table[data-lucky-type="tenshanichi"] tbody td:nth-child(2) {
  font-weight: 700;
  text-align: center;
}

/* 見出し（thead）もやや強調したい場合（任意） */
.lucky-dates-table[data-lucky-type="tenshanichi"] thead th {
  font-weight: 800;
  letter-spacing: .02em;
}

/* 天赦日専用の不成就日表示 */
.tenshanichi-table .tenshanichi-fujoju {
  color: #888888;
  text-decoration: none;
  /* 取り消し線なし */
  display: inline-block;
}

.tenshanichi-table .fujoju-label {
  color: #888888;
  font-size: 0.85em;
  font-weight: normal;
  margin-left: 0.3em;
  display: inline-block;
}


/* ============================
   個別設定：鬼宿日（kishuku）
   - 左端列を天赦日とは別幅に
   - テキストの太さは既定のまま
   ============================ */
.lucky-dates-table[data-lucky-type="kishukubi"] th:first-child,
.lucky-dates-table[data-lucky-type="kishukubi"] td:first-child {
  width: 150px !important;
  /* ← 天赦日より少し狭め。好みに応じて変更 */
  min-width: 150px !important;
  text-align: center;
  white-space: nowrap;
}

/* 2列目 */
.lucky-dates-table[data-lucky-type="kishukubi"] tbody td:nth-child(2) {
  text-align: center;
}


/* （任意）スマホで少し詰める */
@media (max-width: 480px) {
  .lucky-dates-table[data-lucky-type="tenshanichi"] :is(th, td):first-child {
    width: 72px;
    min-width: 72px;
  }

  .lucky-dates-table[data-lucky-type="kishukubi"] :is(th, td):first-child {
    width: 64px;
    min-width: 64px;
  }
}



/* 過ぎた月の行を非表示 */
.lucky-dates-table tr.past-month {
  display: none;
}


/* ============================
   最強開運日セクション - 修正版
   ============================ */

/* セクション全体 */
.super-lucky-wrapper {
  margin: 3rem 0;
  padding: 0 1rem;
}

.super-lucky-section {
  max-width: 1200px;
  margin: 0 auto;
}

/* セクションタイトル */
.super-lucky-section .section-title {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.5rem;
  /*margin-top: 3rem; */
  color: #333;
  /* 上の実線 */
  border-top: 1.5px solid #000000;
  padding-top: 1.0rem;
}

.super-lucky-section .section-subtitle {
  text-align: center;
  color: #666;
  /*margin-bottom: 2rem; */
  font-size: 0.9rem;
  /* 下の実線 */
  border-bottom: 1.5px solid #000000;
  padding-bottom: 1.0rem;
}

/* タブ切り替え */
.view-tabs {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 0.7rem;
  flex-direction: row !important;  /* 追加：常に横並び */
  flex-wrap: wrap;  /* 追加：狭い画面では折り返し */
}

.tab-btn {
  padding: 1rem 2.5rem;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  /* 楕円形 */
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.tab-btn:hover {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.05);
  border-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.15);
}

.tab-btn.active {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  border-color: #2563eb;
  font-weight: 700;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
}

/* 年度セクション */
.year-section {
  margin-bottom: 2rem;
}

.year-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e0e0e0;
  color: #444;
}

/* 日付まとめ */
.year-summary {
  background: #f8f9fa;
  border-left: 4px solid var(--accent, #3ea6ff);
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
}

.year-summary-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.year-summary-dates {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* details要素のスタイル */
/*
details.year-section {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  background: #fafafa;
}*/

details.year-section summary {
  cursor: pointer;
  padding: 0.5rem;
  margin: -0.5rem;
  border-radius: 6px;
  transition: background 0.3s;
}

details.year-section summary:hover {
  background: #f0f0f0;
}

details.year-section[open] summary {
  margin-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

/* カード基本スタイル */
.super-lucky-card {
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  /*padding: 1.5rem;*/
  padding: 2rem 2.5rem;
  margin-bottom: 0.8rem;
  transition: all 0.3s;
  position: relative;
}

.super-lucky-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* SSランク（最強）の特別スタイル */
.super-lucky-card.card-best {
  border-color: #ffd700;
  background: linear-gradient(135deg, #fffef9 0%, #fff9e6 100%);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
}

/* 日付表示（統一版） */
.card-date {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 1rem;
  font-size: 1.7rem;
  /* 1.3rem → 1.7rem */
  font-weight: bold;
  color: #333;
}

.card-date .month,
.card-date .day {
  font-size: 1.7rem;
  font-weight: bold;
  color: #333;
}

.card-date .weekday {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-left: 0.3rem;
}

/* 六曜表示 */
.card-date .rokuyou {
  margin-left: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.card-date .rokuyou-taian {
  color: #ff1493 !important;
}

.card-date .rokuyou-butsumetsu {
  color: #696969 !important;
  font-size: 1.3rem !important;
  font-weight: normal !important;
}

/* バッジコンテナ */
.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
  margin: 1rem 0;
}

/* バッジサイズ統一 */
.card-badges .c-badge {
  font-size: 1.1rem !important;
  line-height: 1.4 !important;
  padding: 0.4rem 0.8rem !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 不成就日バッジ追加 */
.c-badge--fujoju {
  background: #808080 !important;
  color: #fff !important;
}

/* 説明文 */
.card-description {
  margin: 1rem 0;
  line-height: 1.6;
  color: #333;
  font-size: 1rem;
  font-weight: 500;
}

/* おすすめ */
.card-recommendation {
  margin: 1rem 0;
  padding: 0.8rem;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #333;
}

.card-recommendation strong {
  color: #333;
  font-weight: 600;
}

/* 警告表示 */
.card-warning {
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.card-warning.warning-fujoju {
  background: #fff3cd;
  border-left: 3px solid #ffc107;
  color: #856404;
}

.card-warning.warning-butsumetsu {
  background: #f8f9fa;
  border-left: 3px solid #6c757d;
  color: #495057;
}

/* ランク表示用 */
.rank-group {
  margin-bottom: 0.5rem;
}

.rank-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #444;
}

.rank-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.9rem;
  min-width: 35px;
  text-align: center;
}

.rank-badge.rank-ss {
  background: linear-gradient(135deg, #ffd700, #ffcc66);
  color: #fff;
}

.rank-badge.rank-s {
  background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
  color: #333;
}

.rank-badge.rank-a {
  background: linear-gradient(135deg, #cd7f32, #daa520);
  color: #fff;
}

.rank-cards {
  display: grid;
  gap: 0.8rem;
}




/* レスポンシブ対応 */
@media (max-width: 768px) {
  .super-lucky-wrapper {
    padding: 0 0.5rem;
  }

  .view-tabs {
    gap: 0.5rem;  /* 横並びのまま、間隔だけ狭く */
  }
  
  .tab-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }

  .card-date {
    font-size: 1.2rem;
  }

  .card-date .month,
  .card-date .day {
    font-size: 1.4rem;
  }

  .card-date .weekday {
    font-size: 1.3rem;
  }

  .super-lucky-card {
    /*padding: 1rem;*/
    padding: 1.5rem 1.8rem;
  }

  .card-badges {
    gap: 0.1rem;
  }

  .card-badges .c-badge {
    font-size: 0.8rem !important;
    min-height: 28px !important;
  }
}

@media (max-width: 480px) {
  .super-lucky-section .section-title {
    font-size: 1.4rem;
  }

  .year-title {
    font-size: 1.1rem;
  }

  .card-description,
  .card-recommendation {
    font-size: 0.85rem;
  }
}

/* c-badge用のホバー効果 */
[class*="c-badge--"] {
  transition: all 0.3s ease;
  cursor: pointer !important;
  user-select: none;
}

[class*="c-badge--"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  filter: brightness(1.1);
}

[class*="c-badge--"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================
   スクロールトップボタン
   ============================ */

.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  /* 半透明の白背景に変更 */
  background: rgba(255, 255, 255, 0);
  /* 背景をぼかすエフェクト（グラスモーフィズム） */
  backdrop-filter: blur(0.1px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(62, 166, 255, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  /* より浮いているように見える強めのシャドウ */
  box-shadow: 0 8px 24px rgba(62, 166, 255, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

/* 表示状態 */
.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* ホバー時 */
.scroll-to-top:hover {
  /* ホバー時は青の半透明背景 */
  background: rgba(62, 166, 255, 0.9);
  border-color: rgba(62, 166, 255, 0.8);
  transform: translateY(-5px);
  /* ホバー時はさらに浮き上がる */
  box-shadow: 0 12px 32px rgba(62, 166, 255, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.2);
}

.scroll-to-top:hover .scroll-to-top__arrow {
  border-color: #ffffff;
}

/* クリック時 */
.scroll-to-top:active {
  background: rgba(62, 166, 255, 0.95);
  transform: translateY(-2px);
  /* クリック時は少し影を減らす */
  box-shadow: 0 6px 16px rgba(62, 166, 255, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.15);
}

/* フォーカス時（キーボード操作） */
.scroll-to-top:focus-visible {
  outline: 2px solid #3ea6ff;
  outline-offset: 3px;
}

/* 矢印アイコン */
.scroll-to-top__arrow {
  width: 12px;
  height: 12px;
  border-left: 3px solid #3ea6ff;
  border-top: 3px solid #3ea6ff;
  transform: rotate(45deg);
  transition: border-color 0.3s ease;
}

/* ホバー時の矢印は白色 */
.scroll-to-top:hover .scroll-to-top__arrow {
  border-color: #ffffff;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .scroll-to-top {
    width: 45px;
    height: 45px;
    bottom: 20px;
    right: 20px;
  }

  .scroll-to-top__arrow {
    width: 10px;
    height: 10px;
    border-width: 2.5px;
  }
}

@media (max-width: 480px) {
  .scroll-to-top {
    width: 42px;
    height: 42px;
    bottom: 15px;
    right: 15px;
  }
}

/* ==========================================
   カスタムルール - 新デザイン
   ========================================== */

.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* ← 2列固定に変更 */
  gap: 16px;
}

.rule-card {
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
  position: relative;
}

.rule-card:hover {
  border-color: #2196F3;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
}

.rule-card.active {
  border-color: #2196F3;
  background: #f0f8ff;
}

.rule-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rule-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #e0e0e0;
  color: #666;
  border-radius: 50%;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.rule-card.active .rule-number {
  background: #2196F3;
  color: white;
}

.rule-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

.rule-card .status-off {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
}

.rule-card.active .status-off {
  display: none;
}

.rule-card .status-on {
  display: none;
  align-items: center;
  gap: 8px;
  color: #2196F3;
}

.rule-card.active .status-on {
  display: flex;
}

.status-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: relative;
}

.status-on .status-icon::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  line-height: 1;
}

.rule-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.rule-description {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 8px;
}

.rule-default {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rule-default::before {
  content: '船津式:';
  font-weight: 600;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .rules-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   レスポンシブ対応の強化
   =================================== */

/* スマートフォン対応 */
@media (max-width: 768px) {

  /* カレンダーレイアウト */
  .calendar-layout {
    grid-template-columns: 1fr;
  }

  /* カレンダーコンテナ */
  .calendar-container {
    padding: 10px 0;
  }

  /* カレンダーテーブル */
  .calendar-table {
    border: 2px solid #000 !important;
    /* モバイルは2px */
  }

  .calendar-table th,
  .calendar-table td {
    border: 1.5px solid #000 !important;
    /* モバイルは1.5px */
  }

  .calendar-table th {
    height: 35px;
  }

  /* カレンダーの日付・六曜・バッジ */
  .calendar-day__number {
    font-size: 0.9rem;
  }

  .calendar-day__rokuyou {
    font-size: 0.65rem;
  }

  .calendar-day__badges .c-badge {
    font-size: 0.55rem;
    padding: 0 3px;
  }

  /* 吉日アイコンのサイズ調整 */
  .lucky-icon {
    font-size: 0.7rem;
    padding: 2px 4px;
  }

  /* カレンダーコントロール（月切り替えボタン） */
  .calendar-controls {
    display: flex;
    flex-direction: row;
    /* 横並び維持 */
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px;
    gap: 8px;
  }

  .calendar-controls button {
    flex: 0 0 auto;
    min-width: 60px;
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  .calendar-month {
    font-size: 1.2rem;
    white-space: nowrap;
  }

  /* 凡例・ハイライトリスト */
  .legend-items {
    grid-template-columns: 1fr 1fr;
  }

  .lucky-highlight__list {
    grid-template-columns: 1fr 1fr;
  }

  /* ミニカレンダー */
  .calendar-mini th,
  .calendar-mini td {
    font-size: 0.7rem;
    padding: 2px 1px;
  }

  .calendar-mini td {
    height: 30px;
  }

  /* 吉日説明セクション */
  .ldc-item {
    padding: 15px 10px;
  }

  .ldc-item__title {
    font-size: 1.2rem;
  }

  .ldc-description {
    font-size: 0.9rem;
  }

  /* 日付表のテーブル */
  .lucky-dates-table {
    font-size: 0.85rem;
  }

  .lucky-dates-table td {
    padding: 8px 5px;
  }

  /* 六曜セクション */
  .rokuyo-item {
    padding: 15px 10px;
  }

  .rokuyo-item__title {
    font-size: 1.1rem;
  }

  .rokuyo-description {
    font-size: 0.9rem;
  }

  /* 吉日カード・六曜カードの帯デザイン */
  .ldc-item__title,
  .rokuyo-item__title {
    font-size: 1.3rem;
    padding: 1rem 1.5rem;
    margin: -1.5rem -1.5rem 1.2rem -1.5rem;
  }

  .ldc-item,
  .rokuyo-item {
    padding: 1.5rem;
  }
}

/* カレンダーコンテンツの左右余白調整 */
.lucky-calendar-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 15px;
  /* 左右を15pxに */
}

/* モバイル対応 */
@media (max-width: 768px) {
  .lucky-calendar-content {
    padding: 10px 8px;
    /* 8pxに変更 */
  }

  /* Cocoonテーマの構造に対応 */
  body.page-template-page-lucky-calendar .content,
  body.page-template-page-lucky-calendar .content-in {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* カレンダーコンテナ */
  .calendar-container {
    padding: 10px 0;
    margin: 0;
  }
}

@media (max-width: 480px) {
  .lucky-calendar-content {
    padding: 8px 5px;
    /* 5pxに変更 */
  }

  body.page-template-page-lucky-calendar .content,
  body.page-template-page-lucky-calendar .content-in {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

@media (max-width: 375px) {
  .lucky-calendar-content {
    padding: 8px 3px;
  }

  body.page-template-page-lucky-calendar .content,
  body.page-template-page-lucky-calendar .content-in {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}

/* カレンダーテーブルの幅を100%にして画面いっぱいに */
.calendar-table {
  width: 100% !important;
  max-width: 100% !important;
}

/* カレンダーコンテナも100%に */
.calendar-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* モバイルでカレンダーの横スクロール防止 */
@media (max-width: 768px) {

  .calendar-section .wrap,
  .calendar-container {
    overflow-x: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================
   吉日カレンダーページ専用レイアウト（サイドバー維持版）
   ============================ */

/* 吉日カレンダーページのみに適用 */
body.page-template-page-lucky-calendar {

  /* ★重要：Cocoonのレイアウトグリッドは維持（サイドバー表示のため） */
  /* .layout は触らない */

  /* メインコンテンツエリア内の余白のみ調整 */
  .lucky-calendar-content {
    max-width: 100%;
    margin: 0;
    padding: 10px 0 !important;
    /* 左右の余白を0に */
  }

  /* カレンダーコンテナ */
  .calendar-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 0 !important;
    margin: 0 !important;
  }

  /* カレンダーコントロール */
  .calendar-controls {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 今月の吉日セクション */
  .monthly-lucky {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .monthly-lucky__header {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* 吉日説明セクション */
  .ldc {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ldc-container {
    max-width: 100%;
    padding: 0 !important;
  }

  .ldc-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .ldc-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 六曜セクション */
  .rokuyo-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .rokuyo-container {
    max-width: 100%;
    padding: 0 !important;
  }

  .rokuyo-section__header {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .rokuyo-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 最強開運日セクション */
  .super-lucky-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .super-lucky-section {
    max-width: 100%;
    padding: 0 !important;
  }

  .super-lucky-section .section-title {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .super-lucky-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* モバイル対応：768px以下（サイドバーが下に移動する幅） */
@media (max-width: 768px) {
  body.page-template-page-lucky-calendar {
    .lucky-calendar-content {
      padding: 10px 5px !important;
    }

    .calendar-container {
      padding: 10px 0 !important;
    }

    /* セクションヘッダーの余白を少し戻す */
    .monthly-lucky__header,
    .ldc-header,
    .rokuyo-section__header,
    .super-lucky-section .section-title {
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
  }
}

@media (max-width: 480px) {
  body.page-template-page-lucky-calendar {
    .lucky-calendar-content {
      padding: 8px 3px !important;
    }

    .monthly-lucky__header,
    .ldc-header,
    .rokuyo-section__header,
    .super-lucky-section .section-title {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
  }
}

@media (max-width: 375px) {
  body.page-template-page-lucky-calendar {
    .lucky-calendar-content {
      padding: 8px 2px !important;
    }

    .monthly-lucky__header,
    .ldc-header,
    .rokuyo-section__header,
    .super-lucky-section .section-title {
      padding-left: 3px !important;
      padding-right: 3px !important;
    }
  }
}

/* カレンダーテーブル自体は100%幅 */
body.page-template-page-lucky-calendar  {
  width: 100% ;
  max-width: 100% ;
  margin: 0 ;
}

/* 今月の吉日リスト */
body.page-template-page-lucky-calendar .monthly-lucky__list {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================
   スマホ表示最適化（カレンダー専用）
   ============================ */

/* モバイル：横幅余白を最小化 */
@media (max-width: 768px) {
  body.page-template-page-lucky-calendar .lucky-calendar-content {
    padding: 5px 1px !important;
    /* 左右1pxに */
  }

  body.page-template-page-lucky-calendar .calendar-container {
    padding: 5px 0 !important;
    margin: 0 !important;
  }

  /* カレンダーテーブルのセル内余白を削減 */
  .calendar-table th,
  .calendar-table td {
    padding: 1px !important;
    /* 4px → 1px */
  }

  /* カレンダー日付セルの内部余白を削除 */
  .calendar-day {
    padding: 1px !important;
    /* 余白を最小化 */
    padding-bottom: 0 !important;
  }

  /* バッジコンテナの余白を完全削除 */
  .calendar-day__badges {
    padding: 0 !important;
    /* 0 2pxから0に */
    margin: 0 !important;
    gap: 0 !important;
    /* バッジ間の隙間も0に */
  }

  /* バッジ自体の余白も最小化 */
  .calendar-day__badges .c-badge {
    padding: 0 !important;
    /* パディング完全削除 */
    margin: 0 !important;
    line-height: 1.1 !important;
    font-size: 0.48rem !important;
    /* さらに小さく */
  }

  /* 日付番号の余白削減 */
  .calendar-day__number {
    margin-bottom: 1px !important;
    /* 2px → 1px */
  }

  /* 六曜の余白削減 */
  .calendar-day__rokuyou {
    margin-bottom: 2px !important;
    /* 4px → 2px */
  }

  /* 特別な日の枠線を格子線に密着（outline → border） */
  .calendar-day--tenshanichi {
    background: #fff5f5 !important;
    /* outlineをborderに変更し、内側に配置 */
    border: 2px solid #ff6b6b !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .calendar-day--tenshanichi::before {
    top: 1px !important;
    right: 1px !important;
  }

  /* レベル2: 複数吉日の金枠 */
  .calendar-day--special-double {
    border: 2px solid #ffd700 !important;
    background: #fff8dc !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* レベル1: 単一吉日の薄金枠 */
  .calendar-day--special-single {
    border: 1.5px solid #f0d058 !important;
    background: #fffef5 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* 不成就日のグレー背景 */
  .calendar-day--fujoju {
    background: #e8e8e8 !important;
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  body.page-template-page-lucky-calendar .lucky-calendar-content {
    padding: 3px 0 !important;
    /* 左右0pxに */
  }

  .calendar-table th,
  .calendar-table td {
    padding: 0.5px !important;
  }

  .calendar-day__badges .c-badge {
    font-size: 0.45rem !important;
  }
}

@media (max-width: 375px) {
  body.page-template-page-lucky-calendar .lucky-calendar-content {
    padding: 2px 0 !important;
  }

  .calendar-day__badges .c-badge {
    font-size: 0.43rem !important;
  }
}

/* ============================
   バッジの文字サイズ自動調整（長文対応）
   ============================ */

/* 文字数に応じたフォントサイズ（スマホのみ） */
@media (max-width: 768px) {

  /* 3文字まで: 通常サイズ */
  .calendar-day__badges .c-badge {
    font-size: 0.5rem !important;
  }

  /* 4文字（例：大明日、母倉日）*/
  .c-badge--daimyo,
  .c-badge--bosoubi,
  .c-badge--tenonbi,
  .c-badge--kishukubi {
    font-size: 0.47rem !important;
  }

  /* 5文字（例：一粒万倍日、天一天上、不成就日）*/
  .c-badge--ichiryumanbaibi,
  .c-badge--tenichitenjo,
  .c-badge--fujoju,
  .c-badge--kamiyoshibi,
  .c-badge--tsukitokubi {
    font-size: 0.43rem !important;
  }

  /* 6文字（例：己巳の日）*/
  .c-badge--tsuchinoto-mi {
    font-size: 0.4rem !important;
  }
}

/* さらに小さい画面 */
@media (max-width: 480px) {

  .c-badge--ichiryumanbaibi,
  .c-badge--tenichitenjo,
  .c-badge--fujoju,
  .c-badge--kamiyoshibi,
  .c-badge--tsukitokubi {
    font-size: 0.4rem !important;
  }

  .c-badge--tsuchinoto-mi {
    font-size: 0.38rem !important;
  }
}

@media (max-width: 375px) {

  .c-badge--ichiryumanbaibi,
  .c-badge--tenichitenjo,
  .c-badge--fujoju,
  .c-badge--kamiyoshibi,
  .c-badge--tsukitokubi {
    font-size: 0.38rem !important;
  }

  .c-badge--tsuchinoto-mi {
    font-size: 0.36rem !important;
  }
}

/* PC表示でも枠線を密着（全デバイス共通） */
.calendar-day--tenshanichi {
  background: #fff5f5 !important;
  border: 1.3px solid #ff6b6b !important;
  /* outline → border */
  box-sizing: border-box !important;
  position: relative;
}

.calendar-day--special-double {
  border: 1.3px solid #ffd700 !important;
  background: #fff8dc !important;
  box-sizing: border-box !important;
}

.calendar-day--special-single {
  border: 1.0px solid #f0d058 !important;
  background: #fffef5 !important;
  box-sizing: border-box !important;
}

/* ===================================
   改善版：バッジ適度なサイズ・テーブルのみ全幅化・枠線調整
   =================================== */

/* カレンダーテーブルのみ #main の padding を打ち消して広げる */
.calendar-table {
  /* 左右padding 29px × 2 = 58px分を打ち消す */
  margin-left: -29px!important;
  margin-right: -29px!important;
  width: calc(100% + 58px)!important;
  max-width: none !important;
  table-layout: fixed;
}

/* 他のコンテンツは今まで通り中央寄せ */
.monthly-lucky,
.super-lucky-wrapper,
.ldc,
.rokuyo-section {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ===================================
   スマホ：バッジを適度なサイズに＆タップしやすく
   =================================== */
@media (max-width: 768px) {

  /* バッジサイズ（適度に） */
  .calendar-day__badges .c-badge {
    font-size: 0.55rem !important;
    padding: 2px 5px !important;
    line-height: 1.2 !important;
    min-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 1px !important;
  }

  /* 格子枠線を細く */
  .calendar-table {
    border: 1px solid #000 !important;
  }

  .calendar-table th,
  .calendar-table td {
    border: 0.5px solid #ccc !important;
  }

  /* セルの余白調整 */
  .calendar-table th,
  .calendar-table td {
    padding: 2px !important;
  }
}

/* さらに小さい画面（iPhone SE等） */
@media (max-width: 480px) {
  .calendar-table {
    margin-left: -10px;
    /* 極小画面のpadding値 */
    margin-right: -10px;
    width: calc(100% + 20px);
  }

  .calendar-day__badges .c-badge {
    font-size: 0.5rem !important;
    padding: 2px 4px !important;
    min-height: 18px !important;
  }
}

@media (max-width: 375px) {
  .calendar-table {
    margin-left: -8px;
    margin-right: -8px;
    width: calc(100% + 16px);
  }

  .calendar-day__badges .c-badge {
    font-size: 0.48rem !important;
    padding: 1px 3px !important;
    min-height: 16px !important;
  }
}

/* ===================================
   PC表示：バッジを大きく＆タップしやすく（768px以上）
   =================================== */
@media (min-width: 769px) {
  .calendar-day__badges .c-badge {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
    line-height: 1.3 !important;
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 2px !important;
  }
}

/* タブレット（769px〜1024px） */
@media (min-width: 769px) and (max-width: 1024px) {
  .calendar-day__badges .c-badge {
    font-size: 0.65rem !important;
    padding: 3px 7px !important;
    min-height: 24px !important;
  }
}

/* 大画面PC（1200px以上） */
@media (min-width: 1200px) {
  .calendar-day__badges .c-badge {
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
    min-height: 28px !important;
  }
}

/* ===================================
   スマホ：バッジを適度なサイズに＆タップしやすく（768px以下）
   =================================== */
@media (max-width: 768px) {
  /* モバイルでpaddingが異なる場合は調整 */
  .calendar-table {
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px);
  }
  
  /* バッジサイズ（適度に） */
  .calendar-day__badges .c-badge {
    font-size: 0.55rem !important;
    padding: 2px 5px !important;
    line-height: 1.2 !important;
    min-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 1px !important;
  }
  
  /* 格子枠線を細く */
  .calendar-table {
    border: 1px solid #000 !important;
  }
  
  .calendar-table th,
  .calendar-table td {
    border: 0.5px solid #ccc !important;
  }
  
  /* セルの余白調整 */
  .calendar-table th,
  .calendar-table td {
    padding: 2px !important;
  }
}

/* さらに小さい画面（iPhone SE等） */
@media (max-width: 480px) {
  .calendar-table {
    margin-left: -10px;
    margin-right: -10px;
    width: calc(100% + 20px);
  }
  
  .calendar-day__badges .c-badge {
    font-size: 0.5rem !important;
    padding: 2px 4px !important;
    min-height: 18px !important;
  }
}

@media (max-width: 375px) {
  .calendar-table {
    margin-left: -8px;
    margin-right: -8px;
    width: calc(100% + 16px);
  }
  
  .calendar-day__badges .c-badge {
    font-size: 0.48rem !important;
    padding: 1px 3px !important;
    min-height: 16px !important;
  }
}

/* ==============================================
   DMM FX 広告スタイル
   ============================================== */

/* 広告コンテナ */
.ad-container {
  width: 100%;
  max-width: 100%;
  margin: 40px auto;
  padding: 20px 0;
  text-align: center;
  background-color: #f8f9fa;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

/* 一粒万倍日の直後の広告 */
.ad-after-ichiryu {
  margin-top: 50px;
  margin-bottom: 50px;
}

/* スマホ/タブレット：200x200を表示 */
.ad-mobile-only {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/* PC：728x90を表示 */
.ad-pc-only {
  display: none;
  justify-content: center;
  align-items: center;
  min-height: 90px;
}

/* PC（1024px以上）：728x90を表示、200x200を非表示 */
@media (min-width: 1024px) {
  .ad-mobile-only {
    display: none;
  }
  
  .ad-pc-only {
    display: flex;
  }
}

/* タブレット（768px～1023px）：200x200のみ */
@media (min-width: 768px) and (max-width: 1023px) {
  .ad-mobile-only {
    display: flex;
  }
  
  .ad-pc-only {
    display: none;
  }
}

/* スマホ（〜767px）：200x200のみ */
@media (max-width: 767px) {
  .ad-container {
    margin: 30px auto;
    padding: 15px 0;
  }
  
  .ad-after-ichiryu {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

/*==============================================
   カレンダー新機能スタイル（ラベル削除＆ボタン幅調整版）
   ============================================== */

/* 既存スタイルの上書き */
.calendar-controls button.calendar-nav-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;
  border: none !important;
  background-color: #f5f5f5 !important;
  color: #666 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  font-weight: normal !important;
}

.calendar-controls button.calendar-nav-btn:hover {
  background-color: #e8e8e8 !important;
  color: #333 !important;
  transform: scale(1.05) !important;
  border: none !important;
}

.calendar-controls button.calendar-nav-btn:active {
  transform: scale(0.95) !important;
}

.calendar-controls button.calendar-nav-btn svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* 中央部分 */
.calendar-controls .calendar-controls__center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex: 1 !important;
  position: relative !important;
}

/* 今月ボタン */
.calendar-controls button.calendar-today-btn {
  padding: 8px 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  background-color: #f9f9f9 !important;
  color: #555 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  font-weight: normal !important;
  width: auto !important;
  height: auto !important;
}

.calendar-controls button.calendar-today-btn:hover {
  background-color: #e8e8e8 !important;
  border-color: #ccc !important;
  transform: none !important;
}

/* 年月表示とトグルボタンのラッパー */
.calendar-controls .calendar-month-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 年月表示 */
.calendar-controls .calendar-month {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* ▽トグルボタン - 幅を短く（24px） */
.calendar-controls button.calendar-selector-toggle {
  width: 24px !important;
  height: 32px !important;
  min-width: 24px !important;
  min-height: 32px !important;
  border-radius: 4px !important;
  border: 1px solid #ddd !important;
  background-color: #f9f9f9 !important;
  color: #666 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  font-weight: normal !important;
}

.calendar-controls button.calendar-selector-toggle:hover {
  background-color: #e8e8e8 !important;
  border-color: #ccc !important;
  transform: none !important;
}

.calendar-controls button.calendar-selector-toggle svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* 年月セレクタードロップダウン - コンパクト版 */
.calendar-controls .calendar-selector-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: 8px !important;
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 16px !important;
  z-index: 1000 !important;
  min-width: 240px !important;
}

.calendar-selector-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* ラベル行を削除したので、.calendar-selector-row は不要 */

.calendar-selector__year,
.calendar-selector__month {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  font-size: 0.95rem !important;
  background-color: #fff !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
}

.calendar-selector__year:hover,
.calendar-selector__month:hover {
  border-color: #999 !important;
}

.calendar-selector__year:focus,
.calendar-selector__month:focus {
  outline: none !important;
  border-color: #4a90e2 !important;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2) !important;
}

.calendar-selector-btn {
  width: 100% !important;
  padding: 10px !important;
  border: none !important;
  border-radius: 6px !important;
  background-color: #4a90e2 !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
}

.calendar-selector-btn:hover {
  background-color: #357abd !important;
}

.calendar-selector-btn:active {
  background-color: #2d6aa6 !important;
}

/* 今日の強調（既存の強調と被らない場合のみ） */
.calendar-day--today-only {
  position: relative !important;
}

.calendar-day--today-only::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  width: 8px !important;
  height: 8px !important;
  background-color: #ff6b6b !important;
  border-radius: 50% !important;
  animation: pulse-today 2s infinite !important;
}

@keyframes pulse-today {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* スマホ対応 */
@media (max-width: 767px) {
  .calendar-controls {
    padding: 0 8px !important;
    gap: 8px !important;
  }
  
  .calendar-controls button.calendar-nav-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  
  .calendar-controls button.calendar-nav-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  .calendar-controls .calendar-controls__center {
    gap: 8px !important;
  }
  
  .calendar-controls button.calendar-today-btn {
    padding: 6px 7px !important;
    font-size: 0.85rem !important;
  }
  
  .calendar-controls .calendar-month {
    font-size: 1.2rem !important;
  }
  
  .calendar-controls button.calendar-selector-toggle {
    width: 20px !important;
    height: 28px !important;
    min-width: 20px !important;
    min-height: 28px !important;
  }
  
  .calendar-controls button.calendar-selector-toggle svg {
    width: 12px !important;
    height: 12px !important;
  }
  
  .calendar-controls .calendar-selector-dropdown {
    min-width: 200px !important;
    padding: 12px !important;
  }
  
  .calendar-selector-content {
    gap: 10px !important;
  }
  
  .calendar-selector__year,
  .calendar-selector__month {
    padding: 8px 10px !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  .calendar-controls {
    padding: 0 4px !important;
  }
  
  .calendar-controls .calendar-month {
    font-size: 1rem !important;
  }
  
  .calendar-controls button.calendar-today-btn {
    padding: 4px 0px !important;
    font-size: 0.8rem !important;
  }
}


/* ==============================================
   使い方ガイド・目次セクション
   ============================================== */

.calendar-guide {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 30px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  border: 2px solid #e0e0e0;
}

.calendar-guide__header {
  text-align: center;
  margin-bottom: 30px;
}

.calendar-guide__title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
}

.calendar-guide__description {
  font-size: 1rem;
  color: #666;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
}


/* 目次 */
.calendar-toc {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  margin-bottom: 20px;
}

.calendar-toc__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.calendar-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.toc-link {
  display: block;
  padding: 10px 16px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  color: #333;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.toc-link:hover {
  background: #4a90e2;
  color: #fff;
  border-color: #4a90e2;
  transform: translateX(4px);
}

/* ヒントボックス */
.calendar-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: #fff9e6;
  border: 1px solid #ffd700;
  border-radius: 8px;
  margin-top: 20px;
}


.hint-text {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.7;
  margin: 0;
}



.hint-example {
  display: inline-flex;
  align-items: center;

  gap: 8px;
  margin-left: 8px;
}


.demo-badge {
  display: inline-flex !important;
  align-items: center;
  cursor: default;
  animation: badge-pulse 2s infinite;
}


@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .calendar-guide {
    padding: 20px 15px;
    margin-bottom: 30px;
  }
  
  .calendar-guide__title {
    font-size: 1.5rem;
  }
  
  .calendar-guide__description {
    font-size: 0.9rem;
  }
  
  .calendar-guide__features {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .calendar-toc__list {
    grid-template-columns: 1fr;
  }
  
  .calendar-hint {
    flex-direction: column;
    padding: 12px 15px;
  }
  
  .hint-example {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    margin-left: 0;
    margin-top: 8px;
  }
}


/* ==============================================
   バッジのクリック可能性を明示
   ============================================== */

/* バッジに軽い影を追加 */
[class*="c-badge--"] {
  transition: all 0.3s ease;
  cursor: pointer !important;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* ホバー時のアニメーション強化 */
[class*="c-badge--"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
}

/* ホバー時にツールチップ風の表示 */
[class*="c-badge--"]:hover::after {
  content: '詳細を見る';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.7rem;
  white-space: nowrap;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  animation: tooltip-fade-in 0.3s ease forwards;
  z-index: 100;
}

@keyframes tooltip-fade-in {
  to {
    opacity: 1;
  }
}

/* ホバー時に矢印も表示 */
[class*="c-badge--"]:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 1px;
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
  pointer-events: none;
  opacity: 0;
  animation: tooltip-fade-in 0.3s ease forwards;
  z-index: 100;
}

/* クリック時のフィードバック */
[class*="c-badge--"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* スマホではツールチップを非表示 */
@media (max-width: 768px) {
  [class*="c-badge--"]:hover::after,
  [class*="c-badge--"]:hover::before {
    display: none;
  }
  
  /* スマホではバッジを少し大きく */
  [class*="c-badge--"]:active {
    transform: scale(1.1);
  }
}


/* ==============================================
   スムーススクロール
   ============================================== */

html {
  scroll-behavior: smooth;
}

/* ジャンプ先にフォーカス表示 */
[id] {
  scroll-margin-top: 80px; /* ヘッダー分の余白 */
}

/* ジャンプ後の軽いアニメーション */
[id]:target {
  animation: highlight-section 1.5s ease;
}

@keyframes highlight-section {
  0% {
    background-color: rgba(74, 144, 226, 0.1);
  }
  100% {
    background-color: transparent;
  }
}