@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/* ============================================================
 * ⚠ 上のコメントブロック（Theme Name 〜 Version）は
 *    WordPressが子テーマを認識するための必須ヘッダーです。
 *    絶対に削除しないでください。消すとテーマが壊れます。
 * ============================================================ */


/* ============================================================
 * ERABAI カスタムスタイル v10 ── "基盤回路" ＋ 収益導線 ＋ スマホ最適化
 * ------------------------------------------------------------
 * 【デザインの考え方】
 *   白い設計図（グリッド背景）の上に、
 *   黒い計器パネル（スコアブロック）が載っている。
 *
 *   ・背景 = 方眼グリッド（画像なし・CSSのみ／軽量）
 *   ・本文 = 白いカードで可読性を確保
 *   ・データ表示部だけダーク＋等幅フォントで機械的に
 *
 * 【ブランドカラー】
 *   オレンジ（主）  #F86008   オレンジ（明）#FA9420
 *   シアン         #28B8F8   ※白背景では文字に使えない（コントラスト2.26:1）
 *                            文字用は #0369A1（5.93:1）を使用
 *
 * 【構成】PART 1 変数 / PART 2 背景・全体 / PART 3 記事パーツ
 *         PART 4 スコアパネル / PART 5 ダークモード
 *         PART 6 収益導線 / PART 7 スマホ最適化 / PART 8 トップのヒーロー
 *   気に入らないブロックは、コメントの区切りごと削除すれば標準に戻ります。
 * ============================================================ */


/* ============================================================
 * PART 1 : 変数
 * ============================================================ */
:root {
	--erabai-orange:       #F86008;
	--erabai-orange-light: #FA9420;
	--erabai-orange-soft:  #FFF3E9;
	--erabai-cyan:         #28B8F8;
	--erabai-cyan-text:    #0369A1;

	--erabai-ink:          #1F2937;
	--erabai-muted:        #64748B;
	--erabai-line:         #E5E7EB;

	--erabai-bg:           #0C0805;   /* ページ全体の地（暖色の黒） */
	--erabai-card:         #FFFFFF;   /* コンテンツ面（常に明るく保つ） */

	/* 計器パネル用 */
	--erabai-panel:        #0F172A;  /* 計器パネル面 */
	--erabai-panel-line:   rgba(148,163,184,0.22);
	--erabai-panel-ink:    #E5E7EB;
	--erabai-panel-muted:  #94A3B8;
	--erabai-track:        rgba(248,96,8,0.16);   /* バーの下地＝同系色の暗いステップ */

	--erabai-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* 固定バーを持ち上げる量。Cocoonの「モバイルフッターボタン」と重ならないための余白。
	   モバイルボタンを使わない設定にしたら、下の @media 内の値を 0px にしてください。 */
	--erabai-fixbar-offset: 0px;
}


/* ============================================================
 * PART 2 : 背景と全体
 * ============================================================ */

/* ------- 2-1. 背景：暖色の黒 ＋ ごく薄い基盤回路 -------
 * 参考画像の実測値に合わせ、線と背景の輝度差を約4に抑えています（＝ほぼ気配だけ）。
 * 濃さを変えたいときは、下のSVG内の opacity='0.042'（線）と
 * opacity='0.10'（接点）の数値を上下させてください。
 * 柄が不要なら、この2つの background 指定を消せば無地になります。 */
body {
	background-color: var(--erabai-bg);
	background-image:
		radial-gradient(120% 70% at 50% 0%,
			rgba(248, 96, 8, 0.10) 0%,
			rgba(248, 96, 8, 0.04) 32%,
			rgba(12, 8, 5, 0) 68%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E %3Cg fill='none' stroke='%23F86008' stroke-width='1' stroke-linecap='square' opacity='0.042'%3E %3Cpath d='M0 48 H96 L120 72 V168 H232 L256 192 V320'/%3E %3Cpath d='M320 96 H272 L248 72 V0'/%3E %3Cpath d='M0 224 H56 L80 248 H176 L200 272 V320'/%3E %3Cpath d='M96 320 V280 L64 248'/%3E %3Cpath d='M320 248 H288 L264 224 V136 H184'/%3E %3Cpath d='M0 136 H40 L64 112 V0'/%3E %3Cpath d='M160 0 V32 L192 64 H320'/%3E %3Cpath d='M320 176 H296'/%3E %3Cpath d='M0 288 H24 L48 312'/%3E %3Cpath d='M136 320 V296 H208'/%3E %3C/g%3E %3Cg fill='none' stroke='%2394A3B8' stroke-width='1' stroke-linecap='square' opacity='0.028'%3E %3Cpath d='M0 16 H144 L168 40 H320'/%3E %3Cpath d='M32 0 V88 L8 112 V320'/%3E %3Cpath d='M320 304 H240 L216 280'/%3E %3Cpath d='M104 96 H160 L176 112 V208'/%3E %3C/g%3E %3Cg fill='%23F86008' opacity='0.10'%3E %3Ccircle cx='96' cy='48' r='2'/%3E%3Ccircle cx='232' cy='168' r='2'/%3E %3Ccircle cx='272' cy='96' r='2'/%3E%3Ccircle cx='56' cy='224' r='2'/%3E %3Ccircle cx='176' cy='248' r='2'/%3E%3Ccircle cx='184' cy='136' r='2'/%3E %3Ccircle cx='40' cy='136' r='2'/%3E%3Ccircle cx='160' cy='32' r='2'/%3E %3Ccircle cx='208' cy='296' r='2'/%3E%3Ccircle cx='296' cy='176' r='2'/%3E %3C/g%3E %3Cg fill='%23F86008' opacity='0.055'%3E %3Crect x='118' y='70' width='4' height='4'/%3E %3Crect x='78' y='246' width='4' height='4'/%3E %3Crect x='262' y='222' width='4' height='4'/%3E %3Crect x='190' y='62' width='4' height='4'/%3E %3Crect x='62' y='110' width='4' height='4'/%3E %3C/g%3E %3Cg fill='%2394A3B8' opacity='0.05'%3E %3Ccircle cx='144' cy='16' r='1.6'/%3E%3Ccircle cx='32' cy='88' r='1.6'/%3E %3Ccircle cx='240' cy='304' r='1.6'/%3E%3Ccircle cx='160' cy='96' r='1.6'/%3E %3C/g%3E %3C/svg%3E");
	background-repeat: no-repeat, repeat;
	background-size: auto, 320px 320px;
	background-position: top center, top left;
}

/* ------- 2-2. 本文エリアを白いカードにしてグリッドの上に載せる -------
 * ⚠ 文字の下にグリッドが透けると一気に読みにくくなるため、
 *   本文を含む要素には必ず不透明な背景を敷くこと。 */
#main,
.main,
#sidebar,
.sidebar,
.entry-content,
.article,
#list,
.widget {
	background: var(--erabai-card);
	border-radius: 3px;
}

#main,
.main,
#sidebar,
.sidebar {
	border: 1px solid var(--erabai-line);
}

/* 本文の文字色を明示（テーマ側の指定に依存しない） */
.article,
.entry-content,
.entry-content p,
.entry-content li,
.entry-content td {
	color: var(--erabai-ink);
}

/* ------- 2-3. ヘッダー：背景と一体のダーク ------- */
.header-container,
#header-container,
#header {
	background: transparent;
}

