/* ================================================================
   custom.css — ホワイト・ブルーテーマ
   レイアウト構造は藍・誠テーマと同一、配色のみ白×ブルーに変更
   ================================================================ */


/* ================================================================
   横スクロール抑止 & カラムレイアウト修正
   ================================================================ */
html { overflow-x: hidden; }

.pc #main_contents,
.pc #header_slider,
.pc #index_3box,
.pc #page_header,
.pc #page_header_overlay,
.pc #page_header_title,
.pc #page_header_no_image,
.pc #bread_crumb,
.pc #footer_banner,
.pc #footer_bottom,
.pc #copyright {
  width:      auto !important;
  min-width:  0 !important;
  box-sizing: border-box;
}

.pc #side_col { display: none !important; }
/* SPは固定ナビが無いため、サイドバー（最近の記事/カテゴリー/アーカイブ等）は表示する
   （＝ここではSP用の非表示CSSは入れない）。ダミーのバナー類は管理画面のウィジェットから削除して対応。 */
.pc #left_col { width: auto !important; float: none !important; min-width: 0 !important; }

.pc #main_col {
  width:      auto !important;
  min-width:  0 !important;
  padding:    0 40px !important;
  box-sizing: border-box;
}


/* ================================================================
   左固定サイドバー — 構造変換（PC のみ）
   ================================================================ */

.pc #header {
  position:       fixed !important;
  left:           0 !important;
  right:          auto !important;
  top:            0 !important;
  width:          var(--sidebar-width) !important;
  height:         100vh !important;
  margin:         0 !important;
  display:        flex !important;
  flex-direction: column !important;
  overflow:       hidden !important;
  z-index:        200 !important;
  background:     var(--sidebar-bg) !important;
  border-right:   3px solid var(--accent) !important;
  box-shadow:     2px 0 12px rgba(21, 101, 192, 0.12) !important;
}

.pc #header_inner {
  flex:       1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ロゴエリア */
.pc #header_logo {
  width:         100% !important;
  height:        auto !important;
  float:         none !important;
  padding:       36px 20px 28px !important;
  text-align:    center !important;
  border-right:  none !important;
  border-bottom: 2px solid var(--sidebar-sep) !important;
  flex-shrink:   0;
  box-sizing:    border-box;
}
.pc #logo_image       { height: auto !important; line-height: 1 !important; }
.pc #logo_image img   { max-width: 190px !important; max-height: 110px; }
.pc #logo_text        { height: auto !important; display: block !important; }
.pc #logo_text h2     { font-family: var(--font-base); font-size: 15px; line-height: 1.8; color: var(--sidebar-text); font-weight: 500; letter-spacing: 0.08em; }
.pc #logo_text a      { color: var(--sidebar-text) !important; text-decoration: none; }

/* サイト名(ロゴ)の太さを全ページ・ヘッダー/フッターで統一。
   トップだけ<h1>で出力され見出しルール(700)で太字になる不統一を解消。
   700は太すぎるので 500(ミディアム) で統一（リンク自体に固定し h1/div の差を吸収）。 */
#header_logo .rich_font_logo,
#footer_bottom .rich_font_logo {
  font-weight:    500 !important;
  letter-spacing: 0.04em;
}

/* グローバルメニュー縦並び */
.pc #global_menu {
  width:      100% !important;
  height:     auto !important;
  float:      none !important;
  text-align: left !important;
  flex:       1;
}
.pc #global_menu > ul {
  display: block !important;
  height:  auto !important;
}
.pc #global_menu > ul > li {
  display:     block !important;
  height:      auto !important;
  line-height: 1.5 !important;
  margin:      0 !important;
}
.pc #global_menu > ul > li > a {
  display:        block !important;
  height:         auto !important;
  line-height:    1.5 !important;
  padding:        15px 24px !important;
  font-size:      13px !important;
  font-family:    var(--font-base);
  letter-spacing: 0.06em;
  color:          var(--sidebar-text) !important;
  border-bottom:  1px solid var(--sidebar-sep) !important;
  transition:     background 0.2s, color 0.2s, border-left 0.2s;
}
/* ホバー：薄い面で控えめに（選択中と区別。青字はやめて白＝可読性） */
.pc #global_menu > ul > li > a:hover {
  background:   var(--sidebar-hover) !important;   /* rgba(255,255,255,.10) */
  color:        #fff !important;
  border-left:  3px solid var(--accent-light) !important;
  padding-left: 27px !important;
}
/* 選択中（現在地）：明るい青で塗り＋白太字＋左バー（B-②案）。
   ※ホバーより後に置き、詳細度同点でも現在地が勝つ（現在地をホバーしても塗り維持） */
.pc #global_menu > ul > li.current-menu-item > a,
.pc #global_menu > ul > li.current_page_item > a {
  background:   var(--nav-active) !important;      /* #3A6BB5 */
  color:        #fff !important;
  font-weight:  700 !important;
  border-left:  4px solid var(--accent-light) !important;
  padding-left: 26px !important;
}

/* ドロップダウン縦展開 */
.pc #global_menu ul ul {
  display:    none !important;
  position:   static !important;
  width:      100% !important;
  top:        auto !important;
  left:       auto !important;
  background: var(--bg-sub) !important;
}
.pc #global_menu > ul > li:hover > ul { display: block !important; }
/* #header を足して詳細度を上げ、テーマオプションの緑を出力する
   動的スタイル（.pc #global_menu ul ul a { background-color:#008c8d !important }）
   に勝たせる。 */
.pc #header #global_menu ul ul a {
  font-size:   12px !important;
  padding:     10px 20px 10px 36px !important;
  background:  transparent !important;   /* 親/動的の背景を除去し ul の青背景を見せる */
  color:       var(--accent-dark) !important;
  font-family: var(--font-base);
}
.pc #global_menu ul ul a:hover { background: var(--sidebar-hover) !important; color: var(--accent) !important; }
.pc #menu_button { display: none !important; }

/* コンテンツを右にオフセット */
.pc #header_slider,
.pc #main_contents,
.pc #footer_banner,
.pc #footer_bottom,
.pc #copyright,
.pc #return_top {
  margin-left: var(--sidebar-width) !important;
}

/* スライダー */
.pc #header_slider {
  min-width: 0 !important;
  height:    600px !important;
}
.pc #header_slider .item { height: 600px !important; }
.pc #header_slider .caption {
  width:  calc(100% - 80px) !important;
  margin: 80px auto 0 !important;
}

/* 3BOX */
.pc #index_3box     { min-width: 0 !important; }
.pc #index_3box_inner {
  width:   auto !important;
  padding: 0 40px;
  margin:  0 0 50px !important;
  height:  auto !important;
  display: flex;
  gap:     16px;
}
.pc #index_3box .box {
  width:      calc(33.333% - 11px) !important;
  height:     auto !important;
  padding:    30px 24px !important;
  box-sizing: border-box;
}

/* ヘッダーアニメーション無効化 */
.pc #header.animate,
.pc #header.animate2 {
  top:               0 !important;
  animation:         none !important;
  -webkit-animation: none !important;
}
.pc .header_fix #header {
  position:     fixed !important;
  width:        var(--sidebar-width) !important;
  height:       100vh !important;
  left:         0 !important;
  top:          0 !important;
  border-right: 3px solid var(--accent) !important;
}
.pc .header_fix #header_inner { width: 100% !important; height: auto !important; margin: 0 !important; }
.pc .header_fix #header_logo  { display: block !important; }

