@charset 'utf-8';

/*---------------------------------------------------------------------- */
/* Top Styles
------------------------------------------------------------------------ */

/* Utilities
---------------------------------------------------------- */

/* Section --------------------------------- */

.section {
	position: relative;
}

/* Layout
---------------------------------------------------------- */

#container {
	background: linear-gradient(180deg, #08253e 0%, #4d421e 15%, #2b2210 40%, #5d3d21 70%, #583514 90%, #3e3756 95%, #545454 100%);
}

/* #header --------------------------------- */

/* .logo */

#header > .logo {
	display: grid;
	place-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	opacity: 0;
}

#header > .logo > img {
	width: 19.6rem;
	height: 6.3rem;
}

/* .circle */

#header > .circle {
	display: grid;
	place-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
}

#header > .circle > img {
	width: 14.6rem;
	height: 15.4rem;
	transform: scale(0);
}

/* .line */

#header > .line {
	position: absolute;
	top: 100dvh;
	left: 50%;
	width: .2rem;
	height: 50dvh;
	background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	transform: translateX(-50%);
	transform-origin: 0 0;
}

/* .copy */

#header > .copy {
	position: absolute;
	top: 50dvh;
	left: 9.6rem;
	margin-top: -5rem;
	width: 12.4rem;
	height: 13.2rem;
	opacity: 0;
}

/* #dishes */

.dish {
	position: absolute;
	top: 50dvh;
}

.dish > img {
	transform: scale(0);
}

.dish01 { left: 12.7rem; margin-top: -35.7rem; width: 14.5rem; height: 14.6rem; }
.dish02 { left: 11.5rem; margin-top: -19.9rem; width: 10.2rem; height: 10rem; }
.dish03 { left: -5.1rem; margin-top: -25.1rem; width: 14.7rem; height: 14.7rem; }
.dish04 { left: 23.9rem; margin-top: -19.5rem; width: 14rem; height: 14.1rem; }
.dish05 { left: -4.9rem; margin-top: -4.6rem; width: 11.9rem; height: 12rem; }
.dish06 { left: -4.2rem; margin-top: 45.5rem; width: 14rem; height: 14rem; }
.dish07 { left: 19.6rem; margin-top: 40.3rem; width: 11.6rem; height: 11.7rem; }
.dish08 { left: 13.1rem; margin-top: 10.4rem; width: 10.5rem; height: 10.5rem; }
.dish09 { left: 25.3rem; margin-top: -.9rem; width: 12.5rem; height: 12.5rem; }
.dish10 { left: -3.6rem; margin-top: 12.1rem; width: 14.4rem; height: 14.4rem; }
.dish11 { left: 20.7rem; margin-top: 19.8rem; width: 15.1rem; height: 15.2rem; }
.dish12 { left: -1.9rem; margin-top: 80.2rem; width: 11.1rem; height: 11rem; }
.dish13 { left: 4rem; margin-top: 66.1rem; width: 12rem; height: 12rem; }
.dish14 { left: 18.4rem; margin-top: 73rem; width: 16.9rem; height: 16.8rem; }
.dish15 { left: 4.5rem; margin-top: 29.9rem; width: 14.4rem; height: 14.2rem; }
.dish16 { left: 15.3rem; margin-top: 55rem; width: 12rem; height: 11.9rem; }

.dish12-02,
.dish13-02,
.dish14-02,
.dish15-02,
.dish16-02 { display: none; }

/* #main --------------------------------- */

/* #section01 */

#section01 {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	margin-top: -80dvh;
	width: 100%;
	height: 100dvh;
}

#section01 .title {
	display: grid;
	place-content: center;
	position: relative;
	margin-top: 40%;
	width: 100%;
}

#section01 .title > .txt {
	z-index: 2;
	opacity: 0;
}

#section01 .title > .txt01 {
	width: 28.9rem;
	height: 11.8rem;
}

