/* ══════════════════════════════════════════════════════════════
   VJGC — 全ページ共通
   トークン / 土台 / ヘッダー / フッター / SNS帯 / みことば帯 /
   ラベル / ボタン / 見出しリンク / 斜めの切り替え / 動画カード /
   イベントカード / スクロールの登場
   ページ固有のものは各ページの CSS（例: top.css）に書く。
   ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* ── ブランド（ロゴの鳩 #0297A5 基準） ── */
  --brand:#0297A5; --brand-600:#017E8B; --brand-700:#016170; --brand-900:#06323A;
  --brand-200:#9BDCE2; --brand-100:#CFEDF0; --brand-050:#EAF6F7;
  --warm:#FCFBF8; --sand:#F4F1EA; --ink:#1F2A2C; --ink-mid:#4A5658; --muted:#8A918F;
  --line:rgba(31,42,44,.10);

  /* 濃色面（ヒーローの面・フッター）。左上に光がにじみ、右下へ沈む2枚重ね */
  --deep:radial-gradient(86% 66% at 16% 26%, rgba(2,151,165,.26) 0%, transparent 62%),
         linear-gradient(160deg,#08414A 0%,var(--brand-900) 62%);

  /* ── ゴスペルナイト専用（GN-poster から採色）。このイベントの
        ブロックの中でだけ使う。サイト全体には広げない ── */
  --gn-ink:#2F5F42; --gn:#4E8A5C; --gn-light:#A8C888; --gn-yellow:#F2ECA6; --gn-paper:#FAF8EE;

  --serif-en:'Cormorant Garamond',serif; --serif-jp:'Noto Serif JP',serif;
  --sans-jp:'Noto Sans JP',sans-serif; --mincho:'Zen Old Mincho',serif;
  --hh:70px; --slant:6vw;
}
@media (max-width:900px){ :root{--slant:8vw} }

html{scroll-behavior:smooth}
/* ページ内リンクで飛んだ先が固定ヘッダーの下に隠れないようにする */
[id]{scroll-margin-top:var(--hh)}
body{font-family:var(--sans-jp);font-weight:300;color:var(--ink);background:var(--warm);line-height:1.85;-webkit-font-smoothing:antialiased}
img{max-width:100%}

section{padding:clamp(3.5rem,7vw,6rem) clamp(1.5rem,5vw,3rem)}
.inner{max-width:1180px;margin:0 auto}


/* ━━━━━━━━━━ ヘッダー ━━━━━━━━━━ */
header{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--hh);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.5rem,5vw,3rem);background:rgba(252,251,248,.95);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.logo img{height:40px}
.logo-name{font-family:var(--serif-jp);font-size:.74rem;font-weight:500;line-height:1.4}
.h-right{display:flex;align-items:center;gap:.1rem}
nav{display:flex;align-items:center}
.nav-item{position:relative}
/* 文字は濃いめ（--ink）。マウスを乗せたら淡いティールの地を敷き、文字をいちばん濃い色に。
   色の変化だけだと年配の方に分かりにくいので、地の色で「いまここ」をはっきり見せる */
.nav-item>a{font-family:var(--serif-jp);font-size:.82rem;font-weight:500;white-space:nowrap;color:var(--ink);text-decoration:none;padding:.4rem .7rem;border-radius:4px;transition:color .18s,background .18s;display:inline-flex;align-items:center;gap:.25rem;cursor:pointer}
.nav-item>a:hover,.nav-item:hover>a{color:var(--brand-900);background:var(--brand-100)}
/* 週報：アイコン＋ティールの太字で少しだけ目立たせる（EN・献金のボタンよりは控えめ） */
.nav-item.is-bulletin>a{color:var(--brand-700);font-weight:600;gap:.3rem}
.nav-ico{width:15px;height:15px;flex:none}
.nav-item>a .caret{width:8px;height:8px;transition:transform .2s;opacity:.6}
.nav-item:hover>a .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:100%;left:0;min-width:200px;background:var(--warm);border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 40px rgba(6,50,58,.12);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:50}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;font-family:var(--serif-jp);font-size:.8rem;font-weight:400;color:var(--ink);text-decoration:none;padding:.55rem .85rem;border-radius:4px;white-space:nowrap;transition:.15s}
.dropdown a:hover{color:var(--brand-900);background:var(--brand-100)}
.dropdown a .sub-en{display:block;font-family:var(--serif-en);font-size:.72rem;font-variant:small-caps;letter-spacing:.04em;color:var(--muted);margin-top:-2px}
.nav-actions{display:flex;align-items:center;gap:.4rem;margin-left:.5rem;padding-left:.6rem;border-left:1px solid var(--line)}
.nav-btn{font-family:var(--serif-jp);font-size:.78rem;font-weight:500;padding:.4rem 1rem;border-radius:99px;border:1px solid transparent;text-decoration:none;transition:.18s;white-space:nowrap}
.nav-btn.fill{background:var(--brand);color:var(--warm)}
.nav-btn.fill:hover{background:var(--brand-600)}
.nav-btn.line{border:1px solid var(--brand);color:var(--brand-600)}
.nav-btn.line:hover{background:var(--brand-050)}
.ham{display:none;background:none;border:none;cursor:pointer;padding:.5rem}
.ham span{display:block;width:20px;height:1.5px;background:var(--ink);margin:5px 0}

@media (max-width:1180px){
  .ham{display:block}
  .h-right{display:none;position:absolute;top:var(--hh);left:0;right:0;flex-direction:column;align-items:stretch;background:var(--warm);border-bottom:1px solid var(--line);padding:.75rem 1.25rem}
  .h-right.open{display:flex}
  nav{display:flex;flex-direction:column;align-items:stretch}
  .nav-item{width:100%}
  /* 行いっぱいを押せるようにして、下階層の印は右端へ */
  .nav-item>a{display:flex;padding:.65rem .75rem;font-size:1rem;justify-content:space-between}
  .nav-item.is-bulletin>a{justify-content:flex-start;gap:.45rem}
  .nav-ico{width:18px;height:18px}
  .nav-item.open>a{color:var(--brand-600)}
  /* 下に階層がある印：丸いトグル。開くと塗りに反転する */
  /* 押しやすいよう大きめ（文字を押すと移動、この丸を押すと開閉） */
  .nav-item>a .caret{width:12px;height:12px;opacity:1;flex:none;
    box-sizing:content-box;padding:9px;border-radius:50%;
    border:1px solid var(--brand-200);color:var(--brand-600);
    transition:transform .2s,background .2s,color .2s,border-color .2s}
  .nav-item.open>a .caret{transform:rotate(180deg);background:var(--brand);border-color:var(--brand);color:var(--warm)}
  /* 子：左に縦の線を通し、各項目に横の枝を出して入れ子だと分かるようにする */
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:none;border-left:2px solid var(--brand-200);border-radius:0;
    margin:.1rem 0 .4rem .9rem;padding:.2rem 0;min-width:0;display:none;background:transparent}
  .nav-item.open .dropdown{display:block}
  .dropdown a{position:relative;font-size:.9rem;padding:.5rem .75rem .5rem 1.5rem;border-radius:0 4px 4px 0}
  .dropdown a::before{content:'';position:absolute;left:0;top:1.05rem;width:12px;height:1px;background:var(--brand-200)}
  .dropdown a .sub-en{margin-top:0}
  .nav-actions{margin:.5rem 0 0;padding:.75rem 0 0;border-left:none;border-top:1px solid var(--line);flex-direction:column;align-items:stretch;gap:.5rem}
  .nav-btn{text-align:center;padding:.6rem 1rem}
}


/* ━━━━━━━━━━ ラベル（節の頭に置く「短い罫 ＋ 英字 ＋ 日本語」） ━━━━━━━━━━ */
.lab{
  display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;
  font-family:var(--serif-en);font-size:.92rem;font-weight:500;font-variant:small-caps;
  letter-spacing:.18em;color:var(--brand-600);
}
.lab::before{content:'';width:34px;height:1px;background:var(--brand);flex:none}
.lab span{font-family:var(--mincho);font-size:.84rem;font-variant:normal;letter-spacing:.14em;color:var(--ink)}


/* ━━━━━━━━━━ ボタン（ヘッダーの .nav-btn と同じ形：丸ピル・Noto Serif JP） ━━━━━━━━━━
   右に矢印を付け、ホバーで色が変わって矢印が右へ3px動く（見出しリンクの .go と同じ動き）。
   大きさは2段：既定（節の中）／ .lg（ヒーロー・ゴスペルナイト）。
   色は置く面で選ぶ：淡い面は .fill / .line、濃い面は .inv を足す */
.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--serif-jp);font-size:.78rem;font-weight:500;
  padding:.45rem 1.1rem;border-radius:99px;border:1px solid transparent;
  text-decoration:none;transition:background .18s,color .18s,border-color .18s;white-space:nowrap;
}
.pill svg{flex:none;transition:transform .18s}
.pill:hover svg{transform:translateX(3px)}
.pill.lg{font-size:.9rem;letter-spacing:.06em;gap:.6rem;padding:.75rem 1.8rem}
@media (max-width:480px){.pill.lg{padding:.72rem 1.3rem}}
.pill.fill{background:var(--brand);color:var(--warm)}
.pill.fill:hover{background:var(--brand-600)}
.pill.line{border-color:var(--brand);color:var(--brand-600)}
.pill.line:hover{background:var(--brand-050)}
/* 濃い面の上：暗くせず明るく */
.pill.fill.inv{background:var(--warm);color:var(--brand-900)}
.pill.fill.inv:hover{background:var(--brand-200)}
.pill.line.inv{border-color:rgba(252,251,248,.4);color:var(--warm)}
.pill.line.inv:hover{border-color:var(--warm);background:rgba(255,255,255,.08)}


/* ━━━━━━━━━━ 見出しそのものがリンク ━━━━━━━━━━
   <a class="go-link"> の中に <span class="go-t"><b>見出し</b><i class="go">矢印</i></span>。
   ホバーで見出しに下線、右の四角が塗られて少し右へ動く。文字の大きさは各所で決める */
.go-link{text-decoration:none;color:inherit}
.go-link:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.go-t{display:flex;align-items:center;gap:.6rem;transition:color .18s}
.go-t b{font-weight:inherit;border-bottom:1px solid transparent;transition:border-color .18s}
.go{
  flex:none;width:25px;height:25px;border-radius:2px;
  border:1px solid var(--brand);color:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s,color .18s,transform .18s;
}
.go-link:hover .go-t{color:var(--brand-700)}
.go-link:hover .go-t b{border-bottom-color:var(--brand-200)}
.go-link:hover .go{background:var(--brand);color:#fff;transform:translateX(3px)}


/* ━━━━━━━━━━ 斜めの切り替え ━━━━━━━━━━
   節の下辺を、ヒーローと同じ向き・同じ角度で切って、次の面の色へ渡す。
   --to に次の面の色を入れる。下の余白（--slant ＋ 1rem）は各節の padding で取る */
.slant-to{position:relative}
.slant-to::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:var(--slant);
  background:var(--to);clip-path:polygon(0 100%, 100% 0, 100% 100%);
}


/* ━━━━━━━━━━ 動画カード ━━━━━━━━━━
   押すまで YouTube を読み込まない枠（ファサード）。iframe は common.js が作る */
.vbox{position:relative;aspect-ratio:16/9;background:var(--brand-900);overflow:hidden}
.vbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.v-play{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;position:relative}
.v-play img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.v-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:54px;height:54px;border-radius:50%;
  background:rgba(252,251,248,.92);color:var(--brand-900);
  display:flex;align-items:center;justify-content:center;padding-left:4px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s;
}
.v-play:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ホバー：持ち上がる／寄る／縁が光る／再生ボタンが光る */
.v-card{transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.v-card:hover{transform:translateY(-6px)}
.v-card:hover .v-play img{transform:scale(1.06)}
.vbox::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 0 rgba(2,151,165,0);transition:box-shadow .32s;
}
.v-card:hover .vbox::after{box-shadow:inset 0 0 0 2px var(--brand)}
.v-card:hover .v-btn{
  transform:translate(-50%,-50%) scale(1.12);background:#fff;
  box-shadow:0 0 0 10px rgba(2,151,165,.22), 0 10px 30px rgba(6,50,58,.3);
}

/* 角を落とした枠（礼拝・祈り会の動画）。左上と右下を、サイトの斜めと同じ向きで落とす。
   clip-path は内側の影を角で切ってしまうので、同じ形の板を2px後ろに敷いて縁の色を出す */
