/*
Theme Name: 黒田実 公式サイト
Theme URI: https://i-katano.com/
Author: 黒田実事務所
Description: 交野市議会議員・黒田実の公式サイト用テーマ。外部CDNに依存せず、Tailwind/Noto Sans JP/Remixicon を同梱。noteの最新記事は fetch_feed() で自動取得。フォームは Contact Form 7。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: All Rights Reserved
Text Domain: kuroda-minoru
*/

/* ============================================
   黒田実 公式サイト — Custom Styles
   Tailwind CDN を補助する最小限のスタイル
   ============================================ */

/* 共通フォント */
* {
  font-family: 'Noto Sans JP', sans-serif;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
  /* 固定ナビ(h-20 = 5rem)の下に見出しが潜らないよう、アンカー着地位置をオフセット */
  scroll-padding-top: 5rem;
}

/* 3行クランプ（既存LPで使用） */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tailwindに /8 のopacityが無いので個別定義 */
/* 危機セクションのカード：背景画像の上でも文字が安定して読めるよう、
   濃紺の半透明グラス（背景を沈める）。3カラムで見え方も均一になる。 */
.bg-white-8 {
  background-color: rgba(17, 71, 130, 0.56);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.hover\:bg-white-12:hover {
  background-color: rgba(17, 71, 130, 0.70);
}
.border-white-15 {
  border-color: rgba(255, 255, 255, 0.16);
}

/* ============================================
   フェードイン（スクロール連動）
   - 初期: HTMLは普通に可視（SEOクローラーやJS無効でも見える）
   - JSが「画面外の要素」だけ .is-hidden-pre を付けて隠す
   - IntersectionObserverで viewport に入ったら .is-visible を付けて表示
   ============================================ */
[data-fade-in] {
  /* デフォルト = 何もしない（可視） */
}
[data-fade-in].is-hidden-pre {
  opacity: 0;
  transform: translateY(2rem);
}
[data-fade-in].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
/* delay バリエーション（data-fade-delay 属性で指定） */
[data-fade-in][data-fade-delay="100"].is-visible { transition-delay: 0.1s; }
[data-fade-in][data-fade-delay="200"].is-visible { transition-delay: 0.2s; }
[data-fade-in][data-fade-delay="300"].is-visible { transition-delay: 0.3s; }
[data-fade-in][data-fade-delay="400"].is-visible { transition-delay: 0.4s; }
[data-fade-in][data-fade-delay="500"].is-visible { transition-delay: 0.5s; }
[data-fade-in][data-fade-delay="600"].is-visible { transition-delay: 0.6s; }
[data-fade-in][data-fade-delay="700"].is-visible { transition-delay: 0.7s; }

/* ============================================
   Hero — ナビバー
   ============================================ */
.hero-nav {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  /* backdrop-filter はトランジションに含めない（アニメーションするとモバイルで
     毎フレーム再描画されカクつくため）。blur は瞬時に切替、色だけ滑らかに。 */
  transition: background-color 0.5s, border-color 0.5s;
}
.hero-nav.is-scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom-color: #f3f4f6;
}
.hero-nav .nav-brand-name {
  color: #ffffff;
  transition: color 0.3s;
}
.hero-nav.is-scrolled .nav-brand-name {
  color: #036eb8;
}
.hero-nav .nav-brand-sub {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s;
}
.hero-nav.is-scrolled .nav-brand-sub {
  color: rgba(3, 110, 184, 0.7);
}
.hero-nav .nav-cta {
  background-color: #ffffff;
  color: #2a7a4a;
  transition: background-color 0.3s, color 0.3s;
}
.hero-nav.is-scrolled .nav-cta {
  background-color: #2a7a4a;
  color: #ffffff;
}
.hero-nav .nav-cta:hover {
  opacity: 0.9;
}
.hero-nav.is-scrolled .nav-cta:hover {
  background-color: #236339;
  opacity: 1;
}
.hero-nav .menu-toggle-icon {
  color: #ffffff;
  transition: color 0.3s;
}
.hero-nav.is-scrolled .menu-toggle-icon {
  color: #036eb8;
}
/* 最上部（透明ナビ時）の可読性：明るい背景（桜・空）でも白文字が溶けないよう
   柔らかい影を足す。スクロール後は白背景になるので影は消す。 */
