@charset "UTF-8";
/* CSS Document */
.subNavs {
	position: fixed;
	top: 100px;
	left: 50%;
	width: 90%;
	max-width: 700px;
	z-index: 11;
	container-type: inline-size;
	transform: translateX(-50%);
	justify-content: center;
	gap:0 0.5%;
}
.subNavs a {
	display: block;
	width: 24.5%;
	height: 2.5em;
	background-color: rgba(0,0,0,1);
	border: #fff solid 1px;
	color: #fff;
	display: flex;
justify-content: center;
align-items: center;
	border-radius: 5px;
	transition: 0.3s;
	font-size: clamp(10px, 3.3cqw, 14px);
	opacity: 0.5;
}
.subNavs a:hover {
	opacity: 1;
}
#kitchen .subNavs a:nth-child(1),
#bathroom .subNavs a:nth-child(2),
#sanitary .subNavs a:nth-child(3),
#storage .subNavs a:nth-child(4),
#space .subNavs a:nth-child(1),
#eco .subNavs a:nth-child(2),
#structure .subNavs a:nth-child(3)
{
	opacity: 1;
	background-color: rgba(255,255,255,0.8);
	color: #000;
	border: #777 solid 1px;
	box-shadow: 0px 2px 3px rgba(0,0,0,0.5);
}

@media screen and (max-width: 959px) {
	.subNavs {
		top: 60px;
		z-index: 13;
		transition: 0.3s ;
	}
	.showMenu .subNavs {
		opacity: 0;
		pointer-events: none;
	}

}
@media screen and (max-width: 599px) {
	.subNavs {
		
	}
}

.eco {
	position: relative;
}
.eco::after {
	content: "";
	width: 10%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 4%;
	background-image: url("../img/ico-eco.svg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100%;
}

.itemBox dt {
	font-size: 15px;
	text-align: center;
	line-height: 1.2;
	height: 3.5em;
	border: #fff solid 1px;
	background-color: rgba(167,155,113,0.12);
	margin: 0.5em 0;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
	display: flex;
justify-content: center;
align-items: center;
	
}
.itemBox dd {
	font-size: 13px;
}

#sec02 {
	background-color: #fff;
	padding: 5% 0;
	
}
.h3Box {
	padding-bottom: 30px;
	letter-spacing: 0.1em;
}
.h3Box .engTxt {
	font-size: 28px;
	text-align: center;
}
.h3Box h2 {
	font-size: 32px;
	padding: 0.6em 0;
	text-align: center;
}
.h3Box p {
	font-size: 15px;
}

.brTab {
	display: none;
}

@media screen and (max-width: 959px) {
	.sec .engTxt {
		font-size:20px!important;
	}
	.sec h2,.sec h3 {
		font-size:20px!important;
	}
	.sec h4 {
		font-size:16px!important;
	}
	.sec .lead {
		font-size:13px!important;
		letter-spacing: 0em;
	}
	    #sec01 .h3Box {
        width: 90%;
    }
	
}

@media screen and (max-width: 599px) {
	.sec .engTxt {
		font-size: clamp(17px, 4.8vw, 19px)!important;
		letter-spacing: 0em;
		font-weight: 500;
	}
	.sec .engTxt,.sec h2,.sec h3 {
		font-size: clamp(18px, 5.0vw, 20px)!important;
		letter-spacing: 0em;
	}
	.sec .lead {
		font-size: clamp(12px, 3.5vw, 14px)!important;
		letter-spacing: 0em;
		text-align: justify;
	}
	.sec h4 {
		font-size: clamp(13px, 3.7vw, 15px)!important;
		letter-spacing: 0em;
	}

	.sec .lead br {
		display: none !important;
	}
}