/*
Small (smaller than 640px)
Medium (641px to 1007px)
Large (1008px and larger)
*/


/*********************************************************** SMALL SCREEN */	
	#menu-top-wrapper {
		height: 80px;
	}
	
	#menu-mobile-close-button {
		right: 20px;
	}
	
	/* TOP LOGO */
	#menu-top-logo {
		width: 200px;
		height: calc(200px * (56 / 398));
	}
	
	#menu-top-menu-text {
		display: none;
	}
	
	/* TOP RESERVE BUTTON */ 
	#menu-top-reserve-button {
		display: none;
	}
	
	#menu-mobile-close-text {
		display: none;
	}
	
	#menu-mobile-inner-left {
		width: calc(100vw / 5 * 2);
		max-width: none;
		display: none;
	}
	#menu-mobile-inner-left-mobile {
		width: 100%;
		margin: 50px 0px 0px 0px;
		display: block;
	}
	
	#menu-mobile-inner-middle {
		width: calc(100% - 50px);
		max-width: 400px;
		margin: 0px auto;
	}
	
	#menu-mobile-inner-right {
		width: 0px;
		max-width: none;
		margin: 0px;
		display: none;
	}
	
	#menu-mobile-inner-middle-logo-pc {
		display: none;
	}
	#menu-mobile-inner-middle-logo-m {
		display: block;
	}
	
	.menu-mobile-inner-button-line {
		display: none;
	}

/*********************************************************** MEDIUM SCREEN */
@media screen and (min-width: 800px) {
	#menu-top-wrapper {
		height: 110px;
	}
	
	#menu-mobile-close-button {
		right: 40px;
	}
	
	/* TOP LOGO */
	#menu-top-logo {
		width: 240px;
		height: calc(240px * (56 / 398));
	}
	
	#menu-top-menu-text {
		display: block;
	}
	
	/* TOP RESERVE BUTTON */ 
	#menu-top-reserve-button {
		display: block;
	}
	
	#menu-mobile-close-text {
		display: block;
	}
	
	#menu-mobile-inner-left {
		width: calc(100vw / 5 * 2);
		max-width: none;
		display: none;
	}
	#menu-mobile-inner-left-mobile {
		width: 100%;
		margin: 50px 0px 0px 0px;
		display: block;
	}
	
	#menu-mobile-inner-middle {
		width: calc(100% - 50px);
		max-width: 450px;
		margin: 0px auto;
	}
	
	#menu-mobile-inner-right {
		width: 0px;
		max-width: 0px;
		margin: 0px;
		display: none;
	}
	
	#menu-mobile-inner-middle-logo-pc {
		display: none;
	}
	#menu-mobile-inner-middle-logo-m {
		display: block;
	}
	
	.menu-mobile-inner-button-line {
		display: none;
	}
}

/*********************************************************** MEDIUM 2 SCREEN */
@media screen and (min-width: 1100px) {
	#menu-top-wrapper {
		height: 110px;
	}
	
	#menu-mobile-close-button {
		right: 40px;
	}
	
	/* TOP LOGO */
	#menu-top-logo {
		width: 240px;
		height: calc(240px * (56 / 398));
	}
	
	#menu-top-menu-text {
		display: block;
	}
	
	/* TOP RESERVE BUTTON */ 
	#menu-top-reserve-button {
		display: block;
	}
	
	#menu-mobile-close-text {
		display: block;
	}
	
	#menu-mobile-inner-left {
		width: calc(100vw / 5 * 2);
		max-width: none;
		display: inline-block;
	}
	#menu-mobile-inner-left-mobile {
		width: 100%;
		margin: 50px 0px 0px 0px;
		display: block;
	}
	
	#menu-mobile-inner-middle {
		width: calc((100vw / 5 * 3) - 81px);
		max-width: 400px;
		margin: 0px auto 0px 80px;
	}
	
	#menu-mobile-inner-right {
		width: 0px;
		max-width: 0px;
		margin: 0px;
		display: none;
	}
	
	#menu-mobile-inner-middle-logo-pc {
		display: block;
	}
	#menu-mobile-inner-middle-logo-m {
		display: none;
	}
	
	.menu-mobile-inner-button-line {
		display: block;
	}
}

