@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,700&display=swap');

















:root {





	--mainColor: rgba(0, 0, 0, 0.85);





	--mainFontColor: rgb(253, 253, 253);





	--mainBorderColor: rgb(255, 187, 0);





	--mainBorder: 1.5px solid var(--mainBorderColor);





}











ul,





ol,





li,





h1,





h2,





h3,





h4,





h5,





h6,





p,





a,





footer {





	font-family: '小塚ゴシック Pro', 'Noto Sans TC', '微軟正黑體', sans-serif;











}











#home {





	background-image: url(img/background.jpg);


 


}











header {





	background-color: none;





}























.bg2 {





	background-image: url(img/bg2.jpg);





}











/* .homeCover{





	  background-color:rgba(240,240,240,0.5);





  } */





.homeCover h4 {





	width: auto;





	color: #FFF;





	padding: 0 10px;





	left: 60%;





	font-size: 26px;





	top: 30vh;





	opacity: 0.7;





	text-align: center;





	letter-spacing: 8px;





}











.homeCover h4:first-child {





	margin-bottom: 1.7em;





	bottom: 45vh;





}











.lang{


	min-height: 90px;


}





#logo {





	left: 30px;





	top: 5px;


	


}








#logo img {


    max-height: 100px;


    max-width: 100%;}





#mainBg {





	background-image: url(img/bg.jpg);





}











.mainCover {





	background-color: rgba(15, 15, 15, 0.564);





}











.menuArea h3,





.menuArea li {





	text-align: center;





}











.mainList {





	bottom: 25px;





	z-index: 100;





}











.mainList li a {





	font-weight: bold;





}











.mainList li a:hover {





	color: rgb(173, 151, 114);











}











.scollMenu {





	background-color: rgb(0, 0, 0)





}











.scollMenu a {





	color: white;





}











.mainList li a:hover {





	color: rgb(255, 187, 0);





}











h3 {





	font-weight: 500;











}











article>h3 {





	text-align: center;





	margin-bottom: 30px;





	color: var(--mainColor);





}











p,





li,





a,





h2 {





	font-weight: 400;





}











.title {





	background: url(img/title_bg.png) no-repeat;





	background-position: center;





	background-size: contain;





}











.title h3 {





	text-align: center;





	color: #5d483a





}











#sns ul li a,





.slick-next,





.slick-arrow {





	filter: brightness(1);





}











.aboutFlexbox {





	display: flex;





	align-items: center;





}











.aboutFlexbox>div {





	width: 50%;





}











.aboutTitle h4 {





	text-align: left;





	font-size: 19px;





	letter-spacing: 2px;





	margin-bottom: 50px;





	font-weight: 400;





}











.aboutImg img {





	box-shadow: 10px 10px 2px rgba(52, 52, 52, 0.292);





	width: 80%;





}











.topLine {





	border-top: 5px solid rgb(52, 52, 52);





	width: 120px;





	margin-bottom: 15px;





	margin-top: 40px





}











.aboutText p {





	font-size: 16px;





	line-height: 28px;





	letter-spacing: 2px;





	text-align: justify;





}

















#news p a:hover {





	background-color: rgb(255, 187, 0);





	color: white;





}











#news1 .item2 {





	width: 100%;





	margin: 0 0 80px 0;





}











.newsArea a {


	margin: auto;



	position: relative;

	text-align: center;


	top: 1px;


	left: 0px;





}





.hide{
	display: none;
}





.newsArea a:hover {





	opacity: 0.7;





}











.newsTitle h3 {





	width: 85%;





	font-size: 20px;





}











.newsTitle i {





	top: -5px;





	transform: scaleY(-1);





}











.newsText ul {





	width: 90%;





	margin: 0 auto;





	font-size: 14px;











}











.newsText ul li {





	color: #000000;





}











.newsText p {





	font-size: 16px;





}











.number ul {





	list-style-type: decimal;





	list-style-position: outside;





	list-style: normal !important;





	margin: 0px;





	padding-left: 2em;





}











.number li {





	list-style: inherit !important;





	display: list-item;





}











#about h2 {





	margin-bottom: 15px;





}











.about {





	display: flex;





	flex-wrap: wrap;





	width: 100%;





}











