@charset "UTF-8";
/*==============
    index
================*/
#p_index{
}
body{
	padding-top: 0;
}


/* ----------------------------------------------------------------------------------------------------
*  loading animation
* --------------------------------------------------------------------------------------------------*/
/* Loading Block */
.loading {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
}
.loading.active {
	display: block;
	animation: loading 3s ease 4s 1 both;
}
#message .ttl{
	font-size: 2.2rem;
	margin-bottom: 60px;
	display: block;
	padding-top: 100px;
	margin-top: -100px;
}
#message{
	text-align: center;
}
#message p {
	text-align: center;
	line-height: 3rem;
}
#message p img{
	margin: 0 auto;
	width: 230px;
	display: block;
}
#message .mark{
	padding-top: 50px;
	padding-bottom: 100px;
}

#hotels {
	padding-top: 0px;
	margin-bottom: 20px;
}

#hotels .ttl{
	padding-top: 38px;
	margin-top: 60px;
	text-align: center;
}

@keyframes loading {
  0% {
  	opacity: 1;
  }
  100% {
  	opacity: 0;
  }
}
.loading .inner{
	width: 100%;
	height: 100%;
	position: relative;
	background: url(/bundles/web/img/index/loading.jpg) center no-repeat;
	background-size: cover;
	animation: loadinner 1s ease 0s 1 both;
}
@keyframes loadinner {
  0% {
  	opacity: 0;
  }
  100% {
  	opacity: 1;
  }
}

.loading .inner p{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	text-align: center;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	font-weight: 500;
	line-height: 1.7;
	animation: loadtxt 2s ease 1s 1 both;
	width: 500px;
}
@keyframes loadtxt {
  0% {
  	opacity: 0;
  }
  100% {
  	opacity: 1;
  }
}
@media screen and (max-width: 768px) {
	.loading .inner p{
		font-size: 4.8vw;
		width: 100%;
	}

	#message p{
		padding: 0 20px;
	}
	#message .ttl{
		font-size: 5.8vw;
		margin-bottom: 17.6vw;
		padding-top: 60px;
		margin-top: -60px;
	}
	#message p img{
		margin: 0 auto;
		width: 207px;
		display: block;
	}
	#message .mark{
		padding-top: 50px;
		padding-bottom: 50px;
	}
	#hotels .ttl{
		padding-top: 80px;
		margin-top: -80px;
	}


}
@media screen and (orientation: landscape) and (max-width: 768px) {
	.loading .inner p{
		font-size: 3.4vw;
	}
	.loading .inner p .sp{
		display: none!important;
	}
}

/* ------------------------------
    fv
------------------------------ */
#fv{
	position: relative;
	z-index:1;
	height: 100%;
	padding: 150px 0 0px;
}
.fv_blk1{
	margin-bottom: 58px;
}
.fv_blk1 .ph{
	position: relative;
}
.fv_blk1 .ph img{

}
.fv_blk1 .js_time{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	z-index:2;
	font-size: 1.8rem;
	line-height: 1;
	font-weight: 400;
}

.fv_blk1 .txt{

}
.fv_blk1 .txt1{
	position: relative;
	font-size: 2.7rem;
	letter-spacing: -0.05em;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 28px;
}
.fv_blk1 .txt1 img{
	position: absolute;
	width: 78px;
	right: 0;
	top: -2px;
	z-index:-1;
}
.fv_blk1 .ttl{
	text-align: center;
	font-size: 2rem;
	line-height: 1;
}
.fv_blk1 .ttl .date{

}
.fv_blk1 .ttl .dot{
	font-size: 1.3rem;
}

.fv_blk1 .ttl img{
	width: 302px;
	display: block;
	margin: 0 auto;
}
.fv_blk2{
	position: relative;
}
.fv_blk2 p{
	font-size: 1.6rem;
	color: #4E3B30;
	line-height: 1.7;
}
.fv_blk2 .fv_ins{
	display: block;
	width: 28px;
}


@media screen and (min-width: 768px) {
	#message p{
		line-height: 45px;
	}
}

