@charset "utf-8";



body {background-color: #FFFFFF;}

#inquiryHanger{background-color: #EBEEF1;}

h2{
	position: relative;
	height: 350px;
	background: url("../img/h2_bg.jpg") no-repeat center center;
	background-size: cover;
	font-size: 45px;
	font-size: 4.5rem;
	font-weight: 500;
	letter-spacing: 8px;
	color: #FFFFFF;
}

h2 span{
	/*position: absolute;*/
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.45);
	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: center;
 	align-items: center;
 	-webkit-justify-content: center;
 	justify-content: center;
	text-align: center;
}

#mainCopy{
	font-size: 35px;
	font-size: 3.5rem;
	font-weight: 500;
	letter-spacing: 5px;
	line-height: 1.4;
	text-align: center;
	padding: 120px 15px;
	background-color: #FFFFFF;
	position: relative;
}

#mainCopy span{position: relative;}

#mainCopy span:before,
#mainCopy span:after{
	position: absolute;
	content: '';
	width: 2px;
	height: 70px;
	top: -10px;
	left: -50px;
	background: linear-gradient(#00BFFF,#4D4DFF);
	transform: rotate(20deg);
}

#mainCopy span:after{
	left:auto;
	right: -50px;
}

#introHanger{
	position: relative;
	background-color: #EBEEF1;
	min-width: 1050px;
}

#introPhoto{
	width: 55%;
	/*min-width: 740px;*/
	margin-left: 45%;
}

#introPhoto img{width: 100%;}

#introText{
	position: absolute;
	width: calc(52% - 40px);
	top: 10%;
	left: 4%;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.9;
	letter-spacing: 2px;
	padding: 50px;
	background: rgba(255,255,255,0.98);
}

#introHanger.bawloo{margin-bottom: 150px;}
#introHanger.bawloo #introText{line-height: 1.7;}

@media screen and (max-width: 1100px){
	
#introHanger.bawloo #introText{
	font-size: 17px;
	font-size: 1.7rem;
	top: 5%;
	left: 2%;
}
	
}

article{
	position: relative;
	width: 1050px;
	margin: 0 auto;
	padding-top: 1px;
	padding-bottom: 100px;
}

article h3{
	font-size: 35px;
	font-size: 3.5rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 5px;
	text-align: center;
	margin: 150px 0 0 0;
}

article h3 span{position: relative;}

article h3 span:before,
article h3 span:after{
	position: absolute;
	content: '';
	width: 80px;
	height: 1px;
	top: 25px;
	left: -130px;
	background: #232B32;
}

article h3 span:after{
	left: auto;
	right: -130px;
}

article p{
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.8;
	padding: 80px 0 0 0;
}

article table.style1{
	width: 85%;
	margin: 80px auto 0 auto;
	/*border-top: 1px solid #3A4854;
	border-left: 1px solid #3A4854;*/
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.8;
}

article table.style1 th{
	padding: 20px;
	background-color: #EBEEF1;
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	letter-spacing: 3px;
	text-align: left;
	width: 25%;
}

article table.style1 td{
	padding: 20px;
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}

article .tableHanger{margin: 80px auto 0 auto;}

article .tableHanger table{
	width: 100%;
	/*border-top: 1px solid #3A4854;
	border-left: 1px solid #3A4854;*/
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.8;
}

article .tableHanger table th{
	padding: 20px;
	background-color: #EBEEF1;
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	letter-spacing: 3px;
	text-align: left;
}

article .tableHanger table td{
	padding: 20px;
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}

br.smp{display: none;}



/**************************************************
 product
**************************************************/
#product{
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

#product dl{
	width: calc(50% - 40px);
	background-color: #EBEEF1;
	margin: 80px 0 0 0;
}

#product dl:nth-child(2n){margin: 80px 0 0 80px;}

#product dl dt img{width: 100%;}

#product dl dd{
	padding: 30px;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.6;
}

#product dl dd strong{
	display: block;
	margin-bottom: 20px;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 3px;
	text-align: center;
}

#product dl dd a{
	display: block;
	color: #FFFFFF;
	background-color: #232B32;
	margin: 25px auto 0 auto;
	padding: 10px 0;
	width: 45%;
	text-align: center;
}

#product dl dd a:hover{opacity: 0.5;}



/**************************************************
 bawloo
**************************************************/
.bawlooSp dl{
	position: relative;
	margin: 80px 0 0 0;
}

.bawlooSp dl dt{width: 55%;}

.bawlooSp dl dt img{width: 100%;}

.bawlooSp dl dd{
	position: absolute;
	width: 50%;
	top: 30px;
	left: 50%;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.8;
	padding: 25px;
	background: rgba(235,238,241,0.97);
}
.bawlooSp dl dd.style1{background: rgba(255,255,255,0.97);}