/*********************************************************** LARGE SCREEN */
@media screen and (min-width: 1380px) {
	#menu-top-wrapper {
		height: 120px;
	}
	
	#menu-mobile-close-button {
		right: 100px;
	}
	
	/* TOP LOGO */
	#menu-top-logo {
		width: 300px;
		height: calc(300px * (56 / 398));
	}
	
	#menu-top-menu-text {
		display: block;
	}
	
	/* TOP RESERVE BUTTON */ 
	#menu-top-reserve-button {
		display: block;
	}
	
	#menu-mobile-close-text {
		display: block;
	}
	
	#menu-mobile-inner-left {
		width: calc(100vw / 5 * 2);
		max-width: 600px;
		display: inline-block;
	}
	#menu-mobile-inner-left-mobile {
		width: 0%;
		margin: 0px;
		display: none;
	}
	
	#menu-mobile-inner-middle {
		width: 250px;
		max-width: none;
		margin: 0px 0px 0px 160px;
	}
	
	#menu-mobile-inner-right {
		width: 90px;
		max-width: none;
		margin: 0px 0px 0px 200px;
		display: inline-block;
	}
	
	#menu-mobile-inner-middle-logo-pc {
		display: block;
	}
	#menu-mobile-inner-middle-logo-m {
		display: none;
	}
	
	.menu-mobile-inner-button-line {
		display: block;
	}
}


/***************************************************************************************************************** MENU */


/***************************************************************************************************************** TOP MENU */
#menu-top-wrapper {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 120px;
	background: rgb(45, 77, 88);
	
	z-index: 9990;
}

#menu-top-logo {
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-image: url("../assets/images/main/menu-top-logo.svg");
}

#menu-top-container {
	width: 100%;
	height: 18px;
}

#menu-top-menu-button {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100px;
	height: 18px;
	
	cursor: pointer;
}
#menu-top-menu-button:hover #menu-top-menu-icon-0 {
	width: 16px;
}
#menu-top-menu-button:hover #menu-top-menu-icon-1 {
	width: 7px;
}
#menu-top-menu-button:hover #menu-top-menu-icon-2 {
	width: 22px;
}

#menu-top-menu-icon {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 22px;
	height: 18px;
}

#menu-top-menu-icon-0 {
	position: absolute;
	top: 1px;
	left: 0px;
	width: 7px;
	height: 1px;
	background: rgb(223, 209, 167);
	
	-webkit-transition: width 0.3s;
	transition: width 0.3s;
}
#menu-top-menu-icon-1 {
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	background: rgb(223, 209, 167);
	
	-webkit-transition: width 0.3s;
	transition: width 0.3s;
}
#menu-top-menu-icon-2 {
	position: absolute;
	bottom: 1px;
	left: 0px;
	width: 15px;
	height: 1px;
	background: rgb(223, 209, 167);
	
	-webkit-transition: width 0.3s;
	transition: width 0.3s;
}

#menu-top-menu-text {
	position: absolute;
	top: 0px;
	left: 42px;
	height: 18px;
	
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	color: rgb(223, 209, 167);
	letter-spacing: 6px;
	line-height: 18px;
	text-align: left;
	
	opacity: 0.8;
}

#menu-top-reserve-button {
	position: absolute;
	top: 0px;
	right: 0px;
	height: 18px;
	
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	color: rgb(223, 209, 167);
	letter-spacing: 6px;
	line-height: 18px;
	text-align: left;
	
	opacity: 0.8;
	
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
#menu-top-reserve-button:hover {
	opacity: 1.0;
}


/***************************************************************************************************************** BUTTON (GOLD) */
.menu-common-button {
	position: relative;
	width: calc(50px + 20px + 70px);
	height: 28px;
	background: transparent;
	margin: 0px;
	cursor: pointer;
}
.menu-common-button:hover .menu-common-arrow {
	right: 0px;
}

.menu-common-text {
	position: relative;
	width: 50px;
	height: 28px;
	background: transparent;
	margin: 0px;
	
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	color: rgb(223, 209, 167);
	letter-spacing: 6px;
	line-height: 28px;
	text-align: left;
}

.menu-common-arrow-box {
	position: absolute;
	top: 10px;
	right: 0px;
	width: 70px;
	height: 8px;
	background: transparent;
	margin: 0px;
	overflow: hidden;
}

.menu-common-arrow {
	position: absolute;
	top: 0px;
	right: 50px;
	width: 70px;
	height: 8px;
	background: transparent;
	margin: 0px;
	
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	
	-webkit-transition: right 0.3s;
	transition: right 0.3s;
}

.menu-common-arrow-next {
	background-image: url("../assets/images/main/arrow-next.svg");
}
.menu-common-arrow-back {
	background-image: url("../assets/images/main/arrow-back.svg");
}


/***************************************************************************************************************** BUTTON (WHITE) */
.menu-common-button-white {
	position: relative;
	width: calc(50px + 20px + 70px);
	height: 28px;
	background: transparent;
	margin: 0px;
	cursor: pointer;
}
.menu-common-button-white:hover .menu-common-arrow-white {
	right: 0px;
}