.header-container {
	position: relative;
}

.header-container::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg,
		var(--erabai-orange) 0%,
		var(--erabai-orange-light) 45%,
		var(--erabai-cyan) 75%,
		transparent 100%);
}

/* ------- 2-4. リンク色 ------- */
.article a:not(.btn):not(.a-wrap),
.sidebar a:not(.a-wrap),
#footer a:not(.a-wrap) {
	color: var(--erabai-cyan-text);
}

.article a:not(.btn):not(.a-wrap):hover {
	color: var(--erabai-orange);
}

/* ------- 2-5. 見出し -------
 * H2の "//" が不要なら .article h2::before のブロックを削除 */
.article h2 {
	position: relative;
	background: none;
	border: none;
	border-left: 5px solid var(--erabai-orange);
	border-radius: 0;
	padding: 0.25em 0 0.25em 0.75em;
	margin: 2.6em 0 1em;
	font-size: 1.4em;
	line-height: 1.5;
	color: var(--erabai-ink);
}

.article h2::before {
	content: "//";
	display: block;
	font-family: var(--erabai-mono);
	font-size: 0.62em;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--erabai-cyan-text);
	opacity: 0.75;
	margin-bottom: 0.25em;
}

.article h3 {
	position: relative;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0 0 0.4em;
	margin: 2em 0 0.9em;
	font-size: 1.18em;
	line-height: 1.5;
	color: var(--erabai-ink);
}

.article h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg,
		var(--erabai-orange) 0%,
		var(--erabai-orange-light) 32%,
		var(--erabai-cyan) 58%,
		var(--erabai-line) 58%);
}

.article h4 {
	border: none;
	border-left: 3px solid var(--erabai-orange-light);
	background: none;
	padding: 0.1em 0 0.1em 0.6em;
	margin: 1.6em 0 0.7em;
	font-size: 1.05em;
}

/* ------- 2-6. グローバルナビ ------- */
#navi .navi-in > ul > li { position: relative; }

#navi .navi-in > ul > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 3px;
	background: var(--erabai-orange);
	transition: width .2s ease, left .2s ease;
}

#navi .navi-in > ul > li > a:hover::after { left: 0; width: 100%; }

/* ------- 2-7. カテゴリラベル ------- */
.cat-label {
	background: var(--erabai-orange);
	border: none;
	border-radius: 2px;
	font-family: var(--erabai-mono);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ------- 2-8. 記事カード -------
 * 通常時から必ず白背景にする（背景のグリッドが文字の下に透けないようにするため）。
 * ホバーでは背景色を変えず、浮き上がりと枠線だけで反応させる。 */
.entry-card-wrap,
.related-entry-card-wrap,
.carousel-entry-card-wrap,
.popular-entry-card-wrap,
.new-entry-card-wrap {
	background: var(--erabai-card);
	border-radius: 3px;
	transition: transform .18s ease, box-shadow .18s ease;
}

.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
	background: var(--erabai-card);
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px var(--erabai-cyan), 0 6px 20px rgba(15, 23, 42, 0.10);
}

.entry-card-title,
.related-entry-card-title,
.entry-card-snippet {
	color: var(--erabai-ink);
}

.entry-card-title,
.related-entry-card-title { font-weight: 700; }

.entry-card-wrap:hover .entry-card-title { color: var(--erabai-orange); }

/* 日付は等幅にして機械的な印象に（本文の可読性には触れない） */
.post-date, .entry-date, .post-update {
	font-family: var(--erabai-mono);
	font-size: 0.82em;
	letter-spacing: 0.02em;
}

/* ------- 2-9. サイドバー見出し ------- */
.sidebar h3 {
	background: none;
	border: none;
	border-left: 5px solid var(--erabai-orange);
	border-bottom: 1px solid var(--erabai-line);
	border-radius: 0;
	padding: 0.35em 0 0.5em 0.6em;
	color: var(--erabai-ink);
	font-size: 1em;
}

/* ------- 2-10. 目次 ------- */
.toc {
	border: 1px solid var(--erabai-line);
	border-top: 3px solid var(--erabai-orange);
	border-radius: 3px;
	background: #fff;
}

.toc-title { color: var(--erabai-ink); font-weight: 700; }

/* ------- 2-11. ページネーション・ボタン ------- */
.pagination .current,
.page-numbers.current {
	background: var(--erabai-orange);
	border-color: var(--erabai-orange);
	color: #fff;
	border-radius: 2px;
}

