/*
Theme Name: deafdevice v2025
Theme URI: --
Description: --
Author: --
Author URI: --
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500&family=Noto+Sans+JP:wght@100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root{
	--color-main:#d5133e;
	--color-main-rgb:213, 19, 62;
	--color-navy:#273b67;
	--color-navy-rgb:39, 59, 103;
	--color-dark:#212529;
	--color-border:#dee2e6;
	--bg-gray:#f6f7f8;
	
	--container-px:20px;
	--contents-py:90px;

	--box-shadow:1px 1px 2px rgba(0,0,0,.1);
	--btn-shadow:1px 1px 4px rgba(0,0,0,.4);
 
	--h-header:70px;
}

.accordion-faq .btn-accordion::before,
.accordion-faq .inner::before,
.title-en span,
.content-header h1 span,
.en{
	font-family:"Barlow Semi Condensed", sans-serif;
	font-weight:500;
	font-style:normal;
}
/* WP
----------------------------------------------- */
/* #wpadminbar{display:none;} */
/* body.open #wpadminbar{z-index:0;} */

/* Bootstrap
----------------------------------------------- */
/*
.form-control-plaintext{background-color:transparent !important;}
select{display:inline-block !important; width:auto !important;}
*/

/* Main Layout
----------------------------------------------- */
html{font-size:16px;}
body{
	font-family:'Noto Sans JP', sans-serif;
	font-weight:400;
	color:var(--color-dark);
	line-height:1.6;
}
#container{line-height:1.8;}

.contents{padding-top:var(--contents-py); padding-bottom:var(--contents-py);}
.contents-sm{padding-top:calc(var(--contents-py) / 2); padding-bottom:calc(var(--contents-py) / 2);}
[class*="thin"]{max-width:760px; margin-left:auto; margin-right:auto;}
.thin-lg{max-width:900px;}
.container.thin{max-width:calc(760px + var(--container-px) * 2);}
.container.thin-lg{max-width:calc(900px + var(--container-px) * 2);}

.container-fluid,
.container{padding-left:var(--container-px); padding-right:var(--container-px);}
.row:not([class*="g-"]){margin-left:calc(var(--container-px) * -1); margin-right:calc(var(--container-px) * -1);}
.row:not([class*="g-"])>[class*="col"]{padding-left:var(--container-px); padding-right:var(--container-px);}

.child-flex>*{display:flex;}
.child-flex>*>*{width:100%;}

.d-flex.g-1,
.nav.g-1{gap:.5rem 1rem;}

@media (max-width:991px){
	:root{
		--contents-py:60px;
	}
	html.fixed,
	body.open{overflow:hidden;}
	.container{max-width:100%;}
}
@media (max-width:767px){
	:root{
		--contents-py:40px;
	}
}

/* header & footer
-------------------------------------------------------------- */
@media (min-width:1400px){
	#header>*,
	#footer>*{padding-left:80px; padding-right:80px;}
}

/* header
-------------------------------------------------------------- */
#header{display:flex; width:100%; align-items:center; background-color:white; box-shadow:var(--box-shadow); position:relative;}
#header .nav-bar{display:flex; height:var(--h-header); align-items:center; justify-content:space-between;}

a.brand{max-width:120px;}

#gnavi{line-height:1.4;}

#gnavi>li>a{display:flex; flex-direction:column; height:var(--h-header); align-items:center; justify-content:center; padding:.5rem 1.5rem;}
#gnavi li a{font-weight:500; color:var(--color-dark);}
#gnavi li a>span{display:block; font-size:13px;}

#gnavi li.menu-btn a,
#gnavi li.menu-btn a:hover{color:white;}
#gnavi li.menu-btn a:hover{opacity:.7;}

#gnavi li.menu-btn-contact a{background-color:var(--color-main);}
#gnavi li.menu-btn-shop a{background-color:var(--color-navy);}
#gnavi li.menu-btn a>span{display:flex; align-items:center; gap:.4em;}
#gnavi li.menu-btn a>span::before{
	font-family:bootstrap-icons;
	font-size:1rem;
	line-height:1;
}
#gnavi li.menu-btn-contact a>span::before{content:'\F32F';}
#gnavi li.menu-btn-shop a>span::before{content:'\F179';}

