@charset "UTF-8";

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


#cut01 .doc {
	position:absolute;
	top:76px;
	left:-130px;
	width: 333px;
	height: 203px;
	background: url(../images/01/cut01_doc.png) no-repeat 0 0;
}
#cut01 .boy {
	position:absolute;
	top:276px;
	right:49px;
	width: 102px;
	height: 171px;
	background: url(../images/01/cut01_boy.png) no-repeat 0 0;
}
#cut01 .bg01 {
	position:absolute;
	top:294px;
	left:89px;
	width: 140px;
	height: 297px;
	background: url(../images/01/cut01_bg01.png) no-repeat 0 0;
}
#cut01 .bg02 {
	position:absolute;
	top:619px;
	right:49px;
	z-index:10;
	width: 209px;
	height: 270px;
	background: url(../images/01/cut01_bg02.png) no-repeat 0 0;
}
#cut01 .title {
	margin-left:32px;
	width: 347px;
	height: 58px;
	padding-top: 7px;
}
#cut01 .stage {
	position: relative;
	z-index: 2;
	margin-left:249px;
	width: 600px;
	height: 340px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut01 .txt {
	position: absolute;
	top: 428px;
	left: 249px;
	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;
}

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

/*少年*/
#cut01 .boy {
	-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: 5s;
	animation-duration: 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: 8s;
	animation-duration: 8s;
 	-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: 5s;
  animation-duration: 5s;
 -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 8.2s;
	}
}

#cut02 .arrow {
	position: absolute;
	top: 328px;
	left: 315px;
	width: 213px;
/*	height: 261px;*/
	background: url(../images/01/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;
	top: 267px;
	right: 148px;
	width: 135px;
	height: 136px;
	background: url(../images/more.png) no-repeat 0 0;
	cursor: pointer;
}
#cut02 #box02 {
	position:absolute;
	top:267px;
	right:20px;
	z-index: 20;
	width: 320px;
	height: auto;
}
#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 {
	top: 360px;
	left: 114px;
	z-index: 3;
	width: 608px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
	/* height: 70px; */
	position: absolute;
}
#cut02 .txt p {
	padding: 10px 15px;
}





/*--------------------------------------------------------------------------------
 #cut03
--------------------------------------------------------------------------------*/
#cut03 {
	position: relative;
	margin:0 auto;
	width: 1024px;
	height: 679px;
}
#cut03 .arrow {
	position: absolute;
	top: 328px;
	left: 505px;
	width: 180px;
/*	height: 334px;*/
	background: url(../images/01/arrw3.png) no-repeat;
}

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

#cut03 .doc {
	position:absolute;
	top:43px;
	left:-130px;
	width: 333px;
	height: 203px;
	background: url(../images/01/cut03_doc.png) no-repeat 0 0;
}
#cut03 .boy {
	position:absolute;
	top:146px;
	right:49px;
	width: 117px;
	height: 279px;
	background: url(../images/01/cut03_boy.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;
	width: 1024px;
	height: 579px;
}
#cut04 .arrow {
	position: absolute;
	top: 345px;
	left: 430px;
	width: 242px;
/*	height: 250px;*/
	background: url(../images/01/arrw4.png) no-repeat;
}

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


#cut04 .bg01 {
	position:absolute;
	top:177px;
	left:86px;
	width: 255px;
	height: 208px;
	background: url(../images/01/cut04_bg01.png) no-repeat 0 0;
}
#cut04 .stage {
	position: relative;
	z-index: 2;
	margin-left:380px;
	width: 600px;
	height: 340px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut04 .txt {
	position: absolute;
	top: 360px;
	left: 380px;
	z-index: 3;
	width: 608px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
}
#cut04 .txt p {
	padding: 10px 15px;
}
#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 {
	position: relative;
	overflow:hidden;
	margin:0 auto;
	width: 1024px;
	height:732px;
}
#cut056 .boy {
	position:absolute;
	top:78px;
	right:0;/*79px*/
	width: 125px;
	height: 206px;
	background: url(../images/01/cut05_boy.png) no-repeat 0 0;
}
#cut056 #btn05 {
	position:absolute;
	top:100px;/*16px*/
	right:266px;
	width: 135px;
	height: 136px;
	background: url(../images/more.png) no-repeat 0 0;
	cursor:pointer;
}
#cut056 #btn06 {
	position:absolute;
	top:450px;/*527px*/
	left:284px;
	width: 135px;
	height: 136px;
	background: url(../images/more.png) no-repeat 0 0;
	cursor:pointer;
}

#box05 {
	position:absolute;
	top:10px;
	right:140px;
	z-index:20;
	height: auto;
	width: 320px;
}
#box06 {
	position:absolute;
	top:400px;
	left:100px;
	z-index:20;
	height: auto;
	width: 320px;
}

#cut05 {
	position: absolute;
	top:0;
	left:43px;
	z-index:10;
	width: 541px;
	height: 368px;
}
#cut05 .stage {
	position: relative;
	z-index: 2;
	margin-top:1em;
	width: 533px;
	height: 288px;	
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut05 .txt {
	position: absolute;
	top: 323px;
	left:0px;
	z-index: 3;
	width: 385px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
}
#cut05 .txt p {
	padding: 10px 15px;
}
#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: 287px;
  width: 159px;
  height: 173px;
	background: url(../images/01/cut05_ph1.png) no-repeat 0 0;
}



/*--------------------------------------------------------------------------------
 #cut06
--------------------------------------------------------------------------------*/
#cut06 {
	position: absolute;
	top:290px;/*301px*/
	right:36px;
	width: 541px;
	height: 368px;
}
#cut06 .stage {
	position: relative;
	z-index: 2;
	width: 533px;
	height: 288px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#cut06 .txt {
	position: absolute;
	top: 308px;
	left:0px;
	z-index: 3;
	width: 541px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
}
#cut06 .txt p {
	padding: 10px 15px;
}
#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;
}



/*--------------------------------------------------------------------------------
 #cut07
--------------------------------------------------------------------------------*/
#cut07 {
	margin-top: 39px;
	height: 516px;
	text-align:center;
}