@charset "utf-8";
/* CSS Document */
#facility h3{ text-align: center;}
#facility .h3fr{ margin: 0 0 85px;}

#facility .box{ margin: 0 0 95px;}
#facility .box .box-txt{ font-size: 18px; text-align: center;}
#facility .box1 .map{ float: left; width: 78.889%; margin-left: -14.1%;}
#facility .box1 .imgR{ width: 35.186%; float: right;}
#facility .box1 .imgR li{ position: relative; margin: 0 0 9px;}
#facility .box1 .imgR li:last-of-type{ margin: 0;}
#facility .box1 .bxcap{ color: #333333;}
#facility .box1 .bxcap>p{ padding-bottom: 7px;}

#facility .box2 h3{ margin: 0 0 20px;}
#facility .box2 .box-txt{ margin: 0 0 45px;}
#facility .box2 .item{ display: flex; margin: 0 0 40px;}
#facility .box2 .item:last-of-type{ margin: auto;}
#facility .box2 .item .img{width: 50%; position: relative;}
#facility .box2 .item .bxTxt{width: 50%; padding: 4.2% 4.2% 10px;}
#facility .box2 .item .titsm{ font-size: 18px; line-height: 1.3; padding: 0 0 1vw; border-bottom: 1px #d4dfcf solid; margin: 0 0 1.2vw;}
#facility .box2 .item .titsm span{ display: block; font-size: 36px;}
#facility .box2 .item .titsm small{ font-size: 24px;}
#facility .box2 .item .txt{ font-size: 20px;}
#facility .box2 .item .f14{ padding: 5px 0 0;}
#facility .box2 .item .fL{ order: 1;}
#facility .box2 .item .fR{ order: 2;}
#facility .box2 .item .color1{color: #4c8f2c;}
#facility .box2 .item .bg1{background: #ecf8e6;}
#facility .box2 .item .color2{color: #45799f;}
#facility .box2 .item .bg2{background: #f5fbff;}
#facility .box2 .item .color3{color: #dd6b38;}
#facility .box2 .item .bg3{background: #fcf4f1;}

#facility .box3{ padding: 30px 10px; margin: 0 0 100px; border: 1px #e6e6e6 solid; border-radius: 5px;}
#facility .box3 .inner{ display: flex; align-items: center; max-width: 950px; margin: auto;}
#facility .box3 .img{ width: 183px;}
#facility .box3 .bxTxt{ width: calc(100% - 183px); padding-left: 3%;}
#facility .box3 .titsm{ font-size: 36px; line-height: 1.3; margin: 0 0 1.2vw;}
#facility .box3 .txt{ font-size: 20px;}
#facility .box3 .color4{color: #ad4271;}

/* ============== Media =============== */
@media only screen and (max-width: 1400px){
	#facility .box1 .map{ margin-left: 0; width: 64.8%;}
}
@media only screen and (max-width: 1080px){
	#facility .box2 .item .bxTxt{ padding: 3% 3% 10px;}
	#facility .box2 .item .titsm{ font-size: 1.7vw;}
	#facility .box2 .item .titsm span, #facility .box3 .titsm{ font-size: 3.3vw;}
	#facility .box2 .item .titsm small{ font-size: 2.2vw;}
	#facility .box2 .item .txt, #facility .box3 .txt{ font-size: 1.9vw;}
}
@media only screen and (max-width: 767px){
	#facility .box{ margin: 0 0 60px;}
	#facility .box1 .map{ width: 100%; text-align: center; margin: 0 0 5vw;}	
	#facility .box1 .imgR{ max-width: 380px; margin: 0 auto 15px; width: 100%; float: none;}
	
	#facility .box2 .item{ max-width: 540px; margin: 0 auto 25px; display: block;}
	#facility .box2 .item .img{ width: 100%;}
	#facility .box2 .item .bxTxt{ width: 100%; padding: 30px 10px;}
	#facility .box2 .item .titsm span, #facility .box3 .titsm{ font-size: 3.3vw;}
	
	#facility .box3 .inner{ display: block;}
	#facility .box3 .img{ margin: 0 auto 30px;}
	#facility .box3 .bxTxt{ width: 100%; padding: 0; text-align: center;}
}
@media only screen and (max-width: 480px){
	#facility .h3fr{ margin: 0 0 10vw;}	
	#facility .box .box-txt{ font-size: 3.8vw;}

	#facility .box2 .item .titsm{ font-size: 3.8vw; padding: 0 0 3vw; margin: 0 0 3vw;}
	#facility .box2 .item .titsm span{ font-size: 5.5vw;}
	#facility .box2 .item .titsm small{ font-size: 4.4vw;}
	#facility .box2 .item .txt, #facility .box3 .txt{ font-size: 4vw;}
	#facility .box2 .item .f14{ font-size: 10px;}
	#facility .box3{ margin: 0 0 50px;}
	#facility .box3 .titsm{ font-size: 5.5vw; margin: 0 0 3vw;}
}