@charset "UTF-8";
/* ==========================================================================
   トップページ（一般）
   - 文字サイズは common.css の --fz-1〜8 の8段階だけを使う
   - 見出し・本文・カード・表の左端は --gutter に揃える
   - 丸写真など「絵」の位置と大きさだけ、デザイン(375px幅)の数値を calc(var(--u) * N) で指定
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOP冒頭：静止画スライド
   -------------------------------------------------------------------------- */
/* 高さはデザイン（375×780）の比率。ただし画面の高さを超えないようにする
   （スマホのブラウザは上下にバーが出るぶん、見えている高さが低い。svh はその「見えている高さ」） */
.kv {
  position: relative;
  height: calc(var(--u) * 780);
  height: min(calc(var(--u) * 780), 100svh);
  min-height: 48rem;
  overflow: hidden;
  background: #020417;
}

.kv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.4s ease;
}

.kv__slide.is-active {
  opacity: 1;
}

.kv__slide picture {
  display: contents;
}

/* どんな縦横比の写真でも枠いっぱいに表示。見せたい位置は --pos で写真ごとに指定 */
.kv__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

.kv__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 4, 23, 0.35) 0%, rgba(2, 4, 23, 0) 30%, rgba(7, 8, 42, 0) 78%, var(--c-navy) 100%);
}

.kv__slide--photo::after {
  background: linear-gradient(180deg, rgba(2, 4, 23, 0.45) 0%, rgba(2, 4, 23, 0.25) 55%, var(--c-navy) 100%);
}

/* 1枚目：タイトル・日付 */
/* 位置は「ツリーの星（写真の高さの約49%）の少し上に、タイトル一式が収まる」ように決める。
   高さがデザインどおり（780）のときは、デザインと同じ位置（上から172）になる */
.kv__title {
  position: absolute;
  top: max(7rem, calc(49% - 21.8rem));
  left: 0;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.kv__logo {
  width: calc(var(--u) * 334);
  margin-left: calc(var(--u) * 21);
}

.kv__logo img {
  width: 100%;
}

/* 写真の上に載る明朝は、太いほう（600）。背景とのコントラストが弱いため */
.kv__date {
  margin-top: 1.2rem;
  font-family: var(--ff-mincho);
  font-size: var(--fz-7);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-s);
}

.kv__date small {
  margin-inline: 0.2em;
  font-size: var(--fz-3);
}

.kv__time {
  margin-top: 0.6rem;
  font-family: var(--ff-mincho);
  font-weight: 600;
  font-size: var(--fz-6);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-s);
}

.kv__free {
  margin-top: 0.8rem;
  font-family: var(--ff-mincho);
  font-weight: 600;
  font-size: var(--fz-3);
  letter-spacing: var(--ls-s);
}

/* 2枚目以降：キャッチコピー（改行はポスターの3行と同じ。2026-10-20） */
/* 位置は高さに対する割合（デザイン 330/780）。実機は表示の高さが低いので、px で置くと下にずれる */
.kv__copy {
  position: absolute;
  top: 42.3%;
  left: var(--gutter);
  z-index: 2;
  font-family: var(--ff-mincho);
  font-weight: 600;
  font-size: var(--fz-4);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-m);
  text-shadow: 0 0 1rem rgba(0, 0, 20, 0.6);
}

.kv__copy span {
  display: block;
}

/* タイトルとコピーは、少し下からふわっと現れる（読み込み時と、スライドが切り替わるたび）
   消えるときはその場で薄くなる */
.js .kv__title > *,
.js .kv__copy > span {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.4s ease, transform 0s linear 0.4s;
}

.js .kv.is-title-in .kv__title > *,
.js .kv.is-copy-in .kv__copy > span {
  opacity: 1;
  transform: none;
  transition: opacity 1.8s ease, transform 1.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.22s);
}

/* 写真が一巡したあと（2周目以降）は、文字を動かさない。写真と同じ速さで、その場で入れ替わるだけ（スマホ・PC共通） */
.js .kv.is-plain .kv__title > *,
.js .kv.is-plain .kv__copy > span,
.js .kv.is-plain .kv__limited,
.js .kv.is-plain.is-title-in .kv__title > *,
.js .kv.is-plain.is-copy-in .kv__copy > span,
.js .kv.is-plain.is-title-in .kv__limited {
  transform: none;
  transition: opacity 2.4s ease;
  transition-delay: 0s;
}

.kv__title > :nth-child(2),
.kv__copy > span:nth-child(2) {
  --i: 1;
}

.kv__title > :nth-child(3),
.kv__copy > span:nth-child(3) {
  --i: 2;
}

.kv__title > :nth-child(4) {
  --i: 3;
}


/* --------------------------------------------------------------------------
   イベント全体コピー
   -------------------------------------------------------------------------- */
.intro {
  position: relative;
  padding: 3rem var(--gutter) calc(var(--u) * 110); /* 上の余白は 2026-10-10 に 1.5倍（2 → 3rem） */
  text-align: center;
}

.intro__bg {
  position: absolute;
  inset: calc(var(--u) * 60) 0 0;
  z-index: 0;
}

.intro__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  opacity: 0.85;
}

.intro__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--c-navy) 0%, rgba(7, 8, 42, 0.25) 22%, rgba(7, 8, 42, 0.2) 70%, var(--c-sky) 100%);
}

.intro__text {
  position: relative;
  z-index: 1;
  font-family: var(--ff-mincho);
  font-weight: 400; /* 2026-10-09 木村さん：導入文は 400 */
  /* 改行はデザイン（1009版）どおり。いちばん長い行（スマホ 24字）が折り返さないよう、狭い画面では文字を少し小さくする */
  font-size: min(var(--fz-3), calc(var(--content) / 25.2));
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-s);
}

.intro__text + .intro__text {
  margin-top: 2em;
}

/* --------------------------------------------------------------------------
   星空の背景（お知らせ〜アドベントカレンダー）
   上側と下側に1枚ずつ星空を置く。下端には山の稜線がくる
   -------------------------------------------------------------------------- */
.sky {
  position: relative;
  background: var(--c-sky);
}

.sky::before,
.sky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* スマホの星空は、支給の写真（Adobe Stock 1608450738 の縦の切り抜き）から作った2枚（_tools/build_sky.py）。
   上＝星だけの空（sky_top_sp.jpg）、下＝星だけの空＋いちばん下に写真（天の川と木のシルエット。sky_sp.jpg）。
   PC（768px〜）も同じ写真から作った別の2枚（sky_stars_pc.jpg / sky_trees_pc.jpg。下の @media） */
.sky::before {
  top: 0;
  height: calc(var(--u) * 2476);
  background: url("../image/top/sky_top_sp.jpg") center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 82%, transparent 100%);
}

.sky::after {
  bottom: 0;
  height: calc(var(--u) * 3132);
  background: url("../image/top/sky_sp.jpg") center bottom / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%);
}

.sky > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   お知らせ
   -------------------------------------------------------------------------- */
/* MOVIE（イントロとお知らせの間。2026-10-10） */
.movie {
  padding-top: 6.9rem; /* 区画のあいだは 2026-10-09 に 1.5倍（以下同じ） */
}

.movie__frame {
  position: relative;
  margin: 0 var(--gutter);
}

/* 再生ボタンなどは出さず、流しっぱなしにする（くり返し）。動画そのものは押しても何も起きない */
.movie__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0.7rem;
  background: #000;
  pointer-events: none;
}

/* 音の操作（動画の右下。2026-10-11）：左のボタン＝音を出す・消す／右のつまみ＝音量
   音なしで始まり、ボタンを押すか、つまみを動かすと音が出る。色は白と、写真に重ねる暗い幕（入口ページと同じ） */
.movie__sound {
  --sz: 3.6rem; /* ボタンの大きさ＝帯の高さ */
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  display: flex;
  align-items: center;
  padding-right: 1.2rem;
  border-radius: 99rem;
  background: rgba(2, 4, 23, 0.6);
  color: var(--c-white);
}

