@charset "utf-8";

/*--------------------------------------------------------------------------------------------------

   second

--------------------------------------------------------------------------------------------------*/
.sp {
  display:none;
}

.pc {
  display: block;
}


@media all and (max-width: 1080px) {

  .sp {
    display:block;
  }
  
  .pc {
    display:none;
  }
	
	body {
		font-size:13px;
	}
  
	
/*--------------------------------------------------------------------------------------------
  header
--------------------------------------------------------------------------------------------*/
header {
	height:auto;
	min-height:60px;
	font-size:14px;
}

header .logo {
	background:#FFF;
	width:100%;
	height:60px;
	top:0;
	left:0;
	z-index:10;
	position:fixed;
}

header .logo a {
	float:left;
	margin:10px;
}

header .logo img {
	height:40px;
}

header .menu-top,
header .menu-bottom {
	top:60px;
	background:#FFF;
	z-index:10;
	margin:0;
	width:320px;
	right:-320px;
	position:fixed;
	transition:0.3s;
}

header .menu-top.open,
header .menu-bottom.open {
	right:0;
}

header .ss,
header .bacc {
	float:none;
	width:auto;
}

header .ss .nice-select {
	margin:0 10px;
	float:none;
	width:124px;
}

header .ss .social {
	overflow:hidden;
	clear:both;
	margin:20px 10px;
}

header .bacc {
	border-top:solid 1px;
	border-bottom:solid 1px;
	overflow:hidden;
	padding:20px 0;
}

header .bacc li {
	margin:0 20px;
}

#en header .bacc li {
	margin:0 12px;
}

#vi header .bacc li:last-child {
	margin-right:0;
}

header nav.menu-bottom {
	bottom:unset;
	top:256px;
}

header .menu-bottom li {
	float:none;
	margin:10px 14px;
}

.menubtn {
	position:absolute;
	right:15px;
	top:17px;
	z-index:10;
	width:35px;
	height:26px;
	position:fixed;
}

.menubtn span {
	position:absolute;
	width:35px;
	height:2px;
	background:#084C64;
	transition:0.3s;
	-webkit-transition:0.3s;
	-moz-transition:0.3s;
}

.menubtn span.top {
	top:0;
}

.menubtn span.middle {
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
}

.menubtn span.bottom {
	bottom:0;
}

.menubtn span.menuclick1 {
	-webkit-transform:translateY(12px) rotate(-315deg);
	transform:translateY(12px) rotate(-315deg);
}

.menubtn span.menuclick2 {
	background-color:transparent;
}

.menubtn span.menuclick3 {
	-webkit-transform:translateY(-12px) rotate(315deg);
	transform:translateY(-12px) rotate(315deg);
}



/*--------------------------------------------------------------------------------------------
  content
--------------------------------------------------------------------------------------------*/
iframe.bframe {
	width:80%;
}
/*
#booking {
	font-size:13px;
	padding:20px 0;
}

#booking h2 {
	font-size:24px;
}
*/
#bframe-bg::after {
	top:0;
	right:30px;
}

.content {
	width:96%;
}

h2 {
	font-size:24px;
}

section.menu div a,
#facility .facility a.detail,
#gallery .content .area p {
	height:40px;
	line-height:40px;
	font-size:14px;
	padding-left:10px;
}

section.menu div a::after,
#facility .facility a::after {
	margin-right:10px
}

.mainimg {
	margin-top:60px;
}

.mainimg h1 {
	font-size:24px;
	line-height:40px;
}

.descrip {
	height:auto;
	padding:20px 0;
}

.descrip p {
	width:96%;
	position:static;
	transform:none;
	margin:0 auto;
	text-align:left;
}

.descrip p span.size {
	transform:translateY(10%);
}

section.menu .menu-content .wrap1080 {
	width:100%;
	height:100%;
	background:none!important;
}

section.menu .menu-content .wrap1080 div {
	top:50%;
	transform:translateY(-50%);
	width:100%;
	max-width:540px;
}

section.content .slider {
	width:100%;
	float:none;
	margin:0 auto 30px;
}

section.content .slick-slide img {
	width:100%;
}

section.content .slider-nav {
	width:92%;
	float:none;
	margin:10px auto;
}

section.content .slider-nav .slick-list {
	width:100%;
}

section.content .slider-nav .slick-slide {
	margin:0 2px;
}

section.content .slider-nav .slick-prev {
	left:-4%;
	top:50%;
	transform:rotate(-90deg) translateY(-50%);
}

section.content .slider-nav .slick-next {
	left:100%;
	top:50%;
	transform:rotate(-90deg);
}

section.content .info dd ul div {
	width:50%;
}

section.other ul {
	max-width:720px;
	width:auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	padding:0;
}

section.other li {
}

section.other a {
	width:300px;
	height:40px;
	line-height:40px;
	padding-left:10px;
	font-size:14px;
	margin:0 auto;
}

#en section.other a.long,
#vi section.other a.long,
#zh section.other a.long,
#ko section.other a.long {
	width:300px;
}

section.other a.long {
	font-size:12px;
}

section.other a::after {
	margin-right:10px;
}

#index .mainimg .TA_cdsratingsonlynarrow {
	bottom:20px;
}

#index iframe {
	display:none;
}

#index .mainimg .booking {
	display:none;
}

#index .topics .bg {
	top:208px;
}

#index .topics li p {
	font-size:13px;
}

#index .menu .menu-content .bg {
	width:100%;
}

#index .menu .menu-content div {
	width:100%;
	padding:30px;
}

#index .menu ul {
	overflow:hidden;
	width:100%;
	margin-top:30px;
}

#index .menu ul li {
	float:left;
	margin-right:10px;
}

