@charset "utf-8";

/* @ detailsと共通、あとで統合する */
.l-prd-function {
	line-height: 1.33;
	font-size: 0.875em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.l-prd-function__item {
	background: #efefef;
	border-radius: 0.214em;
	padding: 0.5em 1.42em;
}
/* @ detailsと共通、あとで統合する */

/* @ grid */
.l-prd-grid {
}
.l-prd-grid__filter {
}
.l-prd-grid__result {
}
.l-prd-grid__result > * + * {
	margin-top: 2rem;
}
@media (min-width: 641px) {
	.l-prd-grid {
		display: flex;
		gap: 3.84%;
	}
	.l-prd-grid__filter {
		flex: 0 0 31.53%;

		max-height: 90vh;
		overflow: auto;
		position: sticky;
		top: var(--g-header-height);
	}
	:where(body.is-modal-active) .l-prd-grid__filter {
		z-index: 1;
	}
	.l-prd-grid__result {
		flex: 1 1 auto;
	}
}
@media (max-width: 640px) {
	.l-prd-grid__result {
		position: relative;
		z-index: 0;
	}
	.l-prd-grid__filter {
		background: #eee;
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		max-height: 100vh;
		overflow: auto;
		overscroll-behavior: contain;
		padding: 8vw;
		transition: 666ms cubic-bezier(0.16, 1, 0.3, 1);
	}
	#show-filter:not(:checked) ~ * .l-prd-grid__filter {
		visibility: hidden;
		opacity: 0;
	}
}

:where(body.is-modal-active) .l-prd-grid__filter {
	position: static; /* fix for safari */
	overflow: visible; /* fix for safari */
}

/* @ filter ui */
.l-filter-ui {
	text-align: right;
}
@media (min-width: 641px) {
	.l-filter-ui {
		display: none;
	}
}

/* @ kw search */
.l-filter-kw {
	background: #fff;
	border: 2px solid #ccc;
	display: flex;
	gap: 2px;
	padding: 2px;
}
.g-input--filter-kw {
	flex: 1 1 auto;
	width: 0;
	border: 0;
}
.l-filter-kw__send {
	cursor: pointer;
	text-align: center;
	color: #fff;
	background: #e60012;
	border: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0.75rem;
}
.l-filter-kw__send > img {
	width: 1.125rem;
}

/* @ howto */
.l-filter-howto {
	color: #fff;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em 1rem;
	padding: 1rem;
}
.l-filter-howto__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1em;
}
.g-note--howto-supply {
	font-size: 0.75em;
}
.g-ttl--howto {
	font-size: 1.125em;
	font-weight: bold;
	margin: 0;
}
.l-filter-howto__label {
	line-height: 1.33;
	font-size: 0.75em;
	color: #000;
	background: #fff;
	padding: 0.333em 0.666em;
}
.l-filter-howto__icon {
	width: 1.125rem;
}
.filter-howto {
}
.g-modal--howto {
	color: #000;
}
.l-btn--filter-reset {
	cursor: pointer;
	font-size: 0.875em;
	background: #eee;
	outline: 1px solid #fff;
	padding: 0.5em 0.75em;
}

/* @ howto modal */
.l-ttl--usage {
	font-size: 1.25em;
	font-weight: normal;

	border-bottom: 1px solid;
	padding-block-end: 0.5em;
}

