@charset "UTF-8";
/* カレンダー */
#div_mdrs_main .mdrs_calender {
  text-align: center; /* for IE */
}

#div_mdrs_main table.mdrs_calender_main {
  border: 0px solid #ddd;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;

  /*border-collapse: collapse;*/
  border-collapse: separate;

  text-align: center;
  font-family: メイリオ;
  width:100%;

}

#div_mdrs_main table.mdrs_calender_main th {
  /*border: 1px solid #ddd;*/
  border-left:1px solid #ccc;
  border-top:1px solid #ccc;
  border-right:0px;
  border-bottom:0px;

  background-color: #fff;
  color: #333;
  font-weight: normal;
  padding: 2px 4px;
  font-family: メイリオ;
  font-size:10pt;
}

/*
#div_mdrs_main table.mdrs_calender_fixed{
  position: sticky;
  top: 300;
  color: #fff;
  background: #333;
  &:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  }
}
*/

#div_mdrs_main table.mdrs_calender_main th.left_menu {
  background-color: #f7f5ea;
  padding-left:16px;
  padding-right:16px;
}

#div_mdrs_main table.mdrs_calender_main th.left_menu_am_pm{
	padding-left:24px;
	padding-right:24px;
}


#div_mdrs_main table.mdrs_calender_main td {
  /*border: 1px solid #ddd;*/
  border-left:1px solid #ccc;
  border-top:1px solid #ccc;
  border-right:0px;
  border-bottom:0px;

  color: #333;
  font-weight: bold;
  font-family: メイリオ;
}

#div_mdrs_main table.mdrs_calender_main tr td.mdrs_td_ng {
  background-color: #f0f0f0;
  font-weight: normal;
  color :#888888;

}


#div_mdrs_main table.mdrs_calender_main td:hover {
  background-color: #fdd835;    /* マウスオーバー時のセルの背景色 */
}

/* タイトル */
#div_mdrs_main .mdrs_calender_title {
  background-color: #eee;
  padding: 9px;
  font-family: メイリオ;
  font-weight: bold;
}


/* メニュ */
#div_mdrs_main .mdrs_calender ul{
  padding: 0px;
  margin: 0px;
}

#div_mdrs_main .mdrs_calender ul li {
  display: inline-block;
}

#div_mdrs_main .mdrs_calender_current {
  margin: 0 auto;
  font-size: 0.9em;
  font-family: メイリオ;
}

#div_mdrs_main .mdrs_calender_current_month{
  text-align:center;
  font-size: 0.9em;
  font-family: メイリオ;
}

#div_mdrs_main .mdrs_calender_date_navi {
	text-align:right;
}

#div_mdrs_main .mdrs_calender_today {
  margin: 0 auto;
  font-size: 0.8em;
  font-family: メイリオ;
  cursor:pointer;
}

#div_mdrs_main .mdrs_calender_prior {
  font-size: 0.8em;
  font-family: メイリオ;
}

#div_mdrs_main .mdrs_calender_next {
  font-size: 0.8em;
  font-family: メイリオ;
}


#div_mdrs_main .mdrs_calender_next_prior_active {
  cursor:pointer;
  color:#000;
}

#div_mdrs_main .mdrs_calender_next_prior_inactive {
  cursor:default;
  color:#ccc;
}




/* テーブル */
#div_mdrs_main table.mdrs_calender_main th.mdrs_th_saturday {
  background-color: #06C;
  color: #fff;
}

#div_mdrs_main table.mdrs_calender_main th.mdrs_th_holiday {
  background-color: #C00;
  color: #fff;
}

#div_mdrs_main table.mdrs_calender_main td.mdrs_th_time {
  padding: 2px 10px;
  font-weight: normal;
}

#div_mdrs_main table.mdrs_calender_main tr td.mdrs_td_ok {
  padding: 2px 6px;
  font-weight: bold;
  color: #0CF;
  cursor:pointer;
}

#div_mdrs_main table.mdrs_calender_main tr td.mdrs_td_ng {
  padding: 2px 6px;
  /*font-weight: bold;*/
  /*color: #C00;*/
}

#div_mdrs_main table.mdrs_calender_main tr td.mdrs_none {
  padding: 2px 6px;
  font-weight: bold;
  background-color: #eee;
  color: #999;
}

#div_mdrs_main .avail_icon{
  width:13px;
}

#div_mdrs_main .span_error{
	color: #ff3f3f;
	font-size:10pt;
}

/* 読み込み中 */
@keyframes mdrs_rotate{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(90deg)
    }
    50%{
        transform: rotate(180deg)
    }
    75%{
        transform: rotate(270deg)
    }
    100%{
        transform: rotate(360deg);
    }
}

#mdrs_circle_svg_loading{
    width:100px;
    height:100px;
    animation-name: mdrs_rotate;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin: 50px 0;
}
#mdrs_circle_svg_loading .mdrs_st0{
    stroke: #005bac;
    fill:none;
    stroke-width:15;
    stroke-miterlimit:10;
}

