@charset "UTF-8";
/*
 * Chiikoto wpForo Custom - フロント表示調整用CSS
 *
 * 方針:
 * 1. 自前で完全にマークアップを制御している .chiikoto-* (掲示板トップの独自
 *    レイアウト、templates/wpforo/forum.php)は、しっかりデザインする。
 * 2. wpFore本体のDOM構造に依存する部分は、実在確認済みのクラス名のみを対象に
 *    最小限の上書きにとどめ、wpForoアップデートでの崩れを防ぐ。
 */

/* ==========================================================================
   共通トークン
   ========================================================================== */
#wpforo-wrap,
.chiikoto-community-home {
	--chiikoto-blue: #2563eb;
	--chiikoto-blue-dark: #1d4ed8;
	--chiikoto-blue-bg: #eff6ff;
	--chiikoto-red: #dc2626;
	--chiikoto-red-bg: #fef2f2;
	--chiikoto-border: #e5e7eb;
	--chiikoto-text: #1f2937;
	--chiikoto-text-muted: #6b7280;
	--chiikoto-bg: #ffffff;
	--chiikoto-radius: 12px;

	/* 余白の共通ルール(PC値)。セクション間・見出しと内容の間・リスト項目間の
	   3種類に統一し、ページごとに場当たり的なmarginを追加しないようにする。 */
	--chiikoto-space-section: 48px;
	--chiikoto-space-heading: 16px;
	--chiikoto-space-item: 14px;
}

@media (max-width: 600px) {
	#wpforo-wrap,
	.chiikoto-community-home {
		--chiikoto-space-section: 32px;
		--chiikoto-space-heading: 12px;
		--chiikoto-space-item: 12px;
	}
}

#wpforo,
#wpforo * {
	box-sizing: border-box;
}

/* 引用元へのジャンプ先(themes/2026/post.php等が投稿に付与する id="post-N"、
   実在確認済み)が固定ヘッダーに隠れないための余白。実際の値は
   assets/chiikoto-wpforo.js が実測したヘッダー高さでCSS変数を上書きする。
   ここでの110pxはJS実行前(初回ペイント直後)の暫定値で、実測(PC約94px+16px)を
   参考にした安全側のフォールバック。 */
#wpforo [id^="post-"] {
	scroll-margin-top: var(--chiikoto-scroll-offset, 110px);
}

#wpforo {
	max-width: 100%;
	overflow-x: hidden;
}

/* ==========================================================================
   1. 掲示板全体で共通のシンプルなQ&Aデザイン
   方針: 白背景・青アクセント・薄いグレー境界線・適度な余白。大きな影や
   過剰な角丸カードは使わず、質問タイトルを最も目立たせる。
   掲示板トップ(chiikoto-community-home)、親カテゴリー
   (chiikoto-parent-category)、子カテゴリー詳細(chiikoto-subcat-detail)、
   最近の投稿(chiikoto-recent-wrap)、スレッド詳細(chiikoto-thread)の
   5画面で共通のパーツ(.chiikoto-page-title, .chiikoto-subcat-row,
   .chiikoto-topic-list 等)を使い回している。
   ========================================================================== */

.chiikoto-community-home,
.chiikoto-parent-category,
.chiikoto-subcat-detail,
.chiikoto-recent-wrap,
.chiikoto-thread {
	color: var(--chiikoto-text) !important;
	max-width: 100%;
	/* 上部wpForoナビ(#wpforo-menu、border-bottomで区切り済み)の直後に
	   本文が接触して見えないよう、一律で上に余白を確保する
	   (特にスマホ幅で「質問・相談 / 最近の投稿」ナビと「相談ひろば」見出しが
	   接触して見えていた問題への対応)。 */
	padding-top: 24px !important;
}

/* wpForo本体 themes/2026/style.css の `#wpforo #wpforo-wrap div, p, ul, li, ...`
   という大量のタグセレクタに対するCSSリセット(詳細度(2,0,1)、実際には
   `margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline;`)
   が、単純なクラスセレクタ(詳細度(0,1,0)、chiikoto-*のクラスはすべてこの
   詳細度)の margin/padding/border 指定「と」font-size指定の両方を軒並み
   無効化していることを実機の computed style / マッチしたCSSルール確認で
   特定した(font-sizeが 100% ≒ 親要素と同じ値になり、見出し・本文・補助
   情報の文字サイズの強弱が全く付かなくなっていた)。そのため、この節
   (掲示板トップ〜スレッド詳細で共通利用するレイアウト用の
   margin/padding/border/font-size)には !important を付与し、確実に反映
   されるようにする。line-height・font-weight・色はこのリセットの対象外
   のため、!important なしで問題ない(ただしh1/h2タグ自体には別途
   font-size/padding/line-height/font-weightを固定するルールがあり、
   そちらは line-height/font-weight も上書きするため、見出し系クラスのみ
   line-height にも !important を付与している)。 */

/* themes/2026/style.css の `#wpforo #wpforo-wrap h1` / `#wpforo #wpforo-wrap h2`
   (詳細度(2,0,1)、font-size:20px; padding:10px 2px; line-height:22px;)が、
   見出しに使っている .chiikoto-page-title(h1) / .chiikoto-hero-title(h1) /
   .chiikoto-list-title(h2) の font-size・padding・line-height を上書きして
   いたことを実機のマッチしたCSSルール確認で特定した。見た目を保つため
   font-size・padding にも !important を付与する。 */

/* さらに themes/2026/style.css の `#wpforo #wpforo-wrap * { color: inherit; }`
   (詳細度(2,0,0)、ユニバーサルセレクタ)が、chiikoto-*のクラスセレクタ
   (詳細度(0,1,0))で指定した文字色を軒並み「親要素からの継承」に上書きして
   いたことも実機のマッチしたCSSルール確認で特定した(特にリンク(<a>)の
   子孫要素は、uploads/wpforo/assets/colors.css の
   `#wpforo #wpforo-wrap a { color: rgb(63,119,150); }` を継承してしまい、
   質問タイトル・カテゴリー名等が意図しない色になっていた)。そのため、
   この節の文字色指定にも !important を付与する。 */

.chiikoto-page-title {
	font-size: 1.4em !important;
	font-weight: 700;
	margin: 0 0 6px !important;
	padding: 0 !important;
	color: var(--chiikoto-text) !important;
	line-height: 1.35 !important;
}

.chiikoto-page-desc {
	margin: 0 0 20px !important;
	color: var(--chiikoto-text-muted) !important;
	font-size: 0.95em !important;
	line-height: 1.6;
}

.chiikoto-hero {
	/* 「相談ひろば」導入ブロックからカテゴリー一覧までの距離だけは、他の
	   セクション間(--chiikoto-space-section、48px/32px)より少し狭く見せる
	   ため、共通変数を使わず固定値を指定する(実画面で見て自然な距離に微調整
	   したもの。他のセクション間隔には影響しない)。区切り線(border-bottom)は
	   指示によりなし。 */
	margin: 0 0 20px !important;
	padding: 0 !important;
	border-bottom: 0 !important;
}

.chiikoto-hero-title {
	font-size: 24px !important;
	font-weight: 700;
	margin: 0 0 8px !important;
	padding: 0 !important;
	color: var(--chiikoto-text) !important;
	line-height: 1.3 !important;
}

.chiikoto-hero-desc {
	margin: 0 !important;
	color: var(--chiikoto-text-muted) !important;
	font-size: 15px !important;
	line-height: 1.6;
}

/* カテゴリー一覧: 常に縦積みの薄い区切り線リスト。PCでも横カード化しない。 */
/* 「相談ひろば」直下の掲示板トップのカテゴリー一覧(.chiikoto-categories)は
   border-topを持たせていた。.chiikoto-hero自体のborder-bottomは既に
   なしにしていたが、この border-top がすぐ下(margin-bottom 32px の位置)に
   来るため、見た目には「相談ひろばの下に区切り線がある」のと同じに見えて
   しまっていた(実機のgetBoundingClientRectで .chiikoto-hero の
   border-bottom-width が0pxである一方、.chiikoto-categories の
   border-top-width が1pxであることを確認して特定)。指示により、掲示板
   トップの一番上のブロックの下に線を出さないため、こちらも削除する。
   親カテゴリー画面(.chiikoto-subcat-list)は掲示板トップの「相談ひろば」を
   含まない別画面のため、今回の指示対象外として区切り線を残す。 */
.chiikoto-categories {
	margin: 0 0 var(--chiikoto-space-section) !important;
	padding: 0 !important;
	border-top: 0 !important;
}

.chiikoto-subcat-list {
	margin: 0 0 var(--chiikoto-space-section) !important;
	padding: 0 !important;
	border-top: 1px solid var(--chiikoto-border) !important;
}

.chiikoto-subcat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 4px !important;
	margin: 0 !important;
	border-bottom: 1px solid var(--chiikoto-border) !important;
	text-decoration: none;
	color: var(--chiikoto-text) !important;
	min-height: 44px;
}

.chiikoto-subcat-row:hover .chiikoto-subcat-name {
	color: var(--chiikoto-blue) !important;
}

.chiikoto-subcat-main {
	min-width: 0;
	flex: 1 1 auto;
}

.chiikoto-subcat-name {
	font-weight: 700;
	font-size: 16px !important;
	color: var(--chiikoto-text) !important;
}

.chiikoto-subcat-desc {
	font-size: 14px !important;
	color: var(--chiikoto-text-muted) !important;
	line-height: 1.6;
	margin: 6px 0 0 !important;
}

.chiikoto-subcat-aside {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	white-space: nowrap;
}

.chiikoto-subcat-count {
	font-size: 13px !important;
	color: var(--chiikoto-text-muted) !important;
}

.chiikoto-subcat-arrow {
	color: var(--chiikoto-blue) !important;
	font-weight: 700;
}

/* 新着・よく見られている質問・回答募集中の各セクション */
.chiikoto-home-section {
	margin: 0 0 var(--chiikoto-space-section) !important;
}

.chiikoto-home-section:last-child {
	margin-bottom: 0 !important;
}

.chiikoto-home-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 var(--chiikoto-space-heading) !important;
}

.chiikoto-see-all {
	font-size: 13px !important;
	color: var(--chiikoto-blue) !important;
	text-decoration: none;
	white-space: nowrap;
}

.chiikoto-see-all:hover {
	text-decoration: underline;
}

.chiikoto-home-columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.chiikoto-list-title {
	font-size: 19px !important;
	font-weight: 700;
	margin: 0 0 var(--chiikoto-space-heading) !important;
	padding: 0 !important;
	color: var(--chiikoto-text) !important;
	line-height: 1.4 !important;
}

.chiikoto-topic-list {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid var(--chiikoto-border) !important;
}

.chiikoto-topic-row {
	padding: var(--chiikoto-space-item) 2px !important;
	margin: 0 !important;
	border-bottom: 1px solid var(--chiikoto-border) !important;
	min-width: 0;
}

.chiikoto-topic-cat {
	display: inline-block;
	font-size: 13px !important;
	color: var(--chiikoto-text-muted) !important;
	margin-right: 6px !important;
}

/* 質問タイトルは「どんな質問が投稿されているか」という最重要情報のため、
   新着・よく見られている質問・回答募集中のすべてで最も目立つ色(青系)・
   太さ・サイズに統一する。カテゴリー名・投稿者・日時・閲覧数・返信数等の
   補助情報より必ず優位になるようにする。 */
.chiikoto-topic-title {
	display: block;
	color: var(--chiikoto-blue) !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 16px !important;
	line-height: 1.5;
	overflow-wrap: break-word;
	margin: 0 0 4px !important;
}

.chiikoto-topic-title:hover {
	color: var(--chiikoto-blue-dark) !important;
}

.chiikoto-topic-meta {
	display: block;
	font-size: 13px !important;
	color: var(--chiikoto-text-muted) !important;
}

/* 新着質問のみ「タイトル→カテゴリー→(投稿者・日時 | 返信数/ラベル)」の
   3行構成。カテゴリーが独立した <div> の場合(新着質問)だけブロック化し、
   回答募集中セクションの <span class="chiikoto-topic-cat">(1行にまとめる
   構成、forum.phpで実在確認済み)には影響しないようにセレクタを分ける。 */
div.chiikoto-topic-cat {
	display: block;
	font-size: 13px !important;
	color: var(--chiikoto-blue) !important;
	margin: 0 0 4px !important;
}

span.chiikoto-topic-cat {
	display: inline-block;
	font-size: 13px !important;
	color: var(--chiikoto-blue) !important;
}

/* 投稿者・日時と「回答募集中」ラベルはPCでは横並び。文字を縮小してまで
   1行へ押し込まず、幅が足りない場合は自然に折り返す(次の行へ送る)。 */
.chiikoto-topic-sub {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 12px;
}

.chiikoto-topic-sub .chiikoto-topic-meta {
	overflow-wrap: break-word;
}

