@charset "UTF-8";
/* ==========================================================================
   軽井沢高原教会 星降る森のクリスマス ／ 共通スタイル
   - モバイルファースト（min-width で上書き）
   - 色・書体・文字サイズ・左右の余白は :root の変数で一括管理
   ========================================================================== */

:root {
  /* 色 */
  --c-navy: #07082a;
  --c-sky: #04091f;
  --c-card: rgb(23 37 74 / 0.9);   /* ネイビーの座布団（カード・よくある質問の面）。90%で、後ろがうっすら透ける */
  --c-table-head: #0c1a3c;
  --c-gold: #fcd77f;
  --c-white: #fff;
  --c-ink: #07082a;
  --c-menu-ink: #0d1532;
  --c-red: #e9422d;
  --c-red-line: #9b0241;
  --c-green: #008642;
  --c-green-line: #025d3d;
  --c-gray: #9fa6aa;
  --c-bus: #76cbf3;
  --c-taxi: #85c472;

  --grad-gold: linear-gradient(90deg, #e5b768 0%, #f2dcb5 22%, #d7b276 52%, #be8f41 78%, #a87315 100%);
  --grad-gold-deep: linear-gradient(90deg, #9d6600 0%, #a8720f 10%, #c79b4f 34%, #e8ca97 58%, #e8be76 74%, #dea238 100%);
  --grad-red: linear-gradient(90deg, #940110 0%, #bc6653 30%, #ba624f 50%, #a6352a 75%, #93000d 100%);
  --grad-green: linear-gradient(90deg, #007942 0%, #42855a 30%, #457955 50%, #185e40 75%, #004b34 100%);
  --grad-footer: linear-gradient(90deg, #da971e 0%, #efd3a1 25%, #dab67c 50%, #bc8d3e 75%, #9e6700 100%);
  --grad-menu: linear-gradient(180deg, #d99619 0%, #e5b562 15%, #f2d9af 35%, #d8b377 60%, #bb8c3b 85%, #ac781e 100%);

  /* 書体：明朝もゴシックも Webフォント（Google Fonts）を読み込んで使う。
     端末に入っている書体に任せると、Mac・iPhone・Windows・Android で形も太さも変わってしまうため
     （デザインの游ゴシックは iPhone に無く、ヒラギノに置き換わって太く見えていた）。
     Noto Sans JP の 400 は、游ゴシック Medium とほぼ同じ太さ・同じ字幅。
     うしろの書体は、Webフォントが読み込めなかったときの予備 */
  --ff-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --ff-gothic: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /* 文字サイズは次の8段階だけを使う（1rem = 10px）。値はスマホ用で、PC用は下の @media で1段ずつ大きくする
     スマホ 10/12/14/16/18/20/24/24 ／ PC 12/14/16/18/20/24/32/36 */
  --fz-1: 1rem;    /* 最小：マップのサムネイル名、コピーライト、PCの横並びメニュー */
  --fz-2: 1.2rem;  /* 注記・日付・表の中 */
  --fz-3: 1.4rem;  /* 本文（基準） */
  --fz-4: 1.6rem;  /* ボタン・カード内の見出し */
  --fz-5: 1.8rem;  /* 強調（入場無料、配信日時） */
  --fz-6: 2rem;    /* 中見出し（予約カードの題、ライブ配信の題） */
  --fz-7: 2.4rem;  /* 大見出し（コンテンツ名、冒頭の日付） */
  --fz-8: 2.4rem;  /* 区画の見出し、開催概要の日付（スマホは7と同じ、PCだけ大きい） */

  /* 行の高さは次の4段階だけを使う（1行で終わるアイコン等は 1 を直接書いてよい） */
  --lh-tight: 1.3;  /* 1行で使うもの：ボタン、日付、ラベル、表の中 */
  --lh-title: 1.5;  /* 見出し・題名（2行になりうるもの） */
  --lh-base: 1.7;   /* 本文・注記（基準） */
  --lh-loose: 2;    /* ゆったり読ませる文：導入文、冒頭のコピー、コンテンツの説明文 */

  /* 文字の間隔は次の4段階だけを使う */
  --ls-0: 0;        /* 詰める：マップのサムネイル名、コピーライト */
  --ls-s: 0.04em;   /* 明朝の基準、日付、長い題名 */
  --ls-body: 0.08em; /* ゴシックの本文（基準）。2026-10-08 に 0.04em から広げた */
  --ls-m: 0.1em;    /* 少し広げる：小見出し、英字の見出し、ボタン以外のラベル */
  --ls-l: 0.2em;    /* 広げる：区画の見出し、ボタン、カードの題 */

  /* 文字の太さは次の2つだけを使う（読み込んでいる Webフォントもこの2つ）
     400 … 基準（明朝の見出し・題名・ボタン、ゴシックの本文）
     700 … 強調（表のコンテンツ名、選択中の日付、アクセスの小見出し、NEW） */

  /* 寸法
     --u      : デザイン(375px幅)の 1px に相当する長さ。丸写真など「絵」の位置と大きさに使う
     --gutter : 左右の余白。見出し・本文・カード・表はすべてこの線に揃える
     --content: 余白を除いた中身の幅 */
  --u: calc(100vw / 375);
  --page-max: 100vw;
  --gutter: calc(var(--u) * 28);
  --content: calc(var(--u) * 375 - var(--gutter) * 2);

  /* 動き */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 画面幅の区切りは3つ：768px（PC）／1000px（横に並べる区画が増える）／1280px（メニュー横並び・導入文縦書き）

   PC（768px以上）
   --gutter は「中身の幅が最大1160pxになる」ように自動で広がる（狭い画面では最小48px）
   --u は絵の大きさの単位（区画ごとに上書きしている箇所あり：アドベント・コンテンツ）
   --section-space は区画と区画のあいだ、--head-space は見出しと中身のあいだ */
@media (min-width: 768px) {
  :root {
    --fz-1: 1.2rem;
    --fz-2: 1.4rem;
    --fz-3: 1.6rem;
    --fz-4: 1.8rem;
    --fz-5: 2rem;
    --fz-6: 2.4rem;
    --fz-7: 3.2rem;
    --fz-8: 3.6rem;

    --u: 1.5px;
    --content-max: 116rem;
    --gutter: max(4.8rem, calc((100vw - var(--content-max)) / 2));
    --content: calc(100vw - var(--gutter) * 2);
    --section-space: 21rem; /* 2026-10-09 に 14 → 21rem（1.5倍） */
    --head-space: 5rem;
  }
}

/* --------------------------------------------------------------------------
   リセット・土台
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

body {
  margin: 0;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--ff-gothic);
  font-size: var(--fz-3);
  font-weight: 400;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-body);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* スマホで触れたときに出る灰色の四角は消す（触れたときの反応は、下の「反応」で自前で出している） */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 本文の改行（2026-10 のルール）
   ・文章は「。」のあとで改行する。文の途中では改行しない（画面の幅で自然に折り返す）
     そろえる道具：_tools/maru_br.py（対象の class もそこに書いてある）
   ・見出し、KVのコピー、カードの中の中央揃えの短い案内文は、デザインどおりの位置で改行する
   ・イントロ（.intro__text）だけは、スマホはデザインどおりの改行、768px以上は「。」のあとだけ
     → 文の途中の改行を <br class="u-sp-only"> にしてある
   ・<span class="u-ib"> は以前の「区切りの途中で折り返さない」指定の名残り。いまは何もしない（普通の文字と同じ） */
.u-ib {
  display: inline;
}

.u-pc-only {
  display: none;
}

/* 1〜2文字だけ次の行に落ちる文を、1行に収める（PC。下の @media）。スマホでは何もしない＝普通に折り返す */
.u-fit {
  display: inline;
}

/* text-wrap: pretty は使わない（2026-10-06 に外した）。
   iPhone の新しい Safari では、段落全体の行の長さをそろえようとして、行の右側を空けたまま折り返す
   （PCの Chrome は最終行しか調整しないので、PCでは気づけない） */

.l-page {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  overflow: hidden;
  background: var(--c-navy);
}

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

/* --------------------------------------------------------------------------
   見出し
   -------------------------------------------------------------------------- */
.c-heading {
  padding-inline: var(--gutter);
  color: var(--c-gold);
  font-family: var(--ff-mincho);
  font-size: var(--fz-8);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-l);
}

.c-heading--en {
  letter-spacing: var(--ls-m);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */
.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16rem;
  min-height: 3.6rem;
  margin-inline: auto;
  padding: 0.3rem 1.6rem;
  border-radius: 99rem;
  background: var(--grad-gold);
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.35);
  color: var(--c-ink);
  font-family: var(--ff-mincho);
  font-size: var(--fz-4);
  font-weight: 600; /* ボタンの上の明朝は太いほう（600） */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-l);
  text-align: center;
  text-decoration: none;
  transition: filter 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.c-btn--red {
  background: var(--grad-red);
  color: var(--c-white);
}

.c-btn--green {
  background: var(--grad-green);
  color: var(--c-white);
}

/* 受付開始前・終了後（押せない状態） */
.c-btn.is-disabled {
  width: auto;
  min-width: 16rem;
  max-width: 100%;
  background: var(--c-gray);
  box-shadow: none;
  color: var(--c-ink);
  font-size: var(--fz-3);
  letter-spacing: var(--ls-m);
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   横スライド（お知らせ・開催概要のカード・アクセスのカード）
   1枚目の左端は必ず --gutter の線に揃う
   -------------------------------------------------------------------------- */
.c-slider {
  position: relative;
}

.c-slider__track {
  display: flex;
  gap: calc(var(--u) * 12);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.c-slider__track::-webkit-scrollbar {
  display: none;
}

.c-slider__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* PC：横スライドの「← DRAG →」カーソル（JSが作る。マウスで操作する端末だけ）
   横に動かせるスライドの、リンク以外の所にマウスがあるときだけ出る。そのあいだは、ふつうのカーソルを消す
   大きさは 7rem（2026-10-20 に 10rem の7割へ）。色は金と、写真に重ねる紺の幕（どちらも既存の色） */
.is-drag-cursor,
.is-drag-cursor * {
  cursor: none !important;
}

.drag-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 7rem;
  height: 7rem;
  margin: -3.5rem 0 0 -3.5rem;
  border: 1px solid rgba(252, 215, 127, 0.6);
  border-radius: 50%;
  background: rgba(7, 8, 42, 0.55);
  box-shadow: 0 0 1.7rem rgba(252, 215, 127, 0.3);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: var(--c-gold);
  font-family: var(--ff-mincho);
  font-size: var(--fz-1);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-s); /* 7rem の丸に「← DRAG →」が収まるように、字間は狭め */
  pointer-events: none;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.3s var(--ease), scale 0.3s var(--ease);
}

.drag-cursor.is-show {
  opacity: 1;
  scale: 1;
}

/* 押している間は少し縮む */
.drag-cursor.is-show.is-press {
  scale: 0.86;
}

.drag-cursor svg {
  flex: 0 0 auto;
  width: 0.9rem;
  height: auto;
}

.drag-cursor svg:last-child {
  rotate: 180deg;
}

/* 字間のぶん右に寄るのを打ち消す */
.drag-cursor__text {
  margin-right: -0.04em;
}

/* PC：マウスでつかんで動かしている間 */
.c-slider__track.is-dragging,
.sched__scroll.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.c-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--gutter);
  height: 4.4rem;
  color: var(--c-white);
  transform: translateY(-50%);
  transition: opacity 0.4s var(--ease);
}

.c-slider__arrow svg {
  width: 1rem;
  height: 1.8rem;
}

.c-slider__arrow--prev {
  left: 0;
}

.c-slider__arrow--next {
  right: 0;
}

.c-slider__arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   ヘッダー（メニューボタン）
   -------------------------------------------------------------------------- */
/* ヘッダー：左端にロゴ（トップへ戻る）、右端にメニューボタン。
   〜1279px：ロゴはページの先頭に置く（ページと一緒に流れていく）。メニューボタンだけが画面に残る
   1280px〜：ロゴも横並びのメニューも、画面の上に残る（下の @media） */
.l-header__logo {
  --lw: 11.4rem; /* ロゴの幅（金色の重ね絵の位置の計算にも使う）。10/9 に 80%（10rem）→ 10/10「スマホはもう少しだけ大きく」で 11.4rem */
  position: absolute;
  top: 1.5rem;
  left: 1.6rem;
  z-index: 30;
  display: block;
  width: var(--lw);
}

.l-header__logo img {
  display: block;
  width: 100%;
  transition: opacity 0.5s var(--ease);
}

/* おかえりなさいDay のロゴ（手書きの「おかえりなさいDay」つき） */
.l-header__logo .l-header__logo-sub {
  width: 64%;
  margin: 0.3rem 0 0 6%;
}

/* ロゴの反応：マウスを乗せる（スマホは触れている間）と金色になる。
   ロゴは白いSVGの画像なので、色そのものは変えられない。同じ形に抜いた金色の面を重ねておき、
   元の画像と入れ替わるように濃さを切り替える（::before＝ロゴ、::after＝「おかえりなさいDay」） */
.l-header__logo::before,
.l-header__logo--okaeri::after {
  content: "";
  position: absolute;
  background: var(--c-gold);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.l-header__logo::before {
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 333.84 / 76.38;
  -webkit-mask: url("../image/common/logo.svg") center / 100% 100% no-repeat;
  mask: url("../image/common/logo.svg") center / 100% 100% no-repeat;
}

.l-header__logo--okaeri::after {
  top: calc(var(--lw) * 76.38 / 333.84 + 0.3rem);
  left: 6%;
  width: 64%;
  aspect-ratio: 248.05 / 55.7;
  -webkit-mask: url("../image/okaeri/title.svg") center / 100% 100% no-repeat;
  mask: url("../image/okaeri/title.svg") center / 100% 100% no-repeat;
}

.l-header__logo:active img {
  opacity: 0;
}

.l-header__logo:active::before,
.l-header__logo--okaeri:active::after {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .l-header__logo:hover img {
    opacity: 0;
  }

  .l-header__logo:hover::before,
  .l-header__logo--okaeri:hover::after {
    opacity: 1;
  }
}

.menu-btn {
  position: fixed;
  top: 0;
  right: max(0px, calc(50vw - var(--page-max) / 2));
  z-index: 60;
  display: block;
  width: 6.2rem;
  height: 6.2rem;
}

.menu-btn__bar {
  position: absolute;
  left: 1.8rem;
  width: 2.6rem;
  height: 0.3rem;
  border-radius: 0.2rem;
  background: var(--c-white);
  box-shadow: 0 0 0.6rem rgba(0, 0, 20, 0.6);
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease), background-color 0.3s var(--ease);
}

.menu-btn__bar:nth-child(1) {
  top: 2.2rem;
}

.menu-btn__bar:nth-child(2) {
  top: 3rem;
}

.menu-btn__bar:nth-child(3) {
  top: 3.8rem;
}

.menu-btn[aria-expanded="true"] .menu-btn__bar {
  background: var(--c-menu-ink);
  box-shadow: none;
}

.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1) {
  transform: translateY(0.8rem) rotate(45deg);
}

.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2) {
  opacity: 0;
}

.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(3) {
  transform: translateY(-0.8rem) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   メニュー（金色のパネルが右からスライドして出る。透明度の変化はなし）
   -------------------------------------------------------------------------- */
.gnav-clip {
  position: fixed;
  top: 0;
  right: max(0px, calc(50vw - var(--page-max) / 2));
  bottom: 0;
  z-index: 50;
  width: clamp(22rem, calc(var(--u) * 220), 27rem);
  overflow: hidden;
  pointer-events: none;
}

.gnav {
  height: 100%;
  padding: 9rem 2.2rem 4rem;
  overflow-y: auto;
  background: var(--grad-menu);
  color: var(--c-menu-ink);
  font-family: var(--ff-mincho);
  font-weight: 400;
  font-size: var(--fz-3);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), visibility 0s linear 0.6s;
  pointer-events: auto;
}

.gnav.is-open {
  visibility: visible;
  transform: none;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), visibility 0s;
}

