@charset "UTF-8";

/* =============================================================================

Common CSS

・ヘッダー、フッター等のページ共通で使用される要素「.g-×××」

上記はここに記述する

============================================================================= */

/* 追従フッター
----------------------------------------------------------------------------- */
.flowbottomSP {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	/* transition: transform 1.0s;
	transform: translateY(100%); */
	z-index: 999;

	/* .state_fewscroll & {
		transform: none;
	} */
	.c-hotelBtns{
		gap: 0;
		li{
			width: 50%;
			a{
				border-radius: 0;
				width: 100%;
			}
		}
	}
}

/* ページトップボタン
----------------------------------------------------------------------------- */
.pagetopbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 6rem;
	right: 6rem;
	width: 6.1rem;
	height: 6.1rem;
	border-radius: 50%;
	/* filter: opacity(0%); */
	/* pointer-events: none; */
	/* background-color: #fff; */
	z-index: 999;
	/* margin-bottom: env(safe-area-inset-bottom); */
	border: solid 1px #222;
	&:before {
		content: "";
		background: url(../images/common/arw-up.svg) center center no-repeat;
		display: block;
		width: 1.1rem;
		height: .9rem;
		margin: auto;
	}

	@media(hover) {
		& {
			transition: 0.2s;
		}
		&:hover {
			opacity:.6;
		}
	}

	/* .state_screenheightscroll & {
		filter: opacity(100%);
		pointer-events: auto;
	} */
}

