@charset "utf-8";


.l-headerLogo {
	filter: invert(100%);
}



/*  kvTtl
--------------------------------------------------*/
#kvTtl{
	padding: 150px 0 70px;
}
#kvTtl h2{
	/*font-size: 42px;*/
	font-size: 80px;
	line-height: 1;
	letter-spacing: .2em;
	text-align: center;
	color: rgba(201, 192, 165, 1);
	margin-bottom: 40px;
}
#kvTtl h2 i{
	/*color: #b4a882;*/
}
#kvTtl p{
	font-size: 20px;
	line-height: 2.05;
	letter-spacing: .2em;
	text-align: center;
}
#kvTtl p span{
	display: block;
}
@media screen and (max-width: 768px){
	#kvTtl{
		padding: 120px 0 40px;
	}
	#kvTtl h2{
		/*font-size: 32px;*/
		font-size: 38px;
		margin-bottom: 0;
	}
}





/*  mapCnt
--------------------------------------------------*/
#mapCnt{
	position: relative;
	padding-bottom: 100px;
}
.map-ttl{
	position: relative;
	font-size: 30px;
	letter-spacing: .15em;
	line-height: 1;
	text-align: center;
	margin-bottom: 50px;
}
.map-ttl span{
	position: relative;
	display: inline-block;
	padding: 0 90px;
}
.map-ttl span:before,
.map-ttl span:after{
	content: '';
	position: absolute;
	top: 50%;
	width: 50px;
	height: 1px;
	background-color: #333;
}
.map-ttl span:before{
	left: 0;
}
.map-ttl span:after{
	right: 0;
}
/*#mapCnt:before{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50%;
	background-color: #f8f7f7;
	z-index: -2;
}
#mapCnt:after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 160px;
	width: 100%;
	height: 670px;
	background: url(../img/pc/bg_triangle.svg) no-repeat center center;
	background-size: 100% 100%;
	z-index: -1;
}*/
#mapCnt .figure{
	margin-bottom: 60px;
}
#mapCnt .figure .plus{
	display: none;
}
.gallery{
	margin-block: 50px 100px;
}
.gallery-note{
	max-width: 1000px;
	font-size: 11px;
  line-height: 1.82;
  letter-spacing: .1em;
  color: #666;
  margin-top: 70px;
}
@media screen and (max-width: 768px){
	#mapCnt{
		padding-bottom: 60px;
	}
	#mapCnt:before{
	}
	.map-ttl{
		font-size: 18px;
		margin-bottom: 30px;
	}
	.map-ttl span{
		padding: 0 30px;
	}
	.map-ttl span:before,
	.map-ttl span:after{
		width: 15px;
	}
	/*#mapCnt:after{
		bottom: 135px;
		height: 217px;
		background: url(../img/sp/bg_triangle.svg) no-repeat center center;
		background-size: 100% 100%;
	}*/
		#mapCnt .figure{
			width: 100%;
			margin-bottom: 40px;
		}
			#mapCnt .figure .plus{
				display: block;
				position: absolute;
				right: 0;
				top: 0;
				width: 40px;
				height: 40px;
				background-color: rgba(102, 102, 102, .8);
			}
				#mapCnt .figure .plus:before,
				#mapCnt .figure .plus:after{
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 1px;
					height: 60%;
					background-color: #fff;
					transform-origin: center center;
				}
				#mapCnt .figure .plus:before{
					transform: rotate(90deg);
				}
				#mapCnt .figure .plus:after{
				}
	#mapCnt .btnWrap{
		width: calc(320 / 380 * 100%);
	}
	.gallery{
		margin-block: 0 40px;
	}
	.gallery-figure{
		width: 100%;
	}
	.gallery-note{
		max-width: 560px;
		margin-top: 40px;
		font-size: 10px;
	}
}




/*  swipe & modal
--------------------------------------------------*/
.modalMap .modal-container {
	padding: 0;
}
.modalMap .js-scroll--body {
	width: 800px;
}