#gnavi li:not(.menu-btn) a{position:relative; overflow:hidden;/*  margin:0 .5rem; */}
#gnavi li:not(.menu-btn) a::before{
	content:'';
	width:100%;
	height:2px;
	background-color:var(--color-main);
	position:absolute;
	bottom:0;
	left:-100%;
	transition:all .3s ease;
}
#gnavi li:not(.menu-btn) a:hover::before{left:0;}

#navi-sns-header{margin:0; padding-top:2rem;}

@media (min-width:992px){
	#header>.container-fluid{padding-right:0;}
	#navi-sns-header,
	#btn-menu{display:none;}
}
@media (max-width:991px){
	:root {
		--h-header:60px;
	}
	#container{padding-top:var(--h-header);}
	#header{position:fixed; top:0; left:0; z-index:1000;}

	#gnavi{flex-direction:column;}
	#gnavi>li{padding:.5em 0; border-top:1px solid rgba(0,0,0,.1);}
	#gnavi li.menu-btn{text-align:center;}
	#gnavi li.menu-btn a{padding:1rem;}

	[class*="drawer-pannel"]{
		width:90%;
		height:100vh;
		height:100dvh;
		padding:60px 15px;
		position:fixed;
		top:0;
		right:0;
		background:white;
		overflow-y: auto;
		z-index:999;
		-webkit-transform:translateX(100%);
		transform:translateX(100%);
	}
	body.open [class*="drawer-pannel"]{
		-webkit-transform:translateX(0);
		transform:translateX(0);
		-webkit-transition:ease .3s;
		transition:ease .3s;
	}
}

/* footer
--------------------------------------------------------------*/
#footer{padding:3rem 0;}

#fnavi,
.nav-sns{gap:.5rem 2rem; justify-content:center; margin-bottom:1.5rem;}

#fnavi{margin-bottom:2.5rem;}
#fnavi a{color:var(--color-dark);}

.nav-sns li[class*="ic-"] a{
	padding:0;
	white-space:nowrap;
	text-indent:100%;
	width:34px;
	aspect-ratio:1/1;
	background:no-repeat center center/contain;
	overflow:hidden;
}
.nav-sns li.ic-facebook a{background-image:url(assets/images/ic-facebook.svg);}
.nav-sns li.ic-instagram a{background-image:url(assets/images/ic-instagram.svg);}
.nav-sns li.ic-youtube a{background-image:url(assets/images/ic-youtube.svg);}

#footer_widget{display:flex; justify-content:center;}
#footer_widget h2{border:1px solid var(--color-border); border-width:1px 0; padding:1em; text-align:center;}
#footer_widget .row{justify-content:center;}
#footer_widget .nav{gap:.5rem 2rem;}

.btn-tel,
.btn-fax{
	display:inline-flex;
	align-items:center;
	column-gap:.25em;
	padding:0 !important;
	font-size:2rem;
	font-weight:700 !important;
	line-height:1;
}
.btn-tel::before,
.btn-fax::before{
	display:flex;
	justify-content:center;
	align-items:center;
	width:2.5rem;
	height:2.5rem;
	font-family:bootstrap-icons;
	font-size:.6em;
	line-height:1;
	color:white;
	background-color:var(--color-main);
	border-radius:10em;	
}
.btn-tel::before{content:'\F5C1';}
.btn-fax::before{content:'\F501';}
a.btn-tel:hover{color:var(--color-main);}

@media (max-width:767px){
	#footer_widget h2{padding:1em .5em;}
	#footer_widget .nav{justify-content:center;}
}
@media (max-width:575px){
	#fnavi{margin-bottom:1.5rem;}
	#copyright{font-size:12px;}
}

/* Cover
----------------------------------------------- */
#cover{
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:10vh 0;
	height:calc(80vh - var(--h-header));
	background:url(assets/images/cover.webp) no-repeat center center/cover;
}
#cover>*{padding-bottom:10vh;}
#cover h1{font-size:46px; margin-bottom:1em;}
#cover p{display:inline-block; font-size:1.25rem; font-weight:500; color:white; padding:.25em .75em; background-color:var(--color-dark); margin:0;}

