@charset "utf-8";

/*header----------------*/
header .slide-image,
header .slide-image2{
	opacity: 0;
}
		
			
/*contents01----------------*/
.mv01,.mv02,.mv03,.mv06,.mv07,.mv011,.mv014,.mv09,.mv010,.mv013,.mv015,
.cont01,
.staff_bnr,
.cont02,
.cont03,
.experience {
	opacity: 0;
	transform: translateY(50px);
}
.mv012{
	transform: translatex(100vw);
}

.contents01_01_01 {
 	opacity: 0;
	transform: translateY(50px); /* 下からふわっと */
	will-change: opacity, transform;
}


/*frends_wrapper----------------*/
.frends_inner {
	opacity: 0;
	will-change: opacity, transform;
}
.img_box{
	transform: scale(0.8);
}

/*contents04----------------*/
.text08,
.text09 {
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: linear-gradient(to right, #FFFF00, #FFFF00);
}
.goods {
	opacity: 0;
	transform: translateY(30px) scale(1);
}


/*contents05----------------*/
.hotels {
	opacity: 0;
	transform: scale(0.95); /* 念のためJSと同じ初期値にしておくと安心 */
	transition: none;

}

.title03{
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: linear-gradient(to right, #FFFF00, #FFFF00); /* お好みで色変更 */
}
.title03 span {
	display: inline-block;
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: linear-gradient(to right, #FFFF00, #FFFF00);
}

/*contents06----------------*/
.title02,
.title04,
.text012 {
	opacity: 0;
	transform: translateY(30px);
}

/*footer----------------*/
footer .h_img02,
footer .h_img04 {
opacity: 0;
}

footer .h_img03 {
	transform: scale(2);
	opacity: 0;
}

.f_text01 {
	display: flex;
	gap: 1rem; /* スペース調整は任意 */
	flex-wrap: wrap;
}

.f_text01 span {
	display: inline-block;
	opacity: 0;
	clip-path: inset(0 100% 0 0); /* 左から非表示 */
}