/* 「回答募集中」を一目でステータスと分かる強さへ改善。派手にはしないが、
   薄い青背景・青文字・はっきりした角丸ピルで視認性を上げる。 */
.chiikoto-unanswered-badge {
	display: inline-block;
	flex: 0 0 auto;
	font-size: 13px !important;
	font-weight: 700;
	color: var(--chiikoto-red) !important;
	background: var(--chiikoto-red-bg);
	border-radius: 6px;
	padding: 4px 10px !important;
	margin: 0 !important;
	line-height: 1.4;
	white-space: nowrap;
}

.chiikoto-empty {
	color: var(--chiikoto-text-muted) !important;
	font-size: 14px !important;
	padding: var(--chiikoto-space-item) 2px !important;
	margin: 0 !important;
}

@media (max-width: 782px) {
	.chiikoto-home-columns {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ==========================================================================
   1b. wpForo上部ナビの簡素化・パンくずの掲示板トップのみ非表示
   themes/2026/header.php で実在確認済み: #wpforo-menu > .wpf-left
   (.wpf-res-menu ハンバーガー + #wpf-menu ul、includes/hooks.php
   nav_menu()相当) + .wpf-bar-right.wpf-search(検索フォーム)。
   PC・スマホともグレーの大きなバーではなく、白背景+文字+アクティブ項目の
   細い青下線、というシンプルな表示にする。ハンバーガーメニューは常時
   非表示にし、代わりにメニュー項目自体を常時表示にすることで、スマホでも
   「質問・相談 / 最近の投稿」がそのまま見える(WordPressテーマ側の
   ハンバーガーメニューには一切触れていない)。
   ========================================================================== */

/* wpForo本体 uploads/wpforo/assets/colors.css が
   `#wpforo #wpforo-wrap #wpforo-menu`(ID3つ分の詳細度)でグレー背景を
   指定しており、こちらの `#wpforo #wpforo-menu`(ID2つ分)は詳細度で負けて
   上書きできないことを実機のマッチしたCSSルール確認で検証したため、
   この節は !important を使う(既存のX共有ボタン等と同じ理由)。
   「質問・相談 / 最近の投稿」ラベルと検索を同じ1行に収めるため、
   flex-wrap は nowrap にする(折り返して2行になると、スマホでナビの高さが
   不安定になり「相談ひろば」との間隔が崩れて見えていた)。 */
#wpforo #wpforo-wrap #wpforo-menu {
	background: var(--chiikoto-bg) !important;
	border-bottom: 1px solid var(--chiikoto-border) !important;
	box-shadow: none !important;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 8px;
	padding: 6px 2px;
	min-height: 56px;
}

#wpforo #wpforo-wrap #wpforo-menu .wpf-res-menu {
	display: none !important;
}

#wpforo #wpforo-wrap #wpforo-menu .wpf-left {
	display: flex !important;
	align-items: center;
	flex: 0 0 auto;
	min-width: 0;
}

/* themes/2026/style.css:2381 `@media screen and (min-width:621px) {
   #wpforo #wpforo-wrap #wpforo-menu .wpf-menu{display:block!important;} }`
   が、こちらと全く同じセレクタ・詳細度・!importantで display:block を
   指定しており、詳細度が同点の場合はCSSソースの読み込み順(wpForo本体の
   style.cssが後に読み込まれる)で決着するため、このルールだけ上書きできない
   ことを実機のCSS読み込み順確認で検証した。#wpf-menu というID(実在確認済み、
   ul#wpf-menu.wpf-menu)を足して詳細度を上げ、確実に上書きする。 */
/* themes/2026/style.css:2486 `@media screen and (max-width:620px) {
   #wpforo #wpforo-wrap #wpforo-menu .wpf-menu, #wpforo #wpforo-wrap
   #wpforo-menu #wpf-menu{ display:none; position:absolute; z-index:99999;}}`
   がスマホ幅(620px以下)で #wpf-menu を position:absolute にしており、
   これによりナビ項目が通常のフローから外れ、親要素 .wpf-left の
   レイアウト上の幅が0になる(実機のgetComputedStyleで .wpf-left の
   width が0pxになっていることを確認済み)。その結果、右側の検索欄が
   ナビ項目の残り幅ではなく行全体を占有してしまい、「質問・相談/最近の投稿」
   の文字と検索欄が重なって見える不具合が発生していた。position を
   static に戻すことで解消する。 */
/* uploads/wpforo/assets/colors.css:820 `@media screen and (max-width:800px) {
   #wpforo #wpforo-wrap #wpforo-menu .wpf-menu{background-color:#f5f5f5;} }`
   がスマホ〜タブレット幅(800px以下)でナビ項目全体(ul#wpf-menu)に薄い
   グレー背景を付けており、これが「質問・相談/最近の投稿」に背景色が
   付いて見える原因だった(li単体の背景は既に透明化済みだったが、ul自体の
   背景は未対応だった)。透明にして解消する。 */
#wpforo #wpforo-wrap #wpforo-menu #wpf-menu.wpf-menu {
	display: flex !important;
	position: static !important;
	background: transparent !important;
	flex-wrap: nowrap;
	align-items: center;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 18px;
}

/* wpForo本体 assets/js/frontend.js:942-953 に、ウィンドウ幅602px以上かつ
   #wpforo-wrap幅800px未満(本テーマのコンテンツ幅は常時約720px前後のため、
   実質デスクトップ・タブレットの大半で該当)の場合、検索欄をfocusすると
   jQueryの `$('#wpforo-menu .wpf-menu li').hide()` でナビ項目に
   インラインstyle="display:none"を強制し、blurすると`.show()`で戻す、
   という処理が実在する(実コード確認済み)。これはwpForo本来の「検索欄を
   広げるためナビを一時的に隠す」設計だが、今回はナビと検索欄を常時同時に
   表示する方針のため、この動作を打ち消す必要がある。wpForo本体JSは編集
   できないため、!important を使い、インラインstyleより優先させることで
   対応する(!important付きの外部CSSはインラインstyleより優先される仕様を
   利用)。 */
#wpforo #wpforo-wrap #wpforo-menu .wpf-menu li {
	display: flex !important;
	margin: 0 !important;
	flex: 0 0 auto;
}

/* 「質問・相談」「最近の投稿」が途中で改行してレイアウトが崩れないよう
   white-space:nowrap を明示する(以前はナビが狭い幅で折り返し、
   検索欄と重なって見える不具合の一因になっていた)。 */
#wpforo #wpforo-wrap #wpforo-menu .wpf-menu a {
	display: inline-block;
	padding: 8px 2px !important;
	color: var(--chiikoto-text) !important;
	font-weight: 500;
	font-size: 15px;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	background: none !important;
}

#wpforo #wpforo-wrap #wpforo-menu .wpf-menu .wpforo-active a {
	color: var(--chiikoto-blue) !important;
	border-bottom-color: var(--chiikoto-blue);
}

/* uploads/wpforo/assets/colors.css が
   `#wpforo #wpforo-wrap #wpforo-menu #wpf-menu .wpforo-active,
   #wpforo #wpforo-wrap #wpforo-menu #wpf-menu li.wpforo-active,
   #wpforo #wpforo-wrap #wpforo-menu #wpf-menu li:hover, ...`
   (ID3つ分の詳細度)でアクティブ項目・ホバー項目にグレーの背景色を付けており、
   これがタブ風の四角い見た目の直接の原因だったことを実機のマッチしたCSS
   ルール確認で特定した。現在ページの識別は下線(border-bottom-color、上の
   ルール)だけで行うため、背景色は透明にする。 */
#wpforo #wpforo-wrap #wpforo-menu #wpf-menu li.wpforo-active,
#wpforo #wpforo-wrap #wpforo-menu #wpf-menu li:hover,
#wpforo #wpforo-wrap #wpforo-menu #wpf-menu li.current-menu-ancestor,
#wpforo #wpforo-wrap #wpforo-menu #wpf-menu li.current-menu-parent,
#wpforo #wpforo-wrap #wpforo-menu #wpf-menu li.current_page_item {
	background-color: transparent !important;
}

/* ==========================================================================
   検索フォーム。themes/2026/header.php の実DOMは
   <div class="wpf-bar-right wpf-search"><div class="wpf-search-form">
   <form><i class="fas fa-search"></i><input class="wpf-search-field" ...
   style="margin-right:10px;"></form></div></div>。
   wpForo本体 themes/2026/style.css は「幅24pxのアイコンだけの見た目→
   :focusで幅180pxに広がる」という設計だが、実機確認の結果フォーカスするまで
   入力欄だと分かりにくいという指摘のため、幅はinputの transition ではなく
   親要素のflexで制御し、常時「枠線のある入力欄」として見せる方式に変更した。
   ========================================================================== */

#wpforo #wpforo-wrap #wpforo-menu .wpf-bar-right.wpf-search {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: flex-end;
}

#wpforo #wpforo-wrap #wpforo-menu .wpf-search .wpf-search-form {
	display: flex;
	padding-right: 0;
	flex: 1 1 auto;
	min-width: 0;
	/* PCでナビ項目が短くフォーム側に余白が余っても、間延びした横長入力欄に
	   ならないよう上限を設ける(実画面で見て自然な幅に調整)。 */
	max-width: 220px;
}

#wpforo #wpforo-wrap #wpforo-menu .wpf-search form {
	display: flex;
	width: 100%;
	position: relative;
}

/* 入力欄だと一目で分かるよう、白背景・薄いグレー枠線・角丸・十分なpaddingを
   常時表示する。width/max-width/marginのみ、wpForo本体側の
   `:focus{width:180px}`(themes/2026/style.css)や検索欄に付く
   インラインstyle="margin-right:10px"(themes/2026/header.php)と競合するため
   !important を付ける。他のプロパティはこのセレクタが#wpforo-menuを含む
   IDセレクタ3つ分の詳細度を持ち、wpForo本体側(ID2つ分)より高いため
   !important なしで上書きできる。 */
/* themes/2026/style.css の非focus時ルールが z-index:30 を指定しており、
   これがアイコン(z-index:2、下記)より上に来て、常時表示の白背景で虫眼鏡
   アイコンを覆い隠してしまっていた(実機で「focusしていないとアイコンが
   見えない」という指摘の原因)。アイコンより低いz-indexに固定して解消する。 */
#wpforo #wpforo-wrap #wpforo-menu .wpf-search-field {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	z-index: 1;
	height: 44px;
	padding: 0 12px 0 34px;
	border: 1px solid var(--chiikoto-border);
	border-radius: 999px;
	background: var(--chiikoto-bg);
	color: var(--chiikoto-text);
	font-size: 14px;
	box-shadow: none;
	cursor: text;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#wpforo #wpforo-wrap #wpforo-menu .wpf-search-field::placeholder {
	color: var(--chiikoto-text-muted);
}

#wpforo #wpforo-wrap #wpforo-menu .wpf-search-field:focus {
	outline: none;
	border-color: var(--chiikoto-blue);
	box-shadow: 0 0 0 3px var(--chiikoto-blue-bg);
}

/* 【虫眼鏡アイコンのクリック検索対応】assets/chiikoto-wpforo.js
   enableSearchIconSubmit() が、この <i class="fas fa-search"> を
   <button type="submit" class="chiikoto-search-submit"> でラップし直す
   (アイコン自体・input・action・hidden fields・DOM順序は変更しない)。
   位置決め(left:12px/top:50%/z-index等)は、これまでアイコン自身に付けて
   いたものをボタン側に移し、ボタンをクリック領域として機能させる。
   ボタンには背景・枠線を一切付けず、見た目は変更前のアイコンと同じに保つ。 */
#wpforo #wpforo-wrap #wpforo-menu .wpf-search .chiikoto-search-submit {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 4px;
	border: 0;
	background: transparent;
	z-index: 5;
	cursor: pointer;
	line-height: 1;
}

/* themes/2026/style.css の `#wpforo #wpforo-wrap .wpf-search i
   {position:absolute; margin:0 0 7px; top:0; font-size:16px; line-height:30px;
   padding:0 0 0 7px; z-index:10; ...}`(実在確認済み)は、アイコンが
   .wpf-search の子孫であれば(直下の子でなくても)マッチし続けるため、
   ボタンでラップした後もアイコン自身に position:absolute が適用され、
   ボタン(position:absoluteに変更済み)内で絶対配置になってしまい、
   ボタンから見て「中身の無いflexコンテナ」と同じ扱いになってボタンの
   幅/高さがpadding分(8px四方)にしか広がらない不具合を実機のoffsetWidth/
   Heightで確認した。position/margin/top/padding/z-indexを明示的に
   リセットし、アイコンをボタン内の通常の(絶対配置ではない)flexアイテムに
   戻す。 */
#wpforo #wpforo-wrap #wpforo-menu .wpf-search .chiikoto-search-submit i {
	position: static;
	margin: 0;
	top: auto;
	padding: 0;
	z-index: auto;
	font-size: 14px;
	line-height: 1;
	color: var(--chiikoto-text-muted);
	pointer-events: none;
}

