@charset "utf-8";

/*====================================================================================================

  診療カレンダー

====================================================================================================*/

.cal-nav {
  list-style:none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  margin-bottom:1.5em;
  font-size:1.05em;
}

.cal-nav a { display:block; }
.cal-nav a,
.cal-nav a:visited,
.cal-nav a:hover { color:#12aaa5; text-decoration:none; }
.cal-nav li.is-active a { color:#fff; }

.cal-nav a {
  padding:0.2em;
}

.cal-nav li {
  width:50%;
  text-align:center;
  border:1px solid #5ac3c0;
  font-weight:500;
  color:#12aaa5;
}

.cal-nav li:first-child {
  border-radius:6px 0 0 6px;
  border-right:0;
}

.cal-nav li:last-child {
  border-radius:0 6px 6px 0;
}

.cal-nav li.is-active {
  background-color:#12aaa5;
  border-color:#12aaa5;
  color:#fff;
  position:relative;
}

.cal-nav li:first-child.is-active + li {
  border-left:0;
}

.ua-pc .cal-nav li {
  -webkit-transition:background 0.15s ease-out;
  transition:background 0.15s ease-out;
}

.ua-pc .cal-nav li:not(.is-active):hover {
  background-color:#d0eeed;
}

.cal-nav li.is-active:after {
  content:"";
  border:10px solid transparent;
  border-top-color:#12aaa5;
  position:absolute;
  left:50%;
  top:100%;
  margin-left:-5px;
}

.cal-nav li .m {
  font-size:1.3em;
  display:inline-block;
  margin-left:0.2em;
}

.cal-guide {
  text-align:left;
  padding-top:1.5em;
}

.cal {
  text-align:center;
}

.calTbl {
  width:100%;
  border-collapse:collapse;
  height:100%;
}

.calTbl thead td {
  width:14%;
  text-align:center;
  padding-bottom:0.6em;
  font-size:0.9em;
}
.calTbl thead td:last-child { width:16%; padding-right:0.5rem; }

.calTbl thead tr,
.calTbl tbody tr { border-bottom:1px solid #d3d7d8; }

.calTbl tbody td {
  height:100%;
  font-size:0.8em;
  background-color:#fff;
  vertical-align:top;
  text-align:center;
  line-height:1.4;
}
.calTbl tbody td:first-child { border-left:0; }

.calTbl tbody td .date {
  padding:0.6em 0.6em 0.4em 0.6em;
  text-align:right;
  font-size:0.8em;
}

.calTbl tbody td .date-box {
  height:100%;
  border-left:1px solid #fff;
}

.calTbl tbody td:first-child .date-box {
  border-left:0;
}

.calTbl tbody td .flg {
  display:block;
  padding-bottom:0.8em;
}

/* 日曜 */
.cell-close { background-color:#fdebec; }
/* 金曜 */
.cell-fri { background-color:#fef4d4; }
/* 土曜 */
.cell-sat { background-color:#daeff8; }
/* 変更 */
.cell-henko { background-color:#fbdd7e; cursor:pointer; }

@media screen and (max-width:560px) {
  .cal {
    font-size:3vw;
  }
}


/*-----------------------------------------------------------------------------------
  カレンダー色説明
-----------------------------------------------------------------------------------*/

.cal-guide {
  padding-left:1.6em;
  line-height:1.6;
  font-size:0.95em;
}

.cal-guide dt,
.cal-guide dd {
  display:inline;
}

.cal-guide dt {
  position:relative;
}

.cal-guide dt:before {
  content:"";
  width:1em;
  height:1em;
  display:block;
  position:absolute;
  left:-1.6em;
  top:50%;
  transform:translateY(-50%);
  border:1px solid #c7cccf;
}

.cal-guide dd:after {
  content:"\A";
  white-space:pre;
  height:0.2em;
  display:block;
}

/* 通常 */
.cal-guide dt.normal:before { background-color:#fff; }
/* 金曜 */
.cal-guide dt.fri:before { background-color:#fef4d4; }
/* 土曜 */
.cal-guide dt.sat:before { background-color:#daeff8; }
/* 変更 */
.cal-guide dt.henko:before { background-color:#fbdd7e; }

.ua-pc .cal-guide .henkoho:before { content:"マウスオーバー"; }
.ua-tab .cal-guide .henkoho:before,
.ua-sp .cal-guide .henkoho:before { content:"タップ"; }


/*-----------------------------------------------------------------------------------
  備考ダイアログ
-----------------------------------------------------------------------------------*/

.cal * {
  overflow:visible;
}

.calTbl tbody td {
  position:relative;
  background-clip:padding-box;
}

.dlog-wrap {
  display:none;
  width:300%;
  z-index:90;
  position:absolute;
  left:50%;
  bottom:100%;
  margin-bottom:-1px;
  transform:translateX(-50%);
  box-sizing:border-box;
  border:1px solid #637178;
  background-color:#fff;
  border-radius:4px;
  text-align:left;
}
  
.dlog-wrap[data-posi="L"] { left:-25%; transform:translateX(0); }
.dlog-wrap[data-posi="R"] { left:inherit; right:-25%; transform:translateX(0); }
.dlog-wrap[data-posi="L2"] { left:75%; }
.dlog-wrap[data-posi="R2"] { left:25%; }
  
.dlog {
  position:relative;
  box-sizing:border-box;
  padding:1em;
  font-size:1.1em;
}
  
.dlog:before,
.dlog:after {
  content:"";
  border:10px solid transparent;
  position:absolute;
  left:50%;
  top:100%;
}

.dlog-wrap[data-posi="L"] .dlog:before,
.dlog-wrap[data-posi="L"] .dlog:after { left:25%; }
.dlog-wrap[data-posi="R"] .dlog:before,
.dlog-wrap[data-posi="R"] .dlog:after { left:75%; }
.dlog-wrap[data-posi="L2"] .dlog:before,
.dlog-wrap[data-posi="L2"] .dlog:after { left:42%; }
.dlog-wrap[data-posi="R2"] .dlog:before,
.dlog-wrap[data-posi="R2"] .dlog:after { left:59%; }
  
.dlog:before {
  border-top-color:#637178;
  margin-left:-10px;
}
  
.dlog:after {
  border-top-color:#fff;
  margin:-1px 0 0 -10px;
}
  
.dlog_hd {
  padding-bottom:0.4em;
  position:relative;
}

.ua-pc .dlog_hd .closeBtn { display:none; }

.dlog_hd .closeBtn {
  display:inline-block;
  position:absolute;
  right:-0.6em;
  top:-0.6em;
  cursor:pointer;
  padding:0.6em;
}
  
.dlog_hd .closeBtn span {
  position:relative;
  display:block;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  width:1.2em;
  height:1.2em;
}

.dlog_hd .closeBtn span:before,
.dlog_hd .closeBtn span:after {
  content:"";
  position:absolute;
  top:50%;
  left:0;
  display:block;
  width:100%;
  border-top:2px solid #21353e;
}

.dlog_hd .closeBtn span:before {
  transform:rotate(-45deg);
}
   
.dlog_hd .closeBtn span:after {
  transform:rotate(45deg);
}

@media screen and (max-width:640px) {
  .dlog-wrap {
    width:400%;
  }

  .dlog-wrap[data-posi="L"] .dlog:before,
  .dlog-wrap[data-posi="L"] .dlog:after { left:19%; }
  .dlog-wrap[data-posi="R"] .dlog:before,
  .dlog-wrap[data-posi="R"] .dlog:after { left:82%; }
  .dlog-wrap[data-posi="L2"] .dlog:before,
  .dlog-wrap[data-posi="L2"] .dlog:after { left:44%; }
  .dlog-wrap[data-posi="R2"] .dlog:before,
  .dlog-wrap[data-posi="R2"] .dlog:after { left:57%; }
  
  .dlog {
    font-size:1.2em;
  }
  
  .dlog:before,
  .dlog:after {
    border-width:8px;
  }

  .dlog:before,
  .dlog:after {
    margin-left:-8px;
  }
}

@media screen and (max-width:480px) {
  .dlog {
    font-size:1.4em;
  }
}