@charset "UTF-8";
/*
 * /ranking-renewal/ 追加セクション (2026-08-01)
 *   1) 総合スコアの考え方  #score-methodology  .earr-sm-*
 *   2) 最下部 CTA                              .earr-cta-*
 *
 * earr.css (91KB) は 1 バイトも触らない。クラスは .earr-sm-* / .earr-cta-* で
 * 閉じてあり、旧 .earr-guide / .pg-btm のセレクタには一切当たらない。
 *
 * セレクタを .earr-root 付きで書いている箇所があるのは、earr.css の要素リセット
 *   .earr-root h2,h3 { margin:0; line-height:1.35 }   (0,1,1)
 *   .earr-root p     { margin:0 }                     (0,1,1)
 *   .earr-root ul    { margin:0; padding:0 }          (0,1,1)
 *   .earr-root a     { color:inherit }                (0,1,1)
 * が単一クラス (0,1,0) に勝つため。過去に .epx ul / .epx svg で 2 度踏んでいる。
 */

/* =========================================================
 * 1) 総合スコアの考え方
 * ======================================================= */

/* 2026-08-04: 器を白から淡いグレーへ。
   白の器に白のカードを載せると、カードの薄いボーダーだけが境界になり、
   4 枚が「並んでいる」ようには見えない (実測のスクリーンショットで確認)。
   器を一段沈めると白いカードが浮き、影を足さずにカードとして読める。
   影はカード側だけが持ち、器は持たない。 */
.earr-sm {
	margin-top: 22px;
	padding: 38px 32px 32px;
	background: #f7f9fc;
	border: 1px solid #edf1f7;
	border-radius: 16px;
	/* 固定ヘッダーぶんの余白は html の scroll-padding-top: 96px だけで確保する。
	   要素側にも scroll-margin-top を持たせると両方が効いて 192px 下に着地した
	   (実測)。「保険で両方書く」は二重に効く指定では誤り。 */
}

.earr-root .earr-sm-t {
	margin: 0;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
	color: var(--earr-ink);
	letter-spacing: .01em;
}

.earr-root .earr-sm-lead {
	margin: 10px auto 0;
	max-width: 720px;
	font-size: 13.5px;
	line-height: 1.85;
	text-align: center;
	color: var(--earr-muted);
}

.earr-root .earr-sm-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* カードの高さを揃える。stretch だけだと「同じ行の中」しか揃わないので、
	   2 列に折り返したとき 1 行目と 2 行目で高さが変わる (実測 768px で
	   161/161/138/138)。auto-rows: 1fr で全行を最も高い行に合わせる。
	   1 列のときは全カードが別々の行になり、揃えても余白が増えるだけなので
	   SP のメディアクエリで auto へ戻す。 */
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.earr-sm-card {
	display: flex;
	flex-direction: column;
	padding: 19px 18px 20px;
	background: #fff;
	border: 1px solid #e8eef6;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.earr-sm-hd {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* アイコンは 4 枚とも別の色にする。
 *
 * 2026-08-04: それまでは 4 枚ともオレンジで、同じカードの中にオレンジが
 * 「アイコン + 指標タグ + 下線バー」と 3 つ重なっていた。4 枚並ぶと画面の
 * 一帯がオレンジの縞になり、どれが要点なのか読めない。色は「意味」ではなく
 * 4 つの軸を見分けるための番号として使うので、彩度を揃えて 4 色に散らす。
 * オレンジはブランド色なので先頭 (収益効率) に残す。 */
/* 2026-08-04: mask から inline SVG (earr-icons.php) へ。
   mask は 1 色でしか塗れないので、線を細くするしかなく画面の中で痩せて見えた。
   svg なら「薄い面 + 濃い線」の 2 階調で描ける。呼び出し側が渡すのは color
   だけで、面は svg 内で opacity を落として同じ色から作る。 */
.earr-sm-ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--earr-sm-ico-bg, #fff4ef);
	color: var(--earr-sm-ico-fg, #e8541c);
}

.earr-sm-ico svg {
	display: block;
	width: 24px;
	height: 24px;
}

.earr-sm-ico-trend {
	--earr-sm-ico-bg: #fff1e9;
	--earr-sm-ico-fg: #e8541c;
}

.earr-sm-ico-shield {
	--earr-sm-ico-bg: #eaf1ff;
	--earr-sm-ico-fg: #2563eb;
}

.earr-sm-ico-clock {
	--earr-sm-ico-bg: #e8fbf2;
	--earr-sm-ico-fg: #059669;
}

.earr-sm-ico-star {
	--earr-sm-ico-bg: #f2efff;
	--earr-sm-ico-fg: #7c3aed;
}

.earr-root .earr-sm-name {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.35;
	color: var(--earr-ink);
}

/* 項目名と同じ行の右側。実際の計算式に配点の百分率は存在しない (係数の掛け算)
   ため、ここには比重ではなく「その軸が見ている実際の指標」を出す。
   2026-08-04: オレンジのピルから無彩色へ。ここは見出しの補足であって
   押せるものではないので、色を持たせると押せそうに見えるうえ、
   アイコンのオレンジと二重になる。 */
.earr-sm-tag {
	flex: 0 0 auto;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	color: #64748b;
	background: #f1f5f9;
	border: 1px solid #e6ecf3;
	border-radius: 6px;
	padding: 5px 8px;
	white-space: nowrap;
}

/* 下線バー (.earr-sm-bar) は 2026-08-04 に廃止した。
   4 枚とも同じ長さの飾りで情報を持たず、オレンジが一帯に並ぶ原因だった。
   HTML 側 (earr-panels.php) の span も同時に外してある。 */

.earr-root .earr-sm-d {
	margin: 13px 0 0;
	font-size: 12.5px;
	line-height: 1.85;
	color: var(--earr-muted);
}

/* 注記と「計算方法の詳細を見る」は中央に 1 列で置く。
   2026-08-04: 左に注記・右にオレンジ枠のボタン、という左右振り分けをやめた。
   ボタンが枠と色を持つと、セクションの中で最も強い要素が「補足の導線」に
   なってしまう (本命はカード 4 枚の中身)。文字リンクへ落として重心を戻す。 */
.earr-sm-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #e8eef6;
}

