@charset "UTF-8";
/*
 * /ranking-renewal/ ヒーロー v3 (順位カード版・2026-08-04)
 *
 * 左右 2 カラム。左は文言 + CTA、右は上位 3 件を重ねた順位カード。
 * 2026-08-04 に (1) 背景を用意された 1 枚の画像に (2) 右カラムを
 * 「白いカード 1 枚の中のミニカード + 1 位のチャート」から「重なる順位カード
 * 3 枚」に作り替えた。左カラムの文言・並びは 2026-08-02 のまま変えていない。
 * earr.css とはクラスが重ならない (.earr-h3-*) ので、ランキング一覧以下には
 * 一切干渉しない。変数 (--earr-*) は .earr-root のものをそのまま使う。
 *
 * 色の基準:
 *   - ブランドの #ff6b35 は白地で 2.84:1。通常文字には使わず、枠・地色・
 *     グラフの線 (=文字ではない) だけに使う。
 *   - オレンジの文字は #c2410c (4.9:1)、主 CTA は白文字 × #e8541c (3.67:1) を
 *     19px 太字 =「大きい文字」(3:1) に乗せる。
 *   - 緑の強調は #15803d (5.0:1)。#16a34a は 3.05:1 で通常文字には足りない。
 */

/* =========================================================
 * セクション
 * ======================================================= */
.earr-h3 {
	position: relative;
	/* 装飾が器の外に出ないよう必ず切る (横スクロールを作らないため)。 */
	overflow: hidden;
	/* 1 位カードが上下に 26/18px はみ出すぶんも含めて、器の中で余白を広めに取る
	   (旧版は 56/52px で、はみ出しの無い作りだった)。 */
	padding: 74px 0 66px;
	/* 背景は用意された 1 枚 (薄いオレンジ〜クリームのグラデーション + 右側の
	   波・光・粒子・01/02/03 の数字)。絵として意味のある部分はすべて右側に
	   あるので、右端を基準に cover で敷く = 幅が狭まったときに外れるのは左の
	   無地側だけになる。画像が読めなかったときのために地色も持たせる
	   (画像の左端とほぼ同じ色なので、抜けても文字のコントラストは変わらない)。 */
	background-color: #fdf3e9;
	background-image: url("hero-rank-bg.webp");
	background-repeat: no-repeat;
	/* 縦は 50% では上が切れて 01/02/03 の数字が画面の外に出る (実測: 器 547px に
	   対し cover 後の絵は 810px で上下 131px ずつ落ちる)。数字と光の帯が残る
	   28% を基準にする。 */
	background-position: 100% 28%;
	background-size: cover;
}

/* 左のテキストに掛ける薄い白の膜。画像の左半分は淡いクリームなので黒文字でも
   読めるが、日により背景の明るさは変わらない一方で文字は 14.5px まで小さい
   ものがあるため、左ほど濃く・右のカードの手前で 0 になる横グラデーションを
   1 枚だけ置く。右まで届かせると画像の見せ場 (波と光) が白く濁る。 */
.earr-h3::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* 濃さは「文字が読めること」ではなく「絵が残ること」で決める。左端の絵は
	   実測 rgb(253,240,228) の淡いクリームで、膜が無くても本文 (#475569) は
	   6.8:1 ある。.93 まで白を乗せると絵が消えてただの白地になり、背景を
	   敷いた意味がなくなる。膜は「文字の帯だけを一段起こす」ぶんに留めて、
	   説明文が終わる 40% から先は絵をそのまま見せる。 */
	background: linear-gradient(96deg,
		rgba(255, 255, 255, .58) 0%,
		rgba(255, 255, 255, .50) 22%,
		rgba(255, 255, 255, .34) 40%,
		rgba(255, 255, 255, .12) 60%,
		rgba(255, 255, 255, 0) 76%);
}

/* 下端。背景画像の下側はオレンジが濃く、次のセクション (白) との境目が
   1 本の線として出る。器の中で白へ落として境目を作らない。 */
.earr-h3::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	height: 90px;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .82) 62%, #fff 100%);
}

