/*
 * trunkroom-map 比較機能のスタイル。
 *
 * 設計判断: これはテーマ (AFFINGER5) の上に重ねる差分であって、
 * 単体で成立するスタイルシートではない。
 *
 * 以前はここでリセットから配色、ヘッダー、フッターまで全てを持ち、
 * テーマの CSS を外して使っていた。その結果、テーマが持っている
 * 見出し、ボタン、カード、表、ランキングの体裁を全て書き直すことになり、
 * 比較ページだけがサイトの他の部分と別物になった。
 *
 * いまはテーマのテンプレートの中に中身を差し込んでいる。
 * ここで持つのは比較機能に固有の部品だけにする。
 * 土台 (文字、余白、リンク色、ヘッダー、サイドバー、フッター) は
 * テーマに任せる。
 *
 * 方針
 * - 白地に固定する。数値と記号が並ぶ一覧では白地に濃い文字が読みやすい。
 * - 本文は #1a1d21 を白地に置く。コントラスト比はおよそ 15:1。
 * - Web フォントを読み込まない。共有ホスティングでの表示速度を優先する。
 * - 状態は色だけでなく記号でも示す。色覚特性や白黒印刷でも区別できるように。
 * - 主な読み手を 40 代から 50 代と見て、本文を 16px に置く。
 *   細かい数値も 13px より小さくしない。
 */

/*
 * 色と寸法は :root に置く。
 *
 * 比較トレイと広告表記は body の直前に出す。テーマのフッタより後ろで、
 * .trm-page の外側にある。変数を .trm-page に置くと、そこから参照できず
 * 背景も文字色も付かない。
 *
 * ここで定義するのは変数だけなので、テーマ側の見た目には影響しない。
 */
:root {
	--ink: #1a1d21;
	--ink-2: #4d565f;
	--ink-3: #616b74;

	--paper: #eff2f4;
	--surface: #ffffff;
	--surface-2: #f5f7f8;
	--surface-3: #e9edf0;

	--line: #d3dadf;
	--line-2: #b9c2c9;
	--line-3: #1a1d21;

	--brand: #0d5568;
	--brand-2: #10708a;
	--brand-soft: #e6f0f3;

	--accent: #b45309;
	--accent-soft: #fdf1e0;

	--yes: #15653f;
	--no: #6b727a;
	--unknown: #767e86;

	--radius: 4px;

	--num: ui-monospace, "SF Mono", Consolas, monospace;
}

/*
 * 本文の大きさは比較機能の中だけで変える。
 * テーマが描く記事や固定ページの文字まで動かさない。
 */
.trm-page {
	font-size: 17px;
	line-height: 1.8;
	color: var(--ink);
}

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

.trm-page img {
	max-width: 100%;
	height: auto;
}

/*
 * テーマは #content 配下のリンクに色を当てている。
 * 比較機能の中ではこちらの色に揃える。
 *
 * ボタンはこの指定の対象から外す。
 * .trm-page a は詳細度 (0,1,1) で .trm-btn--primary (0,1,0) に勝つため、
 * 除外しないと濃い背景に濃い文字が乗って読めなくなる。
 */
.trm-page a:not(.trm-btn) {
	color: var(--brand);
}

/*
 * テーマは記事本文の見出しに飾りを付けている。
 * 比較機能の見出しは一覧の区切りであって記事の見出しではないので、
 * その飾りを引き継がない。
 */
.trm-page h2,
.trm-page h3,
.trm-page h4 {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font-weight: 700;
	line-height: 1.4;
}

.trm-page h2::before,
.trm-page h3::before,
.trm-page h4::before,
.trm-page h2::after,
.trm-page h3::after,
.trm-page h4::after {
	content: none;
}

.trm-page ul,
.trm-page ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.trm-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.trm-page :focus-visible {
	outline: 2px solid var(--brand-2);
	outline-offset: 2px;
}

