@charset "utf-8";

/*土曜の文字色*/
.youbi_6{
color:#28558c!important;
/* background-color: #d4dde8 !important; */
background-color: #e5effc !important;
}
th.youbi_6{
color:#fff!important;
background-color: #28558c !important;
}
/*祝日と日曜の文字色*/
.youbi_0,.shukujitu{
color:red!important;
}
th.youbi_0 {
  color:#fff!important;
  background-color: #b40c18 !important;
}
td.youbi_0 {
  color:#b40c18!important;
  /* background-color: #f0ced1 !important; */
  background-color: #faf1f2!important;
}
td.blankCell {
  background-color: rgba(215, 225, 235, 0.5)!important;
}
/*本日の背景色　※ただし設定ファイルでの設定が優先されます*/
.today{
/* background:#FF9; */
}
/* td.today {
  background:#b40c18 !important;
  color: #fff !important;
} */
/*休業日設定した日の背景色　※ただし設定ファイルでの設定が優先されます*/
.holiday{
  background:#f55;
  color:#fff!important;
  /* background-color: #f0ced1 !important; */
}
#calenderTable td.holiday .scheduleComment  {
  color:#fff!important;
}
/*定休日設定した日の背景色　※ただし設定ファイルでの設定が優先されます*/
.closed{
background:#FDD;
}
.hidden{
display:none;
}
/*休業日テキスト部の左側の四角*/
.holidayCube{
display:inline-block;
width:13px;
height:13px;
margin:3px 3px 0 3px;
position:relative;
top:2px;
}
/*定休日テキスト部の左側の四角*/
.closedCube{
display:inline-block;
width:13px;
height:13px;
margin:3px 3px 0 3px;
position:relative;
top:2px;
}


/*背景色設定の背景色の設定*/
/*background1 -> 特割期 */
.background1{
background:#adb!important;
}
/*background2 -> Ａ期 */
.background2{
background:#fbb!important;
}
/*background3 -> Ｂ期 */
.background3{
background:#fd7!important;
}
/*background4 -> Ｃ期 */
.background4{
background:#dcd!important;
}

/*過去のセル*/
.kakoDate{background:#fcfcfc;}
/*---------------------------------
index.php
---------------------------------*/

/* Calender style */

#calenderTable {
border-collapse:collapse;
display: block;
font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin-bottom:20px;
}

#calenderTable tbody {
width: 100%;
display:table;
}

#calenderTable th {
  text-align: center;
  padding:5px;
  font-size:12px;
  /* border:1px solid #ccc; */
  border:2px solid #fff;
  color:#fff;
  background:#848a90;
}
@media (max-width: 767px) {
  #calenderTable th {
    font-size:10px;
  }
}
#calenderTable td{
  position: relative;
padding:5px;
text-align:right;
font-size:12px;
border:2px solid #fff;
color:#555;
width:14%;
vertical-align:top;
background-color: rgba(215, 225, 235, 0.5);
height: 88px;
}
#calenderTable .calenderHeader a {
color:#555;
text-decoration:none;
text-align: center;
}

#calenderTable td .scheduleComment{
text-align:left;
padding-left: 5px;
color:#555;
font-size:10px;
position: absolute;
top: calc(2em + 50%);
left: 0;
transform: translateY(-50%);
}
#calenderTable td .schedulePulldownList{
text-align:left;
color:#555;
font-size:10px;
padding:0px 0 3px;
border-bottom:1px dotted #ccc;
}
#calenderTable .borderless{
border:0!important
}
.countNum{
font-size:110%;
display:none;
}
p.holidayText{
font-size:12px!important;
color:#444;
margin:0;
padding:0 0 5px;
}


/* if ListStyle */
ul#calenderList{
list-style:none;
margin:0;
padding:0;
font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#calenderList li{
border-bottom:1px solid #999;
padding:5px;
}
#calenderList li.first-child{
border-top:1px solid #999;
}
#calenderList .scheduleComment{
text-align:left;
color:#555;
font-size:10px;
}
#calenderList .schedulePulldownList{
text-align:left;
color:#555;
font-size:11px;
padding:0px 0 3px;
border-bottom:1px dotted #aaa;
}
table.navNextPrev {
width:100%;
}
table.navNextPrev .dspPrev{
text-align:left;
padding:10px;
}
table.navNextPrev .dspNext{
text-align:right;
padding:10px;
}
h2#headerYm{
background:#666;
color:#fff;
text-align:center;
padding:5px ;
font-size:110%;
font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


#formWrap {
/*width:650px;*/
margin:10px auto;
color:#555;
line-height:120%;
font-size:90%;
font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#formWrap h2{
font-weight:normal;
font-size:14px;
color:#111;
margin:0 0 10px;
background:#efefef;
padding:5px 8px 3px;
border-radius:3px;
border:1px solid #ccc;
}
#formWrap p {
margin:0 0 5px;
padding:0;
font-size:13px;
}

table.formTable {
width:100%;
margin:15px auto;
border-collapse:collapse;
}
table.formTable td, table.formTable th {
border:1px solid #ccc;
padding:10px;
font-size:90%;
}
table.formTable th {
width:30%;
font-weight:normal;
background:#efefef;
text-align:left;
}
/*---------------------------------
/index.php style
---------------------------------*/


