@charset "UTF-8";


/*　2014年版を改訂　（2019.02.07）　*/
/* 「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/03/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/03/dr_clean.png) no-repeat 0 0;
}
#cut01 .suka1 {
	position:absolute;
	left: 847px;
	top: 350px;
	width: 105px;
	height: 123px;
	background: url(../images/03/suka1.png) no-repeat 0 0;
}

#cut01 .bg01 {
	position:absolute;
	left: 54px;
	top: 333px;
	width: 121px;
	height: 257px;
	background: url(../images/03/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;
	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);
}
#cut01 .txt p {
	padding: 10px 15px;
}
#cut01 .more {
	position: absolute;
	left: 841px;
	top: 134px;
	width: 135px;
	height: 136px;
	background: url(../images/more.png) no-repeat 0 0;
	cursor: pointer;
}
#cut01 #box01 {
	position:absolute;
	top:250px;
	right:20px;
	width: 320px;
	height: auto;
	z-index: 20;
}

 
 /*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 .suka1 {
	-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;
}

/*図版*/
#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 .more {
	-webkit-animation-name: scale01;
	animation-name: scale01;
	-webkit-animation-duration: 9s;
	animation-duration: 9s;
 	-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;
	overflow:hidden;
	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/03/arrw2.png) no-repeat;
}

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


#cut02 .more {
	position: absolute;
	left: 750px;
	top: 72px;
	width: 135px;
	height: 136px;
	background: url(../images/more.png) no-repeat 0 0;
	cursor: pointer;
}
#cut02 #box02 {
	position:absolute;
	top:117px;
	right:20px;
	width: 320px;
	height: auto;
	z-index: 20;
}
#cut02 .stage {
	position: relative;
	z-index: 2;
	margin-left:114px;
	width: 600px;
	height: 340px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut02 .txt {
	position: absolute;
	top: 360px;
	left: 114px;
	z-index: 3;
	width: 608px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
}
#cut02 .txt p {
	padding: 10px 15px;
}

#cut02 .suka2 {
	position: absolute ;
	left: 759px;
	top: 373px;
	width: 117px;
	height: 112px;
	background-image: url(../images/03/suka2.png);
	background-repeat: no-repeat;
}
#cut02 .homura1 {
	position: absolute ;
	left: 855px;
	top: 313px;
	width: 131px;
	height: 172px;
	background-image: url(../images/03/homura1.png);
	background-repeat: no-repeat;
}
#cut02 .suka2s {
	position: absolute ;
	left: 799px;
	top: 467px;
	width: 72px;
	height: 24px;
	background-image: url(../images/03/suka2shadow.png);
	background-repeat: no-repeat;
}
#cut02 .homura1s {
	position: absolute ;
	left: 883px;
	top: 465px;
	width: 72px;
	height: 25px;
	background-image: url(../images/03/homura1shadow.png);
	background-repeat: no-repeat;
}
#cut02 .grass2 {
	background-image: url(../images/03/grass2.png);
	background-repeat: no-repeat;
	position: absolute ;
	left: 726px;
	top: 470px;
	width: 232px;
	height: 54px;
}

/*--------------------------------------------------------------------------------
 #cut03
--------------------------------------------------------------------------------*/
#cut03 {
	position: relative;
	margin:0 auto;
	overflow: hidden;
	max-width: 1280px;
	min-width: 1024px;
	height: 655px;
}
#cut03 .arrow {
	position: absolute;
	left: 275px;
	top: 348px;
	width: 245px;
	height: 306px;
	background: url(../images/03/arrw1.png) no-repeat;
}
#cut03 .doc {
	position:absolute;
	top:43px;
	left:-130px;
	width: 338px;
	height: 203px;
	background: url(../images/03/dr_clean2.png) no-repeat 0 0;
}
#cut03 .suka3 {
	position: absolute;
	left: 826px;
	top: 441px;
	width: 192px;
	height: 119px;	background: url(../images/03/suka3.png) no-repeat 0 0;
}
#cut03 .bg {
	position: absolute ;
	left: 12px;
	top: 302px;
	width: 194px;
	height: 113px;	background: url(../images/03/grass3.png) no-repeat 0 0;
}
#cut03 .stage {
	position: relative;
	z-index: 2;
	margin-left:235px;
	width: 600px;
	height: 340px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut03 .txt {
	position: absolute;
	top: 360px;
	left: 235px;
	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;
}