.gnav__list + .gnav__list {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid currentColor;
}

.gnav__link {
  display: block;
  padding: 0.75rem 0;
  letter-spacing: var(--ls-s);
  white-space: nowrap;
  text-decoration: none;
}

.gnav__church {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.3rem 1.2rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  letter-spacing: var(--ls-m);
  text-decoration: none;
}

.gnav__sns {
  display: flex;
  gap: 1.4rem;
  margin-top: 2rem;
}

.gnav__sns-link {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
}

.gnav__sns-link svg {
  width: 100%;
  height: 100%;
}

/* メニューの後ろの幕 */
.gnav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(3, 4, 24, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
}

.gnav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--ease), visibility 0s;
}

/* --------------------------------------------------------------------------
   「ご予約はこちら」ボタン（画面右下についてくる）
   -------------------------------------------------------------------------- */
.reserve-fab {
  position: fixed;
  right: max(1.6rem, calc(50vw - var(--page-max) / 2 + 1.6rem));
  bottom: calc(2rem + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 13.4rem;
  min-height: 3.8rem;
  padding: 0.4rem 1.6rem;
  border-radius: 99rem;
  background: var(--grad-gold);
  box-shadow: 0 0.3rem 1.2rem rgba(0, 0, 0, 0.45);
  color: #162146;
  font-family: var(--ff-mincho);
  font-weight: 600;
  font-size: var(--fz-4);
  letter-spacing: var(--ls-m);
  text-decoration: none; /* おかえりなさいDay ではリンク（a）なので、下線を消す */
  transition: filter 0.6s var(--ease), box-shadow 0.6s var(--ease), opacity 0.5s var(--ease), visibility 0s;
}

/* 受付期間の外（おかえりなさいDay）：申込カードの「11/2（月）13:00 受付開始」のボタン（.c-btn.is-disabled）と
   まったく同じ見た目にする（大きさ・色・文字。違うのは、画面の右下に固定されていることだけ） */
.reserve-fab.is-disabled {
  min-width: 16rem;
  min-height: 3.6rem;
  padding: 0.3rem 1.6rem;
  background: var(--c-gray);
  box-shadow: none;
  color: var(--c-ink);
  font-size: var(--fz-3);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-m);
  pointer-events: none;
}