#section01 .title > .txt02 {
	position: absolute;
	top: 5.1rem;
	left: 11.7rem;
	width: 8.6rem;
	height: 1.65rem;
}

#section01 .title > .txt03 {
	position: absolute;
	top: -8.2rem;
	left: 15rem;
	width: 2.2rem;
	height: 27.4rem;
}

#section01 .imgs,
#section01 .imgs > .mask,
#section01 .imgs > .mask > .img {
	height: 19.1rem;
}

#section01 .imgs {
	margin-top: 6.8rem;
	width: 100%;
}

#section01 .imgs > .mask {
	--maskTop: 1;
	--maskBottom: 1;
	position: relative;
	width: 100%;
	clip-path: polygon(calc(var(--maskTop) * 100%) 0%, 100% 0%, 100% 100%, calc(var(--maskBottom) * 100%) 100%);
}

#section01 .imgs > .mask > .img {
	display: block;
	position: absolute;
	will-change: transform;
}

#section01 .imgs > .mask > .img01 { right: 12.4rem; width: 19.6rem; }
#section01 .imgs > .mask > .img02 { right: 4.6rem; width: 7.8rem; }
#section01 .imgs > .mask > .img03 { right: 0; width: 4.6rem; }

#section01 .imgs > .mask > .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#section01 .imgs > .mask > .img01 img { object-position: 0 0; }
#section01 .imgs > .mask > .img02 img { object-position: 85% 0; }
#section01 .imgs > .mask > .img03 img { object-position: 73% 0; }

/* #section02 */

#section02 {
	margin-top: -30dvh;
	padding-top: 100dvh;
}

#section02 .txt {
	display: grid;
	place-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	opacity: 0;
}

#section02 .txt > img {
	width: 25.2rem;
	height: 17.6rem;
}

#section02 .imgs {
	display: flex;
	flex-flow: column;
}

#section02 .imgs > .img01 { align-self: flex-end; width: 13.7rem; height: 10.9rem; }
#section02 .imgs > .img02 { margin-top: 6rem; width: 21.1rem; height: 14.2rem; }
#section02 .imgs > .img03 { align-self: flex-end; margin: 6rem 3.9rem 0 0; width: 12.1rem; height: 9.7rem; }
#section02 .imgs > .img04 { margin-top: 3.9rem; width: 17.1rem; height: 13.7rem; }
#section02 .imgs > .img05 { align-self: flex-end; margin-top: 6rem; width: 20.4rem; height: 16.3rem; }
#section02 .imgs > .img06 { margin: 6rem 0 0 2.2rem; width: 16.1rem; height: 12.9rem; }

/* #section03 */

#section03 {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	margin-top: -30dvh;
	height: 100dvh;
}

#section03 .title > .txt {
	display: block;
	opacity: 0;
}

#section03 .title > .txt01 {
	position: absolute;
	top: 50dvh;
	left: 50%;
	width: 36.8rem;
	height: 26.6rem;
	transform: translate(-50%, -50%);
}

#section03 .title > .txt02 {
	margin-left: 1.3rem;
	width: 14rem;
	height: 17.2rem;
}

#section03 .title > .txt03 {
	margin-top: 2.5rem;
	width: 16.1rem;
	height: 2.2rem;
}

#section03 .imgs {
	position: absolute;
	width: 100%;
	height: 100dvh;
	perspective: 100rem;
	transform-style: preserve-3d;
	pointer-events: none;
}

#section03 .imgs > .img {
	position: absolute;
	width: 100%;
	height: 100dvh;
	will-change: transform;
}

#section03 .imgs > .img > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#section03 .imgs > .img11 {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}

.slide-item > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.slide-main {
	width: 100%;
	height: 100%;
}

.slide-main > .slide-items {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.slide-main > .slide-items > .slide-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s;
}

.slide-main > .slide-items > .slide-item.active {
	z-index: 1;
	opacity: 1;
}

.slide-thumb {
	display: flex;
	overflow: hidden;
	opacity: 0;
}