.pagination a:hover, .page-numbers:hover {
	background: var(--erabai-orange-soft);
	border-color: var(--erabai-orange-light);
	color: var(--erabai-orange);
}

.btn, .btn-l, .btn-m, .btn-s {
	background: var(--erabai-orange);
	border-radius: 3px;
	font-weight: 700;
	transition: background .18s ease, transform .18s ease;
}

.btn:hover, .btn-l:hover, .btn-m:hover, .btn-s:hover {
	background: var(--erabai-orange-light);
	transform: translateY(-1px);
}

/* ------- 2-12. 引用 ------- */
.article blockquote {
	border-left: 4px solid var(--erabai-orange-light);
	background: var(--erabai-orange-soft);
	border-radius: 0 3px 3px 0;
}

/* ------- 2-13. 表（比較表が主役なので整える） ------- */
.article table thead th {
	background: var(--erabai-panel);
	color: #fff;
	border-color: var(--erabai-panel);
	font-family: var(--erabai-mono);
	font-size: 0.9em;
	letter-spacing: 0.03em;
}

.article table th { background: #F1F5F9; font-weight: 700; color: var(--erabai-ink); }
.article table tbody tr:nth-child(even) td { background: #FAFBFC; }

/* ------- 2-14. フッター ------- */
#footer {
	background: transparent;
	border-top: 2px solid var(--erabai-orange);
	color: #CBD5E1;
}

#footer a:not(.a-wrap) { color: #7DD3FC; }
#footer .footer-bottom, #footer .copyright { color: #94A3B8; }

/* ------- 2-15. グローバルナビもダーク面に置く ------- */
#navi, #navi .navi-in {
	background: transparent;
}

#navi .navi-in > ul > li > a {
	color: #E2E8F0;
}

#navi .navi-in > ul > li > a:hover {
	background: rgba(248,96,8,0.14);
	color: var(--erabai-orange-light);
}


/* ============================================================
 * PART 3 : 記事内パーツ
 * ============================================================ */

/* ------- 3-1. PR表記（景品表示法・ステマ規制対応） -------
 * 小さい文字・薄い色はNG。本文と同等以上の視認性を必ず保つこと。 */
.erabai-pr {
	font-size: 0.95em;
	line-height: 1.6;
	margin: 0 0 1em;
	padding: 0.65em 0.95em;
	color: var(--erabai-ink);
	background: var(--erabai-orange-soft);
	border-left: 4px solid var(--erabai-orange);
	border-radius: 2px;
}

/* ------- 3-2. 公開日・最終更新日 ------- */
.erabai-dates {
	font-family: var(--erabai-mono);
	font-size: 0.8em;
	letter-spacing: 0.02em;
	color: var(--erabai-muted);
	margin: 0 0 1.4em;
}

.erabai-dates-sep { margin: 0 0.6em; opacity: 0.5; }

/* ------- 3-3. 比較表の横スクロール ------- */
.erabai-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.6em 0;
}

.erabai-table-scroll table { min-width: 560px; margin: 0; }


/* ============================================================
 * PART 4 : 評価スコア＝計器パネル
 * ------------------------------------------------------------
 * 8軸すべて同じ尺度（1-5）なので、色は1色系のグラデーションのみ。
 * 軸ごとに色を変えると「別々のものを比べている」誤読を生むため使いません。
 * バーの下地はグレーではなく同系色の暗いステップにして、
 * 満たされていない量が同じ物差しで読めるようにしています。
 * ============================================================ */
.erabai-score {
	position: relative;
	margin: 2.2em 0;
	padding: 1.4em 1.4em 1.1em;
	background: var(--erabai-panel);
	border: 1px solid var(--erabai-panel-line);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

/* 上端のブランドライン */
.erabai-score::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--erabai-orange) 0%,
		var(--erabai-orange-light) 50%,
		var(--erabai-cyan) 100%);
}

/* 背景のうっすらしたグリッド（計器盤の質感） */
.erabai-score::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(148,163,184,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148,163,184,0.05) 1px, transparent 1px);
	background-size: 22px 22px;
}

.erabai-score > * { position: relative; z-index: 1; }

.erabai-score-name {
	font-family: var(--erabai-mono);
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--erabai-panel-muted);
	margin-bottom: 0.6em;
}

/* ------- 総合スコア（ヒーロー数値） -------
 * 48px以上・本文と同じサンセリフ・プロポーショナル数字（等幅にしない） */
.erabai-total {
	display: flex;
	align-items: baseline;
	gap: 0.45em;
	padding-bottom: 0.9em;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--erabai-panel-line);
}

.erabai-total-label {
	font-family: var(--erabai-mono);
	font-size: 0.72em;
	letter-spacing: 0.14em;
	color: var(--erabai-panel-muted);
}

.erabai-total-num {
	font-size: 52px;
	font-weight: 700;
	line-height: 1;
	color: var(--erabai-orange-light);
	font-variant-numeric: proportional-nums;
}

.erabai-total-max {
	font-size: 0.85em;
	color: var(--erabai-panel-muted);
}

.erabai-total-pending .erabai-total-num {
	font-size: 1.5em;
	color: var(--erabai-panel-muted);
	letter-spacing: 0.04em;
}

/* ------- 8軸のメーター ------- */
.erabai-score-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 0.9em;
}

.erabai-score-table th,
.erabai-score-table td {
	border: none !important;
	padding: 0.42em 0;
	background: none !important;
	vertical-align: middle;
}

.erabai-score-table th {
	width: 9em;
	text-align: left;
	font-weight: 400;
	color: var(--erabai-panel-ink);
	white-space: nowrap;
	letter-spacing: 0.01em;
}

.erabai-bar-cell {
	position: relative;
	width: auto;
	padding-right: 0.9em !important;
}

/* 下地＝同系色の暗いステップ */
.erabai-bar-cell::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0.9em;
	top: 50%;
	transform: translateY(-50%);
	height: 8px;
	border-radius: 4px;
	background: var(--erabai-track);
}

