/* 由緒（/shakaku/）と御祭神（/saijin/）。Figma「由緒」「御祭神」の画面に合わせる。マークアップは inc/tensha-shrine-page.php と各テンプレート。
   文字サイズは onmyodo-typography.css が @layer の中で !important で決めているため、
   それより先に読み込むこのファイルでレイヤーを作って上書きする（天社宮トップ・祈願祭と同じ方法）。 */

@layer tensha-shrine {
  body .p-shrine :is(p, dt, dd, span, a, summary, h2) { line-height: 1.85 !important; }
  /* 本文：Figma 18px・行33px。前書き：17px・行33.6px */
  body .p-shrine :is(.p-shrine__text, .p-shrine__text > p, .p-shrine__gods, .p-shrine__gods :is(dt, dd, span)) { font-size: 1.8rem !important; line-height: 33px !important; }
  body .p-shrine :is(.p-shrine__lead, .p-shrine__lead > p, .p-shrine__closing, .p-shrine__closing > p) { font-size: 1.7rem !important; line-height: 33.6px !important; }
  /* 見出し：Figma 24px・Medium */
  body .p-shrine :is(.p-shrine__acc-title, .p-shrine__acc-sub) { font-size: 2.4rem !important; line-height: 34px !important; }
  body .p-shrine .p-shrine__hero-title--text { font-size: 2.8rem !important; line-height: 1.4 !important; }
  /* 中国語・韓国語の縦書きは、日本語の題字の字（幅44px）に近い大きさに */
  body:is(.tensha-lang-zh-cn, .tensha-lang-zh-tw, .tensha-lang-ko) .p-shrine .p-shrine__hero-title--text { font-size: 3.2rem !important; }
  /* 英語は字を倒して1列に並べるので、長い題（Enshrined Deities）も線画の枠に収まる大きさに */
  body.tensha-lang-en .p-shrine .p-shrine__hero-title--text { font-size: 2.4rem !important; }
  body .p-shrine--ml .p-shrine__text :is(h3, li, blockquote, blockquote p) { font-size: 1.8rem !important; line-height: 33px !important; }

  @media screen and (max-width: 767px) {
    body .p-shrine :is(.p-shrine__text, .p-shrine__text > p, .p-shrine__gods, .p-shrine__gods :is(dt, dd, span)) { font-size: 1.7rem !important; line-height: 1.9 !important; }
    body .p-shrine :is(.p-shrine__lead, .p-shrine__lead > p, .p-shrine__closing, .p-shrine__closing > p) { font-size: 1.7rem !important; line-height: 1.9 !important; }
    body .p-shrine :is(.p-shrine__acc-title, .p-shrine__acc-sub) { font-size: 2rem !important; line-height: 1.5 !important; }
    body .p-shrine .p-shrine__hero-title--text { font-size: 1.6rem !important; line-height: 1.3 !important; }
    body:is(.tensha-lang-zh-cn, .tensha-lang-zh-tw, .tensha-lang-ko, .tensha-lang-en) .p-shrine .p-shrine__hero-title--text { font-size: 1.6rem !important; }
    body .p-shrine--ml .p-shrine__text :is(h3, li, blockquote, blockquote p) { font-size: 1.7rem !important; line-height: 1.9 !important; }
  }
}

