@charset "UTF-8";
/* トップページ --------------------------------------------------------------- */


/* common --------------------------------------------------------------- */
h2 {
	color: #595858;
	font-size: 28px;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 2px;
	margin-bottom: 50px;
	font-family: "Jost", sans-serif;
	font-weight: 200;
	}

	h2 span {
		margin-top: 10px;
		font-size: 14px;
		letter-spacing: 0;
		font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
		letter-spacing: 1px;
		}

.viewmore {
	width: 120px;
	position: absolute;
	right: 30px;
	bottom: 0;
	}

	.viewmore a,
	.viewmore a img {
		width: 100%;
		}

@media(max-width: 990px){
	h2 {
		line-height: 1.3;
		}

	.viewmore {
		width: 100px;
		right: 5%;
		}
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* key --------------------------------------------------------------- */
#key {
	margin: 80px auto 100px auto;
	overflow: hidden;
	background-color: #000000;
	position: relative;
	}

	#key #slick {
		opacity: 0.8;
		position: relative;
		}

		#key #slick p {
			width: 100%;
			height: calc(100vh - 80px);
			position: relative;
			overflow: hidden;
			}

			#key #slick p img {
				width: 100%;
				height: 100%;
				aspect-ratio: inherit;
				object-fit: cover;
				object-position: 50% 50%;
				}

	#key #image {
		position: absolute;
		left: 0;
		top: 0;
		background-color: #000000;
		}

		#key #image p {
			opacity: 0.8;
			display: none;
			width: 100%;
			height: calc(100vh - 80px);
			position: relative;
			overflow: hidden;
			}

			#key #image p img {
				width: 100%;
				height: 100%;
				aspect-ratio: inherit;
				object-fit: cover;
				object-position: 50% 50%;
				}

	#key #link {
		position: absolute;
		left: 100px;
		top: 50%;
		transform: translate(0,-50%);
		}

		#key #link p {
			margin-bottom: 50px;
			}

		#key #link p:last-of-type {
			margin-bottom: 0;
			}

			#key #link p a,
			#key #link p a span {
				color: #ffffff;
				line-height: 1.5;
				letter-spacing: 1px;
				font-family: "Jost", sans-serif;
				font-weight: 200;
				}

			#key #link p a {
				font-size: 28px;
				text-shadow: 1px 0 10px rgb(0, 0, 0, 0.4);
				}

				#key #link p a span {
					font-size: 16px;
					}

	#key #copy {
		width: 20px;
		position: absolute;
		right: 5%;
		top: 50%;
		transform: translate(0,-50%);
		}

		#key #copy img {
			width: 100%;
			}

	
	.add-anime {
    animation: zoom-anime 10s linear 0s normal both;
		}

	@keyframes zoom-anime {
		0% {
			transform: scale(1);
			}

		100% {
			transform: scale(1.05);
			}
		}

@media(max-width: 990px){
	#key {
		margin: 80px auto 80px auto;
		}

		#key #link {
			left: 10%;
			top: 42%;
			}

			#key #link p a {
				font-size: 22px;
				}

				#key #link p a span {
					font-size: 13px;
					}

		#key #copy {
			width: 15px;
			top: 42%;
			}
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* concept --------------------------------------------------------------- */
#concept {
	margin: 0 auto 70px auto;
	padding-bottom: 30px;
	position: relative;
	}

	#concept p {
		width: 800px;
		margin: 0 auto;
		letter-spacing: 1px;
		line-height: 2;
		text-align: center;
		}

@media(max-width: 990px){
	#concept {
		margin: 0 auto 70px auto;
		padding-bottom: 80px;
		}

		#concept p {
			width: 90%;
			}
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* promise --------------------------------------------------------------- */
#promise {
	margin: 0 auto 100px auto;
	position: relative;
	}

	#promise ul {
		width: 100%;
		margin: 0 auto 30px auto;
		overflow: hidden;
		}

		#promise ul li {
			float: left;
			width: 25%;
			border-right: #ffffff solid 1px;
			box-sizing: border-box;
			background-color: #efeeed;
			}

		#promise ul li {
			opacity: 0;
			transform: translateY(150px);
			transition: all 0.5s ease-in-out;
			}

		#promise ul li.active {
			opacity: 1;
			transform: translateY(0);
			}

		#promise ul li:last-of-type {
			border-right: 0;
			}

			#promise ul li h2 {
				margin-bottom: 30px;
				line-height: 1;
				}

				#promise ul li h2 span {
					}

			#promise ul li p:first-of-type {
				margin-bottom: 30px;
				}

				#promise ul li p:first-of-type img {
					width: 100%;
					}

			#promise ul li p:last-of-type {
				height: 150px;
				padding: 0 40px;
				line-height: 1.8;
				font-size: 13px;
				}

