:root {
  --main-color: linear-gradient( 135deg, #a6d9fe 10%, #58b7fa 100%);
  --border-color: rgb(236, 236, 236);
  --table-border-color: rgb(117, 116, 116);
  --main-font-color: #4e4e4e;
  --sub-color: rgb(219, 219, 219);
  --caution: rgb(255, 154, 154);
  --subBtnColor: rgb(255, 171, 171);
  --buttonColor: #4e4e4e;
  --calendarTimeColor: #a6d9fe;
  --calendarTimeFont: #4e4e4e;
  --indicator1: rgb(189, 251, 189);
  --indicator2: rgb(254, 254, 195);
  --indicator3: rgb(252, 199, 199);
}
.alertMsg{
    color: var(--caution);
}
body{

    font-family: sans-serif;
    margin: 0;
    color: var(--main-font-color);
    font-size: 1em;
    
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
i{
    color: transparent;
	background: var(--main-color);
    -webkit-background-clip: text;
    font-size: 1.3em;
    vertical-align: middle;
    
}
header{

    padding: 0px;
    font-size: 0.8em;
    
}
header{
    background: var(--main-color);
    padding: 10px 0;
    width: 100%;
    box-shadow: 0px -3px 10px 0px black;
  
}

header img{


    margin-left: 10px;
    vertical-align: middle;
   display: inline-block;

 
}

header a{
    margin: 0 !important;
}


  /* HTML: <div class="loader"></div> */
.loader {
    width: 60px;
    aspect-ratio: 1;
    background:
      linear-gradient(var(--indicator1) 0 0),
      linear-gradient(var(--indicator1) 0 0),
      linear-gradient(var(--indicator1) 0 0),
      linear-gradient(var(--indicator1) 0 0),
      linear-gradient(var(--indicator2) 0 0),
      linear-gradient(var(--indicator2) 0 0),
      linear-gradient(var(--indicator3) 0 0),
      linear-gradient(var(--indicator3) 0 0);
    background-size: 25% 25%,25% 25%,25% 25%,25% 25%,25% 50%,25% 50%,50% 25%,50% 25%;
    background-repeat: no-repeat;
    animation: l20 1.5s infinite alternate;
    transform-origin: center; /* 回転の基準点を中心に設定 */
    position: fixed; /* 画面に固定 */
  }
  @keyframes l20 {
    0%,
    10%  {background-position: 
              calc(1*100%/3) calc(1*100%/3),calc(2*100%/3) calc(1*100%/3),calc(1*100%/3) calc(2*100%/3),calc(2*100%/3) calc(2*100%/3),
              calc(1*100%/3) 50%,calc(2*100%/3) 50%,50% calc(1*100%/3),50% calc(2*100%/3)}
    33%  {background-position: 
              calc(0*100%/3) calc(0*100%/3),calc(3*100%/3) calc(0*100%/3),calc(0*100%/3) calc(3*100%/3),calc(3*100%/3) calc(3*100%/3),
              calc(1*100%/3) 50%,calc(2*100%/3) 50%,50% calc(1*100%/3),50% calc(2*100%/3)}
    66%  {background-position: 
              calc(0*100%/3) calc(0*100%/3),calc(3*100%/3) calc(0*100%/3),calc(0*100%/3) calc(3*100%/3),calc(3*100%/3) calc(3*100%/3),
              calc(0*100%/3) 50%,calc(3*100%/3) 50%,50% calc(1*100%/3),50% calc(2*100%/3)}
    90%,
    100%  {background-position: 
              calc(0*100%/3) calc(0*100%/3),calc(3*100%/3) calc(0*100%/3),calc(0*100%/3) calc(3*100%/3),calc(3*100%/3) calc(3*100%/3),
              calc(0*100%/3) 50%,calc(3*100%/3) 50%,50% calc(0*100%/3),50% calc(3*100%/3)}
  }
.navbar{
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    padding: 0 10px;
    width: fit-content;
    margin: 0 0 0 auto;
    float: right;
    position: absolute;
    right: 0px;
}
.navbar-toggler{
    
    display: flex;
    width: auto;
    margin: 0 0 0 auto;
    background: rgba(255, 0, 0, 0);
    
}

.navbar{
}
.navbar-nav {
    flex-direction: row; /* 横に並べる */
}
.navbar-nav {
flex-direction: column; /* 縦に並べる */
text-align: right; /* 中央寄せ */

}
.navbar-collapse{
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.834);
    border-radius: 10px;
}
.bav-item{
    margin-top: 10px;
}

footer{
    background: var(--main-color);
    color: var(--buttonColor) !important;
    text-align: center;
    font-size: 0.8em;
    padding: 5px;
    margin: 0;
}

h1{
    font-size: 1.2em;
    border-bottom: 1px solid var(--main-color);
    width: fit-content;
    margin: 20px auto;
    font-weight: normal;


}
h2{
    font-size: 1em;
    text-align: center;
    margin: 0;
    font-weight: normal;
}
h3{
    font-size: 0.8em;
    font-weight: normal;
    margin: 10px 0;
    font-weight: normal;
}

a{
    text-decoration: none;
    color: inherit;
}
a:hover{
    text-decoration: none;
}
.headerLogo{
    width: 70%;
}
.mainContainer{
    margin: 10px;
}

p{
    margin: 10px 0;
}

input, select {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 4px;
    background-color: inherit;
    color: inherit;
    font-size: 1em;
    font-weight: normal;
    width: 150px;
}
textarea{
    width: 100%;
    height: 100px;
    padding: 10px;
    color: inherit;
}
.selectbox-002 {
    position: relative;
}

.selectbox-002::before,
.selectbox-002::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

.selectbox-002::before {
    right: 0;
    display: inline-block;
    width: 2.4em;
    height: 2.4em;
    border-radius: 0 3px 3px 0;
    background-color: var(--sub-color);
    content: '';
}

.selectbox-002::after {
    position: absolute;
    top: 50%;
    right: 1.2em;
    transform: translate(50%, -50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
}

.selectbox-002 select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 230px;
    height: 2.4em;
    padding: .2em .8em .2em .8em;
    border: 1px solid var(--sub-color);
    border-radius: 3px;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}

.selectbox-002 select:focus {
    outline: 1px solid var(--sub-color);
}
.couponGetBtn{
    background-color: var(--sub-color);
    color: white;
    border: var(--sub-color);
}
.checkoutTable label{
    display: inline;
}
input{
    width: 90%;
}

button, .button-a{
    display: block;
    width: 100%;
    margin: 10px auto;
    padding: 10px 0;
    background: var(--main-color);
    border: 1px solid var(--sub-color);
    border-radius: 3px;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
    color: var(--buttonColor) !important;


}
table{
    width: 100%;
}
table td{
    padding: 5px 0;
}


/*スペースコンテナ*/
.outer-container {
    overflow-x: auto;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}
  
.inner-container {
    display: inline-block; /* 複数の spaceContainer を横に並べる */
    width: 100%;
}
  
.spaceContainer{
    display: inline-block;
    width: 90%;
    vertical-align: top;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgb(201, 201, 201);
    margin: 20px auto;
    padding: 20px 10px;
    white-space: normal;
}

.spaceContainer h2{
    font-size: 1em;
}

.spaceContainer p{
    text-align: center;
}

.spaceContainer img{
    display: inline-block;
    width:49%;
}
.spaceContainer i{
    line-height: 18px;
    width: 20px;
    text-align: center;
    position: relative;
    top: -1px; /* 下にずれているならマイナス値にして上へ */
}

.spaceContainer td,
.spaceContainer th{
  text-align: left;
  font-size: 0.8em;
  padding: 5px 0;
  vertical-align: middle;
}
.discountTable td{

    color: rgb(109, 109, 109);
    font-size: 0.75em;
}
.discountTable{
    margin-top: 10px;
}

.spaceContainer span{
    border: 1px solid;
    border-radius: 4px;
    padding: 5px;
    color: rgb(79, 113, 228);
    margin: 10px 0;
}


.spaceListContainer{

    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgb(201, 201, 201);
    margin: 20px auto;
    padding: 20px 10px;

}

.spaceListContainer p{

    text-align: center;

}

.spaceListContainer img{

    display: inline-block;
    width:49%;

}

.spaceListContainer td,
.spaceListContainer th{

  text-align: left;
  font-size: 0.8em;
  padding: 5px 0;

}
.discountLabel{
    font-size: 0.9em !important;
}


/*カレンダー日時選択*/


.selectDateContainer{
    text-align: center;
}
.pickerContainer{
    display: inline-block;
    margin: 0 !important;
    vertical-align: middle;
}
.pickerContainer input{
    display: block;
    width: 40%;
    text-align: center;
    margin: 20px auto;
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    font-size: 1em;
}
.flatpickr,.flatpickr-input,.flatpickr-mobile{
    width: 100% !important;
    margin: 0 !important;
    padding: 0;
    vertical-align: middle;
}

/*カレンダーテーブル*/
.scheduleHeader{
    padding: 0 7px !important;
    background-color: rgb(248, 248, 248);
    font-size: 0.7em;
    position: sticky;
    top: 0;
    z-index: 1;
    border-top:#FFFFFF;
    color: rgb(121, 120, 120);
    
}
.scheduleTable{
    border-collapse: collapse;
    margin: 20px auto;
    width: 96%;
}
.scheduleTable td{
    text-align: center;
    border: 1px solid var(--table-border-color);
    padding: 10px 0;
}
.selectDateContainer a{
    display: inline-block;
    width: 10%;
    vertical-align: middle;
}
.selectDateContainer input{
    width: 150px;
    text-align: center;
  
}
.scheduleTime{
    background-color: #fafafa;
    font-size: 0.9em;
    padding: 0 3px !important;
    color: rgb(121, 120, 120);
}
.scheduleFalse{
    background-color: var(--sub-color);
}

/*チェックアウト*/
.checkoutTable{
    width: 100%;

}
.checkoutTable td{
    
    margin-left: 10px;
}

.subBtnColor{
    background-color: var(--subBtnColor);
    color: white;
}

#card-errors{
    color: var(--caution);
}

