/* ==============================
   Hiyoko Hikaku — Comparison Table & Modal
   ============================== */

/* --- Reset within component --- */
.hikaku-wrap *,
.hikaku-modal-overlay * {
	box-sizing: border-box;
}

/* --- Header --- */
.hikaku-table-header {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
	border-bottom: 2px solid #e97f12;
}
.hikaku-table-title {
	font-size: 1.15em;
	font-weight: 700;
	color: #333;
}
.hikaku-table-count {
	font-size: 0.85em;
	color: #888;
}

/* --- Methodology --- */
.hikaku-methodology {
	font-size: 0.78em;
	color: #888;
	margin-bottom: 0.8em;
	line-height: 1.5;
}

/* --- Filter badges --- */
.hikaku-filters {
	display: flex;
	gap: 6px;
	margin-bottom: 1em;
	flex-wrap: wrap;
}
.hikaku-filter {
	all: unset;
	padding: 4px 14px;
	font-size: 0.82em;
	color: #666;
	background: #f3f3f3;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}
.hikaku-filter:hover {
	background: #e8e8e8;
}
.hikaku-filter--active {
	background: #e97f12;
	color: #fff;
}
.hikaku-filter--active:hover {
	background: #cf6f0d;
}

/* --- Card list --- */
.hikaku-cards {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.hikaku-card[data-hidden="true"] {
	display: none;
}

/* --- Card --- */
.hikaku-card {
	display: grid;
	grid-template-columns: 44px 1fr 120px;
	gap: 0 12px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px solid #eee;
}
.hikaku-card:last-child {
	border-bottom: none;
}

/* --- Rank badge --- */
.hikaku-card__rank {
	display: flex;
	justify-content: center;
	padding-top: 2px;
}
.hikaku-rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: #aaa;
}
.hikaku-card:nth-child(1) .hikaku-rank-badge { background: #d4a017; }
.hikaku-card:nth-child(2) .hikaku-rank-badge { background: #8c8c8c; }
.hikaku-card:nth-child(3) .hikaku-rank-badge { background: #a0522d; }
.hikaku-rank-badge--lg {
	width: 48px;
	height: 48px;
	font-size: 20px;
}

/* --- Main area --- */
.hikaku-card__head {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	margin-bottom: 6px;
}
.hikaku-brand-name {
	all: unset;
	font-size: 1.05em;
	font-weight: 700;
	color: #e97f12;
	cursor: pointer;
	border-bottom: 1px dashed #e97f12;
	transition: color 0.15s;
}
.hikaku-brand-name:hover {
	color: #cf6f0d;
}
.hikaku-card__gender {
	font-size: 0.75em;
	color: #888;
	white-space: nowrap;
}

/* --- Score --- */
.hikaku-card__score {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.hikaku-score-total {
	font-size: 1.2em;
	font-weight: 700;
	color: #333;
	white-space: nowrap;
}
.hikaku-star {
	color: #f5a623;
}
.hikaku-score-axes {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
}
.hikaku-axis {
	font-size: 0.75em;
	color: #666;
}
.hikaku-axis-label {
	margin-right: 2px;
}
.hikaku-axis-val {
	font-weight: 600;
	color: #333;
}

/* --- Details grid --- */
.hikaku-card__details {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px 16px;
}
.hikaku-detail {
	display: flex;
	gap: 0.4em;
	font-size: 0.85em;
}
.hikaku-detail-label {
	color: #888;
	white-space: nowrap;
	min-width: 3em;
}
.hikaku-detail-val {
	font-weight: 600;
	color: #333;
}

/* --- CTA --- */
.hikaku-card__cta {
	display: flex;
	flex-direction: column; /* 2.6.1: 記事誘導リンクをボタンの下に縦積み（横並びで潰れるのを修正） */
	align-items: center;
	justify-content: center;
	padding-top: 2px;
}
.hikaku-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: 80px;
	font-size: 0.82em;
	font-weight: 700;
	color: #fff !important;
	background: #e97f12;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background 0.15s, transform 0.1s;
	line-height: 1.4;
}
.hikaku-cta-btn:hover {
	background: #cf6f0d;
	transform: translateY(-1px);
}
.hikaku-cta-btn--lg {
	padding: 14px 32px;
	font-size: 1em;
	border-radius: 80px;
	width: 100%;
	text-align: center;
}
.hikaku-cta-btn--sm {
	padding: 6px 12px;
	font-size: 0.8em;
}

/* ============================
   Modal
   ============================ */
.hikaku-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999; /* 2.6.1: 固定ヘッダー/管理バーより前面に */
	display: flex;
	align-items: flex-start; /* 2.6.1: 上部固定メニューに頭が隠れないよう上寄せ＋余白 */
	justify-content: center;
	padding: 72px 12px 24px;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}
.hikaku-modal-overlay[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}
.hikaku-modal {
	position: relative;
	width: 90%;
	max-width: 520px;
	max-height: calc(100vh - 104px); /* 2.6.1: 上余白と合わせて全体が視界に収まる高さ */
	overflow-y: auto;
	background: #fff;
	padding: 28px 24px 24px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	transform: translateY(20px);
	transition: transform 0.2s;
}
.hikaku-modal-overlay[aria-hidden="false"] .hikaku-modal {
	transform: translateY(0);
}

/* Close button */
.hikaku-modal__close {
	all: unset;
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: #999;
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.15s;
}
.hikaku-modal__close:hover {
	background: #f0f0f0;
	color: #333;
}

/* Modal rank */
.hikaku-modal__rank {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

/* Modal title */
.hikaku-modal__title {
	text-align: center;
	font-size: 1.2em;
	font-weight: 700;
	margin: 0 0 4px;
	color: #333;
}
.hikaku-modal__gender {
	text-align: center;
	font-size: 0.85em;
	color: #888;
	margin: 0 0 16px;
}

/* Score block */
.hikaku-modal__score-block {
	background: #faf8f5;
	padding: 16px;
	margin-bottom: 16px;
}
.hikaku-modal__score-total {
	text-align: center;
	font-size: 1.6em;
	font-weight: 700;
	margin-bottom: 12px;
	color: #333;
}
.hikaku-modal__axis {
	display: grid;
	grid-template-columns: 6.5em 1fr 3em;
	gap: 8px;
	align-items: center;
	margin-bottom: 6px;
}
.hikaku-modal__axis:last-child {
	margin-bottom: 0;
}
.hikaku-modal__axis-label {
	font-size: 0.85em;
	color: #666;
	white-space: nowrap;
}
.hikaku-modal__axis-bar {
	height: 8px;
	background: #e8e8e8;
	overflow: hidden;
}
.hikaku-modal__axis-fill {
	height: 100%;
	background: #f5a623;
	transition: width 0.3s ease;
}
.hikaku-modal__axis-val {
	font-size: 0.85em;
	font-weight: 600;
	color: #333;
	text-align: right;
}

/* Review */
.hikaku-modal__review {
	font-size: 0.92em;
	line-height: 1.7;
	color: #444;
	margin-bottom: 16px;
	padding: 12px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

/* Pricing */
.hikaku-modal__pricing {
	margin-bottom: 20px;
}
.hikaku-modal__pricing h4 {
	font-size: 0.9em;
	font-weight: 700;
	color: #333;
	margin: 0 0 8px;
}
.hikaku-modal__dl-row {
	display: flex;
	padding: 6px 0;
	border-bottom: 1px dotted #ddd;
	font-size: 0.88em;
}
.hikaku-modal__dl-row:last-child {
	border-bottom: none;
}
.hikaku-modal__dl-row dt {
	width: 5em;
	flex-shrink: 0;
	color: #888;
	font-weight: 400;
}
.hikaku-modal__dl-row dd {
	margin: 0;
	color: #333;
	font-weight: 600;
}

/* Modal CTA */
.hikaku-modal__cta {
	margin-top: 8px;
}

/* ============================
   Inline shortcodes
   ============================ */
.hikaku-inline {
	font-weight: 600;
}
.hikaku-inline--score .hikaku-star {
	font-size: 0.9em;
}

/* ============================
   Mobile responsive
   ============================ */
@media (max-width: 767px) {
	.hikaku-card {
		grid-template-columns: 36px 1fr;
		grid-template-rows: auto auto;
	}
	.hikaku-card__rank {
		grid-row: 1;
		grid-column: 1;
	}
	.hikaku-card__main {
		grid-row: 1;
		grid-column: 2;
	}
	.hikaku-card__cta {
		grid-row: 2;
		grid-column: 1 / -1;
		padding-top: 10px;
	}
	.hikaku-cta-btn {
		width: 100%;
		text-align: center;
		padding: 10px 16px;
	}
	.hikaku-rank-badge {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}
	.hikaku-card__details {
		grid-template-columns: 1fr 1fr;
	}
	.hikaku-card__score {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.hikaku-modal {
		width: 95%;
		padding: 20px 16px 16px;
		max-height: calc(100vh - 84px); /* 2.6.1 */
	}
	.hikaku-modal-overlay {
		padding: 60px 8px 16px; /* 2.6.1: SPの固定ヘッダー分 */
	}
}


/* ==============================
   CTA Block — [hikaku_cta]
   ============================== */

.hikaku-cta {
	box-sizing: border-box;
	border: 1px solid #e0d8cc;
	padding: 20px;
	margin: 1.5em 0;
	background: #fff;
}
.hikaku-cta *,
.hikaku-cta *::before,
.hikaku-cta *::after {
	box-sizing: border-box;
}

.hikaku-cta__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.hikaku-cta__rank {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #e97f12;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
	line-height: 1;
}
.hikaku-cta__rank--sm {
	width: 24px;
	height: 24px;
	font-size: 12px;
}
.hikaku-cta__brand {
	font-size: 17px;
	font-weight: 700;
	color: #4d4535;
}
.hikaku-cta__badge {
	font-size: 11px;
	padding: 2px 10px;
	background: rgba(233, 127, 18, 0.1);
	color: #af5f0e;
}

.hikaku-cta__score {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
}
.hikaku-cta__star {
	color: #e97f12;
	font-size: 15px;
}
.hikaku-cta__score-num {
	font-size: 17px;
	font-weight: 700;
	color: #4d4535;
}
.hikaku-cta__score-bar {
	flex: 1;
	height: 6px;
	background: rgba(233, 127, 18, 0.12);
	overflow: hidden;
}
.hikaku-cta__score-fill {
	height: 100%;
	background: #e97f12;
}

.hikaku-cta__stats {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	margin-bottom: 14px;
}
.hikaku-cta__stat {
	text-align: center;
	padding: 8px 4px;
	background: rgba(233, 127, 18, 0.05);
}
.hikaku-cta__stat-label {
	font-size: 11px;
	color: #8a7d6b;
	margin-bottom: 2px;
}
.hikaku-cta__stat-val {
	font-size: 14px;
	font-weight: 700;
	color: #4d4535;
}

.hikaku-cta__setsuko {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: #f7f7f7;
	padding: 12px 14px;
	margin-bottom: 16px;
}
.hikaku-cta__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}
.hikaku-cta__setsuko-text {
	font-size: 13px;
	line-height: 1.6;
	color: #333;
	margin: 0;
}

.hikaku-cta__btn {
	display: block;
	text-align: center;
	background: #e97f12;
	color: #fff !important;
	padding: 14px;
	border-radius: 80px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	transition: opacity 0.2s;
}
.hikaku-cta__btn:hover {
	opacity: 0.85;
	color: #fff !important;
}
.hikaku-cta__btn--sm {
	display: inline-block;
	padding: 10px 22px;
	font-size: 13px;
	white-space: nowrap;
	flex-shrink: 0;
}
.hikaku-cta__note {
	font-size: 11px;
	text-align: center;
	color: #8a7d6b;
	margin: 6px 0 0;
}

/* --- Compact --- */
.hikaku-cta--compact {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
}
.hikaku-cta__compact-info {
	flex: 1;
	min-width: 0;
}
.hikaku-cta__compact-brand {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 2px;
}
.hikaku-cta__compact-name {
	font-size: 15px;
	font-weight: 700;
	color: #4d4535;
}
.hikaku-cta__compact-score {
	color: #e97f12;
	font-size: 13px;
	font-weight: 700;
}
.hikaku-cta__compact-meta {
	font-size: 12px;
	color: #8a7d6b;
}

/* --- Multi --- */
.hikaku-cta--multi {
	padding: 20px;
}
.hikaku-cta__multi-title {
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: #4d4535;
	margin-bottom: 14px;
}
.hikaku-cta__multi-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hikaku-cta__multi-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: #e97f12 1px solid;
}
.hikaku-cta__multi-info {
	flex: 1;
	min-width: 0;
}
.hikaku-cta__multi-name {
	font-size: 14px;
	font-weight: 700;
	color: #4d4535;
}
.hikaku-cta__multi-meta {
	font-size: 11px;
	color: #8a7d6b;
	margin-top: 2px;
}

/* --- CTA Mobile --- */
@media (max-width: 600px) {
	.hikaku-cta--compact {
		flex-wrap: wrap;
	}
	.hikaku-cta__btn--sm {
		width: 100%;
		text-align: center;
	}
	.hikaku-cta__multi-item {
		flex-wrap: wrap;
	}
	.hikaku-cta__multi-item .hikaku-cta__btn--sm {
		width: 100%;
		text-align: center;
		margin-top: 4px;
	}
}

/* ===== VS Comparison ===== */
.hikaku-vs {
	border: 1px solid #e5e0d8;
	overflow: hidden;
	margin: 1.5em 0;
}
.hikaku-vs__header {
	display: flex;
	background: #e97f12;
	color: #fff;
}
.hikaku-vs__brand {
	flex: 1;
	text-align: center;
	padding: 12px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.hikaku-vs__brand + .hikaku-vs__brand {
	border-left: 1px solid rgba(255,255,255,0.3);
}
.hikaku-vs__rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: #fff;
	color: #e97f12;
	font-weight: 700;
	font-size: 14px;
	border-radius: 50%;
}
.hikaku-vs__name {
	font-weight: 700;
	font-size: 15px;
}
.hikaku-vs__badge {
	font-size: 11px;
	opacity: 0.9;
}
.hikaku-vs__rows {
	background: #fff;
}
.hikaku-vs__row {
	display: flex;
	border-bottom: 1px solid #f0ebe4;
}
.hikaku-vs__row:last-child {
	border-bottom: none;
}
.hikaku-vs__label {
	width: 100px;
	flex-shrink: 0;
	padding: 10px 12px;
	background: #faf8f5;
	font-size: 13px;
	font-weight: 600;
	color: #8a7d6b;
	display: flex;
	align-items: center;
}
.hikaku-vs__val {
	flex: 1;
	padding: 10px 12px;
	text-align: center;
	font-size: 14px;
	color: #4d4535;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hikaku-vs__val + .hikaku-vs__val {
	border-left: 1px solid #f0ebe4;
}
.hikaku-vs__val--win {
	color: #e97f12;
	font-weight: 700;
}
.hikaku-vs__ctas {
	display: flex;
	gap: 8px;
	padding: 16px;
	background: #faf8f5;
}
.hikaku-vs__ctas .hikaku-cta__btn {
	flex: 1;
	text-align: center;
}
@media (max-width: 600px) {
	.hikaku-vs__label {
		width: 72px;
		font-size: 12px;
		padding: 8px;
	}
	.hikaku-vs__val {
		font-size: 13px;
		padding: 8px 6px;
	}
	.hikaku-vs__name {
		font-size: 13px;
	}
	.hikaku-vs__ctas {
		flex-direction: column;
	}
}

/* ===== Brand Summary Card ===== */
.hikaku-card-summary {
	border: 1px solid #e5e0d8;
	padding: 20px;
	margin: 1.5em 0;
	background: #fff;
}
.hikaku-card-summary__top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.hikaku-card-summary__rank {
	width: 36px;
	height: 36px;
	background: #e97f12;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}
.hikaku-card-summary__brand {
	flex: 1;
	min-width: 0;
}
.hikaku-card-summary__name {
	font-weight: 700;
	font-size: 18px;
	color: #4d4535;
}
.hikaku-card-summary__meta {
	display: flex;
	gap: 8px;
	margin-top: 2px;
}
.hikaku-card-summary__badge {
	font-size: 11px;
	color: #e97f12;
	border: 1px solid #e97f12;
	padding: 1px 6px;
}
.hikaku-card-summary__format {
	font-size: 11px;
	color: #8a7d6b;
}
.hikaku-card-summary__score-block {
	text-align: right;
	flex-shrink: 0;
}
.hikaku-card-summary__score-num {
	font-size: 18px;
	font-weight: 700;
	color: #e97f12;
}
.hikaku-card-summary__score-bar {
	width: 80px;
	height: 6px;
	background: #f0ebe4;
	margin-top: 4px;
}
.hikaku-card-summary__score-fill {
	height: 100%;
	background: #e97f12;
}
.hikaku-card-summary__axes {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
	padding: 12px;
	background: #faf8f5;
}
.hikaku-card-summary__axis {
	display: flex;
	align-items: center;
	gap: 8px;
}
.hikaku-card-summary__axis-label {
	width: 80px;
	font-size: 12px;
	color: #8a7d6b;
	flex-shrink: 0;
}
.hikaku-card-summary__axis-bar {
	flex: 1;
	height: 6px;
	background: #f0ebe4;
}
.hikaku-card-summary__axis-fill {
	height: 100%;
	background: #e97f12;
}
.hikaku-card-summary__axis-val {
	width: 32px;
	font-size: 12px;
	color: #4d4535;
	text-align: right;
	flex-shrink: 0;
}
.hikaku-card-summary__details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: #f0ebe4;
	margin-bottom: 16px;
}
.hikaku-card-summary__detail {
	background: #fff;
	padding: 10px 12px;
	text-align: center;
}
.hikaku-card-summary__detail-label {
	display: block;
	font-size: 11px;
	color: #8a7d6b;
	margin-bottom: 2px;
}
.hikaku-card-summary__detail-val {
	font-size: 15px;
	font-weight: 600;
	color: #4d4535;
}
/* --- Pros/Cons --- */
.hikaku-card-summary__proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: #f0ebe4;
	margin-bottom: 16px;
}
.hikaku-card-summary__pros,
.hikaku-card-summary__cons {
	background: #fff;
	padding: 12px 14px;
}
.hikaku-card-summary__proscons-label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 10px;
	margin-bottom: 8px;
}
.hikaku-card-summary__proscons-label--good {
	background: rgba(22, 163, 74, 0.1);
	color: #15803d;
}
.hikaku-card-summary__proscons-label--note {
	background: rgba(217, 119, 6, 0.1);
	color: #b45309;
}
.hikaku-card-summary__pros ul,
.hikaku-card-summary__cons ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hikaku-card-summary__pros li,
.hikaku-card-summary__cons li {
	font-size: 13px;
	line-height: 1.6;
	padding-left: 1.2em;
	position: relative;
	color: #4d4535;
}
.hikaku-card-summary__pros li::before {
	content: "◎";
	position: absolute;
	left: 0;
	color: #16a34a;
	font-size: 11px;
}
.hikaku-card-summary__cons li::before {
	content: "△";
	position: absolute;
	left: 0;
	color: #d97706;
	font-size: 11px;
}

/* --- Campaign banner --- */
.hikaku-card-summary__campaign {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: #e67e22;
	padding: 4px 0;
}

.hikaku-card-summary__note {
	text-align: center;
	font-size: 11px;
	color: #8a7d6b;
	margin: 8px 0 0;
}
@media (max-width: 600px) {
	.hikaku-card-summary {
		padding: 14px;
	}
	.hikaku-card-summary__name {
		font-size: 16px;
	}
	.hikaku-card-summary__details {
		grid-template-columns: 1fr 1fr;
	}
	.hikaku-card-summary__proscons {
		grid-template-columns: 1fr;
	}
}

/* 記事誘導リンク（2.6.0・カード/モーダル共通。2.6.1で折返し・幅を調整） */
.hikaku-article-link{display:block;width:100%;text-align:center;margin-top:8px;font-size:.8em;font-weight:700;line-height:1.4;white-space:normal;color:#e97f12;text-decoration:none;border-bottom:none}
.hikaku-article-link:hover{text-decoration:underline;color:#cf6f0d}