/* @ category */
.l-prd-grid__filter.is-disabled {
	pointer-events: none;
	user-select: none;
}
.l-prd-grid__filter.is-disabled > * {
	opacity: 0.333;
}
.l-prd-grid__filter > :not(.not-stack) + * {
	margin-top: 1.25rem;
}
.l-filter-categories {
}
.l-filter-categories > * + * {
	margin-top: 1.25rem;
}
.l-filter-catgroup {
	border: 1px solid #dcdcdc;
}
.l-filter-catgroup > .l-filter-catgroup {
	border: 0;
}
.l-filter-catgroup > * + .l-filter-catgroup {
	border-top: 1px solid #dcdcdc;
}
.l-filter-catgroup__title {
	line-height: 1.33;
	font-size: 1em;
	font-weight: normal;
	background: #f8f8f8;
	border-radius: 3px 3px 0 0;
	padding: 0.75em 1em;
}
.l-filter-catgroup__title:where(summary) {
	cursor: pointer;
	position: relative;
	z-index: 0;
	list-style: none;
}
.l-filter-catgroup > .l-filter-catgroup > .l-filter-catgroup__title {
	font-size: 0.9375em;
	background: none;
}
.l-filter-catgroup__title::-webkit-details-marker {
	display: none;
}
summary.l-filter-catgroup__title::after {
	content: "";
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-style: solid;
	border-width: 2px 2px 0 0;
	transform: translateY(-33.3%) rotate(135deg);
	position: absolute;
	top: 0;
	right: 0.75em;
	bottom: 0;
	margin: auto 0;
}
.l-filter-catgroup[open] > .l-filter-catgroup__title::after {
	transform: translateY(33.3%) rotate(-45deg);
}
.l-filter-catgroup__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1em;
}
.l-filter-catgroup[open] > .l-filter-catgroup__list {
	animation: fadein 666ms cubic-bezier(0.16, 1, 0.3, 1);
}
.l-filter-catgroup > .l-filter-catgroup > .l-filter-catgroup__list {
	padding-top: 0;
}
.l-filter-catgroup__list > * + * {
	margin-top: 0.333rem;
}
.l-filter-category {
	line-height: 1.33;
	font-size: 0.875em;
	display: flex;
	align-items: flex-start;
	gap: 0.666em;
}
* + .l-filter-category {
	margin-top: 0.666em;
}
.l-filter-category > * {
	margin-top: 0.333em;
}
.l-filter-category > input {
	flex: 0 0 auto;
}
.l-filter-category__stock {
	line-height: 1;
	font-size: 0.625em;
	text-align: center;
	color: #fff;
	background: #bababa;
	border-radius: 9em;
	padding: 0.5em 0.75em;
}
.l-ttl--filter-group {
	font-size: 1em;
	font-weight: bold;
}

/* 発光色 color chip*/
.l-filter-category :where(.g-with-icon) {
	margin-top: calc(0.166em);
}
.l-filter__color-chip {
	width: 1em;
	height: 1em;
	transform: scale(1.375);
}

/* @ reset button */
.g-btn--filter-reset {
	cursor: pointer;
	font-size: 0.875em;
	color: #fff;
	background: #000;
	border: 1px solid #dcdcdc;
	width: 100%;
}

/* @ result > header */
.l-result-header {
	text-align: center;
	display: grid;
}
.g-ttl--result {
	line-height: 1.5;
	font-size: 1.125em;
	font-weight: normal;
	text-align: center;
	margin: 0;
}
.l-result-sort {
	cursor: pointer;
	border: 0;
	background: inherit;
	display: flex;
	align-items: center;
	gap: 0.875em;
	padding: 0;
}
.l-result-sort::after {
	content: "";
	display: block;
	width: 0.333em;
	height: 0.333em;
	border-style: solid;
	border-width: 0 1px 1px 0;
	transform: translateY(-33.3%) rotate(45deg);
}
.js-list-view-change--list:not(:checked) ~ * .l-result-sort__icon--list,
.js-list-view-change--card:not(:checked) ~ * .l-result-sort__icon--card {
	display: none;
}
@media (min-width: 641px) {
	.l-result-header {
		align-items: center;
		grid-template-columns: 1fr auto;
		grid-gap: 1em;
	}
	.l-result-header__show-filter {
		display: none;
	}
}
@media (max-width: 640px) {
	.l-result-header {
		background: #fff;
		/* grid-template-columns: repeat(3, 1fr); */
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		position: sticky;
		z-index: 1;
		top: 4.28rem;
		margin-left: -4vw;
		margin-right: -4vw;
		border-style: solid;
		border-width: 1px 0;
	}
	.l-result-header > * {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0.5rem;
	}
	.l-result-header > * + * {
		border-left: 1px solid;
	}
	.g-ttl--result {
		font-size: 1em;
		font-weight: normal;
	}
}

/* @ result > grid */
.l-result-grid {
	position: relative;
	z-index: 0;
}
.l-result-grid__head {
	background: #f8f8f8;
	position: sticky;
	z-index: 1;
	padding: 0.25em;
}
.l-result-grid__title {
	line-height: 1.25;
}
.l-result-grid__body {
}

@media (min-width: 1024px) {
	.l-result-grid__head {
		top: 5rem;
	}
}
@media (max-width: 1023px) {
	.l-result-grid__head {
		top: 4.28rem;
	}
}

