@charset "utf-8";

/*--------------------
common
--------------------*/

*{
	margin:0;
	padding:0;
}
.hero .wrapper{
	overflow:hidden;
	width:100%;
}
.hero .contents{
	position:relative;
	width:100%;
	padding-bottom:177.866666666667%;
}
.hero .wrapper p, .hero .wrapper img{
	display:block;
	position:absolute;
	border:0;
	box-sizing:border-box;
}

/*--------------------
text
--------------------*/


/*--------------------
<p>
--------------------*/


/*--------------------
<img>
--------------------*/

.hero .contents .img1{
	top:0%;
	left:0%;
	width:100%;
	height:100%;
}
.hero .contents .img2{
	top:36.2818590704648%;
	left:-13.2%;
	width:23.7333333333333%;
	height:22.263868065967%;
}
.hero .contents .img3{
	top:-18.3658170914543%;
	left:64.8%;
	width:28.4%;
	height:26.6116941529235%;
}
.hero .contents .img4{
	top:2.62368815592204%;
	left:36.5333333333333%;
	width:34.5333333333333%;
	height:32.3088455772114%;
}
.hero .contents .img5{
	top:0%;
	left:0%;
	width:100%;
	height:100%;
}
.hero .contents .img6{
	top:20.3898050974513%;
	left:67.6%;
	width:32.5333333333333%;
	height:30.4347826086957%;
}
.hero .contents .img7{
	top:14.167916041979%;
	left:4%;
	width:28%;
	height:26.311844077961%;
}
.hero .contents .img8{
	top:38.9805097451274%;
	left:17.4666666666667%;
	width:46.9333333333333%;
	height:44.0029985007496%;
}
.hero .contents .img9{
	top:54.1229385307346%;
	left:60.2666666666667%;
	width:34.4%;
	height:32.2338830584708%;
}
.hero .contents .img10{
	top:63.6431784107946%;
	left:0%;
	width:28.4%;
	height:26.6116941529235%;
}
.hero .contents .img11{
	top:0%;
	left:0%;
	width:100%;
	height:100%;
}
.hero .contents .img12{
	top:0%;
	left:0%;
	width:100%;
	height:100%;
}
.hero .contents .img13{
	top:0%;
	left:0%;
	width:100%;
	height:100%;
}
.hero .contents .img14{
	top:0%;
	left:0%;
	width:100%;
	height:100%;
}
.hero .contents .img15{
	top:2.7736131934033%;
	left:5.33333333333333%;
	width:89.8666666666667%;
	height:95.2023988005997%;
}


/* 追加デザイン */
.hero .contents .img12{
	mix-blend-mode: overlay;
}


/* 追加アニメーション */
/* 写真 */
.hero .contents .img2,
.hero .contents .img3,
.hero .contents .img4,
.hero .contents .img6,
.hero .contents .img7,
.hero .contents .img8,
.hero .contents .img9,
.hero .contents .img10
{
	opacity: 0;
	transform: translate(0,15px) scale(1.1);
	transition: 0.75s;
	transition-timing-function: ease-in-out;
	transform-origin: top center;

}
.hero .contents .img2  {transition-delay: 1.00s;}
.hero .contents .img3  {transition-delay: 1.15s;}
.hero .contents .img4  {transition-delay: 1.30s;}
.hero .contents .img6  {transition-delay: 1.45s;}
.hero .contents .img7  {transition-delay: 1.60s;}
.hero .contents .img8  {transition-delay: 1.75s;}
.hero .contents .img9  {transition-delay: 1.90s;}
.hero .contents .img10 {transition-delay: 2.05s;}

/* ぼんぼり びょうぶ */
.hero .contents .img5, /* ぼんぼり */
.hero .contents .img11 /* びょうぶ */
{
	opacity: 0;
	transition: 0.75s;
	transition-timing-function: ease-in-out;
}
.hero .contents .img5  {transition-delay: 2.0s;}
.hero .contents .img11 {transition-delay: 2.15s;}

/* さくら */
.hero .contents .img13, /* 桜 上 */
.hero .contents .img14 /* 桜 下 */
{
	opacity: 0;
	transition: 0.75s;
	transition-timing-function: ease-in-out;
}
.hero .contents .img13 {transition-delay: 2.6s;}
.hero .contents .img14 {transition-delay: 2.75s;}


/* テキスト */
.hero .contents .img15
{
	opacity: 0;
	transition: 0.75s;
	transition-timing-function: ease-in-out;
}
.hero .contents .img15 {transition-delay: 3.25s;}

/* アニメーション終了時の設定 */
.loaded .hero .contents [class^="img"] {
	opacity: 1;
	transform: translate(0,0) scale(1);
}



@media (min-width: 576px) {
	/*--------------------
	common
	--------------------*/

	*{
		margin:0;
		padding:0;
	}
	.hero .wrapper{
		overflow:hidden;
		width:100%;
	}
	.hero .contents{
		position:relative;
		width:100%;
		padding-bottom:62.0790629575403%;
	}
	.hero .wrapper p, .hero .wrapper img{
		display:block;
		position:absolute;
		border:0;
		box-sizing:border-box;
	}

	/*--------------------
	text
	--------------------*/


	/*--------------------
	<p>
	--------------------*/


	/*--------------------
	<img>
	--------------------*/

	.hero .contents .img1{
		top:0%;
		left:0%;
		width:100%;
		height:100%;
	}
	.hero .contents .img2{
		top:-40.2122641509434%;
		left:20.1317715959004%;
		width:19.3265007320644%;
		height:51.8867924528302%;
	}
	.hero .contents .img3{
		top:-53.5377358490566%;
		left:81.9180087847731%;
		width:22.2547584187408%;
		height:59.6698113207547%;
	}
	.hero .contents .img4{
		top:-11.9103773584906%;
		left:55.4172767203514%;
		width:24.3045387994143%;
		height:65.0943396226415%;
	}
	.hero .contents .img5{
		top:0%;
		left:0%;
		width:100%;
		height:100%;
	}
	.hero .contents .img6{
		top:-1.65094339622642%;
		left:33.6749633967789%;
		width:16.3250366032211%;
		height:43.8679245283019%;
	}
	.hero .contents .img7{
		top:49.0566037735849%;
		left:25.7686676427526%;
		width:13.6896046852123%;
		height:36.9103773584906%;
	}
	.hero .contents .img8{
		top:36.3207547169811%;
		left:77.9648609077599%;
		width:17.6427525622255%;
		height:47.4056603773585%;
	}
	.hero .contents .img9{
		top:24.2924528301887%;
		left:46.9985358711567%;
		width:16.7642752562225%;
		height:45.0471698113208%;
	}
	.hero .contents .img10{
		top:55.0707547169811%;
		left:42.0937042459736%;
		width:16.7642752562225%;
		height:44.9292452830189%;
	}
	.hero .contents .img11{
		top:0%;
		left:58.8579795021962%;
		width:41.2152269399707%;
		height:100%;
	}
	.hero .contents .img12{
		top:0%;
		left:0%;
		width:100%;
		height:100%;
	}
	.hero .contents .img13{
		top:0%;
		left:0%;
		width:100%;
		height:100%;
	}
	.hero .contents .img14{
		top:0%;
		left:0%;
		width:100%;
		height:100%;
	}
	.hero .contents .img15{
		top:4.36320754716981%;
		left:4.39238653001464%;
		width:91.2152269399707%;
		height:94.6933962264151%;
	}
}