@charset "UTF-8";
/* =================================================
   Kusafuka Eiji Official - common.css
   デザイントークンはXDスペックから採取（AB幅1200 / コンテンツ幅1000）
   BP: SP 〜767px / PC 768px〜（全ページ統一）
   ================================================= */

/* ---------- デザイントークン ---------- */
:root {
  --color-primary: #05900f;   /* キー緑（バッジ枠・ボタン・フッター） */
  --color-accent: #385df8;    /* 青（ブログバッジ・リンク） */
  --color-text: #393939;      /* 基本テキスト */
  --color-sns-blue: #2455d8;  /* ヘッダーSNSボタン / Facebookアイコンの青（実測） */
  --color-bg-tint: #eff8f0;   /* 薄緑背景帯（XD: #05900F 不透明度6.39% を白に重ねた実値） */
  --color-white: #fff;

  --font-base: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --radius: 5px;          /* ボタン・SNSカード・フッターCTA（XD実測） */
  --radius-tab: 10px;     /* カテゴリータブのみ10px（News-archive実測） */
  --border-w: 2px;

  --content-width: 1000px;
  /* 全幅ヒーローは上限なし・縦横比固定（v0.18.1でクライアント確定）。
     再び上限を掛ける場合は --hero-max を復活させ、.top-mv / .top-profile /
     .vision-mv / .profile-mv に max-width と margin-inline:auto を戻す */
  --content-pad: 20px; /* SP左右余白 */
}

/* ---------- リセット（最小限） ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ページ内アンカー（ヘッダーの「後援会事務所」→ #footer、「SNS」→ #sns）を
   滑らかにスクロールさせる。動きを減らす設定のときは下の media query で無効化している */
html {
  scroll-behavior: smooth;
}

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

ul, ol {
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

body {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
  -webkit-text-size-adjust: 100%;
}

/* スクリーンリーダー専用テキスト（the_posts_pagination の見出しなど） */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* リンク無効表示（SNS未開設分） */
.is-disabled {
  pointer-events: none;
  opacity: 0.4;
}

/* コンテンツ幅 */
.site-header-inner,
.site-footer-inner,
.section-inner {
  width: min(var(--content-width), 100% - var(--content-pad) * 2);
  margin-inline: auto;
}

/* ---------- 共通コンポーネント ---------- */

/* セクション見出し（20px Black / 中央） */
.section-title {
  font-size: 20px;
  font-weight: 900;
  line-height: 29px;
  text-align: center;
  color: var(--color-text);
}

.section-title-sub {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
}

/* ボタン（角丸10px・枠2px） */
/* ボタン（XD実測 137x30 / 角丸5px / Bold 14px） */
.button {
  display: inline-block;
  width: 137px;
  height: 30px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

.button--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

/* カテゴリーバッジ（XD実測 75x27 / 角丸なし / 枠1.5px / Bold 14px） */
.cat-badge {
  display: inline-block;
  width: 75px;
  height: 27px;
  border: 1.5px solid currentColor;
  border-radius: 0;
  background: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 24px; /* 27 - 枠1.5px x2 */
  text-align: center;
}

.cat-badge--news {
  color: var(--color-primary);
}

.cat-badge--blog {
  color: var(--color-accent);
}

/* 未定義カテゴリー（例: 将来の「活動報告」）のデフォルト色 */
.cat-badge:not(.cat-badge--news):not(.cat-badge--blog) {
  color: var(--color-text);
}

/* カテゴリータブ（一覧上部） */
.cat-tabs {
  display: flex;
  justify-content: center;
  gap: 26px; /* News-archive実測 */
  margin-top: 24px;
}

/* カテゴリータブ（News-archive実測 109x36 / 角丸10px / 枠2px / Black 20px） */
.cat-tab {
  display: inline-block;
  width: 109px;
  height: 36px;
  border: var(--border-w) solid currentColor;
  border-radius: var(--radius-tab);
  font-size: 20px;
  font-weight: 900;
  line-height: 32px; /* 36 - 枠2px x2 */
  text-align: center;
}

.cat-tab--news {
  color: var(--color-primary);
}

.cat-tab--blog {
  color: var(--color-accent);
}

/* 選択中タブ: 塗り + 白文字（未定義スラッグはテキスト色で塗る） */
.cat-tab.is-current {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-white);
}

.cat-tab--news.is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.cat-tab--blog.is-current {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---------- 記事カード ---------- */
.post-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 77px 36px; /* XD実測: 段間77px / ガター36px */
  width: min(var(--content-width), 100% - var(--content-pad) * 2);
  margin-inline: auto;
}

.post-card-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.post-card-link {
  display: block;
  color: var(--color-text);
}

.post-card-thumb {
  position: relative;
  aspect-ratio: 223 / 150;
  overflow: hidden;
}

.post-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card-thumb .cat-badge {
  position: absolute;
  top: 0;
  left: 0;
}

.post-card-date {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.post-card-title {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px; /* XD: lh20 */
}

/* inline-block だと親(.post-card-link)の行ボックス分だけカード高が伸びて
   段ピッチが狂うため block にする */
.post-card-more {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-accent);
}

/* ---------- ヘッダー ---------- */
.site-header {
  background: var(--color-white);
}

/* XD実測: ロゴ天 y=33 / ロゴ地 y=140 / 緑罫 y=168（= 33 + 107 + 28） */
.site-header-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  /* XD実測: ヘッダー下の緑罫は y168・x100-1100・#05900F 1px。
     罫線ぶんを padding から引いて、罫線の有無にかかわらずヘッダーの地が y168 になるようにしている
     （以前は罫線が高さに乗って全ページ +1px ずれていた） */
  padding: 33px 0 27px;
  border-bottom: 1px solid var(--color-primary);
}