/* @ result > grid : list */
.l-result-grid--list {
}
.l-result-grid--list .l-result,
.l-result-grid--list .l-result-grid__head {
	display: grid;
	align-items: center;
	grid-gap: 1rem;
}
.l-result-grid--list .l-result-grid__head > :first-child {
	grid-column-start: 2;
}
.l-result-grid--list .l-result__thumb {
	grid-area: thumbnail;
}
.l-result-grid--list .l-result-title {
	grid-area: name;
}
.l-result-grid--list .l-result-variation {
	grid-area: variation;
}
.l-result-grid--list .l-prd-function {
	grid-area: function;
}
@media (min-width: 641px) {
	.l-result-grid--list .l-result,
	.l-result-grid--list .l-result-grid__head {
		grid-template-columns: 10% 1fr 15% 35%;
	}
	.l-result-grid--list .l-result {
		grid-template-areas: "thumbnail name variation function";
	}
}
@media (max-width: 640px) {
	.l-result-grid--list .l-result,
	.l-result-grid--list .l-result-grid__head {
		grid-template-columns: auto 1fr;
	}
	.l-result-grid--list .l-result-grid__head {
		display: none;
	}
	.l-result-grid--list .l-result {
		grid-template-areas: "thumbnail name" "variation variation" "function function";
	}
}

/* adjust modal */
:where(body.is-modal-active) .l-result-grid--list {
	position: relative;
	z-index: -1;
}

/* @ result > grid : card */
.l-result-grid--card {
}
.l-result-grid--card .l-result-grid__head {
	display: none;
}
.l-result-grid--card .l-result-grid__body {
	display: grid;
	/* grid-template-columns: repeat(3, 1fr); */
	/* grid-template-columns: [gutter-start] repeat(auto-fit, minmax(16.25rem, 1fr)) [gutter-end]; */
	/*	grid-template-columns: [gutter-start] repeat(auto-fit, minmax(14rem, 1fr)) [gutter-end];*/
	grid-template-columns: [gutter-start] repeat(
			auto-fill,
			minmax(calc(33.33% - 20px), 1fr)
		) [gutter-end];
	/*20240315*/
	grid-gap: min(1.875rem, 4vw);
}
@media (max-width: 640px) {
	.l-result-grid--card .l-result-grid__body {
		grid-template-columns: [gutter-start] repeat(auto-fit, minmax(9rem, 1fr)) [gutter-end];
	}
}

/* @ result > item */
.l-result {
	text-decoration: none;
	color: inherit;
	border: 1px solid #ccc;
	padding: 1rem;
	animation: fadein 666ms cubic-bezier(0.16, 1, 0.3, 1);
}
.l-result:hover {
	background: #f8f8f8;
}
.l-result > * {
	margin-top: 0;
	margin-bottom: 0;
}
.l-result__thumb {
	position: relative;
	z-index: 0;
}
.l-result__thumb-data {
	width: 100%;
}
.l-result:hover .l-result__thumb {
	mix-blend-mode: multiply;
}

.g-icon-new {
	line-height: 1;
	font-size: 0.625em;
	color: #fff;
	background: #f00;
	display: block;
	position: absolute;
	/* inset: 0 auto auto 0; */
	inset: auto auto 100% 0;
	padding: 0.5em;
}
@media (max-width: 640px) {
	.g-icon-new {
		font-size: 0.5em;
	}
}

.l-result-color {
	display: flex;
	gap: 0.5rem 1rem;
}
.g-ttl--result-color {
	font-size: 0.75em;
	font-weight: normal;
	flex: 0 0 auto;
	margin: 0;
}
@media (max-width: 640px) {
	.l-result-color {
		grid-area: variation;
		flex-direction: column;
	}
}

/* .g-list-nav--result-variation{} */

/* .l-result-title{} */
.l-result-title {
	line-height: 1.33;
	font-size: 1.25em;
	font-weight: normal;
}
.l-result-title > * + * {
	margin-top: 0.25rem;
}
.l-result-title__role {
	font-size: 0.65em;
}
/* .l-result-title__name{}
.l-result__variation{} */
.l-result-variation__item {
	display: inline-flex;
}
.l-result-variation__chip {
	border-radius: 0.1875rem;
}
.l-prd-function__item {
	font-size: 0.682rem;
	/* font-size: 0.625em; */ /* 文字サイズの調整:2024-04-11 */
	/* word-break: break-all; */ /* 表示確認の為：230406 */
}

