img {
	width: 100%;
	max-width: 100%;
	height: auto;
	line-height: 0;
}
.btn {
	width: initial!important;
}

/*---------------------------
  main-visual
  ---------------------------*/
#main-visual {
	width: 100%;
	/*height: 80%;*/
	height: 70vh;
	position: relative;
}
#main-visual::after {
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.2);
	position: absolute;
	top: 0;
	left: 0;
}
#main-visual .txt-wrap {
	position: absolute;
	right: 60px;
	bottom: 60px;
	z-index: 2;
}
#main-visual .txt-wrap * { color: #FFF;}
#main-visual .txt-wrap h1 {}
#main-visual .txt-wrap h1 .ch {
	display: block;
	letter-spacing: 0.1em;
	line-height: 1;
	font-family: 'Noto Sans JP',sans-serif;
	font-size: 14px;
	font-weight: 300;
}
#main-visual .txt-wrap h1 .en {
	display: block;
	margin: 0.15em 0 0 0;
	letter-spacing: 0.18em;
	line-height: 1;
	font-family: 'Catamaran', sans-serif;
	font-size: 44px;
	font-weight: 800;
}
#main-visual .txt-wrap h1 + p {
	margin-top: 0.15em;
	letter-spacing: 0.2em;
	line-height: 1;
	font-family: 'Catamaran', sans-serif;
	font-size: 11px;
	font-weight: 300;
}
@media screen and (max-width: 1200px) {
	#main-visual .txt-wrap {
		right: 30px;
		bottom: 30px;
	}
	#main-visual .txt-wrap h1 .ch { font-size: 14px;}
	#main-visual .txt-wrap h1 .en { font-size: 36px;}
	#main-visual .txt-wrap h1 + p {
		letter-spacing: 0.25em;
		font-size: 11px;
	}
}
@media screen and (max-width: 768px) {
	#main-visual {
		height: 0;
		padding-top: 100%;
	}
	#main-visual .txt-wrap {
		right: auto;
		left: 5%;
		bottom: 4%;
	}
	#main-visual .txt-wrap h1 + p { display: none;}
}
@media screen and (max-width: 640px) {
	#main-visual .txt-wrap h1 .ch { font-size: 11px;}
	#main-visual .txt-wrap h1 .en { font-size: 32px;}
}

/*======================
 lead
 =======================*/
#lead {
	width: 90%;
	margin: 0 auto;
	padding: 80px 0 100px;
	text-align: center;
}
#lead h1 {
	text-align:center;
	padding:0 0 30px;
	letter-spacing: 0.06em;
	color: #000;
	font-family: "Arapey" , serif;
	font-size: 36px;
	font-weight: normal;
}
#lead h1 + p {
	line-height: 2.2;
	font-size: 14px;
}

@media screen and (max-width: 640px) {
	#lead {  padding: 40px 0 50px;}
	#lead h1 {
		padding:0 0 20px;
		font-size: 25px;
	}
	#lead h1 + p {
		line-height: 1.8;
		font-size: 12px;
	}
}

@media screen and (max-width: 420px) {
	#lead h1 { padding-bottom: 15px;}
	#lead h1 + p {
		text-align: left;
		font-size: 12px;
	}
	#lead h1 + p br { display: none;}
}

@media screen and (max-width: 370px) {
	#lead h1 { margin-bottom: 15px;}
	#lead h1 + p {
		text-align: left;
		font-size: 12px;
	}
	#lead h1 + p br { display: none;}
}

/*============================
 location
 ============================*/
#location {}
#location ul {
	width: 90%;
	max-width: 1620px;
	margin: 0 auto;
	font-size: 0;
	letter-spacing: 0;
	overflow: hidden;
}
#location ul li {
	width: 29%;
	margin: 0 2% 60px;
	display: inline-block; *display: inline; *zoom: 1;
	vertical-align: top;
}
#location ul li a { display: block;}
#location ul li figure { overflow: hidden;}
#location ul li figure img {
	width: 100%;
	height: auto;
	line-height: 0;
	vertical-align: bottom;
	-webkit-transition: 0.5s ease;
	-moz-transition: 0.5s ease;
	-o-transition: 0.5s ease;
	transition: 0.5s ease;
	backface-visibility: hidden;
}
#location ul li a:hover figure img {
	-ms-transform: scale(1.075);
	transform: scale(1.075);
	-webkit-transition: 1s all; -moz-transition: 1s all; -o-transition: 1s all; transition: 1s all;
}
#location ul li .txt-wrap {
	padding: 24px 24px 0;
}
#location ul li .txt-wrap p {
	letter-spacing: 0.1em;
	line-height: 1;
	font-family: 'Catamaran', sans-serif;
	font-size: 20px;
	font-weight: 400;
}
#location ul li .txt-wrap h2 {
	margin-top: 8px;
	letter-spacing: 0.1em;
	line-height: 1;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 12px;
	font-weight: 300;
}

@media screen and (max-width: 1280px) {
	#location ul li .txt-wrap { padding: 20px 0 0 0;}
	#location ul li .txt-wrap p { font-size: 16px;}
	#location ul li .txt-wrap h2  { margin-top: 8px; font-size: 9px;}
}