#index .menu ul li a {
	width:220px;
}

#index.topicsDetail .topic {
	margin:50px auto;
}

#facility .f_content {
	width:96%;
}

#facility table {
	width:100%;
	float:none;
}

#facility table img {
	width:100%;
}

#facility h2 {
	margin-top:30px;
}

#room .descrip p {
	text-align:left!important;
}

#event .content .info dl {
	float:none;
	width:100%;
	margin-bottom:50px;
}

#event .other li {
	margin:15px;
}

#wellness .other ul {
	padding:0;
}

#wellness .other li {
	width:calc(100% / 2);
}

#access iframe {
	width:100%!important;
}

#access .access img:nth-of-type(2) {
	margin-bottom:30px;
}

#gallery .content .area li {
	width:50%;
	margin-right:0!important;
}

#gallery .content .area img {
	display:block;
	margin:0 auto;
}


/*--------------------------------------------------------------------------------------------
  footer
--------------------------------------------------------------------------------------------*/
footer .logo img {
	height:40px;
}

footer .address {
	margin-bottom: 20px;
}

footer .address p {
	text-indent:-43px;
	margin-left:43px;
}

footer .address p i {
	text-indent:0;
}

footer .footer-bottom p {
	font-size:10px;
}



}

@media all and (max-width: 425px) {
iframe.bframe {
	width:96%;
	height:100%;
	max-height:434px;
}

#bframe-bg::after {
	font-size:40px;
	line-height:50px;
	right:20px;
}

.bookingbtn {
	padding:27.5px 3px;
	min-width:76px;
	bottom:40px;
	font-size:12px;
}

section.menu .menu-content div:not(.content) {
	position:static;
	transform:translateX(0);
}

section.menu .menu-content .wrap1080 div {
	width:100%;
	top:0;
	transform:translateY(0);
	padding:20px;
	height:100%;
}

section.menu .menu-content .wrap1080 p {
	margin:10px 0;
}
/*
div:not(#index) section.menu .menu-content a.detail {
	width:40px;
	font-size:0;
	padding-left:0;
	border-radius:100%;
	float:right;
	text-align:center;
}

div:not(#index) section.menu .menu-content a.detail::after {
	font-size:14px;
	margin-right:0;
	float:none;
}
*/
.slider .slick-dots li,
.slider .slick-dots li button,
.slider .slick-dots li button:before {
	width:10px;
	height:10px;
}

section.content .photo {
	margin:50px 0;
}

section.content .info {
	margin-bottom:50px;
}

section.content .info dl {
	width:100%;
	float:none;
	margin-bottom:50px;
	overflow:hidden;
}

section.content .info dd div {
	width:100%;
	float:none;
}

section.other {
	background-size:cover!important;
	background-position:center!important;
}

section.other ul {
	display:block;
	width:100%;
}

section.other li {
	width:auto;
}

#index .mainimg .TA_cdsratingsonlynarrow {
	position:relative;
	left:0;
	right:0;
	bottom:0;
	margin:20px auto;
	width:80%;
}

#index .mainimg .TA_cdsratingsonlynarrow .cdsROW {
	width:auto;
}

#index .topics {
	padding:50px 0;
}

#index .topics .bg {
	top:155px;
}

#index .topics li a {
	width:300px;
}

#index .menu .menu-content div {
	padding:20px;
}

#index .menu div p {
	margin:10px 0 30px;
}

#index .menu .menu-content li {
	float:none;
	margin-right:0;
}

#index .menu ul li a {
	width:90%;
}

#en #index .menu ul li a.long,
#vi #index .menu ul li a.long,
#zh #index .menu ul li a.long, 
#ko #index .menu ul li a.long {
	width:90%;
	font-size:3.4vw;
}

#facility .f_content {
	margin:50px auto;
}

#room .descrip {
	display:flex;
	flex-wrap:wrap-reverse;
}

#room .descrip p:first-child {
	display:flex;
	flex-direction:row-reverse;
}

#room .descrip p span.size {
	width:50%!important;
	float:none;
}

#room .descrip p span.size:first-of-type {
}

#room .descrip p span.size:last-of-type {
	margin-left:0;
}

#room .descrip p:nth-child(2) {
	padding-right:0;
}

#restaurant h2 span,
#restaurant h1 span span {
	font-size:13px;
}

#event .info dd {
	overflow:auto;
}

#event .content table tbody {
	overflow:auto;
	white-space:nowrap;
	width:calc(100% - 155px);
}

#event .other li {
	margin:10px 0;
}

#wellness .other ul {
	padding:0;
}

#gallery .content .area {
	margin:50px auto;
}

#gallery .content .area img {
	width:94%;
}

#access .access {
	margin:50px auto;
}

#access .access h3 {
	margin:50px 0 30px;
}

#access .access img {
	float:none;
	width:100%;
}

#contact form {
	width:96%;
	margin:50px auto;
}

#contact label {
	display:block;
}

#contact textarea {
	width:100%;
}

#privacy .privacy {
	margin:50px auto;
}

#privacy .privacy h3 {
	margin:50px 0 30px;
}

footer .footer-bottom a {
	float:none;
}

footer .footer-bottom p {
	float:none;
	line-height:unset;
	margin-top:20px;
}

}

@media all and (max-width: 375px) {
#booking h2 {
	font-size:20px;
}

#vi #booking .field.dates span {
	display:block;
	margin-top:10px;
}

h2,
.mainimg h1 {
	font-size:20px;
}
	
section.menu .menu-content .wrap1080 div {
	padding:10px;
}

#index .menu .menu-content div {
	padding:10px;
}

#index .menu div p {
	margin:10px 0;
}

#event .content table th,
#event .content table td {
	padding:10px 8px;
}

}