@charset "UTF-8";

/*　2014年版を改訂　（2019.02.13）　*/
/* 「for Tablet」とある箇所は、Waypoint用（Skrollrを使用しないため）*/

@import url(../../shared/css/style.css);
@import url(../../shared/css/elements.css);
@import url(muse01_pc.css);


p {
	margin-bottom: 0;
	text-align: center;
	text-indent: 0;
	font-size: 15px;
}
.info p {
	text-align: left;
}
.info p.centerImage {
	margin-top: 0.5em;
	text-align: center;
}
.info {
	padding: 125px 20px 20px;
	border-width: 6px;
	border-style: solid;
	border-color: #f5b717;
	border-radius: 10px;
	background: url(../images/miteshiri.gif) no-repeat 10px 10px;
	background-color:#fff;
}
.info .cls {
	position:absolute;
	top:5px;
	right:5px;
}

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

#cut01 {
	position: relative;
	margin:0 auto;
	width: 1024px;
	height:685px;
}
#cut01 .arrow {
	position: absolute;
	top: 377px;
	left: 315px;
	width: 263px;
/*	height: 306px;*/
	background: url(../images/08/arrw1.png) no-repeat;
}

/* for Tablet */
#cut01 .arrow.fade {
	height: 0px;
}
#cut01 .arrow.fade.in {
	height: 306px;
	transition: height .7s ease;
}
/* for Tablet 縦表示の際の遅延設定*/
@media (orientation: portrait) {
	#cut01 .arrow.fade.in {
		height: 306px;
		transition: height .7s ease 5.8s;
	}
}


#cut01 .doc {
	position:absolute;
	top:76px;
	left:-130px;
	width: 333px;
	height: 203px;
	background: url(../images/08/dr_clean.png) no-repeat 0 0;
}
#cut01 .suka {
	position:absolute;
	left : 840px;
	top : 360px;
	width : 169px;
	height : 111px;
	background: url(../images/08/cut01_suka.png) no-repeat left top;
}

#cut01 .bg01 {
	position:absolute;
	left: 54px;
	top: 333px;
	width: 121px;
	height: 257px;
	background: url(../images/08/grass1.png) no-repeat 0 0;
}
#cut01 .title {
	margin-left:32px;
	width: 761px;
	height: 58px;
	padding-top: 7px;
}
#cut01 .stage {
	position: relative;
	z-index: 2;
	margin-left: 222px;
	width: 600px;
	height: 340px;
	text-align: center;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}

#cut01 .txt {
	position: absolute;
	top: 428px;
	left: 222px;
	z-index: 3;
	width: 608px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
	text-align:center;
}
#cut01 .txt p {
	padding: 10px 15px;
	/* text-align:left; */
	margin:0 auto;
	display:inline-block;
}
#cut01 .more {
	position: absolute;
	top: 177px;
	left: 849px;
	width: 135px;
	height: 136px;
	background: url(../images/more.png) no-repeat 0 0;
	cursor: pointer;
}
#cut01 #box01 {
	position:absolute;
	top:150px;
	right:5px;
	z-index: 20;
	width: 320px;
	height: auto;
}

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

/*図版アニメ設定*/
@keyframes scale01 {
	0%, 70% { transform: scale(0, 0); }
	80%  { transform: scale(1.2, 1.2); }
	100%  { transform: scale(1, 1); }
}
/* Safari & Chrome */
@-webkit-keyframes scale01 {
	0%,  70%  { -webkit-transform: scale(0, 0); }
	80%  { -webkit-transform: scale(1.2, 1.2); }
	100%  { -webkit-transform: scale(1, 1); }
}

/*キャプションアニメ設定*/
@keyframes txt01 {
	0%, 90% {	opacity:0;	}
	100% {	opacity:1;	}
}
@-webkit-keyframes txt01 {
	0%, 90% {	opacity:0;	}
	100% {	opacity:1;	}
}

/*ゆっくりスクロールしてねアニメ設定*/
@keyframes ar00 {
	0%, 95% {	opacity:0;	}
	100% {	opacity:1;	}
}
@-webkit-keyframes ar00 {
	0%, 95% {	opacity:0;	}
	100% {	opacity:1;	}
}

@keyframes blink {
    0% {opacity: 0;}
   50%, 100% {opacity: 1;}
}
@-webkit-keyframes blink {
    0% {opacity: 0;}
    50%, 100% {opacity: 1;}
}


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