@media screen and (max-width: 640px) {
	#location {}
	#location ul { width: 90%;}
	#location ul li {
		width: 100%;
		margin-left: 0 !important;
		margin-bottom: 30px !important;
		float: none;
	}
	#location ul li:last-child { margin-bottom: 30px !important;}
	#location ul li figure {}
	#location ul li figure img {
		width: 100%;
		height: auto;
	}
	#location ul li .txt-wrap {
		padding: 15px 0 0;
		text-align: center;
	}
	#location ul li .txt-wrap p {
		letter-spacing: 0.1em;
		line-height: 1;
		font-size: 16px;
	}
	#location ul li .txt-wrap h2 {
		margin-top: 8px;
		font-size: 10px;
	}
}

@media screen and (max-width: 420px) {
	#location ul li .txt-wrap p {
		letter-spacing: 0.1em;
		line-height: 1;
		font-size: 14px;
	}
	#location ul li .txt-wrap h2 {
		margin-top: 8px;
		font-size: 9px;
	}
}

#loc-area { padding-top: 40px;}
#loc-area .area-box { width:31%; height:490px; float:left; margin:35px 1%; display:inline; background:#fff; position:relative;}
/*@media screen and (min-width: 1201px) {#loc-area .area-box {width:24%; margin:20px 0.5%;}}*/
#loc-area .area-box a{ width:100%; height:100%; display:block; box-shadow:0 2px 3px #aaa;}
#loc-area .area-box a { -webkit-transition:0.2s; -moz-transition:0.2s; -o-transition:0.2s; transition:0.2s;}
#loc-area.overbox .area-box a{background:#FEFEFC; box-shadow:none;}
#loc-area.overbox .area-box a:hover{opacity:1.0; filter: alpha(opacity=100); background:#fff;}
#loc-area .area-box a:hover { /*width:110%; height:110%; position:absolute; */box-shadow:1px 2px 8px #777; /*margin-left:-5%; margin-top:-8%;*/ z-index:100; -webkit-transition:0.8s; -moz-transition:0.8s; -o-transition:0.8s; transition:0.8s;}
	#loc-area .area-box a > *{ width:94%; float:left; padding:0 3%;}
	#loc-area .area-box a p.img{ width:100%; padding:0; overflow:hidden; margin-bottom:14px;}
	#loc-area .area-box a p.img img{ max-width:100%; height:auto;}
	#loc-area .area-box a:hover p img{/*transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1);*/}
		#loc-area.overbox .area-box a .img{ background:#000000;}
		#loc-area.overbox .area-box a .img img{opacity:0.5; filter: alpha(opacity=50);}
		#loc-area.overbox .area-box a:hover .img img{opacity:1; filter: alpha(opacity=100);}
		/**/
		#loc-area .area-box a h3{ font-family : "Cormorant Garamond" , 'STSong','LiSong Pro Light', 'SimSun','MingLiU', serif; font-size:20px; color:#8A7733; line-height:1.1em; padding-bottom:14px;}
			#loc-area .area-box a h3 span { padding-left: 0.15em; display:block; font-family: "Open Sans", sans-serif; font-size:13px; color:#555;}
			
			/**/
			#loc-area .area-box a .more{ position:absolute; left:3%; background:#fff; bottom:10px; z-index:5; padding:0; width:120px; line-height:22px; line-height:22px; border: solid 1px #CDC197; color:#CDC197; text-align:center;}
					#loc-area .area-box a:hover h3 ,
					#loc-area .area-box a:hover h3 span,
					#loc-area .area-box a:hover h4 ,
					#loc-area .area-box a:hover .text ,
					#loc-area .area-box a:hover .more,
					#loc-area .area-box a:hover .more span,
					#loc-area .area-box a:hover p { -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
							#loc-area .area-box a:hover .more{/* width:150px; */color:#fff; background:#8A7733; border:none;/* padding:0 10px 0 0;*/}
							#loc-area .area-box a .more span { display:none; color:#fff;}
							/*#loc-area .area-box a:hover .more span { display:inline; padding:0 10px 0 0; line-height:1em; vertical-align:top; font-size:22px;}*/
							
							@media screen and (max-width: 640px) {
								#loc-area { padding-top: 0;}
								#loc-area .area-box { width: 95%; height: auto; margin: 0 2.5% 40px; display: block;}
								#loc-area .area-box a > *{ width:90%; float:left; padding:0 5%;}
								#loc-area.overbox .area-box a .img img{ opacity:1; filter: alpha(opacity=100);}
								#loc-area .area-box a h3{ font-size: 20px; line-height:1; padding-bottom: 10px;}
								#loc-area .area-box a h3 span { padding-left: 0.5em; display: inline-block; letter-spacing: 0.5px; font-size:12px;}
								#loc-area .area-box a .text { line-height: 1.5; font-size: 13px;}
								#loc-area .area-box a .more{ width: 80%; margin: 20px 10% 15px; line-height: 30px; font-size: 14px; position: static; }
								#loc-area .area-box a:hover .more { border: solid 1px #CDC197; color:#afa06a; background: #FFF;}
								.page-up{  padding: 10px 0 20px;}
							}
							
							@media screen and (max-width: 480px) {
								#loc-area { padding-top: 0;}
								#loc-area .area-box { width: 95%; height: auto; margin: 0 2.5% 30px; display: block;}
								#loc-area .area-box a h3{ font-size: 17px; padding-bottom: 8px;}
								#loc-area .area-box a h3 span { font-size:11px;}
								#loc-area .area-box a .text { font-size: 12px;}
								#loc-area .area-box a .more{ width: 80%; margin: 20px 10% 15px; line-height: 3; font-size: 14px; position: static; }
							}
							.page-up { background: #fff;}