.hero-nav:not(.is-scrolled):not(.menu-open) .nav-brand-name,
.hero-nav:not(.is-scrolled):not(.menu-open) .nav-brand-sub,
.hero-nav:not(.is-scrolled):not(.menu-open) .menu-toggle-icon,
.hero-nav:not(.is-scrolled):not(.menu-open) .fontsize-label {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* ============================================
   モバイルメニュー（ダーク全画面オーバーレイ）
   トップ/フッターと同じ濃紺の世界観で統一。全画面なので「最上部で開くと
   ナビが透明で桜が透ける」問題も構造的に解消（オーバーレイが背面を覆う）。
   背の低い端末でもスクロール可（overflow-y:auto）。
   ============================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;                 /* ナビ上段(relative z-50)の下・ヒーロー等の上 */
  background: linear-gradient(160deg, #1b4a7d 0%, #143a66 45%, #0d2747 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* メニュー内スクロールが背面に伝播しないように */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity 0.35s ease,
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.4s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.35s ease,
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s;
}
.mobile-menu-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5.75rem 1.75rem 1.75rem;   /* 上=固定ナビ(h-20)分の余白を確保。項目数増のためコンパクト化 */
}

/* メニュー項目 */
.mobile-menu-links {
  display: flex;
  flex-direction: column;
}
.mobile-menu-links a {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.62rem 0.25rem;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  /* スタッガー初期状態 */
  opacity: 0;
  transform: translateY(8px);
}
.mobile-menu-links a::before {
  content: "";
  width: 4px;
  height: 1.15em;
  border-radius: 9999px;
  background: #c8a000;
  flex-shrink: 0;
  transition: height 0.2s ease;
}
/* 左アクセントをブランド3色で巡回（濃紺で映えるトーン） */
.mobile-menu-links a:nth-child(3n + 1)::before { background: #c8a000; } /* gold */
.mobile-menu-links a:nth-child(3n + 2)::before { background: #3a9b63; } /* green */
.mobile-menu-links a:nth-child(3n)::before     { background: #4f86d6; } /* blue */
.mobile-menu-links a:active { color: rgba(255, 255, 255, 0.65); }

/* 開いた時にスタッガーで順に出す */
.mobile-menu.is-open .mobile-menu-links a {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s ease;
}
.mobile-menu.is-open .mobile-menu-links a:nth-child(1) { transition-delay: 0.06s; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(2) { transition-delay: 0.10s; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(3) { transition-delay: 0.14s; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(4) { transition-delay: 0.18s; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(5) { transition-delay: 0.22s; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(6) { transition-delay: 0.26s; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(7) { transition-delay: 0.30s; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(8) { transition-delay: 0.34s; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(9) { transition-delay: 0.38s; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(10) { transition-delay: 0.42s; }

/* フッター（CTA + SNS）：下端固定(margin-top:auto)だと、項目が少ない時に
   リンクとの間に大きな余白ができてしまうため、リンク直下に自然な間隔で続ける。 */
.mobile-menu-footer {
  margin-top: 2.25rem;
}
.mobile-menu-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem 1.5rem;
  border-radius: 9999px;
  background: #2a7a4a;
  color: #ffffff;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  transition: background-color 0.2s ease;
}
.mobile-menu-cta:active { background: #236339; }
.mobile-menu-sns {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 1.75rem;
}
.mobile-menu-sns a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.4rem;
  line-height: 1;
  transition: color 0.2s ease;
}
.mobile-menu-sns a:active { color: #ffffff; }

/* メニューを開いている間：ナビは透明＋白文字で固定（スクロール位置に依らず統一） */
.hero-nav.menu-open,
.hero-nav.menu-open.is-scrolled {
  background-color: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.hero-nav.menu-open .nav-brand-name,
.hero-nav.menu-open.is-scrolled .nav-brand-name { color: #ffffff; }
.hero-nav.menu-open .nav-brand-sub,
.hero-nav.menu-open.is-scrolled .nav-brand-sub { color: rgba(255, 255, 255, 0.75); }
.hero-nav.menu-open .menu-toggle-icon,
.hero-nav.menu-open.is-scrolled .menu-toggle-icon { color: #ffffff; }

/* メニュー展開中は背面スクロールをロック（最上部の進捗バーも隠す） */
body.menu-locked { overflow: hidden; }
body.menu-locked [data-scroll-progress] { display: none; }

/* ============================================
   Hero — スライドショー
   ============================================ */
.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1500ms ease-in-out;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1500ms ease-in-out;
}
.hero-slide.is-active {
  z-index: 2;
  opacity: 1;
}
.hero-slide.is-active img {
  transform: scale(1.06);
  transition: transform 7500ms ease-out;
}
.hero-slide.is-prev {
  z-index: 1;
}

/* ヒーロー1枚目（人物）のデフォルト位置（PC = 1024px以上）。
   スマホ専用の調整は、ファイル末尾「モバイル ヒーロー」セクション参照。 */
.hero-slide .hero-img-person {
  object-position: center top;
}
/* タブレット（640〜1023px / 主に縦持ち）: center だと縦長クロップで左にいる人物の
   左半分が切れるため、人物側へパン（38%）して顔全体を残す。PC・スマホは別ルール。 */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-slide .hero-img-person {
    object-position: 38% center;
  }
}

/* Hero オーバーレイ（スライドごとに方向を切替） */
.hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  transition: background 1500ms ease-in-out;
}
.hero-overlay[data-overlay="text-right"] {
  background: linear-gradient(to left, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.32) 45%, transparent 100%);
}
.hero-overlay[data-overlay="text-left"] {
  background: linear-gradient(to right, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.20) 45%, transparent 100%);
}

/* Hero テキストの可読性：背景写真の上でも文字が浮くよう、ごく柔らかい影（ヒーロー限定）。
   ぼかし強め・薄めで、黒フチのような安っぽさは出さない。 */
.hero-text-block h1,
.hero-text-block p {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
}

/* Hero テキスト位置（スライドに応じて左右切替） */
.hero-text-block.is-text-right {
  margin-left: auto;
  margin-right: 3rem;
  text-align: right;
}
@media (min-width: 1024px) {
  .hero-text-block.is-text-right {
    margin-right: 6rem;
  }
}
.hero-text-block.is-text-left {
  margin-left: 3rem;
  text-align: left;
}
@media (min-width: 1024px) {
  .hero-text-block.is-text-left {
    margin-left: 6rem;
  }
}
.hero-text-block .accent-row {
  display: flex;
  align-items: center;
}
.hero-text-block.is-text-right .accent-row {
  flex-direction: row-reverse;
}
.hero-text-block.is-text-left .accent-row {
  flex-direction: row;
}
.hero-text-block.is-text-right .cta-group {
  justify-content: flex-end;
}

/* Hero テキスト entered アニメーション */
[data-hero-content] [data-entered] {
  opacity: 0;
  transform: translateY(1rem);
}
[data-hero-content].is-entered [data-entered] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-hero-content].is-entered [data-entered][data-entered-delay="150"] { transition-delay: 0.15s; }
[data-hero-content].is-entered [data-entered][data-entered-delay="300"] { transition-delay: 0.3s; }
[data-hero-content].is-entered [data-entered][data-entered-delay="400"] { transition-delay: 0.4s; }
[data-hero-content].is-entered [data-entered][data-entered-delay="500"] { transition-delay: 0.5s; }

/* Hero スライドドット */
.hero-dot {
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.4);
  width: 0.5rem;
  height: 0.5rem;
  transition: all 0.5s;
  cursor: pointer;
}
.hero-dot:hover {
  background-color: rgba(255, 255, 255, 0.7);
}
.hero-dot.is-active {
  background-color: #ffffff;
  width: 2rem;
}

/* ============================================
   FontSizeToggle
   ============================================ */
.fontsize-btn {
  transition: all 0.2s;
}
.hero-nav .fontsize-label {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s;
}
.hero-nav.is-scrolled .fontsize-label {
  color: #6b7280;
}
.hero-nav .fontsize-btn {
  color: rgba(255, 255, 255, 0.7);
  background-color: transparent;
}
.hero-nav .fontsize-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.hero-nav.is-scrolled .fontsize-btn {
  color: #6b7280;
}
.hero-nav.is-scrolled .fontsize-btn:hover {
  background-color: #f3f4f6;
}
.hero-nav .fontsize-btn.is-active {
  background-color: #ffffff;
  color: #036eb8;
}
.hero-nav.is-scrolled .fontsize-btn.is-active {
  background-color: #036eb8;
  color: #ffffff;
}

/* ============================================
   SideNav
   ============================================ */
.side-nav {
  opacity: 0;
  transform: translateY(-50%) translateX(1rem);
  pointer-events: none;
  transition: opacity 0.5s, transform 0.5s;
}
.side-nav.is-visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}
.side-nav-item-label {
  opacity: 0.45;
  color: #6b7280;
  background-color: transparent;
  transition: opacity 0.3s, color 0.3s, background-color 0.3s;
}
.side-nav-item.is-active .side-nav-item-label {
  opacity: 1;
}
.side-nav-item-dot {
  width: 8px;
  height: 8px;
  /* 各セクション色（リングと同色）。非アクティブはミュート、アクティブでフル発色 */
  background-color: var(--dot-color, #d1d5db);
  opacity: 0.5;
  border-radius: 9999px;
  transition: width 0.3s, height 0.3s, background-color 0.3s, opacity 0.3s;
}
.side-nav-item:hover .side-nav-item-dot {
  opacity: 0.8;
}
.side-nav-item.is-active .side-nav-item-dot {
  width: 20px;
  height: 20px;
  opacity: 1;
}
.side-nav-item-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid transparent;
  opacity: 0;
}
.side-nav-item.is-active .side-nav-item-ring {
  opacity: 1;
  animation: side-nav-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes side-nav-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* ============================================
   CrisisData — バー fill アニメ
   ============================================ */
.crisis-bar-fill {
  width: 0%;
  transition: width 1200ms ease-out;
}
.crisis-bar-fill[data-bar-delay="400"] { transition-delay: 0.4s; }

.is-visible .crisis-bar-fill,
[data-fade-in].is-visible .crisis-bar-fill {
  /* 各バーの width は data-bar-width で指定し、JSが is-visible 後にセットする */
}

/* CrisisData の10マス比率グリッド */
.crisis-grid-cell {
  transition: all 0.5s;
}

/* ============================================
   Policies — タブUI
   ============================================ */
.policies-tab-btn {
  border-bottom: 2px solid transparent;
  color: #9ca3af;
  transition: all 0.2s;
}
.policies-tab-btn:hover {
  color: #4b5563;
}
.policies-tab-btn.is-active {
  /* color と border-color は JS でインライン指定 */
}

.policies-content {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.policies-content.is-animating-out {
  opacity: 0;
  transform: translateY(0.75rem);
}
/* 6パネルを同一セルに重ね、常に最大高さを確保（次へ/前への位置を固定） */
.policies-stage {
  display: grid;
}
/* タブだけで操作（前へ/次へ・ドット廃止）。アクティブパネルのみ表示し、
   カードは内容ぶんの高さ＝余白問題なし。切替時はセクション高さが自然に追従。 */
.policies-stage > [data-policies-panel] {
  display: none;
}
.policies-stage > [data-policies-panel].is-active {
  display: block;
}

.policies-dot {
  width: 6px;
  height: 6px;
  background-color: #e5e7eb;
  border-radius: 9999px;
  transition: width 0.3s, background-color 0.3s;
  cursor: pointer;
}
.policies-dot.is-active {
  width: 20px;
}

/* ============================================
   Scroll indicator（Hero 右下）
   ============================================ */
.scroll-indicator-bar {
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============================================
   Scroll progress（最上部の進捗バー）
   ============================================ */
[data-scroll-progress-fill] {
  transition: width 0.15s ease-out;
}

/* ============================================
   モバイル ヒーロー（〜639px）
   横長写真を縦画面に cover で入れると人物が見切れ、右寄せテキストとも干渉する。
   そこでスマホでは「人物=上 / テキスト=下」に分離し、両方をクリアに見せる。
   タブレット・PC（640px〜）は一切変更しない。
   ※ 同じ特異度のベース規則に勝てるよう、ファイル末尾に配置している。
   ============================================ */
@media (max-width: 639px) {
  /* iOS Safari/Chrome の 100vh は「ツールバーが引っ込んだ状態」の高さで計算されるため、
     初回表示ではヒーロー下端（CTA）がブラウザのバーの裏に隠れる。
     svh（ツールバー表示時の実画面高）に切り替えて、テキスト塊ごと可視領域へ収める。
     svh 非対応の古いブラウザは1行目の 100vh にフォールバック。 */
  [data-hero-slideshow] {
    height: 100vh;
    height: 100svh;
  }
  /* 透明ナビの裏だけ薄く暗くして、桜・空などの明るい背景でも白文字を読めるようにする。
     h-20(5rem)のナビ＋フェード分。顔はこれより下に来るので被らない。 */
  .hero-overlay[data-overlay]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 7.5rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.22) 55%, transparent 100%);
  }
  /* スライド1(桜)は全サイズで横長画像を共有 → スマホは人物側へパン(28%)+上起点ズームで
     顔を保ちつつ胴体を控えめに。Ken Burns の is-active 変形も上書きするため scale を併記。 */
  .hero-slide .hero-img-person,
  .hero-slide.is-active .hero-img-person {
    object-position: 28% center;
    transform: scale(1);
    transform-origin: 28% top;
  }
  /* スライド2/3は <picture> で縦クロップ済みのSP画像を配信 → 中央表示でちょうど収まる。 */
  .hero-slide img:not(.hero-img-person) {
    object-position: center center;
  }
  /* テキストブロックを画面下部へ・全幅に。
     横の揃えは PC と同じ右揃えのまま（text-align / accent-row / cta-group はオーバーライドしない）。
     上の安全余白(5.5rem)で、文字サイズ「特大」等で内容が伸びても固定ナビ(h-20)に被らせない。 */
  [data-hero-content] {
    align-items: flex-end;
    padding-top: 5.5rem;
  }
  .hero-text-block.is-text-right {
    margin: 0;
    max-width: none;
    width: 100%;
    /* 人物が画面いっぱいに入るスマホでは、テキスト塊を画面下部＝紺スーツの上まで下げて
       顔（中央）との被りを避ける。svh指定でツールバー表示時の実画面高に比例させ、
       初回表示からCTAまで確実に見せる（非対応ブラウザは vh にフォールバック）。 */
    padding-bottom: 9vh;
    padding-bottom: 11svh;
  }
  /* スライドのドット（ページネーション）はスマホだけ少し下げて、
     CTAボタンとの間に呼吸できる余白を作る（Tailwindの bottom-10=2.5rem を上書き）。 */
  [data-hero-slideshow] .bottom-10 {
    bottom: 1.4rem;
  }
  /* スローガンはスマホだけ一回り縮小（PC/タブレットの text-6xl 等は無変更）。
     行も少し詰めて塊を低く保ち、顎より下のスーツ帯に収める。 */
  .hero-text-block h1 {
    font-size: 2.05rem;
    line-height: 1.22;
    margin-bottom: 1.1rem;
  }
  /* 肩書き＋CTA の間隔も詰めて、塊全体を下寄せ・コンパクトに。 */
  .hero-text-block .mb-8 {
    margin-bottom: 1.25rem;
  }
  /* アクセント行（未来への責任 / 対立ではなく対話）: スマホでは丸ごと非表示。
     縦の圧迫とナビとの被りの主因になるため、スローガン＋氏名＋CTAに絞る。
     タブレット/PC（640px〜）は説明文付きでフル表示のまま。 */
  .hero-accents {
    display: none;
  }
  /* オーバーレイを「下から暗く」に切替。見出しが顔の下部に掛かっても読めるよう、
     下〜中盤をしっかり暗くしつつ、顔（上部）は明るく保つ。 */
  .hero-overlay[data-overlay] {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.62) 32%,
      rgba(0, 0, 0, 0.28) 55%,
      rgba(0, 0, 0, 0.05) 78%,
      transparent 100%
    );
  }
}

/* ============================================
   モバイル「3つの信念」（〜639px）
   2カラム（左:数字 / 右:本文）はスマホだと本文が窮屈なので、1カラム（本文=全幅）にし、
   数字は右上に薄い背景ウォーターマークとして配置する。
   タブレット・PC（640px〜）は従来の2カラムのまま（このルールは効かない）。
   ============================================ */
@media (max-width: 639px) {
  #philosophies .philo-num {
    position: absolute;
    top: -1.2rem;
    right: 0;
    width: auto !important;      /* w-16 などのユーティリティ幅を上書き */
    font-size: 8rem !important;  /* インラインの clamp(...) を上書き */
    line-height: 1;
    z-index: 0;                  /* 本文（.relative.z-10）の背面へ */
  }
}

/* ============================================
   横向きスマホ（縦幅が低い端末）
   h-screen 固定だと「ラベル+大見出し+氏名+アクセント+CTA」が縦に収まらず
   overflow-hidden で上下が見切れる。高さを内容に追従させ（height:auto）、
   最低でも画面高さは確保（min-height:100svh）して、見切れを解消する。
   縦持ち・タブレット・PCには影響しない（orientation:landscape かつ低い縦幅のみ）。
   ============================================ */
@media (orientation: landscape) and (max-height: 600px) {
  [data-hero-slideshow] {
    height: auto !important;
    min-height: 100vh;
    min-height: 100svh;
  }
  [data-hero-content] {
    height: auto !important;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 5.5rem;   /* 固定ナビ(h-20)の下に内容が潜らないよう確保 */
    padding-bottom: 2.5rem;
  }
}

/* ============================================
   応援する会 参加フォーム
   静的版(.join-input) と WP/CF7移行後のデフォルト出力(.wpcf7-*) の両方を
   同じ見た目に。→ CF7ショートコードを貼るだけ・class指定不要でデザインが崩れない。
   すべて .join-form-area スコープ内に限定（他に影響させない）。
   ============================================ */
/* 入力欄（静的 .join-input ＋ CF7の text / tel / email を一括） */
.join-form-area input.join-input,
.join-form-area .wpcf7-form input[type="text"],
.join-form-area .wpcf7-form input[type="tel"],
.join-form-area .wpcf7-form input[type="email"] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background-color: #ffffff;
  font-size: 0.9375rem;          /* 高齢の方も読みやすいよう少し大きめ */
  line-height: 1.4;
  color: #1f2937;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.join-form-area input.join-input::placeholder,
.join-form-area .wpcf7-form input::placeholder {
  color: #9ca3af;
}
.join-form-area input.join-input:focus,
.join-form-area .wpcf7-form input[type="text"]:focus,
.join-form-area .wpcf7-form input[type="tel"]:focus,
.join-form-area .wpcf7-form input[type="email"]:focus {
  outline: none;
  border-color: #2a7a4a;
  box-shadow: 0 0 0 3px rgba(42, 122, 74, 0.15);
}
/* CF7は各フィールドを <p> で改行出力 → 静的の gap と同じ縦間隔に揃える */
.join-form-area .wpcf7-form p {
  margin: 0 0 0.75rem;
}
.join-form-area .wpcf7-form p:last-of-type {
  margin-bottom: 0;
}
.join-form-area .wpcf7-form-control-wrap {
  display: block;
}
/* メッセージ欄（静的 textarea.join-input ＋ CF7の textarea を一括） */
.join-form-area textarea.join-input,
.join-form-area .wpcf7-form textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background-color: #ffffff;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #1f2937;
  font-family: inherit;
  resize: vertical;
  min-height: 4.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.join-form-area textarea.join-input::placeholder,
.join-form-area .wpcf7-form textarea::placeholder {
  color: #9ca3af;
}
.join-form-area textarea.join-input:focus,
.join-form-area .wpcf7-form textarea:focus {
  outline: none;
  border-color: #2a7a4a;
  box-shadow: 0 0 0 3px rgba(42, 122, 74, 0.15);
}
/* ご用件ラジオ（応援したい / ご意見・ご質問）＝選択をボタン状に */
.join-purpose {
  display: flex;
  gap: 0.5rem;
  border: 0;       /* fieldset 既定の枠線を消す */
  margin: 0;
  padding: 0;
  min-width: 0;
}
.join-purpose label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background-color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  color: #4b5563;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.join-purpose input {
  accent-color: #2a7a4a;
}
.join-purpose label:has(input:checked) {
  border-color: #2a7a4a;
  background-color: #eef6f0;
  color: #1f6b3e;
}
/* CF7移行時のラジオ出力の最低限の体裁 */
.join-form-area .wpcf7-radio .wpcf7-list-item {
  margin: 0 1rem 0 0;
}
/* ラジオをチップ状に（年代・希望手段・用件など）＝応募ページ用 */
.join-form-area .radio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.join-form-area .radio-chips label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  background-color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  color: #4b5563;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
/* 単一選択（ラジオ）・複数選択（チェック）とも、文字の前に ○ / □ を表示して分かりやすく。 */
.join-form-area .radio-chips input[type="radio"],
.join-form-area .radio-chips input[type="checkbox"] {
  accent-color: #2a7a4a;
  flex-shrink: 0;
}
.join-form-area .radio-chips label:has(input:checked) {
  border-color: #2a7a4a;
  background-color: #eef6f0;
  color: #1f6b3e;
}
/* フォームのラベル＋必須/任意バッジ（応募ページ用） */
.join-form-area .field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #374151;
  margin-bottom: 0.45rem;
}
.join-form-area .badge-req,
.join-form-area .badge-opt {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.06rem 0.42rem;
  border-radius: 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.join-form-area .badge-req {
  background-color: #fdeaea;
  color: #c0392b;
}
.join-form-area .badge-opt {
  background-color: #eef1f5;
  color: #8a93a0;
}
.join-form-area .field-note {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 0.3rem;
  line-height: 1.5;
}
/* 用件タブ（応援=緑 / 意見=金 / 取材=青）＝該当フォームの表示切替。選択中はカテゴリー色で塗り＋白文字 */
.form-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.form-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.8rem 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.8rem;
  background-color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  color: #6b7280;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-tab:hover {
  border-color: #d1d5db;
  color: #374151;
}
.form-tab.is-active {
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.form-tab.is-active[data-purpose="support"] {
  background-color: #2a7a4a;
}
.form-tab.is-active[data-purpose="opinion"] {
  background-color: #b08800;
}
.form-tab.is-active[data-purpose="press"] {
  background-color: #036eb8;
}
@media (max-width: 420px) {
  .form-tab {
    font-size: 0.78rem;
    padding: 0.7rem 0.25rem;
  }
}
/* 送信ボタン（静的 <button> は inline で緑。CF7の .wpcf7-submit を同じ緑ボタンに） */
.join-form-area .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.25rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 9999px;
  background-color: #2a7a4a;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.join-form-area .wpcf7-submit:hover {
  background-color: #236339;
}
/* CF7の検証チップ・送信結果メッセージ・スピナーの最低限の体裁 */
.join-form-area .wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.join-form-area .wpcf7-response-output {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.join-form-area .wpcf7-spinner {
  margin: 0.5rem auto 0;
}

/* ===== 氏名のルビ（ふりがな）：黒(くろ)田(だ) 実(みのる) ===== */
.name-ruby {
  /* ルビ分の上余白を確保（leading-none による上クリップを防ぐ） */
  line-height: 1.35;
}
.name-ruby rt {
  font-size: 0.32em;
  font-weight: 500;
  letter-spacing: 0.04em;
  /* ベース文字より少し上に余白 */
  transform: translateY(0.1em);
  ruby-align: center;
}
/* 暗い背景（ヒーロー・プロフィール・フッター）用：読みは白の薄め */
.name-ruby--light rt {
  color: rgba(255, 255, 255, 0.72);
}

/* ============================================
   サイトローディング（初回のみ・濃紺→カーテンリビール）
   ============================================ */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0a78c4 0%, #036eb8 50%, #025c98 100%);
  /* JSが is-done を付けたらカーテンが上へ抜ける */
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s 0.7s;
  /* JS不発時のフォールバック：6秒で自動フェードアウト（opacityなので上記transformと非干渉） */
  animation: site-loader-failsafe 0.6s ease forwards 6s;
}
.site-loader.is-done {
  transform: translateY(-100%);
  visibility: hidden;
}
.site-loader-inner {
  text-align: center;
  padding: 2rem;
}
.site-loader-name {
  color: #ffffff;
  font-weight: 900;
  font-size: clamp(2.2rem, 8vw, 3.8rem);
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(12px);
  animation: site-loader-in 0.6s ease forwards 0.2s;
}
.site-loader-title {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
  font-size: clamp(0.72rem, 3vw, 0.9rem);
  letter-spacing: 0.25em;
  margin-bottom: 0.75rem;
  opacity: 0;
  transform: translateY(10px);
  animation: site-loader-in 0.6s ease forwards 0.05s;
}
.site-loader-slogan {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
  font-size: clamp(0.8rem, 3.2vw, 1.05rem);
  letter-spacing: 0.25em;
  opacity: 0;
  transform: translateY(10px);
  animation: site-loader-in 0.6s ease forwards 0.4s;
}
.site-loader-accent { color: #ffd24d; }
.site-loader-bars {
  margin: 1.9rem auto 0;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.site-loader-bar {
  position: relative;
  width: 46px;
  height: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.site-loader-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  animation: site-loader-fill 0.85s ease forwards;
}
.site-loader-bar:nth-child(1)::after { animation-delay: 0.90s; }
.site-loader-bar:nth-child(2)::after { animation-delay: 1.75s; }
.site-loader-bar:nth-child(3)::after { animation-delay: 2.60s; }
.site-loader-tag {
  margin-top: 1.6rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  opacity: 0;
  animation: site-loader-in 0.6s ease forwards 0.6s;
}

@keyframes site-loader-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes site-loader-fill {
  to { transform: scaleX(1); }
}
@keyframes site-loader-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ローダー表示中はスクロールロック（JSが付与） */
body.loader-active { overflow: hidden; }

/* 動きを抑える設定では演出を出さず即非表示 */
@media (prefers-reduced-motion: reduce) {
  .site-loader { display: none !important; }
}

/* ============================================
   Contact Form 7 出力の調整（WordPress移行後に効く）
   CF7は各タグを <span class="wpcf7-form-control-wrap"> ...
   <span class="wpcf7-radio"><span class="wpcf7-list-item"><label>…
   と多重に包む。display:contents で包みを“無かったこと”にして、
   静的版と同じ .radio-chips label のチップ装飾をそのまま効かせる。
   ============================================ */
.join-form-area .radio-chips .wpcf7-form-control-wrap,
.join-form-area .radio-chips .wpcf7-form-control,
.join-form-area .radio-chips .wpcf7-list-item {
  display: contents;
}

/* 同意チェック（[acceptance]）を静的版と同じ体裁に */
.join-form-area .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}
.join-form-area .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #4b5563;
  cursor: pointer;
}
.join-form-area .wpcf7-acceptance input[type='checkbox'] {
  margin-top: 0.25rem;
  flex-shrink: 0;
  accent-color: #2a7a4a;
}

/* 送信ボタンの色を用件タブに合わせる（既定は緑。意見＝金、取材＝青） */
[data-purpose-form='opinion'] .wpcf7-submit {
  background-color: #b08800;
}
[data-purpose-form='opinion'] .wpcf7-submit:hover {
  background-color: #8f6d00;
}
[data-purpose-form='press'] .wpcf7-submit {
  background-color: #036eb8;
}
[data-purpose-form='press'] .wpcf7-submit:hover {
  background-color: #025b96;
}

/* 非表示タブの中身をキーボード操作から確実に外す */
.join-form-area[hidden] {
  display: none !important;
}