.v-frame{
  --cut:clamp(20px,2.6vw,34px);background:transparent;padding:2px;transition:background .3s;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.v-frame .vbox{
  --cut:clamp(18px,2.4vw,32px);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.v-card:hover .v-frame{background:var(--brand)}
.v-card:hover .v-frame .vbox::after{box-shadow:none}

.v-kind{display:flex;align-items:baseline;gap:.6rem;
  font-family:var(--mincho);font-weight:600;letter-spacing:.06em}
.v-kind em{font-style:normal;font-family:var(--serif-en);font-variant:small-caps;letter-spacing:.12em}
.v-title{font-family:var(--sans-jp);font-weight:400;line-height:1.7}
.v-more{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mincho);font-size:.78rem;letter-spacing:.06em;
  text-decoration:none;border-bottom:1px solid var(--brand-200);padding-bottom:.12rem;transition:.18s;
}
.v-more svg{transition:transform .18s}
.v-more:hover svg{transform:translateX(3px)}

/* 日曜礼拝はライブ配信もある。配信中に出すバッジ
   （使うときは .vbox の中に <span class="v-live">Live</span> を足す） */
.v-live{
  position:absolute;left:10px;top:10px;z-index:4;
  background:#C7452F;color:#fff;font-family:var(--serif-en);font-size:.72rem;
  font-variant:small-caps;letter-spacing:.14em;padding:.16rem .6rem;border-radius:2px;
}


/* ━━━━━━━━━━ イベントカード ━━━━━━━━━━
   イベント記事を1件作るたびに1件ぶん並ぶ。詳細ページは作らないので、カード自体はリンクにしない。
   関連ページがあるときだけ、最後に「詳しくはこちら」（.ev-more）を置く。1件でも複数件でも同じ見た目 */
.ev-list{display:flex;flex-direction:column;gap:clamp(1.2rem,2.4vw,2rem)}
.ev-card{
  display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);
  gap:clamp(1.2rem,2.8vw,2.6rem);align-items:center;
}
/* 2件目以降が来たときの区切り。1件のときは効かない */
.ev-card + .ev-card{border-top:1px solid rgba(2,151,165,.2);padding-top:clamp(1.2rem,2.4vw,2rem)}
/* サムネイルは形が揃っていない（16:9のバナーも縦長のポスターも来る）ので、
   枠を 16:9 に固定して cover で流し込む。右端はヒーローと同じ向き・角度で落とす */
.ev-thumb{display:block;overflow:hidden;background:var(--brand-900);
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant) * .45) 100%, 0 100%)}
.ev-thumb img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ev-card:hover .ev-thumb img{transform:scale(1.02)}
.ev-body{display:flex;flex-direction:column;gap:.45rem}
/* 見出しは空白・句読点の位置で折り返す（長すぎるかたまりだけ途中で折る）。WPで入力される見出しにも効くように */
.ev-jp{word-break:keep-all;overflow-wrap:anywhere;font-family:var(--mincho);font-size:clamp(1.15rem,1.9vw,1.45rem);font-weight:600;
  letter-spacing:.06em;line-height:1.4;color:var(--brand-900)}
.ev-en{font-family:var(--serif-en);font-size:.95rem;font-variant:small-caps;letter-spacing:.1em;line-height:1.45;color:var(--brand-600)}
.ev-meta{display:flex;flex-wrap:wrap;gap:.15rem 1.2rem;font-size:.78rem;line-height:1.7;color:var(--ink-mid);
  border-top:1px solid rgba(2,151,165,.2);padding-top:.5rem;margin-top:.15rem}
.ev-meta span{white-space:nowrap}
.ev-meta i{font-style:normal;font-family:var(--serif-en);font-variant:small-caps;letter-spacing:.06em;color:var(--brand-600);opacity:.75}
.ev-desc{font-size:.82rem;font-weight:300;line-height:1.85;color:var(--ink-mid);max-width:44em}
.ev-desc em{display:block;font-style:normal;font-family:var(--serif-en);font-size:.92rem;letter-spacing:.02em;color:var(--muted)}
/* 「詳しくはこちら」はサイト共通のボタン（.pill.line）。左寄せで置くだけ */
.ev-more{align-self:flex-start;margin-top:.5rem}
@media (max-width:760px){
  .ev-card{grid-template-columns:1fr;gap:.9rem}
  .ev-thumb{clip-path:none}
}


/* ━━━━━━━━━━ SNS帯（白） ━━━━━━━━━━
   地は白のまま、ラベルとチップを大きく・ブランド色にして目に留まるようにする。
   チップはボタンと同じ丸ピル・Noto Serif JP。podcast だけバナー画像そのものをチップにする（高さを揃える） */
.sns{--chip-h:48px;background:#fff;padding:clamp(1.8rem,3vw,2.4rem) clamp(1.5rem,5vw,3rem)}
.sns-row{max-width:1060px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap}
.sns-label{display:flex;align-items:center;gap:.7rem;margin-right:1rem;
  font-family:var(--serif-en);font-size:1.2rem;font-weight:500;font-variant:small-caps;letter-spacing:.14em;color:var(--brand-600)}
.sns-label::before{content:'';width:34px;height:1px;background:var(--brand);flex:none}
.sns-label span{font-family:var(--mincho);font-size:.84rem;font-variant:normal;letter-spacing:.14em;color:var(--ink)}
.sns-chip{display:flex;align-items:center;gap:.55rem;height:var(--chip-h);padding:0 1.35rem;
  text-decoration:none;color:var(--ink-mid);font-family:var(--serif-jp);font-size:.86rem;font-weight:500;
  border-radius:99px;border:1px solid var(--brand-200);background:#fff;transition:.18s}
.sns-chip svg{width:19px;height:19px;color:var(--brand);transition:color .18s}
.sns-chip:hover{background:var(--brand);border-color:var(--brand);color:var(--warm)}
.sns-chip:hover svg{color:var(--warm)}
.sns-chip.is-pod{position:relative;padding:0;overflow:hidden;line-height:0;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.sns-chip.is-pod img{display:block;height:calc(var(--chip-h) - 2px);width:auto;
  max-width:none;transition:transform .4s ease}  /* img{max-width:100%} に勝たせる */
/* 乗せたら：少し浮いてブランド色の光の輪と影、中の画像がわずかに寄り、白い光の筋が一度だけ横切る（色違いの画像は使わない） */
.sns-chip.is-pod::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);transform:translateX(-130%)}
.sns-chip.is-pod:hover,.sns-chip.is-pod:focus-visible{background:#fff;border-color:var(--brand);transform:translateY(-3px);
  box-shadow:0 0 0 3px rgba(2,151,165,.28),0 10px 22px -8px rgba(2,151,165,.6)}
.sns-chip.is-pod:hover img,.sns-chip.is-pod:focus-visible img{transform:scale(1.05)}
.sns-chip.is-pod:hover::after,.sns-chip.is-pod:focus-visible::after{transform:translateX(130%);transition:transform .75s ease}
@media (prefers-reduced-motion:reduce){
  .sns-chip.is-pod:hover,.sns-chip.is-pod:focus-visible{transform:none}
  .sns-chip.is-pod:hover img,.sns-chip.is-pod:focus-visible img{transform:none}
  .sns-chip.is-pod::after{display:none}
}
@media (max-width:760px){
  .sns{--chip-h:42px}
  .sns-label{width:100%;justify-content:center;margin:0 0 .3rem}
  .sns-chip{padding:0 1rem;font-size:.8rem}
}


/* ━━━━━━━━━━ テーマ聖句の帯（今年のテーマ＋聖句。細い帯） ━━━━━━━━━━ */
.verse{background:var(--brand-050);padding:clamp(1.8rem,3.4vw,2.6rem) clamp(1.5rem,5vw,3rem)}
.verse .r{text-align:center}
/* ラベル：両側に短い罫。テーマ名：明朝で大きく、字間を広げて独立した見出しに */
.verse-lab{display:inline-flex;align-items:center;gap:.8rem;
  font-family:var(--mincho);font-size:.8rem;letter-spacing:.14em;color:var(--brand-700)}
.verse-lab::before,.verse-lab::after{content:'';width:28px;height:1px;background:var(--brand)}
.verse-theme{margin:.35rem 0 .8rem;word-break:auto-phrase;font-family:var(--mincho);font-weight:600;
  font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:.18em;line-height:1.5;color:var(--brand-900)}
/* auto-phrase：対応ブラウザ（Chrome系）では文節の区切りで折り返す。非対応でも普通に折り返すだけ */
.verse-t{max-width:980px;margin:0 auto;text-align:center;word-break:auto-phrase;
  font-family:var(--mincho);font-size:clamp(.9rem,1.4vw,1.1rem);font-weight:500;
  letter-spacing:.06em;line-height:1.9;color:var(--brand-900)}
.verse-t cite{font-style:normal;font-family:var(--mincho);font-size:.78rem;font-weight:400;
  letter-spacing:.08em;color:var(--brand-700);white-space:nowrap;
  margin-left:1rem;padding-left:1rem;border-left:1px solid var(--brand-200)}
@media (max-width:760px){
  .verse-t cite{display:block;margin:.5rem 0 0;padding:0;border-left:0}
  /* 長い聖句は読みやすいよう左揃えに（ラベルとテーマ名は中央のまま） */
  .verse-t{text-align:left}
}


/* ━━━━━━━━━━ フッター ━━━━━━━━━━
   地はヒーローの濃色面と同じ。上辺にヒーローの斜めの縁と同じ光の線を引く */
footer{position:relative;background:var(--deep);color:rgba(252,251,248,.5)}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(to right, var(--brand) 0%, rgba(2,151,165,0) 85%)}
.ft{max-width:1060px;margin:0 auto;padding:3.5rem clamp(1.5rem,5vw,3rem);display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2rem}
/* ロゴは中身の詰まった黒い円。白抜きにすると十字が消えるのでフィルタは掛けない */
.ft-brand img{height:44px;margin-bottom:1.25rem}
.ft-brand p{font-size:.75rem;font-weight:300;line-height:1.9}
footer h5{font-family:var(--serif-en);font-size:1rem;font-weight:500;font-variant:small-caps;letter-spacing:.06em;color:rgba(252,251,248,.4);margin-bottom:1rem}
footer ul{list-style:none}
footer li{margin-bottom:.4rem}
footer a{color:rgba(252,251,248,.5);text-decoration:none;font-size:.79rem;font-weight:300;transition:color .15s}
footer a:hover{color:var(--warm)}
/* SNS：本文の SNS帯より控えめな文字チップ。podcast も画像を使わずアイコン＋文字で揃える */
.ft-social{display:grid;grid-template-columns:repeat(2,max-content);gap:.4rem;margin-top:1.25rem}  /* 4つを2×2に。1つだけ折り返すのを防ぐ */
.ft-social a{display:flex;align-items:center;justify-content:center;gap:.35rem;font-family:var(--sans-jp);font-size:.68rem;font-weight:400;
  padding:.3rem .85rem;border-radius:99px;border:1px solid rgba(155,220,226,.3);background:rgba(155,220,226,.1);
  color:rgba(252,251,248,.78);transition:.15s}
.ft-social a svg{color:var(--brand-200)}
.ft-social a:hover{border-color:var(--brand-200);background:rgba(155,220,226,.2);color:var(--warm)}
.ft-bottom{max-width:1060px;margin:0 auto;padding:1.25rem clamp(1.5rem,5vw,3rem);border-top:1px solid rgba(252,251,248,.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.7rem;color:rgba(252,251,248,.3)}
.ft-bottom a{color:rgba(252,251,248,.4);text-decoration:none}
.ft-bottom a:hover{color:var(--warm)}
/* 縦積みだとリンクが一列に伸びて長くなるので、2列に畳んで行間も詰める */
@media (max-width:680px){
  .ft{grid-template-columns:1fr 1fr;gap:1.4rem 1.2rem;padding-top:2.6rem;padding-bottom:2.2rem}
  .ft-brand{grid-column:1 / -1}
  .ft-brand img{height:38px;margin-bottom:.9rem}
  footer h5{margin-bottom:.6rem}
  /* li の行の高さは継承した16pxの行送りで決まっているので、li 側で詰める */
  footer li{margin-bottom:.1rem;font-size:.8rem;line-height:1.7}
  footer a{line-height:inherit}
}


/* ━━━━━━━━━━ 下層ページの見出し ━━━━━━━━━━
   トップのヒーロー（濃色面＋写真）と取り違えないよう、淡い面に文字だけ。
   下辺だけサイト共通の斜めで、次の節の地の色（--to）へ渡す */
.ph{--to:var(--warm);margin-top:var(--hh);background:var(--brand-050);
  padding:clamp(2rem,4vw,3rem) clamp(1.5rem,5vw,3rem) calc(var(--slant) + clamp(1.2rem,2.6vw,2rem))}
.ph-crumb{font-size:.72rem;letter-spacing:.06em;color:var(--muted);margin-bottom:clamp(.9rem,1.8vw,1.3rem)}
.ph-crumb a{color:inherit;text-decoration:none;border-bottom:1px solid var(--brand-100)}
.ph-crumb a:hover{color:var(--brand-700);border-bottom-color:var(--brand-200)}
.ph-crumb i{font-style:normal;margin:0 .5em;opacity:.6}
.ph-title{font-family:var(--mincho);font-weight:600;font-size:clamp(1.8rem,3.2vw,2.5rem);
  line-height:1.35;letter-spacing:.12em;color:var(--brand-900)}
.ph-en{font-family:var(--serif-en);font-size:1rem;font-variant:small-caps;letter-spacing:.18em;color:var(--brand-600);margin-top:.2rem}
/* 見出しの右が空いて寂しいので、右端に鳩を1羽（トップのヒーローと同じ鳩・同じ動き）。
   淡い面の上なので色は --brand-200。文字の邪魔をしないよう、狭い画面では小さくする */
.ph .inner{position:relative}
.ph .inner::after{content:'';position:absolute;right:clamp(0rem,4vw,4rem);top:50%;margin-top:calc(clamp(64px,11vw,150px) * -.53);
  width:clamp(64px,11vw,150px);aspect-ratio:563/530;pointer-events:none;
  -webkit-mask:url(/wp-content/themes/vjgc/img/dove.png) no-repeat center/contain;
          mask:url(/wp-content/themes/vjgc/img/dove.png) no-repeat center/contain;
  background:var(--brand-200);animation:doveFloat 12s ease-in-out infinite}
@keyframes doveFloat{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-16px,-24px) rotate(-3deg)}}

