@charset "utf-8";
#page.reservation #main{
		background-image: url(../images/reservation/main.jpg);
}
#page.reservation #main #pagetitle{
	width:500px;
}
@media (max-width: 768px) {
	#page.reservation #main #pagetitle{
		width:70vw;
	}
}

#page.reservation #contents .messagebox{
  text-align:center;
}
#page.reservation #contents .messagebox h2{
  font-size:1.8em;
  padding-bottom:40px;
}
#page.reservation #contents .messagebox p a{
  color:#d87500;
}


#page.reservation #contents .contentsin {
    width: 90%;
    max-width:800px;
    margin: 0 auto;
}
.reservation #contents .form-set{margin:50px auto 0;width:100%;}
.reservation #contents .form-box{width:100%;display:table;margin:0 auto 20px;padding:20px 20px 40px;background-color:#fff;text-align:center;}
.reservation #contents .form-box label{
  font-weight:bold;
}
    .reservation #contents .form-box p{font-weight:bold;padding:0 0 10px;}
.reservation #contents label{display:block;width:100%;padding:0 0 5px;}

.reservation #contents .form-set dl{
  -webkit-display: flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  border-bottom:1px solid #000;
  max-width:680px;
  margin:30px auto 0;
  padding-bottom:15px;
}
.reservation #contents .form-set dl dt{width:9em;text-align:left;color:#000;}
.reservation #contents .form-set dl dd{width: calc(100% - 9em);text-align:left;}
.reservation #contents .form-set dl dd input{
    padding: 2px 15px;
    background-color: #fff;
    border: none;
    border-radius: 4px;
    text-align:left;
}
.reservation #contents .form-set dl.pt2{
  display: block;
  border-bottom:none;
}
.reservation #contents .form-set dl.pt2 dt{width:100%;}
.reservation #contents .form-set dl.pt2 dd{width:100%;padding-top:15px;}


.reservation #contents .red{color:#c30;}
.reservation #contents .error{
  padding:10px 0 0;
  color:#c30;
  font-weight:bold;
  text-align:left;
  display:block;
  max-width: 680px;
  margin: 0 auto 0;
}
.reservation #contents .form-box input,
.reservation #contents .form-box textarea,
.reservation #contents .form-box select{
  dispaly:table;
  padding:8px 15px;
  line-height:1.6;
  box-sizing:border-box;
  background-color:#fff;
  border:none;
  border-radius:4px;
  width:100%;
  font-size:1.2em;
  color:#000;
  font-weight:bold;
}
.reservation #contents .form-box select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.reservation #contents .form-box.error-box input,
.reservation #contents .form-box.error-box textarea,
.reservation #contents .form-box.error-box select{background-color:#fcc;}
.reservation #contents .form-box textarea{height:10em;width:100%;}
.reservation #contents .form-box .reservationarea textarea {
    border:1px solid #000;
}
.reservation #contents .form-box select.ken{width:16em;}
.reservation #contents .form-box select#time{width:16em;display:block;width:100%;margin:0 auto;}
.reservation #contents .form-box input[type="checkbox"]{width:16px;height:16px;border:1px solid #ccc;background-color:#fff;border-radius:6px;margin:0 10px 0 0;}
.reservation #contents .form-box .pt2 label{display:table;float:left;padding-right:20px;width:auto;}
.reservation #contents .form-box .pt2 input[type="radio"]{width:16px;height:16px;border:1px solid #ccc;background-color:#fff;border-radius:6px;margin:0 10px 0 0;float:left;}
.reservation #contents .form-box .pt2 input[type="radio"] + span{margin-top:-3px;display:block;float:left;}
.reservation #contents .form-box.checkbox div{display:table;vertical-align:top;margin:0 0 15px;}
.reservation #contents .form-box.checkbox span{vertical-align:top;}
.reservation #contents .form-box input{width:80%;}
.reservation #contents .form_title{width:100%;background-color:#7e7e80;color:#fff;padding:12px;margin-top:40px;text-align:center;}

