@charset "utf-8";

input::-ms-clear {
	visibility: hidden !important;
}
select::-ms-expand {
	display: none;
}

.hide {
	display: none;
}

/* ----------------------------- form + icon */

.searches .searcher,
.searches .datepicks ,
.searches .selector label {
	position: relative;
}

/* select + icon */

.searches .selector label::after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f0d7";
	position: absolute;
	top: 50%;
	right: 12px;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
	font-size: 16px;
	color: #333;
}

/* suggest + icon */
.searches .searcher label::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f002";
	position: absolute;
	top: 50%;
	left: 10px;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
	font-size: 20px;
	color: #878787;
}

/* datepicks + icon */
.searches .datepicks label::after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f073";
	position: absolute;
	top: 50%;
	right: 6px;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
	font-size: 20px;
	color: #878787;
}

/* 都市検索のサジェスト */
.searcher{
	position: relative;
	display: block;
}

.searcher .clear-suggest{
	position: absolute;
	right: 2px;
	top: 33%;
	cursor: pointer;
	color: #cccccc;
	width: 25px;
}
@media (max-width: 768px) {
	.searches input[type=text], .searches select {
		font-size: 16px !important;
		/*transform: scale(0.8) !important;*/
	}
	.sample-suggest-area {
		max-width: 100%;
	}
	.sample-suggest-area li {
		white-space: normal !important;
		padding: 10px 16px !important;
	}
	.searcher .clear-suggest{
		position: absolute;
		right: 2px;
		top: 28%;
		cursor: pointer;
		color: #cccccc;
		width: 25px;
		height: 25px;
	}
	.searcher .clear-suggest .fas{
		line-height: 25px;
	}
}
/* defualt suggest */
.def-suggest-area {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 999;
	color: #333;
	background: rgba(255,255,255, .9);
	box-shadow:0px 2px 3px 1px rgba(0,0,0,0.14),0px -1px 3px -3px rgba(0,0,0,0.17);
	-moz-box-shadow:0px 2px 3px 1px rgba(0,0,0,0.14),0px -1px 3px -3px rgba(0,0,0,0.17);
	-webkit-box-shadow:0px 2px 3px 1px rgba(0,0,0,0.14),0px -1px 3px -3px rgba(0,0,0,0.17);
	padding: 10px 16px;
}
.def-suggest-area .h3,
.def-suggest-area > h3 {
	font-weight: bold;
	font-size: 1.4rem;
	margin: 0 0 10px;
	text-align: left;
}
.def-suggest-area > p {
	text-align: right;
	font-size: 1.6rem;
}
.def-suggest-area > div h4 {
	font-weight: bold;
	font-size: 1.3rem;
	margin: 0 0 6px;
}

@media (min-width: 769px) {

	.def-suggest-area > div {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		width: 100%;
	}
	.def-suggest-area > div > div:not(:last-child) {
		padding: 0 13px 0 0;
		margin: 0 13px 0 0;
		border-right: 1px #ccc solid;
	}
	.def-suggest-area > div li {
		font-size: 1.2rem;
		line-height: 2;
		cursor: pointer;
	}
	.def-suggest-area > div li:hover {
		background:#ddd;
	}

}

/* jquery autocompleteを利用したサジェスト */
.ui-autocomplete.ui-menu {
	padding: 10px;
	border: none;

	background: rgba(255,255,255, .9);
	box-shadow:0px 2px 3px 1px rgba(0,0,0,0.14),0px -1px 3px -3px rgba(0,0,0,0.17);
	-moz-box-shadow:0px 2px 3px 1px rgba(0,0,0,0.14),0px -1px 3px -3px rgba(0,0,0,0.17);
	-webkit-box-shadow:0px 2px 3px 1px rgba(0,0,0,0.14),0px -1px 3px -3px rgba(0,0,0,0.17);
}
@media (max-width: 768px) {
	.ui-autocomplete.ui-menu {
		width: calc(100% - 40px);
	}
}

.ui-menu [data-category="AIRPORT"]::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f072";
	color: #52a1cb;
	margin: 0 4px 0 0;
}
.ui-menu [data-category="STATION"]::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f238";
	color: #52a1cb;
	margin: 0 4px 0 0;
}
.ui-menu [data-category="POPULAR_SPOT"]::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f024";
	color: #cc586b;
	margin: 0 4px 0 0;
}