/*
 * 契約前の確認を促す一文。
 * 記事ではなくデータを載せる以上、出典と鮮度の限界は明示する。
 */
.trm-disclaimer {
	margin: 24px 0 0;
	padding: 12px 14px;
	background: #f5f7f8;
	border: 1px solid #d3dadf;
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.7;
	color: #4d565f;
}

/*
 * 幅を決めるのはテーマの本文欄なので、ここでは何もしない。
 *
 * テンプレート側にはページ全体を包む .trm-shell が各所に残っている。
 * 全て消して回るより、無害化して置いておくほうが差分が小さく、
 * 後からテーマを変えたときに戻しやすい。
 */
.trm-page .trm-shell {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}

/* ================================================================ 段組 */

/*
 * 設計判断: 絞り込みは横帯にして本文の上に置く。
 *
 * 以前は左に絞り込み、右に候補一覧の 2 段組にしていた。
 * テーマの中に入った現在、本文欄はサイドバーと分け合うため
 * 700px 程度しかない。ここをさらに 2 つに割ると、条件も候補も
 * どちらも窮屈になる。
 *
 * 左の案内はテーマのサイドバーが持つ。本文欄は
 * 「条件 → 候補」の縦一列にする。
 */
.trm-layout {
	display: block;
	padding-top: 4px;
}

.trm-rail {
	margin: 0 0 18px;
}

.trm-rail__title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink-2);
	letter-spacing: .04em;
}

/*
 * 条件が多いので、狭い画面では折りたためるようにする。
 * details は JavaScript なしで開閉でき、検索エンジンにも読まれる。
 */
.trm-rail__sticky {
	min-width: 0;
}

/* ================================================================ サンプル表示帯 */

.trm-preview-bar {
	background: var(--accent-soft);
	border-bottom: 2px solid var(--accent);
	padding: 7px 0;
	font-size: 14px;
	color: var(--ink);
}

.trm-preview-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

.trm-preview-bar strong {
	color: var(--accent);
}

.trm-preview-bar a {
	margin-left: auto;
}

/* ================================================================ ヒーロー */

/*
 * ここは道具の入口であって宣伝ではない。
 * 1 画面目に絞り込みと候補が入るよう、高さを抑える。
 */
.trm-hero {
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid var(--brand);
	border-radius: var(--radius);
	padding: 14px 16px;
	margin: 0 0 16px;
}

.trm-hero__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
}

.trm-hero__copy {
	min-width: 0;
}

.trm-hero__title {
	margin: 0;
	font-size: 21px;
	line-height: 1.4;
	color: var(--ink);
}

.trm-hero__lead {
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--ink-2);
	max-width: 70ch;
}

.trm-hero__stats {
	display: flex;
	gap: 18px;
	margin: 0;
	flex: none;
}

.trm-hero__stats dt {
	font-size: 14px;
	color: var(--ink-3);
	white-space: nowrap;
}

.trm-hero__stats dd {
	margin: 0;
	font-family: var(--num);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--brand);
}


/* ================================================================ 絞り込み */

.trm-filters {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 12px;
}

.trm-filters__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

@media (min-width: 560px) and (max-width: 979px) {
	.trm-filters__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.trm-field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.trm-field__label {
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-2);
}

.trm-field__hint {
	margin: 0;
	font-size: 14px;
	color: var(--ink-3);
}

.trm-select {
	width: 100%;
	min-height: 40px;
	padding: 7px 9px;
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	font-family: inherit;
	/* iOS Safari は 16px 未満の入力欄でフォーカス時に画面を拡大する。
	   拡大されると操作しづらくなるため下げない。 */
	font-size: 18px;
}

.trm-select:disabled {
	background: var(--surface-3);
	color: var(--ink-3);
}

.trm-more {
	margin-top: 10px;
	border-top: 1px solid var(--line);
	padding-top: 8px;
}

.trm-more__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	min-height: 40px;
	padding: 6px 2px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	color: var(--brand);
	list-style: none;
}