.erabai-bar {
	position: relative;
	z-index: 1;
	display: block;
	height: 8px;
	border-radius: 4px;
	min-width: 4px;
	background: linear-gradient(90deg, var(--erabai-orange), var(--erabai-orange-light));
	box-shadow: 0 0 10px rgba(250, 148, 32, 0.35);
}

/* 数値は列で並ぶので等幅数字 */
.erabai-num {
	width: 3.2em;
	text-align: right;
	font-family: var(--erabai-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--erabai-panel-ink);
}

.erabai-unverified {
	font-family: var(--erabai-mono);
	color: var(--erabai-panel-muted);
	font-size: 0.85em;
	letter-spacing: 0.06em;
}

.erabai-score-date {
	margin: 1.1em 0 0;
	padding-top: 0.8em;
	border-top: 1px solid var(--erabai-panel-line);
	font-family: var(--erabai-mono);
	font-size: 0.75em;
	color: var(--erabai-panel-muted);
}

.erabai-score-date a {
	color: var(--erabai-cyan) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ------- スマホ ------- */
@media screen and (max-width: 480px) {
	body { background-size: 84px 84px, 84px 84px, 21px 21px, 21px 21px; }
	.article h2 { font-size: 1.25em; }
	.article h3 { font-size: 1.1em; }
	.erabai-score { padding: 1.1em 1em 0.9em; }
	.erabai-score-table th { width: 6.8em; font-size: 0.95em; }
	.erabai-total-num { font-size: 42px; }
}


/* ============================================================
 * PART 5 : OSのダークモードについて
 * ------------------------------------------------------------
 * このテーマは「暗い背景 × 明るいコンテンツ」で意図的に固定しています。
 * prefers-color-scheme による自動切り替えは行いません。
 *
 * 【理由】Cocoon本体の文字色はOSのダークモードに追従しないため、
 *         背景だけを暗くすると「暗い背景に暗い文字」になり読めなくなります。
 *         （v4でこの問題が発生したため、v6で自動切り替えを廃止しました）
 * ============================================================ */

/* ============================================================
 * PART 6 : 収益導線パーツ（CTA・ボタン・固定バー・ポップアップ）
 * ============================================================ */

/* ------- 6-1. ボタン ------- */
.erabai-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0.75em 1.6em;
	background: linear-gradient(135deg, var(--erabai-orange), var(--erabai-orange-light));
	color: #fff !important;
	font-weight: 700;
	font-size: 0.98em;
	line-height: 1.4;
	text-decoration: none !important;
	border: none;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(248, 96, 8, 0.28);
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.erabai-btn:hover {
	color: #fff !important;
	transform: translateY(-1px);
	filter: brightness(1.06);
	box-shadow: 0 5px 16px rgba(248, 96, 8, 0.34);
}

.erabai-btn::after {
	content: "→";
	font-weight: 400;
	opacity: 0.85;
}

.erabai-btn-block {
	display: flex;
	width: 100%;
	padding: 0.95em 1.2em;
	font-size: 1.02em;
}

.erabai-btn-s {
	padding: 0.5em 1.1em;
	font-size: 0.88em;
	white-space: nowrap;
}

.erabai-btn-ghost {
	background: transparent;
	color: var(--erabai-orange) !important;
	border: 1.5px solid var(--erabai-orange);
	box-shadow: none;
}

.erabai-btn-ghost:hover {
	background: var(--erabai-orange-soft);
	color: var(--erabai-orange) !important;
	box-shadow: none;
}

.erabai-btn-note {
	display: block;
	margin-top: 0.4em;
	font-size: 0.78em;
	color: var(--erabai-muted);
}

/* 比較表の中のボタンは詰めて表示 */
.article table .erabai-btn {
	padding: 0.45em 0.9em;
	font-size: 0.85em;
	white-space: nowrap;
	box-shadow: none;
}

/* ------- 6-2. CTAボックス ------- */
.erabai-cta {
	position: relative;
	margin: 2.2em 0;
	padding: 1.4em 1.4em 1.2em;
	background: var(--erabai-card);
	border: 1px solid var(--erabai-line);
	border-radius: 6px;
	box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
}

.erabai-cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 6px 6px 0 0;
	background: linear-gradient(90deg,
		var(--erabai-orange) 0%,
		var(--erabai-orange-light) 55%,
		var(--erabai-cyan) 100%);
}

.erabai-cta-name {
	font-family: var(--erabai-mono);
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--erabai-muted);
	margin-bottom: 0.8em;
}

.erabai-cta-rows {
	margin-bottom: 1.1em;
}

.erabai-cta-row {
	display: flex;
	gap: 0.9em;
	padding: 0.45em 0;
	border-bottom: 1px dashed var(--erabai-line);
	font-size: 0.94em;
	line-height: 1.6;
}

.erabai-cta-row:last-child {
	border-bottom: none;
}

.erabai-cta-key {
	flex: 0 0 7em;
	color: var(--erabai-muted);
	font-size: 0.9em;
	padding-top: 0.15em;
}

.erabai-cta-val {
	flex: 1;
	color: var(--erabai-ink);
	font-weight: 600;
}

.erabai-cta-note {
	margin: 0.8em 0 0;
	font-size: 0.78em;
	color: var(--erabai-muted);
	text-align: center;
}

/* ------- 6-3. 本文内テキストリンク ------- */
.erabai-inline-link {
	color: var(--erabai-cyan-text) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	font-weight: 600;
}

.erabai-inline-link:hover {
	color: var(--erabai-orange) !important;
}

/* ------- 6-4. アコーディオン ------- */
.erabai-acc {
	margin: 1.6em 0;
	border: 1px solid var(--erabai-line);
	border-radius: 4px;
	background: var(--erabai-card);
	overflow: hidden;
}

