@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */

/* フォーカスリング調整 */
label:has(input:focus-visible) {
	outline: 2px solid var(--cyan);
}

/* 空清専用・ボタンリンク */
.list-footer-link {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 2rem;
}

/* 空清専用・注釈エリア */
.kuusei-caption {
	margin-top: 6rem;
}

/* 比較表 */
.close_column {
	position: absolute;
	width: 2.4rem;
	height: 2.4rem;
	top: 1.25vw;
	right: 1.25vw;
	border-radius: 100%;
	background: #959595 url('/kuusei/assets/common/images/icon-close-w.svg') no-repeat center center / 50%;
}

.nodisplay {
	display: none !important;
}

.result-wrap {
	display: none;
}

.page-header .link-wrap {
	text-align: right;
}

.btn-has-arrow-left::after {
	content: '';
}

.page-header {
	padding: 2rem 0 2rem;
}

.result-header,
.result-body {
	position: relative;
}

.result-header {
	border-top: solid 1px #d0d0d0;
}

.main-title {
	font-size: 2.6rem;
	font-weight: 700;
}

.td-column {
	border-left: solid 1px #d0d0d0;
	border-right: solid 1px #d0d0d0;
}

.prod-header-column-container {
	display: inline-block;
	vertical-align: bottom;
	background-color: #fff;
	scroll-snap-type: x mandatory;
}

.td-column .row {
	display: flex;
	min-height: 3.5rem;
}

.td-column .row.category-row {
	background: #f5f5f5;
}

.prod-header-column-container .column {
	height: inherit;
	padding: 6px;
}

.prod-header-column-container .column,
.td-column .row .column {
	flex-shrink: 0;
	width: 40vw;
	text-align: center;
	background: #fff;
	position: relative;
}

.prod-header-column-container .column,
.td-column .row.category-row .column {
	background: #f5f5f5;
	border: none;
}

.prod-header-column-container .column {
	border-right: solid 1px #d0d0d0;
}

.td-column {
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
}

.td-column .column {
	display: flex;
	justify-content: center;
	align-items: center;
}

.list-options li {
	position: relative;
}

.option-title {
	font-size: 1.6rem;
	font-weight: 700;
	margin-bottom: 0.5em;
}

.option-title2 {
	font-size: 2rem;
	margin-bottom: 2em;
	text-align: center;
}

.option-label {
	cursor: pointer;
	padding: 0.3em 0 0.3em 2em;
	background: url('/kuusei/lineup/common/images/check-off.svg') no-repeat left 6px center / 18px auto;
	font-weight: 400;
}

.option-label:has(:checked) {
	background-image: url('/kuusei/lineup/common/images/check-on.svg');
	font-weight: 500;
}