.trm-more__summary::-webkit-details-marker {
	display: none;
}

.trm-more__summary::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: none;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
}

.trm-more[open] > .trm-more__summary::before {
	content: "\2212";
}

.trm-more__hint {
	font-size: 14px;
	font-weight: 400;
	color: var(--ink-3);
}

.trm-filters__grid--more {
	margin-top: 6px;
}

.trm-chips {
	margin: 10px 0 0;
	padding: 8px 0 0;
	border: none;
	border-top: 1px solid var(--line);
}

.trm-chips__legend {
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-2);
}

.trm-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 6px;
}

.trm-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 9px;
	background: var(--surface-2);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	font-size: 14px;
	cursor: pointer;
	color: var(--ink-2);
}

.trm-chip input {
	margin: 0;
	accent-color: var(--brand);
}

.trm-chip:has(input:checked) {
	background: var(--brand-soft);
	border-color: var(--brand);
	color: var(--brand);
	font-weight: 700;
}

.trm-chips__note {
	margin: 8px 0 0;
	font-size: 11.5px;
	color: var(--ink-3);
}

.trm-filters__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.trm-filters__actions .trm-btn {
	flex: 1 1 auto;
}

/* ================================================================ ボタン */

.trm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 9px 16px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
}

.trm-page .trm-btn--primary,
.trm-btn--primary {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.trm-btn--primary:hover {
	background: var(--brand-2);
	border-color: var(--brand-2);
}

.trm-page .trm-btn--ghost,
.trm-btn--ghost {
	background: var(--surface);
	border-color: var(--line-2);
	color: var(--ink-2);
}

.trm-btn--ghost:hover {
	background: var(--surface-2);
	color: var(--ink);
}

.trm-btn--lg {
	width: 100%;
	min-height: 50px;
	font-size: 18px;
}

@media (min-width: 560px) {
	.trm-btn--lg {
		width: auto;
		padding: 12px 34px;
	}
}

.trm-btn--sm {
	min-height: 34px;
	padding: 5px 11px;
	font-size: 14px;
}

.trm-btn--block {
	width: 100%;
	min-height: 38px;
	padding: 7px 10px;
	font-size: 14px;
}

/* ================================================================ 結果バー */

.trm-results__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	border-bottom: 2px solid var(--line-3);
	margin-bottom: 10px;
}

.trm-results__count {
	margin: 0 0 6px;
	font-size: 14px;
	color: var(--ink-2);
	white-space: nowrap;
}

.trm-results__count strong {
	font-family: var(--num);
	font-size: 24px;
	color: var(--ink);
	margin-right: 2px;
}

.trm-results__note {
	font-size: 14px;
	color: var(--ink-3);
	margin-left: 4px;
}

.trm-tabs {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	max-width: 100%;
}

.trm-tabs::-webkit-scrollbar {
	display: none;
}

.trm-tabs__item {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-bottom: none;
	border-radius: 3px 3px 0 0;
	background: var(--surface-2);
	color: var(--ink-2);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.trm-tabs__item:hover {
	background: var(--surface);
	color: var(--ink);
}

.trm-tabs__item.is-current {
	background: var(--line-3);
	border-color: var(--line-3);
	color: #fff;
	font-weight: 700;
}

.trm-basisline {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--ink-3);
	max-width: 84ch;
}

/* ================================================================ 候補の行 */

/*
 * 候補は横長の行にする。同じ項目が縦に揃っていることが、
 * 比較のしやすさをそのまま決める。
 */

.trm-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.trm-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	padding: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.trm-row:hover {
	border-color: var(--line-2);
}

.trm-row.is-sample {
	border-left: 3px solid var(--accent);
}

@media (min-width: 720px) {
	.trm-row {
		grid-template-columns: minmax(0, 1.4fr) 176px minmax(0, 1fr) 142px;
		gap: 14px;
		align-items: start;
	}
}

.trm-row__main {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	min-width: 0;
}