body:has(.p-shrine) { background: #f5f5f1 url("../img/tensha-renew/bg-news-texture.png") repeat top left / 160px 163px; }

.p-shrine {
  --shrine-ink: #1a1a1a;
  padding: 0 20px 120px;
  overflow: hidden;
  color: var(--shrine-ink);
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.p-shrine p { margin: 0; }

/* ページ内リンク（/saijin/#kuzuha-inari など）で開いた節が、固定ヘッダーの下に隠れないように */
.p-shrine [id] { scroll-margin-top: 110px; }

/* ---------- いちばん上の線画（位置は Figma の幅1100×312の枠に対する割合） ---------- */
.p-shrine__hero { margin: 40px auto 0; } /* 上の余白：Figma より詰める（2026-10-24 宮の指示で半分を2回のあと、PC は気持ち広げて 40px。スマホは下で 14px） */

.p-shrine__hero-frame {
  position: relative;
  width: min(1100px, 100%);
  aspect-ratio: 1100 / 312;
  margin: 0 auto;
}

.p-shrine__hero-art { position: absolute; display: block; height: auto; }
/* 太一の字と晴明桔梗は Figma の8割の大きさ（2026-10-24 宮の指示）。PC は Figma の中心より 16px（枠の幅1100のとき）下げる（同日 宮の指示。スマホは下のメディアクエリで別に置く） */
.p-shrine__hero-art--taiitsu { left: 19.73%; top: 12.81%; width: 7.27%; }
.p-shrine__hero-art--seiman { left: 70.78%; top: 8.74%; width: 11.07%; }
.p-shrine__hero-art--cloud-left { left: 0; top: 63.75%; width: 30.01%; }
.p-shrine__hero-art--cloud-right { left: 78.04%; top: 48.08%; width: 21.96%; }

/* 雲は左右にゆっくり漂う（2026-10-25 宮の指示。日本語版・各言語版とも）。左右で向きと速さを変える。動きを減らす設定の画面では動かさない */
.p-shrine__hero-art--cloud-left { animation: shrine-cloud-left 9s ease-in-out infinite alternate; }
.p-shrine__hero-art--cloud-right { animation: shrine-cloud-right 11s ease-in-out infinite alternate; animation-delay: -4s; }

@keyframes shrine-cloud-left {
  from { transform: translate(-8px, 0); }
  to   { transform: translate(8px, -2px); }
}

@keyframes shrine-cloud-right {
  from { transform: translate(8px, 0); }
  to   { transform: translate(-8px, -2px); }
}

@media (prefers-reduced-motion: reduce) {
  .p-shrine__hero-art--cloud-left, .p-shrine__hero-art--cloud-right { animation: none; }
}

.p-shrine__hero-title {
  position: absolute;
  left: 48%;
  top: 27.24%;
  width: 4%;
  margin: 0;
  padding: 0;
  border: 0;
}

.p-shrine__hero--saijin .p-shrine__hero-title { top: 20.83%; }
.p-shrine__hero-title img { display: block; width: 100%; height: auto; }

/* 各言語版の題字：SVG の代わりに題を文字で出す（四季の会の各言語版と同じ）。日本語の題字と同じく、どの言語も縦書き
   （2026-10-24 宮の指示。中国語・韓国語は字を立てて、英語は横に倒して1列に）。位置は日本語の題字の中心（枠の上から 41.6%）に合わせる */
.p-shrine .p-shrine__hero-title--text {
  left: 50%;
  top: 41.6%;
  width: auto;
  max-width: none;
  color: var(--shrine-ink);
  font-weight: 500;
  letter-spacing: .3em;
  text-align: center;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: translate(-50%, -50%);
}
.tensha-lang-en .p-shrine .p-shrine__hero-title--text { letter-spacing: .06em; }

/* ---------- 前書き・結び ---------- */
.p-shrine__lead,
.p-shrine__closing {
  max-width: 1000px;
  margin: 136px auto 0;
  text-align: center;
}

.p-shrine__closing { margin-top: 0; }

/* ---------- 見出しごとのアコーディオン（天社宮トップの一〜五と同じ作り） ---------- */
.p-shrine__accs { max-width: 1000px; margin: 60px auto 0; padding-bottom: 115px; }
.p-shrine--saijin .p-shrine__accs { margin-top: 161px; }

.p-shrine__acc { border-bottom: .5px solid var(--shrine-ink); }
.p-shrine__acc:first-child { border-top: .5px solid var(--shrine-ink); }
/* 最後の節を開いたときは、内容の下（枠の外）に線を引かない */
.p-shrine__acc:last-child[open] { border-bottom: 0; }

.p-shrine__acc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 32px 20px 32px 0; /* 見出しは線の頭にそろえる（2026-10-24 宮の指示）。矢印は Figma のまま右端から20px */
  cursor: pointer;
  list-style: none;
}

.p-shrine__acc-summary::-webkit-details-marker { display: none; }
.p-shrine__acc-summary:focus-visible { outline: 2px solid rgba(191, 56, 35, .45); outline-offset: 4px; }

.p-shrine__acc-title { margin: 0; padding: 0; border: 0; color: var(--shrine-ink); font-weight: 500; letter-spacing: 0; text-align: left; }
.p-shrine__acc-title::before, .p-shrine__acc-title::after { content: none; }
.p-shrine__acc-sub { font-weight: 500; }

.p-shrine__acc-chevron {
  flex-shrink: 0;
  width: 22px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("../img/tensha-top/chevron.svg") no-repeat center / 13px 22px;
  mask: url("../img/tensha-top/chevron.svg") no-repeat center / 13px 22px;
  transform: rotate(90deg);
  transition: transform .2s;
}

.p-shrine__acc[open] > .p-shrine__acc-summary .p-shrine__acc-chevron { transform: rotate(-90deg); }
.p-shrine__acc[open] > .p-shrine__acc-summary { border-bottom: .5px solid var(--shrine-ink); }

.p-shrine__acc-body { padding: 48px 0 115px; }

/* 本文：段落の間は1行あける（今までの <br><br> と同じ） */
.p-shrine__text { text-align: justify; }
.p-shrine__text > p + p { margin-top: 33px !important; }
.p-shrine__acc-body > * + * { margin-top: 33px !important; }

/* 歌（一首）は字下げして置く */
.p-shrine .p-shrine__poem { padding-left: 2em; }

/* 各言語版の本文（DB の訳）：天社十二神の一代〜七代は h3＋箇条、歌は blockquote（訳と日本語の原歌） */
.p-shrine--ml .p-shrine__text :is(h3, ul, blockquote) { margin: 0; padding: 0; border: 0; }
.p-shrine--ml .p-shrine__text > * + * { margin-top: 33px !important; }
.p-shrine--ml .p-shrine__text h3 { color: var(--shrine-ink); font-weight: 500; letter-spacing: 0; text-align: left; }
.p-shrine--ml .p-shrine__text h3 + ul { margin-top: 8px !important; }
.p-shrine--ml .p-shrine__text ul { list-style: none; }
.p-shrine--ml .p-shrine__text blockquote { padding-left: 2em; }
.p-shrine--ml .p-shrine__text blockquote > p + p { margin-top: 16px !important; }
.p-shrine--ml .p-shrine__text a { text-decoration: underline; text-underline-offset: .25em; }
.tensha-lang-ko .p-shrine { word-break: keep-all; }
/* 韓国語は語の切れ目でしか折り返さないので、両端そろえにすると語の間が大きく空く。左そろえにする */
.tensha-lang-ko .p-shrine__text { text-align: left; }
.tensha-lang-en .p-shrine__text { text-align: left; }

/* 天社十二神の節の太一の書（トップと同じ書） */
.p-shrine__calligraphy { margin: 40px auto; text-align: center; }
.p-shrine__calligraphy img { display: block; width: 336px; max-width: 100%; height: auto; margin: 0 auto; }
.p-shrine__calligraphy figcaption { margin-top: 12px; }

/* 天社十二神の一代〜七代 */
.p-shrine__gods {
  margin-bottom: 0;
  padding: 8px 0;
  border-top: .5px solid rgba(26, 26, 26, .4);
  border-bottom: .5px solid rgba(26, 26, 26, .4);
}

.p-shrine__gods-row { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 0 20px; padding: 12px 0; }
.p-shrine__gods-row + .p-shrine__gods-row { border-top: .5px solid rgba(26, 26, 26, .15); }
.p-shrine__gods dt { margin: 0; font-weight: 500; }
.p-shrine__gods dd { margin: 0; }
.p-shrine__gods dd > span { display: block; }
.p-shrine__gods-role { margin-left: 1em; }

/* ---------- 写真・ボタン ---------- */
.p-shrine__photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 80px auto 0;
}

