/* 土御門文書編纂所トップ（/koyomi/）の本文。Figma「文書編纂所TOP」に合わせる。マークアップは inc/koyomi-top/sections.php
   文字サイズは onmyodo-typography.css が @layer の中で !important で決めているため、
   それより先に読み込むこのファイルでレイヤーを作って上書きする（天社宮トップと同じ方法）。 */

@layer koyomi-top {
  /* 本文・説明・小見出しは天社宮トップと同じ（本文は四季の会と同じ 18px・行34.2px・太さ標準、書の説明 14px・行22px）。スマホも同じ大きさのまま */
  body .kt-top .kt-text { font-size: 1.8rem !important; line-height: 1.9 !important; }
  body .kt-top .kt-heading__title { font-size: 2.4rem !important; line-height: 26.25px !important; }
  body .kt-top .kt-heading__eyebrow { font-size: 1.6rem !important; line-height: 26.25px !important; }
  body .kt-top .kt-box__title { font-size: 1.8rem !important; line-height: 26.25px !important; }
  body .kt-top .kt-calligraphy__caption { font-size: 1.4rem !important; line-height: 22px !important; }
  body .kt-top .kt-closing__quote { font-size: 2.2rem !important; line-height: 40px !important; }
  body .kt-top .kt-closing__message { font-size: 1.6rem !important; line-height: 31px !important; }

  /* 各言語版の MV の題字（日本語は書の画像。訳は文字で出す。sections.php） */
  body .kt-top .kt-mv__eyebrow-text { font-size: min(2rem, 2vw) !important; line-height: 1.4 !important; }
  body .kt-top .kt-mv__name-text { font-size: min(4rem, 4vw) !important; line-height: 1.3 !important; }
  body .kt-top--ko .kt-mv__name-text { font-size: min(3.2rem, 3.2vw) !important; }
  body .kt-top--en .kt-mv__name-text { font-size: min(2.8rem, 2.8vw) !important; line-height: 1.35 !important; }

  @media screen and (max-width: 767px) {
    body .kt-top .kt-heading__title { font-size: 2rem !important; }
    body .kt-top .kt-mv__eyebrow-text { font-size: 1.5rem !important; }
    body .kt-top .kt-mv__name-text { font-size: 3rem !important; }
    body .kt-top--ko .kt-mv__name-text { font-size: 2.4rem !important; }
    body .kt-top--en .kt-mv__name-text { font-size: 2.2rem !important; }
    body .kt-top .kt-closing__quote { font-size: 2rem !important; line-height: 1.8 !important; }
    body .kt-top .kt-closing__message { font-size: 1.6rem !important; line-height: 1.9 !important; }
    /* お知らせ：天社宮トップと同じく、枠内の矢印は出さず、題は1行に収めて行末を「…」にする */
    body .kt-top .kt-news .p-tensha-news__arrow { display: none !important; }
    body .kt-top .kt-news .p-tensha-news__text {
      min-width: 0;
      overflow: hidden !important;
      white-space: nowrap !important;
      text-overflow: ellipsis !important;
    }
  }
}