/* ページ最下部（コピーライトが見えている間）は隠す */
.reserve-fab.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}


/* --------------------------------------------------------------------------
   ポップアップ（予約・アドベントカレンダー共通）
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 6rem var(--gutter) 3rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s var(--ease), visibility 0s;
}

.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 4, 24, 0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal__body {
  position: relative;
  width: 100%;
  max-width: 34rem;
  transform: translateY(1.6rem);
  transition: transform 0.9s var(--ease);
}

.modal.is-open .modal__body {
  transform: none;
}

.modal__close {
  position: fixed;
  top: 0.6rem;
  right: max(0.6rem, calc(50vw - var(--page-max) / 2 + 0.6rem));
  z-index: 2;
  width: 5rem;
  height: 5rem;
}

.modal__close::before,
.modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6rem;
  height: 0.2rem;
  border-radius: 0.2rem;
  background: var(--c-white);
}

.modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   予約カード（ポップアップ内・開催概要内で共通の枠）
   -------------------------------------------------------------------------- */
.reserve-card {
  padding: 2.4rem 2rem;
  border: 2px solid var(--c-gold);
  border-radius: 1rem;
  background: var(--c-card);
}

.reserve-card--red {
  border-color: var(--c-red-line);
}

.reserve-card--green {
  border-color: var(--c-green-line);
}