.pc.home.no_header_slider #main_contents { padding-top: 50px !important; }
.pc.home.no_index_3box    #main_contents { padding-top: 50px !important; }

.pc #footer_bottom { min-width: 0 !important; }

/* フッターバナーの内側をメインコンテンツと同じ幅に揃える */
.pc #footer_banner_inner {
  width:   auto !important;
  padding: 60px 40px !important;
  margin:  0 !important;
  display: flex !important;
  gap:     24px !important;
}
/* バナーアイテムを固定幅→均等分割に変更 */
.pc #footer_banner .item {
  flex:   1 1 0% !important;
  width:  auto !important;
  margin: 0 !important;
  float:  none !important;
}


/* ================================================================
   左サイドバー下部 CTA バナー
   ================================================================ */
/* CTAバナーはPC左サイドバー専用。.pc が付いていないと SP でも
   position:absolute が残り、標準ヘッダー(上バー)内で最上部に飛び出す。
   → 絶対配置は .pc 限定にし、SPレイアウト幅ではメディアクエリで非表示。
   【重要】非表示の境界は親テーマ responsive.css の読み込み条件
   （functions/head.php: media="screen and (max-width:1260px)"）と揃える。
   ここが 950px だと 950〜1260px でSPヘッダーだけ先に発動し、まだ消えていない
   CTAバナーが 56px ヘッダー基準の absolute のまま宙に浮いて下に出てしまう。 */
.pc #left_sidebar_banner {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    12px;
  border-top: 2px solid var(--sidebar-sep);
  background: var(--sidebar-bg);
}
@media screen and (max-width: 1260px) {
  #left_sidebar_banner { display: none !important; }
}

.sidebar-cta-button {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             8px;
  padding:         16px 12px;
  background:      var(--accent);
  color:           #fff !important;
  text-decoration: none;
  border-radius:   4px;
  text-align:      center;
  transition:      background 0.2s, transform 0.1s;
}
.sidebar-cta-button:hover {
  background: var(--accent-dark);
  transform:  translateY(-1px);
  /* 親テーマ .post_content a:hover / .custom-html-widget a:hover の下線を打ち消す
     （§23・SNSバナーと同じ対処パターン）。CTAボタンは下線不要 */
  text-decoration: none !important;
}
/* お問い合わせアイコンは削除（2026/8/27 MTG決定）。CTAはテキストのみ */
.sidebar-cta-text {
  font-family:    var(--font-base);
  font-size:      12px;
  font-weight:    700;
  line-height:    1.6;
  letter-spacing: 0.06em;
}


/* ================================================================
   お知らせ強調表示
   ================================================================ */
#index_news {
  border-top:    4px solid var(--accent) !important;
  background:    #fff !important;
  padding:       0 !important;
  margin-bottom: 36px !important;
  position:      relative;
}
#index_news .headline {
  background:     var(--accent) !important;
  color:          #fff !important;
  font-family:    var(--font-base);
  font-size:      16px !important;
  letter-spacing: 0.12em;
  border-left:    4px solid var(--accent-dark) !important;
}
#index_news .box {
  border:     1px solid var(--border) !important;
  border-top: none !important;
  background: #fff !important;
  padding:    20px !important;
}
#index_news .type1 .item  { border-bottom: 1px dotted var(--border) !important; }
#index_news .title a      { color: var(--text) !important; }
#index_news .title a:hover { color: var(--accent) !important; }
#index_news .date         { color: var(--accent) !important; font-weight: 500; }


/* ================================================================
   ボタン・アクセント
   ================================================================ */
.button,
#index_news .button,
#report_list .button,
.index_archive_button a {
  background:   var(--accent) !important;
  border-color: var(--accent) !important;
}
.button:hover { background: var(--accent-dark) !important; }

/* 3BOX — ブルー段階配色 */
#index_3box .box:nth-child(1) { background: var(--accent) !important;      border-bottom: 3px solid var(--accent-dark) !important; }
#index_3box .box:nth-child(2) { background: var(--blue-mid) !important;    border-bottom: 3px solid var(--accent) !important; }
#index_3box .box:nth-child(3) { background: var(--accent-dark) !important; border-bottom: 3px solid var(--accent-light) !important; }
#index_3box .title { color: #fff; font-family: var(--font-base); letter-spacing: 0.06em; }
#index_3box .button div:nth-child(1) { background: rgba(255,255,255,0.2) !important; color: #fff !important; }


/* ================================================================
   スライダー
   ================================================================ */
#header_slider .overlay { background: rgba(21, 101, 192, 0.45) !important; }
/* D(§22): キャッチと説明文の間の装飾線が margin:auto で中央固定され、
   キャッチを右寄せ(direction_type3)にすると線だけ左〜中央に取り残される。
   テキストの寄せに線も追従させる（右寄せ→線も右端／左寄せ→線も左端）。
   ※線がどの疑似要素か・絶対配置かはステージングのテーマオプション依存。
     margin:auto で中央寄せの短い線を想定した上書き（該当が無ければ無害）。
     効かない場合はステージングの #header_slider .caption ソースを要確認。 */
#header_slider .direction_type3 .caption .title:before,
#header_slider .direction_type3 .caption .title:after,
#header_slider .direction_type3 .caption .desc:before,
#header_slider .direction_type3 .caption .desc:after {
  margin-left:  auto !important;
  margin-right: 0 !important;
}
#header_slider .direction_type1 .caption .title:before,
#header_slider .direction_type1 .caption .title:after,
#header_slider .direction_type1 .caption .desc:before,
#header_slider .direction_type1 .caption .desc:after {
  margin-left:  0 !important;
  margin-right: auto !important;
}
/* 見出しサイズは管理画面（各スライドのキャッチのフォントサイズ）で
   設定できるよう CSS では固定しない。太字・影・色は可読性のため維持。 */
#header_slider .caption .title {
  font-weight: 700;
  text-shadow: 1px 2px 10px rgba(0,0,0,0.5);
  color:       #fff;
}
#header_slider .caption .title::after {
  content:    '';
  display:    block;
  width:      60px;
  height:     3px;
  background: #fff;
  margin:     16px 0 0 0;
}


/* ================================================================
   各セクション見出し
   ================================================================ */
.index_content > .headline,
#report_list .headline,
#achv_list .headline,
#blog_list .headline,
#free_space .headline {
  color:        var(--accent);
  height:       auto !important;      /* 固定高さ59pxを解除 */
  line-height:  1.5 !important;
  border:       none !important;      /* 親テーマの灰色ボックス枠を除去 */
  border-left:  4px solid var(--accent-light) !important;
  box-shadow:   none !important;      /* 上部に出る線／バーを除去 */
  background:   none !important;
  padding:      4px 0 4px 16px !important;
  /* サイズは管理画面（各セクションの見出しフォントサイズ）で可変 */
}


/* ================================================================
   プロフィールバナー
   ================================================================ */
/* 見出しサイズは管理画面（トップページ設定→プロフィールバナー→
   見出しフォントサイズ PC/スマホ）で設定できるよう CSS では固定しない。
   可読性のため色は白＋影のみ固定。 */
