@charset "UTF-8";
/* ==========================================================
   ROTEC 比較表（画像 → HTML 化）
   rotec_chart02_01 / 03_01 / 03_02 / 03_03 の置き換え用
   クラスはすべて rt- で始まり、既存の style.css と衝突しません
   ========================================================== */

.rt-cmp {
	--rt-gap: 6px;
	--rt-name-w: 80px;
	--rt-radius: 4px;
	--rt-navy: #0b4a9c;
	--rt-head: #b3e0f8;
	--rt-head-txt: #1d5dab;
	--rt-teal: #00978a;
	--rt-red: #e60039;
	--rt-rose: #e8395c;
	--rt-blue: #0f89d6;
	--rt-prod: #a8b9e2;
	--rt-prod-lb: #c8e7f9;
	--rt-green: #d5edcb;
	--rt-salmon: #f9d6ca;
	--rt-pink: #fadbe6;
	--rt-gray: #ececec;
	--rt-lblue: #d4ecfb;
	--rt-txt: #1a1a1a;

	margin: 30px auto 0;
	color: var(--rt-txt);
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
}
.rt-cmp *, .rt-cmp *::before, .rt-cmp *::after { box-sizing: border-box; }
/* reset.css が span 等の太さを戻すため継承させる */
.rt-cmp span, .rt-cmp small, .rt-cmp b { font-weight: inherit; }

.rt-grid {
	display: grid;
	gap: var(--rt-gap);
	align-items: stretch;
}
.rt-row { display: contents; }