/* 下層ページの節の見出し。トップの小さなラベル（.lab）では小さすぎるので、
   「短い太めの罫 ／ 明朝の見出し ／ 英字」を縦に積んだ大きい形にする */
.sec-h{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
  margin-bottom:clamp(1.1rem,2vw,1.6rem);
  font-family:var(--mincho);font-weight:600;font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.4;letter-spacing:.12em;color:var(--brand-900)}
.sec-h::before{content:'';width:34px;height:2px;background:var(--brand);margin-bottom:.75rem}
.sec-h span{font-family:var(--serif-en);font-weight:500;font-size:.95rem;font-variant:small-caps;
  letter-spacing:.18em;line-height:1.3;color:var(--brand-600)}


/* ━━━━━━━━━━ 教会の連絡先（礼拝案内のアクセス・お問い合わせで共通） ━━━━━━━━━━
   ロゴと教会名、その下に住所・電話・メールをアイコン＋同じ大きさの文字で。表にはしない */
.ct-id{display:flex;align-items:center;gap:1rem;padding-bottom:1.2rem;margin-bottom:1.3rem;
  border-bottom:1px solid rgba(2,151,165,.22)}
.ct-id img{flex:none;width:56px;height:auto}
.ct-name{font-family:var(--mincho);font-weight:600;font-size:clamp(1.1rem,1.7vw,1.3rem);
  letter-spacing:.08em;line-height:1.5;color:var(--brand-900)}
.ct-en{font-family:var(--serif-en);font-size:.95rem;font-variant:small-caps;letter-spacing:.1em;line-height:1.4;color:var(--brand-600)}
.ct-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}
.ct-list li{display:flex;align-items:flex-start;gap:.75rem;
  font-family:var(--serif-jp);font-size:.95rem;font-weight:500;line-height:1.7;letter-spacing:.02em;color:var(--ink)}
.ct-list i{flex:none;display:flex;margin-top:.2rem;color:var(--brand)}
.ct-list a{color:inherit;text-decoration:none;word-break:break-all;border-bottom:1px solid transparent;transition:.15s}
.ct-list a:hover{color:var(--brand-700);border-bottom-color:var(--brand-200)}
/* 行き方だけは文章なので、細い罫で区切って本文の書体に */
.ct-list .ct-way{margin-top:.3rem;padding-top:1rem;border-top:1px solid rgba(2,151,165,.18);
  font-family:var(--sans-jp);font-size:.88rem;font-weight:300;line-height:1.9;color:var(--ink-mid)}
/* 教会名が途中で折れないよう、狭い画面ではロゴを上に積む */
@media (max-width:480px){
  .ct-id{flex-direction:column;align-items:flex-start;gap:.7rem}
  .ct-name{font-size:1.1rem;letter-spacing:.05em}
}


/* ━━━━━━━━━━ モック用の仮置き（本番では消す） ━━━━━━━━━━ */
/* モック用のメモ（原稿待ち・要確認）。本番では消す */
.memo{margin-top:1.2rem;padding:.8rem 1rem;border:1px dashed var(--brand);border-radius:3px;
  background:rgba(2,151,165,.05);font-size:.8rem;line-height:1.85;color:var(--brand-700)}
.memo b{font-weight:500;margin-right:.4em}
/* 写真のダミー枠（写真が届いたら <img> に差し替える） */
.dummy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  background:repeating-linear-gradient(135deg,var(--brand-050) 0 14px,#E2F1F3 14px 28px);
  color:var(--brand-600);font-size:.74rem;letter-spacing:.1em}


/* ━━━━━━━━━━ スクロールで持ち上がる（.r → .in は common.js） ━━━━━━━━━━ */
.r{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.r.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .r{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════
   VJGC — 教会について（about.html）だけ
   はじめの3つ / 紹介ビデオ / 教会の紹介（本文）
   ページ見出し（.ph）と節の見出し（.sec-h）は common.css。
   文章は現行サイトのものをそのまま使う。図解やキャッチコピーは足さず、読むページにする
   ══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━ はじめの3つ（教会・聖書・初めての方へ） ━━━━━━━━━━ */
.ab-intro{background:var(--warm);padding-top:clamp(2.2rem,4.4vw,3.4rem)}
.ab-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,4vw,3.4rem)}
.ab-trio .sec-h{font-size:clamp(1.35rem,2.2vw,1.7rem)}
.ab-trio p{font-size:.88rem;line-height:2.05;color:var(--ink-mid)}
/* みことばの引用だけ明朝で浮かせる（文言は変えない） */
.ab-trio q{quotes:none;font-family:var(--mincho);font-weight:600;color:var(--brand-700)}
@media (max-width:900px){
  .ab-trio{grid-template-columns:1fr}
}


/* ━━━━━━━━━━ 紹介ビデオ（トップの動画節と同じ作り） ━━━━━━━━━━ */
.ab-movie{
  background:radial-gradient(80% 90% at 14% 10%, rgba(2,151,165,.22) 0%, transparent 62%),
             linear-gradient(to bottom,#08414A 0%,var(--brand-900) 100%);
  padding:clamp(2.4rem,4.6vw,3.6rem) clamp(1.5rem,5vw,3rem);
}
.ab-mv{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  gap:clamp(1.4rem,3vw,2.8rem);align-items:center}
.ab-mv .sec-h{color:var(--warm)}
.ab-mv .sec-h span{color:var(--brand-200)}
.ab-mv .v-title{font-family:var(--mincho);font-size:.98rem;font-weight:600;letter-spacing:.06em;
  line-height:1.8;color:var(--warm);margin-bottom:1.2rem}
.ab-mv .v-more{color:var(--brand-200);border-bottom-color:rgba(155,220,226,.5)}
.ab-mv .v-more:hover{color:var(--warm);border-bottom-color:var(--warm)}
@media (max-width:900px){
  .ab-mv{grid-template-columns:1fr}
  .ab-mv-text{order:-1}
}


/* ━━━━━━━━━━ 教会の紹介（本文） ━━━━━━━━━━
   読みやすい幅の1段組。段落のまとまりの間に写真をはさむ。
   写真は動画と見分けがつくよう、トップのイベントのサムネイル（.ev-thumb）と同じく右端を斜めに落とす */
.ab-body{background:var(--warm)}
.ab-article{max-width:720px;margin:0 auto}
.ab-article p{font-size:.92rem;line-height:2.2;color:var(--ink-mid)}
.ab-article p + p{margin-top:1.3em}
.ab-fig,.ab-vid{max-width:960px;margin:clamp(2.2rem,4.4vw,3.4rem) auto}
.ab-fig img,.ab-fig .dummy{width:100%;aspect-ratio:16/7;object-fit:cover}
.ab-fig img{display:block}
.ab-fig img,.ab-fig .dummy{
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant) * .45) 100%, 0 100%)}
@media (max-width:600px){
  .ab-fig img,.ab-fig .dummy{aspect-ratio:3/2}
}

/* ══════════════════════════════════════════════════════════════
   VJGC — 週報（bulletin.html）だけ
   今週の週報 / 過去の週報
   ページ見出し（.ph）と節の見出し（.sec-h）は common.css。
   週報は PDF。紙の週報に見立てた「用紙」（.sheet）で表し、押すと PDF が開く
   ══════════════════════════════════════════════════════════════ */

/* ── 用紙：A4 縦の比率。上に細いブランドの帯、中に「週報」と日付 ── */
.sheet{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  aspect-ratio:1/1.414;background:#fff;border:1px solid rgba(2,151,165,.22);text-decoration:none;
  transition:border-color .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.sheet::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:var(--brand)}
.sheet img{width:26%;height:auto;opacity:.9}
.sheet-t{font-family:var(--mincho);font-weight:600;letter-spacing:.3em;color:var(--brand-900)}
.sheet-d{font-family:var(--mincho);letter-spacing:.06em;color:var(--brand-700)}
.sheet-pdf{position:absolute;right:.7rem;bottom:.6rem;font-family:var(--serif-en);font-size:.78rem;
  letter-spacing:.12em;color:var(--brand-600)}
a.sheet:hover{border-color:var(--brand);transform:translateY(-4px)}


/* ━━━━━━━━━━ 今週の週報：左に用紙、右に日付とボタン ━━━━━━━━━━ */
.bl-now{background:var(--warm);padding-top:clamp(2.4rem,4.6vw,3.6rem)}
.bl-nw{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(1.8rem,5vw,4.5rem);align-items:center}
.bl-nw .sheet-t{font-size:1.5rem}
.bl-nw .sheet-d{font-size:.95rem}
.bl-date{font-family:var(--mincho);font-weight:600;font-size:clamp(1.6rem,3vw,2.3rem);
  letter-spacing:.06em;line-height:1.4;color:var(--brand-900)}
.bl-date small{font-size:.55em;letter-spacing:.1em;margin-left:.2em;color:var(--brand-700)}
.bl-p{margin-top:.8rem;font-size:.9rem;line-height:2.05;color:var(--ink-mid)}
.bl-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
@media (max-width:760px){
  .bl-nw{grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:1.2rem;align-items:start}
  /* 日付が途中で折れないよう、年を1行目に分ける */
  .bl-y{display:block;font-size:.6em;letter-spacing:.08em;color:var(--brand-700)}
  .bl-date{font-size:1.5rem}
  .bl-nw .sheet-t{font-size:1.05rem}
  .bl-nw .sheet-d{font-size:.78rem}
  .bl-btns{flex-direction:column;align-items:flex-start}
}


/* ━━━━━━━━━━ 過去の週報：小さな用紙＋日付を4つ横に並べる ━━━━━━━━━━ */
.bl-past{background:var(--sand)}
.bl-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem)}
.bl-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--warm);
  border:1px solid rgba(2,151,165,.16);text-decoration:none;transition:border-color .2s}