.trm-row__rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: none;
	background: var(--line-3);
	color: #fff;
	border-radius: 3px;
	font-family: var(--num);
	font-size: 14px;
	font-weight: 700;
}

.trm-row__ident {
	min-width: 0;
}

.trm-row__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 2px;
	font-size: 11.5px;
}

.trm-tag {
	display: inline-block;
	padding: 1px 6px;
	background: var(--surface-2);
	border: 1px solid var(--line-2);
	border-radius: 2px;
	font-size: 14px;
	color: var(--ink-2);
}

.trm-tag--type {
	background: var(--brand-soft);
	border-color: var(--brand);
	color: var(--brand);
	font-weight: 700;
}

.trm-row__area {
	color: var(--ink-2);
}

.trm-row__name {
	margin: 0 0 3px;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
}

.trm-row__name a {
	color: var(--ink);
	text-decoration: none;
}

.trm-row__name a:hover {
	color: var(--brand);
	text-decoration: underline;
}

.trm-row__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0;
	font-size: 11.5px;
	color: var(--ink-2);
}

.trm-row__checked,
.trm-row__brand {
	color: var(--ink-3);
}

/* 料金 */

.trm-row__price {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1px 10px;
	margin: 0;
	padding: 9px 0 0;
	border-top: 1px solid var(--line);
	align-content: start;
}

@media (min-width: 720px) {
	.trm-row__price {
		border-top: none;
		border-left: 1px solid var(--line);
		padding: 0 0 0 14px;
	}
}

.trm-row__price dt {
	font-size: 14px;
	color: var(--ink-3);
	align-self: baseline;
}

.trm-row__price dd {
	margin: 0;
	font-family: var(--num);
	font-variant-numeric: tabular-nums;
	font-size: 14px;
	text-align: right;
	color: var(--ink);
}

.trm-row__amount {
	font-size: 22px !important;
	font-weight: 700;
	color: var(--accent);
	line-height: 1.3;
}

.trm-row__amount span {
	font-family: var(--font);
	font-size: 10.5px;
	font-weight: 400;
	color: var(--ink-3);
	margin-left: 2px;
}

/* 設備 */

.trm-row__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 10px;
	list-style: none;
	margin: 0;
	padding: 9px 0 0;
	border-top: 1px solid var(--line);
}

@media (min-width: 480px) {
	.trm-row__specs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 720px) {
	.trm-row__specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-top: none;
		padding: 0;
	}
}

.trm-spc {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px;
	font-size: 11.5px;
	line-height: 1.6;
	border-bottom: 1px dotted var(--line);
	min-width: 0;
}

.trm-spc__label {
	color: var(--ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 記号を併記して、色だけに頼らず判別できるようにする */
.trm-spc__mark {
	font-size: 14px;
	font-weight: 700;
	flex: none;
}

.trm-spc--yes .trm-spc__mark {
	color: var(--yes);
}

.trm-spc--no .trm-spc__mark {
	color: var(--no);
}

.trm-spc--unknown .trm-spc__mark {
	color: var(--unknown);
	font-weight: 400;
}

/* 操作 */

.trm-row__act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding-top: 9px;
	border-top: 1px solid var(--line);
}

@media (min-width: 720px) {
	.trm-row__act {
		flex-direction: column;
		align-items: stretch;
		gap: 5px;
		padding-top: 0;
		border-top: none;
	}
}

.trm-compare-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 5px 8px;
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	font-size: 14px;
	color: var(--ink-2);
	cursor: pointer;
	flex: 1 1 auto;
	min-height: 34px;
}

.trm-compare-toggle input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--brand);
}

.trm-compare-toggle:has(input:checked) {
	background: var(--brand-soft);
	border-color: var(--brand);
	color: var(--brand);
	font-weight: 700;
}

.trm-compare-toggle:has(input:disabled) {
	opacity: .5;
	cursor: not-allowed;
}

.trm-row__units {
	margin: 0;
	font-size: 10.5px;
	color: var(--ink-3);
	text-align: center;
	width: 100%;
}