.list-options input[type="checkbox"] {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.option-text {
	font-size: 1.6rem;
}

.list-options li:not(:first-child) {
	margin-top: 0.5em;
}

.btn-clear {
	margin-top: 3rem;
	text-align: center;
}

.btn-option-clear {
	border-bottom: solid 1px #000;
}

.btn-update {
	margin-top: 2rem;
	text-align: center;
}

.results-info {
	font-size: 1.5rem;
	font-weight: 500;
	text-align: center;
}

.new {
	padding-inline: 0.2em;
	background: #e6000d;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
}

.prod-name {
	font-size: 1.8rem;
	font-weight: bold;
	text-decoration: underline;
}

.row:not(.category-row)::before {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
	margin-top: -3.5rem;
	background: #f5f5f5;
	font-size: 1.4rem;
	border-left: solid 1px #d0d0d0;
	border-top: 1px solid #d1d1d1;
}

.row.ondisplay:not(.category-row)::before {
	background: #ffe69c;
}

.row[data-row-type="prod-pci"]::before {
	content: 'プラズマクラスターイオン濃度';
}

.row[data-row-name="pciMenseki"]::before {
	content: 'おすすめ畳数（プラズマクラスター適用床面積（目安）※1）';
}

.row[data-row-name="seijyouSpeed"]::before {
	content: '8畳のお部屋の清浄スピード（分）＊';
}

.row[data-row-name="kaze"]::before {
	content: '最大風量（\033a5/分)';
}

.row[data-row-name="kuuseiMenseki"]::before {
	content: '空気清浄適用床面積（目安）＊';
}

.row[data-row-name="kashitsuMenseki"]::before {
	content: '加湿適用床面積（目安）※2';
}

.row[data-row-name="joshitsuMenseki"]::before {
	content: '除湿適用床面積（目安）（50/60Hz）※3';
}

.row[data-row-name="kashitsu"]::before {
	content: '最大加湿量（mL/h）※4';
}

.row[data-row-name="joshitsu"]::before {
	content: '除湿能力（L/日）（50/60Hz）※5';
}

.row[data-row-name="onsei"]::before {
	content: '音声機能';
}

.row[data-row-name="auto"]::before {
	content: '自動運転';
}

.row[data-row-name="maintenance"]::before {
	content: 'お手入れ（水回り）';
}

.row[data-row-name="monitor"]::before {
	content: 'モニター';
}

.row[data-row-name="kiryu"]::before {
	content: '気流・構造';
}

.row[data-row-name="filter"]::before {
	content: '集じんフィルター／脱臭フィルター';
}

.row[data-row-name="prefilter"]::before {
	content: 'プレフィルター';
}

.row[data-row-name="disposablePrefilter"]::before {
	content: '使い捨てプレフィルター';
}

.row[data-row-name="kashitsuPrefilter"]::before {
	content: '使い捨て加湿プレフィルター';
}

.row[data-row-name="sensor"]::before {
	content: 'センサー';
}

.row[data-row-name="usability"]::before {
	content: '使いやすさ';
}

.row[data-row-name="sunpou"]::before {
	content: '外形寸法 幅×奥行×高さ（mm）';
}

.row[data-row-name="weight"]::before {
	content: '質量（kg）';
}

.row[data-row-type="prod-wifi"]::before {
	content: '無線LAN内蔵';
}

.row[data-row-name="aiMonitor"]::before {
	content: 'AIモニター';
}

.row[data-row-name="kashitsuSenjyou"]::before {
	content: '加湿内部洗浄';
}

.row[data-row-name="doubleFilter"]::before {
	content: 'Wフィルター構造';
}

.item p {
	font-size: 1.4rem;
}

/* PCIロゴマーク調整 */
.pci-logo {
	position: relative;
	padding: 1rem 2.5rem 1rem 1rem;
}

.pci-logo sup {
	position: absolute;
	right: 0.5rem;
	top: 1rem;
	font-size: 1.2rem;
}

.td-column .row .column:has(.pci-logo) {
	padding: 0;
}

/* COCORO AIRロゴマーク調整 */
.icon-cocoro {
	padding: 0.5rem 10%;
}

.page-footer {
	padding-top: 8rem;
}

.page-footer .btn-has-arrow-left {
	margin-inline: auto;
}

.count {
	display: inline-block;
	margin: 0 0.5em;
	font-size: 1.5em;
}
.user_s .row {
	display: none;
}

.user_s .row.ondisplay {
	display: flex;
}

/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@media (hover: hover) and (pointer: fine) {

	/* メインエリア：外部リンク */
	.link-hikaku:hover {
		text-decoration: none;
	}

	.btn-clear .hovering {
		border-bottom: solid 1px transparent;
	}

	.btn-update .hovering {
		background: #535353;
		color: #fff;
		border: solid 1px #fff;
	}
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media screen and (width <1080px) {
	.prod-img {
		padding: 2rem 5% 0;
	}

	.modal-container::-webkit-scrollbar {
		width: 10px;
	}

	.modal-container::-webkit-scrollbar-track {
		background-color: transparent;
	}

	.modal-container::-webkit-scrollbar-thumb {
		border: 4px solid transparent;
		background-color: #000;
		background-clip: content-box;
	}

	.modal {
		display: none;
	}

	.main-navi {
		position: sticky;
		top: 0;
		z-index: 11;
	}

	.btn-search-options {
		inline-size: 100%;
		font-size: 1.8rem;
		font-weight: 500;
		background: #f5f5f5;
		text-align: right;
	}

	.btn-option-menu {
		display: inline-block;
		inline-size: 100%;
		font-size: 1.5rem;
		font-weight: 500;
		padding: 0.75em 1em;
		box-shadow: 0px 3px 6px #0000004d;
	}

	.result-wrap {
		width: 100%;
	}

	.result-container {
		margin-top: -24px;
	}

	.result-wrap .base-width {
		padding: 0;
	}

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 11;
		background: rgba(0, 0, 0, 0.6);
		padding: 4rem 5%;
		display: flex;
		justify-content: center;
	}

	.modal[aria-hidden="false"] {
		display: block;
	}

	.micromodal-slide[aria-hidden="false"] .modal-overlay {
		animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
	}

	.btn-modal-close {
		inline-size: 30px;
		block-size: 30px;
		position: absolute;
		top: 8px;
		right: 8px;
	}

	.btn-modal-close::before {
		content: "";
		display: block;
		inline-size: 20px;
		block-size: 20px;
		background: url('/kuusei/assets/common/images/icon-close-w.svg') no-repeat center center/contain;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.micromodal-slide .modal-container,
	.micromodal-slide .modal-overlay {
		will-change: transform;
	}

	.modal-container {
		inline-size: 100%;
		background-color: #fff;
		overflow-y: auto;
	}

	.option-item-wrap {
		max-inline-size: 1200px;
		margin-inline: auto;
		padding: 3rem 5%;
	}

	.option-item:not(:first-of-type) {
		margin-top: 6.25vw;
	}

	.btn-option-update {
		padding: 0.5em 1em;
		font-size: 1.8rem;
		background: #fff;
		border: solid 1px #707070;
	}

	.results-info {
		padding-top: 1em;
	}

	.td-column {
		/*スクロールバー非表示（IE・Edge）*/
		-ms-overflow-style: none;
		/*スクロールバー非表示（Firefox）*/
		scrollbar-width: none;
	}

	.td-column::-webkit-scrollbar {
		display: none;
	}

	.result-header {
		margin-top: 5vw;
	}

	.prod-left .category {
		font-size: 1.2rem;
		padding-top: 3rem;
	}

	.prod-header-column-container .column {
		padding: 5vw 1vw;
		height: 100%;
	}

	.prod-header-column-container .column,
	.td-column .row .column {
		border-right: 1px solid #d0d0d0;
		width: 36vw;
		padding: 0.5rem;
	}

	.result-body {
		border-bottom: 1px solid #d0d0d0;
	}

	.prod-right {
		padding: 2rem 0;
	}

	.list-prod-link span {
		padding: 0 2.5vw;
		border: 1px solid #000;
		font-size: 4vw;
	}

	.row:not(.category-row)::before {
		border-right: 1px solid #d0d0d0;
		font-weight: bold;
		height: 3.5rem;
		padding-top: 0.4rem;
	}

	.close_column {
		width: 2.4rem;
		height: 2.4rem;
		top: 1.25vw;
		right: 1.25vw;
	}

	.prod-name {
		font-size: 1.8rem;
	}

	.option-item2 {
		margin-top: 5.5rem;
	}

	.btn-option-update {
		padding: 0.5em 1em;
		font-size: 1.8rem;
		background: #535353;
		color: #fff;
		border: solid 1px #707070;
	}
}

/* ====================================
	スマホ専用
===================================== */
@media print,
screen and (width <550px) {
	.td-column .row.pciMenseki {
		min-height: 5rem;
	}

	.row[data-row-name="pciMenseki"]::before {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 5rem;
		margin-top: -5rem;
		padding-top: 0;
	}
}

/* ====================================
	PC&タブレット
===================================== */
@media print,
screen and (768px<=width <1080px) {

	.prod-header-column-container .column,
	.td-column .row .column {
		width: 26vw;
	}

	
}

/* ====================================
	PC専用スタイル
===================================== */
@media print,
screen and (768px<=width) {

	/* 空清専用・ボタンリンク */
	.list-header-link {
		display: flex;
		flex-wrap: wrap;
		justify-content: end;
		column-gap: 2rem;
	}
}
/* ====================================
	PC&タブレット
===================================== */
@media print,
screen and (width >=768px) {
	#resultInfo .btn-option-clear {
		border: none;
		color: #fff;
		background: #000;
		border-radius: 10rem;
		font-size: 1.5rem;
		padding: 0 1rem;
		margin-left: 2rem;
	}
}

/* ====================================
	PC専用スタイル
===================================== */
@media print,
screen and (width >=1080px) {

	/* 空清専用・注釈エリア */
	.kuusei-caption {
		margin-top: 10rem;
	}

	.scroll-fix-wrap.passed .result-header-container {
		position: fixed;
		z-index: 10;
		top: -7px;
	}

	.scroll-fix-wrap.passed.passed-bottom .result-header-container {
		position: absolute;
	}

	.result-header-container {
		width: 100%;
		position: absolute;
		top: -7px;
		z-index: 10;
	}

	.btn-update {
		display: none;
	}

	.sp-only {
		display: none;
	}

	.prod-img {
		padding: 7%;
	}

	.scroll-fix-wrap {
		margin-top: 2rem;
	}

	.btn-update button {
		border: 1px solid #000;
		padding: 10px 10px;
		background: #fff;
	}

	.row:not(.category-row)::before {
		margin-top: -3.5rem;
		width: calc(100% - 1px);
		height: 3.5rem;
		padding-top: 0.6rem;
		font-size: 1.4rem;
		font-weight: bold;
	}

	.prod-header-column-container .column,
	.td-column .row .column {
		width: 50%;
	}

	.td-column .row .column {
		padding: 1rem;
	}

	.main-wrap {
		display: flex;
		justify-content: space-between;
	}

	.btn-modal-close {
		display: none;
	}

	.page-header {
		padding: 2rem 0 4rem;
	}

	.main-title {
		font-size: 3.6rem;
	}

	.main-navi {
		inline-size: 26rem;
	}

	.main-navi-inner {
		padding-bottom: 6rem;
		background: #f5f5f5;
	}

	.btn-search-options {
		display: none;
	}

	.base-width-pc,
	.base-width {
		max-inline-size: 1200px;
		margin-inline: auto;
	}

	.close_column {
		width: 2rem;
		height: 2rem;
		top: 0.5rem;
		right: 0.5rem;
	}

	.option-item {
		padding: 1.5em 1em;
	}

	.option-item2 {
		padding: 4.5rem 1em;
		border-top: 4px solid #fff;
	}

	.option-title {
		font-size: 1.8rem;
	}

	.results-info {
		font-size: 2rem;
	}

	.result-wrap {
		flex: 1 0;
		width: 100%;
		min-width: 720px;
		margin-left: 5rem;
	}

	.scroll-fix-wrap {
		position: sticky;
		top: 0;
	}

	.result-header-container {
		font-size: 1.2rem;
		background-color: #fff;
		position: sticky;
		top: 0;
	}

	/* COCORO AIRロゴマーク調整 */
	.icon-cocoro {
		padding-block: 1rem;
	}

	.outer-base-width {
		padding-inline: 1.5%;
	}

	.base-width-pc,
	.base-width {
		max-inline-size: 1200px;
		margin-inline: auto;
	}

	.bdr-top-wh {
		border-top: solid 2px #fff;
	}

	.result-header,
	.result-body {
		margin-right: 40px;
	}

	.result-body {
		border-bottom: 1px solid #d0d0d0;
	}

	.prod-header-column-container .row {
		position: relative;
	}

	.prod-header-column-container .row {
		height: 26rem;
		scroll-snap-type: x mandatory;
	}

	.prod-header-column-container .column,
	.td-column .row .column {
		width: 18.5rem;
		border-right: solid 1px #d0d0d0;
	}

	.prod-header-column-container .column {
		height: inherit;
		padding: 15px 15px 0 15px;
	}

	.prod-name {
		font-size: 2.4rem;
		margin-bottom: 12%;
	}

	.list-prod-link {
		margin-top: 8px;
	}

	.list-prod-link span {
		border: 1px solid #000;
		padding: 0 5px;
	}

	.category-row {
		height: 35px;
	}

	/* NEXT/PREV */
	.side-scroll-btn {
		width: 40px;
		height: 40px;
		background-repeat: no-repeat;
		background-position: left 0.5em center;
		background-size: auto 30px;
		cursor: pointer;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
	}

	.side-scroll-btn {
		display: none;
	}

	.side-scroll-btn.hovering {
		opacity: 0.6;
	}

	#resultPrev {
		background-image: url('/assets/common/images/chevron-left-solid.svg');
		left: -40px;
	}

	#resultNext {
		background-image: url('/assets/common/images/chevron-right-solid.svg');
		right: -40px;
	}

	/*modal*/
	.btn-modal-close {
		display: none;
	}

}

@keyframes mmfadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mmfadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}