@charset "utf-8";

/*----------------------------------------------------------------
 /category/ under
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
/*-----------------------------------------------------
 map
-----------------------------------------------------*/
#map{ background: var(--base-color); }
#map .container{ padding: 30px 0 0 0; }
@media screen and (min-width: 768px) {
#map .container{ padding: 50px 0 0 0; }
}

/* map
-----------------------------------------------------*/
#map .map{
	text-align			: right;
	margin				: 0 0 30px 0;
}
@media screen and (min-width: 768px) {
#map .map{ margin: 0 0 70px 0; }
}

#map .map img{ margin: 0 0 8px 0; }
#map .map .btn{
	display				: inline-block;
	border				: 1px solid transparent;
	border-radius		: 20px;
	padding				: 12px 20px;
	background			: var(--main-color);
	text-decoration		: none;
	font-size			: 1.2rem;
	line-height			: 1;
	font-weight			: bold;
	color				: #FFF;
}
#map .map .btn:hover{
	background			: transparent;
	border				: 1px solid var(--main-color);
	color				: var(--main-color);
}
@media screen and (min-width: 768px) {
#map .map .btn{ font-size: 1.4rem; }
}

/*-----------------------------------------------------
 access
-----------------------------------------------------*/
#access{ background: var(--base-color); }
#access .container{ padding: 30px 0 50px 0 }
@media screen and (min-width: 768px) {
#access .container{ padding: 60px 0 100px 0; }
}

/* access-list
-----------------------------------------------------*/
#access .access-list{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: column;
}
#access .access-list li{
	margin				: 0 0 15px 0;
	border-radius		: 10px;
	padding				: 20px;
	background			: #f6f6ee;
}
#access .access-list li a{
	text-decoration		: none;
	color				: var(--main-color);
}
#access .access-list li dl dt{
	margin				: 0 0 10px 0;
	text-align			: center;
	font-size			: 1.8rem;
	font-weight			: bold;
}
#access .access-list li dl dd{ word-break: break-all; }
#access .access-list li dl dd:first-of-type{
	margin				: 0 0 20px 0;
	font-size			: 1.5rem;
}

@media screen and (min-width: 768px) {
#access .access-list{
	flex-direction		: row;
	justify-content		: space-between;
	align-items			: flex-start;
}
#access .access-list li{
	flex				: 0 0 48.5%;
	padding				: 30px;
}
#access .access-list li dl dt{ font-size: 2.6rem; }
#access .access-list li dl dd{ font-size: 1.4rem; }
#access .access-list li dl dd:first-of-type{ font-size: 1.6rem; }
}