.movie__sound-btn {
  display: grid;
  place-items: center;
  width: var(--sz);
  height: var(--sz);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.movie__sound-btn svg {
  width: 2rem;
  height: 2rem;
}

.movie__sound-btn[aria-pressed="false"] .movie__sound-on,
.movie__sound-btn[aria-pressed="true"] .movie__sound-off {
  display: none;
}

/* つまみ：線の左側（いまの音量まで）が白、右側は薄い白。--val は js/front-page.js が入れる */
.movie__volume {
  width: 6.4rem;
  height: var(--sz);
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.movie__volume::-webkit-slider-runnable-track {
  height: 0.2rem;
  border-radius: 99rem;
  background: linear-gradient(to right, var(--c-white) var(--val, 0%), rgb(255 255 255 / 0.35) var(--val, 0%));
}

.movie__volume::-webkit-slider-thumb {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -0.5rem;
  border-radius: 50%;
  background: var(--c-white);
  -webkit-appearance: none;
}

.movie__volume::-moz-range-track {
  height: 0.2rem;
  border-radius: 99rem;
  background: rgb(255 255 255 / 0.35);
}

.movie__volume::-moz-range-progress {
  height: 0.2rem;
  border-radius: 99rem;
  background: var(--c-white);
}

.movie__volume::-moz-range-thumb {
  width: 1.2rem;
  height: 1.2rem;
  border: 0;
  border-radius: 50%;
  background: var(--c-white);
}

/* ページから音量を変えられない端末（iPhone・iPad）：つまみを出さず、ボタンだけにする */
.movie__sound.is-no-volume {
  padding-right: 0;
}

.movie__sound.is-no-volume .movie__volume {
  display: none;
}

.news {
  padding-top: 11.1rem;
}

.news__slider {
  margin-top: 2.4rem;
}

.news__track {
  gap: calc(var(--u) * 20);
}

.news__item {
  width: calc(var(--u) * 200);
}

.news-card {
  display: block;
  text-decoration: none;
}

.news-card__img {
  aspect-ratio: 178 / 132;
  overflow: hidden;
  border-radius: 0.7rem;
}

.news-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

.news-card__title {
  margin-top: 1rem;
  color: var(--c-gold);
  font-family: var(--ff-mincho);
  font-size: var(--fz-4);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-m);
}

.news-card__text {
  margin-top: 0.8rem;
  line-height: var(--lh-base);
}

.news-card__date {
  display: block;
  margin-top: 0.8rem;
  font-size: var(--fz-2);
  letter-spacing: var(--ls-m);
}

.news__slider .c-slider__arrow {
  top: calc(var(--u) * 74);
}

/* リンク付きのお知らせ（写真と題がリンクになり、文の中にもリンクを入れられ、いちばん下にボタンが付く） */
.news-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.news-card__text a {
  color: var(--c-gold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ボタンは文字に合わせた幅（カードの幅いっぱいには広げない）。高さは少し高め */
.news-card__btn {
  width: fit-content;
  min-width: 16rem;
  max-width: 100%;
  min-height: 4rem;
  margin: 1.4rem 0 0;
  padding-inline: 2.4rem;
  font-size: var(--fz-3);
  letter-spacing: var(--ls-m);
}

/* --------------------------------------------------------------------------
   開催概要
   -------------------------------------------------------------------------- */
.outline {
  padding-top: 11.1rem;
}

.outline__date {
  margin-top: 2rem;
  color: var(--c-gold);
  font-family: var(--ff-mincho);
  font-weight: 400;
  font-size: var(--fz-8);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-s);
  text-align: center;
}

.outline__date small {
  margin-inline: 0.15em;
  font-size: var(--fz-3);
}

.outline__time {
  margin-top: 0.4rem;
  color: var(--c-gold);
  letter-spacing: var(--ls-m);
  text-align: center;
}

.outline__free {
  margin-top: 1.2rem;
  font-family: var(--ff-mincho);
  font-weight: 400;
  font-size: var(--fz-5);
  letter-spacing: var(--ls-l);
  text-align: center;
}

.outline__block {
  margin-top: 3rem;
  padding-inline: var(--gutter);
}

.outline__block .c-btn {
  margin-top: 1.8rem;
}

/* 予約不要の日／予約制の日 */
.plan {
  margin-top: 5rem;
}

.plan__tabs {
  display: flex;
  justify-content: center;
  gap: 3rem;
}

.plan__tab {
  padding: 0.4rem 0;
  font-family: var(--ff-mincho);
  font-weight: 400;
  letter-spacing: var(--ls-m);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  transition: color 0.5s var(--ease);
}

.plan__tab[aria-selected="true"] {
  color: #f7d684;
}

.plan__slider {
  margin-top: 1.6rem;
}

.plan__item {
  width: var(--content);
}

/* 2枚のカードは高さを揃え、ボタンは下端に揃える */
.plan-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plan-card__dl {
  margin-top: 2.4rem;
}

.plan-card__dt {
  color: var(--c-gold);
  font-family: var(--ff-mincho);
  font-size: var(--fz-4);
  font-weight: 400;
  letter-spacing: var(--ls-l);
}

.plan-card__dd {
  margin: 0.2rem 0 0;
  line-height: var(--lh-base);
}

.plan-card__dd + .plan-card__dt {
  margin-top: 1.8rem;
}

.plan-card__list li {
  position: relative;
  padding-left: 1.4em;
}

.plan-card__list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0.1em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--c-white);
}

.plan-card__notes li {
  position: relative;
  padding-left: 1.4em;
}

.plan-card__notes li::before {
  content: "＊";
  position: absolute;
  left: 0;
}

.plan-card__lead {
  margin-top: auto;
  padding-top: 3rem;
  line-height: var(--lh-base);
  text-align: center;
}

.plan-card .c-btn {
  margin-top: 1.6rem;
}

.plan-card__after {
  margin-top: 1.4rem;
  font-size: var(--fz-2);
  line-height: var(--lh-base);
  text-align: center;
}

/* --------------------------------------------------------------------------
   開催スケジュール
   左端のコンテンツ名は固定、右の日程が横に動く
   -------------------------------------------------------------------------- */
.schedule {
  padding-top: 12rem;
}

.sched {
  --col: 2.8rem;
  --name: 17rem;
  --numh: 2.6rem; /* 日付の数字の段の高さ（この段だけ、後ろは星空のまま） */
  --wdh: 2.6rem; /* 曜日の段の高さ */
  position: relative;
  margin: 1.6rem 0 0 var(--gutter);
}

/* 左端のコンテンツ名の列（JSが作る、動かない重ね書き）。
   これがあるときは、表の中の列は固定しない（iPhoneでカクつくため） */
.sched .sched__fixed {
  position: absolute;
  top: 0;
  left: -1px; /* 左端に1px未満の隙間ができ、後ろの棒が透けて見えるのを防ぐ */
  z-index: 2;
  width: calc(var(--name) + 1px);
  min-width: 0;
  pointer-events: none;
}

.sched .sched__fixed .sched__name {
  padding-left: calc(1rem + 1px) !important;
}

.sched.has-fixed .sched__scroll .sched__name {
  position: static;
}

/* 重ねた列の下にある「元の名称」は見せない（端で引っ張ったときに、二重に見えるのを防ぐ。読み上げには残る） */
.sched.has-fixed .sched__scroll .sched__name-inner {
  opacity: 0;
}

.sched__scroll {
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: none; /* 端まで動かしたあとに、引っ張って伸びる動きをさせない */
  contain: layout paint; /* 横に動かしても、表の外の描き直しが起きないように囲う */
}

.sched__scroll::-webkit-scrollbar {
  display: none;
}

.sched__table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: calc(var(--name) + var(--col) * var(--days));
  font-size: var(--fz-2);
  line-height: var(--lh-tight);
}

.sched__table col.sched__col-name {
  width: var(--name);
}

.sched__table col.sched__col-day {
  width: var(--col);
}

.sched__table th,
.sched__table td {
  padding: 0;
  font-weight: 400;
}

/* 左端のコンテンツ名 */
.sched__name {
  position: sticky;
  left: -1px; /* 端に1px未満の隙間ができ、後ろの棒が透けて見えるのを防ぐ */
  z-index: 2;
  height: 2.6rem;
  padding: 0 0.6rem 0 1rem !important;
  background: var(--c-table-head);
  font-weight: 700 !important;
  letter-spacing: var(--ls-body);
  text-align: left;
  white-space: nowrap;
}

/* バーの色（最新デザイン：コンテンツはすべて同じ黄色。色分けするのは「予約不要の日」＝赤、「予約制の日」＝緑 だけ）。
   名称の文字も、この2行だけ同じ色にする */
.sched__table tr {
  --bar: #fedf7d;
}

.sched__table tr.k-free {
  --bar: #e8381d;
}

.sched__table tr.k-lottery {
  --bar: #71af7f;
}

.sched__table tr.k-free .sched__name,
.sched__table tr.k-lottery .sched__name {
  color: var(--bar);
}

/* 日付の見出し：上の段＝数字（色を敷かない。星空の上にそのまま）、下の段＝曜日（列の色を敷く）
   2026-10-08 木村さんの最新デザイン（添付画像）に合わせた */
.sched__day {
  padding: 0;
  text-align: center;
  vertical-align: bottom;
}

.sched__day span {
  display: block;
}

.sched__day .sched__num {
  height: var(--numh);
  font-size: 1.25em;
  line-height: var(--numh);
}

.sched__day .sched__wd {
  height: var(--wdh);
  background-color: var(--cb, transparent);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.3);
  line-height: var(--wdh);
}

/* 見出しの左端（コンテンツ名の列の上）：数字の段は星空のまま、曜日の段から紺 */
.sched__table thead .sched__name {
  height: auto;
  background: linear-gradient(transparent var(--numh), var(--c-table-head) var(--numh));
}

/* 横に動かせる幅（スマホ）では、数字が左へ流れてコンテンツ名の列の上に出てこないよう、左上の角も紺でふさぐ */
.sched:not(.is-noscroll) .sched__fixed thead .sched__name {
  background: var(--c-table-head);
}

.sched__cell {
  height: 2.6rem;
  /* バー・選択中の列の明るさ・列の区切り線は、すべてこのマスの「背景」として描く。
     （以前はマスごとに部品を重ねていた＝約700個。iPhoneで横に動かすとカクつく原因だった）
     重なる順（上から）：バー → 選択中の列の明るさ → 区切り線。列の色地は background-color */
  --bar-layers: linear-gradient(transparent, transparent) 0 0 / 0 0 no-repeat;
  --hl: transparent;
  background:
    var(--bar-layers),
    linear-gradient(var(--hl), var(--hl)) 0 0 / 100% 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) 0 0 / 1px 100% no-repeat;
  background-color: var(--cb, transparent);
}

/* 列の色（--cb）。添付デザインの実測：
   平日は「何も敷かない列」と「白を1割敷いた列」が交互／土曜は青緑／日曜はえんじ／12/24 は金を半分、12/25 は金を濃く */
.sched__table .is-wd-a {
  --cb: rgba(255, 255, 255, 0.1);
}

.sched__table .is-wd-b {
  --cb: transparent;
}

.sched__table .is-sat {
  --cb: rgba(2, 90, 122, 0.92);
}

.sched__table .is-sun {
  --cb: rgba(120, 34, 62, 0.92);
}

.sched__table .is-xmas {
  --cb: rgba(170, 142, 80, 0.5);
}

.sched__table .is-xmas + .is-xmas {
  --cb: rgba(170, 142, 80, 0.78);
}

/* グループの区切り線（見出しの下／予約の下／教会のコンテンツの下） */
.sched__table tr.is-group-start > * {
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}

.sched__table tr.is-group-start > *,
.sched__table tr.is-group-end > * {
  height: 3.2rem;
}