.ui-menu [data-type="city"]::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f3c5";
	margin: 0 4px 0 0;
	color: #2bb32b;
}

.ui-menu [data-type="hotel"]::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f236";
	margin: 0 4px 0 0;
	color: #FF883D;
}



.ui-menu .ui-menu-item {
	font-size: 1.2rem;
	padding: 5px !important;
	color: #333;
	font-family: 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', Sans-serif;
}
@media (max-width: 768px) {
	.ui-menu .ui-menu-item {
		white-space: normal;
		line-height: 1.45;
	}
}
.ui-menu .ui-menu-item.ui-state-focus {
	background: #ccc;
	border: none;
	margin: 0 !important;
}

@media (max-width: 768px) {

	/* hide */

}




/* ------------------------------------------------------------- start PC */
/* max 1160px */

@media (min-width: 769px) {

	/* -------------------------------- form */

	.searches {
		color: #fff;
		font-size: 1.6rem;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.searches .upper {}

	.searches dt,
	.searches th {
		color: #fff;
		font-size: 1.3rem;
		font-weight: normal;
		text-align: left;
		padding: 0 0 4px;
	}
	.searches dt small {
		font-size: 1.1rem;
	}
	.searches dt, .searches dd {
		white-space: nowrap;
	}

	/* wrap size */
	.searches .rating-wrap {
		width: 100px;
		position:relative; left:-54px
	}

	.searches .hotel_name-wrap {
		width: 100px;
		position:relative; left:120px
	}

	.searches .name-wrap {
		width: 320px;
		padding: 0 12px 0 0;
	}
	.searches .check-wrap {
		width: 200px;
		padding: 0 6px 0 0;
	}
	.searches .check-wrap + .check-wrap {
		padding: 0
	}

	/* input, select size */

	.searches .name-wrap input,
	.searches .check-wrap input {
		width: 100%;
		background: #fff;
	}
	.searches .name-wrap input {
		padding: 10px 8px 10px 36px;
	}
	.searches .check-wrap input {
		padding: 10px 36px 10px 8px;
	}
	.searches .count-wrap select {
		width: 45px;
		background: #fff;
	}
	.searches .count-wrap label {
		width: 50px;
		display: inline-block;
	}
	.searches .stay {
		width: 40px;
		color: #fff;
		border: none;
		background: none;
		font-weight: bold;
	}

	.searches dl input,
	.searches dl select,
	.searches td select {
		border: 1px #ccc solid;
		font-size: 1.5rem;
		padding: 10px 8px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	/* #top-search-form .tablewrap
       #top-search-form ログイン後のTOPページ検索フォーム
     */

	#top-search-form.searches .tablewrap {
		display: flex;
		width: 100%;
		padding-bottom: 30px;
		position: relative;
	}
	#top-search-form.searches .tablewrap .budget-wrap{
		width: 336px;
	}
	#top-search-form.searches .tablewrap .count-wrap:first-of-type {
		margin-right: 8px;
	}

	/* submit */

	.searches .submit {
		text-align: right;
		padding: 5px 0 0 5px;
	}
	#top-search-form.searches .submit{
		position: absolute;
		right: 0;
	}
	.searches .submit input{
		border: none;
		font-size: 1.6rem;
		padding: 10px 1em;
		margin-bottom: 20px;
	}

	/* -------------------------------- middle */
	#top-search-form.searches .middle {
		display: none;
		text-align: center;
	}
	#top-search-form.searches .middle dl.count-wrap {
		display: none;
		width: 60px;
		text-align: left;
		margin: 0 0 0 20px;
	}
	.searches:not(#top-search-form) .middle {
		display: none;
		text-align: right;
		margin: 0 0 20px;
	}
	.searches:not(#top-search-form) .middle dl.count-wrap {
		display: none;
		width: 100px;
		text-align: left;
		margin: 0 0 0 20px;
	}
	.searches .middle.under {
		margin: 20px 0 0;
	}
	.searches:not(#top-search-form) .hotel-detail .middle.under{
		width: 863px;
	}
	.searches .middle dl.count-wrap:not(.def) {
		display: none;
	}

	/* 20200207追加 マイページは左と右の検索フォームに変更 */
	#reservation-page .searches th {
		color: #fff;
		font-size: 1.3rem;
		font-weight: normal;
		text-align: left;
		padding: 8px 0;
	}
	#reservation-page .searches .name-wrap {
		width: 278px;
		padding: 0 4px 0 0;
		margin-top: 4px;
	}
	#reservation-page .searches .check-wrap {
		width: 136px;
		padding: 0 4px 0 0;
	}
	#reservation-page .searches .count-wrap {
		width: 136px;
		padding: 0 4px 0 0;
	}
	#reservation-page .searches .name-wrap input {
		padding: 10px 8px 10px 33px;
	}
	#reservation-page .searches .check-wrap input {
		padding: 10px 33px 10px 8px;
	}
	#reservation-page .searches .count-wrap select {
		width: 100%;
		background: #fff;
		padding: 10px 6px;
	}
	#reservation-page .searches .count-wrap label {
		width: 100%;
		display: inline-block;
	}
	#reservation-page .searches .submit input{
		border: none;
		font-size: 1.6rem;
		padding: 10px 1em;
		margin-bottom: 0;
	}

	#reservation-page .searches .name-wrap.aflt {
		width: 350px;
		padding: 0 4px 0 0;
		margin-top: 4px;
	}

	#reservation-page .searches .left{
		width: 27%;
		border-right: 1px #fff solid;
		padding-right: 2rem;
	}
	#reservation-page .searches .left dl:first-child{
		width: 100%;
		margin-bottom: 1rem;
		padding: 0;
	}
	#reservation-page .searches .left dl:last-child{
		width: 100%;
		padding: 0;
	}
	#reservation-page .searches .search-link a{
		color: #fff;
	}
	#reservation-page .searches .search-link p{
		margin-bottom: 1rem;
	}
	#reservation-page .searches .search-link p span{
		margin-right: 1rem;
	}
	#reservation-page .searches .search-link ul{
		list-style: inside;
	}
	#reservation-page .searches .search-link ul li{
		margin-bottom: 1rem;
	}
	#reservation-page .searches .right{
		width: 73%;
		padding-left: 2rem;
	}
	#reservation-page .searches .right dl:first-child{
		width: 278px;
		padding-right: 4px;
	}
	#reservation-page .searches .right dl:nth-child(4) .selector::after{
		right: 0;
	}
	#reservation-page .searches .right dl:first-child select,
	#reservation-page .searches .right dl:nth-child(5) select{
		width: 100%;
	}
	#reservation-page .searches .right dl:nth-child(5){
		padding: 0;
	}
	#reservation-page .searches .right dl:nth-child(7){
		width: 274px;
	}
	#reservation-page .searches .right dl:nth-child(8){
		width: 274px;
		padding: 0;
	}
	#reservation-page .searches .right dl:last-child dd{
		padding-top: 3rem;
	}


	/* -------------------------------- top page */

	#visual .searches .name-wrap {
		width: 660px;
	}

	/* budget-wrap ( home ) */

	#visual .searches .budget-wrap td.sp {
		text-align: center;
		padding: 0 10px;
	}

	/* rating-wrap ( home ) */

	#visual .searches .rating-wrap input {
		width: 100%;
		font-size: 1.4rem;
		padding: 10px 8px;
	}

	#visual .searches .budget-wrap select,
	#visual .searches .rating-wrap select {
		width: 120px;
	}

	/* submit */
	/*
    #visual .searches .rating-wrap + div {
        width: 50%;
        text-align: right;
        position: relative;
    }

    #visual .searches .rating-wrap + div #submit_button {
        font-size: 1.8rem;
        padding: 12px 50px;
    }
    #visual .searches .rating-wrap + div .reset {
        position: absolute;
        bottom: -20px;
        right: 0;
    }
    #visual .searches .rating-wrap + div .reset input {
        font-size: 1.2rem;
        color: #fff;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        outline: none;
    }
    */
	#visual .searches .submit div {
		width: 50%;
		text-align: right;
		position: relative;
	}

	#visual .searches .submit #submit_button {
		font-size: 1.8rem;
		padding: 12px 50px;
	}
	#visual .searches .submit div .reset {
		position: absolute;
		bottom: -20px;
		right: 0;
	}
	#visual .searches .submit .reset input {
		font-size: 1.2rem;
		color: #fff;
		margin: 0;
		padding: 0;
		background: none;
		border: none;
		border-radius: 0;
		outline: none;
	}

	/* -------------------------------- single page */

	.searches.single { text-align: center; }
	.searches.single .single-wrapper { display: inline-block; }
	.searches.single dt,
	.searches.single dd {
		color: #333;
		text-align: left;
	}
	.searches.single .submit {
		padding: 0 0 0 20px;
	}
	.searches.single .tariff-link {
		padding-left: 24px;
	}
	.searches.single .tariff-link i{
		font-weight: 400;
	}

	/* planning */

	#planning-form {
		border-top: 1px #ccc solid;
		border-right: 1px #ccc solid;
		border-bottom: 4px #6f0017 solid;
		border-left: 1px #ccc solid;
		background: #f2f2f2;
		padding: 10px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	#planning-form h3 {
		width: 200px;
		color: #333;
		font-size: 1.8rem;
		font-weight: normal;
		text-align: center;
	}

	#planning-form dl dt,
	#planning-form dl dd {
		display: inline-block;
	}

	#planning-form dl select {
		width: 140px;
		border: 1px #ccc solid;
		background: #fff;
		font-size: 1.5rem;
		padding: 10px 8px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	#planning-form dl.middle-wrap dd span { margin: 0 8px; }
	#planning-form li {
		display: inline-block;
		color: #333;
		font-size: 1.3rem;
	}
	#planning-form li br { display: none; }
	#planning-form li:not( :last-child ) { margin: 0 2em 0 0; }




} /* end PC */



