@charset "UTF-8";
/* ==========================================================================
   rank-cta : 記事下ランキングCTA（汎用）
   --------------------------------------------------------------------------
   使い方
     <aside class="rcta" data-variant="best3" data-tone="gold"> ... </aside>

     data-variant : best3 | best5   … レイアウト（1位の見せ方が変わる）
     data-tone    : gold | clean | dark | warm | pop | mono
                    … 配色トーン。CSS変数だけを上書きするので構造は不変。

   トーンを増やすときは「§3 トーン定義」に変数ブロックを1つ足すだけでよい。
   構造CSS（§2）は触らないこと。
   ========================================================================== */

/* ==========================================================================
   §1 既定変数（gold 相当のニュートラル値）
   ========================================================================== */

.rcta {
	/* 面 */
	--rcta-bg: #ffffff;
	--rcta-surface: #ffffff;
	--rcta-surface-alt: #f7f7f5;
	--rcta-border: #e5e2da;
	--rcta-border-strong: #d8d2c4;
	--rcta-shadow: 0 2px 10px rgba(20, 18, 12, 0.06);
	--rcta-shadow-top: 0 8px 26px rgba(20, 18, 12, 0.12);

	/* 文字 */
	--rcta-text: #1f1d18;
	--rcta-muted: #6d6a62;
	--rcta-heading: #14120d;

	/* アクセント */
	--rcta-accent: #b9922f;
	--rcta-accent-weak: #f4ecd6;
	--rcta-accent-text: #7a5f14;

	/* ボタン */
	--rcta-btn-bg: linear-gradient(180deg, #f0a83a 0%, #d9862a 100%);
	--rcta-btn-bg-hover: linear-gradient(180deg, #f7b64c 0%, #e0913a 100%);
	--rcta-btn-text: #ffffff;
	--rcta-btn-shadow: 0 3px 0 #a5641c;

	/* メダル（1〜3位） */
	--rcta-medal-1: linear-gradient(135deg, #f6d365 0%, #c9982a 100%);
	--rcta-medal-2: linear-gradient(135deg, #dfe3e8 0%, #a9b1ba 100%);
	--rcta-medal-3: linear-gradient(135deg, #e3b98a 0%, #b3763f 100%);
	--rcta-medal-n: linear-gradient(135deg, #cfcbc0 0%, #a6a196 100%);
	--rcta-medal-text: #ffffff;

	/* 星 */
	--rcta-star: #e8a33d;
	--rcta-star-off: #ded9cd;

	/* 形 */
	--rcta-radius: 14px;
	--rcta-radius-sm: 8px;
	--rcta-gap: 16px;
	--rcta-pad: clamp(16px, 3vw, 24px);
	--rcta-font: inherit;

	/* 星描画用（JSは使わない） */
	--rcta-rate: 0;
}

/* ==========================================================================
   §2 構造（全トーン共通・ここは編集しない）
   ========================================================================== */

.rcta,
.rcta * {
	box-sizing: border-box;
}

.rcta {
	/* 横型へ切り替える判定は「画面幅」ではなく「このブロック自身の幅」で行う。
	   記事カラムが730px前後の媒体でPC幅を見て横型にすると、本文列が潰れる。 */
	container-type: inline-size;
	container-name: rcta;

	margin: 40px 0;
	padding: var(--rcta-pad);
	border: 1px solid var(--rcta-border);
	border-radius: var(--rcta-radius);
	background: var(--rcta-bg);
	color: var(--rcta-text);
	font-family: var(--rcta-font);
	font-size: 16px;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
}

/* --- ヘッダー ------------------------------------------------------------ */

.rcta__head {
	margin: 0 0 20px;
	text-align: center;
}

.rcta__eyebrow {
	margin: 0 0 6px;
	color: var(--rcta-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

.rcta__title {
	margin: 0;
	color: var(--rcta-heading);
	font-size: clamp(19px, 2.6vw, 24px);
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

.rcta__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: 12px auto 0;
	border-radius: 2px;
	background: var(--rcta-accent);
}

.rcta__lead {
	margin: 12px auto 0;
	max-width: 40em;
	color: var(--rcta-muted);
	font-size: 14px;
	line-height: 1.8;
	text-align: left;
}

/* --- リスト -------------------------------------------------------------- */

.rcta__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--rcta-gap);
	counter-reset: rcta;
}

/* パディングは個別トークンで持つ。
   variant 側（詳細度が高い）が padding ショートハンドを書くと
   「サムネなし行の上余白」を上書きして順位バッジが本文に重なるため、
   上下左右を別変数にして衝突しないようにしてある。 */
.rcta__item {
	--rcta-item-pt: 18px;
	--rcta-item-px: 16px;
	--rcta-item-pb: 16px;

	position: relative;
	display: grid;
	grid-template-columns: 96px 1fr;
	grid-template-areas:
		"thumb body"
		"action action";
	gap: 14px;
	margin: 0;
	padding: var(--rcta-item-pt) var(--rcta-item-px) var(--rcta-item-pb);
	border: 1px solid var(--rcta-border);
	border-radius: var(--rcta-radius);
	background: var(--rcta-surface);
	box-shadow: var(--rcta-shadow);
}

/* サムネなしでも崩れない。
   バッジはカード上端へ食い込ませているため、逃がすサムネが無い行は
   上パディングを足して本文と重ならないようにする。 */
.rcta__item:not(:has(.rcta__thumb)),
.rcta__item.is-nothumb {
	--rcta-item-pt: 30px;

	grid-template-columns: 1fr;
	grid-template-areas:
		"body"
		"action";
}

/* --- 順位バッジ ---------------------------------------------------------- */

.rcta__badge {
	position: absolute;
	top: -12px;
	left: 12px;
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	min-width: 52px;
	padding: 3px 10px 4px;
	border-radius: 999px;
	background: var(--rcta-medal-n);
	color: var(--rcta-medal-text);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.rcta__item[data-rank="1"] .rcta__badge { background: var(--rcta-medal-1); }
.rcta__item[data-rank="2"] .rcta__badge { background: var(--rcta-medal-2); }
.rcta__item[data-rank="3"] .rcta__badge { background: var(--rcta-medal-3); }

.rcta__badge-no {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.rcta__badge-unit {
	font-size: 11px;
	font-weight: 700;
}

/* --- サムネ -------------------------------------------------------------- */

.rcta__thumb {
	grid-area: thumb;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--rcta-border);
	border-radius: var(--rcta-radius-sm);
	background: var(--rcta-surface-alt);
	aspect-ratio: var(--rcta-thumb-ratio, 1 / 1);
}

.rcta__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--rcta-thumb-pos, center);
}

/* 横長サムネ（公式サイトのスクリーンショットなど）を使うとき。
   正方形のまま入れると左右が切れてロゴが消えるので、比率と列幅をまとめて変える。 */
.rcta[data-thumb="wide"] {
	--rcta-thumb-ratio: 16 / 10;
	--rcta-thumb-pos: center top;
}

.rcta[data-thumb="wide"] .rcta__item:has(.rcta__thumb) {
	grid-template-columns: 132px 1fr;
}

.rcta[data-thumb="wide"][data-variant="best3"] .rcta__item[data-rank="1"]:has(.rcta__thumb) {
	grid-template-columns: 164px 1fr;
}

/* 横長サムネを横に置くと本文が細くなりすぎる幅では、サムネを上へ回してフル幅で見せる */
@container rcta (max-width: 520px) {
	.rcta[data-thumb="wide"] .rcta__item:has(.rcta__thumb),
	.rcta[data-thumb="wide"][data-variant="best3"] .rcta__item[data-rank="1"]:has(.rcta__thumb) {
		grid-template-columns: 1fr;
		grid-template-areas:
			"thumb"
			"body"
			"action";
	}

	.rcta[data-thumb="wide"] .rcta__thumb {
		margin-bottom: 2px;
	}
}

/* --- 本文 ---------------------------------------------------------------- */

.rcta__body {
	grid-area: body;
	min-width: 0;
}

.rcta__label {
	display: inline-block;
	margin: 0 0 6px;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--rcta-accent-weak);
	color: var(--rcta-accent-text);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}

.rcta__name {
	margin: 0;
	color: var(--rcta-heading);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.5;
	word-break: break-word;
}

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

.rcta__name a:hover {
	text-decoration: underline;
}

.rcta__score {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
}

/* 星は ::before の重ね幅で表現（画像もJSも不要） */
.rcta__stars {
	position: relative;
	display: inline-block;
	color: var(--rcta-star-off);
	font-size: 15px;
	letter-spacing: 0.08em;
	line-height: 1;
	white-space: nowrap;
}

.rcta__stars::before {
	content: "★★★★★";
}

.rcta__stars::after {
	content: "★★★★★";
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: calc(var(--rcta-rate) / 5 * 100%);
	color: var(--rcta-star);
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.rcta__score-num {
	color: var(--rcta-accent-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.rcta__point {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.8;
}

.rcta__specs {
	display: grid;
	gap: 4px 12px;
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: var(--rcta-radius-sm);
	background: var(--rcta-surface-alt);
	font-size: 13px;
	line-height: 1.7;
	grid-template-columns: auto 1fr;
}

.rcta__specs dt {
	margin: 0;
	color: var(--rcta-muted);
	font-weight: 700;
	white-space: nowrap;
}

.rcta__specs dd {
	margin: 0;
}

.rcta__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.rcta__tags li {
	padding: 2px 8px;
	border: 1px solid var(--rcta-border-strong);
	border-radius: 999px;
	color: var(--rcta-muted);
	font-size: 12px;
	line-height: 1.6;
}

/* --- CTA ----------------------------------------------------------------- */

.rcta__action {
	grid-area: action;
	margin-top: 4px;
	text-align: center;
}

.rcta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 52px;
	padding: 12px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--rcta-btn-bg);
	box-shadow: var(--rcta-btn-shadow);
	color: var(--rcta-btn-text);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.rcta__btn:hover,
.rcta__btn:focus-visible {
	background: var(--rcta-btn-bg-hover);
	color: var(--rcta-btn-text);
	text-decoration: none;
	transform: translateY(-1px);
}

.rcta__btn:active {
	box-shadow: none;
	transform: translateY(2px);
}

.rcta__btn::after {
	content: "\203A";
	font-size: 20px;
	line-height: 1;
}

.rcta__note {
	margin: 8px 0 0;
	color: var(--rcta-muted);
	font-size: 12px;
	line-height: 1.6;
}

.rcta__sub {
	display: inline-block;
	margin: 8px 0 0;
	color: var(--rcta-accent-text);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
}

/* --- フッター ------------------------------------------------------------ */

.rcta__foot {
	margin: 18px 0 0;
	text-align: center;
}

.rcta__more {
	display: inline-block;
	padding: 10px 24px;
	border: 1px solid var(--rcta-border-strong);
	border-radius: 999px;
	color: var(--rcta-text);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.rcta__more:hover {
	border-color: var(--rcta-accent);
	color: var(--rcta-accent-text);
}

.rcta__pr {
	margin: 14px 0 0;
	color: var(--rcta-muted);
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}

.rcta__criteria {
	margin: 10px 0 0;
	color: var(--rcta-muted);
	font-size: 12px;
	line-height: 1.7;
	text-align: center;
}

/* ==========================================================================
   §2-2 variant : best3（1位を大きく見せる）
   ========================================================================== */

.rcta[data-variant="best3"] .rcta__item[data-rank="1"] {
	--rcta-item-pt: 26px;
	--rcta-item-px: 18px;
	--rcta-item-pb: 18px;

	border-width: 2px;
	border-color: var(--rcta-accent);
	box-shadow: var(--rcta-shadow-top);
}

/* 縦積みのときも1位のサムネだけ一回り大きくして別格に見せる
   （サムネがある行にだけ効かせる。無い行は1カラムのままにする） */
.rcta[data-variant="best3"] .rcta__item[data-rank="1"]:has(.rcta__thumb) {
	grid-template-columns: 120px 1fr;
}

.rcta[data-variant="best3"] .rcta__item[data-rank="1"] .rcta__badge {
	min-width: 64px;
	padding: 5px 14px 6px;
}

.rcta[data-variant="best3"] .rcta__item[data-rank="1"] .rcta__badge-no {
	font-size: 20px;
}

.rcta[data-variant="best3"] .rcta__item[data-rank="1"] .rcta__name {
	font-size: 20px;
}

.rcta[data-variant="best3"] .rcta__item[data-rank="1"] .rcta__btn {
	min-height: 58px;
	font-size: 17px;
}

/* ==========================================================================
   §2-3 variant : best5（行を詰めて一覧性を上げる）
   ========================================================================== */

/* gap はバッジの食い込み（12px）より広く取る。詰めるとバッジが前のカードに触れる。 */
.rcta[data-variant="best5"] {
	--rcta-gap: 18px;
}

.rcta[data-variant="best5"] .rcta__item {
	--rcta-item-px: 14px;
	--rcta-item-pb: 14px;
}

.rcta[data-variant="best5"] .rcta__item[data-rank="1"] {
	border-color: var(--rcta-accent);
}

.rcta[data-variant="best5"] .rcta__point {
	font-size: 14px;
}

.rcta[data-variant="best5"] .rcta__name {
	font-size: 16px;
}

.rcta[data-variant="best5"] .rcta__item[data-rank="1"] .rcta__name {
	font-size: 18px;
}

/* ==========================================================================
   §2-4 サムネ枠にアイコンタイルを入れる（ロゴ画像が無いとき）
   <figure class="rcta__thumb"><span class="rcta__icon" style="--rcta-icon-bg:…"><i class="fa-solid fa-heart"></i></span></figure>
   ========================================================================== */

.rcta__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--rcta-icon-bg, var(--rcta-accent));
	color: var(--rcta-icon-color, #ffffff);
	font-size: 34px;
	line-height: 1;
}

.rcta__icon .rcta__icon-text {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.rcta[data-variant="best3"] .rcta__item[data-rank="1"] .rcta__icon {
	font-size: 44px;
}

/* ==========================================================================
   §2-5 Font Awesome 連携（任意）
   data-fa="1" を付けたときだけ有効。FAを読み込んでいないサイトで
   豆腐（□）が出ないよう、既定ではオフにしてある。
   ========================================================================== */

.rcta[data-fa="1"] .rcta__item[data-rank="1"] .rcta__badge::before {
	content: "\f521"; /* fa-crown */
	margin-right: 4px;
	font-family: "Font Awesome 6 Free";
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
}

.rcta[data-fa="1"] .rcta__btn::after {
	content: "\f054"; /* fa-chevron-right */
	font-family: "Font Awesome 6 Free";
	font-size: 13px;
	font-weight: 900;
}

.rcta[data-fa="1"] .rcta__tags li::before {
	content: "\f00c"; /* fa-check */
	margin-right: 4px;
	color: var(--rcta-accent);
	font-family: "Font Awesome 6 Free";
	font-size: 10px;
	font-weight: 900;
}

/* FA版の星（テキスト★より整う） */
.rcta[data-fa="1"] .rcta__stars::before,
.rcta[data-fa="1"] .rcta__stars::after {
	content: "\f005\f005\f005\f005\f005";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	letter-spacing: 0.12em;
}

/* ==========================================================================
   §2-6 1位を「別格」に見せる（best3 のみ）
   data-crown="1" で王冠リボンと上端バーが付く。
   ========================================================================== */

/* 🔴 overflow:hidden を付けないこと。
   順位バッジはカード上端の外へ12px食い込ませているので、クリップすると王冠ごと切れる。
   リボンは「角をまたぐ斜め掛け」ではなく「カード内に垂れる旗」にして、クリップ不要にしてある。 */
.rcta[data-crown="1"][data-variant="best3"] .rcta__item[data-rank="1"] {
	background:
		linear-gradient(var(--rcta-surface), var(--rcta-surface)) padding-box,
		var(--rcta-medal-1) border-box;
	border: 2px solid transparent;
}

.rcta[data-crown="1"][data-variant="best3"] .rcta__item[data-rank="1"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: var(--rcta-medal-1);
}

/* 右上から垂れる旗。カードの内側に収まるので overflow でクリップする必要がない */
.rcta[data-crown="1"][data-variant="best3"] .rcta__item[data-rank="1"]::after {
	content: attr(data-ribbon);
	position: absolute;
	top: 0;
	right: 16px;
	padding: 7px 11px 13px;
	background: var(--rcta-medal-1);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
	color: var(--rcta-medal-text);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	text-align: center;
	pointer-events: none;
}

/* リボン文言が無いときは出さない */
.rcta[data-crown="1"][data-variant="best3"] .rcta__item[data-rank="1"]:not([data-ribbon])::after {
	content: none;
}

/* ==========================================================================
   §2-7 レスポンシブ（ブロック幅 820px 以上で横型に）
   これ未満は縦積み。狭い記事カラムではボタンがフル幅で出るぶん押しやすい。
   コンテナクエリ非対応の古い環境では常に縦積みになる（壊れない）。
   ========================================================================== */

@container rcta (min-width: 820px) {
	.rcta__item {
		--rcta-item-pt: 20px;
		--rcta-item-px: 20px;
		--rcta-item-pb: 20px;

		grid-template-columns: 132px 1fr 232px;
		grid-template-areas: "thumb body action";
		align-items: center;
		gap: 18px;
	}

	.rcta[data-thumb="wide"] .rcta__item:has(.rcta__thumb) {
		grid-template-columns: 176px 1fr 232px;
	}

	.rcta[data-thumb="wide"][data-variant="best3"] .rcta__item[data-rank="1"]:has(.rcta__thumb) {
		grid-template-columns: 200px 1fr 240px;
	}

	/* サービス名入りのCTA文言でも折り返さない幅・字送りにする */
	.rcta__btn {
		padding: 12px 16px;
		font-size: 15px;
	}

	.rcta__item:not(:has(.rcta__thumb)),
	.rcta__item.is-nothumb {
		--rcta-item-pt: 30px;

		grid-template-columns: 1fr 232px;
		grid-template-areas: "body action";
	}

	.rcta__action {
		margin-top: 0;
	}

	.rcta__badge {
		left: 16px;
	}

	.rcta[data-variant="best3"] .rcta__item[data-rank="1"] {
		--rcta-item-pt: 28px;
		--rcta-item-px: 22px;
		--rcta-item-pb: 26px;

		grid-template-columns: 168px 1fr 240px;
	}

	.rcta[data-variant="best3"] .rcta__item[data-rank="1"]:not(:has(.rcta__thumb)) {
		grid-template-columns: 1fr 240px;
	}
}

/* ==========================================================================
   §3 トーン定義（増やすときはここへブロックを追加する）
   ========================================================================== */

/* --- gold : 王道アフィリエイト。白地＋金。比較・ランキング全般の既定 ------ */
.rcta[data-tone="gold"] {
	/* §1 の既定値がそのまま gold。上書き不要。 */
	--rcta-bg: #fffdf8;
}

/* --- clean : 医療・士業・BtoB。青系ミニマルで煽らない ------------------- */
.rcta[data-tone="clean"] {
	--rcta-bg: #f7fafc;
	--rcta-surface: #ffffff;
	--rcta-surface-alt: #eef4f8;
	--rcta-border: #d8e3ea;
	--rcta-border-strong: #c2d2dd;
	--rcta-shadow: 0 2px 10px rgba(16, 42, 66, 0.06);
	--rcta-shadow-top: 0 8px 26px rgba(16, 42, 66, 0.14);
	--rcta-text: #1b2a36;
	--rcta-muted: #5d7285;
	--rcta-heading: #10202c;
	--rcta-accent: #1b7fbf;
	--rcta-accent-weak: #e3f0f9;
	--rcta-accent-text: #14608f;
	--rcta-btn-bg: linear-gradient(180deg, #2a9ad6 0%, #1b7fbf 100%);
	--rcta-btn-bg-hover: linear-gradient(180deg, #37a9e4 0%, #2189c9 100%);
	--rcta-btn-text: #ffffff;
	--rcta-btn-shadow: 0 3px 0 #135d8c;
	--rcta-medal-1: linear-gradient(135deg, #4fb3e8 0%, #1b7fbf 100%);
	--rcta-medal-2: linear-gradient(135deg, #cfdae2 0%, #9aabb8 100%);
	--rcta-medal-3: linear-gradient(135deg, #cfd8c9 0%, #93a58c 100%);
	--rcta-medal-n: linear-gradient(135deg, #d5dee5 0%, #a8b6c0 100%);
	--rcta-star: #f0a72c;
	--rcta-star-off: #cfdae2;
	--rcta-radius: 10px;
	--rcta-radius-sm: 6px;
}

/* --- dark : アダルト・ガジェット・ナイト系。暗背景＋ネオン --------------- */
.rcta[data-tone="dark"] {
	--rcta-bg: #14121a;
	--rcta-surface: #1e1b26;
	--rcta-surface-alt: #272232;
	--rcta-border: #322c3f;
	--rcta-border-strong: #453d56;
	--rcta-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
	--rcta-shadow-top: 0 10px 30px rgba(230, 60, 130, 0.28);
	--rcta-text: #e8e4f0;
	--rcta-muted: #a29bb4;
	--rcta-heading: #ffffff;
	--rcta-accent: #ff4f8b;
	--rcta-accent-weak: #3a2334;
	--rcta-accent-text: #ff8fb4;
	--rcta-btn-bg: linear-gradient(180deg, #ff5f97 0%, #e0246c 100%);
	--rcta-btn-bg-hover: linear-gradient(180deg, #ff74a6 0%, #ef3a7e 100%);
	--rcta-btn-text: #ffffff;
	--rcta-btn-shadow: 0 3px 0 #a8144d;
	--rcta-medal-1: linear-gradient(135deg, #ffd76a 0%, #e0a11c 100%);
	--rcta-medal-2: linear-gradient(135deg, #cdd3dd 0%, #8b93a3 100%);
	--rcta-medal-3: linear-gradient(135deg, #d8a273 0%, #9c6134 100%);
	--rcta-medal-n: linear-gradient(135deg, #6b6479 0%, #4a4457 100%);
	--rcta-star: #ffc94d;
	--rcta-star-off: #4a4356;
}

/* --- warm : 女性向け・美容・暮らし。ベージュ＋コーラル ------------------- */
.rcta[data-tone="warm"] {
	--rcta-bg: #fdf7f3;
	--rcta-surface: #ffffff;
	--rcta-surface-alt: #faf0ea;
	--rcta-border: #ecdcd2;
	--rcta-border-strong: #e0c8ba;
	--rcta-shadow: 0 2px 12px rgba(120, 74, 54, 0.08);
	--rcta-shadow-top: 0 8px 26px rgba(120, 74, 54, 0.16);
	--rcta-text: #453630;
	--rcta-muted: #8a746a;
	--rcta-heading: #33251f;
	--rcta-accent: #e0725f;
	--rcta-accent-weak: #fbe7e1;
	--rcta-accent-text: #b8503e;
	--rcta-btn-bg: linear-gradient(180deg, #f08a72 0%, #de6a53 100%);
	--rcta-btn-bg-hover: linear-gradient(180deg, #f79a83 0%, #e87862 100%);
	--rcta-btn-text: #ffffff;
	--rcta-btn-shadow: 0 3px 0 #b04e3a;
	--rcta-medal-1: linear-gradient(135deg, #f3cf82 0%, #cfa143 100%);
	--rcta-medal-2: linear-gradient(135deg, #e4e0da 0%, #b6afa5 100%);
	--rcta-medal-3: linear-gradient(135deg, #e6bc99 0%, #b8825a 100%);
	--rcta-medal-n: linear-gradient(135deg, #ddd2c9 0%, #b6a79c 100%);
	--rcta-star: #eaa04a;
	--rcta-star-off: #e6d6cc;
	--rcta-radius: 18px;
	--rcta-radius-sm: 12px;
}

/* --- pop : トレンド・エンタメ・若年層。ビビッド＋高コントラスト --------- */
.rcta[data-tone="pop"] {
	--rcta-bg: #fffbea;
	--rcta-surface: #ffffff;
	--rcta-surface-alt: #fff3d6;
	--rcta-border: #1b1b1b;
	--rcta-border-strong: #1b1b1b;
	--rcta-shadow: 4px 4px 0 #1b1b1b;
	--rcta-shadow-top: 6px 6px 0 #1b1b1b;
	--rcta-text: #1b1b1b;
	--rcta-muted: #5a5648;
	--rcta-heading: #101010;
	--rcta-accent: #ff4d3d;
	--rcta-accent-weak: #ffe1dd;
	--rcta-accent-text: #c62c1e;
	--rcta-btn-bg: linear-gradient(180deg, #ff5f4e 0%, #ef3b28 100%);
	--rcta-btn-bg-hover: linear-gradient(180deg, #ff7565 0%, #f9503d 100%);
	--rcta-btn-text: #ffffff;
	--rcta-btn-shadow: 3px 3px 0 #1b1b1b;
	--rcta-medal-1: linear-gradient(135deg, #ffd233 0%, #f5a400 100%);
	--rcta-medal-2: linear-gradient(135deg, #dfe4ea 0%, #97a1ad 100%);
	--rcta-medal-3: linear-gradient(135deg, #f0b884 0%, #bd7439 100%);
	--rcta-medal-n: linear-gradient(135deg, #cfcabc 0%, #9d9788 100%);
	--rcta-star: #f5a400;
	--rcta-star-off: #ded9c8;
	--rcta-radius: 12px;
	--rcta-radius-sm: 8px;
}

/* --- navy : 紺＋オレンジ。硬めの信頼感と行動喚起を両立させたいとき ------ */
.rcta[data-tone="navy"] {
	--rcta-bg: #f8f8f5;
	--rcta-surface: #ffffff;
	--rcta-surface-alt: #f1f1ee;
	--rcta-border: #e0e0da;
	--rcta-border-strong: #cfcfc7;
	--rcta-shadow: 0 2px 12px rgba(28, 43, 74, 0.08);
	--rcta-shadow-top: 0 10px 28px rgba(28, 43, 74, 0.18);
	--rcta-text: #1a1a2e;
	--rcta-muted: #4a4a5e;
	--rcta-heading: #1c2b4a;
	--rcta-accent: #f5833f;
	--rcta-accent-weak: #fdeee4;
	--rcta-accent-text: #c9551a;
	--rcta-btn-bg: linear-gradient(180deg, #f5833f 0%, #e06a28 100%);
	--rcta-btn-bg-hover: linear-gradient(180deg, #ff9552 0%, #ef7833 100%);
	--rcta-btn-text: #ffffff;
	--rcta-btn-shadow: 0 3px 0 #b4501a;
	--rcta-medal-1: linear-gradient(135deg, #f7d774 0%, #d1a02c 100%);
	--rcta-medal-2: linear-gradient(135deg, #dbe0e6 0%, #a3adb9 100%);
	--rcta-medal-3: linear-gradient(135deg, #e0b189 0%, #ac7040 100%);
	--rcta-medal-n: linear-gradient(135deg, #c9cdd4 0%, #98a0ab 100%);
	--rcta-star: #f5a623;
	--rcta-star-off: #dcdcd4;
	--rcta-radius: 8px;
	--rcta-radius-sm: 6px;
}

/* --- mono : コーポレート・硬派。無彩色で主張しない --------------------- */
.rcta[data-tone="mono"] {
	--rcta-bg: #ffffff;
	--rcta-surface: #ffffff;
	--rcta-surface-alt: #f4f4f4;
	--rcta-border: #e0e0e0;
	--rcta-border-strong: #c9c9c9;
	--rcta-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
	--rcta-shadow-top: 0 6px 20px rgba(0, 0, 0, 0.12);
	--rcta-text: #222222;
	--rcta-muted: #6b6b6b;
	--rcta-heading: #111111;
	--rcta-accent: #222222;
	--rcta-accent-weak: #eeeeee;
	--rcta-accent-text: #333333;
	--rcta-btn-bg: linear-gradient(180deg, #3a3a3a 0%, #1c1c1c 100%);
	--rcta-btn-bg-hover: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
	--rcta-btn-text: #ffffff;
	--rcta-btn-shadow: 0 3px 0 #000000;
	--rcta-medal-1: linear-gradient(135deg, #4a4a4a 0%, #1c1c1c 100%);
	--rcta-medal-2: linear-gradient(135deg, #b8b8b8 0%, #8a8a8a 100%);
	--rcta-medal-3: linear-gradient(135deg, #cbcbcb 0%, #a0a0a0 100%);
	--rcta-medal-n: linear-gradient(135deg, #d5d5d5 0%, #ababab 100%);
	--rcta-star: #444444;
	--rcta-star-off: #d5d5d5;
	--rcta-radius: 4px;
	--rcta-radius-sm: 3px;
}

/* ==========================================================================
   §4 ダークモード追随（明色トーンのみ。dark トーンは固定）
   サイト側で色を固定したい場合は .rcta[data-scheme="fixed"] を付ける。
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.rcta:not([data-tone="dark"]):not([data-scheme="fixed"]) {
		--rcta-bg: #1a1a1c;
		--rcta-surface: #232326;
		--rcta-surface-alt: #2c2c30;
		--rcta-border: #38383d;
		--rcta-border-strong: #4b4b52;
		--rcta-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
		--rcta-shadow-top: 0 8px 26px rgba(0, 0, 0, 0.5);
		--rcta-text: #e9e9ec;
		--rcta-muted: #a5a5ad;
		--rcta-heading: #ffffff;
		--rcta-star-off: #4b4b52;
	}
}

/* ==========================================================================
   §5 モーション配慮・印刷
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.rcta__btn {
		transition: none;
	}

	.rcta__btn:hover,
	.rcta__btn:focus-visible,
	.rcta__btn:active {
		transform: none;
	}
}

@media print {
	.rcta {
		border: 1px solid #999999;
		box-shadow: none;
	}

	.rcta__btn {
		background: none;
		box-shadow: none;
		color: #000000;
		border: 1px solid #000000;
	}
}