/* ===================================================================
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%;
    }
}

/* 
--------------------------------------------------
新検索パネル
--------------------------------------------------
*/
:root {
	--vacancy-search-fs: 3.73vw;
	--vacancy-search--form-fs: 6vw;
	--vacancy-search--ttl-fs: 9vw;
}
@media screen and (min-width: 560px) {
	:root {
		--vacancy-search-fs: 1.75vw;
		--vacancy-search--form-fs: 3vw;
		--vacancy-search--ttl-fs: 5vw;
	}
}
@media screen and (min-width: 960px) {
	:root {
		--vacancy-search-fs: 16px;
		--vacancy-search--form-fs: 20px;
		--vacancy-search--ttl-fs: 30px;
	}	
}

.vacancy--search{
	 width: 100%;
}
.vacancy--search .vacancy--search--inner{
	  width: 90%;
	  margin: 32px auto;
/*   padding: 1.5vw 1.5vw 10vw; */
}
.vacancy--search .vacancy--search--ttlWrap{
	text-align: center;
}
.vacancy--search .vacancy--search--ttl{
	font-size: var(--vacancy-search--ttl-fs);
	letter-spacing: 0.05em;
	line-height: 1.25
}
.vacancy--search .vacancy--search--ttl span{
	color: #e4b13d;
}
.vacancy--search .vacancy--search--ttl small{
	font-size: var(--vacancy-search-fs);
	display: block;
	letter-spacing: 0.05em;
    text-indent: 0.05em;
    margin-top: 1vw;
}
.vacancy--search .yprox_theme--default .inner{
	margin-top: 20px;
	gap: 10px;
}
.vacancy--search .yprox_theme--default .inner label{
	font-size: var(--vacancy-search-fs);
	margin-bottom: 0.5em;
}
.vacancy--search .yprox_theme--default .inner .js-yprox-searchForm__boxNoDate label{
	margin-bottom: 0;
}
.vacancy--search .yprox_theme--default .inner select{
	font-size: var(--vacancy-search--form-fs);
	border-radius: 4px;
	cursor: pointer;
}
.vacancy--search .yprox_theme--default .inner input[type="submit"]{
	font-size: var(--vacancy-search--form-fs);
	background-color: #d87601;
}
.vacancy--search .vacancy--search--mid{
	width: 100%;
}
.vacancy--search .vacancy--search--mid ul{
	width: 100%;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}