.reservation #contents .form-set.questionnaire .form-box dl.pt2 dt{color:#d87500;font-size:1.2em;font-weight:bold;}
.reservation #contents .form-set.questionnaire .form-box dl.pt2 dd div{width:25%;float:left;}
.reservation #contents .form-set.questionnaire .form-box dl dd .form-questionnaire,
.reservation #contents .form-set.questionnaire textarea{
	border:2px solid #d87500;
  width:100%;
  float:none;
}

.reservation #contents .form-button{display:table;width:80%;max-width:300px;margin:60px auto;}
.reservation #contents .form-button div{margin:0 auto 0;}
.reservation #contents .form-button .gochk{width:100%;}
.reservation #contents .form-button div a{
  font-size:1.2em;
  line-height:1;
  padding:15px 0;
  width:100%;
  border:none;
  background-color:#d87500;
  color:#fff;
  border-radius:0;
  display:table;
  text-align:center;
}
.reservation #contents .form-button div a:hover{
  background-color:#bc3f00;
}

.reservation #contents .textarea .form-box{text-align:left;}
.reservation #contents .textarea .form-box{
  margin: 0 auto;
  padding: 20px 20px 0;
}
.reservation #contents .textarea .form-box textarea {
    background-color: #f4f4f4;
    border: none;
    width:100%;
    max-width:100%;
    height: 15em;
}

.reservation #contents .textarea > .form-box{padding-bottom:40px;}
.reservation #contents .form-button .back{width:45%;float:left;}
.reservation #contents .form-button .apply{width:45%;float:right;}


.reservation.check #contents .form-button label{}

.reservation #contents #frm_reservation_check .form-box,
.reservation #contents #frm_reservation_check .form-box {
    width: 100%;
    padding: 20px 20px 20px;
    text-align: left;
    font-size:1.2em;
}
.reservation #contents #frm_reservation_check .form-box p,
.reservation #contents #frm_reservation_check .form-box p{font-size:1.2em;}
.reservation #contents #frm_reservation_check .form-set dl,
.reservation #contents #frm_reservation_check .form-set dl{
  padding:0 0 15px;
}
.reservation #contents #frm_reservation_check .form-set dl dt,
.reservation #contents #frm_reservation_check .form-set dl dd,
.reservation #contents #frm_reservation_check .form-set dl dt,
.reservation #contents #frm_reservation_check .form-set dl dd{font-size:1em;}
.reservation #contents #frm_reservation_check .form-button,
.reservation #contents #frm_reservation_check .form-button {
    width: 80%;
    max-width: 600px;
}
.reservation #contents #frm_reservation_check .form-button .gochk,
.reservation #contents #frm_reservation_check .form-button .gochk {
    width: 45%;
    float:left;
}
.reservation #contents #frm_reservation_check .form-button .gochk:last-child,
.reservation #contents #frm_reservation_check .form-button .gochk:last-child {
  float:right;
}



@media (max-width: 640px) {
  #page.page.reservation main #main-title {
      margin: 120px auto 0;
  }
  #page.reservation #contents .messagebox{
    padding:60px 0 0;
  }
  #page.reservation #contents .messagebox h2{
    font-size:1.6em;
  }

    .reservation #contents .contentsin h1{font-size:1.8em;width: 96%;margin: 0 auto;}
}

.reservation #contents .contentsin.comment{text-align:center;padding:0 0 200px;}

/* =========================================================
   Reservation form final adjustments
   ========================================================= */

/* フォーム全体 */
.reservation #contents .form-box{
  display:block;
  width:100%;
  max-width:760px;
  margin:0 auto 24px;
  padding:34px 38px 44px;
  border:1px solid #dedede;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  background:#fff;
  text-align:left;
  box-sizing:border-box;
}

.reservation #contents .form-set dl{
  display:flex;
  align-items:center;
  max-width:680px;
  margin:0 auto;
  padding:20px 0;
  border-bottom:1px solid #e3e3e3;
  box-sizing:border-box;
}

