/* 年間行事（/gyoji/）。Figma「年間行事」の画面に合わせる。マークアップは page-gyoji.php（各言語版は template-multilingual-page.php の 18 の分岐）、線画とスライドの部品と動きは inc/tensha-gyoji-page.php。
   文字サイズは onmyodo-typography.css が @layer の中で !important で決めているため、
   それより先に読み込むこのファイルでレイヤーを作って上書きする（由緒・御祭神と同じ方法）。 */

@layer tensha-gyoji {
  body .p-gyoji2 :is(p, span, a, h2) { line-height: 1.85 !important; }
  /* 本文：Figma 18px・行33px */
  body .p-gyoji2 :is(.p-gyoji2__text, .p-gyoji2__text > p, .p-gyoji2__closing > p) { font-size: 1.8rem !important; line-height: 33px !important; }
  /* 日付と題：Figma（16px・24px）より大きく 20px・32px（2026-10-24 宮の指示） */
  body .p-gyoji2 .p-gyoji2__date { font-size: 2rem !important; line-height: 1.4 !important; }
  body .p-gyoji2 .p-gyoji2__title { font-size: 3.2rem !important; line-height: 1.4 !important; }
  body .p-gyoji2 .p-gyoji2__notice-label { font-size: 1.6rem !important; line-height: 1.8 !important; }
  body .p-gyoji2 .p-gyoji2__notice-title { font-size: 2rem !important; line-height: 1.6 !important; }
  /* 各言語版の題字（文字の縦書き）。中国語・韓国語は日本語の題字の字（幅44px）に近い大きさ、英語は字を倒して1列に収まる大きさ */
  body .p-gyoji2 .p-gyoji2__hero-title--text { font-size: 3.2rem !important; line-height: 1.4 !important; }
  body.tensha-lang-en .p-gyoji2 .p-gyoji2__hero-title--text { font-size: 2.4rem !important; }
  body .p-gyoji2--ml :is(.p-gyoji2__text li, .p-gyoji2__text blockquote) { font-size: 1.8rem !important; line-height: 33px !important; }

  @media screen and (max-width: 767px) {
    body .p-gyoji2 :is(.p-gyoji2__text, .p-gyoji2__text > p, .p-gyoji2__closing > p) { font-size: 1.7rem !important; line-height: 1.9 !important; }
    body .p-gyoji2 .p-gyoji2__date { font-size: 1.6rem !important; }
    body .p-gyoji2 .p-gyoji2__title { font-size: 2.4rem !important; line-height: 1.5 !important; } /* 星祭の題は「（星祭）」の前で2行に折れる */
    body .p-gyoji2 .p-gyoji2__notice-title { font-size: 1.8rem !important; }
    body .p-gyoji2 .p-gyoji2__hero-title--text, body.tensha-lang-en .p-gyoji2 .p-gyoji2__hero-title--text { font-size: 1.6rem !important; line-height: 1.3 !important; }
  }
}

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

