/* ===================================================================
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-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; */
}
/* グループ・エリア検索フォーム */
.yprox_theme--default[data-calendar] .inner .outer_group_select:has(.wrp_area_select) {
	width: 100%;
	margin-bottom: 1rem;
}
.yprox_theme--default[data-calendar] .inner .outer_group_select .wrp_group_select {
	width: fit-content;
}

/* 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 .inner .js-yprox-searchForm__wrpGroupSelect select,
	.yprox_theme--default .inner .js-yprox-searchForm__wrpAreaGroupSelect select {
		width: 100%;
	}

    /**
    * カレンダータイプ
    */
    .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[data-calendar] .inner:has(.wrp_group_select):not(:has(.wrp_areaselect)) .js-yprox-searchForm__wrpCheckInn,
	.yprox_theme--default[data-calendar] .inner:has(.wrp_areaselect):not(:has(.wrp_group_select)) .js-yprox-searchForm__wrpCheckInn {
		width: fit-content;
		max-width: 35%;
		margin-right: 1rem;
	}


	.yprox_theme--default[data-calendar] .inner:has(.wrp_group_select):not(:has(.wrp_areaselect)) .outer_group_select {
		width: fit-content;
		max-width: 25%;
	}

	.yprox_theme--default[data-calendar] .inner:has(.wrp_group_select) .js-yprox-searchForm__wrpAdults {
		width: fit-content;
		margin-right: .5rem;
	}

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

    /* エリア＆ホテル両方がある場合は2行構成にする */
    .yprox_theme--default[data-calendar] .inner:has(.wrp_areaselect):has(.wrp_group_select) {
        column-gap: 1rem;
        row-gap: .75rem;
    }

	.yprox_theme--default[data-calendar] .inner:has(.wrp_areaselect):not(:has(.wrp_group_select)) .outer_area_group_select,
	.yprox_theme--default[data-calendar] .inner:has(.wrp_group_select):not(:has(.wrp_areaselect)) .outer_group_select {
        margin-right: 1rem;
    }

    .yprox_theme--default[data-calendar] .inner:has(.wrp_areaselect):has(.wrp_group_select) .outer_area_group_select,
    .yprox_theme--default[data-calendar] .inner:has(.wrp_areaselect):has(.wrp_group_select) .outer_group_select {
        flex: 1 1 calc(50% - .5rem);
        max-width: calc(50% - .5rem);
        margin-bottom: 0;
    }
	.yprox_theme--default[data-calendar] .inner .outer_area_group_select select,
    .yprox_theme--default[data-calendar] .inner .outer_group_select select {
        width: 100%;
    }
	.yprox_theme--default[data-calendar] .inner .outer_group_select select.is-no-hotels {
		background-color: #eee;
		color: #333;
		pointer-events: none;
	}
	.yprox_theme--default[data-calendar] .inner:has(.wrp_areaselect):has(.wrp_group_select) .outer_area_group_select .wrp_areaselect,
    .yprox_theme--default[data-calendar] .inner:has(.wrp_areaselect):has(.wrp_group_select) .outer_group_select .wrp_group_select {
        width: 100%;
    }

	.yprox_theme--default[data-calendar] .inner:has(.wrp_group_select) .js-yprox-searchForm__wrpCheckInn {
		flex-direction: column;
	}

	.yprox_theme--default .inner:not(:has(.wrp_group_select)) input[type="submit"] {
		opacity: 1 !important;
	}

	.yprox_theme--default[data-calendar] .inner:has(.wrp_group_select) .js-yprox-searchForm__wrpCheckInn .js-yprox-searchForm__boxNoDate {
		align-self: flex-start;
		margin-left: 0;
	}

	.yprox_theme--default .inner:has(.wrp_group_select){
		align-items: flex-start;
	}
	.yprox_theme--default[data-calendar] .inner:has(.wrp_group_select) input[type="submit"] {
		align-self: flex-start;
		margin-top: 1rem;
	}

    /**
    * 泊数選択タイプ
     */
	.yprox_theme--default:not([data-calendar]) .js-yprox-searchForm__wrpCheckInn {
	}
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_areaselect) .js-yprox-searchForm__wrpCheckInn span,
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_group_select) .js-yprox-searchForm__wrpCheckInn span {
		width: 31% !important;
	}
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_group_select) .js-yprox-searchForm__wrpCheckInn .js-yprox-searchForm__boxNoDate {
		align-self: flex-start;
		margin-left: 0;
		width: 100% !important;
	}
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_group_select) input[type="submit"] {
		margin-top: 1rem;
	}
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_group_select):not(:has(.wrp_areaselect)) .js-yprox-searchForm__wrpGroupSelect,
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_areaselect):not(:has(.wrp_group_select)) .js-yprox-searchForm__wrpAreaGroupSelect {
		width: 15%;
		margin-right: 1rem;
	}
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_group_select):not(:has(.wrp_areaselect)) .js-yprox-searchForm__wrpCheckInn,
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_areaselect):not(:has(.wrp_group_select)) .js-yprox-searchForm__wrpCheckInn {
		width: 40%;
	}

	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_group_select):not(:has(.wrp_areaselect)),
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_areaselect):not(:has(.wrp_group_select)) {
		align-items: flex-start;
	}

	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_group_select):not(:has(.wrp_areaselect)) input[type="submit"],
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_areaselect):not(:has(.wrp_group_select)) input[type="submit"] {
		margin-top: 1rem;
	}

	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_group_select):not(:has(.wrp_areaselect)) .js-yprox-searchForm__wrpAdults,
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_areaselect):not(:has(.wrp_group_select)) .js-yprox-searchForm__wrpAdults {
		width: 15%;
	}
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_group_select):not(:has(.wrp_areaselect)) .js-yprox-searchForm__wrpNights,
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_areaselect):not(:has(.wrp_group_select)) .js-yprox-searchForm__wrpNights {
		width: 9%;
	}
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_group_select):not(:has(.wrp_areaselect)) .js-yprox-searchForm__wrpRooms,
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_areaselect):not(:has(.wrp_group_select)) .js-yprox-searchForm__wrpRooms {
		width: 10%;
	}

	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_group_select):has(.wrp_areaselect) .js-yprox-searchForm__wrpGroupSelect,
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_group_select):has(.wrp_areaselect) .js-yprox-searchForm__wrpAreaGroupSelect {
		flex: 1 1 calc(50% - .5rem);
        max-width: calc(50% - .5rem);
        margin-bottom: 1rem;
	}
	.yprox_theme--default:not([data-calendar]) .inner:has(.wrp_group_select):has(.wrp_areaselect) .js-yprox-searchForm__wrpGroupSelect {
		margin-left: 1rem;
	}
    .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%;
    }

	.yprox_theme--default:not([data-calendar]) .inner:not(:has(.wrp_group_select)):not(:has(.wrp_areaselect)) input[type="submit"] {
		align-self: flex-end;
	}
}

/**
 * 1024px-768px
 */
@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%;
    }

	.yprox_theme--default .inner .outer_area_group_select,
    .yprox_theme--default .inner .outer_group_select {
		width: 100%;
		max-width: 100%;
    }

	.yprox_theme--default .inner .outer_area_group_select .wrp_areaselect,
    .yprox_theme--default .inner .outer_group_select .wrp_group_select {
        width: 100% !important;
		margin-bottom: 1rem;
    }

	.yprox_theme--default .inner .outer_area_group_select select,
    .yprox_theme--default .inner .outer_group_select select {
        width: 100%;
    }

	.yprox_theme--default .inner .js-yprox-searchForm__wrpRooms {
		margin-left: auto;
    }
}