/* バー（連続する日はつながる／1日だけなら丸）。添付デザインの実測：
   ・太さ（--bh）は行の高さの約半分（行34に対して16）
   ・始まりと終わりは、その日のマスの「まん中」に丸い端が来る（1日だけの丸と同じ位置から始まり、同じ位置で終わる） */
.sched__table {
  --bh: 1.2rem;
}

.sched__cell.is-on {
  --bar-layers: linear-gradient(var(--bar), var(--bar)) 0 50% / 100% var(--bh) no-repeat;
}

/* 始まり：左半分の丸（マスのまん中の左）＋ まん中から右端まで */
.sched__cell.is-on.is-start {
  --bar-layers:
    radial-gradient(circle at 100% 50%, var(--bar) calc(var(--bh) / 2 - 0.5px), transparent calc(var(--bh) / 2)) calc(50% - var(--bh) / 4) 50% / calc(var(--bh) / 2) var(--bh) no-repeat,
    linear-gradient(var(--bar), var(--bar)) 100% 50% / calc(50% + 0.5px) var(--bh) no-repeat;
}

/* 終わり：左端からまん中まで ＋ 右半分の丸（マスのまん中の右） */
.sched__cell.is-on.is-end {
  --bar-layers:
    radial-gradient(circle at 0 50%, var(--bar) calc(var(--bh) / 2 - 0.5px), transparent calc(var(--bh) / 2)) calc(50% + var(--bh) / 4) 50% / calc(var(--bh) / 2) var(--bh) no-repeat,
    linear-gradient(var(--bar), var(--bar)) 0 50% / calc(50% + 0.5px) var(--bh) no-repeat;
}

/* 1日だけ：丸（帯と同じ太さ）。「予約制の日」は、続いている日でも1日ずつの丸にする（デザインどおり） */
.sched__cell.is-on.is-start.is-end,
.sched__table tr.k-lottery .sched__cell.is-on {
  --bar-layers: radial-gradient(circle, var(--bar) calc(var(--bh) / 2 - 0.5px), transparent calc(var(--bh) / 2)) 50% 50% / var(--bh) var(--bh) no-repeat;
}

/* タップ（PCはマウスオーバー）した日付の縦ラインが反応する */
.sched__cell.is-active-col {
  --hl: rgba(255, 255, 255, 0.2);
}

.sched__table .sched__day.is-active-col {
  color: var(--c-gold);
  font-weight: 700;
}

.sched__table .sched__day.is-active-col .sched__wd {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 0 0 3rem rgba(255, 255, 255, 0.2);
}

.sched__nav {
  display: flex;
  justify-content: space-between;
  margin: 0.4rem 0 0 var(--name);
  padding-right: 1rem;
}

/* 横に動かす必要がないとき（表が画面に収まっているとき）は矢印を出さない */
.sched.is-noscroll .sched__nav {
  display: none;
}

.sched__nav button {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
}

.sched__nav svg {
  width: 1rem;
  height: 1.8rem;
}

.sched__nav button[disabled] {
  opacity: 0.25;
}

/* --------------------------------------------------------------------------
   AREA MAP
   -------------------------------------------------------------------------- */
.areamap {
  padding-top: 5.4rem;
}

.areamap__map {
  position: relative;
  margin: 2.8rem calc(var(--u) * 11) 0; /* 上：画像の余白を削ったぶん、見出しとのあいだを足した（1.6 → 2.8rem。2026-10-11） */
}

/* マップは背景が透明の画像（島だけ）。ページの星空の上にそのまま載るので、四辺をぼかす必要はない（2026-10-11） */
.areamap__map img {
  width: 100%;
}

/* マップ上の名称。一覧で選んだものの後ろが光る。
   名札をその形のまま切り抜いた画像（HTMLの background-image。名札より1px内側・色はそのまま）を名札の上に重ね、
   その後ろにやわらかい光（影）をつける ＝ 光は名札と同じ形に広がる。
   ふちどりの細い線はつけない（2026-10-11。線があると名札とのあいだに暗いすき間が見え、文字も読みにくくなった） */
.areamap__spot {
  position: absolute;
  top: var(--t);
  left: var(--l);
  width: var(--w);
  height: var(--h);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 0.4rem rgba(255, 232, 160, 1)) drop-shadow(0 0 0.8rem rgba(255, 232, 160, 0.9)) drop-shadow(0 0 1.6rem rgba(252, 215, 127, 0.8));
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}

.areamap__spot.is-active {
  opacity: 1;
  animation: spot-glow 1.8s ease-in-out 0.7s infinite alternate;
}

@keyframes spot-glow {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.75;
  }
}

.areamap__list {
  display: grid;
  /* 3列は同じ幅（写真の大きさを揃える）。名称が列より長いときは、列を広げず左右へ同じだけはみ出す。
     minmax(0, …) が無いと、文字間をあけたぶん列が広がり、右端が揃えの線からはみ出す（2026-10-11） */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8rem calc(var(--u) * 12);
  margin-top: 2rem;
  padding-inline: var(--gutter);
}

.areamap__btn {
  display: block;
  width: 100%;
  text-align: center;
}

.areamap__thumb {
  position: relative;
  display: block;
  aspect-ratio: 395 / 276; /* デザインのサムネイル（98 × 68.5）と同じ比。写真もこの比で切り出してある（_tools/build_thumbs.py） */
  overflow: hidden;
  border-radius: 0.9rem;
  transition: box-shadow 0.6s var(--ease);
}

/* どれかを選んでいる間は、選んでいない写真にうっすら幕をかける（選んだものを目立たせる） */
.areamap__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-navy);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

.areamap.has-active .areamap__btn[aria-pressed="false"] .areamap__thumb::after {
  opacity: 0.35;
}

.areamap__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.areamap__label {
  display: flex;
  justify-content: center;
  margin-top: 0.6rem;
  font-size: min(var(--fz-1), calc(var(--u) * 10)); /* 375pxより狭い画面では、列と一緒に小さくする（隣の名称に重ならないように） */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-s); /* 2026-10-11「文字間すこしあける」。0 → 0.04em（スマホ・PCとも） */
  white-space: nowrap;
  transition: color 0.6s var(--ease), text-shadow 0.6s var(--ease);
}

/* 選択中：光のような影（スマホ・PC共通の強さ） */
.areamap__btn[aria-pressed="true"] .areamap__thumb {
  box-shadow: 0 0 0 1px rgba(255, 240, 190, 0.5), 0 0 0.9rem 0.2rem rgba(255, 232, 160, 0.62), 0 0 2rem 0.6rem rgba(252, 215, 127, 0.36);
}

.areamap__btn[aria-pressed="true"] .areamap__label {
  color: var(--c-gold);
  text-shadow: 0 0 0.8rem rgba(252, 215, 127, 0.5), 0 0 0.3rem rgba(4, 9, 31, 0.9);
}

/* --------------------------------------------------------------------------
   ADVENT CALENDAR
   -------------------------------------------------------------------------- */
.advent {
  position: relative;
  padding: 9rem 0 calc(var(--u) * 22);
}

.advent__tree {
  position: relative;
  margin-top: 2.2rem;
  padding-bottom: calc(var(--u) * 4);
}

.advent__glow {
  position: absolute;
  top: calc(var(--u) * -40);
  left: 50%;
  width: calc(var(--u) * 507);
  margin-left: calc(var(--u) * -253.5);
  max-width: none;
  pointer-events: none;
  --a: 0.8;
  animation: advent-twinkle 6s ease-in-out infinite alternate;
}

/* 背景の光（.orb）とは別に、こちらは控えめな揺れのまま */
@keyframes advent-twinkle {
  from {
    opacity: 0.8;
    scale: 1;
  }
  to {
    opacity: 1;
    scale: 1.14;
  }
}

.advent__star {
  position: relative;
  width: calc(var(--u) * 50);
  margin-inline: auto;
}

.advent__rows {
  position: relative;
  display: grid;
  gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 2);
}

.advent__row {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 8);
}

.advent__day {
  position: relative;
  display: block;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 56);
  overflow: hidden;
  background: #e6cc96 url("../image/top/advent/tile.jpg") center / cover;
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.25);
}

/* 数字（輪郭データをマスクにして、色はCSSで付ける。画像はHTML側で指定） */
.advent__num {
  position: absolute;
  inset: 16% 8%;
  background: var(--num-color, #07082a);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: opacity 0.8s var(--ease);
}

.advent__day.is-sat {
  --num-color: #00629d;
}

.advent__day.is-sun {
  --num-color: #c40030;
}

.advent__day.is-eve {
  --num-color: #006860;
}

.advent__day.is-xmas {
  --num-color: #91001c;
}

/* 写真が登録された日は、数字が写真に変わる */
.advent__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.advent__day.has-photo .advent__photo {
  opacity: 1;
}

.advent__day.has-photo .advent__num {
  opacity: 0;
}

.advent__day:not(.has-photo) {
  cursor: default;
}

.advent__trunk {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 56);
  margin: calc(var(--u) * 8) auto 0;
  background: #e6cc96 url("../image/top/advent/tile.jpg") center / cover;
}

.advent__merry {
  position: absolute;
  right: calc(50% - var(--u) * 165.5);
  bottom: calc(var(--u) * 38);
  width: calc(var(--u) * 109);
}

.advent__merry img {
  width: 100%;
}

/* アドベントのポップアップ */
/* 拡大写真の枠は、写真の形に合わせる（縦長でも横長でも、まわりに黒い帯を出さない） */
.advent-modal__photo {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 0.6rem;
  box-shadow: 0 0 4rem 1rem rgba(252, 215, 127, 0.35);
}

.advent-modal__photo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 62vh;
}

.advent-modal__meta {
  margin-top: 1.6rem;
  color: #e6ca93;
  text-align: center;
}

.advent-modal__label {
  font-size: var(--fz-2);
  letter-spacing: var(--ls-l);
}

