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

.reserveLink { max-width: 800px; margin: 0 auto;}


#modalTimetable .reserveInfo { max-width: 600px; margin: 0 auto; text-align: center; margin-bottom: 25px; }
#modalTimetable .reserveInfo h3{ font-size: 105%; margin-bottom: 10px; font-weight: 600	;}
.reserveInfo span { display: inline-block;}
.timeTableBox {
    margin: 25px 0; border: 1px solid #F0F0F0;  text-align: center; font-size: 14px; padding: 15px;
}
.timeTableBox h4{ color: #111; background: #70a6ff; line-height: 30px;  margin-bottom: 10px; font-size: 15px;
}

.timeTableDiv {
    width: 100%;
	    height: 500px;
    position: relative;
    padding: 15px;
	overflow-y: auto;
	overflow-x: hidden; margin-top: 10px;
}

.timeTableDivProf {
    width: 100%;
    height: 400px;
    position: relative;
    padding: 25px;
	overflow-y: auto;
	overflow-x: hidden; margin-top: 10px;
}
.timeTableBox .onlineButton {
    color: #222222;
    line-height: 30px;
    font-weight: bold;
    background: #ffd200;
    border-radius: 5px; padding: 0 10px;
    display: block; margin-bottom: 10px;
    border: 2px #222222 solid;
}

#RESERVECHECK { width: 500px; height: 500px; position: fixed; z-index: 100; left: 10px; top: 10px;}
#modalBox {}
#modalReserve { display: none;}
#modalReserve span.title{ font-weight: 700; display: block; margin-bottom: 5px ; text-align: center;}
#modalReserve span.exp{ margin-bottom: 5px ; display: block;  text-align: center;}

#reserveHeader { margin-bottom: 5px; }
#reserveHeader ul{ width: 100% ; text-align: center; list-style: none; font-size: 75% ;  display: table ; margin: 0 0 0 ; padding: 0 ; line-height: 100% ;}
#reserveHeader ul li{ width: calc(100% / 6) ; display: table-cell ; padding: 7px 2px ; background: #cdcdcd ; color: #FFF ;vertical-align: middle;}
#reserveHeader ul li.act{ background: #70a6ff; color: #FFF; font-weight: 800; }

#reserveBox .err { border-radius: 10px ; background: #FF2828 ; font-weight: 800 ; color: #FFF ; padding: 5px 10px; }
#reserveBox { padding: 0 4% ; }
#reserveBox h4 { text-align: center ; font-size: 100%; font-weight: 700 ; margin-top: 15px;}

#reserveH { margin-bottom: 10px; text-align: center; }
#reserveH .name{ font-size: 110%; font-weight: 600; }
#reserveH .weekBox,#reserveF .weekBox { width: 100% ; display:table ; text-align: center ; font-weight: 700; }
#reserveH .weekBox div.weekH, #reserveH .weekBox div.week,#reserveF .weekBox div.weekH, #reserveF .weekBox div.week{ width: calc(100% / 8) ; display: table-cell ; line-height: 130% ; font-size: 95% ; padding: 2px 0; vertical-align: top}
#reserveH .weekBox div.week span { font-weight: normal ; font-size: 80%;}

.reserveExp { max-width: 700px; margin: 0 auto 25px;}

#result { height: 50px; }

#reserveF { margin-bottom: 10px; }
#timeTable { width: 100% ; }
#timeTable h3 { text-align: center ; color: #ff7734 ; font-size: 100%; font-weight: 800 ; letter-spacing: -1px; margin-bottom: 0;}
#timeTable .name { display: block; text-align: center ; font-size: 110%; font-weight: 800 ; }
#modalReserve { padding: 4% 3%; position: relative;}
#modalReserve > div { margin-bottom: 20px;}
#modalReserve > div select, #modalReserve > div input { margin-bottom: 15px;}

#modalReserve h4 { font-size: 85%  ; text-align: center; margin: 10px 0 5px;}
#modalReserve .PREVIOUS {
    font-size: 90%;
    position: absolute;
    top: -23px;
    left: 2px;
    background: #999;
    border-radius: 5px;
    padding: 0 5px;
    line-height: 21px;
    border: 1px #000 solid;
}
#selectTimeBox { display: none;}
#selectShopBox { display: none;}
#selectCourseBox { display: none;}
#selectPointBox { display: none;}
#reserveConfirmBox { display: none;}

#reserveC { width: 100% ; display: table ; }
#reserveC .timeBox { width: calc(100% / 1) ; display: table-cell ;  text-align: center ; vertical-align: top; }

#reserveC #timeH { width: 80px; display: block ; text-align: center ; position: absolute; z-index: 300; }
#reserveC #timeH p{ display: block; height: 60px; font-size: 60%; position: relative; }
#reserveC #timeH p span{ position: absolute; top: 0; right: 10px; display: block;}
#reserveC #timeH p span {
    display: flex; font-size: 90%; font-weight: 700;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 5em;
    height: 16px;
    border-radius: 6px;
    background-color: #111;
    color: #fff;
    text-align: center;
	position: absolute; top: -8px
    }
