@charset "UTF-8";
body {
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

#main{text-align: center;}

.img_area{margin-bottom: 50px; position: relative; text-align: center;}
.img_main_pc{display: block;}
.img_main_sp{display: none;}
@media screen and (max-width: 765px) {
	.img_area{margin-bottom: 0px; position: relative; text-align: center;}
	.img_main_pc{display: none;}
	.img_main_sp{display: block;}
	.img_area img{margin: auto;}
	.img_area img:nth-child(2){position: relative; z-index: -1;}
	.img_area img:nth-child(3){width: calc(100% - 40px); margin: auto 20px; position: absolute; top: 100px; }
	.img_area img:nth-child(4){width: 50%; height: auto; position: relative; top:-30px;}
	.img_area img:nth-child(5){width: calc(100% - 40px); margin: auto 20px; height: auto; position: relative; top:-30px;}
}
@media screen and (max-width: 440px) {
	.img_area{margin-bottom: 50px; position: relative; text-align: center;}
	.img_area img:nth-child(4){width: 50%; height: auto; position: relative; top:0px;}
	.img_area img:nth-child(5){width: calc(100% - 40px); margin: auto 20px; height: auto; position: relative; top:0px;}
}

h1{font-size: 4.0em; margin-bottom: 50px; text-align: left;}
h1 span{font-size: 70%; font-weight: normal; display: block; margin-bottom: 10px;}

h1 + p{font-size: 2.6em; line-height: 120%; margin-bottom: 50px; text-align: left;}
h1 + p + ul{display: flex; flex-wrap: wrap; justify-content: space-around; 
	padding-left: 0rem!important; margin-bottom: 100px;}
h1 + p + ul li{width: calc(100% / 3 - 10px); margin: auto 5px; list-style: none;}
h1 + p + ul li p{width: 100%; height: 200px; text-align: center; background: #1e2b68; color: #FFF;
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
font-size: 2.4em; line-height: 120%;}


h1 + p + ul + ul{display: flex; flex-wrap: wrap; justify-content: space-around; 
padding-left: 0rem!important; margin-bottom: 100px;}
h1 + p + ul + ul li{width: calc(100% / 4); list-style: none;}
h1 + p + ul + ul li .img-fluid{width: 90%!important;}

#contact_info{background: #FFF; padding: 50px 15px 200px; border-bottom: 50px solid #E40012;}
#contact_info p{margin-bottom: 30px; font-size: 1.4em;}
#contact_info p br.sp{display: none;}
#contact_info button {padding: 40px 80px; max-width: 600px; width: 100%; font-size: 2.6em;}


@media screen and (max-width: 830px) {
	h1 + p + ul li p{font-size: 2.0em; height: 170px;}
}

@media screen and (max-width: 765px) {
	h1{font-size: 2.6em;}
	h1 + p{font-size: 1.6em;}
	h1 + p + ul{margin-bottom: 50px;}
	h1 + p + ul li p{font-size: 1.5em; height: 140px;}
	
	h1 + p + ul + ul{margin-bottom: 50px;}
	h1 + p + ul + ul li{width: calc(100% / 2);}
	h1 + p + ul + ul li .img-fluid{width: 80%!important;}
	
	#contact_info{padding: 50px 15px 150px; }
	#contact_info button {padding: 20px 40px 30px; max-width: fit-content; width: 100%; font-size: 2.0em;}
}

@media screen and (max-width: 440px) {
	h1{font-size: 2.1em;}
	h1 + p{font-size: 1.3em;}
	h1 + p + ul li p{font-size: 1.2em; height: 140px;}
	
	#contact_info{padding: 20px 15px 100px; }
	#contact_info p{font-size: 1.2em;}
	#contact_info p br.sp{display: block;}

	#contact_info button {padding: 20px 40px 30px; max-width: fit-content; width: 100%; font-size: 1.8em;}
}

@media screen and (max-width: 430px) {
	h1 + p{font-size: 1.1em;}
}
@media screen and (max-width: 400px) {
	h1 span{font-size: 60%; font-weight: normal; display: block; margin-bottom: 10px;}
	h1{font-size: 1.8em;}
	
	h1 + p + ul li p{font-size: 1.0em; height: 140px;}
}