#index_prof_banner .headline {
  text-shadow: 1px 2px 12px rgba(0,0,0,0.5);
}
/* 画像の上に白文字を重ねる（PC/SP共通）。テーマオプションの見出し色が
   黒等でも読めるよう、文字を白＋影で固定し、読みやすさ用の覆いを敷く。
   SP側は末尾メディアクエリで <img> を土台に文字を絶対配置で重ねる。 */
#index_prof_banner .headline_area,
#index_prof_banner .headline,
#index_prof_banner .desc { color: #fff !important; }
#index_prof_banner .desc { text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
#index_prof_banner::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     rgba(21, 101, 192, 0.35);
  z-index:        1;
  pointer-events: none;
}
#index_prof_banner .headline_area { z-index: 2; position: relative; }
/* プロフィールバナー：人物が画像の"左"に写っているため、テキストを右側へ寄せる（PC）。
   長い見出し/説明でも左の人物に被らないよう、テキスト塊を右側に幅制限して配置。 */
.pc #index_prof_banner .headline_area { text-align: right; }
.pc #index_prof_banner .headline,
.pc #index_prof_banner .desc {
  max-width:   68%;
  margin-left: auto;
}


/* ================================================================
   フッター
   ================================================================ */
#footer_bottom {
  background: var(--accent) !important;
  color:      rgba(255,255,255,0.85);
  border-top: 3px solid var(--accent-dark);
  padding:    60px 40px !important;
  overflow:   visible !important;
}
#footer_bottom a       { color: #fff !important; }
#footer_bottom a:hover { color: var(--accent-light) !important; }
/* フッターのメアドが列幅(約393px)にギリギリ収まらず2〜3行に折り返し、
   さらに親テーマの line-height:2.3 で間延びして不格好になる問題への対処。
   ・font-size を 13px に下げて、フルサイズPCでは1行に収める
   ・line-height を詰めて、狭い画面で折り返した時も間延びさせない
   ・はみ出しの保険として overflow-wrap も併用（ハイフンの無いメアドでも枠内に収める） */
#footer_info .info p {
  font-size:      13px !important;
  line-height:    1.8 !important;
  letter-spacing: 0 !important;
  overflow-wrap:  anywhere;
  word-break:     break-word;
}
/* フッターSNSアイコンを白に（濃紺背景で黒アイコンが見えづらいため）。
   アイコンフォント系は color、YouTube/note はSVGマスクなので background-color を上書き。 */
#footer_social_link li a:before { color: #fff !important; }
#footer_social_link li.youtube a:before,
#footer_social_link li.note a:before { background-color: #fff !important; }
/* YouTubeアイコンだけ他アイコン(フォント)より少し上に出るので、下げて縦位置を揃える */
#footer_social_link li.youtube a:before { top: 5px !important; }

/* =========================================================
   スマホ表示（html.mobile）の配色を濃紺テーマに合わせる
   ─ AGENDAはPC=html.pc / スマホ=html.mobile をJSで切替（jscript.js）。
     PCの固定ナビCSSは .pc スコープなのでSPには効かず、SPは標準ヘッダー＋
     スライドインメニュー #mobile_menu（既定=白ヘッダー/ダークグレー#333メニュー）
     のまま＝デフォルト色になる。これを .mobile スコープで濃紺化する。
     ※すべて .mobile / #mobile_menu / #menu_button スコープなので .pc（PC）には無影響
   ========================================================= */

/* SPヘッダーバー：白→濃紺。中のロゴ文字・ハンバーガーは白に */
.mobile #header,
.mobile.mobile_header_fix #header { background: var(--sidebar-bg) !important; }
.mobile #header_logo a,
.mobile #logo_text a,
.mobile #logo_text h2,
.mobile #header_logo .rich_font_logo { color: #fff !important; }

/* ハンバーガーボタン */
.mobile #menu_button:before { color: #fff !important; }        /* アイコンを白に */
.mobile #menu_button:hover,
.mobile #menu_button.active   { background: var(--accent-dark) !important; }
.mobile #menu_button:hover:before,
.mobile #menu_button.active:before { color: #fff !important; }

/* スライドインメニュー #mobile_menu：ダークグレー→濃紺 */
#mobile_menu { background: var(--sidebar-bg) !important; }
#mobile_menu #global_menu a {
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}
#mobile_menu #global_menu a:hover { color: var(--accent-light) !important; }
#mobile_menu .close_button:before { color: #fff !important; }
#mobile_menu #global_menu .child_menu_button .icon:before { color: #fff !important; border-color: #fff !important; }

/* SPフッターのリンクリスト：上下の余白を揃える
   （既定は padding:40px 0 0 0 ＝下が0で非対称＋ul既定マージンも差の元） */
.mobile .footer_menu { padding: 32px 0 !important; }
.mobile .footer_menu ul { margin: 0 !important; }
/* リンクリストと下の区切り線の間が空きすぎる問題：
   区切り線(#footer_widget:before)上の40px空バンドとウィジェット上padding40pxを除去し、
   メニュー下padding(32px)ぶんの一定間隔だけにする（リンク数に関係なく一定になる） */
.mobile #footer_widget { padding-top: 0 !important; }
.mobile #footer_widget:before { height: 0 !important; margin: 0 0 28px 0 !important; }
#footer_social_link li a:hover:before { color: var(--accent-light) !important; }
#footer_social_link li.youtube a:hover:before,
#footer_social_link li.note a:hover:before { background-color: var(--accent-light) !important; }
#copyright {
  background:  var(--accent-dark) !important;
  color:       rgba(255,255,255,0.55);
  font-size:   12px;
  font-family: var(--font-base);
}


/* ================================================================
   横幅の統一（サイドバー右側の全ブロックの右端を揃える）
   ---------------------------------------------------------------
   左端は全ブロック 290px（インセット40px）で揃っているが、右端が不揃い。
   実測で判明した3つの原因を修正する:
     ① clearfix の擬似要素(::after)が flex コンテナ内で余分なアイテム化し、
        gap 1つ分を消費 → 3box・フッターバナーの末尾が右端(40px)まで届かない
     ② 活動報告・ブログの一覧カードが固定幅(float)で左寄せ
        → 広い画面で右側が大きく余る（＝短く見える）
     ③ フッター本体の子要素が全て flex:0 0 固定px
        → 狭い画面ではみ出し・広い画面で右が余る
   ================================================================ */

/* ① clearfix の疑似要素を flex コンテナ内で無効化（余分な gap を除去） */
.pc #index_3box_inner::after,
.pc #footer_banner_inner::after { content: none !important; }

/* 3box：calc 固定幅 → flex 均等割りで右端(40px)まで正確に充填 */
.pc #index_3box .box { flex: 1 1 0 !important; width: auto !important; }

/* ② 活動報告：固定260px の左寄せ → 流動3カラム（右端40pxまで充填） */
.pc #report_list .post_list {
  display:    flex !important;
  flex-wrap:  wrap !important;
  gap:        24px !important;
  margin-top: 0 !important;
}
.pc #report_list .post_list::after { content: none !important; }
.pc #report_list .item {
  flex:   0 0 auto !important;
  width:  calc((100% - 48px) / 3) !important;
  height: auto !important;
  margin: 0 !important;
  float:  none !important;
}