.earr-root .earr-sm-note {
	margin: 0;
	max-width: 760px;
	font-size: 11.5px;
	line-height: 1.8;
	text-align: center;
	color: var(--earr-muted);
}

.earr-sm-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 2px 3px;
	font-size: 13px;
	font-weight: 700;
	color: #c2410c;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(194, 65, 12, .35);
	border-radius: 0;
	cursor: pointer;
}

.earr-sm-more:hover,
.earr-sm-more:focus-visible {
	background: none;
	border-bottom-color: #a8380a;
	color: #a8380a;
}

.earr-sm-more:focus-visible {
	outline: 2px solid var(--earr-orange-dk);
	outline-offset: 3px;
}

/* --------- ランキング一覧の「総合スコアとは？」 ---------
   .earr-tabnote は space-between の 2 要素前提だったので、説明文を伸ばして
   件数とアンカーを右側に寄せる (そうしないと件数が中央に取り残される)。 */

.earr-root .earr-tabnote > p {
	flex: 1 1 240px;
}

.earr-root .earr-scorehelp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: #c2410c;
	background: #fff;
	border: 1px solid #ffd0ba;
	border-radius: 999px;
	white-space: nowrap;
}

.earr-root .earr-scorehelp:hover,
.earr-root .earr-scorehelp:focus-visible {
	color: #a8380a;
	background: var(--earr-orange-sf);
	border-color: var(--earr-orange);
}

.earr-root .earr-scorehelp:focus-visible {
	outline: 2px solid var(--earr-orange-dk);
	outline-offset: 2px;
}

.earr-scorehelp::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--earr-i-help) no-repeat center / contain;
	mask: var(--earr-i-help) no-repeat center / contain;
}

/* =========================================================
 * 2) 最下部 CTA
 * ======================================================= */

.earr-cta {
	max-width: var(--earr-page);
	margin: 0 auto;
	/* フッターとの間を明確に空ける。上は直前のセクションとの間。 */
	padding: 44px var(--earr-gutter) 72px;
}

.earr-cta-card {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	padding: 56px 40px 58px;
	background:
		radial-gradient(ellipse 60% 90% at 18% 110%, rgba(255, 107, 53, .16), transparent 62%),
		radial-gradient(ellipse 55% 90% at 84% -10%, rgba(56, 122, 223, .16), transparent 60%),
		linear-gradient(160deg, #14203a 0%, #0d1526 52%, #070b14 100%);
	border: 1px solid rgba(255, 255, 255, .08);
}

/* 背景装飾。すべて aria-hidden の 1 枚に閉じ込め、本文レイヤーより下に置く。 */
.earr-cta-deco {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

/* 見出しの真後ろに実体が来ないよう、下 62% に寄せる。 */
.earr-cta-candles {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 68%;
	opacity: .32;
}

.earr-cta-dots {
	position: absolute;
	bottom: 0;
	width: 260px;
	height: 108px;
	background-image: radial-gradient(rgba(255, 255, 255, .34) 1.1px, transparent 1.1px);
	background-size: 13px 13px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 108' preserveAspectRatio='none'%3E%3Cpath d='M0 60c26-30 52-30 78 0s52 30 78 0 52-30 78 0v48H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 108' preserveAspectRatio='none'%3E%3Cpath d='M0 60c26-30 52-30 78 0s52 30 78 0 52-30 78 0v48H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

.earr-cta-dots-l {
	left: 0;
}

.earr-cta-dots-r {
	right: 0;
	transform: scaleX(-1);
}

.earr-cta-body {
	position: relative;
	z-index: 1;
	text-align: center;
}

.earr-root .earr-cta-t {
	margin: 0;
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .01em;
	color: #fff;
}

.earr-root .earr-cta-d {
	margin: 14px auto 0;
	max-width: 620px;
	font-size: 14px;
	line-height: 1.9;
	color: #cbd5e1;
}

.earr-cta-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 30px;
}

/* 19px/700 は WCAG の「大きい文字」(18.66px 以上の太字) の下限。
   白 × #e8541c は 3.67:1 なので、これを下回った瞬間に必要比が 4.5 へ上がって落ちる。 */
.earr-root .earr-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 236px;
	padding: 15px 28px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	border-radius: 10px;
	border: 1px solid transparent;
	transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.earr-cta-btn svg {
	flex: 0 0 auto;
	display: block;
}

.earr-root .earr-cta-btn-main {
	color: #fff;
	background: var(--earr-orange-dk);
	border-color: var(--earr-orange-dk);
}

/* テーマの a:hover が色を青に変えるため、hover と focus の両方で明示する。 */
.earr-root .earr-cta-btn-main:hover,
.earr-root .earr-cta-btn-main:focus-visible {
	color: #fff;
	background: #d14713;
	border-color: #d14713;
	transform: translateY(-1px);
}

.earr-root .earr-cta-btn-sub {
	color: #fff;
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .55);
}

.earr-root .earr-cta-btn-sub:hover,
.earr-root .earr-cta-btn-sub:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border-color: #fff;
	transform: translateY(-1px);
}

