/*
 * onaden-db フロント表示用スタイル
 *
 * - モバイルファースト。スマホ幅で先に組み、PCは幅を広げるだけにする(指示書15章)。
 * - 比較サイトとしての信頼感を優先し、データ部分(比較表・診断・レビュー部品等)は
 *   広告LP風の派手さを避ける。CVポイント(CTAボタン)だけネオン調のグラデーションで
 *   目立たせる(フェーズ5・ADR 0032)。
 * - クラスはすべて .od- プレフィックス。テーマのスタイルと衝突させないよう、
 *   リセットは各要素に必要な最小限のみ行う。
 * - ★・バッジ・バーは画像を使わずCSSで描く。
 * - 配色はこの :root ブロックのCSS変数にまとめる(フェーズ5で配色C「白×黒×ピンク」に
 *   差し替え済み。参考: LEON.jp の実測値)。他の部品はこの変数を参照するだけで、
 *   レイアウト自体は変えない。
 */

:root {
	--od-color-primary: #e5348c;
	--od-color-primary-dark: #b8226c;
	--od-color-primary-soft: #fde8f1;
	--od-color-text: #111111;
	--od-color-text-muted: #777777;
	--od-color-text-faint: #b0b0b0;
	--od-color-bg: #ffffff;
	--od-color-bg-alt: #f7f7f8;
	--od-color-border: #e3e3e6;

	--od-color-star: #f2b01e;
	--od-color-star-track: #e6e6e6;

	--od-color-badge-on-bg: #111111;
	--od-color-badge-on-text: #ffffff;
	--od-color-badge-off-bg: #f0f0f2;
	--od-color-badge-off-text: #b0b0b0;

	--od-color-neutral-bg: #fdf2e9;
	--od-color-neutral-text: #9a5b13;

	--od-color-pr-bg: #fef3c7;
	--od-color-pr-text: #92400e;

	/* CTAボタン専用(ネオン調グラデーション。ボタン以外には使わない) */
	--od-color-cta-grad-start: #ff5fa8;
	--od-color-cta-grad-mid: #e5348c;
	--od-color-cta-grad-end: #b53cff;
	--od-color-cta-edge: #8c1c58;

	/* 「総合評価1位」の黄色マーカー */
	--od-color-marker: #fff23b;

	--od-radius-sm: 4px;
	--od-radius-md: 10px;
	--od-radius-lg: 16px;

	--od-space-1: 4px;
	--od-space-2: 8px;
	--od-space-3: 12px;
	--od-space-4: 16px;
	--od-space-5: 24px;

	--od-font-size-sm: 0.85rem;
	--od-font-size-base: 1rem;
	--od-font-size-lg: 1.15rem;
}

/* -------------------------------------------------------------------------
 * 共通
 * ---------------------------------------------------------------------- */

.od-top3,
.od-ranking,
.od-compare,
.od-notice,
.od-evidence {
	box-sizing: border-box;
	font-size: var(--od-font-size-base);
	color: var(--od-color-text);
	line-height: 1.6;
}

.od-top3 *,
.od-ranking *,
.od-compare *,
.od-notice *,
.od-evidence *,
.od-card * {
	box-sizing: border-box;
}

.od-badge-neutral {
	display: inline-block;
	padding: var(--od-space-1) var(--od-space-2);
	background: var(--od-color-neutral-bg);
	color: var(--od-color-neutral-text);
	border-radius: var(--od-radius-sm);
	font-size: var(--od-font-size-sm);
	font-weight: 600;
	white-space: nowrap;
}

.od-badge-neutral--small {
	font-size: 0.7rem;
	padding: 2px 6px;
	margin-left: var(--od-space-1);
}

/* -------------------------------------------------------------------------
 * ★(総合評価)
 * ---------------------------------------------------------------------- */

.od-stars {
	position: relative;
	display: inline-block;
	font-size: 1.15em;
	line-height: 1;
	letter-spacing: 2px;
	vertical-align: middle;
}

.od-stars__track,
.od-stars__fill {
	display: block;
	white-space: nowrap;
}

.od-stars__track {
	color: var(--od-color-star-track);
}

.od-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var(--od-color-star);
}

/* -------------------------------------------------------------------------
 * バッジ(対応機能・利用環境)
 * ---------------------------------------------------------------------- */

.od-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--od-space-1);
	margin: var(--od-space-3) 0;
	padding: 0;
	list-style: none;
}

.od-badge {
	display: inline-block;
	padding: 3px var(--od-space-2);
	border-radius: 999px;
	font-size: var(--od-font-size-sm);
	white-space: nowrap;
}

.od-badge--on {
	background: var(--od-color-badge-on-bg);
	color: var(--od-color-badge-on-text);
	font-weight: 600;
}

.od-badge--off {
	background: var(--od-color-badge-off-bg);
	color: var(--od-color-badge-off-text);
}

/* -------------------------------------------------------------------------
 * スコアバー(evidence)
 * ---------------------------------------------------------------------- */

.od-score-bar {
	width: 100%;
	height: 8px;
	background: var(--od-color-border);
	border-radius: 999px;
	overflow: hidden;
	margin: var(--od-space-1) 0;
}

.od-score-bar__fill {
	display: block;
	height: 100%;
	background: var(--od-color-primary);
	border-radius: 999px;
}

/* -------------------------------------------------------------------------
 * CTAボタン・PR表記
 * ---------------------------------------------------------------------- */

/* スマホは横幅いっぱいにする(ADR 0032)。PRチップは従来どおりボタンの直近に置くが、
   ボタン本体([od_cta]・[od_review section="header"]・ウィジェットは折り返して表示)。 */
.od-cta-wrap {
	display: flex;
	align-items: flex-start;
	gap: var(--od-space-2);
	flex-wrap: wrap;
	width: 100%;
	max-width: 100%;
}

.od-cta {
	display: block;
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 40px 11px;
	text-decoration: none;
	text-align: center;
	line-height: 1.25;
	border-radius: var(--od-radius-md);
	max-width: 100%;
	transition: filter 0.08s ease, transform 0.08s ease, box-shadow 0.08s ease;
}

.od-cta::after {
	content: "\203A";
	position: absolute;
	right: var(--od-space-4);
	top: 50%;
	transform: translateY(-52%);
	font-size: 1.5rem;
	font-weight: 800;
	opacity: 0.85;
}

