@charset "utf-8";
/*---------- アクセスページ ----------*/
main.access .mainvl {
    background: url(../img/about-mainvisual.jpg);
}
main.access h2 {
	display: flex;
	align-items: center;
}
/* Google Mapを囲う要素 */
main.access section:nth-of-type(2) .map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 比率を16:9に固定 */
}
/* Google Mapのiframe */
main.access section:nth-of-type(2) .map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* マップ内テキスト */
main.access section:nth-of-type(2) div:last-of-type {
	margin-top: 15px;
}
main.access section:nth-of-type(2) p {
	margin-bottom: 10px;
	font-weight: 500;
}
main.access section:nth-of-type(2) ul {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 0;
}
main.access section:nth-of-type(2) ul li:first-of-type {
	width: 100%;
}
main.access section:nth-of-type(2) ul li:nth-of-type(n + 4) {
	width: 100%;
}
main.access section:nth-of-type(2) ul li:nth-of-type(2)::after {
	content: '／';
    margin: 0 0.30769em;
}
/* 電車と車での行き方共通 */
main.access section .directions {
	display: flex;
	justify-content: space-between;
}
main.access section .directions > div {
    width: 48%;
}
main.access section .directions div dl div {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	justify-content: space-between;
}
main.access section .directions div dl div:last-of-type {
	margin-bottom: 0;
}
main.access section .directions div dl dt {
	width: 25%;
	padding: 5px 0;
	text-align: center;
	color: #fff;
}
main.access section .directions div dl dd {
	width: 72%;
}
main.access section .directions div:last-of-type dl dt {
	width: 50%;
}
main.access section .directions div:last-of-type dl dd {
	width: 45%;
}

/* 電車でお越しの色 */
main.access section .directions > div:first-of-type dl div:first-of-type dt {
	background: #378640;
}
main.access section .directions > div:first-of-type dl div:nth-of-type(2) dt {
	background: #88CA51;
}
main.access section .directions > div:first-of-type dl div:last-of-type dt {
	background: #00A7E4;
}
/* 車でお越しの色 */
main.access section .directions > div:last-of-type dl div:first-of-type dt {
	background: #6212BF;
}
main.access section .directions > div:last-of-type dl div:nth-of-type(2) dt {
	background: #BFB212;
}
main.access section .directions > div:last-of-type dl div:last-of-type dt {
	background: #12BF7C;
}
/* 近隣駐車場 */
main.access section:last-of-type > div {
	display: flex;
	justify-content: space-between;
}
main.access section:last-of-type > div > div{
	width: 31%;
}
main.access section:last-of-type p {
	font-weight: 500;
	margin-top: 15px;
}
main.access section:last-of-type ul {
	margin-top: 5px;
}
main.access section:last-of-type ul li {
	color: #4B4B4B;
}
/* 近隣駐車場map */
main.access section:last-of-type .map {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%; /* 比率を16:9に固定 */
}
main.access section:last-of-type .map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 各h2タイトル装飾 */
main.access h2::before {
    width: 2rem;
    height: 1.9rem;
    margin-right: .3rem;
    content: '';
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
main.access section .directions div:first-of-type h2:before {
	background-image: url(./img/accesss-icon01.svg);
}
main.access section .directions div:last-of-type h2:before {
	background-image: url(./img/accesss-icon02.svg);
}
main.access section:last-of-type h2::before {
	background-image: url(./img/accesss-icon03.svg);
}

@media screen and (max-width: 479px) {
	main.access h2 {
		margin-bottom: 7px;
	}
	main.access section:nth-of-type(2) div:last-of-type {
    	margin-top: 10px;
	}
	main.access section:nth-of-type(2) p {
    	margin-bottom: 3px;
	}
	main.access section .directions {
		flex-direction: column;
		gap: 30px 0;
	}
	main.access section .directions > div {
    	width: 100%;
	}
	main.access section .directions div dl dt {
		width: 29%;
	}
	main.access section .directions div dl dd {
    	width: 67%;
	}
	main.access section .directions div dl div {
		margin-bottom: 10px;
	}
	main.access section:last-of-type > div {
    	flex-direction: column;
		gap: 20px 0;
	}
	main.access section:last-of-type > div > div {
    	width: 100%;
	}
	main.access section:last-of-type p {
    	margin-top: 6px;
	}
	main.access section:last-of-type ul {
    	margin-top: 1px;
	}
}
/*---------- アクセスページ end ----------*/