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

	Base Custom

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

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




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

	Theme

------------------------------------------------------*/
@media (min-width: 769px){}
@media (max-width: 768px){}









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

	wrapper

------------------------------------------------------*/
@media (min-width: 769px){}
@media (max-width: 768px){}

.g-syoku-haku-top{
	overflow: hidden;
}







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

	hero

------------------------------------------------------*/
@media (min-width: 769px){}
@media (max-width: 768px){}

.hero{
	box-sizing: border-box;
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../img/top/hero__bg.jpg);
}
.hero__inner{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	position: relative;
	z-index: 0;
	
	min-height: calc(100vh - 100px - 50px - 40px);
}
@media all and (-ms-high-contrast:none){
	.hero__inner{
		height: calc(100vh - 100px - 50px - 40px);
	}
}
.hero-logo{
	text-align: center;
	max-width: 80%;
	
	margin: 0;
}
.hero-logo__data{
	max-width: 100%;
}

.hero-collabo-anchor{
	position: absolute;
}
.hero-collabo-anchor__link{
	display: block;
}
.hero-collabo-anchor__icon{}

@media (min-width: 769px){
	.hero-collabo-anchor{
		right: 0;
		bottom: 80px;
	}
}

@media (max-width: 768px){
	.hero__inner{
		height: 1.15vw;
		padding-bottom: 22.22vw;
	}
	.hero-logo__data{
		width: 100%;
		max-width: 350px;
	}
	.hero-collabo-anchor{
		bottom: 40px;
		left: auto;
		right: auto;
		margin-left: auto;
		margin-right: auto;
	}
	.hero-collabo-anchor__icon{
		width: 100px;
	}
}






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

	area search

------------------------------------------------------*/
@media (min-width: 769px){}
@media (max-width: 768px){}

.area-search{}
.area-search__inner{}
.area-search__header{}
.area-search__title{
	line-height: 1.33;
	font-size: 1.375em;
	
	padding: .5em 1em 0;
	border-radius: 6px 6px 0 0;
	
	color: #fff;
	background-color: #C6575B;
	
	margin: 0;
}
.area-search__select{
	position: relative;
	z-index: 0;
}
.area-search__select:after{
	content: "▼";
	display: block;
	color: #C6575B;
	
	pointer-events: none;
	
	position: absolute;
	top: 0;
	right: 1em;
	bottom: 0;
	
	line-height: 1;
	height: 1em;
	
	margin-top: auto;
	margin-bottom: auto;
}
.area-search__select > select{
	cursor: pointer;
	color: #000;;
	
	width: 100%;
	border: 0 none;
	
	padding: .5em 1em;
	
	border-radius: 6px;
	
	-webkit-appearance: none;
	appearance: none;
}
.area-search__select > select::-ms-expand{
	display: none;
}

@media (min-width: 769px){
	.area-search{
		border-bottom: 9px solid #C6575B;
	}
	.area-search > .sitewidth{
		position: relative;
		z-index: 0;
	}
	.area-search__inner{
		color: #fff;
		background-color: #C6575B;
		border-radius: 6px 6px 0 0;
		
		box-sizing: border-box;
		padding: 1em 2em;
		
		display: flex;
		align-items: center;
		justify-content: center;
		
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		
	}
	.area-search__title{
		margin-right: 1em;
	}
}
@media (max-width: 768px){
	.area-search{
		color: #fff;
		background-color: #C6575B;
		
		padding-top: 1em;
		padding-bottom: 2em;
		text-align: center;
	}
	.area-search__title{
		margin-bottom: .75em;
	}
}





/*.area-search{
	text-align: center;
	
	color: #fff;
	background-color: #C6575B;
}
.area-search__title{
	margin: 0;
	
	display: table;
	margin-left: auto;
	margin-right: auto;
	
	margin-top: -10em;
	
	background-color: #C6575B;
	
}
.area-search__select{}*/







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

	descript

------------------------------------------------------*/
@media (min-width: 769px){}
@media (max-width: 768px){}

.descript{
	text-align: center;
	
	margin-top: 5em;
	margin-bottom: 5em;
}
.descript__heading{
	font-size: 1em;
	
	margin: 0;
	margin-bottom: 5em;
}
.descript__title1{
	line-height: 1.33;
	font-size: 2.5em;
	font-weight: normal;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	
	margin: 0;
	margin-bottom: 1em;
}
.descript__title2{
	line-height: 1.33;
	font-size: 1.625em;
	font-weight: normal;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	
	margin: 0;
}
.descript__note{
	line-height: 2;
	font-size: 1.25em;
	
	margin: 0;
}