.aboutFlex {





	display: flex;





	flex-direction: column;





	align-items: center;





	margin-top: 60px;





	width: 50%;





}











.aboutFlex>div {





	width: 80%;





}











.roomText p {





	border-left: solid 5px rgb(255, 187, 0);





	padding-left: 40px;





	text-align: left;





	width: 20%;





	margin: 50px auto 0;





}











.aboutcontent {





	width: 50%;





	/* margin-bottom:30px; */





}











.aboutcontent span {





	font-size: 20px;





}











.aboutFlex>div {





	align-self: center;





}











.aboutFlex h2 {





	width: 100%;





	margin: auto;





	margin-bottom: 20px;





}











.aboutFlex p {





	text-align: justify;





	width: 80%;





	margin: auto;





	max-width: 800px;





}











.slider-nav,





.slider-nav1,





.slider-nav2,





.slider-nav3,





.slider-nav4,





.slider-nav5,





.slider-nav6,





.slider-nav7 {





	margin-top: 24px;





}











.slider-nav img,





.slider-nav1 img,





.slider-nav2 img,





.slider-nav3 img,





.slider-nav4 img,





.slider-nav5 img,





.slider-nav6 img,





.slider-nav7 img {





	transform: scale(0.9);





}











.slick-list {





	padding: 0 !important;





}











#video .item2 {





	width: 46%;





	margin: 0 2% 80px 2%;





}











article {





	padding: 80px 0px;





	overflow: hidden;





}











#product>article {





	overflow: visible;





}











.animateLeftToRight {





	position: relative;





	right: 100px;





	opacity: 0;





	transition: opacity 1s ease-in-out, right 1s ease-in-out;





}











.animateRightToLeft {





	position: relative;





	left: 100px;





	opacity: 0;





	transition: opacity 1s ease-in-out, left 1s ease-in-out;





}











.animateBottomToTop {





	position: relative;





	top: 100px;





	opacity: 0;





	transition: opacity 1s ease-in-out, top 1s ease-in-out;





	color: white;





}











.supportLine {





	height: 2px;





	width: 60px !important;





	background-color: var(--mainColor);





	margin: 0 auto 50px;





}











#sns .tel {





	background-image: url(img/tel.svg);





}











/* #traffic div{





	  width: 100%;





  } */

















.menuItem h3 {





	margin-bottom: 0;





	color: #c86840;





}











.menuItem ul li {





	display: inline-block;





}











.menuItem span {





	font-size: 0.5em;





}











#menu article {





	padding-bottom: 0px;





}











.item3 {





	margin-bottom: 40px;





	width: 45%;





}











.menuList {





	display: flex;





	align-items: center;





	border-bottom: 1px solid rgba(59, 59, 59, 0.2);











}











.menuList li {





	padding: 10px;





}











.menuList li:first-child {





	width: 50%;





}











.menuList li:nth-child(2) {





	width: 20%;





}











.menuList li:nth-child(3) {





	width: 30%;





}











.menuList img {





	width: auto





}











.item2 {





	width: 46%;





	margin: 0 2% 80px 2%;





}

















/**************************************/





.roomTypeTitle h3 {





	font-weight: normal;





	color: #c86840;





}











.picture article {





	display: flex;





	flex-wrap: wrap;





	justify-content: space-around;





}











.picture article h3 {





	width: 100%;





	margin-bottom: 0;





}











.picture article p {





	width: 100%;





}











.picture article a {





	/* width: 33%; */





	/* margin:0px 2%; */





	color: #ffffff;





}











.picture article.cc1 a {





	width: 90%;





	margin: 20px auto;





}











.picture article.cc2 a {





	width: 40%;





	margin: 20px 5%;





}











.picture article .clear {





	width: 46%;





	margin: 0 2%;





}











.picture article.cc1 .clear {





	width: 90%;





	margin: 0 auto;





}











.picture article.cc2 .clear {





	width: 40%;





	margin: 0 5%;





}











.picture article a span {





	position: absolute;





	bottom: 0;





	left: 0;





	display: block;





	width: calc(100% - 20px);





	padding: 10px 10px;





	background-color: rgba(18, 18, 18, 0.85);





}











.picture a {





	overflow: hidden;





}











