@charset "UTF-8";

label:has(input:focus-visible) {
	outline: 2px solid var(--cyan);
}

.canister,
.categoryc {
	display: none;
}

.close_column {
	position: absolute;
	width: 2rem;
	height: 2rem;
	top: 0.5rem;
	right: 1rem;
	border-radius: 100%;
	background: #959595 url(/souji/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;
}

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

.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: 35px;
}

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

.prod-header-column-container .row {
	height: 60vw;
}

.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;
}

.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("images/check-off.svg") no-repeat left 6px center / 18px auto;
	font-weight: 400;
}

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

.option-label2 {
	cursor: pointer;
	padding: 0.3em 0 0.3em 2em;
	background: url("images/maru-off.svg") no-repeat left 6px center / 18px auto;
	font-weight: 400;
}

.option-label2:has(:checked) {
	background-image: url("images/maru-check-on.svg");
	font-weight: 500;
}

.list-options input[type="checkbox"],
.list-options input[type="radio"] {
	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.option-type2 li {
	background: #fff;
	border: solid 2px transparent;
}

.list-options.option-type2 li:has(:checked) {
	border: solid 2px #535353;
}

.option-type2 .option-label {
	display: block;
	padding: 0.3em 0 0.3em 2em;
	background: url("images/check-off2.svg") no-repeat left 6px center / 18px auto;
}

.option-type2 .option-label:has(:checked) {
	background-image: url(images/check-on2.svg);
	font-weight: 500;
}

.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: 0 0.2em;
	background: #e6000d;
	color: #fff;
	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: -9vw;
	background: #f5f5f5;
	font-size: 1.4rem;
	border-left: solid 1px #d0d0d0;
	border-top: 1px solid #d1d1d1;
}

.row[data-row-name="dust"]::before {
	content: "集じん方式";
}
.row[data-row-name="sound"]::before {
	content: "運転音";
}
.row[data-row-name="mass"]::before {
	content: "標準質量（本体質量）";
}
.row[data-row-name="size"]::before {
	content: "本体寸法（幅×奥行×高さ）";
}
.row[data-row-name="operating"]::before {
	content: "最長連続運転時間";
}
.row[data-row-name="battery"]::before {
	content: "バッテリー（リチウムイオン電池）";
}
.row[data-row-name="stand"]::before {
	content: "スタンド収納時の高さ";
}
.row[data-row-name="length"]::before {
	content: "電源方式（コードの長さ）";
}
.row[data-row-name="charging2"]::before {
	content: "充電方式";
}
.row[data-row-name="charging"]::before {
	content: "充電時間";
}
.row[data-row-name="consumption"]::before {
	content: "消費電力";
}
.row[data-row-name="workrate"]::before {
	content: "吸込仕事率（消費電力）";
}
.row[data-row-name="volume"]::before {
	content: "集じん容積";
}
.row[data-row-name="motor"]::before {
	content: "モーター";
}

.row[data-row-name="karamicyclone"]::before {
	content: "からみにく～いサイクロン";
}
.row[data-row-name="powerhead"]::before {
	content: "パワーヘッド（自走パワーアシスト）";
}
.row[data-row-name="gokushuihead"]::before {
	content: "極吸ヘッド";
}
.row[data-row-name="powerful"]::before {
	content: "パワフルスリムヘッド";
}
.row[data-row-name="compact"]::before {
	content: "コンパクトスリムヘッド";
}
.row[data-row-name="floorhead"]::before {
	content: "フロアヘッド";
}
.row[data-row-name="petatto"]::before {
	content: "ペタッとヘッド";
}
.row[data-row-name="sumimade"]::before {
	content: "端までブラシ";
}
.row[data-row-name="karami"]::before {
	content: "からみにく～いブラシ";
}
.row[data-row-name="nature"]::before {
	content: "風切り音低減構造";
}
.row[data-row-name="funnel"]::before {
	content: "ファンネルサイレンサー";
}
.row[data-row-name="antivibration"]::before {
	content: "遮音防振構造";
}
.row[data-row-name="damping"]::before {
	content: "ダンピングコントロール";
}
.row[data-row-name="onetouch"]::before {
	content: "ワンタッチ着脱カップ";
}
.row[data-row-name="sokopoi"]::before {
	content: "そこポイ";
}
.row[data-row-name="surutto"]::before {
	content: "スルッとポイ";
}
.row[data-row-name="pacin"]::before {
	content: "パックinカップ構造";
}
.row[data-row-name="light"]::before {
	content: "どこでもライト";
}
.row[data-row-name="ledlight"]::before {
	content: "LEDライト";
}
.row[data-row-name="sugutoru"]::before {
	content: "新スグトル構造";
}
.row[data-row-name="hook"]::before {
	content: "ちょいかけフック";
}
.row[data-row-name="eco"]::before {
	content: "環境配慮設計";
}