.sheet-sm{flex:none;width:56px;gap:0}
.sheet-sm::before{height:4px}
.sheet-sm .sheet-t{font-size:.72rem;letter-spacing:.1em}
.bl-it{display:flex;flex-direction:column;gap:.2rem}
.bl-it-d{font-family:var(--mincho);font-weight:600;font-size:1.05rem;letter-spacing:.04em;color:var(--brand-900)}
.bl-it-d small{font-size:.75em;font-weight:500;color:var(--brand-700)}
.bl-it-f{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--brand-600)}
.bl-item:hover{border-color:var(--brand)}
.bl-item:hover .bl-it-f{text-decoration:underline;text-decoration-color:var(--brand-200)}
@media (max-width:900px){
  .bl-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .bl-list{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   VJGC — お問い合わせ（contact.html）だけ
   左に教会の連絡先（.ct-id / .ct-list は common.css）、右にフォーム
   フォームはモック（送信しない）。WPではフォームのプラグインに置き換える
   ══════════════════════════════════════════════════════════════ */

.co-body{background:var(--warm);padding-top:clamp(2.4rem,4.6vw,3.6rem)}
.co{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(1.8rem,5vw,4rem);align-items:start}
/* ── フォーム：白いカード1枚 ── */
.fm{background:#fff;border:1px solid rgba(2,151,165,.2);padding:clamp(1.6rem,3.4vw,2.6rem)}
.fm-row{display:flex;flex-direction:column;gap:.45rem}
.fm-row + .fm-row{margin-top:1.3rem}
.fm label{display:flex;align-items:center;gap:.6rem;font-family:var(--mincho);font-weight:600;font-size:.92rem;
  letter-spacing:.06em;color:var(--brand-900)}
.fm label em{font-style:normal;font-family:var(--sans-jp);font-weight:400;font-size:.68rem;letter-spacing:.04em;
  color:var(--warm);background:var(--brand);padding:.05rem .45rem;border-radius:2px}
.fm input,.fm textarea{width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;
  border:1px solid rgba(2,151,165,.3);border-radius:2px;padding:.7rem .85rem;transition:border-color .15s,box-shadow .15s}
.fm textarea{min-height:11rem;resize:vertical;line-height:1.8}
.fm input:focus,.fm textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(2,151,165,.15)}
.fm-act{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
.fm-act .pill{border:0;cursor:pointer}
.fm-note{font-size:.76rem;color:var(--muted)}

@media (max-width:900px){
  .co{grid-template-columns:1fr}
}
@media (max-width:480px){
  .fm{padding:1.4rem 1.2rem}
}

/* ══════════════════════════════════════════════════════════════
   VJGC — 信仰告白（what-we-believe.html）だけ
   はじめに（前文）/ 8つの条文
   ページ見出し（.ph）は common.css。文章は現行サイトのまま
   ══════════════════════════════════════════════════════════════ */

.fa-body{background:var(--warm);padding-top:clamp(2.4rem,4.6vw,3.6rem)}
.fa-col{max-width:760px;margin:0 auto}

/* はじめに：所属の説明と、信仰告白の前文 */
.fa-lead{font-size:.92rem;line-height:2.2;color:var(--ink-mid)}
.fa-pre{margin:clamp(1.4rem,2.6vw,2rem) 0 clamp(2.6rem,5vw,3.8rem);
  padding:clamp(1.2rem,2.4vw,1.8rem) clamp(1.3rem,3vw,2.2rem);
  background:var(--brand-050);border-left:2px solid var(--brand);
  font-family:var(--mincho);font-size:clamp(.95rem,1.4vw,1.05rem);font-weight:500;
  line-height:2.2;letter-spacing:.04em;color:var(--brand-900)}

/* 条文：左に番号、右に本文。条と条の間は細い罫だけ */
.fa-list{list-style:none;border-top:1px solid rgba(2,151,165,.25)}
.fa-list li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:.6rem;
  padding:clamp(1.2rem,2.4vw,1.7rem) 0;border-bottom:1px solid rgba(2,151,165,.25)}
.fa-no{font-family:var(--mincho);font-weight:600;font-size:clamp(1.5rem,2.4vw,1.9rem);
  line-height:1.3;color:var(--brand-700)}
.fa-list p{font-size:.95rem;line-height:2.15;color:var(--ink)}
@media (max-width:600px){
  .fa-list li{grid-template-columns:2.2rem minmax(0,1fr)}
  .fa-list p{font-size:.9rem}
}

/* ══════════════════════════════════════════════════════════════
   VJGC — 交わり（こひつじくらぶ：kohitsuji.html）
   ページ見出し（.ph）・節の見出し（.sec-h）・仮置き（.memo / .dummy）は common.css
   ══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━ こひつじくらぶ ━━━━━━━━━━
   外部の方向けに毎月開く会。チラシの内容をページにする。
   写真は3枚（チラシ＋活動の写真2枚）。今はどれもチラシからの仮置きで、あとで差し替える */

/* 左にチラシ、右にチラシの文言。このページは更新しない（次回の開催日は載せない） */
.kh-intro{background:var(--warm);padding-top:clamp(2.4rem,4.6vw,3.6rem)}
.kh-in{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:clamp(1.8rem,5vw,4.5rem);align-items:center}
/* チラシは文字とQRが入っているので、斜めには切らない */
.kh-flyer img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:1px solid rgba(2,151,165,.18)}
/* ページ見出しの上に添える一言（チラシと同じ「お母さんと子どもたちの」） */
.ph-pre{font-family:var(--mincho);font-size:clamp(.9rem,1.4vw,1.05rem);letter-spacing:.14em;color:var(--brand-700);margin-bottom:.2rem}
/* 1行目（毎月第3火曜日…）だけ明朝で大きく。あとはチラシの文言をそのまま */
.kh-lead{font-family:var(--mincho);font-weight:600;font-size:clamp(1.15rem,2vw,1.45rem);
  letter-spacing:.06em;line-height:1.7;color:var(--brand-900);margin-bottom:.9rem}
.kh-intro .kh-list{margin-top:1.4rem;margin-bottom:0}

/* 続き：左に活動の写真2枚、右に文言の続き */
.kh-what{background:var(--sand)}
.kh-wt{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:clamp(1.8rem,5vw,4.5rem);align-items:center}
.kh-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.kh-photos img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant) * .35) 100%, 0 100%)}
/* 2枚目は少し下げて、並べただけに見えないようにする */
.kh-photos img:nth-child(2){margin-top:clamp(1.6rem,4vw,3rem)}
.kh-list{list-style:none;border-top:1px solid rgba(2,151,165,.25)}
.kh-list li{display:flex;align-items:center;gap:.8rem;padding:.75rem 0;border-bottom:1px solid rgba(2,151,165,.25);
  font-family:var(--serif-jp);font-weight:500;font-size:1rem;color:var(--ink)}
.kh-list i{flex:none;display:flex;color:var(--brand)}
.kh-end{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;margin-top:1.3rem}
.kh-fee{display:inline-block;padding:.35rem .9rem;background:var(--brand-050);
  font-family:var(--mincho);font-weight:600;font-size:.95rem;letter-spacing:.08em;color:var(--brand-900)}
.kh-welcome{margin-top:1.6rem;font-family:var(--mincho);font-weight:600;font-size:clamp(1.05rem,1.7vw,1.25rem);
  letter-spacing:.06em;line-height:1.8;color:var(--brand-900)}

@media (max-width:900px){
  .kh-in,.kh-wt{grid-template-columns:1fr}
  .kh-flyer{max-width:460px}
}

/* ══════════════════════════════════════════════════════════════
   VJGC — 献金（give.html）だけ
   先方の画像（資料/img/3waystogive.jpg）の「3 ways to GIVE」を1つの節にする。
   1・2 を横に並べ、3（クレジットカード）はフォームを抱えて横幅いっぱいに。
   住所・メールは画像にせず文字で出す（コピーできるように）
   ══════════════════════════════════════════════════════════════ */

.gv{background:var(--warm);padding-top:clamp(2.4rem,4.6vw,3.6rem)}

/* ━━━━━━━━━━ 見出し：画像と同じ「〜への／3つの方法／3 Ways to Give」 ━━━━━━━━━━ */
.gv-h{text-align:center;margin-bottom:clamp(2rem,4vw,3rem)}
.gv-to{font-family:var(--mincho);font-weight:500;font-size:clamp(.92rem,1.4vw,1.05rem);
  letter-spacing:.12em;color:var(--brand-900)}
.gv-title{margin:.3rem 0 .2rem;font-family:var(--mincho);font-weight:600;
  font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.3;letter-spacing:.12em;color:var(--brand-900)}
/* 「3」を大きく、ブランド色で（番号 1・2・3 と同じ書体） */
.gv-title b{font-family:var(--serif-en);font-weight:600;font-size:1.6em;line-height:1;
  letter-spacing:0;margin:0 .06em;color:var(--brand);vertical-align:-.06em;
  font-variant-numeric:lining-nums}  /* Cormorant の既定は下がる数字（1がIに見える）なので揃った数字に */
/* お礼の一文は見出しの下に（英語は英語ページで出すので付けない） */
.gv-thanks{margin-top:1.1rem;word-break:auto-phrase;font-family:var(--mincho);font-weight:500;
  font-size:clamp(.98rem,1.5vw,1.1rem);line-height:1.9;letter-spacing:.08em;color:var(--brand-900)}
.gv-en{font-family:var(--serif-en);font-size:1.05rem;font-variant:small-caps;letter-spacing:.18em;color:var(--brand-600);font-variant-numeric:lining-nums}

/* ━━━━━━━━━━ 3つの枠 ━━━━━━━━━━ */
.gv-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.4rem)}
.gv-item{background:#fff;border:1px solid rgba(2,151,165,.16);border-top:3px solid var(--brand);
  padding:clamp(1.4rem,2.8vw,2.2rem)}
/* 番号・見出し・アイコンを1行に */
.gv-top{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.2rem);
  padding-bottom:1rem;margin-bottom:1.1rem;border-bottom:1px solid rgba(2,151,165,.18)}
.gv-num{flex:none;font-family:var(--serif-en);font-weight:600;font-size:clamp(3rem,5vw,4rem);
  line-height:.9;color:var(--brand);font-variant-numeric:lining-nums}
.gv-t{flex:1;min-width:0;font-family:var(--mincho);font-weight:600;font-size:clamp(1.15rem,1.9vw,1.4rem);
  line-height:1.4;letter-spacing:.08em;color:var(--brand-900)}
.gv-t span{display:block;font-family:var(--serif-en);font-weight:500;font-size:.95rem;
  font-variant:small-caps;letter-spacing:.1em;color:var(--brand-600)}
.gv-top i{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:50%;background:var(--brand-050);color:var(--brand)}
/* 送り先：コピーして使うものなので、はっきり大きく */
.gv-val{font-family:var(--serif-jp);font-size:1.05rem;font-weight:500;line-height:1.75;letter-spacing:.02em;
  color:var(--ink);word-break:break-all}
/* コピーのボタン（押すと「コピーしました」） */
.gv-copy{display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;cursor:pointer;
  font-family:var(--serif-jp);font-size:.76rem;font-weight:500;color:var(--brand-600);
  background:#fff;border:1px solid var(--brand-200);border-radius:99px;padding:.3rem .9rem;transition:.15s}
.gv-copy:hover{background:var(--brand-050);border-color:var(--brand)}
.gv-copy.done{background:var(--brand);border-color:var(--brand);color:var(--warm)}


/* ━━━━━━━━━━ 3：クレジットカード。左に番号と見出し、右にフォーム ━━━━━━━━━━
   フォームはモック。WPでは GiveWP のフォームに置き換える */
.gv-online{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
/* 3の案内。フォームが右にあるか下にあるかで「右／下」を出し分ける */
.gv-how{font-size:.92rem;line-height:2;color:var(--ink-mid)}
.gv-how .is-narrow{display:none}

/* フォームは枠の中なので、左に細い罫を引いて分けるだけ */
.gf{padding-left:clamp(1.8rem,4vw,3.4rem);border-left:1px solid rgba(2,151,165,.18)}
.gf fieldset{border:0}
.gf fieldset + fieldset{margin-top:1.6rem}
.gf legend{margin-bottom:.7rem;font-family:var(--mincho);font-weight:600;font-size:.92rem;
  letter-spacing:.06em;color:var(--brand-900)}
/* 献金の種類：2列のラジオ */
.gf-type{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.gf-type label{display:flex;align-items:center;gap:.6rem;cursor:pointer;
  font-size:.86rem;font-weight:400;line-height:1.5;color:var(--ink);
  border:1px solid rgba(2,151,165,.25);border-radius:3px;padding:.6rem .8rem;transition:.15s}
.gf-type label:hover{border-color:var(--brand)}
.gf-type label:has(input:checked){border-color:var(--brand);background:var(--brand-050)}
.gf-type input{flex:none;accent-color:var(--brand)}
/* 金額：丸ピルを並べる */
.gf-amt{display:flex;flex-wrap:wrap;gap:.5rem}
.gf-amt button{cursor:pointer;font-family:var(--serif-jp);font-size:.95rem;font-weight:500;
  color:var(--brand-700);background:#fff;border:1px solid var(--brand-200);border-radius:99px;
  padding:.5rem 1.2rem;transition:.15s}
.gf-amt button:hover{border-color:var(--brand);background:var(--brand-050)}
.gf-amt button.on{background:var(--brand);border-color:var(--brand);color:var(--warm)}
.gf-custom{display:none;align-items:center;gap:.5rem;margin-top:.8rem}
.gf-custom.on{display:flex}
.gf-custom b{font-family:var(--serif-jp);font-weight:500;color:var(--brand-700)}
.gf-custom input{width:10rem;font:inherit;font-size:.95rem;color:var(--ink);
  border:1px solid rgba(2,151,165,.3);border-radius:2px;padding:.55rem .8rem}
.gf-custom input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(2,151,165,.15)}
.gf-act{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
.gf-act .pill{border:0;cursor:pointer}
.gf-note{font-size:.76rem;color:var(--muted)}

@media (max-width:900px){
  .gv-online{grid-template-columns:1fr;gap:0}
  .gv-how{margin-bottom:1.4rem}
  .gv-how .is-wide{display:none}
  .gv-how .is-narrow{display:inline}
  .gf{padding:1.4rem 0 0;border-left:0;border-top:1px solid rgba(2,151,165,.18)}
}
@media (max-width:760px){
  .gv-list{grid-template-columns:1fr}
}
@media (max-width:480px){
  .gf-type{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   VJGC — 教会スタッフ（staff.html）だけ
   牧師（2人・写真と文を左右交互）/ スタッフ（3人・3列）
   ページ見出し（.ph）と節の見出し（.sec-h）は common.css。文章は現行サイトのまま
   写真の形はサイトの斜めと同じ向き：写真が左なら右端を、右なら左端を落とす
   ══════════════════════════════════════════════════════════════ */

/* 肩書・名前（牧師もスタッフも同じ作り。大きさだけ変える） */
.sf-role{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .7rem;
  font-family:var(--mincho);font-size:.92rem;letter-spacing:.1em;color:var(--brand-700)}
.sf-role em{font-style:normal;font-family:var(--serif-en);font-size:.9rem;font-variant:small-caps;
  letter-spacing:.12em;color:var(--brand-600)}
.sf-name{font-family:var(--mincho);font-weight:600;line-height:1.35;letter-spacing:.14em;color:var(--brand-900)}
.sf-name span{display:block;font-family:var(--serif-en);font-weight:500;font-size:.95rem;
  letter-spacing:.08em;color:var(--muted);margin-top:.15rem}
.sf-bio{font-size:.88rem;line-height:2.1;color:var(--ink-mid)}
.sf-ph{margin:0;overflow:hidden;background:var(--brand-100)}
.sf-ph img{display:block;width:100%;height:100%;object-fit:cover}


/* ━━━━━━━━━━ 牧師：写真と文を左右交互に ━━━━━━━━━━ */
.sf-pastors{background:var(--warm);padding-top:clamp(2.4rem,4.6vw,3.6rem)}
.sf-rows{display:flex;flex-direction:column;gap:clamp(2.8rem,6vw,4.6rem)}
.sf-row{display:grid;grid-template-columns:minmax(0,32fr) minmax(0,68fr);
  gap:clamp(1.6rem,4.5vw,4rem);align-items:center}
.sf-row .sf-ph{aspect-ratio:4/5;
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant) * .45) 100%, 0 100%)}
.sf-row .sf-name{font-size:clamp(1.7rem,3vw,2.3rem);margin:.25rem 0 1rem}
/* 2人目は写真を右へ。左端を同じ向きで落とす */
.sf-row.is-flip{grid-template-columns:minmax(0,68fr) minmax(0,32fr)}
.sf-row .sf-bio{max-width:38em}
/* 写真が右の行は、文のかたまりを写真の側へ寄せて間を空けすぎない（文字は左揃えのまま） */
.sf-row.is-flip .sf-tx{justify-self:end;max-width:38em}
.sf-row.is-flip .sf-ph{order:2;
  clip-path:polygon(calc(var(--slant) * .45) 0, 100% 0, 100% 100%, 0 100%)}
@media (max-width:760px){
  .sf-row,.sf-row.is-flip{grid-template-columns:1fr;gap:1.2rem}
  .sf-row .sf-ph{max-width:320px;aspect-ratio:1}
  .sf-row.is-flip .sf-tx{justify-self:start}
  .sf-row.is-flip .sf-ph{order:0;
    clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant) * .45) 100%, 0 100%)}
}