/* 状態の点 */

.trm-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--unknown);
	flex: none;
}

.trm-dot--yes {
	background: var(--yes);
}

.trm-dot--warn {
	background: var(--accent);
	border-radius: 1px;
	transform: rotate(45deg);
}

.trm-dot--unknown {
	background: transparent;
	border: 1.5px solid var(--unknown);
}

/* ================================================================ 空状態 */

.trm-empty {
	background: var(--surface);
	border: 1px dashed var(--line-2);
	border-radius: var(--radius);
	padding: 24px 18px;
	text-align: center;
}

.trm-empty__title {
	margin: 0 0 6px;
	font-size: 18px;
	color: var(--ink);
}

.trm-empty p {
	margin: 0 auto 8px;
	max-width: 54ch;
	color: var(--ink-2);
	font-size: 15px;
}

.trm-empty__admin {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 0;
}

/* ================================================================ 通知 */

.trm-notice {
	border: 1px solid var(--line-2);
	border-left-width: 4px;
	border-radius: var(--radius);
	background: var(--surface);
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 15px;
}

.trm-notice p {
	margin: 0 0 5px;
}

.trm-notice p:last-child {
	margin-bottom: 0;
}

.trm-notice--warn {
	border-left-color: var(--accent);
	background: var(--accent-soft);
}

.trm-notice--info {
	border-left-color: var(--brand);
	background: var(--brand-soft);
}

.trm-basis {
	margin: 5px 0;
	padding-left: 1.3em;
	font-size: 14px;
}

/* ================================================================ 見出し類 */

.trm-section {
	padding: 20px 0;
}

.trm-section--alt {
	background: var(--surface-2);
	border-top: 1px solid var(--line);
}

.trm-section__title {
	margin: 0 0 12px;
	font-size: 18px;
	color: var(--ink);
}

.trm-page-title {
	margin: 0 0 12px;
	font-size: 23px;
	line-height: 1.4;
	color: var(--ink);
}

.trm-count {
	font-family: var(--num);
	color: var(--brand);
}

.trm-muted {
	color: var(--ink-3);
}

.trm-small {
	font-size: 14px;
}

.trm-strong {
	font-weight: 700;
}

.trm-num {
	font-family: var(--num);
	font-variant-numeric: tabular-nums;
}

.trm-sub {
	color: var(--ink-3);
	font-size: 11.5px;
	margin-left: 3px;
}

.trm-prose {
	max-width: 68ch;
}

.trm-results__lead {
	margin: 0 0 12px;
	font-size: 15px;
}

/* ================================================================ 詳細 */

.trm-detail {
	padding: 18px 0 6px;
}

.trm-detail__head {
	margin-bottom: 14px;
}

.trm-detail__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 0 6px;
}

.trm-detail__title {
	margin: 0 0 5px;
	font-size: 26px;
	line-height: 1.35;
	color: var(--ink);
}

.trm-detail__address {
	margin: 0 0 6px;
	color: var(--ink-2);
	font-size: 15px;
}

.trm-detail__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	color: var(--ink-2);
}

.trm-detail__checked {
	color: var(--ink-3);
}

.trm-detail__figure {
	margin: 0 0 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface-2);
}

.trm-detail__figure img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.trm-cta {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	margin-bottom: 18px;
}

.trm-cta__note {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--ink-3);
}

.trm-detail__section {
	margin-bottom: 22px;
}

.trm-detail__section h2 {
	margin: 0 0 10px;
	padding-bottom: 5px;
	font-size: 18px;
	border-bottom: 2px solid var(--line-3);
	color: var(--ink);
}

.trm-detail__back {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 6px;
}

/* ================================================================ 表 */

.trm-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	-webkit-overflow-scrolling: touch;
}

.trm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 560px;
}

.trm-table th,
.trm-table td {
	padding: 8px 11px;
	text-align: left;
	border-bottom: 1px solid var(--line);
	border-right: 1px solid var(--line);
	vertical-align: top;
	color: var(--ink);
}

