@charset "UTF-8";
/* CSS Document */



/****************************************************************************************************
contents
****************************************************************************************************/
#wrap {
	overflow: hidden;
	padding-top: 130px;
}



/****************************************************************************************************
opening
****************************************************************************************************/
#opening {
	position:fixed;
	z-index:6000;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	background:#F6F6F6;
}
#opening-inner {
	position:relative;
	width:100vw;
	height:100vh;
}
#skip {
	position:absolute;
	right:10px;
	bottom:10px;
	z-index:11;
}
#skip a {
	display:block;
	width:160px;
	height:34px;
	line-height:34px;
	background:#F3F3F3;
	color:#666;
}
#op-bg {
	position:absolute;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	background-image:
		url(../img/op3/op-bg1.png),
		url(../img/op3/op-bg2.png);
	background-position:
		left top,
		bottom right;
	background-size:
		cover,
		cover;
	opacity: 0;
}
#op1 {
	position:absolute;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	opacity: 0;
}
#op1 img {
	object-fit: none;
	width: 100vw;
	height: 100vh;
}
#op2 {
	position:absolute;
	width:100vw;
	height:100vh;
	top:0%;
	left:0%;
}
#op2-txt {
	position:absolute;
	width: 50vw;
	height: 100vh;
	top:0%;
	left:0%;
	overflow: hidden;
}
#copy2-1,
#copy2-2 {
	position:absolute;
	top:0%;
	left:0%;
	opacity: 0;
}
#copy2-1 img,
#copy2-2 img {
	object-fit: none;
	width: 50vw;
	height: 100vh;
}
#op2-img {
	position:absolute;
	width: 50vw;
	height: 100vh;
	top:0%;
	left:50%;
	overflow: hidden;
	opacity: 0;
}
#op2-img figcaption {
	position: absolute;
	left: 0.8em;
	bottom: 0.8em;
	color: #FFF;
	font-size: 0.733rem;
}
#op2-img .img-inner {
	position: absolute;
	display: block;
	right: 0;
	top: 0;
}
#op2-img img {
	object-fit: cover;
	object-position: 100% 50%;
	width: calc(50vw + 100px);
	height: 100vh;
}
#op3 {
	position:absolute;
	width:100vw;
	height:100vh;
	top:0%;
	left:0%;
}
#op3-txt {
	position:absolute;
	width: 50vw;
	height: 100vh;
	top:0%;
	left:50%;
	overflow: hidden;
}
#copy3-1,
#copy3-2 {
	position:absolute;
	top:0%;
	left:0%;
	opacity: 0;
}
#copy3-1 img,
#copy3-2 img {
	object-fit: none;
	width: 50vw;
	height: 100vh;
}
#op3-img {
	position:absolute;
	width: 50vw;
	height: 100vh;
	top:0%;
	left:0%;
	overflow: hidden;
	opacity: 0;
}
#op3-img figcaption {
	position: absolute;
	right: 0.8em;
	bottom: 0.8em;
	color: #FFF;
	font-size: 0.733rem;
}
#op3-img .img-inner {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
}
#op3-img img {
	object-fit: cover;
	object-position: 0% 50%;
	width: calc(50vw + 100px);
	height: 100vh;
}



/****************************************************************************************************
bnr-movie
****************************************************************************************************/
#bnr-movie {
	position: fixed;
	left: 0;
	bottom: 40px;
	z-index: 1000;
	box-shadow: 5px 5px 10px rgba(0,0,0,.25);
}
#copyright {
	padding-bottom: 200px;
}



/****************************************************************************************************
main
****************************************************************************************************/
#main {
	position: relative;
	/*max-width: 1600px;
	margin: auto;*/
}
.main {
	position: relative;
}
.main-img img {
	width: 100%;
	height: auto;
}
.main-copy {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 10;
}
.main-copy img {
	width: 100%;
	height: auto;
}

.main-img img {
	transform: scale(1.0);
	-webkit-transition: transform 10000ms linear;
	-ms-transition: transform 10000ms linear;
	transition: transform 10000ms linear;
}
.zoom-in .main-img img {
	transform: scale(1.2);
}
#main1.zoom-in .main-img img {
	transform: scale(1.0);
}
#slide1-copy.main-copy img {
	opacity: 0;
	transform: translate(-30px, 0);
	-webkit-transition: transform 500ms 800ms ease-out, opacity 1000ms 800ms;
	-ms-transition: transform 500ms 800ms ease-out, opacity 1000ms 800ms;
	transition: transform 500ms 800ms ease-out, opacity 1000ms 800ms;
}
.zoom-in #slide1-copy.main-copy img {
	opacity: 1;
	transform: translate(0, 0);
}

