@charset "UTF-8";
/*
 * オリパ比較プラグインの見た目調整（子テーマ側）。
 * プラグインが出力する .ocr-* クラスと --ocr-* 変数だけを対象にします。
 * プラグインが有効で、比較表／Tier表／詳細を含むページでのみ読み込まれます。
 */

:root {
	--ocr-main: var(--oc-teal, #0e4d5c);
	--ocr-main-dark: var(--oc-teal-dark, #0a3a46);
	--ocr-main-soft: var(--oc-teal-soft, #e4eef0);
	--ocr-accent: var(--oc-yellow, #f2c230);
	--ocr-accent-soft: var(--oc-yellow-soft, #fbeeb8);
	--ocr-bg: var(--oc-ivory, #faf7ef);
	--ocr-stripe: #f6f3ea;
	--ocr-border: var(--oc-line, #d8d2c0);
	--ocr-text: var(--oc-ink, #26323a);
	--ocr-muted: var(--oc-muted, #5b676d);
	--ocr-link: var(--oc-link, #0b6477);
	--ocr-focus: var(--oc-focus, #1a5fd1);
	--ocr-font-heading: var(--oc-font-serif, serif);
}

/* 見出し（絞り込み／結果／Tier） */
.ocr-filter__title,
.ocr-tier__title,
.ocr-results__title {
	font-size: clamp(20px, 3vw, 24px);
	font-weight: 700;
	color: var(--ocr-text);
}

.ocr-results__title {
	padding-left: 12px;
	border-left: 4px solid var(--ocr-accent);
}

/* 記事本文内でも見出し装飾が二重にならないようにする */
.post_content .ocr-filter__title,
.post_content .ocr-results__title,
.post_content .ocr-tier__title {
	margin-top: 0;
	border-bottom: 0;
}

.post_content .ocr-results__title {
	margin: 0;
	padding-left: 12px;
	border-left: 4px solid var(--ocr-accent);
}

.post_content .ocr-detail__title {
	margin: 0 0 10px;
}

/* 表の見出し行・罫線は本文用の表スタイルを使わず、プラグイン側に任せる */
.post_content .ocr-table,
.post_content .ocr-table th,
.post_content .ocr-table td {
	border-color: var(--ocr-border);
}

.post_content .ocr-table thead th {
	border-color: var(--ocr-main-dark);
	color: #fff;
	background: var(--ocr-main);
}

.post_content .ocr-table tbody tr:nth-child(even) > * {
	background: var(--ocr-stripe);
}

.post_content .ocr-table tbody tr:nth-child(odd) > * {
	background: #fff;
}

.post_content .ocr ul,
.post_content .ocr ol {
	padding-left: 0;
}

.post_content .ocr ul.ocr-notes,
.post_content .ocr ul.ocr-links {
	padding-left: 1.2em;
}

.post_content .ocr li {
	margin: 0;
}

.post_content .ocr-dl {
	margin: 0;
}

.post_content .ocr-dl dt,
.post_content .ocr-dl dd {
	margin: 0;
}

.post_content .ocr-btn:hover,
.post_content .ocr-btn:focus {
	text-decoration: none;
}

.post_content .ocr-btn--primary,
.post_content .ocr-btn--primary:hover {
	color: #fff;
}

.post_content .ocr-tier__list a.ocr-chipbox {
	color: var(--ocr-text);
	text-decoration: none;
}

/* Tier表: 画像の参考デザインに合わせ、帯の左側を色面にする */
.ocr-tier {
	background: #fff;
}

.ocr-tier__row {
	background: var(--ocr-stripe);
}

/* 比較表の補足 */
.ocr-notes,
.ocr-note {
	font-size: 12.5px;
}