.bookingListContainer{
    background-color: var(--sub-color);
    padding: 10px;
    margin: 10px 0;
    box-shadow: 0 4px 8px rgba(1, 10, 10, 0.3);
    border-radius: 4px;
}
.homepageExplainContainer{

    width: 80%;
    padding: 10px;
    margin: 20px auto;
    border: 1px solid rgb(178, 178, 178);
    border-radius: 8px;

}
.homepageExplainContainer label{
    display: block;
}
.homepageExplainContainer input{
    width: 100%;
}
.homepageExplainContainer a{
    background-color: #58b7fa;
    display: block;
    width: 100%;
    margin: 10px 0;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
}
.modalContents label{
    display: block;
    width: 100%;
}
.modalContents input{
    width:100%;
}
.close{
    width: auto;
}
.submit{
    margin-top: 20px;
    background-color: var(--subBtnColor);
}

.navbar-toggler{
    background-color: rgba(255, 255, 255, 0.092);
}
.providedContainer{
    margin: 10px;
    color: gray;
}
.providedContainer img{
    width: 100px;
}
.providedContainer a:hover{
    color: inherit;
}


/*PC*/
@media (min-width: 1080px) {

    .navbar-collapse{

        background-color: rgba(255, 255, 255, 0);

    }

    .userInquiry img, .ownerInquiry img{
        width: 40% !important;
    }
    .userInquiry, .ownerInquiry{
        width: 60%;
    }
    .formContainer{
        width: 50%;
    }

    .formContainer input{
        width: 50%;
       
    }

    body{
        font-size: 1.1em;

    }
    footer{
        background: var(--main-color);
        color: var(--buttonColor) !important;
        text-align: center;
        padding: 25px;
        margin: 0;
    }
    a, .subtmit{
        margin: 25px 0 !important;
    }
    .webContainer{
        width: 50%;
        margin: 20px auto;
        border: 1px solid rgb(178, 178, 178);
        padding: 20px;
        border-radius: 10px;
    }
    .headerLogo{
        width: 30%;
    }
    .bookingListContainer{
        width: 24%;
        display: inline-block;
    }
    .spaceListContainer{
        width: 100%;
    }
    .spaceContainer{
        width: 30% !important;
    }
    #calendarContainer{
        width: 40%;
        display: inline-block;
        vertical-align: top;
    }
    #checkoutContainer{
        width: 45%;
        display: inline-block;
        vertical-align: top;
        margin: 100px 50px;
    }

    .homepageExplainContainer{

        width: 35%;
        padding: 20px;
       
    }


}