@charset "utf-8";

#main section{padding:80px 0;}
h2{margin:0 auto; text-align:center; font-weight:700; font-size:38px; margin-bottom:30px; color:#fff;}

.m1{position:relative; height:700px; background:url('/img/m_visual01.jpg') center no-repeat; background-size:cover; display:flex; align-items:center; justify-content:center;}
.m1::before{width:100%; height:100%; content:''; display:block; background:rgba(0,0,0,0.2); position:absolute; left:0; top:0;}
.m1 .info_wr{width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; z-index:90;
background:linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,1) 51%, rgba(255,255,255,0.3) 100%); padding:30px 0;}
.m1 .info{position:relative; z-index:91; display:flex; justify-content:space-between; max-width:626px; width:100%; color:#0b386a;}
.m1 p.num{font-size:20px;}
.m1 p.name,.m1 p.tel{font-weight:600;font-size:33px;}
.m1 p.name{margin:3px 0 5px; font-weight:800;}
.m1 p.tel{margin-bottom:20px;}
.m1 a.btn{font-size:23px; background:#3188ff; border-color:#3188ff;}
.m1 .logo{padding-right:40px; display:flex; align-items:center;}
.m1 img{height:48px;}

.m2{background:url('/img/m_visual02.jpg') center no-repeat; background-size:cover;}

section.app{background:#2e9eff;}
.app_input{max-width:800px; margin:0 auto; display:flex; flex-wrap:wrap; gap:1%; margin-top:20px;}
.app_input input{height:50px;}
.app_input #name{flex:1;}
.app_input #phone_number{flex:2;}

.m_info{background:url('/img/m_visual03_1.jpg') right no-repeat; background-position:100% 29%;}
.m_info h2{color:#222; text-align:left;}
.m_info .respon_table{padding-right:490px;}
.m_info .respon_table > p span{display:block;}


.m_add{height:900px; background:url('/img/m_add.jpg') center no-repeat; background-size:cover;}

.quick{position:fixed; right:2%; bottom:10%; z-index:99;}
.quick ul li{text-align:center; margin-bottom:24%;}
.quick ul li:last-child{margin-bottom:0;}
.quick ul li span{display:block; margin-top:5px; color:#dedede;}
.quick ul li a{transform : rotate(0);}





@media only screen and (max-width : 1280px) {
	.m1 .logo{padding-right:30px;}

	.m_info{background-position:74% 29%; max-width:735px;}
}



@media only screen and (max-width : 1000px) {
	.m1 .info{flex-wrap:wrap; justify-content:center;}
	.m1 .info .logo{width:100%; text-align:center; border-right:0; padding-right:0; justify-content:center;}
	.m1 .info .txt{width:100%; text-align:center; margin-top:37px;}
	.m1 p.name, .m1 p.tel{font-size:27px;}
	.m1 a.btn{font-size:19px;}
}

@media only screen and (max-width : 800px) {
	.quick{right:unset; left:0; bottom:0; width:100%;}
	.quick ul{width:100%; display:flex; background:#0271e4;}
	.quick ul li{flex:1; margin-bottom:0;}
	.quick ul li a{display:block; height:100%; padding:10px 0;}
	.quick ul li img{height:40px;}

	h2{font-size:22px;}
	#main section{padding:60px 0;}

	.m1{height:auto;}

	.m_info{padding:276px 0 0px !important; background-position:74% 55%;}
	.m_info .respon_table{padding:30px 20px; background:rgba(0,0,0,0.5);}
	.m_info h2{color:#fff;}
	.m_info .respon_table p{color:#fff;}
	.m_info .respon_table > p span{display:inline; color:#fff;}

	.m_add{height:497px;}
}

@media only screen and (max-width : 600px) {

}