.kt-top {
  --kt-ink: #1a1a1a;
  --kt-heading: #1a1a1a; /* 天社宮トップの見出しと同じ墨色（Figma の #27211f からそろえた。2026-10-22 宮の指示） */
  --kt-soft: rgba(226, 226, 224, .35);
  --kt-line: .5px solid var(--kt-ink);
  color: var(--kt-ink);
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* 地紋はページ全体（body）に敷く。ヘッダーは透明なので、ヘッダーの後ろも本文と同じ地紋になる */
body:has(.kt-top) { background: #f5f5f1 url("../img/tensha-renew/bg-news-texture.png") repeat top left / 160px 163px; }

.kt-top p { margin: 0; }
.kt-top img { max-width: 100%; height: auto; }

.kt-wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---------- MV（Figma：本文幅1000の中に、星の紋・題字・左右の絵を置く。高さ477） ---------- */
.kt-mv { padding: 0 20px; }
.kt-mv__inner { position: relative; max-width: 1000px; margin: 0 auto; aspect-ratio: 1000 / 477; }
.kt-mv__inner > img, .kt-mv__title { position: absolute; }
.kt-mv__star { left: 50%; top: calc(70 / 477 * 100%); width: calc(113 / 1000 * 100%) !important; transform: translateX(-50%); mix-blend-mode: multiply; }
.kt-mv__title { left: 50%; top: calc(220 / 477 * 100%); width: calc(352 / 1000 * 100%); margin: 0; padding: 0; border: 0; transform: translateX(-50%); }
.kt-mv__title img { display: block; }
.kt-mv__eyebrow { width: calc(106 / 352 * 100%) !important; margin: 0 auto calc(20 / 352 * 100%); }
.kt-mv__name { width: 100% !important; }
.kt-mv__title--text { display: flex; flex-direction: column; align-items: center; gap: calc(16 / 1000 * 100vw); width: calc(400 / 1000 * 100%); color: var(--kt-heading); font-weight: 500; text-align: center; letter-spacing: .12em; }
.kt-top--en .kt-mv__title--text { letter-spacing: .04em; }
.kt-top--zh-cn .kt-mv__title--text { font-family: "Noto Serif SC", "Noto Serif JP", serif; }
.kt-top--ko .kt-mv__title--text { font-family: "Noto Serif KR", "Noto Serif JP", serif; word-break: keep-all; }
.kt-mv__eyebrow-text, .kt-mv__name-text { display: block; }
.kt-mv__figure--left { left: calc(6 / 1000 * 100%); top: calc(168 / 477 * 100%); width: calc(306 / 1000 * 100%) !important; }
.kt-mv__figure--right { left: calc(726 / 1000 * 100%); top: calc(109 / 477 * 100%); width: calc(268 / 1000 * 100%) !important; }

/* ---------- お知らせ（カードの形は onmyodo-news-cards.css。帯は地紋＋薄い灰色、Figma の余白） ---------- */
body .kt-top .kt-news.onmyodo-news-band {
  padding: 52px 0 73px;
  background: linear-gradient(var(--kt-soft), var(--kt-soft)), #f5f5f1 url("../img/tensha-renew/bg-news-texture.png") repeat top left / 160px 163px;
}
body .kt-top .kt-news .p-tensha-news__title { margin-bottom: 33px; }
.kt-news__more { margin-top: 44px; text-align: center; }
.kt-news__more .c-btn { min-width: 322px; }

/* ---------- 線で挟んだ見出し ---------- */
.kt-heading { padding: 32px 0; border-top: var(--kt-line); border-bottom: var(--kt-line); color: var(--kt-heading); text-align: center; letter-spacing: 2.4px; }
.kt-heading__eyebrow { margin-bottom: 4px !important; font-weight: 500; }
.kt-heading__title { margin: 0; padding: 0; border: 0; color: inherit; font-weight: 500; letter-spacing: inherit; }

/* ---------- 土御門文書編纂所とは ---------- */
.kt-about { margin-top: 109px; }
.kt-about .kt-heading { margin-bottom: 48px; }
.kt-text { font-weight: 400; text-align: justify; }
.kt-about__text + .kt-about__text { margin-top: 1.9em !important; }
.kt-calligraphy { margin: 60px auto; text-align: center; }
.kt-calligraphy__zoom { display: block; width: 336px; margin: 0 auto; cursor: zoom-in; }
.kt-calligraphy__zoom img { display: block; width: 100%; }
.kt-calligraphy__caption { margin-top: 12px; color: var(--kt-ink); }
.kt-box { margin: 60px auto 0; max-width: 910px; padding: 32px 40px; border-radius: 10px; background: var(--kt-soft); text-align: center; }
.kt-box__title { font-weight: 500; letter-spacing: 2.4px; }
.kt-box__btns { display: flex; justify-content: center; gap: 20px; margin-top: 24px; }
.kt-box__btns .c-btn { width: 262px; min-width: 0; padding-right: 20px; padding-left: 20px; gap: 16px; white-space: nowrap; }
/* 各言語版はボタン名が長いので、幅を名前に合わせて折り返す */
.kt-top:not(.kt-top--ja) .kt-box__btns { flex-wrap: wrap; }
.kt-top:not(.kt-top--ja) .kt-box__btns .c-btn { width: auto; min-width: 262px; white-space: normal; text-align: center; }

/* ---------- 歌の帯（Figma：高さ458、雲の幅1200は左右の端5%で透明へぼかす） ---------- */
.kt-band { margin-top: 102px; padding: 90px 20px; background: var(--kt-soft); }
.kt-band__inner { position: relative; max-width: 1200px; height: 278px; margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); }
.kt-band__cloud { position: absolute; }
.kt-band__cloud--left { left: calc(-64 / 1200 * 100%); top: 58px; width: calc(481 / 1200 * 100%) !important; }
.kt-band__cloud--right { left: calc(750 / 1200 * 100%); top: 32px; width: calc(568 / 1200 * 100%) !important; }
/* 歌の画像（Figma 487.4×278）は帯の中央に。枠の高さを画像に合わせ（278）、雲は Figma の位置から 4px 下げて同じ見え方にする */
.kt-band__poem { position: absolute; left: 50%; top: 0; width: 487.4px !important; transform: translateX(-50%); }

/* ---------- 安倍晴明暦・暦想雑記・四季の会 ---------- */
.kt-section { margin-top: 102px; }
.kt-section + .kt-section { margin-top: 109px; }
.kt-section__body { display: flex; justify-content: space-between; gap: 70px; margin-top: 64px; }
.kt-section__main { flex: 0 1 479px; display: flex; flex-direction: column; }
.kt-section__main .kt-text + .kt-text { margin-top: 1.9em; }
.kt-section__btn { margin-top: auto; padding-top: 32px; }
.kt-section__btn .c-btn { min-width: 260px; }
.kt-section__figure { flex: 0 0 449px; align-self: flex-start; aspect-ratio: 449 / 319; border-radius: 10px; overflow: hidden; }
.kt-section__figure img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
/* 暦想雑記の絵：Figma では 502×387 の絵を、449×319 の枠に左へ 47.6・上へ 7 ずらして切り取っている */
.kt-section__figure--illust { position: relative; background: #fff; }
.kt-section__figure--illust img { position: absolute; left: calc(-47.567 / 449 * 100%); top: calc(-7 / 319 * 100%); width: calc(502.16 / 449 * 100%) !important; height: calc(387 / 319 * 100%) !important; max-width: none; object-fit: fill; }

/* ---------- 祈りの言葉（Figma：帯の高さ608、紋・言葉・祈りを中央に） ---------- */
.kt-closing { margin-top: 109px; padding: 70px 0; background: linear-gradient(var(--kt-soft), var(--kt-soft)), #f5f5f1 url("../img/tensha-renew/bg-news-texture.png") repeat top left / 160px 163px; text-align: center; }
.kt-closing__mark { display: block; width: 343px !important; margin: 0 auto; }
.kt-closing__quote { margin-top: 49px !important; font-weight: 400; }
.kt-closing__message { margin-top: 49px !important; }

/* ---------- スマホ ---------- */
@media screen and (max-width: 767px) {
  .kt-mv { padding: 24px 16px 32px; }
  .kt-mv__inner { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 20px 16px; }
  .kt-mv__inner > img, .kt-mv__title { position: static; transform: none; }
  .kt-mv__star { grid-column: 1 / -1; justify-self: center; width: 72px !important; }
  .kt-mv__title { grid-column: 1 / -1; justify-self: center; width: min(280px, 80%); }
  .kt-mv__title--text { width: min(320px, 90%); gap: 8px; }
  .kt-mv__figure--left, .kt-mv__figure--right { width: 100% !important; }

  body .kt-top .kt-news.onmyodo-news-band { padding: 40px 0 48px; }
  .kt-news__more { margin-top: 32px; }
  .kt-news__more .c-btn { min-width: 0; width: 100%; max-width: 340px; }

  .kt-wrap { padding: 0 16px; }
  .kt-heading { padding: 24px 0; }
  .kt-about { margin-top: 56px; }
  .kt-about .kt-heading { margin-bottom: 32px; }
  .kt-calligraphy { margin: 40px auto; }
  .kt-calligraphy__zoom { width: min(300px, 82vw); }
  .kt-box { margin-top: 40px; padding: 28px 16px; }
  .kt-box__btns { flex-direction: column; align-items: center; gap: 12px; }
  .kt-box__btns .c-btn { width: 100%; max-width: 340px; }
  .kt-top:not(.kt-top--ja) .kt-box__btns .c-btn { width: 100%; min-width: 0; }

  .kt-band { margin-top: 56px; padding: 40px 0; }
  .kt-band__inner { height: auto; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
  .kt-band__cloud { display: none; }
  .kt-band__poem { position: static; display: block; width: min(340px, 88vw) !important; margin: 0 auto; transform: none; }

  .kt-section, .kt-section + .kt-section { margin-top: 56px; }
  .kt-section__body { flex-direction: column-reverse; gap: 24px; margin-top: 32px; }
  .kt-section__main, .kt-section__figure { flex: none; width: 100%; }
  .kt-section__btn { padding-top: 24px; text-align: center; }
  .kt-section__btn .c-btn { min-width: 0; width: 100%; max-width: 340px; }

  .kt-closing { margin-top: 56px; padding: 48px 0; }
  .kt-closing__mark { width: min(260px, 70vw) !important; }
  .kt-closing__quote, .kt-closing__message { margin-top: 28px !important; }
  .kt-closing__message br.is-pc { display: none; }
}

/* 太一の書の拡大表示（inc/koyomi-top/sections.php の末尾。page-koyomi.php から移した） */
.koyomi-image-zoom {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
}

.koyomi-image-zoom img {
  cursor: zoom-in;
}

.koyomi-image-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6vw;
}

.koyomi-image-modal.is-open {
  display: flex;
}

.koyomi-image-modal:target {
  display: flex;
}

.koyomi-image-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, .72);
}

.koyomi-image-modal__panel {
  position: relative;
  z-index: 1;
  max-width: 94vw;
  max-height: 86vh;
}

.koyomi-image-modal__image {
  display: block;
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
}

.koyomi-image-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 38px;
  height: 38px;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .32);
  font-size: 28px;
  line-height: 34px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .koyomi-image-zoom {
    pointer-events: none;
  }
}