/* ② ブログ：固定276px の左寄せ → 流動3カラム（境界線で区切るため gap なし） */
.pc #blog_list .post_list {
  display:   flex !important;
  flex-wrap: wrap !important;
}
.pc #blog_list .post_list::after { content: none !important; }
.pc #blog_list .item {
  flex:   0 0 auto !important;
  width:  calc(100% / 3) !important;
  height: auto !important;
  float:  none !important;
}

/* ③ フッター本体：3カラムを常に均等（各1/3）で配置。
   親テーマのメニュー欄476px固定・ブログ350px固定・両端寄せをやめ、
   flex:1 1 0 で3等分。横幅が変わっても等分比率を維持する。
   （各カラムの中身は box-sizing:border-box＋padding のまま左寄せ） */
.pc #footer_bottom {
  flex-wrap:       nowrap !important;
  justify-content: flex-start !important;
  gap:             0 !important;
}
.pc #footer_bottom::after { content: none !important; }
.pc #footer_bottom #footer_info,
.pc #footer_bottom .footer_menu,
.pc #footer_bottom #footer_widget {
  flex:      1 1 0 !important;
  max-width: none !important;
  min-width: 0 !important;
}


/* ================================================================
   ボタンとの重なり・視認性の修正
   ---------------------------------------------------------------
   ① 3box：タイトルが折り返すと絶対配置の「サンプルボタン」に重なる
      → ボックス下部にボタン高さ分の余白を確保（min-height で最低高さも維持）
   ② お知らせ一覧：配色調整で入れた padding:20px が親テーマの
      show_link 用の下余白(55px)を打ち消し、最下部タイトルが
      「アーカイブページ」ボタンに重なる → 下余白を再確保
   ③ お知らせの「アーカイブページ」ボタン：暗い文字色で青背景に埋もれる
      → 文字・矢印アイコンを白に
   ================================================================ */

/* ① 3box：ボタン(高さ50px)の分だけ下余白を確保しタイトルの重なりを防ぐ */
.pc #index_3box .box {
  padding:    30px 24px 72px !important;
  min-height: 200px !important;
}

/* ② お知らせ：ボタン(高さ55px)の分の下余白を再確保 */
.pc #index_news .box.show_link { padding-bottom: 72px !important; }

/* ③ お知らせ「アーカイブページ」ボタンの文字色・矢印を白に */
/* お知らせ箱右下の「アーカイブページ」ボタンは背景無しの青文字リンクに
   （PC/SP共通）。base のボタン群(.button…)が付ける青背景を打ち消す。 */
#index_news .button          { background: transparent !important; color: var(--accent) !important; }
#index_news .button:after    { color: var(--accent) !important; }


/* ================================================================
   プロフィールページ（page-profile.php）
   ---------------------------------------------------------------
   本文は TCD カスタム項目（profile_name / message / career_list /
   work_list）に入力する方式。トップの配色（白×ブルー）と整合させる。
   構造：#profile_top（氏名＋紹介＋写真）／#profile_message（挨拶文）／
        .profile_list#profile_career・#profile_work（経歴・実績の箇条書き）
   ================================================================ */

/* 氏名ブロック：氏名を明朝・藍、サブネームを小さく */
#profile_top .name {
  font-family:   var(--font-base);
  color:         var(--accent-dark);
  font-size:     28px;
  line-height:   1.5;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
#profile_top .name span {
  display:     block;
  margin-top:  6px;
  font-size:   14px;
  font-weight: 400;
  color:       var(--blue-mid);
  letter-spacing: 0.08em;
}
#profile_top .data .post_content { line-height: 1.9; }
#profile_top .image img { border-radius: 4px; box-shadow: 0 4px 16px rgba(21,101,192,0.14); }

/* 各セクション見出し（挨拶・経歴・実績）を共通の左罫線スタイルに。
   親テーマは box-shadow で黒い上バー＋灰枠＋固定高さ55px を付けるため、
   それらを打ち消して「白地＋左の青罫線」のサイト共通スタイルに揃える。 */
#profile_message .profile_headline,
.profile_list .profile_headline {
  font-family:    var(--font-base);
  color:          var(--accent);
  letter-spacing: 0.05em;
  height:         auto !important;
  line-height:    1.5 !important;
  background:     none !important;
  box-shadow:     none !important;   /* 黒い上バーを除去 */
  border:         none !important;   /* 灰枠を除去 */
  border-left:    4px solid var(--accent-light) !important;
  padding:        2px 0 2px 16px !important;
  margin-bottom:  20px;
}

#profile_message .post_content { line-height: 1.95; }
#profile_message { margin-bottom: 48px; }

/* 経歴・実績の箇条書き：年号＋内容が並ぶ想定。区切り線で見やすく */
.profile_list { margin-bottom: 48px; }
.profile_list ol {
  border-top: 1px solid var(--border);
  margin:     0;
  padding:    0;
  list-style: none;
}
.profile_list ol li {
  border-bottom: 1px solid var(--border);
  padding:       14px 4px 14px 18px;
  position:      relative;
  line-height:   1.7;
}
.profile_list ol li::before {
  content:  '';
  position: absolute;
  left:     0;
  top:      22px;
  width:    6px;
  height:   6px;
  border-radius: 50%;
  background: var(--accent-light);
}
.profile_list .image { border-radius: 4px; margin-bottom: 20px; }


/* ================================================================
   政策ページ（page-policy.php）※デフォルト＝縦並び
   ---------------------------------------------------------------
   本文は TCD カスタム項目 policy_list（見出し＋説明の繰り返し）に入力。
   各 .item はテーマ設定の背景色/枠色をインラインで持つが、原稿未着の
   ダミー段階では白×ブルーで統一したいので上書きする（admin色は今回不使用）。
   構造：#policy_list > .item（.headline / .post_content）を縦に積む。
        2-3 でアコーディオン化する場合もこの構造を土台にする。
   ================================================================ */

#policy_list {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  margin-bottom:  40px;
}

/* 各政策カード：薄いブルー背景＋左アクセント罫線で統一 */
#policy_list .item {
  background:    #fff !important;
  border:        1px solid var(--border) !important;
  border-left:   4px solid var(--accent) !important;
  border-radius: 4px;
  padding:       24px 28px !important;
  margin:        0 !important;
  box-shadow:    0 2px 8px rgba(21,101,192,0.06);
  transition:    box-shadow 0.2s, transform 0.1s;
}
#policy_list .item:hover { box-shadow: 0 4px 14px rgba(21,101,192,0.12); }

/* リンク付き項目でも文字色が沈まないように */
#policy_list .item a.link { color: inherit; text-decoration: none; display: block; }

#policy_list .item .headline {
  font-family:    var(--font-base);
  color:          var(--accent-dark) !important;
  font-size:      20px !important;
  line-height:    1.6;
  letter-spacing: 0.04em;
  margin:         0 0 12px !important;
  padding:        0 !important;
}
#policy_list .item .post_content {
  line-height: 1.9;
  color:       var(--text);
}

/* policy_list 下部の補足ブロック（見出し・本文・2カラム説明） */
#policy_headline {
  font-family:    var(--font-base);
  color:          var(--accent);
  font-size:      24px !important;
  border-left:    4px solid var(--accent-light);
  padding-left:   16px;
  margin:         8px 0 20px;
}
#policy_top_desc { line-height: 1.95; margin-bottom: 24px; }
#policy_image { border-radius: 4px; margin-bottom: 24px; }
#policy_bottom_desc .post_content { line-height: 1.9; }


