/* 暦の読み方（/koyomiyomikata/）。道しるべ・罫線の見出し・地紋・下のボタンの並び（.p-yomikata）は、安倍晴明暦の読み物のページ（暦と神々ほか。koyomi-essay.css）でも使う。
   Figma「暦の読み方」の画面に合わせる（2026-10-27）。マークアップは page-koyomiyomikata.php。
   上に「安倍晴明暦 › 暦の読み方」の道しるべ、罫線の見出し、小見出し。本文の節は白い箱を開け閉めする並び（はじめの節だけ開いておく）。
   「暦は神々と歩む道しるべ」は灰色の箱にして授与所への案内を添え、下に「暦と神々」「安倍晴明暦」「トップへ戻る」を縦に並べる。
   罫線の見出し・灰色の箱は安倍晴明暦のページ（abe-koyomi.css）と同じ作り。灰色はサイト共通の淡い灰色（Figma の色は採らない）。
   文字サイズは onmyodo-typography.css が @layer の中で !important で決めているため、
   それより先に読み込むこのファイルでレイヤーを作って上書きする（安倍晴明暦・授与所と同じ方法）。 */

@layer koyomi-yomikata {
  /* Figma：道しるべ 15px、罫線の見出し 24px、小見出し 20px、節の題 22px（Figma は 24px。2026-10-27 宮の指示で 22px）、本文 18px・行33px、灰色の箱の題 24px・文 16px */
  body .p-yomikata .p-yomikata__crumbs,
  body .p-yomikata .p-yomikata__crumbs :is(li, a) { font-size: 1.5rem !important; line-height: 1.45 !important; }
  body .p-yomikata .p-yomikata__heading { font-size: 2.4rem !important; line-height: 26.25px !important; }
  body .p-yomikata .p-yomikata__subtitle { font-size: 2rem !important; line-height: 1.45 !important; } /* Figma は 22px。2026-10-27 宮の指示で 20px */
  body .p-yomikata .p-yomikata__acc-title { font-size: 2.2rem !important; line-height: 32px !important; }
  body .p-yomikata .p-yomikata__acc-body > p { line-height: 33px !important; }
  body .p-yomikata .p-yomikata__box-title { font-size: 2.4rem !important; line-height: 26.25px !important; }
  body .p-yomikata .p-yomikata__box-text p { font-size: 1.6rem !important; line-height: 1.75 !important; }
  /* 相性の表の生年月日の欄：右の山形の分だけ右を空ける（typography の余白の指定より先に効かせる） */
  body .p-yomikata .koyomi-aisho-form select { padding: 0 32px 0 14px !important; }
  /* 節の中身の字の大きさの使い分け（2026-10-27 宮の指示「大きさの使い分けで整理」）：
     本文 18px を基本に、言葉の名・手順の名・引用は大きく（20px）、説明は一段小さく（16px）、読み・添え書きは小さく（13〜15px） */
  body .p-yomikata .p-yomikata__quote blockquote p { font-size: 2rem !important; line-height: 1.8 !important; }
  body .p-yomikata .p-yomikata__quote figcaption { font-size: 1.5rem !important; line-height: 1.7 !important; }
  body .p-yomikata .p-yomikata__term { font-size: 2rem !important; line-height: 1.5 !important; }
  body .p-yomikata :is(.p-yomikata__term-yomi, .koyomi-guide-yomi) { font-size: 1.3rem !important; line-height: 1.5 !important; }
  body .p-yomikata :is(.p-yomikata__term-desc, .p-yomikata__step-text, .p-yomikata__cards dd, .koyomi-guide-day dd) { font-size: 1.6rem !important; line-height: 1.85 !important; }
  body .p-yomikata :is(.p-yomikata__cards dt, .p-yomikata__step-title) { font-size: 1.8rem !important; line-height: 1.6 !important; }
  body .p-yomikata .koyomi-guide-day dt { font-size: 2rem !important; line-height: 1.5 !important; }
  body .p-yomikata .koyomi-guide-hitokoto { font-size: 1.7rem !important; line-height: 1.8 !important; }
  body .p-yomikata .koyomi-guide-day-group h4 { font-size: 2rem !important; line-height: 1.5 !important; }
  body .p-yomikata :is(.p-yomikata__step-num, .p-yomikata__row-label, .p-yomikata__point-label) { font-size: 1.5rem !important; line-height: 1.4 !important; }
  body .p-yomikata .p-yomikata__note { font-size: 1.5rem !important; line-height: 1.8 !important; }
  body .p-yomikata .p-yomikata__pager-label { font-size: 1.5rem !important; line-height: 1.4 !important; }
  body .p-yomikata .p-yomikata__pager-title { font-size: 2rem !important; line-height: 1.5 !important; }
  @media screen and (max-width: 767px) {
    body .p-yomikata .p-yomikata__pager-title { font-size: 1.8rem !important; }
    body .p-yomikata .p-yomikata__quote blockquote p { font-size: 1.8rem !important; }
    body .p-yomikata :is(.p-yomikata__term, .koyomi-guide-day dt, .koyomi-guide-day-group h4) { font-size: 1.8rem !important; }
    body .p-yomikata .p-yomikata__heading { font-size: 2.2rem !important; line-height: 1.4 !important; }
    body .p-yomikata .p-yomikata__acc-title { font-size: 1.9rem !important; line-height: 1.6 !important; }
    body .p-yomikata .p-yomikata__acc-body > p { line-height: 1.9 !important; }
    body .p-yomikata .p-yomikata__box-title { font-size: 2rem !important; line-height: 1.5 !important; }
  }
}

