@charset "UTF-8";
/*----------------------------------------------------
	style_access.css
	アクセスのスタイル
----------------------------------------------------*/

/*----------------------------------------------------
	SP　(599px以下)
----------------------------------------------------*/
/* コンテンツ背景 */
.pageback { background-position: 10px 12%, 96% 50%, 10px 100%; }

/* メインイメージ */
#mainimage_cont {
	background: url(../images/access/bg_mainimage.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

/* 地図エリア */
#maparea_cont{
	width: calc(100% - 60px);
	margin: 0 auto 80px auto;
	position: relative;
}
#maparea_cont::before {
	content: "";
	padding-top: 56.25%;
	display: inline-block;
}
#maparea_cont iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* 案内 */
#about {
	width: calc(100% - 60px);
	margin: 0 auto 80px auto;
}
#about h3 {
	width: 280px;
	height: auto;
	margin: 0 auto 60px auto;
}
#about dl dt {
	width: 20%;padding: 0 0 20px 0;
	font-size: 1.6rem;
	color: #109853;
	display: inline-block;
	vertical-align: middle;
}
#about dl dd {
	width: 78%;
	padding: 0 0 20px 0;
	font-size: 1.6rem;
	color: #707070;
	display: inline-block;
	vertical-align: middle;
}
#about dl dd .tel {
	font-size: 3.0rem;
	color: #da4c8d;
}
#about dl dd .tel a { color: #da4c8d; }
#about dl dd .day {
	margin: 0 10px 0 0;
	font-weight: 500;
}

/* 交通手段 */
#way {
	width: 100%;
	margin: 0 0 100px 0;
	padding: 60px 0;
	background: rgba(250, 239, 208, 0.2);
}
#way .box {
	width: calc(100% - 60px);
	margin: 0 auto;
}
#way .box dl {
	width: 100%;
	margin: 0 0 60px 0;
	text-align: center;
}
#way .box dl:last-child { margin: 0; }
#way .box dl dt {
	padding: 0 0 20px 0;
	font-size: 2.4rem;
}
#way .box dl dd {
	font-size: 1.4rem;
	color: #707070;
}



/*----------------------------------------------------
	Tablet　(600px 〜 )
----------------------------------------------------*/
@media screen and (min-width: 600px) {
	
}


/*----------------------------------------------------
	※850pxからレイアウト変更
----------------------------------------------------*/
@media screen and (min-width: 850px) {
	/* 案内 */
	#about .box {
		display: flex;
		flex-shrink: 0;
	}
	#about dl { width: 50%; }
	#about dl:nth-child(1) { padding: 0 10px 0 0; }
	#about dl:nth-child(2) { padding: 0 0 0 10px; }
	
	/* 交通手段 */
	#way .box {
		display: flex;
		flex-shrink: 0;
	}
	#way .box dl {
		width: calc(100% / 3);
		margin: 0;
	}
	#way dl:nth-child(1) { padding: 0 10px 0 0; }
	#way dl:nth-child(2) { padding: 0 10px; }
	#way dl:nth-child(3) { padding: 0 0 0 10px; }
}


/*----------------------------------------------------
	PC　(1200px 〜 )
----------------------------------------------------*/
@media screen and (min-width: 1200px) {
	/* コンテンツ背景 */
	.pageback { background-position: 10px 23%, 96% 70%, 10px 90%; }
	
	/* 地図エリア */
	#maparea_cont{
		width: 1200px;
		margin: 0 auto 140px auto;
	}
	
	/* 案内 */
	#about {
		width: 1200px;
		margin: 0 auto 140px auto;
	}
	
	/* 交通手段 */
	#way { margin: 0 0 140px 0; }
	#way .box { width: 1200px;align-items: flex-start; }
	#way dl:nth-child(1) { padding: 0 15px 0 0; }
	#way dl:nth-child(2) { padding: 0 15px; }
	#way dl:nth-child(3) { padding: 0 0 0 15px; }
}