@media (max-width: 768px){
	.descript__heading{
		font-size: .75em;
	}
}






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

	concept

------------------------------------------------------*/
@media (min-width: 769px){}
@media (max-width: 768px){}

.concept{
	display: grid;
	
	position: relative;
	z-index: 0;
}
.concept > *{
	grid-row: 1;
	grid-column: 1;
}

@media all and (-ms-high-contrast:none){
	.concept{
		display: -ms-grid;
		-ms-grid-columns: 1fr;
	}
	.concept > *{
		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}
	.concept__body{
		position: relative;
	}
}

.concept__body{
	display: flex;
	flex-direction: column;
	
	text-align: center;
}
.concept__heading{
	font-size: 1em;
	font-weight: normal;
	
	margin-top: auto;
	margin-bottom: auto;
}
.concept__title1{
	font-size: 2.5em;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
.concept__title2{
	line-height: 1.33;
	font-size: 3.75em;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
.concept__title2 .jump{
	font-size: 1.33em;
}

.concept__note{
	line-height: 2;
	transform: translateY(3em);
}

@media (min-width: 769px){
	.concept__title1 + .concept__title2{
		margin-top: 1em;
	}
}
@media (max-width: 768px){
	.concept__title1 + .concept__title2{
		margin-top: 0;
	}
}




.concept-bg{
	z-index: -1;
	background-color: #eee;
	background-position: right top;
}
.concept-bg.js-bg{
	overflow: visible;
}
.concept-bg:after,
.concept-bg:before{
	content: "";
	
	display: block;
	
	position: absolute;
	/*z-index: -1;*/
	left: 0;
	right: 0;
	
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}
.concept-bg:after{
	bottom: 0;
}
.concept-bg:before{
	top: 0;
}
.concept-bg__data{
	display: none;
}
.concept-bg__inner{
	position: relative;
	z-index: 0;
	
	
	/* Test */
	box-sizing: border-box;
	height: inherit;
	/* Test */
}
.concept__ornament{
	position: absolute;
	box-shadow: 1em 1em .5em rgba(0,0,0, .12);
}

@media (min-width: 769px) and (max-width: 1260px){
	.concept{
		font-size: 1.27vw;
	}
	.concept__ornament--1{
		max-width: 24%;
	}
	.concept__ornament--2{
		max-width: 19.35vw;
	}
	.concept__ornament--3{
		max-width: 19%;
	}
}

@media (min-width: 769px){
	.concept-bg{
		height: 63.53vw;
	}
	.concept-bg:after,
	.concept-bg:before{
		height: 10%;
	}
	.concept-bg:after{
		background-image: url(../img/concept__mask--pc-bottom.svg);
	}
	.concept-bg:before{
		background-image: url(../img/concept__mask--pc-top.svg);
	}
	.concept__ornament--1{
		top: -7%;
		right: 92%;
		width: 24.60709474629546vw;
	}
	.concept__ornament--2{
		top: 19%;
		right: 70%;
		width: 18.54512797485406vw;
	}
	.concept__ornament--3{
		right: 87%;
		bottom: 7%;
		z-index: -1;
		width: 19.12887292321509vw;
	}
}
@media (max-width: 768px){
	.concept{
		font-size: 3.33vw;
	}
	.concept__heading{
		font-size: .5em;
	}
	.concept-bg{
		height: 157.3vw;
	}
	.concept-bg:after,
	.concept-bg:before{
		height: 16%;
	}
	.concept-bg:after{
		background-image: url(../img/concept__mask--sp-bottom.svg);
	}
	.concept-bg:before{
		background-image: url(../img/concept__mask--sp-top.svg);
	}
	.concept__ornament--1{
		display: none;
	}
	.concept__ornament--2{
		top: 0%;
		right: 73%;
		width: 36.44444444444444vw;
	}
	.concept__ornament--3{
		right: 78%;
		bottom: 24%;
		z-index: -1;
		width: 37.55555555555556vw;
	}
}







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

	search

------------------------------------------------------*/
@media (min-width: 769px){}
@media (max-width: 768px){}



.search{
	margin-top: 5em;
	margin-bottom: 5em;
	
	padding-top: 2.5em;
	padding-bottom: 2.5em;
	
	color: #fff;
	background-color: #BC5B62;
}
.search__title{
	line-height: 1.33;
	font-size: 1.75em;
	font-weight: bold;
	text-align: center;
	
	margin: 0;
	margin-bottom: 1em;
}


/* search grid */
@media (min-width: 769px){
	.search-grid{
		display: flex;
		justify-content: space-between;
	}
	.search-grid__item{
		box-sizing: border-box;
		flex: 1 1;
	}
	.search-grid__item:not(:first-child){
		margin-left: 5.625em;
	}
	.search-grid__item--collabo{}
	.search-grid__item--area{}
}
@media (max-width: 768px){
	.search-grid{}
	.search-grid__item{}
	.search-grid__item:not(:first-child){
		margin-top: 2.5em;
	}
	.search-grid__item--area{
		display: none;
	}
}


/* table */
.s-collabo{}
.s-collabo{}
.s-collabo__head,
.s-collabo__body{
	vertical-align: top;
}
.s-collabo__head{
	font-weight: normal;
	text-align: left;
	padding-right: 1em;
}
.s-collabo__body{}
.s-collabo__body:before{
	content: "";
	border-left: 1px solid;
	margin-right: 1em;
}


/* Area List */
.s-area{
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: flex;
	flex-wrap: wrap;
	
	margin-left: -1.25em;
	margin-bottom: -.625em;
}
.s-area__item{
	flex: 1 1 auto;
	box-sizing: border-box;
	
	margin-left: 1.25em;
	margin-bottom: .625em;
}
.s-area__button{
	display: block;
	box-sizing: border-box;
	border-radius: 3px;
	
	font-weight: bold;
	text-align: center;
	
	color: inherit;
	text-decoration: inherit;
	background-color: #ccc;
	
	padding: 1em;
}
.s-area__button--xxx{
	background-color: red;
}
.s-area__button--hokkaido	{ background-color: #2d4eab; }
.s-area__button--touhoku	{ background-color: #3399cc; }
.s-area__button--kanto		{ background-color: #669c3f; }
.s-area__button--tokyo		{ background-color: #92c36d; }
.s-area__button--hokuriku	{ background-color: #cda812; }
.s-area__button--toukai		{ background-color: #e7ba17; }
.s-area__button--kinki		{ background-color: #f6a854; }
.s-area__button--tyugoku	{ background-color: #f09a8b; }
.s-area__button--shikoku	{ background-color: #aa8a71; }
.s-area__button--kyushu		{ background-color: #a5699d; }

@media (min-width: 769px){
	.s-area__item{
		max-width: calc(50% - 1.25em);
	}
}
@media (max-width: 768px){
	.s-area__item{
		width: calc(50% - 1.25em);
	}
}




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

	collabo

------------------------------------------------------*/
@media (min-width: 769px){}
@media (max-width: 768px){}


.collabo{
	margin-top: 5em;
	margin-bottom: 5em;
}



/* Collabo Header */
.collabo-header{
	margin-bottom: 5em;
}
.collabo-header__title{
	text-align: center;
	margin: 0;
}
.collabo-header__logo{
	max-width: 100%;
}



/* Backnumber */
.collabo-backnum{
	margin: 0;
	padding: 0;
	list-style: none;
	
	margin-top: 5em;
	margin-bottom: 5em;
}
.collabo-backnum__item{}
.collabo-backnum__item + .collabo-backnum__item{
	margin-top: 2.5em;
}
.collabo-backnum__more{
	display: block;
	
	padding: 2em;
	padding-bottom: 7.25em;
	
	color: inherit;
	text-decoration: inherit;
	
	position: relative;
	z-index: 0;
	
	border: 1px solid #bbb;
}
.collabo-backnum__more:after,
.collabo-backnum__more:before{
	content: "";
	display: block;
	box-sizing: border-box;
	
	position: absolute;
	
}
.collabo-backnum__more:after{
	content: "詳細を見る";
	display: table;
	
	line-height: 1.33;
	font-size: 1.5em;
	
	z-index: 1;
	bottom: 1em;
	padding: .5em 1em;
	
	margin-left: auto;
	margin-right: auto;
	
	color: #fff;
	background-color: #999;
	
	/* fix for IE & webkit */
	left: 50%;
	transform: translateX(-50%);
	/* fix for IE & webkit */
}
.collabo-backnum__more:before{
	left: 0;
	right: 0;
	bottom: 0;
	height: 6.25em;
	
	opacity: .6;
	background-image: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,1) );
}

/* status */
.collabo-backnum__is-show:not(:checked) ~ .backnum__wrap{
	height: 365px;
	overflow: hidden;
	border: 1px solid #bbb;
	
	/* sitewidth */
	max-width: 1260px;
	min-width: 320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2.5%;
	padding-right: 2.5%;
	box-sizing: border-box;
	/* sitewidth */
}
.collabo-backnum__is-show:checked ~ .backnum__wrap:after,
.collabo-backnum__is-show:checked ~ .backnum__wrap:before{
	display: none;
}



/* Backnum Header */
.backnum-header{
	text-align: center;
	
	margin-bottom: 1.875em;;
}
.backnum-header__title{
	line-height: 1.33;
	font-size: 1.875em;
	font-weight: normal;
	
	margin: 0;
}



/* Theme */
.backnum-theme{
	
}
.backnum-theme__item{}
.backnum-theme__title{
	line-height: 1.33;
	font-size: 1.25em;
	font-weight: normal;
	
	color: #fff;
	background-color: #ccc;
	
	margin: 0;
	margin-bottom: 1em;
	padding: .5em 1em;
	
	display: table;
}
.bakunum-theme__note{
	line-height: 1.33;
	font-size: 1.25em;
	
	margin: 0;
}
.backnum-theme__item--restaurant .backnum-theme__title	{ background-color: #BC5B62; margin-left: auto; }
.backnum-theme__item--hotel .backnum-theme__title		{ background-color: #98BD70; }

@media (min-width: 769px){
	.backnum-theme{
		display: flex;
		justify-content: center;
	}
	.backnum-theme__item{}
	.backnum-theme__item--restaurant{
		text-align: right;
	}
	.backnum-theme__item--hotel{
		text-align: left;
	}
	.backnum-theme__and{
		align-self: center;
		margin-left: 1.875em;
		margin-right: 1.875em;
	}
	.backnum-theme__and-data{
		width: 40px;
	}
}

@media (max-width: 768px){
	.backnum-theme{
		display: flex;
		flex-direction: column;
	}
	.backnum-theme__item{
		text-align: center;
	}
	.backnum-theme__title{
		display: table;
		margin-left: auto;
		margin-right: auto;
	}
	.backnum-theme__and{
		align-self: center;
		margin-top: .75em;
		margin-bottom: 1.25em;
	}
	.backnum-theme__and-data{
		width: 20px;
	}
}



/* Backnum Gallery */
.bakunum-gallery{
	border: 9px solid magenta;
	
	margin-top: 3.75em;
	margin-bottom: 3.75em;
}



/* Backnum Talk */
.backnum-talk{
	
}
.backnum-talk__title{
	line-height: 1.33;
	font-size: 1.875em;
	font-weight: normal;
	text-align: center;
	
	margin: 0;
}
.backnum-talk__title:after{
	content: "";
	display: block;
	
	max-width: 1em;
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
	
	border-bottom: 3px solid;
}
.backnum-talk__item{
	display: flex;
	align-items: center;
}
.backnum-talk__photo{
	flex: 0 0 20%;
	
	overflow: hidden;
	border-radius: 9999px;
	
	position: relative;
	z-index: 0;
}
.backnum-talk__photo:before{
	content: "";
	
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: inherit;
	border: .75em solid #fff;
}
.backnum-talk__item--hotel .backnum-talk__photo:before{
	border-top-color: #98BD70;
	border-left-color: #98BD70;
}
.backnum-talk__item--restaurant .backnum-talk__photo:before{
	border-top-color: #BC5B62;
	border-right-color: #BC5B62;
}
.backnum-talk__thumb{
	width: 100%;
}
.backnum-talk__notes{
	line-height: 2;
	font-size: 1.25em;
	flex: 1 1;
	
	margin: 0;
}

@media (min-width: 769px){
	.backnum-talk__item--hotel .backnum-talk__photo{
		order: 1;
		margin-left: 1.875em;
	}
	.backnum-talk__item--restaurant .backnum-talk__photo{
		margin-right: 1.875em;
	}
	.backnum-talk__item--hotel .backnum-talk__notes{
		margin-left: calc(20% + 1.875em);
	}
	.backnum-talk__item--restaurant .backnum-talk__notes{
		margin-right: calc(20% + 1.875em);
	}
}

@media (max-width: 768px){
	.backnum-talk__item--hotel .backnum-talk__photo{
		order: 1;
		margin-left: 1.875em;
	}
	.backnum-talk__item--restaurant .backnum-talk__photo{
		margin-right: 1.875em;
	}
}



/* Backnum Column */
.backnum-column{
	margin-top: 3.75em;
	margin-bottom: 3.75em;
	
	padding-top: 3.75em;
	padding-bottom: 3.75em;
	background-image: linear-gradient(to right, #D4949C, #BDD5A4);
}
.backnum-column__title{
	line-height: 2;
	font-size: 1.625em;
	font-weight: normal;
	text-align: center;
	
	margin: 0;
	margin-bottom: 1.5em;
}
.backnum-column__note{
	line-height: 2;
	font-size: 1.25em;
	
	margin: 0;
}
.backnum-column__note + .backnum-column__note{
	margin-top: 1em;
}

@media (min-width: 769px){
	.backnum-column-grid{
		display: flex;
	}
	.backnum-column-grid__photo{
		margin-right: 3.75em;
	}
	.backnum-column-grid__notes{
		flex: 1 1;
	}
}

@media (max-width: 768px){
	.backnum-column-grid__photo{
		text-align: center;
		margin-bottom: 1.5em;
	}
	.backnum-column__photo{
		max-width: 100%;
	}
}



/* Backnum Shopinfo */
.backnum-shopinfo{
	margin-top: 3.75em;
	margin-bottom: 3.75em;
}
.backnum-shopinfo__inner{
	margin-left: 20%;
	margin-right: 20%;
	padding: 2.8125em;
	
	background-color: #F4EDE0;
}
.backnum-shopinfo__photo{
	text-align: center;
}
.backnum-shopinfo__photodata{
	max-width: 100%;
	box-shadow: 0 0 9px 1px rgba(0,0,0, .3);
}
.backnum-shopinfo__note{}
.backnum-shopinfo__title{
	line-height: 1.33;
	font-size: 1.5em;
	
	margin: 0;
}
.backnum-shopinfo__note{
	margin: 0;
}
.backnum-shopinfo__note + .backnum-shopinfo__note{
	margin-top: 1em;
}

@media (min-width: 769px){
	.backnum-shopinfo__inner{
		display: flex;
		align-items: center;
	}
	.backnum-shopinfo__photo{
		margin-right: 2.25em;
	}
	.backnum-shopinfo__note{
		flex: 1 1;
	}
}

@media (max-width: 768px){
	.backnum-shopinfo__photo{
		margin-bottom: 1.5em;
	}
}



/* Backnum Nav */
.backnum-nav{
	margin-top: 5em;
	margin-bottom: 5em;
}
.backnum-nav__title{
	line-height: 1.33;
	font-size: 2em;
	
	display: flex;
	justify-content: center;
	
	text-align: center;
	align-items: center;
	
	margin: 0;
	margin-bottom: 1em;
}
.backnum-nav__title:after,
.backnum-nav__title:before{
	content: "";
	display: block;
	
	flex: 0 0 auto;
	min-width: 1em;
	
	
	border-bottom: 1px solid;
}
.backnum-nav__title:after	{ margin-left: 1em; }
.backnum-nav__title:before	{ margin-right: 1em; }

.backnum-nav__items{
	line-height: 1.33;
	font-size: 1.75em;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
	margin: 0;
	padding: 0;
	list-style: none;
	
	margin-left: -1.5em;
}
.backnum-nav__item{
	margin-left: 1.5em;
}
.backnum__button{
	display: block;
	box-sizing: border-box;
	
	color: inherit;
	text-decoration: inherit;
	
	padding: .5em 1em;
	border: 1px solid;
}
.backnum__button--hotel{
	color: #E29B36;
	
}
.backnum__button--plan{
	color: #fff;
	background-color: #E29B36;
	border-color: transparent;
}








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

	aiueo

------------------------------------------------------*/
@media (min-width: 769px){}
@media (max-width: 768px){}





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

	aiueo

------------------------------------------------------*/
@media (min-width: 769px){}
@media (max-width: 768px){}





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

	aiueo

------------------------------------------------------*/
@media (min-width: 769px){}
@media (max-width: 768px){}


















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