.menu-common-text-white {
	position: relative;
	width: 50px;
	height: 28px;
	background: transparent;
	margin: 0px;
	
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	color: white;
	letter-spacing: 6px;
	line-height: 28px;
	text-align: left;
}

.menu-common-arrow-box-white {
	position: absolute;
	top: 10px;
	right: 0px;
	width: 70px;
	height: 8px;
	background: transparent;
	margin: 0px;
	overflow: hidden;
}

.menu-common-arrow-white {
	position: absolute;
	top: 0px;
	right: 50px;
	width: 70px;
	height: 8px;
	background: transparent;
	margin: 0px;
	
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	
	-webkit-transition: right 0.3s;
	transition: right 0.3s;
}

.menu-common-arrow-next-white {
	background-image: url("../assets/images/main/arrow-next-white.svg");
}
.menu-common-arrow-back-white {
	background-image: url("../assets/images/main/arrow-back-white.svg");
}


/***************************************************************************************************************** BACK BUTTON (GOLD) */
.menu-common-back-button {
	position: relative;
	width: calc(50px + 20px + 70px);
	height: 28px;
	background: transparent;
	margin: 0px;
	cursor: pointer;
}
.menu-common-back-button:hover .menu-common-back-arrow {
	left: 0px;
}

.menu-common-back-text {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 50px;
	height: 28px;
	background: transparent;
	margin: 0px;
	
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	color: rgb(223, 209, 167);
	letter-spacing: 6px;
	line-height: 28px;
	text-align: left;
}

.menu-common-back-arrow-box {
	position: absolute;
	top: 10px;
	left: 0px;
	width: 70px;
	height: 8px;
	background: transparent;
	margin: 0px;
	overflow: hidden;
}

.menu-common-back-arrow {
	position: absolute;
	top: 0px;
	left: 50px;
	width: 70px;
	height: 8px;
	background: transparent;
	margin: 0px;
	
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	
	-webkit-transition: left 0.3s;
	transition: left 0.3s;
}

.menu-common-arrow-next {
	background-image: url("../assets/images/main/arrow-next.svg");
}
.menu-common-arrow-back {
	background-image: url("../assets/images/main/arrow-back.svg");
}


/***************************************************************************************************************** BACK BUTTON (BROWN) */
.menu-common-back-button-brown {
	position: relative;
	width: calc(50px + 20px + 70px);
	height: 28px;
	background: transparent;
	margin: 0px;
	cursor: pointer;
}
.menu-common-back-button-brown:hover .menu-common-back-arrow-brown {
	left: 0px;
}

.menu-common-back-text-brown {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 50px;
	height: 28px;
	background: transparent;
	margin: 0px;
	
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	color: rgb(99, 81, 61);
	letter-spacing: 6px;
	line-height: 28px;
	text-align: left;
}

.menu-common-back-arrow-box-brown {
	position: absolute;
	top: 10px;
	left: 0px;
	width: 70px;
	height: 8px;
	background: transparent;
	margin: 0px;
	overflow: hidden;
}

.menu-common-back-arrow-brown {
	position: absolute;
	top: 0px;
	left: 50px;
	width: 70px;
	height: 8px;
	background: transparent;
	margin: 0px;
	
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	
	-webkit-transition: left 0.3s;
	transition: left 0.3s;
}

.menu-common-arrow-back-brown {
	background-image: url("../assets/images/main/arrow-back-brown.svg");
}

/***************************************************************************************************************** MOBILE */
#menu-mobile-wrapper {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	
	background: transparent;
	margin: 0px;
	
	z-index: 9999;
	display: none;
}

#menu-mobile-inner {
	position: absolute;
	top: 0px;
	left: -100%;
	width: 100%;
	height: 100%;
	
	background: rgb(45, 77, 88);
	overflow: hidden;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

#menu-mobile-inner-left {
	position: relative;
	height: 100%;
	
	background: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/main/menu.jpg");
}

#menu-mobile-inner-middle {
	position: relative;
	height: 100%;
	display: inline-block;
}

#menu-mobile-inner-middle-logo-pc {
	position: relative;
	width: 250px;
	height: calc(250px * (134 / 388));
	
	cursor: pointer;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/main/bottom-logo.svg");
	
	margin: 130px 0px 0px 0px;
}
#menu-mobile-inner-middle-logo-m {
	position: relative;
	width: 100%;
	height: 30px;
	margin: 50px 0px 0px 0px;
}
#menu-mobile-inner-middle-logo-m-image {
	position: relative;
	width: calc(30px * (398 / 56));
	height: 30px;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/main/menu-top-logo.svg");
	
	margin: 0px auto;
}