.bx-pager {
	position: absolute;
	left: 20px;
	bottom: 14px;
	z-index: 1000;
	line-height: 1.0;
	font-size: 10px;
}
.bx-pager-item {
	display: inline-block;
	margin: 0 4px 0 0;
}
.bx-pager-link {
	display: block;
	width: 40px;
	height: 4px;
	background: #E2DED3;
	text-indent: -9999px;
}
.bx-pager-link.active {
	background: #8A000D;
}
.main-cap {
	position: absolute;
	right: 0.8em;
	bottom: 0.8em;
	color: #FFF;
	font-size: 0.733rem;
}
#main1 .main-cap {
	color: #000;
}



/****************************************************************************************************
point
****************************************************************************************************/
#point {
	background: #F7F5E8;
	background: linear-gradient(to right, #833724 0%, #833724 49%, #F7F5E8 50%, #F7F5E8 100%);
}



/****************************************************************************************************
info
****************************************************************************************************/
#info {
	background: #F1F0EA URL(../img/top/info-bg.jpg) no-repeat center top;
	padding: 80px 0 80px 0;
}
#info-block {
	max-width: 1300px;
	margin: auto;
}
#info1 {
	padding: 0 0 60px 0;
}
#photo-collection {
	padding: 0 0 60px 0;
}
#photo-collection a {
	display: inline-block;
	box-shadow: 10px 10px 20px rgba(0,0,0,.3);
}
#btn-block {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
#entry-btn,
#reservation-btn {
	box-shadow: 10px 10px 20px rgba(0,0,0,.3);
}
#reservation-btn {
	margin-left: 20px;
}

.button a {
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
	background: linear-gradient(to right, #604C3A, #2E1708);
    color: #ffffff;
    padding: 0;
    text-align: center;
    text-decoration: none;
    transition: .25s linear;
    -webkit-transition: .25s linear;
    -moz-transition: .25s linear;
}
.button.reservation a {
	background: linear-gradient(to right, #5E302D, #2D0B04);
}
.button a:before {
    display: block;
    position: absolute;
    z-index: -1;
    left: -30%;
    top: -60%;
    content: "";
    width: 80px;
    height: 300px;
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%,rgba(255,255,255,0) 100%);
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.3)),color-stop(100%,rgba(255,255,255,0)));
    background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,0.3),rgba(255,255,255,0) 100%);
    animation: shiny 4s infinite linear;
    -webkit-animation: shiny 4s infinite linear;
    -moz-animation: shiny 4s infinite linear;
}
@keyframes shiny {
    0% {
        left: -30%;
    }
    10% {
        left: 130%;
    }
    100% {
        left: 130%;
    }
}
@-webkit-keyframes shiny {
    0% {
        left: -30%;
    }
    10% {
        left: 130%;
    }
    100% {
        left: 130%;
    }
}
@-moz-keyframes shiny {
    0% {
        left: -30%;
    }
    10% {
        left: 130%;
    }
    100% {
        left: 130%;
    }
}
#campaign {
	margin-top: 46px;
}

#info2 {
	padding: 66px 0 46px 0;
}
#tel {
	padding: 76px 0 20px 0;
}
#covid-19 {
	padding: 0 0 30px 0;
}
#company {
}
#company ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
#company ul li + li {
	margin-left: 40px;
}



/****************************************************************************************************
position
****************************************************************************************************/
#position {
	position: relative;
	min-width: 1200px;
}
#position-copy {
	position: absolute;
	left: 0;
	right: 0;
	top: 4.125vw;
	z-index: 100;
	-webkit-transition: all 1000ms;
	-ms-transition: all 1000ms;
	transition: all 1000ms;
}
#position-text {
	position: absolute;
	left: 0;
	right: 0;
	top: 9.125vw;
	z-index: 100;
	-webkit-transition: all 1000ms;
	-ms-transition: all 1000ms;
	transition: all 1000ms;
}
#position-active {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 10;
}
#position-img img,
#position-active img {
	width: 100%;
}
@media screen and (max-width: 1600px) {
	#position-copy {
		width: 43.25vw;
		margin: auto;
	}
	#position-text {
		width: 51.25vw;
		margin: auto;
	}
	#position-copy img,
	#position-text img {
		width: 100%;
		height: auto;
	}
}
@media screen and (max-width: 1200px) {
	#position-copy {
		width: calc(1200px * 0.4325);
		top: 49px;
	}
	#position-text {
		width: calc(1200px * 0.5125);
		top: 111px;
	}
}