.od-cta__main {
	display: block;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.od-cta__sub {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.95;
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* アフィリエイトCTA(申込導線本体)だけネオン調グラデーションにする。
   見出し・枠・バッジ等の装飾には使わない(指示書 ADR 0032)。 */
.od-cta--affiliate {
	background: linear-gradient(100deg, var(--od-color-cta-grad-start) 0%, var(--od-color-cta-grad-mid) 50%, var(--od-color-cta-grad-end) 100%);
	color: #fff;
	box-shadow: 0 4px 0 var(--od-color-cta-edge), 0 6px 14px rgba(229, 52, 140, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.od-cta--affiliate:hover,
.od-cta--affiliate:focus {
	filter: brightness(1.07) saturate(1.1);
}

.od-cta--affiliate:active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 var(--od-color-cta-edge), 0 2px 6px rgba(229, 52, 140, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.od-cta--affiliate:focus-visible {
	outline: 3px solid var(--od-color-primary-dark);
	outline-offset: 2px;
}

/* 公式リンクのみ(アフィリエイトリンク未設定)の場合は控えめな見た目にする。 */
.od-cta--official {
	background: var(--od-color-bg);
	color: var(--od-color-text);
	border: 1.5px solid var(--od-color-text);
	text-align: center;
	padding: 10px var(--od-space-4);
}

.od-cta--official::after {
	display: none;
}

.od-cta--official:hover,
.od-cta--official:focus {
	background: var(--od-color-text);
	color: #fff;
}

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

.od-pr-badge {
	display: inline-block;
	flex-shrink: 0;
	padding: 2px 6px;
	background: var(--od-color-pr-bg);
	color: var(--od-color-pr-text);
	border-radius: var(--od-radius-sm);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* -------------------------------------------------------------------------
 * カード共通の土台(.od-card)
 *
 * [od_diagnosis] の結果カード(od-diagnosis__card。assets/od-diagnosis.js が
 * 生成する)もこの土台を共有しているため、背景色・枠線・角丸をCSS変数経由で
 * 変えるだけに留め、display・padding 等のボックスモデルは変更しない
 * (指示書15章「既存の部品はレイアウトを崩さない」)。
 * TOP3・ランキング・目的別カードの新デザインは、この下の .od-rank-card
 * (完全に別名のクラス)で組む。
 * ---------------------------------------------------------------------- */

/* Cocoonのコンテンツ幅が広い設定でもカードが横に伸びすぎないよう、
   カード一覧(TOP3・ランキング・目的別)のラッパーに上限幅を付ける
   (本番Cocoon環境での確認結果。比較表・診断・レビュー部品には付けない)。 */
.od-top3,
.od-ranking {
	display: flex;
	flex-direction: column;
	gap: var(--od-space-4);
	margin: var(--od-space-4) auto;
	max-width: 800px;
}

.od-card {
	max-width: 100%;
	background: var(--od-color-bg);
	border: 1px solid var(--od-color-border);
	border-radius: var(--od-radius-lg);
	padding: var(--od-space-4);
}

.od-compare__note,
.od-diagnosis__note {
	margin: 0 0 var(--od-space-2);
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * カード新デザイン(.od-rank-card。TOP3・ランキング・目的別で共通。フェーズ5)
 *
 * .od-card と一緒に付与し、背景・枠線・角丸は .od-card から継承する。
 * padding は .od-card の一律指定を打ち消し、要素ごとに個別の余白を持たせる
 * (バナー画像を枠いっぱいに敷くため)。
 * ---------------------------------------------------------------------- */

.od-rank-card {
	padding: 0;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.07);
}

.od-rank-card--top {
	border-color: var(--od-color-text);
	box-shadow: 0 0 0 2px var(--od-color-text), 0 6px 20px rgba(0, 0, 0, 0.07);
}

/*
 * バナー・ロゴの表示は od_get_service_view() の logo_layout で切り替える
 * (ASP配布画像に横長のものが無いと判明したため、固定の横長枠は廃止。フェーズ5改訂)。
 * - 'wide'(幅÷高さが2.0以上): head-row の下に幅いっぱいの枠で表示。
 *   縦横比は画像そのまま(aspect-ratioを固定しない)。
 * - 'square'(それ以外): head-row 内、名前の左に正方形の小さい枠で表示。
 * - ''(画像なし): どちらの枠も出さない。
 */

.od-rank-card__head-row {
	display: flex;
	align-items: flex-start;
	gap: var(--od-space-3);
	padding: var(--od-space-3) var(--od-space-4) 0;
}

.od-rank-card__logo-box {
	flex: 0 0 auto;
	width: 112px;
	height: 112px;
	border-radius: var(--od-radius-md);
	background: var(--od-color-bg-alt);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.od-rank-card__logo-box img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.od-rank-card__head {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.od-rank-card__banner {
	margin: var(--od-space-3) var(--od-space-4) 0;
	border-radius: var(--od-radius-md);
	overflow: hidden;
	background: var(--od-color-bg-alt);
}

.od-rank-card__banner img {
	display: block;
	width: 100%;
	height: auto;
}

.od-rank-card__rank-row {
	display: flex;
	align-items: center;
	gap: var(--od-space-2);
	margin: 0;
}

.od-rank-card__rank-badge {
	display: inline-flex;
	align-items: center;
	background: var(--od-color-text);
	color: #fff;
	font-weight: 700;
	font-size: 0.75rem;
	padding: 2px 9px;
	border-radius: 999px;
}

.od-rank-card__rank-marker {
	font-weight: 800;
	color: var(--od-color-text);
	background-image: linear-gradient(transparent 45%, var(--od-color-marker) 45%, var(--od-color-marker) 92%, transparent 92%);
	padding: 0 3px;
	font-size: 0.8rem;
}

/*
 * サービス名は <h3> ではなく <div> にしている(Cocoonテーマの .entry-content h2/h3 系
 * 装飾(左の太線・下線・大きな上下余白)がそのまま乗ってしまうため。本番Cocoon環境での
 * 確認結果を受けた修正)。念のため、クラスセレクタでも margin・padding・border・
 * background・box-shadow を明示的に打ち消しておく(タグではなくクラスに乗るテーマ側の
 * 装飾があった場合の保険)。見出し・一言の縦の間隔は .od-rank-card__head の gap で作るため、
 * ここでは margin を持たせない。
 */
.od-rank-card__name {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--od-color-text);
}

.od-rank-card .od-rank-card__name,
.entry-content .od-rank-card .od-rank-card__name {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: 1.15rem;
	line-height: 1.3;
}

.od-rank-card__copy {
	margin: 0;
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
}

.od-rank-card__rating {
	display: flex;
	align-items: center;
	gap: var(--od-space-2);
	padding: var(--od-space-3) var(--od-space-4) 0;
}

.od-rank-card__rating-num {
	font-weight: 800;
	font-size: 1.1rem;
}

.od-rank-card__rating-suffix {
	color: var(--od-color-text-muted);
	font-size: var(--od-font-size-sm);
}

.od-rank-card__tiles {
	display: grid;
	grid-template-columns: 1.15fr 1fr 1.15fr;
	gap: var(--od-space-2);
	padding: var(--od-space-3) var(--od-space-4) 0;
	/* 女性のタイプのタグ行が無いサービスでも、詳細アコーディオンとの間隔が
	   0にならないよう、ここで下余白を持たせる(タグ行がある場合はそちらの
	   上余白を0にして二重にならないようにしている)。 */
	margin-bottom: var(--od-space-2);
}

.od-rank-card__tile {
	background: var(--od-color-bg-alt);
	border-radius: var(--od-radius-md);
	padding: var(--od-space-2) var(--od-space-2) 8px;
	min-width: 0;
}

.od-rank-card__tile--free {
	background: var(--od-color-bg);
	border: 2px solid var(--od-color-primary);
}

.od-rank-card__tile-label {
	font-size: 0.68rem;
	color: var(--od-color-text-muted);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.od-rank-card__tile-value {
	font-size: 0.95rem;
	font-weight: 800;
	margin-top: 2px;
	font-variant-numeric: tabular-nums;
	/* スマホ幅で「332.5円/分」等が枠からはみ出すため折り返しを許可する(v0.5.0)。 */
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.3;
}

.od-rank-card__tile--free .od-rank-card__tile-value {
	color: var(--od-color-primary);
	font-size: 1.3rem;
}

/* 年代の値(例「40代以上中心」)は他より長くなりがちなので、専用に少し小さくする
   (現地確認後の修正)。 */
.od-rank-card__tile-value--age {
	font-size: 14px;
	/* スマホ幅で「40代以上中心」が枠からはみ出すため、年代だけは折り返しを許可する(v0.5.0)。 */
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.3;
}

/* 「(目安)」等の補足は値と同じ行に入れず、小さい補助色で値の下に表示する
   (現地確認後の修正)。 */
.od-rank-card__tile-note {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	font-weight: 600;
	color: var(--od-color-text-muted);
	white-space: nowrap;
}

.od-rank-card__types {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--od-space-1);
	margin: 0;
	/* 上余白は .od-rank-card__tiles の margin-bottom で確保済みなので、
	   ここでは持たせない(二重に空かないようにする)。 */
	padding: 0 var(--od-space-4) 0;
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
}

.od-rank-card__type {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--od-color-primary-soft);
	color: var(--od-color-primary-dark);
	letter-spacing: 0.02em;
}

.od-rank-card__cta {
	margin: var(--od-space-4) var(--od-space-4) 0;
}

.od-rank-card__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--od-space-2);
	padding: var(--od-space-3) var(--od-space-4) var(--od-space-4);
	font-size: var(--od-font-size-sm);
}

/* PRチップは常に右寄せにする(レビュー記事へのリンクが無いときも独立して
   右寄せの同じ行高に置く。現地確認後の修正)。 */
.od-rank-card__foot .od-pr-badge {
	margin-left: auto;
}

/* レビュー記事へのリンクが無く、PRチップだけの行になるときは上余白を詰める
   (現地確認後の修正)。 */
.od-rank-card__foot--pr-only {
	padding-top: var(--od-space-1);
}

.od-rank-card__review-link {
	color: var(--od-color-primary);
	font-weight: 600;
	text-decoration: none;
}

.od-rank-card__review-link:hover,
.od-rank-card__review-link:focus {
	text-decoration: underline;
}

.od-rank-card__details {
	border-top: 1px solid var(--od-color-border);
	background: var(--od-color-bg-alt);
}

.od-rank-card__details summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--od-space-2);
	padding: var(--od-space-3) var(--od-space-4);
	font-size: var(--od-font-size-sm);
	font-weight: 700;
	color: var(--od-color-primary);
}

.od-rank-card__details summary::-webkit-details-marker {
	display: none;
}

.od-rank-card__details summary::after {
	content: "\ff0b";
}

.od-rank-card__details[open] summary::after {
	content: "\2212";
}

.od-rank-card__details-body {
	padding: 0 var(--od-space-4) var(--od-space-4);
	font-size: var(--od-font-size-sm);
}

.od-rank-card__details-note {
	margin: var(--od-space-2) 0 0;
	font-size: 0.75rem;
	color: var(--od-color-text-muted);
	line-height: 1.5;
}

.od-rank-card__details-table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: var(--od-font-size-sm);
}

.od-rank-card__details-table th,
.od-rank-card__details-table td {
	text-align: left;
	padding: var(--od-space-1) 0;
	border-top: 1px solid var(--od-color-border);
	vertical-align: top;
}

.od-rank-card__details-table th {
	width: 38%;
	color: var(--od-color-text-muted);
	font-weight: 600;
	white-space: nowrap;
}

.od-rank-card__evidence {
	padding: 0 var(--od-space-4) var(--od-space-4);
	border-top: 1px solid var(--od-color-border);
}

.od-rank-card__evidence .od-evidence {
	padding-top: var(--od-space-3);
}

/* PC: 本番Cocoon環境で確認した結果、横2列(右にCTA列)は廃止しスマホと同じ縦1列にする。
   PCでもロゴ・年代文字を少し大きくする程度に留め、要素の並び順・横幅いっぱいの扱いは
   スマホと共通にする(本文幅700px以上を目安)。 */
@media (min-width: 700px) {
	.od-rank-card__logo-box {
		width: 140px;
		height: 140px;
	}

	.od-rank-card__tile-value--age {
		font-size: 15px;
	}

	.od-rank-card__details-body {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--od-space-4);
	}
}

