/**
 * Review Summary Box Tool - Frontend CSS (ミツケル版 / base v1.2.11)
 *
 * 配色は引き継ぎ資料「2-4 確定した :root」の cvt トークンに準拠。
 *   - 有色はコーラル #E07B5A の1点（スコア・★・金額・割引率）と外部リンクの青のみ
 *   - 構造（罫線・面・文字）はすべて無彩色
 *   - グラデーション / ドロップシャドウ / 装飾的な色面は使わない
 *   - 角丸は 3px、行の余白は 18px
 *   - 補助テキストは #767676（AA下限）より淡くしない
 *
 * 構成:
 *   1. CSS変数
 *   2. ボックス全体
 *   3. ヘッダー(ロゴ | タイトル | スコア)
 *   4. セクション(良い・気になる・おすすめ)
 *   5. フッター(出典)
 *   6. キャンペーン訴求ブロック(バナー / 公式リンク / プラン / 割引カード)
 *   7. レスポンシブ
 *   8. アクセシビリティ
 *   9. SWELL / 広告スクリプト対策
 */

/* ============================================================
 * 1. CSS変数
 * ============================================================ */

.rsbt-box {
	/* 構造（無彩色） */
	--rsbt-rule: #333333;          /* ヘッダー下の2px罫線（記事見出しと同一） */
	--rsbt-rule-w: 2px;
	--rsbt-frame-line: #E5E5E5;    /* 外枠・縦の区切り */
	--rsbt-row-line: #ECECEC;      /* セクション・表の区切り（横） */
	--rsbt-col-line: #F5F5F5;      /* 表の列の区切り（縦・ごく淡く） */
	--rsbt-bg: #FFFFFF;
	--rsbt-bg-soft: #FCFCFC;       /* フッター・プランボックスの面 */
	--rsbt-logo-bg: #F7F7F7;       /* テキストロゴの面 */

	/* 文字 */
	--rsbt-text: #333333;          /* 本文・見出し */
	--rsbt-text-2: #555555;        /* 二次テキスト */
	--rsbt-text-3: #767676;        /* 補助テキスト（AA下限・これより淡くしない） */
	--rsbt-dash: #8A8A8A;          /* リストのダッシュ記号（グリフ専用色） */

	/* 有色 = コーラル1点 */
	--rsbt-score: #E07B5A;
	--rsbt-star: #E07B5A;
	--rsbt-star-empty: #E5E5E5;
	--rsbt-price: #E07B5A;         /* 金額 ← --cvt-accent-2 */
	--rsbt-discount: #E07B5A;      /* 割引率 ← --cvt-discount */
	--rsbt-discount-line: #F0D3C6; /* 割引カードの枠線 ← --cvt-discount-line */
	--rsbt-arw-fg: #E07B5A;        /* 公式リンクの矢印。リンク色とは独立させる */
	--rsbt-icon: #E07B5A;          /* 割引カードのアイコン線 ← コーラル */

	/* 外部リンク（サイト共通の青） */
	--rsbt-link: #1976D2;
	--rsbt-link-hover: #145CA8;

	/* セクション見出し（評価系のみ cv-table の rt トークンに準拠） */
	--rsbt-good: #2F6E5A;          /* --cvt-rt-good */
	--rsbt-bad: #B03A3A;           /* --cvt-rt-poor */
	--rsbt-recommend: #333333;     /* 評価ではないため無彩色 */

	--rsbt-radius: 3px;
}

/* ============================================================
 * 2. ボックス全体
 * ============================================================ */

.rsbt-box {
	font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
	color: var(--rsbt-text);
	line-height: 1.7;
	background-color: var(--rsbt-bg);
	border-radius: var(--rsbt-radius);
	border: 1px solid var(--rsbt-frame-line);
	overflow: hidden;
	margin: 1.5em 0;
	box-sizing: border-box;
}

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

/* ============================================================
 * 3. ヘッダー(ロゴ | タイトル | スコア)
 * ============================================================ */

.rsbt-head {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
	border-bottom: var(--rsbt-rule-w) solid var(--rsbt-rule);
	background-color: var(--rsbt-bg);
}

