
*{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}


/*********************************** header */
#header_mb{
  background-color:#fff;
  text-align:center;
  margin:7px auto;
}
#header_logo{
  width:80%;
  max-width:357px;
}
#header_cname_area{
  background-color:#fff;
  text-align:center;
  margin:7px auto;
}
#header_cname{
  text-align:center;
  font-size:1.2em;
  font-weight:bolder;
}

.clinic_en {
  margin: 0px auto;
  font-size: 18px;
  color: #1c68ab;
  line-height: 1.0;
  font-weight: bold;
}
/***********************************  /header */



/*************************** switch_language */
.switch_language {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 106px;
  display:block;
  background-color:rgba(0,0,0,0.7);
  color:#fff;
  text-decoration:none;
  padding:5px 0px 7px 5px;
  box-sizing: border-box;
  z-index: 10;
  font-size:14px;
  font-weight: normal !important;
  text-align:center;
}
.switch_language:link, .switch_language:visited {
  color: #fff !important;
}
.switch_language:hover {
  opacity: 0.9;
  font-weight:bold;
  transition: all  0.3s ease;
}
/*************************** /switch_language */



.contents_section{
  width:96%;
  max-width:700px;
  margin:0 auto;
}

.title_label{
  width:100% !important;
}

.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;
}


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%;
}

.timeListLkCleaningNone{
  background-color:#f99; 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:#333;
}


strong.maru_cleaningNon{
  color:red;
}
strong.sankaku_cleaningNon{
  color:red; font-family: "ＭＳ ゴシック",sans-serif;
}
strong.maru_beginnerOk{
  color:green;
}
strong.sankaku_beginnerOk{
  color:green; font-family: "ＭＳ ゴシック",sans-serif;
}



.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 10px;
}


.formitem{
  text-align:left;
}


.stop_caution{
  color:#600; font-size:15px; border:10px solid #c9171e; height:50px; display:table; text-align:left; padding:20px; margin:0px auto 30px; background-color:#fff6f6; width:80%;
}

.stop_caution > div{
  background-color:#c9171e; color:white; width:100%; margin:auto; text-align:center;
  padding: 8px 2px;
}

.stop_caution > p{
  font-weight:normal;
}



/**** 空席状況の変更に伴う予約受付の変更メッセージ ****/
.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%;
}

.errormsg{
  width:90%;
  max-width: 700px;
  margin:10px auto;
  background-color:#fff;
  color:red;
  border:2px solid red;
  padding:5px;
  text-align:left;
}

/******************** モーダルウィンドウ用 ********************/
#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 {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  max-height: 90%;
  margin: 0 auto;
  padding: 20px;
  max-width: 400px;
  border-radius: 10px;
  text-align: center;
  overflow-y: auto;
}

#modal-content div:nth-of-type(1){
   background-color:#2582d5;
   width:100%;
   padding:10px;
   color:#fff;
}
#modal-content div:nth-of-type(2){
   background-color:#ffe;
   width:100%;
   padding:10px;
   text-align:left;
   color:#333;
}
#modal-content div:nth-of-type(3){
   background-color:#ffe;
   width:100%;
   padding:5px 10px;
}
#modal-content p{
   font-weight:bold;
   text-align:center;
}
.modal-content{
  box-shadow: 2px 2px 4px #333;
}
/******************** モーダルウィンドウ用 END ********************/



#submit_alertB{
  /*color:blue;*/
  font-weight:bold;
}


.move_cleaning{
  display:block; padding: 0px; color:#1e50a2 !important; background-color:#fff;
  border-radius:5px; text-decoration:none; font-weight:normal; margin:5px auto !important;
  font-size:15px;  
}
.move_cleaning:hover{
  background-color:#eaf4fc; color:#19448e !important;
}
.move_cleaning span{
  font-size:15px;
}


.notice{
/*
  background-color:red;
  color:#fff;
  padding:1px 10px;
  text-align:left;
  display:table;
  border-radius:10px;
*/
  margin:5px auto;
  color:red;
}


.btn_design01 {
    font-size: 18px;
    display: block;
    margin:0px auto;
    box-sizing: border-box;
    width: 292px;
    background-color: #20aee5;
    color: #fff !important;
    font-weight: initial !important;
    padding: 23px;
    border-radius: 50px;
    text-decoration: none;
    letter-spacing: .4rem;
    font-family: sans-serif;
}
.btn_design01:hover{
    background-color: #4dbeea;
}

.btn_design02 {
    font-size: 17px;
    display: block;
    margin:0px auto;
    box-sizing: border-box;
    width: 220px;
    background-color: #ff5533;
    color: #fff !important;
    font-weight: initial !important;
    padding: 7px;
    border-radius: 50px;
    text-decoration: none;
    letter-spacing: .4rem;
    font-family: sans-serif;
}
.btn_design02:hover{
    background-color: #ff6e5c;
}


.btn02 {
    border: 2px solid #c9171e;
    background-color: #fff;
    padding: 7px 10px;
    border-radius: 20px;
    color: #c9171e;
    display: inline-flex; /* インライン要素のままフレックスボックスを適用 */
    align-items: center; /* 矢印と文字を中央揃え */
    gap: 5px; /* 矢印と文字の間隔 */
    font-size: 15px; /* 文字サイズを統一 */
    /*font-weight: bold;*/
    text-decoration: none;
    cursor: pointer;
    margin-left:12px;
}
.btn02:hover{
  background-color:#ffc;
}