/* @ result > item : list */
.l-result-grid--list .l-result {
	margin-top: 0.625rem;
}
.l-result-grid--list .l-result__thumb-data {
	width: 4rem;
	height: 4rem;
	object-fit: contain;
}
/* .l-result-grid--list .l-result-title {
}
.l-result-grid--list .l-result__variation {
}
.l-result-grid--list .l-result__function {
} */
@media (min-width: 769px) {
	.l-result-grid--list .g-ttl--result-color {
		display: none;
	}
}

/* @ result > item : card */
/* .l-result-grid--card .l-result {
} */
.l-result-grid--card .l-result > * + * {
	margin-top: 1.25rem;
}
.l-result-grid--card .l-result__thumb-data {
	aspect-ratio: 1;
	object-fit: contain;
}

/* @ more button */
/* .g-btn--result-more{
	cursor: pointer;
	background: inherit;
	width: 100%;
	border: 1px solid #ccc;
} */
.l-result-grid--list .js-ajax {
	margin-top: 2rem;
}
.l-result-grid--card .js-ajax {
	grid-column: gutter-start / gutter-end;
}

/* --- repair parts --- */

/* @ repair grid */
.l-prd-grid__filter--repair {
	flex: 0 0 20.615%;
}
.l-prd-grid__result--repair {
	flex: 1 1 75.538%;
}

/* @ spec table */
.g-tbl-spec {
	font-size: 0.75em;
}
.g-tbl-spec__header {
	font-size: 1.166em;
}
.g-tbl-spec__cell {
	padding: 0.5em;
}
.g-tbl-spec__cell--cate,
.g-tbl-spec__cell--num,
.g-tbl-spec__cell--stock,
.g-tbl-spec__cell--more {
	text-align: center;
}
[class*="g-tbl-spec__cell--"] {
	min-width: 3.33em;
}
.g-tbl-spec__cell--more {
	min-width: 4.44em;
}
.g-tbl-spec__cell--thumb {
	text-align: center;
}
.g-tbl-spec__cell--name {
	min-width: 9em;
}
.g-tbl-spec__cell--model {
	white-space: nowrap;
}
.l-product-combo {
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 0;
}
.l-product-combo__thumb {
	flex: 0 0 auto;
	max-height: 2.285em;
}
.l-product-combo__name {
}

/* & download voice */
.g-tbl-spec__cell--void,
.g-tbl-spec__cell--vocat,
.g-tbl-spec__cell--vofile,
.g-tbl-spec__cell--vosize,
.g-tbl-spec__cell--voleng,
.g-tbl-spec__cell--vosample,
.g-tbl-spec__cell--vocheck {
	text-align: center;
}

/* @ shape list */
.l-shape-list {
	text-align: center;
	display: grid;
}
.l-shape-list > * {
}
.l-shape-list__fig {
	margin: 0;
}
.l-shape-list__fig > * + * {
	margin-top: 0.5rem;
}
.l-shape-list__figcaption {
	line-height: 1.333;
}
.l-modal--shape:not(.is-modal-active) .l-shape-list__figcaption {
	font-size: 0.875em;
}
@media (min-width: 641px) {
	.l-shape-list {
		/* grid-template-columns: repeat(3, 1fr); */
		grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
		gap: 3.75rem;
	}
	.l-shape-list__figcaption {
		font-size: 1.125em;
	}
}
@media (max-width: 768px) {
	.l-shape-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem;
	}
}

/* @ modal adjust */
.l-modal--shape:not(.is-modal-active) {
	opacity: inherit;
	visibility: inherit;
	background: inherit;
	backdrop-filter: inherit;
	position: static;
	display: inherit;
}
.l-modal--shape:not(.is-modal-active) .g-modal__bg,
.l-modal--shape:not(.is-modal-active) .g-modal__head {
	display: none;
}
.l-modal--shape:not(.is-modal-active) .g-modal__body {
	background: inherit;
	border: 0;
	overflow: inherit;
	width: inherit;
	max-width: inherit;
	max-height: inherit;
	padding: 0;
}
.l-modal--shape:not(.is-modal-active) .l-shape-list {
	grid-template-columns: auto;
	grid-gap: 0;
}

.l-modal--shape:not(.is-modal-active) .js-shape:not(.js-shape--active) {
	display: none;
}

.l-modal--shape.is-modal-active
	.l-shape-list__checkbox:checked
	+ .l-shape-list__fig {
	background: #f8f8f8;
	margin: 1px;
	padding: 1em;
}

