/* ASMR タグフィルター: Findページ導線 専用CSS(スコープ: .asmr-find-nav配下のみ。既存SWELL/タグページCSSへ影響させない) */

.asmr-find-nav {
	--asmr-find-nav-border: #e0e4e8;
	--asmr-find-nav-bg: #f7f9fb;
	--asmr-find-nav-accent: #1e73be;
	--asmr-find-nav-text: #333333;
	box-sizing: border-box;
	max-width: 100%;
	margin: 1.5em 0;
	color: var( --asmr-find-nav-text );
}

.asmr-find-nav__inner {
	box-sizing: border-box;
	background: var( --asmr-find-nav-bg );
	border: 1px solid var( --asmr-find-nav-border );
	border-radius: 8px;
	padding: 1em 1.25em;
}

.asmr-find-nav__title {
	margin: 0 0 0.4em;
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.4;
}

.asmr-find-nav__text {
	margin: 0 0 0.9em;
	font-size: 0.88em;
	line-height: 1.6;
	color: #555555;
}

.asmr-find-nav__button {
	display: inline-block;
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	padding: 0.7em 1.5em;
	border-radius: 6px;
	background: var( --asmr-find-nav-accent );
	color: #ffffff !important;
	font-size: 0.92em;
	font-weight: 700;
	text-align: center;
	text-decoration: none !important;
	line-height: 1.4;
	transition: opacity 0.2s ease;
}

.asmr-find-nav__button:hover,
.asmr-find-nav__button:focus {
	opacity: 0.85;
	color: #ffffff !important;
}

/* ---------- 個別記事上部 ---------- */

.asmr-find-nav--single .asmr-find-nav__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 1.5em;
}

.asmr-find-nav--single .asmr-find-nav__title,
.asmr-find-nav--single .asmr-find-nav__text {
	flex: 1 1 100%;
}

@media screen and (min-width: 780px) {
	.asmr-find-nav--single .asmr-find-nav__title,
	.asmr-find-nav--single .asmr-find-nav__text {
		flex: 1 1 auto;
		margin-bottom: 0;
	}
	.asmr-find-nav--single .asmr-find-nav__button {
		flex: 0 0 auto;
		margin-left: auto;
	}
}

/* ---------- タグページ上部 ---------- */

.asmr-find-nav--tag .asmr-find-nav__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 1.5em;
}

.asmr-find-nav--tag .asmr-find-nav__title,
.asmr-find-nav--tag .asmr-find-nav__text {
	flex: 1 1 100%;
}

@media screen and (min-width: 780px) {
	.asmr-find-nav--tag .asmr-find-nav__title,
	.asmr-find-nav--tag .asmr-find-nav__text {
		flex: 1 1 auto;
		margin-bottom: 0;
	}
	.asmr-find-nav--tag .asmr-find-nav__button {
		flex: 0 0 auto;
		margin-left: auto;
	}
}

/* ---------- トップページ ---------- */

.asmr-find-nav--home {
	margin: 1.5em auto 2em;
}

.asmr-find-nav--home .asmr-find-nav__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	padding: 1.5em 1.25em;
}

.asmr-find-nav--home .asmr-find-nav__title {
	font-size: 1.15em;
}

.asmr-find-nav--home .asmr-find-nav__button {
	padding: 0.8em 2.2em;
}

/* ---------- スマートフォン ---------- */

@media screen and (max-width: 599px) {
	.asmr-find-nav__inner {
		padding: 0.9em 1em;
	}
	.asmr-find-nav__button {
		display: block;
		width: 100%;
	}
}

/* ==========================================================================
   SearchHub Find CTA(個別記事 上部/下部)。検索機能とわかる見た目にし、
   購入(DLsite)CTAとは配色・形状で区別する。既存 .asmr-find-nav* は壊さず、
   .searchhub-find-cta* を後から重ねて上書きする(同一詳細度は後勝ち)。
   ・読み込みは既存 enqueue(find-navigation.css)の1回のみ。記事ごとの
     インラインCSSは一切出力しない。
   ・画面固定(fixed)配置は使わない。box-sizing: border-box で横スクロールを防ぐ。
   ========================================================================== */

.searchhub-find-cta {
	--shf-accent: #1e73be;
	--shf-accent-dark: #155a94;
	--shf-bg: #f2f7fc;
	--shf-border: #cddff0;
	--shf-text: #2a2f36;
	--shf-muted: #55606c;
	box-sizing: border-box;
	max-width: 100%;
	margin: 1.75em 0;
	color: var( --shf-text );
}

.searchhub-find-cta *,
.searchhub-find-cta *::before {
	box-sizing: border-box;
}

/* 見出し→説明→条件→ボタンの縦視線順(モバイル優先)。 */
.searchhub-find-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.5em;
	max-width: 100%;
	padding: 1.1em 1.15em;
	background: var( --shf-bg );
	border: 1px solid var( --shf-border );
	border-radius: 12px;
}