/* ロゴ */
.rsbt-logo {
	width: 64px;
	height: 64px;
	border-radius: var(--rsbt-radius);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.rsbt-logo--text {
	background-color: var(--rsbt-logo-bg);
	border: 1px solid var(--rsbt-frame-line);
	color: var(--rsbt-text);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.15;
	text-align: center;
	padding: 4px;
}

.rsbt-logo--image {
	background-color: var(--rsbt-bg);
	border: 1px solid var(--rsbt-frame-line);
	padding: 4px;
}

.rsbt-logo--image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}

/* タイトル */
.rsbt-title-wrap {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.rsbt-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--rsbt-text);
	letter-spacing: 0.02em;
	line-height: 1.4;
	margin: 0;
}

/* スコア */
.rsbt-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	padding-left: 18px;
	border-left: 1px solid var(--rsbt-frame-line);
}

.rsbt-score-num {
	font-size: 28px;
	font-weight: 600;
	color: var(--rsbt-score);
	line-height: 1;
	letter-spacing: -0.5px;
}

.rsbt-stars {
	display: inline-flex;
	gap: 1px;
	align-items: center;
}

.rsbt-stars svg {
	display: block;
	flex-shrink: 0;
}

.rsbt-score-count {
	font-size: 10px;
	color: var(--rsbt-text-3);
	letter-spacing: 0.5px;
	margin-top: 2px;
}

/* ============================================================
 * 4. セクション(良い・気になる・おすすめ)
 * ============================================================ */

.rsbt-section {
	padding: 18px 22px;
	border-bottom: 1px solid var(--rsbt-row-line);
}

.rsbt-section:last-of-type {
	border-bottom: none;
}

/* セクションラベル */
.rsbt-section-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--rsbt-text);
}

.rsbt-section-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--rsbt-row-line);
}

/* タイプ別の色（評価系のみ着色。おすすめは無彩色） */
.rsbt-section--good .rsbt-section-label {
	color: var(--rsbt-good);
}

.rsbt-section--bad .rsbt-section-label {
	color: var(--rsbt-bad);
}

.rsbt-section--recommend .rsbt-section-label {
	color: var(--rsbt-recommend);
}

/* リスト */
.rsbt-list {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: left;
}

.rsbt-list li {
	font-size: 14px;
	padding: 4px 0 4px 14px;
	color: var(--rsbt-text);
	line-height: 1.7;
	position: relative;
	margin: 0;
}

/* ============================================================
 * 5. フッター(出典)
 * ============================================================ */

.rsbt-footer {
	font-size: 11px;
	color: var(--rsbt-text-3);
	padding: 12px 22px;
	border-top: 1px solid var(--rsbt-row-line);
	text-align: center;
	background-color: var(--rsbt-bg-soft);
	letter-spacing: 0.05em;
}

/* ============================================================
 * 6. キャンペーン訴求ブロック
 * ============================================================ */

.rsbt-campaign {
	margin: 0 22px 18px;
	padding: 18px 0 0;
	background-color: var(--rsbt-bg);
	text-align: center;
}

.rsbt-campaign-period {
	font-size: 12px;
	font-weight: 600;
	color: var(--rsbt-text);
	line-height: 1.4;
}

.rsbt-campaign-heading {
	font-size: 15px;
	font-weight: 600;
	color: var(--rsbt-text);
	margin-bottom: 12px;
	line-height: 1.4;
}

/* バナー */
.rsbt-campaign-banner {
	margin: 0 auto 12px;
	max-width: 300px;
}

.rsbt-campaign-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--rsbt-radius);
}

/* goweb / jump 広告IDバナー(spanをブロック化・クリック可能に) */
.rsbt-seed-cta {
	display: block;
	cursor: pointer;
}

/* 【公式】テキストリンク */
.rsbt-official-link {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	text-align: left;
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.7;
}

.rsbt-official-link__arrow {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--rsbt-arw-fg);
}

.rsbt-official-link__text {
	color: var(--rsbt-link);
	font-weight: 600;
	text-decoration: underline;
	word-break: break-all;
	cursor: pointer;
}

.rsbt-official-link__text:hover {
	color: var(--rsbt-link-hover);
}

/* プラン価格 */
.rsbt-campaign-plan {
	background-color: var(--rsbt-bg-soft);
	border: 1px solid var(--rsbt-frame-line);
	border-radius: var(--rsbt-radius);
	padding: 12px 14px;
	margin-bottom: 12px;
}

.rsbt-campaign-plan-label {
	font-size: 12px;
	color: var(--rsbt-text-3);
	margin-bottom: 2px;
}