/* -------------------------------------------------------------------------
 * evidence(単独ショートコード・アコーディオン内共通)
 * ---------------------------------------------------------------------- */

.od-evidence__list {
	list-style: none;
	margin: 0 0 var(--od-space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--od-space-3);
}

.od-evidence__item-head {
	display: flex;
	justify-content: space-between;
	gap: var(--od-space-2);
	font-weight: 600;
}

.od-evidence__score {
	white-space: nowrap;
}

.od-evidence__basis {
	margin: var(--od-space-1) 0 0;
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
}

.od-evidence__dates {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: var(--od-font-size-sm);
}

.od-evidence__dates th,
.od-evidence__dates td {
	text-align: left;
	padding: var(--od-space-1) var(--od-space-2);
	border-top: 1px solid var(--od-color-border);
}

.od-evidence__dates th {
	color: var(--od-color-text-muted);
	font-weight: 600;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * 比較表([od_compare])
 * ---------------------------------------------------------------------- */

.od-compare {
	margin: var(--od-space-4) 0;
	max-width: 100%;
}

/* 「並び替え」行・「絞り込み」行を1つの薄いグレー枠にまとめる。PCなど幅に余裕があれば
   横に並び、幅が足りないスマホでは2段に折り返す(display:flex + flex-wrap で実現)。 */
.od-compare__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--od-space-3);
	margin-bottom: var(--od-space-3);
	padding: var(--od-space-3);
	background: var(--od-color-bg-alt);
	border: 1px solid var(--od-color-border);
	border-radius: var(--od-radius-md);
}