@media (max-width:575px){
	#cover h1{font-size:30px;}
	#cover p{font-size:1rem;}
}

/* h
--------------------------------------------------------------*/
.c-main{color:var(--color-main);}
.c-navy{color:var(--color-navy);}
.c-white{color:white;}
.c-black{color:var(--color-dark);}

.bg-gray{background-color:var(--bg-gray);}

[class*="bg-center"],
[class*="bg-center"]>*{position:relative;}
[class*="bg-center"]::before{
	content:'';
	display:block;
	width:86vw;
	height:100%;
	background-color:var(--bg-gray);
	border-radius:8px;
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
}

p{margin-bottom:1.6rem;}
h1,.h1,h2,.h2,h3,.h3,h4,.h4{line-height:1.6; font-weight:500; margin-bottom:0;}
h1,.h1{font-size:30px; margin:0;}
h2,.h2{font-size:32px; margin-bottom:3rem;}
h3,.h3{font-size:24px; margin-bottom:1.5rem;}
h4,.h4{font-size:20px; margin-bottom:1.2rem;}
.fs-0{font-size:1rem !important;}
.bold{font-weight:700;}
.bold-500{font-weight:500;}
.lead{font-weight:400;}

.content-header .h1,
.content-header h1,
[class*="title-en"]{font-size:1rem;}
.content-header .h1 span,
.content-header h1 span,
[class*="title-en"] span{font-size:3rem; display:block; line-height:1.4;}
.title-en-sm span{font-size:2rem;}

.border-btm::after{
	content:'';
	display:block;
	width:40px;
	height:2px;
	background-color:var(--color-dark);
	margin:1rem auto;
}
.border-btm.c-main::after{background-color:var(--color-main);}

.btn-both,
[class*="icb-"],
[class*="ica-"]{
	display:inline-flex;
	column-gap:.5em;
	justify-content:space-between;
	align-items:center;
	min-width:220px;
}
.btn-both::before,
.btn-both::after,
[class*="icb-"]::before,
[class*="ica-"]::after{
	content:'';
	display:flex;
	width:1em;
	height:1em;
	font-family:bootstrap-icons;
	font-size:1em;
	line-height:1;
	transform:translateY(5%) scale(1.2);
}

.ica-next::after{content:'\F138';}
.icb-mail::before{content:'\F32F';}
.ica-dl::after{content:'\F30A';}
.ica-shop::after{content:'\F179';}

@media (max-width:991px){
	h2,.h2{font-size:26px;}
	h3,.h3{font-size:20px;}
}
@media (max-width:575px){
	.content-header .h1 span,
	.content-header h1 span,
	[class*="title-en"] span{font-size:2.25rem;}
	.title-en-sm span{font-size:1.75rem;}

	h2,.h2{font-size:21px; margin-bottom:1em;}
	h3,.h3{font-size:19px; margin-bottom:1rem;}
	h4,.h4{font-size:17px; margin-bottom:.5rem;}
}

/*
.row-gap-sm{row-gap:1.5rem;}
.row-gap-md{row-gap:3rem;}
*/

/*
a,a:hover{color:#2e99ca;}
a:hover{opacity:.7;}
.marker-y{background:linear-gradient(transparent 70%, yellow 30%); font-size:1.2em; font-weight:600;}
*/

/* buttons
----------------------------------------------- */
.btn{border-radius:4px; position:relative; padding:.5em 1em; font-weight:500;}
.btn-lg{min-width:300px; padding:.75em 1em;}

.btn.btn-main,
.btn.btn-main:hover{color:white; background-color:var(--color-main); border-color:var(--color-main); transition:.3s;}
.btn.btn-main:hover{transform:scale(1.05); box-shadow:var(--btn-shadow);}

.btn.btn-ol-main,
.btn.btn-ol-main:hover{color:var(--color-main); background-color:white; border-color:var(--color-main);}
.btn.btn-ol-main:hover{color:white; background-color:var(--color-main);}