.erabai-acc-title {
	position: relative;
	padding: 0.85em 2.6em 0.85em 1.1em;
	background: #F8FAFC;
	font-weight: 700;
	font-size: 0.96em;
	color: var(--erabai-ink);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.erabai-acc-title::-webkit-details-marker { display: none; }

.erabai-acc-title::after {
	content: "▼";
	position: absolute;
	right: 1.1em;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.72em;
	color: var(--erabai-orange);
	transition: transform .18s ease;
}

.erabai-acc[open] .erabai-acc-title::after {
	transform: translateY(-50%) rotate(180deg);
}

.erabai-acc-title:hover {
	background: var(--erabai-orange-soft);
}

.erabai-acc-body {
	padding: 1.1em;
	border-top: 1px solid var(--erabai-line);
}

.erabai-acc-body > *:first-child { margin-top: 0; }
.erabai-acc-body > *:last-child  { margin-bottom: 0; }

/* ------- 6-5. 画面下部の固定バー -------
 * ⚠ 高さを大きくしないこと。画面の大部分を覆うとGoogleのペナルティ対象。 */
.erabai-fixbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	background: rgba(15, 23, 42, 0.97);
	border-top: 2px solid var(--erabai-orange);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
	animation: erabaiFixbarUp .28s ease;
}

@keyframes erabaiFixbarUp {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

.erabai-fixbar-in {
	display: flex;
	align-items: center;
	gap: 0.9em;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0.6em 3em 0.6em 1em;
	min-height: 56px;
	box-sizing: border-box;
}

.erabai-fixbar-text {
	flex: 1;
	min-width: 0;
	color: #E5E7EB;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
}

.erabai-fixbar-note {
	display: block;
	font-family: var(--erabai-mono);
	font-size: 0.82em;
	font-weight: 400;
	color: #94A3B8;
	margin-top: 0.15em;
}

.erabai-fixbar-close {
	position: absolute;
	right: 0.6em;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: none;
	color: #94A3B8;
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
	border-radius: 4px;
}

.erabai-fixbar-close:hover {
	background: rgba(148, 163, 184, 0.18);
	color: #fff;
}

.erabai-fixbar-in { position: relative; }

@media screen and (max-width: 480px) {
	.erabai-fixbar-in { padding: 0.5em 2.6em 0.5em 0.8em; min-height: 52px; }
	.erabai-fixbar-text { font-size: 0.84em; }
}

/* ------- 6-6. 離脱時ポップアップ（PCのみ表示） ------- */
.erabai-modal {
	position: fixed;
	inset: 0;
	z-index: 9995;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
}

.erabai-modal-bg {
	position: absolute;
	inset: 0;
	background: rgba(10, 15, 28, 0.72);
	backdrop-filter: blur(2px);
}

.erabai-modal-box {
	position: relative;
	width: 100%;
	max-width: 460px;
	padding: 2em 1.9em 1.6em;
	background: var(--erabai-card);
	border-radius: 8px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	animation: erabaiModalIn .22s ease;
}

@keyframes erabaiModalIn {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

.erabai-modal-box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 8px 8px 0 0;
	background: linear-gradient(90deg,
		var(--erabai-orange) 0%,
		var(--erabai-orange-light) 55%,
		var(--erabai-cyan) 100%);
}

.erabai-modal-close {
	position: absolute;
	right: 0.5em;
	top: 0.5em;
	width: 34px;
	height: 34px;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--erabai-muted);
	font-size: 1.35em;
	line-height: 1;
	cursor: pointer;
	border-radius: 4px;
}

.erabai-modal-close:hover {
	background: #F1F5F9;
	color: var(--erabai-ink);
}

.erabai-modal-title {
	margin: 0 0 0.6em;
	font-size: 1.16em;
	font-weight: 700;
	line-height: 1.5;
	color: var(--erabai-ink);
}

.erabai-modal-body {
	margin: 0 0 1.3em;
	font-size: 0.94em;
	line-height: 1.75;
	color: #374151;
}

.erabai-modal-note {
	margin: 0.8em 0 0;
	font-size: 0.75em;
	color: var(--erabai-muted);
	text-align: center;
}

/* スマホでは離脱ポップアップを完全に無効化（JS側でも制御済み） */
@media screen and (max-width: 1023px) {
	.erabai-modal { display: none !important; }
}

/* ------- 6-7. 非表示制御（重要） -------
 * .erabai-modal に display:flex を指定しているため、
 * ブラウザ標準の [hidden]{display:none} が負けてしまいます。
 * 明示的に打ち消さないと「×を押しても消えない」不具合になります。 */
.erabai-fixbar[hidden],
.erabai-modal[hidden] {
	display: none !important;
}

/* ============================================================
 * PART 7 : スマートフォン最適化
 * ------------------------------------------------------------
 * Cocoonのブレークポイント（834px）に合わせています。
 * ============================================================ */

/* ------- 7-1. 固定バーとCocoonモバイルボタンの衝突回避 -------
 * Cocoonの「モバイルフッターボタン」は画面下部に固定表示されます。
 * 何もしないと固定バーと完全に重なるため、その分だけ持ち上げます。
 * あわせてiPhoneのホームバー（セーフエリア）も避けます。 */
@media screen and (max-width: 834px) {
	:root {
		--erabai-fixbar-offset: 56px;   /* モバイルボタンの高さぶん */
	}
}

.erabai-fixbar {
	bottom: calc(var(--erabai-fixbar-offset) + env(safe-area-inset-bottom, 0px));
}

/* 固定バーが出ているとき、本文の末尾が隠れないよう下に余白を作る */
body.has-erabai-fixbar {
	padding-bottom: calc(64px + var(--erabai-fixbar-offset) + env(safe-area-inset-bottom, 0px));
}

/* ------- 7-2. タップ領域を確保 -------
 * 閉じるボタンが小さいと押せません。44px以上にします。 */
.erabai-fixbar-close,
.erabai-modal-close {
	min-width: 44px;
	min-height: 44px;
}

