/*------------------------------------------------------

	Base Custom

------------------------------------------------------*/
@media (min-width: 769px){
	.h-quickSearch{
		display: none;
	}
}

@media (max-width: 768px){
	.h-reserveCommand{
		display: none;
	}
}




/*------------------------------------------------------

	Theme

------------------------------------------------------*/
#hokkaido .area-header		{ background-image: url(/syoku-haku/img/bg-hokkaido.jpg); }
#touhoku .area-header		{ background-image: url(/syoku-haku/img/bg-tohoku.jpg); }
#kanto .area-header			{ background-image: url(/syoku-haku/img/bg-kanto.jpg); }
#tokyo .area-header			{ background-image: url(/syoku-haku/img/bg-tokyo.jpg); }
#hokuriku .area-header		{ background-image: url(/syoku-haku/img/bg-hokuriku.jpg); }
#toukai .area-header		{ background-image: url(/syoku-haku/img/bg-tokai.jpg); }
#kinki .area-header			{ background-image: url(/syoku-haku/img/bg-kinki.jpg); }
#tyugoku .area-header		{ background-image: url(/syoku-haku/img/bg-cyugoku.jpg); }
#shikoku .area-header		{ background-image: url(/syoku-haku/img/bg-shikoku.jpg); }
#kyushu .area-header		{ background-image: url(/syoku-haku/img/bg-kyusyu.jpg); }

#hokkaido .search-area__selaect:after{ color: #2d4eab; }
#hokkaido .search,
#hokkaido .filter,
#hokkaido .shops:before,
#hokkaido .search__inner{
	background-color: #2d4eab;
}

#touhoku .search-area__selaect:after{ color: #3399cc; }
#touhoku .search,
#touhoku .filter,
#touhoku .shops:before,
#touhoku .search__inner{
	background-color: #3399cc;
}

#kanto .search-area__selaect:after{ color: #669c3f; }
#kanto .search,
#kanto .filter,
#kanto .shops:before,
#kanto .search__inner{
	background-color: #669c3f;
}

#tokyo .search-area__selaect:after{ color: #92c36d; }
#tokyo .search,
#tokyo .filter,
#tokyo .shops:before,
#tokyo .search__inner{
	background-color: #92c36d;
}

#hokuriku .search-area__selaect:after{ color: #cda812; }
#hokuriku .search,
#hokuriku .filter,
#hokuriku .shops:before,
#hokuriku .search__inner{
	background-color: #cda812;
}

#toukai .search-area__selaect:after{ color: #e7ba17; }
#toukai .search,
#toukai .filter,
#toukai .shops:before,
#toukai .search__inner{
	background-color: #e7ba17;
}

#kinki .search-area__selaect:after{ color: #f6a854; }
#kinki .search,
#kinki .filter,
#kinki .shops:before,
#kinki .search__inner{
	background-color: #f6a854;
}

#tyugoku .search-area__selaect:after{ color: #f09a8b; }
#tyugoku .search,
#tyugoku .filter,
#tyugoku .shops:before,
#tyugoku .search__inner{
	background-color: #f09a8b;
}

#shikoku .search-area__selaect:after{ color: #aa8a71; }
#shikoku .search,
#shikoku .filter,
#shikoku .shops:before,
#shikoku .search__inner{
	background-color: #aa8a71;
}

#kyushu .search-area__selaect:after{ color: #a5699d; }
#kyushu .search,
#kyushu .filter,
#kyushu .shops:before,
#kyushu .search__inner{
	background-color: #a5699d;
}






/*------------------------------------------------------

	wrapper

------------------------------------------------------*/
.g-syoku-haku-list{
	font-family: 'Lato', 'Noto Sans JP', '繝偵Λ繧ｮ繝手ｧ偵ざ ProN', 'Hiragino Kaku Gothic ProN', '繝｡繧､繝ｪ繧ｪ', Meiryo, '�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け', 'MS PGothic', sans-serif;
}







/*------------------------------------------------------

	header

------------------------------------------------------*/
.area-header{
	position: relative;
	z-index: 0;
	
	background-color: #ccc;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.area-header:before{
	content: "";
	
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	background-color: rgba(0,0,0, .50);
}



.area-header__bg{
	display: none;
}

@media(min-width:769px){
	.area-header{
		padding-bottom: 6.5625em;
	}
}



.area-title{
	line-height: 1;
	font-size: 1em;
	font-weight: normal;
	
	margin: 0;
}
.area-title__logo,
.area-name{
	flex: 0 0 40%;
}
.area-title__cross{
	flex: 0 0 20%;
}