.reservation #contents .form-set dl:first-of-type{
  border-top:1px solid #e3e3e3;
}

.reservation #contents .form-set dl dt{
  width:12em;
  padding-right:24px;
  box-sizing:border-box;
  font-weight:700;
  line-height:1.5;
}

.reservation #contents .form-set dl dd{
  width:calc(100% - 12em);
  margin:0;
}

/* 入力欄 */
.reservation #contents .form-box input:not([type="radio"]):not([type="checkbox"]),
.reservation #contents .form-box textarea,
.reservation #contents .form-box select{
  display:block;
  width:100%;
  min-height:48px;
  padding:10px 14px;
  border:1px solid #cfcfcf;
  border-radius:5px;
  background:#fff;
  color:#222;
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.reservation #contents .form-box textarea{
  min-height:180px;
  height:180px;
  resize:vertical;
}

.reservation #contents .form-box input:not([type="radio"]):not([type="checkbox"]):focus,
.reservation #contents .form-box textarea:focus,
.reservation #contents .form-box select:focus{
  border-color:#d87500;
  box-shadow:0 0 0 3px rgba(216,117,0,.12);
  outline:none;
}

.reservation #contents .form-box input::placeholder,
.reservation #contents .form-box textarea::placeholder{
  color:#aaa;
  opacity:1;
}

/* セレクト矢印 */
.reservation #contents .form-box select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:42px;
  background-image:
    linear-gradient(45deg, transparent 50%, #777 50%),
    linear-gradient(135deg, #777 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 13px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* 個人・法人：横並び・小さめ・中央揃え */
.reservation #contents .form-set dl:first-of-type dd{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 28px;
}

.reservation #contents .form-set dl:first-of-type dd label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start;
  width:auto !important;
  min-width:0;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  line-height:1.4;
  cursor:pointer;
}

.reservation #contents .form-set dl:first-of-type input[type="radio"]{
  appearance:auto !important;
  -webkit-appearance:radio !important;
  -moz-appearance:radio !important;
  display:inline-block !important;
  width:16px !important;
  height:16px !important;
  min-width:16px;
  margin:0 7px 0 0 !important;
  padding:0 !important;
  float:none !important;
  border:initial !important;
  border-radius:50% !important;
  background:initial !important;
  box-shadow:none !important;
  transform:none !important;
  zoom:1 !important;
  vertical-align:middle;
}

/* エラー表示：空欄時は完全に非表示 */
.reservation #contents .error:empty{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}

.reservation #contents .error:not(:empty){
  display:block;
  max-width:680px;
  margin:7px auto 0;
  padding:0;
  border:0;
  background:none;
  color:#c30;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
}

/* 赤・薄赤の常時バーを無効化 */
.reservation #contents .error::before,
.reservation #contents .error::after{
  display:none !important;
  content:none !important;
}

.reservation #contents .form-box.error-box,
.reservation #contents .form-box.error-box::before,
.reservation #contents .form-box.error-box::after{
  background:#fff !important;
  border-color:#dedede !important;
}

.reservation #contents .form-box.error-box input,
.reservation #contents .form-box.error-box textarea,
.reservation #contents .form-box.error-box select{
  background:#fff;
  border-color:#d94b3d;
}

/* メッセージ欄 */
.reservation #contents .form-set dl.pt2{
  display:block;
  border-bottom:0;
  padding-top:24px;
}

.reservation #contents .form-set dl.pt2 dt,
.reservation #contents .form-set dl.pt2 dd{
  width:100%;
}

.reservation #contents .form-set dl.pt2 dt{
  padding:0 0 10px;
}

.reservation #contents .form-set dl.pt2 dd{
  padding-top:0;
}

.reservation #contents .form-box .reservationarea textarea{
  border:1px solid #cfcfcf;
}

/* ボタン */
.reservation #contents .form-button div a{
  border-radius:4px;
  transition:background-color .2s ease, opacity .2s ease;
}

