@charset "UTF-8";

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


@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: 30px;
	padding-bottom: 300px;
	background: url(../images/01/cut01_bg02.png) 95% 95% / 333px auto no-repeat;
}
#cut01 .title {
	margin-left:40px;
	width: 550px;
	height: 72px;
	background: url(../images/01/muse_title.svg) left top / contain no-repeat;
}
#cut01 .title img {
	display: none;
}

#cut01 .doc {
	position:absolute;
	top:120px;
	left: -98px;
	width: 351px;
	height: 214px;
	background: url(../images/01/cut01_doc.png)  right top / contain no-repeat;
}
#cut01 .boy {
	position:absolute;
	top:199px;
	right:76px;
	width: 129px;
	height: 220px;
	background: url(../images/01/cut01_boy.png)  left top / contain no-repeat;
}

#cut01 .bg01 {
	position:absolute;
	top:280px;
	left:290px;
	width: 131px;
	height: 115px;
	background: url(../images/01/cut01_bg01.svg) left top / contain no-repeat;
}



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

#cut01 .arrow {
	position: absolute;
/*	top: 1056px;*/
	top: 1020px;
	left: 78px;
	background: url(../images/arrw_left_down.svg) 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;
	}
}



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

/*少年*/
#cut01 .boy {
	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;
}

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

#cut02 .doc {
	position:absolute;
	bottom:50px;
	left: -98px;
	width: 351px;
	height: 214px;
	background: url(../images/01/cut01_doc.png)  right top / contain no-repeat;
}


/*--------------------------------------------------------------------------------
 #cut03
--------------------------------------------------------------------------------*/
#cut03 {
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 30px;
	background: url(../images/01/cut03_boy_sp.png) 80% 95% no-repeat
}

#cut03 .arrow {
	position: absolute;
	top: 0;
	left: 78px;
	background: url(../images/arrw_left_down.svg) no-repeat;
}



/*--------------------------------------------------------------------------------
 #cut04
--------------------------------------------------------------------------------*/
#cut04 {
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 30px;
	background: url(../images/01/cut04_bg01_sp.png) 8% 95% no-repeat;
}

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

#cut04 .ch0 {
	position: absolute;
	top: 24px;
	left: 27px;
	width: 155px;
	height: 246px;
	background: url(../images/01/cut04_ph0.png) no-repeat 0 0;
}
#cut04 .ch1 {
	position: absolute;
	top: 79px;
	left: 224px;
	z-index: 6;
	width: 179px;
	height: 217px;
	background: url(../images/01/cut04_ph1.png) no-repeat 0 0;
}
#cut04 .ch2 {
	position: absolute;
	top: 79px;
	left: 397px;
	z-index: 5;
	width: 178px;
	height: 190px;
	background: url(../images/01/cut04_ph2.png) no-repeat 0 0;
}


/*--------------------------------------------------------------------------------
 #cut05
--------------------------------------------------------------------------------*/
#cut056 {
	overflow:hidden;
	width: 100%;
	height:auto;
	padding-bottom: 300px;
	background: url(../images/01/cut05_boy_sp.png) center 95% no-repeat;
}


#cut05 {
	position: relative;
	width: 100%;
	height: auto;
}

#cut05 .ch0 {
	position: absolute;
	top: 27px;
	left: 94px;
	width: 182px;
	height: 238px;
	background: url(../images/01/cut05_ph0.png) no-repeat 0 0;
}

#cut05 .ch1 {
	position: absolute;
	top: 27px;
	left: 324px;
	width: 159px;
	height: 173px;
	background: url(../images/01/cut05_ph1.png) no-repeat 0 0;
}

/*--------------------------------------------------------------------------------
 #cut06
--------------------------------------------------------------------------------*/
#cut06 {
	position: relative;
	width: 100%;
	height: auto;
}

#cut06 .ch0 {
	position: absolute;
  top: 31px;
  left: 217px;
  width: 308px;
  height: 184px;
	background: url(../images/01/cut06_house.png) no-repeat 0 0;
}
#cut06 .ch1 {
	position: absolute;
  top: 182px;
  left: 41px;
  width: 186px;
  height: 77px;
	background: url(../images/01/cut06_car.png) no-repeat 0 0;
}
#cut06 .ch2 {
	position: absolute;
  top: 147px;
  left: 233px;
  width: 67px;
  height: 48px;
	background: url(../images/01/cut06_gas.png) no-repeat 0 0;
}
#cut06 .ch3 {
	position: absolute;
  top: 111px;
  left: 64px;
  width: 161px;
  height: 66px;
	background: url(../images/01/cut06_arrow.png) no-repeat 0 0;
}