.slide-thumb > .slide-items {
	display: flex;
	background: #000;
	pointer-events: auto;
	user-select: none;
	will-change: transform;
}

.slide-thumb > .slide-items > .slide-item {
	width: 11.7rem;
	height: 7.8rem;
	opacity: .7;
	transition: opacity .3s;
}

.slide-thumb > .slide-items > .slide-item.active {
	opacity: 1;
}

/* #footer --------------------------------- */

#footer {
	padding: 0 2rem 5.5rem 2rem;
}

.block-info {
	border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.block-info > .title {
	position: relative;
	padding-bottom: 2rem;
	line-height: 1.25;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	font-family: 'Bellefair', sans-serif;
	font-weight: 400;
	font-size: 2.8rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .13em;
}

.block-info > .unit {
	padding: 2.5rem 1rem;
}

.block-info > .unit01 > .info {
	margin-top: -2rem;
}

.block-info > .unit01 > .info > dt {
	margin-top: 2rem;
	font-weight: 700;
}

.block-info > .unit02 {
	border-top: 1px solid rgba(255, 255, 255, .3);
}

.block-info > .unit02 > .access {
	margin-top: 2.5rem;
}






/*---------------------------------------------------------------------- */
/* 768px Tablet & PC Styles
------------------------------------------------------------------------ */

@media screen and (min-width: 768px), print {

/* Utilities
---------------------------------------------------------- */

/* Section --------------------------------- */


/* Block --------------------------------- */



/* Layout
---------------------------------------------------------- */

/* #header --------------------------------- */

#header {
	height: 181.9rem;
}

/* .logo */

#header > .logo > img {
	width: 33rem;
	height: 10.6rem;
}

/* .circle */

#header > .circle > img {
	width: 25.5rem;
	height: 26.9rem;
}

/* .copy */

#header > .copy {
	left: 69.2rem;
	margin-top: -9.5rem;
	width: 22.1rem;
	height: 23.5rem;
}

/* #dishes */

.dish01 { left: 41rem; margin-top: -56.5rem; width: 33.7rem; height: 33.9rem; }
.dish02 { left: 95.6rem; margin-top: -45.1rem; width: 24.9rem; height: 24.5rem; }
.dish03 { left: -3.3rem; margin-top: -36.6rem; width: 31.9rem; height: 32rem; }
.dish04 { left: 136.7rem; margin-top: -39.2rem; width: 30.6rem; height: 30.7rem; }
.dish05 { left: 30.5rem; margin-top: -7.2rem; width: 25.6rem; height: 25.9rem; }
.dish06 { left: 106.2rem; margin-top: -7.1rem; width: 28.7rem; height: 28.7rem; }
.dish07 { left: -4.3rem; margin-top: 12.4rem; width: 27.6rem; height: 27.9rem; }
.dish08 { left: 55.8rem; margin-top: 21.5rem; width: 26.6rem; height: 26.6rem; }
.dish09 { left: 138.4rem; margin-top: 16.2rem; width: 27.3rem; height: 27.2rem; }
.dish10 { left: 99.4rem; margin-top: 34.3rem; width: 27.5rem; height: 27.5rem; }
.dish11 { left: 21.9rem; margin-top: 46.7rem; width: 28.3rem; height: 28.4rem; }
.dish12 { left: -8.2rem; margin-top: 73.7rem; width: 28.3rem; height: 28rem; }
.dish13 { left: 67.5rem; margin-top: 65rem; width: 31.9rem; height: 32rem; }
.dish14 { left: 132.7rem; margin-top: 61.4rem; width: 31.2rem; height: 31.1rem; }
.dish15 { left: 28.1rem; margin-top: 98.8rem; width: 30.4rem; height: 30.1rem; }
.dish16 { left: 108rem; margin-top: 98.8rem; width: 31.9rem; height: 31.7rem; }