@media (max-width:640px){
  .reservation #contents .form-box{
    padding:24px 18px 32px;
    border-radius:7px;
  }

  .reservation #contents .form-set dl,
  .reservation #contents .form-set dl:first-of-type{
    display:block;
    padding:17px 0;
  }

  .reservation #contents .form-set dl dt,
  .reservation #contents .form-set dl dd{
    width:100%;
  }

  .reservation #contents .form-set dl dt{
    padding:0 0 9px;
  }

  .reservation #contents .form-set dl:first-of-type dd{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px 24px;
  }

  .reservation #contents .form-set dl:first-of-type dd label{
    width:auto !important;
  }

  .reservation #contents .form-box input:not([type="radio"]):not([type="checkbox"]),
  .reservation #contents .form-box textarea,
  .reservation #contents .form-box select{
    font-size:16px;
  }

  .reservation #contents .form-button,
  .reservation #contents #frm_reservation_check .form-button{
    width:100%;
  }

  .reservation #contents #frm_reservation_check .form-button .gochk,
  .reservation #contents #frm_reservation_check .form-button .gochk:last-child{
    width:100%;
    float:none;
    margin:0 0 12px;
  }
}

/* =========================================================
   Reservation check page
   ========================================================= */
.reservation.check #contents .contentsin,
#page.reservation.check #contents .contentsin{
  max-width:860px;
}

.reservation.check #contents #frm_reservation_check .form-box,
#page.reservation.check #contents #frm_reservation_check .form-box{
  max-width:760px;
  margin:0 auto 30px;
  padding:36px 40px 44px;
  border:1px solid #dedede;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  box-sizing:border-box;
}

.reservation.check #contents #frm_reservation_check .form-set,
#page.reservation.check #contents #frm_reservation_check .form-set{
  margin-top:30px;
}

.reservation.check #contents #frm_reservation_check .form-set dl,
#page.reservation.check #contents #frm_reservation_check .form-set dl{
  display:flex;
  align-items:flex-start;
  max-width:680px;
  margin:0 auto;
  padding:18px 0;
  border-bottom:1px solid #e5e5e5;
}

.reservation.check #contents #frm_reservation_check .form-set dl:first-of-type,
#page.reservation.check #contents #frm_reservation_check .form-set dl:first-of-type{
  border-top:1px solid #e5e5e5;
}

.reservation.check #contents #frm_reservation_check .form-set dl dt,
#page.reservation.check #contents #frm_reservation_check .form-set dl dt{
  width:13em;
  padding:0 28px 0 0;
  color:#333;
  font-size:15px;
  font-weight:700;
  line-height:1.7;
  box-sizing:border-box;
}

.reservation.check #contents #frm_reservation_check .form-set dl dd,
#page.reservation.check #contents #frm_reservation_check .form-set dl dd{
  width:calc(100% - 13em);
  margin:0;
  color:#111;
  font-size:16px;
  font-weight:500;
  line-height:1.8;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:pre-wrap;
}

/* 確認画面の説明文 */
.reservation.check #contents .form-box > p:first-child,
#page.reservation.check #contents .form-box > p:first-child{
  margin:0 0 18px;
  padding:16px 18px;
  border-left:4px solid #d87500;
  background:#f7f7f7;
  color:#222;
  font-size:16px;
  font-weight:700;
  line-height:1.7;
}

/* 戻る・送信ボタン */
.reservation.check #contents #frm_reservation_check .form-button,
#page.reservation.check #contents #frm_reservation_check .form-button{
  display:flex;
  justify-content:center;
  gap:18px;
  width:100%;
  max-width:620px;
  margin:45px auto 65px;
}

.reservation.check #contents #frm_reservation_check .form-button .gochk,
.reservation.check #contents #frm_reservation_check .form-button .gochk:last-child,
#page.reservation.check #contents #frm_reservation_check .form-button .gochk,
#page.reservation.check #contents #frm_reservation_check .form-button .gochk:last-child{
  float:none;
  width:calc(50% - 9px);
  margin:0;
}