/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
btnWrap
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.btnWrap{
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}
	.btnWrap .btnBox{
		max-width: 380px;
		width: calc(380 / 800 * 100%);
	}
	.btnWrap .btnBox + .btnBox{
		margin-left: calc(40 / 800 * 100%);
	}
		.btnWrap .btnBox .btn{
			display: block;
			position: relative;
			width: 100%;
			border: solid 2px #726256;
			background-color: #fff;
			box-sizing: border-box;
			padding: 21px 20px 23px;
			border-radius: 30px;
			outline: none !important;
			transition: border .6s;
		}
		.btnWrap .btnBox2 .btn{
			border: solid 2px #b4a882;
		}
		.btnWrap .btnBox3 .btn{
	    border: solid 2px #965454;
		}
		.btnWrap .btnBox4 .btn{
	    border: solid 2px #a2855d;
		}
		.btnWrap .btnBox5 .btn{
	    border: solid 2px #b4a882;
	    background-color: #b4a882;
		}
			.btnWrap .btnBox .btn p{
				position: relative;
				font-size: 20px;
				line-height: 1;
				letter-spacing: .2em;
				color: #726256;
				text-align: center;
				transition: color .6s;
			}
			.btnWrap .btnBox2 .btn p{
				letter-spacing: .08em;
				font-size: 19px;
				color: #b4a882;
			}
			.btnWrap .btnBox3 .btn p{
				color: #965454;
			}
			.btnWrap .btnBox4 .btn p{
				color: #a2855d;
			}
			.btnWrap .btnBox5 .btn p{
				font-size: 22px;
				letter-spacing: .25em;
				color: #fff;
			}
			.btnWrap .btnBox .btn:hover p{
				color: transparent !important;
			}
				.btnWrap .btnBox .btn p span{
					display: block;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					margin: 0 auto;
					letter-spacing: .15em;
					color: #726256;
					opacity: 0;
					transition: opacity .6s;
				}
				.btnWrap .btnBox2 .btn p span{
					color: #b4a882;
				}
				.btnWrap .btnBox3 .btn p span{
					color: #7c2929;
				}
				.btnWrap .btnBox4 .btn p span{
					color: #a2855d;
				}
				.btnWrap .btnBox5 .btn p span{
					color: #fff;
				}
				.btnWrap .btnBox .btn:hover p span{
					opacity: 1;
				}
			.btnWrap .btnBox .btn .arrow{
				position: absolute;
				right: 24px;
				top: 50%;
				transform: translateY(-50%);
				width: 25px;
				line-height: 1;
  			font-size: 0;
			}
			.btnWrap .btnBox .btn .arrow:after{
				content: '';
				position: absolute;
				left: 22px;
				top: 50%;
				transform: translateY(-50%);
				width: 10px;
				height: 10px;
				background-color: #726256;
				border-radius: 50%;
				animation: circle-out1 .6s both;
			}
			.btnWrap .btnBox2 .btn .arrow:after{
				background-color: #b4a882;
				animation: circle-out2 .6s both;
			}
			.btnWrap .btnBox3 .btn .arrow:after{
				background-color: #7c2929;
				animation: circle-out3 .6s both;
			}
			.btnWrap .btnBox4 .btn .arrow:after{
				background-color: #a2855d;
				animation: circle-out4 .6s both;
			}
			.btnWrap .btnBox5 .btn .arrow:after{
				background-color: #fff;
				animation: circle-out5 .6s both;
			}
			.btnWrap .btnBox .btn:hover .arrow:after{
				animation: circle-in1 .6s both;
			}
			.btnWrap .btnBox2 .btn:hover .arrow:after{
				animation: circle-in2 .6s both;
			}
			.btnWrap .btnBox3 .btn:hover .arrow:after{
				animation: circle-in3 .6s both;
			}
			.btnWrap .btnBox4 .btn:hover .arrow:after{
				animation: circle-in4 .6s both;
			}
			.btnWrap .btnBox5 .btn:hover .arrow:after{
				animation: circle-in5 .6s both;
			}
				.btnWrap .btnBox .btn .arrow span{
					display: block;
					clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
					animation: arrow-out1 .6s both;
				}
				.btnWrap .btnBox2 .btn .arrow span{
					animation: arrow-out2 .6s both;
				}
				.btnWrap .btnBox3 .btn .arrow span{
					animation: arrow-out3 .6s both;
				}
				.btnWrap .btnBox4 .btn .arrow span{
					animation: arrow-out4 .6s both;
				}
				.btnWrap .btnBox5 .btn .arrow span{
					animation: arrow-out5 .6s both;
				}
				.btnWrap .btnBox .btn:hover .arrow span{
					animation: arrow-in1 .6s both;
				}
				.btnWrap .btnBox2 .btn:hover .arrow span{
					animation: arrow-in2 .6s both;
				}
				.btnWrap .btnBox3 .btn:hover .arrow span{
					animation: arrow-in3 .6s both;
				}
				.btnWrap .btnBox4 .btn:hover .arrow span{
					animation: arrow-in4 .6s both;
				}
				.btnWrap .btnBox5 .btn:hover .arrow span{
					animation: arrow-in5 .6s both;
				}

@keyframes circle-in1 { 0% { left: 22px;width: 10px;height: 10px;background-color: #726256;}50% { left: 0;width: 10px;height: 10px;background-color: #726256;} 100% {left: 0;width: 1px;height: 1px;background-color: #726256;} }
@keyframes circle-out1 { 0% { left: 0;width: 1px;height: 1px;background-color: #726256;}50% { left: 0;width: 10px;height: 10px;background-color: #726256;} 100% {left: 22px;width: 10px;height: 10px;background-color: #726256;} }
@keyframes arrow-in1 { 0% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}50% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);} 100% {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);} }
@keyframes arrow-out1 { 0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}50% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);} 100% {clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}}