.advent-modal__date {
  font-family: var(--ff-mincho);
  font-weight: 400;
  font-size: var(--fz-5);
  letter-spacing: var(--ls-m);
}

.advent-modal__weather {
  letter-spacing: var(--ls-m);
}

.advent-modal__caption {
  margin-top: 0.8rem;
  color: var(--c-white);
}

/* --------------------------------------------------------------------------
   CONTENTS
   -------------------------------------------------------------------------- */
.contents {
  position: relative;
  padding: 8.4rem 0 6rem;
  background: var(--c-navy);
}

.contents__inner {
  position: relative;
  z-index: 1;
}

/* 丸い写真。後ろの金色の光は、デザイン（1002版）の画像を実測して合わせてある。
   ・写真の縁がいちばん濃く、外へ向かって「はじめ速く、あとはゆるやかに」薄くなる
     （縁から直径の4%で6割、6.5%で4割、9%で3割弱、13%で1割。16.5%で消える）
   ・写真ごとの違いは HTML に入れてある
       --ga … 光の濃さ（写真の縁での濃さ。0.45〜0.65）
       --gx / --gy … 光の中心のずれ（写真の直径に対する％。右・下が＋。最大7%ほど）
   ・背景の光と同じ調子でゆっくり煌めく（いちばん大きいときがデザインの大きさ。それより大きくはしない） */
.program__photo {
  position: relative;
  z-index: 0;
  width: calc(var(--u) * var(--d));
  height: calc(var(--u) * var(--d));
  margin-left: calc(var(--u) * var(--x));
  border-radius: 50%;
}

.program__photo::before {
  content: "";
  position: absolute;
  --ge: 0.165; /* 光が写真の外へ広がる幅（直径に対する割合） */
  --g: min(1, calc(var(--ga, 0.55) * 1.45)); /* いちばん濃いときの濃さ（HTMLの値の1.45倍） */
  inset: calc(var(--ge) * -100%);
  z-index: -1;
  border-radius: 50%;
  /* 位置（％）は「光の箱の半径」に対するもの。75.19% が写真の縁 */
  background: radial-gradient(closest-side,
    rgb(252 215 127 / var(--g)) 75.19%,
    rgb(252 215 127 / calc(var(--g) * 0.78)) 78.65%,
    rgb(252 215 127 / calc(var(--g) * 0.58)) 81.8%,
    rgb(252 215 127 / calc(var(--g) * 0.4)) 84.96%,
    rgb(252 215 127 / calc(var(--g) * 0.27)) 88.12%,
    rgb(252 215 127 / calc(var(--g) * 0.17)) 91.28%,
    rgb(252 215 127 / calc(var(--g) * 0.09)) 94.44%,
    rgb(252 215 127 / calc(var(--g) * 0.045)) 97.74%,
    rgb(252 215 127 / 0) 100%);
  /* ずれは「写真の直径に対する％」。光の箱は写真より大きいので、そのぶん割り戻している */
  translate: calc(var(--gx, 0%) / (1 + 2 * var(--ge))) calc(var(--gy, 0%) / (1 + 2 * var(--ge)));
  animation: photo-twinkle var(--t, 5s) ease-in-out var(--tw, 0s) infinite alternate;
}

/* 薄いときは今までと同じ濃さ（0.72 ÷ 1.45 ≒ 0.5）、濃いときだけ濃くなる */
@keyframes photo-twinkle {
  from {
    opacity: 0.5;
    scale: 0.96;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

/* どんな縦横比の写真でも丸の中に収める。見せたい位置は --pos で写真ごとに指定 */
.program__photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

/* 星降る森：4つの丸写真の組み合わせ */
.program-hero {
  position: relative;
  height: calc(var(--u) * 740);
  margin-top: 2rem;
}

.program-hero__item {
  position: absolute;
  top: calc(var(--u) * var(--y));
  left: 0;
}

.program-hero__label {
  position: absolute;
  top: calc(var(--u) * var(--ly));
  color: var(--c-gold);
  font-family: var(--ff-mincho);
  font-weight: 400;
  letter-spacing: var(--ls-s);
  white-space: nowrap;
}

/* 右端からの距離。名称ごとに変えるときは HTML の --lr で指定（無ければ 14） */
.program-hero__label--right {
  right: calc(var(--u) * var(--lr, 14));
}

.program-hero__label--left {
  left: calc(var(--u) * 14);
}

/* コンテンツ同士の間は、デザイン（64）の 1.3倍あける（2026-10-08） */
.program {
  position: relative;
  margin-top: calc(var(--u) * 83);
}

.program--first {
  margin-top: 0;
}

.program__body {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--u) * var(--pull, 0));
  padding-inline: var(--gutter);
}

.program__lead {
  letter-spacing: var(--ls-m);
  text-shadow: 0 0 0.8rem var(--c-navy), 0 0 0.4rem var(--c-navy);
}

.program__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.program__title {
  display: inline-block;
  min-width: calc(var(--u) * var(--line, 0));
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--c-gold);
  color: var(--c-gold);
  font-family: var(--ff-mincho);
  font-size: var(--fz-7);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-s);
  white-space: nowrap;
  text-shadow: 0 0 0.8rem var(--c-navy);
}

.program__new {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2dcb5 0%, #d7b276 45%, #a87315 100%);
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.4);
  color: #221815;
  font-family: var(--ff-mincho);
  font-size: var(--fz-2);
  font-weight: 600;
  line-height: var(--lh-tight);
  text-align: center;
}

.program__new small {
  font-size: var(--fz-1);
}

.program__info {
  margin-top: 1.4rem;
  line-height: var(--lh-base);
}

.program__info > li {
  position: relative;
  padding-left: 1.4em;
}

.program__info > li + li {
  margin-top: 0.2rem;
}

.program__info > li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0.1em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--c-white);
}

.program__info-sub {
  display: block;
}

.program__text {
  margin-top: 1.4rem;
  line-height: var(--lh-loose);
}

.program__notes {
  margin-top: 2rem;
  font-size: var(--fz-2);
  line-height: var(--lh-base);
}

.program__notes li {
  position: relative;
  padding-left: 1.4em;
  container-type: inline-size; /* .u-fit（1行に収める文）の幅の基準 */
}

.program__notes li::before {
  content: "＊";
  position: absolute;
  left: 0;
}

/* 小さい項目（石の教会ライトアップ／クリスマスラウンジ）：写真と文章の横並び */
.program--side {
  display: grid;
  align-items: center;
}

.program--stone {
  grid-template-columns: calc(var(--u) * 170) 1fr;
}

.program--lounge {
  grid-template-columns: 1fr calc(var(--u) * 150);
}

.program--stone .program__body {
  padding: 0 var(--gutter) 0 calc(var(--u) * 14);
}

.program--lounge .program__body {
  padding: 0 calc(var(--u) * 8) 0 var(--gutter);
}

.program--side .program__title {
  font-size: var(--fz-4);
  letter-spacing: var(--ls-s);
}

.program--side .program__info {
  margin-top: 1rem;
  font-size: var(--fz-2);
}

.program--side .program__text {
  margin-top: 1rem;
  font-size: var(--fz-2);
  line-height: var(--lh-base);
}

/* --------------------------------------------------------------------------
   アクセス
   -------------------------------------------------------------------------- */
.access {
  position: relative;
  padding: 4.5rem 0 13.5rem;
}

.access__inner {
  position: relative;
  z-index: 1;
}

.access__tabs {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  margin-top: 2.4rem;
}

.access__tab {
  padding: 0.4rem 0;
  font-family: var(--ff-mincho);
  font-weight: 400;
  letter-spacing: var(--ls-m);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  transition: color 0.5s var(--ease);
}

.access__tab[aria-selected="true"] {
  color: var(--c-gold);
}

.access__faq {
  margin-top: 1rem;
  font-size: var(--fz-2);
  text-align: center;
}

.access__slider {
  margin-top: 2.6rem;
}

.access__item {
  width: var(--content);
}

.access-card {
  height: 100%;
  padding: 2.4rem 1.6rem 2.6rem;
  border: 2px solid var(--c-gold);
  border-radius: 1rem;
  background: var(--c-card);
}

.access-card__title {
  color: var(--c-gold);
  font-family: var(--ff-mincho);
  font-size: var(--fz-4);
  font-weight: 400;
  letter-spacing: var(--ls-l);
  text-align: center;
}

.access-card__lead {
  margin-top: 1.2rem;
  line-height: var(--lh-base);
  text-align: center;
}

.access-card__map {
  position: relative;
  margin-top: 1.4rem;
  background: #ececea;
}

.access-card__map img {
  width: 100%;
}

/* 地図の「Google Maps」：地図の絵の上に、本物のリンクの文字を重ねる（2026-10-09）。
   ・地図の絵に入っていた同じ文字は、絵（access_map.svg）から消してある（2026-10-11。重ねた文字の右にはみ出していた）
   ・リンクだと気づけるよう、下線がゆっくり点滅する。マウスを乗せると下線が消える（ほかのリンクと同じ反応）
   文字の大きさは地図の幅に合わせる（cqw ＝ 地図の幅の1%） */
.access-card__map {
  container-type: inline-size;
}