/* ================================================================
   アーカイブ一覧（お知らせ／活動報告／活動実績）※配色の一次パス
   ---------------------------------------------------------------
   レイアウト骨格は親テーマ＋既存の 3カラム指定に任せ、ここでは
   タイトル・日付・カテゴリ・ホバー等を白×ブルーに統一するのみ。
   細かいレイアウト調整は後工程。
   ================================================================ */

/* 共通：一覧タイトルは明朝、日付はブルー、ホバーでアクセント */
#news_list .title,
#report_list .post_list .title,
#achv_list .title {
  font-family: var(--font-base);
  color:       var(--text);
  line-height: 1.6;
}
#news_list .title a:hover,
#report_list .post_list .title a:hover,
#achv_list .title a:hover { color: var(--accent) !important; }

#news_list .date,
#report_list .post_list .date {
  color:       var(--accent);
  font-weight: 500;
  font-family: var(--font-base);
}

/* お知らせ：行リストを区切り線＋ホバー背景で見やすく */
#news_list .item {
  border-bottom: 1px solid var(--border);
  transition:    background 0.15s;
}
#news_list .item:hover { background: var(--sidebar-hover); }
#news_list .item > a { padding: 4px 8px; box-sizing: border-box; }

/* 活動報告：カテゴリ絞り込みタブ */
#report_category_list ul { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; padding: 0; list-style: none; }
#report_category_list li { margin: 0; }
#report_category_list li a {
  display:       block;
  padding:       6px 16px;
  font-size:     13px;
  color:         var(--accent);
  border:        1px solid var(--accent);
  border-radius: 20px;
  text-decoration: none;
  transition:    background 0.2s, color 0.2s;
}
#report_category_list li a:hover,
#report_category_list li.active a {
  background: var(--accent);
  color:      #fff;
}

/* 活動報告：カテゴリバッジ（インライン色が無い時のフォールバックを青系に） */
#report_list .post_list .category a { color: #fff; text-decoration: none; }

/* 活動実績：サブタイトルを控えめブルーに */
#achv_list .sub_title {
  color:          var(--blue-mid);
  font-size:      12px;
  letter-spacing: 0.06em;
  margin-bottom:  4px;
}
#achv_list .title { color: var(--accent-dark); }

/* 投稿ゼロ時のメッセージ */
.no_post {
  padding:    40px 0;
  text-align: center;
  color:      var(--blue-mid);
}


/* ================================================================
   汎用固定ページ本文（page.php の #article.page .post_content）
   ---------------------------------------------------------------
   プライバシーポリシー・お問い合わせの説明文など、ブロックエディタで
   入力した本文の見出し・リンク・リスト・引用を白×ブルーで整える。
   ================================================================ */

#article.page .post_content { line-height: 1.95; }

#article.page .post_content h2 {
  font-family:   var(--font-base);
  color:         var(--accent-dark);
  font-size:     22px;
  letter-spacing: 0.04em;
  border-left:   4px solid var(--accent);
  padding-left:  14px;
  margin:        40px 0 16px;
}
#article.page .post_content h3 {
  font-family:   var(--font-base);
  color:         var(--accent);
  font-size:     18px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin:        32px 0 14px;
}
#article.page .post_content h4 {
  color:  var(--accent-dark);
  margin: 24px 0 10px;
}
#article.page .post_content a {
  color:                var(--accent);
  text-decoration:      underline;
  text-underline-offset: 2px;
}
#article.page .post_content a:hover { color: var(--accent-dark); }

/* リスト：ブルーのマーカー */
#article.page .post_content ul { list-style: none; padding-left: 0; }
#article.page .post_content ul > li {
  position:     relative;
  padding-left: 20px;
  margin:       8px 0;
}
#article.page .post_content ul > li::before {
  content:  '';
  position: absolute;
  left:     2px;
  top:      11px;
  width:    7px;
  height:   7px;
  border-radius: 50%;
  background: var(--accent-light);
}
#article.page .post_content ol { padding-left: 1.4em; margin: 8px 0; }
#article.page .post_content ol > li { margin: 8px 0; }

/* 引用：左アクセント罫線＋淡いブルー背景 */
#article.page .post_content blockquote {
  border-left: 4px solid var(--accent-light);
  background:  var(--bg-sub);
  margin:      20px 0;
  padding:     14px 20px;
  color:       var(--text);
}

/* テーブル：見出し行をブルーに */
#article.page .post_content table th {
  background: var(--accent);
  color:      #fff;
}
#article.page .post_content table td,
#article.page .post_content table th { border: 1px solid var(--border); padding: 10px 12px; }
/* 「名称」「会費」等の項目名セル（左列th）は幅を抑えてラベルらしく・中央揃え */
#article.page .post_content table th { width: 8em; white-space: nowrap; text-align: center; }
/* B(sazaley): 2行だけの団体概要テーブルが本文幅いっぱいに間延びするので、
   内容幅に合わせて中央に配置する。
   ※親テーマ design-plus.css に「.post_content table { width:100% !important }」が
     あるため、!important で上書きしないと全幅のままになる。 */
#article.page .post_content .wp-block-table { margin: 28px 0; text-align: center; }
#article.page .post_content .wp-block-table table {
  width:      auto !important;
  min-width:  560px;
  max-width:  100%;
  margin:     0 auto !important;
}
/* C-5(§23): 上の min-width:560px は PC で「内容幅・中央」にするための指定だが、
   SP（画面幅 < 560px）では縮まず横スクロールが発生する。SPでは min-width を解除し
   画面幅100%に収める。項目名セル（th）の nowrap も横伸びの一因なので折り返し許可。 */
@media screen and (max-width: 767px) {
  #article.page .post_content .wp-block-table table {
    min-width: 0 !important;
    width:     100% !important;
  }
  #article.page .post_content table th { width: auto; white-space: normal; }
}
/* B(sazaley): 本文中のCTAボタンブロックを中央寄せ（既定は左寄せ） */
#article.page .post_content .wp-block-buttons {
  display:         flex;
  justify-content: center;
}
/* B(sazaley): 表直後の案内文（ご参加・お問い合わせは〜）も中央に。
   ブロック側にも align:center を付与済みだが、既存マークアップ用に
   「.wp-block-buttons の直前の段落」を中央寄せするフォールバックを併用。 */
#article.page .post_content p.has-text-align-center { text-align: center; }
#article.page .post_content p:has(+ .wp-block-buttons) { text-align: center; }

/* 本文中のボタンブロック（Gutenberg）をサイトのボタンに合わせる：角なし・accent・白文字・ゴシック。
   ボタンは <a> なので汎用ページの a{text-decoration:underline} を拾って下線が付く→打ち消す。 */