/* ------- 7-3. iOSの自動ズーム対策 -------
 * 入力欄のフォントが16px未満だと、タップ時に画面が勝手に拡大されます。 */
@media screen and (max-width: 834px) {
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="url"],
	textarea,
	select {
		font-size: 16px !important;
	}
}

/* ------- 7-4. 比較表が横スクロールできることを示す -------
 * 気づかれないと「表が切れている」と誤解されます。
 * 右端に影を出して、続きがあることを伝えます。 */
.erabai-table-scroll {
	position: relative;
	background:
		linear-gradient(to right, var(--erabai-card) 30%, rgba(255,255,255,0)),
		linear-gradient(to right, rgba(255,255,255,0), var(--erabai-card) 70%) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(15,23,42,0.14), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,0.14), rgba(0,0,0,0)) 100% 0;
	background-repeat: no-repeat;
	background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

@media screen and (max-width: 834px) {
	.erabai-table-scroll::after {
		content: "← 横にスクロールできます →";
		display: block;
		margin-top: 0.5em;
		font-size: 0.75em;
		color: var(--erabai-muted);
		text-align: center;
		font-family: var(--erabai-mono);
	}
}

/* ------- 7-5. スマホでの各パーツの詰め ------- */
@media screen and (max-width: 600px) {

	/* CTAボックス：キーと値を縦積みにする */
	.erabai-cta {
		padding: 1.2em 1em 1em;
	}
	.erabai-cta-row {
		flex-direction: column;
		gap: 0.15em;
		padding: 0.55em 0;
	}
	.erabai-cta-key {
		flex: none;
		font-size: 0.82em;
		letter-spacing: 0.04em;
	}
	.erabai-cta-val {
		font-size: 0.98em;
	}

	/* ボタン：指で押しやすい高さに */
	.erabai-btn {
		padding: 0.9em 1.4em;
		min-height: 48px;
	}
	.erabai-btn-block {
		padding: 1em 1.2em;
	}

	/* スコアパネル：軸名を折り返さない範囲で詰める */
	.erabai-score-table {
		font-size: 0.85em;
	}
	.erabai-score-table th {
		width: 6.2em;
		letter-spacing: -0.02em;
	}
	.erabai-num {
		width: 2.8em;
	}

	/* アコーディオン：タップ領域を広げる */
	.erabai-acc-title {
		padding: 1em 2.6em 1em 1em;
		min-height: 48px;
		box-sizing: border-box;
	}
}

/* ------- 7-6. 本文の読みやすさ ------- */
@media screen and (max-width: 480px) {
	.article p,
	.entry-content p {
		line-height: 1.85;
	}
	/* H2の "//" はモバイルでは縦幅を食うので小さく */
	.article h2::before {
		font-size: 0.55em;
		margin-bottom: 0.15em;
	}
}


/* ============================================================
 * PART 8 : 繝医ャ繝励�繝ｼ繧ｸ縺ｮ繝偵�繝ｭ繝ｼ�域､懃ｴ｢谺��繧ｫ繝�ざ繝ｪ繝ｪ繝ｳ繧ｯ蜈･繧奇ｼ�
 * ------------------------------------------------------------
 * 縲後さ繝ｳ繝�Φ繝�ｸ企Κ縲阪え繧｣繧ｸ繧ｧ繝�ヨ縺ｫ [erabai_hero] 繧堤ｽｮ縺�※菴ｿ縺�€�
 * PART 2-2 縺ｧ .widget 縺ｫ逋ｽ縺�き繝ｼ繝芽レ譎ｯ繧呈聞縺�※縺�ｋ縺ｮ縺ｧ縲�
 * 繝偵�繝ｭ繝ｼ繧貞性繧€繧ｦ繧｣繧ｸ繧ｧ繝�ヨ縺�縺代◎縺ｮ謖�ｮ壹ｒ謇薙■豸医☆縲�
 * ============================================================ */

/* ------- 8-0. 隱ｭ縺ｿ荳翫￡蟆ら畑繝�く繧ｹ繝� ------- */
.erabai-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------- 8-1. 繧ｦ繧｣繧ｸ繧ｧ繝�ヨ縺ｮ逋ｽ繧ｫ繝ｼ繝峨ｒ謇薙■豸医☆ ------- */
.widget:has(.erabai-hero) {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin-bottom: 1.5rem;
}

/* ------- 8-2. 譛ｬ菴� ------- */
.erabai-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	padding: clamp(2.2rem, 6.5vw, 4rem) 1.25rem clamp(1.8rem, 4.5vw, 2.6rem);
	background: var(--erabai-bg);
	border-radius: 3px;
	text-align: center;
	color: #FFFFFF;
}

/* 荳九°繧臥ｫ九■荳翫′繧九が繝ｬ繝ｳ繧ｸ縺ｮ蜈峨€�
   blur 縺ｧ縺ｯ縺ｪ縺上げ繝ｩ繝��繧ｷ繝ｧ繝ｳ縺ｧ謠上￥�亥ｷｨ螟ｧ隕∫ｴ�縺ｮ blur 縺ｯ繝｢繝舌う繝ｫ縺ｧ驥阪＞�峨€� */
.erabai-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -45%;
	width: 130%;
	aspect-ratio: 2 / 1;
	transform: translateX(-50%);
	background: radial-gradient(
		ellipse at 50% 100%,
		rgba(248, 96, 8, 0.40),
		rgba(248, 96, 8, 0.12) 45%,
		rgba(248, 96, 8, 0) 70%
	);
	pointer-events: none;
	z-index: -1;
}

/* ------- 8-3. 繝舌ャ繧ｸ ------- */
.erabai-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 1.4em;
	padding: 0.3em 1em 0.3em 0.3em;
	border: 1px solid rgba(248, 96, 8, 0.45);
	border-radius: 999px;
	background: rgba(248, 96, 8, 0.10);
	color: var(--erabai-orange-light);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
}