/* @ button */
.l-btn-filter {
	font-weight: bold;
	color: #fff;
	background: #f00;
}
.l-btn-filter__icon {
	width: 1.25em;
}

/* @ shape category */
.l-category-shape.is-active {
	background: #fff;
	border: 1px solid #ccc;
}
.l-category-shape.is-active .l-btn-filter__label--first,
.l-category-shape:not(.is-active) .l-btn-filter__label--second {
	display: none;
}
.l-category-shape.is-active
	.l-modal--shape:not(.is-modal-active)
	.g-modal__body {
	padding: 1em;
}

/* --- end --- */
.l-filter-form {
	display: flex;
	justify-content: center;
	gap: min(2.5em, 4vw);
}
.l-filter-form > * {
	flex: 1 1 1em;
}
@media (min-width: 641px) {
	.l-filter-form > * {
		max-width: 25.5rem;
	}
}
@media (max-width: 640px) {
	.l-filter-form {
		flex-direction: column;
	}
}

.l-btn-shape {
	line-height: 1.5;
	text-align: left;
	background: url(../_img2/base/icon-search-bl.svg) no-repeat left 1em center /
		1.25em;
	border: 0.125rem solid #ccc;

	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 1em;
	align-items: center;

	padding: 0.5em;
	padding-left: 2.75em;
}
.l-btn-shape::after {
	content: "";
	width: min(1.75em, 32px);
	height: min(1.75em, 32px);
	background: url(../_img2/base/icon-modal.svg) no-repeat center / contain;
}

.l-shape-list__option.is-active {
	background: #f8f8f8;
	padding: 1em;
}

.l-shape-list__option.is-active {
	background: #f8f8f8;
	padding: 1em;
}

.l-tbl-end .g-tbl__header {
	position: sticky;
	top: var(--g-header-height);
}

/* @ document sources */
.l-doc-source {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
	gap: 0.5em;
}
.l-doc-source__item {
	text-align: center;
	display: block;
	border: 1px solid;
	padding: 0.333em;
}
.l-doc-source__item:is(:link, :visited) {
	color: inherit;
}
.l-doc-source__item:link:not(:hover) {
	text-decoration: none;
}

/* @ modal */
.l-replace:where(ul, ol) {
	list-style: none;
	margin: 0;
	padding: 0;
}
.l-replace {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: min(4vw, 3.75em);
}
.l-replace__item {
	border: 0.1875em solid #ccc;
	display: grid;
	grid-template-columns: 1fr auto;
	justify-content: space-between;
	gap: 0.333em;
	padding: min(4vw, 1.875em);
}
.l-replace__item > * {
	margin: 0;
}
.l-replace__name {
}
.l-replace__label {
	border: 1px solid;
	padding: 0.333em;
}
.l-replace__note {
	grid-column: span 2;
}

/* 非表示：発光色 @ 2024.03.06 */
/* .l-result-grid__title,
.l-result-color{
	overflow: hidden;
}
.l-result-grid--list .l-result,
.l-result-grid--list .l-result-grid__head{
	grid-template-columns: 10% 1fr 0 35%;
}
@media (max-width: 640px){
	.l-result-color{
		display: none;
	}
} */
/* 非表示：発光色 @ 2024.03.06 */

/* カラーチップ in keyword @ 2024.03.06 */
.l-prd-function__item--color-red {
	color: white;
	background: #e60012;
}
.l-prd-function__item--color-yellow {
	color: black;
	background: #fff100;
}
.l-prd-function__item--color-green {
	color: white;
	background: #89c997;
}
.l-prd-function__item--color-blue {
	color: white;
	background: #0682d5;
}
.l-prd-function__item--color-purple {
	color: white;
	background: #9900ff;
}
.l-prd-function__item--color-white {
	color: black;
	background: #ffffff;
	outline: 1px solid;
}
.l-prd-function__item--color-lemon {
	color: black;
	background: #eaf88e;
}
.l-prd-function__item--color-cyan {
	color: white;
	background: #00a0e9;
}
.l-prd-function__item--color-pink {
	color: black;
	background: #f3b1bd;
}
.l-prd-function__item--color-multi {
	color: black;
	text-shadow: 0 1px white;
	background: conic-gradient(#fff100, #e60012, #0682d5, #89c997, #fff100)
		no-repeat center / 100% 100%;
}