.post_content .wp-block-button__link {
  background-color: var(--accent) !important;
  color:            #fff !important;
  border-radius:    0 !important;
  font-family:      var(--font-base);
  font-weight:      normal;
  padding:          12px 30px;
  box-shadow:       none;
  text-decoration:  none !important;
}
.post_content .wp-block-button__link:hover { background-color: var(--accent-dark) !important; color: #fff !important; text-decoration: none !important; }

/* 活動報告等のPDF（標準「ファイル」ブロック）をサイトに馴染ませる。
   インライン埋め込みON/OFFどちらでもカバー：埋め込み枠＋ダウンロードボタンを整える。
   ※PDFビューアのツールバー/サムネイル等（object内部）はブラウザ描画なのでCSS不可。 */
.post_content .wp-block-file { margin: 24px 0; }
.post_content .wp-block-file__embed {
  width:         100%;
  border:        1px solid var(--border);
  border-radius: 0;
}
.post_content .wp-block-file__button {
  background-color: var(--accent) !important;
  color:            #fff !important;
  border-radius:    0 !important;
  font-family:      var(--font-base);
  font-weight:      normal;
  padding:          8px 22px;
  box-shadow:       none;
  text-decoration:  none !important;
}
.post_content .wp-block-file__button:hover { background-color: var(--accent-dark) !important; color: #fff !important; text-decoration: none !important; }


/* ================================================================
   お問い合わせフォーム（Contact Form 7）先行スタイル
   ---------------------------------------------------------------
   CF7 未導入のうちは影響なし。導入後、フォームが白×ブルーで揃う。
   ================================================================ */

.wpcf7 { margin-top: 8px; }
.wpcf7 label {
  display:     block;
  font-weight: 500;
  color:       var(--accent-dark);   /* 本文(白背景)用の濃色。--sidebar-textは濃紺化で白になり不可視だった */
  margin:      16px 0 6px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
  width:         100%;
  box-sizing:    border-box;
  padding:       12px 14px;
  border:        1px solid var(--border);
  border-radius: 4px;
  background:    #fff;
  font-family:   inherit;
  font-size:     15px;
  transition:    border-color 0.2s, box-shadow 0.2s;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline:      none;
  border-color: var(--accent);
  box-shadow:   0 0 0 3px rgba(21,101,192,0.12);
}
.wpcf7 textarea { min-height: 160px; resize: vertical; }

/* 送信ボタン */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
  display:       inline-block;
  margin-top:    20px;
  padding:       14px 40px;
  background:    var(--accent);
  color:         #fff;
  border:        none;
  border-radius: 4px;
  font-size:     15px;
  letter-spacing: 0.08em;
  cursor:        pointer;
  transition:    background 0.2s, transform 0.1s;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover { background: var(--accent-dark); transform: translateY(-1px); }

/* Turnstile を送信ボタンと分けて配置 */
.wpcf7 .cf7-turnstile,
.wpcf7 .cf-turnstile {
  margin:          20px 0;
  display:         flex;
  justify-content: center;   /* Turnstileウィジェットを中央に */
}

/* CF7 の応答・バリデーションメッセージ */
.wpcf7-not-valid-tip { color: #c0392b; font-size: 13px; margin-top: 4px; }
.wpcf7 .wpcf7-response-output {
  margin:        20px 0 0;
  padding:       12px 16px;
  border-radius: 4px;
  border-width:  1px;
}


/* ================================================================
   下層ページの見出しバー・パンくずの左右インセット（PCのみ）
   ---------------------------------------------------------------
   親テーマは 1180px 固定＋中央寄せが土台で、見出しテキスト
   (#page_header_title > span) やパンくず (#bread_crumb ul)、
   キャッチ (#page_header_catch span) の内側ラッパが
   width:1180px; margin:0 auto のまま残る。左固定ナビ環境では
   これがサイドバーに密着して見えるため、本文 (#main_col の
   左右40px) と同じインセットに揃える。
   ================================================================ */
.pc #page_header_title > span,
.pc #page_header_title > div,
.pc #page_header_catch span {
  width:      auto !important;
  margin:     0 !important;
  padding:    0 40px !important;
  box-sizing: border-box;
}
.pc #page_header_catch { min-width: 0 !important; }
.pc #bread_crumb ul {
  width:         auto !important;
  margin:        0 !important;
  padding-left:  40px !important;
  padding-right: 40px !important;
  box-sizing:    border-box;
}


/* ================================================================
   テーマ既定の緑（ティール）→ テーマカラーへ置換
   ---------------------------------------------------------------
   ブログ記事上部のカテゴリ帯・コメント切替タブのアクティブ色が
   親テーマ/テーマオプションの緑のままなので、青系（各テーマの
   アクセント）に統一する。
   ================================================================ */

/* ブログ記事：本文上部のカテゴリ帯（テーマオプションの色を
   インラインで background 指定しているため !important で上書き）。
   帯内の日付・カテゴリ文字は白で可読性を確保。 */
#post_meta_top { background: var(--accent) !important; }
#post_meta_top,
#post_meta_top a { color: #fff !important; }

/* 投稿者名の非表示（§16 #24）。単一記事の投稿メタ（#post_meta_bottom）先頭に
   「投稿者: 〇〇」が出るのを消す。区切りは各liの右borderなので、先頭liを
   display:none にしても余分な区切り線は残らない。※テーマオプション show_author を
   OFFにしても消せるが、方針どおりCSSで対応（環境のオプション状態に依存せず確実）。 */
#post_meta_bottom li.post_author,
#post_meta_top li.post_author { display: none !important; }

/* 前の投稿／次の投稿ボタン（§16 #29・§23）。親テーマは .prev_post/.next_post を
   float:left; width:50% で並べるため、「次の投稿」だけ（＝前の投稿が無い最古記事等）の
   場合に右にあるべきボタンが左寄りになる。:only-child の時だけ右寄せに補正。
   親テーマは PC(style.css)・SP(responsive.css) 両方で width:50% を指定しているが、
   この子テーマCSSはメディアクエリ外なので PC/SP 両方に効く。 */
#previous_next_post .next_post:only-child { float: right; }

/* コメント：アクティブなタブ（コメント/トラックバック切替）本体と
   その下の三角（:after の border-top-color）を緑→アクセントへ */
body #comment_header ul li.comment_switch_active a,
body #comment_header #comment_closed p { background-color: var(--accent) !important; }
/* 非選択タブのホバー（動的スタイルの緑を上書き） */
body #comment_header ul li a:hover { background-color: var(--accent-dark) !important; color: #fff !important; }
#comment_header ul li.comment_switch_active a:after,
#comment_header #comment_closed p:after { border-top-color: var(--accent) !important; }


/* ================================================================
   タブレット〜SP（≤1260px＝mobile化する全幅）での手当て ※必ずファイル末尾に置く
   ---------------------------------------------------------------
   base ルール（セクション見出し font-size:24px / スライダー52px）が
   このファイルの後方にあり、メディアクエリは詳細度を上げないため、
   同詳細度では「後に書いた方」が勝つ。確実に上書きするには、この調整を
   すべての base より後ろ（＝末尾）に置く必要がある。
   ---------------------------------------------------------------
   【§25 #4】境界を 950 → 1260 に統一（＝jscript.js の pc/mobile 切替
   `width>1260` ・親 responsive.css の発動 `max-width:1260` と同じ）。
   以前は≤950限定だったため 950〜1260 のタブレット帯で
   ・ヘッダーロゴが左上に落ちる
   ・ヒーロー/プロフィールが親既定（縦積み・top:50%）に戻る
   という崩れが出ていた。CTAバナー(≤1260)と同型の横展開。 */
@media screen and (max-width: 1260px) {
  /* 見出し・スライダーのサイズはSP/タブレットも管理画面（スマホ用フォント
     サイズ）で可変にするため、ここでは固定しない。 */

  /* ── ヘッダーロゴ：mobile上部バー(56px)内で縦中央に収める ──
     親の中央寄せは ≤991 限定＋セレクタが #logo_text h2（実マークアップは
     h1/div で不一致）のため 992〜1260 に効かず、ロゴが左上へ落ちていた。
     親 style.css(@media≤991) の flex 中央寄せを、正しいスコープで≤1260へ前倒す。 */
  #header_logo { height: 100% !important; }
  #logo_text,
  #logo_image {
    height:      100% !important;
    display:     flex !important;
    align-items: center !important;
    margin-left: 15px !important;
  }

  /* ── 本文カラムをタブレット帯でも全幅に（§25 #4 追加） ──
     front-page.php は get_sidebar() を出力するため空の #side_col が存在し、
     親 responsive.css は 950〜1260 で #left_col を calc(100% - 330px) に縮める。
     結果、三点ボックス下（#main_col>#left_col 内の index_news〜free_space）が
     右に約330px空けて左寄せになる。子はPCで .pc #side_col{display:none} ＋
     .pc #left_col{width:auto}（custom.css:28,31）で全幅化しているので、
     mobile帯(≤1260)も同じ扱いに揃える。 */
  #side_col { display: none !important; }
  #left_col {
    width:     auto !important;
    float:     none !important;
    min-width: 0 !important;
  }

  /* プロフィールバナー：PCと同様「画像の上に文字・上下中央」に統一。
     画像は object-fit:cover で敷き、flex で縦中央。画像が短くても
     文字が上にはみ出さない（最小高さ確保、文字が多ければ自動で伸びる）。 */
  #index_prof_banner {
    position:     relative;
    min-height:   200px;
    display:      flex !important;
    align-items:  center !important;
    overflow:     hidden;
  }
  #index_prof_banner .image {
    display:    block !important;
    position:   absolute !important;
    inset:      0 !important;
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    margin:     0 !important;
  }
  #index_prof_banner .headline_area {
    position:   relative !important;
    top:        auto !important;
    transform:  none !important;
    width:      100%;
    padding:    24px !important;
    text-align: right;
    z-index:    2;
  }
  /* C-3(§23・§25 #4): タブレット〜SP（≤1260）は見出し・説明を右揃えに（親 responsive.css の #index_prof_banner .headline /
     .desc { text-align:left } を要素側で打ち消す）。幅は絞らない＝英語は管理画面で入れた
     改行(<br>)のみで折り返し、日本語は右端まで揃う。被写体（左）との被りは画像トリミング
     （顔→左）＋スマホ見出しフォント縮小で回避する。 */
  #index_prof_banner .headline_area,
  #index_prof_banner .headline,
  #index_prof_banner .desc { text-align: right !important; }

  /* C-2(§23・§25 #4): タブレット〜SPのヒーローのキャッチを中央(top:50%)より下に配置し、背景画像との被り位置をずらす。 */
  #header_slider .caption_inner { top: 70% !important; }

  /* ページ上部画像の色オーバーレイ：PCは非表示なのでSPも合わせて消す */
  #page_header_overlay { display: none !important; }
}