/* ヘッダー
----------------------------------------------------------------------------- */
#menuopenstate {
	display: none;
}
.mod_header {
	
	.row01 {
		background: rgba(255, 255, 255, 0.80);
		backdrop-filter: blur(8px);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 1000;
		padding: 0 8rem 0 5.5rem;
		@media (width > 767px) {/* PC */
			min-width: 1024px;
		}
		@media (width <= 767px) {/* SP */
			padding: 0 1.6rem;
		}
		.in {
			width: 100%;
			/* max-width: 1200px; */
			height: 8.4rem;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			@media (width <= 767px) {/* SP */
				width: 88%;
				margin: 0;
				height: 6rem;
			}
		}
		.logo {
			display: block;
			@media(hover) {
				& {
					transition: 0.2s;
				}
				&:hover {
					opacity: 0.6;
				}
			}
			.logoimg {
				@media (width > 767px) {/* PC */
					width: 18rem;
				}
				@media (width <= 767px) {/* SP */
					width: 13.7rem;
				}
			}
		}
		.link {
		}
		/* .one {
			display: inline-block;
			padding: 4px;
			font-size: 1.8rem;
			@media(hover) {
				& {
				}
				&:hover {
					text-decoration: underline;
				}
			}
		} */
		.hNav{
			display: flex;
			align-items: center;
			gap: 3.2rem;
			.hNavList{
				display: flex;
				line-height: 1;
				font-size: 1.3rem;
				letter-spacing: .08em;
				li{
					padding-right: 3.2rem;
					margin-right: 3.2rem;
					border-right: solid 1px #222;
					&:last-child{
						padding: 0;
						margin: 0;
						border: none;
					}
				}
				.enFont{
					font-family: var(--ff-josefin);
					letter-spacing: .03em;
					padding-right: .1rem;
					font-size: 1.4rem;
				}
				a{
					/* display: inline-block;
					@media(hover) {
						& {
						}
						&:hover {
							text-decoration: underline;
						}
					} */
				}
			}
		}
		.igBtn{
			width: 1.6rem;
			margin-right: .8rem;
			img{
				width: 100%;
			}
		}
	}
	.spMenu {
		@media (width <= 767px) {/* SP */
			background-color: #fff;
			position: fixed;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			top: 0;
			left: 0;
			width: 100%;
			bottom: 0;
			opacity: 0;
			z-index: 999;
			pointer-events: none;
			transition: opacity 0.4s;
			display: flex;
			/* justify-content: center; */
      flex-direction: column;
			body:has(#menuopenstate:checked) & {
				opacity: 1;
				pointer-events: auto;
			}
			.in {
				width: 100%;
			}
			.link {
				margin-top: 20px;
			}
			.c-hotelBtns{
				gap: 0;
				li{
					width: 50%;
				}
				a{
					gap: 1.0rem;
					border-radius: 0;
					width: 100%;
					letter-spacing: .14em;
				}
			}

			.spNav{
				position: relative;
				/* padding-left: 3.2rem; */
				width: 29.2rem;
				margin: 12rem auto 6.5rem;
				.spNav__ttl{
					color: #ED9672;
					transform: rotate(90deg);
					transform-origin: bottom left;
					line-height: 1;
					font-family: var(--ff-josefin);
					letter-spacing: .03em;
					position: absolute;
					left: 27.5rem;
					top: -1em;
					font-size: 1.8rem;
				}
				.spNav__list{
					line-height: 1;
					display: flex;
					flex-direction: column;
					gap: 4.4rem;
					font-size: 1.3rem;
					letter-spacing: .08em;
					.enFont{
						font-family: var(--ff-josefin);
						letter-spacing: .03em;
						margin-right: .6rem;
						font-size: 1.4rem;
					}
				}
			}
		}

		.spNavInfoBlock{
			@media (width <= 767px) {/* SP */
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 4rem;
				margin-bottom: 5rem;
			}
			.infoLogo{
				img{
					@media (width <= 767px) {/* SP */
						width: 21.7rem;
					}
				}
			}
			.infoTxt{
				text-align: center;
				line-height: 2;
				margin-top: 2.4rem;
				margin-bottom: 1.5rem;
				letter-spacing: .15em;
				font-size: 1.4rem;
			}
			.igBtn{
				@media (width <= 767px) {/* SP */
					margin-top: 1rem;
				}
				a{
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: var(--ff-josefin);
					line-height: 1;
					gap: .8rem;
					font-size: 1.8rem;
					@media (width <= 767px) {/* SP */
						flex-direction: column;
						gap: 1rem;
					}
				}
				img{
					width: 1.6rem;
					@media (width <= 767px) {/* SP */
						width: 2.2rem;
					}
				}
			}
		}
	}
	@media (width <= 767px) {/* SP */
		.menu {
			width: 4.4rem;
			height: 4.4rem;
			position: fixed;
			top: .7rem;;
			right: 1rem;
			z-index: 1000;
			/* background-color: #000; */
			.open .bar {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				width: 3rem;
				height: .2rem;
				margin: auto;
				background-color: #ED9672;
				transition: 0.3s;
				&:nth-child(1) {
					top: -1rem;
				}
				&:nth-child(2) {
					bottom: -1rem;
				}
			}
			.close .bar {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				width: 0;
				height: .2rem;
				margin: auto;
				background-color: #ED9672;
				transition: 0.3s;
				&:nth-child(1) {
					transform: rotate(30deg);
				}
				&:nth-child(2) {
					transform: rotate(-30deg);
				}
			}
			body:has(#menuopenstate:checked) & {
				.open .bar {
					width: 0;
				}
				.close .bar {
					width: 3rem;
				}
			}
		}
	}
}
.pankuzuWrap {
	width: 100%;
	background-color: #fff;
	margin-top: 100px;

	@media (width <= 767px) {/* SP */
		height: 3.5rem;
		overflow: auto;
	}
}
.pankuzu {
	max-width: 1000px;
	width: 100%;
	margin: auto;
	text-align: left;
	white-space: nowrap;
	overflow-x: scroll;
	.link {
		display: inline-block;
		position: relative;
		+ .link {
			margin-left: 20px;
			&:before {
				content: "";
				display: block;
				width: 6px;
				height: 6px;
				border-right: 1px solid #000;
				border-top: 1px solid #000;
				position: absolute;
				top: 0;
				bottom: 0;
				left: -16px;
				margin: auto;
				transform: rotate(45deg);
			}
		}
	}
}