.bawlooSp dl dd strong{
	display: block;
	margin-bottom: 15px;
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: 500;
	letter-spacing: 2px;
}

.bawlooSp.style1 dl dt{margin-left: 45%;}

.bawlooSp.style1 dl dd{left: 0;}

.bawlooLogo{
	padding: 0 0 30px 0;
	text-align: center;
}
.bawlooLogo.style1{
	padding: 0;
	margin-top: 80px;
}
.bawlooLogo img{width: 400px;}

.introCopy{
	font-size: 2.0rem;
	font-weight: 500;
	line-height: 2.0;
	text-align: center;
	padding: 50px 0 80px 0;
}

article p.note{
	padding: 40px 0 0 0;
	text-align: right;
}

.lineUp ul{
	margin-top: 50px;
	display:-webkit-box;
  	display:flex;
	flex-wrap: wrap;
}
.lineUp ul li{
	width: calc((100% - 60px) / 3);
	margin-right: 30px;
}
.lineUp ul li:last-of-type{margin-right: 0px;}
.lineUp ul li a{
	display: block;
	color: #000000;
}
.lineUp ul li a span{
	display: block;
	height: 250px;
}
.lineUp ul li a span img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lineUp ul li a small{
	display: block;
	margin-top: 15px;
	font-size: 1.5rem;
	text-align: center;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
}
.lineUp ul li a:hover small{opacity: 0.5;}

.proImage{margin-top: 60px;}
.proImage img{width: 100%;}

article h3.pro{margin-top: 80px;}
article h3.pro span small{
	font-size: 3.5rem;
	padding-left: 35px;
}

.proInfo{
	margin-top: 60px;
	display:-webkit-box;
  	display:flex;
	flex-wrap: wrap;
}
.slide{
	width: calc(50% - 20px);
	margin-right: 40px;
}
.slider-thumbnail .swiper-slide{
	opacity: 0.5;
	transition: opacity 0.5s;
	width: calc((100% - 30px) / 4);
}
.slider-thumbnail .swiper-slide.swiper-slide-thumb-active{opacity: 1;}
.swiper {width: 100%;}
.slider .swiper-slide{height: 400px;}
.slider-thumbnail{margin-top: 10px;}
.slider-thumbnail .swiper-slide{
	height: 100px;
	cursor: pointer;
}
.swiper-slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.proDetail{
	width: calc(50% - 20px);
	/*padding: 30px;
	background: rgba(235,238,241,0.97);*/
}
.proDetail h4{
	font-size: 2.0rem;
	font-weight: 500;
}
.proDetail table{
	margin-top: 30px;
	width: 100%;
	border: 1px solid #333333;
	background: #FFFFFF;
	line-height: 1.4;
}
.proDetail table th{
	padding: 10px 15px;
	font-size: 1.4rem;
	white-space: nowrap;
	text-align: left;
}
.proDetail table td{
	padding: 10px 15px;
	font-size: 1.4rem;
}
.proDetail p{
	/*text-align: right;*/
	font-size: 1.3rem;
	padding-top: 15px;
}

article p.style1{
	padding: 30px;
	margin: 80px 0 0 0;
	border: 5px solid rgba(235,238,241,0.97);
	display:-webkit-box;
  	display:flex;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	align-items: center;
}
article p.style1 img{width: 12%;}
article p.style1 span{width: 85%;}



/**************************************************
 feature
**************************************************/
#featureHanger{
	margin: 80px 0 0 0;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

#featureHanger dl{
	width: calc((100% - 101px) / 3);
	background-color: #EBEEF1;
	position: relative;
}

#featureHanger dl:nth-child(2){margin: 0 50px;}

#featureHanger dl dt{
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 2px;
	background: linear-gradient(#00BFFF,#4D4DFF);
	color: #FFFFFF;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	text-align: center;
	height: 100px;
}

#featureHanger dl dd{
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.8;
	padding: 20px;
}

#featureSp dl{
	position: relative;
	margin: 40px 0 0 0;
}

#featureSp dl dt{width: 55%;}

#featureSp dl dt img{width: 100%;}

#featureSp dl dd{
	position: absolute;
	width: 50%;
	top: 30px;
	left: 50%;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.8;
	padding: 25px;
	background: rgba(235,238,241,0.97);
}

#featureSp dl dd strong{
	display: block;
	margin-bottom: 15px;
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: 500;
	letter-spacing: 2px;
}

#facilityPhoto ul{
	margin: 40px 0 0 0;
	font-size: 0;
}

#facilityPhoto ul li{
	display: inline-block;
	vertical-align: top;
	width: calc((100% - 60px) / 4);
	margin-left: 20px;
}