html { scroll-behavior: smooth; }

.p-yomikata {
  --yomikata-ink: #1a1a1a;
  --yomikata-line: #d8d2ca;
  --yomikata-soft: rgba(226, 226, 224, .35); /* サイト共通の淡い灰色 */
  padding: 0 20px 120px;
  color: var(--yomikata-ink);
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}
/* 地紋はページ全体（上の帯の後ろも）に敷く（安倍晴明暦・授与所などと同じ） */
/* ページ内のリンク（#aisho など）で来たとき、上の帯に隠れないように */
.p-yomikata [id] { scroll-margin-top: 120px; }
body:has(.p-yomikata) { background: #f5f5f1 url("../img/tensha-renew/bg-news-texture.png") repeat top left / 160px 163px; }

/* ---------- 道しるべ（安倍晴明暦 › 暦の読み方）。見出しの罫線の左端にそろえる ---------- */
.p-yomikata__crumbs { max-width: 1100px; margin: 58px auto 0; } /* 字の上端を上の帯の下から 56px に（Figma） */
.p-yomikata__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; color: rgba(26, 26, 26, .6); }
.p-yomikata__crumbs li + li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 9px;
  margin: 0 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9'%3E%3Cpath d='M.35.35l4 4-4 4' fill='none' stroke='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9'%3E%3Cpath d='M.35.35l4 4-4 4' fill='none' stroke='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}
.p-yomikata__crumbs a { color: inherit; text-decoration: none; }
.p-yomikata__crumbs a:hover { text-decoration: underline; }

/* ---------- 罫線の見出しと小見出し（安倍晴明暦のページと同じ作り。Figma は幅1100px） ---------- */
.p-yomikata__heading {
  max-width: 1100px;
  margin: 18px auto 0;
  padding: 32px 0;
  border-top: .5px solid var(--yomikata-ink);
  border-bottom: .5px solid var(--yomikata-ink);
  color: #27211f;
  font-weight: 500;
  letter-spacing: .1em;
  text-align: center;
}
.p-yomikata__subtitle { margin: 56px 0 0; font-weight: 500; text-align: center; }