/* フッター
----------------------------------------------------------------------------- */
.mod_footer {
	position: relative;
	z-index: 2;
	.ftObj{
		position: absolute;
		z-index: 1;
		top: -6rem;
		width: 22rem;
		@media (width > 767px) {/* PC */
			right: 50%;
			margin-right: 32rem;
		}
		@media (width <= 767px) {/* SP */
			/* width: 11.6rem; */
			width: 12.3rem;
			top: 0.5rem;
			left: 3rem;
		}
	}
	.ftTop{
		position: absolute;
		top: 1px;
    left: 0;
    width: 100%;
    transform: translateY(-100%);
		img{
			width: 100%;
		}
	}
	.ftCnt{
		background: url(../images/common/ft-tex.webp) top center;
		position: relative;
		@media (width > 767px) {/* PC */
			padding-top: 13.5rem;
		}
		@media (width <= 767px) {/* SP */
			padding-top: 9rem;
		}
		.ftCnt__in{
			margin: 0 auto;
			@media (width > 767px) {/* PC */
				width: 128rem;
				padding-bottom: 5rem;
				padding-top: 16rem;
			}
			@media (width <= 767px) {/* SP */
				padding-bottom: 10.6rem;
				padding-top: 5.8rem;
			}
		}
		.ftCnt__clm{
			display: flex;
			@media (width > 767px) {/* PC */
				flex-direction: row-reverse;
				justify-content: space-between;
				margin-bottom: 7rem;
			}
			@media (width <= 767px) {/* SP */
				flex-direction: column;
			}
			
		}

		.ftInfoBlock{
			@media (width <= 767px) {/* SP */
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 6.5rem;
			}
			.infoLogo{
				img{
					width: 24.2rem;
					@media (width <= 767px) {/* SP */
						width: 21.7rem;
					}
				}
			}
			.infoTxt{
				line-height: 2.2;
				letter-spacing: .14em;
				margin-top: 3.5rem;
				margin-bottom: 4rem;
				@media (width <= 767px) {/* SP */
					text-align: center;
					margin-bottom: 2.5rem;
				}
			}
			.c-hotelBtns{
			}

			.igBtn{
				margin-top: 2.4rem;
				@media (width <= 767px) {/* SP */
					margin-top: 3.4rem;
				}
				a{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-family: var(--ff-josefin);
					line-height: 1;
					gap: .8rem;
					font-size: 2rem;
					@media (width <= 767px) {/* SP */
						font-size: 1.8rem;
						flex-direction: column;
						gap: 1rem;
					}
				}
				img{
					width: 2.4rem;
					@media (width <= 767px) {/* SP */
						width: 2.2rem;
					}
				}
				p{
					@media (width > 767px) {/* PC */
						display: none;
					}
				}
			}
		}
		
		.ftNavBlock{
			display: flex;
			gap: 6.8rem;
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				gap: 4rem;
				margin-left: 2.9rem;
			}
			.ftNav{
				position: relative;
				padding-left: 5rem;
				.ftNav__ttl{
					transform: rotate(90deg);
					transform-origin: bottom left;
					line-height: 1;
					font-family: var(--ff-josefin);
					letter-spacing: .03em;
					position: absolute;
					left: 0;
					top: -1em;
					font-size: 1.8rem;
				}
				.ftNav__list{
					line-height: 1;
					display: flex;
					flex-direction: column;
					gap: 3.2rem;
					font-size: 1.3rem;
					letter-spacing: .08em;
					@media (width <= 767px) {/* SP */
						gap: 2.4rem;
					}
					.enFont{
						font-family: var(--ff-josefin);
						letter-spacing: .03em;
						margin-right: .6rem;
						font-size: 1.4rem;
					}
				}
			}
		}
		.ftCnt__copy{
			font-family: var(--ff-josefin);
			line-height: 1;
			letter-spacing: .03em;
			font-size: 1.4rem;
			@media (width <= 767px) {/* SP */
				text-align: center;
				font-size: 1rem;
				margin-top: 4rem;
			}
		}
	}
}