.p-gyoji2 {
  --gyoji-ink: #1a1a1a;
  --gyoji-heading: #27211f;
  --gyoji-soft: rgba(226, 226, 224, .35);
  padding: 0 20px 120px;
  overflow: hidden;
  color: var(--gyoji-ink);
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

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

/* ---------- いちばん上の線画（位置は Figma の幅1000×392の枠に対する割合。枠は画面の中央） ---------- */
.p-gyoji2__hero { margin: 40px auto 0; } /* 上の余白は由緒・御祭神と同じ */

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

.p-gyoji2__hero-art { position: absolute; display: block; height: auto; }
.p-gyoji2__hero-art--landscape { left: -.4%; top: 0; width: 38.5%; }
.p-gyoji2__hero-art--figures { left: 62.1%; top: 39.29%; width: 35.43%; }

/* 線画の一部（手前の人の御幣の紙垂・川のさざ波）は、SVG の中の CSS でゆっくり動かす（2026-10-24 宮の指示。松の枝先と奥の人の御幣は絵が崩れたので止めた）。
   動く部分は hero-figures.svg（class a）・hero-landscape.svg（class d〜f）の中で別の組にしてある。動きを減らす設定の画面では SVG の中で止める */

.p-gyoji2__hero-title {
  position: absolute;
  left: 47.8%;
  top: 29.85%;
  width: 4.4%;
  margin: 0;
  padding: 0;
  border: 0;
}

.p-gyoji2__hero-title img { display: block; width: 100%; height: auto; }

/* 各言語版の題字：画像の代わりにページの題を文字で縦書き（由緒・御祭神の各言語版と同じ。英語は字を倒して1列）。縦の中心は日本語の題字と同じ */
.p-gyoji2 .p-gyoji2__hero-title--text {
  left: 50%;
  top: 52.96%;
  width: auto;
  color: var(--gyoji-ink);
  font-weight: 500;
  letter-spacing: .3em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: translate(-50%, -50%);
}
/* 英語は字を倒して縦に並べ、長い題は2列に折り返して線画の高さに収める（祈願祭・解除の儀の各言語版と同じ） */
.tensha-lang-en .p-gyoji2 .p-gyoji2__hero-title--text { height: 84%; letter-spacing: .06em; white-space: normal; text-align: center; }
.p-gyoji2--ml .p-gyoji2__text :is(ul, blockquote) { margin: 0; padding: 0; }
.p-gyoji2--ml .p-gyoji2__text > * + * { margin-top: 33px !important; }
.tensha-lang-en .p-gyoji2__text { text-align: left; }
.tensha-lang-ko .p-gyoji2 { word-break: keep-all; }
/* 韓国語は語の切れ目でしか折り返さないので、両端そろえにすると語の間が大きく空く。左そろえにする */
.tensha-lang-ko .p-gyoji2__text { text-align: left; }

/* PC は風景と人物を左右へ広げ、線画全体の幅を 1100px にする（大きさと高さ・題字の位置はそのまま。2026-10-24 宮の指示） */
@media screen and (min-width: 768px) {
  .p-gyoji2__hero-frame { width: min(1100px, 100%); aspect-ratio: 1100 / 392; }
  .p-gyoji2__hero-art--landscape { left: 0; width: 35%; }
  .p-gyoji2__hero-art--figures { left: 67.79%; width: 32.21%; }
  .p-gyoji2__hero-title:not(.p-gyoji2__hero-title--text) { left: 48%; width: 4%; }
}

/* ---------- 行事ごとの節 ---------- */
.p-gyoji2__event { max-width: 1000px; margin: 74px auto 0; }
.p-gyoji2__event + .p-gyoji2__event { margin-top: 158px; }

/* 日付と題：上下に線（Figma：上下の余白 32px、日付と題の間 13px） */
.p-gyoji2__head {
  padding: 32px 0;
  border-top: .5px solid var(--gyoji-ink);
  border-bottom: .5px solid var(--gyoji-ink);
  color: var(--gyoji-heading);
  text-align: center;
}

/* 日付は見た目では題の上に置くが、HTML では題（h2）の後ろに書く（見出しで読み進める読み上げでも日付を聞き逃さないように） */
.p-gyoji2__head { display: flex; flex-direction: column; align-items: center; }
.p-gyoji2 .p-gyoji2__date { order: -1; font-weight: 500; letter-spacing: .15em; }

.p-gyoji2__title {
  margin: 13px 0 0;
  padding: 0;
  border: 0;
  color: var(--gyoji-heading);
  font-weight: 500;
  letter-spacing: .1em;
  text-align: center;
}

.p-gyoji2__title::before, .p-gyoji2__title::after { content: none; }

/* ---------- 写真のスライド（Figma：真ん中 522×355、左右に前後の写真を 0.755 倍で覗かせ、間は 56px）。
   写真は Figma より大きく、真ん中を幅 640px（縦横比は Figma のまま）にする（2026-10-24 宮の指示） ---------- */
.p-gyoji2__slider {
  --slide-w: 64%;   /* 真ん中の写真の幅（枠に対して） */
  --slide-shift: 96.5%; /* 左右の写真の中心までのずれ（写真の幅に対して）：(640/2 + 56 + 640×0.755/2) / 640 */
  --slide-side: .755;
  margin-top: 53px;
}

.p-gyoji2__stage {
  position: relative;
  aspect-ratio: 1000 / 435; /* 640 × 355/522 */
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.p-gyoji2__slide {
  position: absolute;
  top: 0;
  left: calc((100% - var(--slide-w)) / 2);
  width: var(--slide-w);
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transform: scale(var(--slide-side));
  transition: transform .5s ease, opacity .5s ease, filter .5s ease;
}

.p-gyoji2__slide img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }

.p-gyoji2__slide[data-pos="0"] { opacity: 1; transform: none; }
.p-gyoji2__slide[data-pos="1"] { opacity: 1; filter: grayscale(1); pointer-events: auto; cursor: pointer; transform: translateX(var(--slide-shift)) scale(var(--slide-side)); }
.p-gyoji2__slide[data-pos="-1"] { opacity: 1; filter: grayscale(1); pointer-events: auto; cursor: pointer; transform: translateX(calc(var(--slide-shift) * -1)) scale(var(--slide-side)); }
/* 左右に覗かせる写真は、白黒にし（2026-10-24 宮の指示）、墨色の丸い点の網（網点・ドット）を重ねて、フィルターをかけたように見せる（2026-10-24 宮の指示。透かす・暗くする・白い点はやめた）。
   網は ::after（4px ごとの、縁をぼかした墨色の点＋ごく薄い墨色の膜）。指を乗せると網が少し薄くなり、押せることが分かる */
.p-gyoji2__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(26, 26, 26, .6) 0, rgba(26, 26, 26, .25) 1px, transparent 2px) 0 0 / 4px 4px,
    rgba(26, 26, 26, .12);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.p-gyoji2__slide:is([data-pos="1"], [data-pos="-1"])::after { opacity: 1; }