.od-compare__sort,
.od-compare__filters {
	display: flex;
	flex-wrap: wrap;
	/* flex-shrink:0 は付けない。付けると、はみ出す代わりに折り返してほしいこの行自体が
	   「1行に収まる前提の幅」で固定されてしまい、スマホ幅で横スクロールの原因になる
	   (本番確認結果)。既定の flex-shrink:1 のままにして、幅が足りなければこの行が縮み、
	   中の要素(ボタン・フィルター)が flex-wrap:wrap で次の行に折り返すようにする。 */
	gap: var(--od-space-2);
	align-items: center;
	max-width: 100%;
}

.od-compare__control-label {
	font-weight: 700;
	font-size: var(--od-font-size-sm);
	white-space: nowrap;
}

.od-btn {
	display: inline-block;
	padding: 6px 10px;
	background: #fff;
	border: 1px solid var(--od-color-border);
	border-radius: 999px;
	font-size: 12px;
	cursor: pointer;
	color: var(--od-color-text);
	white-space: nowrap;
}

@media (min-width: 480px) {
	.od-btn {
		padding: 6px var(--od-space-3);
		font-size: var(--od-font-size-sm);
	}
}

.od-btn.is-active {
	background: var(--od-color-primary);
	border-color: var(--od-color-primary);
	color: #fff;
	font-weight: 700;
}

.od-compare__filter {
	display: inline-flex;
	align-items: center;
	gap: var(--od-space-1);
	font-size: var(--od-font-size-sm);
	white-space: nowrap;
	max-width: 100%;
}

.od-compare__filter select {
	max-width: 100%;
}

/* チェックボックスの説明文は「年代」「タイプ」より長いので、nowrapの対象から外す
   (スマホ幅で横にはみ出さないよう、通常どおり折り返してよい)。 */
.od-compare__filter--checkbox {
	white-space: normal;
}

/* 比較表の横スクロールラッパー(指示書15章・17章:スマホ幅375pxで横スクロール、
   他の要素は崩れない)。 */
.od-compare__scroll {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--od-color-border);
	border-radius: var(--od-radius-md);
}

.od-compare__table {
	width: 100%;
	min-width: 960px;
	border-collapse: collapse;
	background: var(--od-color-bg);
	font-size: var(--od-font-size-sm);
}

.od-compare__table th,
.od-compare__table td {
	padding: var(--od-space-2) var(--od-space-3);
	border-bottom: 1px solid var(--od-color-border);
	text-align: left;
	white-space: nowrap;
}

.od-compare__table thead th {
	background: var(--od-color-bg-alt);
	position: sticky;
	top: 0;
}

.od-compare__name {
	font-weight: 700;
}

.od-compare__empty {
	margin: var(--od-space-3) 0 0;
	color: var(--od-color-text-muted);
}

/* 料金の注記は縦に長くなりがちなので <details> にたたむ(既定は閉じた状態)。 */
.od-compare__notes {
	margin-top: var(--od-space-3);
	border: 1px solid var(--od-color-border);
	border-radius: var(--od-radius-md);
	background: var(--od-color-bg-alt);
}

.od-compare__notes summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--od-space-2);
	padding: var(--od-space-2) var(--od-space-3);
	font-size: var(--od-font-size-sm);
	font-weight: 700;
	color: var(--od-color-primary);
}

.od-compare__notes summary::-webkit-details-marker {
	display: none;
}

.od-compare__notes summary::after {
	content: "\ff0b";
}

.od-compare__notes[open] summary::after {
	content: "\2212";
}

.od-compare__notes-body {
	padding: 0 var(--od-space-3) var(--od-space-3);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Cocoonの .entry-content p の大きな余白を打ち消し、13px・段落間4px(親のgap)に詰める。 */
.od-compare__notes-body .od-compare__note,
.entry-content .od-compare__notes-body .od-compare__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--od-color-text-muted);
}

/* -------------------------------------------------------------------------
 * [od_notice]
 * ---------------------------------------------------------------------- */

.od-notice {
	margin: 0 0 var(--od-space-4);
	padding: 12px 14px;
	background: var(--od-color-bg-alt);
	border: 1px solid var(--od-color-border);
	border-radius: var(--od-radius-md);
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/*
 * Cocoonテーマは .entry-content p に margin-bottom: 1.8em 相当の大きな余白を付けるため、
 * ここで明示的に margin:0 にして段落間の隙間は .od-notice の gap(5px)だけで作る。
 * .od-notice p 単体だと Cocoon 側と詳細度が同じで負けることがあるため、
 * .entry-content .od-notice p でも同じ内容を重ねて確実に上書きする。
 */
.od-notice p,
.entry-content .od-notice p {
	margin: 0;
	line-height: 1.5;
}

.od-notice__age {
	font-weight: 700;
	color: var(--od-color-text);
}

/* -------------------------------------------------------------------------
 * 診断ツール([od_diagnosis])
 *
 * 広告LP風の派手さを避け、比較サイトとしての信頼感を優先する(指示書15章)。
 * マッチ度だけプライマリカラーで強調し、それ以外は既存のod-cardのトーンに揃える。
 * ---------------------------------------------------------------------- */

.od-diagnosis {
	box-sizing: border-box;
	max-width: 100%;
	margin: var(--od-space-4) 0;
	font-size: var(--od-font-size-base);
	color: var(--od-color-text);
	line-height: 1.6;
}

.od-diagnosis * {
	box-sizing: border-box;
}

/* 進捗ドット */

.od-diagnosis__progress {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--od-space-2);
	margin: 0 0 var(--od-space-4);
}

.od-diagnosis__progress-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--od-color-border);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.od-diagnosis__progress-dot--active {
	background: var(--od-color-bg);
	border: 2px solid var(--od-color-primary);
	width: 8px;
	height: 8px;
	transform: scale(1.2);
}

.od-diagnosis__progress-dot--done {
	background: var(--od-color-primary);
}

/* 質問ステップ */

.od-diagnosis__step {
	background: var(--od-color-bg);
	border: 1px solid var(--od-color-border);
	border-radius: var(--od-radius-lg);
	padding: var(--od-space-5) var(--od-space-4);
}

.od-diagnosis__step-label {
	margin: 0 0 var(--od-space-2);
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
	font-weight: 600;
	text-align: center;
}

.od-diagnosis__question {
	margin: 0 0 var(--od-space-4);
	font-size: var(--od-font-size-lg);
	font-weight: 700;
	text-align: center;
}

.od-diagnosis__choices {
	display: flex;
	flex-direction: column;
	gap: var(--od-space-2);
}

.od-diagnosis__choice {
	display: flex;
	align-items: center;
	gap: var(--od-space-2);
	padding: var(--od-space-3) var(--od-space-4);
	background: var(--od-color-bg-alt);
	border: 1px solid var(--od-color-border);
	border-radius: var(--od-radius-md);
	cursor: pointer;
	font-weight: 600;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.od-diagnosis__choice:hover {
	border-color: var(--od-color-primary);
}

.od-diagnosis__choice:has(input:checked) {
	background: var(--od-color-bg);
	border-color: var(--od-color-primary);
	color: var(--od-color-primary-dark);
	box-shadow: 0 0 0 1px var(--od-color-primary);
}

.od-diagnosis__choice input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--od-color-primary);
	flex-shrink: 0;
}