/* ━━━━━━━━━━ スタッフ：3列 ━━━━━━━━━━ */
.sf-staff{background:var(--brand-050)}
.sf-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,3.4vw,2.8rem)}
.sf-grid .sf-ph{aspect-ratio:4/5;margin-bottom:1.1rem;
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant) * .45) 100%, 0 100%)}
.sf-grid .sf-name{font-size:clamp(1.25rem,2vw,1.5rem);margin:.2rem 0 .7rem}
.sf-grid .sf-bio{font-size:.85rem}
/* 縦に3人並ぶと長いので、トップの祈り会と同じ「写真左38%・文字右」に畳む */
@media (max-width:760px){
  .sf-grid{grid-template-columns:1fr;gap:1.8rem}
  .sf-grid li{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:1rem;align-items:start}
  .sf-grid .sf-ph{margin-bottom:0}
}

/* ══════════════════════════════════════════════════════════════
   VJGC — トップページだけ
   ヒーロー / お知らせ / 毎週の予定 / 動画（礼拝と祈り会）/ イベント節 /
   ゴスペルナイト / SNS帯 / 励ましの賛美
   共通の部品は common.css。
   ══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━ ヒーロー ━━━━━━━━━━ */
.hero{
  margin-top:var(--hh);position:relative;overflow:hidden;padding:0;
  height:calc(100svh - var(--hh));min-height:620px;max-height:940px;
  background:var(--brand-900);
}
.c-photo{position:absolute;inset:0;overflow:hidden;z-index:1}
/* マウス追従の逃げ。動くのは最大12px（top.js）なので、写真を切りすぎないよう16pxだけ */
.c-pan{position:absolute;inset:-16px;will-change:transform}
/* ▼▼ 動画に差し替えるときは、この img を video に置き換えるだけ ▼▼ */
/* 看板の足まで見えるよう下に寄せる */
.c-media{width:100%;height:100%;object-fit:cover;object-position:68% 80%;display:block;
  animation:drift 30s ease-in-out infinite alternate}
/* 右端の木を画面の外へ出す。左に空く分はパネルの下に隠れる（パネルが無いスマホでは動かさない） */
@media (min-width:901px){ .c-media{position:relative;left:4%} }
@keyframes drift{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.04) translateX(-2.4%)}}

.c-panel{
  position:absolute;left:0;top:0;bottom:0;width:min(53%,720px);z-index:2;
  background:var(--deep);
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  display:flex;align-items:center;
  padding:2rem calc(var(--slant) + 2.5rem) 5rem clamp(1.5rem,6vw,6rem);
}
/* 斜めの縁の光 */
.c-edge{
  position:absolute;top:0;bottom:0;left:0;width:min(53%,720px);z-index:3;pointer-events:none;
  clip-path:polygon(calc(100% - 2px) 0, 100% 0, calc(100% - var(--slant)) 100%, calc(100% - var(--slant) - 2px) 100%);
  background:linear-gradient(to bottom,var(--brand) 0%,rgba(2,151,165,0) 85%);
}
/* 見出しの上に置く鳩 */
.c-crest{width:clamp(84px,8.6vw,120px);margin-bottom:1.6rem}
.c-crest i{
  display:block;width:100%;aspect-ratio:563/530;
  -webkit-mask:url(/wp-content/themes/vjgc/img/dove.png) no-repeat center/contain;
          mask:url(/wp-content/themes/vjgc/img/dove.png) no-repeat center/contain;
  background:var(--brand-200);
  animation:doveFloat 12s ease-in-out infinite;
}

.c-text{position:relative;z-index:4;max-width:520px;will-change:transform}
.c-eyebrow{
  font-family:var(--serif-en);font-size:clamp(.95rem,1.4vw,1.2rem);font-weight:500;
  font-variant:small-caps;letter-spacing:.18em;color:var(--brand-200);
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem;
}
.c-eyebrow::before{content:'';width:42px;height:1px;background:var(--brand);flex:none}
.c-title{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(2.5rem,5.2vw,4.3rem);line-height:1.26;letter-spacing:.06em;
  color:var(--warm);margin-bottom:1.5rem;
}
.c-title .l{display:block;overflow:hidden}
.c-title .l b{display:block;font-weight:inherit;transform:translateY(110%);animation:rise 1s cubic-bezier(.2,.85,.2,1) forwards}
.c-title .l:nth-child(2) b{animation-delay:.14s;color:var(--brand-200)}
@keyframes rise{to{transform:none}}
.c-sub{
  font-family:var(--sans-jp);font-size:.94rem;font-weight:300;line-height:2.15;
  color:rgba(252,251,248,.78);max-width:420px;margin-bottom:2.4rem;
  opacity:0;animation:fade .9s ease .5s forwards;
}
@keyframes fade{to{opacity:1}}
.c-btns{display:flex;gap:.8rem;flex-wrap:wrap;opacity:0;animation:fade .9s ease .68s forwards}

/* ヒーローの下端。次の「お知らせ」の色で塗って、斜めをヒーローの中で完結させる */
.c-cut{
  position:absolute;left:0;right:0;bottom:0;height:var(--slant);z-index:5;pointer-events:none;
  background:var(--warm);clip-path:polygon(0 100%, 100% 0, 100% 100%);
}


@media (max-width:900px){
  .hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column}
  .c-photo{position:relative;height:40vh;min-height:280px;order:1}
  .c-panel{position:relative;width:100%;order:2;clip-path:none;padding:2.4rem clamp(1.5rem,6vw,3rem) 2.8rem}
  .c-edge,.c-cut{display:none}
  /* 鳩の右端を面の端に合わせたいので、文字ブロックの幅の上限を外す
     （本文は .c-sub 側で420pxに止まるので見た目は変わらない） */
  .c-text{max-width:none;width:100%}
  /* 鳩は見出しに重ねる。右へ寄せて画面外へ見切れさせ、
     z-index:-1 で文字より後ろに置くので、どこに来ても文字は隠れない */
  .c-crest{position:absolute;z-index:-1;margin:0;pointer-events:none;
    width:clamp(120px,38vw,182px);right:-68px;top:14px}
  /* アイブロウが2行に折り返さない大きさにする */
  .c-eyebrow{font-size:.8rem;letter-spacing:.14em;margin-bottom:.9rem}
  .c-title{margin-bottom:1.1rem}
  .c-sub{margin-bottom:1.7rem;line-height:2}
}
@media (prefers-reduced-motion:reduce){
  .c-title .l b{transform:none}
  .c-sub,.c-btns{opacity:1}
}


/* ━━━━━━━━━━ 毎週の予定 ━━━━━━━━━━
   上辺の斜めはお知らせ側の .slant-to に任せる（この節の上端色 #DCEFF1 で塗ってある）。
   下辺は .slant-to で次の動画の節（濃いティールの上端 #08414A）へ渡す */
.week{
  --to:#08414A;
  background:linear-gradient(to bottom,#DCEFF1 0%,var(--brand-050) 100%);
  padding:clamp(1.5rem,3vw,2.2rem) clamp(1.5rem,5vw,3rem) calc(var(--slant) + 1rem);
}
.week .inner{position:relative;z-index:2}

.wk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.6rem)}
.wk-col{display:flex;flex-direction:column}

/* 見出しそのものが詳細ページへのリンク（.go-link / .go-t / .go は common.css） */
.wk-head{display:block}
.wk-en{
  display:block;font-family:var(--serif-en);font-size:.9rem;font-variant:small-caps;
  letter-spacing:.16em;color:var(--brand-600);
}
.wk-jp{
  gap:.65rem;
  font-family:var(--mincho);font-size:clamp(1.45rem,2.3vw,1.8rem);font-weight:600;
  letter-spacing:.08em;line-height:1.3;color:var(--brand-900);
}
.wk-jp .go{width:27px;height:27px}

.wk-lead{font-size:.74rem;color:var(--muted);margin-top:.15rem}
.wk-rows{border-top:1px solid rgba(2,151,165,.3);padding-top:.55rem;margin-top:.6rem}
/* 行：ラベル・時刻・注記を1行に。折り返さない */
.wk-row{display:flex;align-items:baseline;gap:.6rem;padding:.16rem 0}
.wk-rl{font-size:.74rem;color:var(--ink-mid);min-width:3.6rem;flex:none}
.wk-time{font-family:var(--mincho);font-size:1.25rem;font-weight:600;letter-spacing:.01em;line-height:1.45;white-space:nowrap;color:var(--brand-700)}
.wk-note{font-size:.72rem;color:var(--muted);white-space:nowrap}

@media (max-width:900px){
  .wk-grid{grid-template-columns:1fr;gap:1.3rem}
  .wk-col + .wk-col{border-top:1px solid rgba(2,151,165,.22);padding-top:1.3rem}
  /* スマホではヒーローが縦積みになり .c-cut も消えるので、下辺の斜めだけ浅くして残す */
  .week::after{height:calc(var(--slant) * .7)}
  .week{padding-bottom:calc(var(--slant) * .7 + .6rem)}
}


/* ━━━━━━━━━━ お知らせ ━━━━━━━━━━
   入力された文章がそのまま流れるだけ。改行もリストの体裁も持たない。
   下辺は .slant-to で次の毎週の予定（上端 #DCEFF1）へ渡す */
.notice{
  --to:#DCEFF1;
  background:var(--warm);
  padding:clamp(1.4rem,2.6vw,2rem) clamp(1.5rem,5vw,3rem) calc(var(--slant) + 1rem);
}
.notice .lab{margin-bottom:.45rem}
.notice .lab span,.events .lab span{font-size:.78rem;color:var(--muted)}
.n-body{font-size:.86rem;font-weight:300;line-height:1.85;color:var(--ink-mid)}
/* inline-block にすると、折り返しが項目と項目の「あいだ」で起きる。
   inline のままだと 1件の途中で行が切れる */
.n-body .ni{display:inline-block;margin-right:1.6rem}
.n-body .ni em{font-style:normal;color:var(--brand);margin-right:.1em}


/* ━━━━━━━━━━ イベント節 ━━━━━━━━━━
   カード本体は common.css（.ev-card）。1件も無いときは節ごと出さない。
   下辺は .slant-to で次のゴスペルナイト（緑）へ渡す */
.events{
  --to:#2E5E41;
  background:var(--sand);
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.5rem,5vw,3rem) calc(var(--slant) + 1rem);
}
.events .lab{margin-bottom:1.1rem}