.trm-table th:last-child,
.trm-table td:last-child {
	border-right: none;
}

.trm-table thead th {
	background: var(--surface-3);
	font-size: 14px;
	color: var(--ink-2);
	white-space: nowrap;
}

.trm-table tbody tr:nth-child(even) td {
	background: var(--surface-2);
}

.trm-table tbody tr:last-child th,
.trm-table tbody tr:last-child td {
	border-bottom: none;
}

.trm-table--compare {
	min-width: 640px;
}

.trm-table__rowhead {
	background: var(--surface-3) !important;
	font-size: 14px;
	color: var(--ink-2);
	white-space: nowrap;
	position: sticky;
	left: 0;
	z-index: 1;
}

.trm-table__key td {
	background: var(--brand-soft) !important;
}

.trm-cell--yes {
	color: var(--yes);
	font-weight: 700;
}

.trm-cell--no {
	color: var(--no);
}

.trm-cell--unknown {
	color: var(--unknown);
	font-style: italic;
}

.trm-tablehint {
	display: block;
	margin: 5px 0 0;
	font-size: 11.5px;
	color: var(--ink-3);
}

@media (min-width: 760px) {
	.trm-tablehint {
		display: none;
	}
}

/* ================================================================ 仕様一覧 */

.trm-speclist {
	display: grid;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
}

@media (min-width: 640px) {
	.trm-speclist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.trm-spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}

.trm-spec__label {
	color: var(--ink-2);
}

.trm-spec__value {
	font-weight: 700;
	white-space: nowrap;
	color: var(--ink);
}

.trm-spec--yes .trm-spec__value {
	color: var(--yes);
}

.trm-spec--no .trm-spec__value {
	color: var(--no);
	font-weight: 400;
}

.trm-spec--unknown .trm-spec__value {
	color: var(--unknown);
	font-weight: 400;
	font-style: italic;
}

/* ================================================================ 出典 */

.trm-sources {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.trm-sources li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 7px 0;
	border-bottom: 1px dotted var(--line);
	font-size: 14px;
}

.trm-sources a {
	word-break: break-all;
}

.trm-sources__date {
	font-size: 11.5px;
	color: var(--ink-3);
	white-space: nowrap;
}

/* ================================================================ エリア */

.trm-arealist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 6px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.trm-arealist a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--ink);
	font-size: 15px;
}

.trm-arealist a:hover {
	border-color: var(--brand);
	background: var(--brand-soft);
}

.trm-arealist__count {
	font-family: var(--num);
	font-size: 11.5px;
	color: var(--ink-3);
}

.trm-citynav {
	margin: 0 0 16px;
	padding: 12px 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.trm-citynav__title {
	margin: 0 0 7px;
	font-size: 14px;
	color: var(--ink-2);
}

.trm-citynav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.trm-citynav a {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 5px 10px;
	background: var(--surface-2);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	font-size: 14px;
	text-decoration: none;
	color: var(--ink-2);
}

.trm-citynav a:hover {
	border-color: var(--brand);
	color: var(--brand);
}

.trm-citynav__count {
	font-family: var(--num);
	font-size: 10.5px;
	color: var(--ink-3);
}

/* ================================================================ 選び方 */

.trm-guide {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

@media (min-width: 700px) {
	.trm-guide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.trm-guide__item {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
}

.trm-guide__item h3 {
	margin: 0 0 5px;
	font-size: 14.5px;
	color: var(--ink);
}

.trm-guide__item p {
	margin: 0;
	font-size: 14px;
	color: var(--ink-2);
}

/* ================================================================ ページ送り */

.trm-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 18px;
	font-size: 15px;
}

.trm-pager__link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 7px 16px;
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--ink-2);
}

.trm-pager__link:hover {
	border-color: var(--brand);
	color: var(--brand);
}

