@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
*{
margin:0;
padding:0;	
box-sizing:border-box;
font-family: 'Noto Sans JP', sans-serif;
}
body{
margin:0;
padding:0;	
}
.top{
background:#81b813;
height:.6rem;
}
.main-menu{
padding:0 60px 0 60px;
}
.header_area {
	
}
.header_area .main-menu .navbar{

}

.header_area .main-menu .nav-item .nav-link{
text-transform:uppercase;
font-weight:500;
padding:1.1rem;

}
.header_area .main-menu .navbar-nav a{
color:#81b813;	

}
.header_area .main-menu .navbar-nav .active a{

color:#fff;
background: #81b813;
} 
.header_area .main-menu .navbar-nav a:hover{

color:#fff;
transition:.6s ease;
background: #81b813;
}
.icon-bar{
z-index:1;
position:fixed;
top:41%;right:0;
transform:translateY(-50%);	
-webkit-transform:translateY(-50%);	
-ms-transform:translateY(-50%);	
-moz-transform:translateY(-50%);

}
.icon-bar a{
text-decoration:none;
width:43px;
background:#1877F2;	
color:#FFF;
display:flex;
justify-content:center;
align-items:center;
padding:5px;
font-size:16px;
border-radius:50px 0 0 50px;	
}
.icon-bar a i{
padding-left:20px;	
font-size:30px !important;
animation:zoom 3s linear alternate-reverse infinite;
}
@keyframes zoom{
from{
	transform:scale(0.7);
	}
	to{
	transform:scale(1);
	}
}

.site-main .site-banner .site-title{
padding:60px 0 0 60px;

justify-content:center;	
}
.site-main .site-banner .site-title .title-text{
	font-size:1.8rem;
	color:#777;
	font-style:normal;
	margin-top:60px;
}
.site-main .site-banner .site-title .home{
	font-size:4rem;
	color:#81b813;
	font-weight:bold;
	font-style:normal;
	text-transform:uppercase;
	

}
.site-main .site-banner .banner-image{
margin:0 auto; 	
}
.site-main .site-banner .banner-image img{
padding:.3rem 0;
max-width:390px;
width:100%;	
}
#aboutus,#products,#faqs,#contactus{
transition:.6s ease;
}

.aboutus{
margin:100px auto;
width:100%;
text-align:center;

padding:10px 10px;
color:#333;

}
.aboutus h1 {
	font-size:40px;
	text-align:center;
	line-height:50px;
	padding-bottom:20px;
	color:#81b813;
	text-transform:uppercase;
	font-weight:700;
}
.aboutus h1::before{
content:'';
background:#81b813;
height:5px;
width:200px;
margin-left:auto;
margin-right:auto;
display:block;
transform:translateY(63px);	
}
.aboutus h1::after{
content:'';
background:#81b813;
height:9px;
width:130px;
margin-left:auto;
margin-right:auto;
margin-bottom:40px;
display:block;
transform:translateY(8px);	
}
.aboutus p{
font-size:18px;
color:#777;
font-weight:normal;
width:70%;
text-align:center;
margin:0 auto;
line-height:30px;	
}
.img-banner{
margin:0 auto;
	
}
.img-banner img{
padding:0;
width: 100%;
}

.ourproducts{
margin:100px auto;
background:#FFF;	
padding:20px;
}
.pro{

padding:10px 100px;
width:100%;
}
.ourproducts h1{
	font-size:40px;
	text-align:center;
	line-height:50px;
	padding-bottom:20px;
	color:#81b813;
	text-transform:uppercase;
	font-weight:700;
}
.ourproducts h1::before{
content:'';
background:#81b813;
height:5px;
width:200px;
margin-left:auto;
margin-right:auto;
display:block;
transform:translateY(63px);	
}
.ourproducts h1::after{
content:'';
background:#81b813;
height:9px;
width:130px;
margin-left:auto;
margin-right:auto;
margin-bottom:40px;
display:block;
transform:translateY(8px);	
}
.ourproducts .thumb1, .ourproducts .thumb2{
	text-align:center;
	padding:20px;
	width:400px;
	
}
.ourproducts .thumb1{

}
.ourproducts .thumb2{

}
.ourproducts .thumb1 img{
	width:100px;
	margin:0 auto;
	display:flex;
}
.ourproducts .thumb2 img{
	width:250px;
	margin:0 auto;
	display:flex;
	padding-top:47px;
}