.erabai-hero-badge b {
	padding: 0.3em 0.85em;
	border-radius: 999px;
	background: var(--erabai-orange);
	color: #FFFFFF;
	font-family: var(--erabai-mono);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ------- 8-4. 隕句�縺励→繝ｪ繝ｼ繝� ------- */
/* 笞� h1 縺ｯ菴ｿ繧上↑縺�€�Cocoon縺ｮ繝倥ャ繝€繝ｼ繝ｭ繧ｴ縺梧里縺ｫ h1 縺ｮ縺溘ａ */
.erabai-hero-title {
	margin: 0 0 0.7em;
	font-size: clamp(1.45rem, 4.8vw, 2.7rem);
	font-weight: 700;          /* 蜥梧枚縺ｫ font-light 縺ｯ菴ｿ繧上↑縺�ｼ域ｽｰ繧後※隱ｭ繧√↑縺上↑繧具ｼ� */
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: #FFFFFF;
}

/* 1陦後ｒ inline-block 縺ｫ縺励※縲√€後ｒ縲√€阪□縺第ｬ｡陦後↓關ｽ縺｡繧区釜繧願ｿ斐＠繧帝亟縺舌€�
   蜈･繧翫″繧峨↑縺�→縺阪□縺大�驛ｨ縺ｧ謚倥ｊ霑斐☆縺ｮ縺ｧ縲∫強縺�判髱｢縺ｧ繧ら�ｴ邯ｻ縺励↑縺�€� */
.erabai-hero-title > span {
	display: inline-block;
	max-width: 100%;
}

.erabai-hero-title .erabai-hero-accent {
	color: var(--erabai-orange-light);
}

.erabai-hero-lead {
	margin: 0 auto 1.9em;
	max-width: 31em;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.80);
	/* 蟇ｾ蠢懊ヶ繝ｩ繧ｦ繧ｶ縺ｧ縺ｯ譁�ｯ€縺ｧ謚倥ｊ霑斐☆縲る撼蟇ｾ蠢懊〒繧る€壼ｸｸ縺ｮ謚倥ｊ霑斐＠縺ｫ縺ｪ繧九□縺� */
	word-break: auto-phrase;
}

/* ------- 8-5. 繝懊ち繝ｳ ------- */
.erabai-hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.erabai-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.7em 1.6em;
	border-radius: 4px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.erabai-hero-btn-main {
	background: var(--erabai-orange);
	color: #FFFFFF;
	border: 1px solid var(--erabai-orange);
}

.erabai-hero-btn-main:hover,
.erabai-hero-btn-main:focus-visible {
	background: var(--erabai-orange-light);
	border-color: var(--erabai-orange-light);
	color: #FFFFFF;
}

.erabai-hero-btn-sub {
	background: transparent;
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.45);
}

.erabai-hero-btn-sub:hover,
.erabai-hero-btn-sub:focus-visible {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.75);
	color: #FFFFFF;
}

.erabai-hero-btn:focus-visible {
	outline: 2px solid var(--erabai-cyan);
	outline-offset: 2px;
}

/* ------- 8-6. 縲梧爾縺吶€阪ヶ繝ｭ繝�け�域､懃ｴ｢谺�ｼ九き繝�ざ繝ｪ�� ------- */
.erabai-hero-find {
	margin-top: 2rem;
	padding-top: 1.7rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ------- 8-7. 讀懃ｴ｢谺� ------- */
.erabai-hero-search {
	display: flex;
	gap: 0;
	max-width: 30rem;
	margin: 0 auto;
}

.erabai-hero-search input[type="search"],
.erabai-hero-search input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 0.95em;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-right: 0;
	border-radius: 4px 0 0 4px;
	background: rgba(255, 255, 255, 0.07);
	color: #FFFFFF;
	/* 笞� iOS縺ｯ16px譛ｪ貅€縺ｮ蜈･蜉帶ｬ�ｒ繧ｿ繝��縺吶ｋ縺ｨ蜍晄焔縺ｫ諡｡螟ｧ縺吶ｋ縲�16px繧剃ｸ句屓繧峨○縺ｪ縺�％縺ｨ */
	font-size: 16px;
	line-height: 1.4;
	-webkit-appearance: none;
	        appearance: none;
	box-sizing: border-box;
}

.erabai-hero-search input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.erabai-hero-search input:focus {
	outline: 2px solid var(--erabai-cyan);
	outline-offset: -1px;
	background: rgba(255, 255, 255, 0.12);
}

/* 讀懃ｴ｢谺��縲古励€阪ｒiOS/Chrome縺ｧ逋ｽ縺剰ｦ九○繧� */
.erabai-hero-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	background: rgba(255, 255, 255, 0.55);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	cursor: pointer;
}