.trm-pager__status {
	font-family: var(--num);
	font-size: 14px;
	color: var(--ink-3);
}

/* ================================================================ 比較トレイ */

.trm-tray {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	background: var(--surface);
	border-top: 2px solid var(--brand);
	box-shadow: 0 -4px 14px -10px rgba(26, 29, 33, .5);
	padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}

.trm-tray[hidden] {
	display: none !important;
}

.trm-tray__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	/* .trm-page の外側にあるので、幅と余白をここで持つ。 */
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 14px;
	box-sizing: border-box;
}

.trm-tray__count {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--ink);
}

.trm-tray__count [data-trm-tray-count] {
	font-family: var(--num);
	font-size: 19px;
	color: var(--brand);
}

.trm-tray__max {
	font-weight: 400;
	color: var(--ink-3);
}

.trm-tray__list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 220px;
	min-width: 0;
}

.trm-tray__list li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 200px;
	padding: 3px 5px 3px 9px;
	background: var(--surface-2);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	font-size: 14px;
	color: var(--ink-2);
}

.trm-tray__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.trm-tray__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: var(--ink-3);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.trm-tray__remove:hover {
	background: var(--surface-3);
	color: var(--ink);
}

.trm-tray__actions {
	display: flex;
	gap: 6px;
	margin-left: auto;
}

.trm-tray__actions .trm-btn {
	min-height: 38px;
	padding: 7px 14px;
	font-size: 14px;
}

.has-tray #footer {
	padding-bottom: 84px;
}

/* ================================================================ 固定 CTA */

.trm-stickycta {
	display: none;
}

@media (max-width: 719px) {
	.trm-stickycta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 25;
		display: block;
		padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
		background: var(--surface);
		border-top: 1px solid var(--line);
		box-shadow: 0 -4px 14px -10px rgba(26, 29, 33, .5);
	}

	.trm-stickycta .trm-btn {
		width: 100%;
	}

	.has-tray .trm-stickycta {
		bottom: 68px;
	}

	.trm-view-detail #footer {
		padding-bottom: 76px;
	}
}


/* ================================================================ 狭い画面 */

@media (max-width: 380px) {
	.trm-filters,
	.trm-row {
		padding: 10px;
	}

	.trm-hero__stats {
		gap: 14px;
	}
}

/* 印刷時は操作用の要素を出さない */
@media print {
	#headerWrap,
	#side,
	.trm-tray,
	.trm-stickycta,
	.trm-rail,
	.trm-pager,
	.trm-tabs {
		display: none !important;
	}

	.trm-page {
		background: #fff;
	}

	.trm-layout {
		display: block;
	}
}

/* ================================================================ 絞り込みの区分 */

.trm-fgroup {
	margin: 0;
	padding: 0 0 12px;
	border: none;
	border-bottom: 1px solid var(--line);
}

.trm-fgroup + .trm-fgroup {
	padding-top: 12px;
}

.trm-fgroup:last-of-type {
	border-bottom: none;
}

.trm-fgroup__title {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: .03em;
}

.trm-fgroup .trm-field + .trm-field {
	margin-top: 8px;
}

.trm-fgroup__note {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--ink-3);
	line-height: 1.5;
}

/* ================================================================ 件数つきの条件 */

/*
 * 条件を選ぶ前に、その条件で何件残るかを見せる。
 * 0 件になる条件は選べないようにする。空の結果に当たってから
 * 条件を戻す、という往復をなくすため。
 */

.trm-facets {
	list-style: none;
	margin: 0;
	padding: 0;
}

.trm-facet {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 5px 6px;
	border-radius: 3px;
	font-size: 14px;
	color: var(--ink);
	cursor: pointer;
	min-height: 32px;
}

.trm-facet:hover {
	background: var(--surface-2);
}

.trm-facet input {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: none;
	accent-color: var(--brand);
}

.trm-facet__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.trm-facet__count {
	flex: none;
	font-family: var(--num);
	font-variant-numeric: tabular-nums;
	font-size: 11.5px;
	color: var(--ink-3);
}

