@charset "utf-8";

/* -----------------------------------------------------------------
 modal_parking_open
----------------------------------------------------------------- */
.modal_parking_open {
	cursor:pointer;
}

/* -----------------------------------------------------------------
 modal_parking
----------------------------------------------------------------- */
.modal_parking {
	display:none;
	z-index:1200;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:90%;
	height:90%;
	max-width:700px;
	max-height:500px;
	margin:auto;
	border-radius:.5em;
	background:#fff;
}
.modal_parking >.inner {
	overflow-y: auto;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:5px;
}
.modal_parking >.inner::-webkit-scrollbar {
	width: 8px;
}
.modal_parking >.inner::-webkit-scrollbar-track {
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}
.modal_parking >.inner::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .2);
	border-radius: 10px;
	box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}

.modal_parking >.inner >.ttl {
	padding:.9em;
	border-bottom:#026c9f 1px solid;
	line-height:1;
	text-align:center;
	font-weight:bold;
	font-size:1.5em;
	color:#026c9f;
}

@media screen and (min-width: 768px) {
.modal_parking {
	max-height:600px;
}

.modal_parking >.inner >.ttl {
	padding:.8em;
	font-size:1.66em;
}
}

/*---------- heading ----------*/
.modal_parking .heading {
	display: flex;
	justify-content: center;
	align-items: center;
	margin:1em;
}
.modal_parking .heading .currenttime {
	font-weight:bold;
	font-size:1em;
	color:#000;
}
.modal_parking .heading .currenttime .small {
	margin-left:.1em;
	font-weight:bold;
	font-size:80%;
}
.modal_parking .heading .reload {
	height:2.4em;
	margin-left:.5em;
	padding:0 .7em;
	background:#ff7484;
	box-shadow: 0 1px 0 rgba(178,42,58,1);
	border:none;
	border-radius:1.2em;
	line-height:1.2;
	color:#fff;
}
.modal_parking .heading .reload .ico {
	display:inline-block;
	width:1em;
	height:1em;
	margin-right:0.5em;
}

@media screen and (min-width: 768px) {
.modal_parking .heading .currenttime {
	font-size:1.38em;
}
.modal_parking .heading .reload {
	padding:0 1.5em;
	font-size:.88em;
}
}

/*---------- cont ----------*/
.modal_parking .cont {
	margin:1em 1em 0 1em;
}
.modal_parking .cont .tbl_status {
	width:100%;
}
.modal_parking .cont .tbl_status th,
.modal_parking .cont .tbl_status td {
	vertical-align:middle;
	border:#e5e5e5 1px solid;
	padding:.2em;
	text-align:center;
}
.modal_parking .cont .tbl_status td {
	font-size:1.6em;
	color:#0989e4;
}
.modal_parking .cont .tbl_status td .small {
	font-size:70%;
}
.modal_parking .cont .tbl_status td .full {
	color:#ff7484;
}
.modal_parking .cont .tbl_status .blank {
	border:none;
}
.modal_parking .cont .tbl_status .capacity {
	background:#e4f0f7;
	border:#e4f0f7 1px solid;
	border-right:#fff 1px solid;
	border-bottom:none;
	font-weight:bold;
	font-size:1em;
	color:#026c9f;
}
.modal_parking .cont .tbl_status .capacity + .capacity {
	border-right:#e4f0f7 1px solid;
}
.modal_parking .cont .tbl_status .type {
	background:#76b5d5;
	font-weight:bold;
	font-size:1.14em;
	color:#fff;
}
.modal_parking .cont .ttl_lv3 {
	margin-top:0;
	font-size:1.07em;
	color:#76b5d5;
}
.modal_parking .cont ul.kome {
	margin-top:.1em;
}
/*
.modal_parking .cont .btn_go_map {
}
.modal_parking .cont .btn_go_map a {
	position:relative;
	display:flex;
	justify-content: center;
	align-items: center;
	width:96%;
	margin:1em auto 0;
	padding:.8em 0;
	background:#0989e4;
	box-shadow: 0 2px 0 rgba(10,104,170,1);
	border-radius:2em;
	line-height: 1;
	text-align:center;
	font-size:1.35em;
	color:#fff;
}
.modal_parking .cont .btn_go_map a::before {
	content:"";
	display:block;
	width:1.0em;
	height:1.0em;
	margin-right:.2em;
	background:url(/common/modal.parking/img/parking_pin_ico.svg) no-repeat center center;
	background-size:contain;
}
.modal_parking .cont .btn_go_map a::after {
	content:"";
	display:block;
	width:.7em;
	height:.7em;
	margin-left:.2em;
	background:url(/common/img/arrow_standard_white.svg) no-repeat center center;
	background-size:contain;
}
*/