.access-card__gmap {
  position: absolute;
  top: 20.4%;
  left: 54%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 39.5%;
  height: 6.8%;
  color: #d3787d;
  font-size: 3.7cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.access-card__gmap span {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  animation: gmap-blink 1.4s ease-in-out infinite alternate;
}

@keyframes gmap-blink {
  from {
    text-decoration-color: currentColor;
  }
  to {
    text-decoration-color: transparent;
  }
}

.access-card__gmap:active span {
  animation: none;
  text-decoration-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .access-card__gmap:hover span {
    animation: none;
    text-decoration-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .access-card__gmap span {
    animation: none;
  }
}

.access-card__diagram {
  margin-top: 1.6rem;
}

.access-card__diagram img {
  width: 100%;
}

.access-card__sub {
  margin-top: 1.8rem;
  font-size: var(--fz-4);
  font-weight: 700;
  letter-spacing: var(--ls-s);
}

.access-card__sub small {
  font-size: var(--fz-2);
  font-weight: 400;
}

.access-card__sub--bus {
  color: var(--c-bus);
}

.access-card__sub--taxi {
  color: var(--c-taxi);
}

.access-card__bus {
  margin-top: 1rem;
  line-height: var(--lh-title);
  text-align: center;
}

.access-card__bus strong,
.access-card__bus span {
  display: block;
}

.access-card__bus strong {
  font-weight: 700;
}

.access-card__bus-arrow {
  margin: 0.3rem 0;
  font-size: var(--fz-5);
  line-height: 1;
}

.access-card__notes {
  margin-top: 1.6rem;
  font-size: var(--fz-2);
  line-height: var(--lh-base);
}

.access-card__notes li {
  position: relative;
  padding-left: 1.4em;
  container-type: inline-size; /* .u-fit（1行に収める文）の幅の基準 */
}

.access-card__notes li::before {
  content: "＊";
  position: absolute;
  left: 0;
}

/* --------------------------------------------------------------------------
   ライブ配信
   -------------------------------------------------------------------------- */
.live {
  position: relative;
  padding-bottom: 9rem;
}

.live__inner {
  position: relative;
  z-index: 1;
}

/* この区画の下はフッター写真。背景の光が境目でまっすぐ切れて線に見えるので、
   下端の手前で光を薄くして消す */
.live .orbs {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 16rem), transparent calc(100% - 3rem));
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 16rem), transparent calc(100% - 3rem));
}

.live-item {
  margin-top: 6.6rem; /* 2026-10-09：1.5倍 */
  padding-inline: var(--gutter);
}

.live__items > .live-item:first-child {
  margin-top: 4.4rem;
}

.live-item__lead {
  letter-spacing: var(--ls-m);
}

/* 題は CONTENTS の題（.program__title）と同じ：文字の大きさ・金の下線 */
.live-item__title {
  display: inline-block;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--c-gold);
  color: var(--c-gold);
  font-family: var(--ff-mincho);
  font-size: var(--fz-7);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-s);
}

.live-item__date {
  margin-top: 1rem;
  font-size: var(--fz-5);
  letter-spacing: var(--ls-m);
}

.live-item__date small {
  font-size: var(--fz-2);
}

.live-item__text {
  margin-top: 1rem;
  line-height: var(--lh-base);
}

.live-item__note {
  font-size: var(--fz-2);
}

.live-item__video {
  margin-top: 2.4rem;
}

.live-item__video img {
  width: 100%;
}

/* Instagramボタン（左が濃い金、中央が明るい金。文字はネイビー） */
.insta-btn {
  width: 17rem;
  min-height: 3.6rem;
  margin-top: 2.4rem;
  gap: 1rem;
  padding: 0.4rem 1.4rem;
  background: var(--grad-gold-deep);
  color: var(--c-ink);
  font-size: var(--fz-2);
  letter-spacing: var(--ls-m);
  text-align: left;
}

.insta-btn svg {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
}

.live-item__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 12);
  margin-top: 3rem;
}

.live-item__photos img {
  width: 100%;
  aspect-ratio: 140 / 196;
  border-radius: 1.6rem;
  object-fit: cover;
}

/* ==========================================================================
   PC（768px以上）
   レイアウトは PC版デザイン（0831）を参考、内容はスマホ版（1002）に合わせる
   ========================================================================== */