/* ================================================================
   右サイドナビ（本決定 2026/8/18）
   ---------------------------------------------------------------
   header.php で <html class="pc nav-right"> を常時付与しているため
   PCでは常に右配置になる（SPは jscript.js が pc を外すので無効＝標準）。
   左固定ナビの水平方向だけを右へ反転（中身の揃えは不変）。
   ================================================================ */
.pc.nav-right #header {
  left:         auto !important;
  right:        0 !important;
  border-right: none !important;
  border-left:  3px solid var(--accent) !important;
  box-shadow:   -2px 0 12px rgba(21,101,192,0.12) !important;
}
.pc.nav-right #header_slider,
.pc.nav-right #main_contents,
.pc.nav-right #footer_banner,
.pc.nav-right #footer_bottom,
.pc.nav-right #copyright,
.pc.nav-right #return_top {
  margin-left:  0 !important;
  margin-right: var(--sidebar-width) !important;
}
.pc.nav-right .header_fix #header {
  left:         auto !important;
  right:        0 !important;
  border-right: none !important;
  border-left:  3px solid var(--accent) !important;
}


/* ================================================================
   お問い合わせフォーム（CF7）追記スタイル
   ・必須バッジ(.cf7-req)／同意チェック(.cf7-consent)／段落余白
   ================================================================ */
.wpcf7 form p { margin: 0; }

.wpcf7 .cf7-req {
  display:       inline-block;
  margin-left:   6px;
  padding:       1px 7px;
  font-size:     11px;
  font-weight:   700;
  line-height:   1.6;
  color:         #fff;
  background:    #c0392b;
  border-radius: 3px;
  vertical-align: middle;
}

.wpcf7 label.cf7-consent {
  font-weight: 400;
  margin-top:  22px;
  color:       var(--text);
  text-align:  center;   /* 同意チェック＋文言を中央揃え */
}
.wpcf7 label.cf7-consent .wpcf7-list-item { display: inline; margin: 0; }
.wpcf7 label.cf7-consent input[type="checkbox"] {
  width:          auto;
  margin-right:   7px;
  vertical-align: middle;
}
.wpcf7 label.cf7-consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================
   SNS埋め込み（ショートコード [x_embed]）
   トップページ フリースペース(#free_space)内に設置する想定
   ========================================================= */
#free_space .x-embed,
.x-embed {
  max-width: 550px;   /* Xタイムラインの推奨最大幅に合わせる */
  margin: 0 auto;
  text-align: center;
}
.x-embed .twitter-timeline {
  width: 100% !important;
}
/* バナー/誘導ボタン。
   banner モード＝これ単体。
   timeline モード＝タイムラインの下に常設リンクとして（読込失敗時のフォールバックも兼ねる）。 */
.x-embed-button {
  display:         inline-block;
  margin-top:      14px;
  padding:         12px 26px;
  background:      var(--sidebar-bg);   /* 濃紺 #1B3A6B */
  color:           #fff;
  border-radius:   6px;
  text-decoration: none;
  font-size:       15px;
  line-height:     1.4;
  transition:      opacity .2s ease;
}
.x-embed-button:hover {
  opacity: .85;
  color:   #fff;
}
/* banner モードは見出し直下に単体で置くため上マージン不要 */
.x-embed--banner .x-embed-button {
  margin-top: 0;
}
/* post モード：投稿カードを中央寄せ（widgets.js 置換後の iframe にも効く） */
.x-embed--post .twitter-tweet {
  margin-left:  auto !important;
  margin-right: auto !important;
}

/* =========================================================
   SNSバナー（ショートコード [sns_banners]・E案）
   器＝白ボタン＋濃紺文字＋枠でサイトに統一、色はアイコンだけ
   （X=黒 / Instagram=ピンク / YouTube=赤）＝認知と統一感の両取り
   ========================================================= */
.sns-banners {
  display:         flex;
  gap:             14px;
  justify-content: center;
  flex-wrap:       wrap;
  max-width:       640px;
  margin:          0 auto;
}
/* 各セクション下部の一覧ボタン（.index_archive_button a）に見た目を合わせる：
   青塗り＋白文字・角丸なし・標準ウェイト・14px。ホバーはテーマ標準の色遷移のみ
   （transform の持ち上げは他ボタンで使っていないため付けない）。
   アイコンは白の単色（色ではなく形でSNSを認識）。 */
.sns-banner-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             9px;
  padding:         12px 22px;
  border-radius:   0;                    /* テーマの実ボタンは角丸なし */
  background:      var(--accent);
  font-size:       14px;                 /* 一覧ボタンに合わせる */
  font-weight:     normal;               /* 一覧ボタンは標準ウェイト（太字にしない） */
  text-decoration: none;
  border:          1px solid var(--accent);
  box-sizing:      border-box;           /* SPで幅100%時にpadding/borderで画面外へはみ出すのを防ぐ */
  transition:      background-color 0.2s ease; /* 持ち上げ廃止・色遷移のみ（グローバルの a と同じ） */
}
.sns-banner-btn:hover {
  background:   var(--accent-dark);
  border-color: var(--accent-dark);
}
/* 文字は必ず白。バナーは本文枠(.post_content)内に出るため、
   本文リンク色(.post_content a=青)に負けないよう詳細度を上げて上書きする。 */