/* フォント
----------------------------------------------------------------------------- */
/* Josefin Slab */
.ff-josefin-semibold {
	font-family: var(--ff-josefin);
	font-weight: 600;
}
.ff-josefin-bold {
	font-family: var(--ff-josefin);
	font-weight: 700;
}
/* FOT-TsukuMin Pr6N */
.ff-tsukumin-light {
	font-family: var(--ff-tsukumin);
	font-weight: 300;
}
/* Parlare */
.ff-parlare-regular {
	font-family: var(--ff-parlare);
	font-weight: 400;
}

section{
	display: block;
}

/* 角丸 */
.-bdR{
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	@media (width <= 767px) {/* SP */
		border-radius: .6rem;
	}
}

/* 共通パーツ */
/* キービジュアル */
.c-kv{
	position: relative;
	.c-kv__img{
		img{
			width: 100%;
		}
	}
	.c-kv__mask{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: none;
		overflow: hidden;
		img{
			position: relative;
			max-width: none;
			left: -2px;
			width: calc(100% + 4px);
		}
	}
	.c-kv__copy{
		position: absolute;
		@media (width > 767px) {/* PC */
			left: 50%;
			bottom: 0;
		}
		img{
			width: 100%;
		}
	}
	.c-kv__txtarea{
		position: absolute;
		@media (width > 767px) {/* PC */
			left: 50%;
			transform: translateX(-50%);
			width: 128rem;
			top: 24.3rem;
		}
		@media (width <= 767px) {/* SP */
			top: 13.2rem;
			width: 100%;
			text-align: center;
		}
		.tag{
			line-height: 1; /* 13px */
			letter-spacing: .08em;
			font-size: 1.3rem;
			margin-bottom: 1.8rem;
			@media (width <= 767px) {/* SP */
				margin-bottom: .8rem;
			}
			span{
				display: inline-block;
				padding: .4rem;
				background: #FFF;
			}
		}
		.ttl{
			-webkit-font-smoothing: antialiased;
			color: #FFF;

			font-family: var(--ff-josefin);
			font-size: 5.6rem;
			font-weight: 600;
			line-height: 130%; /* 72.8px */
			letter-spacing: .05em;
			@media (width <= 767px) {/* SP */
				font-size: 4.5rem;
			}
		}
	}
}
/*  */
.c-pageBv{
	position: relative;
	@media (width <= 767px) {/* SP */
		margin-top: -10rem;
	}
	.c-pageBv__bnr{
		position: absolute;
		left: 50%;
		top:50%;
		transform: translate(-50%,-50%);
		width: 38.7rem;
		margin-top: 10rem;
		@media (width <= 767px) {/* SP */
			width: 30.7rem;
			margin-top: 2rem;
		}
		img{
			width: 100%;
		}
	}
}
/* ロゴマーキー */
.c-logoMarqWrp{
	overflow: hidden;
	border-top: 1px solid #E5E5ED;
	border-bottom: 1px solid #E5E5ED;
	padding:1rem 0 .8rem ;
	
}
.c-logoMarq {
	font-family:var(--ff-josefin);
	display: flex;
	margin: 0;
	padding: 0;
	width: max-content;
	animation: marquee-left 45s linear infinite;
	letter-spacing: .03em;
	line-height: 1;
	font-size: 1.4rem;
	.marq-item {
		margin-right: 4.8rem;
		@media (width <= 767px) {/* SP */
			margin-right: 2.4rem;
		}
	}
}

@keyframes marquee-left {
	from {
	  transform: translateX(0%);
	}
	to {
	  transform: translateX(-50%);
	}
}