/* 2026-08-04: 旧 SVG 装飾 (.earr-h3-deco = ローソク足 7 本・ドットの帯・波線) は
   撤去した。背景画像が同じ役割を持つので、重ねると 2 種類の装飾が競合する。
   PHP 側の出力も同時に消してあるので、復活させるなら 2 点セットで足し直すこと。 */

.earr-h3-inner {
	position: relative;
	z-index: 1;
	display: grid;
	/* 左右ほぼ半々。右カードの方が情報密度が高いので僅かに広く取る。 */
	grid-template-columns: minmax(0, .97fr) minmax(0, 1.03fr);
	gap: 44px;
	/* 左カラムは右カードより 200px ほど背が低い。start だと下に大きな空白が残って
	   左右が釣り合わないので、上下中央に置く (採用デザインも実質中央揃えで、
	   左の中心とカードの中心がほぼ一致している)。
	   行数が変わったときに動くのは左カラムだけで、右カードには伝わらない。 */
	align-items: center;
	max-width: var(--earr-page);
	margin-inline: auto;
	padding-inline: var(--earr-gutter);
}

/* =========================================================
 * 左カラム
 * ======================================================= */
/* 2026-08-04: font-family: "Noto Sans JP" を外した (ユーザー判断)。
   「テーマが既に読んでいる」という前提だったが、実測では /ranking/ が
   このページのために nsjp を 3 ファイル 187KB 読んでいた。
   詳細は earr.css の .earr-hero-copy の註。 */
.earr-h3-copy {
	min-width: 0;
}

/* アイブロウ。ページの分類を示すラベルなので、縦線の装飾は外して字間で見せる
   (2026-08-02)。ja は英字 1 行なので広めの字間が効く。 */
.earr-h3-eyebrow {
	position: relative;
	margin-bottom: 18px;
	color: #c2410c;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .12em;
}

/* タイ語は字を離すと語の切れ目が読み取れなくなるので字間を戻す
   (この 1 言語だけ本文がラテン文字でない上に単語間スペースが無い)。 */
.earr-h3-eyebrow:lang(th) {
	letter-spacing: normal;
}

/* テーマの h1 は font-size / line-height を持つので .earr-root 付きで勝つ。 */
.earr-root .earr-h3-title {
	/* 下の余白を広く取って、アイブロウ + 見出しのブロックだけを上へ寄せる
	   (左カラムは上下中央なので、ここを広げた分の半分だけ見出しが上がる)。
	   2026-08-02: 見出しの下にオレンジのバー (::after) を足したぶん、
	   ここは 40 → 26px に詰める (バーが 24px + 5px を持つので合計は増える)。 */
	margin: 0 0 26px;
	padding: 0;
	border: 0;
	color: var(--earr-ink);
	/* 左カラム (PC で 586px) をほぼ使い切る大きさにする。60px は 8 文字で折り返して
	   「フォワード実績」が行をまたいでいた。48px なら 2 行目「フォワード実績ランキング」
	   (12 文字) が 564px = 96% でちょうど 1 行に入る。 */
	font-size: clamp(28px, 3.4vw, 48px);
	font-weight: 900;
	line-height: 1.16;
	letter-spacing: -.02em;
}

/* 見出しのうちページの主題 (フォワード実績) だけを色で立てる。
   ブランドの #ff6b35 は白地 2.84:1 で「大きい文字」の 3:1 にも足りないため、
   一段濃い --earr-orange-dk (#e8541c = 3.67:1) を使う。この h1 は 900 かつ
   最小 30px なので常に「大きい文字」扱いで 3:1 が基準。 */
.earr-root .earr-h3-title-em {
	color: var(--earr-orange-dk);
	/* 途中で折り返すと色の塊が 2 行に割れて語として読めなくなるので折らない。
	   折り返しは強調語の前後で起きる。 */
	white-space: nowrap;
}

/* 見出しの下のオレンジのバー。小見出し (h3_sub) を出すのをやめたので、
   見出しと説明文の間の区切りはこれ 1 本だけにする。
   幅は px で固定せず 62% を上限にして、語の短い言語でも見出しより長くならない
   ようにする (見出しからはみ出すと下線ではなく別の帯に見える)。 */
