@charset "UTF-8";
/*
 * /ranking-renewal/ 新デザイン
 * テーマカラー = オレンジ。白背景 + 黒/濃グレー/薄グレーで構成する。
 * 既存 earanking-style.css と衝突しないよう、すべて .earr- 接頭辞で閉じる。
 * (sc- 接頭辞は本体の sticky ヘッダー部品と衝突するため使わない)
 */

/* =========================================================
 * ページの基準線
 *
 * このページは「post_content 側の pg-* 系」と「本 plugin の earr-* 系」が
 * 交互に積まれる。両者が別々の最大幅を持っていたため、枠の左端が
 * PC で 94px と 144px、SP で 12/16/24px に散らばって段ごとに揺れていた。
 * 基準を1組の変数に集約し、全セクションをここから引く。
 * 値は pg-mw (max-width:1300 / padding:24) に合わせてある。
 * ======================================================= */
:root {
	--earr-page: 1300px;
	--earr-gutter: 24px;
	/* テーマの固定ヘッダーの高さ (実測 81px)。貼り付く要素はここを基準にする */
	--earr-header: 81px;
}

@media (max-width: 720px) {
	:root {
		--earr-gutter: 16px;
	}
}

.earr-root {
	--earr-orange: #ff6b35;
	--earr-orange-dk: #e8541c;
	--earr-orange-sf: #fff4ef;
	--earr-ink: #0f172a;
	--earr-ink-2: #334155;
	--earr-muted: #64748b;
	--earr-faint: #94a3b8;
	--earr-line: #e2e8f0;
	--earr-line-2: #f1f5f9;
	--earr-soft: #f8fafc;
	--earr-up: #16a34a;
	--earr-down: #dc2626;
	--earr-gold: #d4a017;
	--earr-silver: #94a3b8;
	--earr-bronze: #b06d3b;
	--earr-r: 10px;
	--earr-r-sm: 6px;

	/* アイコン (mask 用・単色 SVG を data URI で内包。外部リクエストを増やさない) */
	--earr-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 7l4.5 3.5L12 4l4.5 6.5L21 7l-1.7 11H4.7L3 7z'/%3E%3C/svg%3E");
	--earr-i-scale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 21h10M3 8l4-3 4 3M13 8l4-3 4 3'/%3E%3Cpath d='M3 8l-1.2 4.2a3 3 0 0 0 4.4 0L5 8zM21 8l1.2 4.2a3 3 0 0 1-4.4 0L19 8z'/%3E%3C/svg%3E");
	--earr-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Cpath d='M8 15h3'/%3E%3C/svg%3E");
	--earr-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.4 8.3-8 9.6C7.4 20.3 4 17 4 12V6l8-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
	--earr-i-compare: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='7' height='16' rx='1.5'/%3E%3Crect x='14' y='4' width='7' height='11' rx='1.5'/%3E%3C/svg%3E");
	--earr-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
	--earr-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.6'/%3E%3C/svg%3E");
	--earr-i-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 1 1 3.3 2.4c-.6.2-.9.8-.9 1.4v.4M12 16.6v.4'/%3E%3C/svg%3E");
	--earr-i-return: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5.5-5.5 3.5 3.5L21 6'/%3E%3Cpath d='M16 6h5v5'/%3E%3C/svg%3E");
	--earr-i-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7.5' ry='3'/%3E%3Cpath d='M4.5 6v12c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3V6M4.5 12c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3'/%3E%3C/svg%3E");
	--earr-i-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20 4v4.5h-4.5'/%3E%3C/svg%3E");
	--earr-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.2 2'/%3E%3C/svg%3E");
	--earr-i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9L2.4 17.5A2 2 0 0 0 4.1 20.5h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 16.8v.4'/%3E%3C/svg%3E");
	/* 実績比較 (棒グラフ)。ヒーローの特徴アイコンで使う。 */
	--earr-i-bars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M6 21V12M12 21V4M18 21v-6'/%3E%3C/svg%3E");
	/* 絞り込み (漏斗)・比較リストへ追加・トロフィー。ヒーローの特徴と主 CTA で使う。
	   線幅と端の処理は上の一群 (stroke-width 1.7〜1.8 / round) に合わせ、
	   4 つ並べたときにテイストが揃うようにする。 */
	--earr-i-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5h17l-6.6 7.8v5.4l-3.8 2.3v-7.7L3.5 5z'/%3E%3C/svg%3E");
	--earr-i-tray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='7' height='15' rx='1.5'/%3E%3Crect x='14' y='4.5' width='7' height='9' rx='1.5'/%3E%3Cpath d='M17.5 16v5M15 18.5h5'/%3E%3C/svg%3E");
	--earr-i-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10v5a5 5 0 0 1-10 0V3z'/%3E%3Cpath d='M7 5H4v1.5A3.5 3.5 0 0 0 7.5 10M17 5h3v1.5A3.5 3.5 0 0 1 16.5 10'/%3E%3Cpath d='M12 13v4M8.5 21h7M9.5 21c0-2.2 1-3.4 2.5-4 1.5.6 2.5 1.8 2.5 4'/%3E%3C/svg%3E");
	/* 小見出しの左右に置く月桂樹の片側 (右向き)。左側は scaleX(-1) で反転して使う。
	   葉は fill、枝は stroke。mask で塗るのでどちらも同じオレンジになる。
	   小さく表示するので葉は 5 枚・幅広に取る (枚数を増やして細くすると、
	   この寸法では骨のような線に潰れる)。 */
	--earr-laurel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cg fill='%23000'%3E%3Cpath d='M19.4 1.9c-5.1.2-8.2 2.3-9.2 6.3 4.7.7 7.8-1.4 9.2-6.3z'/%3E%3Cpath d='M21 7c-4.9.7-7.7 3.2-8.1 7.4 4.5 0 7.2-2.4 8.1-7.4z'/%3E%3Cpath d='M21 13c-4.6 1.3-6.9 4-6.7 8 4.2-.7 6.4-3.4 6.7-8z'/%3E%3Cpath d='M19.7 18.6c-4.2 1.9-6.1 4.7-5.3 8.6 3.9-1.1 5.7-4 5.3-8.6z'/%3E%3Cpath d='M17.3 23.9c-3.6 2.4-4.9 5.1-3.8 8.4 3.3-1.7 4.6-4.5 3.8-8.4z'/%3E%3C/g%3E%3Cpath d='M20.6 1.1C11.3 6 6.8 13.8 8.4 25' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");

	color: var(--earr-ink);
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
}

.earr-root *,
.earr-root *::before,
.earr-root *::after {
	box-sizing: border-box;
}

.earr-root h1,
.earr-root h2,
.earr-root h3 {
	margin: 0;
	line-height: 1.35;
	letter-spacing: .01em;
}

.earr-root p {
	margin: 0;
}

.earr-root ul,
.earr-root ol,
.earr-root dl {
	margin: 0;
	padding: 0;
	list-style: none;
}

.earr-root a {
	color: inherit;
	text-decoration: none;
}

.earr-wrap {
	max-width: var(--earr-page);
	margin-inline: auto;
	padding-inline: var(--earr-gutter);
}

/* =========================================================
 * ボタン
 * ======================================================= */
.earr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border: 1px solid transparent;
	border-radius: var(--earr-r-sm);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.earr-btn-primary {
	background: var(--earr-orange);
	color: #fff;
}

.earr-btn-primary:hover {
	background: var(--earr-orange-dk);
	color: #fff;
}

.earr-btn-ghost {
	background: #fff;
	border-color: var(--earr-line);
	color: var(--earr-ink);
}

.earr-btn-ghost:hover {
	border-color: var(--earr-faint);
}

.earr-btn-arrow {
	font-size: 16px;
}

/* キーボード操作時だけ枠を出す (マウスでは出さない)。
   ブラウザ既定の 1px 点線はオレンジ地の上でほぼ見えないため自前で指定する。 */
.earr-root .earr-btn:focus-visible {
	outline: 2px solid var(--earr-ink);
	outline-offset: 2px;
}

/* =========================================================
 * ヒーロー
 *
 * 目的は「EAをランキングで比較できるページ」だとファーストビューで伝えること。
 * したがって右パネル (ランキング上位3件) が主役で、左のコピーはその説明。
 * 背景装飾は情報より前に出ないよう opacity .1〜.22 の線画に留める。
 * ======================================================= */
.earr-hero {
	position: relative;
	padding: 48px 0 40px;
	/* 背景は 1 枚の画像に集約する。以前の白→薄オレンジのグラデーションと
	   SVG の波線は、この画像と装飾が二重になるため廃止した。
	   画像が届くまで (と読めなかったとき) 白地のままになるよう background-color
	   を必ず併記する。上端が白なのでグレー地のサイトヘッダーとも段差を作らない。 */
	background-color: #fff;
	background-image: url("hero-bg.webp");
	background-position: center center;
	background-repeat: no-repeat;
	/* 100% 100% にはしない (画面比が画像比 16:9 から外れるほど波が歪むため)。 */
	background-size: cover;
	overflow: hidden;
}

/* 背景画像の上に重ねる白のベール。SVG の線画を廃したので、この要素は
   「装飾を描く層」から「画像を沈めてコピーを立たせる層」に役割が変わった。
   1. 左上〜中央を白く残し、見出しの背後に濃いオレンジ線を来させない
   2. 右のランキングパネル背後を明るく保つ
   3. 下端を白へ溶かし、次セクションで唐突に切れないようにする (区切り線は引かない) */
.earr-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(115% 88% at 20% 10%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .64) 46%, rgba(255, 255, 255, 0) 76%),
		linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, .82) 91%, #fff 100%);
}

/* ランキング本体が主役なので、ヒーローは 1 画面を占有しない高さに抑える。
   右パネルの方が背が高いため、左右は中央揃えにする。 */
.earr-hero-inner {
	position: relative;
	z-index: 1;
	display: grid;
	/* 左は見出し 2 行目「ランキングで見つける。」が 1 行で収まる幅を確保する。
	   ここが足りないと、Web フォントが効く前 (詰め組み palt が無い状態) だけ
	   3 行になり、適用時に 1 行ぶん詰まって CLS になる。 */
	grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
	gap: 40px;
	/* center にすると、左カラムの高さが変わったとき (遅れて効く Web フォントで
	   コピーの行数が変わる) 右のランキングパネルまで上下に動いて CLS になる。
	   実測 0.0285 → 0.0003。上端で固定して伝播を断つ。 */
	align-items: start;
	max-width: var(--earr-page);
	margin-inline: auto;
	padding-inline: var(--earr-gutter);
}

/* 並び順を CSS で決める。DOM はモバイルの読み順 (コピー → CTA → 特徴) に合わせ、
   PC だけ特徴を CTA の上に置く。 */