@media screen and (min-width: 769px) {
	#fv{
		display: flex;
		align-items: center;
		min-height: 650px;
	}
	.fv_blk1 .txt{
		width: 336px;
	}
	.fv_blk1 .ph{
		height: 305px;
		width: 515px;
		overflow: hidden;
	}
	.fv_blk1 .ph img{
		position: absolute;
		bottom: 0;
	}
	.fv_blk2 p{
		padding: 0 120px;
	}
	.fv_blk2 .fv_ins{
		position: absolute;
		left: 0;
		bottom: 6px;
	}
}
@media screen and (max-width: 768px) {
	#fv{
		padding: 0;
		height: auto;
		height: 100%;
		min-height: calc(50% + 333px);
		margin-bottom: 8vw;
	}
	.fv_inner{
		width: 100%;
		height: 100%
	}
	.fv_blk1{
		margin-bottom: 0;
	}
	.fv_blk1 .ph{
		height: 50vh;
		overflow: hidden;
	}
	.fv_blk1 .js_time{
		font-size: 5.3vw;
	}
	.fv_blk1 .ph img{
		height: 100%;
		object-fit: cover;
	}
	.fv_blk1 .txt{
		width: 230px;
		margin: 0 auto;
		padding: 40px 0 0;
	}
	.fv_blk1 .txt1{
		font-size: 2.4rem;
		margin-bottom: 24px;
	}
	.fv_blk1 .txt1 img{
		width: 60px;
		right: -3vw;
		top: 0;
	}
	.fv_blk1 .ttl{
		font-size: 1.8rem;
	}
	.fv_blk1 .ttl .dot{
		font-size: 1.3rem;
	}

	.fv_blk1 .ttl img{
		width: 100%;
		margin-bottom:0;
	}
	.fv_blk2{
		height: calc(50% - 200px);
		min-height: calc(25.6vw + 40px);
		position: relative;
	}
	.fv_blk2 p{
		font-size: 4vw;
		line-height: 1.6;
		padding-bottom: 0.5em;
		padding-top: 24px;
	}
	.fv_blk2 .fv_ins{
		position: absolute;
		width: 7.5vw;
		bottom: 15px;
		left: 4vw;
	}
}

@media screen and (orientation: landscape) and (max-width: 768px) {
	#fv{
		height: auto;
	}
	.fv_blk1 .ph{
		min-height: 250px;
	}
}


/* ------------------------------
    flow
------------------------------ */
#flow{
	padding: 80px 0 90px;
}
#flow .ttl{
	font-size: 2.2rem;
	line-height: 1;
	margin-bottom: 80px;
	letter-spacing: 0.05em;
}
.flowbox{

}
.flowbox + .flowbox{
	margin-top: 50px;
}
.flowbox .txt{
}
.flowbox .ttls{
	font-size: 2.6rem;
	margin-bottom: 1em;
	line-height: 1;
	letter-spacing: 0.05em;
}
.flowbox p{

}
.flowbox .ph{
}
.flow1btn{
}
#flow .btnbox{
	margin-top: 86px;
}
@media screen and (min-width: 769px) {
	.flowbox .ph{
		width: 250px;
	}
	.flowbox .txt{
		width: 420px;
	}
	.flow1btn{
		display: block;
		color: #EBB5AF;
		font-size: 1.6rem;
		margin-top: 2.6em;
	}
}

@media screen and (max-width: 768px) {
	#flow{
		padding: 26.6vw 0 21vw;
	}
	#flow .ttl{
		font-size: 5.8vw;
		margin-bottom: 18.6vw;
	}
	.flowbox{
	}
	.flowbox + .flowbox{
		margin-top: 13vw;
	}
	.flowbox .txt{
	}
	.flowbox .ttls{
		text-align: center;
		font-size: 5.8vw;
		margin-bottom: 0.8em;
	}
	.flowbox p{

	}
	.flowbox .ph{
		width: 66vw;
		margin: 0 auto 5.3vw;
	}
	.flow1btn{
		margin-top: 9.3vw;
	}
	#flow .btnbox{
		margin-top: 18.5vw;
	}

}