.reservation.check #contents #frm_reservation_check .form-button a,
#page.reservation.check #contents #frm_reservation_check .form-button a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 18px;
  border-radius:5px;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  box-sizing:border-box;
}

.reservation.check #contents #frm_reservation_check .form-button .gochk:first-child a,
#page.reservation.check #contents #frm_reservation_check .form-button .gochk:first-child a{
  border:1px solid #aaa;
  background:#fff;
  color:#333;
}

.reservation.check #contents #frm_reservation_check .form-button .gochk:first-child a:hover,
#page.reservation.check #contents #frm_reservation_check .form-button .gochk:first-child a:hover{
  border-color:#777;
  background:#f3f3f3;
}

/* =========================================================
   Reservation thanks page
   ========================================================= */
.reservation.thanks #contents .contentsin,
#page.reservation.thanks #contents .contentsin,
.reservation #contents .contentsin.comment{
  width:90%;
  max-width:760px;
  margin:0 auto;
  padding:0 0 140px;
  text-align:center;
}

.reservation.thanks #contents .messagebox,
#page.reservation.thanks #contents .messagebox,
.reservation #contents .contentsin.comment .messagebox{
  position:relative;
  margin:45px auto 0;
  padding:54px 42px 50px;
  border:1px solid #dedede;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  box-sizing:border-box;
}

.reservation.thanks #contents .messagebox::before,
#page.reservation.thanks #contents .messagebox::before,
.reservation #contents .contentsin.comment .messagebox::before{
  content:"✓";
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  margin:0 auto 24px;
  border-radius:50%;
  background:#d87500;
  color:#fff;
  font-size:34px;
  font-weight:700;
  line-height:1;
}

.reservation.thanks #contents .messagebox h2,
#page.reservation.thanks #contents .messagebox h2,
.reservation #contents .contentsin.comment .messagebox h2{
  margin:0;
  padding:0 0 22px;
  color:#222;
  font-size:28px;
  font-weight:700;
  line-height:1.5;
}

.reservation.thanks #contents .messagebox p,
#page.reservation.thanks #contents .messagebox p,
.reservation #contents .contentsin.comment .messagebox p{
  max-width:580px;
  margin:0 auto 14px;
  color:#444;
  font-size:16px;
  font-weight:400;
  line-height:1.9;
}

.reservation.thanks #contents .messagebox a,
#page.reservation.thanks #contents .messagebox a,
.reservation #contents .contentsin.comment .messagebox a{
  color:#d87500;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* サンクスページ内の戻るボタンがある場合 */
.reservation.thanks #contents .form-button,
#page.reservation.thanks #contents .form-button,
.reservation #contents .contentsin.comment .form-button{
  width:100%;
  max-width:320px;
  margin:38px auto 0;
}

