@charset "UTF-8";
/*
unit(percentage(275px/@spdesignSize), vw)
マイナスの値の場合は
calc(-1 * unit(percentage(200px/@spdesignSize), vw))

SP時に両サイドに15pxの空きがあるので、768pxのデザインを738pxにして測定
*/
/*--------------------------------------------------------------------------------
common
--------------------------------------------------------------------------------*/
.visibilittyHidden {
	position: absolute !important;
	display: block !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	margin: -1px !important;
	padding: 0 !important;
	width: 1px !important;
	height: 1px !important;
	border: 0 !important;
}

img {
	width: 100%;
}

/*--------------------------------------------------------------------------------
app-header
--------------------------------------------------------------------------------*/
.app-header {
	width: 100%;
}

@media screen and (max-width: 767px) {}

/*--------------------------------------------------------------------------------
area-footer
--------------------------------------------------------------------------------*/
.area-footer ._btn-pagetop {
	display: none !important;
}
.pagetop {
	position: fixed;
	margin: 0;
	padding: 0;
	z-index: 100;
	width: 153px;
	height: 152px;
	bottom: 20px;
	right: calc(50% - 528px);
}
.pagetop img {
	width: 100%;
}
@media screen and (max-width: 767px) {
	.pagetop {
		right: 15px;
		width: 20%;
		height: auto;
	}
}

/*--------------------------------------------------------------------------------
wrapper
--------------------------------------------------------------------------------*/
.app-wrapper {
	width: 100%;
	margin: 0 auto;
}

.app-wrapper .app-nav {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0;
	/* padding: 0 1px 0 0; */
	padding: 0;
	background: url(../images/nav_bg.webp) no-repeat;
	background-size: cover;
}

.app-wrapper .app-nav.typeA {
	justify-content: center;
}

.app-wrapper .app-nav.typeB {}

/* .app-wrapper .lead {
	width: 83.2%;
	margin: 5% auto 2%;
} */
.app-wrapper a img {
	transition: 1s;
}
.app-wrapper a img:hover {
	transition: 0.5s;
	opacity: 0.6;
}
.app-wrapper .app-nav li {
	width: 25%;
	list-style: none;
	line-height: 1;
}

.app-wrapper .app-nav.typeA li {
	width: 20%;
}

.app-wrapper .app-nav.typeB li {
	width: 20%;
}

.app-wrapper .app-nav li button {
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	display: grid;
	place-items: center;
	grid-template-areas: a;
}

.app-wrapper .app-nav li img {
	vertical-align: bottom;
	grid-area: a;
}
.app-wrapper .app-nav li button.is-active img {
	transition: opacity 0.3s;
}

.app-wrapper .app-nav li button img:nth-child(1) {
	opacity: 1;
}
.app-wrapper .app-nav li button img:nth-child(2) {
	opacity: 0;
}
.app-wrapper .app-nav li button.is-active img:nth-child(1) {
	opacity: 0;
}
.app-wrapper .app-nav li button.is-active img:nth-child(2) {
	opacity: 1;
}
.app-wrapper .app-item-outer {
	display: none;
	/* padding-right: 1px; */
	margin-top: -1px;
}
.app-wrapper .app-item-outer.active {
	display: block;
}
.app-wrapper .app-item-outer .app-item {
	position: relative;
}
.app-wrapper .app-item-outer .bt,
.app-wrapper .app-item-outer figure {
	position: absolute;
	width: 85%;
	left: 7.5%;
}
.app-wrapper .app-item-outer .app-item.takeout,
.app-wrapper .app-item-outer .app-item.delivery,
.app-wrapper .app-item-outer .app-item.shop,
.app-wrapper .app-item-outer .point {
	position: relative;
}
.app-wrapper .app-item-outer .bt {
	bottom: 12rem;
}
.app-wrapper .app-item-outer figure {
	bottom: 3rem;
}
.app-wrapper .app-item-outer figure p {
	margin: 0 0 0.6em 0;
}
.app-wrapper .app-item-outer .app-item img {
	/* display: block; */
	width: 100%;
	height: auto;
}
.app-wrapper .app-item-outer .app-item a {
	display: block;
	position: absolute;
}
.app-wrapper .app-item-outer .app-item a img {
	display: block;
	width: 100%;
	height: auto;
}
.bland_list {
	position: relative;
}
.bland_list ul {
	width: 800px;
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	z-index: 50;
	margin: 0;
	padding: 0;
	top: 30px;
	left: 12.1%;
}
.bland_list ul li {
	list-style-type: none;
}
.bland_list ul li a img {
	width: 100%;
}

@media screen and (max-width: 767px) {
	.app-wrapper .app-item-outer .bt {
		bottom: 4.5rem;
	}
	.app-wrapper .app-item-outer figure {
		bottom: 1rem;
	}
	.app-wrapper .app-item-outer figure p {
		margin: 0 0 0.3em 0;
	}
	.bland_list ul {
		width: 80%;
		left: 10%;
		top: 1%;
	}
	.bland_list ul li {
		width: 17%;
		align-items: center;
		justify-content: center;
		display: flex;
		margin: 0 0.5rem;
	}
}

/* スクロール MV切り替え */
.mv-fixed {
	position: fixed;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
	width: 1056px;
	max-width: 100%;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

.mv-fixed.is-active {
	opacity: 1;
	visibility: visible;
}

.mv-fixed img {
	width: 100%;
	height: auto;
}

@media screen and (max-width: 767px) {
.mv-fixed {
	top: 66px;
	padding: 0 15px;
}
}

/*--------------------------------------------------------------------------------
PCとSP切り替え
--------------------------------------------------------------------------------*/
.pc_only {display: block;}
.sp_only {display: none;}

@media screen and (max-width: 768px) {
	.pc_only {display: none;}
	.sp_only {display: block;}
}

/*--------------------------------------------------------------------------------
area-app-nav
--------------------------------------------------------------------------------*/
.area-app-nav {
	background: url(../images/bg01.webp) no-repeat;
	background-size: cover;
}