.earr-root .earr-h3-title::after {
	content: "";
	display: block;
	width: 210px;
	max-width: 62%;
	height: 5px;
	margin-top: 24px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--earr-orange) 0%, var(--earr-orange-dk) 100%);
}

/* h3_sub は出力していない (earr-hero.php 参照)。他ページで使われたときのために
   定義だけ残す。 */
.earr-h3-sub {
	margin-bottom: 20px;
	color: var(--earr-ink);
	font-size: clamp(17px, 1.65vw, 22px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -.01em;
}

/* 2〜3 行で読み切れる幅に抑える。伸ばすと 1 行が長くなって読みにくい。
   幅は px で信頼ポイントと同じ値にする。em で書くと font-size が変わったとき
   だけ右端がずれる (実測: 説明文 616px / 信頼ポイント 634px で 18px 食い違っていた)。 */
.earr-root .earr-h3-desc {
	/* 2026-08-02: 540 → 470px。ja の説明文 (46 字) が 540px では 2 行になり、
	   2 行目が「を探せます。」の 6 字だけになっていた。470px なら 3 行に割れて
	   句点が行末に来る (信頼ポイントの 540px とは意図的に揃えない)。 */
	max-width: 470px;
	margin-bottom: 30px;
	color: var(--earr-ink-2);
	font-size: 14.5px;
	line-height: 1.95;
}

/* --- CTA --- */
.earr-h3-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}

/* 2 つの箱の背は必ず揃える。強弱は文字の大きさと色で出す
   (高さが違うと「弱い」ではなく「不揃い」に見える)。 */
.earr-h3-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	border: 1.5px solid transparent;
	border-radius: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background-color .15s ease, border-color .15s ease;
}

/* .earr-root a { color: inherit } が後勝ちするので詳細度で勝つ側に色を書く。
   テーマの a:hover / a:focus も色を変えてくるため両方で明示する。 */
.earr-root .earr-h3-btn-main,
.earr-root .earr-h3-btn-main:hover,
.earr-root .earr-h3-btn-main:focus {
	color: #fff;
}

.earr-h3-btn-main {
	padding-inline: 30px;
	background-color: var(--earr-orange-dk);
	background-image: linear-gradient(135deg, #f2611f 0%, #e8541c 58%, #d1490f 100%);
	box-shadow: 0 8px 20px rgba(232, 84, 28, .24);
	/* 19px 太字 = WCAG の「大きい文字」。ここを下げると 4.5:1 が必要になる。 */
	font-size: 19px;
}

.earr-h3-btn-main:hover {
	background-color: #d1490f;
	box-shadow: 0 12px 26px rgba(232, 84, 28, .3);
	transform: translateY(-2px);
}

.earr-root .earr-h3-btn-sub,
.earr-root .earr-h3-btn-sub:hover,
.earr-root .earr-h3-btn-sub:focus {
	color: var(--earr-ink);
}

.earr-h3-btn-sub {
	padding-inline: 24px;
	border-color: #f5c9b1;
	background: #fff;
	font-size: 15px;
}

.earr-h3-btn-sub:hover {
	border-color: var(--earr-orange);
	background: var(--earr-orange-sf);
}

.earr-h3-btn-ico {
	display: inline-flex;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
}

.earr-h3-btn-ico svg {
	display: block;
	width: 100%;
	height: 100%;
}

.earr-h3-btn-arrow {
	width: 18px;
	height: 18px;
	transition: transform .18s ease;
}

.earr-h3-btn-main:hover .earr-h3-btn-arrow {
	transform: translateX(3px);
}

.earr-h3-btn-sub .earr-h3-btn-ico {
	color: #c2410c;
}

.earr-root .earr-h3-btn:focus-visible {
	outline: 2px solid var(--earr-ink);
	outline-offset: 2px;
}

/* --- 信頼ポイント --- */
.earr-h3-trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	max-width: 540px;
}