.menu-mobile-inner-button {
	position: relative;
	height: 28px;
	
	font-family: "OptimaBold", sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	color: rgb(223, 209, 167);
	letter-spacing: 1px;
	line-height: 28px;
	text-align: left;
	
	display: inline-block;
}
.menu-mobile-inner-button:hover .menu-mobile-inner-button-line {
	width: 100%;
}

.menu-mobile-inner-button-line {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 0%;
	height: 1px;
	background: rgb(223, 209, 167);
	
	-webkit-transition: width 0.3s;
	transition: width 0.3s;
}

#menu-mobile-inner-copyright {
	position: relative;
	width: 100%;
	max-width: 1380px;
	height: 28px;
	background: transparent;
	margin: 0px auto;
	
	font-size: 11px;
	font-style: italic;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.8);
	letter-spacing: 1px;
	line-height: 16px;
	text-align: left;
}

#menu-mobile-inner-right {
	position: relative;
	height: 100%;
}

#menu-mobile-inner-right-top-spacing {
	position: relative;
	width: 100%;
	height: 180px;
}

#menu-mobile-inner-right-middle-spacing {
	position: relative;
	width: 100%;
	height: 266px;
}
.menu-mobile-inner-media-box {
	position: relative;
	width: 30px;
	height: 30px;
	margin: 0px auto;
	
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	
	border-style: solid;
	border-width: 0px;
	border-color: rgb(223, 209, 167);
	border-radius: 50%;
	
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
.menu-mobile-inner-media-box-0 {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 30px;
	height: 30px;
	
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	
	border-style: solid;
	border-width: 0px;
	border-color: rgb(223, 209, 167);
	border-radius: 50%;
	
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
.menu-mobile-inner-media-box-1 {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 30px;
	height: 30px;
	
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	
	border-style: solid;
	border-width: 0px;
	border-color: rgb(223, 209, 167);
	border-radius: 50%;
	
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

#menu-mobile-inner-left-mobile {
	position: relative;
	height: 76px;
}

#menu-fb {
	background-image: url("../assets/images/main/media-fb.svg");
	
	-webkit-transition: background-image 0.3s;
	transition: background-image 0.3s;
}
#menu-fb:hover {
	background-image: url("../assets/images/main/media-fb-on.svg");
}

#menu-inst {
	background-image: url("../assets/images/main/media-ig.svg");
	
	-webkit-transition: background-image 0.3s;
	transition: background-image 0.3s;
}
#menu-inst:hover {
	background-image: url("../assets/images/main/media-ig-on.svg");
}

.menu-mobile-inner-language {
	position: relative;
	width: 100%;
	height: 24px;
	
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	color: rgb(223, 209, 167);
	letter-spacing: 4px;
	line-height: 24px;
	text-align: right;
	
	opacity: 0.8;
	
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
.menu-mobile-inner-language:hover {
	opacity: 1.0;
}

.menu-mobile-inner-language-not-click {
	position: relative;
	width: 100%;
	height: 24px;
	
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	color: rgb(223, 209, 167);
	letter-spacing: 4px;
	line-height: 24px;
	text-align: right;
}

.menu-mobile-inner-language-2 {
	position: relative;
	width: 100%;
	
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	color: rgb(223, 209, 167);
	letter-spacing: 5px;
	line-height: 35px;
	text-align: left;
}

.menu-mobile-inner-language-2-not-click {
	position: relative;
	width: 100%;
	
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	color: rgb(223, 209, 167);
	letter-spacing: 5px;
	line-height: 35px;
	text-align: left;
}

#menu-mobile-close-button {
	position: absolute;
	top: calc((120px - 18px) / 2);
	width: 100px;
	height: 18px;
	
	background: transparent;
	display: none;
	cursor: pointer;
}
#menu-mobile-close-button:hover #menu-mobile-cross-line-0 {
	rotate: 30deg;
}
#menu-mobile-close-button:hover #menu-mobile-cross-line-1 {
	rotate: 150deg;
}

#menu-mobile-close-text {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	color: rgb(223, 209, 167);
	letter-spacing: 6px;
	line-height: 18px;
	text-align: left;
}

#menu-mobile-close-icon {
	position: absolute;
	top: -2px;
	right: 0px;
	width: 18px;
	height: 18px;
	background: transparent;
}

#menu-mobile-cross-line-0 {
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	background: rgb(223, 209, 167);
	rotate: 45deg;
	
	-webkit-transition: rotate 0.2s;
	transition: rotate 0.2s;
}
#menu-mobile-cross-line-1 {
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	background: rgb(223, 209, 167);
	rotate: 135deg;
	
	-webkit-transition: rotate 0.2s;
	transition: rotate 0.2s;
}