/* 写真の角は天社宮トップの写真（.tt-link__img）と同じ 10px の角丸 */
.p-shrine__photos img { display: block; width: 100%; height: auto; border-radius: 10px; }

.p-shrine__btns { margin-top: 80px; text-align: center; }
.p-shrine--saijin .p-shrine__btns { margin-top: 0; }

/* ---------- スマホ ---------- */
@media screen and (max-width: 767px) {
  .p-shrine { padding: 0 16px 88px; }
  /* 線画はスマホ用に置き直す（2026-10-24 宮の見本：幅876×高さ430の比率）。枠は画面の幅いっぱいにし、
     太一の字・晴明桔梗・題字を大きく中央寄りに、左右の雲を寄せて画面の端で切る。題字は 御祭神 と 由緒 で縦の中心をそろえる */
  .p-shrine__hero { margin-top: 14px; }
  .p-shrine__hero-frame { width: calc(100% + 32px); margin-left: -16px; aspect-ratio: 876 / 430; }
  .p-shrine__hero-art--taiitsu { left: 18.12%; top: 13.97%; width: 9.76%; } /* 見本の8割（中心はそのまま） */
  .p-shrine__hero-art--seiman { left: 67.91%; top: 11.8%; width: 15.28%; }
  .p-shrine__hero-art--cloud-left { left: -4.3%; top: 59.3%; width: 42%; }
  .p-shrine__hero-art--cloud-right { left: 70.8%; top: 47.7%; width: 30.7%; }
  /* 題字の字の大きさは画面の幅によらず 四季の会・祈願祭・解除の儀 と同じ（幅28px＝四季の会と同じ。祈願祭26px・解除の儀30px）。縦の中心は枠の48% */
  .p-shrine__hero-title { left: 50%; top: calc(48% - 29px); width: 28px; transform: translateX(-50%); }
  .p-shrine__hero--saijin .p-shrine__hero-title { top: calc(48% - 41px); }
  /* 各言語版の題字（文字）：太一の字と晴明桔梗の間に収める。縦の中心は日本語の題字と同じ 48% */
  .p-shrine .p-shrine__hero-title--text { top: 48%; width: auto; letter-spacing: .2em; transform: translate(-50%, -50%); }
  .tensha-lang-en .p-shrine .p-shrine__hero-title--text { letter-spacing: .06em; }
  .p-shrine--ml .p-shrine__text > * + * { margin-top: 1.9em !important; }
  .p-shrine--ml .p-shrine__text blockquote { padding-left: 1em; }
  .p-shrine__lead { margin-top: 48px; text-align: left; }
  .p-shrine__closing { text-align: left; }
  .p-shrine__accs { margin-top: 40px; padding-bottom: 64px; }
  .p-shrine--saijin .p-shrine__accs { margin-top: 56px; }
  .p-shrine__acc-summary { padding: 24px 8px 24px 0; }
  .p-shrine__acc-sub { display: block; }
  .p-shrine__acc-body { padding: 32px 0 64px; }
  .p-shrine__text > p + p, .p-shrine__acc-body > * + * { margin-top: 1.9em !important; }
  .p-shrine .p-shrine__poem { padding-left: 1em; }
  .p-shrine__gods-row { grid-template-columns: minmax(0, 1fr); padding: 14px 0; }
  .p-shrine__gods dd > span + span { margin-top: 8px; }
  .p-shrine__gods-role { display: block; margin-left: 1em; }
  .p-shrine__photos { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 56px; }
  .p-shrine__btns { margin-top: 56px; }
}