.earr-h3-trust-i {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 12px 13px;
	border: 1px solid var(--earr-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.earr-h3-trust-ico {
	display: inline-flex;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	color: #c2410c;
}

.earr-h3-trust-ico svg {
	display: block;
	width: 100%;
	height: 100%;
}

.earr-h3-trust-t {
	min-width: 0;
	color: var(--earr-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

/* 2026-08-02: ヒーロー直下に特徴カード 3 枚 (.earr-h3-feat*) を置いたが、
   ユーザー判断で撤去した。PHP の出力と i18n キー (h3_feat*) も同時に消してある。 */

/* =========================================================
 * 右カラム: トップ3の順位カード (2026-08-04)
 *
 * 旧版は「白いカード 1 枚の中に、順位ミニカード 3 枚 + 1 位のチャート」を
 * 入れていた。3 枚を重ねて置くために外側の器をやめ、カードそのものを
 * 背景画像の上に直接置く (器があると背景の 01/02/03 が 1 枚ぶん隠れる)。
 * ======================================================= */
.earr-h3-panel {
	position: relative;
	min-width: 0;
	/* 2026-08-04: font-family: "Noto Sans JP" を外した (理由は .earr-h3-copy の註)。 */
}

/* パネルの見出し。p 要素なので earr.css の `.earr-root p { margin: 0 }` (0,1,1)
   に負ける。margin を持たせる側は必ず .earr-root 付きで書く。 */
.earr-root .earr-h3-panel-hd {
	display: flex;
	align-items: center;
	gap: 10px;
	/* 1 位カードが上へ 26px はみ出すぶんを見込む (実効 12px)。 */
	margin-bottom: 38px;
	color: var(--earr-ink);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .01em;
}

/* 見出しの右は 2/3 が空く。文言を足すと下のランキング表と同じことを言うだけ
   なので、罫線を伸ばして空白の方に役割を持たせる。 */
.earr-h3-panel-hd::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	margin-left: 2px;
	background: linear-gradient(90deg, rgba(203, 213, 225, .95) 0%, rgba(226, 232, 240, 0) 100%);
}

/* 見出しのアイコンは面で持たせる。線画のまま文字の横に置くと、同じ大きさの
   記号が 1 つ増えただけに見えて見出しの起点にならない。 */
.earr-h3-panel-ico {
	display: inline-flex;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 6px;
	border-radius: 9px;
	background: var(--earr-orange-sf);
	color: #e8541c;
}

.earr-h3-panel-ico svg,
.earr-h3-rc-ico svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- 順位カード 3 枚 ---
   DOM は 1→2→3 (読み上げと順位を一致させる)。表示は order で 2 / 1 / 3。

   3 枚は同じ高さにせず、1 位だけを上下に大きくはみ出させて中央に立たせる。
   左右の 2 枚は負マージンで 1 位の下へ潜り込ませ、z-index で前後を決める。
   下端揃え + padding 増しでは、EA 名が 1 枚だけ 2 行に折れた瞬間に高さが
   逆転する (EA 名の長さは毎日変わる)。行数に依存しない組み方にしておく。

   ol 要素なので `.earr-root ol { margin: 0, padding: 0 }` (0,1,1) に負ける。
   下の余白はここに置かず、注記側 (.earr-h3-rank-note) に持たせる。 */
.earr-h3-rank {
	display: grid;
	/* 2 位 / 3 位は内側に 26px の padding を持つので、列を等分にすると中身の
	   使える幅が 1 位より 15px 以上狭くなる。列比で戻す。 */
	grid-template-columns: 1.06fr 1.15fr 1.06fr;
	align-items: center;
	list-style: none;
}

.earr-h3-rc {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	min-width: 0;
	padding: 16px 11px 15px;
	border: 1px solid;
	border-radius: 14px;
	/* 背景画像の上に直接置くので、地色は必ず不透明にする (半透明にすると
	   波と数字が数値の背後に透けて、桁が読み取れなくなる)。 */
	background: #fff;
	text-align: center;
	/* 影は 3 枚重ね。接地の 1px・中距離・遠距離を分けて置く。1 枚だと
	   「縁が濃い」か「浮きすぎ」のどちらかにしかならない。 */
	box-shadow:
		0 1px 2px rgba(15, 23, 42, .05),
		0 4px 12px -6px rgba(15, 23, 42, .07),
		0 18px 40px -20px rgba(15, 23, 42, .22);
}

/* 2 位は左・1 位は中央・3 位は右。負マージンの向きは「中央へ寄せる」側。

   重なる幅ぶんは、隠れる側の内側 padding で必ず取り返す。1 位は 2 枚の手前に
   来るので、潜り込んだ帯にある文字はどうやっても読めない (実測: -16px で
   2 位の PF・最大DD の値と 3 位のラベルが 1 位の下に入って欠けていた)。
   重なり 9px + 1 位の影のにじみを見込んで、内側だけ padding を 26px にする。 */
.earr-h3-rc:nth-child(1) { order: 2; }

.earr-h3-rc:nth-child(2) {
	order: 1;
	margin-right: -9px;
	padding-right: 26px;
}

.earr-h3-rc:nth-child(3) {
	order: 3;
	margin-left: -9px;
	padding-left: 26px;
}

/* 1 位。上下にはみ出させ、一回り大きく、影も強くして手前に出す。
   上のはみ出しは .earr-h3-panel-hd の margin-bottom (38px)、下は
   .earr-h3-rank-note の margin-top (34px) の内側に収まる。 */
.earr-h3-rc.is-first {
	z-index: 3;
	margin-block: -26px -18px;
	padding: 22px 14px 19px;
	border-radius: 17px;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, .05),
		0 6px 16px -8px rgba(180, 116, 12, .28),
		0 26px 52px -22px rgba(180, 116, 12, .42);
}

/* 金・銀・銅は「薄い地色 + 少し濃い枠」まで。メタリックな表現はしない。
   地色は上を明るくした縦グラデにする (単色の面より、紙の上に置いた小片に
   見える)。振り幅は 2〜3% に留めて色帯にはしない。 */
.earr-h3-rc-gold {
	border-color: #ecd79c;
	background: linear-gradient(180deg, #fffdf5 0%, #fdf5e0 100%);
}

.earr-h3-rc-silver {
	border-color: #e0e5ea;
	background: linear-gradient(180deg, #fdfdfe 0%, #f5f7f9 100%);
}

.earr-h3-rc-bronze {
	border-color: #ebd7c4;
	background: linear-gradient(180deg, #fefaf7 0%, #faf1e8 100%);
}

/* --- 順位バッジ --- */
.earr-root .earr-h3-rc-hd {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
}

.earr-h3-rc-ico {
	display: inline-flex;
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
}

.earr-h3-rc.is-first .earr-h3-rc-ico {
	width: 26px;
	height: 26px;
}

.earr-h3-rc-gold .earr-h3-rc-ico { color: #cf9a08; }
.earr-h3-rc-silver .earr-h3-rc-ico { color: #7d8996; }
.earr-h3-rc-bronze .earr-h3-rc-ico { color: #a86c3c; }

/* 2 位と 3 位はどちらもメダルなので、順位は文字でも出す (色だけでは区別
   できない)。地の文と同じ体裁だと EA 名やスコアと並んで 4 段の文字列になる
   ため、ここだけ小さな面 (ピル) にして「札」として読ませる。 */
.earr-h3-rc-rank {
	padding: 2px 9px 3px;
	border-radius: 999px;
	background: rgba(15, 23, 42, .05);
	color: var(--earr-ink-2);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .04em;
	white-space: nowrap;
}

/* ピルの色は台紙と同系にする (灰色のまま置くと金銀銅の面から浮く)。
   文字色はいずれも白地換算 4.5:1 以上を満たす濃さにしてある。 */
.earr-h3-rc-gold .earr-h3-rc-rank {
	background: rgba(191, 143, 10, .16);
	color: #7d5c05;
}

.earr-h3-rc-silver .earr-h3-rc-rank {
	background: rgba(100, 116, 139, .13);
	color: #526073;
}

.earr-h3-rc-bronze .earr-h3-rc-rank {
	background: rgba(168, 108, 60, .14);
	color: #85552c;
}

.earr-h3-rc.is-first .earr-h3-rc-rank {
	font-size: 11.5px;
}

/* --- EA 名 --- */
.earr-root .earr-h3-rc-name {
	min-width: 0;
	margin: 0;
	color: var(--earr-ink);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.35;
	/* EA 名は英数の長い連なり (CSMV_EURCAD) があるので、狭い列でも折り返させる。 */
	overflow-wrap: anywhere;
}

.earr-root .earr-h3-rc.is-first .earr-h3-rc-name {
	font-size: 14.5px;
	font-weight: 800;
}

.earr-root .earr-h3-rc-name a:hover {
	color: #c2410c;
}

/* --- 総合スコア --- */
.earr-root .earr-h3-rc-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	margin: 1px 0 0;
}

.earr-h3-rc-score-v {
	color: var(--earr-ink);
	font-size: 27px;
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -.02em;
	/* 3 枚が縦に揃うよう等幅数字にする (1 と 9 で字幅が違うと、中央の 1 位
	   だけ数字の重心がずれて見える)。 */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.earr-h3-rc.is-first .earr-h3-rc-score-v {
	font-size: 36px;
}

/* 「総合スコア」は 3 枚とも同じ文言が並ぶ。数値より一段落として、3 行の
   繰り返しが目に付かないようにする。 */
.earr-h3-rc-score-lb {
	color: #5f6b7a;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* --- ミニチャート ---
   実測の累計損益カーブ。高さは CSS で固定する (SVG の縦横比で決めさせない)。
   データが変わっても箱の高さは動かない = CLS を作らない。 */
.earr-h3-rc-spark {
	width: 100%;
	margin: 1px 0 0;
	color: var(--earr-orange-dk);
}

/* 1 位以外は 1 段薄くする。3 枚とも同じ濃さで引くと、線が 3 本並んだ図に
   見えて「1 位が最も強い」という並びの意味が消える。 */
.earr-h3-rc:not(.is-first) .earr-h3-rc-spark {
	opacity: .72;
}

.earr-h3-rc-spark svg {
	display: block;
	width: 100%;
	height: 30px;
}

.earr-h3-rc.is-first .earr-h3-rc-spark svg {
	height: 40px;
}

/* --- 指標 (PF / 最大DD / 勝率) ---
   dl 要素なので `.earr-root dl { margin: 0 }` に負ける。ここは 0 のままで
   良いので上書きしないが、上の区切り線と余白は padding で持つ
   (margin だと打ち消される)。 */
.earr-h3-rc-stats {
	display: grid;
	gap: 4px;
	width: 100%;
	margin-top: 3px;
	padding-top: 10px;
	border-top: 1px dashed var(--earr-line-2);
	text-align: left;
}

.earr-h3-rc-stats > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 7px;
	min-width: 0;
}

.earr-h3-rc-stats dt {
	flex: 0 0 auto;
	color: var(--earr-ink-2);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .01em;
}

.earr-h3-rc-stats dd {
	min-width: 0;
	margin: 0;
	color: var(--earr-ink);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-align: right;
	/* 金額は毎日変わる。等幅数字にして桁で字幅が動かないようにする。 */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	/* 「-1,188,220円」は 11 文字。狭い 2 位 / 3 位でも器から出さない。 */
	overflow-wrap: anywhere;
}

.earr-h3-rc.is-first .earr-h3-rc-stats dt {
	font-size: 11px;
}

.earr-h3-rc.is-first .earr-h3-rc-stats dd {
	font-size: 13.5px;
}

/* --- 注記 ---
   計測条件は 3 枚すべてに掛かるのでカードの外に 1 つだけ置く。
   p 要素なので margin は .earr-root 付きで書く (でないと 0 に潰される)。
   1 位カードが下へ 18px はみ出すので、実効の空きは 34 - 18 = 16px。 */
.earr-root .earr-h3-rank-note {
	margin: 34px 0 0;
	/* ここだけは白いカードの外 = 背景画像の明るいオレンジの上に乗る。
	   本文と同じ --earr-ink-2 (#475569 相当) では地色との差が足りないので
	   一段濃くする (縁取りや下地は足さない — 注記に装飾を付けると本文より
	   目立つ)。 */
	color: #334155;
	font-size: 10.5px;
	line-height: 1.5;
	text-align: right;
}

/* =========================================================
 * 1 カラム (タブレット以下)
 * ======================================================= */
@media (max-width: 1000px) {
	.earr-h3 {
		padding: 44px 0 44px;
	}

	.earr-h3-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* 1 カラムでは上下中央揃えが働かないので、見出し下を広げても上には上がらず
	   縦に伸びて見出しとサブが分断されるだけ。2 カラムのときだけ広げる。 */
	.earr-root .earr-h3-title {
		margin-bottom: 16px;
	}

	.earr-root .earr-h3-desc,
	.earr-h3-trust {
		max-width: none;
	}

	/* 1 カラムでは右パネルが器の幅いっぱい (最大 900px) まで伸びる。カードだけが
	   横に間延びして 3 枚の重なりが読めなくなるので、パネル側で幅を止めて左寄せに
	   揃える (中央寄せにすると左カラムの文字と縦のラインが合わない)。 */
	.earr-h3-panel {
		max-width: 620px;
	}

	/* 背景画像は右端基準で敷いてあり、1 カラムでは絵の右 6 割だけが見える。
	   左の膜も同じだけ縮めないと、文字の下だけ白く塗り潰された帯に見える。 */
	.earr-h3::before {
		background: linear-gradient(150deg,
			rgba(255, 255, 255, .92) 0%,
			rgba(255, 255, 255, .82) 26%,
			rgba(255, 255, 255, .58) 46%,
			rgba(255, 255, 255, .22) 66%,
			rgba(255, 255, 255, 0) 84%);
	}
}

/* =========================================================
 * スマートフォン
 * ======================================================= */
@media (max-width: 720px) {
	.earr-h3 {
		padding: 32px 0 34px;
		/* SP 用に切り出した画像 (絵の右 62% を 760px 幅で持つ) に差し替える。
		   PC 版 1672px を 390px の器に敷くと、落とす量が実際に使う量の 4 倍に
		   なる (46.8KB → 19.4KB)。絵柄は同じなので見た目は変わらない。 */
		background-image: url("hero-rank-bg-mobile.webp");
		background-position: 100% 34%;
	}

	/* 縦積みでは文字もカードも絵の上に重なる。横方向のグラデーションでは
	   下側のオレンジが濃い帯に文字が乗るので、SP だけ縦方向の膜にする。 */
	.earr-h3::before {
		background: linear-gradient(180deg,
			rgba(255, 255, 255, .86) 0%,
			rgba(255, 255, 255, .76) 34%,
			rgba(255, 255, 255, .64) 62%,
			rgba(255, 255, 255, .56) 100%);
	}

	.earr-h3-inner {
		gap: 26px;
	}

	.earr-root .earr-h3-desc {
		margin-bottom: 22px;
		font-size: 14px;
		line-height: 1.9;
	}

	/* 見出し下のバーも縮める (SP は h1 が 28px なので 5px の帯が相対的に太い)。 */
	.earr-root .earr-h3-title::after {
		width: 150px;
		height: 4px;
		margin-top: 18px;
	}

	/* CTA は縦並びで全幅。主 CTA の高さと文字はそのまま保つ。 */
	.earr-h3-cta {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-bottom: 20px;
	}

	.earr-h3-btn {
		width: 100%;
	}

	/* 3 列だと「0.01ロット基準」がアイコンごと潰れるので 2 列にする。
	   3 つ目は 1 行を使い切らせる (半端な空白を作らない)。 */
	.earr-h3-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.earr-h3-trust-i:last-child {
		grid-column: 1 / -1;
	}

	.earr-h3-panel {
		max-width: none;
	}

	.earr-root .earr-h3-panel-hd {
		gap: 9px;
		/* SP は 1 位を上へはみ出させないので、見込みの余白も要らない。 */
		margin-bottom: 14px;
		font-size: 14px;
	}

	.earr-h3-panel-ico {
		width: 27px;
		height: 27px;
		padding: 5px;
		border-radius: 8px;
	}

	/* SP は 3 列だと 1 枚 110px しか取れず、指標の値 (-1,188,220円 = 11 文字) が
	   1 文字ずつ縦に割れる。1 位を全幅の 1 枚にし、2 位 / 3 位を下に 2 列で置く。
	   重なりは解いて隙間で並べる (幅が狭いと重なりが「ずれ」に見える)。
	   DOM は 1→2→3 なので order も戻す = 読み上げと見た目が一致する。 */
	.earr-h3-rank {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		align-items: stretch;
	}

	.earr-h3-rc:nth-child(1),
	.earr-h3-rc:nth-child(2),
	.earr-h3-rc:nth-child(3) {
		order: 0;
		margin: 0;
		/* 重なりを解いたので、内側に取っていた逃げの padding も戻す
		   (nth-child は .earr-h3-rc より詳細度が高いので、ここで消さないと
		   2 位だけ右に 26px の空白が残る)。 */
		padding-inline: 11px;
	}

	.earr-h3-rc {
		padding: 13px 11px 12px;
		border-radius: 12px;
	}

	/* 1 位は全幅 1 枚。中身は横 2 列にして、縦に伸びるのを抑える
	   (縦積みのままだと 1 位だけで画面の半分を使う)。 */
	.earr-h3-rc.is-first {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 4px 14px;
		padding: 15px 14px 14px;
		border-radius: 14px;
	}

	.earr-h3-rc.is-first .earr-h3-rc-hd {
		grid-column: 1;
		justify-content: flex-start;
	}

	.earr-root .earr-h3-rc.is-first .earr-h3-rc-name {
		grid-column: 1;
		text-align: left;
	}

	/* スコアは右列の 1〜2 行目にまたがって置く。 */
	.earr-root .earr-h3-rc.is-first .earr-h3-rc-score {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin: 0;
	}

	.earr-h3-rc.is-first .earr-h3-rc-spark,
	.earr-h3-rc.is-first .earr-h3-rc-stats {
		grid-column: 1 / -1;
	}

	/* 1 位の指標は横 3 列。全幅なので 1 列あたり 100px 前後は取れる。 */
	.earr-h3-rc.is-first .earr-h3-rc-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 4px 12px;
	}

	.earr-h3-rc.is-first .earr-h3-rc-stats > div {
		flex-direction: column;
		align-items: flex-start;
		gap: 1px;
	}

	.earr-h3-rc.is-first .earr-h3-rc-stats dd {
		text-align: left;
	}

	.earr-h3-rc-ico,
	.earr-h3-rc.is-first .earr-h3-rc-ico {
		width: 20px;
		height: 20px;
	}

	.earr-root .earr-h3-rc-name {
		font-size: 12px;
	}

	.earr-root .earr-h3-rc.is-first .earr-h3-rc-name {
		font-size: 14px;
	}

	.earr-h3-rc-score-v {
		font-size: 23px;
	}

	.earr-h3-rc.is-first .earr-h3-rc-score-v {
		font-size: 30px;
	}

	.earr-h3-rc-spark svg,
	.earr-h3-rc.is-first .earr-h3-rc-spark svg {
		height: 28px;
	}

	.earr-root .earr-h3-rank-note {
		margin-top: 12px;
	}
}

@media (max-width: 380px) {
	.earr-root .earr-h3-rc-name {
		font-size: 11.5px;
	}

	/* 2 位 / 3 位は 1 枚 150px を切る。ラベルと値が同じ行に収まらなくなるので
	   縦積みに切り替える (同じ行に押し込むと値の桁が途中で折れる)。 */
	.earr-h3-rc:not(.is-first) .earr-h3-rc-stats > div {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.earr-h3-rc:not(.is-first) .earr-h3-rc-stats dd {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.earr-h3-btn,
	.earr-h3-btn-arrow {
		transition: none;
	}

	.earr-h3-btn-main:hover {
		transform: none;
	}

	.earr-h3-btn-main:hover .earr-h3-btn-arrow {
		transform: none;
	}
}