/* 参拝のご案内（/sanpai/）。Figma「参拝のご案内」の画面に合わせる（2026-10-26）。マークアップは page-sanpai.php。
   文字サイズは onmyodo-typography.css が @layer の中で !important で決めているため、
   それより先に読み込むこのファイルでレイヤーを作って上書きする（年間行事・由緒と同じ方法）。 */

@layer tensha-sanpai {
  /* 本文：Figma 18px・行33px、小見出し 20px、罫線の見出し 24px */
  body .p-sanpai :is(.p-sanpai__lead, .p-sanpai__text, .p-sanpai__routes li) { font-size: 1.8rem !important; line-height: 33px !important; }
  body .p-sanpai .p-sanpai__subheading { font-size: 2rem !important; line-height: 26.25px !important; }
  body .p-sanpai :is(.p-sanpai__heading, .p-sanpai__contact-title) { font-size: 2.4rem !important; line-height: 26.25px !important; }
  body .p-sanpai .p-sanpai__contact-text { font-size: 1.6rem !important; line-height: 33px !important; }
  /* 各言語版の題字（文字の縦書き）。中国語・韓国語は日本語の題字（幅44px）に近い大きさ、英語は字を倒して収まる大きさ */
  body .p-sanpai .p-sanpai__hero-title--text { font-size: 3.2rem !important; line-height: 1.4 !important; }
  body.tensha-lang-en .p-sanpai .p-sanpai__hero-title--text { font-size: 2.4rem !important; line-height: 1.3 !important; }
  /* 「大和交通　乗合バスのご案内」は Figma と同じく字間なし・太め（Noto Serif SemiBold）で、幅 356px の釣り合いにする */
  body .p-sanpai .p-sanpai__btn-wrap .c-btn span { letter-spacing: 0 !important; font-weight: 600 !important; }

  @media screen and (max-width: 767px) {
    body .p-sanpai :is(.p-sanpai__lead, .p-sanpai__text, .p-sanpai__routes li) { font-size: 1.7rem !important; line-height: 1.9 !important; }
    body .p-sanpai .p-sanpai__subheading { font-size: 1.8rem !important; line-height: 1.5 !important; }
    body .p-sanpai :is(.p-sanpai__heading, .p-sanpai__contact-title) { font-size: 2.2rem !important; line-height: 1.4 !important; }
    body .p-sanpai .p-sanpai__contact-text { font-size: 1.6rem !important; line-height: 1.9 !important; }
    body .p-sanpai .p-sanpai__hero-title--text, body.tensha-lang-en .p-sanpai .p-sanpai__hero-title--text { font-size: 1.6rem !important; line-height: 1.3 !important; }
  }
}