.btn.btn-navy,
.btn.btn-navy:hover{color:white; background-color:var(--color-navy); border-color:var(--color-navy); transition:.3s;}
.btn.btn-navy:hover{transform:scale(1.05); box-shadow:var(--btn-shadow);}

.btn.btn-ol-navy,
.btn.btn-ol-navy:hover{color:var(--color-navy); background-color:white; border-color:var(--color-navy); transition:.3s;}
.btn.btn-ol-navy:hover{transform:scale(1.05); box-shadow:var(--btn-shadow);}

.btn.btn-arrow,
.btn.btn-arrow:hover{border-radius:0;}
.btn.btn-arrow:hover{opacity:.7;}
.btn.btn-arrow::after{
	content:'';
	width:100%;
	height:12px;
	border:1px solid black;
	border-width:0 1px 1px 0;
	transform-origin:right bottom;
	transform:skewX(45deg);
	position:absolute;
	bottom:0;
	left:0;
}

/*
@media (max-width:767px){
	.btn-lg{font-size:1rem;}
}
*/

/* content-header
----------------------------------------------- */
.content-header{display:flex; align-items:center; justify-content:center; text-align:center; height:180px; padding:0 20px;}
.content-header .h1 span::first-letter,
.content-header h1 span::first-letter{color:var(--color-main);}

@media (max-width:767px){
	.content-header{height:120px; margin-bottom:30px;}
}

/* widget
----------------------------------------------- */


/* archive & single
----------------------------------------------- */
/*
.single-header,
.archive-header{
}
*/

.archive-list .post{border-bottom:1px solid rgba(0,0,0,.1);}
.archive-list .post a{display:flex; column-gap:1em; color:var(--color-dark); padding:.75em .5em;}
.archive-list .post a:hover{background-color:rgba(0,0,0,.02);}
.archive-list .post a h2{color:var(--color-dark); font-size:1rem; margin:0;}
.archive-list .post a time{min-width:8em;}

.archive-grid .post-tmb{margin-bottom:.5rem;}

/* the_posts_pagination */
nav.navigation{justify-content:center;}
nav.navigation ul{display:flex; column-gap:20px; margin:0; padding:0; list-style:none;}
nav.navigation ul *{display:flex;}
nav.navigation ul li>*{width:40px; aspect-ratio:1/1; color:var(--color-navy); border:1px solid var(--color-navy); justify-content:center; align-items:center; border-radius:20px;}
nav.navigation ul li a{text-decoration:none;}
nav.navigation ul li a:hover,
nav.navigation ul li>*.current{color:white; background-color:var(--color-navy); border-color:var(--color-navy);}

@media (max-width:575px){
	.archive-block.archive-list{padding:20px 0;}
	.archive-list .post a{flex-direction:column;}
	.archive-list .post a time{font-size:.85em;}
}

/* single
----------------------------------------------- */


/* pages
--------------------------------------------------------------*/

/* home
--------------------------------------------------------------*/
#pos-about,
.service{--column-w:calc(380px + 8rem);}
#service,
#pos-service{counter-reset:i; overflow-x:hidden;}
.service{
	counter-increment:i;
	margin-bottom:var(--contents-py);
	position:relative;
}
.service::before,
.service::after{
	content:'';
	display:inline-block;
	font-family:"Barlow Semi Condensed", sans-serif;
	font-weight:500;
	font-style:normal;
	line-height:1.4;
	position:absolute;
	z-index:2;
}
.service::before{
	content:'Service';
	font-size:20px;
	width:160px;
	text-align:right;
	border-bottom:1px solid var(--color-dark);
	top:calc(var(--contents-py) / 3);
	right:0;
	transform:rotate(90deg);
	-webkit-text-stroke:2px white;
	text-stroke:2px white;
	paint-order:stroke;
}
.service::after{
	content:"0" counter(i);
	font-size:40px;
	top:calc(var(--contents-py) / 3 + 100px);
	right:80px;
	transform:translateX(50%);
	-webkit-text-stroke:2px white;
	text-stroke:2px white;
	paint-order:stroke;
}
#pos-about .inner,
.service .inner{
	width:var(--column-w);
	padding-left:4rem;
	padding-right:4rem;
	position:relative;
}
.service .inner::before,
.service .inner::after{
	content:'';
	display:block;
	width:calc(100vw - 500px);
	height:100%;
	background:rgba(0,0,0,.1);
	border-radius:8px;
	position:absolute;
	top:0;
}
.service .inner::before{left:100%;}
.service .inner::after{left:0; transform:translateX(-100%);}

