@charset "UTF-8";

/* ==========================================================================
   単位と暦ページ用スタイル (Calendar & Units Page Styles)
   ========================================================================== */

/* --------------------------------------------------------------------------
   3カラム: 単位カード群 (Unit Cards)
   -------------------------------------------------------------------------- */

/* 単位カードを包むコンテナ（親要素） */
.unit-group-container {
  display: flex;
  /* 子要素を横並びに配置する（フレックスボックス） */
  flex-wrap: wrap;
  /* 画面幅が狭い場合は自動で折り返す */
  gap: 20px;
  /* カード同士の間隔を20px空ける */
  margin-top: 24px;
  /* 上に余白を追加 */
}

/* 個別の単位カード */
.unit-card {
  flex: 1 1 300px;
  /* 伸び縮みする設定（基本幅300px、余白があれば広がる） */
  /* スマホなどの小画面では縦積みになるように調整されます */

  background: rgba(255, 255, 255, 0.05);
  /* 半透明の白背景（すりガラス風） */
  border: 1px solid #333;
  /* 枠線を暗いグレーに */
  padding: 24px;
  /* 内側の余白 */
  border-radius: 8px;
  /* 角を少し丸くする */
  text-align: center;
  /* 文字を中央揃えにする */

  /* アニメーションの設定（変形と影の変化を0.3秒かけて滑らかに行う） */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* カードにマウスが乗った時（ホバー時）のスタイル */
.unit-card:hover {
  transform: translateY(-5px);
  /* 少し上に浮かび上がる */
  box-shadow: 0 5px 15px rgba(7, 174, 229, 0.2);
  /* 水色の影を落とす */
  border-color: #07aee5;
  /* 枠線を水色に変更 */
}

/* アイコン画像のラッパー（位置調整用） */
.unit-icon-wrapper {
  margin-bottom: 16px;
  /* 下に余白 */
  display: flex;
  /* 画像を中央に配置するためにフレックスボックス化 */
  justify-content: center;
  /* 左右中央揃え */
}

/* 単位アイコン画像の実体 */
.unit-icon-img {
  width: 80px;
  /* 幅を固定 */
  height: auto;
  /* 高さは比率を維持して自動調整 */
  filter: drop-shadow(0 0 5px rgba(7, 174, 229, 0.4));
  /* 画像自体に光彩（影）をつける */
  transition: transform 0.3s ease;
  /* 拡大アニメーションの設定 */
}

/* カードホバー時にアイコンを拡大 */
.unit-card:hover .unit-icon-img {
  transform: scale(1.1);
  /* 1.1倍に拡大 */
  filter: drop-shadow(0 0 10px rgba(7, 174, 229, 0.8));
  /* 光彩を強くする */
}

/* 単位記号（m, g, l など） */
.unit-symbol {
  font-size: 2.5rem;
  /* 文字サイズを大きく */
  font-weight: bold;
  /* 太字 */
  color: #07aee5;
  /* 文字色を水色に */
  margin: 0;
  /* デフォルトの余白を消す */
  font-family: "Barlow Semi Condensed", sans-serif;
  /* 英数字用フォント指定 */
}

/* 単位名 */
.unit-name {
  font-size: 1.2rem;
  color: #efeff0;
  /* 文字色を白っぽく */
  margin: 8px 0;
  /* 上下に少し余白 */
  font-weight: bold;
}

/* 単位の由来テキスト */
.unit-origin {
  font-size: 0.9rem;
  color: #aaaab1;
  /* 文字色をグレーに */
  margin: 0;
  font-style: italic;
  /* 斜体にする */
}

/* 単位の換算値表示エリア */
.unit-value {
  margin-top: 12px;
  font-size: 1rem;
  color: #efeff0;
  border-top: 1px solid #444;
  /* 上に区切り線を入れる */
  padding-top: 8px;
  /* 線と文字の間隔 */
}

/* --------------------------------------------------------------------------
   単位換算ツール UI (Unit Converter UI)
   -------------------------------------------------------------------------- */
.converter-ui {
  background: #202023;
  /* 背景色（暗いグレー） */
  border: 1px solid #444;
  padding: 32px;
  margin-top: 24px;
  border-radius: 8px;

  display: flex;
  /* 中身をフレックス配置 */
  flex-direction: column;
  /* スマホ版デフォルト：縦並び */
  align-items: center;
  /* 中央揃え */
  gap: 16px;
  /* 要素間の間隔 */
}

/* PCなどの大画面向けレイアウト調整（幅768px以上） */
@media (min-width: 768px) {
  .converter-ui {
    flex-direction: row;
    /* 横並びに変更 */
    justify-content: center;
    /* 全体を中央寄せ */
  }
}

/* 入力欄とプルダウンのグループ */
.converter-input-group {
  display: flex;
  gap: 8px;
  /* 入力欄とセレクトボックスの間隔 */
}

/* 数値入力フィールド */
.converter-input {
  background: #121214;
  /* 濃い黒背景 */
  border: 1px solid #444;
  color: #efeff0;
  /* 白文字 */
  padding: 8px 12px;
  font-size: 1.1rem;
  border-radius: 4px;
  width: 120px;
}

/* 単位選択プルダウン */
.converter-select {
  background: #121214;
  border: 1px solid #444;
  color: #efeff0;
  padding: 8px 12px;
  font-size: 1rem;
  border-radius: 4px;
}

/* 矢印アイコン */
.converter-arrow {
  color: #07aee5;
  font-size: 1.5rem;
  font-weight: bold;
}

/* 結果表示エリア */
.converter-result {
  font-size: 1.5rem;
  color: #efeff0;
  background: #121214;
  border: 1px solid #07aee5;
  /* 結果を目立たせる水色の枠線 */
  padding: 8px 24px;
  border-radius: 4px;
  min-width: 200px;
  /* 最低でもこの幅を確保 */
  text-align: center;
  box-shadow: 0 0 10px rgba(7, 174, 229, 0.2);
  /* ぼんやり光らせる */
}

/* 結果内の単位強調 */
.converter-result .result-unit strong {
  color: #07aee5;
}

/* --------------------------------------------------------------------------
   接頭辞一覧テーブル (Prefix Accordion / Reference Table)
   -------------------------------------------------------------------------- */
.prefix-table-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  background: #202023;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid #333;
}