.dish12-02 { display: block; left: 36.1rem; margin-top: -122.8rem; width: 28.3rem; height: 28rem; }
.dish13-02 { display: block; left: 99.4rem; margin-top: -128rem; width: 31.9rem; height: 32rem; }
.dish14-02 { display: block; left: 64.4rem; margin-top: -93.4rem; width: 31.2rem; height: 31.1rem; }
.dish15-02 { display: block; left: 123.2rem; margin-top: -89.2rem; width: 30.4rem; height: 30.1rem; }
.dish16-02 { display: block; left: 6rem; margin-top: -93.8rem; width: 31.9rem; height: 31.7rem; }

/* #main --------------------------------- */

/* #section01 */

#section01 {
	height: auto;
}

#section01 .title {
	margin-top: 14%;
}

#section01 .title > .txt01 {
	width: 55.8rem;
	height: 22.7rem;
}

#section01 .title > .txt02 {
	top: 10rem;
	left: 71.5rem;
	width: 16rem;
	height: 3.1rem;
}

#section01 .title > .txt03 {
	position: absolute;
	top: -14.5rem;
	left: 78rem;
	width: 4.15rem;
	height: 53rem;
}

#section01 .imgs,
#section01 .imgs > .mask,
#section01 .imgs > .mask > .img {
	height: 46.7rem;
}

#section01 .imgs {
	margin-top: 8rem;
}

#section01 .imgs > .mask > .img01 { right: 67.6rem; width: 92.4rem; }
#section01 .imgs > .mask > .img02 { right: 25.5rem; width: 42.2rem; }
#section01 .imgs > .mask > .img03 { right: 0; width: 25.4rem; }

#section01 .imgs > .mask > .img01 img { object-position: 0 0; }
#section01 .imgs > .mask > .img02 img { object-position: 72% 0; }
#section01 .imgs > .mask > .img03 img { object-position: 63% 0; }

/* #section02 */

#section02 .txt > img {
	width: 37.3rem;
	height: 26rem;
}

#section02 .imgs > .img01 { width: 50.1rem; height: 25.9rem; }
#section02 .imgs > .img02 { margin-top: 42rem; width: 84.7rem; height: 57rem; }
#section02 .imgs > .img03 { margin: 33.8rem 14.3rem 0 0; width: 62.4rem; height: 49.8rem; }
#section02 .imgs > .img04 { margin-top: 29.1rem; width: 67.7rem; height: 54.1rem; }
#section02 .imgs > .img05 { margin: 29.1rem 11.6rem 0 0; width: 59.3rem; height: 47.4rem; }
#section02 .imgs > .img06 { margin: 29.3rem 0 0 17.8rem; width: 48.3rem; height: 38.6rem; }

/* #section03 */

#section03 .title > .txt01 {
	width: 69.2rem;
	height: 49.9rem;
}

#section03 .title > .txt02 {
	margin-left: 2rem;
	width: 26.1rem;
	height: 32.3rem;
}

#section03 .title > .txt03 {
	margin-top: 4.8rem;
	width: 30.2rem;
	height: 4.2rem;
}

.slide-thumb > .slide-items > .slide-item {
	width: 18.5rem;
	height: 12.3rem;
}

/* #footer --------------------------------- */

#footer {
	padding: 30rem 18.7rem 15rem 18.7rem;
}

.block-info {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 0 15rem;
}

.block-info > .title {
	padding-bottom: 5rem;
	width: 100%;
	line-height: 1.15;
	font-size: 5.3rem;
	letter-spacing: .15em;
}

.block-info > .unit {
	padding: 8rem 0;
}

.block-info > .unit01 > .info {
	margin-top: 0;
}

.block-info > .unit01 > .info > dt {
	margin-top: 0;
}

.block-info > .unit01 > .info > dd + dt {
	margin-top: 4rem;
}

.block-info > .unit02 {
	border-top: 0;
}

.block-info > .unit02 > .access {
	margin-top: 4rem;
}

}