/* hoverでごく軽く色が変わる程度にとどめ、青い大きなボタン化・背景色・
   枠線・別ボタンの追加はしない(指示どおり)。 */
#wpforo #wpforo-wrap #wpforo-menu .wpf-search .chiikoto-search-submit:hover i,
#wpforo #wpforo-wrap #wpforo-menu .wpf-search .chiikoto-search-submit:focus-visible i {
	color: var(--chiikoto-blue);
}

#wpforo #wpforo-wrap #wpforo-menu .wpf-search .chiikoto-search-submit:focus-visible {
	outline: 2px solid var(--chiikoto-blue);
	outline-offset: 1px;
	border-radius: 999px;
}

/* JS未実行時(初回ペイント直後の一瞬、または万一JSが読み込めなかった場合)の
   保険として、まだbuttonにラップされていない素の<i>にも同じ位置・見た目を
   維持する(クリックはできないが、Enterキー検索とレイアウトは従来どおり
   機能する)。 */
#wpforo #wpforo-wrap #wpforo-menu .wpf-search form > i.fa-search {
	position: absolute;
	left: 12px;
	top: 50%;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	font-size: 14px;
	line-height: 1;
	color: var(--chiikoto-text-muted);
	z-index: 5;
	pointer-events: none;
}

/* chiikoto-wpforo-custom がテンプレート差し替え済みの掲示板系画面
   (掲示板トップ・親カテゴリー・子カテゴリー詳細・最近の投稿・スレッド詳細、
   includes/class-front-cleanup.php add_board_body_classes() 参照)でのみ、
   wpForo標準パンくず(.wpf-breadcrumb、classes/Template.php breadcrumb()、
   実在確認済み)を非表示にする。WordPressテーマ側の「ホーム > 掲示板」
   パンくずとは別要素で、この非表示はwpFore側パンくずのみを対象にする。
   検索結果・会員ページ等、テンプレートを差し替えていない画面には影響しない。
   wpForoのパンくず機能・components.breadcrumb設定自体は変更していない。 */
body.chiikoto-board-page #wpforo .wpf-breadcrumb {
	display: none !important;
}

/* WordPressテーマ側パンくず(wp-content/themes/mybiz/template-parts/
   breadcrumb.php が出力する <nav class="breadcrumb">、page.php の
   <header class="entry-header"> 内、実機DOM確認済み。上のwpForo側
   パンくず(.wpf-breadcrumb)とは別要素)も、同じ chiikoto-board-page
   クラスを使って掲示板系画面でのみ非表示にする。掲示板の各画面
   (掲示板トップ/親カテゴリー/子カテゴリー詳細/最近の投稿/スレッド詳細/
   検索結果、いずれも includes/class-front-cleanup.php
   add_board_body_classes() で chiikoto-board-page が付与される)は、
   すべて同一のWordPress固定ページ(タイトル「掲示板」)内でwpForoが
   URLに応じて表示を出し分けている実装のため、page.php が毎回同じ
   breadcrumbを出力してしまうことを実機DOM確認で特定した。ページタイトル
   (<h1 class="entry-title">掲示板</h1>)は指示により変更していない。
   テーマ本体のPHP/CSSは一切編集していない。

   【掲示板トップだけ例外】掲示板トップ(chiikoto-board-home、
   add_board_body_classes()参照。template==='forum'かつforumidが空の
   ときだけ chiikoto-board-page とあわせて付与される、実在確認済み)では、
   指示によりこの非表示を適用しない。掲示板トップは他の掲示板ページと違い
   独自のパンくず相当の導線(「相談ひろば」見出し等)を持たないため、
   テーマ標準+Breadcrumb NavXTプラグインが既に出力している
   「ホーム ＞ 掲示板」をそのまま活かす。新しいパンくずのHTML生成・
   Breadcrumb NavXT側の設定変更は一切行っていない。 */
body.chiikoto-board-page:not(.chiikoto-board-home) nav.breadcrumb {
	display: none !important;
}

@media (max-width: 480px) {
	#wpforo #wpforo-wrap #wpforo-menu #wpf-menu.wpf-menu {
		gap: 14px;
	}
	#wpforo #wpforo-wrap #wpforo-menu .wpf-menu a {
		font-size: 14px;
		padding: 8px 0 !important;
	}
	#wpforo #wpforo-wrap #wpforo-menu .wpf-bar-right.wpf-search {
		min-width: 60px;
	}
	/* スマホでは検索欄がナビ全体に対してやや大きく見えるという指摘のため、
	   PC/タブレットの上限(220px)より狭い上限をこの幅だけに設定する。
	   flex(flex:1 1 auto、既存)による可変幅は維持したまま上限だけを
	   下げるため、320px前後のより狭い画面でも詰まりすぎない。 */
	#wpforo #wpforo-wrap #wpforo-menu .wpf-search .wpf-search-form {
		max-width: 150px;
	}
}

/* ==========================================================================
   2. 返信フォームのゲスト欄調整(名前・メール直書きのため、この2クラスのみ対象)
   classes/Template.php post_form() / portable_post_form() で実在確認済み。
   ========================================================================== */

.wpf-post-guest-email {
	display: none !important;
}

/* ==========================================================================
   3. リアクション・いいねボタンの非表示
   modules/reactions/classes/Template.php, Reactions.php で実在確認済みのクラス。
   ========================================================================== */

.wpf-reaction-wrap,
.wpforo-reaction,
.reacted-users {
	display: none !important;
}

/* ==========================================================================
   4. 全体の軽いトーン調整(wpForo標準DOMへの最小限の上書き)
   ========================================================================== */

#wpforo .wpf-button {
	border-radius: 8px;
}

#wpforo a {
	color: var(--chiikoto-blue, #2563eb);
}

/* 遷移先を持たない要素をリンク風に見せない。
   themes/2026/layouts/4/post.php 等で <a class="is_guest">(href属性なし、
   ゲスト投稿者にはプロフィールページがないため意図的にhrefが付与されていない)
   を実機DOMで確認済み。href属性を持たない <a> だけを対象にするため、実際に
   遷移可能なリンク(href付き、例:ログイン済みユーザーのプロフィールリンク)の
   見た目には影響しない。
   wpForo本体の uploads/wpforo/assets/colors.css が
   `#wpforo #wpforo-wrap a { color: ... }`(ID2つ分の詳細度)で全リンクの色を
   指定しており、こちらの `#wpforo a:not([href])`(ID1つ分)だけでは詳細度で
   負けて上書きできないことを実機のgetComputedStyleで確認したため、
   この節に限り !important を使う。 */
#wpforo a:not([href]) {
	color: inherit !important;
	text-decoration: none !important;
	cursor: default !important;
}

/* 「質問者」ラベル(includes/functions-template.php wpforo_topic_starter()、
   .wpf-post-starter、実在確認済み)は投稿者を示す説明ラベルであり、クリック
   できるリンクではないが、wpForo本体のテーマカラーCSSでリンクと同系色の
   水色になっているため、通常テキスト色に上書きする(同上の理由で!important)。 */
#wpforo .wpf-post-starter {
	color: var(--chiikoto-text-muted, #6b7280) !important;
}

#wpforo .wpforo-post,
#wpforo .wpf-head-bar,
#wpforo .wpforo-topics-wrap,
#wpforo .wpforo-section {
	border-radius: 10px;
}

/* ==========================================================================
   5. 投稿者表示の簡素化(themes/2026/layouts/4/post.php で実在確認済みのクラス)
   アバター・署名は wpForo標準設定(profiles.avatars / profiles.signature)側で
   OFFにしているため、ここでは設定に相当項目がないランク・タイトル・投稿数・
   参加日・ニックネーム・プロフィールボタンのみを対象にする。
   投稿者名(.wpf-author-name)と投稿日時(.wpf-post-date)は残す。
   ========================================================================== */

#wpforo .wpf-author-title,
#wpforo .wpf-author-posts,
#wpforo .wpf-content-head-bottom .wpf-author,
#wpforo .wpforo-memberinfo,
#wpforo .wpf-member-profile-buttons {
	display: none !important;
}

/* 「ログインすれば返信できます」等、未登録ユーザーへの登録・ログイン誘導 */
#wpforo .not_reg_user {
	display: none !important;
}

/* 「Forum Jump」ドロップダウン(includes/functions-template.php で実在確認済みの
   .wpf-forum-jump クラス)。カテゴリーが少ない匿名掲示板では不要な導線のため。 */
#wpforo .wpf-forum-jump {
	display: none !important;
}

/* フッターの「すべて既読にする」「最近の投稿」「未読の投稿」「タグ」リンク、
   フォーラム統計、最新メンバー、最新の投稿、アイコン凡例(themes/2026/footer.php
   #wpforo-stat-header / #wpforo-stat-body、実在確認済み)。
   components.footer 設定自体は wpforo_display_footer() の判定を兼ねており、
   OFFにするとfooter.php全体(Xへの共有ボタンを含む)が読み込まれなくなるため、
   設定はtrueのまま維持し、この内側のブロックだけをCSSで非表示にしている。 */
#wpforo-stat-header,
#wpforo-stat-body {
	display: none !important;
}

/* ==========================================================================
   6. 質問一覧(トピックリスト)の簡素化
   themes/2026/layouts/4/topic.php, layouts/4/topic-thread.php で実在確認済みの
   クラス。タイトル(著者名・経過時間つき)と返信数だけを残し、ステータス
   アイコン・著者アバター列・フォーラムの装飾アイコン列・閲覧数列・
   「最新の返信」列(二重にアバター等が出るため)を非表示にする。
   ========================================================================== */

#wpforo .wpf-thead-status,
#wpforo .wpf-thead-author,
#wpforo .wpf-thead-forum,
#wpforo .wpf-thead-views,
#wpforo .wpf-thead-last-reply,
#wpforo .wpf-thread-box.wpf-thread-status,
#wpforo .wpf-thread-box.wpf-thread-author,
#wpforo .wpf-thread-box.wpf-thread-forum,
#wpforo .wpf-thread-box.wpf-thread-views,
#wpforo .wpf-thread-box.wpf-thread-last-reply {
	display: none !important;
}

/* ==========================================================================
   7. Xへの共有ボタンをシンプルなテキストリンクにする
   classes/API.php share_buttons()経由(themes/2026/footer.php
   wpforo_share_buttons('bottom')が呼び出す既定タイプ)で実際に出力される
   .wpf-sb-button.wpf-tw(実機のDOMで確認済み。type='custom'の際に使われる
   .wpforo-share-button.wpf-twとは別クラス)にテキストラベルを付与し、
   アイコンだけの小さなSNSボタンではなく「Xで共有」と分かる表示にする。
   Facebook/WhatsApp/LinkedIn/VKは wpForo標準設定(social.sb)側で個別にOFFにして
   いるため、そもそも出力されない。

   wpForo本体は同じボタンに対して themes/2026/style.css の
   `#wpforo #wpforo-wrap .wpf-sbtn .wpf-sb-button.wpf-sb-icon`(width:36px の
   アイコン専用サイズ指定)と uploads/wpforo/assets/colors.css の
   `#wpforo #wpforo-wrap .wpf-sbtn.wpf-sb-style-grey .wpf-sb-button.wpf-sb-icon`
   (グレーの枠線色)を当てており、どちらもIDセレクタ2つぶんの詳細度を持つ。
   こちらのセレクタ(ID1つ)では負けてラベル用の横幅・余白が反映されないことを
   実機のgetComputedStyleで確認したため、この節に限り !important を使う。
   ========================================================================== */

#wpforo .wpf-sbtn-wrap .wpf-sb-button.wpf-tw,
#wpforo .wpf-sbtn-wrap .wpforo-share-button.wpf-tw {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	width: auto !important;
	padding: 6px 12px !important;
	line-height: 1.4 !important;
	border: 1px solid var(--chiikoto-border, #e5e7eb) !important;
	border-radius: 999px !important;
	font-size: 0.85em !important;
	color: var(--chiikoto-text, #1f2937) !important;
	background: #fff !important;
}

#wpforo .wpf-sbtn-wrap .wpf-sb-button.wpf-tw:hover,
#wpforo .wpf-sbtn-wrap .wpforo-share-button.wpf-tw:hover {
	border-color: var(--chiikoto-blue, #2563eb) !important;
	color: var(--chiikoto-blue, #2563eb) !important;
}

#wpforo .wpf-sbtn-wrap .wpf-sb-button.wpf-tw::after,
#wpforo .wpf-sbtn-wrap .wpforo-share-button.wpf-tw::after {
	content: "Xで共有";
}

#wpforo .wpf-sbtn-title {
	display: none;
}