/* 2026-08-04: ここにあった font-family: "Noto Sans JP" を外した (ユーザー判断)。
   元の意図は「見出しと同じ書体に揃えて palt (字詰め) を効かせる」で、註には
   「テーマが既に読み込んでいるので追加のリクエストは発生しない」と書いてあった。
   実測するとそうではなく、/ranking/ は nsjp-h000/h001/h002 の 3 ファイル 187KB を
   このページのために読んでいた (ページ全アセット 1,101KB の 17%)。
   Noto Sans JP で描かれていたのは 139 要素だけで、主役のランキング表 (544 要素) は
   もともとシステムフォント。揃えるなら軽い方へ揃える。
   代わりに palt は効かなくなるので、括弧や読点まわりの空きが少し広がる。 */
.earr-hero-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.earr-hero-eyebrow { order: 0; }
.earr-hero-title { order: 1; }
.earr-hero-desc { order: 2; }
.earr-hero-cta { order: 3; }
.earr-feats { order: 4; }
.earr-hero-note { order: 5; }

/* 2 カラム (1101px 以上) は「何が比較できるか」を先に見せてから CTA。
   左カラムの中で完結するので、特徴を挟んでも CTA は同じ画面に残る。
   1100px 以下は 1 カラム = 特徴が全幅に伸びて CTA を下へ押すので、DOM 順のまま
   (主 CTA を先) にする。モバイルと同じ理由をそのまま 1100px まで広げたもの。 */
/* .earr-root 付きで書く。ul のリセット (0,1,1) に負けるため。
   .earr-feats の margin はここに書かない。このブロックは .earr-feats の本体
   (.earr-root .earr-feats) より前にあり、同じ詳細度なので後ろの base 値に
   上書きされる (実測: 30px と書いても computed は 26px)。効かない指定を
   残すと、次に読む人が 30px 前提で他を調整してしまう。
   結果として説明文の上 26px / CTA の上 26px で、特徴は上下対称の帯になる。 */
@media (min-width: 1101px) {
	.earr-root .earr-feats { order: 3; }
	/* CTA は「読む」から「押す」へ変わるところ。特徴の 5 つ目に見えないよう、
	   説明文と特徴の間 (26px) より狭くしない。base の 22px を上書きする。 */
	.earr-root .earr-hero-cta { order: 4; margin-top: 26px; }
}

/* --- 小見出し ---
   規模や順位の主張は置かず、このページで実際にできることだけを短く言う。
   左右の月桂樹は装飾なので aria-hidden、画像ファイルには依存させない
   (CSS の mask + data URI)。 */
/* 左カラムの縦の間隔は、この 4 つ (eyebrow / desc / feats / note) すべてを
   .earr-root 付きで書く。p と ul にはリセットの `.earr-root p, .earr-root ul
   { margin: 0 }` (詳細度 0,1,1) が当たっていて、単独クラス (0,1,0) の
   margin は 1 つも効かない。実測では h1 と説明文の間が 0px、説明文と特徴の
   間が 1px、CTA と注意書きの間が 0px で、見えている間隔は line-height の
   行ボックスの上下だけだった (.earr-hero-title が同じ理由で .earr-root 付き
   になっているのと同型)。 */
.earr-root .earr-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 14px;
	color: var(--earr-orange-dk);
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: .01em;
	line-height: 1.5;
}

.earr-hero-laurel {
	flex: 0 0 auto;
	width: 17px;
	height: 25px;
	background: var(--earr-orange);
	-webkit-mask-image: var(--earr-laurel);
	mask-image: var(--earr-laurel);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* 原形は枝が左へ反り葉が右を向くので、そのままで左側になる。
   右側は反転して使う (2 枚目の SVG を持たない)。どちらも葉が文字の側を向く。 */
.earr-hero-laurel-r {
	transform: scaleX(-1);
}

/* セレクタを .earr-root 付きにしているのは、上の .earr-root h1,h2,h3 (0,1,1) に
   line-height / letter-spacing で負けるため。単独の .earr-hero-title (0,1,0) だと
   この 2 つだけが効かず、行間 1.35・字間 +.01em のまま描かれる。 */
.earr-root .earr-hero-title {
	/* 2026-08-04: font-family: "Noto Sans JP" を外した (理由は .earr-hero-copy の註)。
	   太さ 900 はシステムフォント側で最も太いウェイトに落ちる。 */
	font-size: clamp(31px, 3.55vw, 50px);
	font-weight: 900;
	/* 本文の --earr-ink (#0f172a) は青みが乗る。見出しだけこの大きさで並ぶと
	   その青みが目に付くので、ここは黒に寄せる。 */
	color: #171717;
	/* 日本語は palt (.earr-root) で約物が既に詰まっているため、ここで詰めるのは
	   -.025em まで。それ以上にすると「、」「。」の前後だけが不自然に近づく。 */
	letter-spacing: -.025em;
	line-height: 1.18;
	/* 語の長い言語や、訳が欠けて en と連結した場合でも器から出さない。 */
	overflow-wrap: break-word;
}

.earr-hero-title span {
	display: block;
}

/* 「EA」と「ランキング」だけテーマカラー。斜体は付けない (em の既定を打ち消す)。
   #ff6b35 は白地で 2.84:1 で大きい文字の基準 (3.0) にも届かないため、
   見出しの文字色には一段濃い #e8541c (3.67:1) を使う。 */
.earr-hero-title em {
	color: var(--earr-orange-dk);
	font-size: 1.08em;
	font-style: normal;
}

/* 強調語だけ縦グラデーション。単色より面が締まり、広告の見出しとして立つ。
   グラデーションの両端も白地で 3:1 以上を保つ値にしてある
   (#f2611f = 3.11:1 / #e8541c = 3.67:1 / #c2410c = 5.18:1。
   見出しは 31px 以上 + 900 なので WCAG の「大きい文字」= 3:1 が基準)。
   background-clip: text 非対応の環境では上の単色がそのまま残る。 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.earr-hero-title em {
		background-image: linear-gradient(180deg, #f2611f 0%, #e8541c 55%, #c2410c 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
		/* 背景 (薄いオレンジの線画) の上でも輪郭が沈まない程度に留める。
		   1 本目は白の極薄いふち、2 本目はごく弱い光彩。袋文字にはしない。 */
		filter:
			drop-shadow(0 1px 0 rgba(255, 255, 255, .6))
			drop-shadow(0 2px 9px rgba(232, 84, 28, .17));
	}
}

/* 見出しの直後。ここは意味のまとまりが続くので間隔を詰める。
   幅は 2 行で収まるところで止める (広げると 1 行が長くなって読点の位置が散る)。
   auto-phrase は日本語を文節で折り返す。未対応ブラウザでは既定の折返しに戻るだけ。 */
.earr-root .earr-hero-desc {
	margin-top: 16px;
	max-width: 24em;
	color: var(--earr-ink-2);
	font-size: 15.5px;
	line-height: 1.85;
	word-break: auto-phrase;
}

.earr-hero-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}

/* 主 CTA はページの主行動 (ランキングを見る)。副 CTA と明確に強弱を付ける。 */
.earr-hero-cta .earr-btn {
	padding: 15px 26px;
	font-size: 15px;
}

/* 白文字 × #ff6b35 は 2.84:1 で通常文字の 4.5:1 に届かない。
   WCAG の「大きい文字」(18.66px 以上かつ太字 = 3:1) に乗せたうえで、
   地色も #e8541c (3.67:1) まで濃くして基準を満たす。ブランドのオレンジは保つ。
   グラデーションにしても最も明るい端が #f2611f (3.11:1) なので基準内。 */
.earr-hero-cta .earr-btn-primary {
	padding: 16px 30px;
	/* .earr-root a { color: inherit } が後勝ちで .earr-btn-primary の白を
	   打ち消し、オレンジ地に濃紺文字になっていた。詳細度で勝つここで白を
	   明示する (2026-07-31)。 */
	color: #fff;
	background-color: var(--earr-orange-dk);
	background-image: linear-gradient(135deg, #f2611f 0%, #e8541c 58%, #d1490f 100%);
	font-size: 19px;
	box-shadow: 0 8px 20px rgba(232, 84, 28, .26);
	transition: transform .18s ease, box-shadow .18s ease, background-color .15s ease;
}

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

.earr-btn-ico {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.earr-icon-trophy {
	-webkit-mask-image: var(--earr-i-trophy);
	mask-image: var(--earr-i-trophy);
}

.earr-hero-cta .earr-btn-primary .earr-btn-arrow {
	transition: transform .18s ease;
}

.earr-hero-cta .earr-btn-primary:hover .earr-btn-arrow {
	transform: translateX(3px);
}

/* 副 CTA は白地 + 薄いオレンジの枠。主 CTA と同じ強さに見せない
   (矢印を付けない・文字を一段小さくする・影を持たせない)。
   ただし高さは主 CTA と揃える。line-height が 1 なので padding だけで決まり、
   14px だと 44.5px 対 53px で 8.5px 低くなる。横に並ぶ 2 つの箱の背が
   合っていないのは「弱い」ではなく「不揃い」に見えるため、弱さは文字の
   大きさと色だけで出す。 */
.earr-hero-cta .earr-btn-ghost {
	padding: 18px 24px;
	background: #fff;
	border-color: #f7cdb9;
	color: var(--earr-ink-2);
	font-size: 14.5px;
}

.earr-hero-cta .earr-btn-ghost:hover {
	border-color: var(--earr-orange);
	background: var(--earr-orange-sf);
	color: var(--earr-orange-dk);
}

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

	.earr-hero-cta .earr-btn-primary:hover {
		transform: none;
	}

	.earr-hero-cta .earr-btn-primary:hover .earr-btn-arrow {
		transform: none;
	}
}

/* --- 特徴 4 つ ---
   数字や誇張は置かない。このページで実際にできる操作を線画アイコン + 短いラベルで示す。
   4 列均等。左カラムの幅では 1 行に収まらないラベルがあるので 2 行まで許容する。 */
.earr-root .earr-feats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 10px;
	margin-top: 26px;
}

.earr-feat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

/* アイコンは薄い円の中に置く。円は要素本体、線画は ::before に持たせる
   (mask は要素そのものを型抜きするため、同じ要素に地色は置けない)。 */
.earr-feat-ico {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border: 1px solid #ffdcca;
	border-radius: 50%;
	background: var(--earr-orange-sf);
}

