/* cover
-------------------------------------------------------------- */
#cover h1{display:inline-block; color:white; font-size:90px; padding-bottom:2em;}
#cover h1 span{display:block; background-color:white; color:black; font-size:18px; padding:.5em; margin-top:1rem; letter-spacing:.25em; text-align:center;}

@media (max-width:767px){
	#cover h1{font-size:11vw; width:auto; max-width:none;}
	#cover h1 span{font-size:2vw;}
}
@media (max-width:575px){
	#cover{aspect-ratio:4/3; height:auto;}
	#cover h1{font-size:13vw; padding-bottom:1em;}
	#cover h1 span{font-size:11px;}
}

/* header
-------------------------------------------------------------- */
#gnavi a span{min-width:auto;}

/* nav
-------------------------------------------------------------- */
#fnavis{margin-bottom:1rem;}
#fnavis ul.nav{width:100%; flex-direction:row; justify-content:space-between;}

/* home
-------------------------------------------------------------- */
.page-en .content-header,
.breadcrumbs-wrap{display:none;}

.h-fk{position:relative; top:-1px;}

#en-strengths{position:relative;}
#en-strengths::before,
#en-strengths::after{
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
}
#en-strengths::before{
	width:50vw;
	height:calc(100% - 130px);
	background:url(assets/../../images/en/p01.jpg) no-repeat right center/cover;
	z-index:1;
}
#en-strengths::after{
	width:100%;
	height:130px;
	background-color:var(--color-main);
	top:-1px;
}

#en-flow .row .col-img{display:flex; align-items:center; position:relative;}
#en-flow .row .col-img::before{
	content:'';
	display:block;
	width:50vw;
	height:100%;
	background-color:var(--color-main);
	position:absolute;
	top:0;
	left:25%;
}

.flow-list h3{margin-bottom:1rem;}
.flow-list>*{counter-increment:i; padding-left:calc(50px + 2rem); padding-bottom:1em; min-height:calc(50px * 1.5); position:relative;}
.flow-list>*::after{
	content:counter(i);
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:50%;
	width:50px;
	aspect-ratio:1/1;
	color:var(--color-main);
	font-size:30px;
	background-color:black;
	position:absolute;
	left:0;
	top:0;

	font-family:"Roboto", sans-serif;
	font-weight:700;
	font-style:normal;
	line-height:1;
}

@media (max-width:991px){
	#en-strengths>.contents{padding-top:0;}
	#en-strengths::after{height:70px;}
	#en-strengths::before{width:35vw;}
}
@media (max-width:575px){
	#en-strengths::before{
		width:100%;
		height:240px;
		position:relative;
	}
	#en-strengths::after{content:none;}

	#en-flow .row>*:first-child{order:1;}
	#en-flow .row .col-img{margin-bottom:2rem; justify-content:center;}
	#en-flow .row .col-img img{width:50%;}
	#en-flow .row .col-img::before{
		width:60vw;
		left:40%;
	}
	.flow-list>*{padding-left:calc(50px + 1.5rem); padding-top:.5em;}
}
@media (max-width:375px){
	.flow-list>*{padding-left:calc(46px + 1.5rem);}
	.flow-list>*::after{width:46px;}
}


/* search
--------------------------------------------------------------*/
#kintone-search .form-check-list>*{min-width:10em;}
.result-bar .sort{display:none;}

.product-control-btns{max-width:calc(520px * 2); margin:0 auto;}
.product-control-btns .row{row-gap:1rem;}
.product-control-btns .btn-main{width:100%;}

/* table
-------------------------------------------------------------- */
.table-product{table-layout:fixed; width:auto; min-width:100%;}
.table-product th,
.table-product td{padding:.25rem .5rem; text-align:left;}
.table-product th{width:6em; white-space:nowrap;}
.table-product th.attachment,
.table-product th.etc{width:auto;}
.table-product th.check{width:2em;}
.table-product td.maker,
.table-product td.model,
.table-product td.power{white-space:nowrap;}
.table-product td.id{color:var(--color-blue);}

@media (max-width:1199px){
	.table-product th.attachment,
	.table-product th.etc{min-width:12em;}
}

/* contact
-------------------------------------------------------------- */
.label-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:1rem;
}
#checked-product-list{padding-bottom:4rem; display:none;}
#checked-product-list ul{gap:5px;}
#checked-product-list ul li{width:80px; text-align:center; color:var(--color-blue); background-color:var(--color-gray);}

form .form-group>label.req::after{
	content:'required';
}