/****************************************************************************************************
contents
****************************************************************************************************/
#info .sec-inner {
	width: auto;
}
.sec-inner {
	position: relative;
	width: 1280px;
	margin: auto;
}
.sec-title,
.sec-img,
.sec-copy,
.sec-text,
.sec-btn {
	position: absolute;
}
.sec-img figcaption {
	margin-top: 8px;
	color: #FFF;
	font-size: 0.733rem;
	text-align: right;
}
#location a,
#access a,
#design a,
#plan a {
	display: block;
	width: 100%;
	height: 100%;
}



/****************************************************************************************************
location
****************************************************************************************************/
#location {
	height: 767px;
	background: #000 URL(../img/top/location-bg.jpg) no-repeat center top;
	background-size: cover;
}
#location .sec-title {
	left: 0;
	right: 0;
	top: 93px;
}
#location .sec-img {
	left: 190px;
	top: 169px;
}
#location .sec-copy {
	left: 1210px;
	top: 101px;
}
#location .sec-text {
	left: 1107px;
	top: 170px;
}
#location .sec-btn {
	left: 0;
	right: 0;
	top: 616px;
}



/****************************************************************************************************
access
****************************************************************************************************/
#access {
	height: 790px;
	background: #000 URL(../img/top/access-bg.jpg) no-repeat center top;
	background-size: cover;
}
#access .sec-title {
	left: 0;
	right: 0;
	top: 116px;
}
#access .sec-img {
	left: 192px;
	top: 217px;
}
#access .sec-copy {
	left: 117px;
	top: 149px;
}
#access .sec-text {
	left: 14px;
	top: 218px;
}
#access .sec-btn {
	left: 0;
	right: 0;
	top: 639px;
}



/****************************************************************************************************
design
****************************************************************************************************/
#design {
	height: 782px;
	background: #000 URL(../img/top/design-bg.jpg) no-repeat center top;
	background-size: cover;
}
#design .sec-title {
	left: 0;
	right: 0;
	top: 119px;
}
#design .sec-img {
	left: 190px;
	top: 195px;
}
#design .sec-copy {
	left: 1210px;
	top: 120px;
}
#design .sec-text {
	left: 1107px;
	top: 190px;
}
#design .sec-btn {
	left: 0;
	right: 0;
	top: 642px;
}



/****************************************************************************************************
plan
****************************************************************************************************/
#plan {
	height: 751px;
	background: #000 URL(../img/top/plan-bg.jpg) no-repeat center top;
	background-size: cover;
}
#plan .sec-title {
	left: 0;
	right: 0;
	top: 131px;
}
#plan .sec-img {
	left: 217px;
	top: 207px;
}
#plan .sec-copy {
	left: 116px;
	top: 164px;
}
#plan .sec-text {
	left: 14px;
	top: 235px;
}
#plan .sec-btn {
	left: 0;
	right: 0;
	top: 654px;
}