/* ビジョン/プロフィールは罫線なし（XDでもこの2ページだけ罫線が無くMVが直接接している）。
   印は functions.php の body_class フィルタで付けている */
body.no-header-rule .site-header-inner {
  padding-bottom: 28px; /* 罫線ぶんを余白で埋めてヘッダー地を y168 に保つ */
  border-bottom: none;
}

/* ---------- ロゴ ----------
   XD実測（Topアートボード・図形は無く4つのテキストのみ）:
     くさふか            Black 60px lh87 #393939  x100  基線103  幅240
     英治                Black 30px lh44 #393939  x349  基線106  幅60
     えいじ(ルビ)        Black 20px lh29 #393939  x349  基線72   幅60
     オフィシャルWEBサイト Black 18px lh26 #05900F  中心x260 基線135 幅199.06
   外接 309x107（x100-409 / y33.3-140.2） */
.site-logo a {
  display: block;
  width: 309px;
  color: var(--color-text);
}

.site-logo-name {
  position: relative;
  display: block;
  font-size: 60px;
  font-weight: 900;
  line-height: 87px;
  white-space: nowrap;
}

/* 「英治」は「くさふか」より3px下がったベースライン */
.site-logo-kanji {
  margin-left: 9px; /* くさふか右端x340 -> x349 */
  font-size: 30px;
  line-height: 1; /* 親の87pxを継承して行boxを広げない */
  vertical-align: -3px;
}

.site-logo-ruby {
  position: absolute;
  top: 15px;
  left: 249px; /* x349 */
  font-size: 20px;
  font-weight: 900;
  line-height: 29px;
}

.site-logo-sub {
  display: block;
  margin-top: -6px; /* 名前の行box地y120.3 -> サブの行box天y114.2 */
  padding-left: 11px; /* 中心を x254.5 -> x260 に寄せる */
  font-size: 18px;
  font-weight: 900;
  line-height: 26px;
  text-align: center;
  color: var(--color-primary);
}

.site-header-sub {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: stretch;
}

