@charset "UTF-8";


.area1{
	background-image: url(/img/index/1_1.svg);
	background-size: contain;
	background-position: 50% 0;
	background-repeat: no-repeat;
	height: 105vw;
	margin: 0px 0 -33vw;
}
.area1 .text{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3.6rem;
	letter-spacing: 0.26em;
	color: #fff;
	height: 60vw;
	/* margin: 0 0 10vw; */
}
.area1_2{
	display: flex;
	/* justify-content: space-between; */
	align-items: flex-start;
}
.area1_2 .h3_2{
	font-size: 3.2rem;
	letter-spacing: 0.1em;
	writing-mode: vertical-rl;
	text-align: right;
	margin: 0 0 0 10rem;
}
.area1_2 .left{
	margin: 0 50px 0 0;
}

.img1_2{
	width: 68.2rem;
	margin: 0 0 -53rem -26.5rem;
	max-width: none;
}
.img1_3{
	width: 418px;
	max-width: none;
	margin: 110px -50px 0 0px;
}
@media (max-width: 1200px) {
	.img1_3{
		width: 34vw;
		margin: 110px -5vw 0 0px;
	}
}
@media (max-width: 1000px) {
	.img1_3{
		margin: 110px -2vw 0 0px;
	}
}
@media (max-width: 900px) {
	.area1_2{
		flex-direction: column;
		align-items: center;
	}
	.area1_2 .left{
		margin: 0;
	}
	.img1_3{
		width: 55vw;
		margin: 20px 0 15vw 0;
	}
}
@media (max-width: 600px) {
	.area1{
		background-size: cover;
		background-position: 55% 50%;
		height: 150vw;
		margin: 0 0 -30vw;
	}
	.area1 .text{
		font-size: 4.5rem;
		height: 100vw;
	}
	.area1_2 .left p{
		font-size: 3.3vmin;
	}
	.img1_3{
		width: 72vw;
	}
}


.area2 h3{
	font-size: 8.8rem;
	margin: -10px 0 10px;
}

.img2_p,
.img2w_p{
	vertical-align: -0.4rem;
	width: 8rem;
	margin: 0 0.3rem;
}
.area2 .img2{
	width: 22.2rem;
}

.area3_1{
	background-image: url(/img/index/3.jpg);
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
	color: #fff;
	padding: 10rem 0 12rem;
	margin: 6rem 0 -7rem;
}

.area4{
	text-align: center;
	background-color: #000;
	padding: 9rem 0 1px;
	margin: 100px 0 0;
	color: #fff;
}
.area4 h3,
.area5 h3{
	display: inline-block;
	line-height: 1.1;
	padding: 0 13px 10px;
	border-bottom: 16px solid #0967f5;
}
.area4 h3{
	color: #fff;
}
.area4 h3 img,
.area5 h3 img{
	width: 26.6rem;
	vertical-align: -2rem;
	margin: 0 1.3rem 0 0;
}
.img6{
/*	width: 100%;*/
}

.access{
	margin: 7rem 0 5rem;
}
.access h3{
	font-size: 4rem;
	line-height: 1;
	border: 0;
	margin: 0 0;
	padding: 0;
}
.access p{
	font-size: 1.6rem;
	margin: 0 0;
}

#map{
	height: 300px;
	margin: 13px 0 30px;
}
.leaflet-tile-pane img{
	filter: grayscale(100%);
}
.leaflet-bottom.leaflet-right{
	display: none;
}
#map .leaflet-interactive{
	cursor: default;
}

.map_link{
	display: inline-flex;
	justify-content: space-between;
}
.map_link p{
	text-align: left;
	line-height: 1.3;
	margin: 0 10px 0 0;
}
.map_link a.gmap_link{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #585352;
	padding: 0 30px;
}
.map_link a.gmap_link:hover{
	background-color: #0174be;
}
.img_t2{
	width: 11.3rem;
}

.area5{
	text-align: center;
	padding: 9rem 0 3rem;
	margin: 10rem 0 0;
}
.area5 h3{
	margin: 0;
}
.area5 p{
	font-size: 1.6rem;
	margin: 0 0 5px;
}

.area6{
	color: #fff;
	background-color: #0967f5;
	padding: 10rem 0;
}
.area6 h3{
	justify-content: center;
	font-size: 3rem;
	margin: 0 0 10px;
}
.area6 a{
	text-decoration: none;
}
.area6 a:hover{
	text-decoration: underline;
}

table.type1{
	width: 625px;
	max-width: 100%;
	border-top: 1px solid #fff;
	border-collapse: collapse;
	margin: 0 auto;
}
table.type1 th,
table.type1 td{
	text-align: left;
	font-size: 1.6rem;
	font-weight: normal;
	padding: 1.5rem;
	border-bottom: 1px solid #fff;
}


@media (max-width: 800px) {
	.access p,
	.area5 p,
	table.type1 th, table.type1 td{
		font-size: 1.9rem;
	}

	.access h3,
	.area6 h3{
		font-size: 4.5rem;
	}
}

@media (max-width: 600px) {
	.area4 h3, .area5 h3{
		padding: 0 1vmin 1vmin;
		border-bottom: 2vmin solid #0967f5;
	}
	.access h3{
		padding: 0;
		border: 0;
	}
	table.type1{
		width: 100%;
	}
}


body .m-modal .m-modal-content a.m-wa,
body .m-modal .m-modal-content a.m-wa:hover,
body .m-modal .m-modal-content a.m-wa:focus,
body .m-modal .m-modal-content a.m-skype,
body .m-modal .m-modal-content a.m-skype:hover,
body .m-modal .m-modal-content a.m-skype:focus,
body .m-modal .m-modal-content a.m-gmail,
body .m-modal .m-modal-content a.m-gmail:hover,
body .m-modal .m-modal-content a.m-gmail:focus,
body .m-modal .m-modal-content a.m-outlook,
body .m-modal .m-modal-content a.m-outlook:hover,
body .m-modal .m-modal-content a.m-outlook:focus,
body .m-modal .m-modal-content a.m-yahoo,
body .m-modal .m-modal-content a.m-yahoo:hover,
body .m-modal .m-modal-content a.m-yahoo:focus{
	color: transparent;
	padding: 10px 30px 10px 0;
}
body .m-modal .m-modal-content a.m-wa span{
	color: #067466;
}
body .m-modal .m-modal-content a.m-skype span{
	color: #076d92;
}
body .m-modal .m-modal-content a.m-gmail span{
	color: #c0372a;
}
body .m-modal .m-modal-content a.m-outlook span{
	color: #0967aa;
}
body .m-modal .m-modal-content a.m-yahoo span{
	color: #4a00a0;
}
body .m-modal .m-modal-content a.m-wa span:after,
body .m-modal .m-modal-content a.m-skype span:after,
body .m-modal .m-modal-content a.m-gmail span:after,
body .m-modal .m-modal-content a.m-outlook span:after,
body .m-modal .m-modal-content a.m-yahoo span:after{
	content: " で開く";
}

body .m-modal .m-modal-content a.m-default span{
	display: none;
}
body .m-modal .m-modal-content a.m-default:after{
	content: " で開く";
}