@charset "UTF-8";

/*　2014年版を改訂　（2019.02.12）　*/
/* 「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;
}

.stage div{
	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size : 18px;
	color : #0077B7;
	display:block;
	font-weight:bold;
}

/*--------------------------------------------------------------------------------
 #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/07/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/07/dr_clean.png) no-repeat 0 0;
}
#cut01 .homura {
	position:absolute;
	left : 858px;
	top : 194px;
	width : 115px;
	height : 222px;
	background: url(../images/07/cut01_homura.png) no-repeat 0 0;
}

#cut01 .bg01 {
	position:absolute;
	left: 54px;
	top: 333px;
	width: 121px;
	height: 257px;
	background: url(../images/07/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 .stage div{
	display:block;
}
#cut01 .stage .photo01 {
	position: absolute;
	left : 32px;
	top : 81px;
	width : 250px;
	text-align:left;
}
#cut01 .stage .photo02 {
	position: absolute;
	left : 321px;
	top : 20px;
	width : 254px;
	text-align:right;
}

#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;*/
}

 
 /*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 .homura {
	-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 .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: 100px;
	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: 5s;
	animation-duration: 5s;
 	-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/07/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:118px;
	width: 600px;
	height: 340px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}

#cut02 .stage .photo01 {
	position: absolute;
	left : 104px;
	top : 23px;
	width : 400px;
	text-align:right;
}
#cut02 .txt {
	position: absolute;
	top: 360px;
	left: 118px;
	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 .homura {
	position: absolute ;
	left : 742px;
	top : 117px;
	width : 155px;
	height : 228px;
	background: url(../images/07/cut02_homura.png) no-repeat 0 0;
}


/*--------------------------------------------------------------------------------
 #cut03
--------------------------------------------------------------------------------*/
#cut03 {
	position: relative;
	margin:0 auto;
	width: 1024px;
	height: 655px;
}
#cut03 .arrow {
	position: absolute;
	left: 275px;
	top: 348px;
	width: 245px;
/* 	height: 306px; */
	background: url(../images/07/arrw1.png) no-repeat;
}

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

#cut03 .doc {
	position:absolute;
	top:43px;
	left:-130px;
	width: 338px;
	height: 203px;
	background: url(../images/07/dr_clean2.png) no-repeat 0 0;
}
#cut03 .grass {
	background-image: url(../images/07/cut03_kusa.png);
	background-repeat: no-repeat;
	position: absolute ;
	left : 12px;
	top : 302px;
	width : 196px;
	height : 115px;
}
#cut03 .stage {
	position: relative;
	z-index: 2;
	margin-left:230px;
	width: 600px;
	height: 340px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut03 .stage .photo01 {
	position: absolute;
	left : 104px;
	top : 36px;
	width : 400px;
	height : 276px;
}
#cut03 .txt {
	position: absolute;
	top: 360px;
	left: 230px;
	z-index: 3;
	width: 608px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
	text-align:center;
}
#cut03 .txt p {
	padding: 10px 15px;
}


/*--------------------------------------------------------------------------------
 #cut04
--------------------------------------------------------------------------------*/
#cut04 {
	position: relative;
	overflow:hidden;
	margin:0 auto;
	max-width: 1280px;
	min-width: 1024px;
	height:775px;
}
#cut04 .arrow {
	position: absolute;
	left: 368px;
	top: 316px;
	width: 235px;
/* 	height: 459px; */
	background: url(../images/07/arrw4.png) no-repeat;
}

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

#cut04 .stage {
	position: relative;
	z-index: 2;
	margin-left:40px;
	width: 600px;
	height: 340px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut04 .stage .photo01 {
	position: absolute;
	left : 104px;
	top : 20px;
	width : 400px;
	text-align:right;
}
#cut04 .txt {
	position: absolute;
	top: 360px;
	left: 40px;
	z-index: 3;
	width: 608px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
}
#cut04 .txt p {
	padding: 10px 30px;
	text-align: left;
}
#cut04 .homura {
	position: absolute ;
	left : 790px;
	top : 128px;
	width : 145px;
	height : 218px;
	background: url(../images/07/cut04_homura.png) no-repeat 0 0;
}
#cut04 .grass {
	background-image: url(../images/07/cut04_kusa.png);
	background-repeat: no-repeat;
	position: absolute ;
	left : 696px;
	top : 267px;
	width : 189px;
	height : 139px;
}


