@charset "utf-8";
/* CSS Document */
/****************/
/* 来店予約フォーム */
.note:empty {
  height: 0px;
}
.form-flow {
padding-bottom: 5px;
}
.form-style table {
border-bottom: 0px solid #cacaca;
}
#btnConfirm {
padding: 0;
font-size: 1.0em;
font-weight: bold;
background-color: inherit;
color: #fff;
border-style: none;
margin-bottom: 0;
width: 100%;
}
#formbtn {
  margin: 5% auto;
  overflow: hidden;
}
#formbtn-pink {
max-width: 600px;
margin-top: 5%;
display:block
}
#reserveDay {
  font-weight: bold;
  font-size: 1.2em;
}
p {
  margin: 0;
  padding: 0;
}
.fixDay {
  padding: 2% auto;
  font-size: 1.2em;
  display: none;
}
.modal_time {
  position: relative;
  width: 50%;
  text-align: center;
  display: block;
  margin: 2% 25%;
  font-size: 1.4em;
  clear: left;
}
select {
font-weight: normal;
text-align: -webkit-center;
}
.fix_btn {
  width: 100%;
  text-align: center;
  float: left;
  clear: left;
  margin: 5% auto;
}

.ssl {
  overflow: hidden;
  padding-top: 5%;
}
table.form span {
  color: #e60012;
}
table.form {
  border-collapse: collapse;
  empty-cells: show;
  width: 100%;
  /* margin-top: 15px; */
}
@media (max-width: 768px){
  table#form {
    border-collapse: collapse;
    empty-cells: show;
    width: 100%;
    margin-top: 15px;
    border: 1px solid #cacaca;
  }
}