#div_mdrs_main .div_mdrs_black_screen {
    position:fixed;
    display: none;
    background: #0009;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    left:0px;
    top:0px;
    z-index:5000;

}

#div_mdrs_center_dialog {
    display: block;
    background: #fff;
    width: 35vw;
    height: 30vh;
    margin: 0 auto;
    position: absolute;
    top: 25vh;
    left: 32.5vw;
    border-radius: 15px;
    text-align: center;
    z-index:5001;
}

#div_mdrs_main .mdrs_loading_comment_title {
    font-weight: bold;
    color: #555555;
}


/* 週ボタン */
#div_mdrs_main .mdrs_calender_week{
  background-color: #fff;
  border: 1px solid #D0C9BC;
  margin: 6px 0 10px 0;
  line-height: 1;
  padding: 0;
  border-radius: 6px;
  display: flex;
  float: right;
  width: 270px;
}
#div_mdrs_main .mdrs_calender_week_btn{
  width: 80px;
  padding: 8px 15px;
  margin: 0;
  display: block;
  border-right: 1px solid #E5E2DE;
  text-align: center;
  font-size: 11px;
  color: #B49346;
  position: relative;
}
#div_mdrs_main .mdrs_calender_week_btn:hover{
  background-color: #FFFAEF;
}
#div_mdrs_main .mdrs_calender_week_btn:last-child{
  border-right: none;
}
#div_mdrs_main .mdrs_calender_prior{
  padding: 8px 10px 8px 25px;
  border-radius: 6px 0 0 6px;
}
#div_mdrs_main .mdrs_calender_next{
  padding: 8px 25px 8px 10px;
  border-radius: 0 6px 6px 0;
}
#div_mdrs_main .mdrs_calender_next_prior_inactive , #div_mdrs_main .mdrs_calender_next_prior_inactive{
  color: #ccc;
}
#div_mdrs_main .mdrs_calender_next_prior_inactive:hover , #div_mdrs_main .mdrs_calender_next_prior_inactive:hover{
  background-color: #fff;
}
#div_mdrs_main .mdrs_calender_week_btn::before {
  content: '';
  width: 7px;
  height: 7px;
  border-top: solid 1px #B49346;
  border-right: solid 1px #B49346;
  position: absolute;
}

#div_mdrs_main .mdrs_calender_prior::before {
  transform: rotate(-135deg);
  top: 9px;
  left:10px;
}
#div_mdrs_main .mdrs_calender_next::before {
  transform: rotate(45deg);
  top: 9px;
  right: 10px;
}
#div_mdrs_main .mdrs_calender_today::before{
    border: none;
}

#div_mdrs_main .mdrs_calender_week_btn.mdrs_calender_next_prior_inactive::before , .mdrs_calender_week_btn.mdrs_calender_next_prior_inactive{
    border-color: #ccc;
}

#span_re_selection{
    font-size:80%;
    color :#8e8e8e;
    cursor:pointer;
  display: inline-block;
}

#span_re_selection:hover{
	color :#000;
	text-decoration : underline;
}



#div_mdrs_main .mdrs_td_selected{
	background-color:#ffd51b;
}

#div_mdrs_main .mdrs_span_error{
    color: #fff;
    font-size: 10.5pt;
    background: #ff3f3f;
    display: block;
    min-width: 300px;
    width: 300px;
    text-align: left;
    line-height: 2;
    height: 25px;
    padding: 3px 5px;
    margin: 15px 0;
    border-radius: 5px;
    text-indent:10px;
}

#div_mdrs_main .mdrs_span_error:before{
  content:"▲";
  width: 20px;
  height: 20px;
  display:
  inline-block;
  color: #ff3f3f;
  position: relative;
  left:10px;
  top:-20px;
  transform: scaleX(1.5)
}

#confirm_dialog {
    display: none;
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0!important;
}

#div_mdrs_main .modalBg {
    width: 100%;
    height: 100%;
    background-color: rgba(30,30,30,0.5);
}

#div_mdrs_main .modalWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 75%;
    height: auto;
    max-width: 750px;
    padding: 10px 15px 90px 15px;
    background-color: #fff;
    border-radius: 4px;
}
#div_mdrs_main .modalContents{
    overflow:scroll;
}

#div_mdrs_main .mdrs_modal_btnbox{
    position: absolute;
    height: 68px;
    bottom: 0;
    left: 0;
    padding: 10px 0;
    box-sizing: border-box;
    background-color: #fff;
    width: 100%;
    border-top: 1px solid #F3F0EC;
}
#btn_reserve_apply{
    background: #DBBF25;
    color: #fff;
    border: none;
    width: 55%;
    box-sizing: border-box;
    padding: 10px 0;
    cursor: pointer;
}
#btn_reserve_cancel{
    width: 34%;
    margin-left: 5%;
    box-sizing: border-box;
    border: none;
    padding: 10px 0;
    cursor: pointer;
}