@keyframes circle-in2 { 0% { left: 22px;width: 10px;height: 10px;background-color: #b4a882;}50% { left: 0;width: 10px;height: 10px;background-color: #b4a882;} 100% {left: 0;width: 1px;height: 1px;background-color: #b4a882;} }
@keyframes circle-out2 { 0% { left: 0;width: 1px;height: 1px;background-color: #b4a882;}50% { left: 0;width: 10px;height: 10px;background-color: #b4a882;} 100% {left: 22px;width: 10px;height: 10px;background-color: #b4a882;} }
@keyframes arrow-in2 { 0% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}50% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);} 100% {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);} }
@keyframes arrow-out2 { 0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}50% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);} 100% {clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}}

@keyframes circle-in3 { 0% { left: 22px;width: 10px;height: 10px;background-color: #7c2929;}50% { left: 0;width: 10px;height: 10px;background-color: #7c2929;} 100% {left: 0;width: 1px;height: 1px;background-color: #7c2929;} }
@keyframes circle-out3 { 0% { left: 0;width: 1px;height: 1px;background-color: #7c2929;}50% { left: 0;width: 10px;height: 10px;background-color: #7c2929;} 100% {left: 22px;width: 10px;height: 10px;background-color: #7c2929;} }
@keyframes arrow-in3 { 0% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}50% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);} 100% {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);} }
@keyframes arrow-out3 { 0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}50% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);} 100% {clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}}

@keyframes circle-in4 { 0% { left: 22px;width: 10px;height: 10px;background-color: #a2855d;}50% { left: 0;width: 10px;height: 10px;background-color: #a2855d;} 100% {left: 0;width: 1px;height: 1px;background-color: #a2855d;} }
@keyframes circle-out4 { 0% { left: 0;width: 1px;height: 1px;background-color: #a2855d;}50% { left: 0;width: 10px;height: 10px;background-color: #a2855d;} 100% {left: 22px;width: 10px;height: 10px;background-color: #a2855d;} }
@keyframes arrow-in4 { 0% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}50% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);} 100% {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);} }
@keyframes arrow-out4 { 0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}50% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);} 100% {clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}}

@keyframes circle-in5 { 0% { left: 22px;width: 10px;height: 10px;background-color: #fff;}50% { left: 0;width: 10px;height: 10px;background-color: #fff;} 100% {left: 0;width: 1px;height: 1px;background-color: #b4a882;} }
@keyframes circle-out5 { 0% { left: 0;width: 1px;height: 1px;background-color: #b4a882;}50% { left: 0;width: 10px;height: 10px;background-color: #fff;} 100% {left: 22px;width: 10px;height: 10px;background-color: #fff;} }
@keyframes arrow-in5 { 0% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}50% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);} 100% {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);} }
@keyframes arrow-out5 { 0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}50% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);} 100% {clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}}
@media screen and (max-width: 900px){
	.btnWrap .btnBox{
		width: 100%;
	}
	.btnWrap .btnBox + .btnBox{
		margin-top: 10px;
		margin-left: 0;
	}
}
@media screen and (max-width: 768px){
	.btnWrap{
		max-width: 320px;
	}
		.btnWrap .btnBox{
		}
		.btnWrap .btnBox + .btnBox{
		}
			.btnWrap .btnBox .btn{
				padding: 17px 20px 20px;
				border-radius: 25px;
			}
			.btnWrap .btnBox .btn:hover{
				border: solid 1px #93877c;
			}
				.btnWrap .btnBox .btn p{
					font-size: 16px;
				}
				.btnWrap .btnBox2 .btn p{
					font-size: 16px;
				}
				.btnWrap .btnBox5 .btn p{
					font-size: 16px;
				}
				.btnWrap .btnBox .btn:hover p{
					color: #726256 !important;
				}
				.btnWrap .btnBox2 .btn:hover p{
					color: #b4a882 !important;
				}
				.btnWrap .btnBox3 .btn:hover p{
					color: #7c2929 !important;
				}
				.btnWrap .btnBox4 .btn:hover p{
					color: #8b6634 !important;
				}
				.btnWrap .btnBox5 .btn:hover p{
					color: #fff !important;
				}
					.btnWrap .btnBox .btn p span{
						display: none;
					}
				.btnWrap .btnBox .btn .arrow{
					right: 19px;
					width: 8px;
				}
				.btnWrap .btnBox .btn .arrow:after{
					left: 0;
					width: 8px;
					height: 8px;
					animation: none !important;
				}
				.btnWrap .btnBox .btn:hover .arrow:after{
					animation: none !important;
				}
					.btnWrap .btnBox .btn .arrow span{
						clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
						animation: none;
						display: none;
					}
}





/*  print
--------------------------------------------------*/
@media print {
	#commonCapArea,
	#kv,
	#header,
	#footer,
	.btnWrap,
	#geo--cpsys--banner,
	.geo--cpsys--pc,
	.geo--cpsys--sp,
	.commonCapArea{
		display: none !important;
	}
}