.earr-feat-ico::before {
	content: '';
	width: 23px;
	height: 23px;
	background: var(--earr-orange-dk);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.earr-feat-result::before { -webkit-mask-image: var(--earr-i-bars); mask-image: var(--earr-i-bars); }
.earr-feat-filter::before { -webkit-mask-image: var(--earr-i-filter); mask-image: var(--earr-i-filter); }
.earr-feat-tray::before { -webkit-mask-image: var(--earr-i-tray); mask-image: var(--earr-i-tray); }
.earr-feat-detail::before { -webkit-mask-image: var(--earr-i-search); mask-image: var(--earr-i-search); }
/* 旧 3 特徴 (feat_result / feat_risk / feat_daily) 用。他ページから使われたときのため残す。 */
.earr-feat-risk::before { -webkit-mask-image: var(--earr-i-shield); mask-image: var(--earr-i-shield); }
.earr-feat-daily::before { -webkit-mask-image: var(--earr-i-refresh); mask-image: var(--earr-i-refresh); }

/* ラベルは 2 行まで。auto-phrase で文節の切れ目に落とす
   (既定の折返しだと「運用スタイルで絞り込 / み」のように 1 文字だけ残る)。 */
.earr-feat-t {
	color: var(--earr-ink-2);
	/* 本文 (15.5px) との差は大きいが、ここは上げられない。12px にすると
	   4 列縦積みの 1440px (セル 133px) で「気になるEAを比較リストへ」が、
	   スマートフォン (セル 174px・アイコンと横並びなので実質 126px) で
	   4 つ中 3 つが 2 行に折れる。11px は 2 行まで許容した上での上限側。 */
	font-size: 11px;
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: -.02em;
	word-break: auto-phrase;
}

/* 4 列 (縦積み) を保つのは左カラムが 560px 前後を取れる 1301px 以上だけ。
   それ以外は 2 列 × 2 行 + アイコン横並びにする。窮屈になる理由は帯ごとに違う。
   1101〜1300px = 2 カラムのままで左カラムが 480px まで縮む。横に窮屈。
   721〜1100px = 1 カラムになって左が器の全幅 (1100px 幅で 1052px) になる。
     窮屈の逆で、1 項目が 250px 前後まで広がりアイコンとラベルの塊が 4 つ
     離れて漂う。器に合わせて散らすのではなく、塊として左に置く。
   〜720px = スマートフォン。
   4 列のまま max-width で幅だけ止める案も測ったが (背は 19px 低い)、
   1101px を跨ぐたびに 4 列 → 2 列 → 4 列 と 2 回変わる。ここは 1301px の
   1 回だけにする。 */
@media (max-width: 1300px) {
	.earr-root .earr-feats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 10px;
		max-width: 430px;
	}

	/* 2 列では 1 セルが横に長くなるので、アイコンとラベルを横並びにする
	   (縦積みのままだと中央に細い柱が 2 本立つ形になり、まとまりが読めない)。 */
	.earr-feat {
		flex-direction: row;
		align-items: center;
		gap: 10px;
		min-width: 0;
		text-align: left;
	}

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

	.earr-feat-ico::before {
		width: 19px;
		height: 19px;
	}
}

.earr-root .earr-hero-note {
	margin-top: 22px;
	max-width: 31em;
	color: var(--earr-faint);
	font-size: 11.5px;
	line-height: 1.8;
	word-break: auto-phrase;
}

/* 日本語の注記だけ 1 行で置く (2026-07-31)。折り返すと 2 行目が
   「ありません。」だけになり、免責が尻切れに読めるため。
   独/仏/西/露/泰/尼は同じ内容でも 100 文字を超え、nowrap にすると左カラムから
   溢れる (実測) ので日本語限定で当てる。幅が足りない端末では字を詰めて
   1 行を保つ (2.8vw = 実測で必要な 365px を 397px 未満の幅で下回る値)。 */
html[lang="ja"] .earr-root .earr-hero-note {
	max-width: none;
	white-space: nowrap;
	font-size: min(11.5px, 2.8vw);
}

/* 見出しの上限は日本語だけ 45px に下げる。50px のままだと 1366px 以上で
   「フォワード実績ランキング」が左カラム (564px) に入らず 3 行になる。
   720px 以下は専用の clamp があるので、そこには掛けない。 */
@media (min-width: 721px) {
	html[lang="ja"] .earr-root .earr-hero-title {
		font-size: clamp(31px, 3.55vw, 45px);
	}
}
/* --- 右パネル (ランキング上位3件) ---
   ランキング本体と同じ並びの上位 3 件。装飾ではなく、そのまま使える UI として出す。 */
.earr-hero-panel {
	min-width: 0;
}

.earr-v-up { color: var(--earr-up); }
.earr-v-down { color: var(--earr-down); }

/* 影は 2 段にする。遠い方 (34px ぼかし) だけだと輪郭がぼやけて紙が浮かず、
   白地の上で面が沈む。近い方 (2px) で縁を締めてから浮かせる。 */
.earr-rp {
	padding: 16px 16px 12px;
	border: 1px solid var(--earr-line);
	border-radius: 16px;
	background: #fff;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, .05),
		0 16px 38px rgba(15, 23, 42, .085);
}

.earr-rp-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 4px 13px;
	border-bottom: 1px solid var(--earr-line-2);
}