.header-office {
  position: relative;
  top: 3px; /* 実測ベースライン y38（ボタン中央より3px下） */
  align-self: center;
  margin-right: 22px; /* 実測 x806 -> x828 */
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

/* フッターの事務所情報へのアンカー。通常はXDどおり本文と同じグレー(#393939)・下線なし。
   ホバー/フォーカス時だけグローバルナビと同じ表現（緑 + 2pxの下線がふわっと出る）にする */
.header-office a {
  position: relative;
  display: inline-block;
  color: inherit;
  transition: color 0.25s ease;
}

.header-office a::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 2px;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.header-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 154px; /* 実測 x828-982 */
  height: 58px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 16px; /* 1行目「お問い合わせ」= Bold 16px */
  font-weight: 700;
  line-height: 24px; /* 実測ベースライン y26 */
  text-align: center;
}

/* 2行目「（支援・参加）」だけ 14px（XDの混在テキスト） */
.header-cta-sub {
  font-size: 14px;
  line-height: 20px; /* 実測ベースライン y47 */
}

.header-sns {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 59px; /* 実測 LINE/SNS とも59px */
  height: 58px;
}

.header-sns--line {
  background: #06c755; /* 実測 */
}

.header-sns--list {
  background: var(--color-sns-blue); /* 実測 #2455D8 */
  color: var(--color-white);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}

/* ナビ実測: ビジョン x598 / プロフィール x731 / 活動報告 x896、右端 x1100（＝本文右端）
   項目間は 69px 均等。ロゴ地(y140)より 26px 上にベースライン整列 */
.global-nav {
  margin-bottom: 24px;
}

.global-nav-list {
  display: flex;
  gap: 69px;
}

.global-nav-list a {
  position: relative;
  display: inline-block;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 900;
  line-height: 24px;
  transition: color 0.25s ease;
}

/* ホバー時の下線。SPドロワーは ::after で「›」を出しているので ::before を使う */
.global-nav-list a::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 2px;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* タッチ端末でホバーが張り付かないよう、hover可能な環境だけに限定する */
@media (hover: hover) {
  .global-nav-list a:hover,
  .header-office a:hover {
    color: var(--color-primary);
  }

  .global-nav-list a:hover::before,
  .header-office a:hover::before {
    opacity: 1;
  }
}

/* キーボード操作でも同じ表現にする */
.global-nav-list a:focus-visible::before,
.header-office a:focus-visible::before {
  opacity: 1;
}

/* 「活動報告」に続く「（ブログ・ニュース）」だけ 14px（XDの混在テキスト）
   line-height:1 にしないと14px分のディセンダで行boxが1px伸び、
   ホバー下線の位置が他の項目とずれる */
.nav-note {
  font-size: 14px;
  line-height: 1;
}

.global-nav-list .current-menu-item > a,
.global-nav-list .current_page_item > a,
.global-nav-list .current-menu-ancestor > a,
.global-nav-list .current_page_parent > a {
  color: var(--color-primary);
}

/* ---------- フッター ----------
   XD実測: 緑帯 y3276-3611（h335） / コピーライト白帯 y3611-3669（h58） */
.site-footer {
  margin-top: 78px;
  padding: 52px 0 0;
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
}

.site-footer-inner {
  padding-bottom: 58px;
}

.footer-title {
  font-size: 20px;
  font-weight: 900;
  line-height: 29px;
}

.footer-address {
  margin-top: 14px;
  font-style: normal;
  font-size: 16px;
  font-weight: 900;
  line-height: 24px;
}

.footer-mail-note {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
}

/* フッターCTAは 179x55。ヘッダーCTAと違い2行とも14px */
.footer-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 179px;
  height: 55px;
  margin: 14px auto 0;
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.site-copyright {
  padding: 23px 0 18px;
  font-size: 12px;
  font-weight: 900;
  line-height: 17px;
  color: var(--color-primary);
  background: var(--color-white);
}