/* ==========================================================================
   8. 「最近の投稿」画面の簡素化
   themes/2026/recent.php, includes/functions-template.php
   wpforo_mark_all_read_link() / wpforo_get_recent_page_filter_selectbox() で
   実在確認済み。どちらも設定やフィルターフックを経由せず無条件に出力される
   実装のため、出力自体を止める正式な方法がなく、CSSでの非表示を採用する。
   「Topics with their latest replies in reversed order」の見出し行
   (themes/2026/recent-topics.php .wpf-htr、実在確認済み)も同様に対象。
   並び替えプルダウンの隣にあるページ送り(.wpf-snavi)は残す。
   ========================================================================== */

#wpforo .wpf-mark-all-read,
#wpforo .wpforo-recent-wrap .wpf-head-filter,
#wpforo .wpforo-recent-content .wpf-htr {
	display: none !important;
}

/* ==========================================================================
   9. 引用返信プレビュー
   assets/chiikoto-wpforo.js が組み立てる、tinymceエディタの外側にある
   表示専用ブロック(エディタの管理下にないため、エディタ内でのどんな操作を
   行っても影響を受けない)。data-postidのみをJS経由でサーバーへ渡し、実際の
   引用BBCodeは includes/class-quote-reply.php がDBの実データから再構築する
   ため、ここは見た目の調整のみ。
   ========================================================================== */

.chiikoto-quote-preview {
	background: var(--chiikoto-blue-bg, #eff6ff);
	border-left: 3px solid var(--chiikoto-blue, #2563eb);
	border-radius: 4px;
	padding: 10px 14px;
	margin: 0 0 10px;
	color: var(--chiikoto-text-muted, #6b7280);
	cursor: default;
	user-select: none;
}

.chiikoto-quote-preview .chiikoto-quote-label {
	font-size: 0.8em;
	font-weight: 700;
	color: var(--chiikoto-blue, #2563eb);
	margin: 0 0 4px;
}

.chiikoto-quote-preview .chiikoto-quote-body {
	overflow-wrap: break-word;
}

/* ==========================================================================
   10. 引用返信ボタン(投稿右下のアイコンのみボタン)の表示改善
   ========================================================================== */

/* assets/chiikoto-wpforo.js が追加する常時表示ラベル。wpForo本体は同じ
   .wpforo-quote 要素に wpf-tooltip 属性由来の ::before/::after 疑似要素を
   既に使っているため(themes/2026/style.css、実在確認済み)、こちらは疑似
   要素ではなく実DOM要素として追加している。 */
#wpforo .chiikoto-quote-btn-label {
	margin-left: 4px;
	font-size: 0.92em;
}

/*
 * ツールチップ(wpf-tooltip属性、themes/2026/style.css [wpf-tooltip]::after、
 * 実在確認済み)がボタン中心を基準に絶対配置され、投稿カードの右下付近にある
 * ボタンでは右方向にはみ出すことがある。祖先の #wpforo に
 * `overflow-x: hidden`(本CSS内、横スクロール防止のため設定済み)があるため、
 * はみ出した分は投稿カードの境界で見えなくなる(=表示切れ)。実機の
 * getBoundingClientRect()で、ボタン中心から左右に均等展開される現状の
 * ツールチップ配置(themes/2026/style.css [wpf-tooltip]::after の
 * left:50%; transform:translateX(-50%))だと、投稿カード右端に近いボタンほど
 * はみ出し量が大きくなることを確認した。
 * 対応として、投稿アクションボタン群(.wpf-buttons, .wpf-post-button-actions、
 * 実在確認済み)内のツールチップだけ、ボタンの右端を基準にした右揃えへ変更し、
 * 右方向へのはみ出しを防ぐ(同じ原因のため、引用ボタンに限らずreport/edit/
 * delete等、type='icon'で使われる他のアクションボタンにもまとめて適用)。 */
#wpforo .wpf-buttons [wpf-tooltip]::after,
#wpforo .wpf-post-button-actions [wpf-tooltip]::after {
	left: auto;
	right: 0;
	transform: translateY(-100%);
}

#wpforo .wpf-buttons [wpf-tooltip]::before,
#wpforo .wpf-post-button-actions [wpf-tooltip]::before {
	left: auto;
	right: 6px;
	transform: none;
}

/* ==========================================================================
   11. 親カテゴリー画面(chiikoto-parent-category)
   ========================================================================== */

.chiikoto-parent-category .chiikoto-subcat-list {
	margin-bottom: 0;
}

/* ==========================================================================
   12. 子カテゴリー詳細(chiikoto-subcat-detail)
   wpForo本体のCSSリセット(#wpforo #wpforo-wrap div等、詳細度(2,0,1)、
   margin/padding/border/font-sizeを0や100%に上書きする)がこの節の
   margin/padding/borderも無効化していたことを実機のgetComputedStyleで確認
   したため(.chiikoto-subcat-head の margin-bottom/padding-bottom/
   border-bottom-widthがすべて0pxだった)、掲示板トップと同様に !important を
   付与する。
   ========================================================================== */

.chiikoto-subcat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 0 0 20px !important;
	padding: 0 0 20px !important;
	border-bottom: 1px solid var(--chiikoto-border) !important;
}

.chiikoto-subcat-head-text {
	min-width: 0;
	flex: 1 1 auto;
}

.chiikoto-subcat-head-text .chiikoto-page-title,
.chiikoto-subcat-head-text .chiikoto-page-desc {
	margin-bottom: 0 !important;
}

.chiikoto-subcat-head-action {
	flex: 0 0 auto;
	/* スマホでは.chiikoto-subcat-headがcolumn+stretchになり(下記メディア
	   クエリ)、このコンテナ自体が横幅いっぱいのblockになる。「×閉じる」
	   状態のボタンはinline-flexのまま右寄せにしたいため、
	   text-alignで揃える(margin-left:autoはinline-level要素には効かない
	   ことを実機で確認したため、こちらを採用)。「質問・投稿をする」の
	   通常状態(display:block; width:100%)はblock要素なのでtext-alignの
	   影響を受けず、全幅ボタンのまま維持される。 */
	text-align: right;
}

/* 「質問・投稿をする」ボタン。アイコン(fa-feather-alt、
   classes/Template.php add_topic_button() にハードコードされておりフィルター
   では除去できないことを実コード確認済み)はCSSで非表示にする。
   themes/2026/style.css の `#wpforo #wpforo-wrap .wpf-button`(ID2つ分の
   詳細度、padding に !important 付き)に、こちらの `.chiikoto-subcat-head-
   action #add_wpftopic`(ID1つ分)が詳細度で負けて上書きできないことを
   実機のマッチしたCSSルール確認で検証したため、#wpforo #wpforo-wrap を
   足して詳細度を上げる(既存の上部ナビ・検索欄と同じ対応)。 */
#wpforo #wpforo-wrap .chiikoto-subcat-head-action #add_wpftopic,
#wpforo #wpforo-wrap .chiikoto-subcat-head-action .wpf-button {
	background: var(--chiikoto-blue) !important;
	border-color: var(--chiikoto-blue) !important;
	border-radius: 8px !important;
	padding: 11px 22px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	height: auto !important;
	line-height: 1.3 !important;
	min-height: 44px;
}

#wpforo #wpforo-wrap .chiikoto-subcat-head-action #add_wpftopic:hover,
#wpforo #wpforo-wrap .chiikoto-subcat-head-action .wpf-button:hover {
	background: var(--chiikoto-blue-dark) !important;
	border-color: var(--chiikoto-blue-dark) !important;
}

#wpforo #wpforo-wrap .chiikoto-subcat-head-action #add_wpftopic .fa-feather-alt {
	display: none !important;
}

/* assets/js/frontend.js(wpForo本体、実コード確認済み)は、フォームを開くと
   同じボタンの中身を `<i class="fas fa-times"></i>` だけに差し替える
   トグル実装になっている(別要素の閉じるボタンではない)。:has()で
   「中身が×アイコンだけになっている状態」を判定し、CTAとしての主張を弱めた
   「閉じる」用の見た目に切り替える。「閉じる」の文字ラベルは
   assets/chiikoto-wpforo.js が実DOMへ追記している(このJSはwpForo本体の
   クリックイベント・トグル処理には一切触れていない)。PC・スマホとも
   右寄せの小さめのサブボタンにするため、幅は内容に合わせたauto、
   スマホ用の「w:100%で全幅ボタン化する」ルール(下記メディアクエリ)を
   margin-left:auto と併せて上書きする。 */
#wpforo #wpforo-wrap .chiikoto-subcat-head-action #add_wpftopic:has(.fa-times) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: #fff !important;
	border-color: var(--chiikoto-border) !important;
	color: var(--chiikoto-text-muted) !important;
	padding: 9px 14px !important;
	width: auto !important;
	min-width: 0;
	min-height: 40px;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
}

#wpforo #wpforo-wrap .chiikoto-subcat-head-action #add_wpftopic:has(.fa-times):hover {
	background: #f9fafb !important;
	border-color: var(--chiikoto-text-muted) !important;
}

#wpforo #wpforo-wrap .chiikoto-subcat-head-action #add_wpftopic .fa-times {
	color: inherit;
	font-size: 14px;
}

#wpforo #wpforo-wrap .chiikoto-subcat-head-action #add_wpftopic .chiikoto-close-btn-label {
	color: inherit;
	font-size: 13px;
}

/* ==========================================================================
   12b. 質問投稿フォーム・回答投稿フォームの共通デザイン
   新規質問投稿フォーム(classes/Template.php topic_form()、
   .wpf-form-wrapper.wpf-topic-create として出力)と、スレッド詳細の回答
   投稿フォーム(classes/Template.php reply_form()、.wpf-form-wrapper.wpfel-4
   > .wpf-post-create として出力、実コード確認済み)を、指示(「回答フォームは
   新規質問フォームと完全に同一デザインにする」)に従い、同じ宣言ブロック
   (デザイン値)を共有する形で統一する。wpForo本体のマークアップ・投稿
   処理・バリデーション・Flood Protection・reCAPTCHA・TinyMCE本体機能には
   一切触れず、見た目だけをこのサイトのデザインに合わせる。ラベル文言・
   placeholder・フィールドアイコンの除去は
   includes/class-topic-form-enhance.php(wpforo_form_fieldsフィルター)側で
   対応済みのため、ここではCSSのみ。

   【DOM構造の違い】topic_form()は
   `.wpf-topic-create > form > .wpf-topic-form-wrap > (fields...)` という
   入れ子だが、reply_form()は `.wpf-form-wrapper.wpfel-4 > (.wpf-reply-form-title
   + .wpf-post-create) > form > (fields...)` で、.wpf-topic-form-wrap に相当する
   中間ラッパーが存在しない(実コード確認済み)。そのためフィールド単位の
   ルールは祖先セレクタだけを構造に合わせて書き分け(`.wpf-topic-create
   .wpf-topic-form-wrap X` / `.wpf-form-wrapper.wpfel-4 .wpf-post-create X`)、
   宣言ブロックは完全に共通化する(同じルール内にセレクタを並べる)。

   wpForo本体は各text入力に `border:1px solid #dadada;
   box-shadow: inset 0 1px 4px #e6e6e6;`(uploads/wpforo/assets/colors.css)、
   TinyMCEの外枠に `border: 3px solid #f5f5f5 !important;`(同ファイル)を
   当てており、これが「グレーの箱で囲うwpForo感の強いデザイン」の主な原因
   だったことを実機のマッチしたCSSルール確認で特定した。掲示板トップの
   検索欄と同じ「白背景+薄いグレー枠線+青のフォーカス」のデザイン言語に
   統一する。
   ========================================================================== */

/* uploads/wpforo/assets/colors.css の
   `#wpforo #wpforo-wrap .wpf-topic-create{ background-color: #f5f5f5; }`
   (ID2つ分の詳細度)が「フォーム全体が大きなグレーの箱になっている」
   印象の直接の原因だったことを実機のマッチしたCSSルール確認で特定した。
   白背景+薄いグレー枠線+控えめな角丸という、掲示板トップ・質問一覧と
   同じ「白背景+余白+薄い境界線」の思想に統一する。強いbox-shadowは
   使わない。回答フォーム側の外枠(.wpf-form-wrapper.wpfel-4、reply_form()の
   実DOMでの最外周要素、実在確認済み)も同じカードデザインを共有する。 */