@media (min-width: 768px) {
  /* --- TOP冒頭 ---------------------------------------------------------- */
  .kv {
    height: min(100vh, 62vw);
    height: min(100svh, 62vw);
    min-height: 56rem;
  }

  /* PCは横長になるので、見せたい位置を別に指定できる（--pos-pc。無ければスマホと同じ） */
  .kv__slide img {
    object-position: var(--pos-pc, var(--pos, 50% 50%));
  }

  /* 1枚目は右側にタイトルを置くので、右を少し暗くする */
  .kv__slide:first-child::after {
    background:
      linear-gradient(270deg, rgba(2, 4, 23, 0.8) 0%, rgba(2, 4, 23, 0.55) 26%, rgba(2, 4, 23, 0) 56%),
      linear-gradient(180deg, rgba(2, 4, 23, 0.35) 0%, rgba(2, 4, 23, 0) 30%, rgba(7, 8, 42, 0) 78%, var(--c-navy) 100%);
  }

  .kv__title {
    top: 50%;
    right: var(--gutter);
    left: auto;
    width: 46rem;
    max-width: 50%;
    translate: 0 -50%;
  }

  .kv__logo {
    width: 100%;
    margin-left: 0;
  }

  .kv__date {
    margin-top: 2.4rem;
  }

  .kv__time {
    margin-top: 1rem;
  }

  /* 一般トップの1枚目は、左の端だけ JR窓上ポスターの配置に寄せる（2026-10-19 木村さん「背景写真との文字バランス」）＝山小屋の屋根の右上から、左揃え。
     上下の位置と文字の大きさは 10/16 版と同じ（上下中央・幅46rem・日付と時間は --fz-7 / --fz-6）＝2026-10-20 松下さん「戻して」。
     画面が狭くて右の余白にかかるときは、そのぶん左へ寄せる。
     おかえりなさいDay の冒頭は別の配置（上の .kv__title をもとに左へ置く）なので、:not(.kv--okaeri) で分ける */
  .kv:not(.kv--okaeri) .kv__title {
    right: auto;
    left: min(54%, calc(100% - var(--gutter) - min(46rem, 50%)));
    text-align: left;
  }

  /* 日付・時間・入場無料の文字の左端を、ロゴの文字（軽・星）の左端にそろえる（2026-10-23 松下さん「視覚的に揃う」）。
     ロゴは画像の左に余白があり、文字は幅の 11/334 から始まる（流れ星の線の尾だけは左端まで出る）。
     各行の最初の字（2・1・〈）は字の箱の中で少し右から描かれるので、そのぶん（em）を引く。
     日付は1行に収める（768px 付近でタイトルの幅より少し長くなり、2行に割れるため） */
  .kv:not(.kv--okaeri) .kv__date {
    padding-left: calc(100% * 11 / 334 - 0.03em);
    white-space: nowrap;
  }

  .kv:not(.kv--okaeri) .kv__time {
    padding-left: calc(100% * 11 / 334 - 0.08em);
  }

  .kv:not(.kv--okaeri) .kv__free {
    padding-left: calc(100% * 11 / 334 - 0.62em);
  }

  .kv__copy {
    top: 50%;
    left: calc(var(--gutter) + clamp(4rem, 6vw, 10rem)); /* 2026-10-09：もう少し内側に */
    font-size: var(--fz-6);
    translate: 0 -50%;
  }

  /* PCの星空（2026-10-08 に支給の写真へ差し替え。作り方は _tools/build_sky.py）
     ・星だけの空（sky_stars_pc.jpg）：上下左右につながるタイルを、引き伸ばさずに幅 138rem でくり返す
     ・下端（sky_trees_pc.jpg）：天の川と木のシルエット。これだけは1枚を画面の幅いっぱいに広げて重ねる（上はぼかしてなじませる）
       写真の幅が 1578px しか無いので、広い画面では少し甘く見える（これまでの稜線の画像と同じ程度） */
  .sky::before {
    height: 100%;
    background: url("../image/top/sky_stars_pc.jpg") center top / 138rem auto repeat;
  }

  .sky::after {
    height: 118vw; /* 画像の高さ（幅の 117.9%）ぶん */
    max-height: 100%;
    background-image: url("../image/top/sky_trees_pc.jpg");
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
  }

  /* --- イベント全体コピー ------------------------------------------------ */
  .intro {
    padding: 12rem var(--gutter) 22rem; /* 上の余白は 2026-10-10 に 1.5倍（8 → 12rem） */
  }

  /* PCデザインでは、本文（12px）に対してこの文は 16px（1.33倍）。本文16pxに対して 20px にする */
  /* PCのいちばん長い行は 39字。画面が狭いあいだは、折り返さない大きさまで小さくする */
  .intro__text {
    font-size: min(var(--fz-5), calc((100vw - var(--gutter) * 2) / 43));
  }

  .intro__bg {
    inset: 10rem 0 0;
  }

  /* --- お知らせ（右端まで流す横スライド。2.5件ぶん見える。1000px以上は3.5件） -- */
  .movie {
    padding-top: 15rem;
  }

  .movie__sound {
    --sz: 4.4rem;
    right: 1.6rem;
    bottom: 1.6rem;
    padding-right: 1.6rem;
  }

  .movie__sound-btn svg {
    width: 2.4rem;
    height: 2.4rem;
  }

  .movie__volume {
    width: 8rem;
  }

  .news {
    --news-gap: 4rem;
    --news-w: calc((100vw - var(--gutter) - var(--news-gap) * 2) / 2.5);
    padding-top: var(--section-space);
  }

  .news__slider {
    margin-top: var(--head-space);
  }

  .news__track {
    gap: var(--news-gap);
    scroll-snap-type: none;
  }

  .news__item {
    flex: 0 0 var(--news-w);
    width: auto;
  }

  .news-card__title {
    margin-top: 1.6rem;
  }

  /* 矢印は写真の高さの中央。写真に重なるので丸い下地を付ける */
  .news__slider .c-slider__arrow {
    top: calc(var(--news-w) * 132 / 178 / 2);
    height: 4.8rem;
    border-radius: 50%;
    background: rgba(7, 8, 42, 0.6);
  }

  .news__slider .c-slider__arrow--prev {
    left: 1.6rem;
  }

  .news__slider .c-slider__arrow--next {
    right: 1.6rem;
  }

  /* --- 開催概要（中央揃え。2枚のカードは横に並べる） ------------------------ */
  .outline {
    padding-top: var(--section-space);
  }

  .outline__date {
    margin-top: 3rem;
  }

  .outline__date small {
    font-size: var(--fz-6);
  }

  .outline__time {
    margin-top: 1rem;
    font-size: var(--fz-5);
  }

  .outline__free {
    margin-top: 2.4rem;
  }

  .outline__block {
    margin-top: 4.8rem;
    text-align: center;
  }

  .outline__block .c-btn {
    margin-top: 2.4rem;
  }

  .plan {
    margin-top: 8rem;
  }

  .plan__tabs,
  .plan__slider .c-slider__arrow {
    display: none;
  }

  .plan__slider {
    margin-top: 0;
  }

  .plan__track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    overflow: visible;
  }

  .plan__item {
    width: auto;
  }

  .plan-card__dl {
    margin-top: 3.2rem;
  }

  /* --- 開催スケジュール（全日程が横に収まる。収まらない幅では横スライド） ---- */
  .schedule {
    padding-top: var(--section-space);
  }

  .sched {
    --name: 17.2rem; /* いちばん長い名前（約156px）＋左 10px・右 6px。名前と日程のあいだを、これ以上は詰められない所まで詰めた（2026-10-10。22 → 18 → 17.2rem） */
    --numh: 3.6rem;
    --wdh: 3.4rem;
    margin: var(--head-space) var(--gutter) 0;
  }

  .sched__table {
    --bh: 1.6rem;
    width: 100%;
    min-width: calc(var(--name) + var(--col) * var(--days));
  }

  .sched__table col.sched__col-day {
    width: auto;
  }

  .sched__name,
  .sched__cell {
    height: 3.4rem;
  }

  .sched__table tr.is-group-start > *,
  .sched__table tr.is-group-end > * {
    height: 4rem;
  }


  /* --- AREA MAP --------------------------------------------------------- */
  .areamap {
    padding-top: var(--section-space);
  }

  /* 地図の画像は、島のまわりに光の余白が左右 3.05% ずつある（島の濃い部分は画像の幅の 94.26%）。
     そのぶん画像を大きくして、島の左端・右端を、見出しや本文の線に揃える（2026-10-11「左端が見出しと揃うくらいに大きく」） */
  .areamap__map {
    width: calc(min(var(--content), 84rem) * 1.061);
    margin: var(--head-space) auto 0;
  }

  .areamap__list {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 2.4rem 1.6rem;
    margin-top: 4rem;
  }

  /* 名称：星空の上でも読めるよう、PCは1段大きくして、文字のまわりを少し暗くする */
  .areamap__label {
    margin-top: 0.8rem;
    font-size: 1.1rem; /* 2026-10-11「PCのみ、文字すこし小さく」。12px → 11px（スマホの10pxと、注記の12pxのあいだ） */
    text-shadow: 0 0 0.6rem rgba(4, 9, 31, 0.95), 0 0 0.2rem rgba(4, 9, 31, 0.9);
  }

  /* --- ADVENT CALENDAR（見出しとツリーが1画面に収まる大きさ。画面の高さに合わせて変わる） - */
  .advent {
    /* ツリー（上の星から、いちばん下の段まで）が、ヘッダーの下の1画面にちょうど収まる大きさ（2026-10-08「さらに大きく」）
       13rem ＝ ヘッダーぶん 11 ＋ 下の余白 2 ／ 426 ＝ ツリーの上端から、いちばん下の段の下端まで（--u の何個ぶんか）
       見出しまで入れると1画面を少し超える（メニューから飛んだ直後は、いちばん下の段が少し切れる） */
    --u: clamp(0.75px, min(calc((100vh - 13rem) / 426), calc((100vw - 9.6rem) / 440)), 2.6px);
    padding-top: var(--section-space);
    /* メニューから飛んできたとき、見出しがヘッダーのすぐ下に来るようにする（上の余白ぶんを詰める） */
    scroll-margin-top: calc(var(--section-space) * -1);
  }

  .advent__tree {
    margin-top: var(--head-space);
  }

  /* 段の組み方をPC用に変える（スマホ 1・2・2・3・4・4・5・6 段 → PC 1・2・4・5・7・8 段）
     横に広く、正三角形に近い形にする。タイル1枚の大きさは変えない。
     HTMLの段（ul）はそのままにして、タイルを1つの格子に並べ直している。
     各段の左端のタイルだけ位置を決めれば、続きは順番に右へ並ぶ */
  .advent__rows {
    grid-template-columns: repeat(16, calc(var(--u) * 28));
    justify-content: center;
    gap: calc(var(--u) * 8) 0;
  }

  .advent__row {
    display: contents;
  }

  .advent__row > li {
    display: flex;
    justify-content: center;
    grid-column: auto / span 2;
  }

  .advent__row:nth-child(1) > li:nth-child(1) {
    grid-column: 8 / span 2;
  }

  .advent__row:nth-child(2) > li:nth-child(1) {
    grid-column: 7 / span 2;
  }

  .advent__row:nth-child(3) > li:nth-child(1) {
    grid-column: 5 / span 2;
  }

  .advent__row:nth-child(4) > li:nth-child(3) {
    grid-column: 4 / span 2;
  }

  .advent__row:nth-child(6) > li:nth-child(1) {
    grid-column: 2 / span 2;
  }

  .advent__row:nth-child(7) > li:nth-child(4) {
    grid-column: 1 / span 2;
  }

  /* 画面に入ったら、タイルが上の段から順に、少し下からふわっと現れる
     （段ごとの遅れは、HTMLの各段に付いている --delay をそのまま使う） */
  .js .advent__row > li {
    opacity: 0;
    translate: 0 2rem;
    transition: opacity 1.2s ease, translate 1.2s var(--ease);
    transition-delay: var(--delay, 0s);
  }

  .js .advent__rows.is-inview .advent__row > li {
    opacity: 1;
    translate: 0 0;
  }

  /* 後ろの光は、横に広い形に合わせる */
  .advent__glow {
    top: calc(var(--u) * -70);
    width: calc(var(--u) * 700);
    height: calc(var(--u) * 640);
    margin-left: calc(var(--u) * -350);
  }

  .advent__merry {
    right: calc(50% - var(--u) * 220);
  }

  /* --- CONTENTS（写真と文章を左右に並べ、1つごとに左右を入れ替える） -------- */
  /* 上端は、星空の下端（山の稜線の黒）からなだらかにつなぐ */
  .contents {
    --u: min(1.5px, calc((100vw - 15.6rem) / 660));
    padding: var(--section-space) 0 4rem;
    background: var(--c-navy); /* 星空の下端（画像の最下部）がこの色で終わる。以前は稜線の黒から始めていた */
  }

  .program,
  .program--stone,
  .program--lounge {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 6rem;
    margin-top: 15.6rem;
    padding-inline: var(--gutter);
  }

  /* 1つ目は、丸写真の組み合わせが必ず収まる幅を左の列に確保する */
  .program--first {
    grid-template-columns: minmax(auto, 1fr) 1fr;
    margin-top: var(--head-space);
  }

  .program > .program__photo,
  .program-hero {
    order: 1;
    justify-self: end;
    margin-left: 0;
  }

  .program .program__body {
    order: 2;
    justify-self: start;
    width: 100%;
    max-width: 50rem;
    margin-top: 0;
    padding: 0;
  }

  .program:nth-of-type(even) > .program__photo {
    order: 3;
    justify-self: start;
  }

  .program:nth-of-type(even) .program__body {
    justify-self: end;
  }

  /* 星降る森の4つの丸写真は、スマホと同じ組み合わせのまま左に置く */
  .program-hero {
    --u: clamp(1px, calc((100vw - 15.6rem) / 750), 1.15px);
    width: calc(var(--u) * 375);
    margin-top: 0;
  }

  .program-hero__label {
    font-size: var(--fz-2);
  }

  .program__title {
    display: block;
    min-width: 0;
    padding-bottom: 0.6rem;
    white-space: normal;
  }

  .program__head .program__title {
    flex: 1 1 auto;
  }

  .program__new {
    width: 5.6rem;
    height: 5.6rem;
  }

  .program__info {
    margin-top: 2rem;
  }

  .program__text {
    margin-top: 2rem;
  }

  /* 石の教会ライトアップ／クリスマスラウンジも、PCではほかと同じ大きさで見せる */
  .program--side .program__photo {
    --d: 290 !important;
    --x: 0 !important;
  }

  .program--side .program__title {
    font-size: var(--fz-7);
    letter-spacing: var(--ls-s);
  }

  .program--side .program__info,
  .program--side .program__text {
    margin-top: 2rem;
    font-size: var(--fz-3);
  }

  .program--side .program__text {
    line-height: var(--lh-loose);
  }

  /* --- アクセス（2枚のカードを横に並べる） -------------------------------- */
  .access {
    padding: var(--section-space) 0 21rem;
  }

  .access__tabs,
  .access__slider .c-slider__arrow {
    display: none;
  }

  /* PCは見出しと同じ左の線に揃える */
  .access__faq {
    margin-top: 2rem;
    padding-inline: var(--gutter);
    text-align: left;
  }

  .access__slider {
    margin-top: 4rem;
  }

  .access__track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    overflow: visible;
  }

  .access__item {
    width: auto;
  }

  .access-card {
    padding: 4rem clamp(2rem, 3vw, 4rem) 4.4rem;
  }

  .access-card__map,
  .access-card__diagram {
    max-width: 36rem;
    margin-inline: auto;
  }

  .access-card__map {
    margin-top: 2.4rem;
  }

  .access-card__diagram {
    margin-top: 2.4rem;
  }

  /* --- ライブ配信（中央揃え） -------------------------------------------- */
  .live {
    padding-bottom: 14rem;
  }

  /* 2つの配信は縦に並べる。中身はスマホと同じ左揃えのまま、かたまり（幅720px）を画面の中央に置く */
  .live__items {
    width: min(100%, calc(96rem + var(--gutter) * 2)); /* 2026-10-09：配信の画面を大きく（72 → 96rem） */
    margin-inline: auto;
  }

  .live-item {
    margin-top: 15rem; /* 2026-10-09：1.5倍 */
  }

  .live-item__title {
    display: block;
    max-width: 50rem; /* CONTENTS の文の幅と同じ */
    padding-bottom: 0.6rem;
  }

  .live__items > .live-item:first-child {
    margin-top: var(--head-space);
  }

  .live-item__video {
    max-width: 96rem;
    margin: 3.2rem 0 0;
  }

  .insta-btn {
    width: 22rem;
    min-height: 5.2rem;
    margin: 3.2rem 0 0; /* PCは文と同じ左の線に揃える（2026-10-10。以前は中央） */
  }

  .live-item__photos {
    max-width: 78rem; /* 2026-10-09：1.5倍 */
    gap: 3.6rem;
    margin: 4rem 0 0;
  }
}

