/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 14 2024 | 08:58:25 */
  /*****************************************************************************************
  *    BookingPackage 予約 枠
  *****************************************************************************************/
  :root{
    --slot-w : 80px;
    --slot-h : 70px;
    --slot-gap : 10px;
    --slotpanel-h : 100px;
    --slot-panel-cornar : 8px; /* 角の丸み */
    --slot-cornar : 4px; /* 角の丸み */
    --slot-font-size: 1.2rem;
    --slot-font-weight: 400; /* boldだとちょっと太い */
  }

  /* 大枠*/
  .p-bpr-wrap{
    margin-top: 1.9rem;
    padding-bottom: 20px;
    width: 100%;
    max-width: 100%;
  
    display:flex;
    flex-direction : column;
    background-color : var( --color-gray );
  }

  /* ヘッダー*/
  .p-bpr-heading{
    display : flex;
    flex-direction : column;
    justify-content : center;
    align-items:center;  
    width: 100%;
    /*background-color : var( --color-blue );*/
    color : var( --color-darkblue );
    padding-block : 1.3rem 2.2rem;
    font-weight: bold;
    img{  width: 108px !important;  }
  }

  .p-bpr-heading .ttl{
    margin-top : 15px;
    letter-spacing : 0.25rem !important;
    @media screen and (min-width: 576px) { font-size: var(--fs36) !important; }
    @media screen and (max-width: 575px) { font-size: var(--fs24) !important; }
    @media screen and (max-width: 374px) { font-size: var(--fs16) !important; }
  }


  /* インナー */
  .p-bpr-inner{
    display:flex;
    flex-direction: column;
    jusify-content:center;
    @media screen and (min-width: 576px) { max-width: calc( 100% - 132px ); }
    @media screen and (max-width: 575px) { max-width: calc( 100% - 40px ); }
    @media screen and (max-width: 374px) { max-width: calc( 100% - 20px ); }

    margin-inline : auto;
    width: 100%;
  }

  /* ダミー時間枠 */
  .p-bpr-schedule-dummywrap{
    display:flex;
    flex-direction : row;
    overflow-x: auto;
    padding-top : 15px;
    padding-bottom : 10px;
    scrollbar-width: none;
    height: var( --slotpanel-h ) !important;

    background-color: var( --color-white );
    border-bottom-left-radius : var( --slot-panel-cornar );
    border-bottom-right-radius: var( --slot-panel-cornar );
  }

  /* safari */
  .p-bpr-schedule-dummywrap::-webkit-scrollbar{
    opacity: 0;
  }


  .p-bpr-dummy-timeslot{
    scroll-snap-align: start; /* カルーセル処理 */
    display:flex;
    flex-direction : column;
    justify-content: center;
    align-items : center;
    width    : calc( var(--slot-w) - 0px );
    min-width: calc( var(--slot-w) - 0px );
    height   : calc( var(--slot-h) );
    margin-inline : 0px var(--slot-gap);
    background-color : var( --color-midgray );
    /*border : 1px solid var(--color-darkgray ) !important;*/
    line-height  : var( --slot-font-size );
    font-size    : var( --slot-font-size );
    font-weight  : var( --slot-font-weight );
    border-radius: var( --slot-cornar );
  }
  
  
  /* ダミーボタン枠 */
  .p-bpr-submit-dummywrap{
    display:flex;
    flex-direction : column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding-block: 26px 15px;
  }

  .p-bpr-submit-dummybtn{
    position :relative;
    display: flex;
    flex-direction : row;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 100px;
    width: 100%;
    max-width: 300px;
    padding-block: 12px;
    color : var( --color-midgray );
    background-color : var( --color-lightgray );
    font-size: 18px;
    font-weight: bold;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.10);
    transition : translate 0.3s, box-shadow 0.3s;
    .c-icon{
      margin-block:auto;
      filter: invert(40%);
    }
    .c-icon.--schedule   { width: 32px !important;  }
    .c-icon.--arrow-right{ position : absolute; right: 16px;  width: 12px !important; transition : right .3s;  }
  }

  /* javascriptで追加したHTMLに対するCSS　*/
  .p-bpr-calender-ttlwrap{
    padding-block: 6px 0px;
    background-color : var( --color-gray900 );
    color : var( --color-white );
    border-top-left-radius : var( --slot-panel-cornar );
    border-top-right-radius: var( --slot-panel-cornar );

    @media screen and (min-width: 768px) { font-size: var(--fs24); }
    @media screen and (max-width: 767px) { font-size: var(--fs16); }
    @media screen and (max-width: 374px) { font-size: var(--fs16sp10); }
  }

  .p-bpr-schedule-ttlwrap{
    padding-block: 6px 0px;
    background-color : var( --color-gray900 );
    color : var( --color-white );
    border-top-left-radius : var( --slot-panel-cornar );
    border-top-right-radius: var( --slot-panel-cornar );
    @media screen and (min-width: 768px) { font-size: var(--fs24); }
    @media screen and (max-width: 767px) { font-size: var(--fs16); }
    @media screen and (max-width: 374px) { font-size: var(--fs16sp10); }
  }

  /* スクロールボタン */
  .p-bpr-scrollbutton-left,
  .p-bpr-scrollbutton-right{
    position :sticky;
    scroll-snap-align: start; /* カルーセル処理 */
    display : flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    min-width: 30px;
    height: 60px;
    background-color: white;
    /* background-color: rgb(42, 175, 219, 0.5 ); */
    /*background-color: var( --color-orange200-05 );*/
    border-radius: 4px;
    transition : opacity 0.3s;
    /* 初期隠す */
    opacity: 0;
    pointer-events: none;
    &.--hide   { opacity: 0; pointer-events: none;    }
    &.--visible{ opacity: 1; pointer-events: visible; }
  }
  .p-bpr-scrollbutton-left:hover,
  .p-bpr-scrollbutton-right:hover{
    background-color: white;
    /* background-color: rgb(42, 175, 219, 0.8 ); */
    /*background-color: var( --color-orange200-08 );*/

    cursor:pointer;
    .arrow{ translate : 0px 0; }
  }
  .p-bpr-scrollbutton-left:hover{
    .arrow{ translate : -1px 0; }
  }

  .p-bpr-scrollbutton-right:hover{
    .arrow{ translate : 1px 0; }
  }


  .p-bpr-scrollbutton-left{  left: 0px; }
  .p-bpr-scrollbutton-right{ right: 0px; }


  .p-bpr-scrollbutton-left .arrow,
  .p-bpr-scrollbutton-right .arrow{
    /* ブーメラン型*/
    /*
    width : 20px;
    height: 20px;
    clip-path  : polygon(0 0, 100% 0, 100% 100%, calc( 100% - 4px) 100%, calc( 100% - 4px) 4px, 0 4px );
    background-color: white;
    */
    /* 三角 */
    width : 10px;
    height: 14px;
    clip-path  : polygon(0 0, 100% 50%, 0 100% );
    background-color: var( --color-gray900 );

    transition : translate 0.3s;
  }
  .p-bpr-scrollbutton-left .arrow{
    /* ブーメラン */
    /* rotate : -135deg;
    translate : 4px 0;
    */
    rotate : -180deg;

  }
  .p-bpr-scrollbutton-right .arrow{
    /* ブーメラン */
    /* rotate : 45deg;
    translate : -4px 0;
    */
    rotate : 0deg;
  }
  
  
  /*****************************************************************************************
  *    プラグイン:BookingPackage操作
  *****************************************************************************************/
  .start_booking_package{
    max-width: 100%;
    overflow: hidden;
  }
  
  #booking-package{
    background-color : transparent !important;
   display: flex !important;
   flex-direction : column;
  }
  
  input.wpcf7-submit {
  }
  /*********************************
  **    カレンダーパネル
  *********************************/
  #booking-package_calendarPage{
    display:none;
    flex-direction : row;
    align-items: center;
    overflow-x: hidden;
    overflow-y : hidden;
    background-color : white !important;
    height: 100px;
    margin-bottom : 20px !important;
    /*scrollbar-width: none;*/
    /*scrollbar-width: thin;*/
    border-bottom-left-radius : var( --slot-panel-cornar );
    border-bottom-right-radius: var( --slot-panel-cornar );
  }
  
  #booking-package_calendarPage .calendarHeader{
   display : none !important;
  }
  
  #booking-package_calendarPage .week_slot{
   display : none !important;
  }
  
  #booking-package_calendarPage .calendar{
    display: flex !important;
    align-items: center;
    max-width: 84vw;
    padding-block : 15px 15px;
    background-color: var( --color-white );
    /*overflow:scroll-x;*/
    /*overflow : auto hidden;*/
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-bottom : 0px !important;
  }
  
  /* safari対応 */
  #booking-package_calendarPage .calendar::-webkit-scrollbar{
    opacity: 0;
    height: 0;
  }

  #booking-package_calendarPage .calendar{
  }
  
  /* 日付 枠：サイズを固定 */
  #booking-package_calendarPage .day_slot{
    scroll-snap-align: start; /* カルーセル処理 */
    /*display:flex; */
    display : none; /* js上で見た目を整えた後表示するため */
    flex-direction : column;
    justify-content: center;
    
    width    : var(--slot-w);
    min-width: var(--slot-w);
    height   : var(--slot-h) !important;
    margin-inline : var(--slot-gap);
    margin-left   : 0px !important;
    margin-bottom : 0px !important;
    background-color : var(--color-gray200);
    /*/border : 1px solid var(--color-darkgray ) !important;*/
    border : 1px solid transparent !important;
    line-height : calc( var( --slot-font-size ) / 0.9 ) !important;
    font-size   : var( --slot-font-size );

    font-weight: var( --slot-font-weight );
    border-radius: var( --slot-cornar );
  }
  
  #booking-package_calendarPage .day_slot.selected{
    /*color : var( --color-white ) !important;*/
    background-color: var( --color-orange200 ) !important;
    /* 独自処理内でselected回避しても、
    　　元々のプラグインクリックイベントは消えない為、無効にする */
    pointer-events: none;
  }
  
  /* 無効な予約枠：消す */
  #booking-package_calendarPage .day_slot[data-onclick="0"]{
  /*display: none;*/
   background-color : var(--color-midgray);
  }
  /* 過ぎた日 */
  #booking-package_calendarPage .day_slot.pastDay{
    display: none;
    }
    
  #booking-package .hidden_panel{
  }
  
  /* カレンダーの非表示：強制表示 */
  #booking-package_calendarPage.hidden_panel{
   display: flex !important;
  }
  
  
  /*********************************
  **    時間パネル
  *********************************/
  #booking-package_schedulePage{
    display: flex;
    flex-direction : row;
    align-items: center;
    margin-top: 0px;
    /* background-color : transparent !important; */
    box-shadow : none !important;
    overflow-x : hidden;
    overflow-y : hidden;
    transition : opacity 0.3s;
    background-color : #FFF !important;
    height: var( --slotpanel-h );
    padding-inline : 0px;
    border-bottom-left-radius : var( --slot-panel-cornar );
    border-bottom-right-radius: var( --slot-panel-cornar );
  }

  #booking-package_schedulePage #blockPanel{
    height: 0 !important;
  }

  #booking-package_schedulePage .topPanel{
    background-color : transparent !important;  
  }
  
  #booking-package_schedulePage #topPanel.topPanel{
    height :0px;
    display:none;
  }
  
  #booking-package_schedulePage .selectedDate{
    display:none !important;
  }
  
  /* 時間パネル   */
  #booking-package_schedulePage #scheduleMainPanel{
    position : relative; /* absolute外し、左右に余白を作る */
    transition : opacity 0.3s;
    height: var( --slotpanel-h ) !important;
    /*padding-top : 15px;*/
    align-items:center;
    width: 100%;
    padding-inline : 30px 30px;
  }

  #booking-package_schedulePage .courseListPanel{
   display:flex;
   flex-direction : row;

   top : 0px !important;
   left: 0px !important;
   width: 100% !important;
   height: var( --slotpanel-h );
   overflow-x :auto !important;
   /*background-color : transparent !important; */
   scrollbar-width: none;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;    
   background-color: var( --color-white )  !important;
  }
  /* safari */
  #booking-package_schedulePage .courseListPanel::-webkit-scrollbar{
   opacity: 0;
  }
  
  #booking-package_schedulePage .daysListPanel{
    display: none !important;
  }
    
    
  #booking-package_schedulePage .closed{
   padding-block : 0px !important;
   padding-inline : 10px !important;
  }
  /* 時間パネルの非表示：強制表示 */
  #booking-package_schedulePage.hidden_panel{
   display: flex !important;
   /*flex-direction : column;*/
  }
  
  #booking-package_schedulePage #bottomPanel{
   display : none !important;
   background-color : transparent !important;
  }
  
  /* 時間枠一つ */
  #booking-package .selectable_time_slot{
   scroll-snap-align: start; /* カルーセル処理 */
   margin-top: 0px;
   display:flex;
   flex-direction : column;
   justify-content: center;
   align-items : center;

   width: calc( var(--slot-w) - 1px );
   min-width:var(--slot-w);
   max-width:var(--slot-w);
   height: var(--slot-h) !important;
   margin-inline : 0 var(--slot-gap);
   margin-left : 0px !important;
   /* background-color : #FFF; */
   background-color : var(--color-gray200) !important;
   /*border : 1px solid var(--color-darkgray ) !important;*/
   line-height  : var( --slot-font-size );
   font-size    : var( --slot-font-size );
   font-weight  : var( --slot-font-weight );
   border-radius: var( --slot-cornar );
   transition   : opacity 0.3s;
}
/* 無効な時間 */
#booking-package .selectable_time_slot[data-status="0"],
#booking-package .selectable_time_slot[data-status="0"]:hover{
    /* 消すパターン */
  /*display:none;*/
  /* ダミーと同じグレーアウト */
  background-color : var( --color-midgray ) !important;
  color : var( --color-font-b );
  text-decoration: line-through; /* 打消し線 */
}
#booking-package .selectable_time_slot[data-status="0"]:hover{
  cursor:default;
}

  /* 選択中の時間枠*/
  #booking-package_schedulePage .selectedTimeSlotPanel{
    background-color : var(--color-orange200 ) !important;
    /*color : var(--color-font-w) !important;*/
    /*border : 1px solid var(--color-blue ) !important;*/
  }
  
  #booking-package_schedulePage .bottomPanelForPositionInherit{
   display : none !important;
  }
  
  #booking-package_schedulePage .box_shadow{
    box-shadow : none !important;
  }
  
  
  /*********************************
  **    予約ボタンパネル
  *********************************/
  #booking-package_inputFormPanel.hidden_panel{
   display: flex !important;
   flex-direction : column;
  }
  /* 背景色 */
  #booking-package_inputFormPanel{
  background-color : transparent !important;
  }

  #booking-package_inputFormPanel .cartPanel {
      margin-top: 0 !important;
  }

  /* タイトル*/
  #booking-package_inputFormPanel .title_in_form{
   display:none;
  }
  /* input要素 */
  #booking-package_inputFormPanel .row{
   display:none;/*  最終的に非表示 */
   text-align:left;
   border-color : transparent !important;
  }
  /* 戻るボタン*/
  #booking-package_inputFormPanel .return_form_button{
   display:none;
  }
  
  #booking-package_pay_locally{
    /*margin-top: 46px !important;*/
    margin-top : 26px !important;
    display : flex;
    flex-direction : column;
    align-items : center;
    gap: 8px;

  }
  
  /* サブミットボタン */
  #booking-package_pay_locally .book_now_button{
    position :relative;
    display: flex;
    flex-direction : row;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 100px;
    max-width: 300px;
    padding-block: 12px 12px;
    background-color : var( --color-orange );
    font-size: 18px;
    font-weight: bold;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.10);
    transition : translate 0.3s, box-shadow 0.3s, opacity 0.3s;
    .c-icon{
      margin-block:auto;
    }
    .c-icon.--schedule   { width: 32px !important;  }
    .c-icon.--arrow-right{ position : absolute; right: 16px;  width: 12px !important; transition : right .3s;  }
  }

  #booking-package_pay_locally .book_now_button:not([disabled]){
    cursor : pointer;
  }
  #booking-package_pay_locally{
    .book_now_button:disabled{
      pointer-events:none;
      background-color: var(--color-midgray);
    }
  }
  

  #booking-package_pay_locally .book_now_button:hover{
   translate : 0 2px;
   box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
   color : var( --color-white );
   opacity: .8;
 
   .c-icon.--arrow-right{ right: 12px;  }

  }