.earr-root .earr-cta-btn:focus-visible {
	outline: 3px solid #ffb08a;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.earr-root .earr-cta-btn {
		transition: none;
	}

	.earr-root .earr-cta-btn:hover,
	.earr-root .earr-cta-btn:focus-visible {
		transform: none;
	}
}

/* =========================================================
 * アンカー先へのスムーズスクロール
 *
 * テーマが body{overflow-x:hidden} を当てるためスクロールポートが body になり、
 * 対象要素側の scroll-margin-top だけでは効かない (hero-v2.css の実測)。
 * スクロールポート側の scroll-padding-top で固定ヘッダーぶんを確保する。
 * hero-v2.css にも同じ指定があるが、あちらは撤去候補なのでここで自足させる。
 * ======================================================= */
html {
	scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* =========================================================
 * タブレット
 * ======================================================= */
@media (max-width: 1100px) {
	.earr-root .earr-sm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.earr-sm {
		padding: 30px 24px 26px;
	}

	.earr-cta-card {
		padding: 48px 32px 50px;
	}
}

/* =========================================================
 * スマホ
 * ======================================================= */
@media (max-width: 720px) {
	.earr-sm {
		margin-top: 18px;
		padding: 26px 16px 22px;
		border-radius: 12px;
	}

	.earr-root .earr-sm-t {
		font-size: 19px;
	}

	.earr-root .earr-sm-lead {
		font-size: 13px;
		text-align: left;
	}

	.earr-root .earr-sm-grid {
		grid-template-columns: minmax(0, 1fr);
		/* 1 列では 1 枚 = 1 行なので、揃えると説明文の短いカードに空白が付くだけ。 */
		grid-auto-rows: auto;
		gap: 12px;
		margin-top: 20px;
	}

	.earr-sm-foot {
		gap: 14px;
	}

	.earr-sm-more {
		width: 100%;
		justify-content: center;
	}

	.earr-root .earr-scorehelp {
		font-size: 11.5px;
		padding: 6px 11px;
	}

	.earr-cta {
		padding: 32px var(--earr-gutter) 56px;
	}

	.earr-cta-card {
		padding: 40px 20px 42px;
		border-radius: 16px;
	}

	.earr-root .earr-cta-d {
		max-width: 30em;
		font-size: 13.5px;
	}

	.earr-cta-btns {
		flex-direction: column;
		gap: 12px;
		margin-top: 26px;
	}

	.earr-root .earr-cta-btn {
		width: 100%;
		min-width: 0;
	}

	/* SP は装飾を減らす。ローソク足を薄く、ドットは片側だけ残す。 */
	.earr-cta-candles {
		opacity: .18;
	}

	.earr-cta-dots {
		width: 168px;
		height: 74px;
	}

	.earr-cta-dots-r {
		display: none;
	}
}

@media (max-width: 400px) {
	.earr-root .earr-cta-btn {
		font-size: 19px;
		padding: 14px 16px;
	}
}

/* =========================================================
 * 3) 無料で試せる訴求  #free-trial  .earr-fr-*
 *
 * ランキングを見終えた直後の「安心材料」なので、ヒーロー (濃紺) や最下部 CTA
 * (ダークネイビー) より主張を抑える。淡いオレンジのグラデーション + 弱い影で、
 * 濃い塗りや強い影は使わない。
 *
 * 3 項目は「独立した強いカード」にしない (枠と影を持たせない)。1 枚のセクション
 * の中に余白だけで並べる。区切りは 40px の列 gap で取り、縦線は引かない
 * (採用デザインにも縦線は無い)。
 * ======================================================= */

.earr-fr {
	position: relative;
	overflow: hidden;
	margin-top: 22px;
	padding: 38px 32px 34px;
	background:
		radial-gradient(ellipse 76% 130% at 50% -18%, rgba(255, 255, 255, .92), transparent 68%),
		linear-gradient(180deg, #fff 0%, #fffaf6 44%, #fff3ea 100%);
	border: 1px solid #ffe2d2;
	border-radius: 18px;
	/* 影は弱く柔らかく。最下部 CTA より前に出ないようにする。
	   2026-08-03: 1 枚 (0 1px 3px) だと縁が沈んで面が平らに見えたので、接地の
	   1px と広く薄い落ち影の 2 枚に分けた。落ち影は地色に合わせてオレンジ寄りに
	   する (灰色の影は淡いオレンジ地の上で濁って見える)。濃さは上げていない。 */
	box-shadow:
		0 1px 2px rgba(15, 23, 42, .03),
		0 16px 34px -20px rgba(203, 92, 40, .22);

	/* 淡いオレンジ地 (#fff3ea) の上でも本文が 4.5:1 を満たす灰色。
	   var(--earr-muted) (#64748b) は #fff3ea 上で 4.37:1 で足りない (実測計算)。 */
	--earr-fr-muted: #5a6b80;

	/* アイコンの data URI 変数 (--earr-fr-i-gift / --earr-fr-i-chart) は
	   2026-08-04 に廃止。図形は inc/earr-icons.php の inline SVG が持つ。 */
}

/* 背景装飾 (.earr-fr-deco / .earr-fr-candles) は 2026-08-04 に廃止。
   3 項目に白いカードを持たせたので、うっすら乗ったローソク足がカードの背後で
   途切れて散らかって見える。HTML 側 (earr-panels.php) の svg も外してある。 */

.earr-fr-body {
	position: relative;
	text-align: center;
}

.earr-root .earr-fr-t {
	margin: 0;
	font-size: clamp(20px, 2.2vw, 27px);
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: .01em;
	text-align: center;
	color: var(--earr-ink);
}

/* 「無料」だけオレンジ。20px 以上の太字 = WCAG の大きい文字なので必要比は 3:1、
   #e8541c は白地で 3.67:1 を満たす。文字を小さくするとここが落ちる。 */
.earr-root .earr-fr-hl {
	font-style: normal;
	color: var(--earr-orange-dk);
}

.earr-root .earr-fr-lead {
	margin: 12px auto 0;
	max-width: 660px;
	font-size: 14px;
	line-height: 1.85;
	text-align: center;
	color: var(--earr-fr-muted);
}

/* 3 枚のカードと CTA を 1 本の行に置く。
 *
 * 2026-08-04: それまでは「3 項目を横に並べ、その下の中央に大きなボタン」で、
 * セクションの高さが 456px あった (実測)。項目とボタンが縦に積まれるぶん
 * 視線が 2 回下りることになり、間延びして見える。同じ行に置けば
 * 「3 つの安心材料 → だから試せる」が 1 度の視線移動で読める。
 * CTA 列は固定幅にして、カード側だけが画面幅に応じて縮むようにする。 */
.earr-fr-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 236px;
	align-items: stretch;
	gap: 16px;
	margin: 26px 0 0;
}

.earr-root .earr-fr-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* 3 枚の高さを揃える。1 列に落ちたときは揃えても余白が増えるだけなので、
	   SP のメディアクエリで auto へ戻す。 */
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 器を持たせる。
   2026-08-04 まではカード無しで余白だけで区切っていたが、地色が淡いオレンジ
   なので項目の輪郭が出ず、文字が背景に散っているように見えていた。
   白いカードにすると地の上で 3 つの塊として読める。影は最下部 CTA より
   前に出ないよう 1 枚だけの弱いものにする。 */
.earr-fr-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 15px;
	background: #fff;
	border: 1px solid #ffe4d6;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	text-align: left;
}