/* 2列レイアウト用のカラム */
.prefix-column {
  flex: 1 1 300px;
  /* 必要に応じて幅300pxを基準に伸縮 */
}

/* セクション見出し（拡大/縮小） */
.prefix-head {
  color: #07aee5;
  border-bottom: 2px solid #333;
  /* 下線 */
  padding-bottom: 8px;
  margin-bottom: 12px;
  font-size: 1.1rem;
}

/* テーブル全体のスタイル */
.prefix-table {
  width: 100%;
  border-collapse: collapse;
  /* 枠線を重ねて一本にする */
  font-size: 0.9rem;
}

/* テーブルヘッダー（th） */
.prefix-table th {
  text-align: left;
  /* 左寄せ */
  color: #888;
  padding: 4px 8px;
  border-bottom: 1px solid #444;
  font-size: 0.8rem;
}

/* テーブルデータ（td） */
.prefix-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #333;
  color: #aaaab1;
}

/* 最後の行の下線を消す（見た目を綺麗にするため） */
.prefix-table tr:last-child td {
  border-bottom: none;
}

/* 記号セルの強調 */
.cell-symbol {
  font-weight: bold;
  color: #efeff0;
  width: 40px;
  /* 幅を固定 */
  text-align: center;
}

/* --------------------------------------------------------------------------
   デカド（週間）テーブル (Decad Table)
   -------------------------------------------------------------------------- */
.decad-table-container {
  overflow-x: auto;
  /* 横幅が溢れたらスクロールバーを出す */
  margin-top: 16px;
  background: #202023;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid #333;

  /* デフォルトでは横スクロール可能な設定 */
}

.decad-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 600px;
  /* コンテンツが潰れないように最小幅を設定 */
}

/* ヘッダー行 */
.decad-table th {
  text-align: left;
  background-color: #111;
  color: #07aee5;
  padding: 8px 12px;
  border-bottom: 2px solid #444;
  white-space: nowrap;
  /* 文字を折り返さない */
}