.rsbt-campaign-plan-price {
	font-size: 22px;
	font-weight: 600;
	color: var(--rsbt-price);
	line-height: 1.3;
}

/* 最大割引 */
.rsbt-campaign-off {
	font-size: 13px;
	color: var(--rsbt-text-2);
	margin-bottom: 10px;
}

.rsbt-campaign-off mark {
	font-weight: 600;
	color: var(--rsbt-discount);
}

/* 割引カード */
.rsbt-campaign-badges {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.rsbt-campaign-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background-color: var(--rsbt-bg);
	border: 1px solid var(--rsbt-discount-line);
	color: var(--rsbt-text-2);
	padding: 12px 8px;
	border-radius: var(--rsbt-radius);
	line-height: 1.4;
	text-align: center;
}

.rsbt-badge-icon {
	display: block;
	margin-bottom: 2px;
	color: var(--rsbt-icon);
}

.rsbt-campaign-badge__label {
	font-size: 12px;
}

.rsbt-campaign-badge__rate {
	font-size: 14px;
	font-weight: 600;
	color: var(--rsbt-discount);
}

/* 奇数件のとき最後のカードを2列ぶち抜きにせず中央1列に */
.rsbt-campaign-badge:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	max-width: calc(50% - 4px);
	margin: 0 auto;
	width: 100%;
}

/* ============================================================
 * 7. レスポンシブ
 * ============================================================ */

/* タブレット以下 */
@media (max-width: 768px) {
	.rsbt-head {
		gap: 12px;
		padding: 16px 18px;
	}

	.rsbt-logo {
		width: 56px;
		height: 56px;
	}

	.rsbt-logo--text {
		font-size: 12px;
	}

	.rsbt-title {
		font-size: 13px;
	}

	.rsbt-score {
		padding-left: 12px;
	}

	.rsbt-score-num {
		font-size: 22px;
	}

	.rsbt-stars svg {
		width: 9px !important;
		height: 9px !important;
	}

	.rsbt-section {
		padding: 16px 18px;
	}

	.rsbt-section-label {
		font-size: 12px;
	}

	.rsbt-list li {
		font-size: 13px;
	}

	.rsbt-footer {
		padding: 10px 18px;
		font-size: 10px;
	}

	.rsbt-campaign {
		margin-left: 18px;
		margin-right: 18px;
	}

	.rsbt-spec {
		margin-left: 18px;
		margin-right: 18px;
	}
}

/* スマホ:横並びを維持しつつ更にコンパクト化 */
@media (max-width: 480px) {
	.rsbt-head {
		gap: 10px;
		padding: 14px 14px;
	}

	.rsbt-logo {
		width: 48px;
		height: 48px;
	}

	.rsbt-logo--text {
		font-size: 11px;
		letter-spacing: -0.5px;
	}

	.rsbt-title {
		font-size: 12px;
		line-height: 1.35;
	}

	.rsbt-score {
		padding-left: 10px;
		gap: 2px;
	}

	.rsbt-score-num {
		font-size: 20px;
	}

	.rsbt-score-count {
		font-size: 9px;
	}

	.rsbt-stars svg {
		width: 8px !important;
		height: 8px !important;
	}

	.rsbt-section {
		padding: 14px 14px;
	}

	.rsbt-footer {
		padding: 10px 14px;
	}

	.rsbt-campaign {
		margin-left: 14px;
		margin-right: 14px;
	}

	.rsbt-campaign-plan-price {
		font-size: 20px;
	}

	.rsbt-spec {
		margin-left: 14px;
		margin-right: 14px;
	}

	.rsbt-spec-table {
		font-size: 12px;
	}

	.rsbt-spec-table th,
	.rsbt-spec-table td {
		padding: 9px 10px;
	}

	.rsbt-spec-table th {
		width: 38%;
	}
}

/* ============================================================
 * 8. アクセシビリティ
 * ============================================================ */

.rsbt-box:focus-within {
	outline: 2px solid var(--rsbt-rule);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rsbt-box {
		transition: none !important;
	}
}

/* ============================================================
 * 9. SWELL / 広告スクリプト対策
 * ------------------------------------------------------------
 * SWELL は本文中の ul / li / mark に独自のマーカー・余白・背景を当てるため、
 * ボックス内だけ高い詳細度で打ち消す。
 * リンクは広告スクリプトのクラス(.jump / .custom-label)側の指定に
 * 上書きされるため、!important で色を固定する。
 * ============================================================ */