.chiikoto-subcat-detail .wpf-form-wrapper.wpf-topic-create,
.chiikoto-thread .wpf-form-wrapper.wpfel-4 {
	margin: 0 0 32px !important;
	padding: 20px !important;
	background: var(--chiikoto-bg) !important;
	border: 1px solid var(--chiikoto-border) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

/* 以下、wpForo本体側の #wpforo #wpforo-wrap ...(ID2つ分の詳細度、一部は
   padding/border-width に !important 付き)に詳細度で負けて上書きできない
   プロパティが多数あることを実機のマッチしたCSSルール確認で検証したため、
   このフォーム内のセレクタはすべて #wpforo #wpforo-wrap を先頭に付けて
   詳細度を揃える(既存の上部ナビ・検索欄・カテゴリー一覧と同じ対応方針)。 */

/* 左右の余白は上の外周paddingで確保済みのため、内側の
   .wpf-topic-form-wrap 自体には追加のpaddingを持たせない
   (二重になって余白が広くなりすぎるのを防ぐ)。reply_form()にはこの
   中間ラッパーが存在しないため、回答フォーム側の対応セレクタはない。 */
#wpforo #wpforo-wrap .wpf-topic-create .wpf-topic-form-wrap {
	padding: 0 !important;
}

/* 回答フォーム側は .wpf-topic-form-wrap に相当する中間ラッパーの代わりに
   .wpf-post-create が使われているが、この .wpf-post-create 自体に
   wpForo本体のグレー背景・枠線・paddingが直接当たっている
   (themes/2026/style.css の `.wpf-post-create{background-color:#f6f6f6;
   border:1px solid #cfcfcf;}`(クラス1つ)、
   `#wpforo #wpforo-wrap .wpf-post-create{padding:10px 0;}`(ID2つ)、
   uploads/wpforo/assets/colors.css の
   `#wpforo #wpforo-wrap .wpf-post-create{background-color:#f5f5f5;}`
   (ID2つ)。実機のマッチしたCSSルール確認で、この3つのうちcolors.css側の
   ID2つの背景色ルールが実際に勝っており、外枠の白カード
   (.wpf-form-wrapper.wpfel-4)の内側にもう一枚グレーの箱が残っている状態
   だったことを特定した)。.wpf-topic-form-wrap と同じく「中身は透明・
   paddingなし」にして、外側の白カードだけが見えるようにする。 */
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}

/* 回答フォームの見出し(「この質問に回答する」、classes/Template.php
   reply_form() が出す .wpf-reply-form-title、実在確認済み。テキスト自体は
   wpforo_phrase('Leave a reply') 経由でclass-phrases.phpが日本語化済み)。
   新規質問フォーム側には対応する内部見出しが存在しない(トグルボタンの
   文言のみ)ため、この見出しだけは回答フォーム固有のスタイルとして
   個別に定義する。カード自体がすでに白背景+枠線で囲われているため、
   以前あった border-top の区切り線(カード外にあった頃の名残)は廃止。 */
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-reply-form-title {
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--chiikoto-text) !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}

/* フィールド行(.wpf-tr、名前/タイトル+本文の2行)自体には余白を持たせず、
   各フィールド(.wpf-field)側でmargin-bottomを持たせて統一する
   (目安24〜32px、実画面で確認のうえ調整)。 */
#wpforo #wpforo-wrap .wpf-topic-create .wpf-tr,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-tr {
	margin: 0 !important;
}

#wpforo #wpforo-wrap .wpf-topic-create .wpf-field,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-field {
	padding: 0 !important;
	border-bottom: 0 !important;
	margin: 0 0 28px !important;
}

#wpforo #wpforo-wrap .wpf-topic-create .wpf-field-cl,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-field-cl {
	display: none;
}

/* 回答フォームのみ: タイトル欄(post[title]、reply_form()がスレッド
   タイトルを事前入力するテキスト欄、実在確認済み。値自体はそのまま
   保持・送信されるため投稿処理・タイトルの扱いへの影響はない。詳細は
   includes/class-topic-form-enhance.php のコメント参照)は、指示の構成
   (お名前→回答内容→送信)に不要なため非表示にする。新規質問フォーム側の
   タイトル欄(.wpf-topic-create 内)は対象外で、そのまま表示され続ける。 */
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-field-name-title {
	display: none !important;
}

/* ラベル(太字・地の文字色)→補足説明(控えめな色、通常書体)を縦に並べる。
   wpForo本体は.wpf-descに font-style:italic を当てているため、
   通常書体に戻す。 */
#wpforo #wpforo-wrap .wpf-topic-create .wpf-label-wrap,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-label-wrap {
	margin: 0 0 8px !important;
}

#wpforo #wpforo-wrap .wpf-topic-create .wpf-label,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-label {
	display: block !important;
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700;
	color: var(--chiikoto-text) !important;
	white-space: normal !important;
}

#wpforo #wpforo-wrap .wpf-topic-create .wpf-label .wpf-field-required-icon,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-label .wpf-field-required-icon {
	color: var(--chiikoto-blue);
}

#wpforo #wpforo-wrap .wpf-topic-create .wpf-desc,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-desc {
	display: block !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-style: normal !important;
	color: var(--chiikoto-text-muted) !important;
}

#wpforo #wpforo-wrap .wpf-topic-create .wpf-field-wrap,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-field-wrap {
	width: 100% !important;
}

/* 名前・タイトル欄。掲示板トップの検索inputと同じ見た目の言語(白背景・
   薄いグレー枠線・角丸・フォーカス時は青)に統一する。themes/2026/style.css
   の `.wpf-topic-form-wrap .wpf-field-name-title input[type="text"]`
   (padding/font-size を個別指定)にも詳細度で勝てるよう、width/height/
   padding/font-size/colorにも !important を付ける。 */
#wpforo #wpforo-wrap .wpf-topic-create .wpf-field-wrap input[type="text"],
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-field-wrap input[type="text"] {
	width: 100% !important;
	height: 44px !important;
	padding: 0 14px !important;
	border: 1px solid var(--chiikoto-border) !important;
	border-radius: 8px !important;
	background: var(--chiikoto-bg) !important;
	box-shadow: none !important;
	color: var(--chiikoto-text) !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
}

#wpforo #wpforo-wrap .wpf-topic-create .wpf-field-wrap input[type="text"]:focus,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-field-wrap input[type="text"]:focus {
	outline: none;
	border-color: var(--chiikoto-blue) !important;
	box-shadow: 0 0 0 3px var(--chiikoto-blue-bg) !important;
}

/* TinyMCE(相談内容・回答内容)。uploads/wpforo/assets/colors.css の
   `.mce-tinymce.mce-container.mce-panel{border:3px solid #f5f5f5;
   border-width:3px !important;}` を、薄い1pxの枠線+角丸に上書きする
   (border-widthに!importantが付いているため、詳細度を上げたうえで
   こちらも!importantで対抗する)。フォーカス状態はエディタ本体がiframeの
   ため直接:focusが取れず、iframeを含む.wpf-field-wrapの:focus-within
   (iframe自体にフォーカスが移ると親要素が:focus-withinになる標準挙動を
   利用)で判定する。 */
/* colors.css側の `#wpforo #wpforo-wrap .wpf-field .wpf-field-wrap
   .mce-tinymce.mce-container.mce-panel`(ID2つ・クラス5つ)と、こちらの
   セレクタが詳細度で完全に同点になり(!important同士のため、その場合は
   CSSソースの読み込み順、wpForo本体が後読みで決着する)、border-widthだけ
   上書きできないことを実機のマッチしたCSSルール確認で検証した。
   .wpf-topic-form-wrap(実DOMでの祖先要素、実在確認済み)を足してクラス数を
   1つ増やし、詳細度で確実に上回るようにする。回答フォーム側は
   .wpf-topic-form-wrap に相当する中間ラッパーがないため、代わりに外枠の
   .wpf-form-wrapper.wpfel-4(実DOMでの祖先要素)を足して同様にクラス数を
   確保する(いずれもID2+クラス6で、core側のID2+クラス5を上回る)。 */
#wpforo #wpforo-wrap .wpf-topic-create .wpf-topic-form-wrap .wpf-field-wrap .mce-tinymce.mce-container.mce-panel,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-field-wrap .mce-tinymce.mce-container.mce-panel {
	border: 1px solid var(--chiikoto-border) !important;
	border-width: 1px !important;
	border-radius: 8px !important;
	overflow: hidden;
}

#wpforo #wpforo-wrap .wpf-topic-create .wpf-topic-form-wrap .wpf-field-wrap:focus-within .mce-tinymce.mce-container.mce-panel,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-field-wrap:focus-within .mce-tinymce.mce-container.mce-panel {
	border-color: var(--chiikoto-blue) !important;
	box-shadow: 0 0 0 3px var(--chiikoto-blue-bg);
}

#wpforo #wpforo-wrap .wpf-topic-create .mce-edit-area iframe,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .mce-edit-area iframe {
	background: var(--chiikoto-bg);
}

#wpforo #wpforo-wrap .wpf-topic-create .mce-toolbar-grp,
#wpforo #wpforo-wrap .wpf-topic-create .mce-statusbar,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .mce-toolbar-grp,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .mce-statusbar {
	background: #fff;
	border-color: var(--chiikoto-border) !important;
}

/* サブミット(質問・投稿をする / 回答を投稿する)。カテゴリー詳細ページの
   「質問・投稿をする」ボタンと、スレッド詳細の「回答を投稿する」ボタンで
   同じデザインルールを共有する。PCは右寄せ、スマホは横幅いっぱい(以下
   メディアクエリ)。値(=表示文字)は class-phrases.php の 'Add topic' /
   'Add Reply' フレーズがそれぞれ「質問・投稿をする」「回答を投稿する」を
   出力しており、アイコンは含まれない(実機DOM確認済み)。 */
/* themes/2026/style.css `#wpforo #wpforo-wrap form .wpf-buttons-wrap
   {padding:0 20px; margin-top:-5px;}` により、送信ボタンの左右だけ20px
   インセットされ、上の入力欄(左右paddingなし、幅100%)と横位置がズレて
   いたため、paddingを0にして揃える。 */
#wpforo #wpforo-wrap .wpf-topic-create .wpf-buttons-wrap,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-buttons-wrap {
	display: flex;
	justify-content: flex-end;
	margin: 10px 0 0 !important;
	padding: 0 !important;
}

#wpforo #wpforo-wrap .wpf-topic-create .wpf-buttons-wrap .wpf-button,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-buttons-wrap .wpf-button {
	background: var(--chiikoto-blue) !important;
	border-color: var(--chiikoto-blue) !important;
	border-radius: 8px !important;
	padding: 12px 28px !important;
	height: auto !important;
	min-height: 44px;
	font-weight: 600 !important;
	font-size: 15px !important;
}

#wpforo #wpforo-wrap .wpf-topic-create .wpf-buttons-wrap .wpf-button:hover,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-buttons-wrap .wpf-button:hover {
	background: var(--chiikoto-blue-dark) !important;
	border-color: var(--chiikoto-blue-dark) !important;
}

/* 投稿ボタン下の余白。ボタン自体にmargin-bottomを付けるのではなく、
   フォーム親コンテナ(.wpf-topic-create / .wpf-form-wrapper.wpfel-4)側に
   padding-bottomを持たせる(指示どおり)。 */
#wpforo #wpforo-wrap .wpf-topic-create,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 {
	padding-bottom: 24px !important;
}

#wpforo #wpforo-wrap .wpf-topic-create .wpf-clear,
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-clear {
	display: none;
}

/* 「スティッキー」「非公開」等の追加オプション欄(管理者・モデレーターの
   場合のみ実際にチェックボックスが入る、classes/Template.php topic_form()
   実在確認済み)。一般ユーザー・ゲストには空のdivとして出力される。
   `:empty`(空白のテキストノードのみでも非マッチになる仕様のため実機で
   機能しないことを確認済み)ではなく `:has()` で「中に実際の入力要素が
   無い場合だけ」余白を詰め、管理者向けのチェックボックス機能自体は
   一切損なわない。回答フォーム側の.wpf-extra-fields(reply_buttons_hook用、
   実在確認済み)も、通常ユーザー・ゲストには空のdivとして出力されるため
   同じ理由で余白を詰める。 */
#wpforo #wpforo-wrap .wpf-topic-create .wpf-extra-fields:not(:has(input, label, i)),
#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-extra-fields:not(:has(input, label, i)) {
	padding: 0 !important;
	margin: 0 !important;
	line-height: 0 !important;
}
#wpforo #wpforo-wrap .wpf-topic-create .wpf-main-fields:not(:has(input, label, i)) {
	padding: 0 !important;
}

@media (max-width: 600px) {
	#wpforo #wpforo-wrap .wpf-topic-create .wpf-buttons-wrap,
	#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-buttons-wrap {
		display: block;
	}
	#wpforo #wpforo-wrap .wpf-topic-create .wpf-buttons-wrap .wpf-button,
	#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 .wpf-post-create .wpf-buttons-wrap .wpf-button {
		width: 100%;
		text-align: center;
	}
	#wpforo #wpforo-wrap .wpf-topic-create,
	#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 {
		padding-bottom: 20px !important;
	}
	.chiikoto-subcat-detail .wpf-form-wrapper.wpf-topic-create,
	.chiikoto-thread .wpf-form-wrapper.wpfel-4 {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
}