/* ━━━━━━━━━━ ゴスペルナイト（常設） ━━━━━━━━━━
   色は --gn-* だけを使う。ここから下の境目はまっすぐ */
.gn{
  position:relative;overflow:hidden;
  background:radial-gradient(80% 90% at 84% 8%, rgba(168,200,136,.17) 0%, transparent 62%),
             linear-gradient(to bottom,#2E5E41 0%,var(--gn-ink) 38%,#274F37 100%);
  padding:clamp(1.8rem,3.4vw,2.8rem) clamp(1.5rem,5vw,3rem) clamp(2.2rem,4vw,3.2rem);
}
/* このページで2羽目の鳩。チラシにも鳩がいるので、ここで使い切る。
   面の背景として大きく置き、z-index:0 で必ず文字の下に敷く */
.gn-dove{
  position:absolute;right:-10%;bottom:-26%;width:min(72%,820px);z-index:0;pointer-events:none;
  aspect-ratio:563/530;
  -webkit-mask:url(/wp-content/themes/vjgc/img/dove.png) no-repeat center/contain;
          mask:url(/wp-content/themes/vjgc/img/dove.png) no-repeat center/contain;
  background:var(--gn-light);opacity:.07;
  animation:gnSail 44s ease-in-out infinite;
}
@keyframes gnSail{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(-34px) rotate(1.6deg)}}
.gn .inner{position:relative;z-index:2}

.gn-grid{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);
  gap:clamp(1.4rem,3vw,2.6rem);align-items:stretch}
/* 右の柱は動画と同じ高さ。見出しのかたまりと情報の2つに分けて、
   余った高さをその「あいだ」だけに出す（見出しの行間はほぐさない） */
.gn-side{display:flex;flex-direction:column;justify-content:space-between;height:100%}
.gn-titles{flex:none}

/* 塗りつぶすとボタンに見えるので、色と文字組みだけで見せる。
   サイト共通の「短い罫 ＋ 文字」の型を、チラシの黄色でやる */
.gn-ribbon{
  display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem;
  font-family:var(--mincho);font-size:1.02rem;font-weight:600;letter-spacing:.1em;
  color:var(--gn-yellow);
}
.gn-ribbon::before{content:'';width:28px;height:1px;background:var(--gn-yellow);flex:none}
.gn-ribbon i{
  font-style:normal;font-family:var(--serif-en);font-size:.92rem;font-variant:small-caps;
  letter-spacing:.14em;color:rgba(242,236,166,.72);
  padding-left:.7rem;border-left:1px solid rgba(242,236,166,.4);
}
.gn-en{font-family:var(--serif-en);font-size:1.05rem;font-variant:small-caps;letter-spacing:.2em;color:var(--gn-light)}
.gn-en sup{font-size:.6em;letter-spacing:0}
.gn-title{
  font-family:var(--serif-en);font-size:clamp(2.1rem,4vw,3.2rem);font-weight:600;line-height:1;
  color:var(--gn-paper);letter-spacing:.01em;margin:.05rem 0 .35rem;
}
.gn-title span{color:var(--gn-light);margin-left:.22em}
/* 2行に折り返すと右の柱が伸びるので、1行に収まる大きさにする */
.gn-jp{font-family:var(--mincho);font-size:clamp(.78rem,1.1vw,.88rem);letter-spacing:.04em;color:var(--gn-light);white-space:nowrap}

.gn-facts{display:grid;border-top:1px solid rgba(250,248,238,.22);margin:.9rem 0 0}
.gn-facts>div{display:grid;grid-template-columns:3.4rem 1fr;gap:.9rem;padding:.42rem 0;
  border-bottom:1px solid rgba(250,248,238,.14)}
.gn-facts dt{font-family:var(--mincho);font-size:.78rem;color:var(--gn-light);letter-spacing:.1em}
.gn-facts dd{font-size:.92rem;font-weight:400;color:var(--gn-paper);line-height:1.55}
.gn-facts small{display:block;font-size:.73rem;color:rgba(250,248,238,.6);margin-top:.1rem;line-height:1.6}

/* 説明文（優先度いちばん下。小さく、読める幅で） */
.gn-desc{font-size:.82rem;font-weight:300;line-height:2;color:rgba(250,248,238,.72);
  margin-top:clamp(1.4rem,2.6vw,2.2rem);padding-top:clamp(1.2rem,2.2vw,1.8rem);
  border-top:1px solid rgba(250,248,238,.18)}
.gn-desc a{color:var(--gn-light);text-decoration:none;border-bottom:1px solid rgba(168,200,136,.5)}
.gn-desc a:hover{color:var(--gn-paper);border-bottom-color:var(--gn-paper)}

/* ボタン：説明文の次の段落に右寄せ。形・大きさは .pill.lg、色だけGNの緑 */
.gn-act{text-align:right;margin-top:clamp(1rem,2vw,1.6rem)}
.gn-btn{background:var(--gn-light);color:#264F35}
.gn-btn:hover{background:var(--gn-paper)}
.gn-btn:focus-visible{outline:2px solid var(--gn-paper);outline-offset:4px}

@media (max-width:900px){
  .gn-grid{grid-template-columns:1fr}
  /* 縦積みになると柱が狭いので、1行に収める縛りを外す */
  .gn-jp{white-space:normal}
  .gn-side{height:auto}
}


/* ━━━━━━━━━━ 動画（礼拝と祈り会） ━━━━━━━━━━
   動画カードの部品は common.css（.v-card / .v-frame / .vbox …） */
.watch{
  background:radial-gradient(80% 90% at 14% 10%, rgba(2,151,165,.22) 0%, transparent 62%),
             linear-gradient(to bottom,#08414A 0%,var(--brand-900) 100%);
  padding:clamp(2rem,3.6vw,3rem) clamp(1.5rem,5vw,3rem) clamp(2.2rem,4vw,3.2rem);
}
.watch .lab{color:var(--brand-200)}
.watch .lab span{color:var(--warm)}

/* 主日礼拝：動画が左、文字が右 */
.a-top{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  gap:clamp(1.4rem,3vw,2.8rem);align-items:center;margin-bottom:clamp(1.4rem,2.8vw,2.2rem)}
.a-intro .lab{margin-bottom:clamp(1.1rem,1.8vw,1.6rem)}
.a-intro h2{font-family:var(--mincho);font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:600;
  letter-spacing:.1em;line-height:1.25;color:var(--warm);margin-bottom:.15rem}
.a-intro .a-en{font-family:var(--serif-en);font-size:1rem;font-variant:small-caps;
  letter-spacing:.18em;color:var(--brand-200);margin-bottom:1rem}
.a-intro p{font-size:.85rem;font-weight:300;line-height:2;color:rgba(252,251,248,.76);margin-bottom:1rem}
/* 今週の動画タイトル。祈り会の太字タイトル（.v-kind）と同じ作り。.a-intro p より詳細度を上げておくこと */
.a-intro .a-now{font-family:var(--mincho);font-size:.92rem;font-weight:600;line-height:1.7;
  letter-spacing:.06em;color:var(--warm);
  border-top:1px solid rgba(155,220,226,.22);padding-top:.7rem;
  margin-bottom:clamp(1.4rem,2.2vw,2rem)}

/* 祈り会2本：サムネイル左・文字右 */
.a-sub{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,2rem);
  border-top:1px solid rgba(155,220,226,.22);padding-top:clamp(1.2rem,2.4vw,1.8rem)}
.a-sub .v-card{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:1rem;align-items:center}
.a-sub .v-frame{--cut:clamp(12px,1.4vw,18px)}
.a-sub .v-frame .vbox{--cut:clamp(10px,1.2vw,16px)}
.a-sub .v-kind{font-size:.92rem;color:var(--warm);margin-bottom:.3rem}
.a-sub .v-kind em{font-size:.74rem;color:var(--brand-200)}
.a-sub .v-title{font-size:.78rem;color:rgba(252,251,248,.72);margin-bottom:.45rem}
.a-sub .v-more{font-size:.74rem;color:var(--brand-200);border-bottom-color:rgba(155,220,226,.5)}
.a-sub .v-more:hover{color:var(--warm);border-bottom-color:var(--warm)}
.a-sub .v-btn{width:40px;height:40px}


/* ━━━━━━━━━━ 励ましの賛美（常設） ━━━━━━━━━━ */
.praise{background:var(--warm);padding:clamp(1.8rem,3.2vw,2.6rem) clamp(1.5rem,5vw,3rem) clamp(2rem,3.6vw,3rem)}
.a-praise{display:grid;grid-template-columns:minmax(0,22fr) minmax(0,78fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
.p-lead{font-size:.8rem;font-weight:300;line-height:1.95;color:var(--ink-mid)}
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.4rem)}
.p-grid .v-btn{width:40px;height:40px}
.p-title{font-family:var(--sans-jp);font-size:.75rem;line-height:1.7;color:var(--ink-mid);margin-top:.5rem}


@media (max-width:900px){
  .a-sub,.a-praise,.p-grid{grid-template-columns:1fr}
  /* 縦積みのときはラベルを動画の上に戻す。
     .a-intro を display:contents にして中身を .a-top の直接の子にし、順番だけ入れ替える */
  .a-top{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .a-top .pill{align-self:flex-start}
  .a-intro{display:contents}
  .a-intro .lab{order:-1}
  .a-main{margin-bottom:clamp(1.2rem,4vw,1.8rem)}
  .a-sub .v-card{grid-template-columns:minmax(0,38%) minmax(0,1fr)}
  /* 賛美も祈り会と同じ横並びにして縦を詰める */
  .p-grid{gap:.9rem}
  .p-grid .v-card{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);
    gap:1rem;align-items:center}
  .p-title{margin-top:0}
}

/* ══════════════════════════════════════════════════════════════
   VJGC — 初めての方へ（visit.html）だけ
   ようこそ / 礼拝の時間・アクセス / よくある質問
   ページ見出し（.ph）と節の見出し（.sec-h）は common.css。
   文言は旧モック（_archive/html-v1/visit.html）の仮。あとで見直す
   ══════════════════════════════════════════════════════════════ */

.vs-p{font-size:.92rem;line-height:2.15;color:var(--ink-mid)}
.vs-act{margin-top:1.4rem}


/* ━━━━━━━━━━ ようこそ：左に会堂の写真、右にあいさつ ━━━━━━━━━━ */
.vs-welcome{background:var(--warm);padding-top:clamp(2.4rem,4.6vw,3.6rem)}
.vs-wl{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);
  gap:clamp(1.8rem,5vw,4.5rem);align-items:center}
.vs-fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:40% 60%;
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant) * .45) 100%, 0 100%)}
.vs-lead{font-family:var(--mincho);font-weight:500;font-size:clamp(1.02rem,1.6vw,1.2rem);
  line-height:2.1;letter-spacing:.05em;color:var(--brand-900)}
.vs-lead + .vs-lead{margin-top:1em}
@media (max-width:900px){
  .vs-wl{grid-template-columns:1fr}
}


/* ━━━━━━━━━━ 礼拝の時間・アクセス：2つを横に並べる ━━━━━━━━━━ */
.vs-info{background:var(--brand-050)}
.vs-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.8rem,5vw,4.5rem)}
@media (max-width:760px){
  .vs-two{grid-template-columns:1fr;gap:2.4rem}
}


/* ━━━━━━━━━━ よくある質問：開閉せず、カードを並べて一度に読めるように ━━━━━━━━━━
   5枚を「上3枚・下2枚」で横幅いっぱいに揃える（6列のグリッドで幅を割り振る） */
/* 下にみことばの帯（淡いティール）が来るので、ここは sand にして境目を出す */
.vs-faq{background:var(--sand)}
.faq{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1rem,2vw,1.4rem)}
.faq li{grid-column:span 2;background:var(--warm);border:1px solid rgba(2,151,165,.16);
  padding:clamp(1.2rem,2.4vw,1.7rem)}
.faq li:nth-child(n+4){grid-column:span 3}
.faq-q{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.7rem;
  font-family:var(--mincho);font-weight:600;font-size:1.02rem;line-height:1.6;letter-spacing:.04em;color:var(--brand-900)}