.ourproducts h3{
	text-align:center;
	color:#777;
	font-size:18px;
	font-weight:700;
	padding:10px;
}
.ourproducts h4{
	text-align:center;
	color:#777;
	font-size:14px;
}
.faqs{
margin:100px auto;
padding:10px 100px;	
}
.faqs h1 {
	font-size:40px;
	text-align:center;
	line-height:50px;
	padding-bottom:20px;
	color:#81b813;
	text-transform:uppercase;
	font-weight:700;
}
.faqs h1::before{
content:'';
background:#81b813;
height:5px;
width:200px;
margin-left:auto;
margin-right:auto;
display:block;
transform:translateY(63px);	
}
.faqs h1::after{
content:'';
background:#81b813;
height:9px;
width:130px;
margin-left:auto;
margin-right:auto;
margin-bottom:40px;
display:block;
transform:translateY(8px);	
}
.cont h2{

}
.faqs h2{
color:#fff;
font-size:18px;
background:#81b813;
width:100%;
text-align:center;

padding:5px;
}
.faqs p{
font-size:18px;
color:#777;
font-weight:normal;
width:100%;
text-align:left;
margin:0 auto;
line-height:30px;	
}
.stamps{
margin:100px auto;
text-align:center;
padding:10px 100px;
background:#F5F5F5;
}
.stamps h1 {
	font-size:40px;
	text-align:center;
	line-height:50px;
	padding-bottom:20px;
	color:#81b813;
	text-transform:uppercase;
	font-weight:700;
}

.stamps img{

width:100%;	
display:flex;
padding:15px;
}
.qualitypolicy{
margin:0 0 100px 0;	
}
.stamps p{
font-size:18px;
color:#777;
font-weight:normal;
width:100%;
text-align:left;
margin:0 auto;
line-height:30px;		
}
.quality{
font-size:18px;
color:#777;
font-weight:normal;
width:100%;
text-align:center;
margin:40px 0 0 0;
}
.contact{
position:relative;
min-height:100vh;
padding:50px 100px;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
background:#4D4B4B;	
}
.contact h1{
    font-size:40px;
	text-align:center;
	line-height:50px;
	padding-bottom:20px;
	color:#81b813;
	text-transform:uppercase;
	font-weight:700;
}
.contact h1::before{
content:'';
background:#81b813;
height:5px;
width:200px;
margin-left:auto;
margin-right:auto;
display:block;
transform:translateY(63px);	
}
.contact h1::after{
content:'';
background:#81b813;
height:9px;
width:130px;
margin-left:auto;
margin-right:auto;
margin-bottom:40px;
display:block;
transform:translateY(8px);	
}
.contact .content{
max-width:800px;
text-align:center;	
}