/* ---------- 公式SNSセクション ----------
   XD実測: 左カラム 468.5px / 右カラム 418.5px / 段間 113px */
.sns-section {
  margin-top: 88px;
}

.sns-main {
  display: grid;
  grid-template-columns: 4685fr 4185fr;
  gap: 113px;
  width: min(var(--content-width), 100% - var(--content-pad) * 2);
  margin: 40px auto 0;
}

/* 各カラムは縦フレックス。Instagram側はグリッド高が違うためボタンを下端で揃える */
.sns-main > div {
  display: flex;
  flex-direction: column;
}

/* アイコンはXDから書き出した2倍PNG。幅を実寸で固定し高さは比率に任せる
   （YouTube 44x30.5 / Instagram 37x37） */
.sns-service-icon {
  display: block;
  margin: 0 auto 20px;
}

.sns-youtube .sns-service-icon {
  width: 44px;
  height: auto;
  margin-top: 6px; /* XDではYouTubeアイコンだけInstagram側より約6px下 */
}

.sns-instagram .sns-service-icon {
  width: 37px;
  height: auto;
}

.sns-youtube-embed {
  width: min(381px, 100%);
  margin-inline: auto;
}

/* 埋め込み枠は 381x231（本番画像の比率）。画像の比率で高さが変わらないよう固定 */
.sns-youtube-embed img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 381 / 231;
  object-fit: cover;
}

.sns-youtube-caption {
  margin-top: 56px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
}

.sns-youtube-text {
  margin-top: 28px;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
}

/* XDのInstagramグリッドは手置きで 114.4x118.7 / 段間も不均等。
   実運用の正方サムネに合わせて 1:1 で組み、ガターのみ実測値を採用 */
.sns-instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 38px;
}

.sns-instagram-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Instagram Feed プラグインの出力。列数・余白はプラグインのフィード設定側で調整する */
.sns-instagram-feed {
  width: 100%;
}

.sns-button {
  display: block;
  width: 179px;
  margin: 32px auto 0;
  border-radius: var(--radius);
  background: var(--color-text);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

.sns-instagram .sns-button {
  margin-top: auto;
}

.sns-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 53px;
  width: min(var(--content-width), 100% - var(--content-pad) * 2);
  margin: 71px auto 0;
}

.sns-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 85px;
  padding-top: 9px;
  border-radius: var(--radius);
  background: #efefef;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
}

/* XD実測: X 31.5x29.5 / Facebook 40x40 / LINE 37.5x37.5 と大きさが違い、
   3枚とも上下中心がそろっている。40px固定スロットの中央に置いて揃える
   （支給PNGはいずれも実寸の2倍） */
.sns-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.sns-card-icon img {
  display: block;
  height: auto;
}

/* 記事0件のときのメッセージ（コンテンツ幅に収める） */
.no-post {
  width: min(var(--content-width), 100% - var(--content-pad) * 2);
  margin: 48px auto 0;
  text-align: center;
}

/* ---------- ページネーション ----------
   XD実測: 数字 30x30 / Prev・Next 65x30 / 角丸なし / 枠1px / 間隔21px / Bold 14px */
.pagination {
  margin-top: 54px;
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 21px;
}

.pagination .page-numbers {
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 28px; /* 30 - 枠1px x2 */
  text-align: center;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  width: 65px;
}

.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* 「…」はXDでは枠なし・前後21pxの余白の中央（実質2px幅の位置）に置かれている */
.pagination .page-numbers.dots {
  width: 2px;
  border: none;
  overflow: visible;
}

/* ---------- SPナビ開閉ボタン（ハンバーガー） ----------
   SP版XD実測: 33x33 / 角丸5px / 緑地。PCでは非表示 */