#pos-service .service:nth-child(odd)::before{right:auto; left:0;}
#pos-service .service:nth-child(odd)::after{right:auto; left:80px; transform:translateX(-50%);}

.service-01 .inner::before,
.service-01 .inner::after{background:url(assets/images/bg-01.webp) no-repeat center center/cover;}
.service-02 .inner::before,
.service-02 .inner::after{background:url(assets/images/bg-service-02.webp) no-repeat center center/cover;}
.service-03 .inner::before,
.service-03 .inner::after{background:url(assets/images/bg-service-03.webp) no-repeat center center/cover;}

.service-01 img{width:70vw; max-width:1100px; position:absolute; left:35%; bottom:-40px; z-index:1;}
#service .service-01 img{width:60vw; max-width:900px; left:40%;}
.service-02 img{width:25vw; max-width:none; position:absolute; left:10%; top:50%; transform:translateY(-50%); z-index:1;}

#service .service-02 .inner::before,
#service .service-02 .inner::after{background-image:url(assets/images/bg-service-02.webp)}

#pos-products .row-products>*,
#pos-products .row-products>*>*{display:flex;}
#pos-products .card-body{display:flex; flex-direction:column;}
#pos-products .card{border:none; box-shadow:1px 1px 5px rgba(0,0,0,.05);}
#pos-products .card-body::after{
	font-family:bootstrap-icons;
	content:'\F135';
	display:flex;
	justify-content:center;
	align-items:center;
	width:2rem;
	height:2rem;
	font-size:1.5rem;
	color:white;
	background-color:var(--color-main);
	border-radius:10em;
	margin-top:auto;
	margin-left:auto;
}

#pos-faq ul.nav{justify-content:center; gap:1rem;}
#pos-faq .nav .btn{text-align:left; padding:1rem; border-width:2px;}
#pos-faq .nav .btn:not(:hover){background-color:white;}

ul.nav.post-list{flex-direction:column;}
ul.nav.post-list li{border-top:1px solid rgba(0,0,0,.1);}
ul.nav.post-list a{display:flex; column-gap:1em; text-decoration:none; color:var(--color-dark); padding:.75em .5em;}
ul.nav.post-list a:hover{background-color:rgba(0,0,0,.02);}
ul.nav.post-list a time{min-width:8em;}

#pos-about{margin-bottom:var(--contents-py); position:relative;}
#pos-about *{position:relative;}
#pos-about h2{margin-bottom:3rem !important;}
#pos-about::before{
	content:'';
	display:block;
	width:75%;
	height:100%;
	border-top-left-radius:8px;
	border-bottom-left-radius:8px;
	position:absolute;
	top:0;
	right:0;
	background:url(assets/images/bg-about.webp) no-repeat right center/cover;
}
#pos-about .inner{
	display:inline-block;
	width:auto;
	padding-top:2rem;
	padding-bottom:2rem;
	background-color:rgba(255,255,255,.9);
	border-radius:8px;
}