.picture a img {





	transition: all 0.35s, transform 0.35s;





	transform: scale3d(1.05, 1.05, 1);





}











.picture a:hover img {





	transform: scale3d(1, 1, 1);





}











.picture article a span {





	color: #fff;





}











.pictureArea {





	margin-top: 60px;





	display: flex;





	position: relative;





}











.pictureItem {





	margin-right: 4%;





	margin-left: 4%;





}











.picTitle {





	position: absolute;





	top: 0px;





	z-index: 10;





	background-color: rgba(256, 256, 256, 0.7);











}











.picTitle p {





	text-align: center;





	padding: 10px 0;





	font-size: 18px;





	font-weight: 500;





}











.pictureItem ul {





	background-color: #fff;





	padding: 10% 25px;





	font-size: 14px;





	color: rgba(59, 59, 59, 0.7);





}











.pictureItem ul li::before {





	content: '';





	width: 5px;





	height: 5px;





	border-radius: 100%;





	background-color: #693328;





	display: inline-block;





	margin-right: 10px;





	margin-bottom: 2px;





	opacity: 0.7;





}











.picBtn {





	background-color: rgba(62, 30, 24, 0.7);





	text-align: center;





	color: #fff;





	padding-top: 5%;





	padding-bottom: 5%;





}











.picBtn:hover {





	background-color: rgba(62, 30, 24, 0.85);





	transition: 0.5s;





}











/**************************************/





#announcement .item2 {





	margin-bottom: 30px;





}











#announcement .newsTitle i {





	font-size: 24px;





}











.newsList {





	display: flex;





	align-items: center;





}











.newsList img {





	width: 30%;





}











.newsList p {





	margin-left: 5%;





	margin-right: 5%;





}











/*****************************************/











.proText h3 {





	text-align: center;





	color: #693328;





	font-size: 24px;





	margin-bottom: 5px





}











.proText p {





	width: 90%;





	margin: auto;





	margin-bottom: 30px;





	text-align: center;





}











.proBtn {





	width: 20%;





	margin: auto;





	text-align: center;





	background-color: rgba(62, 30, 24, 0.7);











}











.proBtn:hover {





	background-color: rgba(62, 30, 24, 0.85);





	transition: 0.5s;





	box-shadow: inset 0px 0px 10px rgba(59, 59, 59, 0.8);





}











.proBtn a {





	margin-top: 30px;





	padding: 5% 10%;





	color: #fff;





	letter-spacing: 5px;





}





























.video-container {





	position: relative;





	padding-bottom: 56.25%;





	padding-top: 30px;





	height: 0;





	overflow: hidden;





}











.video-container iframe,





.video-container object,





.video-container embed {





	position: absolute;





	top: 0;





	left: 0;





	width: 100%;





	height: 100%;





}











#picture article a {





	width: 23%;





	margin: 0 1% 20px 1%;





	min-width: auto;





}











#picture h4 {





	width: 100%;





	text-align: center;





	margin: 24px auto 48px;





	font-size: 28px;





	border-bottom: var(--mainBorder)





}











#sns {





	bottom: 25px;





}











.footerText {





	background-color: rgba(100, 100, 100, 0.5);





}











.footerText article {





	display: flex;





	padding: 30px;





	align-items: center;











}











.footerText img {





	width: 30%;











}











.footerText a:hover {





	color: #3b3b3b;





}











#copyright {





	position: relative;





	background-color: #3b3b3b;





	color: #fff;





}











.aboutText a {





	border: 2px solid #fff;





	width: 20%;





	margin: auto;





	text-align: center;





	padding: 10px;





	margin-top: 48px;





	border-radius: 25px;





	transition: 0.5s;





	font-weight: bold;





}











.aboutText a:hover {





	background-color: #fff;





	color: #000;





}











#toTop {





	opacity: 0;





	text-decoration: none;





	/* position: fixed;





    bottom: 30px;





    right: 2%; */





	overflow: hidden;





	z-index: 999;





	width: 30px;





	height: 30px;





	border: none;





	text-indent: 100%;





	background: url(img/top.svg) no-repeat 0 0;





	cursor: pointer;





	background-size: 100%;





	background-position: center;





	transition: 0.5s;





	filter: brightness(0.7)





}