.sns-banners .sns-banner-btn,
.sns-banners .sns-banner-btn:hover,
.sns-banners .sns-banner-btn span { color: #fff !important; }
/* ホバー時の下線を消す（親テーマ .post_content a:hover の text-decoration:underline を上書き） */
.sns-banners .sns-banner-btn,
.sns-banners .sns-banner-btn:hover,
.sns-banners .sns-banner-btn:hover span { text-decoration: none !important; }
.sns-banner-btn .sns-ic { width: 19px; height: 19px; flex: none; fill: #fff; }

/* plain 出力（[sns_banners plain="1"]）：帯なし。heading があれば軽い見出しを表示 */
.sns-plain { text-align: center; margin-bottom: 40px; }
.sns-plain__title {
  margin:         0 0 12px;
  font-family:    var(--font-base);
  font-size:      17px;      /* コーナー版(22px)より軽め */
  font-weight:    600;
  color:          var(--sidebar-bg);
  letter-spacing: 0.04em;
}
/* plain のボタン：3ボタンを均等幅（三等分）で横並び */
.sns-banners--fill { max-width: 720px; }
.sns-banners--fill .sns-banner-btn {
  flex:            1 1 0;    /* 3等分 */
  min-width:       0;
  justify-content: center;   /* 幅が広がってもアイコン＋文字を中央に */
}
@media ( max-width: 600px ) {
  .sns-banners--fill { flex-direction: column; }
  .sns-banners--fill .sns-banner-btn { width: 100%; }
}

/* SNSコーナー（見出し＋帯）：存在感を出すためのまとまり。
   見出しはセクション見出しと同じゴシック。ボタンは一覧ボタン相当に大きく。 */
.sns-promo {
  display:         flex;                   /* 縦並び＋中央寄せで、見出し/説明/ボタンを塊ごと確実に中央に */
  flex-direction:  column;
  align-items:     center;
  background:      var(--bg-sub);          /* 薄いブルーグレーの帯 */
  border-top:      3px solid var(--accent);
  padding:         40px 20px;
  text-align:      center;
}
.sns-promo__title {
  margin:         0 0 6px;
  font-size:      22px;
  color:          var(--sidebar-bg);       /* 濃紺 */
  font-family:    var(--font-base);
  font-weight:    600;
  letter-spacing: 0.06em;
}
.sns-promo__sub {
  margin:     0 auto 22px;
  max-width:  40em;
  font-size:  13px;
  color:      var(--text);
  opacity:    .75;
}
/* 説明文は必ず中央（詳細度を上げて確実に） */
.sns-promo .sns-promo__sub { text-align: center !important; }
/* コーナー内は横幅制限を外し、PCでは3つ横1列（狭い画面のみ折返し） */
.sns-promo .sns-banners { gap: 16px; max-width: none; }
/* コーナー内のボタンは一覧ボタン相当のサイズに（存在感） */
.sns-promo .sns-banner-btn {
  min-width:       160px;
  padding:         0 30px;
  height:          54px;
  justify-content: center;
  gap:             10px;
}
.sns-promo .sns-banner-btn .sns-ic { width: 20px; height: 20px; }
/* SP：トップのSNSコーナーも縦積みに（既定だと3ボタンが折り返して三角形になるため。plainと同様） */
@media ( max-width: 600px ) {
  .sns-promo .sns-banners { flex-direction: column; align-items: stretch; width: 100%; }
  .sns-promo .sns-banner-btn { width: 100%; min-width: 0; }
}

/* =========================================================
   トップ各セクションが投稿ゼロのときのフォールバックメッセージ
   custom.js が .post_list の無いセクション/列に .no-posts-msg を挿入し、
   意味のない一覧ボタンを隠す（:has() 非依存で全ブラウザ動作）。
   お知らせは列(.box)単位なので片方だけ空でも2列レイアウトが崩れない。 */
.no-posts-msg {
  display:         flex;            /* 一定の高さの中で上下・左右中央にそろえる */
  align-items:     center;
  justify-content: center;
  min-height:      150px;          /* 空でも間延びしない程度の高さを確保 */
  margin:          0;
  padding:         10px 12px;
  text-align:      center;
  color:           var(--text);
  opacity:         .7;
  font-size:       14px;
}
/* お知らせの空列：ボタン用に確保していた下余白(padding-bottom)は不要なので通常に戻す
   （高さは .no-posts-msg の min-height で確保）。既存 .box.show_link 指定に勝つよう詳細度を上げる */
#index_news .box.no-posts,
.pc #index_news .box.show_link.no-posts { padding-bottom: 20px !important; }

/* Instagram 埋め込み（ショートコード [insta_embed]） */
.insta-embed {
  max-width: 550px;   /* Instagram埋め込みの標準幅に合わせる */
  margin: 0 auto;
  text-align: center;
}
.insta-embed .instagram-media {
  margin-left:  auto !important;
  margin-right: auto !important;
}

/* YouTube 埋め込み（ショートコード [yt_embed]・レスポンシブ16:9） */
.yt-embed {
  max-width: 550px;
  margin: 0 auto;
}
.yt-embed__frame {
  position:      relative;
  aspect-ratio:  16 / 9;
  width:         100%;
  background:    #000;
  border-radius: 6px;
  overflow:      hidden;
}
.yt-embed__frame iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   0;
  display:  block;
}

/* =========================================================
   SNSブロック 3カラム横並び（囲みショートコード [sns_row]）
   PCで幅を三等分。狭い画面では 2列→1列 に折り返す。
   ========================================================= */
.sns-row {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
  align-items:           start;
  justify-items:         center;
  max-width:             1100px;
  margin:                0 auto;
}
/* 横並びの中では各埋め込みはカラム幅いっぱいに使う */
.sns-row > .x-embed,
.sns-row > .insta-embed,
.sns-row > .yt-embed {
  max-width: 100%;
  width:     100%;
  margin:    0;
}
@media ( max-width: 1024px ) {
  .sns-row { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 767px ) {
  .sns-row { grid-template-columns: 1fr; }
}