.reserve-card__title {
  font-family: var(--ff-mincho);
  font-size: var(--fz-6);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-l);
  text-align: center;
}

.reserve-card__sub {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fz-2);
  letter-spacing: var(--ls-m);
}

.reserve-card--red .reserve-card__title {
  color: var(--c-red);
}

.reserve-card--green .reserve-card__title {
  color: var(--c-green);
}

.reserve-list {
  display: grid;
  gap: 1.6rem;
}

.reserve-list .reserve-card__lead {
  margin: 1.2rem 0 1.6rem;
  text-align: center;
}

/* 緑のカードは「予約制の日」か「追加予約枠」のどちらか一方だけを出す（body の data-reserve-mode で切替） */
[data-reserve-mode="lottery"] .js-mode-additional,
[data-reserve-mode="additional"] .js-mode-lottery {
  display: none;
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.l-footer {
  position: relative;
}

.footer-photos {
  position: relative;
  aspect-ratio: 375 / 413;
  overflow: hidden;
  background: var(--c-navy);
}

.footer-photos__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.4s ease;
}

.footer-photos__item.is-active {
  opacity: 1;
}

.footer-photos__item picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* 写真の上端は、上の区画の紺色からなだらかにつなぐ
   （明るい写真でも境目の線が見えないよう、長く・ゆるやかにぼかす） */
