/* ===================================================================
CSS information

file name  : yprox_searchForm_theme.css
author     : Abilive
style info : デフォルトtheme用CSS
=================================================================== */
/* label */
.yprox_theme--default .inner label {
    display: block;
    font-size: 0.8rem;
    margin-bottom: .3rem;
}

/* input */
.yprox_theme--default .inner input:not([type="submit"]):not([type='checkbox']):not([type='radio']):not([type='number']) {
    display: block;
    width: 100%;
}

.yprox_theme--default .inner input[type="submit"] {
    padding: .7rem;
    display: block;
    background-color: transparent;
    border: none;
    cursor: pointer;
    appearance: none;
    background-color: #232323;
    color: #fff;
    border-radius: .2rem;
    transition: opacity .3s ease-out;
}
@media (hover: hover) and (pointer: fine) {
    .yprox_theme--default .inner input[type="submit"]:hover {
        opacity: .7;
    }
}
.yprox_theme--default .inner input[name="dt"] {
    display: none !important;
}

/**
* カレンダータイプ
*/
.yprox_theme--default[data-calendar] {
    max-width: 1200px;
    margin: 0 auto;
}

.yprox_theme--default[data-calendar] .inner .js-yprox-searchForm__wrpCheckInn .flatpickr-wrapper {
    background-color: #fff;
    border: 1px solid #767676;
    /*padding: .5rem;*/
}

.yprox_theme--default[data-calendar] .inner .js-yprox-searchForm__wrpCheckInn .flatpickr-wrapper[disabled="disabled"] {
    opacity: .5;
}

.yprox_theme--default[data-calendar] .inner .js-yprox-searchForm__wrpCheckInn .flatpickr-wrapper::before {
    content: '';
    display: inline-block;
    margin-right: .3rem;
    background-size: 100% auto;
    width: 1rem;
    height: 1.2rem;
    transform: translate(.5rem, .5rem);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='26.791' viewBox='0 0 24 26.791'%3E%3Cg%3E%3Cpath fill='%23232323' d='M2.233 2.791h19.534A2.235 2.235 0 0 1 24 5.024v19.534a2.235 2.235 0 0 1-2.233 2.233H2.233A2.235 2.235 0 0 1 0 24.558V5.024a2.235 2.235 0 0 1 2.233-2.233Zm19.534 22.326a.559.559 0 0 0 .558-.558V5.024a.559.559 0 0 0-.558-.558H2.233a.559.559 0 0 0-.558.558v19.534a.559.559 0 0 0 .558.558Z' /%3E%3Cpath d='M23.163 10.046H.837a.837.837 0 0 1 0-1.674h22.326a.837.837 0 1 1 0 1.674Z'/%3E%3Cpath d='M17.581 4.465a.837.837 0 0 1-.837-.837V.837a.837.837 0 0 1 1.674 0v2.791a.837.837 0 0 1-.837.837Z'/%3E%3Cpath d='M6.418 4.465a.837.837 0 0 1-.837-.837V.837a.837.837 0 1 1 1.674 0v2.791a.837.837 0 0 1-.837.837Z'/%3E%3Cg%3E%3Cpath d='M11.999 19.255a1.118 1.118 0 1 1-1.116 1.119 1.116 1.116 0 0 1 1.119-1.119Z'/%3E%3Cpath d='M6.418 19.255a1.118 1.118 0 1 1-1.116 1.119 1.116 1.116 0 0 1 1.119-1.119Z'/%3E%3Cpath d='M17.581 13.674a1.118 1.118 0 1 1-1.116 1.119 1.116 1.116 0 0 1 1.119-1.119Z'/%3E%3Cpath d='M11.999 13.674a1.118 1.118 0 1 1-1.116 1.119 1.116 1.116 0 0 1 1.119-1.119Z'/%3E%3Cpath d='M6.418 13.674a1.118 1.118 0 1 1-1.116 1.119 1.116 1.116 0 0 1 1.119-1.119Z'/%3E%3Cpath d='M17.581 19.255a1.118 1.118 0 1 1-1.116 1.119 1.116 1.116 0 0 1 1.119-1.119Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    pointer-events: none;
}

.yprox_theme--default[data-calendar] .inner .js-yprox-searchForm__wrpCheckInn .flatpickr-wrapper input[type="text"] {
    display: block;
    background-color: transparent;
    border: none;
    cursor: pointer;
    appearance: none;
    margin-left: -1.3rem;
    padding: 0.5rem;
    padding-left: 1.8rem;
}

/* select */
.yprox_theme--default .inner select:not(.flatpickr-monthDropdown-months) {
    padding: .5rem;
    display: block;
}

/* checkInn / Out */
.yprox_theme--default .inner .js-yprox-searchForm__wrpCheckInn br {
    display: none;
}

.yprox_theme--default .inner .js-yprox-searchForm__boxNoDate label {
    display: inline-block;
    vertical-align: middle;
}

.yprox_theme--default .inner .js-yprox-searchForm__wrpCheckInn span {
    display: inline-block;
}