.od-diagnosis__choice-text {
	flex: 1;
}

@media (min-width: 720px) {
	.od-diagnosis__choices {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.od-diagnosis__choice {
		flex: 1 1 calc(50% - var(--od-space-2));
	}
}

/* hidden属性はテーマや上記のdisplay指定より必ず優先させる */
.od-diagnosis [hidden] {
	display: none !important;
}

/* 結果エリア */

.od-diagnosis__results {
	display: flex;
	flex-direction: column;
	gap: var(--od-space-4);
}

.od-diagnosis__result-cards {
	display: flex;
	flex-direction: column;
	gap: var(--od-space-4);
}

.od-diagnosis__card {
	display: flex;
	flex-direction: column;
	gap: var(--od-space-2);
}

.od-diagnosis__card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--od-space-2);
}

.od-diagnosis__match {
	display: inline-flex;
	align-items: baseline;
	gap: var(--od-space-1);
	padding: var(--od-space-1) var(--od-space-3);
	background: var(--od-color-primary);
	color: #fff;
	border-radius: 999px;
}

.od-diagnosis__match-label {
	font-size: var(--od-font-size-sm);
	font-weight: 600;
	opacity: 0.9;
}

.od-diagnosis__match-value {
	font-size: var(--od-font-size-lg);
	font-weight: 700;
}

.od-diagnosis__rank {
	font-size: var(--od-font-size-sm);
	font-weight: 700;
	color: var(--od-color-text-muted);
}

.od-diagnosis__card-body {
	display: flex;
	align-items: center;
	gap: var(--od-space-3);
}

.od-diagnosis__card-logo {
	max-width: 56px;
	max-height: 56px;
	height: auto;
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
}

.od-diagnosis__card-info {
	flex: 1;
	min-width: 0;
}

.od-diagnosis__card-name {
	margin: 0 0 var(--od-space-1);
	font-size: var(--od-font-size-lg);
	line-height: 1.4;
}

.od-diagnosis__card-rating {
	display: flex;
	align-items: center;
	gap: var(--od-space-1);
	font-weight: 600;
}

.od-diagnosis__reason {
	margin: 0;
	padding: var(--od-space-2) var(--od-space-3);
	background: var(--od-color-bg-alt);
	border-radius: var(--od-radius-sm);
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
}

.od-diagnosis__card-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--od-space-2) var(--od-space-3);
	margin: 0;
}

.od-diagnosis__card-specs > div {
	border-top: 1px solid var(--od-color-border);
	padding-top: var(--od-space-1);
}

.od-diagnosis__card-specs dt {
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
}

.od-diagnosis__card-specs dd {
	margin: 0;
	font-weight: 600;
}

.od-diagnosis__card-actions {
	display: flex;
	align-items: center;
	gap: var(--od-space-3);
	flex-wrap: wrap;
}

.od-diagnosis__review-link {
	color: var(--od-color-primary);
}

/* 除外情報・該当なし */

.od-diagnosis__excluded-text,
.od-diagnosis__no-results-text,
.od-diagnosis__no-results-hint {
	margin: 0 0 var(--od-space-1);
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
}

.od-diagnosis__no-results {
	padding: var(--od-space-4);
	background: var(--od-color-bg-alt);
	border-radius: var(--od-radius-md);
	text-align: center;
}

.od-diagnosis__relax-hints {
	margin: var(--od-space-2) 0 0;
	padding-left: var(--od-space-4);
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
	text-align: left;
}

/* もう一度診断するボタン */

.od-diagnosis__retry {
	align-self: center;
	display: inline-block;
	padding: 10px var(--od-space-5);
	background: #fff;
	color: var(--od-color-primary);
	border: 1px solid var(--od-color-primary);
	border-radius: var(--od-radius-sm);
	font-weight: 700;
	cursor: pointer;
}

.od-diagnosis__retry:hover,
.od-diagnosis__retry:focus {
	background: var(--od-color-bg-alt);
}

/* =========================================================================
 * フェーズ4: 商標レビュー部品([od_review])
 * ====================================================================== */

/*
 * onaden-db [od_review] 商標レビュー自動セクション用スタイル(フェーズ4)
 *
 * - モバイルファースト。既存の od.css のCSS変数・クラス(.od-badge-neutral /
 *   .od-score-bar / .od-evidence__list 系 / .od-compare__scroll / .od-compare__table /
 *   .od-compare__note / .od-cta 等)を再利用し、新規追加は最小限にする(指示書15章)。
 * - マネージャーが assets/od.css の末尾にこの内容を統合する想定。
 */

/* -------------------------------------------------------------------------
 * セクション共通
 * ---------------------------------------------------------------------- */

.od-review {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 var(--od-space-5);
	font-size: var(--od-font-size-base);
	color: var(--od-color-text);
	line-height: 1.6;
}

.od-review * {
	box-sizing: border-box;
}

.od-review + .od-review {
	margin-top: var(--od-space-5);
}

.od-review__heading {
	margin: 0 0 var(--od-space-3);
	font-size: var(--od-font-size-lg);
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
 * header セクション(結論欄)
 * ---------------------------------------------------------------------- */

.od-review__conclusion {
	display: flex;
	flex-direction: column;
	gap: var(--od-space-3);
	padding: var(--od-space-4);
	background: var(--od-color-bg-alt);
	border: 1px solid var(--od-color-border);
	border-radius: var(--od-radius-lg);
}

.od-review__copy {
	margin: 0;
	color: var(--od-color-text-muted);
}

.od-review__header-rating {
	display: flex;
	align-items: center;
	gap: var(--od-space-2);
}

.od-review__rating-num {
	font-weight: 700;
	font-size: var(--od-font-size-lg);
}

.od-review__fit {
	margin: 0;
}

.od-review__fit-label {
	margin: 0 0 var(--od-space-1);
	font-weight: 700;
}

.od-review__list {
	margin: 0;
	padding-left: 1.4em;
}

.od-review__list li {
	margin-bottom: var(--od-space-1);
}

.od-review__cta {
	margin-top: var(--od-space-1);
}

/* -------------------------------------------------------------------------
 * rating セクション(評価項目別スコア)
 * ---------------------------------------------------------------------- */

.od-review__version {
	margin: var(--od-space-2) 0 0;
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
}

/* -------------------------------------------------------------------------
 * basic / female / sources / free セクション共通(2列の情報テーブル)
 * ---------------------------------------------------------------------- */

.od-review__table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: var(--od-font-size-sm);
}

.od-review__table th,
.od-review__table td {
	text-align: left;
	padding: var(--od-space-2) var(--od-space-2);
	border-top: 1px solid var(--od-color-border);
	vertical-align: top;
}

