@charset "utf-8";



/* @ base customize */
.g-contents > .l-prd-notice + *{
	margin-top: 1.875rem;
}



/* @ shared */
.g-belt--product{
	font-size: 1.25em;
	font-weight: normal;
	background: #efefef;
	margin-bottom: 0;
}
.g-stack--product-detail > * + *{
	margin-top: 1.25rem !important;
}



/* @ wrap */
.l-product-detail{
	margin-top: 1.875rem;
}



/* @ notice area */
.l-prd-notice{
	text-align: center;
	color: #ff0;
	background: #000;
	box-sizing: border-box;
	padding: 1em;
}
.l-prd-notice:blank{
	display: none;
}
.l-prd-notice :where(img[width][height]){
	height: auto;
}



/* @ information */
.l-prd-info-grid{
	display: flex;
	gap: 2.5rem;
}
.l-prd-info-grid__body{
	order: 1;
}
.l-prd-info-grid__body > * + *{
	margin-top: 2.5rem !important;
}
.l-prd-info-grid__image{}
@media (min-width: 641px){
	.l-prd-info-grid > *{
		box-sizing: border-box;
		flex: 1 1 ;
	}
	.l-prd-info-grid__image{
		overflow: hidden;
	}
}
@media (max-width: 640px){
	.l-prd-info-grid{
		flex-direction: column;
	}
}



/* @ information > notes */
.l-prd-title{
	line-height: 1.33;
	font-size: 1em;
	font-weight: normal;
	border-left: .4375em solid #fd3a3a;
	padding-left: 1.25rem;
}
.l-prd-title__role{}
.l-prd-title__name{
	font-size: 2.5em;
	font-weight: bold;
}
.l-prd__desc{
	font-size: 1.125em;
}



