@charset "utf-8";
/* ===================================================
	access CSS
====================================================== */
/* ---------------------------------------------------
#map_col
------------------------------------------------------ */
#map_col{ margin-bottom: 100px;}
#map_col iframe{ width: 100%; height: 560px;}

@media screen and (max-width: 600px) {
	#map_col{ margin-bottom: 10vw;}
	#map_col iframe{ height: 70vw;}
}


/* ---------------------------------------------------
sec01
------------------------------------------------------ */
#sec01{
	margin-bottom: 100px;
	display: flex; justify-content: space-between;
}
#sec01 .photo_block{ width: calc(94% - 545px); height: 360px;}
#sec01 .txt_block{ width: 545px;}
#sec01 h2{ margin-bottom: 20px; font-size: 24px;}
#sec01 h2 span{ margin-right: 20px; font-size: 18px;}
#sec01 dl{
	display: flex; align-items: center;
	border-bottom: 1px solid #ccc;
}
#sec01 dt,
#sec01 dd{ padding: 15px 20px; box-sizing: border-box;}
#sec01 dt{ width: 170px;}
#sec01 dd{ width: calc(100% - 170px);}

#sec01 p{ margin-top: 25px; text-align: right;}
#sec01 a { padding-left: 30px; position: relative;}
#sec01 a::before{
	display: block; content: ''; width: 18px; height: 26px;
	top: -5px; left: 0; position: absolute;
	background: url(../../access/img/ico_pin.svg) no-repeat;
	background-size: auto;
}

@media screen and (hover:hover) and (min-width: 601px) {
	#sec01 a:hover span { border-bottom: 1px solid #000;}
}
@media screen and (max-width: 600px) {
	#sec01{ margin-bottom: 10vw; flex-direction: column;}
	#sec01 .photo_block{ margin-bottom: 7vw; width: 100%; height: 60vw;}
	#sec01 .txt_block{ width: 100%;}
	#sec01 h2{ margin-bottom: 5vw; text-align: center;}
	#sec01 h2 span{ margin-right: 10px; font-size: 16px;}
	#sec01 dl{ flex-direction: column;}
	#sec01 dt{ padding: 3vw 3vw 0; width: 100%;}
	#sec01 dd{ padding: 2vw 3vw 3vw; width: 100%}
	#sec01 p{ margin-top: 25px;}
}


/* ---------------------------------------------------
sec02-sec04
------------------------------------------------------ */
.cmn_acc{ padding: 90px 0 105px;}

.cmn_acc .cmn_outline dt{ font-size: 18px;}
.cmn_acc .cmn_outline dd{ font-size: 16px;}



.cmn_acc .link {
	margin-top: 45px;
	display: flex;
}
.cmn_acc .link ul {
	width: 48.5%; padding-right: 10%;
	display: flex; align-items: center; justify-content: space-between;
}
.cmn_acc .link li + li { margin-left: 10%;}

.cmn_acc .link .ex_link{ font-size: 14px;	display: flex; align-items: center;}
.cmn_acc .link .ex_link::after {
	display: block; content: ''; margin-left: 1.5em; width: 17px; height: 17px;
	background: url(../../access/img/ico_link.svg)no-repeat center/contain;
	vertical-align: sub;
}

.cmn_acc .link > a { height: 80px; box-sizing: border-box; }
.cmn_acc .link a { transition: opacity .75s ease; }

.cmn_acc .link .map {
	display: flex; justify-content: center; align-items: center;
	width: 450px; background: #e0d2b1; border-radius: 40px; max-width: 37.5%;
	font-size: 18px; line-height: 1.3; transition: background-color .8s, color .5s;
}
.cmn_acc .link .map::before {
	display: block; content: '';
	width: 16px; height: 20px; margin-right: 20px;
	background: url(../../access/img/ico_pin.svg) no-repeat;
	background-size: contain;
}

@media screen and (max-width: 600px) {
	.cmn_acc{ padding: 10vw 0;}
	.cmn_acc .link { margin-top: 5vw; flex-direction: column;}
	.cmn_acc .link ul {
		margin-bottom: 5vw; width: 100%; padding-right: 0;
		flex-direction: column;
	}
	.cmn_acc .link li + li { margin: 5vw 0 0;}
	.cmn_acc .link .map { width: 100%; max-width: 100%;}
}