.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;
}

/*.kinou .row {
	display: none;
}*/

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

.result-body .td-column .row .column .item p span {
	color: #00bfff;
	font-size: 60%;
	position: relative;
	top: -0.7rem;
}



.result-body .td-column .row .column {
    display: flex;
    justify-content: center;
    align-items: center;
	padding: 5px 0px 8px;
}

.yotei {
	font-size: 1.4rem;
	text-align: center;
	color: #f00;
	padding-top: 5px;
}
.row .sub-ttl {
	font-weight: 700;
	margin-top: 10px;
}


/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@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) {
	.td-column .row {
		min-height: 9vw;
	}

	.prod-header-column-container .row {
		height: 80vw;
	}

	.prod-img {
		padding: 2vw 6vw 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(/souji/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: 3.5vw;
		padding-top: 5vw;
	}

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

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

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

	.prod-right {
		padding: 2.5vw 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: 9vw;
		padding-top: 1.25vw;
		font-size: 4vw;
	}

	.option-title2.tt {
		display: none;
	}

	.close_column {
		width: 5vw;
		height: 5vw;
		top: 1.25vw;
		right: 2.5vw;
	}

	.prod-name {
		font-size: 4vw;
	}

	.item p {
		font-size: 4vw;
	}

	.new {
		font-size: 3.5vw;
	}

	.row[data-row-name="kanso"] {
		height: 15vw;
	}

	.row[data-row-name="kanso"] .column {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.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;
	}
}

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

/* ====================================
	PC専用スタイル
===================================== */
@media print,
screen and (width >=1080px) {
	.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%;
	}

	.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;
	}

	.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;
	}

	.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: 34rem;
		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: 30px 15px 0 15px;
	}

	.result-body .td-column .row .column {
		display: flex;
		/* align-items: flex-start; */
		justify-content: center;
		/* padding: 5px; */
	}

	.prod-left .category {
		min-height: 35px;
	}

	.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*/

	.micromodal-slide[aria-hidden="false"] .modal-overlay {
		animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 11;
		background: rgba(0, 0, 0, 0.6);
		padding: 6rem 5% 4rem;
		display: flex;
		justify-content: center;
	}

	.micromodal-slide[aria-hidden="false"] .btn-modal-close {
		display: block;
		inline-size: 35px;
		block-size: 35px;
		position: absolute;
		top: 10px;
		right: 10px;
	}

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

	.micromodal-slide[aria-hidden="false"] .modal-overlay .modal-container {
		background-color: #fff;
		inline-size: 100%;
		max-inline-size: 1200px;
		max-block-size: 70svh;
		margin-inline: auto;
		padding: 8rem 5% 3rem;
		overflow-y: auto;
	}

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

	.micromodal-slide[aria-hidden="false"] .modal-overlay .modal-container .option-title {
		font-size: 1.6rem;
	}

	.micromodal-slide[aria-hidden="false"] .modal-overlay .modal-container .option-title2.tt {
		display: none;
	}

	.micromodal-slide[aria-hidden="false"] .modal-overlay .modal-container .option-item2 {
		display: block;
	}

	.micromodal-slide[aria-hidden="false"] .modal-overlay .modal-container .option-item2 .option-title2 {
		text-align: center;
		font-size: 2.4rem;
	}

	.micromodal-slide[aria-hidden="false"] .modal-overlay .modal-container .btn-update {
		display: block;
	}

	.micromodal-slide[aria-hidden="false"] .modal-overlay .modal-container .btn-update button {
		border: 1px solid #000;
		padding: 10px 10px;
	}

	.micromodal-slide[aria-hidden="false"] .modal-overlay .modal-container ul {
		display: flex;
	}

	.micromodal-slide[aria-hidden="false"] .modal-overlay .modal-container li {
		width: 23.5%;
	}

	.micromodal-slide[aria-hidden="false"] .modal-overlay .modal-container .option-item2 ul {
		flex-wrap: wrap;
	}

	.micromodal-slide[aria-hidden="false"] .modal-overlay .modal-container .option-item2 ul li {
		width: 25%;
		margin-bottom: 2rem;
	}

	.micromodal-slide[aria-hidden="false"] .modal-overlay .modal-container .list-options li:not(:first-child) {
		margin-top: 0;
	}

	.micromodal-slide[aria-hidden="false"] .modisplay {
		display: none;
	}
}

@keyframes mmfadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mmfadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}