#reserveC #timeH p span::before {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateX(50%) translateY(-50%) rotate(45deg);
    width: 0.5em;
    height: 0.5em;
    z-index: -1;
    background-color: #111;
    content: "";
    }



#reserveC .timeS { width: calc(100% / 1) ;position: relative; display: table-cell ; text-align: center ;  vertical-align: top; }

#reserveC .timeS p { width: calc(100% - 80px); display: block; position: absolute ; left: 60px; z-index: 120; font-size: 80%;}
#reserveC .timeS p span{ position: absolute; top: 3%; right: 3%; color: #111; font-size: 90%; font-weight: 600; } 
#reserveC .timeS p.on { background: #70a6ff; cursor: pointer ; }
#reserveC .timeS p.tel { background: #ff7734; }

#reserveC .timeS p i{ margin-right: 5px;}
#reserveC .timeS p.fin { background: #f8f8f8 }
#reserveC .timeS p.tel { background: #ff2828}
#reserveC div.INOUT1,#reserveC div.INOUT2 { width: calc(100% - 80px); background: #f9f9f9 ; position: absolute; left: 60px; z-index: 110;}

.reserveLink #modalReserve{ max-width: 700px; margin: 0 auto; min-height: 500px;}
.reserveLink #modalReserve .PREVIOUS{ top: 0;}

/* #reserveC { width: 100% ; display: table ; }
#reserveC .timeBox { width: calc(100% / 3) ; display: table-cell ;  text-align: center ; vertical-align: top; }

#reserveC #timeH { width: calc(100% / 3) ; display: table-cell ; text-align: center ;  vertical-align: top; }
#reserveC #timeH p{ display: block; height: 60px; font-size: 70%; position: relative; }
#reserveC #timeH p span{ position: absolute; top:  -5px; display: block;}

#reserveC .timeS { width: calc(100% / 2) ;position: relative; display: table-cell ; text-align: center ;  vertical-align: top; }

#reserveC .timeS p { width: 90%; display: block; border-radius: 10px; position: absolute ; left: 5%; z-index: 120;}
#reserveC .timeS p.on { background: #70a6ff; cursor: pointer ; padding-top: 5px; }
#reserveC .timeS p.tel { background: #ff7734; padding-top: 5px; }

#reserveC .timeS p i{ margin-right: 5px;}
#reserveC .timeS p.fin { background: #f8f8f8 }
#reserveC .timeS p.tel { background: #ff2828}
#reserveC div.INOUT1,#reserveC div.INOUT2 { width: 90%; background: #efefef ; position: absolute; left: 5%; z-index: 110;} */


.selectRange p { margin: 0; padding: 0 ; font-weight: 900 ; }
.selectRange select { width: 100% ; }
.selectRange .loading { color: #cdcdcd ; position: relative; }
.reserveModal .btn{
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 15px; font-weight: 700 ;
    padding: 8px 37px;
}
.btn-blue {
    color: #fff;
    background-color: #70a6ff;
    border-color: #2e6da4;
}




@media (max-width: 767px) {
	.timeTableDiv {
		padding: 15px 5px;
	}
}

.cp_loading17 {
	position: absolute;
	top: 50%;
	left: 140px;margin-top: -3px;
	width: 100px;
	-webkit-transform: translate(-50%,-50%);
					transform: translate(-50%,-50%);
}
.cp_loading17 .cp_item {
	display: inline-block;
	width: 5px;
	height: 5px; 
	margin-right: 1px;
	margin-left: 1px;
	-webkit-animation: loading17 1s ease-in infinite;
	        animation: loading17 1s ease-in infinite;
	-webkit-animation-delay: 0;
	        animation-delay: 0;
	opacity: 0.1;
	background-color: #ff7043;
}
.cp_loading17 .cp_item:nth-child(1) {
	-webkit-animation-delay: 0.3s;
	        animation-delay: 0.3s;
}
.cp_loading17 .cp_item:nth-child(2) {
	-webkit-animation-delay: 0.2s;
	        animation-delay: 0.2s;
}
.cp_loading17 .cp_item:nth-child(3) {
	-webkit-animation-delay: 0.1s;
	        animation-delay: 0.1s;
}
.cp_loading17 .cp_item:nth-child(4) {
	-webkit-animation-delay: 0.2s;
	        animation-delay: 0.2s;
}
.cp_loading17 .cp_item:nth-child(5) {
	-webkit-animation-delay: 0.3s;
	        animation-delay: 0.3s;
}
@-webkit-keyframes loading17 {
	0% {
		-webkit-transform: scale(1.2);
		        transform: scale(1.2);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(0.7);
		        transform: scale(0.7);
		opacity: 0.1;
	}
}
@keyframes loading17 {
	0% {
		-webkit-transform: scale(1.2);
		        transform: scale(1.2);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(0.7);
		        transform: scale(0.7);
		opacity: 0.1;
	}
}