.trm-facet:has(input:checked) {
	background: var(--brand-soft);
	color: var(--brand);
	font-weight: 700;
}

.trm-facet:has(input:checked) .trm-facet__count {
	color: var(--brand);
}

.trm-facet.is-empty,
.trm-facet:has(input:disabled) {
	color: var(--ink-3);
	cursor: not-allowed;
}

.trm-facet.is-empty:hover {
	background: transparent;
}

/* ================================================================ 適用中の条件 */

.trm-chipbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin-bottom: 10px;
	padding: 8px 10px;
	background: var(--brand-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.trm-chipbar__label {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--brand);
	white-space: nowrap;
}

.trm-chipbar__list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.trm-chipbar__list a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: 999px;
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
	min-height: 28px;
}

.trm-chipbar__list a:hover {
	border-color: var(--brand);
	color: var(--brand);
}

.trm-chipbar__x {
	font-size: 14px;
	line-height: 1;
	color: var(--ink-3);
}

.trm-chipbar__list a:hover .trm-chipbar__x {
	color: var(--brand);
}

.trm-chipbar__clear {
	font-size: 11.5px;
	white-space: nowrap;
	margin-left: auto;
}

/* ================================================================ 広告表記 */

/*
 * リンクマネージャーが外部リンクをアフィリエイトリンクに置き換えるため、
 * このサイトの外部リンクは広告になりうる。
 *
 * ステルスマーケティング規制では、広告であることを一般の利用者が
 * 判別できる形で示す必要がある。目立たせすぎず、しかし読み飛ばされない
 * 位置と濃さにする。フッタの直前に置く。
 */
.trm-adnote {
	background: var(--surface-2);
	border-top: 1px solid var(--line);
	/* .trm-page の外側にあるので、左右の余白をここで持つ。 */
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink-2);
}

.trm-adnote p {
	margin: 0;
	max-width: 78ch;
}

.trm-adnote strong {
	display: inline-block;
	margin-right: 8px;
	padding: 1px 7px;
	background: var(--ink);
	color: var(--surface);
	border-radius: 2px;
	font-size: 14px;
	letter-spacing: .04em;
}

/* ================================================================ 記事への導線 */

/*
 * カード自体はテーマの [st-postgroup] が描く。
 * ここで持つのは、その周りの見出しと区切りだけにする。
 * カードの中身に手を入れると、テーマ側の設定変更が効かなくなる。
 */
.trm-media {
	margin: 28px 0 0;
	padding: 18px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.trm-media__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--brand);
}

.trm-media__title {
	margin: 0;
	font-size: 19px;
	color: var(--ink);
}

.trm-media__all {
	font-size: 15px;
	white-space: nowrap;
}

.trm-media__lead {
	margin: 10px 0 14px;
	font-size: 15px;
	color: var(--ink-2);
}

/*
 * テーマのカードは記事本文の幅を前提に余白を持っている。
 * ここは囲みの中なので、はみ出さないようにだけ整える。
 */
.trm-media__list {
	margin: 0 -4px;
}

.trm-media__list img {
	max-width: 100%;
	height: auto;
}

.trm-media__fallback li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	font-size: 16px;
}

.trm-media__fallback time {
	font-family: var(--num);
	font-size: 14px;
	color: var(--ink-3);
	white-space: nowrap;
}

.trm-media__cats {
	margin: 16px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--line);
}

.trm-media__cats-label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-2);
}

.trm-media__cats ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.trm-media__cats a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* 指で押す前提。40 代以降でも外さない大きさにする。 */
	min-height: 40px;
	padding: 6px 12px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 15px;
	text-decoration: none;
}

.trm-media__cats a:hover {
	background: var(--brand-soft);
	border-color: var(--brand-2);
}

.trm-media__cats-count {
	font-family: var(--num);
	font-size: 13px;
	color: var(--ink-3);
}