@media screen and (max-width: 767px),
screen and (max-width: 960px) and (orientation: landscape) {
	
	
	
	/****************************************************************************************************
	contents
	****************************************************************************************************/
	#wrap {
		padding-top: 0;
	}
	
	
	
	/****************************************************************************************************
	opening
	****************************************************************************************************/
	#skip {
		position:absolute;
		right:2vw;
		bottom:auto;
		top: 2vw;
		z-index:11;
	}
	#skip a {
		display:block;
		width:30vw;
		height:8vw;
		line-height:8vw;
		font-size:1.8vw;
	}
	#op-bg {
		background-image:
			url(../img/op3/op-bg1.png),
			url(../img/op3/op-bg2.png);
		background-position:
			left top,
			bottom right;
		background-size:
			200vw auto,
			200vw auto;
	}
	#op1 img {
		object-fit: contain;
		width: 100vw;
		height: 100vh;
	}
	#op2-txt {
		position:absolute;
		width: 100vw;
		height: 50vh;
		top:0%;
		left:0%;
		overflow: hidden;
	}
	#copy2-1,
	#copy2-2 {
		position:absolute;
		top:0%;
		left:0%;
		opacity: 0;
	}
	#copy2-1 img,
	#copy2-2 img {
		object-fit: contain;
		width: 100vw;
		height: 50vh;
	}
	#op2-img {
		position:absolute;
		width: 100vw;
		height: 50vh;
		top:50%;
		left:0%;
		overflow: hidden;
		opacity: 0;
	}
	#op2-img figcaption {
		position: absolute;
		left: 0.8em;
		bottom: 0.8em;
		color: #FFF;
		font-size: 0.533rem;
	}
	#op2-img .img-inner {
		position: absolute;
		display: block;
		right: 0;
		top: 0;
	}
	#op2-img img {
		object-fit: cover;
		object-position: 100% 50%;
		width: calc(100vw + 100px);
		height: 50vh;
	}
	#op3 {
		position:absolute;
		width:100vw;
		height:100vh;
		top:0%;
		left:0%;
	}
	#op3-txt {
		position:absolute;
		width: 100vw;
		height: 50vh;
		top:0%;
		left:0%;
		overflow: hidden;
	}
	#copy3-1,
	#copy3-2 {
		position:absolute;
		top:0%;
		left:0%;
		opacity: 0;
	}
	#copy3-1 img,
	#copy3-2 img {
		object-fit: contain;
		width: 100vw;
		height: 50vh;
	}
	#op3-img {
		position:absolute;
		width: 100vw;
		height: 50vh;
		top:50%;
		left:0%;
		overflow: hidden;
		opacity: 0;
	}
	#op3-img figcaption {
		position: absolute;
		right: 0.8em;
		bottom: 0.8em;
		color: #FFF;
		font-size: 0.533rem;
	}
	#op3-img .img-inner {
		position: absolute;
		display: block;
		left: 0;
		top: 0;
	}
	#op3-img img {
		object-fit: cover;
		object-position: 0% 50%;
		width: calc(100vw + 100px);
		height: 50vh;
	}
	
	
	
	/****************************************************************************************************
	bnr-movie
	****************************************************************************************************/
	#bnr-movie {
		width: 40vw;
		bottom: 18vw;
	}
	#copyright {
		padding-bottom: 38vw;
	}
	
	
	
	/****************************************************************************************************
	main
	****************************************************************************************************/
	#main {
		margin-top: 11.5vw;
	}
	.main-img img {
		width: 108%;
		width: 100%;
		height: auto;
		margin-left: -4%;
		margin-left: 0%;
	}
	.main-copy {
	}
	
	.bx-pager {
		left: 1.4vw;
		bottom: 0.4vw;
	}
	.bx-pager-item {
		margin: 0 0.5vw 0 0;
	}
	.bx-pager-link {
		width: 5vw;
		height: 0.5vw;
	}
	.main-cap {
		position: absolute;
		right: 1em;
		bottom: 1em;
		color: #FFF;
		font-size: 0.533rem;
	}
	
	
	
	/****************************************************************************************************
	point
	****************************************************************************************************/
	#point {
	}
	
	
	
	/****************************************************************************************************
	info
	****************************************************************************************************/
	#info {
		background-size: 200vw;
		padding: 8vw 4vw 8vw 4vw;
	}
	#info-block {
		max-width: initial;
		max-width: auto;
	}
	#info1 {
		width: 80vw;
		margin: auto;
		padding: 0 0 7vw 0;
	}
	#photo-collection {
		padding: 0 0 5vw 0;
	}
	#btn-block {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	#entry-btn,
	#reservation-btn {
		box-shadow: 1vw 1vw 2vw rgba(0,0,0,.3);
	}
	#reservation-btn {
		margin-left: 2vw;
	}
	#campaign {
		margin-top: 3vw;
	}
	#info2 {
		width: 54vw;
		margin: auto;
		padding: 7vw 0 7vw 0;
	}
	#tel {
		width: 80vw;
		margin: auto;
		padding: 7vw 0 3vw 0;
	}
	#covid-19 {
		width: 64vw;
		margin: auto;
		padding: 0 0 5vw 0;
	}
	#company ul li + li {
		margin-left: 3vw;
	}
	
	
	
	/****************************************************************************************************
	position
	****************************************************************************************************/
	#position {
		min-width: initial;
		min-width: auto;
	}
	#position-copy {
		width: calc(43.25vw * 1.22);
		top: 4.125vw;
	}
	#position-text {
		width: calc(51.25vw * 1.22);
		top: calc(9.125vw * 1.22);
	}
	
	
	
	/****************************************************************************************************
	contents
	****************************************************************************************************/
	.sec-inner {
		width: 100%;
	}
	.sec-title,
	.sec-img,
	.sec-btn {
		position: static;
	}
	.sec-title {
		width: 46vw;
		margin: auto;
	}
	.sec-img {
		width: 74vw;
		padding: 5vw 0;
	}
	.sec-btn {
		width: 46vw;
		margin: auto;
	}
	.sec-img figcaption {
		margin-top: 0.6em;
		font-size: 0.6rem;
	}
	#location a,
	#access a,
	#design a,
	#plan a {
		padding: 10vw 4vw;
	}
	
	
	
	/****************************************************************************************************
	location
	****************************************************************************************************/
	#location {
		height: auto;
	}
	#location .sec-copy {
		width: 5vw;
		left: 87vw;
		top: 2vw;
	}
	#location .sec-text {
		width: 8vw;
		left: 77vw;
		top: 9vw;
	}
	
	
	
	/****************************************************************************************************
	access
	****************************************************************************************************/
	#access {
		height: auto;
	}
	#access .sec-copy {
		width: 5vw;
		left: 10vw;
		top: 2vw;
	}
	#access .sec-text {
		width: 8vw;
		left: 0vw;
		top: 9vw;
	}
	#access .sec-img {
		margin-left: 18vw;
	}
	
	
	
	/****************************************************************************************************
	design
	****************************************************************************************************/
	#design {
		height: auto;
	}
	#design .sec-copy {
		width: 5vw;
		left: 87vw;
		top: 2vw;
	}
	#design .sec-text {
		width: 8vw;
		left: 77vw;
		top: 9vw;
	}
	
	
	
	/****************************************************************************************************
	plan
	****************************************************************************************************/
	#plan {
		height: auto;
	}
	#plan .sec-copy {
		width: 5vw;
		left: 10vw;
		top: 2vw;
	}
	#plan .sec-text {
		width: 8vw;
		left: 0vw;
		top: 9vw;
	}
	#plan .sec-img {
		margin-left: 18vw;
	}
}

