@charset "UTF-8";

/*　2014年版（PCのみ）を基に新規作成　（2019.02.05 - 2019.02.12）　*/


@import url(../../shared/css/style.css);
@import url(../../shared/css/elements_sp.css);
@import url(muse01_sp.css);


/*--------------------------------------------------------------------------------
 #cut01
--------------------------------------------------------------------------------*/

#cut01 {
	position: relative;
	width: 100%;
	height:auto;
	padding-top: 25px;
	padding-bottom: 300px;
	background: url(../images/02/grass1.svg) 78px 266px no-repeat;
}
#cut01 .title {
	margin-left:37px;
	width: 544px;
	height: 211px;
	background: url(../images/02/title.svg) left top / contain no-repeat;
}
#cut01 .title img {
	display: none;
}


#cut01 .honoka1 {
	position: absolute;
	left : 425px;
	top : 230px;
	width: 194px;
	height: 191px;
	background: url(../images/02/honoka1.png) left top / contain no-repeat;
}



#cut01 .stage {
	margin: 204px auto 0;
}

#cut01 .arrow {
	position: absolute;
	top: 1026px;
	left: 460px;
	background: url(../images/arrw_right_down.svg) no-repeat;
}
#cut01 .doc {
	position: absolute;
	bottom: 60px;
	left: -107px;
	width: 360px;
	height: 216px;
	background: url(../images/02/dr_clean2.png) right top / contain no-repeat;
}


 /*1カットめは、CSSの自動アニメーション
 -----------------------------------------*/
 
 /*タイトル設定*/
@keyframes doc01 {
	0% {
		opacity: 0;
		transform: translate(-333px, 0px);
	}

	100% {
		opacity: 1;
		transform: translate(0px, 0px);
	}
}

/*図版アニメ設定*/
@keyframes scale01 {

	0%,
	70% {
		transform: scale(0, 0);
	}

	80% {
		transform: scale(1.2, 1.2);
	}

	100% {
		transform: scale(1, 1);
	}
}


/*キャプションアニメ設定*/
@keyframes txt01 {

	0%,
	90% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}



/*title*/
#cut01 .title {
	animation-name: doc01;
	animation-duration: 1s;
	animation-delay: 0s;
	animation-iteration-count: 1;
}

/*ほのか1*/
#cut01 .honoka1 {
	animation-name: scale01;
	animation-duration: 1.5s;
	animation-delay: 0s;
	animation-iteration-count: 1;
}

/*図版*/
#cut01 .stage {
	animation-name: scale01;
	animation-duration: 3s;
	animation-delay: 0s;
	animation-iteration-count: 1;
}

/*キャプション*/
#cut01 .txt,
#cut01 .txt p {
	animation-name: txt01;
	animation-duration: 4s;
	animation-delay: 0s;
	animation-iteration-count: 1;
}



/*--------------------------------------------------------------------------------
 #cut02
--------------------------------------------------------------------------------*/
#cut02 {
	position: relative;
	overflow:hidden;
	width: 100%;
	height:auto;
	padding-bottom: 30px;
	background: url(../images/02/grass1.svg) 80% 95% no-repeat;
}
#cut02 .arrow {
	position: absolute;
	top: 0;
	left: 78px;
	background: url(../images/arrw_left_down.svg) no-repeat;
}




/*--------------------------------------------------------------------------------
 #cut03
--------------------------------------------------------------------------------*/
#cut03 {
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 30px;
	background: url(../images/02/honoka2_sp.png) 15% 95% no-repeat;
}
#cut03 .arrow {
	position: absolute;
	top: 0;
	right: 107px;
	background: url(../images/arrw_right_down.svg) no-repeat;
}



/*--------------------------------------------------------------------------------
 #cut04
--------------------------------------------------------------------------------*/
#cut04 {
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 30px;
	background: url(../images/02/cut04_bg2_sp.png) 15% 98% no-repeat;
}

#cut04 .arrow {
	position: absolute;
	top: 0;
	right: 107px;
	background: url(../images/arrw_right_down.svg) no-repeat;
}

#cut04_bg1_sp {
	display: block;
	width: 564px;
	height: 355px;
	padding: 30px 0;
	background: url(../images/02/cut04_bg_sp.png) left top no-repeat;
}




/*--------------------------------------------------------------------------------
 #cut05
--------------------------------------------------------------------------------*/
#cut05 {
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 200px;
	background: url(../images/02/honoka3_sp.png) center bottom no-repeat;
}
#cut05 .lpg {
	position: absolute ;
	left: 387px;
	top: 30px;
	width: 79px;
	height: 23px;
}
#cut05 .photo1 {
	position: absolute ;
	left: 12px;
	top: 18px;
	width: 352px;
	height: 267px;
}
#cut05 .photo2 {
	position: absolute ;
	left: 289px;
	top: 143px;
	width: 301px;
	height: 172px;
}