.p-gyoji2__slide:is([data-pos="1"], [data-pos="-1"]):hover::after { opacity: .6; }
.p-gyoji2__slide[data-pos="after"] { transform: translateX(calc(var(--slide-shift) * 2)) scale(var(--slide-side)); }
.p-gyoji2__slide[data-pos="before"] { transform: translateX(calc(var(--slide-shift) * -2)) scale(var(--slide-side)); }

/* 矢印（Figma：直径 43px の丸、間 40px） */
.p-gyoji2__nav { display: flex; justify-content: center; gap: 40px; margin-top: 29px; }

.p-gyoji2__nav-btn {
  display: block;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--gyoji-ink);
  cursor: pointer;
  transition: opacity .2s;
}

.p-gyoji2__nav-btn svg { display: block; width: 100%; height: 100%; }
.p-gyoji2__nav-btn--prev svg { transform: rotate(180deg); }
.p-gyoji2__nav-btn:hover { opacity: .6; }
.p-gyoji2__nav-btn:focus-visible { outline: 2px solid rgba(191, 56, 35, .45); outline-offset: 3px; }

/* ---------- 本文（段落の間は1行あける） ---------- */
.p-gyoji2__text { margin-top: 47px; text-align: justify; }
.p-gyoji2__text > p + p { margin-top: 33px !important; }

/* 申込みの案内（斎行日まで出す） */
.p-gyoji2__notice {
  margin-top: 64px;
  padding: 40px 20px;
  border: .5px solid var(--gyoji-ink);
  border-radius: 10px;
  color: var(--gyoji-heading);
  text-align: center;
}

.p-gyoji2 .p-gyoji2__notice-label { font-weight: 500; letter-spacing: .08em; }
.p-gyoji2 .p-gyoji2__notice-title { margin-top: 4px !important; font-weight: 500; letter-spacing: .08em; }
.p-gyoji2__notice .c-btn { margin-top: 24px; }

/* ---------- 結び（祈願祭・解除の儀へ） ----------
   地紋の上に薄い灰色を重ねた枠を、ほかの要素と同じ幅（1000px）で置く（色は天社宮トップのお知らせ・祈りの言葉の帯と同じ。2026-10-24 宮の指示） */
.p-gyoji2__closing {
  max-width: 1000px;
  margin: 158px auto 0;
  padding: 72px 40px 80px;
  border-radius: 10px;
  background: linear-gradient(var(--gyoji-soft), var(--gyoji-soft)), #f5f5f1 url("../img/tensha-renew/bg-news-texture.png") repeat top left / 160px 163px;
  text-align: center;
}
/* ボタンは長い方（解除の儀のご案内）の幅にそろえる（2026-10-24 宮の指示）。grid の 1fr の列は、いちばん広い中身に合わせて同じ幅になる */
.p-gyoji2__btns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 24px; width: fit-content; margin: 40px auto 0 !important; }
.p-gyoji2__btns .c-btn { margin: 0; }

/* ---------- スマホ ---------- */
@media screen and (max-width: 767px) {
  .p-gyoji2 { padding: 0 16px 88px; }
  /* 線画は画面の幅いっぱいに置き、題字の字の大きさは由緒・御祭神・四季の会などと同じ（幅28px） */
  .p-gyoji2__hero { margin-top: 14px; }
  .p-gyoji2__hero-frame { width: calc(100% + 32px); margin-left: -16px; }
  .p-gyoji2__hero-title { left: 50%; top: calc(52.96% - 58px); width: 28px; transform: translateX(-50%); }
  .p-gyoji2 .p-gyoji2__hero-title--text { top: 52.96%; width: auto; letter-spacing: .2em; transform: translate(-50%, -50%); }
  .tensha-lang-en .p-gyoji2 .p-gyoji2__hero-title--text { height: 84%; letter-spacing: .06em; }
  .p-gyoji2--ml .p-gyoji2__text > * + * { margin-top: 1.9em !important; }
  .p-gyoji2__event { margin-top: 40px; }
  .p-gyoji2__event + .p-gyoji2__event { margin-top: 96px; }
  .p-gyoji2__head { padding: 24px 0; }
  .p-gyoji2__title { margin-top: 8px; }
  /* スライド：真ん中の写真を広めにし、左右の写真は少しだけ覗かせる */
  .p-gyoji2__slider { --slide-w: 84%; --slide-shift: 91.3%; margin-top: 32px; }
  .p-gyoji2__stage { width: calc(100% + 32px); margin-left: -16px; aspect-ratio: 1 / .5713; }
  .p-gyoji2__nav { margin-top: 20px; }
  .p-gyoji2__text { margin-top: 32px; }
  .p-gyoji2__text > p + p { margin-top: 1.9em !important; }
  .p-gyoji2__notice { margin-top: 48px; padding: 32px 16px; }
  .p-gyoji2__closing { margin-top: 96px; padding: 40px 20px 48px; text-align: left; }
  .p-gyoji2__closing br.is-pc { display: none; }
  .p-gyoji2__btns { grid-auto-flow: row; gap: 16px; }
}