.earr-fr-txt {
	min-width: 0;
}

/* 丸いアイコン。カードの中に入ったので、器としての作り込み (縦グラデ・落ち影・
 * 外周リング) はやめて、薄いオレンジの円 + 線画だけにする。
 * 2026-08-03 にここを厚くしたのは「カードが無い並びでは項目の頭が弱い」ため
 * だったが、カードを持たせた今は重ねると影が二重になる。 */
.earr-fr-ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	/* 白いカードの上に置くので、地がオレンジだった頃 (#fff4ec) のままだと
	   円の輪郭がほとんど出ない。1 段濃くして円として読めるところまで上げる。 */
	background: #ffeade;
	color: var(--earr-orange-dk);
}

.earr-fr-ico svg {
	display: block;
	width: 26px;
	height: 26px;
}

.earr-root .earr-fr-name {
	margin: 1px 0 0;
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--earr-ink);
}

.earr-root .earr-fr-d {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.8;
	text-align: left;
	color: var(--earr-fr-muted);
	/* 最終行に 1〜2 文字だけ残るのを避ける。
	   2026-08-03: pretty のままだと日本語では効かず、実測で
	   「…気になるEAを実際に試せ / ます。」と 2 行目が 3 文字だけになっていた
	   (pretty は単語境界で最終行を調整する規則で、単語間スペースの無い日本語には
	   ほぼ効かない)。balance は行数を保ったまま各行の長さを揃えるので、
	   短い 2〜3 行の説明文にはこちらが効く。未対応ブラウザは無視するだけ。 */
	text-wrap: balance;
}