.od-review__table th {
	width: 38%;
	color: var(--od-color-text-muted);
	font-weight: 600;
	white-space: nowrap;
}

@media (min-width: 720px) {
	.od-review__table th {
		width: 28%;
	}
}

/* -------------------------------------------------------------------------
 * price セクション(料金表・pt×円/分のマトリクス)
 * ---------------------------------------------------------------------- */

.od-review__price-table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: var(--od-font-size-sm);
	margin-bottom: var(--od-space-2);
}

.od-review__price-table th,
.od-review__price-table td {
	text-align: left;
	padding: var(--od-space-2) var(--od-space-3);
	border-bottom: 1px solid var(--od-color-border);
}

.od-review__price-table thead th {
	background: var(--od-color-bg-alt);
	white-space: nowrap;
}

.od-review__price-table tbody th {
	font-weight: 600;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * free セクション(無料pt強調表示)
 * ---------------------------------------------------------------------- */

.od-review__free {
	display: flex;
	flex-direction: column;
	gap: var(--od-space-3);
}

.od-review__free-value {
	margin: 0;
	padding: var(--od-space-3) var(--od-space-4);
	background: var(--od-color-bg-alt);
	border-radius: var(--od-radius-md);
	font-size: var(--od-font-size-lg);
	font-weight: 700;
	color: var(--od-color-primary-dark);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * compare セクション(他サービスとの横並び比較)
 * ---------------------------------------------------------------------- */

.od-review__compare-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	background: var(--od-color-bg);
	font-size: var(--od-font-size-sm);
}

.od-review__compare-table th,
.od-review__compare-table td {
	padding: var(--od-space-2) var(--od-space-3);
	border-bottom: 1px solid var(--od-color-border);
	text-align: left;
	white-space: nowrap;
}

.od-review__compare-table thead th {
	background: var(--od-color-bg-alt);
	position: sticky;
	top: 0;
}

.od-review__compare-table tbody th {
	font-weight: 600;
	color: var(--od-color-text-muted);
	white-space: nowrap;
}

.od-review__this {
	display: inline-block;
	margin-left: var(--od-space-1);
	padding: 2px 6px;
	background: var(--od-color-primary);
	color: #fff;
	border-radius: var(--od-radius-sm);
	font-size: 0.7rem;
	font-weight: 700;
	white-space: nowrap;
}

/* =========================================================================
 * フェーズ4: パンくず・FAQ・関連記事・ウィジェット・目的別・年代から探す・評価基準
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * [od_breadcrumb]
 * ---------------------------------------------------------------------- */

.od-breadcrumb {
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
	margin: 0 0 var(--od-space-4);
}

.od-breadcrumb__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.od-breadcrumb__item {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* 現在地(最後の項目)だけ縮めて末尾を「…」で省略し、1行に収める */
.od-breadcrumb__item--current {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.od-breadcrumb__item:not(:last-child)::after {
	content: "›";
	margin: 0 var(--od-space-2);
	color: var(--od-color-border);
}

.od-breadcrumb__link {
	color: var(--od-color-primary);
	text-decoration: none;
}

.od-breadcrumb__link:hover,
.od-breadcrumb__link:focus {
	text-decoration: underline;
}

.od-breadcrumb__item--current {
	color: var(--od-color-text-muted);
}

/* -------------------------------------------------------------------------
 * [od_faq] + [od_faq_item]
 * ---------------------------------------------------------------------- */

.od-faq {
	box-sizing: border-box;
	font-size: var(--od-font-size-base);
	color: var(--od-color-text);
	line-height: 1.6;
}

.od-faq * {
	box-sizing: border-box;
}

.od-faq__title {
	margin: 0 0 var(--od-space-4);
}

.od-faq__items {
	display: flex;
	flex-direction: column;
	gap: var(--od-space-3);
}

.od-faq__item {
	border: 1px solid var(--od-color-border);
	border-radius: var(--od-radius-md);
	padding: var(--od-space-3) var(--od-space-4);
	background: var(--od-color-bg);
}

.od-faq__question {
	cursor: pointer;
	font-weight: 600;
	position: relative;
	padding-right: var(--od-space-5);
}

.od-faq__question::before {
	content: "Q.";
	color: var(--od-color-primary);
	margin-right: var(--od-space-2);
}

.od-faq__item[open] .od-faq__question {
	margin-bottom: var(--od-space-2);
}

.od-faq__answer {
	padding-top: var(--od-space-2);
	border-top: 1px solid var(--od-color-border);
}

.od-faq__answer p:first-child {
	margin-top: 0;
}

.od-faq__answer p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * [od_related]
 * ---------------------------------------------------------------------- */

.od-related {
	box-sizing: border-box;
	font-size: var(--od-font-size-base);
	color: var(--od-color-text);
}

.od-related * {
	box-sizing: border-box;
}

.od-related__title {
	margin: 0 0 var(--od-space-4);
}

.od-related__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--od-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.od-related__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.od-related__item {
	border: 1px solid var(--od-color-border);
	border-radius: var(--od-radius-md);
	overflow: hidden;
	background: var(--od-color-bg);
}

.od-related__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.od-related__link:hover .od-related__item-title,
.od-related__link:focus .od-related__item-title {
	text-decoration: underline;
}

.od-related__thumb-wrap {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--od-color-bg-alt);
	overflow: hidden;
}

.od-related__thumb-wrap--noimage {
	background: linear-gradient(135deg, var(--od-color-bg-alt), var(--od-color-border));
}

.od-related__thumb-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.od-related__body {
	display: flex;
	flex-direction: column;
	gap: var(--od-space-1);
	padding: var(--od-space-3);
}

.od-related__item-title {
	font-weight: 600;
	line-height: 1.5;
}

.od-related__meta {
	display: flex;
	gap: var(--od-space-2);
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
}

.od-related__cat {
	padding: 0 var(--od-space-2);
	background: var(--od-color-bg-alt);
	border-radius: var(--od-radius-sm);
}

/* -------------------------------------------------------------------------
 * [od_purpose](.od-top3 を流用しつつ見出し・空状態を追加)
 * ---------------------------------------------------------------------- */

.od-purpose {
	box-sizing: border-box;
	font-size: var(--od-font-size-base);
	color: var(--od-color-text);
}

.od-purpose * {
	box-sizing: border-box;
}

.od-purpose__title {
	margin: 0 0 var(--od-space-4);
}

.od-purpose__empty {
	color: var(--od-color-text-muted);
	background: var(--od-color-bg-alt);
	border-radius: var(--od-radius-md);
	padding: var(--od-space-4);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * [od_female_finder]
 * ---------------------------------------------------------------------- */

.od-female-finder {
	box-sizing: border-box;
	font-size: var(--od-font-size-base);
	color: var(--od-color-text);
	display: flex;
	flex-direction: column;
	gap: var(--od-space-5);
}

.od-female-finder * {
	box-sizing: border-box;
}

.od-female-finder__heading {
	margin: 0 0 var(--od-space-3);
	font-size: var(--od-font-size-lg);
}

.od-female-finder__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--od-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.od-female-finder__link {
	display: inline-flex;
	align-items: center;
	gap: var(--od-space-1);
	padding: var(--od-space-2) var(--od-space-3);
	border: 1px solid var(--od-color-border);
	border-radius: 999px;
	color: var(--od-color-primary-dark);
	text-decoration: none;
	background: var(--od-color-bg);
	font-size: var(--od-font-size-sm);
}

.od-female-finder__link:hover,
.od-female-finder__link:focus {
	background: var(--od-color-bg-alt);
	text-decoration: underline;
}

.od-female-finder__count {
	color: var(--od-color-text-muted);
}

/* -------------------------------------------------------------------------
 * [od_rating_policy]
 * ---------------------------------------------------------------------- */

.od-rating-policy {
	box-sizing: border-box;
	font-size: var(--od-font-size-base);
	color: var(--od-color-text);
	line-height: 1.6;
}

.od-rating-policy * {
	box-sizing: border-box;
}

.od-rating-policy__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--od-space-4);
}

.od-rating-policy__table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
}