/* ---------- セル共通 ---------- */
.rt-cell, .rt-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 8px 10px;
	border-radius: var(--rt-radius);
	font-weight: bold;
}
.rt-head {
	min-height: 0;
	padding: 6px 8px;
	background: var(--rt-head);
	color: var(--rt-head-txt);
	font-size: 15px;
}
.rt-head small { display: block; font-size: 10px; letter-spacing: 0; }
.rt-head--span2 { grid-row: span 2; }
.rt-head--group { grid-column: span 2; }
.rt-head--sub { background: #fff; border: 2px solid var(--rt-head); }

/* 製品名 */
.rt-prod { background: var(--rt-prod); font-size: 16px; }
.rt-prod--lb { background: var(--rt-prod-lb); }
.rt-prod--ours { background: var(--rt-navy); color: #fff; font-size: 18px; line-height: 1.2; }
.rt-prod--ours small {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	font-style: italic;
	letter-spacing: .02em;
	text-align: right;
	align-self: stretch;
	padding-right: 4px;
}
.rt-prod--ours small b { font-size: 17px; }

/* 色 */
.rt-c-teal   { background: var(--rt-teal);  color: #fff; font-size: 17px; }
.rt-c-red    { background: var(--rt-red);   color: #fff; font-size: 19px; }
.rt-c-rose   { background: var(--rt-rose);  color: #fff; font-size: 18px; }
.rt-c-blue   { background: var(--rt-blue);  color: #fff; font-size: 21px; }
.rt-c-green  { background: var(--rt-green); }
.rt-c-salmon { background: var(--rt-salmon); }
.rt-c-pink   { background: var(--rt-pink); }
.rt-c-gray   { background: var(--rt-gray); }
.rt-c-lblue  { background: var(--rt-lblue); font-size: 21px; }
.rt-c-outline {
	background: #fff;
	border: 2px solid var(--rt-navy);
	color: var(--rt-navy);
	font-size: 18px;
	line-height: 1.3;
}
.rt-small-lines { font-size: 12px; line-height: 1.7; }

/* 金額 */
.rt-price { font-size: 25px; line-height: 1.15; letter-spacing: .01em; }
.rt-price small { font-size: .6em; }
.rt-price-sub { display: block; font-size: 12px; margin-top: 2px; }
.rt-span2 { grid-column: span 2; }

.rt-note {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.6;
	text-align: left;
}
.rt-note--right { text-align: right; }

/* ---------- 表ごとの列幅 ---------- */
.rt-cmp--install .rt-grid { grid-template-columns: 2.2fr 1.75fr 1.1fr 1.75fr 2.7fr; }
.rt-cmp--price   { max-width: 760px; }
.rt-cmp--price .rt-grid   { grid-template-columns: 1.85fr 1.5fr 1.6fr 1.3fr; }
.rt-cmp--running .rt-grid { grid-template-columns: 1.95fr 1.4fr 3.6fr 16px 1.3fr 1.3fr; }
.rt-cmp--running .rt-prod { padding: 8px 4px; font-size: 14px; }
.rt-cmp--running .rt-prod--ours { font-size: 16px; }
.rt-cmp--running .rt-prod--ours small { font-size: 9px; white-space: nowrap; }
.rt-cmp--running .rt-prod--ours small b { font-size: 13px; }
.rt-cmp--running .rt-c-teal,
.rt-cmp--running .rt-c-green { padding: 8px 4px; font-size: 13px; }
.rt-cmp--running .rt-price { font-size: 22px; }
.rt-cmp--water   { max-width: 860px; }
.rt-cmp--water .rt-grid   { grid-template-columns: 2.1fr 1.75fr 1.85fr 1.85fr; }

/* ---------- フィルター交換サイクル ---------- */
.rt-head--cycle { padding: 6px 8px 8px; justify-content: flex-start; }
.rt-head--cycle .rt-head__title {
	align-self: stretch;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--rt-navy);
	margin-bottom: 8px;
}
.rt-timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3px;
	width: 100%;
	padding-left: calc(var(--rt-name-w) + 3px);
}
.rt-tick {
	position: relative;
	justify-self: center;
	padding: 1px 8px;
	border-radius: 3px;
	background: var(--rt-navy);
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
}
.rt-tick::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	margin-left: -5px;
	border: 5px solid transparent;
	border-bottom: 0;
	border-top-color: var(--rt-navy);
}
.rt-tick--start { background: var(--rt-rose); }
.rt-tick--start::after { border-top-color: var(--rt-rose); }

.rt-cycle { padding: 6px; gap: 4px; background: transparent; }
.rt-cycle .rt-timeline { display: none; } /* スマホ用。PCでは見出しに表示 */
.rt-bar {
	display: grid;
	grid-template-columns: var(--rt-name-w) 1fr;
	gap: 3px;
	width: 100%;
	font-size: 12px;
}
.rt-bar__name {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2px;
	border: 1px solid #5c8fd6;
	border-radius: 3px;
	background: #fff;
	color: #3a6fc2;
	font-size: 11px;
	line-height: 1.25;
	white-space: nowrap;
}
.rt-bar__name small { color: #555; font-size: 9px; font-weight: normal; }
.rt-bar__segs {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 3px;
}
.rt-seg {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 1px;
	border-radius: 3px;
	white-space: nowrap;
}
.rt-s1 { grid-column: span 1; font-size: 10px; letter-spacing: -.03em; }
.rt-s2 { grid-column: span 2; }
.rt-s3 { grid-column: span 3; }
.rt-s6 { grid-column: span 6; }
.rt-seg--inc    { background: #cdc6ea; color: #e4007f; }
.rt-seg--pay    { background: #8b7fc8; color: #fff; }
.rt-bar--ro .rt-seg--inc { background: #8fcbf0; }
.rt-bar--ro .rt-seg--pay { background: var(--rt-blue); }
.rt-s1.rt-seg--inc { font-size: 9px; line-height: 1.1; }

.rt-arrow {
	align-self: center;
	width: 0;
	height: 0;
	min-height: 0;
	padding: 0;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	border-left: 16px solid #fbdbe5;
	border-radius: 0;
}
.rt-arrow--ours { border-left-color: var(--rt-rose); }
.rt-arrow-blank { grid-row: span 2; }

/* 各セル見出し（スマホ時のみ表示） */
.rt-cell::before { content: none; }

/* ==========================================================
   スマホ・タブレット：行ごとのカード表示
   ========================================================== */
@media screen and (max-width: 768px) {
	.rt-cmp { font-size: 14px; }
	.rt-cmp .rt-grid { display: block; }
	.rt-cmp .rt-head, .rt-cmp .rt-arrow, .rt-cmp .rt-arrow-blank { display: none; }

	.rt-cmp .rt-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px;
		margin-bottom: 14px;
		padding: 4px;
		border-radius: 6px;
		background: #f2f8fc;
	}
	.rt-cmp .rt-row--ours { background: #e3edf9; }

	.rt-cmp .rt-cell {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 92px 1fr;
		align-items: center;
		min-height: 44px;
		padding: 0;
		text-align: center;
		overflow: hidden;
	}
	.rt-cmp .rt-cell::before {
		content: attr(data-label);
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		padding: 4px 6px;
		background: var(--rt-head);
		color: var(--rt-head-txt);
		font-size: 12px;
		line-height: 1.3;
	}
	.rt-cmp .rt-cell > * { padding: 8px; }

	/* 製品名はカードの見出しに */
	.rt-cmp .rt-prod {
		display: flex;
		min-height: 0;
		padding: 10px;
		font-size: 17px;
	}
	.rt-cmp .rt-prod::before { content: none; }
	.rt-cmp .rt-prod--ours { font-size: 19px; }
	.rt-cmp .rt-prod--ours small { text-align: center; padding-right: 0; }

	/* 見出しを上に置く（半幅・全幅） */
	.rt-cmp .rt-cell--stack,
	.rt-cmp .rt-cell--half {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}
	.rt-cmp .rt-cell--half { grid-column: auto; }
	.rt-cmp .rt-cell--stack::before,
	.rt-cmp .rt-cell--half::before { padding: 3px 4px; }
	.rt-cmp .rt-cell--half > * { align-self: center; justify-self: center; }

	.rt-cmp .rt-c-outline { border-width: 2px; font-size: 16px; }
	.rt-cmp .rt-c-red, .rt-cmp .rt-c-rose, .rt-cmp .rt-c-teal { font-size: 16px; }
	.rt-cmp .rt-c-blue, .rt-cmp .rt-c-lblue { font-size: 19px; }
	.rt-cmp .rt-price { font-size: 22px; }
	.rt-cmp .rt-small-lines { font-size: 12px; line-height: 1.6; text-align: left; }

	/* ランニングコスト表：名称をバーの上に置き、8分割の幅を確保 */
	.rt-cmp .rt-cycle { background: #fff; }
	.rt-cmp .rt-cycle > .rt-cycle__inner { display: flex; flex-direction: column; gap: 6px; padding: 8px 6px 10px; }
	.rt-cmp .rt-cycle .rt-timeline { display: grid; padding-left: 0; margin-bottom: 2px; }
	.rt-cmp .rt-tick { padding: 1px 6px; font-size: 11px; }
	.rt-cmp .rt-bar { grid-template-columns: 1fr; gap: 3px; font-size: 11px; }
	.rt-cmp .rt-bar__name {
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: 6px;
		padding: 0;
		border: 0;
		background: none;
		font-size: 11px;
		text-align: left;
	}
	.rt-cmp .rt-bar__segs { gap: 2px; }
	.rt-cmp .rt-seg { padding: 5px 1px; }
	.rt-cmp .rt-s1 { font-size: 9px; letter-spacing: -.05em; }

	.rt-note { font-size: 11px; }
	.rt-note--right { text-align: left; }
}

/* タブレット幅：文字を少し詰めて折り返しを抑える */
@media screen and (min-width: 769px) and (max-width: 980px) {
	.rt-cmp .rt-cell { padding: 6px; }
	.rt-cmp .rt-prod { font-size: 14px; }
	.rt-cmp .rt-prod--ours { font-size: 15px; }
	.rt-cmp .rt-prod--ours small { font-size: 9px; white-space: nowrap; }
	.rt-cmp .rt-prod--ours small b { font-size: 13px; }
	.rt-cmp .rt-c-teal, .rt-cmp .rt-c-rose, .rt-cmp .rt-c-outline { font-size: 15px; }
	.rt-cmp .rt-small-lines { font-size: 11px; }
}

/* ランニングコスト表は列が多いため、タブレット幅（〜980px）でもカード表示にする */
@media screen and (min-width: 769px) and (max-width: 980px) {
	.rt-cmp--running { font-size: 14px; max-width: 560px; }
	.rt-cmp--running .rt-grid { display: block; }
	.rt-cmp--running .rt-head, .rt-cmp--running .rt-arrow, .rt-cmp--running .rt-arrow-blank { display: none; }

	.rt-cmp--running .rt-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px;
		margin-bottom: 14px;
		padding: 4px;
		border-radius: 6px;
		background: #f2f8fc;
	}
	.rt-cmp--running .rt-row--ours { background: #e3edf9; }

	.rt-cmp--running .rt-cell {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 92px 1fr;
		align-items: center;
		min-height: 44px;
		padding: 0;
		text-align: center;
		overflow: hidden;
	}
	.rt-cmp--running .rt-cell::before {
		content: attr(data-label);
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		padding: 4px 6px;
		background: var(--rt-head);
		color: var(--rt-head-txt);
		font-size: 12px;
		line-height: 1.3;
	}
	.rt-cmp--running .rt-cell > * { padding: 8px; }

	/* 製品名はカードの見出しに */
	.rt-cmp--running .rt-prod {
		display: flex;
		min-height: 0;
		padding: 10px;
		font-size: 17px;
	}
	.rt-cmp--running .rt-prod::before { content: none; }
	.rt-cmp--running .rt-prod--ours { font-size: 19px; }
	.rt-cmp--running .rt-prod--ours small { text-align: center; padding-right: 0; }

	/* 見出しを上に置く（半幅・全幅） */
	.rt-cmp--running .rt-cell--stack,
	.rt-cmp--running .rt-cell--half {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}
	.rt-cmp--running .rt-cell--half { grid-column: auto; }
	.rt-cmp--running .rt-cell--stack::before,
	.rt-cmp--running .rt-cell--half::before { padding: 3px 4px; }
	.rt-cmp--running .rt-cell--half > * { align-self: center; justify-self: center; }

	.rt-cmp--running .rt-c-outline { border-width: 2px; font-size: 16px; }
	.rt-cmp--running .rt-c-red, .rt-cmp--running .rt-c-rose, .rt-cmp--running .rt-c-teal { font-size: 16px; }
	.rt-cmp--running .rt-c-blue, .rt-cmp--running .rt-c-lblue { font-size: 19px; }
	.rt-cmp--running .rt-price { font-size: 22px; }
	.rt-cmp--running .rt-small-lines { font-size: 12px; line-height: 1.6; text-align: left; }

	/* ランニングコスト表：名称をバーの上に置き、8分割の幅を確保 */
	.rt-cmp--running .rt-cycle { background: #fff; }
	.rt-cmp--running .rt-cycle > .rt-cycle__inner { display: flex; flex-direction: column; gap: 6px; padding: 8px 6px 10px; }
	.rt-cmp--running .rt-cycle .rt-timeline { display: grid; padding-left: 0; margin-bottom: 2px; }
	.rt-cmp--running .rt-tick { padding: 1px 6px; font-size: 11px; }
	.rt-cmp--running .rt-bar { grid-template-columns: 1fr; gap: 3px; font-size: 11px; }
	.rt-cmp--running .rt-bar__name {
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: 6px;
		padding: 0;
		border: 0;
		background: none;
		font-size: 11px;
		text-align: left;
	}
	.rt-cmp--running .rt-bar__segs { gap: 2px; }
	.rt-cmp--running .rt-seg { padding: 5px 1px; }
	.rt-cmp--running .rt-s1 { font-size: 9px; letter-spacing: -.05em; }

}

/* PC時、サイクルセルの内側ラッパーは素通し */
.rt-cycle__inner { display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; justify-content: center; }