.erabai-hero-search button {
	flex: 0 0 auto;
	min-width: 5.5em;
	height: 48px;
	padding: 0 1.1em;
	border: 1px solid var(--erabai-orange);
	border-radius: 0 4px 4px 0;
	background: var(--erabai-orange);
	color: #FFFFFF;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.erabai-hero-search button:hover,
.erabai-hero-search button:focus-visible {
	background: var(--erabai-orange-light);
	border-color: var(--erabai-orange-light);
}

.erabai-hero-search button:focus-visible {
	outline: 2px solid var(--erabai-cyan);
	outline-offset: 2px;
}

/* ------- 8-8. 繧ｫ繝�ざ繝ｪ縺ｮ蟶ｯ�医け繝ｪ繝�け縺ｧ縺阪ｋ�� ------- */
.erabai-hero-cats {
	position: relative;
	overflow: hidden;
	margin-top: 1.4rem;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.erabai-hero-cats-track {
	display: flex;
	width: max-content;   /* 縺薙ｌ縺檎┌縺�→ translateX(-50%) 縺後ぜ繝ｬ縺ｦ繝ｫ繝ｼ繝励′鬟帙� */
	animation: erabai-marquee 32s linear infinite;
}

.erabai-hero-cats-track .erabai-hero-cat {
	padding: 0.45em 0.95em;
	color: rgba(255, 255, 255, 0.60);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 4px;
	transition: color 0.15s ease, background-color 0.15s ease;
}

/* 蛹ｺ蛻�ｊ縺ｮ縲�/縲阪�陬�｣ｾ縲ゅΜ繝ｳ繧ｯ縺ｮ螟悶↓迢ｬ遶九＠縺ｦ鄂ｮ縺上€�
   笞� 繝ｪ繝ｳ繧ｯ縺ｮ ::after 縺ｫ縺吶ｋ縺ｨ縲√け繝ｪ繝�け遽�峇縺ｨ繝帙ヰ繝ｼ縺ｮ濶ｲ縺後€�/縲阪∪縺ｧ蠎�′繧九€� */
.erabai-hero-cats-track .erabai-hero-sep {
	align-self: center;
	padding: 0 0.55em;
	color: rgba(248, 96, 8, 0.55);
	font-size: 0.82rem;
	line-height: 1;
	pointer-events: none;
	-webkit-user-select: none;
	        user-select: none;
}

.erabai-hero-cats-track a.erabai-hero-cat:hover,
.erabai-hero-cats-track a.erabai-hero-cat:focus-visible {
	color: var(--erabai-orange-light);
	background: rgba(248, 96, 8, 0.12);
}

.erabai-hero-cats-track a.erabai-hero-cat:focus-visible {
	outline: 2px solid var(--erabai-cyan);
	outline-offset: 2px;
}

/* 笘� 蜍輔＞縺ｦ縺�ｋ譁�ｭ励�繧ｯ繝ｪ繝�け縺励▼繧峨＞縲�
   繝槭え繧ｹ縺御ｹ励▲縺溘→縺搾ｼ上く繝ｼ繝懊�繝峨〒蛻ｰ驕斐＠縺溘→縺阪�蠢�★豁｢繧√ｋ縲� */
.erabai-hero-cats:hover .erabai-hero-cats-track,
.erabai-hero-cats:focus-within .erabai-hero-cats-track {
	animation-play-state: paused;
}

@keyframes erabai-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* 蜍輔″繧呈ｸ帙ｉ縺呵ｨｭ螳壹�莠ｺ縺ｫ縺ｯ蜍輔°縺輔↑縺� */
@media (prefers-reduced-motion: reduce) {
	.erabai-hero-cats-track { animation: none; }
}

/* 笘� 繧ｿ繝�メ遶ｯ譛ｫ縺ｧ縺ｯ繝帙ヰ繝ｼ縺ｧ豁｢繧√ｉ繧後↑縺�ｼ晏虚縺冗噪繧呈欠縺ｧ霑ｽ縺�％縺ｨ縺ｫ縺ｪ繧九€�
   豬√☆縺ｮ繧偵ｄ繧√※縲∵ｨｪ繧ｹ繝ｯ繧､繝励〒隕九ｋ繝懊ち繝ｳ蛻励↓縺吶ｋ縲�
   �域釜繧願ｿ斐＠縺ｦ遨阪�縺ｨ邵ｦ縺ｫ莨ｸ縺ｳ縺吶℃縲∬ｨ倅ｺ倶ｸ€隕ｧ縺檎判髱｢縺九ｉ謚ｼ縺怜�縺輔ｌ繧九◆繧�ｼ� */
@media (hover: none) {
	.erabai-hero-cats {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}

	.erabai-hero-cats::-webkit-scrollbar {
		display: none;
	}

	.erabai-hero-cats-track {
		width: max-content;
		flex-wrap: nowrap;
		gap: 0.5rem;
		padding: 0 0.75rem;
		animation: none;
	}

	/* 繝ｫ繝ｼ繝礼畑縺ｮ隍�｣ｽ縺ｯ縲∵ｭ｢繧√◆譎らせ縺ｧ驥崎､�↑縺ｮ縺ｧ髫�縺� */
	.erabai-hero-cats-track .is-dup {
		display: none;
	}

	/* 蛹ｺ蛻�ｊ縺ｮ縲�/縲阪�繝懊ち繝ｳ蛻励〒縺ｯ荳崎ｦ� */
	.erabai-hero-cats-track .erabai-hero-sep {
		display: none;
	}

	.erabai-hero-cats-track .erabai-hero-cat {
		padding: 0.6em 1em;
		border: 1px solid rgba(255, 255, 255, 0.22);
		background: rgba(255, 255, 255, 0.05);
		color: rgba(255, 255, 255, 0.85);
		scroll-snap-align: start;
	}
}

/* ------- 8-9. 繧ｹ繝槭�繝医ヵ繧ｩ繝ｳ ------- */
@media screen and (max-width: 480px) {
	.erabai-hero {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.erabai-hero-badge {
		margin-bottom: 1.1em;
	}

	.erabai-hero-lead {
		margin-bottom: 1.5em;
		font-size: 0.9rem;
		line-height: 1.85;
	}

	/* 邵ｦ縺ｫ遨阪�縺ｨ鬮倥￥縺ｪ繧九�縺ｧ縲√％縺薙□縺題ｩｰ繧√ｋ縲�
	   險倅ｺ倶ｸ€隕ｧ繧堤判髱｢螟悶↓謚ｼ縺怜�縺輔↑縺�◆繧√€� */
	.erabai-hero-actions {
		flex-direction: column;
		gap: 0.6rem;
	}

	.erabai-hero-btn {
		width: 100%;
		padding: 0.6em 1.2em;
	}

	.erabai-hero-find {
		margin-top: 1.5rem;
		padding-top: 1.3rem;
	}

	.erabai-hero-cats {
		margin-top: 1.1rem;
	}

	.erabai-hero-search button {
		min-width: 4.5em;
		padding: 0 0.8em;
	}
}