.od-rating-policy__table th,
.od-rating-policy__table td {
	border: 1px solid var(--od-color-border);
	padding: var(--od-space-3);
	text-align: left;
	vertical-align: top;
	font-size: var(--od-font-size-sm);
}

.od-rating-policy__table thead th {
	background: var(--od-color-bg-alt);
	white-space: nowrap;
}

.od-rating-policy__note {
	color: var(--od-color-text-muted);
	font-size: var(--od-font-size-sm);
}

.od-rating-policy__version {
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
}

/* -------------------------------------------------------------------------
 * 診断CTA部品([od_diagnosis_cta] / ウィジェットA共通)
 * ---------------------------------------------------------------------- */

.od-widget-cta {
	box-sizing: border-box;
	font-size: var(--od-font-size-base);
	color: var(--od-color-text);
	background: var(--od-color-bg-alt);
	border: 1px solid var(--od-color-border);
	border-radius: var(--od-radius-md);
	padding: var(--od-space-4);
	text-align: center;
}

.od-widget-cta * {
	box-sizing: border-box;
}

.od-widget-cta__title {
	font-weight: 700;
	margin: 0 0 var(--od-space-1);
}

.od-widget-cta__lead {
	color: var(--od-color-text-muted);
	font-size: var(--od-font-size-sm);
	margin: 0 0 var(--od-space-3);
}

.od-widget-cta__action {
	margin: 0;
}

.od-widget-cta__button {
	display: inline-block;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * ウィジェットB: おすすめTOP3(コンパクト表示)
 * ---------------------------------------------------------------------- */

.od-widget-top3 {
	box-sizing: border-box;
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text);
	list-style: none;
	margin: 0 auto;
	max-width: 800px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--od-space-3);
}

.od-widget-top3 * {
	box-sizing: border-box;
}

.od-widget-top3__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--od-space-1) var(--od-space-2);
	border-bottom: 1px solid var(--od-color-border);
	padding-bottom: var(--od-space-3);
}

.od-widget-top3__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.od-widget-top3__rank {
	font-weight: 700;
	color: var(--od-color-primary);
}

.od-widget-top3__name {
	font-weight: 600;
	flex-basis: 100%;
}

.od-widget-top3__rating {
	display: inline-flex;
	align-items: center;
	gap: var(--od-space-1);
}

.od-widget-top3__review {
	color: var(--od-color-primary);
}

.od-widget-top3__cta {
	flex-basis: 100%;
}

/* 目的別カード一覧もカード一覧と同じ幅上限にそろえる */
.od-purpose {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------
 * v0.5.0: 見出し(title/title_tag属性)の共通クラス
 * ---------------------------------------------------------------------- */

.od-section-title {
	margin: 0 0 var(--od-space-4);
}

/* -------------------------------------------------------------------------
 * v0.5.0: [od_purpose] コンパクト一覧(カード表示を廃止)
 * ---------------------------------------------------------------------- */

.od-purpose__compact {
	display: flex;
	flex-direction: column;
	gap: var(--od-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.od-purpose__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--od-space-2) var(--od-space-3);
	padding: var(--od-space-2) var(--od-space-3);
	border: 1px solid var(--od-color-border);
	border-radius: var(--od-radius-md);
	background: var(--od-color-bg);
}

.od-purpose__row-logo {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: var(--od-radius-sm);
	overflow: hidden;
	background: var(--od-color-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
}

.od-purpose__row-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.od-purpose__row-body {
	flex: 1 1 160px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.od-purpose__row-name {
	margin: 0;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--od-color-text);
}

.od-purpose__row-copy {
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.od-purpose__row-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--od-space-2);
	margin-left: auto;
}

.od-purpose__row-cta .od-cta {
	/* 右端の矢印(::after)が文字に重ならないよう右側だけ広げる(v0.5.3)。 */
	padding: 6px 26px 6px 14px;
	font-size: 0.8rem;
	min-height: 0;
}

.od-purpose__row-cta .od-cta__sub {
	display: none;
}

.od-purpose__row-detail,
.od-purpose__row-detail:hover,
.od-purpose__row-detail:focus,
.od-purpose__row-detail:active {
	color: var(--od-color-primary);
}

.od-purpose__row-detail {
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.od-purpose__row-detail:hover,
.od-purpose__row-detail:focus {
	text-decoration: underline;
}

/* スマホ375px幅でも崩れないよう、狭い画面ではアクション列を折り返して全幅にする */
@media (max-width: 420px) {
	.od-purpose__row {
		align-items: flex-start;
	}

	.od-purpose__row-actions {
		flex-basis: 100%;
		margin-left: 0;
		justify-content: space-between;
	}
}

/* -------------------------------------------------------------------------
 * v0.5.4: [od_purpose_tabs] 目的別おすすめタブ
 *
 * - タブボタンはCTAのグラデーションを使わず、単色(選択中=ピンク背景・白文字/
 *   非選択=白背景・枠線)にする(ADR 0032: グラデーションはCTAボタン専用)。
 * - パネルへのhidden付与はJS(assets/od-tabs.js)が行うため、[hidden]セレクタで
 *   非表示にする以外は「非選択パネルを隠す」CSSを書かない(JS無効時は全パネル表示)。
 * ---------------------------------------------------------------------- */

.od-purpose-tabs {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.od-purpose-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--od-space-2);
	margin: 0 0 var(--od-space-4);
}

.od-purpose-tabs__tab {
	flex: 1 1 auto;
	min-width: 120px;
	margin: 0;
	padding: var(--od-space-2) var(--od-space-3);
	background: var(--od-color-bg);
	color: var(--od-color-text);
	border: 1.5px solid var(--od-color-border);
	border-radius: var(--od-radius-md);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	text-align: center;
}

.od-purpose-tabs__tab:hover {
	border-color: var(--od-color-primary);
}

.od-purpose-tabs__tab:focus-visible {
	outline: 3px solid var(--od-color-primary-dark);
	outline-offset: 2px;
}

.od-purpose-tabs__tab.is-active {
	background: var(--od-color-primary);
	border-color: var(--od-color-primary);
	color: #ffffff;
}

/* パネル内の目的名見出し(SEO用)はタブボタンと意味が重複するため、見た目は控えめにする */
.od-purpose-tabs__panel .od-section-title {
	margin: 0 0 var(--od-space-2);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--od-color-text-muted);
}