.nav-toggle {
  display: none;
  position: absolute;
  top: 20px;
  right: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 33px;
  height: 33px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: var(--color-primary);
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 17px;
  height: 2px;
  background: var(--color-white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

body.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

body.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---------- スクロール連動フェードイン ----------
   対象は各テンプレートの data-reveal 属性（マークアップが唯一の情報源）。
   .has-reveal は functions.php の wp_head インラインスクリプトが付ける。
   付かない環境（JS無効 / 動きを減らす設定 / 非対応ブラウザ）では
   このルール自体が当たらないので、コンテンツは常に表示される */
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}

.has-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 印刷時は必ず表示する（非表示のまま印刷されるのを防ぐ） */
@media print {
  .has-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 実装中プレースホルダー（納品前に必ず除去） ---------- */
.wip-note {
  padding: 40px 20px;
  border: 2px dashed #ccc;
  text-align: center;
  color: #999;
}

/* =================================================
   SP（〜767px）
   SP版XD実測（アートボード幅390 / iPhone14,13,12）
   共有リンク: https://xd.adobe.com/view/5d773016-1738-4132-bffb-8222d6443a3a-0824/
   ================================================= */
/* ---------- 写真カルーセル（矢印つき・循環）----------
   XDに指定は無く、指示による追加。
   「次へ」で1枚ぶん左へスライドし、先頭の写真がそのまま最後尾へ回る（循環）。
   スライド中に右端が空かないよう、JSが送る直前に先頭（または末尾）の複製を1枚足し、
   アニメーションが終わったら元の1枚を外して位置を戻す */
.photo-scroller {
  position: relative;
}

.photo-carousel-viewport {
  overflow: hidden;
}

.photo-carousel-track {
  will-change: transform;
}

.photo-scroller-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
}

.photo-scroller-arrow[hidden] {
  display: none; /* display:flex が [hidden] を上書きしてしまうため明示 */
}

.photo-scroller-arrow::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  /* 次の写真の端に重なることがあるので、白いふちどりで視認性を確保する */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
  transition: opacity 0.2s ease;
}

.photo-scroller-arrow--prev {
  left: 0;
}

.photo-scroller-arrow--prev::before {
  border-width: 9px 13px 9px 0;
  border-color: transparent var(--color-primary) transparent transparent;
}

.photo-scroller-arrow--next {
  right: 0;
}

.photo-scroller-arrow--next::before {
  border-width: 9px 0 9px 13px;
  border-color: transparent transparent transparent var(--color-primary);
}

@media (hover: hover) {
  .photo-scroller-arrow:hover::before {
    opacity: 0.6;
  }
}

/* クリック/タップでライトボックスを開くサムネイル */
.photo-zoom {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.photo-zoom img {
  display: block;
}

/* ---------- ライトボックス ----------
   ふわっと出すために opacity をtransitionさせる。
   閉じたあとは display:none に戻す（JSがフェード終了後に付ける）ので、
   万一transitionが動かない環境でも画面に居座らない */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 56px 16px;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox-img {
  display: block;
  max-width: min(92vw, 100%);
  max-height: 80vh;
  width: auto;
  height: auto;
  transform: scale(0.96);
  transition: transform 0.28s ease;
  /* 支給画像は422x274（表示211x137の2倍）。max-width では拡大されないので、
     もっと大きく見せたい場合は同じファイル名で大きい写真に差し替えればよい */
}

.lightbox.is-open .lightbox-img {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox-img {
    transition: none;
  }
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-white);
  cursor: pointer;
}

.lightbox-close {
  top: 8px;
  right: 8px;
  font-size: 28px;
  line-height: 1;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-nav[hidden] {
  display: none;
}

.lightbox-nav::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
}

.lightbox-nav--prev {
  left: 4px;
}

.lightbox-nav--prev::before {
  border-width: 11px 15px 11px 0;
  border-color: transparent var(--color-white) transparent transparent;
}

.lightbox-nav--next {
  right: 4px;
}

.lightbox-nav--next::before {
  border-width: 11px 0 11px 15px;
  border-color: transparent transparent transparent var(--color-white);
}