/* ==========================================================================
   12c. ページネーション(classes/Template.php pagenavi()、実在確認済み)
   質問一覧の上下(wpf-navi-topic-top / wpf-navi-topic-bottom)で共通して
   使われる .wpf-navi 系クラスの見た目だけを調整する。ページ番号の取得・
   URL生成・現在ページ判定・ページ数計算にはロジック的に一切触れない
   (PHP側の pagenavi() 関数は無変更、CSSのみで対応)。

   【実装上の重要な制約】実コードを確認したところ、wpForoのページネーションは
   「1」「2」「3」…と個別のページ番号リンクを並べる方式ではなく、
   `<span class="wpf-page-info">1 / 2</span>`(現在ページ/総ページ数の
   テキスト。'Page'フレーズは class-phrases.php で既に空文字にしている)
   + `<a class="wpf-prev-button">` / `<a class="wpf-next-button">` +
   `<select class="wpf-navi-dropdown">`(ページ番号はこの一つの
   ドロップダウンの中にoptionとして入っており、個別のリンクとしては
   DOM上に存在しない)という構造になっている。そのため「1 2」を個別の
   ボタンとして横並びにすることはHTML構造を変えない限りできず、
   指示の「無理にHTMLを書き換えずCSSで対応可能ならCSSを優先する」に
   従い、実際の3要素(前へ/ドロップダウン/次へ)をこのサイトのデザインに
   合わせて再スタイルする方針にした。ドロップダウン(=現在ページを表す
   唯一の要素)を薄い青背景+青文字にすることで「現在ページ」の指示に
   対応している。
   ========================================================================== */

#wpforo #wpforo-wrap .wpf-navi {
	margin: 20px 0 !important;
}

/* themes/2026/style.css `#wpforo #wpforo-wrap .wpf-navi .wpf-navi-wrap`
   (justify-content:flex-end; align-items:stretch;)と全く同じセレクタ・
   詳細度で、どちらも!importantなしのため、CSSソースの読み込み順(wpForo
   本体が後読み)で決着し、centerが反映されていないことを実機の
   getComputedStyleで確認した。`.wpf-navi`を2回書いて詳細度を上げる
   (実在するクラスの繰り返しのみで、マッチする要素は変わらない)。 */
#wpforo #wpforo-wrap .wpf-navi.wpf-navi .wpf-navi-wrap {
	align-items: center;
	gap: 8px;
	padding: 0 !important;
}

#wpforo #wpforo-wrap .wpf-navi .wpf-navi-wrap .wpf-page-info {
	color: var(--chiikoto-text-muted) !important;
	font-size: 13px;
	padding-right: 4px !important;
}

/* 前へ/次へ。wpForo標準の「連結ピル」の片側だけ角丸(3px 0 0 3px 等)を
   やめ、独立した薄いグレー枠線+白背景のボタンにする。 */
/* themes/2026/style.css の同名セレクタが padding に !important を
   付けており(3px 8px!important)、こちらと詳細度が同点で読み込み順負けする
   ことを実機で確認したため、.wpf-navi を2回書いて詳細度を上げる。 */
#wpforo #wpforo-wrap .wpf-navi.wpf-navi .wpf-navi-wrap .wpf-prev-button,
#wpforo #wpforo-wrap .wpf-navi.wpf-navi .wpf-navi-wrap .wpf-next-button {
	background: var(--chiikoto-bg) !important;
	color: var(--chiikoto-text) !important;
	border: 1px solid var(--chiikoto-border) !important;
	border-radius: 6px !important;
	padding: 6px 12px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
}

#wpforo #wpforo-wrap .wpf-navi .wpf-navi-wrap .wpf-prev-button:hover,
#wpforo #wpforo-wrap .wpf-navi .wpf-navi-wrap .wpf-next-button:hover {
	background: #f9fafb !important;
	border-color: var(--chiikoto-text-muted) !important;
}

#wpforo #wpforo-wrap .wpf-navi .wpf-navi-wrap i.fa-chevron-left,
#wpforo #wpforo-wrap .wpf-navi .wpf-navi-wrap i.fa-chevron-right {
	font-size: 10px;
}

/* 現在ページを表す唯一の要素(ドロップダウン)。薄い青背景+青文字にして
   「現在ページ」であることが分かるようにする。ページ移動の仕組み
   (onchangeでのURL遷移)自体はwpForo標準のインラインイベントのまま
   変更していない。 */
/* themes/2026/style.css `#wpforo #wpforo-wrap .wpf-navi select.wpf-navi-
   dropdown{...padding:1px 10px!important;...}` と全く同じセレクタ・
   詳細度・!importantのため、詳細度が同点の場合はCSSソースの読み込み順
   (wpForo本体のstyle.cssが後読み)で決着し、padding等が上書きできなかった
   ことを実機のgetComputedStyleで確認した。実DOM上の親要素
   .wpf-navi-wrap(実在確認済み)を足してクラス数を1つ増やし、詳細度で
   確実に上回るようにする。 */
#wpforo #wpforo-wrap .wpf-navi .wpf-navi-wrap select.wpf-navi-dropdown {
	background-color: var(--chiikoto-bg) !important;
	color: var(--chiikoto-blue) !important;
	border: 1px solid var(--chiikoto-border) !important;
	border-radius: 6px !important;
	padding: 6px 10px !important;
	font-size: 13px !important;
	font-weight: 600;
}

@media (max-width: 480px) {
	#wpforo #wpforo-wrap .wpf-navi .wpf-navi-wrap {
		flex-wrap: wrap;
		row-gap: 6px;
	}
	#wpforo #wpforo-wrap .wpf-navi .wpf-navi-wrap .wpf-page-info {
		width: 100%;
		text-align: center;
		padding-right: 0 !important;
	}
}

/* ==========================================================================
   13. 最近の投稿(chiikoto-recent-wrap)
   ========================================================================== */

.chiikoto-recent-wrap .chiikoto-page-title {
	margin-bottom: 16px;
}

/* ==========================================================================
   14. スレッド詳細(chiikoto-thread) - 質問と回答の明確な分離
   ========================================================================== */

/* 【詳細度についての共通注記】themes/2026/style.css の
   `#wpforo #wpforo-wrap html, body, div, span, ..., h1...h6, p, blockquote,
   a, ul, li, ...`(実在確認済みの巨大なCSSリセット、ID2つ分+タグ名の詳細度
   (2,0,1)、margin/padding/border/font-sizeをリセット)と、見出し専用の
   `#wpforo #wpforo-wrap h1, h2`(同じくID2つ分、font-sizeにのみ!important)
   に、この節のクラスセレクタ(#wpforo だけを付けたID1つ分)の多くが詳細度で
   負けて margin/padding/border/font-size が反映されていないことを、実機の
   マッチしたCSSルール確認(要素がdiv/p/h2/a/blockquote/spanのいずれかである
   場合に発生)で特定した。そのため本節はこれらの要素を対象とする箇所に限り
   `#wpforo #wpforo-wrap` を先頭に付けてID2つ分の詳細度を確保し(既存クラスが
   1つ以上あるため、これでリセット側のID2+タグ名を上回る)、見出し
   (h1/h2)を対象とする箇所は font-size に !important も付与する。 */

#wpforo #wpforo-wrap .chiikoto-thread-head {
	margin-bottom: 12px;
}

/* スレッドタイトル。他画面と共有する .chiikoto-page-title(1.4em相対指定)を
   このページに限りpx固定値で上書きする(PC 22-24px、スマホは下部
   メディアクエリで20-22pxに調整)。背景・カードは付けず、濃い文字色
   (.chiikoto-page-title側で var(--chiikoto-text) !important 指定済み)の
   まま。 */
.chiikoto-thread-head .chiikoto-page-title {
	font-size: 23px !important;
	margin-bottom: 6px !important;
}

/* カテゴリー名リンク(templates/wpforo/post.php で <a> タグ化済み。URLは
   $forum['url']、無ければ WPF()->forum->get_forum_url() を使用。独自URL
   生成はしていない)。質問一覧のカテゴリー表記(.chiikoto-topic-cat、
   13px・青)と同じトーンの、控えめなテキストリンクにする。<a>タグは
   上記リセット対象のため #wpforo #wpforo-wrap を付与し、さらに
   uploads/wpforo/assets/colors.css の `#wpforo #wpforo-wrap a{color:
   rgb(63,119,150);}`(同じくID2つ分)にリンク色も上書きされていたため
   colorにも !important を付与する。 */
#wpforo #wpforo-wrap .chiikoto-thread-cat {
	display: inline-block;
	font-size: 13px !important;
	color: var(--chiikoto-blue) !important;
	text-decoration: none;
}

#wpforo #wpforo-wrap a.chiikoto-thread-cat:hover {
	text-decoration: underline;
}

#wpforo #wpforo-wrap .chiikoto-thread-body {
	margin-top: 20px;
}

/* 「質問」バッジ。スレッドの中で最初の質問だと一目でわかるよう、他の
   バッジ(「質問者」13px等)より一回り大きくし、質問カードとの間の余白も
   広げて目立たせる。<div>タグは前述の巨大リセット対象(実機のマッチした
   CSSルール確認で、#wpforo #wpforo-wrap プレフィックスが無いとfont-size・
   marginが反映されないことを検証済み)のため、ID2つ分の詳細度を確保する。 */
#wpforo #wpforo-wrap .chiikoto-question-label {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	color: var(--chiikoto-blue);
	background: var(--chiikoto-blue-bg);
	border-radius: 4px;
	padding: 4px 12px;
	margin-bottom: 16px;
}

/* 質問カード: 全周border+角丸の「箱」ではなく、白背景+左側の太い
   アクセント線のみのシンプルなデザインにする。強いbox-shadowは使わない。 */
#wpforo #wpforo-wrap .chiikoto-question {
	background: var(--chiikoto-bg);
	border: none;
	border-left: 4px solid var(--chiikoto-blue);
	border-radius: 0 6px 6px 0;
	padding: 18px 20px;
	margin-bottom: 8px;
	box-shadow: none;
}

/* 回答は薄い区切り線のみで分離し、カード化しない。 */
#wpforo #wpforo-wrap .chiikoto-answer {
	border: none;
	border-bottom: 1px solid var(--chiikoto-border);
	border-radius: 0;
	padding: 20px 2px;
}

/* X共有(質問の直下・「回答○件」見出しの前に配置。ロジックは
   wpforo_share_buttons()本体そのまま、位置と余白だけの調整)。
   footer.php側の同機能(.wpf-sb-bottom)は、このページ専用の
   body.chiikoto-thread-page クラス(includes/class-front-cleanup.php参照)
   で重複表示にならないよう非表示にする。 */
#wpforo #wpforo-wrap .chiikoto-question-share {
	margin: 0 0 24px;
}

.chiikoto-question-share .wpf-sbtn {
	margin: 0 !important;
	padding: 0 !important;
}

body.chiikoto-thread-page #wpforo #wpforo-wrap .wpf-sbtn.wpf-sb-bottom {
	display: none !important;
}

/* 「回答○件」見出し。スレッドタイトル(23px)より必ず控えめなサイズにする。
   <h2>タグのため、themes/2026/style.css の見出し専用リセット
   `#wpforo #wpforo-wrap h1, h2 {font-size:20px !important; padding:10px 2px;
   line-height:22px; font-weight:bold;}`(実在確認済み)にfont-sizeを
   !important付きで上書きされ、padding/margin/line-heightも詳細度で
   上書きできないことを実機のマッチしたCSSルール確認で検証したため、
   ID2つ分の詳細度確保に加えfont-size/padding/margin/line-heightにも
   !importantを付与する(他の見出しクラス .chiikoto-list-title 等と同じ
   対応方針)。 */
#wpforo #wpforo-wrap .chiikoto-answers-heading {
	font-size: 19px !important;
	font-weight: 700;
	margin: 28px 0 4px !important;
	padding: 20px 2px 0 !important;
	line-height: 1.4 !important;
	border-top: 1px solid var(--chiikoto-border);
}

#wpforo #wpforo-wrap .chiikoto-no-answers {
	color: var(--chiikoto-text-muted);
	font-size: 0.92em !important;
	line-height: 1.8;
	padding: 16px 2px 4px !important;
}

/* 回答フォームの見出し(「この質問に回答する」)自体のデザインは、
   セクション12b(.wpf-form-wrapper.wpfel-4 .wpf-reply-form-title、新規
   質問・回答フォーム共通デザインの節)側で定義済み。ここでは重複させない。 */

/* 質問/回答カード内の投稿者名・日時。本文(15px)より上の情報として、
   投稿者名は少し大きく・太く、日時は控えめなグレーにする。
   themes/2026/layouts/4/post.php 由来の .wpf-author-name / .wpf-post-date、
   実在確認済み。wpForo本体側は .wpf-parent-post(質問側)にのみ
   ID2+クラス5の詳細度で font-size:16px 等を当てており(.wpf-child-post側の
   対応ルールは無く、質問と回答で実質的な文字サイズがずれていたことを
   実機のマッチしたCSSルール確認で確認した)、!important付きのpx指定で
   質問・回答どちらも同じ見た目に揃える。 */
