* {
	color: black;
	padding: 0;
	margin: 0;
	font-feature-settings: 'pkna';
	--page-images-mb: 160px;
	--page-images-mb-sp: 72px;
}

a:hover {
	text-decoration: none;
}

.sp-only {
	display: none;
}

html {
	background-color: #faf6ea;
	height: -webkit-fill-available;
	width: 100%;
}

body {
	height: 100%;
	width: 100%;
}

header {
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	position: fixed;
	width: 100vw;
	pointer-events: none;
	z-index: 1;
}

header * {
	line-height: 0;
}

header * svg {
	fill: #385046;
	transition: fill 1s;
}

header .logo-main {
	height: 161px;
	width: 152px;
	opacity: 1;
	position: absolute;
	top: calc(46vh - 161px / 2);
	top: calc(var(--vh, 1vh) * 48 - 161px / 2);
	left: calc(50vw - 152px / 2);
	transition: all 2s ease-out;
}

header .logo-main.loading {
	opacity: 0;
	top: calc(46vh - 161px / 2 + 20px);
	top: calc(var(--vh, 1vh) * 48 - 161px / 2 + 20px);
}

header .logo-main svg {
	fill: #385046;
	stroke: #385046;
	stroke-width: 1px;
}

header .logo-sub1 {
	height: 18px;
	opacity: 1;
	position: absolute;
	top: 12px;
	transition: all 2s ease-out;
	left: 15px;
	width: 102px;
}

header .logo-sub1.loading {
	opacity: 0;
	top: 20px;
}

header .logo-sub2 {
	height: 20px;
	opacity: 1;
	position: absolute;
	top: 12px;
	transition: all 2s ease-out;
	right: 13px;
	width: 108px;
}

header .logo-sub2.loading {
	opacity: 0;
	top: 20px;
}

header .logo-sub3 {
	bottom: 15px;
	height: 34px;
	opacity: 1;
	position: absolute;
	right: 13px;
	transition: all 2s ease-out;
	width: 17px;
}

header .logo-sub3.loading {
	opacity: 0;
	bottom: 30px;
}

header .dot {
	bottom: 20px;
	fill: #385046;
	left: 20px;
	opacity: 0;
	position: absolute;
	width: 8px;
	animation: swipedot 2.5s cubic-bezier(0.42, 0, 0.18, 1) 0s infinite normal backwards;
}

@keyframes swipedot {
	0% {
		opacity: 0;
		stroke-width: 1px;
		transform: scale(0.0) translateY(0px);
	}

	18% {
		opacity: 1;
		transform: scale(1.0) translateY(0px);
	}

	100% {
		opacity: 0;
		transform: scale(0.6) translateY(-100px);
	}
}

header .dot svg {
	opacity: 1;
	transition: opacity .5s;
}

header .dot.loading svg {
	opacity: 0;
}

header .dot.disap svg {
	opacity: 0;
}

.wrapper {
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	width: 100vw;
	overflow: auto;
	scroll-snap-type: y mandatory;
}

.wrapper .full-size-container {
	display: block;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	position: relative;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	width: 100vw;
}

.wrapper .full-size-container .catch-copy {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	opacity: 0;
	text-align: center;
	transform: translateY(30px);
	transition: all 1s cubic-bezier(0.33, 1, 0.68, 1) .5s;
	width: 100%;
}

.wrapper .full-size-container .catch-copy.on {
	opacity: 1;
	transform: translateY(0px);
}

.wrapper .full-size-container .catch-copy img {
	height: 363px;
	width: auto;
}

.wrapper .full-size-container.photo {
	align-items: center;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.wrapper .full-size-container.photo img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.wrapper .full-size-container.buttons {
	position: relative;
	z-index: 100;
	align-items: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.wrapper .full-size-container.buttons>div {
	transform: translateY(-3vh);
}

.map {
	text-align: center;
}

.map img {
	height: auto;
	max-width: 42vw;
	width: 500px;
}

.link-button {
	align-items: center;
	display: flex;
	justify-content: center;
	position: relative;
}

.link-button a {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

.link-button::before {
	/*yoko*/
	border-top: 1px solid #00000030;
	border-bottom: 1px solid #00000030;
	content: '';
	display: block;
	height: 100%;
	padding: 2px 6px;
	pointer-events: none;
	position: absolute;
	width: 100%;
	transition: all .3s cubic-bezier(0.33, 1, 0.68, 1);
}

.link-button::after {
	/*tate*/
	border-left: 1px solid #00000030;
	border-right: 1px solid #00000030;
	content: '';
	display: block;
	height: 100%;
	padding: 0 6px;
	pointer-events: none;
	position: absolute;
	width: 100%;
	transition: all .3s cubic-bezier(0.33, 1, 0.68, 1);
}

.link-button:hover::before {
	/*yoko*/
	border-top: 1px solid #00000070;
	border-bottom: 1px solid #00000070;
	padding: 0 6px;
}

.link-button:hover::after {
	/*tate*/
	border-left: 1px solid #00000070;
	border-right: 1px solid #00000070;
	padding: 0 3px;
}

.link-button.reservation {
	height: auto;
	margin-bottom: 8vh;
	width: auto;
}

.link-button.reservation a {
	padding: 12px 60px;
}

.link-button.reservation a img {
	height: auto;
	width: 130px;
}

.link-button.google-map {
	height: 38px;
	margin-top: 30px;
	width: auto;
}

.link-button.google-map a {
	padding: 12px 40px 10px;
}

.link-button.google-map a img {
	height: auto;
	width: 90px;
}

.link-buttons-sns {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 9vh 0 0;
}

.link-button.sns {
	height: 38px;
	margin: 0 30px;
	width: 132px;
}

.link-button.sns.tw a {
	padding: 12px 30px;
}

.link-button.sns.tw a img {
	height: auto;
	width: 23px;
}

.link-button.sns.ig a {
	padding: 12px 30px 10px;
}

.link-button.sns.ig a img {
	height: auto;
	width: 84px;
}

.footer-logo {
	opacity: 0;
	position: absolute;
	bottom: 25px;
	left: 20px;
	height: auto;
	transform: translateY(10px);
	transition: all 2s cubic-bezier(0.33, 1, 0.68, 1) .2s;
	width: 70px;
}

.footer-logo.on {
	opacity: 1;
	transform: translateY(0px);
}

@media screen and (max-width: 900px) {
	.pc-only {
		display: none
	}

	.sp-only {
		display: block
	}

	header .logo-sub1 {
		top: 10px;
		left: 12px;
	}

	header .logo-sub2 {
		top: 10px;
		right: 10px;
	}

	header .logo-sub3 {
		right: 10px;
	}

	.footer-logo {
		width: 50px;
	}

	.wrapper .full-size-container.buttons>div {
		transform: translateY(0);
	}

	.wrapper .full-size-container .catch-copy img {
		height: 70vh;
		width: auto;
		translate: 0 4vh;
	}

	.link-button.google-map {
		margin-top: 20px;
	}

	.link-buttons-sns {
		flex-direction: column;
		margin: 30px 0 0;
	}

	.link-button.sns {
		margin: 30px 20px;
		width: 170px;
	}
}