.searchhub-find-cta__title {
	margin: 0;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.45;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.searchhub-find-cta__description {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.7;
	color: var( --shf-muted );
	overflow-wrap: anywhere;
}

.searchhub-find-cta__conditions {
	margin: 0.1em 0 0.2em;
	font-size: 0.86em;
	line-height: 1.6;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.searchhub-find-cta__conditions-label {
	color: var( --shf-muted );
}

.searchhub-find-cta__conditions-list {
	font-weight: 600;
	color: var( --shf-accent-dark );
}

.searchhub-find-cta__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	width: 100%;
	min-height: 56px;
	max-width: 100%;
	margin: 0.15em 0 0;
	padding: 0.7em 1.25em;
	border: 0;
	border-radius: 10px;
	background: var( --shf-accent );
	color: #ffffff !important;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-decoration: none !important;
	overflow-wrap: anywhere;
	transition: background-color 0.2s ease;
}

/* 虫眼鏡は安全なUnicode文字をCSS疑似要素で表現(外部アイコンライブラリ不使用)。 */
.searchhub-find-cta__button::before {
	content: "\1F50D";
	font-size: 1em;
	line-height: 1;
}

.searchhub-find-cta__button:hover {
	background: var( --shf-accent-dark );
	color: #ffffff !important;
}

.searchhub-find-cta__button:focus-visible {
	outline: 3px solid var( --shf-accent-dark );
	outline-offset: 2px;
}

/* 下部CTAは上部と同じ見た目が並び過ぎないよう、余白と上境界線で自然に区別する。 */
.searchhub-find-cta--bottom {
	margin-top: 2.75em;
}

.searchhub-find-cta--bottom .searchhub-find-cta__inner {
	background: #f7fafd;
	border-top: 3px solid var( --shf-accent );
}

/* PC: ボタンは本文幅いっぱいにせず内容幅で中央寄せ(小さすぎない最小幅を確保)。 */
@media screen and (min-width: 601px) {
	.searchhub-find-cta__inner {
		padding: 1.35em 1.5em;
	}
	.searchhub-find-cta__button {
		display: flex;
		width: fit-content;
		min-width: 280px;
		max-width: 100%;
		margin-inline: auto;
		font-size: 1em;
	}
}

/* スマートフォン(最大幅600px): ボタン全幅・大きめのタップ領域。320pxでもはみ出さない。 */
@media screen and (max-width: 600px) {
	.searchhub-find-cta__inner {
		padding: 1em 0.9em;
	}
	.searchhub-find-cta__button {
		width: 100%;
		min-height: 56px;
		padding: 0.8em 1em;
		font-size: 17px;
		font-weight: 700;
	}
}

/* ---------- グローバルメニュー(フォールバック追加時のみ使用) ---------- */

.asmr-find-nav-menu-item > a {
	display: inline-block;
}

/* ---------- タグアーカイブのページネーション配色統一(Find/特集ページと合わせる) ----------
   タグアーカイブはSWELLテーマ標準の .c-pagination を使用しており、Find/特集ページの
   .asmr-filter__pagination(WP標準paginate_links()ベース)とは別のHTML構造・クラス名。
   通常のカテゴリーページ・検索結果・個別記事などへ影響しないよう、WP標準のタグ
   アーカイブ判定用body class(#body_wrap.tag)を親セレクタとして必ず併用する
   (.c-pagination単体はテーマの他のアーカイブでも使われる共通クラスのため)。
   色は既存の --asmr-filter-accent と同じ値を使う(新規色コードは追加していない)。 */

#body_wrap.tag .c-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	align-items: center;
}

#body_wrap.tag .c-pagination a.page-numbers,
#body_wrap.tag .c-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	min-height: 2.2em;
	padding: 0 0.5em;
	border-radius: 6px;
	text-decoration: none;
	font-size: 0.9em;
	box-sizing: border-box;
}

#body_wrap.tag .c-pagination a.page-numbers {
	background: #fff;
	color: var( --asmr-filter-accent, #d63864 );
	border: 1px solid var( --asmr-filter-accent, #d63864 );
}

#body_wrap.tag .c-pagination a.page-numbers:hover {
	background: color-mix( in srgb, var( --asmr-filter-accent, #d63864 ) 12%, #fff );
	color: var( --asmr-filter-accent, #d63864 );
}

#body_wrap.tag .c-pagination span.page-numbers.current {
	background: var( --asmr-filter-accent, #d63864 );
	border: 1px solid var( --asmr-filter-accent, #d63864 );
	color: #fff;
}

/* 省略記号(…): ボタンに見せない(枠線・背景なしの控えめな表示のまま)。 */
#body_wrap.tag .c-pagination__dot {
	border: none;
	background: none;
	color: #999999;
	padding: 0 0.3em;
}