/* ---------- 節の白い箱（開け閉めする。Figma：幅1000px・角丸10px・上下40px・左右45px・箱の間は詰めて16px） ---------- */
.p-yomikata__accs { max-width: 1000px; margin: 56px auto 0; }
.p-yomikata__acc { background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); } /* 影はトップのお知らせの札（onmyodo-news-cards.css）と同じ（2026-10-28 宮の指示） */
.p-yomikata__acc + .p-yomikata__acc { margin-top: 16px; } /* Figma の 28px より詰める（2026-10-27 宮の指示「枠の間隔を詰めて」） */
.p-yomikata__acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 45px;
  cursor: pointer;
  list-style: none;
}
.p-yomikata__acc > summary::-webkit-details-marker { display: none; }
.p-yomikata__acc > summary:focus-visible { outline: 2px solid #bf3823; outline-offset: -2px; border-radius: 10px; }
.p-yomikata__acc[open] > summary { padding-bottom: 32px; }
.p-yomikata__acc-title { margin: 0; color: var(--yomikata-ink); font-weight: 500; text-align: left; }
.p-yomikata__acc-icon { flex-shrink: 0; display: block; width: 16px; height: 10px; transition: transform .2s; } /* Figma の 22×14 より小さく（2026-10-27 宮の指示「矢印を少し小さく」） */
.p-yomikata__acc[open] > summary .p-yomikata__acc-icon { transform: rotate(180deg); }
.p-yomikata__acc-body { padding: 0 45px 40px; text-align: left; }
.p-yomikata__acc-body p { margin: 0 0 2.4rem; }
.p-yomikata__acc-body p:last-child { margin-bottom: 0; }

/* ---------- 節の中身（前のページから引き継いだ形） ---------- */
.koyomi-guide-list {
  margin: 0 0 2.8rem;
  padding-left: 1.4em;
}
.koyomi-guide-list li {
  margin: 0 0 1.2rem;
  line-height: 1.8;
}
/* ---------- 節の中身の組み（2026-10-27 宮の指示「テキストが並んでいるだけ感。配列・大きさ・記号で区別して整理」）。文は変えず、見せ方だけ ----------
   記号の使い分け：○＝組の見出し・項目の名、丸に漢数字＝手順の番号、縦線＝引用、淡い灰色の地＝要点（開け閉めできる箱は線の枠なので、塗りの地は要点だけ）。
   記号は墨の色で、朱の飾りは使わない（2026-10-27 宮の指示「赤い装飾はなし。○とかがいいかな」） */
.p-yomikata { --yomikata-accent: var(--yomikata-ink); --yomikata-sub: rgba(26, 26, 26, .78); --yomikata-faint: rgba(26, 26, 26, .55); }
/* ○は字と同じ大きさの文字の○（天社宮トップ・編纂所トップの「○関連する読みもの」と同じ。2026-10-27 宮の指示）。読み上げでは読まない */
.p-yomikata__acc-body :is(.p-yomikata__cards dt, .koyomi-guide-day-group h4)::before {
  content: "○" / "";
  flex-shrink: 0;
  font-weight: 400;
}

/* 引用（御成敗式目の言葉） */
.p-yomikata__quote { margin: 3.2rem 0; padding: 4px 0 4px 24px; border-left: 1px solid var(--yomikata-line); } /* 線は区切りの線と同じ（2026-10-27 宮の指示） */
.p-yomikata__quote figcaption { margin-bottom: 8px; color: var(--yomikata-faint); }
.p-yomikata__quote blockquote { margin: 0; }
.p-yomikata__quote blockquote p { margin: 0; font-weight: 600; letter-spacing: .04em; }

/* 暦に書かれていること：言葉の札を2列に */
.p-yomikata__terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 2.8rem; padding: 0; list-style: none; }
.p-yomikata__terms li { margin: 0; padding: 18px 20px; border: 1px solid var(--yomikata-line); border-radius: 10px; }
.p-yomikata__terms li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* 数が奇数のとき、最後の札は横いっぱいに */
.p-yomikata__term { display: block; font-weight: 500; letter-spacing: .04em; }
.p-yomikata__term-yomi { margin-left: .8em; color: var(--yomikata-faint); font-weight: 400; letter-spacing: .08em; }
.p-yomikata__term-desc { display: block; margin-top: 6px; color: var(--yomikata-sub); }

/* 暦をひらく：三行の句を一段下げる */
.p-yomikata__verse { padding-left: 24px; border-left: 1px solid var(--yomikata-line); }

/* 営みごとに見るしるし：営みの札を2列に */
.koyomi-guide-day-group:has(> .p-yomikata__cards) { margin-top: 2.4rem; }
.p-yomikata__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.p-yomikata__cards .koyomi-guide-day { display: block; padding: 18px 20px; border: 1px solid var(--yomikata-line); border-radius: 10px; }
.p-yomikata__cards dt { display: flex; align-items: center; margin: 0; font-weight: 600; }
.p-yomikata__cards .koyomi-guide-day dd { margin: 6px 0 0; color: var(--yomikata-sub); } /* 説明は○の左端にそろえる */