@media (min-width:768px){
	#pos-service .service:nth-child(odd) .inner{margin-left:auto;}
}
@media (max-width:991px){
	#pos-about,
	.service{--column-w:calc(50% + 4rem);}
	#service .service{--column-w:50%;}
	#pos-about .inner,
	.service .inner{
		padding-left:2rem;
		padding-right:2rem;
	}
	.service .inner::before,
	.service .inner::after{width:50vw;}

	.service::before{right:-30px;}
	.service::after{right:50px;}
	#pos-service .service:nth-child(odd)::after{left:50px;}

	.service-01 img{left:45%;}

	#pos-products .card-img-top{
		aspect-ratio:16/9;
		object-fit:cover;
	}
}
@media (max-width:767px){
	#service .service,
	.service{margin-bottom:0;}
	#pos-about,
	.service,
	#service .service{--column-w:100%;}
	#pos-about .inner,
	.service .inner{
		padding-left:0;
		padding-right:0;
	}
	.service .inner::before{
		width:100vw;
		height:180px;
		position:relative;
		top:auto;
		left:auto;
		transform:none;
		margin-bottom:2rem;
	}
	#pos-service .service:nth-child(odd) .inner::before{left:calc(var(--container-px) * -2);}
	.service .inner::after{content:none;}

	#pos-service .service:nth-child(odd)::before{right:auto;left:0;}
	.service::before{width:100px; top:calc(var(--contents-py)); right:0;}
	.service::after{top:calc(var(--contents-py) + 60px);}
	.service-01 img{width:460px !important; bottom:auto; top:80px; left:auto !important; right:0;}
	#service .service-01 img{top:60px;}
	.service-02 img{width:200px; left:100px; top:110px; transform:none;}

	#pos-about::before{
		width:80%;
		height:150px;
		background:url(assets/images/bg-about.webp) no-repeat right center/cover;
	}
	#pos-about .inner{
		padding-top:0;
		padding-bottom:0;
		background-color:transparent;
	}
	#pos-about h2{
		-webkit-text-stroke:2px white;
		text-stroke:2px white;
		paint-order:stroke;
	}
}
@media (max-width:575px){
	.service-01 img,
	#service .service-01 img{right:auto !important; left:10% !important;}

	#pos-faq .nav{flex-direction:column;}
	#pos-faq .nav .btn{width:100%;}
	
	#pos-news .col-sm-auto{display:flex; justify-content:space-between; align-items:center;}
	
	ul.nav.post-list a{flex-direction:column;}
}

/* service
--------------------------------------------------------------*/
#service .inner{min-height:240px;}
#service .service h2::before{
	content:"0" counter(i);
	font-family:"Barlow Semi Condensed", sans-serif;
	font-weight:500;
	font-style:normal;
	line-height:1;
	font-size:300px;
	color:rgba(var(--color-navy-rgb),.08);
	position:absolute;
	top:0;
	left:0;
	transform:translate(40%, 50%);
}
@media (max-width:767px){
	#service .service h2::before{transform:translate(0%, 30%);}
}

/* products
--------------------------------------------------------------*/
ul.products_nav{justify-content:center; gap:.5rem 2rem; margin-bottom:4rem;}
ul.products_nav a{
	display:flex;
	align-items:center;
	gap:1rem;
	border-bottom:1px solid rgba(0,0,0,.3);
	color:var(--color-dark);
	font-weight:500;
	padding-left:0;
	padding-right:0;
	position:relative;
}
ul.products_nav a:hover,
ul.products_nav a:hover::after{color:var(--color-main);}
ul.products_nav a:hover{border-color:var(--color-main);}
ul.products_nav a span.im img{height:80px; width:auto; aspect-ratio:1/1;}
ul.products_nav a::after{
	font-family:bootstrap-icons;
	content:'\F282';
	color:rgba(0,0,0,.3);
	line-height:1.6;
	position:absolute;
	left:50%;
	bottom:0;
	transform:translate(-50%,100%);
}

.products .row>.col{display:flex;}
.products .item{border:none;}
.products .item .card-body{display:flex; flex-direction:column;}
.products .btn{min-width:inherit; width:100%;}


.item h3{position:relative;}
.item [class*="group-"]{position:absolute; top:0; left:0; transform:translateY(-100%);}
.group-visit{background-color:var(--color-main);}

.product-header,
.product-header>*{position:relative;}
.product-header::before{
	content:'';
	display:block;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,.6);
	position:absolute;
	top:0;
	left:0;
}

.product-header h2{margin:0;}
.product-header p{display:inline-block; text-align:left; margin:0; text-shadow:0 0 3px white;}