@media screen and (max-width: 960px) and (orientation: landscape) {
	
	
	
	/****************************************************************************************************
	opening
	****************************************************************************************************/
	#skip {
		right:1vw;
		top: 1vw;
	}
	#skip a {
		display:block;
		width:15vw;
		height:5vw;
		line-height:5vw;
		font-size:1.0vw;
	}
	#op-bg {
		position:absolute;
		width:100vw;
		height:100vh;
		top:0;
		left:0;
		background-image:
			url(../img/op3/op-bg1.png),
			url(../img/op3/op-bg2.png);
		background-position:
			left top,
			bottom right;
		background-size:
			cover,
			cover;
		opacity: 0;
	}
	#op1 {
		position:absolute;
		width:100vw;
		height:100vh;
		top:0;
		left:0;
		opacity: 0;
	}
	#op1 img {
		object-fit: contain;
		width: 100vw;
		height: 100vh;
	}
	#op2 {
		position:absolute;
		width:100vw;
		height:100vh;
		top:0%;
		left:0%;
	}
	#op2-txt {
		position:absolute;
		width: 50vw;
		height: 100vh;
		top:0%;
		left:0%;
		overflow: hidden;
	}
	#copy2-1,
	#copy2-2 {
		position:absolute;
		top:0%;
		left:0%;
		opacity: 0;
	}
	#copy2-1 img,
	#copy2-2 img {
		object-fit: contain;
		width: 50vw;
		height: 100vh;
	}
	#op2-img {
		position:absolute;
		width: 50vw;
		height: 100vh;
		top:0%;
		left:50%;
		overflow: hidden;
		opacity: 0;
	}
	#op2-img figcaption {
		position: absolute;
		left: 0.8em;
		bottom: 0.8em;
		color: #FFF;
		font-size: 0.266rem;
	}
	#op2-img .img-inner {
		position: absolute;
		display: block;
		right: 0;
		top: 0;
	}
	#op2-img img {
		object-fit: cover;
		object-position: 100% 50%;
		width: calc(50vw + 100px);
		height: 100vh;
	}
	#op3 {
		position:absolute;
		width:100vw;
		height:100vh;
		top:0%;
		left:0%;
	}
	#op3-txt {
		position:absolute;
		width: 50vw;
		height: 100vh;
		top:0%;
		left:50%;
		overflow: hidden;
	}
	#copy3-1,
	#copy3-2 {
		position:absolute;
		top:0%;
		left:0%;
		opacity: 0;
	}
	#copy3-1 img,
	#copy3-2 img {
		object-fit: contain;
		width: 50vw;
		height: 100vh;
	}
	#op3-img {
		position:absolute;
		width: 50vw;
		height: 100vh;
		top:0%;
		left:0%;
		overflow: hidden;
		opacity: 0;
	}
	#op3-img figcaption {
		position: absolute;
		right: 0.8em;
		bottom: 0.8em;
		color: #FFF;
		font-size: 0.266rem;
	}
	#op3-img .img-inner {
		position: absolute;
		display: block;
		left: 0;
		top: 0;
	}
	#op3-img img {
		object-fit: cover;
		object-position: 0% 50%;
		width: calc(50vw + 100px);
		height: 100vh;
	}
}