.faq-q::before{content:'Q';flex:none;font-family:var(--serif-en);font-weight:600;font-size:1.5rem;line-height:1;color:var(--brand)}
.faq-a{font-size:.86rem;line-height:1.95;color:var(--ink-mid)}
@media (max-width:900px){
  .faq{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq li,.faq li:nth-child(n+4){grid-column:span 1}
  .faq li:last-child{grid-column:1 / -1}
}
@media (max-width:600px){
  .faq{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   VJGC — 礼拝案内（worship.html）だけ
   日曜礼拝 / 教会学校 / 祈り会 / アクセス / お問い合わせ
   ページ見出し（.ph）と節の見出し（.sec-h）は common.css。
   時刻はトップの「毎週の予定」と同じく明朝で大きく読ませる
   ══════════════════════════════════════════════════════════════ */

.ws-p{font-size:.92rem;line-height:2.15;color:var(--ink-mid)}
.ws-p + .ws-p{margin-top:1em}
.ws-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}



/* ━━━━━━━━━━ 日曜礼拝：左に時刻、右に説明 ━━━━━━━━━━ */
.ws-sun{background:var(--warm);padding-top:clamp(2.4rem,4.6vw,3.6rem)}
.ws-sun-grid{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  gap:clamp(1.8rem,5vw,4.5rem);align-items:start}
.wt{border-top:1px solid rgba(2,151,165,.3)}
.wt-lead{font-family:var(--mincho);font-size:.9rem;letter-spacing:.1em;color:var(--brand-700);margin-bottom:.6rem}
.wt-row{display:grid;grid-template-columns:5.2rem minmax(0,1fr);align-items:baseline;gap:.2rem .8rem;
  padding:.9rem 0;border-bottom:1px solid rgba(2,151,165,.3)}
.wt-l{font-family:var(--mincho);font-size:.92rem;letter-spacing:.08em;color:var(--ink)}
.wt-time{font-family:var(--mincho);font-weight:600;font-size:clamp(1.7rem,2.8vw,2.2rem);
  line-height:1.2;letter-spacing:.01em;color:var(--brand-700);white-space:nowrap}
.wt-note{grid-column:2;font-size:.8rem;color:var(--ink-mid)}
.ws-fig{margin-bottom:1.5rem}
.ws-fig img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 60%;
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant) * .45) 100%, 0 100%)}
@media (max-width:900px){
  .ws-sun-grid{grid-template-columns:1fr}
}


/* ━━━━━━━━━━ 教会学校：説明と動画 ━━━━━━━━━━
   濃い面にするとフッターと見間違えてページを閉じられるので、淡い面（sand）にする */
.ws-school{background:var(--sand)}
.ws-sc{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.ws-sc-time{display:flex;align-items:baseline;gap:1rem;margin-bottom:1rem}
.ws-sc-fig .dummy{aspect-ratio:16/10;
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant) * .45) 100%, 0 100%)}
@media (max-width:900px){
  .ws-sc{grid-template-columns:1fr}
}


/* ━━━━━━━━━━ 祈り会：3つの曜日を横に並べる ━━━━━━━━━━ */
.ws-pray{background:var(--warm)}
.pm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(1.4rem,2.6vw,2rem);
  border-left:1px solid rgba(2,151,165,.3)}
.pm li{list-style:none;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:1.1rem .5rem;border-right:1px solid rgba(2,151,165,.3)}
.pm-day{font-family:var(--mincho);font-size:1rem;letter-spacing:.14em;color:var(--ink)}
.pm-day em{display:block;text-align:center;font-style:normal;font-family:var(--serif-en);font-size:.82rem;
  font-variant:small-caps;letter-spacing:.14em;color:var(--brand-600)}
.pm .wt-time{font-size:clamp(1.5rem,2.6vw,2rem)}
@media (max-width:480px){
  .pm li{padding:1rem .2rem}
  .pm .wt-time{font-size:1.25rem}
  .pm-day{font-size:.9rem;letter-spacing:.08em}
  .pm-day em{font-size:.72rem;letter-spacing:.06em}
}


/* ━━━━━━━━━━ アクセス・お問い合わせ（1枚のカード） ━━━━━━━━━━
   淡いティールの面に warm のカードを1枚。左に教会の情報、右に地図をカードの高さいっぱいに。
   住所・電話・メールは表にせず、アイコン＋同じ大きさの文字で揃える */
.ws-access{background:var(--brand-050)}
.ac{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  background:var(--warm);border:1px solid rgba(2,151,165,.18)}
.ac-info{padding:clamp(1.6rem,3.4vw,2.6rem)}
/* 地図は斜めに切らない（左上に出る Google の場所カードが見切れるため） */
.ac-map{position:relative;min-height:320px}
.ac-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--brand-050)}

/* 教会の連絡先（.ct-id / .ct-list）は common.css。お問い合わせページと共通 */
.ct-form{margin-top:1.3rem}
@media (max-width:900px){
  .ac{grid-template-columns:1fr}
  .ac-map{min-height:260px}
}
@media (max-width:480px){
  .ac-info{padding:1.4rem 1.2rem}
}

/* ══════════════════════════════════════════════════════════════
   VJGC — WordPress にしたことで要る受け皿
   モック由来の CSS（common.css ほか）には手を入れず、ここに足す。
   ══════════════════════════════════════════════════════════════ */

/* 言語切替のボタン。EN は英字の書体（モックでは style 属性に書いてあったもの） */
.nav-btn.is-lang-en{font-family:var(--serif-en);font-variant:small-caps;letter-spacing:.05em}

/* 本文が空のページでは、固定ヘッダーの高さ分を空けてフッターが潜らないようにする
   （中身のあるページは最初の節が margin-top:var(--hh) を持っているので効かない） */
main:not(:has(> *)){height:var(--hh)}

/* ログイン中に出る管理バー（32px・782px以下は46px）の下へ、固定ヘッダーをずらす */
.admin-bar header{top:32px}
@media (max-width:782px){ .admin-bar header{top:46px} }
/* 600px以下は管理バーがスクロールで流れるので、固定にしてヘッダーと離れないようにする */
@media (max-width:600px){ #wpadminbar{position:fixed} }

/* ハンバーガー：開いている間は × にして、閉じるボタンだと分かるようにする */
.ham span{transition:transform .2s,opacity .2s}
.ham[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.ham[aria-expanded="true"] span:nth-child(2){opacity:0}
.ham[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}


/* ━━━━━━━━━━ ブロックの受け皿 ━━━━━━━━━━ */

/* ⚠️⚠️ グループブロックは中に1枚挟む。そのままだと2列・3列組みの子が1つになって潰れる（WORDPRESS.md §2）。
   モックの「.gn-facts>div」のような指定がこの入れ物に当たって勝たないよう、詳細度を2段にしてある */
.wp-block-group > .wp-block-group__inner-container{display:contents}

/* WordPress が画像のメタ情報から勝手に入れるキャプションは出さない */
.wp-block-image figcaption{display:none}

/* ボタン（ボタンブロックの型「塗り」「線」）。見た目はモックの .pill と同じ。矢印は ::after で付ける */
.wp-block-button[class*="is-style-vjgc-"] > .wp-block-button__link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--serif-jp);font-size:.78rem;font-weight:500;line-height:1.85;
  padding:.45rem 1.1rem;border-radius:99px;border:1px solid transparent;
  text-decoration:none;transition:background .18s,color .18s,border-color .18s;white-space:nowrap}
.wp-block-button[class*="is-style-vjgc-"] > .wp-block-button__link::after,
p.v-more::after{
  content:'';flex:none;width:12px;height:12px;background:currentColor;transition:transform .18s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center/contain}
.wp-block-button[class*="is-style-vjgc-"] > .wp-block-button__link:hover::after,
p.v-more:hover::after{transform:translateX(3px)}
.is-style-vjgc-fill > .wp-block-button__link{background:var(--brand);color:var(--warm)}
.is-style-vjgc-fill > .wp-block-button__link:hover{background:var(--brand-600);color:var(--warm)}
.is-style-vjgc-line > .wp-block-button__link{background:transparent;border-color:var(--brand);color:var(--brand-600)}
.is-style-vjgc-line > .wp-block-button__link:hover{background:var(--brand-050);color:var(--brand-600)}

/* 下線のテキストリンク（モックの a.v-more）。段落ブロックに v-more を付け、中のリンクは色を継ぐ */
p.v-more a{color:inherit;text-decoration:none}


/* ━━━━━━━━━━ ページごとの受け皿 ━━━━━━━━━━ */

/* 信仰告白：条文は番号付きリストブロック（<li> に文字が直接入る）。番号は自動。
   モックの <li> は grid だが、文字に太字などが混ざると grid の項目が分かれて崩れるので、
   番号を絶対配置にして同じ見た目にする（番号の列 3.2rem ＋ 間 .6rem） */
.fa-list{counter-reset:fa}
/* 1行で終わる条でも、番号の高さ分は確保する（モックでは番号が行の高さを決めている） */
.fa-list > li{display:block;position:relative;padding-left:3.8rem;
  min-height:calc(clamp(1.2rem,2.4vw,1.7rem) * 2 + clamp(1.5rem,2.4vw,1.9rem) * 1.3 + 1px);
  counter-increment:fa;font-size:.95rem;line-height:2.15;color:var(--ink)}
.fa-list > li::before{content:counter(fa);position:absolute;left:0;top:clamp(1.2rem,2.4vw,1.7rem);
  font-family:var(--mincho);font-weight:600;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.3;color:var(--brand-700)}
@media (max-width:600px){ .fa-list > li{padding-left:2.8rem;font-size:.9rem} }

/* 教会スタッフ：3列の1人分はモックでは <li>。グループブロック（.sf-card）で同じ畳み方にする */
@media (max-width:760px){
  .sf-grid .sf-card{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:1rem;align-items:start}
}

/* 礼拝案内：祈り会の曜日はモックでは <li>。グループブロック（.pm-item）で同じ形にする */
.pm .pm-item{display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:1.1rem .5rem;border-right:1px solid rgba(2,151,165,.3)}
@media (max-width:480px){ .pm .pm-item{padding:1rem .2rem} }

/* 写真がまだ入っていない画像ブロックは、モックの .dummy と同じ縞の枠で場所を空けておく。
   写真が入ると自動で消える。⚠️ 判定は img[src]（空の画像ブロックにも <img> はある・WORDPRESS.md §5） */
.wp-block-image:not(:has(img[src])){display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--brand-050) 0 14px,#E2F1F3 14px 28px);
  color:var(--brand-600);font-size:.74rem;letter-spacing:.1em}
.wp-block-image:not(:has(img[src])) img{display:none}
.wp-block-image:not(:has(img[src]))::after{content:'写真（差し替え予定）'}
.ws-sc-fig:not(:has(img[src])){aspect-ratio:16/10;
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant) * .45) 100%, 0 100%)}

/* はじめての方：よくある質問の1枚はモックでは <li>。グループブロック（.faq-item）で同じ並びにする */
.faq .faq-item{grid-column:span 2;background:var(--warm);border:1px solid rgba(2,151,165,.16);
  padding:clamp(1.2rem,2.4vw,1.7rem)}
.faq .faq-item:nth-child(n+4){grid-column:span 3}
@media (max-width:900px){
  .faq .faq-item,.faq .faq-item:nth-child(n+4){grid-column:span 1}
  .faq .faq-item:last-child{grid-column:1 / -1}
}
@media (max-width:600px){
  .faq .faq-item,.faq .faq-item:last-child{grid-column:auto}
}

/* こひつじくらぶ：活動のリストはリストブロック。アイコンは CSS で上から順に付ける（4つ目以降は丸）。
   モックの <li> は flex だが、文字に太字などが混ざると崩れるので、アイコンを絶対配置にする */