.decad-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #333;
  color: #efeff0;
  vertical-align: top;
  /* 上詰めにする */
}

.decad-table tr:last-child td {
  border-bottom: none;
}

/* 休日（マゼンタ系の行） */
.row-holiday {
  background-color: rgba(255, 0, 255, 0.05);
  /* 薄いマゼンタ背景 */
}

.row-holiday td {
  color: #ffccff;
  /* 文字色も少しピンク寄りに */
}

/* 休日（シアン系の行） */
.row-cyan {
  background-color: rgba(0, 210, 255, 0.05);
  /* 薄いシアン背景 */
}

.row-cyan td {
  color: #ccefff;
  /* 文字色も青白く */
}

/* テーブル内のタグ装飾 */
.tag-cycle {
  display: inline-block;
  padding: 2px 6px;
  background: #333;
  border-radius: 3px;
  font-size: 0.8em;
  color: #aaa;
  margin-right: 6px;
  border: 1px solid #444;
}

/* 各相ごとのタグ色設定（汎用・予備） */
.tag-mercy {
  color: #00d2ff;
  border-color: #00d2ff;
  background: rgba(0, 210, 255, 0.1);
}

.tag-discipline {
  color: #ccc;
  border-color: #555;
}

.tag-foundation {
  color: #00d2ff;
  border-color: #00d2ff;
  background: rgba(0, 210, 255, 0.1);
}

.tag-kingdom {
  color: #e507d5;
  border-color: #e507d5;
  background: rgba(229, 7, 213, 0.1);
}

/* --------------------------------------------------------------------------
   カレンダーウィジェット (Calendar Widget)
   ※JSで動的に生成される場合などに使用
   -------------------------------------------------------------------------- */
.calendar-widget {
  max-width: 400px;
  margin: 32px auto;
  /* 中央配置 */
  border: 4px solid #444;
  background: #121214;
  padding: 24px;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  /* 強い影で浮き上がらせる */
}

/* 暦の相に応じた枠線の色変化 */
.calendar-widget.phase-normal {
  border-color: #efeff0;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.calendar-widget.phase-cyan {
  border-color: #00d2ff;
  box-shadow: 0 0 15px rgba(7, 174, 229, 0.3);
}

.calendar-widget.phase-magenta {
  border-color: #ff00ff;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
}

.calendar-widget.phase-special {
  border-color: #ff4500;
  /* 特別な日（赤） */
  box-shadow: 0 0 15px rgba(255, 69, 0, 0.3);
}

.calendar-widget.phase-warning {
  border-color: #e59507;
  /* 警告色（オレンジ） */
  box-shadow: 0 0 15px rgba(229, 149, 7, 0.3);
}

.calendar-display {
  text-align: center;
  font-family: "Barlow Semi Condensed", sans-serif;
}

/* 日付の巨大数字 */
.calendar-date-row {
  font-size: 4rem;
  /* かなり大きく */
  line-height: 1;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  /* 発光表現 */
}

.calendar-sep {
  color: #666;
  font-weight: 300;
}

.calendar-info-row {
  margin-top: 8px;
  font-size: 1.5rem;
  text-transform: uppercase;
  /* 英字を大文字に */
  color: #aaaab1;
}

/* 相に応じた文字色変化 */
.phase-normal .calendar-info-row {
  color: #efeff0;
}

.phase-cyan .calendar-info-row {
  color: #00d2ff;
}

.phase-magenta .calendar-info-row {
  color: #ff00ff;
}

.phase-special .calendar-info-row {
  color: #ff4500;
}

.phase-warning .calendar-info-row {
  color: #e59507;
}

.calendar-attr-row {
  margin-top: 4px;
  font-size: 1rem;
  color: #efeff0;
  font-family: "Yu Mincho", serif;
  /* 雰囲気出しのための明朝体 */
}

/* 点滅アニメーションするメッセージ */
.calendar-message {
  margin-top: 16px;
  font-weight: bold;
  color: #07aee5;
  animation: pulse 2s infinite;
  /* 2秒間隔で繰り返す */
}