/* 基本の順序：朱の丸に漢数字、縦の線でつなぐ */
.p-yomikata__steps { margin: 0 0 2.4rem; padding: 0; list-style: none; }
.p-yomikata__steps li { position: relative; display: flex; gap: 16px; margin: 0; padding-bottom: 22px; }
.p-yomikata__steps li:last-child { padding-bottom: 0; }
.p-yomikata__steps li:not(:last-child)::before { content: ""; position: absolute; top: 38px; bottom: 4px; left: 17px; width: 1px; background: var(--yomikata-line); }
.p-yomikata__step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--yomikata-accent);
  border-radius: 50%;
  background: #fff;
  color: var(--yomikata-accent);
  font-weight: 500;
}
.p-yomikata__steps li > div { padding-top: 2px; }
.p-yomikata__step-title { display: block; font-weight: 600; }
.p-yomikata__step-text { display: block; margin-top: 2px; color: var(--yomikata-sub); }
.p-yomikata__note { color: var(--yomikata-faint); }

/* 実際の一日：一〜五は「しるしの意味」の言葉の並びと同じ組み（左に番号と名、右に文、行の間に同じ細い線）。2026-10-27 宮の指示「区切り線や装飾線は同じにして」 */
.p-yomikata__acc-body p.p-yomikata__row { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 2.4rem; align-items: start; margin: 0; padding: 2rem 0; border-bottom: 1px solid var(--yomikata-line); }
.p-yomikata__acc-body > p:not(.p-yomikata__row) + p.p-yomikata__row { margin-top: 2rem; border-top: 1px solid var(--yomikata-line); }
.p-yomikata__row-head { display: flex; align-items: center; gap: 12px; min-height: 33px; }
.p-yomikata__row-head .p-yomikata__step-num { width: 30px; height: 30px; }
.p-yomikata__row-label { font-weight: 600; letter-spacing: .04em; }

/* 要点（重なる日の読み方の要・読み合わせ・しるしの結び）：淡い灰色の地 */
.p-yomikata__acc-body p.p-yomikata__point { margin-top: 2.8rem; padding: 20px 24px; border-radius: 10px; background: var(--yomikata-soft); }
.p-yomikata__point-label { display: block; margin-bottom: 6px; color: var(--yomikata-accent); font-weight: 600; letter-spacing: .08em; }

/* しるしの意味：組の見出しに朱の菱形と線、言葉の名を大きく、ひとことを太字、説明を一段小さく */
.koyomi-guide-day-group { margin: 4.8rem 0 0; }
.koyomi-guide-day-group h4 { display: flex; align-items: center; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--yomikata-ink); font-weight: 500; letter-spacing: .06em; text-align: left; }
.koyomi-guide-days { margin: 0; }
.koyomi-guide-day { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 2.4rem; padding: 2rem 0; border-bottom: 1px solid var(--yomikata-line); }
/* 組の最後の行・一〜五の最後の行の下の線は引かない（線がしつこくなるため。2026-10-27 宮の指示「最後の線はなし」） */
.koyomi-guide-days > .koyomi-guide-day:last-child,
.p-yomikata__acc-body p.p-yomikata__row:has(+ :is(.p-yomikata__point, .koyomi-aisho)) { border-bottom: 0; }
/* 一〜五の間の小さな開け閉め：区切りの線は開け閉めの下に引く（2026-10-27 宮の指示「区切り線はボタンの下に移動」） */
.p-yomikata__acc-body > .koyomi-aisho { border-bottom: 1px solid var(--yomikata-line); }
.koyomi-guide-day dt { margin: 0; font-weight: 500; letter-spacing: .04em; }
.koyomi-guide-yomi { display: block; margin-top: 2px; color: var(--yomikata-faint); font-weight: 400; letter-spacing: .08em; }
.koyomi-guide-day dd { margin: 0; color: var(--yomikata-sub); }
.koyomi-guide-day dd p { color: var(--yomikata-sub); }
/* 節の中の小さな開け閉め（相性の表・十二直と二十八宿の一覧・神吉日の由来）。外の白い箱と同じ右の矢印。
   区切りの線が多くしつこくなるので枠の線は引かず、名と矢印を右に寄せる（2026-10-27 宮の指示「ボタンの囲み線をなくしてテキストを右寄せに」） */