.footer-photos::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 55%;
  /* 濃さの変化を「ゆっくり始まり、ゆっくり終わる」曲線にしてある（途中に段や線が見えないように） */
  background: linear-gradient(180deg, rgba(7, 8, 42, 1) 0%, rgba(7, 8, 42, 0.999) 5%, rgba(7, 8, 42, 0.991) 10%, rgba(7, 8, 42, 0.973) 15%, rgba(7, 8, 42, 0.942) 20%, rgba(7, 8, 42, 0.896) 25%, rgba(7, 8, 42, 0.837) 30%, rgba(7, 8, 42, 0.765) 35%, rgba(7, 8, 42, 0.683) 40%, rgba(7, 8, 42, 0.593) 45%, rgba(7, 8, 42, 0.5) 50%, rgba(7, 8, 42, 0.407) 55%, rgba(7, 8, 42, 0.317) 60%, rgba(7, 8, 42, 0.235) 65%, rgba(7, 8, 42, 0.163) 70%, rgba(7, 8, 42, 0.104) 75%, rgba(7, 8, 42, 0.058) 80%, rgba(7, 8, 42, 0.027) 85%, rgba(7, 8, 42, 0.009) 90%, rgba(7, 8, 42, 0.001) 95%, rgba(7, 8, 42, 0) 100%);
  pointer-events: none;
}

/* 区画の継ぎ目に、写真が髪の毛ほどの線で透けて見えるのを防ぐ（継ぎ目を紺色で数px覆う） */
.l-footer::before {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  z-index: 2;
  height: 5px;
  background: var(--c-navy);
  pointer-events: none;
}

.l-footer__copy {
  display: grid;
  place-items: center;
  min-height: 6rem;
  padding: 1rem var(--gutter);
  background: var(--grad-footer);
  color: #221815;
  font-size: var(--fz-1);
  letter-spacing: var(--ls-0);
  text-align: center;
  white-space: nowrap;
}

.l-footer__copy small {
  font-size: inherit;
}

