/* 
ユーザー予約用スタイルシート
*/

/* 共通スタイルクラス */
/* テキスト赤 */
.txt-col-red {
   color: #c62601;
}
/* テキスト青 */
.txt-col-blue {
   color: #006291;
}
/* 背景グレー */
.bg-gray-ccc {
   background-color: #ccc;
}
/* マージン */
.mg-top-18 {
   margin-top: 18px;
}
/* 背景色 */
.bg-green-200 {
   background-color: #bbf7d0;
}
.bg-fullyReserved {
   background-color: #ffe1e1;
}

/*大枠  */
.outer-container {
   background: #ddd;
   padding: 60px 30px;
   color:#333;
}
.container {
   /* max-width:unset !important;
   padding:0 !important; */
}
.calendar-sys.container-wrap {
   padding: 60px 30px;
}
.car-flex {justify-content: space-between !important;}

/* 項目名 */
h2.step {
   color: #fff;
   font-size: 1.4em;
   border-left: 15px solid #313131;
   background-color: #313131;
   padding: 10px 30px 10px 15px;
   margin: 40px auto 15px auto;
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}
h3.substep {
   margin:8px 0;
}

/* 車種選択 */
.input-default {
   width:100%;
   height: 34px;
   border: 1px solid #ccc;
   padding:6px 12px;
   color: #555;
   border-radius: 4px;
   font-size:13px;
}

/* カレンダー */
#calendar {
   padding-left:0 !important;
   padding-right: 24px;
}
/* 年月表示 */
.currentMonthHeader {
   font-weight: bold;
   font-size: 1.5em;
   padding: 3px 15px;
   background-color: #eee;
}
/* 前月・次月ボタン */
.prevMonthBtn, .nextMonthBtn {
   font-size: 14px;
   font-weight: bold;
   background-color: #eee;
   display: inline-block;
   padding: 3px 15px;
}
/* 曜日 */
.day-row-item {
   color:#fff;
   background-color: #333;
}

/* ステップ２ */
.step2-flex-box {
   display: flex;
   justify-content: flex-start;
   background-color: #fff;
   padding:15px;
}
.step2-flex-left {
   width:200px;
   border-right: 1px solid #ccc;
}
.step2-flex-right {
   padding-left: 10px;
}


/* 時間帯表示 */
.time-selection {
   align-content: center;
   padding: 8px 0;
   font-size: 12px;
}

/* 地図 */
.acf-map {
   padding-bottom: 0 !important;
}

/* 料金 */
#calendar .step-price{
   color: #333;
 }
#calendar .step-price table {
   width:100%;
 }
 
 #calendar .step-price th{
   padding: 10px 15px;
   color: #333;
   font-weight: bold;
   text-align: left;
   border:1px solid #999;
   width: 110px;
   background-color: #f3f3f3;
 }
 
 #calendar .step-price td{
   padding: 10px;
   color: #333;
   text-align: right;
   border:1px solid #999;
   font-size: 16px;
   background-color: #fff;
 }
 
 #calendar .step-price td span.total{
   font-size: 21px;
   font-weight: bold;
   color: red;
 }
 
 #calendar .step-price small{
   font-weight: normal;
 }

 /* SUBMITボタン */

.confirm-reservation-btn {
   border:1px solid #999;
   color:#333;
   background-color: #eee;
   width:200px;
   padding:15px;
   margin: 20px auto 0;
}
.confirm-reservation-btn:hover {
   color:#fff;
   border:1px solid #dd2525;
   background-color: #dd2525;
}


 /* 情報確認 */
 .reservation-confirm-content {
   margin:60px auto;
 }
 .reservation-confirm-content h2.section-title {
   color: #fff;
   font-size: 1.4em;
   background-color: #313131;
   padding: 10px 30px 10px 15px;
   margin-bottom:0;
 }
 .reservation-confirm-content table {
   width: 100%;
 }
 .reservation-confirm-content th {
   width: 30%;
   padding: 10px 15px;
   margin-bottom: 10px;
   border: 1px solid #999;
   background-color: #f3f3f3;
 }
 .reservation-confirm-content td {
   width: 70%;
   padding: 10px 15px;
   margin-bottom: 10px;
   border: 1px solid #999;
   background-color: #fff;
 }
 .reservation-confirm-content .button-group {
   display: flex;
   justify-content: space-around;
   width: 80%;
   margin: 60px auto 0;
 }
 .reservation-confirm-content .button-group .btn {
   border:1px solid #999;
   color:#fff;
   background-color: #eee;
 }

 /* モーダル */
 .confirm-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.5);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
}

.confirm-modal-title {
   font-size:16px;
   text-align: center;
   margin-bottom:16px;
}

.confirm-modal-content {
   background: white;
   padding: 40px;
   border-radius: 5px;
   max-width: 800px;
   width: 90%;
}

.confirm-modal-attention {
   color:#dd2525;
   margin-bottom:8px;
}

.confirm-modal-textarea {
   width: 100%;
   height: 400px;
   margin-bottom: 20px;
   padding: 40px;
   resize: none;
   font-size:14px;
}

.confirm-modal-button-wrapper {
   text-align: center;
}
.confirm-modal-button {
   background-color: #dd2525;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
   cursor: not-allowed;
   /* background: #ccc; */
   opacity: 0.5;
   margin: 0 auto;
}

.confirm-modal-button.enabled {
   opacity: 1;
   cursor: pointer;
}

@media (max-width:599px){ 
   .calendar-sys.container-wrap {
      padding:30px;
   }
   .container {
      padding:0;
   }
   .car-flex {
      display: block;
   }
   .car-flex .car-main {width:100%;}

   #calendar {padding-right: 0;}
   .reserv-nav ul li {
      padding:5px;
      align-content: center;
   }
   .timeSlots-wrapper {flex-wrap: wrap;}
   .step2-flex-left{width:80px;}


   /* サイドバー */
   .car-flex .car-side {
      margin-top:40px;
      width:100%;
   }

   /* 予約内容確認ページ */
   .reservation-confirm-content .button-group {
      justify-content: space-between;
      width: 100%;
   }
   .confirm-modal-content {padding:20px;}
   .confirm-modal-textarea {padding:30px;}
   .reservation-confirm-content .button-group .btn{width: 47%;}
}