@media screen and (max-width:639px) {
#calenderTable {
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
#calenderTable::-webkit-scrollbar {
height: 10px;
}
#calenderTable::-webkit-scrollbar-track {
margin: 0 2px;
background: #f6f6f6;
border-radius: 5px;
}
#calenderTable::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #999;
}

#calenderTable tbody {
width: 100%;
display:table;
}
}



/*OVERWRITES*/
#calenderTable button, #calenderTable .button, #calenderTable input[type="button"], #calenderTable input[type="submit"], #calenderTable input[type="reset"] {
display: block!important;
min-width: 3em!important;
min-width: 100%!important;
min-height: auto!important;
font-size: 16px!important;
line-height: 1!important;
padding: 4px!important;
margin:auto;
}
button.reservSubmit {
  color:#28558c!important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

button.reservSubmit[disabled] {
  pointer-events: none;
}

button.reservSubmit[type="submit"] {
  position: absolute;
  top: initial;
  transform: initial;
  inset: 0 0 0 0;
  transition: background-color .3s;
}
button.reservSubmit[type="submit"]:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.button::after, button::after {display: none;}

button:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover {
cursor:pointer;
text-decoration:underline;
background:none;
color:#28558c;
}
button[disabled], a.button[disabled], .button[disabled], input[type="button"][disabled], input[type="submit"][disabled],
button[disabled]:hover, a.button[disabled]:hover, .button[disabled]:hover, input[type="button"][disabled]:hover, input[type="submit"][disabled]:hover {
background:none;
border:none;
color:#666;
cursor:default;
}
button[disabled]:hover, .button[disabled]:hover {text-decoration: none;}

/* /if ListStyle */
/* Reserv Btn styl*/
.reservForm{
display:inline;
}
.reservForm input{
font-size:12px;
cursor:pointer;
font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
padding:1px 2px;
}
/*記号の親要素のスタイル*/
.reservSubmitWrap{
text-align:center;
}
/*記号のスタイル*/
.reservSubmit{
display:inline-block;
text-align:center;
background:none;
border:0;
font-size:24px;
font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
cursor:pointer;
font-weight:bold;
}
/* /Reserv Btn styl*/
/* ReservForm Style */
/* pc FORM kiyaku setting */
.disabled-btn {opacity:.5!important;-webkit-transition: .3s;transition: .3s;}
.disabled-btn.submitOK {opacity:1!important;}
#kiyakuBlock {margin:auto;max-width:700px;}
#kiyakuBlock span {line-height:1.7;}

/* 202308追加*/

.month_nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.month_nav li {
  line-height: 1.2;
  letter-spacing: 0.06em;
  font-family: sans-serif, system-ui;
}

.month_nav li a {
  text-decoration: none;
}
.month_nav li span {
  font-size: 26px;
  font-weight: 600;
}
.month_nav li.current_month::before {
  background-color: #b40c18;
}
@media (min-width: 768px) {
  .calendar_wrap {
    display: flex;
    flex-wrap: nowrap;
  }
  .month_nav {
    width: 238px;
    height: 500px;
    margin-right: 25px;
  }
  table#calenderTable {
    width: calc(100% - 238px - 25px);
  }
  table#calenderTable tbody{
    height: 500px;
  }
  .month_nav ul {
    flex-direction: column;
    margin: 0;
  }
  .month_nav li {
    position: relative;
    font-size: 24px;
    border-bottom: dotted 1px #323c46;
    height: calc(500px / 3);
    display: flex;
    align-items: center;
    padding: 15px 0;
    /* border-left: solid 8px #d7e1eb; */
  }
  .month_nav li a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .month_nav li a::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 100%;
    background-color: #d7e1eb;
    margin-right: 20px;
  }
  .month_nav li.current_month::before {
    background-color: #b40c18;
    content: '';
    display: inline-block;
    width: 8px;
    height: 100%;
    margin-right: 20px;
  }
  .month_nav li a::after {
    position: absolute;
    right: 0;
    content: '';
    display: inline-block;
    background-image: url(./icon_arrow_red.svg);
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;

  }
  .month_nav li span {
    font-size: 40px;
  }
  .month_nav li.current_month span {
    margin-bottom: 10px;
  }
  .month_nav li.current_month::before {
    background-color: #b40c18;
  }
  .month_nav li:first-child {
    border-top: dotted 1px #323c46;
  }
}
@media (max-width: 767px) {
  .month_nav {
    width: 100%;
    height: 58px;
    margin-bottom: 5px;
  }
  .month_nav li {
    width: calc(100% / 3);
    font-size: 11px;
    text-align: center;
    border-right: dotted 1px #323c46;
    height: 58px;
    padding: 0 6px;
  }
  .month_nav li:first-child {
    border-left: dotted 1px #323c46;
  }
  .month_nav li span {
    display: block;
    font-size: 26px;
  }
  table#calenderTable tbody{
    height: 320px;
  }
  .month_nav li a {
    width: 100%;
    height: 58px;
  }
  .month_nav li a::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background-color: #d7e1eb;
    margin-bottom: 5px;
  }
  .month_nav li.current_month::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background-color: #b40c18;
    margin-bottom: 5px;
  }
  #calenderTable td {
    height: 72px;
  }
}