table.form tbody {
  box-sizing: border-box;
}
table.form tr {
  /* border-bottom: 1px solid #cacaca; */
  width: 100%;
  box-sizing: border-box;
}
table.form tr th {
  width: 200px;
  text-align: left;
  padding-top: 2.0em;
  /* vertical-align: middle; */
  /* border-right: 1px solid #cacaca; */
  /* background: #F8DCE6; */
  /* padding: 20px; */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
table.form tr th.single_th {
  padding-top: 1.4em;
}
@media (max-width: 768px){
  table.form tr th {
    display: block;
    width: 100%;
    font-weight: bold;
    padding: 10px;
    box-sizing: border-box;
  }
}
table.form tr th span {
  font-size: 12px;
  color: #fff;
  padding: 2px 4px;
  margin-left: 2%;
  background: #d2003d;
  radius: 3px;
}
table.form tr td {
  width: 100%;
  display: block;
  vertical-align: middle;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
@media (max-width: 768px){
.form-style table th {
width: 100%;
}
table.form tr td {
    padding: 5px 0 15px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    padding: 10px;
    overflow: hidden;
  }
}

.form-style span {
padding: 1px 3px;
background: inherit;
margin-right: 5px;
color: #fff;
font-size: inherit;
}
.form-style span.required {
background: #ea3f49;
margin-left: 5px;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  /* border-radius: 0; */
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

table.form tr td .cal tr {
  border-bottom: 0px;
}
table.form tr td .cal {
  /* background-color: #fff; */
  width: 70%;
  max-width: 600px;
  text-align: center;
  font-size: 1.3em;
}
table.form tr td .cal tr td {
  width: 13.2%;
  margin: 0.5%;
  padding: 1.0% 0;
  float: left;
  line-height: 1.4em;
  font-size: 0.7em;
  height: 3.5em;
  box-sizing: border-box;
  text-align: center;
  background-color: #fff;
}
table.form tr td .cal tr.head td {
  width: 13.2%;
  margin: 0.5%;
  padding: 1.0% 0 0;
  float: left;
  line-height: 1.4em;
  font-size: 0.7em;
  height: 2.0em;
  background-color: inherit;
}
table.form tr td .cal tr td span {
  display: block;
  padding-left: 8px;
}
.form-style table {
margin-bottom: 5px;
}
.sat {
  color:#0000ff;
}
.sun {
  color:#ff0000;
}
.date td {
  border: 1px solid #eee;
}
.past:before {
  font-family: "Font Awesome 5 Free";
  content: "\f068";
  font-weight: 900;
  color: #FF0000;
}
.stop:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00d";
  font-weight: 900;
  color: #FF0000;
}
.open:before {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-weight: 900;
  color: #FF0000;
}
.phone:before {
  font-family: "Font Awesome 5 Free";
  content: "\f095";
  font-weight: 900;
  color: #FF0000;
}
.batsu:before{
  font-family: "Font Awesome 5 Free";
  content: "\f00d";
  font-weight: 900;
  color: #FF0000;
}
.cal_title .date, .arrow_left, .arrow_right {
  display: inline-block;
}
.cal_title {
  max-width:600px;
  width: 70%;
  letter-spacing: -0.5em; /* 文字間を詰める */
  white-space: nowrap; /* 自動で折り返ししない */
  font-size: 1.3em;
  font-family: 'こぶりなゴシック W6 JIS2004';
}
.cal_title .date {
  text-align: center;
  width: 80%;
  letter-spacing: normal; /* 文字間を元に戻す */
  white-space: normal; /* 自動で折り返し(元に戻す) */
}
.arrow_left {
  width: 10%;
  text-align: center;
  letter-spacing: normal; /* 文字間を元に戻す */
  white-space: normal; /* 自動で折り返し(元に戻す) */
}
.arrow_right {
  width: 10%;
  text-align: center;
  letter-spacing: normal; /* 文字間を元に戻す */
  white-space: normal; /* 自動で折り返し(元に戻す) */
}
.result {
  border: 1px solid #ff0000;
  padding: 2%;
  background-color: #fff;
  max-width: 70%;
}
.result .result_title {
  background-color: #ff0000;
  color: #ffffff;
  padding: 1%;
  margin-bottom: 2%;
}
.result .result_date {
  padding: 1%;
  text-align: center;
}
.label-before, .label-after {
  width: auto;
  float: left;
  margin: 1.5% 2% 0 0;
}
.cp_iptxt {
  margin: 0 1% 0 0;
  float: left;
}
.cp_ipselect {
  /* margin: 0 1% 0 0; */
  float: left;
}
.cp_textarea {
  margin: 0 1% 0 0;
  clear: left;
}
.input_mid {
  width: 10em;
}
td .note {
  display: block;
  clear: left;
}
.add_box {
  width: 6em;
}
.tel_box {
  width: 4em;
}
.tall_box {
  width: 4em;
}
.mail_box {
  width: 20em;
}
.sp_br {
  display: none;
}
.mail_box {
  width: 17em;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  top: 20%;
  left: 20%;
  height: 100%;
  width: 60%;
}
.modal-content {
  background-color: white;
  width: 90%;
  /* margin: 10% auto; */
  padding: 3%;
  overflow: auto;
  margin: 10% auto;
  border: 4px solid #ff0000;;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.3);
}
#selectTime {
   /* text-align: center; */
   padding-left: 32%;
   /* padding-left: 17%; */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #selectTime  {
    padding-left: 43%;
  }
}
_:lang(x)::-internal-media-controls-overlay-cast-button, #selectTime {
  padding-left: 12%;
}
.close_btn {
  font-family: "Arial", "メイリオ";
  font-size: 14px;
  padding: 10px 40px;
  background-color: #130E5B;
  border-radius: 10px;
  color: #FFFFFF;
  border-radius: 5px;
  /* position: relative;
  left: 38%; */
  cursor:pointer;
}
.back_btn {
  font-family: "Arial", "メイリオ";
  font-size: 14px;
  padding: 10px 40px;
  background-color: #cecece;
  border-radius: 10px;
  color: #000;
  border-radius: 5px;
  /* position: relative;
  left: 38%; */
  cursor:pointer;
}
img.ui-datepicker-trigger{
  cursor: pointer;
  margin-left: 7px!important;
  vertical-align: middle;
  Margin-top: -7px!important;
}
.notice-red {
  color: #FF0000;
  display: block;
  padding-bottom: 0em;
}
.notice {
  font-size: 1.2em;
  font-weight: 700;
  border: 2px #FF0000 solid;
  padding: 1em;
  margin-bottom: 2em;
}
.shop-list a{
  position: relative;
  display: inline-block;
  transition: .3s;
}
.shop-list a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  background-color: #FF0000;
  transition: .3s;
  transform: translateX(-50%);
}
.shop-list a:hover::after{
  width: 100%;
}
.button_margin{
    margin: 0px 15px 0px 15px;
}
@media (max-width: 768px){
  .second {
    clear: left;
  }
  table.form tr td .cal {
    width: 100%;
    text-align: center;
  }
  .cal_title {
    width: 100%;
  }
  .label-before, .label-after {
    /* clear: left; */
    margin-top: 1em;
  }
  .input_mid {
    width: 6.0em;
  }
  .add_box, .tall_box {
    width: 4em;
  }
  .tel_box {
    width: 5em;
  }
.button_margin{
margin: 10px 0px 10px 0px;
}
.result {
  max-width: 100%;
}
#selectTime {
   /* text-align: center; */
   padding-left: 32%;
   /* padding-left: 17%; */
}
}
@media only screen and (max-width: 900px) {
  .content2 {
    width: 95%;
  }
  .form-box {
    font-size: 100%;
    text-align: left;
    margin-bottom: 50px;
    /* margin-left: 0.5em;
    margin-right: 0.5em; */
  }
  .att {
margin: 0px auto;
}
  .modal {
    text-align: center;
    top: 15%;
    left: 0%;
    height: 100%;
    width: 100%;
    margin: auto;
  }
}