/*--------------------------------------------------------------------------------
 #cut05
--------------------------------------------------------------------------------*/
#cut05 {
	position: relative;
	margin:0 auto;
	width: 1024px;
	height: 963px;
}
#cut05 .arrow {
	position: absolute;
	left: 387px;
	top: 548px;
	width: 243px;
/* 	height: 402px; */
	background: url(../images/07/arrw5.png) no-repeat;
}

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

#cut05 .homura {
	position: absolute ;
	left : 139px;
	top : 136px;
	width : 126px;
	height : 217px;
	background: url(../images/07/cut05_homura.png) no-repeat 0 0;
}
#cut05 .grass {
	background-image: url(../images/07/cut05_kusa.png);
	background-repeat: no-repeat;
	position: absolute ;
	left : 77px;
	top : 392px;
	width : 152px;
	height : 77px;
}
#cut05 .stage {
	position: relative;
	z-index: 2;
	left: 335px;
	top: 10px;
	width: 599px;
	height: 541px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut05 .stage .photo01 {
	width : 497px;
	height : auto;
	margin: 0 auto;
	padding-top: 12px;
	text-align:right;
}
#cut05 .txt {
	position: absolute;
	left: 335px;
	top: 567px;
	z-index: 3;
	width: 608px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
	text-align:center;
}
#cut05 .txt p {
	padding: 10px 30px;
	text-align:left;
}

/*--------------------------------------------------------------------------------
 #cut06
--------------------------------------------------------------------------------*/
#cut06 {
	position: relative;
	margin:0 auto;
	overflow: hidden;
	min-width: 1024px;
	max-width: 1280px;
	height: 644px;
}
#cut06 .arrow {
	position: absolute;
	left: 405px;
	top: 262px;
	width: 235px;
/* 	height: 375px; */
	background: url(../images/07/arrw6.png) no-repeat;
}

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

#cut06 .homura {
	position: absolute ;
	left: 751px;
	top: 131px;
	width: 266px;
	height: 224px;
	background: url(../images/07/cut06_homura.png) no-repeat 0 0;
}
#cut06 .grass {
	background-image: url(../images/07/cut06_kusa.png);
	background-repeat: no-repeat;
	position: absolute ;
	left: 764px;
	top: 371px;
	width: 159px;
	height: 51px;
}
#cut06 .stage {
	position: relative;
	z-index: 2;
	left: 114px;
	top: 8px;
	width: 599px;
	height: 289px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut06 .stage .photo01 {
	width : 250px;
	height : auto;
	margin: 0 auto;
	padding-top: 30px;
	text-align:right;
}
#cut06 .txt {
	position: absolute;
	left: 114px;
	top: 315px;
	z-index: 3;
	width: 608px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
	text-align:center;
}
#cut06 .txt p {
	padding: 10px 30px;
	text-align:left;
}




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

#cut07 .kuma {
	position: absolute ;
	left: 83px;
	top: 175px;
	width: 193px;
	height: 273px;
	background: url(../images/07/cut07_kuma.png) no-repeat 0 0;
}
#cut07 .grass {
	background-image: url(../images/07/cut07_kusa.png);
	background-repeat: no-repeat;
	position: absolute ;
	left: 55px;
	top: 389px;
	width: 246px;
	height: 78px;
}
#cut07 .stage {
	position: relative;
	z-index: 2;
	margin-left:335px;
	width: 600px;
	height: 340px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut07 .stage .photo01 {
	position: absolute;
	left : 168px;
	top : 20px;
	width : 271px;
	height : 276px;
	text-align:right;
}
#cut07 .txt {
	position: absolute;
	top: 360px;
	left: 335px;
	z-index: 3;
	width: 608px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
	text-align:center;
}
#cut07 .txt p {
	padding: 10px 30px;
	text-align:left;
}