@charset "UTF-8";

.location-map {
	width: 85%;
	height: auto;
	margin: 0 auto 30px;
}

iframe {
	width: 100%;
	height: 395px;
	border: 2px solid blue;
	border-radius: 10px;
}

.location-info {
	width: 85%;
	min-width: 240px;
	margin: 0 auto;
}

.info {
	margin: 0 auto;
}

span {
	display: inline-block;
}

.info th {
	width: 80px;
	text-align: center;
 	padding: 1rem 0;
	border-bottom: 1px solid #c9c2bc;
}

.info td {
	line-height: 1.3;
	padding: 1rem 1rem;
	border-bottom: 1px solid #c9c2bc;
}

.access-note {
	max-width: 420px;
	margin: 35px auto 10px;
	padding-left: 11em;
	text-indent: -11em;
}

.location-img {
	padding: 50px 0;
}

.s-img {
	text-align: center;
}

.s-img img {
	width: 75%;
	filter: saturate(150%);
	border-radius: 10px;
	box-shadow: -7px -7px 5px orange;
}

.car {
	padding-top: 100px;
	text-align: center;
}

.car img{
	width: 70%;
}


@media screen and (min-width: 768px){
	#access {
		font-size: 2.2rem;
	}

	.location {
		display: flex;
		width: 100%;
		justify-content: space-around;
		padding: 0 5%;
	}
	
	.location-map {
		width: 50%;
		margin: initial;
	}

	.location-info {
		display: grid;
		place-content: center;
		place-items: center;
		width: initial;
		margin: initial;
		padding-left: 5%;
	}

	.location-img {
		display: flex;
	}

	.access-note {
		max-width: initial;
	}

	.s-img {
		width: 50%;
	}

	.s-img img {
		width: 80%;
	}

	.car {
		display: flex;
		align-items: flex-end;
		width: 50%;
	}
	
	.car img {
		width: 90%;
		margin: 0 auto;
	}
}


@media screen and (min-width: 1232px){
	.info,
	.access-note {
		font-size: 1.2rem;
	}

	.s-img img {
		width: 65%;
	}

	.car img {
		width: 85%;
	}
}