#product-visit .product-header{background:url(assets/images/products/bg-visit.webp) no-repeat center center/cover;}
#product-comm .product-header{background:url(assets/images/products/bg-comm.webp) no-repeat center center/cover;}
#product-clock .product-header{background:url(assets/images/products/bg-clock.webp) no-repeat center center/cover;}
#product-fire .product-header{background:url(assets/images/bg-01.webp) no-repeat center center/cover; position:relative; z-index:1;}
#product-fire .product-header::before,
#product-fire .product-header::after{
	content:'';
	display:block;
	width:auto;
	height:100%;
	aspect-ratio:1/1;
	background:no-repeat center center/contain;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:-1;
}
#product-fire .product-header::before{left:5%; background-image:url(assets/images/products/nav-fire.webp);}
#product-fire .product-header::after{height:80%; right:5%; background-image:url(assets/images/products/fire-set.webp);}

#product-accessory .product-header{background:url(assets/images/products/bg-accessory.webp) no-repeat center center/cover; overflow:hidden; z-index:1;}
#product-accessory .product-header::after{
	content:'';
	display:block;
	width:auto;
	height:180%;
	aspect-ratio:1/1;
	background:url(assets/images/products/nav-accessory.webp) no-repeat right bottom/contain;
	position:absolute;
	right:0;
	bottom:0;
	z-index:-1;
	transform:translate(15%, 10%);
}

@media (max-width:991px){
	ul.products_nav a{gap:.5rem;}
	ul.products_nav a span.im img{height:60px;}
}
@media (max-width:767px){
	ul.products_nav{gap:.5rem 1.5rem; margin-bottom:3rem;}
	ul.products_nav li{width:calc((100% - 1.5rem * 1) / 2);}
	ul.products_nav a span.im img{height:50px;}

	#product-fire .product-header::before,
	#product-fire .product-header::after{content:none;}
}

/* accordion
--------------------------------------------------------------*/
.accordion-container{display:flex; flex-direction:column; gap:1rem;}
.accordion-block{margin-bottom:1rem;}
.accordion-block .btn-accordion,
.accordion-block .inner{padding:1rem;}
.accordion-block .btn-accordion,
.accordion-block .btn-accordion:active{
	display:flex;
	width:100%;
	border-radius:0;
	text-align:left;
	background-color:var(--bg-gray);
	font-size:20px;
	font-weight:700;
}
.accordion-block .inner{
	background-color:white;
}
.accordion-block .inner p:last-child{margin-bottom:0;}

.accordion-block .btn-accordion::after{
	font-family:bootstrap-icons;
	content:'\F64D';
	display:flex;
	aspect-ratio:1/1;
	margin-left:auto;
	padding-left:.5rem;
}
.accordion-block .btn-accordion[aria-expanded="true"]::after{
	content:'\F63B';
}

.accordion-faq .inner{display:flex;}
.accordion-faq .btn-accordion::before,
.accordion-faq .inner::before{
	font-size:30px;
	min-width:30px;
	line-height:1;
}
.accordion-faq .btn-accordion::before{content:'Q'; color:var(--color-main);}
.accordion-faq .inner::before{content:'A'; color:var(--color-navy);}

@media (max-width:767px){
	.accordion-block .btn-accordion,
	.accordion-block .btn-accordion:active{
		font-size:1rem;
	}
	.accordion-faq .btn-accordion::before,
	.accordion-faq .inner::before{
		font-size:25px;
		min-width:25px;
	}
}
@media (max-width:575px){
	.accordion-faq .btn-accordion::before,
	.accordion-faq .inner::before{font-size:26px;}
}


/* contact
--------------------------------------------------------------*/

/* plug-in contact form 7
----------------------------------------------- */
/*
form.wpcf7-form label{display:block;}
form .form-group>label{margin:2rem 0 .5rem;}
form .form-group>label::before{
	font-size:12px;
	padding:.25em .5em;
	margin-right:.5rem;
	border:1px solid black;
}
form .form-group>label.req::before{
	color:white;
	background-color:#E10000;
	border-color:#E10000;
}

.form-control{
	height:auto;
	padding:1rem 2rem;
	border-radius:0;
	margin-bottom:1rem;
}

.wpcf7-list-item{margin:0 2rem 0 0;}

.submit-bar{margin:3rem 0;}
*/

/* recaptcha
--------------------------------------------------------------*/
.grecaptcha-badge{visibility:hidden;}