@media (max-width:640px){
  .reservation.check #contents #frm_reservation_check .form-box,
  #page.reservation.check #contents #frm_reservation_check .form-box{
    padding:25px 18px 30px;
    border-radius:7px;
  }

  .reservation.check #contents #frm_reservation_check .form-set dl,
  #page.reservation.check #contents #frm_reservation_check .form-set dl{
    display:block;
    padding:15px 0;
  }

  .reservation.check #contents #frm_reservation_check .form-set dl dt,
  .reservation.check #contents #frm_reservation_check .form-set dl dd,
  #page.reservation.check #contents #frm_reservation_check .form-set dl dt,
  #page.reservation.check #contents #frm_reservation_check .form-set dl dd{
    width:100%;
  }

  .reservation.check #contents #frm_reservation_check .form-set dl dt,
  #page.reservation.check #contents #frm_reservation_check .form-set dl dt{
    padding:0 0 5px;
    color:#666;
    font-size:13px;
  }

  .reservation.check #contents #frm_reservation_check .form-set dl dd,
  #page.reservation.check #contents #frm_reservation_check .form-set dl dd{
    font-size:15px;
    line-height:1.7;
  }

  .reservation.check #contents #frm_reservation_check .form-button,
  #page.reservation.check #contents #frm_reservation_check .form-button{
    display:flex;
    flex-direction:column-reverse;
    gap:12px;
    margin:35px auto 50px;
  }

  .reservation.check #contents #frm_reservation_check .form-button .gochk,
  .reservation.check #contents #frm_reservation_check .form-button .gochk:last-child,
  #page.reservation.check #contents #frm_reservation_check .form-button .gochk,
  #page.reservation.check #contents #frm_reservation_check .form-button .gochk:last-child{
    width:100%;
    margin:0;
  }

  .reservation.thanks #contents .messagebox,
  #page.reservation.thanks #contents .messagebox,
  .reservation #contents .contentsin.comment .messagebox{
    margin-top:28px;
    padding:38px 20px 34px;
    border-radius:7px;
  }

  .reservation.thanks #contents .messagebox::before,
  #page.reservation.thanks #contents .messagebox::before,
  .reservation #contents .contentsin.comment .messagebox::before{
    width:54px;
    height:54px;
    margin-bottom:19px;
    font-size:29px;
  }

  .reservation.thanks #contents .messagebox h2,
  #page.reservation.thanks #contents .messagebox h2,
  .reservation #contents .contentsin.comment .messagebox h2{
    padding-bottom:17px;
    font-size:22px;
  }

  .reservation.thanks #contents .messagebox p,
  #page.reservation.thanks #contents .messagebox p,
  .reservation #contents .contentsin.comment .messagebox p{
    font-size:15px;
    line-height:1.8;
  }

  .reservation.thanks #contents .contentsin,
  #page.reservation.thanks #contents .contentsin,
  .reservation #contents .contentsin.comment{
    padding-bottom:90px;
  }
}

/* =========================================================
   Preferred date/time groups
   ========================================================= */
.reservation #contents .reservation-slot{
  max-width:680px;
  margin:26px auto;
  padding:0 22px 10px;
  border:1px solid #d9d9d9;
  border-radius:8px;
  background:#f8f8f8;
  box-sizing:border-box;
}

.reservation #contents .reservation-slot-title{
  margin:0 -22px;
  padding:11px 18px;
  border-radius:7px 7px 0 0;
  background:#7e7e80;
  color:#fff;
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  text-align:left;
}

.reservation #contents .reservation-slot dl{
  max-width:none;
  margin:0;
  padding:18px 0;
  border-bottom:1px solid #ddd;
}

.reservation #contents .reservation-slot dl:first-of-type{
  border-top:0;
}

.reservation #contents .reservation-slot dl:last-of-type{
  border-bottom:0;
}

.reservation #contents .reservation-slot .error:not(:empty){
  max-width:none;
  margin:-8px 0 12px calc(12em + 24px);
}

/* =========================================================
   Flatpickr mobile usability
   ========================================================= */
@media (max-width:640px){
  .reservation #contents .reservation-slot{
    margin:24px 0;
    padding:0 14px 8px;
    border-radius:7px;
  }

  .reservation #contents .reservation-slot-title{
    margin:0 -14px;
    padding:12px 14px;
    font-size:16px;
  }

  .reservation #contents .reservation-slot dl{
    padding:16px 0;
  }

  .reservation #contents .reservation-slot .error:not(:empty){
    margin:-5px 0 12px;
  }

  .flatpickr-calendar{
    width:calc(100vw - 24px) !important;
    max-width:390px !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    box-sizing:border-box;
  }

  .flatpickr-calendar .flatpickr-months,
  .flatpickr-calendar .flatpickr-rContainer,
  .flatpickr-calendar .flatpickr-weekdays,
  .flatpickr-calendar .flatpickr-days,
  .flatpickr-calendar .dayContainer{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  .flatpickr-calendar .flatpickr-month{
    height:52px;
  }

  .flatpickr-calendar .flatpickr-current-month{
    padding-top:13px;
    font-size:18px;
  }

  .flatpickr-calendar .flatpickr-prev-month,
  .flatpickr-calendar .flatpickr-next-month{
    width:48px;
    height:48px;
    padding:15px;
  }

  .flatpickr-calendar .flatpickr-weekday{
    height:38px;
    line-height:38px;
    font-size:14px;
  }

  .flatpickr-calendar .flatpickr-day{
    flex-basis:14.2857%;
    width:14.2857%;
    max-width:none;
    height:46px;
    line-height:46px;
    font-size:16px;
    border-radius:5px;
  }
}