.container{
width:100%;
display:flex;
justify-content:center;
align-items:center;
margin-top:30px;	
}
.container .contactinfo{
width:50%;
display:flex;
flex-direction:column;	
}
.container .contactinfo .box{
position:relative;
padding:20px 0;
display:flex;	
}
.container .contactinfo .box .icon{
min-width:50px;
height:50px;
background:#81b813;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
font-size:22px;
color:#fff;
}
.container .contactinfo .box .contacttext{
	display:flex;
	margin-left:20px;
	font-size:16px;
	color:#fff;
	flex-direction:column;
	font-weight:300;
}
.container .contactinfo .box .contacttext h3{
	font-weight:500;
	color:#fff;
}
.contactform{
width:40%;
padding:40px;
background:#fff;	
}
.contactform h2{
font-size:30px;
color:#81b813;
font-weight:500;	
}
.contactform .inputbox{
position:relative;
width:100%;
margin-top:10px;	
}
.contactform .inputbox input, .contactform .inputbox textarea{
width:100%;
padding:5px 0;
font-size:16px;
margin:10px 0;
border:none;
border-bottom:2px solid #333;	
outline:none;
resize:none;
}
.contactform .inputbox span{
position:absolute;
left:0;
padding:5px 0;
font-size:16px;
margin:10px 0;
pointer-events:none;
transition:0.5s;
color:#666;	
}
.contactform .inputbox input:focus ~ span, 
.contactform .inputbox input:valid ~ span, 
.contactform .inputbox textarea:focus ~ span, 
.contactform .inputbox textarea:valid ~ span{
color:#F14438;
font-size:12px;
transform:translateY(-20px);
}
.contactform .inputbox input[type="submit"]{
width:100px;
background:#81b813;
color:#fff;
border:none;
cursor:pointer;
padding:10px;
font-size:18px;
}


@media (max-width:991px){

.main-menu{
padding:0;
}

.icon-bar a{
width:58px;
padding:5px;
}
.icon-bar a i{
padding-left:10px;	
}

.site-main .site-banner .site-title{
padding:0;
}
.site-main .site-banner .site-title .title-text{
	margin:0px;
	text-align:center;
}
.site-main .site-banner .site-title .home{
	margin:0px;
	padding:0;
	text-align:center;
}
.site-main .site-banner .banner-image{
	margin:20px 0 0 0;
}
.site-main .site-banner .banner-image img{
max-width:100%;
}
.aboutus{
margin:10px auto;
width:100%;
text-align:center;
padding:0;
}
.aboutus h1 {
padding-bottom:10px;	
}
.aboutus p{
width:100%;
text-align:left;
margin:10px auto;
padding:10px;	
}
.img-banner{
margin:10px auto;
}
.img-banner img{
padding:0;
margin:0;
width:100%;
}
.ourproducts{
margin:10px auto;
padding:10px;
}
.ourproducts h1{
padding-bottom:0px;
}
.ourproducts .thumb1{
	margin:0 auto;
	
	}
.ourproducts .thumb2{
	margin:0 auto;
}
.ourproducts .thumb1 img{
	width:100px;
	
	}
.ourproducts .thumb2 img{
	padding-top:0;
}
.ourproducts .thumb img{
width:200px;
margin:0 auto;
padding:0px;
}
.ourproducts h3{
	text-align:center;
}



.faqs{
margin:10px auto;
width:100%;
text-align:center;
padding:0;	
}
.faqs h1 {
	padding-bottom:10px;
	}
.faqs h2{
margin:10px auto;
}

.stamps{
margin:10px auto 0 auto;
width:100%;
text-align:center;
padding:0;
}
.stamps h1 {
	padding-bottom:10px;
}

.qualitypolicy{
margin:30px 0 100px 0;	
}
.qualitypolicy p{
font-size:18px;
color:#777;
font-weight:normal;
width:100%;
text-align:left;
margin:0 auto;
line-height:30px;		
}

.stamps img{
width:80%;	

padding:25px;
margin:0px auto;
}




.contact{
padding:10px;
}
.contact h1{
padding-bottom:10px;
}
.contact .content{
width:100%;
}
.container{
flex-direction:column;
margin-top:10px;	
}
.container .contactinfo{
margin-bottom:40px;
width:100%;
}
.container .contactinfo .box{
padding:10px 0;
}
.contactform{
width:100%;
padding:40px;
background:#fff;	
}
.contactform .inputbox input[type="submit"]{
width:100px;
background:#4D4B4B;
color:#fff;
border:none;
cursor:pointer;
padding:10px;
font-size:18px;
}
.container .contactinfo, .contactform{
width:100%;
}

}