/* 地紋の背景（年間行事・祈願祭と同じ） */
body:has(.p-sanpai) { background: #f5f5f1 url("../img/tensha-renew/bg-news-texture.png") repeat top left / 160px 163px; }

.p-sanpai {
  --sanpai-ink: #1a1a1a;
  --sanpai-heading: #27211f;
  /* 罫線と淡い灰色の地は、年間行事・祈願祭・由緒と同じ色（2026-10-26 宮の指示「他のページと合わせて」） */
  --sanpai-line: var(--sanpai-ink);
  --sanpai-soft: rgba(226, 226, 224, .35);
  padding: 0 20px 120px;
  overflow: hidden;
  color: var(--sanpai-ink);
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.p-sanpai p { margin: 0; }
.p-sanpai [id] { scroll-margin-top: 110px; }

/* ---------- いちばん上の線画（位置は Figma の幅850×413の枠に対する割合） ---------- */
.p-sanpai__hero {
  position: relative;
  width: min(850px, 100%);
  aspect-ratio: 850.26 / 413;
  margin: 40px auto 0;
}
.p-sanpai__hero-art { position: absolute; display: block; height: auto; }
.p-sanpai__hero-art--left { left: 0; top: 0; width: 35.79%; }
.p-sanpai__hero-art--right { left: 62.72%; top: 32.44%; width: 37.28%; }
/* 題字は舞う葉より手前に置き、字に葉が重なって読みにくくならないようにする */
.p-sanpai__hero-title { z-index: 2; position: absolute; left: 46.81%; top: 18.4%; width: 5.17%; margin: 0; }
.p-sanpai__hero-title img { display: block; width: 100%; height: auto; }

.p-sanpai__lead { max-width: 1000px; margin: 58px auto 0 !important; text-align: center; }

/* ---------- 罫線の見出しと節 ---------- */
.p-sanpai__section { max-width: 1000px; margin: 82px auto 0; }
.p-sanpai__section + .p-sanpai__section { margin-top: 132px; }
.p-sanpai__heading {
  margin: 0 0 50px;
  padding: 32px 0;
  border-top: .5px solid var(--sanpai-line);
  border-bottom: .5px solid var(--sanpai-line);
  color: var(--sanpai-heading);
  font-weight: 500;
  letter-spacing: .1em;
}
.p-sanpai__subheading { margin: 0 0 14px; color: var(--sanpai-heading); font-weight: 500; letter-spacing: .12em; }
.p-sanpai__text + .p-sanpai__subheading { margin-top: 62px; }

/* 基本情報：左に所在地と社務所の時間、右に地図 */
.p-sanpai__basic { display: flex; justify-content: space-between; gap: 43px; }
.p-sanpai__basic-text { flex: 1 1 auto; min-width: 0; }
.p-sanpai__basic-text .p-sanpai__text + .p-sanpai__subheading { margin-top: 62px; }
.p-sanpai__map { position: relative; flex: 0 0 52.2%; aspect-ratio: 522 / 355; overflow: hidden; border-radius: 10px; }
.p-sanpai__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* お越しになる道 */
.p-sanpai__routes { margin: 0; padding: 0 0 0 27px; list-style: disc; }
.p-sanpai__routes li { margin: 0; }
.p-sanpai__box { display: flex; align-items: center; gap: 42px; margin-top: 40px; padding: 32px 40px; border-radius: 10px; background: var(--sanpai-soft); }
.p-sanpai__box > .p-sanpai__text,
.p-sanpai__box-body { flex: 1 1 auto; min-width: 0; }
.p-sanpai__box .c-btn { flex-shrink: 0; }
.p-sanpai__box--parking { align-items: flex-start; gap: 32px; }
.p-sanpai__photo { flex: 0 0 300px; margin: 0; }
.p-sanpai__photo img { display: block; width: 100%; height: 220px; object-fit: cover; border-radius: 8px; }
.p-sanpai__box + .p-sanpai__subheading { margin-top: 82px; }
.p-sanpai__btn-wrap { margin-top: 50px !important; text-align: center; }
/* 「大和交通　乗合バスのご案内」：Figma（Frame 254）と同じく左右の余白 40px、文字と印の間 24px、印は 18px 角 */
.p-sanpai__btn-wrap .c-btn { padding-right: 40px; padding-left: 40px; }
.p-sanpai__external-wrap { display: inline-flex; flex: 0 0 18px; width: 18px; height: 18px; }
/* サイト共通の .c-btn svg（右端に絶対配置・幅を vw で決める）が効くと、印が小さくなり右へ寄るので打ち消す */
.p-sanpai .c-btn .p-sanpai__external { position: static; display: block; width: 18px; height: 18px; transform: none; }

/* お問い合わせ：画面の幅いっぱいの淡い帯 */
.p-sanpai__contact {
  margin: 122px -20px 0;
  padding: 65px 20px 69px;
  background: var(--sanpai-soft);
  text-align: center;
}
.p-sanpai__contact-title { margin: 0 0 34px; color: var(--sanpai-heading); font-weight: 500; letter-spacing: .1em; }
.p-sanpai__contact-text { margin: 0 0 50px !important; }
.p-sanpai__contact .c-btn,
.p-sanpai__back .c-btn { min-width: 260px; }
.p-sanpai__back { margin: 120px 0 0 !important; text-align: center; }

/* ---------- スマホ ---------- */
@media screen and (max-width: 767px) {
  .p-sanpai { padding: 0 16px 72px; }
  .p-sanpai__hero { width: 100%; margin-top: 24px; }
  /* スマホでは題字が小さくなりすぎるので、線画の枠の高さに収まる範囲で大きくする */
  .p-sanpai__hero-title { left: 46.5%; top: 3%; width: 7%; }
  .p-sanpai__lead { margin-top: 32px !important; text-align: left; }
  .p-sanpai__section { margin-top: 56px; }
  .p-sanpai__section + .p-sanpai__section { margin-top: 88px; }
  .p-sanpai__heading { margin-bottom: 28px; padding: 22px 0; }
  .p-sanpai__basic { flex-direction: column; gap: 32px; }
  .p-sanpai__map { flex-basis: auto; width: 100%; aspect-ratio: 4 / 3; }
  .p-sanpai__text + .p-sanpai__subheading,
  .p-sanpai__basic-text .p-sanpai__text + .p-sanpai__subheading { margin-top: 36px; }
  .p-sanpai__routes { padding-left: 1.3em; }
  .p-sanpai__box,
  .p-sanpai__box--parking { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 32px; padding: 24px 20px; }
  .p-sanpai__box .c-btn { align-self: center; }
  .p-sanpai__photo { flex-basis: auto; }
  .p-sanpai__photo img { height: auto; aspect-ratio: 300 / 220; }
  .p-sanpai__box + .p-sanpai__subheading { margin-top: 56px; }
  .p-sanpai__btn-wrap { margin-top: 32px !important; }
  .p-sanpai__contact { margin: 88px -16px 0; padding: 48px 16px 56px; }
  .p-sanpai__contact-title { margin-bottom: 24px; }
  .p-sanpai__contact-text { margin-bottom: 32px !important; text-align: left; }
  .p-sanpai__back { margin-top: 72px !important; }
}

/* ---------- 舞う葉（2026-10-26 宮の指示「左上から右下に散らす・量は少なめ」）----------
   葉は左の社の木のあたりから出て、揺れながら右下へ流れ、途中で消える。外側（.p-sanpai__leaf）が斜めに流れ、内側（::before）が揺れて回る。
   流れる距離は線画の枠の幅（cqw）に対する割合なので、スマホでも同じ割合で舞う。動きを減らす設定の画面では出さない */
.p-sanpai__hero { container-type: inline-size; }
.p-sanpai__leaves { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.p-sanpai__leaf {
  --size: 18px;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  opacity: 0;
  animation: sanpai-leaf-drift var(--dur) linear var(--delay) infinite;
}
.p-sanpai__leaf::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/sanpai/leaf.svg") no-repeat center / contain;
  animation: sanpai-leaf-sway calc(var(--dur) / 3) ease-in-out var(--delay) infinite alternate;
}
/* 葉ごとに、出る所・大きさ・流れる距離・速さ・始まる時をずらす（2026-10-26 宮の指示で小さく・3枚に減らし、
   左の社の木から右の鳥居のあたりへ、浅く・中ほど・深くと扇のように広がって舞うようにした。同時に見えるのはおよそ1枚） */
.p-sanpai__leaf--1 { --x: 22%; --y: 8%;  --size: 13px; --dx: 48; --dy: 13; --dur: 14s; --delay: 0s; }
.p-sanpai__leaf--2 { --x: 12%; --y: 20%; --size: 11px; --dx: 72; --dy: 22; --dur: 16s; --delay: -6s; }
.p-sanpai__leaf--3 { --x: 28%; --y: 30%; --size: 12px; --dx: 50; --dy: 30; --dur: 15s; --delay: -11s; }

@keyframes sanpai-leaf-drift {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; }
  35%  { transform: translate(calc(var(--dx) * .3cqw), calc(var(--dy) * .38cqw)); }
  65%  { transform: translate(calc(var(--dx) * .66cqw), calc(var(--dy) * .62cqw)); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1cqw), calc(var(--dy) * 1cqw)); }
}
@keyframes sanpai-leaf-sway {
  0%   { transform: translateX(-6px) rotate(-25deg); }
  50%  { transform: translateX(4px) rotate(20deg); }
  100% { transform: translateX(8px) rotate(65deg); }
}
/* スマホでは線画が小さくなるので、葉も小さくする */
@media screen and (max-width: 767px) {
  .p-sanpai__leaf { width: calc(var(--size) * .65); height: calc(var(--size) * .65); }
}
@media (prefers-reduced-motion: reduce) {
  .p-sanpai__leaves { display: none; }
}