/* 行の 4 列目。
   ボタンをカードの高さいっぱいに伸ばすと、面積だけで最下部 CTA より強くなり
   「ランキングの補助」という位置づけを超える (実測: 高さ 165px の橙の塊)。
   高さは中身に決めさせ、列の中で縦中央に置く。 */
.earr-fr-act {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
}

/* 最下部 CTA の主ボタン (19px / min-width 236px) より一段控えめにする。
   17px は WCAG の「大きい文字」に届かないので必要比は 4.5:1。
   白 × #cc4413 = 4.77:1。ここを --earr-orange-dk (#e8541c) にすると
   3.67:1 まで落ちて基準を割る。 */
.earr-root .earr-fr-btn {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 15px 20px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	/* 2026-08-03: 立体感は「地色を明るくする」のではなく、上辺 1px の内側
	   ハイライトと落ち影で出す。
	   一度 linear-gradient(#d94a15 -> #cc4413) にしたが、上端 #d94a15 は白文字で
	   4.25:1 しかなく 4.5:1 を割っていた (17px 太字は WCAG の「大きい文字」=
	   18.66px 太字に届かないので 4.5:1 が要る)。inset の白ハイライトは 1px の線で
	   文字の背面には広がらないため、地色は #cc4413 (4.77:1) のまま保てる。 */
	background-color: #cc4413;
	border: 1px solid #c23f10;
	border-radius: 10px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .2),
		0 6px 16px -7px rgba(204, 68, 19, .5);
	transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.earr-fr-btn svg {
	flex: 0 0 auto;
	display: block;
}

/* テーマの a:hover が色を青に変えるため、hover と focus の両方で明示する。 */
.earr-root .earr-fr-btn:hover,
.earr-root .earr-fr-btn:focus-visible {
	color: #fff;
	background-color: #b03a0f;
	border-color: #a4360e;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .2),
		0 9px 20px -8px rgba(176, 58, 15, .55);
	transform: translateY(-1px);
}

.earr-root .earr-fr-btn:focus-visible {
	outline: 3px solid var(--earr-orange-dk);
	outline-offset: 3px;
}

.earr-root .earr-fr-note {
	margin: 18px auto 0;
	max-width: 760px;
	font-size: 11.5px;
	line-height: 1.8;
	text-align: center;
	color: var(--earr-fr-muted);
}

@media (prefers-reduced-motion: reduce) {
	.earr-root .earr-fr-btn {
		transition: none;
	}

	.earr-root .earr-fr-btn:hover,
	.earr-root .earr-fr-btn:focus-visible {
		transform: none;
	}
}

/* --------- タブレット --------- */
@media (max-width: 1100px) {
	.earr-fr {
		padding: 32px 24px 30px;
	}

	/* CTA 列を残したままだとカード 1 枚が 200px を切って説明が 4 行になる。
	   カード 3 枚を 1 行、CTA をその下の 1 行に分ける。 */
	.earr-fr-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.earr-fr-act {
		justify-content: center;
		max-width: 320px;
		margin: 0 auto;
	}

	.earr-root .earr-fr-btn {
		flex: 0 0 auto;
	}
}

/* --------- スマホ --------- */
@media (max-width: 720px) {
	.earr-fr {
		margin-top: 18px;
		padding: 28px 16px 26px;
		border-radius: 14px;
	}

	.earr-root .earr-fr-t {
		font-size: 20px;
	}

	.earr-root .earr-fr-lead {
		font-size: 13px;
		line-height: 1.8;
	}

	.earr-fr-cols {
		margin-top: 22px;
		gap: 16px;
	}

	.earr-root .earr-fr-grid {
		grid-template-columns: minmax(0, 1fr);
		/* 1 列では 1 枚 = 1 行なので、揃えても短い項目に余白が付くだけ。 */
		grid-auto-rows: auto;
		gap: 10px;
		margin-top: 0;
	}

	.earr-fr-item {
		padding: 14px 13px;
	}

	.earr-fr-ico {
		width: 38px;
		height: 38px;
	}

	.earr-fr-ico svg {
		width: 21px;
		height: 21px;
	}

	.earr-fr-act {
		max-width: none;
	}

	.earr-root .earr-fr-btn {
		width: 100%;
	}

	.earr-root .earr-fr-note {
		font-size: 11px;
	}
}

/* ==========================================================================
 * 3) 総合スコアの算出方法モーダル 本文 (2026-08-02)
 *    #earr-guide-modal .earr-modal-body.earr-prose の中身。
 *    数式は等幅で組む。earr.css は 1 バイトも触らない。
 * ======================================================================== */

.earr-prose h4 {
	margin: 20px 0 6px;
	color: var(--earr-ink);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.6;
}

.earr-prose > *:first-child {
	margin-top: 0;
}

.earr-prose p {
	margin: 0 0 10px;
}

