@charset "utf-8";

/* page-catalog.css */

@import url('parts-form.css');

.toggle-box {
	margin-bottom: var(--space-xxs);
}

.toggle-title {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	width: 100%;
	padding: 0.5em 1em;
	background-color: var(--color-main);
	font-size: var(--ft-size-l);
	color: var(--color-w);
	cursor: pointer;
}

.toggle-title::after {
	content: "";
	width: calc(16px + 1.0rem);
	height: 16px;
	margin-left: auto;
	background: url("../images/icon_toggle_arw_w.svg") center center no-repeat;
	flex-shrink: 0;
	transition: 0.2s;
}

.toggle-box.show .toggle-title::after {
	transform: rotate(180deg);
}

body .toggle-title + * {
	display: none;
}

.toggle-content {
	padding: 1em;
}

div[data-name="catalog"] .smf-checkboxes-control__control {
	display: flex;
	flex-flow: row wrap;
	gap: 2rem;
}

div[data-name="catalog"] .smf-label {
	flex-basis: 170px;
}

div[data-name="catalog"] .smf-label label {
    font-size: var(--ft-size-s);
}

div[data-name="catalog"] .smf-label label::before {
	content: "";
	display: block;
	background: url(../images/news_noimg.png) center center no-repeat;
	background-color: #cccccc;
	background-size: contain;
	aspect-ratio: 424/600;
}

div[data-name="catalog"] .smf-label:nth-of-type(1) label::before { background-image: url(../images/catalog_wasozai.png); }
div[data-name="catalog"] .smf-label:nth-of-type(2) label::before { background-image: url(../images/catalog_wweco.png); }
div[data-name="catalog"] .smf-label:nth-of-type(3) label::before { background-image: url(../images/catalog_dsp.png); }
div[data-name="catalog"] .smf-label:nth-of-type(4) label::before { background-image: url(../images/catalog_stonetex.png); }
div[data-name="catalog"] .smf-label:nth-of-type(5) label::before { background-image: url(../images/catalog_sabimeta.png); }
div[data-name="catalog"] .smf-label:nth-of-type(6) label::before { background-image: url(../images/catalog_likeboard.png); }
div[data-name="catalog"] .smf-label:nth-of-type(7) label::before { background-image: url(../images/catalog_meji.png); }

/* ================================================ */
@media (max-width: 1000px) {
}

/* ================================================ */
@media (max-width: 840px) {
}

/* ================================================ */
@media (max-width: 639px) {
}

/* ================================================ */
@media (max-width: 480px) {
}