#toTop:hover {





	filter: brightness(1)





}











/************************************/





.navBar1 {





	width: 45px;





	height: 30px;





	display: none;





	position: absolute;





	top: 30px;





	left: 20px;





	-webkit-transform: rotate(0deg);





	-moz-transform: rotate(0deg);





	-o-transform: rotate(0deg);





	transform: rotate(0deg);





	-webkit-transition: .5s ease-in-out;





	-moz-transition: .5s ease-in-out;





	-o-transition: .5s ease-in-out;





	transition: .5s ease-in-out;





	cursor: pointer;





	z-index: 20;





	background-image: none





}











.navOp {





	z-index: 1000;





}











.navBar1 span {





	display: block;





	position: absolute;





	height: 4px;





	width: 100%;





	background: rgba(255, 255, 255, 0.8);





	border-radius: 9px;





	opacity: 1;





	left: 0;





	-webkit-transform: rotate(0deg);





	-moz-transform: rotate(0deg);





	-o-transform: rotate(0deg);





	transform: rotate(0deg);





	-webkit-transition: .25s ease-in-out;





	-moz-transition: .25s ease-in-out;





	-o-transition: .25s ease-in-out;





	transition: .25s ease-in-out;





}











.navBar1 span:nth-child(1) {





	top: 0px;





}











.navBar1 span:nth-child(2) {





	top: 15px;





}











.navBar1 span:nth-child(3) {





	top: 30px;





}











.navBar1.open span:nth-child(1) {





	top: 18px;





	-webkit-transform: rotate(135deg);





	-moz-transform: rotate(135deg);





	-o-transform: rotate(135deg);





	transform: rotate(135deg);





}











.navBar1.open span:nth-child(2) {





	opacity: 0;





	left: -60px;





}











.navBar1.open span:nth-child(3) {





	top: 18px;





	-webkit-transform: rotate(-135deg);





	-moz-transform: rotate(-135deg);





	-o-transform: rotate(-135deg);





	transform: rotate(-135deg);





}











.link {





	margin: 5px;





	border: 2px solid rgb(255, 255, 255);





	padding: 10px;





	width: 70px;





	text-align: center;





	float: left;





	border-radius: 15px





}











.trafficText {





	display: flex;





	justify-content: space-between;





	width: 100%;





	align-items: center;





	margin-top: 40px;





}











.trafficText li {





	margin-bottom: 10px;





}























@media only screen and (max-width: 1200px) {





	#home {





		height: 50vh;





	}











	.aboutFlex {





		flex-wrap: wrap;





	}











}











@media only screen and (max-width: 1052px) {





	.trafficText p {





		display: none;





	}











	/* .aboutFlex p{





		  width:100%;





	  } */





}











@media only screen and (max-width: 1024px) {











	/* #logo img{





		  width: 70%;





		  position: relative;





		  top: 10px;





	  } */





	#about h2,





	.trafficFlex h2 {





		font-size: 20px;





		margin-bottom: 5px;





	}











	.aboutFlex p,





	.trafficFlex ul,





	.footerText p {





		font-size: 14px;





	}











	.aboutFlex ul {











		font-size: 14px;





	}











	.footerText img {





		margin: auto;





	}











}











@media only screen and (max-width: 950px) {





	ul.mainList li a {





		color: #ffffff;





	}











	.navBar1 {





		display: block;





	}











	#logo {





		left: 0;





		top: -15px





	}











	#logo img {











		top: 5px;





	}











	.pictureArea {





		flex-wrap: wrap;





		width: 50%;





		margin: auto;











	}











	.pictureItem {





		margin-top: 60px;





	}











	.aboutFlex {





		display: block;











	}











	.aboutcontent {





		width: 70%;





		margin: auto;





	}











	.aboutFlex h2,





	.aboutFlex p {





		width: 100%;





	}











	#video article {





		display: block;





	}











	#video .item2 {





		width: 60%;





		margin: 0 20% 80px 20%;





	}











	.trafficText,





	.trafficMap {





		width: 80%;





		text-align: center;





	}











	#picture article a {





		width: 48%;





	}





}