@media screen and (min-width: 768px) {
.modal_parking .cont {
	margin:1em 2.5em 2em;
}

.modal_parking .cont .tbl_status td {
	font-size:1.83em;
}
.modal_parking .cont .tbl_status .capacity {
	font-size:1.22em;
}
.modal_parking .cont .tbl_status .type {
	font-size:1.22em;
}
.modal_parking .cont .ttl_lv3 {
	font-size:1em;
}
.modal_parking .cont ul.kome {
	font-size:.83em;
}
/*
.modal_parking .cont .btn_go_map a {
	max-width:470px;
	font-size:1.44em;
}
.modal_parking .cont .btn_go_map a::after {
	width:1em;
	height:1em;
	margin-left:.2em;
	background:url(/common/img/arrow_standard_white.svg) no-repeat center center;
	background-size:contain;
}*/
}

/*---------- btn_close ----------*/
.modal_parking .btn_close {
	position:absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top:-2em;
	right:-5%;
	width:4.6em;
	height:4.6em;
	border-radius:50%;
	background:#026c9f;
	cursor:pointer;
}
.modal_parking .btn_close img {
	width:36%;
	height:36%;
}

@media screen and (min-width: 768px) {
.modal_parking .btn_close {
	width:3.86em;
	height:3.8em;
	top:-1.1em;
	right:-1.1em;
}
.modal_parking .btn_close img {
	width:30%;
	height:30%;
}
}


/*---------- parking_head ----------*/
.modal_parking .parking_head .ttl {
	padding: 15px 0;
	border-bottom:#026c9f 1px solid;
	line-height:1;
	text-align:center;
	font-weight:bold;
	font-size: 1.4em;
	color:#026c9f;
}
.modal_parking .parking_head .date {
	font-weight:bold;
	font-size:1.17em;
	color:#000;
  text-align: center;
}
.modal_parking .parking_head .date span {
	font-weight:bold;
  font-size: 0.8em;  
}
@media screen and (min-width: 769px) {
  .modal_parking .parking_head .ttl {
    font-size: 1.7em;
    padding: 25px 0;
  }

}
.modal_parking .parking_head .box_date {
  text-align: center;
  margin:  1em;
}
.modal_parking .parking_head .box_date dt {
  display: inline-block;
}
.modal_parking .parking_head .box_date dd {
  display: inline-block;
  margin: 0 15px;
}

@media screen and (max-width: 768px) {
  .modal_parking .parking_head .box_date dt {
    display: block;
  }
  .modal_parking .parking_head .box_date dd {
    display: block;
    margin: 5px 15px 0 15px;
  }
}


/*---------- btn_map ----------*/
.cmn_btn.btn_map {
  text-align: center;
  margin: 15px 15px 0 15px;
}
.cmn_btn.btn_map a {
  font-size: 1.44em;  
}
.cmn_btn.btn_map a span {
  position: relative;
  padding: 0 0 0 35px;
}
.cmn_btn.btn_map a span::before {
  display: inline-block;
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -16px;  
  width: 23px;
  height: 27px;
	background:url(/common/modal.parking/img/parking_pin_ico.svg) no-repeat center center;
	background-size:cover;
}
@media screen and (min-width: 769px) {
  .cmn_btn.btn_map a:hover span::before {
    background:url(/common/modal.parking/img/parking_pin_ico_blue.svg) no-repeat center center;
    background-size:contain;
  }
}
@media screen and (max-width: 768px) {
  .cmn_btn.btn_map a {
    padding: 15px 25px 15px 15px;
    font-size: 1.2em;  
    width: 100%;
  }
  .cmn_btn.btn_map span {
    padding: 0 0 0 25px;
  }
  .cmn_btn.btn_map span::before {
    margin-top: -11px;  
    width: 18px;
    height: 21px;
  }
}


/*---------- btn reload ----------*/
.modal_parking .reload  {
  background-color: #fb7383;
  border: solid 1px #fb7383;
  box-shadow: 0 3px 0 rgba(255,210,215,1);
  font-size: .88em;
  border-radius: 1.2em;
  line-height: 1.2;
  color: #fff;
  padding: 7px 18px 7px 33px;
  position:relative;
	transition:all .3s ease;
}
.modal_parking .reload::before {
  display: inline-block;
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 15px;
  height: 16px;
  margin-top: -9px;
  background:url(/common/modal.parking/img/parking_reload.svg) no-repeat center center;
  background-size:contain;
}
@media screen and (min-width: 769px) {
  .modal_parking .reload:hover {
    background-color: #fff;
    color: #fb7383;
    cursor: pointer;
  }
  .modal_parking .reload:hover::before{
    background:url(/common/modal.parking/img/parking_reload_pink.svg) no-repeat center center;
    background-size:contain;
  }
}

.modal_parking .box_btn {
  text-align: right;
  margin-top: 10px;
}