/*--------------------------------------------------------------------------------
 #cut04
--------------------------------------------------------------------------------*/
#cut04 {
	position: relative;
	margin:0 auto;
	max-width: 1280px;
	min-width: 1024px;
	height: 873px;
	overflow: hidden;
}
#cut04 .stage1 {
	position: absolute ;
	left: 40px;
	top: 3px;
	width: 533px;
	height: 316px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
	z-index: 2;
}
#cut04 .txt1 {
	position: absolute ;
	left: 40px;
	top: 336px;
	width: 393px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
}

#cut04 .stage2 {
	position: absolute ;
	left: 450px;
	top: 257px;
	width: 533px;
	height: 316px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
	z-index: 1;
	overflow: visible;
}
#cut04 .stage2 canvas {
	margin: -96px 0 0 20px;
}
#cut04 .txt2 {
	position: absolute ;
	left: 450px;
	top: 590px;
	width: 541px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
	z-index: 2;
}

#cut04 .arrow {
	position: absolute ;
	left: 420px;
	top: 569px;
	width: 235px;
	height: 304px;
	background-image: url(../images/03/arrw4.png);
	background-repeat: no-repeat;
}
#cut04 p {
	padding: 10px 15px;
}
#cut04 .suka4 {
	position: absolute ;
	left: 51px;
	top: 565px;
	width: 165px;
	height: 106px;
	background-image:url(../images/03/suka4.png);
	background-repeat: no-repeat;
}
#cut04 .homura2 {
	position: absolute ;
	left: 224px;
	top: 444px;
	width: 160px;
	height: 229px;
	background-image: url(../images/03/homura2.png);
	background-repeat: no-repeat;
}


/*--------------------------------------------------------------------------------
 #cut05
--------------------------------------------------------------------------------*/
#cut05 {
	position: relative;
	overflow:hidden;
	margin:0 auto;
	width: 1024px;
	height:592px;
}
#cut05 .stage {
	position: relative;
	margin-top: 3px;
	margin-left: 113px;
	width: 600px;
	height: 340px;	
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
	z-index: 2;
}
#cut05 .txt {
	position: absolute;
	top: 360px;
	left: 113px;
	z-index: 3;
	width: 608px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
	z-index: 2;
}
#cut05 .txt p {
	padding: 10px 15px;
}
#cut05 .lng {
	text-align: center;
	padding-top: 25px;
}
#cut05 .photo1 {
	text-align: center;
	padding-top: 10px;
}
#cut05 .arrw5 {
	background-image: url(../images/03/arrw5.png);
	background-repeat: no-repeat;
	position: absolute ;
	left: 406px;
	top: 332px;
	width: 213px;
	height: 261px;
}

/*--------------------------------------------------------------------------------
 #cut06
--------------------------------------------------------------------------------*/
#cut06 {
	position: relative;
	overflow:hidden;
	margin:0 auto;
	width: 1024px;
	height:614px;
}
#cut06 .stage {
	position: relative;
	margin-top: 3px;
	margin-left: 339px;
	width: 600px;
	height: 340px;	
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut06 .txt {
	position: absolute;
	top: 360px;
	left: 339px;
	z-index: 3;
	width: 608px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
}
#cut06 .txt p {
	padding: 10px 15px;
}
#cut06 .lng {
	text-align: center;
	padding-top: 25px;
}
#cut06 .photo1 {
	text-align: center;
	padding-top: 10px;
}
#cut06 .grass4 {
	position: absolute ;
	left: 128px;
	top: 359px;
	width: 156px;
	height: 39px;
	background-image: url(../images/03/grass4.png);
	background-repeat: no-repeat;
}

#cut06 .homura3 {
	position: absolute ;
	left: 178px;
	top: 163px;
	width: 111px;
	height: 180px;
	background-image: url(../images/03/homura3.png);
	background-repeat: no-repeat;
}

#cut06 .suka5 	{
	position: absolute ;
	left: 59px;
	top: 249px;
	width: 151px;
	height: 95px;
	background-image: url(../images/03/suka5.png);
	background-repeat: no-repeat;
}