.area-title__logo{
	text-align: center;
}
.area-title__logo-data{
	max-width: 78%;
}
.area-name{
	text-align: center;
	color: #fff;
}
.area-name__main,
.area-name__ruby{
	display: block;
	
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; 
}
.area-name{
	line-height: 1;
	font-size: 7.5em;
}
.area-name__ruby{
	line-height: 1;
	font-size: .36em;
}

@media(max-width:1260px) and (min-width:769px){
	.area-name{
		font-size: 9.52380952380952vw;
	}
}

@media(min-width:769px){
	.area-title{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.area-title__cross{
		margin-top: 2em;
		margin-bottom: 2em;
	}
}

@media(max-width:768px){
	.area-title{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		text-align: center;
		
		padding-top: 3em;;
		padding-bottom: 3em;;
	}
	.area-title__logo{
		max-width: 80%;
	}
	.area-title__cross{
		flex: 0 0 auto;
		width: 50px;
		
		margin-top: 2em;;
		margin-bottom: 2em;;
	}
	.area-name{
		font-size: 18vw;
	}
}





/*------------------------------------------------------

	Search

------------------------------------------------------*/
.search{
	border-radius: .3125em .3125em 0 0;
}
.search__inner{
	color: #fff;
	background-color: gray;
	padding: 1.5em 2.75em;
}

@media(min-width:769px){
	.search{
		position: relative;
		z-index: 0;
	}
	.search__inner{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		
		width: 80%;
		min-width: 320px;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
		
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

@media(max-width:768px){
	
}



/* Search Area */
.search-area{
	
}
.search-area__title{
	font-size: 1.75em;
	font-weight: bold;
	text-align: center;
	
	margin: 0;
}
.search-area__selaect{
	border-radius: .5em;
	background-color: #fff;
	
	position: relative;
	z-index: 0;
}
.search-area__selaect:after{
	content: "笆ｼ";
	display: block;
	
	font-size: .75em;
	
	color: gray;
	
	position: absolute;
	top: 0;
	right: 1em;
	bottom: 0;
	
	height: 1em;
	line-height: 1;
	margin-top: auto;
	margin-bottom: auto;
	
	pointer-events: none;
}
.search-area__selaect > select{
	font-size: 1.15em;
	font-weight: bold;
	color: #000;
	
	cursor: pointer;
	width: 100%;
	
	border: 0 none;
	background-color: transparent;
	
	margin: 0;
	padding: .5em;
	
	-webkit-appearance: none;
	appearance: none;
	
	padding-right: 2em;
}
.search-area__selaect > select::-ms-expand{
	display: none;
}


@media(min-width:769px){
	.search-area{
		display: flex;
		align-items: center;
	}
	.search-area__title{
		margin-right: 1em;
	}
}

@media(max-width:768px){
	.search-area__title{
		margin-bottom: .5em;
	}
}




/* Search Result */
.search-result{
	font-size: 1.25em;
	display: flex;
}
.search-result__title{
	font-size: .875em;
	font-weight: normal;
	margin: 0;
	margin-right: 1.25em;
}
.search-result__score{
	font-weight: bold;
}
.rearch-result__em{
	font-size: 1.75em;
}

@media(min-width:769px){
	.search-result{
		margin-left: 2em;
	}
}

@media(max-width:768px){
	.search-result{
		margin-top: 1em;
		justify-content: center;
	}
}









/*------------------------------------------------------

	filter

------------------------------------------------------*/
.filter{
	color: #fff;
	background-color: gray;
	
	padding-top: 2.5em;
	padding-bottom: 2.5em;
}
.filter__title{
	line-height: ;
	font-size: 1.25em;
	font-weight: bold;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	margin: 0;
	margin-bottom: 1em;
}
.filter__title:after,
.filter__title:before{
	content: "";
	display: block;
	
	border-bottom: 1px solid;
	
	min-width: 2.25em;
}
.filter__title:after	{ margin-left: 1em; }
.filter__title:before	{ margin-right: 1em; }




/* Filter grid */
@media(min-width:769px){
	.filter-grid{
		display: flex;
	}
	.filter-grid__genre,
	.filter-grid__hotel{
		flex: 0 0 50%;
	}
	.filter-grid__genre{
		margin-left: 3.75em;
	}
}

@media(max-width:768px){
	.filter-grid__hotel{
		margin-bottom: 2em;
	}
}



/* Filter Genre */
.filter-genre{
	display: flex;
	
	list-style: none;
	margin: 0;
	padding: 0;
	
	margin-left: -1em;
	margin-bottom: -1em;
}
.filter-genre__item{
	flex: 1 1;
	margin-left: 1em;
	margin-bottom: 1em;
}
/*.filter-genre__link{
	display: block;
	
	padding: .5em;
	
	color: inherit;
	text-decoration: inherit;
	text-align: center;
	
	border: 1px solid;
	border-radius: 3px;
}*/
.filter-genre__label{}
.filter-genre__checkbox{
	display: none;
}
.filter-genre__status{
	display: block;
	cursor: pointer;
	
	padding: .5em;
	
	color: inherit;
	text-decoration: inherit;
	text-align: center;
	
	border: 1px solid;
	border-radius: 3px;
}
.filter-genre__checkbox:checked ~ .filter-genre__status{
	background-color: rgba(255, 255, 255, .5);
}

.filter-genre__icon{
	max-width: 100%;
}

@media(max-width:1200px) and (min-width:769px){
	.filter-genre{
		flex-wrap: wrap;
	}
	.filter-genre__item{
		flex: 0 0 auto;
		width: calc(20% - 1em);
	}
}

@media(max-width:768px){
	.filter-genre{
		flex-wrap: wrap;
	}
	.filter-genre__icon{
		width: 30px;
	}
}

@media(max-width:768px){
	.filter-genre__item{
		flex: 0 0 auto;
		width: calc(20% - 1em);
	}
}



/* Filter Hotel */
.filter-hotel__select{
	padding-bottom: 1em;
	border-bottom: 1px solid;
	
	position: relative;
	z-index: 0;
}
.filter-hotel__select:after{
	content: "笆ｼ";
	display: block;
	
	font-size: .75em;
	
	display: block;
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
}
.filter-hotel__select > select{
	font-size: 1.25em;
	
	display: block;
	cursor: pointer;
	
	box-sizing: border-box;
	width: 100%;
	
	padding-left: 0.33em;
	padding-right: 0.33em;
	
	color: inherit;
	
	border: 0 none;
	background-color: transparent;
	
	-webkit-appearance: none;
	appearance: none;
}
.filter-hotel__select > select::-ms-expand{
	display: none;
}
.filter-hotel__select > select > option{
	color: #000;
}
.filter-hotel__select > select > option[disabled]{
	color: #ccc;
}





/*------------------------------------------------------

	shop

------------------------------------------------------*/
.shops{
	position: relative;
	z-index: 0;
	
	
	margin-bottom: 100px; /* for Ajax more */
}
.shops:before{
	content: "";
	
	display: block;
	
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	height: 500px;
	
	background-color: gray;
}



/* Shop list */
.shop-list{
	margin: 0;
	padding: 0;
	list-style: none;
}
.shop-list__item{
	background-color: #fff;
	box-shadow: 0 0 1.25em 1px rgba(0,0,0, .17);
	
	animation: kf-fadein 360ms ease-out;
}

@media(min-width:769px){
	.shop-list{
		margin-left: -3%;
	}
	.shop-list__item{
		width: 30%;
		margin-left: 3%;
		margin-bottom: 3%;
	}
}

@media(max-width:768px){
	.shop-list__item{
		width: 100%;
		margin-bottom: 3em;
		
		right: 0; /* for Masonry */
	}
}



/* Shop item */
.shop-header{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto;
}
.shop-genre{
	z-index: 1;
	grid-row: 1;
	grid-column: 1;
	
	align-self: start;
	justify-self: start;
	
	font-size: 6em;
	width: 1.2em;
	height: .85em;
	padding-left: .0625em;
	box-sizing: border-box;
	
	background-image: linear-gradient(to right bottom, #000 50%, transparent 50%);
}
.shop-genre--a{ background-image: linear-gradient(to right bottom, red 50%, transparent 50%); }
.shop-genre--b{ background-image: linear-gradient(to right bottom, blue 50%, transparent 50%); }
.shop-genre--c{ background-image: linear-gradient(to right bottom, green 50%, transparent 50%); }
.shop-genre--d{ background-image: linear-gradient(to right bottom, cyan 50%, transparent 50%); }
.shop-genre--e{ background-image: linear-gradient(to right bottom, magenta 50%, transparent 50%); }
.shop-genre--f{ background-image: linear-gradient(to right bottom, yellow 50%, transparent 50%); }
.shop-genre--g{ background-image: linear-gradient(to right bottom, black 50%, transparent 50%); }
.shop-genre--h{ background-image: linear-gradient(to right bottom, lime 50%, transparent 50%); }
.shop-genre__icon{
	width: .5em;
	vertical-align: top;
}
.shop-eyecatch{
	grid-row: 1;
	grid-column: 1;
	
	overflow: hidden; /* for slick */
}
.shop-eyecatch__link{
	display: block;
	transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1);
}
.shop-eyecatch__link:hover{
	transform: scale(1.1);
}
.shop-eyecatch__photo{
	width: 100%;
}
.shop-body{
	padding: 2em;
}
.shop__name{
	font-size: 1.33;
	font-size: 1.375em;
	
	margin: 0;
	margin-bottom: 1.25em;
}
.shop__link{
	color: inherit;
	text-decoration: inherit;
}
.shop__link[target]{
	display: flex;
	justify-content: space-between;
}
.shop__link:hover{
	text-decoration: underline;
}
.shop__link:after{
	content: url(../img/icon--blank.png);
	
	flex: 0 0 auto;
	margin-left: .5em;
	margin-top: .15em;
}
.shop__note{
	line-height: 1.75;
	font-size: .85em;
	
	margin: 0;
}
.shop__note + .shop__note{
	margin-top: 1.25em;
}

@media all and (-ms-high-contrast:none){
	.shop-header{
		display: -ms-grid;
		-ms-grid-rows: 1fr;
		-ms-grid-columns: 1fr;
	}
	.shop-genre{
		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}
	.shop-eyecatch{
		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}
}



/* Shop Gallery */
.shop-gallery{
	margin: 0;
	padding: 0;
	list-style: none;
}
.shop-gallery__item{}

.shop-gallery.slick-slider{}
.shop-gallery.slick-slider .slick-arrow{
	cursor: pointer;
	
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	
	border: 0 none;
	outline: 0 none;
	background-color: transparent;
}
.shop-gallery.slick-slider .slick-prev{
	left: 0;
}
.shop-gallery.slick-slider .slick-next{
	right: 0;
}

.shop-gallery.slick-slider .slick-dots{
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 1em;
	
	display: flex;
	justify-content: center;
	
	margin: 0;
	padding: 0;
	list-style: none;
}
.shop-gallery.slick-slider .slick-dots li{}
.shop-gallery.slick-slider .slick-dots li:not(:first-child){
	margin-left: .5em;
}
.shop-gallery.slick-slider .slick-dots button{
	text-align: left;
	text-indent: -999em;
	overflow: hidden;
	
	cursor: pointer;
	display: block;
	box-sizing: border-box;
	
	font-size: .875em;
	width: 1em;
	height: 1em;
	
	border: 0 none;
	outline: 0 none;
	border-radius: 1em;
	background-color: #fff;
	
	margin: 0;
	padding: 0;
}
.shop-gallery.slick-slider .slick-dots li.slick-active button{
	background-color: #000;
}



/* Shop Nav */
.shop-nav{
	margin-top: 1.75em;
}
.shop-nav-grid{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	
	margin-top: 1em;
}
.shop-nav-grid + .shop-nav-grid{
	margin-top: .5em;
}
.shop-nav__title{
	line-height: 1.33;
	font-size: .875em;
	font-weight: bold;
	
	margin: 0;
}
.shop-nav__items{
	display: flex;
	
	list-style: none;
	margin: 0;
	padding: 0;
	
	margin-left: auto;
	/*margin-left: -1em;*/
}
.shop-nav__items:before{
	content: "";
	flex: 0 1 1.5em;
	align-self: center;
	/*min-width: 2.5em;*/
	
	margin-right: 1em;
	border-bottom: 1px solid;
}
.shop-nav__item{
	flex: 0 1 auto;
}
.shop-nav__item:not(:first-child){
	margin-left: 1em;
}
.shop-nav__button{
	line-height: 1.33;
	font-size: .75em;
	text-align: center;
	text-decoration: inherit;
	
	display: block;
	color: inherit;
	
	box-sizing: border-box;
	padding: .5em .75em;
	
	border-radius: 3px;
	border: 1px solid;
	
	transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1);
}
.shop-nav__button:hover{
	transform: scale(1.15);
}
.shop-nav__button--reserve{
	color: #fff;
	background-color: #F6AB00;
	border-color: transparent;
}
.shop-nav__button--hotel{
	color: #F6AB00;
	background-color: #fff;
}



/* ajax more */
.js-ajax-more{
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	
	height: 100px;
	
	text-align: center;
}
.js-ajax-more__button{
	margin: 0;
	padding: 0;
	list-style: none;
	
	border: 0 none;
	background-color: transparent;
	
	cursor: pointer;
}
.jx-ajax-more__loading{
	max-height: 100px;
	animation: round 720ms steps(8) infinite;
}

@keyframes round{
	to{
		transform: rotate(360deg);
	}
}






/*------------------------------------------------------

	Special Skin

------------------------------------------------------*/

#caramel-kitchen{
	color: #fff;
	background-color: #CC3467;
}
#caramel-kitchen .shop-genre{
	background-image: none;
}
#caramel-kitchen .shop__link:after{
	content: url(../img/icon--blank-white.png);
}


.shop-list__item--collabo{
	border: .40625em solid;
	box-sizing: border-box;
}