@charset "utf-8";

.googlemap-bw {
	margin: 0 auto;
	position: relative;
	width: 70%;
	height: 0;
	padding-top: 42%; /* 比率を5:3に固定 */
}
.googlemap-bw iframe {
	-webkit-filter: grayscale(50%);
	-moz-filter: grayscale(50%);
	-ms-filter: grayscale(50%);
	-o-filter: grayscale(50%);
	filter: grayscale(50%);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

main dl {
	margin: 30px 80px 0;
}

main dl dt {
	margin: 15px 0;
	position: relative;
	padding-left: 50px;
	font-weight: 900;
	line-height: 2;
	float: left;
	clear: left;
}

main dl dd {
	padding: 15px 0;
	margin-left: 7.5em;
	line-height: 2;
}

main dl div.access {
	margin: 10px 0 0;
}
main dl div.tel dt {
	margin: 25px 0 15px;
}
main dl div.tel dd {
	padding: 25px 0 15px;
}

/*仕切り線*/
main dl div.access,
main dl div.tel {
	position: relative;
}
main dl div.access:before,
main dl div.tel:before {
	content: "";
	border-top: 2px solid #999;
	margin-right: 48px;
	margin-left: 10px;
	width: calc(100%-58px);
	display: block;
}
main dl div.access:after,
main dl div.tel:after {
	content: '';
	display: inline-block;
	background-image: url(../images/icon_scissors.png);
	position: absolute;
	top: -8px;
	right: 30px;
	width: 32px;
	height: 18px;
}

main dl div.access dd {
	margin-left: 0;
}
main dl div.access dd.access {
	padding: 15px 0 0;
}
main dl div.access dd.access dl {
	margin: 30px 5px 0 35px;
}
main dl div.access dd.access dl dt {
	float: none;
	margin: 0 0;
}

main dl div.access dd.access dl dd {
	line-height: 1.5;
}

main dl div.access dd.access dl dd.walk-image {
	padding: 0 0;
}

main dl div.access dd.access dl dd p {
	display: inline-block;
}
main dl div.access dd.access dl dd p+p {
	position: relative;
	margin-top: 10px;
	margin-left: 40px;
}

/*矢印*/
main dl div.access dd dl dd p+p:before {
	position: absolute;
	top: 50%;
	left: -30px;
	content: '';
	border: 20px solid transparent;
	border-left: 20px solid #555;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

main dl div.access dd dl .car {
	margin: 30px 0 0;
}

/*アイコン*/
main dl dt:before {
	content: '';
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	position: absolute;
	left: 0px;
	top: 1px;
	/*width: 23px height: 31px*/
	width: 40px;
	height: 31px;
}

main dl dt.address:before {
	background-image: url(../images/access/icon_address.png);
}

main dl dt.access:before {
	background-image: url(../images/access/icon_access.png);
}

main dl dt.walk:before {
	background-image: url(../images/access/icon_walk.png);
}

main dl dt.car:before {
	background-image: url(../images/access/icon_car.png);
}

main dl dt.tel:before {
	background-image: url(../images/access/icon_tel.png);
}

main dl dt.clock:before {
	background-image: url(../images/access/icon_clock.png);
}

main dl dt.close:before {
	background-image: url(../images/access/icon_close.png);
}

/*-----SP版の設定-------*/

@media screen and (max-width: 767px){

	.googlemap-bw {
		width: 90%;
		padding-top: 54%; /* 比率を5:3に固定 */
	}
	
	main dl {
		margin-top: 30px;
		margin: 0 10px;
	}
	main dl dt {
		padding-left: 40px;
	}
	
	/*アイコン*/
	main dl dt:before {
		width: 30px;
		height: 25px;
	}
	
	main dl div.access dd.access dl {
		margin: 30px 5px 0 20px;
	}
	
	main dl dd.access dd.access {
		padding: 15px 0 0;
	}
	
	main dl div.access dd.access dl dd p {
		display: block;
		text-align: center;
	}

	main dl div.access dd.access dl dd p+p {
		margin-left: 0px;
		text-align: center;
		margin-top: 30px;
	}
	
	main dl div.access dd.access dl dd p+p:before {
		position: absolute;
		top: -25px;
		left: 50%;
		content: '';
		border: 20px solid transparent;
		border-top: 20px solid #555;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
}