/* earr.css の要素リセット `.earr-root ul { list-style:none; padding:0 }` が (0,1,1) で
 * 効いているので、ここは必ず (0,2,0) 以上で書く。`.earr-fx-vars` 単独だと中黒が出ない
 * (実測: listStyleType=none / paddingLeft=0px)。 */
.earr-root .earr-fx-vars {
	margin: 0 0 10px;
	padding-left: 1.35em;
	list-style: disc;
}

.earr-root .earr-fx-vars li {
	line-height: 1.9;
	list-style: disc;
}

.earr-fx {
	margin: 0 0 8px;
	padding: 10px 12px;
	border-left: 3px solid var(--earr-orange);
	border-radius: 0 8px 8px 0;
	background: var(--earr-line-2);
	color: var(--earr-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
	font-size: 12.5px;
	line-height: 1.9;
	white-space: nowrap;
	overflow-x: auto;
}

.earr-fx-note {
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--earr-line);
	color: var(--earr-muted);
	font-size: 12px;
	line-height: 1.9;
}

/* 狭い画面では横スクロールに気付けないので折り返しへ切り替える
 * (式には空白を入れてあるので演算子の途中では切れない)。 */
@media (max-width: 520px) {
	.earr-fx {
		white-space: normal;
		font-size: 12px;
	}
}

/* =========================================================
 * 7) カテゴリ導線  #ea-categories  .earr-cat-*   (2026-08-04 再設計)
 *
 * 中身は [earr_categories] (inc/earr-categories.php) が出す自前マークアップ。
 * WooCommerce の [product_categories] は使っていないので、ul.products /
 * li.product-category / woocommerce-loop-category__title を打ち消していた
 * 旧定義は丸ごと不要になった (詳細度負けの回避もここでは要らない)。
 *
 * それでも .earr-root から書いている箇所があるのは、earr.css の要素リセット
 *   .earr-root ul { margin:0; padding:0 }   (0,1,1)
 *   .earr-root a  { color:inherit }         (0,1,1)
 * が単一クラス (0,1,0) に勝つため。
 *
 * ■ 4 列 × 2 段にした理由
 * カテゴリは 8 つある。6 列 1 段だと 2 枚が次の段に落ちて右側が空き、
 * 3 列 × 2 段だと 8 枚が収まらない。4 × 2 が唯一きれいに埋まる割り方。
 *
 * ■ 高さを揃える方法
 * 説明文が 1 行のカードと 2 行のカードが混ざるので、カードを縦の flex にして
 * 下段 (.earr-cat-foot) を margin-top:auto で底へ寄せる。さらに段が変わっても
 * 高さが揃うよう grid-auto-rows: 1fr を当てる (.earr-sm-grid と同じ手法。
 * stretch だけだと「同じ行の中」しか揃わない)。
 * ======================================================= */
.earr-cat {
	margin-top: 22px;
	padding: 38px 32px 34px;
	background: #fff;
	border: 1px solid var(--earr-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.earr-root .earr-cat-t {
	margin: 0 0 26px;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
	color: var(--earr-ink);
	letter-spacing: .01em;
}

.earr-root .earr-cat-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.earr-root .earr-cat-list .earr-cat-item {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* カード全体がリンク。どこを押しても飛べるようにする。 */
.earr-root .earr-cat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 24px 18px 18px;
	background: #fff;
	border: 1px solid var(--earr-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	color: var(--earr-ink);
	text-align: center;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.earr-root .earr-cat-card:hover,
.earr-root .earr-cat-card:focus-visible {
	border-color: #ffd0ba;
	box-shadow: 0 12px 26px -14px rgba(203, 92, 40, .38);
	transform: translateY(-3px);
}

.earr-root .earr-cat-card:focus-visible {
	outline: 2px solid var(--earr-orange);
	outline-offset: 2px;
}

/* アイコンは inline SVG (inc/earr-icons.php)。図形は earr_icon() が持ち、
   ここは大きさと色だけを決める (色は currentColor 経由で面にも線にも届く)。
 *
 * 2026-08-04: 薄いオレンジの角丸の器をやめ、アイコン単体を大きくした。
 * 46px の器に 26px の図形を入れていたので、カード幅 295px に対して図形は
 * 8.8% しかなく、カードの中で頭が弱かった (採用デザインはカード幅の 25%
 * 前後を図形が占めている)。器を外したぶんをそのまま図形に回す。
 * 「総合スコアの考え方」は 4 枚が横に並ぶ小さいカードで、器がないと
 * 見出しとの区切りが消えるため、あちらは器を残してある。 */
.earr-cat-ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--earr-orange-dk);
}

.earr-cat-ico svg {
	display: block;
	width: 40px;
	height: 40px;
}

.earr-cat-name {
	display: block;
	margin-top: 13px;
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--earr-ink);
	letter-spacing: .01em;
}

/* 説明。flex:1 で伸ばし、下段を底へ押し出す。 */
.earr-cat-d {
	display: block;
	flex: 1 1 auto;
	margin-top: 8px;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--earr-muted);
}

.earr-cat-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
	padding-top: 13px;
	border-top: 1px solid #f1f5f9;
}

.earr-cat-count {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--earr-muted);
	white-space: nowrap;
}