/* @ information > function */
.l-prd-function{
	line-height: 1.33;
	font-size: .875em;
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.l-prd-function__item{
	background: #efefef;
	border-radius: .214em;
	padding: .5em 1.42em;
}



/* @ information > variation */
.l-prd-variation{}
.l-prd-variation__chip{
	border-radius: .1875rem;
}

.g-list-nav--prd-variation{
	gap: .3125rem;
}



/* @ information > slider */
.l-prd-slide{
	list-style: none;
	margin: 0;
	padding: 0;
}
.l-prd-slide__item{
	text-align: center;
}
.l-prd-slide__image{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	margin: auto;
}

/* test サムネ比率を16/9にする実験 @ 221014 */
.l-prd-slide__image{
	box-sizing: border-box;
	object-fit: contain;
	width: 100%;
}
@media (min-width: 641px){
	.l-prd-slide__image{
		height: min(353.25px, (((92vw * .5625) - 2.5rem / 2) / 2));
	}
}
@media (max-width: 640px){
	.l-prd-slide__image{
		height: calc(92vw * .5625);
	}
}
@supports (aspect-ratio:1){
	.l-prd-slide__image{
		aspect-ratio: 16 / 9;
		height: auto;
	}
}
/* test サムネ比率を16/9にする実験 @ 221014 */

/* @ slick custom */
.l-prd-slide:not(.slick-initialized){
	height: 100%;
	background: #f8f8f8;
}
.l-prd-slide:not(.slick-initialized) > *{
	display: none;
}
.l-prd-slide.slick-slider{
	list-style: none;
	margin: 0;
	padding: 0;
}
.l-prd-slide.slick-slider .slick-list{
	box-sizing: border-box;
	border: 1px solid #ccc;
}

/* @ test 221013 */
/* .l-prd-slide.slick-slider .slick-list,
.l-prd-slide.slick-slider .slick-track{
	box-sizing: border-box;
	display: flex;
}
.l-prd-slide.slick-slider .slick-slide{
	box-sizing: border-box;
	float: inherit;
}
.l-prd-slide.slick-slider .slick-slide > div{
	/* border: 3px solid magenta;
	box-sizing: border-box;
	height: 100%;
} */
.l-prd-slide.slick-slider .l-prd-slide__item{
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
} */
/* @ test 221013 */



.l-prd-slide.slick-slider .l-prd-slide__item{
	text-align: center;
	box-sizing: border-box;
	/* padding: 3.125rem; */
}
.l-prd-slide.slick-slider .slick-dots{
	display: flex;
	gap: .625em;
	list-style: none;
	margin: .625em 0 0;
	padding: 0;
}
.l-prd-slide.slick-slider .slick-dots > *{
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ccc;
	padding: .5rem;
}
.l-prd-slide.slick-slider .slick-dots > :hover{
	opacity: .6;
	cursor: pointer;
}



/* @ related content */
.g-ttl-related-content{
	font-size: 1.125em;
	font-weight: normal;
	border-bottom: 1px solid;
	display: flex;
	align-items: center;
	gap: .666rem;
	margin-bottom: 1.33em;
	padding-bottom: .555em;
}
.g-ttl-related-content::before{
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	background:
		repeating-linear-gradient(90deg, transparent, transparent .277em, white .277em, white .333em),
		repeating-linear-gradient(00deg, transparent, transparent .277em, white .277em, white .333em),
		#fd3a3a;
}
.g-list-nav--related-content{
	font-size: .875em;
}
.l-related-content__more{
	line-height: 1.33;
	text-decoration: none;
	color: inherit;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	border: 1px solid #bbb;
	border-radius: 99rem;
	padding: .7em 1.75em;
}
.l-related-content__more:hover{
	background: #ffd8d8;
}
.l-related-content__more::before{
	content: "▶︎";
	font-size: .5em;
}

/* 2023-12-12　追加 */
.l-related-content__more.button_online-shop {
	background-color: #f00;
	color: white;
	border-color: #f00;
	font-weight: 500;
}
.l-related-content__more.button_online-shop:hover {
	background-color: #ffd8d8;
	border-color: #bbb;
	color: #000;
}
.l-related-content__more.button_online-shop::before {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	background-image: url('../_img2/base/icon-store_w.svg');
	background-size: cover;
}
.l-related-content__more.button_online-shop:hover::before {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	background-image: url('../_img2/base/icon-store.svg');
	background-size: cover;
}

/* @ product detail */



/* @ product spec contents */
.l-prd-spec > * + :not(.l-product-tab){
	margin-top: 2.5rem;
}
body.is-modal-active :is(.l-prd-spec){
	position: relative;
	z-index: 1;
}




/* @ product tab */
.l-product-tab{
	display: flex;
}
.l-product-tab__item{
	line-height: 1.25;
	border-style: solid;
	padding: .75em 2em;
}
.l-product-tab__item:last-child{
	border-right-width: 1px;
}
@media (min-width: 641px){
	.l-product-tab{
		border-bottom: 1px solid;
	}
	.l-product-tab__item{
		border-style: solid;
		border-width: 1px 0 0 1px;
	}
}
@media (max-width: 640px){
	.l-product-tab{
		overflow: auto;
	}
	.l-product-tab.g-sitewidth{
		width: auto;
		padding-left: 4vw;
		padding-right: 4vw;
	}
	.l-product-tab__item{
		flex: 0 0 auto;
		border-width: 1px 0 1px 1px;
	}
}
.l-product-tab__item.is-tab-active{
	color: #fff;
	background: #000;
	border-width: 0;
}
.g-tab-content{
	animation: fadein 666ms cubic-bezier(0.16, 1, 0.3, 1);
}
.g-tab-content:not(.is-tab-active){
	display: none;
}



/* @ wysywyg & old site styles */
.g-wysiwyg :where(table){
	line-height: 1.5;
	min-width: 100%;
	border-collapse: collapse;
}
@media (max-width: 640px){
	.g-wysiwyg :where(table){
		width: 100%;
		display: block;
		overflow: auto;
		box-sizing: border-box;
	}
}
.g-wysiwyg :where(table tr > *){
	border: 1px solid #ccc;
	/* word-break: break-all; */ /* 表示確認の為：230406 */
	padding: .333em .5em;
}
.g-wysiwyg :where(font){
	font-size: 1em;
}
.g-wysiwyg :where(ul, ol){
	margin: 0 0 0 1.25em;
	padding: 0;
}
.g-wysiwyg :where(h3){
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	border-bottom: solid 1px #ddd;
	padding: .25em;
}
.g-wysiwyg :where(h4){
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	background: #f8f8f8;
	border-top: 1px solid #ccc;
	margin: 0;
	padding: 10px;
}
.g-wysiwyg :where(img[width][height]){
	height: auto;
}



/* @ document > grid */
.l-docview-grid{}
.l-docview-grid__side{
	background: #f8f8f8;
}
.l-docview-grid__main{
	background: #e5e5e5;
	/* padding: 2.5rem; */
	padding: 4%;
}

@media (min-width: 641px){
	.l-docview-grid{
		display: flex;
		gap: 1.25rem;
	}
	.l-docview-grid > *{
		box-sizing: border-box;
	}
	.l-docview-grid__side{
		flex: 0 0 24%;
	}
	.l-docview-grid__main{
		flex: 1 1 auto;
		height: calc(min(74.66vw, 1300px) * 1.415);
		max-height: calc(100vh - 120px);
	}
}
@media (max-width: 640px){
	.l-docview-grid > * + *{
		margin-top: 1rem;
	}
	.l-docview-grid__main{
		height: calc(100vw * 1.415);
		max-height: calc(100vh - 120px);
	}
}



/* & modal mode */
@media (max-width: 640px){
	.l-docview-grid__side{
		position: fixed;
		z-index: 1;
		inset: 0;
		overflow: auto;
		overscroll-behavior: contain;
		margin: 0;
		padding: min(3.75rem, 4vw);

		transition: 333ms ease;
	}
	.docview-menu:not(:checked) ~ .l-docview-grid__side{
		opacity: 0;
		visibility: hidden;
	}
}

.l-btn-docview{
	line-height: 1.5;
	text-align: left;
	border: .25rem solid #ccc;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 1em;
	align-items: center;
	padding: 1em;
	padding-left: 3em;
	background: url(../_img2/base/icon-pdf.svg) no-repeat left .5em center / auto 1.75em;
}
.l-btn-docview::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: .25rem .25rem 0;
	border-color: currentcolor transparent transparent;
}
.l-modal__close--docview{
	display: block;
	width: fit-content;
}
@media (min-width: 641px){
	.l-btn-docview,
	.l-modal__close--docview{
		display: none;
	}
}