/* --------------------------------------------------------------------------
   表示アニメーション（画面に入ったときの出方。4種類）
     使い分け（これ以外の使い方はしない）
     data-reveal        … 少し下から、ふわっと浮かび上がる（本文・写真・表など、基本はこれ）
     data-reveal="zoom" … その場で、ほんの少し大きくなりながら現れる（丸い写真と星だけ）
     data-reveal="wipe" … 左から右へ、じわっと現れる（コンテンツ名などの小見出しと、その上のサブ見出しだけ。区画の見出し h2 は「下から」）
   遅らせたいときは style="--delay:.2s"
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1.2s ease, transform 1.2s var(--ease);
  transition-delay: var(--delay, 0s);
}

.js [data-reveal="zoom"] {
  transform: scale(0.95);
  transition: opacity 1.8s ease, transform 2s var(--ease);
  transition-delay: var(--delay, 0s);
}

/* 左から：境目をぼかしたマスクを左→右へ動かしつつ、全体も薄い状態から濃くなる
   （マスクは動いている間だけ掛かり、終わると外れる） */
.js [data-reveal="wipe"] {
  transform: none;
  transition: none;
}

/* data-reveal="pc" … 「画面に入った」ことだけをPC側のCSSに伝える印。
   これ自体は動かない（スマホでは何も起きない）。動きは各ページのCSSのPC側に書く */
.js [data-reveal="pc"] {
  opacity: 1;
  transform: none;
  transition: none;
}

