@charset "utf-8";
body{background:#F6F8FC}
h3{font-size:2.8em; font-weight:400; letter-spacing:-1px;}
#contents{padding:5vw 5%; padding:max(4vw, 30px) max(7.5%, 30px); }
.hideSub{display:none;}
.con_tit{display:flex; flex-direction: column; margin-bottom:30px; margin-bottom:max(3vw, 30px)}
.con_tit h3{margin-top:30px; color:#222; }

.con_tit #tab ul{display:flex;}
.con_tit #tab ul li{margin-left:5px; background:#fff; border-radius:6px; border:1px solid rgba(0,0,0,.06)}
.con_tit #tab ul li a{display:block; text-align:center; padding:16px 25px 12px; min-width:166px; line-height:1.2; font-size:1.25rem}
.con_tit #tab ul li.on{background:var(--point) ;box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15); }
.con_tit #tab ul li.on a{color:#fff}
.conbtnBox{text-align:right; margin-top:30px;}
.conbtn{display:inline-block;  padding:15px 53px 11px 30px; font-size:1.125em; background:#00A8EE url('/parking/img/sub/ic_clip.svg') no-repeat right 25px center/24px; color:#fff; border-radius:5px}
.point{color:var(--point)}

#detail_con>h4,
.bl01{padding-left:40px; margin-top:65px; font-size:1.55em; background:url('/parking/img/sub/bl.png') no-repeat left 0px; color:#353847}
#detail_con>h4:first-child,
.bl01:first-child{margin-top:0;}
.para01 {margin-top:40px; margin-left:15px;}
.para02 {margin-top:20px; margin-left:20px;}
.bl02{position:relative; padding-left:20px; font-size:1.25em; color:#1C36D6}
.bl02:before{display:block; content:''; position:absolute; left:0px; top:5px; ;width:15px; height:15px; border-radius:10px; border:5px solid #00B7F1;}
.bl03>li, p.bl03, dd.bl03 {position:relative; margin:7px 0px; margin-left:5px; padding-left:12px}
.bl03>li:before, p.bl03:before, dd.bl03:before {display:block; content:""; position:absolute; left:0; top:9px; width:7px; height:1px; background:#4f5cb4;}
.bl04>li, p.bl04 {position:relative; margin-top:4px; margin-left:5px; padding-left:8px; font-size:.95em}
.bl04>li:before, p.bl04:before {display:block; content:""; position:absolute; left:0; top:7px; width:3px; height:3px; background:#888;}
.bl02+.bl03>li:first-child, .bl02+p.bl03 {margin-top:18px;}
.bl02+.bl04 {margin-left:20px;}
.bl03 .bl04{margin:5px 0px 20px}
h4+.bl03 {margin-left:20px;}
h4+.bl03>li:first-child, h4+p.bl03 {margin-top:20px;}
.sbox{margin:20px}
.tbox{padding:4.5% 4.5% 4%; padding:max(4.5%, 30px) max(4.5%, 30px) max(4%, 25px); background:var(--color); border-radius:10px; color:#fff}
.stbox{padding:2.5% 2.5% 2%; padding:max(2.5%, 15px) max(2.5%, 15px) max(2%, 12px); background:#f5f5f5; border-radius:10px; border:1px solid #ccc;}
.tbox *{color:currentColor; text-shadow:0px 0px 1px rgba(0,0,0,.1)}
.tbox .point{color:#FFE600; border-bottom:1px solid currentColor}
.tbox .bl03>li{margin:3px 0px}
.tbox .bl03>li:before{background:#fff}

.tbox .addNotice {margin-top:10px; padding:20px; background:#ffe200; color:red; border-radius: 8px;}
.tbox .addNotice .title {font-size:20px;}
.tbox .addNotice>ul>li {padding:0 12px; margin-top:8px;}

/* .renewal{margin-top:20px; font-weight:bold; } */
:not(ul).refer:before,
ul.refer li:before{display:inline; content:'※ '}
.tableBox{margin-top:20px}
table.data{width:100%; border-top:3px solid #333}
table.data td,
table.data th{padding:12px max(2%, 5px) 10px; border:1px solid #ddd; border-top:0px}
table.data thead th{padding-top:17px; padding-bottom:13px}
table.data th:first-child,
table.data td:first-child{border-left:0px}
table.data th:last-child,
table.data td:last-child{border-right:0px}


/* program */
input[type=submit],
.btn{font-size:1.125rem}
.btn_input{padding:2px 10px 0px}
.need{font-weight:normal !important; color:var(--point)}
a.place{display:inline; padding-left:23px; background:url(/parking/img/main/ic_addr.svg) no-repeat left -1.2px/20px}
/* a.place{display:inline-block; padding-left:25px; background:url(/parking/img/main/ic_addr.svg) no-repeat left 0px/22px} */
.remote{display:inline-block; padding-left:20px; text-indent:-5000px; font-weight:normal; background:url(/parking/img/sub/ic_remote.svg) no-repeat left 0px}
.txt_remote{ font-weight:normal; font-size:.93rem; white-space:nowrap}
.txt_remote .remote{margin:0px 5px; text-indent:0px; font-size:.93em}
.agree_txt{margin-top:15px}
.agree_txt input[type=checkbox]{margin-top:-1px}
.agree .agree_txt input[type=checkbox]{margin-top:1px}
.agree_txt input[type=checkbox]+label{font-size:1.125em}
.search{background:#00B7F1; border:0px; border-radius:8px}
.search select,
.search input[type=submit],
.search input[type=text]{border-radius:3px; border:0px; font-size:1em; height:43px}
.search select{padding:3px 3px 0px 15px}
.search input[type=submit]{background:#004960; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);}
.search input[type=text]{padding:7px 15px 0px}
.tbox+.search{margin-top:15px}
.parking_tab>ul{margin:50px 0px 15px; }
.parking_tab>ul>li{display:inline-block; position:relative;}
.parking_tab>ul>li a{display:block; text-align:center; padding:8px 5px 5px; font-size:1.125em; border-radius:50px; min-width:100px}
.parking_tab>ul>li.select a{color:#fff; background:var(--point); box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.2);}
.parking_tab>ul>li+li:before{display:block; content:''; position:absolute; left:0px; top:10px; width:1px; height:17px; background:#ddd}
.parking_tab>ul>li.select:before,
.parking_tab>ul>li.select+li:before{display:none;}
.board_list table.general_board{margin-top:20px;  margin-left:4px;}
.board_list table caption{left:0px; top:0px;}
.board_list table.general_board:before{display:none;}
.board_list table.general_board thead th{font-weight:normal; color:#111; letter-spacing:0px; background:transparent; font-size:1em}
.board_list table.general_board tbody th,
.board_list table.general_board tbody td{padding-top:14px; overflow:unset; text-overflow:unset}
.board_list.parking_list table.general_board tbody th,
.board_list.parking_list table.general_board tbody td{height:72px; font-size:.93em}
.board_list.parking_list table.general_board tbody td.title{color:var(--point)}
.paging a{height:30px; padding-top:2px; border-radius:3px}
.parking_form input[type=text],
.parking_form input[type=password],
.parking_form select{padding:10px max(2%, 10px); border:1px solid #ccc}
.parking_form input[type=password]{width:min(650px, 100%)}
.parking_form input[type=text]{width:min(650px, 100%)}
.parking_form :not(dd)>ul>li{padding:20px 2% 20px 0px; border-bottom:1px solid #ccc}
.parking_form :not(dd)>ul>li>dl{display:flex; align-items: center;}
.parking_form :not(dd)>ul>li>dl>dt{flex-basis:max(20%, 200px); font-size:1.125em}
.parking_form :not(dd)>ul>li>dl>dd{flex-basis:min(80%, calc(100% - 200px))}
.parking_form :not(dd)>ul>li.readonly>dl>dd{font-size:1.2em}
.parking_form .refer{margin-top:10px}
.parking_form ul.refer>li,
.parking_form :not(ul).refer{font-size:.93em}
.parking_form ul.refer>li{margin-top:3px}
.parking_form .addr dl dd>p{margin-bottom:5px}
.state{display:inline-block; text-align:center; min-width:72px; padding:5px 5px 3px; line-height:1em; font-size:15px; color:#666; border:2px solid #ddd; border-radius:100px}
.state.ing{color:var(--point); border-color:#DB4141}


/* contents */
.info_effect{display:flex; margin-top:30px; margin-bottom:20px;}
.info_effect>li{text-align:center; width:32%; padding:30px 20px; font-size:1.2em; background:#fff; border-radius:5px }
.info_effect>li+li{margin-left:1.5%}
.info_effect>li:before{display:block; content:''; margin:0px auto 20px; width:64px; height:64px; background:url(/parking/img/sub/info_ic01.png) no-repeat center top/cover}
.info_effect>li:nth-child(2):before{background-image:url(/parking/img/sub/info_ic02.png) }
.info_effect>li:nth-child(3):before{background-image:url(/parking/img/sub/info_ic03.png) }

.keyfieldLong .search select#keyfield {max-width:none;}

.pointBox {text-align:center; margin-bottom:20px; padding:30px; color:var(--point); font-size:22px; font-weight:bold; border-radius:8px; background:#f1f1f1;}

.layer_popup {position:fixed; top:100px; left:50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index:9999; display:flex; gap:1%;}
.m_popup{padding:1px; background:#444;}
.m_popup .m_popup_tit{display:block; padding:5px 10px; color:#fff;}
.m_popup .m_popup_close{display:block; overflow:hidden; margin-top:-10px; padding:7px 10px; background:#444; color:#fff; text-align:left; font-size:14px;}
.m_popup .m_popup_close>p{float:left; text-align:right; color:#fff;}
.m_popup .m_popup_close>a{float:right; color:#fff;}


/***************************************************************************************************************************/


@media all and (min-width:961px){
	.ultable{display:table; border-collapse:collapse; width:100%; border-top:3px solid #333; border-bottom:1px solid #333}
	.ultable>ul{display:table-row;}
	.ultable>ul>li{display:table-cell; text-align:center; vertical-align:middle; padding:12px max(2%, 10px) 10px; height:72px; border-top:1px solid #ddd}
	.ultable>ul>li.left{text-align:left;}
	.ultable>ul.thead>li{height:auto; padding:15px 5px}
	.ultable>ul.thead+li{border-top:1px solid #333}
}
@media screen and (max-width:960px){
	.dp_pc{display:none !important}
	h3{float:none; margin-top:10px; font-size:2.5em; font-weight:bold; }
	.con_tit #tab{display:none;}
	.con_tit #tab ul li a{min-width:100%}
	#detail_con>h4, .bl01{background-size:30px; background-position:left 2px; padding-left:33px;}
	.tableBox{overflow-x:auto}
	.tableBox table{width:auto; min-width:100%}
	.search .field>select{width:100%}
	.search .word{width:80%;}
	.board_list{overflow-x:auto}
	.board_list table.general_board{width:900px;}
	.parking_form :not(dd)>ul>li>dl{flex-direction: column}
	.parking_form :not(dd)>ul>li>dl>dt{width:100%;}
	.parking_form :not(dd)>ul>li>dl>dd{width:100%; margin-top:10px}
	.parking_form :not(dd)>ul>li.readonly>dl>dd{margin-top:20px}
	.ultable{display:block; border-top:2px solid #333}
	.ultable>ul{padding:20px; border-bottom:1px solid #ddd}
	.ultable>ul>li{display:inline-block; width:48%;}
	.ultable>ul>li.title{display:block; margin-bottom:10px; font-size:1.1em}
	.ultable>ul.thead{display:none;}
	.parking_tab>ul>li{width:24%;}
	.parking_tab>ul>li a{min-width:50px}
	.info_effect{flex-direction: column;}
	.info_effect>li{width:100%}
	.info_effect>li+li{margin-left:0%; margin-top:10px}
}