.earr-rp-crown {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--earr-orange);
	-webkit-mask-image: var(--earr-crown);
	mask-image: var(--earr-crown);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.earr-rp-t {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.earr-rp-more {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: auto;
	color: var(--earr-muted);
	font-size: 12.5px;
	font-weight: 700;
}

.earr-rp-more:hover {
	color: var(--earr-orange-dk);
}

/* ol / p なのでリセット (`.earr-root ol, .earr-root p { margin: 0 }`) に負ける。
   左カラムの余白と同じ理由で .earr-root 付きにする。
   gap は 8px から 10px へ。左カラムの間隔が設計値どおりに開いたぶん、
   3 枚が詰まって見えるようになったため。 */
.earr-root .earr-rp-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.earr-rp-card {
	position: relative;
	display: grid;
	/* 比較ボタンは絶対配置にしない。ラベルの長さが言語で変わる
	   (「比較」2文字 / "Compare" 7文字) ので、固定の右余白では英語でスコアに重なる。
	   最後の列を auto にして、ボタンの実幅ぶんだけ器が広がるようにする。 */
	grid-template-columns: 40px 44px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	padding: 13px 14px 11px 0;
	border: 1px solid var(--earr-line);
	border-radius: 12px;
	background: #fff;
	/* 枠線だけだと 3 枚が同じ平面に並んで区切りが線 1 本ぶんしかない。
	   影は 1px だけ。ここを浮かせるとパネル自体の影と二重になる。 */
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* 順位ごとの地色 (1 位=薄オレンジ / 2 位=グレー / 3 位=ベージュ) と枠色は敷かない。
   3 枚とも白地・共通の --earr-line で、順位は数字の色だけで示す。 */

.earr-rp-rank {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	align-self: stretch;
	border-radius: 11px 0 0 11px;
	font-size: 21px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.earr-rp-1 .earr-rp-rank {
	/* #c2410c は白地で 5.2:1。 */
	color: #c2410c;
}

.earr-rp-2 .earr-rp-rank {
	color: #475569;
}

.earr-rp-3 .earr-rp-rank {
	color: #8a5a2b;
}

/* 1 位だけ王冠を数字の上に小さく置く。表彰台のような大きな演出はしない。 */
.earr-rp-1 .earr-rp-rank::before {
	content: '';
	display: block;
	width: 15px;
	height: 15px;
	margin-bottom: 2px;
	background: currentColor;
	-webkit-mask-image: var(--earr-crown);
	mask-image: var(--earr-crown);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* 商品画像は正方形が大半なので contain。cover で切ると画像内の EA 名が消える。 */
.earr-rp-thumb {
	display: block;
	width: 44px;
	height: 44px;
	border: 1px solid var(--earr-line-2);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

.earr-rp-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.earr-rp-main {
	min-width: 0;
}

.earr-rp-line {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.earr-rp-name {
	color: var(--earr-ink);
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.earr-rp-name:hover {
	color: var(--earr-orange-dk);
	text-decoration: underline;
}

.earr-rp-pair {
	color: var(--earr-muted);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .02em;
}

/* 収益 → 勝率 → 損失 → 効率 の順で固定。収益だけを大きくしない。
   4 等分にすると「+1,187,203円」(13文字) が 1 列に収まらず 2 行に折り返して
   カードの高さが 1 枚だけ変わる。桁数の多い金額の列を先に広く取る。 */
/* dl なのでリセット (`.earr-root dl { margin: 0 }`) に負ける。EA 名の行と
   指標の行が隙間なく積まれていたのはこのため。 */
.earr-root .earr-rp-stats {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, .75fr) minmax(0, 1.2fr) minmax(0, .65fr);
	gap: 0 7px;
	margin-top: 8px;
}

/* ラベルは言語で長さが大きく変わる ("勝率" / "Trefferquote")。
   nowrap にすると長い言語で列からはみ出すので、折り返しを許す。
   4 枚とも同じラベルなので、折り返してもカード間で高さはずれない。 */
.earr-rp-stats dt {
	color: var(--earr-muted);
	font-size: 10px;
	line-height: 1.5;
	overflow-wrap: break-word;
}

.earr-rp-stats dd {
	margin: 0;
	font-size: 12.5px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	line-height: 1.4;
	white-space: nowrap;
}

/* 12.5px なので既定の #16a34a (3.05:1) / #dc2626 では足りない。カード内だけ濃くする。 */
.earr-rp-stats .earr-v-up { color: #15803d; }
.earr-rp-stats .earr-v-down { color: #b91c1c; }

/* 長い値だけ段階的に縮める (PHP が文字数で付与)。
   列幅は固定比率なので、これが無いと桁数の多い金額が隣の列に食い込む。 */
.earr-rp-stats .earr-rp-v-s { font-size: 11.5px; }
.earr-rp-stats .earr-rp-v-xs { font-size: 10.5px; }

.earr-rp-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	min-width: 0;
}

.earr-rp-score {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 3px 9px;
	border: 1px solid #ffd6c4;
	border-radius: 999px;
	background: #fff4ef;
}

.earr-rp-score-t {
	color: #9a3412;
	font-size: 9.5px;
	font-weight: 700;
	white-space: nowrap;
}

.earr-rp-score-v {
	color: #c2410c;
	font-size: 13px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* 指標 4 つと比較ボタンに幅を譲る。en の "+1,187,203 JPY" は
   124px 時点で 9px 溢れて隣の列に食い込んでいた (実測 cw=80 / sw=89)。 */
.earr-rp-spark {
	width: 104px;
	margin: 0;
	color: var(--earr-orange);
}

.earr-spark-down {
	color: var(--earr-down);
}

.earr-rp-spark svg {
	display: block;
	width: 100%;
	height: 40px;
}

/* お気に入り機能はこのサイトに無いため、実際に動く「比較に追加」を置く。
   アイコンだけだと何のボタンか読み取れないので短いラベルを添える。 */
.earr-rp-cmp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 26px;
	padding: 0 9px;
	border: 1px solid var(--earr-line);
	border-radius: 8px;
	background: #fff;
	color: var(--earr-muted);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

/* 地色と枠はランキング本体の比較ボタン (.earr-root .earr-cmp-add = 薄オレンジ地)
   をそのまま引き継ぐ。ただしその文字色 #e8541c は 10.5px では 3.4:1 しかないので、
   ヒーローのぶんだけ #c2410c まで濃くして AA (4.5:1) を満たす。
   .earr-root .earr-cmp-add と同詳細度だと後勝ちで負けるため 3 段にする。 */
.earr-hero .earr-rp-card .earr-rp-cmp {
	color: #c2410c;
}

.earr-rp-cmp:hover,
.earr-rp-cmp.is-on {
	border-color: var(--earr-orange);
}

.earr-hero .earr-rp-card .earr-rp-cmp.is-on {
	background: #ffe7d9;
}

.earr-rp-cmp-ico {
	width: 14px;
	height: 14px;
	background: var(--earr-faint);
	-webkit-mask-image: var(--earr-i-compare);
	mask-image: var(--earr-i-compare);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.earr-rp-cmp:hover .earr-rp-cmp-ico,
.earr-rp-cmp.is-on .earr-rp-cmp-ico {
	background: var(--earr-orange-dk);
}

.earr-rp-cmp.is-on {
	border-color: var(--earr-orange);
	background: var(--earr-orange-sf);
}

.earr-root .earr-rp-note {
	margin: 11px 4px 0;
	color: var(--earr-muted);
	font-size: 11px;
	line-height: 1.6;
}

/* --- 下部の情報バー ---
   4 項目を均等配置。アイコン + 短い文言だけで、主張は足さない。
   セレクタを .earr-hero .earr-hb にしているのは、リセットの
   `.earr-root ul { margin: 0 }` (詳細度 0,1,1) に margin-inline:auto を
   負けさせないため。単独の .earr-hb だと左寄せのままになる。 */
.earr-hero .earr-hb {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* 上のヒーロー内容 (.earr-hero-inner のガター内側) と左右を揃える。
	   max-width だけだと、画面幅が --earr-page 未満のときガターぶんずれる。 */
	width: calc(100% - var(--earr-gutter) * 2);
	max-width: calc(var(--earr-page) - var(--earr-gutter) * 2);
	margin: 28px auto 0;
	padding: 0;
	border: 1px solid var(--earr-line);
	border-radius: 14px;
	background: #fff;
	/* 右パネルと同じ 2 段。ただしこちらは主役ではないので浮かせ幅は半分に留める。 */
	box-shadow:
		0 1px 2px rgba(15, 23, 42, .04),
		0 8px 20px rgba(15, 23, 42, .05);
	list-style: none;
	overflow: hidden;
}

.earr-hb-item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 17px 20px;
	border-left: 1px solid var(--earr-line-2);
}

.earr-hb-item:first-child {
	border-left: 0;
}

.earr-hb-ico {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background: var(--earr-orange);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.earr-hb-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.earr-hb-t {
	color: var(--earr-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}

.earr-hb-v {
	color: var(--earr-ink);
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.4;
}

/* スクリーンリーダー専用テキスト (順位と比較ボタンの用途を読み上げに残す)。 */
.earr-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}
/* =========================================================
 * 信頼性訴求
 * ======================================================= */
.earr-trust {
	max-width: var(--earr-page);
	margin: 8px auto 0;
	padding-inline: var(--earr-gutter);
}

.earr-trust-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid var(--earr-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}

.earr-trust-item {
	display: flex;
	gap: 13px;
	padding: 22px 20px;
	border-left: 1px solid var(--earr-line-2);
}

.earr-trust-item:first-child {
	border-left: 0;
}

.earr-trust-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	background: var(--earr-orange);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.earr-icon-scale { -webkit-mask-image: var(--earr-i-scale); mask-image: var(--earr-i-scale); }
.earr-icon-calendar { -webkit-mask-image: var(--earr-i-calendar); mask-image: var(--earr-i-calendar); }
.earr-icon-shield { -webkit-mask-image: var(--earr-i-shield); mask-image: var(--earr-i-shield); }
.earr-icon-compare { -webkit-mask-image: var(--earr-i-compare); mask-image: var(--earr-i-compare); }
.earr-icon-return { -webkit-mask-image: var(--earr-i-return); mask-image: var(--earr-i-return); }
.earr-icon-refresh { -webkit-mask-image: var(--earr-i-refresh); mask-image: var(--earr-i-refresh); }
.earr-icon-data { -webkit-mask-image: var(--earr-i-data); mask-image: var(--earr-i-data); }

.earr-trust-t {
	font-size: 13.5px;
	font-weight: 700;
}

.earr-trust-item p {
	margin-top: 6px;
	color: var(--earr-muted);
	font-size: 12px;
	line-height: 1.75;
}

/* =========================================================
 * ランキング: タブ + フィルタ
 * ======================================================= */
/* ランキングは pg-mw (ガター済み) の内側にいるので、ここでガターを
   二重に持たない。980px 以下では earr-root を負マージンで全幅に戻すため、
   そのときだけ自前でガターを持つ (メディアクエリ側で付与)。 */
.earr-ranking {
	max-width: var(--earr-page);
	margin: 28px auto 0;
	padding-inline: 0;
}

/* 絞り込み一式 (2026-08-02 に枠を外した)。
 *
 * 以前は「白いカード (枠 + 角丸) の中に、枠つきのタブトラックと枠つきの項目が
 * 入れ子で並ぶ」形で、1 つの操作にたどり着くまでに枠を 3 枚くぐっていた。
 * 情報を選ぶ UI であることは並びと余白で分かるので、囲いは全部やめ、
 * 区切りは表との間に引く下の 1 本だけにする。
 * ここで消したのは見た目だけで、要素・id・イベントは 1 つも変えていない。 */
.earr-controls {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--earr-line);
}

.earr-controls-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	/* 左端はランキング表の左端と揃える (囲いが無いので内側 padding は要らない)。 */
	padding: 0 0 14px;
}

.earr-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.earr-tab {
	padding: 9px 17px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--earr-ink-2);
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.earr-tab:hover {
	background: var(--earr-orange-sf);
	color: #c2410c;
}

/* 選択中だけは塗る。下線だけにすると、表のすぐ上で「今どの並びを見ているか」が
   一目で分からなくなる (色は残す方針)。 */
.earr-tab[aria-selected="true"] {
	background: var(--earr-orange);
	color: #fff;
}

.earr-tab[aria-selected="true"]:hover {
	background: var(--earr-orange-dk);
	color: #fff;
}

.earr-search {
	position: relative;
	flex: 1 1 220px;
	min-width: 180px;
}

/* 入力欄も枠をやめて下線だけにする。高さは他の項目と揃える。 */
.earr-search input {
	width: 100%;
	padding: 8px 30px 8px 2px;
	border: 0;
	border-bottom: 1px solid var(--earr-line);
	border-radius: 0;
	background: transparent;
	color: var(--earr-ink);
	font-size: 13.5px;
	line-height: 1.4;
	transition: border-color .15s ease;
}

.earr-search input:focus {
	outline: none;
	border-bottom-color: var(--earr-orange);
	box-shadow: 0 1px 0 0 var(--earr-orange);
}

.earr-search-icon {
	position: absolute;
	top: 50%;
	right: 4px;
	width: 15px;
	height: 15px;
	transform: translateY(-50%);
	background: var(--earr-faint);
	-webkit-mask: var(--earr-i-search) center / contain no-repeat;
	mask: var(--earr-i-search) center / contain no-repeat;
	pointer-events: none;
}

/* 絞り込みは7項目。flex で内容幅にすると 1440px でも4行に折れてしまうので、
   等幅のグリッドに置いて PC では必ず1行に収める。
   枠を外したぶん、項目どうしの区別は gap を広げて付ける (10 → 22px)。 */
.earr-controls-bottom {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr)) auto auto;
	align-items: end;
	gap: 14px 22px;
	padding: 0;
}

/* ラベルを上・値を下に積む。横並びだと語の長い言語でラベルが潰れる。
   囲いはやめ、選べる場所であることは下線 1 本で示す。 */
.earr-field {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
	gap: 2px;
	padding: 0 0 7px;
	border: 0;
	border-bottom: 1px solid var(--earr-line);
	border-radius: 0;
	background: transparent;
	transition: border-color .15s ease;
}

/* キーボード操作でも「今どこにいるか」が分かるようにする
   (select 自体の outline は下で消しているため、下線を代わりに使う)。 */
.earr-field:focus-within {
	border-bottom-color: var(--earr-orange);
	box-shadow: 0 1px 0 0 var(--earr-orange);
}

.earr-field > span {
	overflow: hidden;
	color: var(--earr-muted);
	font-size: 11px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.earr-field select {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	border: 0;
	background: transparent;
	color: var(--earr-ink);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.earr-field select:focus {
	outline: none;
}

/* トグルは枠を外す。スイッチ自体が「操作するもの」だと分かる形なので、
   囲いは情報を足していなかった。 */
.earr-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0 0 7px;
	border: 0;
	color: var(--earr-ink-2);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

.earr-toggle input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.earr-toggle-ui {
	position: relative;
	width: 34px;
	height: 19px;
	border-radius: 999px;
	background: #cbd5e1;
	transition: background-color .15s ease;
}

.earr-toggle-ui::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	transition: transform .15s ease;
}

.earr-toggle input:checked + .earr-toggle-ui {
	background: var(--earr-orange);
}

.earr-toggle input:checked + .earr-toggle-ui::after {
	transform: translateX(15px);
}

.earr-toggle input:focus-visible + .earr-toggle-ui {
	outline: 2px solid rgba(255, 107, 53, .5);
	outline-offset: 2px;
}

.earr-reset {
	margin-left: auto;
	padding: 0 0 7px;
	border: 0;
	background: transparent;
	color: var(--earr-muted);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.earr-reset:hover {
	color: var(--earr-ink);
}

.earr-tabnote {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	padding: 0 2px;
}

.earr-tabnote p {
	color: var(--earr-muted);
	font-size: 12.5px;
	line-height: 1.7;
}

.earr-count {
	color: var(--earr-ink-2);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* =========================================================
 * 既存パーツとの接続
 *
 * post_content 側の既存 CSS は「旧ヒーローが padding-bottom:200px を持ち、
 * 次のバナーを margin-top:-160px で重ねる」前提で書かれている。
 * 新ヒーローにその余白は無いので、負マージンだけ打ち消す
 * (既存 CSS はメディアクエリでも -120px/-100px を指定するため !important を使う)。
 * ======================================================= */
.earr-root + .ea-ranking-banner-wrap {
	margin-top: 28px !important;
}

/* post_content 側の器を基準線に合わせる。
   これをやらないと banner=1200 / pg-mw=1300 で枠の左端が 50px ずれ、
   SP ではガターが 12 / 24 / 16 と段ごとに変わって見える。 */
.ea-ranking-banner-wrap,
.cv-free {
	max-width: var(--earr-page) !important;
	padding-inline: var(--earr-gutter) !important;
}

.pg-mw {
	max-width: var(--earr-page) !important;
	padding-inline: var(--earr-gutter) !important;
}

/* 出品募集も pg-mw の内側の器。自前のガターを持つと1段だけ内側にずれる。 */
.pg-mw > .pg-ven-wrap {
	padding-inline: 0 !important;
}

/* 旧レイアウトの2カラム用サイドバー (バナー・全期間TOP3・広告) を、
   全幅テーブルの下に横並びで置き直す。要素は削らない。 */
/* 広告2枠 (ads.affstrack.com) は配信が止まっていて画像が返らず
   (naturalWidth 0・curl も接続不能)、幅300×高さ315/1050 の枠だけが
   空白として残る。ユーザー許可のうえ非表示にする。
   post_content は触らず CSS だけなので、配信が戻ればこの1行を外せば復帰する。 */
.earr-side-grid .pg-sad {
	display: none;
}

.earr-side-grid {
	display: grid !important;
	/* 広告を落とすとバナーは4枚。3列だと1枚が次の行に取り残されるので4列に組む */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
	width: 100% !important;
	max-width: none !important;
	margin-top: 30px;
	flex: none !important;
	/* 元は 280px 幅の2カラム用サイドバーなので position:sticky;top:100px が
	   付いている。本文下の全幅3列帯に置き直した今は有害で、高さ 1,728px の帯が
	   画面に貼り付いたまま後続セクション (出品募集・カテゴリー・PICK UP) だけが
	   その上を流れていく。通常フローへ戻す。 */
	position: static !important;
	top: auto !important;
}

/* 旧レイアウトは 2カラムのサイドバーを 900px 以下で丸ごと畳む
   (post_content 側に @media (max-width:900px){.pg-side{display:none!important}} がある)。
   こちらは全幅テーブルの下に置き直した帯なので畳む理由が無く、SP では
   「全期間収益ランキング TOP3」(広告ではなくコンテンツ) とバナー4枚が丸ごと消えていた。
   同じ !important 同士では後に読まれる旧 CSS が勝つので、詳細度を1つ上げて表示に戻す。 */
@media (max-width: 900px) {
	.earr-side-grid.pg-side {
		display: grid !important;
	}
}

.earr-side-grid > * {
	min-width: 0;
}

.earr-side-grid img {
	max-width: 100%;
	height: auto;
}

.earr-side-grid .pg-s3 {
	grid-column: span 4;
	/* DOM 順のままだと1行目にバナーが2枚しか来ず残りが空になる。
	   TOP3 を先頭に出すとバナー4枚が1行にきれいに並ぶ。 */
	order: -1;
}

/* 全期間TOP3 は元々 280px のサイドバー用に縦積み (post_content 側の
   .top-three-container{flex-direction:column!important}) だが、
   全幅で使うと1枚あたり 1,200px に間延びする。横3列へ戻す。 */
.earr-side-grid .pg-s3 .top-three-container {
	flex-direction: row !important;
	gap: 12px !important;
	align-items: stretch !important;
}

.earr-side-grid .pg-s3 .top-three-item {
	flex: 1 1 0 !important;
	min-width: 0 !important;
}

/* 広告は 300px 固定幅の画像。セル (約 400px) の中で左に寄るので中央に置く。 */
.earr-side-grid .pg-sad {
	text-align: center;
}

.earr-side-grid .pg-sad > a {
	display: block;
	max-width: 300px;
	margin-inline: auto;
}

.earr-side-grid .pg-sad img {
	width: 100%;
	height: auto;
}

/* =========================================================
 * ランキング表 (PC)
 * ======================================================= */
.earr-table-wrap {
	margin-top: 12px;
	border: 1px solid var(--earr-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}

.earr-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
}

/* 見出しは折り返しを許す。nowrap にすると、日本語より語が長い言語
   (es の "Ganancia acumulada" など) で表の自然幅が器を 140px 超え、
   overflow で操作列が黙って消えていた。日本語は語中で切らせない。 */
.earr-table thead th {
	padding: 13px 8px;
	border-bottom: 1px solid var(--earr-line);
	background: var(--earr-soft);
	color: var(--earr-muted);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.earr-table th.earr-c-num,
.earr-table th.earr-c-score {
	text-align: right;
}

.earr-table tbody td {
	padding: 12px 8px;
	border-bottom: 1px solid var(--earr-line-2);
	font-size: 13px;
	vertical-align: middle;
}

.earr-table tbody tr:last-child td {
	border-bottom: 0;
}

/* 上位3件は左端の色帯だけだと一覧の中で埋もれる。地を薄く敷いて
   スクロール中でも「ここが上位」と分かるようにする。
   hover と比較中の指定より前に置き、そちらが勝つようにしてある。 */
.earr-table tbody tr.earr-top1 td { background: #fffcf2; }
.earr-table tbody tr.earr-top2 td { background: #fafbfc; }
.earr-table tbody tr.earr-top3 td { background: #fffaf5; }

.earr-table tbody tr:hover td {
	background: #fcfdff;
}

.earr-table tbody tr.is-compared td {
	background: var(--earr-orange-sf);
}

.earr-c-rank {
	width: 50px;
	padding-left: 12px !important;
}

/* ---- 列見出しのクリックソート ----
   ラベルは <th> の直下テキストのまま残し、ボタンはセル全面に重ねる。
   ラベルをボタンの中に入れると列が広がる: overflow-wrap:break-word は
   「行に収まらないとき折る」だけで要素の最小内容幅を縮めないため、
   <button> という箱の境界ができた途端に語を割れなくなる。実測では語の長い
   es で表が器を 19px 超え、overflow:hidden の内側で操作列が黙って切れた。
   矢印も負マージンで幅への寄与を 0 にしてある (width 6 + margin-left 2 = 8 を
   margin-right -8 で相殺)。負の側を大きくすると右揃えの列でセルの外へ 2px 出て、
   「見出しがはみ出している」判定 (th.scrollWidth > clientWidth) に引っかかる。
   合計をセル右 padding の 8px にちょうど収めているので、はみ出しは 0。
   → 9言語すべてで列幅と見出し高さが導入前と一致することを実測済み。
   並べ替えの状態は aria-sort が読み上げるので追加の文言を持たない
   (= 9言語の辞書を触らずに済む)。見た目も aria-sort から引いて、
   表示と読み上げがずれないようにしてある。 */
/* ボタンを重ねる基準にするための position。ここを
   `.earr-table thead th.earr-th-sort` と書くと詳細度 (0,3,1) が
   1201px 以上の sticky 指定 `.earr-table thead th` (0,2,1) を上回り、
   並べ替えできる9列だけ列見出しの貼り付きが黙って外れる (実測済み)。
   セレクタは (0,1,0) に留めて、sticky 側に必ず勝たせる。 */
.earr-th-sort {
	position: relative;
}

/* ラベルはこのボタンの「下」にある th のテキストなので、ボタンが少しでも
   地を塗ると見出しが消える。テーマは button:focus に橙の背景を当てており、
   実際にクリック直後の PF 列が橙一色になってラベルが読めなくなっていた。
   どの状態でも塗らせない。 */
.earr-sort,
.earr-sort:hover,
.earr-sort:focus,
.earr-sort:focus-visible,
.earr-sort:active {
	position: absolute;
	inset: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
}

.earr-table thead th.earr-th-sort:hover {
	background: #eef2f7;
	color: var(--earr-ink-2);
}

/* マウス操作の輪郭は出さず、キーボード操作のときだけ出す。 */
.earr-sort:focus {
	outline: none;
}

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

.earr-table thead th.earr-th-sort:not([aria-sort="none"]) {
	color: var(--earr-ink);
}

/* 上下の三角。既定は薄く両方出して「押せる列」の目印にし、
   並べ替え中はその向きだけを濃く残す。 */
.earr-sort-i {
	position: relative;
	display: inline-block;
	width: 6px;
	height: 9px;
	margin-left: 2px;
	margin-right: -8px;
	vertical-align: middle;
	opacity: .32;
}

.earr-sort-i::before,
.earr-sort-i::after {
	content: "";
	position: absolute;
	left: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
}

.earr-sort-i::before {
	top: 0;
	border-bottom: 4px solid currentColor;
}

.earr-sort-i::after {
	bottom: 0;
	border-top: 4px solid currentColor;
}

.earr-table thead th.earr-th-sort:not([aria-sort="none"]) .earr-sort-i {
	opacity: 1;
}

.earr-table thead th[aria-sort="ascending"] .earr-sort-i::after,
.earr-table thead th[aria-sort="descending"] .earr-sort-i::before {
	display: none;
}

.earr-table thead th[aria-sort="ascending"] .earr-sort-i::before {
	top: 2px;
}

.earr-table thead th[aria-sort="descending"] .earr-sort-i::after {
	bottom: 2px;
}

.earr-rank {
	display: inline-grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border-radius: 7px;
	background: var(--earr-line-2);
	color: var(--earr-ink-2);
	font-size: 12.5px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* 上位3件は金・銀・銅。王冠は小さく、数字より前に出さない。 */
.earr-top1 .earr-rank { background: #fdf3d6; color: #8a6206; }
.earr-top2 .earr-rank { background: #eef1f5; color: #4a5568; }
.earr-top3 .earr-rank { background: #f7ebe1; color: #85502a; }

.earr-top1 .earr-rank::before,
.earr-top2 .earr-rank::before,
.earr-top3 .earr-rank::before {
	content: "";
	width: 12px;
	height: 12px;
	background: currentColor;
	opacity: .75;
	-webkit-mask: var(--earr-crown) center / contain no-repeat;
	mask: var(--earr-crown) center / contain no-repeat;
}

.earr-table tbody tr.earr-top1 td:first-child { box-shadow: inset 3px 0 0 var(--earr-gold); }
.earr-table tbody tr.earr-top2 td:first-child { box-shadow: inset 3px 0 0 var(--earr-silver); }
.earr-table tbody tr.earr-top3 td:first-child { box-shadow: inset 3px 0 0 var(--earr-bronze); }

.earr-c-ea {
	min-width: 188px;
}

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

.earr-ea-thumb {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	overflow: hidden;
	border: 1px solid var(--earr-line);
	border-radius: 8px;
	background: #fff;
}

.earr-ea-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.earr-ea-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.earr-ea-name {
	overflow: hidden;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 21em;
}

.earr-ea:hover .earr-ea-name {
	color: var(--earr-orange);
}

/* EA名の下: 戦略タイプ・対象通貨・ナンピン/マーチンの有無。
   列を分けず1行に畳むので、要素が増えても表の列数は増えない。 */
.earr-ea-sub {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 3px;
	color: var(--earr-faint);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.earr-ea-pair {
	padding: 1px 5px;
	border: 1px solid var(--earr-line);
	border-radius: 4px;
	color: var(--earr-muted);
	font-weight: 600;
	white-space: nowrap;
}

.earr-ea-tf {
	padding: 1px 5px;
	border: 1px solid var(--earr-line);
	border-radius: 4px;
}

.earr-type,
.earr-risk,
.earr-badge {
	display: inline-block;
	margin: 1px 3px 1px 0;
	padding: 3px 7px;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	/* 語が長い言語 (es の "Seguimiento de tendencia" 等) で 144px まで伸び、
	   タイプ列が表を器の外へ押し出していた。語中では切らずに折り返す。 */
	white-space: normal;
	word-break: keep-all;
}

.earr-type {
	background: var(--earr-line-2);
	color: var(--earr-ink-2);
}

.earr-type-none {
	background: transparent;
	color: var(--earr-faint);
}

.earr-type-more {
	background: #fff;
	border: 1px solid var(--earr-line);
	color: var(--earr-muted);
	cursor: help;
}

/* リスクは「危険」と断定せず、特性として黄系で控えめに示す */
.earr-risk {
	background: #fff8e6;
	border: 1px solid #f6e0a8;
	color: #91690a;
	cursor: help;
}

.earr-risk-setup_required {
	background: #f2f6fd;
	border-color: #d6e2f7;
	color: #3c5a8a;
}

.earr-badge {
	cursor: help;
}

.earr-badge-ok {
	background: #e9f7ee;
	color: #17703c;
}

.earr-badge-info {
	background: #eef2f7;
	color: #47576b;
}

.earr-badge-warn {
	background: #fdf0e7;
	color: #9a4a12;
}

.earr-c-num,
.earr-c-score {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.earr-c-num {
	text-align: right;
	font-weight: 600;
}

/* 累計損益セル: 主値の下に月平均を小さく添える (列は増やさない)。 */
.earr-num-main {
	display: block;
}

.earr-num-sub {
	display: block;
	margin-top: 2px;
	color: var(--earr-faint);
	font-size: 10.5px;
	font-weight: 500;
}

.earr-c-score {
	width: 92px;
	text-align: center;
}

.earr-score-v {
	display: block;
	color: var(--earr-orange);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.1;
}

/* 0〜10 のスコアをそのまま長さで示す。星にすると別の 5 段階評価に見えるので使わない。 */
.earr-score-bar {
	display: block;
	width: 56px;
	height: 4px;
	margin: 5px auto 0;
	border-radius: 999px;
	background: var(--earr-line-2);
	overflow: hidden;
}

.earr-score-bar i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--earr-orange);
}

.earr-c-detail {
	width: 104px;
}

.earr-c-detail .earr-mini + .earr-mini {
	margin-top: 4px;
}

.earr-c-act {
	width: 112px;
	padding-right: 12px !important;
}

.earr-mini {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	padding: 7px 6px;
	border: 1px solid var(--earr-line);
	border-radius: 5px;
	background: #fff;
	color: var(--earr-ink-2);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	/* nowrap だと "Descarga gratis" のような長い文言で操作列が 126px→225px に
	   膨らみ、表ごと器からはみ出して右端が切れる。折り返して幅を守る。 */
	white-space: normal;
	word-break: keep-all;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.earr-mini:hover {
	border-color: var(--earr-faint);
}

/* テーマ側の a{color} に負けないよう色は明示する */
/* 表の中でボタンの色は3種類に絞る。
   白 = 詳細 (中立) / オレンジ塗り = 無料ダウンロード (主導線) / 薄オレンジ = 比較。
   詳細を黒で塗ると 20 行ぶん黒帯が並び、どれが主導線か分からなくなる。 */
.earr-root .earr-mini-primary,
.earr-root a.earr-mini-primary {
	background: #fff;
	border-color: var(--earr-line);
	color: var(--earr-ink-2) !important;
}

.earr-root .earr-mini-primary:hover,
.earr-root a.earr-mini-primary:hover {
	border-color: var(--earr-orange);
	color: var(--earr-orange) !important;
}

.earr-root .earr-mini-dl,
.earr-root button.earr-mini-dl {
	background: var(--earr-orange);
	border-color: var(--earr-orange);
	color: #fff !important;
}

.earr-root .earr-mini-dl:hover,
.earr-root button.earr-mini-dl:hover {
	background: var(--earr-orange-dk);
	border-color: var(--earr-orange-dk);
	color: #fff !important;
}

/* 「無料DL」の押下中 / 完了 / 失敗。文言そのものが入れ替わるので、
   色は状態を補強するだけに留める (色だけで結果を伝えない)。
   幅が変わって行が揺れないよう、通常時と同じ padding のままにする。 */
.earr-root .earr-mini-dl.is-loading,
.earr-root button.earr-mini-dl.is-loading {
	opacity: .65;
	cursor: progress;
}

.earr-root .earr-mini-dl.is-done,
.earr-root button.earr-mini-dl.is-done {
	background: #16a34a;
	border-color: #16a34a;
}

.earr-root .earr-mini-dl.is-error,
.earr-root button.earr-mini-dl.is-error {
	background: #dc2626;
	border-color: #dc2626;
}

.earr-root .earr-cmp-add {
	background: var(--earr-orange-sf);
	border-color: #ffd0bb;
	color: var(--earr-orange-dk);
}

.earr-root .earr-cmp-add:hover {
	border-color: var(--earr-orange);
}

.earr-acts-sub {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin-top: 4px;
}

.earr-acts-sub:only-child {
	margin-top: 0;
}

.earr-cmp-add.is-on {
	background: var(--earr-orange);
	border-color: var(--earr-orange);
	color: #fff;
}

.earr-cmp-ico {
	margin-right: 2px;
}

.earr-cmp-add.is-shake {
	animation: earr-shake .35s;
}

@keyframes earr-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

/* =========================================================
 * SP カード (PC では隠す)
 * ======================================================= */
.earr-cards {
	display: none;
}

.earr-card {
	padding: 14px;
	border: 1px solid var(--earr-line);
	border-radius: 12px;
	background: #fff;
}

.earr-card + .earr-card {
	margin-top: 10px;
}

.earr-card.is-compared {
	border-color: var(--earr-orange);
	background: var(--earr-orange-sf);
}

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

.earr-card-hd .earr-ea {
	flex: 1 1 auto;
	min-width: 0;
}

.earr-card-score {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	line-height: 1.15;
}

.earr-card-score b {
	color: var(--earr-orange);
	font-size: 19px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.earr-card-score i {
	color: var(--earr-faint);
	font-size: 9.5px;
	font-style: normal;
	white-space: nowrap;
}

/* カードでは EA 名の下に最大3つのタグが縦に積まれる。表と同じ寸法だと
   ヘッダーだけで 3 行を使うので、ここだけ一回り小さくする。 */
.earr-card .earr-ea-sub .earr-type,
.earr-card .earr-ea-sub .earr-risk,
.earr-card .earr-ea-sub .earr-ea-pair {
	padding: 1px 5px;
	font-size: 10px;
}

.earr-card-tags {
	margin-top: 9px;
}

.earr-card-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px 10px;
	margin-top: 11px;
	padding-top: 11px;
	border-top: 1px solid var(--earr-line-2);
}

.earr-card-stats dt {
	color: var(--earr-muted);
	font-size: 10.5px;
}

.earr-card-stats dd {
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.earr-card-act {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 6px;
	margin-top: 12px;
	align-items: start;
}

.earr-card-act .earr-mini {
	padding: 11px 6px;
}

.earr-card-act .earr-acts-sub {
	margin-top: 0;
	gap: 6px;
}

/* =========================================================
 * 空表示 / ページャ / 注記
 * ======================================================= */
.earr-empty {
	margin-top: 18px;
	padding: 34px 20px;
	border: 1px dashed var(--earr-line);
	border-radius: 12px;
	color: var(--earr-muted);
	font-size: 13.5px;
	text-align: center;
}

.earr-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 18px;
}

.earr-page {
	min-width: 34px;
	height: 34px;
	padding: 0 9px;
	border: 1px solid var(--earr-line);
	border-radius: var(--earr-r-sm);
	background: #fff;
	color: var(--earr-ink-2);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.earr-page:hover:not(:disabled) {
	border-color: var(--earr-faint);
}

.earr-page.is-current {
	background: var(--earr-orange);
	border-color: var(--earr-orange);
	color: #fff;
}

.earr-page:disabled {
	opacity: .4;
	cursor: default;
}

.earr-page-gap {
	color: var(--earr-faint);
	font-size: 12px;
}

.earr-notes {
	margin-top: 16px;
}

.earr-notes p {
	color: var(--earr-faint);
	font-size: 11.5px;
	line-height: 1.8;
}

/* =========================================================
 * スコアの見方
 * ======================================================= */
.earr-guide {
	max-width: none;
	margin: 26px 0 0;
	padding: 18px 20px 16px;
	border: 1px solid var(--earr-line);
	border-radius: 14px;
	background: var(--earr-soft);
}

.earr-guide-hd {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 800;
}

.earr-guide-ico {
	width: 17px;
	height: 17px;
	background: var(--earr-orange);
	-webkit-mask: var(--earr-i-info) center / contain no-repeat;
	mask: var(--earr-i-info) center / contain no-repeat;
}

.earr-guide-lead {
	margin-top: 5px;
	color: var(--earr-muted);
	font-size: 12.5px;
}

.earr-guide-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 14px;
}

.earr-guide-list li {
	display: flex;
	gap: 10px;
	padding: 13px 14px;
	border: 1px solid var(--earr-line);
	border-radius: var(--earr-r);
	background: #fff;
}

.earr-guide-mark {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background: var(--earr-orange);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.earr-guide-return { -webkit-mask-image: var(--earr-i-return); mask-image: var(--earr-i-return); }
.earr-guide-stable { -webkit-mask-image: var(--earr-i-shield); mask-image: var(--earr-i-shield); }
.earr-guide-data { -webkit-mask-image: var(--earr-i-data); mask-image: var(--earr-i-data); }
/* 4 軸 (収益効率 / 信頼度 / 継続性 / リスク) */
.earr-guide-efficiency { -webkit-mask-image: var(--earr-i-return); mask-image: var(--earr-i-return); }
.earr-guide-reliability { -webkit-mask-image: var(--earr-i-shield); mask-image: var(--earr-i-shield); }
.earr-guide-continuity { -webkit-mask-image: var(--earr-i-clock); mask-image: var(--earr-i-clock); }
.earr-guide-risk { -webkit-mask-image: var(--earr-i-alert); mask-image: var(--earr-i-alert); }

.earr-guide-list h3 {
	font-size: 13px;
	font-weight: 700;
}

.earr-guide-list p {
	margin-top: 5px;
	color: var(--earr-muted);
	font-size: 11.5px;
	line-height: 1.7;
}

.earr-guide-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--earr-orange);
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================
 * FAQ
 * ======================================================= */
.earr-faq {
	max-width: none;
	margin: 34px 0 0;
	padding: 22px 24px 20px;
	border: 1px solid var(--earr-line);
	border-radius: 14px;
	background: #fff;
}

.earr-faq-hd {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 17px;
	font-weight: 800;
}

.earr-faq-ico {
	width: 19px;
	height: 19px;
	background: var(--earr-orange);
	-webkit-mask: var(--earr-i-help) center / contain no-repeat;
	mask: var(--earr-i-help) center / contain no-repeat;
}

.earr-faq-item {
	border-top: 1px solid var(--earr-line-2);
}

.earr-faq-item:first-child {
	border-top: 0;
}

.earr-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 2px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.earr-faq-item summary::-webkit-details-marker {
	display: none;
}

.earr-faq-item summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--earr-faint);
	border-bottom: 2px solid var(--earr-faint);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .18s ease;
}

.earr-faq-item[open] summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.earr-faq-a {
	padding: 0 2px 16px;
	color: var(--earr-ink-2);
	font-size: 13px;
	line-height: 2;
}

/* =========================================================
 * モーダル
 * ======================================================= */
.earr-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(15, 23, 42, .5);
}

.earr-modal[hidden] {
	display: none;
}

.earr-modal-box {
	display: flex;
	flex-direction: column;
	width: min(880px, 100%);
	max-height: min(84vh, 760px);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .5);
	overflow: hidden;
}

.earr-modal-narrow {
	width: min(620px, 100%);
}

.earr-modal-hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--earr-line);
}

.earr-modal-hd h2 {
	font-size: 15.5px;
	font-weight: 800;
}

/* テーマ側の button / button:focus スタイルに負けないよう明示する */
.earr-root .earr-modal-x,
.earr-root .earr-modal-x:focus,
.earr-root .earr-modal-x:active {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--earr-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	outline: none;
}

.earr-root .earr-modal-x:hover {
	background: var(--earr-line-2);
	color: var(--earr-ink);
}

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

.earr-modal-body {
	padding: 18px;
	overflow: auto;
}

.earr-prose {
	color: var(--earr-ink-2);
	font-size: 13px;
	line-height: 2;
}

.earr-cmp-wrap {
	overflow-x: auto;
}

.earr-cmp-tbl {
	width: 100%;
	border-collapse: collapse;
}

.earr-cmp-tbl th,
.earr-cmp-tbl td {
	padding: 11px 12px;
	border-bottom: 1px solid var(--earr-line-2);
	font-size: 13px;
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.earr-cmp-tbl thead th {
	border-bottom: 1px solid var(--earr-line);
	vertical-align: bottom;
}

.earr-cmp-tbl th[scope="row"],
.earr-cmp-tbl thead th:first-child {
	color: var(--earr-muted);
	font-size: 11.5px;
	font-weight: 700;
	text-align: left;
}

.earr-cmp-h {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 800;
	text-align: right;
	white-space: normal;
	max-width: 12em;
}

.earr-cmp-h img {
	width: 34px;
	height: 34px;
	border: 1px solid var(--earr-line);
	border-radius: 7px;
	object-fit: contain;
}

.earr-cmp-tbl td.is-best {
	position: relative;
	background: var(--earr-orange-sf);
	color: var(--earr-orange-dk);
	font-weight: 800;
}

.earr-cmp-link {
	padding-top: 14px !important;
}

.earr-cmp-link .earr-mini {
	width: auto;
	min-width: 96px;
	margin-left: auto;
}

/* =========================================================
 * 比較セクション (一覧の下)
 *
 * ランキングと同じく pg-mw の内側に置くので、ここでガターは持たない。
 * ======================================================= */
.earr-compare {
	margin: 30px auto 0;
	padding: 20px 22px 22px;
	border: 1px solid var(--earr-line);
	border-radius: 14px;
	background: var(--earr-soft);
}

.earr-compare-hd {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.earr-compare-hd h2 {
	font-size: 20px;
	font-weight: 800;
}

.earr-compare-hd p {
	margin-top: 6px;
	color: var(--earr-muted);
	font-size: 12.5px;
	line-height: 1.8;
}

.earr-cmp-open {
	padding: 12px 22px;
	font-size: 13.5px;
}

.earr-cmp-open:disabled {
	background: var(--earr-line);
	color: var(--earr-faint);
	cursor: not-allowed;
}

.earr-cmp-slots {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 16px;
}

.earr-cmp-slot {
	display: flex;
	flex-direction: column;
	padding: 13px 14px 14px;
	border: 1px solid var(--earr-line);
	border-top: 3px solid var(--earr-cmp-c, var(--earr-orange));
	border-radius: 12px;
	background: #fff;
}

/* 未選択の枠。押すと一覧へ戻すだけで、ここでは選ばせない
   (選ぶ操作の入口を一覧の「比較に追加」に一本化する)。 */
.earr-cmp-slot.is-empty {
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 208px;
	border: 1px dashed var(--earr-line);
	color: var(--earr-muted);
	cursor: pointer;
	text-align: center;
}

.earr-cmp-slot.is-empty:hover {
	border-color: var(--earr-orange);
	color: var(--earr-orange);
}

.earr-cmp-plus {
	font-size: 26px;
	font-weight: 300;
	line-height: 1;
}

.earr-cmp-empty-t {
	font-size: 13px;
	font-weight: 700;
}

.earr-cmp-empty-h {
	color: var(--earr-faint);
	font-size: 11px;
}

.earr-cmp-slot-hd {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.earr-cmp-slot-name {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	word-break: break-word;
}

.earr-cmp-slot-name:hover {
	color: var(--earr-orange);
}

.earr-cmp-x {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--earr-line);
	border-radius: 50%;
	background: #fff;
	color: var(--earr-muted);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.earr-cmp-x:hover {
	border-color: var(--earr-down);
	color: var(--earr-down);
}

.earr-cmp-chart {
	margin: 12px 0 0;
}

.earr-spark {
	display: block;
	width: 100%;
	height: 56px;
}

.earr-cmp-chart figcaption {
	margin-top: 5px;
	color: var(--earr-faint);
	font-size: 10.5px;
}

.earr-cmp-nochart {
	display: grid;
	place-items: center;
	height: 56px;
	color: var(--earr-faint);
}

.earr-cmp-stats {
	margin-top: 11px;
	padding-top: 10px;
	border-top: 1px solid var(--earr-line-2);
}

.earr-cmp-stats > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 3px 0;
}

.earr-cmp-stats dt {
	color: var(--earr-muted);
	font-size: 11.5px;
	white-space: nowrap;
}

.earr-cmp-stats dd {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* =========================================================
 * 比較トレイ (固定)
 * ======================================================= */
.earr-tray {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--earr-line);
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(8px);
	box-shadow: 0 -8px 28px -20px rgba(15, 23, 42, .5);
}

.earr-tray[hidden] {
	display: none;
}

.earr-tray-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}

.earr-tray-count {
	flex: 0 0 auto;
	color: var(--earr-muted);
	font-size: 12px;
	font-weight: 700;
}

.earr-tray-num {
	color: var(--earr-orange);
	font-size: 20px;
}

.earr-tray-slots {
	display: flex;
	flex: 1 1 auto;
	gap: 10px;
	overflow-x: auto;
}

.earr-tray-slot {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	min-width: 210px;
	padding: 9px 30px 9px 10px;
	border: 1px solid var(--earr-line);
	border-radius: var(--earr-r);
	background: #fff;
}

.earr-tray-thumb {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	overflow: hidden;
	border: 1px solid var(--earr-line);
	border-radius: 7px;
}

.earr-tray-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.earr-tray-meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.earr-tray-name {
	overflow: hidden;
	max-width: 15em;
	font-size: 12px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.earr-tray-kv {
	display: flex;
	gap: 6px;
	font-size: 10.5px;
	font-variant-numeric: tabular-nums;
}

.earr-tray-kv i {
	color: var(--earr-faint);
	font-style: normal;
}

.earr-tray-kv b {
	font-weight: 700;
}

.earr-tray-x {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: var(--earr-faint);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.earr-tray-x:hover {
	background: var(--earr-line-2);
	color: var(--earr-ink);
}

.earr-tray-go {
	flex: 0 0 auto;
	padding: 14px 26px;
}

.earr-tray-go:disabled {
	background: var(--earr-line);
	color: var(--earr-faint);
	cursor: default;
}

/* =========================================================
 * レスポンシブ
 * ======================================================= */
/* テーブルは横スクロールで凌がず、カードへ組み替える。
   表の自然幅は約 1,100px。器 (.earr-ranking の内側) がそれを下回る幅では
   overflow:hidden で右端 (操作列) が黙って切れる。
   器が 1,150px を確保できるのはウィンドウ 1,198px 以上なので 1,200px で切り替える。 */
@media (max-width: 1200px) {
	.earr-table-wrap {
		display: none;
	}

	.earr-cards {
		display: block;
		margin-top: 12px;
	}

	/* 6項目を横に並べると 1 枠が 150px を切って選択肢が読めない。3列に折る。 */
	.earr-controls-bottom {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.earr-toggle {
		grid-column: span 2;
	}
}

/* 164件を上から追うとき、列の意味を見失わないよう見出し行を貼り付ける。
   overflow:hidden はスクロールコンテナを作って sticky を殺すので clip にする
   (未対応ブラウザは hidden のまま = 貼り付かないだけで崩れない)。 */
@media (min-width: 1201px) {
	.earr-table-wrap {
		overflow: clip;
	}

	.earr-table thead th {
		position: sticky;
		top: var(--earr-header);
		z-index: 3;
		/* 貼り付いている間、下の行と地続きに見えないよう影で段差をつける */
		box-shadow: 0 6px 12px -9px rgba(15, 23, 42, .45);
	}
}

/* 中間幅ではカードが1列だと間延びするので2列に組む */
@media (min-width: 700px) and (max-width: 1200px) {
	.earr-cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		align-items: start;
	}

	.earr-cards > * {
		min-width: 0;
	}

	.earr-card + .earr-card {
		margin-top: 0;
	}
}

@media (max-width: 980px) {
	/* 比較は3枠を横に並べてこそ意味があるが、980px を切ると1枠 300px を
	   割ってチャートが潰れるので縦積みにする。 */
	.earr-cmp-slots {
		grid-template-columns: 1fr;
	}

	.earr-cmp-slot.is-empty {
		min-height: 92px;
	}

	.earr-compare {
		margin-inline: var(--earr-gutter);
	}

	.earr-side-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.earr-side-grid .pg-s3 {
		grid-column: span 2;
	}

	.earr-tray-inner {
		padding-inline: 16px;
	}

	.earr-tray-slot {
		min-width: 178px;
	}

	/* ランキングだけ pg-mw のガターの内側にあり、全幅で出るヒーロー/
	   バナーより一段狭くなる。SP/タブレットではその差が「本文だけ窮屈」に
	   見えるので、ガターぶん外へ引いて器の幅を揃える。 */
	.pg-mw > .earr-root {
		margin-inline: calc(var(--earr-gutter) * -1);
	}

	/* 全幅に戻したぶん、ランキング側が自前でガターを持つ。
	   ガイドと FAQ は枠つきカードなので、画面端に張り付かないよう
	   同じガターを margin で持たせる。 */
	.earr-ranking {
		padding-inline: var(--earr-gutter);
	}

	.earr-guide,
	.earr-faq {
		margin-inline: var(--earr-gutter);
	}
}


@media (max-width: 1100px) {
	.earr-guide-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.earr-hero-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* 1 カラムになるとヒーローが 2 倍近く縦に伸びる (820px 幅で 982px)。
	   center center のままだと画像のいちばん白い中央だけが映って背景が消える。
	   cover は保ったまま下端合わせにすると、この比率では画像 1 枚がちょうど
	   縦に収まり (実測 1745 × 982)、白い上半分がコピーの背後、波の下半分が
	   カードの下に来る。 */
	.earr-hero {
		background-position: center bottom;
	}

	/* cover のまま下端合わせにしたので、波が濃い画像の下半分が器を満たす。
	   そのぶんベールは上から効かせて、コピーの背後だけ白に戻す。 */
	.earr-hero-bg {
		background:
			linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .62) 22%, rgba(255, 255, 255, .18) 48%, rgba(255, 255, 255, 0) 64%),
			linear-gradient(180deg, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, .55) 97%, rgba(255, 255, 255, .92) 100%);
	}

	/* 1 カラムでは 2 カラム時の 24em (約 370px) は狭すぎて 3 行以上に折れる。
	   ただし none にすると器の全幅 (1100px 幅で 1052px) まで 1 行が伸びて、
	   行末から次の行頭へ目が戻れなくなる。この帯だけ上限を緩める。 */
	.earr-root .earr-hero-desc {
		max-width: 40em;
	}

	/* 1 カラムになるとカードが横に広がり、4 つの指標が離れて読み比べにくい。
	   指標のまとまりだけ幅を止める (カード自体は広いまま)。 */
	.earr-root .earr-rp-stats {
		max-width: 520px;
	}

	/* 4 列のままだと 1 項目あたり 200px を切り、「初回0.01ロット統一」が折り返す。
	   セレクタは本体側と同じ .earr-hero .earr-hb にする (0,1,0 だと負けて効かない)。 */
	.earr-hero .earr-hb {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.earr-hb-item:nth-child(odd) {
		border-left: 0;
	}

	.earr-hb-item:nth-child(n + 3) {
		border-top: 1px solid var(--earr-line-2);
	}

	.earr-trust-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.earr-trust-item:nth-child(3) {
		border-left: 0;
	}

	.earr-trust-item:nth-child(n + 3) {
		border-top: 1px solid var(--earr-line-2);
	}
}

@media (max-width: 720px) {
	.earr-hero {
		padding: 30px 0 28px;
		/* 幅 720px 以下でしか使わないので軽い方を読む (113KB → 24KB)。 */
		background-image: url("hero-bg-mobile.webp");
		/* 器が 390 : 1463 と極端に縦長なので cover は使わない。
		   cover にすると幅 2600px 相当 (元画像 960px の 2.7 倍) まで引き伸ばした
		   うえで中央の白い縦帯だけが映り、背景が事実上消える。
		   また下端に寄せるとランキングカードと
		   情報バーで全部隠れてしまう (実測)。
		   横幅の 1.35 倍で上端に置き、コピーと CTA の周りを画像の上半分
		   (白 → 淡いオレンジの流れ) が通るようにする。縦横比は保つ。 */
		background-size: 135% auto;
		background-position: center top;
	}

	/* テキストが画面幅いっぱいまで来るぶん、全体に薄く白を重ねて装飾を沈める。
	   下端はそのまま白へ溶かす。 */
	.earr-hero-bg {
		background:
			linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .42) 40%, rgba(255, 255, 255, .30) 70%, rgba(255, 255, 255, .15) 88%),
			linear-gradient(180deg, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, .55) 97%, rgba(255, 255, 255, .92) 100%);
	}

	.earr-root .earr-hero-title {
		font-size: clamp(26px, 7.2vw, 34px);
		line-height: 1.24;
	}

	.earr-root .earr-hero-desc {
		margin-top: 14px;
		font-size: 14.5px;
		line-height: 1.85;
	}

	/* モバイルは主 CTA → 副 CTA → 特徴 の順 (DOM 順のまま)。
	   ボタンは 1 行 1 つにして、主 CTA を最初に触れる位置に置く。 */
	.earr-hero-cta {
		margin-top: 20px;
		gap: 10px;
	}

	.earr-hero-cta .earr-btn {
		flex: 1 1 100%;
		justify-content: center;
		padding: 14px 18px;
	}

	/* 2 列 × 2 行への切り替えは、同じ形になる 1101〜1300px と共通のブロックで
	   指定してある (ヒーローの .earr-feats の直後)。ここでは上下の間隔だけ詰める。 */
	.earr-root .earr-feats {
		margin-top: 22px;
	}

	.earr-root .earr-hero-note {
		margin-top: 16px;
	}

	.earr-rp {
		padding: 13px 13px 10px;
		border-radius: 14px;
	}

	.earr-rp-t {
		font-size: 15.5px;
	}

	/* カードは横幅に押し込まず縦に組み替える。指標は 2 列、
	   スコアとスパークラインは 2 行目に回して幅を確保する。 */
	.earr-rp-card {
		grid-template-columns: 34px 40px minmax(0, 1fr);
		/* カードが 2 行になるので中央揃えだとサムネだけ下がって EA 名と離れる。
		   上端で揃えて「順位 → サムネ → 名前」を 1 本の視線で読ませる。 */
		align-items: start;
		gap: 10px;
		padding: 11px 12px 11px 0;
	}

	/* 3 列に落とすので、比較ボタンは最終行の右端に単独で置く
	   (スコアとスパークラインの行に押し込むと英語ラベルで幅が足りない)。 */
	.earr-rp-cmp {
		grid-column: 1 / -1;
		justify-self: end;
		margin-top: 2px;
	}

	.earr-rp-rank {
		font-size: 18px;
	}

	.earr-rp-1 .earr-rp-rank::before {
		width: 13px;
		height: 13px;
	}

	.earr-rp-thumb {
		width: 40px;
		height: 40px;
	}

	.earr-root .earr-rp-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 12px;
	}

	.earr-rp-side {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		padding-left: 44px;
	}

	.earr-rp-spark {
		width: 100%;
		max-width: 150px;
	}

	.earr-rp-spark svg {
		height: 30px;
	}

	.earr-hero .earr-hb {
		margin: 26px auto 0;
	}

	.earr-hb-item {
		gap: 10px;
		padding: 14px 14px;
	}

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

	.earr-hb-t {
		font-size: 10.5px;
	}

	.earr-hb-v {
		font-size: 12.5px;
	}

	/* 360px では 2 列だと 1 項目 156px しか無く、「初回0.01ロット統一」が
	   器から溢れる (実測 sw=25 / cw=23)。この幅だけ 1 列に落とす。 */
	@media (max-width: 400px) {
		.earr-hero .earr-hb {
			grid-template-columns: 1fr;
		}

		.earr-hb-item {
			border-left: 0;
		}

		.earr-hb-item + .earr-hb-item {
			border-top: 1px solid var(--earr-line-2);
		}
	}

	.earr-trust-list {
		grid-template-columns: 1fr;
	}

	.earr-trust-item {
		border-left: 0;
	}

	.earr-trust-item + .earr-trust-item {
		border-top: 1px solid var(--earr-line-2);
	}

	/* 5タブの自然幅は 457px。横スクロールに逃がすと「高収益」「新着」が
	   画面外に残って気付けないので、折り返して全部見せる。 */
	.earr-tabs {
		width: 100%;
		overflow-x: visible;
		flex-wrap: wrap;
	}

	.earr-tab {
		flex: 1 1 auto;
		padding: 10px 8px;
		font-size: 12.5px;
	}

	/* 枠が無くなったので、幅いっぱいの button は中央のテキストが宙に浮いて見える。
	   トグルの右端 (= 列の右端) に揃える。 */
	.earr-reset {
		margin-left: 0;
		justify-self: end;
	}

	.earr-controls-bottom {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* 枠を外したので、隣の項目と混ざらないよう横の間隔だけ広く取る。 */
		gap: 12px 18px;
	}

	/* トグルとリセットは幅いっぱい (トグルのラベルが長く、2列だと必ず2行になる)。 */
	.earr-toggle,
	.earr-reset {
		grid-column: span 2;
	}

	.earr-field {
		padding: 0 0 6px;
	}

	.earr-field > span {
		flex: 0 0 auto;
		overflow: visible;
		font-size: 11px;
		text-overflow: clip;
		white-space: nowrap;
	}

	.earr-field select {
		width: 100%;
		max-width: none;
		min-width: 0;
		font-size: 12.5px;
		text-align: left;
		text-align-last: left;
	}

	.earr-toggle {
		flex-direction: row-reverse;
		justify-content: flex-end;
		min-width: 0;
		gap: 8px;
		padding: 2px 0 6px;
	}

	.earr-toggle > span:last-child {
		flex: 1 1 auto;
		font-size: 12px;
	}

	.earr-card-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.earr-guide-list {
		grid-template-columns: 1fr;
	}

	.earr-guide,
	.earr-faq {
		padding-inline: 16px;
	}

	.earr-modal {
		padding: 12px;
	}

	.earr-modal-body {
		padding: 14px;
	}

	.earr-side-grid {
		grid-template-columns: 1fr;
	}

	.earr-side-grid .pg-s3 {
		grid-column: span 1;
	}

	.earr-side-grid .pg-s3 .top-three-container {
		flex-direction: column !important;
	}

	/* 上で column に変えた結果、横3列用に入れた flex:1 1 0 が
	   「高さを3等分」の意味に変わる。.top-three-item は overflow:hidden なので
	   flex item の自動最小サイズ (min-height:auto) が 0 に無効化され、
	   中身 211px が高さ 2px に潰れて中身が全部切れる。内容で高さを決めさせる。 */
	.earr-side-grid .pg-s3 .top-three-item {
		flex: 0 0 auto !important;
	}

	.earr-tray {
		padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
	}

	/* CTA を横に置くとスロットが潰れるので、SP では2段にする */
	.earr-tray-inner {
		flex-wrap: wrap;
		gap: 8px;
	}

	.earr-tray-slots {
		flex: 1 1 100%;
		order: 1;
	}

	.earr-tray-go {
		flex: 1 1 100%;
		order: 2;
	}

	.earr-tray-count {
		display: none;
	}

	.earr-tray-slot {
		min-width: 148px;
		padding: 7px 26px 7px 8px;
	}

	.earr-tray-kv:nth-of-type(2) {
		display: none;
	}

	.earr-tray-go {
		padding: 13px 18px;
		font-size: 13.5px;
	}
}