/* ==========================================================================
   PC（1000px以上）：横に並べる区画が増える
   ========================================================================== */
@media (min-width: 1000px) {
  /* お知らせ：3.5件ぶん見える */
  .news {
    --news-w: calc((100vw - var(--gutter) - var(--news-gap) * 3) / 3.5);
  }

  /* 開催概要：「よくある質問」と「お問合せ」を横に並べる（ボタンの高さを揃える） */
  .outline__blocks {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 8rem;
    margin-top: 4.8rem;
    padding-inline: var(--gutter);
  }

  .outline__blocks .outline__block {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    padding-inline: 0;
    text-align: left; /* 2026-10-09：2つ並ぶ幅では、文は左揃え（ボタンは中央のまま） */
  }

  .outline__blocks .outline__block .c-btn {
    margin-top: auto;
  }

  .outline__blocks .outline__block > p {
    margin-bottom: 2.4rem;
  }

  /* CONTENTS：星降る森の丸写真の組み合わせを大きくし、名称も大きくする */
  .program-hero {
    --u: 1.3px;
  }

  .program-hero__label {
    font-size: var(--fz-4);
  }

  /* AREA MAP：マップ（左）と一覧（右）を横に並べる */
  .areamap__body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 4rem;
    margin-top: var(--head-space);
    padding-inline: var(--gutter);
  }

  .areamap__map {
    width: auto;
    margin: 0 -3.05%; /* 上と同じ理由。列の左右へ 3.05% ずつはみ出させ、島の左端を見出しの線に揃える */
  }

  .areamap__list {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 2rem 1.6rem;
    margin-top: 0;
    padding-inline: 0;
  }

  /* 名称は、入りきらないとき、決めた位置（HTMLで2つに分けてある所）でだけ折り返す */
  .areamap__label {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   反応（PC：マウスを乗せたとき ／ スマホ：指で触れている間）
   考え方と値（--lit-…）は common.css の「反応」にまとめてある
   ========================================================================== */
/* --- 変化の速さ（元に戻るとき） --------------------------------------------- */
.areamap__thumb img {
  transition: scale 1.2s var(--ease);
}

.advent__day {
  transition: box-shadow 0.8s var(--ease);
}

.advent__day.has-photo .advent__photo {
  transition: opacity 1.2s var(--ease), scale 1.2s var(--ease);
}

/* --- スマホ：指で触れている間 ----------------------------------------------- */
/* AREA MAP の一覧：写真が寄り、名称が金色に */
.areamap__btn:active .areamap__thumb img {
  scale: var(--lit-zoom);
  transition-duration: var(--lit-in);
}

.areamap__btn:active .areamap__label {
  color: var(--c-gold);
}

/* アドベントの写真：写真が寄り、まわりが光る */
.advent__day.has-photo:active {
  box-shadow: var(--lit-glow-photo);
  transition-duration: var(--lit-in);
}

.advent__day.has-photo:active .advent__photo {
  scale: var(--lit-zoom);
  transition-duration: var(--lit-in);
}

/* --- PC：マウスを乗せたとき（上の「スマホ」と必ず同じ内容にする） ---------------- */
@media (hover: hover) and (pointer: fine) {
  .areamap__btn:hover .areamap__thumb img {
    scale: var(--lit-zoom);
  }

  .areamap__btn:hover .areamap__label {
    color: var(--c-gold);
  }

  .advent__day.has-photo:hover {
    box-shadow: var(--lit-glow-photo);
  }

  .advent__day.has-photo:hover .advent__photo {
    scale: var(--lit-zoom);
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .js .advent__row > li {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* ==========================================================================
   おかえりなさいDay（okaeri.html）
   一般のトップと同じ部品をそのまま使い、違う所だけをここに書く。
   okaeri.html は _tools/build_okaeri.py が front-page.html から作る（直接は編集しない）
   ========================================================================== */

/* 金色の帯（「1日限りの特別開催」）
   デザインを実測：文字は明朝の太字・白。帯は左端が明るく、幅の約4割で濃い金になり、そのまま右端まで
   （色は --grad-gold-deep と同じ4色を、逆の向きに並べたもの） */
.okaeri-badge {
  display: inline-block;
  padding: 0.15em 0.7em 0.2em;
  background: linear-gradient(90deg, #e8ca97 0%, #c79b4f 20%, #a8720f 36%, #9d6600 43%, #9d6600 100%);
  color: var(--c-white);
  font-family: var(--ff-mincho);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-0);
}

/* --- TOP冒頭 ------------------------------------------------------------- */
/* 下に「対象の方」の文が載るので、下側を早めに暗くする */
.kv--okaeri .kv__slide::after {
  background: linear-gradient(180deg, rgba(2, 4, 23, 0.35) 0%, rgba(2, 4, 23, 0) 30%, rgba(7, 8, 42, 0) 60%, rgba(7, 8, 42, 0.72) 84%, var(--c-navy) 100%);
}

/* タイトル一式は左揃え。高さがデザインどおり（780）のとき、デザインと同じ位置（上から174）になる */
.kv--okaeri .kv__title {
  top: max(7rem, 22.3%);
  text-align: left;
}

/* 手書きの「おかえりなさいDay」 */
.kv__okaeri {
  width: calc(var(--u) * 248);
  margin: calc(var(--u) * 6) 0 0 calc(var(--u) * 33);
}

.kv__okaeri img {
  width: 100%;
}

.kv--okaeri .kv__date {
  padding-left: calc(var(--u) * 31);
}

.kv--okaeri .kv__time {
  padding-left: calc(var(--u) * 33);
}

/* 対象の方（左下）。右下には「ご予約はこちら」ボタンが来る。
   幅の狭い画面ではボタンと重なるので、ボタンの上に逃がす */
.kv__limited {
  position: absolute;
  bottom: 7.4rem;
  left: calc(var(--u) * 16);
  z-index: 2;
}

.kv__badge {
  font-size: var(--fz-6);
}

.kv__limited-text {
  margin-top: 0.6rem;
  padding-left: calc(var(--u) * 4);
  font-family: var(--ff-mincho);
  font-weight: 600;
  font-size: var(--fz-4);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-s);
}

.kv__limited-text em {
  color: var(--c-gold);
  font-style: normal;
}

/* タイトルに続けて、少し下からふわっと現れる */
.js .kv__limited {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.4s ease, transform 0s linear 0.4s;
}

.js .kv.is-title-in .kv__limited {
  opacity: 1;
  transform: none;
  transition: opacity 1.8s ease 0.88s, transform 1.8s var(--ease) 0.88s;
}

/* --- おかえりなさいDay コピー ------------------------------------------- */
.okaeri-msg {
  position: relative;
  background: var(--c-sky);
}

.okaeri-msg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../image/top/sky_top_sp.jpg") center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%);
  pointer-events: none;
}

.okaeri-msg__body {
  position: relative;
  padding: 5.4rem var(--gutter) 11rem; /* 上の余白は 2026-10-10 に 1.5倍 */
  /* 文字の大きさ・行の高さ・字間は、イベント全体コピー（.intro__text）と同じ */
  font-family: var(--ff-mincho);
  font-weight: 400; /* イントロと同じ（2026-10-09 に 600 → 400） */
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-s);
}

.okaeri-msg__body p + p {
  margin-top: 2em;
}

/* 雪の教会の写真。上は白くぼかして、星空からつなぐ */
/* ツリーと教会の夜の写真。上は星空の背景へ、下は次の区画へ、ぼかしてつなぐ（境目の線を出さない） */
.okaeri-msg__photo {
  position: relative;
  margin-top: -9rem; /* 文章の下の余白に食い込ませて、星空から写真が浮かび上がるように */
}

.okaeri-msg__photo picture {
  display: block;
}

.okaeri-msg__photo img {
  width: 100%;
  aspect-ratio: 375 / 430;
  object-fit: cover;
  object-position: 41.5% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 88%, transparent 100%);
}

/* イベント全体コピー：写真のすぐ下から背景を始める（一般のトップは冒頭の写真の下に余白がある） */
.page-okaeri .intro {
  padding-top: 7.5rem; /* 2026-10-10 に 1.5倍 */
}

.page-okaeri .intro__bg {
  inset: 0;
}

.page-okaeri .intro__bg::after {
  background: linear-gradient(180deg, rgba(7, 8, 42, 0.25) 0%, rgba(7, 8, 42, 0.2) 70%, var(--c-sky) 100%);
}

/* --- 星空の背景：区画が少ないぶん短いので、はみ出しを切る。下端に山の稜線が見える余白を取る -- */
.page-okaeri .sky {
  overflow: hidden;
  overflow: clip;
}

.page-okaeri .areamap {
  padding-bottom: calc(var(--u) * 130);
}

/* --- 開催概要 ------------------------------------------------------------- */
.outline__badge {
  margin-top: 0.8rem;
  font-size: var(--fz-2);
  text-align: center;
}

