@charset "utf-8";


.input_datetime{
  margin-top:20px;
}


.time{
  padding:0;
}


.time .column1{
  width:20%;margin-top:10px;font-size:1.4em;font-weight:bolder;float:left;text-align:center;
}

.time .column2{
  width:75%;float:left;
}


.time .column2 img{
  width:100%;
  max-width:458px;
}


#alert_Time1{
  color:red;
  font-weight:bolder;
  text-align: center;
}


/************ 予約完了時のメッセージ ***********/
#complete_message{
  width:90%;
  max-width:680px;
  margin:0px auto;
  background-color:#137959;
  padding:10px;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  -o-border-radius: 1em;
  -ms-border-radius: 1em;
  /*display:table;*/
}


#complete_message > div{
  color:#fff;
  font-weight:bolder;
  font-size:24px;
  text-align:center;
  /*width:98%;*/
  /*max-width:480px;*/
  display:table;
  margin:0px auto;
  font-family: 'Yu Mincho', 'YuMincho', serif;

  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
}


#complete_message > div > img{
  display:block;
  float:left;
  margin-right:0px;
}


.complete_msg{
  text-align:left;
  float:left;
  margin-left:10px;
 line-height:1.2;
}

.complete_msg > span{
  font-size:30px;	
}

.complete_msg > p{
  font-size:16px;
  line-height:1.1;
  margin-top:5px;
}

.complete_msg > p > a{
  color:#fff;
  text-decoration:none;
}




/************ 予約完了時のメッセージ END ***********/


a:hover img{
  cursor:pointer;
  filter: alpha(opacity=80);        /* ie lt 8 */
  -ms-filter: "alpha(opacity=80)";  /* ie 8 */
  -moz-opacity:0.8;                 /* FF lt 1.5, Netscape */
  -khtml-opacity: 0.8;              /* Safari 1.x */
  opacity:0.8;
  zoom:1;
}

/* ページの背景色 */
.ui-page {
  background:#fff;
}



/* 長い文字が...と省略されるのを防ぐ */
{
  white-space: normal;
}



.formcertain{
  font-size:15px;
  color:#f00;
  font-weight:bolder;
}


#sub_confirm{
  cursor: pointer;
	width: 292px;
	height: 66px;
}


#back_step3{
  cursor: pointer;
	width: 217px;
	height: 34px;
}



/******************** 予約状況の時刻一覧用 ********************/
.timeListLk{
  background-color:#fff; border-left:1px solid #b0b0b0; border-right:1px solid #b0b0b0; border-bottom:1px solid #eee; display:table;
  width:100%;
}

.timeListHead{
  text-align:center; padding:5px; background-color:#e9e9e9;
  border-top:1px solid #ddd; border-left:1px solid #b0b0b0; border-right:1px solid #eee;
}

.timeListLk:active{
  background-color:#ff6;
}


.timeListLk1{
  width:35%; height:25px; float:left; padding-top:5px; background-color:#f6f6ff; color:#333;
}

.timeListLk2{
  width:63%; height:25px; border-left:1px solid #eee; float:left; padding-top:5px;
}


.timeListLk3{
  width:18%; height:25px; float:left; padding-top:5px;
}

.timeListLk4{
  background-color:#eee; border:1px solid #b0b0b0; height:4px; clear:both;
}


span.maru{
  padding:2px 25px; font-size:12px; color:#fff; background-color:#04a3da;
}

span.sankaku{
  padding:2px 13px; font-size:12px; color:#fff; background-color:#c80;
}

span.batsu{
  padding:2px 6px; font-size:11px; color:#fff; background-color:#d33;
}

strong.maru{
  color:#333;
}

strong.sankaku{
  color:#333; font-family: "ＭＳ ゴシック",sans-serif;
}

strong.batsu{
  color:red;
}


.timeListLk_close{
  background-color:#ccc; border-left:1px solid #b0b0b0; border-right:1px solid #b0b0b0; border-bottom:1px solid #eee; display:table;
}

span.close{
  padding:2px 33px; font-size:11px; color:#fff; background-color:#969696;
}


.aboutCxlWaitReserve{
  font-size:13px; text-align:left;padding:5px; border:1px dotted #666;background-color:#ffc;line-height:1.6;
  width:96%; margin:20px auto;
}


.formitem{
  text-align:left;
}



/**** 空席状況の変更に伴う予約受付の変更メッセージ ****/
.vacancyAnnounceA{
	background-color:#eec7a1;
	padding:20px;text-align: center;
	margin:20px auto;
	width:80%;
	border:5px double #900;
}

.vacancyAnnounceB{
	background-color:#ace9ed;
	padding:20px;text-align: center;
	margin:20px auto;
	width:80%;
	border:5px double #900;
}