.kh-list > li{display:block;position:relative;padding-left:calc(20px + .8rem)}
.kh-list > li::before{content:'';position:absolute;left:0;top:50%;width:20px;height:20px;margin-top:-10px;
  background:var(--brand);-webkit-mask:var(--ico) no-repeat center/contain;mask:var(--ico) no-repeat center/contain;
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E")}
.kh-list > li:nth-child(1)::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E")}
.kh-list > li:nth-child(2)::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.1 0 1.6-.8 1.4-1.7-.3-1.2.5-2.3 1.8-2.3H18a3 3 0 0 0 3-3c0-6-4.5-11-9-11Z'/%3E%3Ccircle cx='7.5' cy='11' r='1.2'/%3E%3Ccircle cx='10.5' cy='7' r='1.2'/%3E%3Ccircle cx='15' cy='7.5' r='1.2'/%3E%3C/svg%3E")}
.kh-list > li:nth-child(3)::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M4 4h6a3 3 0 0 1 2 1 3 3 0 0 1 2-1h6v15h-6a2 2 0 0 0-2 1 2 2 0 0 0-2-1H4Z'/%3E%3Cpath d='M12 5v15'/%3E%3C/svg%3E")}
/* 写真2枚はモックでは <img> が並ぶ。画像ブロックの枠（figure）で同じ並びにする（2枚目を少し下げる） */
.kh-photos .wp-block-image:nth-child(2){margin-top:clamp(1.6rem,4vw,3rem)}
.kh-photos .wp-block-image:nth-child(2) img{margin-top:0}

/* お問い合わせ：Contact Form 7 が足す入れ物と返答の欄。フォームの見た目は contact.css（.fm） */
.fm .wpcf7-form-control-wrap{display:block}
.fm .wpcf7-not-valid-tip{margin-top:.3rem;font-size:.78rem;color:#C7452F}
.fm .wpcf7-not-valid{border-color:#C7452F}
.fm .wpcf7-response-output{margin:1.2rem 0 0!important;padding:.8rem 1rem!important;font-size:.85rem;line-height:1.8;
  border:1px solid var(--brand)!important;color:var(--brand-900);background:var(--brand-050)}
.fm.invalid .wpcf7-response-output,.fm.failed .wpcf7-response-output{border-color:#C7452F!important;background:#FBEFEC}
.fm .wpcf7-spinner{margin:0}
/* メッセージ欄は Contact Form 7 が rows="10" を付けて高くなるので、モックの高さ（最低 11rem）に戻す */
.fm textarea{height:11rem}

/* 献金：見出しの「3」はブロックでは太字（<strong>） */
.gv-title strong{font-family:var(--serif-en);font-weight:600;font-size:1.6em;line-height:1;
  letter-spacing:0;margin:0 .06em;color:var(--brand);vertical-align:-.06em;font-variant-numeric:lining-nums}
/* 番号の横のアイコンは CSS で付ける（モックでは <i><svg>）。丸い地にブランド色の線 */
.gv-top::after{content:'';flex:none;width:48px;height:48px;border-radius:50%;
  background:var(--brand-050) var(--ico) no-repeat center/24px}
.is-cheque .gv-top::after{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230297A5' stroke-width='1.5'%3E%3Cpath d='M12 2v4M10.5 3.5h3M4 21V12l8-6 8 6v9'/%3E%3Cpath d='M2.5 13 12 6l9.5 7M10 21v-4a2 2 0 0 1 4 0v4M3 21h18'/%3E%3C/svg%3E")}
.is-etransfer .gv-top::after{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230297A5' stroke-width='1.5'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E")}
.is-card .gv-top::after{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230297A5' stroke-width='1.5'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='M3 10h18M6.5 15h4'/%3E%3C/svg%3E")}
/* 3の案内：フォームが右にあるか下にあるかで、どちらの段落を出すか切り替える */
.gv-how.is-narrow{display:none}
@media (max-width:900px){ .gv-how.is-wide{display:none} .gv-how.is-narrow{display:block} }


/* ━━━━━━━━━━ トップ ━━━━━━━━━━ */

/* お知らせが空のとき、ヒーローの下端の斜めは次の「毎週の予定」の上端の色で塗る */
.hero.no-notice .c-cut{background:#DCEFF1}

/* 毎週の予定：見出しはモックでは <a class="wk-head go-link"> の中に英字と日本語と矢印の四角。
   ブロックでは段落（.wk-head）の中のリンク。英字は書式「英字」、矢印の四角は ::after で付ける */
.wk-head a{display:block;text-decoration:none;padding-bottom:1px;/* モックの見出しの透明な下線（1px）の分 */
  font-family:var(--mincho);font-size:clamp(1.45rem,2.3vw,1.8rem);font-weight:600;
  letter-spacing:.08em;line-height:1.3;color:var(--brand-900);transition:color .18s}
.wk-head a .en{display:block;font-family:var(--serif-en);font-size:.9rem;font-weight:400;font-variant:small-caps;
  letter-spacing:.16em;line-height:1.85;color:var(--brand-600)}
.wk-head a::after{content:'';display:inline-block;vertical-align:-.15em;width:27px;height:27px;margin-left:.65rem;
  border:1px solid var(--brand);border-radius:2px;transition:background-color .18s,transform .18s;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230297A5' stroke-width='2.4'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center/12px}
.wk-head a:hover{color:var(--brand-700);text-decoration:underline;text-decoration-color:var(--brand-200);text-underline-offset:.3em;text-decoration-thickness:1px}
.wk-head a:hover .en{text-decoration:none}
.wk-head a:hover::after{transform:translateX(3px);background-color:var(--brand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E")}

/* ボタン：濃い面の上（.pill.fill.inv と同じ） */
.is-style-vjgc-fill-inv > .wp-block-button__link{background:var(--warm);color:var(--brand-900)}
.is-style-vjgc-fill-inv > .wp-block-button__link:hover{background:var(--brand-200);color:var(--brand-900)}
/* ボタン：ゴスペルナイト（.pill.lg.gn-btn と同じ） */
.wp-block-button.is-style-vjgc-gn > .wp-block-button__link{font-size:.9rem;letter-spacing:.06em;gap:.6rem;padding:.75rem 1.8rem;
  background:var(--gn-light);color:#264F35}
.is-style-vjgc-gn > .wp-block-button__link:hover{background:var(--gn-paper);color:#264F35}
@media (max-width:480px){ .wp-block-button.is-style-vjgc-gn > .wp-block-button__link{padding:.72rem 1.3rem} }
.gn-act.wp-block-buttons{justify-content:flex-end}

/* ゴスペルナイト：背景の鳩はモックでは空の <div class="gn-dove">。ブロックに空の箱を置かないよう ::before で描く */
.gn::before{content:'';position:absolute;right:-10%;bottom:-26%;width:min(72%,820px);z-index:0;pointer-events:none;
  aspect-ratio:563/530;
  -webkit-mask:url(/wp-content/themes/vjgc/img/dove.png) no-repeat center/contain;
          mask:url(/wp-content/themes/vjgc/img/dove.png) no-repeat center/contain;
  background:var(--gn-light);opacity:.07;animation:gnSail 44s ease-in-out infinite}
/* 「入場無料」の英字はモックでは <i>。ブロックでは斜体（<em>） */
.gn-ribbon em{font-style:normal;font-family:var(--serif-en);font-size:.92rem;font-variant:small-caps;
  letter-spacing:.14em;color:rgba(242,236,166,.72);padding-left:.7rem;border-left:1px solid rgba(242,236,166,.4)}
/* 日程などの行はモックでは <dl>。グループと段落（.gn-fact / .gn-dt / .gn-dd）で同じ形にする */
.gn-facts .gn-fact{display:grid;grid-template-columns:3.4rem 1fr;gap:.9rem;padding:.42rem 0;
  border-bottom:1px solid rgba(250,248,238,.14)}
.gn-dt{font-family:var(--mincho);font-size:.78rem;color:var(--gn-light);letter-spacing:.1em}
.gn-dd{font-size:.92rem;font-weight:400;color:var(--gn-paper);line-height:1.55}
.gn-dd small{display:block;font-size:.73rem;color:rgba(250,248,238,.6);margin-top:.1rem;line-height:1.6}

/* ゴスペルナイト：開催後の紹介（2026-10〜）。
   PC は2列：左の列＝見出し→紹介文→献金のリンク→（十分あけて）「詳細へ」、
   右の列＝動画（上。ほかの動画と同じ角を落とした枠）と題字（下。下の端を左の列の下の端にそろえ、右へ寄せる）。
   題字はチラシの題字を切り抜いた画像を、小さく傾けてテープで留めた紙にして添える（アクセントのイラスト。
   動画の下に左をそろえて置くとサムネイルの続きに見えるので、右へ寄せて大きく傾ける）。
   スマホは列の枠を外し（display:contents）、題字をごく小さくして見出しの左に添える。
   その下に 動画→1段落目→（続きを読む）→献金→ボタン。
   題字に手描きの鳩がいるので、この形のときは背景の大きな鳩を出さない（1つの面に鳩が2羽にならないように） */
.gn:has(.gn-recap)::before{display:none}
.gn-recap{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);grid-template-areas:"side main";
  column-gap:clamp(2rem,4.5vw,3.6rem);align-items:stretch}
.gn-recap .gn-main{grid-area:main;display:flex;flex-direction:column;min-width:0}
.gn-recap .gn-side{grid-area:side;display:flex;flex-direction:column;gap:clamp(.8rem,1.6vw,1.1rem);min-width:0}
.gn-recap .gn-jp{white-space:normal} /* 左の列は狭いので、1行に収める縛り（top.css）を外す */
/* 動画の枠が光る色は、緑の面ではゴスペルナイトの淡い緑に */
.gn .v-card:hover .v-frame{background:var(--gn-light)}
.gn-lead p{font-size:.88rem;font-weight:300;line-height:1.95;color:rgba(250,248,238,.9)}
.gn-text{display:grid;gap:.85rem}
.gn-text p{font-size:.86rem;font-weight:300;line-height:2;color:rgba(250,248,238,.8)}
.gn-give{margin-top:.3rem}
.gn-give a{font-family:var(--mincho);font-size:.98rem;font-weight:600;letter-spacing:.08em;color:var(--gn-yellow);
  text-decoration:none;border-bottom:1px solid rgba(242,236,166,.45);padding-bottom:2px;transition:color .18s,border-color .18s}
.gn-give a:hover{color:var(--gn-paper);border-bottom-color:var(--gn-paper)}
.gn-recap .gn-act.wp-block-buttons{justify-content:flex-start;margin-top:clamp(1.6rem,3vw,2.4rem)}
/* 題字：傾けてテープで留めた紙（アクセント）。右の列の下・右寄せ。下の端を左の列にそろえる */
.gn-card.wp-block-image{position:relative;align-self:flex-end;margin:auto clamp(.6rem,1.6vw,1.4rem) .5rem 0;padding-top:clamp(1.2rem,2.4vw,1.8rem);
  width:min(42%,256px);transform:rotate(-5deg)}
.gn-card img{display:block;width:100%;height:auto;border-radius:2px;
  box-shadow:0 14px 28px -14px rgba(0,0,0,.6),0 2px 5px rgba(0,0,0,.25)}
.gn-card.wp-block-image::before{content:'';position:absolute;z-index:1;bottom:calc(100% - clamp(1.2rem,2.4vw,1.8rem) - 9px);left:50%;
  width:32%;height:18px;transform:translateX(-50%) rotate(7deg);background:rgba(242,236,166,.82);box-shadow:0 1px 2px rgba(0,0,0,.15)}
/* 「続きを読む」（js/gn.js が足す）。PC では出さない */
.gn-more{display:none}
@media (max-width:900px){
  /* 1行目と2行目の左に題字。見出しの3行目（日本語）から下は全幅 */
  .gn-recap{grid-template-columns:auto minmax(0,1fr);column-gap:.9rem;row-gap:0;
    grid-template-areas:"card en" "card title" "jp jp" "video video" "lead lead" "text text" "more more" "give give" "act act"}
  .gn-recap .gn-main,.gn-recap .gn-side,.gn-recap .gn-head{display:contents}
  .gn-recap .gn-en{grid-area:en;align-self:end}
  .gn-recap .gn-title{grid-area:title;font-size:clamp(1.75rem,7.4vw,2.1rem)}
  .gn-recap .gn-jp{grid-area:jp;margin-top:.45rem}
  .gn-video{grid-area:video;margin-top:1.2rem}
  .gn-lead{grid-area:lead;margin-top:1.2rem}
  .gn-text{grid-area:text;margin-top:.85rem}
  .gn-give{grid-area:give;margin-top:1rem}
  .gn-recap .gn-act.wp-block-buttons{grid-area:act;justify-content:center;margin-top:1.8rem}
  /* 題字はごく小さく、見出しの左のアクセントに */
  .gn-card.wp-block-image{grid-area:card;align-self:center;width:clamp(64px,19vw,84px);margin:0;padding-top:.3rem;transform:rotate(-5deg)}
  .gn-card img{box-shadow:0 6px 12px -6px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.25)}
  .gn-card.wp-block-image::before{bottom:calc(100% - .3rem - 4px);width:46%;height:9px}
  /* 1段落目は数行で畳んで下を薄くぼかし、2段落目から下は隠す（背景がグラデーションなので色を重ねずマスクで消す） */
  .gn-recap.is-foldable:not(.is-open) .gn-text{display:none}
  .gn-recap.is-foldable:not(.is-open) .gn-lead p{max-height:9rem;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
  .gn-more{grid-area:more;display:inline-flex;align-items:center;gap:.45rem;justify-self:start;margin-top:.4rem;
    font-family:var(--serif-jp);font-size:.84rem;letter-spacing:.06em;color:var(--gn-light);
    background:none;border:0;border-bottom:1px solid rgba(168,200,136,.5);padding:.25rem 0;cursor:pointer}
  .gn-more::after{content:'';width:.45em;height:.45em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:translateY(-.15em) rotate(45deg)}
  .gn-more[aria-expanded="true"]::after{transform:translateY(.1em) rotate(-135deg)}
  .gn-more:focus-visible{outline:2px solid var(--gn-paper);outline-offset:3px}
}


/* ━━━━━━━━━━ 英語ページ ━━━━━━━━━━
   見出しは「英語＋小さい日本語」（2026-10-05 決定）。日本語ページで英字を出していた小さい欄に日本語が入るので、
   英字用の書体（Cormorant・スモールキャップ）をやめて明朝にする */
html[lang^="en"] :is(.sec-h span,.ph-en,.wk-head a .en,.v-kind em,.a-en,.gn-ribbon em,.sf-role em,.sf-name span,.pm-day em,.gv-en,.gv-t span,.ct-en){
  font-family:var(--mincho);font-variant:normal;letter-spacing:.12em}

/* 献金：GiveWP の読み込み中の表示（.iframe-loader）は絶対配置なのに基準が無く、画面の外まで広がって
   横のはみ出しになっていた（くるくるの位置もずれる）。フォームの入れ物を基準にする */
.gf .give-embed-form-wrapper{position:relative}