#wpforo #wpforo-wrap .chiikoto-question .wpf-author-name,
#wpforo #wpforo-wrap .chiikoto-answer .wpf-author-name {
	font-weight: 600 !important;
	font-size: 15px !important;
	color: var(--chiikoto-text) !important;
}

#wpforo #wpforo-wrap .chiikoto-question .wpf-post-date,
#wpforo #wpforo-wrap .chiikoto-answer .wpf-post-date {
	font-size: 13px !important;
	color: var(--chiikoto-text-muted) !important;
}

/* 投稿者名(+質問者バッジ)・日時の行。スマホ幅では無理に1行へ詰め込まず、
   幅が足りなければ自然に折り返す(横スクロールの原因にしない)。 */
#wpforo .chiikoto-question .wpf-content-head-top,
#wpforo .chiikoto-answer .wpf-content-head-top {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	row-gap: 4px;
}

/* PCでは「投稿者名+質問者バッジ」を左、「投稿日時」を右に配置する
   (指示どおり)。実機のマッチしたCSSルール確認により、この
   .wpf-content-head-top には justify-content を設定している競合ルールが
   存在しないことを確認したため(wpForo本体側のレイアウト用CSSは `.wpfl-4`
   という祖先クラスを前提条件にしているが、このプラグインの独自テンプレート
   には `.wpfl-4` クラス自体が存在せず、実機のcomputed styleで検証した
   ところ該当ルールは一つもマッチしていなかった)、!important無しの通常の
   詳細度で追加できる。質問(最初の投稿)・回答のどちらも同じ配置に統一する。 */
#wpforo #wpforo-wrap .chiikoto-question .wpf-content-head-top,
#wpforo #wpforo-wrap .chiikoto-answer .wpf-content-head-top {
	justify-content: space-between;
	column-gap: 12px;
}

/* 質問・回答共通のフッター(返信ボタン+引用返信等のアイコン列)。実機で
   調べたところ、この .wpf-content-foot にも `.wpfl-4` 前提のwpForo本体
   レイアウトCSS(display:flex等)は同じ理由で一切マッチしておらず、標準の
   ブロック要素として「返信」ボタンの下に引用返信等のアイコン列が別行で
   左寄せ表示されていたことを実機のgetBoundingClientRectで確認した(指示の
   「引用返信は右寄せ」を満たしていなかった)。本文との間隔を確保しつつ、
   返信ボタンを左・引用返信等のアイコン列を右に配置する横並びのフッターに
   統一する。 */
#wpforo #wpforo-wrap .chiikoto-question .wpf-content-foot,
#wpforo #wpforo-wrap .chiikoto-answer .wpf-content-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 12px;
	margin-top: 14px;
}

#wpforo #wpforo-wrap .chiikoto-question .wpf-buttons,
#wpforo #wpforo-wrap .chiikoto-answer .wpf-buttons {
	margin-left: auto;
	text-align: right;
}

#wpforo .chiikoto-question .wpf-author,
#wpforo .chiikoto-answer .wpf-author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* 本文。themes/2026/style.css の
   `.wpforo-post .wpf-right .wpforo-post-content{font-size:15px!important;}`
   (ID2+3クラス+!important、実在確認済み)がすでに15px(指示の範囲内)を
   強制しているため、ここではline-height・投稿者情報からの間隔のみ調整する。 */
#wpforo #wpforo-wrap .chiikoto-question .wpforo-post-content,
#wpforo #wpforo-wrap .chiikoto-answer .wpforo-post-content {
	line-height: 1.75;
	margin-top: 10px;
}

/* 【回答一覧の最終調整】回答本文の不要な最低高さの解除。
   themes/2026/style.css `#wpforo #wpforo-wrap .wpforo-post .wpforo-post-content
   {padding:10px 30px 5px 10px; min-height:130px; font-size:14px;
   overflow-wrap:break-word;}`(ID2つ+クラス2つ、実在確認済み)が、短い回答
   でも本文領域を130px確保してしまい、本文とフッター(引用返信)の間に不要な
   余白が生まれていたことを実機のマッチしたCSSルール確認で特定した。この
   要素は`.wpf-content`(flexコンテナではない通常のブロック要素、実機で
   display:blockを確認済み)の子であり、flex/gridコンテナのアイテムではない
   ため、min-height:autoとmin-height:0は実質的に同じ結果になる(どちらも
   「コンテンツに応じた高さのみ」になる)ことを実機のcomputed styleで
   確認したうえで、意図が明確なmin-height:0を採用した。指示により質問
   (最初の投稿)側は対象外のため、回答側だけに限定する。ヘッダーとの間隔
   (margin-top:10px、上のルールで既に設定済み)・フッターとの間隔
   (margin-top:14px、.wpf-content-footのルールで設定済み)・カード全体の
   上下padding(20px、.chiikoto-answerのルールで設定済み)はいずれも
   変更していない。上のルールと同じ詳細度(ID2つ+クラス2つ)のcore側
   ルールとの綱引きになるため、!importantで確実に上書きする。 */
#wpforo #wpforo-wrap .chiikoto-answer .wpforo-post-content {
	min-height: 0 !important;
}

/* 「質問者」バッジ(includes/functions-template.php wpforo_topic_starter()、
   .wpf-post-starter。templates/wpforo/layouts/4/post-thread.php で
   type='label' に変更し、ホバー時のみのツールチップ表示から常時表示の
   テキストラベルにした。表示条件=$starter判定(質問者本人が回答に
   再登場した場合のみ)自体は一切変更していない)。控えめな13pxの
   ピル型バッジにする。wpForo本体は
   `.wpfl-4 .wpf-child-post .wpf-post-starter`(ID2+クラス3、実在確認済み)
   でpadding/font-size/border-radiusを個別指定しているため、!important で
   確実に上書きする。 */
#wpforo #wpforo-wrap .chiikoto-answer .wpf-post-starter {
	display: inline-block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--chiikoto-blue) !important;
	background: var(--chiikoto-blue-bg) !important;
	border-radius: 4px !important;
	padding: 2px 8px !important;
	margin: 0 0 0 6px !important;
	line-height: 1.5 !important;
}

/* 引用表示(classes/Template.php apply_quotes() が生成する <blockquote
   data-userid data-postid>、実在確認済み)。薄いグレー背景・左線・
   本文より少し控えめな文字、というシンプルな引用スタイルにする。大きな
   引用符の装飾や強いbox-shadowは使わない。 */
/* <blockquote>タグは前述の巨大リセット対象のため #wpforo #wpforo-wrap で
   ID2つ分の詳細度を確保する(実機のマッチしたCSSルール確認で、これがないと
   margin/padding/border/font-sizeが反映されないことを検証済み)。 */
#wpforo #wpforo-wrap .chiikoto-question blockquote[data-postid],
#wpforo #wpforo-wrap .chiikoto-answer blockquote[data-postid] {
	background: #f9fafb;
	border-left: 3px solid var(--chiikoto-border);
	border-radius: 4px;
	margin: 10px 0;
	padding: 10px 14px;
	color: var(--chiikoto-text-muted);
	font-size: 14px;
	box-shadow: none;
}

#wpforo .chiikoto-question blockquote[data-postid] .wpforo-post-quote-link a,
#wpforo .chiikoto-answer blockquote[data-postid] .wpforo-post-quote-link a {
	color: var(--chiikoto-blue);
}

/* 引用返信ボタン(投稿右下、セクション10で追加済みの常時表示ラベル
   .chiikoto-quote-btn-label を含む)。大きな青CTAにはせず、控えめな
   13-14px程度に保つ。ボタンの位置・アイコン・引用ロジック自体は
   wpforo_post_buttons()標準のまま変更していない。 */
#wpforo .chiikoto-question .wpf-buttons .wpforo-quote,
#wpforo .chiikoto-answer .wpf-buttons .wpforo-quote {
	font-size: 13px;
}

/* スマホでも押しやすいよう、最低限のクリック領域を確保する
   (見た目の大きさ自体は変えない、当たり判定のみ余白で広げる)。 */
#wpforo .chiikoto-answer .wpf-buttons .wpforo-quote {
	display: inline-block;
	padding: 6px 2px;
}

/* ==========================================================================
   14b. スレッド最下部の前後質問ナビ(includes/functions-template.php
   wpforo_topic_navi()、wpforo_topic_footer()経由でtemplates/wpforo/post.php
   の `do_action('wpforo_post_list_footer')` から出力される、実在確認済み)。
   前後スレッドの判定・URL取得(WPF()->db 直接クエリ、topicid/forumid/status/
   privateでの絞り込み)には一切触れず、見た目(グレー背景の除去・配置)と、
   表示文言(Phrase機構、class-phrases.php参照)のみを変更する。

   uploads/wpforo/assets/colors.css `.wpfbg-9{background-color:#f5f5f5
   !important;}`(実機のマッチしたCSSルール確認で特定した、グレー背景の
   直接の原因)を白背景に上書きする。
   ========================================================================== */
#wpforo #wpforo-wrap .wpforo-topic-footer.wpfbg-9 {
	background: var(--chiikoto-bg) !important;
	margin: 40px 0 0 !important;
	padding: 0 !important;
	box-shadow: none;
}

/* themes/2026/style.css `#wpforo #wpforo-wrap .wpf-topic-navi .wpf-navi-wrap
   {padding:15px 10px 14px 20px;}`(ID2つ分)と同じ詳細度のため、!important
   で確実に上書きする。border-topで前後質問ナビとその上のブロックとの区切り
   を示す(指示の「薄いborder-top」)。 */
#wpforo #wpforo-wrap .wpf-topic-navi .wpf-navi-wrap {
	padding: 16px 2px !important;
	border-top: 1px solid var(--chiikoto-border);
}

/* themes/2026/style.css は `.wpf-topic-prnx{float:right; ...}` で前後リンクの
   組を右寄せにまとめているだけで、前後を左右に離す指定は無い(実コード確認
   済み)。指示の「前だけ→左側／次だけ→右側」を、DOM構造(.wpf-topic-prev/
   .wpf-topic-next が常に2つとも出力され、リンク先が無い側は中身が空の
   divになる、実コード確認済み)を変えずCSSだけで実現するため、float指定を
   やめてflexにし、空側は`:empty`で非表示にした上で、.wpf-topic-next
   側にmargin-left:autoを付ける(次だけの場合でも自動的に右へ寄る)。 */
#wpforo #wpforo-wrap .wpf-topic-navi .wpf-topic-prnx {
	float: none;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	column-gap: 12px;
	row-gap: 8px;
}

#wpforo #wpforo-wrap .wpf-topic-navi .wpf-topic-prev,
#wpforo #wpforo-wrap .wpf-topic-navi .wpf-topic-next {
	padding: 0 !important;
}

#wpforo #wpforo-wrap .wpf-topic-navi .wpf-topic-prev:empty,
#wpforo #wpforo-wrap .wpf-topic-navi .wpf-topic-next:empty {
	display: none;
}

#wpforo #wpforo-wrap .wpf-topic-navi .wpf-topic-next {
	margin-left: auto;
	text-align: right;
}

/* リンク文字。既存の青系デザイン言語(掲示板全体で使っているvar(--chiikoto-blue))
   に統一し、wpForo標準の灰色文字(uploads/wpforo/assets/colors.css
   `.wpforo-topic-footer{color:#777777;}`)から変更する。大きなCTAボタン化は
   しない、シンプルなテキストリンクのまま。 */
#wpforo #wpforo-wrap .wpf-topic-navi .wpf-topic-prev a,
#wpforo #wpforo-wrap .wpf-topic-navi .wpf-topic-next a {
	font-size: 14px;
	color: var(--chiikoto-blue) !important;
	text-decoration: none;
}

#wpforo #wpforo-wrap .wpf-topic-navi .wpf-topic-prev a:hover,
#wpforo #wpforo-wrap .wpf-topic-navi .wpf-topic-next a:hover {
	color: var(--chiikoto-blue-dark) !important;
	text-decoration: underline;
}

@media (max-width: 600px) {
	.chiikoto-hero-title {
		font-size: 22px !important;
	}

	.chiikoto-hero {
		margin-bottom: 14px !important;
	}

	.chiikoto-subcat-head {
		flex-direction: column;
		align-items: stretch;
	}
	#wpforo #wpforo-wrap .chiikoto-subcat-head-action #add_wpftopic,
	#wpforo #wpforo-wrap .chiikoto-subcat-head-action .wpf-button {
		display: block;
		width: 100%;
		text-align: center;
	}
	/* 質問数だけが上側に離れて見える問題(justify-content:space-between で
	   .chiikoto-subcat-aside が幅100%のまま左右に引き伸ばされていたことが
	   原因、実機のgetBoundingClientRectで確認済み)を解消するため、スマホでは
	   name→desc→(件数・矢印)を縦に並べる1カラムの構成にする。 */
	.chiikoto-subcat-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.chiikoto-subcat-aside {
		width: auto;
		justify-content: flex-start;
		gap: 8px;
	}
	#wpforo #wpforo-wrap .chiikoto-question {
		padding: 16px !important;
		border-left-width: 3px;
	}
	.chiikoto-thread-head .chiikoto-page-title {
		font-size: 21px !important;
	}
}