/* 点滅アニメーションの定義 */
@keyframes pulse {
  0% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 8px currentColor;
    /* 文字色が光る */
  }

  100% {
    opacity: 0.7;
  }
}

/* --------------------------------------------------------------------------
   月のグリッド表示 (Month Grid)
   -------------------------------------------------------------------------- */
.month-grid {
  display: grid;
  /* グリッドレイアウト */
  /* 列数を自動計算（200px以上の幅で埋める） */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.month-card {
  background: #202023;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid #333;
  text-align: center;
  transition: all 0.3s ease;
}

.month-card:hover {
  background: #29292d;
  /* ホバー時に少し明るく */
}

.month-icon-img {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  display: block;
  transition: transform 0.3s ease;
}

.month-card:hover .month-icon-img {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(7, 174, 229, 0.6));
}

.month-title {
  font-size: 1.1rem;
  color: #efeff0;
  margin: 0;
  font-weight: bold;
}

.month-desc {
  font-size: 0.9rem;
  color: #aaaab1;
  margin: 4px 0 8px;
}

/* --------------------------------------------------------------------------
   年間カレンダー (Annual Calendar - Static Cards)
   -------------------------------------------------------------------------- */
.year-calendar-container {
  display: grid;
  /* 最小幅260pxでレスポンシブなグリッドを作成 */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.month-header {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #333;
}

/* 月アイコン */
.month-header .month-icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  /* アスペクト比を維持して枠に収める */
  margin-bottom: 8px;
  transition: transform 0.3s;
}

.month-card:hover .month-header .month-icon-img {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(7, 174, 229, 0.6));
}

.calendar-table-wrap {
  padding: 8px;
  background: #1a1a1c;
  flex-grow: 1;
  /* 高さを埋める */
  display: flex;
  align-items: center;
  /* 垂直方向中央配置 */
}

/* カレンダー部分のテーブル */
.calendar-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  /* 列幅を均等にする */
}

.calendar-table th,
.calendar-table td {
  border: 1px solid #444;
  text-align: center;
  padding: 2px 1px;
  /* 狭めのパディング */
  vertical-align: middle;
}

.calendar-table th {
  background-color: #111;
  color: #efeff0;
  vertical-align: middle;
}

/* 曜日ヘッダー英語 */
.calendar-table th .h-en {
  display: block;
  font-size: 1.1em;
  color: #aaa;
  margin-bottom: 2px;
}

/* 曜日ヘッダー日本語 */
.calendar-table th .h-jp {
  display: block;
  font-size: 0.9em;
}

/* 日付セル */
.day-cell {
  font-size: 0.9rem;
  font-weight: bold;
  height: 24px;
  /* 最小高さ確保 */
  vertical-align: middle;
}

/* -- 日付セルの色分け -- */
.day-normal {
  color: #efeff0;
  background-color: transparent;
}

.day-cyan {
  color: #00d2ff;
  background-color: rgba(0, 210, 255, 0.05);
}

.day-magenta {
  color: #ff00ff;
  background-color: rgba(255, 0, 255, 0.05);
}

.day-special {
  color: #ff4500;
  /* オレンジレッド */
  background-color: rgba(255, 69, 0, 0.05);
}

.day-warning {
  color: #ffaa00;
  /* アンバー */
  background-color: rgba(255, 170, 0, 0.05);
}