#facilityPhoto ul li:nth-child(1){margin-left: 0;}

#facilityPhoto ul li img{width: 100%;}



/**************************************************
 company
**************************************************/
#companyImage{
	margin: 40px 0 0 0;
	text-align: center;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.5;
}

#companyImage img{
	display: block;
	margin: 0 auto 15px auto;
	width: 50%;
}

#map{margin-top: 80px;}

#map iframe{
	width: 100%;
	height: 600px;
}



/**************************************************
 inquiry
**************************************************/
article table.style1.inquiry th{width: 35%;}

.emp{
	display: inline-block;
	vertical-align: middle;
	color: #FFFFFF;
	background-color: #FF4D4D;
	padding: 0 15px;
	border-radius: 10.0rem;
	margin: 0 5px 0 0;
}

article table.style1.inquiry th .emp{margin: 0 0 0 5px;}

article table.style1.inquiry td input[type="text"],
article table.style1.inquiry td select,
article table.style1.inquiry td textarea{
	border: 1px solid #3A4854;
	padding: 5px;
	margin: 3px 0;
	font-family: 'Noto Serif JP', serif;
	font-size: 16px;
	font-size: 1.6rem;
}

article table.style1.inquiry td textarea{width: 100%;}

.form_buttons{
	width: 300px;
	margin: 80px auto 0 auto;
}

.form_buttons input[type="submit"],
.form_buttons input[type="button"]{
	font-family: 'Noto Serif JP', serif;
	background-color: #232B32;
	text-align: center;
	color: #FFFFFF;
	font-size: 16px;
	font-size: 1.6rem;
	letter-spacing: 2px;
	padding: 15px 0;
	margin:10px 10px 20px 10px;
	width: 100%;
}





/**************************************************
 Responsive
**************************************************/
@media screen and (max-width: 640px){


	
/*h2{
	height: 200px;
	font-size: 28px;
	font-size: 2.8rem;
	letter-spacing: 4px;
}*/
	
h2{
	position: static;
	display: table;
	width: 100%;
	height: 200px;
	font-size: 28px;
	font-size: 2.8rem;
	letter-spacing: 4px;
}

h2 span{
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}

#mainCopy{
	font-size: 22px;
	font-size: 2.2rem;
	letter-spacing: 3px;
	padding: 60px 15px 50px 15px;
}
	
#mainCopy:before{
	position: absolute;
	content: '';
	width: 150px;
	height: 10px;
	top: 0;
	left: calc(50% - 75px);
	background: linear-gradient(#00BFFF,#4D4DFF);
}

#mainCopy span:before,
#mainCopy span:after{display: none;}

#introHanger{min-width: 100%;}
#introHanger.bawloo{margin-bottom: 0;}

#introPhoto{
	width: 100%;
	min-width: 100%;
	margin-left: 0;
}

#introText{
	position: static;
	width: 100%;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.8;
	padding: 0 20px 30px 20px;
}

article{
	width: 100%;
	padding: 0 15px 50px 15px;
}

article h3{
	font-size: 22px;
	font-size: 2.2rem;
	letter-spacing: 4px;
	margin: 70px 0 0 0;
}

article h3 span:before,
article h3 span:after{
	width: 40px;
	top: 18px;
	left: -60px;
}

article h3 span:after{
	left: auto;
	right: -60px;
}
	
article p{
	font-size: 15px;
	font-size: 1.5rem;
	padding: 40px 0 0 0;
}
	
article table.style1{
	width: 100%;
	margin: 40px auto 0 auto;
	font-size: 15px;
	font-size: 1.5rem;
}

article table.style1 th{
	padding: 15px;
	display: block;
	width: 100%;
}

article table.style1 td{
	padding: 15px;
	display: block;
}
	
article .tableHanger{
	margin: 40px auto 0 auto;
	overflow: scroll;
}

article .tableHanger table{
	width: 100%;
	font-size: 15px;
	font-size: 1.5rem;
}

article .tableHanger table th{padding: 15px;}

article .tableHanger table td{padding: 15px;}
	
br.smp{display: block;}
br.pc{display: none;}
	
	

/** product ******************************/
#product{
	display: block;
	padding-top: 10px;
}

#product dl{
	width: 100%;
	margin: 30px 0 0 0;
}

#product dl:nth-child(2n){margin: 30px 0 0 0;}

#product dl dd{
	padding: 20px;
	font-size: 15px;
	font-size: 1.5rem;
}

#product dl dd strong{
	margin-bottom: 15px;
	letter-spacing: 2px;
}

#product dl dd a{width: 60%;}
	
	
	
/** bawloo ******************************/
.bawlooSp dl{margin: 40px 0 0 0;}

.bawlooSp dl dt{width: 100%;}