.od-purpose-tabs__panel[hidden] {
	display: none;
}

/* スマホ375px幅では2列×2段のタブにする */
@media (max-width: 420px) {
	.od-purpose-tabs__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.od-purpose-tabs__tab {
		min-width: 0;
	}
}

/* -------------------------------------------------------------------------
 * v0.5.0: [od_compare] サービス名セルのロゴ・リンク
 * ---------------------------------------------------------------------- */

.od-compare__name-row {
	/* v0.5.2: ロゴの下にサービス名(縦並び)。 */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.od-compare__logo {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: var(--od-radius-sm);
	overflow: hidden;
	background: var(--od-color-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
}

.od-compare__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.od-compare__name-link,
.od-compare__name-link:hover,
.od-compare__name-link:focus,
.od-compare__name-link:active {
	color: var(--od-color-text);
}

.od-compare__name-link {
	font-weight: 700;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * v0.5.0: [od_review section="compare"] の小さいCTAボタン
 * ---------------------------------------------------------------------- */

.od-review__compare-cta .od-cta {
	padding: 6px 24px 6px 12px;
	font-size: 0.78rem;
	min-height: 0;
	white-space: nowrap;
}

.od-review__compare-cta .od-cta__sub {
	display: none;
}

/* -------------------------------------------------------------------------
 * v0.5.0: 評価の根拠(個別項目)を既定で折りたたみにする
 * ---------------------------------------------------------------------- */

.od-evidence__basis-details {
	margin-top: 4px;
}

.od-evidence__basis-details summary {
	cursor: pointer;
	list-style: none;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--od-color-primary);
}

.od-evidence__basis-details summary::-webkit-details-marker {
	display: none;
}

.od-evidence__basis-details summary::after {
	content: "\ff0b";
	margin-left: 4px;
}

.od-evidence__basis-details[open] summary::after {
	content: "\2212";
}

.od-evidence__basis-details .od-evidence__basis {
	margin: 4px 0 0;
}

/* -------------------------------------------------------------------------
 * v0.5.0: 情報ソース・確認日を小さい文字のボックスにする([od_review section="sources"])
 * ---------------------------------------------------------------------- */

.od-review__small-box {
	margin: var(--od-space-4) 0 0;
	padding: 10px 14px;
	background: var(--od-color-bg-alt);
	border: 1px solid var(--od-color-border);
	border-radius: var(--od-radius-md);
	font-size: var(--od-font-size-sm);
	color: var(--od-color-text-muted);
}

.od-review__small-box-title {
	margin: 0 0 var(--od-space-2);
	font-weight: 700;
	color: var(--od-color-text);
}

.od-review__small-box .od-review__table th,
.od-review__small-box .od-review__table td {
	font-size: var(--od-font-size-sm);
}

/* -------------------------------------------------------------------------
 * v0.5.0: [od_faq] 行間の崩れ対策(保険。本体はPHP側でwpautopの<br>/空<p>を除去)
 * ---------------------------------------------------------------------- */

.od-faq__items > br {
	display: none;
}

.od-faq__answer p,
.entry-content .od-faq__answer p {
	line-height: 1.7;
	margin: 0 0 0.6em;
}

.od-faq__answer p:last-child,
.entry-content .od-faq__answer p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * v0.5.0: リンク・ボタンの hover/focus/active 時の文字色を固定
 * (Cocoonテーマの a:hover{color:#e53900} 等がプラグイン側の色より優先されないよう、
 * hover/focus/active状態でも通常時と同じ色を明示的に再宣言する)
 * ---------------------------------------------------------------------- */

.od-cta--affiliate,
.od-cta--affiliate:hover,
.od-cta--affiliate:focus,
.od-cta--affiliate:active {
	color: #fff;
}

.od-cta--official {
	color: var(--od-color-text);
}

.od-cta--official:hover,
.od-cta--official:focus {
	color: #fff;
}

.od-rank-card__review-link,
.od-rank-card__review-link:hover,
.od-rank-card__review-link:focus,
.od-rank-card__review-link:active {
	color: var(--od-color-primary);
}

.od-female-finder__link,
.od-female-finder__link:hover,
.od-female-finder__link:focus,
.od-female-finder__link:active {
	color: var(--od-color-primary-dark);
}

.od-breadcrumb__link,
.od-breadcrumb__link:hover,
.od-breadcrumb__link:focus,
.od-breadcrumb__link:active {
	color: var(--od-color-primary);
}

.od-review__table a,
.od-review__table a:hover,
.od-review__table a:focus,
.od-review__table a:active,
.od-review__compare-table a,
.od-review__compare-table a:hover,
.od-review__compare-table a:focus,
.od-review__compare-table a:active {
	color: var(--od-color-primary);
}

/* -------------------------------------------------------------------------
 * v0.5.2: [od_diagnosis headline=""] 強調表示(色付き帯)
 * ---------------------------------------------------------------------- */

.od-diagnosis--featured {
	background: #fff4f9;
	border: 2px solid var(--od-color-primary);
	border-radius: var(--od-radius-lg);
	overflow: hidden;
	padding: 0 var(--od-space-3) var(--od-space-4);
}

.od-diagnosis__banner {
	margin: 0 calc(-1 * var(--od-space-3)) var(--od-space-4);
	padding: var(--od-space-4) var(--od-space-3);
	/* グラデーションはCTAボタン専用(ADR 0032)なので、帯は単色にしてボタンと見分けられるようにする。 */
	background: var(--od-color-primary);
	color: #fff;
	text-align: center;
}

.od-diagnosis__banner-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.4;
	color: #fff;
}

.od-diagnosis__banner-sub {
	margin: 4px 0 0;
	font-size: var(--od-font-size-sm);
	font-weight: 600;
	color: #fff;
	opacity: 0.95;
}

.od-diagnosis--featured .od-diagnosis__step {
	border-color: #f6c3dc;
}

/* v0.5.3: 小さいCTA(目的別一覧・レビュー比較表)の矢印を小さく・右端寄せにして文字との重なりを防ぐ。 */
.od-purpose__row-cta .od-cta::after,
.od-review__compare-cta .od-cta::after {
	right: 9px;
	font-size: 1.1rem;
}