/* =========================================================
   Flatpickr SP表示修正
   既存の reservation.css の一番下に追加してください。
   ========================================================= */
@media (max-width: 640px) {

  /* カレンダー全体を画面幅いっぱいに近づける */
  body .flatpickr-calendar {
    width: calc(100vw - 12px) !important;
    max-width: 520px !important;
    min-width: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }

  body .flatpickr-calendar.open {
    display: block !important;
  }

  /* 月・年号の表示領域を十分に確保 */
  body .flatpickr-calendar .flatpickr-months {
    position: relative !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    overflow: visible !important;
  }

  body .flatpickr-calendar .flatpickr-month {
    width: 100% !important;
    height: 64px !important;
    overflow: visible !important;
  }

  body .flatpickr-calendar .flatpickr-current-month {
    position: absolute !important;
    top: 0 !important;
    left: 54px !important;
    right: 54px !important;
    width: auto !important;
    height: 64px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transform: none !important;
  }

  /* 月のプルダウン */
  body .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    width: auto !important;
    min-width: 72px !important;
    max-width: 110px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    font-size: 20px !important;
    line-height: 38px !important;
    font-weight: 700 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* 年号 */
  body .flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    width: 92px !important;
    height: 38px !important;
    flex: 0 0 92px !important;
  }

  body .flatpickr-calendar .flatpickr-current-month input.cur-year {
    width: 100% !important;
    height: 38px !important;
    padding: 0 18px 0 4px !important;
    font-size: 20px !important;
    line-height: 38px !important;
    font-weight: 700 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* 前月・翌月ボタン */
  body .flatpickr-calendar .flatpickr-prev-month,
  body .flatpickr-calendar .flatpickr-next-month {
    top: 0 !important;
    width: 54px !important;
    height: 64px !important;
    padding: 20px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  body .flatpickr-calendar .flatpickr-prev-month svg,
  body .flatpickr-calendar .flatpickr-next-month svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* 曜日・日付エリアをカレンダー幅に合わせる */
  body .flatpickr-calendar .flatpickr-innerContainer,
  body .flatpickr-calendar .flatpickr-rContainer,
  body .flatpickr-calendar .flatpickr-weekdays,
  body .flatpickr-calendar .flatpickr-days,
  body .flatpickr-calendar .dayContainer {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body .flatpickr-calendar .flatpickr-weekdays {
    height: 44px !important;
  }

  body .flatpickr-calendar .flatpickr-weekday {
    height: 44px !important;
    line-height: 44px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  /* 日付セルを大きくしてタップしやすくする */
  body .flatpickr-calendar .flatpickr-day {
    flex: 0 0 14.285714% !important;
    width: 14.285714% !important;
    max-width: 14.285714% !important;
    height: 52px !important;
    line-height: 52px !important;
    margin: 0 !important;
    font-size: 18px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }
}

/* 幅の狭い端末では年月の文字サイズだけ少し調整 */
@media (max-width: 360px) {
  body .flatpickr-calendar .flatpickr-current-month {
    left: 46px !important;
    right: 46px !important;
    gap: 4px !important;
  }

  body .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
  body .flatpickr-calendar .flatpickr-current-month input.cur-year {
    font-size: 18px !important;
  }

  body .flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    width: 84px !important;
    flex-basis: 84px !important;
  }

  body .flatpickr-calendar .flatpickr-prev-month,
  body .flatpickr-calendar .flatpickr-next-month {
    width: 46px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  body .flatpickr-calendar .flatpickr-day {
    height: 48px !important;
    line-height: 48px !important;
    font-size: 17px !important;
  }
}