#div_mdrs_main .mdrs_close_modal {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    cursor: pointer;
}

#div_mdrs_main .mdrs_modal_mainttl{
    font-weight: bold;
    font-size: 15px;
    line-height: 1;
    margin: 40px 0 20px 0;
}
#div_mdrs_main .mdrs_modal_table .mdrs_modal_ttl{
    background: #F3F0EC;
    font-size: 13px;
    padding: 5px 10px;
}
#div_mdrs_main .mdrs_modal_table .mdrs_modal_txt{
    font-size: 14px;
    padding: 5px 5px 10px 15px;
    box-sizing: border-box;
}
#div_mdrs_main .mdrs_modal_table{
    width: 100%;
}
#div_mdrs_main .mdrs_modal_table .mdrs_modal_ttl{
    border-bottom: 1px solid #fff;
    width: 30%;
}
#div_mdrs_main .mdrs_modal_table .mdrs_modal_txt{
    border-bottom: 1px solid #ccc;
    width: 70%;
}
#div_mdrs_main .mdrs_modal_table tr:last-child .mdrs_modal_txt{
    border-bottom: none;
}


#div_mdrs_main .reception_radio_box{
    border: none;
    padding: 0;
    margin: 0;
    text-align: center;
    display: flex;
	column-gap: 5px;
}

@media (min-width: 768px) {
	#div_mdrs_main .reception_radio_box{
		column-gap:18px;
	}
}

#div_mdrs_main .reception_radio_inline__input {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}

#div_mdrs_main .reception_radio_inline__label {
    display: inline-block;
    padding: 0.5rem 0;
    /*margin-right: 18px;*/
	width: 100%;
    border-radius: 3px;
    transition: all .2s;
    border: 2px solid #C0BCB4;
    box-sizing: border-box;
  font-size: min(16px,4vw);
}
#div_mdrs_main .reception_radio_inline__label:last-child {
    margin-right: 0;
}
#div_mdrs_main .reception_radio_inline__input:checked + .reception_radio_inline__label {
    background: #B49654;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,.7);
    border-color: #B49654;
}

#div_mdrs_main .reception_radio_inline__input:focus + .reception_radio_inline__label {
    outline-color: #4D90FE;
    outline-offset: -2px;
    outline-style: auto;
    outline-width: 5px;
}

#div_mdrs_main .reception_memberselect_ttl{
    font-weight: bold;
}
#div_mdrs_main .reception_memberselect .reception_radio_inline__label{
    line-height: 1;
    padding: 15px 10px;
}



#div_mdrs_main .mdrs_calender_main thead th {
  position: sticky;
  position: -webkit-sticky;
  /*top:200px;*/
  /*z-index: 1000;*/
}

/*
#div_mdrs_main .mdrs_calender_main[size="large"] thead th{
  top:200px;
}

#div_mdrs_main .mdrs_calender_main[size="small"] thead th{
  top:60px;
}
*/


@media (max-width: 767px) {
  
#div_mdrs_main table.mdrs_calender_main th.left_menu {
  background-color: #f7f5ea;
  padding-left:3px;
  padding-right:3px;
}

#div_mdrs_main table.mdrs_calender_main th.left_menu_am_pm{
  padding-left:24px;
  padding-right:24px;
}
  

    #reception_form dl .reception_radio_box {
        margin: 0 0 5vw 0;
    }
  
    #reception_form dl .reception_radio_box.smile_on {
        flex-wrap: wrap;
      grid-gap: 5px;
      justify-content: space-between;
    }
    #reception_form dl .reception_radio_box.smile_on .reception_radio_inline__label {
      width: calc(50% - 2.5px);
      box-sizing: border-box;
  }
    #div_mdrs_main .mdrs_modal_table{
        display: block;
    }
    #div_mdrs_main .mdrs_modal_table tbody{
        display: block;
    }
    #div_mdrs_main .mdrs_modal_table tr{
        display: block;
    }
    #div_mdrs_main .mdrs_modal_table .mdrs_modal_ttl{
        display: block;
        width: auto;
    }
    #div_mdrs_main .mdrs_modal_table .mdrs_modal_txt{
        display: block;
        width: auto;
    }
    #div_mdrs_main .modalWrapper {
        height: 80%;
    }
    #div_mdrs_main .modalContents{
        height: 87%;
        overflow:scroll;
    }
}

@media (min-width: 768px) {
    #reception_form dl .reception_radio_box {
        padding-left: 40px;
        margin: 0 0 20px 0;
    }
    #div_mdrs_main .reception_radio_inline__label{
        width: 100%;
    }

    #mdrs_calender_week{
        display: flex;
        width: 100%;;
        float: none;
    }
    #div_mdrs_main .mdrs_calender_week_btn{
        width: 33%;
    }
}