.outline--okaeri .outline__time {
  margin-top: 1.4rem;
  line-height: var(--lh-title);
}

.outline--okaeri .outline__time span {
  display: block;
}

.outline__limited {
  margin-top: 3rem;
  padding-inline: var(--gutter);
}

.outline__notes {
  margin-top: 1rem;
  font-size: var(--fz-2);
  line-height: var(--lh-base);
}

.outline__notes li {
  position: relative;
  padding-left: 1.4em;
}

.outline__notes li::before {
  content: "＊";
  position: absolute;
  left: 0;
}

/* お申込みのカード（枠は予約カードと共通） */
.okaeri-apply {
  margin: 5rem var(--gutter) 0;
}

.okaeri-apply .plan-card {
  height: auto;
}

.okaeri-apply .plan-card__dl {
  margin-top: 0;
}

.okaeri-apply .plan-card__notes {
  margin-top: 0.4rem;
}

/* --- CONTENTS ------------------------------------------------------------- */
/* おかえりなさい記念撮影：2つの丸写真の組み合わせ */
.program-hero--duo {
  height: calc(var(--u) * 470);
}

@media (min-width: 360px) {
  .kv__limited {
    bottom: calc(var(--u) * 48);
  }
}

@media (min-width: 768px) {
  /* 冒頭：タイトルは左、写真の人物は中央〜右に見せる */
  .kv--okaeri .kv__slide:first-child::after {
    background:
      linear-gradient(90deg, rgba(2, 4, 23, 0.78) 0%, rgba(2, 4, 23, 0.5) 28%, rgba(2, 4, 23, 0) 58%),
      linear-gradient(180deg, rgba(2, 4, 23, 0.35) 0%, rgba(2, 4, 23, 0) 30%, rgba(7, 8, 42, 0) 68%, var(--c-navy) 100%);
  }

  .kv--okaeri .kv__title {
    top: 43%;
    right: auto;
    left: var(--gutter);
    width: 42rem;
    max-width: 44%;
  }

  .kv__okaeri {
    width: 74%;
    margin: 1rem 0 0 3%;
  }

  .kv--okaeri .kv__date,
  .kv--okaeri .kv__time {
    padding-left: 0.4rem;
  }

  .kv__limited {
    bottom: 4.8rem;
    left: var(--gutter);
  }

  .kv__limited-text {
    padding-left: 0.4rem;
  }

  /* PCの星空（星だけの空のタイルを、引き伸ばさずにくり返す） */
  .okaeri-msg::before {
    background: url("../image/top/sky_stars_pc.jpg") center top / 138rem auto repeat;
  }

  .okaeri-msg__body {
    max-width: calc(72rem + var(--gutter) * 2);
    margin-inline: auto;
    padding: 15rem var(--gutter) 16rem; /* 上の余白は 2026-10-10 に 1.5倍 */
    font-size: var(--fz-5);
  }

  .okaeri-msg__photo {
    margin-top: -14rem;
  }

  .okaeri-msg__photo img {
    aspect-ratio: 16 / 8;
    object-position: 30% 100%;
  }

  .page-okaeri .intro {
    padding-top: 18rem; /* 2026-10-10 に 1.5倍 */
  }

  .page-okaeri .areamap {
    padding-bottom: 24rem;
  }

  .outline__badge {
    margin-top: 1.2rem;
    font-size: var(--fz-3);
  }

  .outline--okaeri .outline__time {
    margin-top: 2rem;
  }

  .outline__limited {
    margin-top: 4.8rem;
    text-align: center;
  }

  .outline__notes {
    display: inline-block;
    text-align: left;
  }

  .okaeri-apply {
    max-width: 64rem;
    margin: 8rem auto 0;
  }

  /* 丸写真の組み合わせが2つ続くので、左右を入れ替える */
  .program--hero {
    grid-template-columns: 1fr minmax(auto, 1fr);
  }

  .page-okaeri .program:nth-of-type(even) > .program-hero {
    order: 3;
    justify-self: start;
  }
}

/* ==========================================================================
   CONTENTS のPCの動き（2026-10-09 木村さん → 10/10 にラフへ合わせ直し）
   「PCはラフの頃のように、丸い写真の大小をつけたり、端に寄ったり、動きをつけたい（おかえりなさいDay も同じ）」
   8月末のPC版ラフ（Links/星野リゾート_Xmas_test_0831.pdf）を実測して、写真ごとに
     --pd … 直径（画面の幅に対する割合）
     --po … 外側のふちから写真までの距離（画面の幅に対する割合。マイナスは、画面の端で欠ける）
   を決めてある。左右どちらに置くかは、これまでどおり1つおきに入れ替わる（おかえりなさいDay では左右が逆になる）。
   画面が 1600px より広いときは、中央の 1600px ぶんを「画面の幅」とみなす（--cw。写真が大きくなりすぎないように）。
   ラフと変えてある所：調べ（ラフ 18% → 13%）とラウンジ（10.6% → 7%）は、文章の欄に重なるので少し外へ寄せた。
   Imagination Canvas はラフに無いので、Harmony と同じ大きさ・位置にした
   ========================================================================== */
@media (min-width: 1000px) {
  .contents {
    --cw: min(100vw, 160rem);
    --cl: calc((100vw - var(--cw)) / 2);
    overflow-x: clip;
  }

  /* 写真が欄からはみ出しても、文章の欄の幅が変わらないようにする */
  .program:not(.program--first):not(.program--hero) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .program > .program__photo {
    width: calc(var(--cw) * var(--pd));
    height: calc(var(--cw) * var(--pd));
  }

  /* 写真が左の欄にある回 */
  .program:nth-of-type(odd) > .program__photo {
    justify-self: start;
    margin-right: 0;
    margin-left: calc(var(--cl) + var(--cw) * var(--po) - var(--gutter));
  }

  /* 写真が右の欄にある回 */
  .program:nth-of-type(even) > .program__photo {
    justify-self: end;
    margin-right: calc(var(--cl) + var(--cw) * var(--po) - var(--gutter));
    margin-left: 0;
  }

  #program-wct { --pd: 0.39; --po: 0.08; }
  #program-lantern { --pd: 0.35; --po: 0.06; }
  #program-ic { --pd: 0.36; --po: 0.08; }
  #program-service { --pd: 0.45; --po: -0.026; }
  #program-harmony { --pd: 0.36; --po: 0.08; }
  #program-shirabe { --pd: 0.36; --po: 0.13; }
  #program-letter { --pd: 0.5; --po: -0.075; }
  #program-ito { --pd: 0.425; --po: -0.035; }
  #program-stone { --pd: 0.37; --po: 0.033; }
  #program-lounge { --pd: 0.425; --po: 0.07; }
}

/* 星降る森（1280px以上）：木村さんの赤い書き込み（修正依頼_1009.pdf）の位置に合わせる
   ・文章は上へ（大きい写真の横）
   ・大きい写真は、さらに大きく・左へ ／ ツリーは右へ（文章の下にかかる）／ プロムナードは大きく ／ ウォールは右下（文章の下）
   ・10/10 夜「それぞれが少し近い」→ ツリーを下へ、ウォールを右（と下）へ、プロムナードも少し下へずらして、あいだを空けた
   位置と大きさは、4枚の箱（幅 375u）の左上からの距離で持つ：--hx（左）--hy（上）--hd（直径）。単位は --u（1.3px）。
   写真が右の欄にある回（おかえりなさいDay）は、左右を裏返す */
@media (min-width: 1280px) {
  .program--first,
  .program--hero {
    align-items: start;
  }

  .program--first .program__body,
  .program--hero .program__body {
    padding-top: calc(var(--u) * 16);
  }

  #program-hoshifuru .program-hero {
    height: calc(var(--u) * 840);
  }

  #program-hoshifuru .program-hero__item {
    top: calc(var(--u) * var(--hy));
    left: calc(var(--u) * var(--hx));
  }

  #program-hoshifuru .program-hero__item .program__photo {
    --d: var(--hd) !important;
    --x: 0 !important;
  }

  #program-hoshifuru .program-hero__item:nth-of-type(1) { --hx: -116; --hy: 7; --hd: 410; }
  #program-hoshifuru .program-hero__item:nth-of-type(2) { --hx: 281; --hy: 345; --hd: 242; }
  #program-hoshifuru .program-hero__item:nth-of-type(3) { --hx: -5; --hy: 445; --hd: 223; }
  #program-hoshifuru .program-hero__item:nth-of-type(4) { --hx: 450; --hy: 580; --hd: 215; }

  /* 名称：それぞれの写真のすぐ下（中央）。大きい写真だけは右下 */
  #program-hoshifuru p.program-hero__label {
    top: calc(var(--u) * var(--ly2));
    right: auto;
    left: calc(var(--u) * var(--lx2));
    width: calc(var(--u) * var(--lw2));
    text-align: center;
  }

  #program-hoshifuru p.program-hero__label:nth-of-type(1) { --lx2: 196; --ly2: 400; --lw2: 110; }
  #program-hoshifuru p.program-hero__label:nth-of-type(2) { --lx2: 251; --ly2: 596; --lw2: 242; } /* 右下のウォールの写真の光にかからないよう、少し左へ */
  #program-hoshifuru p.program-hero__label:nth-of-type(3) { --lx2: -5; --ly2: 677; --lw2: 223; }
  #program-hoshifuru p.program-hero__label:nth-of-type(4) { --lx2: 450; --ly2: 804; --lw2: 215; }

  /* 左右を裏返す（写真が右の欄にある回） */
  #program-hoshifuru:nth-of-type(even) .program-hero__item {
    left: calc(var(--u) * (375 - var(--hx) - var(--hd)));
  }

  #program-hoshifuru:nth-of-type(even) p.program-hero__label {
    left: calc(var(--u) * (375 - var(--lx2) - var(--lw2)));
  }
}