/* ==========================================================================
   15. 検索結果ページ(themes/2026/search.php、実在確認済み。
   current_object['template']==='search' のとき、body要素に
   chiikoto-board-page・chiikoto-search-page クラスが付く
   (includes/class-front-cleanup.php add_board_body_classes() 参照)。
   検索ロジック・URL生成・検索対象/詳細検索条件・結果取得条件は一切変更せず、
   既存のマークアップ(.wpforo-search-wrap 以下)の見た目だけを、掲示板の
   他画面と同じデザイン言語(白背景+薄い境界線+青アクセント)に統一する。
   見出し・ラベル文言・「投稿を見る」への変更はJS側
   (assets/chiikoto-wpforo.js enhanceSearchResultsPage())で対応済みのため、
   ここではCSSのみ。
   ========================================================================== */

/* 見出し「「○○」の検索結果」。<h1>タグのため、他の見出しクラスと同じく
   themes/2026/style.css の見出し専用リセット(`#wpforo #wpforo-wrap h1, h2
   {font-size:20px !important; ...}`)にfont-sizeを!important付きで
   上書きされるため、こちらもfont-sizeにのみ!importantを付与する。 */
#wpforo #wpforo-wrap #wpforo-search-title {
	font-size: 21px !important;
	font-weight: 700;
	color: var(--chiikoto-text) !important;
	padding: 0 !important;
	margin: 20px 0 20px !important;
	line-height: 1.4 !important;
}

#wpforo #wpforo-wrap #wpforo-search-title .wpfcl-5 {
	color: var(--chiikoto-text) !important;
	font-weight: 700;
}

/* 検索結果一覧とページネーションの間の区切り線(<hr class="wpforo-search-sep">、
   実在確認済み)は、下の検索フォームカード自体が既に境界線+余白を持つため
   不要。 */
#wpforo #wpforo-wrap .wpforo-search-sep {
	display: none;
}

/* 検索フォームカード。uploads/wpforo/assets/colors.css
   `#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar{background:
   #f5f5f5;}`(実機のマッチしたCSSルール確認で特定した、グレー背景の直接の
   原因)を、新規質問・回答フォームと同じ白背景+薄いグレー枠線+角丸に
   上書きする。table/table-row/table-cellレイアウト自体(themes/2026/style.css
   `.wpforo-table`/`.wpforo-tr`/`.wpforo-td`、実在確認済み。620px以下では
   コア側で自動的にdisplay:blockの縦積みに切り替わる仕組みも実在確認済み)は
   変更しない。 */
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar {
	background: var(--chiikoto-bg) !important;
	border: 1px solid var(--chiikoto-border);
	border-radius: 8px;
	padding: 20px !important;
	margin-bottom: 24px;
	box-shadow: none;
}

/* セル自体の白い点線border(themes/2026/style.css `.wpfltd`/`.wpfrtd`
   {border-bottom:1px dotted #ffffff}、colors.css側で実際の色を指定、
   実在確認済み)を除去し、余白だけをこのサイトのフォームと揃える。 */
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpfltd,
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpfrtd {
	border-bottom: 0 !important;
	padding: 0 12px 20px 0 !important;
	vertical-align: top;
}

#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpf-last {
	padding: 0 !important;
}

/* ラベル(「検索フレーズ:」→JS側で「検索キーワード:」等に置換済み)。
   themes/2026/style.css `.wpf-search-label{font-size:13px; ...}`と同じ
   詳細度のため、font-sizeにのみ!importantを付与する。 */
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-label {
	display: block;
	font-size: 14px !important;
	font-weight: 700;
	color: var(--chiikoto-text) !important;
	padding: 0 0 8px !important;
}

/* 検索キーワード入力欄・検索対象等の単一行select。uploads/wpforo/assets/
   colors.css `#wpforo #wpforo-wrap input[type="text"], select{border:1px
   solid #dadada; box-shadow: inset 0 1px 4px #e6e6e6;}`(ID2つ・タグ名、
   実在確認済み)を、新規質問フォームと同じ白背景+薄いグレー枠線+角丸+
   フォーカス時の青枠に上書きする。「フォーラムで検索」のような複数選択
   select(.wpff、core側でheight:150pxを指定、実在確認済み)は高さ指定が
   異なるため対象外にしている。 */
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar input.wpfs,
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar select.wpfin,
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar select.wpfd,
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar select.wpfob,
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar select.wpfo {
	width: 100% !important;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--chiikoto-border) !important;
	border-radius: 8px;
	background: var(--chiikoto-bg);
	color: var(--chiikoto-text);
	font-size: 15px;
	box-shadow: none !important;
}

/* 複数選択select(フォーラムで検索)は高さ150pxのまま、枠線・背景だけ揃える。 */
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar select.wpff {
	width: 100% !important;
	border: 1px solid var(--chiikoto-border) !important;
	border-radius: 8px;
	background: var(--chiikoto-bg);
	color: var(--chiikoto-text);
	font-size: 14px;
	box-shadow: none !important;
}

#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar input.wpfs:focus,
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar select.wpfin:focus,
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar select.wpfd:focus,
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar select.wpfob:focus,
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar select.wpfo:focus,
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar select.wpff:focus {
	outline: none;
	border-color: var(--chiikoto-blue) !important;
	box-shadow: 0 0 0 3px var(--chiikoto-blue-bg) !important;
}

/* 「詳細検索設定」の開閉トグル(.wpf-toggle-button、開閉JS自体は変更しない、
   実在確認済み)。控えめなテキストリンクにし、大きく目立たせない。 */
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpf-toggle-wrap .wpf-toggle {
	border-bottom: 0 !important;
	padding: 8px 0 !important;
	margin: 4px 0 0 !important;
	font-size: 14px !important;
	color: var(--chiikoto-blue) !important;
}

#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpf-toggle-button {
	color: var(--chiikoto-blue) !important;
	font-weight: 600;
}

#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpf-toggle-wrap .wpf-toggle i {
	color: var(--chiikoto-blue) !important;
}

#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpf-search-advanced-fields,
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpf-search-custom-fields {
	margin-top: 12px;
}

/* 検索ボタン。掲示板共通の青ボタンに統一する。themes/2026/style.css
   `.wpf-search-footer .wpf-last input[type="submit"]{width:20%;
   min-width:150px;}`(実在確認済み)の横幅指定を、PCでは中身に応じた自然な
   幅に、スマホでは100%幅に上書きする(下部メディアクエリ)。フォーム
   action・GETパラメータ・送信処理は一切変更していない。 */
#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpf-search-footer {
	margin-top: 4px;
}

#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar input.wpf-search[type="submit"] {
	width: auto !important;
	min-width: 140px;
	height: 46px;
	padding: 0 28px;
	background: var(--chiikoto-blue) !important;
	border: 1px solid var(--chiikoto-blue) !important;
	border-radius: 8px;
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar input.wpf-search[type="submit"]:hover {
	background: var(--chiikoto-blue-dark) !important;
	border-color: var(--chiikoto-blue-dark) !important;
}

/* 検索結果一覧。1件ずつをカード化せず、白背景+薄いborder-bottomの区切り
   だけにする(uploads/wpforo/assets/colors.css `.wpf-search-result-card{
   background:#ffffff; border-bottom:1px solid #e6e6e6;}` は元々近い方向性
   だったため、余白と文字サイズだけをこのサイトのトーンに揃える)。 */
#wpforo #wpforo-wrap .wpforo-search-results {
	margin-top: 8px;
}

#wpforo #wpforo-wrap .wpf-search-result-card {
	background: var(--chiikoto-bg) !important;
	border-bottom: 1px solid var(--chiikoto-border) !important;
	padding: 20px 2px !important;
	box-shadow: none !important;
	transition: none;
}

#wpforo #wpforo-wrap .wpf-search-result-card:hover {
	border-color: var(--chiikoto-border) !important;
}

#wpforo #wpforo-wrap .wpf-search-result-card:last-child {
	border-bottom: 0 !important;
}

#wpforo #wpforo-wrap .wpf-sr-header {
	margin-bottom: 6px !important;
}

/* タイトル。既存の質問一覧(.chiikoto-topic-title)と同じ青リンク・太さに
   揃える。themes/2026/style.css `.wpf-sr-title{font-size:16px;}`と同じ
   詳細度のため、font-sizeに!importantを付与する。 */
#wpforo #wpforo-wrap .wpf-sr-title {
	font-size: 17px !important;
	line-height: 1.5 !important;
}

#wpforo #wpforo-wrap .wpf-sr-title a {
	color: var(--chiikoto-blue) !important;
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: break-word;
}

#wpforo #wpforo-wrap .wpf-sr-title a:hover {
	color: var(--chiikoto-blue-dark) !important;
}

/* メタ情報(カテゴリー・投稿者・投稿日時)。既存の質問一覧
   (.chiikoto-topic-meta、13px・グレー)とトーンを揃える。区切り線
   (colors.css `.wpf-sr-meta{border-bottom:1px solid #f5f5f5;}`)は
   カード自体のborder-bottomと二重になるため外す。 */
#wpforo #wpforo-wrap .wpf-sr-meta {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 10px !important;
	column-gap: 14px;
	row-gap: 4px;
}

#wpforo #wpforo-wrap .wpf-sr-meta-item {
	font-size: 13px !important;
	color: var(--chiikoto-text-muted) !important;
}

/* wpForo標準の薄いグレーアイコン(フォルダ・ユーザー・時計)は、既存の
   掲示板一覧(アイコン無し)との統一感を優先し非表示にする(指示により
   許容される対応)。テキスト情報自体は維持する。 */
#wpforo #wpforo-wrap .wpf-sr-meta-item i {
	display: none;
}

#wpforo #wpforo-wrap .wpf-sr-forum a {
	color: var(--chiikoto-blue) !important;
	text-decoration: none;
}

#wpforo #wpforo-wrap .wpf-sr-forum a:hover {
	text-decoration: underline;
}

/* 本文抜粋。抜粋自体の生成(文字数制限・省略記号)は
   wpforo_sanitize_search_body()(includes/functions-template.php、
   実在確認済み、既定564文字)がそのまま担っており、CSS側で固定高さへの
   切り詰め等は一切行わない。文字サイズ・行間・色だけをこのサイトの
   トーンに揃える。 */
#wpforo #wpforo-wrap .wpf-sr-body {
	font-size: 14px !important;
	line-height: 1.7 !important;
	color: var(--chiikoto-text-muted) !important;
}

#wpforo #wpforo-wrap .wpf-sr-footer {
	margin-top: 8px !important;
}

/* 「投稿を見る」(JS側で文言変更済み)。控えめな青系テキストリンクのまま、
   大きなボタン化はしない。 */
#wpforo #wpforo-wrap .wpf-sr-view-link {
	color: var(--chiikoto-blue) !important;
	font-size: 13px !important;
	font-weight: 600;
	padding: 4px 0 !important;
	background: transparent !important;
	border-radius: 0;
}

#wpforo #wpforo-wrap .wpf-sr-view-link:hover {
	background: transparent !important;
	color: var(--chiikoto-blue-dark) !important;
}

/* 検索結果0件。シンプルなテキスト表示にする(大きなアイコン・破線枠・
   グレー背景は不要)。検索フォーム自体はこの上に表示されたままなので、
   そのまま別キーワードで再検索できる。 */
#wpforo #wpforo-wrap .wpf-sr-empty {
	background: transparent !important;
	border: 0 !important;
	text-align: left !important;
	padding: 24px 2px !important;
}

#wpforo #wpforo-wrap .wpf-sr-empty-icon {
	display: none;
}

#wpforo #wpforo-wrap .wpf-sr-empty p {
	color: var(--chiikoto-text-muted) !important;
	font-size: 15px !important;
	margin: 0 !important;
}

@media (max-width: 620px) {
	#wpforo #wpforo-wrap #wpforo-search-title {
		font-size: 20px !important;
	}
	#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar {
		padding: 16px !important;
	}
	/* コア側の620px以下でのtable→block切り替え(themes/2026/style.css
	   `.wpforo-td{display:block; width:100%!important;}`、実在確認済み)に
	   伴い、セル間の右paddingは不要になるため0にする。 */
	#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpfltd,
	#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpfrtd {
		padding: 0 0 16px 0 !important;
	}
	#wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar input.wpf-search[type="submit"] {
		width: 100% !important;
	}
}