/* ------------------------------------------------------------------------- start MOBILES */

@media (max-width: 768px) {


	.header-form { position: relative; }

	#terms,
	#hotels,
	#sort {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: #f7f7f7;
		z-index: 999;
	}

	/* ----------------- searches */

	.searches.inside {
		background: #f7f7f7;
		padding: 0;
	}

	.searches h2 {
		border-bottom: 2px #cbcbcb solid;
		font-size: 1.6rem;
		padding: 13px;
		position: relative;
	}
	.searches h2 a {
		display: block;
		color: #333;
		font-size: 2.2rem;
		position: absolute;
		right: 13px;
		top: 50%;
		-webkit-transform: translateY(-50%); /* Safari用 */
		transform: translateY(-50%);
	}

	.searches .searchbox {
		border-bottom: 2px #cbcbcb solid;
		padding: 20px 13px;
	}

	.searches dl,
	.searches table {
		margin: 0 0 12px;
	}
	.searches dt {
		font-size: 1.4rem;
		margin: 0 0 6px;
	}
	.searches table {
		width: 100%;
	}
	.searches table.check-wrap {
		table-layout: fixed;
	}
	.searches table th {
		font-weight: normal;
		text-align: left;
		font-size: 1.4rem;
		padding: 0 0 6px;
	}

	.searches .name-wrap input,
	.searches select,
	.searches .count-wrap {
		width: 100%;
		font-size: 1.4rem;
		padding: 10px 8px;
		border: 2px #333 solid;
		background: #fff;
		border-radius: 6px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	.searches .check-wrap span,
	.searches .plan-wrap label {
		display: block;
		border: 2px #333 solid;
		background: #fff;
		border-radius: 6px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* wrap size */

	.searches .name-wrap input {
		width: 100%;
		font-size: 1.4rem;
		padding: 10px 8px 10px 30px;
	}

	.searches .check-wrap .sp {
		width: 8px;
	}
	.searches .check-wrap span {
		text-align: center;
		font-weight: normal;
		font-size: 2.0rem;
		line-height: 1.4;
		padding: 0px 8px 8px;
	}
	.searches .check-wrap span small {
		font-size: 1.3rem;
	}

	.searches .stay {
		color: #233773;
		font-size: 1.6rem;
		font-weight: bold;
		text-align: right;
		margin: 0 0 10px;
	}

	.searches .count-wrap {
		font-size: 1.6rem;
		padding: 6px;
		margin: 0 0 16px;
	}
	.searches .count-wrap small {
		font-size: 1.3rem;
		font-weight: normal;
	}
	.searches .count-wrap strong {
		font-size: 2.6rem;
		font-weight: normal;
		margin: 0 6px 0 0;
	}
	.searches .count-wrap a {
		color: #231762;
		font-size: 3.6rem;
		margin: 0 0 0 8px;
	}
	.searches .count-wrap table {
		margin: 0;
	}
	.searches .count-wrap table th,
	.searches .count-wrap table td {
		text-align: left;
		padding: 6px 4px;
	}
	.searches .count-wrap table td.age {
		padding: 0;
	}
	.searches .count-wrap table th {
		width: 48%;
		text-align: right;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.searches .count-wrap table td:not(.count) {
		text-align: right;
	}
	.searches .count-wrap table tr:not( :last-child ):not(.age-wrap) { border-bottom: 1px #ccc dotted; }
	.searches .count-wrap table tr.age-wrap table {
		display: none;
		border-bottom: 1px #ccc dotted;
	}


	/* budget-wrap */

	.searches .budget-wrap td.sp {
		text-align: center;
	}

	/* rating-wrap */

	.searches .rating-wrap input {
		width: 100%;
		font-size: 1.4rem;
		padding: 10px 8px;
	}

	/* plan-wrap */

	.searches .searchbox .plan-wrap input { display: none; }
	.searches .searchbox .plan-wrap ul { letter-spacing: -0.4em; }
	.searches .searchbox .plan-wrap li {
		display: inline-block;
		letter-spacing: normal;
		margin: 0 10px 10px 0;
	}
	.searches .searchbox .plan-wrap li label {
		display: block;
		font-size: 1.4rem;
		padding: 12px;
	}
	.searches .searchbox .plan-wrap input:checked + label {
		color: #fff;
		background: #535353;
	}

	/* sort-wrap */

	.searches .sort-wrap li {
		line-height: 2.4;
	}
	.searches .sort-wrap input[type="radio"] {
		display: none;
	}
	.searches .sort-wrap label {
		display: inline-block;
		position: relative;
		cursor: pointer;
		margin-left: 20px;
		padding: 10px 20px;
		border-radius: 2px;
		font-size: 1.5rem;
		text-align: center;
		line-height: 1;
	}
	.searches .sort-wrap label:before {
		position: absolute;
		content: "";
		top: 50%;
		left: -10px;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		background: #535353;
		border-radius: 50%;
	}
	.searches .sort-wrap input[type="radio"]:checked + label:after {
		position: absolute;
		content: "";
		top: 50%;
		left: -4px;
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-radius: 50%;
		background: #fff;
	}

	/* submit */

	.searches .submit {
		display: table;
		width: 100%;
		margin: 0;
	}
	.searches .submit >* {
		display: table-cell;
		vertical-align: top;
	}

	.searches .submit input[type="reset"] {
		width: 90%;
		border: 2px #333 solid;
		background: #fff;
		-webkit-border-radius: 6px;
		border-radius: 6px;
		font-size: 1.6rem;
		padding: 12px 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	.searches input[type="submit"] {
		width: 100%;
		font-size: 1.8rem;
		padding: 12px 50px;
	}

	.searches input[type="button"] {
		width: 100%;
		font-size: 1.8rem;
		padding: 12px 50px;
	}

	/* ----------------- triggerbox */

	#triggerbox {
		border-top: 2px #cbcbcb solid;
		font-weight: bold;
	}
	#triggerbox.single {
		border-top: none;
		font-weight: bold;
	}
	#triggerbox h2 {
		font-size: 2.0rem;
		padding: 16px 13px;
		color: #fff;
	}

	#triggerbox .now-terms {
		background: #f6f6f6;
		padding: 10px 13px;
	}
	#triggerbox .now-terms dl {
		display: table;
		width: 100%;
	}
	#triggerbox .now-terms dl > * {
		display: table-cell;
		line-height: 1.4;
		vertical-align: middle;
	}
	#triggerbox .now-terms dl dd {
		width: 6em;
	}
	#triggerbox .now-terms dl dd a {
		display: block;
		color: #fff;
		background: #aaaaaa;
		text-align: center;
		font-size: 1.4rem;
		padding: 0.75em;
		-webkit-border-radius: 6px;
		border-radius: 6px;
	}
	#triggerbox.single .now-terms dl dd a {
		background: #aaaaaa;
	}

	#triggerbox .trigger-list {
		display: table;
		width: 100%;
		padding: 16px 13px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#triggerbox .trigger-list a {
		display: table-cell;
		color: #fff;
		background: #840222;
		font-size: 1.3rem;
		line-height: 1.4;
		text-align: center;
		padding: 1em 0.5em;
		-webkit-border-radius: 6px;
		border-radius: 6px;
	}
	#triggerbox .trigger-list .w8 {
		display: table-cell;
		width: 8px;
	}

	/* -------------------------------- top page */

	#visual #terms{
		display: block;
		background: #fff;
		position: static;
	}


} /* end MOBILES */