.bawlooSp dl dd{
	position: static;
	width: 100%;
	font-size: 15px;
	font-size: 1.5rem;
	padding: 20px;
	background: rgba(235,238,241,1.0);
}

.bawlooSp dl dd strong{
	font-size: 18px;
	font-size: 1.8rem;
	text-align: center;
}

.bawlooSp.style1 dl dt{margin-left: 0;}
	
.bawlooLogo{padding: 0;}
.bawlooLogo.style1{margin-top: 60px;}
.bawlooLogo img{width: 60%;}

.introCopy{
	font-size: 1.8rem;
	padding: 30px 0 50px 0;
	margin: 0 20px 50px 20px;
	border-bottom: 1px solid #333333;
}

article p.note{
	padding: 30px 0 0 0;
	text-align: left;
}

.lineUp ul{margin-top: 30px;}
.lineUp ul li{
	width: calc((100% - 20px) / 3);
	margin-right: 10px;
}
.lineUp ul li:last-of-type{margin-right: 0px;}
.lineUp ul li a span{height: 25vw;}
.lineUp ul li a small{
	margin-top: 10px;
	font-size: calc(2.6vw);
	line-height: 1.3;
}
	
.proImage{margin-top: 40px;}

article h3.pro{margin-top: 80px;}
article h3.pro span{display: inline-block;}
article h3.pro span small{
	font-size: 2.2rem;
	padding-left: 0;
}
article h3 span:before,
article h3 span:after{top: calc(50% - 1px);}

.proInfo{margin-top: 40px;}
.slide{
	width: 100%;
	margin-right: 0;
}
.slider .swiper-slide{height: 75vw;}
.slider-thumbnail .swiper-slide{height: 19vw;}
.proDetail{
	width: 100%;
	/*padding: 30px 20px;*/
	margin-top: 40px;
}
.proDetail h4{font-size: calc(4.5vw);}
.proDetail table{
	/*margin-top: 30px;*/
	margin-top: 20px;
}
.proDetail table th{
	padding: 10px;
	font-size: 1.2rem;
}
.proDetail table td{
	padding: 12px;
	font-size: 1.2rem;
}
.proDetail p{
	font-size: 1.1rem;
	padding-top: 10px;
}
	
article p.style1{
	padding: 15px;
	margin: 50px 0 0 0;
	border: 5px solid rgba(235,238,241,0.97);
	display: block;
}
article p.style1 img{
	display: block;
	width: 30%;
	margin: 0 auto 10px auto;
}
article p.style1 span{
	display: block;
	width: 100%;
}
	
	

/** feature ******************************/
#featureHanger{
	margin: 0;
	padding-top: 20px;
	display: block;
}

#featureHanger dl{
	width: 100%;
	margin: 20px 0 0 0;
}

#featureHanger dl:nth-child(2){margin: 20px 0 0 0;}

#featureHanger dl dt{
	display: block;
	font-size: 18px;
	font-size: 1.8rem;
	letter-spacing: 2px;
	height: auto;
	padding: 15px 10px;
}

#featureHanger dl dd{
	font-size: 15px;
	font-size: 1.5rem;
	padding: 20px;
}

#featureSp dl{margin: 40px 0 0 0;}

#featureSp dl dt{width: 100%;}

#featureSp dl dd{
	position: static;
	width: 100%;
	font-size: 15px;
	font-size: 1.5rem;
	padding: 20px;
	background: rgba(235,238,241,1.0);
}

#featureSp dl dd strong{
	font-size: 18px;
	font-size: 1.8rem;
	text-align: center;
}

#facilityPhoto ul{margin: 10px 0 0 0;}

#facilityPhoto ul li{
	width: calc(50% - 7px);
	margin: 20px 0 0 0;
}

#facilityPhoto ul li:nth-child(1){margin: 20px 0 0 0;}
	
#facilityPhoto ul li:nth-child(2n){margin: 20px 0 0 14px;}

	
	
/** company ******************************/
#companyImage{
	margin: 30px 0 0 0;
	font-size: 14px;
	font-size: 1.4rem;
}

#companyImage img{
	width: 100%;
	margin-bottom: 10px;
}

#map{margin-top: 40px;}

#map iframe{height: 70vw;}
	


/** inquiry ******************************/
article table.style1.inquiry th{width: 100%;}

article table.style1.inquiry td input[type="text"],
article table.style1.inquiry td select,
article table.style1.inquiry td textarea{
	width: 100%;
	font-size: 15px;
	font-size: 1.5rem;
}

.form_buttons{
	width: 280px;
	margin: 40px auto 0 auto;
}

.form_buttons input[type="submit"],
.form_buttons input[type="button"]{
	font-size: 15px;
	font-size: 1.5rem;
}



}