@charset "utf-8";
/* CSS Document */

/*==============================*/
/* 駐輪場を探す */
/*==============================*/
dl.facilityNavi{
	padding: 32px;
	background: #EFF9F5 url("/common/img/share/bg-texture.png");
	border-radius: 24px;
}
dl.facilityNavi dt{
	margin-bottom: 24px;
	color: #1F5E54;
	font-size: 23px;
	font-weight: 600;
	text-align: center;
	line-height: 1.3em;
}

dl.facilityNavi dd ul{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
dl.facilityNavi dd ul li{
	width: calc(calc(100% - 16px * 3) / 4);
}
dl.facilityNavi dd ul li a{
	position: relative;
	display: block;
	padding: 16px 14px;
	background: #fff;
	border-radius: 5px;
	box-shadow: 1px 2px 6px 0px rgba(153,153,153,0.2);
	color: #87B32E;
	font-size: 15px;
}
dl.facilityNavi dd ul li a::before{
	position: absolute; top: 50%; right: 10px;
	content: "";
	width: 22px;
	height: 22px;
	background: #AFD268;
	border-radius: 50%;
	margin-top: -11px;
}
dl.facilityNavi dd ul li a::after{
	position: absolute; top: 50%; right: 20px;
	content: "";
	width: 6px;
	height: 6px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: -3px;
}

dl.facilityNavi dd ul li.active a,
dl.facilityNavi dd ul li a:hover{
	background: #AFD268;
	color: #fff;
}
dl.facilityNavi dd ul li.active a::before,
dl.facilityNavi dd ul li a:hover::before{ background: #fff;}

dl.facilityNavi dd ul li.active a::after,
dl.facilityNavi dd ul li a:hover::after{
	border-top: 1px solid #87B32E;
	border-right: 1px solid #87B32E;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		dl.facilityNavi{ padding: 28px;}
		dl.facilityNavi dd ul{ gap: 12px;}
		dl.facilityNavi dd ul li{ width: calc(calc(100% - 12px * 2) / 3);}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		dl.facilityNavi{
			width: calc(100% + 48px);
			transform: translateX(-24px);
			padding: 24px;
			border-radius: 0;
		}
		dl.facilityNavi dt{
			margin-bottom: 16px;
			font-size: 21px;
		}
		dl.facilityNavi dd ul{ gap: 8px;}
		dl.facilityNavi dd ul li{ width: calc(calc(100% - 8px * 1) / 2);}
		dl.facilityNavi dd ul li a{
			padding: 16px 12px;
			font-size: 14px;
		}
		dl.facilityNavi dd ul li a::before{
			position: absolute; top: 50%; right: 9px;
			width: 20px;
			height: 20px;
			margin-top: -10px;
		}
		dl.facilityNavi dd ul li a::after{
			position: absolute; top: 50%; right: 18px;
			width: 5px;
			height: 5px;
			margin-top: -3px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 375px) {
		dl.facilityNavi dd ul{
			flex-direction: column;
		}
		dl.facilityNavi dd ul li{ width: 100%;}
	}


/*==============================*/
/* table */
/*==============================*/
div.facility-googleMap{
	margin-bottom: 40px;
}

	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.facility-googleMap{
			margin-bottom: 28px;
		}
		div.facility-googleMap iframe{
			height: 240px;
		}
	}


/*==============================*/
/* table */
/*==============================*/

/*-- thead
------------------------- */
table.table-facilityList thead th {
	font-size: 17px;
}

/*-- tbody
------------------------- */
table.table-facilityList tbody th{
	font-size: 16px;
}
table.table-facilityList tbody td,
table.table-facilityList tbody td a{ font-size: 14px;}

table.table-facilityList tbody td{
	padding: 6px 8px;
}
table.table-facilityList tbody td a{
	display: inline-block;
	color: #1C9FF2;
}
table.table-facilityList tbody td a:hover{ text-decoration: underline;}

table.table-facilityList tbody tr td:nth-child(3),
table.table-facilityList tbody tr td:nth-child(4),
table.table-facilityList tbody tr td:nth-child(5){ text-align: center;}

	/* ======= SP =======*/
	@media (max-width: 767px) {
		table.table-facilityList{
			display: block; 
			width: auto; 
			position: relative; 
			overflow-x: scroll; 
			white-space: nowrap; 
		}
		table.table-facilityList::-webkit-scrollbar { height: 5px; }
		table.table-facilityList::-webkit-scrollbar-track { border-radius: 5px; background: #eee; }
		table.table-facilityList::-webkit-scrollbar-thumb { border-radius: 5px; background: #666; }
	}

/*==============================*/
/* List */
/*==============================*/
div.facilityList{ counter-reset: list;}

/*-- 
------------------------- */
div.facilityList > dl:not(:last-child){ margin-bottom: 40px;}

div.facilityList > dl > dt{
	position: relative;
	margin-bottom: 20px;
	padding-left: 32px;
	color: #1F5E54;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3em;
}
div.facilityList > dl > dt::before{
	position: absolute; top: 0; left: 0;
	counter-increment: list;
	content: counter(list) ".";
}
div.facilityList > dl > dd{
	padding-left: 32px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.facilityList > dl:not(:last-child){ margin-bottom: 40px;}

		div.facilityList > dl > dt{
			margin-bottom: 20px;
			padding-left: 24px;
			font-size: 21px;
		}
		div.facilityList > dl > dd{
			padding-left: 24px;
		}
	}

/*-- 
------------------------- */
div.facilityList dl dd ul li{
	font-size: 15px;
	list-style: disc inside!important;
	padding-left: 1.5em; text-indent: -1.5em;
}
div.facilityList dl dd p{
	font-size: 15px;
}

div.facilityList > dl > dd > dl > dt{
	margin-bottom: 12px;
	color: #000;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3em;
}
div.facilityList > dl > dd > dl > dd{
	padding-left: 24px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}


/*-- 補足リスト
------------------------- */
div.facilityList dl dd div.supplementaryList dl{
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
div.facilityList dl dd div.supplementaryList dl:not(:last-child){ margin-bottom: 10px;}
div.facilityList dl dd div.supplementaryList dl dt{
	width: 68px;
	flex: 0 0 68px; 
	padding: 1px 0 2px 0;
	background: #EFF9F5;
	color: #2B9987;
	font-size: 14px;
	text-align: center;
	border-radius: 3px;
	line-height: 1.414em;
}
div.facilityList dl dd div.supplementaryList dl dd{
	flex: 1;
	padding-top: 1px;
	font-size: 14px;
	line-height: 1.618em;
}
div.facilityList dl dd div.supplementaryList dl dd p{
	font-size: 14px;
	line-height: 1.618em;
}

div.facilityList > dl > dd > dl:not(:last-child){ margin-bottom: 26px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}


/*-- 補足ボックス
------------------------- */
div.facilityList dl dd div.supplementaryBox dl{
	position: relative;
}
div.facilityList dl dd div.supplementaryBox dl:not(:last-child){ margin-bottom: 26px;}
div.facilityList dl dd div.supplementaryBox dl dt{
	position: absolute; top: -10px; left: 20px;
	margin-bottom: 12px;
	padding: 0 14px;
	background: #fff;
	color: #000;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3em;
}
div.facilityList dl dd div.supplementaryBox dl dd{
	padding: 26px 32px 20px 32px;
	border: 1px solid #ccc;
	border-radius: 5px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}
	

/*==============================*/
/* 注意事項 */
/*==============================*/
div.precautionsBox{
	display: flex;
	align-items: center;
	padding: 28px 24px 28px 0px;
	background: #EFF9F5 url("/common/img/share/bg-texture.png");
	border-radius: 20px;
}

div.precautionsBox h4{
	width: 200px;
	flex: 0 0 200px;
	color: #87B32E;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
}
div.precautionsBox div{
	flex: 1;
}
div.precautionsBox div ul li{
	font-size: 15px;
	list-style: disc inside!important;
	line-height: 1.5em;
	padding-left: 1.42em;
	text-indent: -1.42em;
}
div.precautionsBox div ul li:not(:last-child){ margin-bottom: 8px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.precautionsBox{
			flex-direction: column;
			padding: 26px 28px 32px 28px;
			border-radius: 12px;
		}

		div.precautionsBox h4{
			width: 100%;
			margin-bottom: 12px;
			flex: none;
			font-size: 21px;
		}
		div.precautionsBox div{
			flex: none;
			width: 100%;
		}
		div.precautionsBox div ul li{
			font-size: 15px;
		}
		div.precautionsBox div ul li:not(:last-child){ margin-bottom: 12px;}
	}



/*==============================*/
/* 駐輪場案内 */
/*==============================*/
div.parkingInfo:not(:last-child){ margin-bottom: 64px;}

	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.parkingInfo{
			padding-top: 48px;
			border-top: 1px solid #ccc;
		}
		div.parkingInfo:not(:last-child){ margin-bottom: 48px;}
	}


/*---------------------------------
   コンテンツ枠
---------------------------------*/
div.parkingInfo div.parkingInfo-content{
	display: flex;
	gap: 40px;
}
	 /* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.parkingInfo div.parkingInfo-content{
			flex-direction: column;
			gap: 28px;
		}
	}

/*-- 画像
------------------------- */
div.parkingInfo div.parkingInfo-content figure{
	display: none;
	flex: 0 0 30%;
	padding-top: 44px;
	border-top: 1px solid #284F68;
}
 	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.parkingInfo div.parkingInfo-content figure{
			flex: none;
			width: 100%;
			padding-top: 0px;
			border-top: none;
		}
	}

/*-- コンテンツ
------------------------- */
div.parkingInfo div.parkingInfo-content > div{
	flex: 1 1 70%;
	min-width: 0;
	padding-top: 44px;
	border-top: 1px solid #ccc;
}

/*-- title -- */
div.parkingInfo div.parkingInfo-content h4{
	margin-bottom: 28px;
	color: #1F5E54;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.3em;
}

/*-- dl -- */
div.parkingInfo div.parkingInfo-content dl{
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
div.parkingInfo div.parkingInfo-content dl:not(:last-child){ margin-bottom: 14px;}
div.parkingInfo div.parkingInfo-content dl dt{
	width: 112px;
	background: #EFF9F5;
	color: #2B9987;
	font-size: 14px;
	text-align: center;
	border-radius: 5px;
}
div.parkingInfo div.parkingInfo-content dl dd{
	flex: 1;
	font-size: 14px;
	line-height: 1.618em;
}
div.parkingInfo div.parkingInfo-content dl dd p,
div.parkingInfo div.parkingInfo-content dl dd a{
	font-size: 14px;
	line-height: 1.618em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.parkingInfo div.parkingInfo-content > div{
			flex: none;
			width: 100%;
			padding-top: 0px;
			border-top: none;
		}

		/*-- title -- */
		div.parkingInfo div.parkingInfo-content h4{
			margin-bottom: 24px;
			font-size: 22px;
		}

		/*-- dl -- */
		div.parkingInfo div.parkingInfo-content dl{
			display: flex;
			align-items: flex-start;
			gap: 14px;
		}
		div.parkingInfo div.parkingInfo-content dl:not(:last-child){ margin-bottom: 14px;}
		div.parkingInfo div.parkingInfo-content dl dd{
			flex: 1;
			font-size: 14px;
			line-height: 1.618em;
		}
	}


/*---------------------------------
   Table
---------------------------------*/
div.parkingInfo table tbody tr td:not(:first-child){
	text-align: right;
}

	/* ======= SP以上 =======*/
	@media (min-width: 768px) {
		div.parkingInfo-table col:nth-child(2){ width: 25%;}
		div.parkingInfo-table col:nth-child(3){ width: 25%;}
		div.parkingInfo-table col:nth-child(4){ width: 25%;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.parkingInfo-table{
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
		}
		div.parkingInfo-table table{
			min-width: 100%;
			width: max-content;
			border-collapse: collapse;
		}

		div.parkingInfo-table th,
		div.parkingInfo-table td{
			padding: 12px;
			box-sizing: border-box;
			white-space: normal;
		}
		div.parkingInfo-table col:nth-child(2){ width: 184px;}
		div.parkingInfo-table col:nth-child(3){ width: 184px;}
		div.parkingInfo-table col:nth-child(4){ width: 184px;}
		
	}


/*==============================*/
/* 走行距離 */
/*==============================*/
div.distance > dl:not(:last-child){ margin-bottom: 28px;}
div.distance > dl > dt{
	position: relative;
	margin-bottom: 10px;
	color: #000;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3em;
}
div.distance > dl > dd dl{
	display: flex;
	gap: 16px;
}
div.distance > dl > dd dl dt{
	width: 79px;
}
div.distance > dl > dd dl dd{
	flex: 1; 
}

/*==============================*/
/* レンタル */
/*==============================*/
div.rentalList{
	counter-reset: list;
}
div.rentalList > dl:not(:last-child){ margin-bottom: 44px;}

div.rentalList > dl > dt{
	position: relative;
	margin-bottom: 22px;
	padding-left: 32px;
	color: #000;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3em;
}
div.rentalList > dl > dt::before{
	position: absolute; top: 0; left: 0;
	counter-increment: list;
	content: counter(list) ".";
}
div.rentalList > dl > dd{
	padding-left: 32px;
}
div.rentalList dl dd ul li{
	font-size: 15px;
	list-style: disc inside!important;
	line-height: 1.5em;
	padding-left: 1.42em;
	text-indent: -1.42em;
}
div.rentalList dl dd ul li:not(:last-child){ margin-bottom: 8px;}

div.rentalList dl dd p{
	font-size: 15px;
}

div.rentalList > dl > dd dl dt{
	margin-bottom: 12px;
	color: #000;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3em;
}
div.rentalList > dl > dd dl:not(:last-child){ margin-bottom: 20px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.rentalList > dl:not(:last-child){ margin-bottom: 40px;}

		div.rentalList > dl > dt{
			margin-bottom: 20px;
			padding-left: 24px;
			font-size: 21px;
		}
		div.rentalList > dl > dd{
			padding-left: 24px;
		}
		div.rentalList dl dd ul li{
			font-size: 15px;
			list-style: disc inside!important;
			line-height: 1.5em;
			padding-left: 1.28em;
			text-indent: -1.28em;
		}
		div.rentalList dl dd ul li:not(:last-child){ margin-bottom: 12px;}
	}