@charset "UTF-8";

/* intro */
#intro{
	position: relative;
	margin: 0 auto;
	padding: 0 0 80px 0;
	max-width: 977px;
}
#intro h2{
	position: relative;
	margin:  0 auto;
	width:100%;
	max-width: 580px;
}
#intro .mainImg{
	position: relative;
	margin: 30px auto 1.8em auto;
	width: calc(100% - 20px);
	max-width: 977px;
}
#intro h4{
	position: relative;
	margin: 0 auto 10px auto;
	width: calc(100% - 20px);
	color: #2a8fc0;
	font-size: min(4.2vw, 1.8rem);
	text-align: center;
}
#intro p{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 25px);
	max-width: 960px;
	padding-bottom: 1.8em;
}
#intro a{color: #17191c;}
#intro a:hover{color: #2a8fc0;text-decoration: none;transition: 0.4s ease-in-out;}

#intro .a-center{margin: 20px auto 0 auto;}
#intro .a-center a{color: #ffffff;font-size: 110%;}
#intro .a-center a.button{width: calc(100% - 80px);}

@media screen and (min-width: 769px) {

	/* intro */
	#intro {padding: 0 0 150px 0;}
	#intro .mainImg{width: 100%; margin: 50px auto;}
	#intro h4{
		margin: 1em auto 30px auto;
		font-size: min(2.15vw, 2rem);
	}
	#intro p{width: 100%; }
	
	#intro .a-center{margin: 30px auto 0 auto;}
	#intro .a-center a.button{padding: 18px 0;font-size: 140%;	background-size: auto 44%;}
}

@media screen and (min-width: 769px) and (max-width: 1100px) {
	#intro {max-width: calc(100% - 100px);}
}