.js [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

.js [data-reveal="wipe"].is-inview {
  animation: wipe-in 2.4s ease var(--delay, 0s) backwards;
}

@keyframes wipe-in {
  from {
    opacity: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38.5%, transparent 61.5%);
    mask-image: linear-gradient(90deg, #000 0%, #000 38.5%, transparent 61.5%);
    -webkit-mask-size: 260% 100%;
    mask-size: 260% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    opacity: 1;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38.5%, transparent 61.5%);
    mask-image: linear-gradient(90deg, #000 0%, #000 38.5%, transparent 61.5%);
    -webkit-mask-size: 260% 100%;
    mask-size: 260% 100%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

/* --------------------------------------------------------------------------
   背景の光（ゆっくり煌めく。ほんの少し大きくなったり小さくなったりする）
   位置・大きさ・濃さはデザインから取得（--x --y は区画に対する割合、--d は直径、--a は濃さ）
   -------------------------------------------------------------------------- */
.orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orb {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: calc(var(--u) * var(--d));
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 208, 125, 1) 0%, rgba(247, 208, 125, 0.8) 10%, rgba(247, 208, 125, 0.37) 20%, rgba(247, 208, 125, 0.1) 30%, rgba(247, 208, 125, 0) 40%);
  opacity: var(--a);
  translate: -50% -50%;
  animation: twinkle var(--t, 5s) ease-in-out var(--delay, 0s) infinite alternate;
}

@keyframes twinkle {
  from {
    opacity: calc(var(--a) * 0.7);
    scale: 0.9;
  }
  to {
    opacity: calc(var(--a) * 2);
    scale: 1.24;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .orb,
  .program__photo::before,
  .advent__glow {
    animation: none;
  }
}

/* ==========================================================================
   PC（768px以上）
   ========================================================================== */
@media (min-width: 768px) {
  /* スマホだけの改行（イントロの、文の途中の改行） */
  .u-sp-only {
    display: none;
  }

  /* PCだけの改行（木村さんが位置を指定した所。2026-10-09） */
  .u-pc-only {
    display: inline;
  }

  /* 1行に収める文（校正で「す。」「い。」だけが次の行に落ちていた所。2026-10-10）
     ・字間を少し詰め、折り返さない
     ・それでも入りきらない幅では、入る大きさまで文字を小さくする（--n ＝ その文の幅が文字何個ぶんか。実測値。cqw ＝ 入れ物の幅の1%）
     入れ物（li）に container-type が要る（.program__notes li / .access-card__notes li に付けてある） */
  .u-fit {
    display: inline-block;
    font-size: min(1em, calc(100cqw / var(--n)));
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .c-btn {
    width: 22rem;
    min-height: 4.8rem;
  }

  .c-btn.is-disabled {
    min-width: 22rem;
  }

  .reserve-fab.is-disabled {
    min-width: 22rem;
    min-height: 4.8rem;
  }

  /* 横スライドの矢印は、中身の左右すぐ外側に置く */
  .c-slider__arrow {
    width: 4.8rem;
  }

  .c-slider__arrow--prev {
    left: calc(var(--gutter) - 4.8rem);
  }

  .c-slider__arrow--next {
    right: calc(var(--gutter) - 4.8rem);
  }

  .reserve-fab {
    right: 3.2rem;
    bottom: 3.2rem;
    min-width: 20rem;
    min-height: 5.2rem;
  }

  .modal__body {
    max-width: 60rem;
  }

  /* 予約のポップアップは、カードを横に並べる */
  .modal--reserve .modal__body {
    max-width: 84rem;
  }

  .modal--reserve .reserve-list {
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 3.2rem;
  }

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

  /* 写真（横3:縦2）がなるべく切れないよう、縦を大きく取る（引きの絵にする） */
  .footer-photos {
    aspect-ratio: auto;
    height: min(100vh, 60vw);
    height: min(100svh, 60vw);
    min-height: 36rem;
  }

  /* PCのフッター写真は、横長の写真に差し替えて「引き」の絵にする（HTMLの <picture>）。枠は画面の幅いっぱいのまま */
  .footer-photos__item img {
    object-position: var(--pos-pc, var(--pos, 50% 50%));
  }

  .l-footer__copy {
    min-height: 8rem;
  }
}

/* ==========================================================================
   PC（1280px以上）：メニューを画面上部に横並びで常に表示する
   ========================================================================== */
@media (min-width: 1280px) {
  html {
    scroll-padding-top: 11rem;
  }

  .menu-btn,
  .gnav-backdrop {
    display: none;
  }

  /* ロゴは左上に残る（トップでも出す） */
  .l-header__logo,
  .front-page .l-header__logo {
    position: fixed;
    top: 2rem;
    --lw: 14rem;
    left: 3.2rem;
    z-index: 55;
    display: block;
    width: var(--lw);
  }

  .gnav-clip {
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    overflow: visible;
    background: linear-gradient(180deg, rgba(3, 4, 24, 0.85) 0%, rgba(3, 4, 24, 0.5) 55%, rgba(3, 4, 24, 0) 100%);
  }

  /* 2段・右揃え。上段＝ページの中の移動とよくある質問・お問合せ、下段＝軽井沢高原教会とSNS。左はロゴのぶん空ける */
  .gnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    column-gap: clamp(1.2rem, 1.3vw, 2.8rem);
    row-gap: 1rem;
    height: auto;
    padding: 2rem 3.2rem 4rem 20rem;
    overflow: visible;
    background: none;
    color: var(--c-white);
    font-size: var(--fz-2);
    visibility: visible;
    transform: none;
    transition: none;
    pointer-events: none;
  }

  .gnav > * {
    pointer-events: auto;
  }

  .gnav__list {
    display: flex;
    gap: clamp(1.2rem, 1.3vw, 2.8rem);
  }

  .gnav__list + .gnav__list {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .gnav__link {
    position: relative;
    padding: 0.6rem 0;
    letter-spacing: var(--ls-s);
  }

  .gnav__sub {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
  }

  .gnav__church {
    margin-top: 0;
    color: var(--c-gold);
    letter-spacing: var(--ls-s);
  }

  .gnav__sns {
    margin-top: 0;
  }

  .gnav__sns-link {
    width: 2rem;
    height: 2rem;
  }
}

/* ==========================================================================
   反応（PC：マウスを乗せたとき ／ スマホ：指で触れている間）
   ・PCとスマホで、見た目を同じにする
     PC は :hover（マウスのある端末だけに効かせる）、スマホは :active（触れている間）
   ・値は下の変数にまとめてあり、両方が同じ変数を使う（片方だけ変わってずれるのを防ぐ）
   ・考え方：押し上げたり色を急に変えたりせず、「灯りがともる」ように光らせる
     スマホは触れる時間が短いので、灯るのは速く（0.12秒）、消えるのはゆっくり
   ・例外（PCにしか無いもの）：横並びメニュー（1280px〜）、DRAGの印
   ========================================================================== */
:root {
  --lit-bright: brightness(1.06);
  --lit-glow: 0 0 1.4rem rgba(252, 215, 127, 0.28), 0 0.2rem 0.6rem rgba(0, 0, 0, 0.35);
  --lit-glow-red: 0 0 1.4rem rgba(233, 66, 45, 0.32), 0 0.2rem 0.6rem rgba(0, 0, 0, 0.35);
  --lit-glow-green: 0 0 1.4rem rgba(40, 170, 100, 0.3), 0 0.2rem 0.6rem rgba(0, 0, 0, 0.35);
  --lit-glow-photo: 0 0 1.2rem rgba(252, 215, 127, 0.4);
  --lit-text: 0 0 0.8rem rgba(252, 215, 127, 0.3);
  --lit-move: 0.4rem;   /* 矢印が進む方向へ動く量 */
  --lit-zoom: 1.08;     /* 写真が寄る倍率 */
  --lit-fade: 0.55;     /* 金色パネルのメニューが薄くなる濃さ */
  --lit-in: 0.12s;      /* スマホで触れたときに灯る速さ */
}

/* --- 変化の速さ（元に戻るとき。全端末共通） ---------------------------------- */
.c-link {
  transition: text-decoration-color 0.5s var(--ease), text-shadow 0.5s var(--ease);
}

.c-slider__arrow svg,
.sched__nav svg {
  transition: translate 0.5s var(--ease);
}

.modal__close {
  transition: rotate 0.6s var(--ease);
}

.gnav__link,
.gnav__church,
.gnav__sns-link {
  transition: opacity 0.4s var(--ease), color 0.5s var(--ease), background-color 0.5s var(--ease);
}

/* --- スマホ：指で触れている間（PCではクリックしている間） ---------------------- */
/* ボタン：内側から明るくなり、まわりに光がにじむ */
.c-btn:active,
.reserve-fab:active {
  filter: var(--lit-bright);
  box-shadow: var(--lit-glow);
  transition-duration: var(--lit-in);
}

.c-btn--red:active {
  box-shadow: var(--lit-glow-red);
}

.c-btn--green:active {
  box-shadow: var(--lit-glow-green);
}

/* 文中のリンク：下線がすっと消え、文字がほのかに光る */
.c-link:active {
  text-decoration-color: transparent;
  text-shadow: var(--lit-text);
  transition-duration: var(--lit-in);
}

/* 矢印：進む方向へ少し動く */
.c-slider__arrow--prev:active svg,
.sched__nav button:first-child:active svg {
  translate: calc(var(--lit-move) * -1) 0;
  transition-duration: var(--lit-in);
}

.c-slider__arrow--next:active svg,
.sched__nav button:last-child:active svg {
  translate: var(--lit-move) 0;
  transition-duration: var(--lit-in);
}

/* メニューボタン・閉じるボタン */
.menu-btn[aria-expanded="false"]:active .menu-btn__bar {
  background: var(--c-gold);
}

.modal__close:active {
  rotate: 90deg;
  transition-duration: var(--lit-in);
}

/* 金色のパネルのメニュー（〜1279px） */
.gnav__link:active,
.gnav__sns-link:active {
  opacity: var(--lit-fade);
  transition-duration: var(--lit-in);
}

.gnav__church:active {
  background: var(--c-menu-ink);
  color: var(--c-gold);
  transition-duration: var(--lit-in);
}

/* --- PC：マウスを乗せたとき（上の「スマホ」と必ず同じ内容にする） ---------------- */
@media (hover: hover) and (pointer: fine) {
  .c-btn:hover,
  .reserve-fab:hover {
    filter: var(--lit-bright);
    box-shadow: var(--lit-glow);
  }

  .c-btn--red:hover {
    box-shadow: var(--lit-glow-red);
  }

  .c-btn--green:hover {
    box-shadow: var(--lit-glow-green);
  }

  .c-link:hover {
    text-decoration-color: transparent;
    text-shadow: var(--lit-text);
  }

  .c-slider__arrow--prev:hover svg,
  .sched__nav button:first-child:hover svg {
    translate: calc(var(--lit-move) * -1) 0;
  }

  .c-slider__arrow--next:hover svg,
  .sched__nav button:last-child:hover svg {
    translate: var(--lit-move) 0;
  }

  .menu-btn[aria-expanded="false"]:hover .menu-btn__bar {
    background: var(--c-gold);
  }

  .modal__close:hover {
    rotate: 90deg;
  }

  .gnav__link:hover,
  .gnav__sns-link:hover {
    opacity: var(--lit-fade);
  }

  .gnav__church:hover {
    background: var(--c-menu-ink);
    color: var(--c-gold);
  }
}

/* --- 例外：横並びのメニュー（1280px以上。PCにしか無い） -------------------------
   金色になり、下線が左から伸びる。触れる端末（大きいタブレット）でも同じ見た目にする */
@media (min-width: 1280px) {
  .gnav__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0.2rem;
    left: 0;
    height: 1px;
    background: var(--c-gold);
    scale: 0 1;
    transform-origin: left center;
    transition: scale 0.5s var(--ease);
  }

  .gnav__link:active,
  .gnav__sns-link:active {
    color: var(--c-gold);
    opacity: 1;
  }

  .gnav__link:active::after {
    scale: 1 1;
  }

  .gnav__church:active {
    background: var(--c-gold);
    color: var(--c-ink);
  }
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .gnav__link:hover,
  .gnav__sns-link:hover {
    color: var(--c-gold);
    opacity: 1;
  }

  .gnav__link:hover::after {
    scale: 1 1;
  }

  .gnav__church:hover {
    background: var(--c-gold);
    color: var(--c-ink);
  }
}