.earr-cat-go {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--earr-orange-dk);
	white-space: nowrap;
}

.earr-cat-arw {
	transition: transform .18s ease;
}

.earr-root .earr-cat-card:hover .earr-cat-arw,
.earr-root .earr-cat-card:focus-visible .earr-cat-arw {
	transform: translateX(3px);
}

/* カテゴリは 8 つなので、割り切れる 4 / 2 / 1 列だけを使う。
   3 列を挟むと最終行に 2 枚だけ残って右側が空く (実測 900px で 3 + 3 + 2)。 */
@media (max-width: 900px) {
	.earr-cat {
		padding: 30px 22px 28px;
	}

	.earr-root .earr-cat-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (max-width: 720px) {
	.earr-cat {
		padding: 24px 14px 22px;
		border-radius: 12px;
	}

	.earr-root .earr-cat-t {
		margin-bottom: 18px;
		font-size: 18px;
	}

	.earr-root .earr-cat-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.earr-root .earr-cat-card {
		padding: 18px 12px 14px;
		border-radius: 12px;
	}

	.earr-cat-ico {
		width: 38px;
		height: 38px;
	}

	.earr-cat-ico svg {
		width: 34px;
		height: 34px;
	}

	.earr-cat-name {
		margin-top: 11px;
		font-size: 13.5px;
	}

	.earr-cat-d {
		margin-top: 6px;
		font-size: 11.5px;
		line-height: 1.7;
	}

	/* 2 列だとカード幅が 160px 前後になり、件数とリンクを横に並べると
	   どちらかが折り返して行数が段ごとに変わる。縦に積んで揃える。 */
	.earr-cat-foot {
		flex-direction: column;
		gap: 5px;
		margin-top: 12px;
		padding-top: 10px;
	}

	.earr-cat-count {
		font-size: 11px;
	}

	.earr-cat-go {
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.earr-root .earr-cat-card,
	.earr-cat-arw {
		transition: none;
	}

	.earr-root .earr-cat-card:hover,
	.earr-root .earr-cat-card:focus-visible {
		transform: none;
	}

	.earr-root .earr-cat-card:hover .earr-cat-arw,
	.earr-root .earr-cat-card:focus-visible .earr-cat-arw {
		transform: none;
	}
}

/* =========================================================
 * 8) カテゴリへのテキストリンク列  .earr-catlinks   (2026-08-04)
 *
 * カテゴリカード ([earr_categories]) を EAコレクション (.rcl) へ差し替えた結果、
 * 8 カテゴリへの内部リンクが /ranking/ から全て消えた。カードで戻すと .rcl と
 * 同じ役割の面が縦に 2 つ並ぶので、リンクだけを .rcl の直下に短い列で置き直す。
 *
 * 器を持たせない (白カードにしない) のは、上の .rcl が強い面を持っているため。
 * ここに枠を足すと「もう 1 つのセクション」に見えて、消したはずのカードと
 * 同じ場所の取り方に戻る。地 (#f7f9fc) の上に文字だけを流す。
 *
 * .earr-root から書いているのは earr.css の要素リセット
 *   .earr-root ul { margin:0; padding:0 } / .earr-root a { color:inherit }
 * が単一クラス (0,1,0) に勝つため (7) と同じ理由)。
 * ======================================================= */
.earr-catlinks {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 14px;
	margin: 14px 0 0;
	padding: 0 4px;
}

.earr-catlinks-lead {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--earr-muted);
	letter-spacing: .02em;
	white-space: nowrap;
}

.earr-root .earr-catlinks-list {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.earr-root .earr-catlinks-list a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--earr-ink);
	background: #fff;
	border: 1px solid var(--earr-line);
	border-radius: 999px;
	text-decoration: none;
	transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.earr-root .earr-catlinks-list a:hover,
.earr-root .earr-catlinks-list a:focus-visible {
	color: var(--earr-orange);
	background: #fff;
	border-color: var(--earr-orange);
}

/* 件数は補助情報なので、数字だけ 1 段落とす (名前と同じ強さで並べない)。 */
.earr-catlinks-c {
	font-size: 11px;
	font-weight: 700;
	color: var(--earr-muted);
	font-variant-numeric: tabular-nums;
}

.earr-root .earr-catlinks-list a:hover .earr-catlinks-c,
.earr-root .earr-catlinks-list a:focus-visible .earr-catlinks-c {
	color: var(--earr-orange);
}

@media (max-width: 700px) {

	.earr-catlinks {
		gap: 7px 10px;
		margin-top: 12px;
	}

	.earr-catlinks-lead {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.earr-root .earr-catlinks-list a {
		transition: none;
	}
}

/* =========================================================
 * 9) ページの地を一段沈める  (2026-08-04)
 *
 * それまでは本文エリアの地が白で、その上に白いカードが載っていた。
 * 境界はカードの薄いボーダーだけなので、ページを引いて見ると
 * ヒーローの下から最下部 CTA までがひとつの白い面に見える
 * (実測: 全高 6384px のうち色を持つのは 4 か所だけで、ランキング表の
 * 2247px は地も器も白)。
 *
 * 地を淡いグレーへ下げると、白い器 (フィルタ・ランキング表・カード) が
 * そのまま浮く。装飾を足していないので情報量は変わらない。
 * 色は「総合スコアの考え方」(.earr-sm) の器と同じ #f7f9fc に揃えてあり、
 * あちらは器と地が同色になって境界が消え、白いカード 4 枚だけが残る。
 *
 * ページの地そのもの (.pg-content) は post_content 側の <style> が持つ。
 * ここで面倒を見るのは「地の上に置かれて溶けてしまう器」だけ。
 * ======================================================= */

/* フィルタ。earr.css では「囲いが無い」前提で、左端をランキング表と
   揃えるために内側 padding を 0 にしてある (earr.css:1133 のコメント)。
   白いカードにするので内側の余白を戻し、下線 1 本ではなく全周の枠にする。 */
.earr-root .earr-controls {
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--earr-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.earr-root .earr-controls-top {
	padding: 0 0 12px;
}

/* フィルタが独立したカードになったぶん、表との間に余白を取る。 */
.earr-root .earr-table-wrap {
	margin-top: 14px;
}

@media (max-width: 720px) {
	.earr-root .earr-controls {
		padding: 13px 13px;
		border-radius: 12px;
	}
}

/* FAQ。本文 (.pg-content) の外にあるので、地を別に指定しないとここだけ白へ
   戻り、下半分がまた平らになる。中のアコーディオン (.ear-faq-item) は
   もともと白なので、地を本文と同じ色にするだけで浮く。
   この要素はテーマ側の hook が出しており .earr-root の中ではないため、
   セレクタに .earr-root は付けない (/ranking/ 系でしか読まれない CSS なので
   他ページの FAQ には当たらない)。 */
#ear-faq-section {
	padding-top: 44px;
	background: #f7f9fc;
}

/* 最下部 CTA の周りは白のまま残す。CTA 自体がダークネイビーの濃いカードで、
   白地の方がコントラストが出る (地を沈めると濃紺と灰色が近づいて鈍る)。 */

/* ランキング一覧の見出し (2026-08-04 新設)。
   このページの主役である一覧に見出しが無く、H1 の次の H2 が
   「総合スコアの考え方」だった。他セクションの見出しは中央揃えだが、
   ここは表とフィルタの頭なので左に置いて一覧の始まりを示す。 */
.earr-root .earr-rank-t {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--earr-ink);
	letter-spacing: .01em;
}

@media (max-width: 720px) {
	.earr-root .earr-rank-t {
		margin-bottom: 11px;
		font-size: 17px;
	}
}

/* =========================================================
 * 10) 見出しの書体をこのページだけ本文に揃える  (2026-08-04)
 *
 * earr.css / hero3.css / rcl.css から Noto Sans JP の指定を外しても、
 * woff2 は 3 ファイル 187KB のまま落ちてきていた。残っていたのは見出し 22 個で、
 * 当てているのは Astra がヘッダに出すインライン <style> の
 *   h1, h2, h3, h4, h5, h6, .entry-content :where(h1..h6), .site-title
 * ＝ サイト全体のタイポグラフィ設定だった (このページ固有の CSS ではない)。
 *
 * 見出しが 1 つでも Noto Sans JP のままだと woff2 は落ちてくるので、
 * 「見た目だけ変わって転送量は減らない」状態になる。ここで上書きして、
 * このページからは Noto Sans JP を使う要素を 0 にする。
 *
 * 副作用: /ranking/ の見出しだけ他ページと書体が変わる。サイト全体で揃えるなら
 * Astra 側のタイポグラフィ設定を変えることになるが、それは全ページに効くので
 * 別の判断が要る。
 *
 * インライン <style> のセレクタは (0,0,1) なので、.earr-root を前置すれば
 * (0,1,1) で勝つ。!important は使わない。
 * ======================================================= */
.earr-root h1,
.earr-root h2,
.earr-root h3,
.earr-root h4,
.rcl h1,
.rcl h2,
.rcl h3,
.rcl h4,
#ear-faq-section h2,
#ear-faq-section h3 {
	font-family: inherit;
}

/*
 * 共通フッターも同じ扱いにする。
 *
 * 見出しを直したあとも nsjp-h000.woff2 (56KB) が落ちてきていた。
 * 原因は plugins/header_menu/assets/css/systre-footer.css の
 *   .systre-footer { font-family: Inter, "Noto Sans JP", sans-serif }
 * で、Inter に日本語のグリフが無いため日本語だけ Noto Sans JP へ落ちる。
 * 「font-family の先頭が Noto Sans JP か」で数えていると 0 件に見えるが、
 * 実際に描画に使われるのは 2 番目以降でも同じこと (実測 76 要素)。
 *
 * Inter は英数字のために先頭へ残し、日本語は body と同じシステムフォント
 * (Bootstrap が body に当てているスタック) へ落とす。
 * この CSS は /ranking/ と /ranking-renewal/ でしか読まれないので、
 * 他ページのフッターは従来どおり。
 */
body .systre-footer {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}