@media only screen and (max-width: 770px) {




















	.item2 {





		width: 80%;





		margin: 0 auto 40px auto;





	}











	.videoDiv {





		width: 100%;





	}











	.resverseFlex {





		flex-direction: column-reverse;





	}











	.aboutFlex {





		margin-bottom: 30px;





	}

















	.footerText img {





		width: 50%;





	}











	.trafficText {





		flex-direction: column-reverse;





	}











	.trafficText,





	.trafficMap {





		width: 100%;





	}





}











@media only screen and (max-width: 600px) {


	#home{


		margin-top: 122px;


	}


	article h3 {





		font-size: 24px;





	}











	#roomType article .roomTypeText p,





	.newsText p {





		font-size: 14px;





	}











	.item3 {





		width: 100% !important;





	}











	.newsTitle h3 {





		width: 80%;





	}











	.aboutFlex {





		width: 100%;





	}























	.videoFlex {





		flex-wrap: wrap;





	}











	.videoDiv p {





		font-size: 14px;





		margin-bottom: 10px;





	}











	.item2 {





		width: 100%;





	}











	.aboutFlex img {





		width: 100%;











	}











	.aboutFlex h2,





	.aboutFlex p,





	.aboutFlex ul {





		width: 100%;





	}











	.pictureArea {





		width: 75%;





	}











	.proBtn {





		width: 30%;





	}











	#traffic article {





		padding-bottom: 60px;





	}











	.trafficFlex {





		flex-wrap: wrap;





		padding-top: 20px;





		padding-bottom: 20px;





	}











	.trafficFlex img {





		display: none;





	}











	.trafficFlex h2,





	.trafficFlex ul {





		width: 90%;





	}











	.footerText img {





		width: 70%;





	}











	.aboutcontent {





		width: 100%;





	}











	#video .item2 {





		width: 100%;





		margin: 0 0 80px 0;





	}











	#picture article a {





		width: 90%;





		margin: 0 auto 40px auto;





	}











	.aboutFlexbox {





		display: block;





	}











	.aboutTitle,





	.aboutFlexbox>div {





		width: 95%;





		margin: auto;





	}











	.aboutImg img {





		width: 100%;





		margin-bottom: 30px;





	}











	.roomText p {





		padding-left: 33px;





		width: 87%;





	}











	.aboutcontent span {





		font-size: 18px;





	}











	.link {





		width: 34px;





	}











	.trafficText ol {





		text-align: left;





	}











	.trafficText ol li {





		margin-bottom: 10px;





	}


	.lang{


		min-height: 42px;


	}


	#logo{


		max-height: 100px;


	}


	#logo img {


		max-height: 100px;


	}


	.navBar1{


			top: 47px;


		}


	


}











@media only screen and (max-width: 480px) {





	.picture article a {





		width: 100%;





	}

















	.pictureArea {





		width: 100%;





	}











	#about p {





		letter-spacing: 1.2px;





	}











	.newsList {





		flex-wrap: wrap;











	}











	.newsList img {





		width: 70%;





	}











	.proBtn {





		width: 50%;





	}











	.proBtn a {





		padding: 10%;





	}











	.footerText article {





		flex-wrap: wrap;





	}











	.footerText img {





		width: 50%;





		margin-bottom: 30px;





	}











	.footerText p {





		text-align: center;





	}











	#sns {





		left: 5px;





	}











	#toTop {





		width: 30px;





		height: 30px;





	}





}











@media only screen and (max-width:414px) {





	/* #sns,#toTop{





		  bottom: 55px;





	  } */





}























.trafficText li a:hover {





	display: block;





}

















.trafficText li a:hover {





	color: #000;





	background-color: #fff;





	transition: 0.5s;





}











.join {





	text-align: center;





	color: #030303;





	padding: 20px;





	border: 3px solid;





	transition: 0.5s;





}











.join:hover {





	background-color: #fdfdfd;





	color: rgb(0, 0, 0);





	border: 2px solid #fff;





}











.newsTitle p a:hover {





	display: block;





}

















.newsTitle p a:hover {





	color: #fff;





	background-color: rgb(80, 79, 79);





	transition: 0.5s;





}











#news p a:hover {





	display: block;





}

















#news p a:hover {





	color: #fff;





	background-color: rgb(80, 79, 79);





	transition: 0.5s;





}