@charset "utf-8";
/* CSS Document */

#lower-image {
	background: url(../../images/main_image.jpg) center -150px;
	background-size: cover;
}

#main-contents .map {
	width: 100%;
	height: 400px;
	overflow: hidden;
}

#lower-contents #main-contents section h3 {
	padding-left: 30px;
	color: #000;
}

#main-contents section dl {
	margin-top: 20px;
	font-size: 1.4rem;
}

#main-contents section dl div {

}

#main-contents section dl div + div {
	margin-top: 10px;
}

#main-contents section dt {
	font-weight: bold;
}

#main-contents section dd {
	color: #777;
}

#main-contents section li a {
	color: var(--color-link);
	text-decoration: underline;
}

#main-contents section li a:hover {
	text-decoration: none;
}

.access-method div + div {
	margin-top: 20px;
}

#main-contents #car h3 {
	background: url(../images/icon_car.png) left center no-repeat;
	background-size: 20px 20px;
}

#main-contents #bus h3 {
	background: url(../images/icon_bus.png) left center no-repeat;
	background-size: 20px 20px;
}

#main-contents #bus p {
	margin-bottom: 20px;
}


@media screen and (min-width: 768px) {
	#main-contents .map {
		height: 500px;
	}

	#main-contents section dl div {
		display: flex;
		justify-content: space-between;
	}

	#main-contents section dl div + div {
		margin-top: 0;
	}

	#main-contents section dt {
		width: 70px;
	}
	
	#main-contents section dd {
		width: calc(100% - 70px);
		color: #777;
	}

	#main-contents .access-method {
		display: flex;
		justify-content: space-between;
	}

	#main-contents .access-method #car,
	#main-contents .access-method #bus {
		width: calc(50% - 20px);
	}

	.access-method div + div {
		margin-top: 0;
	}
	
}

@media screen and (min-width: 1280px) {
	#lower-contents #main-contents section h3 {
		margin-bottom: 20px;
		padding: 5px 0 5px 40px;
	}

	#main-contents #car h3 {
		background-size: 30px 30px;
	}
	
	#main-contents #bus h3 {
		background-size: 30px 30px;
	}
}