.rsbt-box .rsbt-list.rsbt-list {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
}

.rsbt-box .rsbt-list.rsbt-list > li {
	list-style: none !important;
	padding: 4px 0 4px 14px !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
}

.rsbt-box .rsbt-list.rsbt-list > li::marker {
	content: "" !important;
}

/* ダッシュ記号。SWELL が li::before に独自アイコンを当てるケースへの対策 */
.rsbt-box .rsbt-list.rsbt-list > li::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 14px !important;
	width: 6px !important;
	height: 1px !important;
	background-color: var(--rsbt-dash) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	transform: none !important;
}

/* mark はブラウザ既定＆SWELLで黄色地になるため打ち消す（金額はコーラル文字で表現） */
.rsbt-box .rsbt-campaign-plan-price mark,
.rsbt-box .rsbt-campaign-off mark {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	color: inherit !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* 公式リンク。広告クラス(.jump / .custom-label)の色指定に負けないよう固定 */
.rsbt-box .rsbt-official-link .rsbt-official-link__text.rsbt-official-link__text {
	color: var(--rsbt-link) !important;
	text-decoration: underline !important;
}

.rsbt-box .rsbt-official-link .rsbt-official-link__text.rsbt-official-link__text:hover {
	color: var(--rsbt-link-hover) !important;
}

/* 矢印はリンク色から独立（広告クラス経由の色継承を遮断） */
.rsbt-box .rsbt-official-link .rsbt-official-link__arrow.rsbt-official-link__arrow {
	color: var(--rsbt-arw-fg) !important;
}

/* スペック表内のリンクも同様に広告クラス側の色指定から守る */
.rsbt-box .rsbt-spec-table .rsbt-spec-link.rsbt-spec-link {
	color: var(--rsbt-link) !important;
	text-decoration: underline !important;
}

.rsbt-box .rsbt-spec-table .rsbt-spec-link.rsbt-spec-link:hover {
	color: var(--rsbt-link-hover) !important;
}

/* ============================================================
 * 10. 基本情報スペック表(割引カードの下)
 * ------------------------------------------------------------
 * 罫線は「行 > 列」。縦線を横線より淡くして表がスプレッドシートに
 * 見えないようにする。見出し列は無彩色、本文は #333333。
 * ============================================================ */

.rsbt-spec {
	margin: 0 22px 18px;
	text-align: center;
}

.rsbt-spec-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--rsbt-frame-line);
	border-radius: var(--rsbt-radius);
	font-size: 13px;
	line-height: 1.7;
	table-layout: fixed;
	margin: 0;
}


.rsbt-spec-table th,
.rsbt-spec-table td {
	padding: 10px 12px;
	border-top: 1px solid var(--rsbt-row-line);
	vertical-align: middle;
	text-align: center;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.rsbt-spec-table tr:first-child th,
.rsbt-spec-table tr:first-child td {
	border-top: 0;
}

.rsbt-spec-table th {
	width: 34%;
	background-color: var(--rsbt-bg-soft);
	color: var(--rsbt-text-2);
	font-weight: 600;
	border-right: 1px solid var(--rsbt-col-line);
}

.rsbt-spec-table td {
	color: var(--rsbt-text);
}

.rsbt-spec-link {
	color: var(--rsbt-link);
	text-decoration: underline;
	word-break: break-all;
	cursor: pointer;
}

.rsbt-spec-link:hover {
	color: var(--rsbt-link-hover);
}

/* SWELL 対策: 本文中の table に独自の縞・枠線・余白が入るため打ち消す */
.rsbt-box .rsbt-spec-table.rsbt-spec-table {
	background: none !important;
	box-shadow: none !important;
}

.rsbt-box .rsbt-spec-table.rsbt-spec-table th,
.rsbt-box .rsbt-spec-table.rsbt-spec-table td {
	border-left: 0 !important;
	border-bottom: 0 !important;
	background-image: none !important;
	font-size: inherit !important;
	text-align: center !important;
	vertical-align: middle !important;
}

.rsbt-box .rsbt-spec-table.rsbt-spec-table th {
	background-color: var(--rsbt-bg-soft) !important;
	border-right: 1px solid var(--rsbt-col-line) !important;
	color: var(--rsbt-text-2) !important;
}

.rsbt-box .rsbt-spec-table.rsbt-spec-table td {
	background-color: transparent !important;
	color: var(--rsbt-text) !important;
}