.vacancy--search .vacancy--search--mid li{
	width: 48%;
}
.vacancy--search .vacancy--search--mid a{
	font-size: var(--vacancy-search-fs);
	width: 100%;
	color: #FFFFFF;
	display: block;
	padding: 1.1rem 1rem 1rem;
	background-color: #e4b13d;
	border-radius: 4px;
}
.vacancy--search .vacancy--search--btm{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 15px 10px;
}
.vacancy--search .vacancy--search--btm li{
	width: calc(50% - 5px);
}
.vacancy--search .vacancy--search--btm li p{
	display: flex;
	align-items: center;
}
.vacancy--search .vacancy--search--btm li p::before{
	width: var(--vacancy-search-fs);
	height: var(--vacancy-search-fs);
    margin-right: 0.3vw;
    display: block;
    content: "";
    background-image: url(https://toyota.atinnhotels.com/wp-content/themes/atinn-toyota/img/arrow_y_forward_ios.svg);
    background-repeat: no-repeat;
    background-position: bottom 3px center;
	background-size: var(--vacancy-search-fs);
}

@media screen and (min-width: 560px) {
.vacancy--search .vacancy--search--mid a{
	font-size: var(--vacancy-search--form-fs);
}
	.vacancy--search .vacancy--search--mid--ico{
	position: relative;
}
	.vacancy--search .vacancy--search--mid--ico::after{
	content: "";
	width: 1.4em;
	height: 1.4em;
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
}
.vacancy--search .vacancy--search--mid--ico--plan::after{
	background-image: url(https://toyota.atinnhotels.com/wp-content/themes/atinn-toyota/img/top/top--vacancy--search--list.svg);
}
.vacancy--search .vacancy--search--mid--ico--room::after{
	background-image: url(https://toyota.atinnhotels.com/wp-content/themes/atinn-toyota/img/top/top--vacancy--search--hotel.svg);
}
	.vacancy--search .vacancy--search--btm{
		flex-wrap: nowrap;
		justify-content: center;
	}
	.vacancy--search .vacancy--search--btm li{
		width: calc(33% - 5px);
	}
.vacancy--search .vacancy--search--btm li p{
	font-size: var(--vacancy-search--form-fs);
}
}

@media screen and (min-width: 768px) {
	.yprox_theme--default .inner{
		align-items: unset;
	}
	.vacancy--search .vacancy--search--inner{
	  width: 100%;
	  max-width: 1100px;
	  margin: 40px auto;
	  padding: 2vw;
	}
	.vacancy--search .yprox_theme--default .inner{
		margin-top: 30px;
		gap: 15px;
	}
	.yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn
	.vacancy--search .yprox_theme--default .inner input[type="submit"]{
		width: calc(35% - 12px);
	}
	.yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn span.js-yprox-searchForm__boxCheckin-year{
		width: 40%;
	}
	.yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpCheckInn span:nth-of-type(n+2){
		width: calc(30% - 0.5rem);
	}
	.yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpAdults,
	.yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpNights,
	.yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpRooms{
		width: calc(15% - 12px);
	}
	.vacancy--search .yprox_theme--default .inner input[type="submit"]{
		width: calc(20% - 12px);
	}
	.yprox_theme--default:not([data-calendar]) .inner select:not(.flatpickr-monthDropdown-months){
		width: 100%;
	}
	.inner--pc--wrap{
		width: 100%;
		display: flex;
		gap: 15px;
	}
	.inner--pc--wrap .inner{
		width: calc(50% - 7.5px);
		align-items: center;
	}
	.vacancy--search .vacancy--search--mid ul{
		gap: 15px;
		justify-content: center;
	}
	.vacancy--search .vacancy--search--mid li{
		max-width: 250px;
	}
	.vacancy--search .vacancy--search--mid a{
		font-size: var(--vacancy-search-fs);
	}
	.vacancy--search .vacancy--search--btm li p{
		font-size: var(--vacancy-search-fs);
	}
}
@media screen and (min-width: 960px) {
	.vacancy--search .vacancy--search--ttl{
		font-size: 50px;
	}
	.vacancy--search .vacancy--search--ttl small{
		font-size: 14px;
		margin-top: 0;
	}
	.vacancy--search .yprox_theme--default .inner{
		margin-top: 40px;
		gap: 20px;
	}
	.yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpAdults,
	.yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpNights,
	.yprox_theme--default:not([data-calendar]) .inner .js-yprox-searchForm__wrpRooms{
		width: calc(12% - 12px);
	}
	.yprox_theme--default .inner select:not(.flatpickr-monthDropdown-months){
		padding: 1rem 0.5rem;
	}
	.vacancy--search .yprox_theme--default .inner--pc--wrap .inner{
		width: calc(60% - 7.5px);
		margin-top: 30px;
	}
	.inner--pc--wrap .inner:last-of-type{
		width: calc(40% - 7.5px);
	}
	.vacancy--search .vacancy--search--mid li{
		width: 48.5%;
		max-width: unset;
	}
	.vacancy--search .vacancy--search--btm{
		gap: 20px;
		justify-content: left;
	}
	.vacancy--search .vacancy--search--btm li{
		width: auto;
	}
}

/* 予約お知らせ */
.vacancy--search--info--wrap{
	width: 100%;
	margin-top: 20px;
}
.vacancy--search--info--txt{
	font-size: var(--vacancy-search-fs);
	text-align: center;
}
.vacancy--search--info--link{
	color: #FFFFFF;
	display: block;
	padding: 0.8em;
	background-color: #ED1C00;
	text-decoration: underline;
	line-height: 1.4;
	border-radius: 4px;
}
@media screen and (min-width: 768px) {
	.vacancy--search--info--wrap{
		margin-top: 40px;
	}
	.vacancy--search--info--txt{
		font-size: var(--vacancy-search--form-fs);
	}
}