.yprox_theme--default .inner .js-yprox-searchForm__wrpCheckInn span em {
    font-size: 0.8rem;
    margin-left: .2rem;
}

/**
 * 768px以上
 */
@media screen and (min-width: 768px) {
    .yprox_theme--default .inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .yprox_theme--default .inner .js-yprox-searchForm__boxNoDate {
        display: block;
        width: 5rem;
        margin-left: .3rem;
        align-self: center;
    }

    .yprox_theme--default .inner .js-yprox-searchForm__boxNoDate label {
        margin-bottom: 0;
    }

    .yprox_theme--default .inner select:not(.flatpickr-monthDropdown-months) {
        padding: .5rem;
        display: block;
        width: calc(100% - 1rem);
    }

    /**
    * カレンダータイプ
    */
    .yprox_theme--default input[type="checkbox"] {
        transform: translate(0, .1rem);
    }

    .yprox_theme--default[data-calendar] .inner .js-yprox-searchForm__wrpCheckInn {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
    }

    .yprox_theme--default[data-calendar] .inner .js-yprox-searchForm__wrpAdults {
        width: 18%
    }

    .yprox_theme--default[data-calendar] .inner .js-yprox-searchForm__wrpNights,
    .yprox_theme--default[data-calendar] .inner .js-yprox-searchForm__wrpRooms {
        width: 18%;
    }

    .yprox_theme--default[data-calendar] .inner input[type="submit"] {
        width: 12%;
        align-self: flex-end;
    }

    .yprox_theme--default[data-calendar] .inner .js-yprox-searchForm__wrpCheckInn > label {
        width: 100%;
    }

    .yprox_theme--default[data-calendar] .inner .js-yprox-searchForm__wrpCheckInn .flatpickr-wrapper {
        flex: 1;
        display: flex;
    }

    /**
    * 泊数選択タイプ
     */
    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn > label {
        width: 100%;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn span:not(.js-yprox-searchForm__boxNoDate) {
        display: flex;
        align-items: center;
        width: 20%;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn span.js-yprox-searchForm__boxCheckin-year {
        width: 33%;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn span:nth-of-type(n+2) {
        margin-left: .5rem;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpAdults {
        width: 20%
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpNights,
    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpRooms {
        width: 12%;
    }
}

/**
 * 1024px以下
 */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    /* select */
    .yprox_theme--default .inner select:not(.flatpickr-monthDropdown-months) {
        padding: .5rem;
        display: block;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn > label {
        width: 100%;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn span:not(.js-yprox-searchForm__boxNoDate) {
        width: 20%;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn span.js-yprox-searchForm__boxCheckin-year {
        width: 26%;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn span:nth-of-type(n+2) {
        margin-left: .5rem;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpAdults {
        width: 18%
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpNights {
        width: 11%;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpRooms {
        width: 13%;
    }

    /* select */
    .yprox_theme--default:not([data-calendar]) .inner select:not(.flatpickr-monthDropdown-months) {
        padding: .5rem .2rem;
    }

}

/**
 * 767px以下
 */
@media screen and (max-width: 767px) {
    .flatpickr-calendar, .flatpickr-days {
        width: auto !important;
    }

    .yprox_theme--default .inner {
        display: flex;
        flex-wrap: wrap;
    }

    .yprox_theme--default[data-calendar] .inner div:nth-of-type(3) {
        margin-left: auto;
    }

    .yprox_theme--default .inner .js-yprox-searchForm__wrpCheckInn {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 1rem;
    }

    .yprox_theme--default .inner .js-yprox-searchForm__boxNoDate {
        display: block;
        margin-top: .3rem;
    }

    .yprox_theme--default .inner .js-yprox-searchForm__wrpAdults,
    .yprox_theme--default .inner .js-yprox-searchForm__wrpRooms,
    .yprox_theme--default .inner .js-yprox-searchForm__wrpNights {
        width: 48%;
        margin-bottom: 1rem;
    }

    .yprox_theme--default .inner input[type="submit"] {
        width: 100%;
        margin: 0 auto;
    }

    .yprox_theme--default .inner select:not(.flatpickr-monthDropdown-months) {
        width: 100%;
    }

    .yprox_theme--default .inner .js-yprox-searchForm__wrpCheckInn > label {
        width: 100%;
    }

    /**
   * カレンダータイプ
   */
    .yprox_theme--default[data-calendar] .inner .js-yprox-searchForm__wrpCheckInn .flatpickr-wrapper {
        flex: 1;
        display: flex;
    }

    .yprox_theme--default[data-calendar] .inner .js-yprox-searchForm__boxNoDate {
        width: 100%;
    }

    /**
     * 泊数選択タイプ
     */
    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpAdults {
        width: 100%;
    }

    .yprox_theme--default:not([data-calendar]) .inner div:nth-of-type(4) {
        margin-left: auto;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn span:not(.js-yprox-searchForm__boxNoDate) {
        display: flex;
        align-items: center;
        width: 32%;
    }

    .yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn span:not(.js-yprox-searchForm__boxNoDate):nth-of-type(n+2) {
        margin-left: 2%;
    }
}