/* ---------- 各言語版（template-multilingual-page.php の 4434 の分岐。2026-10-26）----------
   題字は日本語の題字の画像の代わりに、ページの題を文字で縦書き（年間行事・祈願祭の各言語版と同じ）。英語は字を倒して縦に並べ、長い題は2列に折り返す */
.p-sanpai .p-sanpai__hero-title--text {
  left: 49.4%;
  top: 50%;
  width: auto;
  color: var(--sanpai-heading);
  font-weight: 500;
  letter-spacing: .3em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: translate(-50%, -50%);
}
.tensha-lang-en .p-sanpai .p-sanpai__hero-title--text { height: 84%; letter-spacing: .06em; white-space: normal; text-align: center; }
.tensha-lang-ko .p-sanpai { word-break: keep-all; }
.p-sanpai--ml .p-sanpai__lead { text-align: center; }
.tensha-lang-en .p-sanpai--ml .p-sanpai__routes li,
.tensha-lang-en .p-sanpai--ml .p-sanpai__text { text-align: left; }
@media screen and (max-width: 767px) {
  .p-sanpai .p-sanpai__hero-title--text { left: 50%; top: 50%; width: auto; transform: translate(-50%, -50%); letter-spacing: .15em; }
  .p-sanpai--ml .p-sanpai__lead { text-align: left; }
}

/* 社務所の時間の後の「お休みの日は不定期」の一文（2026-10-26） */
.p-sanpai .p-sanpai__text + .p-sanpai__text--note { margin-top: 12px !important; }