.c-hotelBtns{
	display: flex;
	gap: 1.2rem;
	a{
		display: flex;
		align-items: center;
		justify-content: center;
		border: solid 1px #ED9672;;
		border-radius: .3rem;
		gap: .8rem;
		width: 14.5rem;
    height: 4.7rem;
		&:after{
			content: '';
			background: center center /100% auto;
			width: 1rem;
			height: 1rem;
		}
	}
	.hotelBtn{
		background: #fff;
		color: #ED9672;
		line-height: 1.5;
		letter-spacing: .14em;
		font-size: 1.3rem;
		span{
			letter-spacing: .05em;
			font-size: 1.4rem;
		}
		&:after{
			background-image: url(../images/common/arw-orng.svg);
		}
	}
	.reserveBtn{
		background: #ED9672;
		letter-spacing: .14em;
		font-size: 1.6rem;
		color: #fff;
		&:after{
			background-image: url(../images/common/arw-w.svg);
		}
	}
}

/* travelingセクション */
.travelingBlock{
	background: #fff;
	position: relative;

	.kv{
		position: relative;
		img{
			width: 100%;
		}
		.kv__mask{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			max-width: none;
			overflow: hidden;
			img{
				position: relative;
				max-width: none;
				left: -2px;
				width: calc(100% + 4px);
			}
					
		}
		.kv__topTxt{
			overflow: hidden;
			position: absolute;
			text-align: center;
			line-height: 1;
			color: #ED9672;
			font-family: var(--ff-josefin);
			width: 100%;
			font-weight: 600;
			letter-spacing: 0.23em;
			font-size: 9.5rem;
			top: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			height: 9.5rem;
			transform: translateY(-50%);
			@media (width <= 767px) {/* SP */
				font-size: 5rem;
				height: 5rem;
			}
			.kv__topTxt__in{
				position: absolute;
				display: flex;
				flex-wrap: nowrap;
				animation: marquee-travelTopTxt 40s linear infinite;
			}
			
			/* p{
				white-space: nowrap;
				letter-spacing: 0.23em;
				padding-left: .23em;
				position:absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
			} */
			p{
				white-space: nowrap;
				padding-right: .5em;
				
			}
		}
		.kv__txtarea{
			position: absolute;
			width: 100%;
			left: 0;
			top: 16.5rem;
			text-align: center;
			@media (width <= 767px) {/* SP */
				top: 19rem;
			}
			.logo{
				width: 30.2rem;
				margin: 0 auto;
				@media (width <= 767px) {/* SP */
					width: 31.2rem;
				}
			}
			.txt{
				color: #fff;
				font-family: var(--ff-tsukumin);
				font-weight: 300;
				line-height: 170%; /* 40.8px */
				letter-spacing: .14em;
				font-size: 2.4rem;

				margin-top: 4rem;
				@media (width <= 767px) {/* SP */
					letter-spacing: .15em;
					line-height: 1.8;
					font-size: 2.2rem;
				}
			}
		}
	}
	.travelingBlock__cnt{
		position: relative;
		.travelingBlock__bgObj{
			position: absolute;
			
			width: 100%;
			max-width: 1600px;
			top: -5.5rem;
			height: 100%;
			background: url(../images/common/travel-bgobj.svg) center top /100% auto no-repeat;
			
			@media (width > 767px) {/* PC */
				left: 50%;
				transform: translateX(-50%);
			}
			@media (width <= 767px) {/* SP */
				background-image: url(../images/common/travel-bgobj-sp.svg);
				left: 0;
				top: 0;
			}
		}
		.in{
			display: flex;
			flex-direction: column;
			position: relative;
			margin: 0 auto;
			@media (width > 767px) {/* PC */
				width: 120rem;
				gap: 16rem;
				padding-top: 9.5rem;
				padding-bottom: 22.5rem;
			}
			@media (width <= 767px) {/* SP */
				padding-top: 5rem;
				width: 31.1rem;
				gap: 8rem;
				padding-bottom: 12rem;
			}
		}
		.txtarea{
			letter-spacing: .14em;
			@media (width > 767px) {/* PC */
				width: 39.7rem;
			}
			.copy{
				white-space: nowrap;
				font-family: var(--ff-tsukumin);
				font-weight: 300;
				line-height: 180%; /* 54px */
				letter-spacing: .15em;

				font-size: 3rem;
				@media (width <= 767px) {/* SP */
					font-size: 2.2rem;
				}
			}
			.txt{
				line-height: 2.4;
				margin-top: 3.2rem;
				@media (width <= 767px) {/* SP */
					font-size: 1.5rem;
					margin-top: 2.5rem;
				}
			}
			.btn{
				display: flex;
				justify-content: flex-start;
				margin-top: 4.8rem;
				@media (width <= 767px) {/* SP */
					margin-top: 3.8rem;
				}
				a{
					border-bottom: solid 1px #000;
					display: flex;
					align-items: center;
					gap: 1.3rem;
					@media (width <= 767px) {/* SP */
						font-size: 1.4rem;
					}
					&:after{
						content: '';
						background: url(../images/common/arw-blk.svg) center center /100% auto no-repeat;
						width: 1rem;
						height: 1rem;
					}
				}
			}
		}
		.imgBox{
			position: relative;
			img{
				position: absolute;
			}
		}
		.block1{
			display: flex;
			@media (width > 767px) {/* PC */
				justify-content: space-between;
				flex-direction: row-reverse;
				align-items: center;
			}
			@media (width <= 767px) {/* SP */
				position: relative;
				flex-direction: column;
				gap: 5rem;
			}
			.imgBox{
				@media (width > 767px) {/* PC */
					width: 68.5rem;
					height: 52.3rem;
				}
				@media (width <= 767px) {/* SP */
					width: 32.7rem;
					height: 30.7rem;
				}
				.-img1{
					
					top: 0;
					right: 0;
					@media (width > 767px) {/* PC */
						width: 53rem;
					}
					@media (width <= 767px) {/* SP */
						width: 28rem;
					}
				}
				.-img2{
					left: 0;
					bottom: 0;
					@media (width > 767px) {/* PC */
						width: 35.9rem;
					}
					@media (width <= 767px) {/* SP */
						width: 19rem;
					}
				}
			}
			.obj-kamome{
				position: absolute;
				top: -5.5rem;
				left: -1rem;
				width: 12.5rem;
				z-index: 1;
			}
		}
		.block2{
			display: flex;
			@media (width > 767px) {/* PC */
				justify-content: space-between;
				align-items: center;
			}
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				gap: 5rem;
			}
			.imgBox{
				@media (width > 767px) {/* PC */
					width: 69.5rem;
					height: 53.3rem;
				}
				@media (width <= 767px) {/* SP */
					width: 32.7rem;
					height: 30.7rem;
					left: -1.5rem;
				}
				.-img1{
					
					top: 0;
					left: 0;
					@media (width > 767px) {/* PC */
						width: 53rem;
					}
					@media (width <= 767px) {/* SP */
						width: 28rem;
					}
				}
				.-img2{
					right: 0;
					bottom: 0;
					@media (width > 767px) {/* PC */
						width: 36rem;
					}
					@media (width <= 767px) {/* SP */
						width: 19rem;
					}
				}
			}
		}
		.btnBlock{
			a{
				width: 60.7rem;
				display: block;
				margin: 0 auto;
				@media (width <= 767px) {/* SP */
					width: 31.1rem;
				}
				img{
					width: 100%;
					filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
				}
			}
		}
	}
}

@keyframes marquee-travelTopTxt {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}

/* 表示アニメーション */
.iv-fu{
	opacity: 0;
	transform: translate3d(0, 3.5rem, 0) rotate(.001deg);
	transition: opacity 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
	transition-property: opacity, transform;
	&.-dly-1{
		transition-delay: .3s;
	}
	&.-dly-2{
		transition-delay: .6s;
	}
	&.-dly-late{
		transition-delay: 1s;
	}
	&.-viewed{
		opacity: 1;
		transform: translate3d(0, 0, 0) rotate(.001deg);
	}
}