/* contentsWrap */


/* access */

#access h2 {
	padding-left: 145px;
}

#access>h2:before {
	width: 121px;
	height: 25px;
	background-image: url(../img/guidance/title01.png);
}

.contentsWrap>.title {
	font-size: 30px;
	color: #333;
	margin-bottom: 20px;
}

.contentsWrap .columnWrap {
	width: 100%;
}

.columnWrap .mapBox {
	width: 60%;
	margin-top: 20px;
	height: 640px;
}

.columnWrap .mapBox p {
	text-align: center;
}

.columnWrap .mapBox p>a {
	color: #000;
}

.mapBox .map {
	width: 100%;
	height: 620px;
}

.columnWrap .text {
	width: 40%;
	padding: 25px 0 25px 20px;
}

.columnWrap .text p {
	line-height: 1.7em;
	font-size: 18px;
	margin-bottom: 45px;
}

.columnWrap span {
	color: #87784C;
}

.columnWrap span.title {
	font-size: 30px;
}

.columnWrap span.number {
	font-size: 40px;
	padding: 0 5px;
}


/* vicinity */

.vicinityWrap {
	width: 100%;
}

.vicinityWrap .box {
	border: 1px solid #87784C;
}

.vicinityWrap .box:nth-child(3n) {
	margin: 0 0 30px 0
}

.vicinityWrap img {
	max-width: 100%;
}


/* info */

#info {
	width: 100%;
}

#info .fxwb {
	border-bottom: 1px dotted #000;
}

#info .fxwb:last-child {
	border-bottom: none;
}

#info dt,
#info dd {
	padding: .5em;
}

#info dt {
	width: 19%;
	background: #E5E5E5;
}

#info dd {
	width: 81%;
}


/* PC */

@media screen and (min-width: 980px) {
	/* topImg */
	.topImg {
		width: 1200px;
		height: 250px;
		margin: 0 auto;
		background-image: url(../img/guidance/top.jpg);
	}
	/* vicinity */
	.vicinityWrap {
		margin-bottom: 90px;
	}
	.vicinityWrap .box {
		width: 310px;
		padding: 16px 18px;
		margin: 0 35px 30px 0;
	}
	.vicinityWrap .box p {
		font-size: 20px;
		margin-bottom: 30px;
	}
	.vicinityWrap p.title {
		font-size: 30px;
		margin-bottom: 15px;
	}
	/* info */
	#info {
		margin-bottom: 150px;
	}
	#info .fxwb {
		font-size: 12px;
	}
}


/* SP */

@media screen and (max-width: 980px) {
	/* topImg */
	.topImg {
		width: 100%;
		height: 20.9vw;
		background-image: url(../img/guidance/sp_top.png);
		-webkit-background-size: contain;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 50% 0;
	}
	/* access */
	#access h2 {
		padding-left: 10em;
	}
	#access>h2:before {
		width: 8em;
		height: 2.5em;
	}
	.contentsWrap>.title {
		font-size: 16px;
		margin-bottom: 1em;
	}
	.contentsWrap>p {
		padding: 0 10px;
	}
	.contentsWrap .columnWrap {
		padding: 10px;
	}
	.columnWrap .mapBox {
		width: 100%;
		margin-top: 0;
	}
	.columnWrap .text {
		width: 100%;
		padding: 30px 18px 0 18px;
	}
	.columnWrap .text p {
		font-size: 18px;
		margin-bottom: 1em;
	}
	.columnWrap span.title {
		font-size: 20px;
	}
	.columnWrap span.number {
		font-size: 25px;
	}
	/* vicinity */
	#vicinity {
		margin-bottom: 0;
	}
	.vicinityWrap {
		margin-bottom: 0;
		position: relative;
	}
	.vicinityWrap .box {
		width: 50%;
		padding: 8px 9px;
		margin: 0;
	}
	.vicinityWrap .box p {
		font-size: 10px;
		margin-bottom: 1em;
	}
	.vicinityWrap p.title {
		font-size: 15px;
		margin-bottom: 1em;
	}
	.vicinityWrap img {
		width: 100%;
	}
	.vicinityWrap .prev,
	.vicinityWrap .next {
		z-index: 100;
		position: absolute;
		color: rgba(51, 51, 51, .3);
	}
	.vicinityWrap .prev {
		left: 0;
	}
	.vicinityWrap .next {
		right: 0;
	}
}


/* 縦長の場合 */

@media only screen and (max-width: 980px) and (orientation: portrait) {
	/* access */
	.columnWrap .mapBox {
		height: 28vh;
	}
	.mapBox .map {
		height: 26vh;
	}
	/* vicinity */
	.vicinityWrap .prev,
	.vicinityWrap .next {
		font-size: 60px;
		top: 12%;
		margin-top: -30px;
	}
	#info .fxwb {
		border-bottom: none;
	}
	#info dt,
	#info dd {
		padding: 2px 10px;
	}
	#info dt {
		width: 100%;
		background: #E5E5E5;
	}
	#info dd {
		width: 100%;
	}
}


/* 横長の場合 */

@media only screen and (max-width: 980px) and (orientation: landscape) {
	/* access */
	.columnWrap .mapBox {
		height: 56vh;
	}
	.mapBox .map {
		height: 52vh;
	}
	/* vicinity */
	.vicinityWrap .prev,
	.vicinityWrap .next {
		font-size: 80px;
		top: 10%;
		margin-top: -40px;
	}
	/* info */
	#info dt {
		width: 25%;
	}
	#info dd {
		width: 75%;
	}
}