/* 共鳴日（ハイライト） */
.day-resonance {
  background-color: rgba(255, 255, 255, 0.1);
  position: relative;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   ツールチップポップアップ (Tooltip Styling)
   -------------------------------------------------------------------------- */
.has-tooltip {
  position: relative;
  /* 子要素（ポップアップ）の基準位置になる */
  cursor: help;
  /* カーソルを「？」マーク等にする */
}

.tooltip-popup {
  display: none;
  /* デフォルトでは非表示 */
  position: absolute;
  /* 絶対配置で浮遊させる */
  bottom: 100%;
  /* 親要素の真上 */
  left: 50%;
  /* 左右中央 */
  transform: translateX(-50%);
  /* 中央補正 */

  background: rgba(0, 0, 0, 0.95);
  color: #efeff0;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #07aee5;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: pre-wrap;
  /* 改行コードを反映 */
  width: max-content;
  /* 中身に合わせて幅調整 */
  max-width: 250px;
  /* 最大幅制限 */
  text-align: left;
  z-index: 1000;
  /* 他の要素より手前に表示 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  margin-bottom: 8px;
  /* 吹き出しのしっぽ分の余白 */
  pointer-events: none;
  /* マウスイベントを透過（邪魔にならないように） */
}

/* ホバー時に表示 */
.has-tooltip:hover .tooltip-popup {
  display: block;
  animation: fadeIn 0.2s ease;
  /* フェードインアニメーション */
}

/* 吹き出しの三角（しっぽ）部分 */
.tooltip-popup::before {
  content: '';
  position: absolute;
  top: 100%;
  /* 本体の下 */
  left: 50%;
  /* 中央 */
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  /* 上向きの▲を作る（上辺のみ色付き、他は透明） */
  border-color: #07aee5 transparent transparent transparent;
}

.tooltip-title {
  color: #ff4500;
  font-weight: bold;
  font-size: 0.9rem;
}

/* フェードインアニメーション定義 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* --------------------------------------------------------------------------
   共鳴日リスト (Resonance Days List)
   -------------------------------------------------------------------------- */
.resonance-list {
  display: grid;
  /* 最小 280px または親幅の 23% のどちらか大きい方を確保しつつ敷き詰める */
  grid-template-columns: repeat(auto-fill, minmax(max(280px, 23%), 1fr));
  gap: 12px;
  margin-top: 24px;
}

.resonance-card {
  background: #202023;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
  /* 内部の要素がはみ出さないように */
  display: flex;
  flex-direction: column;
  /* 中身を縦並びに */
}

.resonance-card:hover {
  border-color: #07aee5;
  box-shadow: 0 0 10px rgba(7, 174, 229, 0.2);
  transition: all 0.3s ease;
}

.resonance-header {
  background: #1a1a1c;
  padding: 12px 16px;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.resonance-date {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  color: #07aee5;
  white-space: nowrap;
  /* 日付は折り返さない */
  margin-right: 12px;
}

.resonance-titles {
  flex-grow: 1;
  /* 残りの幅を埋める */
}

.resonance-name {
  display: block;
  /* ブロック要素にして改行 */
  font-size: 1.1rem;
  font-weight: bold;
  color: #efeff0;
  line-height: 1.3;
}

.resonance-theme {
  display: block;
  font-size: 0.85rem;
  color: #aaaab1;
  margin-top: 4px;
  font-style: italic;
}

.resonance-body {
  padding: 12px 16px;
  font-size: 0.95rem;
  line-height: 1.8;
  /* ルビが入っても読みやすい行間 */
  color: #f5f5f5;
  flex-grow: 1;
  /* カードの高さを揃えるために伸ばす */
}

/* --------------------------------------------------------------------------
   共鳴日カード内のルビ調整
   (data-ruby属性を使った擬似要素表示)
   -------------------------------------------------------------------------- */
.resonance-card ruby[data-ruby] {
  display: inline-block;
  /* インラインブロックとして扱う */
  position: relative;
  /* 擬似要素の基準点 */
  overflow: visible;
  /* はみ出し許可 */
  margin: 0;
  line-height: inherit;
}

/* デフォルトの rt タグは非表示にする */
.resonance-card ruby[data-ruby] rt {
  display: none !important;
}

/* data-ruby属性の中身を上部に表示 */
.resonance-card ruby[data-ruby]::after {
  content: attr(data-ruby);
  /* 属性値をコンテンツとして使用 */
  display: block;
  position: absolute;
  top: -0.25em;
  /* 文字の上に配置（微調整が必要な場合あり） */
  left: 50%;
  transform: translateX(-50%);
  /* 左右中央揃え */
  white-space: nowrap;
  /* 折り返さない */
  font-size: 0.45em;
  /* ルビの文字サイズ */
  text-align: center;
  line-height: 1;
  opacity: 1;
  pointer-events: none;
  /* マウス操作を邪魔しない */
}

.resonance-section-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: #07aee5;
  margin: 16px 0 6px;
  padding-left: 8px;
  border-left: 3px solid #07aee5;
  /* 左側にアクセントライン */
}

/* 最初の見出しは上余白なし */
.resonance-section-title:first-child {
  margin-top: 0;
}

.resonance-txt {
  font-size: 0.9rem;
  color: #ddd;
  margin-bottom: 12px;
}

.resonance-txt:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   レイアウト調整とモバイル対応 (Sticky Layout & Mobile Overrides)
   -------------------------------------------------------------------------- */
.calendar-page-layout {
  display: flex;
  align-items: flex-start;
  width: 100%;
  position: relative;
}

/* --- PC版: サイドバーの追従設定 --- */
.calendar-page-layout .rule-side {
  position: -webkit-sticky;
  /* Safari対応 */
  position: sticky;
  /* スクロールに追従 */
  top: 50px;
  /* 上から50pxの位置で固定 */
  left: auto;
  height: calc(100vh - 50px);
  /* 画面の高さに合わせる */
  z-index: 10;
  width: 280px;
  flex-shrink: 0;
  /* 幅を縮めない */
  overflow-y: auto;
  /* 中身が多い場合はスクロール */
}

/* --- PC版: メインコンテンツ設定 --- */
.calendar-page-layout .rule-main {
  position: static;
  left: auto;
  width: auto;
  flex-grow: 1;
  /* 残りの幅を使用 */
  margin-top: 0;
}

/* --- スマホ/タブレット向け設定 (幅768px以下) --- */
@media (max-width: 768px) {

  /* レイアウトリセット */
  .calendar-page-layout {
    display: block;
    /* 縦並びに戻す */
  }

  /* サイドバー（メニュー）を隠しメニュー化 */
  .calendar-page-layout .rule-side {
    position: fixed;
    /* 画面固定 */
    left: -100%;
    /* 画面外へ隠す */
    width: 280px;
    height: calc(100vh - 50px);
    transition: left 0.3s ease;
    /* スライドインアニメーション */
  }

  /* メニュー展開時 */
  .calendar-page-layout .rule-side.is-active {
    left: 0;
    /* 画面内へ表示 */
  }

  /* メインコンテンツの幅調整 */
  .calendar-page-layout .rule-main {
    width: 100%;
    margin-top: 24px;
    padding: 0 12px;
  }

  /* 共鳴日リストのグリッドを1列にする */
  .resonance-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* 余白の微調整 */
  .resonance-body {
    padding: 12px;
    font-size: 0.9rem;
  }

  .resonance-header {
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  .resonance-date {
    font-size: 1rem;
  }

  /* --- デカドテーブルのモバイル表示 --- */
  .decad-table-container {
    overflow-x: visible !important;
    /* スクロールさせずに折り返す */
  }

  .decad-table {
    table-layout: fixed !important;
    /* 列幅を固定 */
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .decad-table th,
  .decad-table td {
    padding: 6px 4px;
    font-size: 0.8rem;
    white-space: normal !important;
    /* テキストの折り返しを許可 */
    word-break: break-all;
    /* 長い単語も強制的に改行 */
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box !important;
  }

  .decad-table th {
    text-align: center;
    white-space: normal !important;
  }

  /* 列幅の個別調整（スマホで見やすくするため） */

  /* 1列目: 日数 */
  .decad-table th:nth-child(1),
  .decad-table td:nth-child(1) {
    width: 3em;
    text-align: center;
  }

  /* 2列目: 相日名 */
  .decad-table th:nth-child(2),
  .decad-table td:nth-child(2) {
    width: 8.5em;
  }

  /* 3列目: 区分（平日/休日など） */
  .decad-table th:nth-child(3),
  .decad-table td:nth-child(3) {
    width: 4em;
    text-align: center;
  }

  /* 4列目: 市民生活の例（残りの幅すべて） */
  .decad-table th:nth-child(4),
  .decad-table td:nth-child(4) {
    width: auto;
  }
}