/* @ document */
.l-docgroup,
.l-docmenu{
	list-style: none;
	margin: 0;
	padding: 0;
}



/* @ document > group */
.l-docgroup{}
.l-docgroup__name{
	line-height: 1.33;
	background: #dcdddd;
	/* margin-bottom: 1.875rem; */
	margin-bottom: 1.875rem;
	padding: 9.6%;
}
.l-docgroup__name:not(:first-child){
	margin-top: 2.5rem;
}



/* @ document > menu */
.l-docmenu{
	padding: 0 9.6%;
}
.l-docmenu > * + *{
	/* margin-top: 9.6%; */
}
.l-docmenu__item{}
.l-docmenu__more{
	line-height: 1.33;
	/* word-break: break-all; */ /* 表示確認の為：230406 */
	color: inherit;
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 0 -12.17%;
	padding: 1rem 9.6%;
}
.l-docmenu__more::after{
	display: block;
	width: 1em;
	position: absolute;
	top: 0;
	left: 100%;
	bottom: 0;
	background:
		linear-gradient(to left bottom, transparent 50%, #dcdddd 50%) no-repeat top / 100% 50%,
		linear-gradient(to left top, transparent 50%, #dcdddd 50%) no-repeat bottom / 100% 50%;
}
.l-docmenu__more.js-pdf-viewer--is-current{
	background-color: #dcdddd;
}
.l-docmenu__more.js-pdf-viewer--is-current::after{
	content: "";
}
.l-docmenu__more:not(:hover){
	text-decoration: none;
}



/* @ download */
.l-download-grid > *{
	margin-bottom: 1.5rem;
}
.l-download{}
.l-download-list{
	font-size: .875em;
	list-style: none;
	margin: 0;
	padding: 1rem;
}
.l-download-list > * + *{
	margin-top: .25rem;
}
.l-download-list__item{}
.l-download-list__more{
	color: inherit;
}
.l-download-list__more:not(:hover){
	text-decoration: none;
}
@media (min-width: 641px){
	.l-download-grid{
		columns: 2 auto;
		column-gap: 1.5rem;
	}
	.l-download-grid > *{
		page-break-inside: avoid;
		break-inside: avoid;
	}
}
@media (max-width: 640px){}


.l-download-list--grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(30%, 9rem), 1fr));
	gap: 1rem;
	padding: 0;
}
.l-download-list--grid > *{
	margin: 0;
}