.koyomi-aisho { margin: 0; }
.koyomi-aisho > summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0;
  color: #bf3823; /* 開け閉めの名と矢印は朱の字（2026-10-27 宮の指示「ボタンを赤文字に」） */
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}
.koyomi-aisho > summary::-webkit-details-marker { display: none; }
.koyomi-aisho > summary::after {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M.6.5 11 12.9 21.4.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M.6.5 11 12.9 21.4.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .2s;
}
.koyomi-aisho[open] > summary::after { transform: rotate(180deg); }
.koyomi-aisho > summary:focus-visible { outline: 2px solid #bf3823; outline-offset: 2px; border-radius: 4px; }
.koyomi-aisho-inner { margin-bottom: 2.4rem; padding: 24px; border: 1px solid var(--yomikata-line); border-radius: 10px; } /* 開いた中身は区切りの線と同じ線で囲む（2026-10-27 宮の指示） */
/* 小さな箱の中身もサイトの作りにそろえる（2026-10-27 宮の指示「中身のデザインも統一して」）：
   入力欄は申込みの欄と同じ細い墨の線・角丸10px・右の山形（onmyodo-forms.css）、ボタンは墨の線・角丸8px（授与所のカードの「お授かり籠に入れる」と同じ）、
   表の見出しの地はサイト共通の淡い灰色、本日の列とご自分の行の印は朱の淡い色で付ける（前の薄茶・緑・黄の地はやめる） */
.koyomi-aisho-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 8px; }
.koyomi-aisho-form select {
  border: .5px solid var(--yomikata-ink);
  border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M.5.5 5 5 9.5.5' fill='none' stroke='%231a1a1a'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 6px;
  color: var(--yomikata-ink);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.koyomi-aisho-form select:focus { outline: 2px solid rgba(191, 56, 35, .35); outline-offset: 1px; }
.koyomi-aisho-btn {
  min-height: 44px;
  padding: 0 28px;
  border: 1px solid var(--yomikata-ink);
  border-radius: 8px;
  background: var(--yomikata-ink); /* 墨の塗りのボタン（2026-10-27 宮の指示「黒ボタンに」） */
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: opacity .2s;
}
.koyomi-aisho-btn:hover { opacity: .8; }
.koyomi-aisho-btn:focus-visible { outline: 2px solid #bf3823; outline-offset: 3px; }
.koyomi-aisho-result { font-weight: 600; margin: .8rem 0; }
.koyomi-aisho h5 { margin: 2.8rem 0 1rem; font-weight: 500; }
.koyomi-aisho-scroll { overflow-x: auto; }
/* 表の角も丸くする（2026-10-27 宮の指示。角丸10px）：線を重ねる表（collapse）は角が丸まらないので、外枠を表に、内側の線を各ます目の右と下に引く */
.koyomi-aisho-table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--yomikata-line); border-radius: 10px; font-size: 1.2rem; line-height: 1.5; white-space: nowrap; background: #fff; }
.koyomi-aisho-table th, .koyomi-aisho-table td { border: 0; border-right: 1px solid var(--yomikata-line); border-bottom: 1px solid var(--yomikata-line); padding: .3em .55em; text-align: center; }
.koyomi-aisho-table tr > :last-child { border-right: 0; }
.koyomi-aisho-table > :last-child > tr:last-child > * { border-bottom: 0; }
.koyomi-aisho-table > :first-child > tr:first-child > :first-child { border-top-left-radius: 9px; }
.koyomi-aisho-table > :first-child > tr:first-child > :last-child { border-top-right-radius: 9px; }
.koyomi-aisho-table > :last-child > tr:last-child > :first-child { border-bottom-left-radius: 9px; }
.koyomi-aisho-table > :last-child > tr:last-child > :last-child { border-bottom-right-radius: 9px; }
.koyomi-aisho-table th { font-weight: 500; }
.koyomi-aisho-table :is(thead th, tbody th) { background: var(--yomikata-soft); }
.koyomi-aisho-table tr.is-mine th, .koyomi-aisho-table tr.is-mine td { background: rgba(26, 26, 26, .06); }
.koyomi-aisho-table thead th.is-today, .koyomi-aisho-table td.is-today { background: rgba(191, 56, 35, .07); }
.koyomi-aisho-table tr.is-mine td.is-today { background: rgba(191, 56, 35, .14); font-weight: 700; box-shadow: inset 0 0 0 2px #bf3823; }
.koyomi-aisho-table--left td { text-align: left; white-space: normal; min-width: 14em; }
.koyomi-aisho-table--legend tbody th { white-space: nowrap; }
.koyomi-aisho-table--legend .legend-head th { font-weight: 600; text-align: center; }
.koyomi-aisho-legend, .koyomi-aisho-note { font-size: 1.3rem; color: #555; line-height: 1.9; }
.koyomi-guide-hitokoto { display: block; margin-bottom: 6px; color: var(--yomikata-ink); font-weight: 600; }

/* ---------- 暦は神々と歩む道しるべ（灰色の箱。Figma：幅910px・角丸10px・上下62px） ---------- */
.p-yomikata__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: 910px;
  margin: 96px auto 0;
  padding: 62px 40px;
  border-radius: 10px;
  background: var(--yomikata-soft);
  text-align: center;
}
.p-yomikata__box-title { margin: 0; color: #27211f; font-weight: 500; letter-spacing: .1em; }
.p-yomikata__box-text { margin-top: -19px; } /* 題と文の間は Figma の 29px（箱の中の間 48px から詰める） */
.p-yomikata__box-text p { margin: 0; }

/* ---------- ボタン（幅262px。下の3つは縦に並べる） ---------- */
.p-yomikata .c-btn { width: 262px; min-width: 0; }
.p-yomikata__links { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 96px; }
.p-yomikata__box + .p-yomikata__links { margin-top: 48px; }
/* 戻るボタン：矢印を文字の左に、左向きで置く（onmyodo-buttons.css の右の矢印と同じ形） */
.p-yomikata .c-btn--back::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("../img/shikinokai/figma/arrow.svg") no-repeat center / contain;
  mask: url("../img/shikinokai/figma/arrow.svg") no-repeat center / contain;
  transform: scaleX(-1);
}

/* ---------- 前へ・次へ（安倍晴明暦の読み物を順に読む。inc/koyomi-series-pager.php。2026-10-27 宮の指示） ----------
   ほかのボタン（.c-btn）と同じ墨の線の角丸の枠を左右に置く（宮の指示「ボタンは線枠で」）。押すときも .c-btn と同じく墨に反転する。
   前へは左寄せ、次へは右寄せ（はじめの暦の読み方の前へは安倍晴明暦のページ。最後のページは前へだけ） */
.p-yomikata__pager { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 96px auto 0; }
.p-yomikata__pager + .p-yomikata__links { margin-top: 56px; }
.p-yomikata__pager-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 32px;
  border: 1px solid var(--yomikata-ink);
  border-radius: 10px;
  background: transparent;
  color: var(--yomikata-ink);
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.p-yomikata__pager-link:hover { background: var(--yomikata-ink); color: #fff; }
.p-yomikata__pager-link:hover .p-yomikata__pager-label { color: rgba(255, 255, 255, .8); }
.p-yomikata__pager-link:focus-visible { outline: 2px solid #bf3823; outline-offset: 3px; }
.p-yomikata__pager-link--prev { grid-column: 1; align-items: flex-start; text-align: left; }
.p-yomikata__pager-link--next { grid-column: 2; align-items: flex-end; text-align: right; }
.p-yomikata__pager-label { display: inline-flex; align-items: center; gap: 12px; color: var(--yomikata-sub); letter-spacing: .1em; }
.p-yomikata__pager-arrow { width: 24px; height: 9px; flex-shrink: 0; }
.p-yomikata__pager-link--prev .p-yomikata__pager-arrow { transform: scaleX(-1); }
.p-yomikata__pager-title { font-weight: 500; letter-spacing: .08em; }

/* ---------- スマホ ---------- */
@media screen and (max-width: 767px) {
  .p-yomikata { padding: 0 16px 72px; }
  .p-yomikata [id] { scroll-margin-top: 70px; }
  .p-yomikata__crumbs { margin-top: 24px; }
  .p-yomikata__heading { margin-top: 12px; padding: 22px 0; }
  .p-yomikata__subtitle { margin-top: 32px; }
  .p-yomikata__accs { margin-top: 32px; }
  .p-yomikata__acc + .p-yomikata__acc { margin-top: 10px; }
  .p-yomikata__acc > summary { gap: 16px; padding: 24px 20px; }
  .p-yomikata__acc[open] > summary { padding-bottom: 20px; }
  .p-yomikata__acc-icon { width: 14px; height: 9px; }
  .p-yomikata__acc-body { padding: 0 20px 28px; }
  .p-yomikata__terms, .p-yomikata__cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .p-yomikata__terms li, .p-yomikata__cards .koyomi-guide-day { padding: 16px; }
  .p-yomikata__quote { padding-left: 18px; }
  .p-yomikata__verse { padding-left: 18px; }
  .p-yomikata__steps li { gap: 12px; }
  .p-yomikata__acc-body p.p-yomikata__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 1.6rem 0; }
  .p-yomikata__acc-body p.p-yomikata__point { padding: 16px 18px; }
  .koyomi-aisho-inner { padding: 16px; }
  .koyomi-guide-day-group { margin-top: 4rem; }
  .koyomi-guide-day { display: block; padding: 1.6rem 0; }
  .koyomi-guide-day dd { margin-top: .8rem; }
  .koyomi-guide-yomi { display: inline; margin-left: .8em; }
  .p-yomikata__box { margin-top: 56px; padding: 32px 20px; gap: 28px; }
  .p-yomikata__box-text { margin-top: -8px; text-align: left; }
  .p-yomikata__box-text br { display: none; } /* 狭い幅では行の途中で折り返すので、PC 用の改行は使わない */
  .p-yomikata__links { margin-top: 56px; gap: 12px; }
  .p-yomikata__box + .p-yomikata__links { margin-top: 28px; }
  .p-yomikata__pager { grid-template-columns: 1fr; gap: 12px; margin-top: 56px; }
  .p-yomikata__pager + .p-yomikata__links { margin-top: 40px; }
  .p-yomikata__pager-link { padding: 20px 24px; }
  .p-yomikata__pager-link--prev, .p-yomikata__pager-link--next { grid-column: 1; }
  .p-yomikata .c-btn { width: 100%; max-width: 340px; }
}

/* ご自分の九星で読む（2026-11-06）：生年月日を入れると、本日との巡りと一粒万倍日の受け取り方まで出す */
.koyomi-aisho-table--example { margin-bottom: 2.4rem; }
.koyomi-aisho-table--example tbody th { white-space: nowrap; }
.koyomi-aisho-table--example td:nth-child(2) { white-space: nowrap; text-align: center; min-width: 0; }
.koyomi-aisho-tool { margin: 0 0 2.4rem; padding: 24px; border: 1px solid var(--yomikata-line); border-radius: 10px; background: var(--yomikata-soft); }
.koyomi-aisho-tool__title { font-weight: 600; margin: 0 0 .4rem; }
.koyomi-aisho-today { margin: 0; }
.koyomi-aisho-answer { margin: 1.6rem 0 .8rem; padding: 16px 20px; border-left: 3px solid #bf3823; background: #fff; border-radius: 0 8px 8px 0; }
.koyomi-aisho-answer p { margin: 0; }
.koyomi-aisho-answer p + p { margin-top: .6rem; }
.koyomi-aisho-answer__lead { font-weight: 600; }
.koyomi-aisho-answer__sub { color: #555; }
@media (max-width: 767px) { .koyomi-aisho-tool { padding: 16px; } .koyomi-aisho-answer { padding: 12px 14px; } }
/* スマホでは、表を一行ずつの組（九星・巡り／受け取り方）に積む。横に送らずに読めるように */
@media (max-width: 767px) {
  .koyomi-aisho-table--example, .koyomi-aisho-table--example tbody, .koyomi-aisho-table--example tr { display: block; width: 100%; }
  .koyomi-aisho-table--example thead { display: none; }
  .koyomi-aisho-table--example tr { display: grid; grid-template-columns: auto 1fr; border-bottom: 1px solid var(--yomikata-line); }
  .koyomi-aisho-table--example tbody tr:last-child { border-bottom: 0; }
  .koyomi-aisho-table--example tr > * { border: 0 !important; border-radius: 0 !important; }
  .koyomi-aisho-table--example tbody th { text-align: left; padding-right: 0; }
  .koyomi-aisho-table--example td:nth-child(2) { text-align: left; background: var(--yomikata-soft); }
  .koyomi-aisho-table--example td:nth-child(3) { grid-column: 1 / -1; min-width: 0; padding-top: 0; background: transparent; }
  .koyomi-aisho-table--example tbody th, .koyomi-aisho-table--example td:nth-child(2) { padding-bottom: .4rem; }
  .koyomi-aisho-table--example td:nth-child(2)::before { content: "（"; } .koyomi-aisho-table--example td:nth-child(2)::after { content: "）"; }
  .koyomi-aisho-table--example td:nth-child(3) { padding-top: .6rem; }
}