@media(max-width: 990px){
	#promise {
		margin: 0 auto 100px auto;
		}

		#promise ul {
			width: 85%;
			margin: 0 auto 30px auto;
			}

			#promise ul li {
				float: none;
				width: 100%;
				border-right: 0;
				margin-bottom: 5px;
				}

			#promise ul li {
				opacity: 0;
				transform: none;
				transition: all 0.5s ease-in-out;
				transform : translate(0, 50px);
				}

			#promise ul li.active {
				opacity: 1;
				transform : translate(0, 0);
				}

					#promise ul li h2 span {
						margin-top: 10px;
						}

				#promise ul li p:last-of-type {
					height: auto;
					padding: 0 15% 50px 15%;
					}
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* hotels --------------------------------------------------------------- */
#hotels {
	margin: 0 auto 100px auto;
	position: relative;
	}

	#hotels .hotel {
		margin: 0 auto 70px auto;
		}

	#hotels .hotel:last-of-type {
		margin: 0 auto;
		}

			#hotels .hotel h2 span {
				letter-spacing: 1px;
				}

		#hotels .hotel ul {
			margin: 0 auto;
			}

			#hotels .hotel ul li {
				width: 50%;
				padding-bottom: 20px;
				box-sizing: border-box;
				position: relative;
				}

			#hotels .hotel ul li:first-of-type {
				float: left;
				height: 260px;
				padding: 0 50px 0 100px;
				}

				#hotels .hotel ul li:first-of-type h2 {
					text-align: left;
					margin-bottom: 20px;
					}

				#hotels .hotel ul li:first-of-type p:first-of-type {
					line-height: 24px;
					}

				#hotels .hotel ul li:first-of-type p:last-of-type {
					position: absolute;
					right: 50px;
					}

					#hotels .hotel ul li:first-of-type p.Satologue {
						width: 130px;
						bottom: 3px;
						}

					#hotels .hotel ul li:first-of-type p.NIPPONIA {
						width: 110px;
						bottom: -40px;
						}

					#hotels .hotel ul li:first-of-type p.MIYAM {
						width: 120px;
						bottom: -5px;
						}

					#hotels .hotel ul li:first-of-type p.BV {
						width: 110px;
						bottom: -15px;
						}

					#hotels .hotel ul li:first-of-type p:last-of-type img {
						width: 100%;
						}

				#hotels .hotel ul li:first-of-type a {
					width: 110px;
					position: absolute;
					bottom: 0;
					}

					#hotels .hotel ul li:first-of-type a img {
						width: 100%;
						}

			#hotels .hotel ul li:last-of-type {
				float: right;
				overflow: hidden;
				position: relative;
				}

				#hotels .hotel ul li:last-of-type .prev,
				#hotels .hotel ul li:last-of-type .next {
					width: 85px;
					line-height: 1;
					cursor: pointer;
					position: absolute;
					bottom: 0;
					}

				#hotels .hotel ul li:last-of-type .prev {
					left: 20px;
					}

				#hotels .hotel ul li:last-of-type .next {
					right: 20px;
					}

					#hotels .hotel ul li:last-of-type .prev img,
					#hotels .hotel ul li:last-of-type .next img {
						width: 100%;
						}

				#hotels .hotel ul li:last-of-type p {
					float: left;
					width: 50%;
					box-sizing: border-box;
					border-right: #ffffff solid 2px;
					}

					#hotels .hotel ul li:last-of-type p a {
						width: 100%;
						height: 260px;
						}

						#hotels .hotel ul li:last-of-type p a img {
							width: 100%;
							height: 100%;
							aspect-ratio: inherit;
							object-fit: cover;
							object-position: 50% 50%;
							}

	#hotels .clear {
		width: 100%;
		clear: both;
		}

@media(max-width: 990px){
	#hotels {
		margin: 0 auto 70px auto;
		}

			#hotels .hotel ul {
				width: 90%;
				margin: 0 auto;
				}
				
				#hotels .hotel ul li {
					width: 100%;
					padding-bottom: 20px;
					}

				#hotels .hotel ul li:first-of-type {
					float: none;
					height: auto;
					padding: 0;
					}

					#hotels .hotel ul li:first-of-type h2 {
						text-align: left;
						margin-bottom: 20px;
						}

					#hotels .hotel ul li:first-of-type p:last-of-type {
						margin: 30px 10% 30px auto;
						position: static;
						}

					#hotels .hotel ul li:first-of-type a {
						left: 0;
						}

					#hotels .hotel ul.Satologue li:first-of-type a {
						bottom: -3px;
						}
					#hotels .hotel ul.NIPPONIA li:first-of-type a {
						bottom: 40px;
						}
					#hotels .hotel ul.MIYAM li:first-of-type a {
						bottom: 5px;
						}
					#hotels .hotel ul.BV li:first-of-type a {
						bottom: 15px;
						}

					#hotels .hotel ul li:first-of-type p.Satologue,
					#hotels .hotel ul li:first-of-type p.NIPPONIA,
					#hotels .hotel ul li:first-of-type p.MIYAM,
					#hotels .hotel ul li:first-of-type p.BV {
						bottom: 0;
						}

				#hotels .hotel ul li:last-of-type {
					float: none;
					width: 100%;
					}

					#hotels .hotel ul li:last-of-type .prev,
					#hotels .hotel ul li:last-of-type .next {
						width: 90px;
						}

					#hotels .hotel ul li:last-of-type p {
						width: 100%;
						border-right: 0;
						}

						#hotels .hotel ul li:last-of-type p a {
							height: auto;
							}
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* news --------------------------------------------------------------- */
#news {
	margin: 0 auto;
	padding: 40px 0;
	background-color: #eeeeee;
	position: relative;
	}

	#news dl {
		width: 500px;
		margin: 0 auto 20px auto;
		line-height: 1.5;
		overflow: hidden;
		}

		#news dl dt {
			float: left;
			font-family: "Jost", sans-serif;
			font-weight: 300;
			}

		#news dl dd {
			margin-left: 100px;
			}

@media(max-width: 990px){
	#news {
		padding: 40px 5%;
		}

		#news dl {
			width: 100%;
			margin: 0 auto 20px auto;
			}

			#news dl dt {
				float: none;
				}

			#news dl dd {
				margin-left: 0;
			}
	}

@media(min-width: 1px) and (max-width: 660px){
	}