.lightbox-count {
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  margin: 0;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

body.lightbox-open {
  overflow: hidden;
}

/* ---------- SP / PC の出し分け ----------
   XDはPCとSPで改行位置が違う箇所がある（ビジョンの小見出しなど）。
   PCだけに出す記号は .pc-only、SPだけで改行させる <br> は br.sp-only を使う */
.pc-only {
  display: inline;
}

br.sp-only {
  display: none;
}

/* SPドロワー下部のSNS導線。PCでは使わない */
.nav-sns-list {
  display: none;
}

@media (max-width: 767px) {
  :root {
    --content-pad: 25px; /* SP実測: x25-365（幅340） */
  }

  .pc-only {
    display: none;
  }

  br.sp-only {
    display: inline;
  }

  /* ---------- ヘッダー ----------
     実測: ロゴ天7 / CTAボタン y83-119(340x36) / ハンバーガー y20(33x33)
     後援会事務所 は右上・ハンバーガーの左に小さく残す */
  .site-header-inner {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 0 0; /* ロゴ行box天 y7.7。下の余白は各ページ側で持つ */
    border-bottom: none; /* SP版XDにはヘッダー下の罫線が無い */
  }

  .site-branding {
    width: 100%;
    padding-right: 45px; /* ハンバーガーとの重なり回避 */
  }

  /* SP実測: くさふか Black34/lh49 x17基線47 / 英治 Black17 x161基線50 /
     えいじ Black11 x161基線30 / サブ Black12/lh17 中心x107基線69 → 外接 178x64.6 */
  /* SP実測ではロゴだけ本文左端(x25)より8px外側のx17から始まる */
  .site-logo {
    margin-left: -8px;
  }

  .site-logo a {
    width: 178px;
  }

  .site-logo-name {
    font-size: 34px;
    line-height: 49px;
  }

  .site-logo-kanji {
    margin-left: 8px;
    font-size: 17px;
  }

  .site-logo-ruby {
    top: 10px;
    left: 144px;
    font-size: 11px;
    line-height: 16px;
  }

  .site-logo-sub {
    margin-top: -1px;
    padding-left: 2px;
    font-size: 12px;
    line-height: 17px;
  }

  /* PCではabsolute配置の内包要素をSPでは個別に再配置するためdisplay:contentsで解除 */
  .site-header-sub {
    position: static;
    display: contents;
  }

  /* 実測: x256-322 / ベースラインy69（ロゴのサブと同じ高さ・SNSボタンの下） */
  .header-office {
    position: absolute;
    top: 56px;
    right: 43px;
    margin: 0;
    font-size: 11px;
    line-height: 16px;
  }

  /* SP版XDにはLINEボタンが描かれていないが、実運用で必要なため
     「SNS」ボタンの左に同じ33x33で並べる（ボタン間の余白10pxはSNS↔ハンバーガーと同じ） */
  .header-sns--line {
    display: flex;
    position: absolute;
    top: 20px;
    right: 86px; /* SNSボタン(right:43 / 幅33)の左に10px空けて */
    width: 33px;
    height: 33px;
    background: none; /* 画像自体が角丸の緑ボタン。下地を敷くと角に緑が出る */
  }

  .header-sns--line img {
    width: 100%;
    height: auto;
  }

  /* 実測: ハンバーガー(33x33)のすぐ左に「SNS」画像ボタンが小さく乗る */
  /* 実測: 33x33 / 文字はBold 10px 白・中心x306・ベースラインy41 */
  .header-sns--list {
    position: absolute;
    top: 20px;
    right: 43px;
    width: 33px;
    height: 33px;
    font-size: 10px;
    line-height: 33px;
  }

  /* SP実測: ボタン(25,83) 340x36 / 文字は中央・ベースラインy108
     「お問い合わせ」16px +「（支援・参加）」14px の混在。
     行送り20pxの行boxをボタン高36pxの中央に置くとベースラインがy108に合う */
  .header-cta {
    width: 100%;
    height: 36px;
    margin-top: 10px; /* ロゴ地y72.3 -> CTA天y83 */
    flex-direction: row;
    align-items: center; /* これが無いと文字が上下中央にならない */
    border-radius: var(--radius);
    font-size: 16px;
    line-height: 20px;
    gap: 0; /* XDは2つのテキストが連続。すき間は入れない */
  }

  .header-cta-sub {
    font-size: 14px;
    line-height: 20px;
  }

  .nav-toggle {
    display: flex;
  }

  /* ---------- グローバルナビ = SPではフルスクリーンドロワー ---------- */
  /* SP実測(sp6): ヘッダー地y119の下に開く。1項目めのボックス天y143.0 /
     区切り線 y174.5・213.5・253.5（1px #C9C9C9・x25.5-364.5）/
     SNS導線1行目ベースラインy284 */
  .global-nav {
    position: fixed;
    top: var(--drawer-top, 119px); /* 開いた時点のヘッダー地。JSが実寸を入れる */
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: none;
    margin-bottom: 0;
    padding: 14px 25px 40px; /* 1項目めの文字ボックス天y143（XD実測）に合わせる */
    background: var(--color-white);
    overflow-y: auto;
  }

  /* ドロワーを開いている間はヘッダーを画面天に固定して、XDどおり
     ヘッダーの下にメニューが開いて見えるようにする。
     ドロワー(.global-nav)はヘッダーの子孫なので、ヘッダー自身を上に重ねることはできない。
     ヘッダーの「中身」をドロワー(z-index:100)より上に持ち上げる */
  body.nav-open .site-header {
    position: sticky; /* fixedにすると本文が119px跳ねるのでstickyで流れに残す */
    top: 0;
    z-index: 101;
    background: var(--color-white);
  }

  body.nav-open .site-branding,
  body.nav-open .header-cta {
    position: relative;
    z-index: 102;
  }

  body.nav-open .header-office,
  body.nav-open .header-sns--list,
  body.nav-open .nav-toggle {
    z-index: 102; /* すでに position: absolute */
  }

  body.nav-open .global-nav {
    display: block;
  }

  body.nav-open {
    overflow: hidden;
  }

  .global-nav-list {
    display: block;
    gap: 0;
    overflow-x: visible;
  }

  .global-nav-list li {
    border-bottom: 1px solid #c9c9c9;
  }

  /* XD実測は 行送り24 + 上下7px + 罫線1px = ピッチ39px。
     ただしタップ領域が44pxを下回るため、上下10pxにして45pxピッチに広げている（指示による）。
     デザインどおりに戻すときは padding を 7px 0 に、.global-nav の padding-top を 17px に */
  .global-nav-list a {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* ラベルと注記は隣り合わせ。「>」だけ右端へ */
    padding: 10px 0;
    font-size: 16px;
    font-weight: 900;
    line-height: 24px;
  }

  /* 「活動報告（ブログ・ニュース）」の（）内はXD実測14px */
  .global-nav-list .nav-note {
    font-size: 14px;
    font-weight: 900;
    line-height: 24px;
  }

  .global-nav-list a::before {
    display: none;
  }

  /* 右端の「>」: XD実測 Bold 15px 緑・x340 */
  .global-nav-list a::after {
    content: "\203A"; /* › */
    margin-left: auto;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 700;
  }

  /* ---------- ドロワー下部のSNS導線 ---------- */
  .nav-sns-list {
    display: block;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
  }

  .nav-sns-list a,
  .nav-sns-office {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    color: var(--color-text);
  }

  .nav-sns-list a.is-disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  /* ---------- 記事カード（Top最新4件・活動報告一覧 共通）----------
     SP実測: サムネ158x106を左・テキスト列はx197(列間14)・カードピッチ130 */
  .post-card-grid {
    grid-template-columns: 1fr;
    gap: 22px; /* カード高108 + 22 = 実測ピッチ130 */
  }

  /* リンク直下は サムネ/日付/タイトル/つづき の4要素。
     フレックスだと4つとも横に並んでしまうので、グリッドで配置を明示する */
  .post-card-grid .post-card-link {
    display: grid;
    grid-template-columns: 158px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
  }

  .post-card-grid .post-card-thumb {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start; /* テキストが伸びてもサムネは比率どおり */
  }

  .post-card-grid .post-card-date {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .post-card-grid .post-card-title {
    grid-column: 2;
    grid-row: 2;
    margin-top: 5px;
  }

  .post-card-grid .post-card-more {
    grid-column: 2;
    grid-row: 3;
    margin-top: 3px;
  }

  /* カテゴリーバッジ（SP実測: 53x19 / 枠1.5px / 9px） */
  .post-card-grid .cat-badge {
    width: 53px;
    height: 19px;
    font-size: 9px;
    line-height: 16px;
  }

  /* ---------- カテゴリータブ（一覧上部・SP実測: 84x28 / 角丸10px / 15px） ---------- */
  .cat-tabs {
    gap: 20px; /* SP実測: タブ地x185 -> 次タブ天x205 */
  }

  .cat-tab {
    width: 84px;
    height: 28px;
    font-size: 15px;
    line-height: 24px;
  }

  /* ---------- ページネーション（SP実測: 数字27x27 / Prev･Next 58x27 / 間隔19px） ---------- */
  .pagination .nav-links {
    gap: 19px;
  }

  .pagination .page-numbers {
    width: 27px;
    height: 27px;
    line-height: 25px;
  }

  .pagination .page-numbers.prev,
  .pagination .page-numbers.next {
    width: 58px;
  }

  /* ---------- 公式SNS ---------- */
  /* ---------- 公式SNS（SP実測 / 1カラム縦積み） ----------
     見出し地y2436.8 -> YTアイコン天y2468.8 / YTボタン地y2940 -> IGアイコン天y2993 */
  .sns-section {
    margin-top: 54px;
  }

  .sns-main {
    grid-template-columns: 1fr;
    gap: 53px;
    margin-top: 32px;
  }

  .sns-youtube-caption {
    margin-top: 29px;
  }

  .sns-youtube-text {
    margin-top: 10px;
  }

  .sns-youtube .sns-button {
    margin-top: 14px;
  }

  /* PCでは margin-top:auto で右カラム下端に揃えているが、SPは縦積みなので実測値にする */
  .sns-instagram .sns-button {
    margin-top: 20px;
  }

  /* 実測: 92.9x96.4 を3列（x25/149.9/272.1）/ 列間約30。
     正方サムネで組んでいるぶん高さが足りないので段間で吸収する */
  .sns-instagram-grid {
    gap: 24px 30px;
  }

  .sns-instagram .sns-service-icon {
    margin-bottom: 23px; /* アイコン地y3030 -> グリッド天y3052.8 */
  }

  .sns-list {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 53px;
  }

  /* SP実測: カードは298幅で中央（x46-344） */
  .sns-card {
    width: 298px;
    margin-inline: auto;
  }

  /* 実測: SNSカード地y3776.6 -> フッター緑天y3827 */
  .site-footer {
    margin-top: 50px;
  }
}

/* =================================================
   動きを減らす設定（OS側）への配慮
   ================================================= */
@media (prefers-reduced-motion: reduce) {
  /* 動きを減らす設定では、アンカーの滑らかスクロールとホバーのフェードを切る */
  html {
    scroll-behavior: auto;
  }

  .global-nav-list a,
  .global-nav-list a::before,
  .header-office a,
  .header-office a::before {
    transition: none;
  }

  /* 保険: 何らかの理由で has-reveal が付いた場合でも隠さない */
  .has-reveal [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}