/*スーカ1*/
#cut01 .suka {
	-webkit-animation-name: scale01;
	animation-name: scale01;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

/*box*/
#cut01 .more {
	-webkit-animation-name: scale01;
	animation-name: scale01;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

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


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

/*スクロールしてね*/
#cut01 .arrow00{
	margin-top: 130px;
	color: #999;
	text-align:center;
	font-size:36px;
	font-family:'Lucida Grande', sans-serif;
	opacity:1;
	-webkit-animation-name: ar00;
	animation-name: ar00;
	-webkit-animation-duration: 11s;
	animation-duration: 11s;
 	-webkit-animation-delay: 0s;
 	animation-delay: 0s;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}
#cut01 .arrow00 strong{
  -webkit-animation-name: blink;
  animation-name: blink;
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
 -webkit-animation-delay: 7s; 
 animation-delay: 7s;
  -webkit-animation-iteration-count: infinite; 
  animation-iteration-count: infinite;
}

/* for Tablet */
#cut01 .arrow00.out {
	display: none;
}



/*--------------------------------------------------------------------------------
 #cut02
--------------------------------------------------------------------------------*/
#cut02 {
	position: relative;
	margin:0 auto;
	width: 1024px;
	height:592px;
}

/* for Tablet 縦表示の際の遅延設定*/
@media (orientation: portrait) {
	#cut02.fade.in {
		opacity: 1;
		transition: opacity .7s ease 6.5s;
	}
}


#cut02 .arrow {
	position: absolute;
	top: 328px;
	left: 315px;
	width: 213px;
/*	height: 261px;*/
	background: url(../images/08/arrw2.png) no-repeat;
}

/* for Tablet */
#cut02 .arrow.fade {
	height: 0px;
}
#cut02 .arrow.fade.in {
	height: 261px;
	transition: height .7s ease;
}


#cut02 .stage {
	position: relative;
	z-index: 2;
	margin-left:59px;
	width: 600px;
	height: 340px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut02 .txt {
	position: absolute;
	top: 360px;
	left: 59px;
	z-index: 3;
	width: 604px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
}
#cut02 .txt p {
	padding: 10px 15px;
}
#cut02 .suka {
	position: absolute ;
	left : 733px;
	top : 291px;
	width : 153px;
	height : 109px;
	background-image: url(../images/08/cut02_suka.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#cut02 .homura {
	position: absolute ;
	left : 803px;
	top : 174px;
	width : 148px;
	height : 209px;
	background-image: url(../images/08/cut02_homura.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#cut02 .grass {
	position: absolute ;
	left : 628px;
	top : 379px;
	width : 331px;
	height : 48px;
	background-image: url(../images/08/cut02_kusa.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}


/*--------------------------------------------------------------------------------
 #cut03
--------------------------------------------------------------------------------*/
#cut03 {
	position: relative;
	margin:0 auto;
	width: 1024px;
	height: 675px;
}



#cut03 .doc {
	position:absolute;
	top:13px;
	left:-130px;
	width: 338px;
	height: 203px;
	background: url(../images/08/dr_clean2.png) no-repeat 0 0;
}
#cut03 .suka {
	position: absolute ;
	left : 120px;
	top : 234px;
	width : 157px;
	height : 132px;
	background-image: url(../images/08/cut03_suka.png);
	background-repeat: no-repeat;
}
#cut03 .grass {
	background-image: url(../images/08/cut03_kusa.png);
	background-repeat: no-repeat;
	position: absolute ;
	left : 46px;
	top : 320px;
	width : 280px;
	height : 177px;
}
#cut03 .stage {
	position: relative;
	z-index: 2;
	margin-left:357px;
	width: 600px;
	height: 340px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut03 .txt {
	position: absolute;
	top: 360px;
	left: 357px;
	z-index: 3;
	width: 608px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
}
#cut03 .txt p {
	padding: 10px 15px;
}
#cut03 .photo01 {
	position: absolute;
	left: 357px;
	top: 116px;
	width: 218px;
	height:164px;
}
#cut03 .photo02 {
	position: absolute;
	left: 32px;
	top: 53px;
	width: 218px;
	height:164px;
}
#cut03 .photo03 {
	position: absolute;
	left: 222px;
	top: 12px;
	width: 218px;
	height:164px;
}
#cut03 .photo04 {
	position: absolute;
	left: 165px;
	top: 170px;
	width: 218px;
	height:164px;
}