@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/02/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/02/cut01_doc.png) no-repeat 0 0;
}
#cut01 .honoka1 {
	position:absolute;
	left : 843px;
	top : 334px;
	width: 142px;
	height: 139px;
	background: url(../images/02/honoka1.png) no-repeat 0 0;
}

#cut01 .bg01 {
	position:absolute;
	top:294px;
	left:89px;
	width: 121px;
	height: 257px;
	background: url(../images/02/grass1.png) no-repeat 0 0;
}
#cut01 .title {
	margin-left:32px;
	width: 852px;
	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;
}

 
 /*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 .honoka1 {
	-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 6.5s;
	}
}


#cut02 .arrow {
	position: absolute;
	top: 328px;
	left: 315px;
	width: 213px;
/* 	height: 261px; */
	background: url(../images/02/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;
	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 {
	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: 655px;
}
#cut03 .arrow {
	position: absolute;
	left: 275px;
	top: 348px;
	width: 245px;
/* 	height: 303px; */
	background: url(../images/02/arrow3.png) no-repeat;
}

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



#cut03 .doc {
	position:absolute;
	top:43px;
	left:-130px;
	width: 338px;
	height: 203px;
	background: url(../images/02/dr_clean2.png) no-repeat 0 0;
}
#cut03 .honoka2 {
	position:absolute;
left : 856px;
	top: 149px;
	width: 120px;
	height: 235px;
	background: url(../images/02/honoka2.png) no-repeat 0 0;
}
#cut03 .bg {
	position: absolute ;
	left: 12px;
	top: 302px;
	width: 194px;
	height: 113px;	background: url(../images/02/cut03_bg.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: 1470px;
}
#cut04 #cut04_bg1 {
	position: absolute ;
	left: 520px;
	top: -46px;
	width: 451px;
	height: 284px;
}
.cow,
.fence {
	position : absolute ;
	left : 0px;
	top : 0px;
	width: 451px;
	height: 284px;
	background-repeat : no-repeat;
}
.cow {
	background-image : url(../images/02/cut04_bg2.png);
}

.fence {
	background-image : url(../images/02/cut04_bg1.png);
}
#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: 334px;
	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: 2;
}
#cut04 .txt2 {
	position: absolute ;
	left: 655px;
	top: 590px;
	width: 334px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
}
#cut04 .stage3 {
	position: absolute ;
	left: 56px;
	top: 553px;
	width: 533px;
	height: 315px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
	z-index: 2;
}
#cut04 .txt3 {
	position: absolute ;
	left: 56px;
	top: 886px;
	width: 334px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
}

#cut04 .stage4 {
	position: absolute ;
	left: 432px;
	top: 852px;
	width: 532px;
	height: 315px;
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
	z-index: 2;
}
#cut04 .txt4 {
	position: absolute ;
	left: 432px;
	top: 1185px;
	width: 540px;
	border-radius: 10px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.8);
	z-index: 3;
}
#cut04 .suka {
	position: absolute ;
	left: 81px;
	top: 1133px;
	width: 134px;
	height: 130px;
	background-image: url(../images/02/suka.png);
	background-repeat: no-repeat;
}
#cut04 .bg3 {
	position: absolute ;
	left: 135px;
	top: 1288px;
	width: 153px;
	height: 78px;
	background-image: url(../images/02/cut04_bg3.png);
	background-repeat: no-repeat;
}
#cut04 .more {
	position: absolute ;
	left: 273px;
	top: 1085px;
	width: 135px;
	height: 136px;
	background-image: url(../images/more.png);
	background-repeat: no-repeat;
}
#cut04 #box04 {
	position:absolute;
	top: 1015px;
	left: 50px;
	width: 320px;
	height: auto;
	z-index: 20;
}
#cut04 .arrow {
	position: absolute ;
	left: 420px;
	top: 1160px;
	width: 235px;
/* 	height: 304px; */
	background-image: url(../images/02/arrow4.png);
	background-repeat: no-repeat;
}


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


#cut04 p {
	padding: 10px 15px;
}



/*--------------------------------------------------------------------------------
 #cut05
--------------------------------------------------------------------------------*/
#cut05 {
	position: relative;
	overflow:hidden;
	margin:0 auto;
	width: 1024px;
	height:610px;
}
#cut05 .stage {
	position: relative;
	margin-top: 3px;
	margin-left: 113px;
	width: 600px;
	height: 340px;	
	border: 4px solid #f5b717;
	border-radius: 10px;
	background-color: #f4f8f4;
}
#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);
}
#cut05 .txt p {
	padding: 10px 15px;
}
#cut05 .lpg {
	position: absolute ;
/* 	left: 500px; */
left: 387px;
	top: 30px;
	width: 79px;
	height: 23px;
}
#cut05 .photo1 {
	position: absolute ;
/* 	left: 125px; */
left: 12px;
	top: 18px;
	width: 352px;
	height: 267px;
}
#cut05 .photo2 {
	position: absolute ;
/* 	left: 402px; */
left: 289px;
	top: 143px;
	width: 301px;
	height: 172px;
}
#cut05 .honoka3 {
	position: absolute ;
 	left: 755px;
	top: 217px;
	width: 154px;
	height: 151px;
	background-image: url(../images/02/honoka3.png);
	background-repeat: no-repeat;
}