.vacancyAnnounceA img{
	width:100%;
}

.vacancyAnnounceB img{
	width:100%;
}



/******************** モーダルウィンドウ用 ********************/
.modal-content {
	width: 80% ;
	max-width:600px;
	margin: 0 ;
	padding: 0px;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 999 ;
}
  
#modal-overlay {
	z-index: 998 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.modal-content div:nth-of-type(1) {
   background-color:#1a74c1;
   width:100%;
   padding:3px;
   color:#fff;
}

.modal-content div:nth-of-type(2) {
   background-color:#fff;
   width:100%;
   padding:3px;
   text-align:left;
}

.modal-content div:nth-of-type(3) {
   background-color:#fff;
   width:100%;
   padding:3px;
}




button.close {
   margin-top:-3px;
   padding-right:5px;
   cursor: pointer;
   background: transparent;
   border: 0;
}

.close {
   float: right;
   font-size: 21px;
   color: #fff;
}
.close:hover {
    filter: alpha(opacity=60);        /* ie lt 8 */
    opacity:0.7;
}

/******************** モーダルウィンドウ用 END ********************/



/******************** モーダルウィンドウ(内部デザイン用) ********************/
h.title{
   width:80%; margin:0px auto; background-color:#ffe; color:#333;
}

p.TITLE {
   text-align: left;
   font-size:16px;
   font-weight: bolder;
   margin-top:10px;
   /*margin-left:30px;*/
}
p.TITLE_mini {
   display:block;
   background-color:#4c89d5;
   max-width:100%;
   text-align: left;
   font-size:12px;
   font-weight: bolder;
   color:white;
   /*margin-bottom:10px;*/
}

.button_area{
    text-align:center;
}

.modal_main{
    text-align:center;
}

ul shisya {
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
	flex-wrap:wrap;
	-webkit-flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
   margin:10px auto;
   max-width: 80%;
}
.li shisya {
	display: block;
}

/******************** モーダルウィンドウ(内部デザイン用) END ********************/


/******************** 上部画像 ********************/
ul {
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
	flex-wrap:wrap;
	-webkit-flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
.li {
	display: block;
	text-align: center;
}
img.gazou {max-width:421px;	width:100%;	margin-bottom:30px auto;}

/******************** 上部画像 END ********************/




/*---------- ラジオボタン ----------*/
input[type=radio] { display:none; }
.radio {
  display:inline-block;
  font-size:14px;
  width: 90px;
  padding-top:6px;
  transition:0.3s;
}
.radio:hover {
  background-color:rgba(100,222,222,0.3);
  border-radius:30px;
  transition:0.3s;
}
.radio input[type="radio"] + .radio-label {
  cursor: pointer;
}
.radio input[type="radio"] + .radio-label:before {
  content: '';
  background: rgba(0,0,0,0);
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  top: -0.2em;
  margin-right: 5px;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}
.radio input[type="radio"]:checked + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type="radio"]:focus + .radio-label:before {
  outline: none;
}
.radio input[type="radio"] + .radio-label:empty:before {
  margin-right: 0;
}
.radio input[type="radio"]:checked + .radio-label:before{ color: #ffffff; background: #009688; }
.radio input[type="radio"]:focus + .radio-label:before{ border-color: #009688; }
.radio input[type="radio"]:checked + .radio-label{ color: #009688; border-color: #009688; font-weight:bold !important; }



/*---------- チェックボタン ----------*/
input[type=checkbox] { display: none; }

.checkbox01-parts{
  padding:3px 0px 2px 22px;
  margin-left: 2px;
  position:relative;
  transition:0.3s;
}
.checkbox01-parts:hover{
  background-color:rgba(100,222,222,0.3);
  transition:0.3s;
}
.checkbox01-parts::before, .non-active::before{
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 0px;
  bottom:-1px;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
  background-color:transparent;
}
input[type=checkbox]:checked + .checkbox01-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  left: 3px;
  width: 9px;
  height: 16px;
  -webkit-transform: rotate(40deg);
     -moz-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
       -o-transform: rotate(40deg);
          transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a;
}

input[type=checkbox]:checked + .checkbox01-parts{
  font-weight:bold !important;
  color: #009a9a;
}

.non-active{
  padding:2px 0px 2px 22px;
  margin-left: 2px;
  position:relative;
  opacity:0.5;
  font-weight:normal;
  transition:0.3s;
}







/* 画面サイズが479px以下用（スマートフォン用）の記述 */
@media screen and (max-width: 479px) {


#complete_message > div{
  font-size:16px; 
}


#complete_message > div > span{
  font-size:19px;	
}
/************ 予約完了時のメッセージ END ***********/


.complete_msg{
  float:none;
}

.btn_submit{
 font-size:20px;
}

}