/* flash pattern */
.l-flash{
	text-align: center;
}
.l-ttl-flash{}
.flash-table{
	min-width: 100%;
	white-space: nowrap;
	border-collapse: collapse;
	table-layout: fixed;
}
.trswitch {
	text-align: center;
	padding: 10px 5px 10px 5px;
	border: solid 1px #fff;
	background-color: #c0cfd9;
}
.trwiring {
	text-align: center;
	padding: 10px 5px 10px 5px;
	border: solid 1px #fff;
	background-color: #dddbc8;
}
.tr1 {
	text-align: center;
	padding: 10px 5px 10px 5px;
	border: solid 1px #ddd;
}
.l-icon-dimmed{
	height: 1.5em;
	vertical-align: bottom;
	margin-right: .333em;
}



/* @ side info */
/* .g-ttl-related-nav--product-detail{
	font-size: 1.5em;
	font-weight: bold;
	border-bottom: 1px solid;
	margin-bottom: 1.25em;
	padding-bottom: .333em;
} */



/* @ update product list */
.l-update-product{
	border: .3125rem solid #ddd;
	padding: 1rem;
}
* + .l-update-product{
	margin-top: 1rem;
}
.l-update-product__name{
	font-size: 1.125em;
	font-weight: bold;
}



/* @ update history */
.l-update-history{}
.l-update-history__title{
	line-height: 1.5;
	font-size: 1.25em;
	font-weight: bold;
}



/* @ repair table */
.l-product-combo{
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 0;
}
.l-product-combo__thumb{
	flex: 0 0 auto;
	max-height: 2.285em;
}
.g-tbl--slim :where(.g-tbl__cell .g-modal){
	font-size: 1rem;
}



/* @ repair description */
.l-repair-description{
	columns: auto calc(24.5rem);
	column-gap: min(4vw, 3.75rem);
}
.l-repair-description > *{
	break-inside: avoid;
	margin: 0 !important;
}
.l-repair-description > * + *{
	margin-top: min(4vw, 3.75rem) !important;
}



/* @ faq */
.l-faq-list{
	list-style: none;
	margin: 0;
	padding: 0;
}
.l-faq{
	border-bottom: 1px solid #b2b2b2;
}
.l-faq__title,
.l-faq__body{
	font-size: 1.125em;
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	gap: 1.5rem;
	padding: 2rem;
}
.l-faq__title::before,
.l-faq__body::before{
	flex: 0 0 auto;
	line-height: 1;
	font-size: 1.5rem;
	text-align: center;
	color: #fff;
	background: #ccc;
	width: 1.83em;
	height: 1.83em;
	border-radius: .1875rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.l-faq__title::before{
	content: "Q";
	background: #49aad2;
}
.l-faq__body::before{
	content: "A";
	background: #ff0000;
}
.l-faq__title{
	align-items: center;
}
.l-faq__body{
	background: #ffe5e6;
	border-top: 1px solid #b2b2b2;
}
.l-faq__body > * > :where(p):first-child{
	margin-top: 0;
}



/* @ sticky contact */
.g-sticky-bottom--contact{
	position: static;
}




/*------------------
 @ iframe
------------------*/

/* @ iframe > registry menu */
.fr-regmenu{
	display: flex;
	gap: 3.75rem min(4%, 3.75rem);
}
@media (max-width: 640px){
	.fr-regmenu{
		flex-direction: column;
	}
}
.fr-regmenu::after{
	content: "";
	flex: 0 0 1px;
	background: #ccc;
}
.fr-regmenu > *{
	flex: 1 1 0;
	align-self: center;
}
.fr-regmenu > :last-child{
	order: 1;
}
.fr-nav--regist{
	font-size: 1.125em;
}
.fr-ttl-regmenu{
	font-size: 1.25em;
	font-weight: normal;
}
.fr-ttl-notice{
	font-size: 1em;
	font-weight: normal;
}




/* 非表示：発光色 @ 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%;
}