/* CSS Document */
body {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	word-break: keep-all;
	line-break: strict;
	word-wrap: break-word;
	overflow-wrap: break-word;
	color: #181000 !important;
	margin: 0 auto;
}
/*header {
	background: #000;
	border-bottom: 1px solid #FFF;
	-webkit-background-size: 4px 4px;
	padding: 6px 10px 6px 10px;
	height: 30px;
	overflow: hidden !important;
}*/
img{
	width: 100%;
	vertical-align: bottom;
}
/*a:hover img {
	opacity: 0.7;
}*/

p {
	margin: 0 auto;
	margin-block-start: 0;
    margin-block-end: 0;
	text-align: left;
	height: auto;
}
ul {
	list-style: none;
}
.pc{
	display: block;
}
.sp{
	display: none;
}
@media (max-width: 768px) {
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	
}

#container{
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	line-height: 1.6;
	word-break: break-all;
	/*max-width: 1280px;*/
	margin: 0 auto;
}

.noon{
	background-color: #f6eae2;
	overflow: hidden;
}

#about{
	/*background-image: url("../img/top/back.png");
	background-size: cover;*/
	/*content: url("../img/top/back.png");
	width: 100%;*/
	position: relative;
	z-index: 0;
	max-width: 1280px;
	margin: 0 auto;
}

.back-img{
	/*width: 132.767%;*/
	/*width: 146.7142%;*/
	width: 144%;
	margin: 0 auto;
	display: inline-block;
	max-width: 1853px;
	position: relative;
	top: 0;
	left: -27%;
}

.contents{
	width: 100%;
	margin: 0 auto;
	max-width: 1280px;
	overflow: visible;
}


#collection .collection02-gif{
	position: absolute;
    top: 12.6%;
    right: 9.5%;
    width: 40.75%;
    z-index: 50;
}
#collection .theater{
	position: absolute;
    top: 7%;
    right: 2.15%;
    width: 52%;
    z-index: 100;
}


#collection .curtain-back{
	position: absolute;
    top: 6.02%;
    left: 11.26%;
    width: 23.1%;
    z-index: 200;
}
/*#collection .curtain-front{
	position: absolute;
    top: 5.4%;
    left: 11.8%;
    width: 23.6%;
    z-index: 300;
}*/

/*---スライダー---*/

#message_slider{
    width: 100%;
    overflow: hidden;
	display: block;
    margin: 0 auto;
	padding: 0;
	/*transform: rotate(2deg);*/
	transform: skewY(342deg);
}

#message_slider li>div{
    width: 100%;
    margin: 0 auto;
}

#message_slider li>div img{
    width: 100%;
    /*max-width: 560px;*/
    margin: 0 auto;
    /*border: 1px solid #181000;
    box-sizing: border-box;*/
}

.slick-slide{
    outline:none;
}

.slider{
  opacity: 0;
  transition: opacity .3s linear;
}
.slider.slick-initialized{
  opacity: 1;
}

.slider-posi{
	position: absolute;
    top: 9%;
    left: 11.5%;
    width: 22.2%;
    z-index: 50;
}

.curtain-back-img{
	position: absolute;
    top: 9%;
    left: 11.5%;
    width: 22.2%;
    z-index: 10;
	overflow: hidden;
	display: block;
    margin: 0 auto;
	padding: 0;
	transform: skewY(342deg);
}


#connect .connect01{
	position: absolute;
    top: 28.4%;
    left: 31%;
    width: 33%;
    z-index: 100;
}
#connect .connect02{
	position: absolute;
    top: 33.1%;
    left: 28.4%;
    width: 13%;
    z-index: 100;
}
#connect .connect03 p:first-child{
	position: absolute;
    top: 46.5%;
    left: 28%;
    width: 11.173%;
    z-index: 100;
}
#connect .connect03 p:nth-child(2){
	position: absolute;
    top: 50.3%;
    left: 35.3%;
    width: 3.907%;
    z-index: 100;
}


#connect .connect04{
	position: absolute;
    top: 46%;
    left: 41.8%;
    width: 10.99%;
    z-index: 100;
}
#connect .connect05{
	position: absolute;
    top: 39.7%;
    left: 17.4%;
    width: 9.8%;
    z-index: 100;
}
#connect .connect06{
	position: absolute;
	top: 44.3%;
    left: 7.1%;
    width: 9.5%;
    z-index: 100;
}
#connect .connect07{
	position: absolute;
    top: 50%;
    left: 7.3%;
    width: 22.2%;
    z-index: 100;
}
#connect .connect08{
	position: absolute;
    top: 44.8%;
    left: 57.5%;
    width: 12.9389%;
    z-index: 100;
}
#connect .connect09{
	position: absolute;
    top: 41.8%;
    left: 72%;
    width: 10.92%;
    z-index: 100;
}
#connect .connect_txt{
	position: absolute;
    top: 44.8%;
    left: 30%;
    width: 9%;
    z-index: 100;
}


#character .door p{
	position: absolute;
    top: 30.8%;
    left: 58.2%;
    width: 28%;
    z-index: 100;
}



#who .who01{
	position: absolute;
    top: 34.5%;
    left: 0.3%;
    width: 5.392%;
    z-index: 100;
}
#who .who02 .who02-about{
	position: absolute;
    top: 22.8%;
    left: 3.2%;
    width: 10%;
    z-index: 100;
}
#who .who02 .who02-about-human{
	position: absolute;
    top: 21.1%;
    left: 2%;
    width: 20.157%;
    z-index: 100;
}
#who .who02 .who02-whoiscm{
	position: absolute;
    top: 21.1%;
    left: 2%;
    width: 10.157%;
    z-index: 300;
}

#who .who03{
	position: absolute;
    top: 6.4%;
    left: 0.8%;
    width: 10.1%;
    z-index: 100;
}

#map .map01 p:first-child{
	position: absolute;
    top: 57%;
    right: -15%;
    width: 52.5%;
    z-index: 100;
}
#map .map01 p:nth-child(2){
	position: absolute;
    top: 61%;
    right: 5%;
    width: 12.892%;
    z-index: 200;
}


#map .map02 p:first-child{
	position: absolute;
    top: 39%;
    left: -3%;
    width: 7.8%;
    z-index: 100;
}
#map .map02 p:nth-child(2){
	position: absolute;
    top: 42%;
    left: -1.9%;
    width: 5.4%;
    z-index: 100;
}

#art .art_garage{
	position: absolute;
    bottom: 6.4%;
    left: -4.5%;
    width: 31%;
    z-index: 100;
}
#art .art_light{
	position: absolute;
    bottom: 0.4%;
    left: -26.8%;
    width: 57.11%;
    z-index: 100;
}
#art .art_roof{
	position: absolute;
    bottom: 22.5%;
    left: -1.8%;
    width: 28%;
    z-index: 100;
}

#material .tree{
	position: absolute;
    bottom: 0;
    right: -15%;
    width: 35.5%;
    z-index: 100;
}
#material .duck{
	position: absolute;
    bottom: 6%;
    right: 21%;
    width: 10.390625%;
    z-index: 100;
}
#material .gramophone{
	position: absolute;
    top: 22.9%;
    right: 44.9%;
    width: 6.4%;
    z-index: 100;
}
#material .bridge .bridge_human{
	position: absolute;
    top: 38.4%;
    right: 38.4%;
    width: 11.6%;
    z-index: 100;
}
#material .bridge .bridge_butterfly{
	position: absolute;
    top: 37.3%;
    right: 43.4%;
    width: 3.2%;
    z-index: 100;
}


#exit .exit01{
	position: absolute;
    top: 34.8%;
    right: 2.85%;
    width: 4.2%;
    z-index: 100;
}
#exit .exit02{
	position: absolute;
    top: 31.75%;
    right: 2.3%;
    width: 4.599%;
    z-index: 100;
}
#exit .rump{
	position: absolute;
    top: 36%;
    right: 9.5%;
    width: 6.329%;
    z-index: 100;
}


#contact .statue{
    position: absolute;
    bottom: 0;
    left: 25.5%;
    width: 12.7%;
    z-index: 100;
}


#gif .eye{
	position: absolute;
    top: 12.6%;
    right: 28.2%;
    width: 3.6%;
    z-index: 100;
}


/*//レオパルドがまとめられたコード*/
#gif .leopard p:first-child{
	position: absolute;
    top: 5.1%;
    right: -4.4%;
    width: 38%;
    z-index: 100;
}
/*　//レオパルドが細分化されたコード

#gif .leopard p:first-child{
	position: absolute;
    top: 5.5%;
    right: -3.3%;
    width: 38.516%;
    z-index: 100;
}
#gif .leopard p:nth-child(2){
	position: absolute;
    top: 6.95%;
    right: 15.25%;
    width: 6.798%;
    z-index: 100;
}
#gif .leopard p:nth-child(3){
	position: absolute;
    top: 13.4%;
    right: -0.5%;
    width: 10.001%;
    z-index: 100;
}*/
#gif .fishing{
	position: absolute;
    top: 50.5%;
    right: 11.8%;
    width: 19.532%;
    z-index: 100;
}
#gif .stairs-down{
	position: absolute;
    top: 39.7%;
    right: -17.2%;
    width: 32.814%;
    z-index: 90;
}
#gif .chair-human{
	position: absolute;
    top: 68%;
    right: 23.5%;
    width: 14.298%;
    z-index: 110;
}
#gif .foam{
	position: absolute;
    top: 61%;
    left: 22.5%;
    width: 5.5%;
    z-index: 110;
}


#top-back .back_movingwalk{
	position: absolute;
    bottom: 0;
    left: 31.1%;
    width: 37.015625%;
    z-index: 100;
}
#top-back .movingwalkroad{
	position: absolute;
    bottom: 0;
    left: 38.1%;
    width: 26.485%;
    z-index: 100;
}
#top-back .movingwalk_person{
	position: absolute;
    bottom: -12.2%;
    left: 31%;
    width: 37.267%;
    z-index: 100;
}

#sns .sns_box{
	position: absolute;
    bottom: 11.5%;
    left: 56.2%;
    width: 22.2%;
    z-index: 100;
}
#sns .sns_twitter{
	position: absolute;
    bottom: 19.8%;
    left: 60.5%;
    width: 2.2%;
    z-index: 100;
}
#sns .sns_instagram{
	position: absolute;
    bottom: 21.5%;
    left: 64.5%;
    width: 2.2%;
    z-index: 100;
}
#sns .sns_youtube{
	position: absolute;
    bottom: 19%;
    left: 61.3%;
    width: 2%;
    z-index: 100;
}
#sns .sns_facebook{
	position: absolute;
    bottom: 18.2%;
    left: 65.3%;
    width: 2%;
    z-index: 100;
}


#top-message .pc-message p{
	position: absolute;
	top: 110px;
	left: 50%;
	transform: translate(-50%);
	font-size: 14px;
	color: #000;
	z-index: 1000;
	text-align: center;
	width: 700px;
}
#top-message .pc-message .message-anime02{
	top: 105px;
	font-size: 12px;
}

#top-message .pc-message .message-anime01{
	animation-name: message-anime01;
	animation-delay: 1.5s;
	animation-duration: 8s;
	animation-fill-mode: forwards;
	opacity:0;
}

@keyframes message-anime01{
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

#top-message .pc-message .message-anime02{
	animation-name: message-anime02;
	animation-delay: 9.5s;
	animation-duration: 8s;
	animation-fill-mode: forwards;
	opacity:0;
}

@keyframes message-anime02{
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 1; }
}

.noon.night #top-message .pc-message p{
	color: #fff;
}

@media (max-width: 768px) {
	.sp-message{
		position: absolute;
		top: 43px;
		left: 50%;
		transform: translate(-50%,-50%);
		font-size: calc(0.625rem + ((1vw - 3.75px) * 2.6667));
		width: 65%;
		overflow: hidden;
	}
	.sp-message p{
		text-align: center;
	}
	.sp-message .message-anime01{
		position: absolute;
		top: 50%;
		animation-name: message-anime-sp01;
		animation-duration: 10s;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
		opacity: 1;
		width: 180%;
	}
	
}

	@keyframes message-anime-sp01{
	  0% { transform: translate(60%,-50%)}
	  100% { transform: translate(-100%,-50%) }
	}
	/*@keyframes message-anime-sp01{
	  0% { opacity: 0; }
	  25% { opacity: 1; }
	  75% { opacity: 1; }
	  100% { opacity: 0; }
	}*/


	
	.sp-message .message-anime02{
		animation-name: message-anime-sp02;
		animation-delay: 9.5s;
		animation-duration: 10s;
		animation-fill-mode: forwards;
		opacity: 0;
	}

	@keyframes message-anime-sp02{
	  0% { opacity: 0; }
	  25% { opacity: 1; }
	  75% { opacity: 1; }
	  100% { opacity: 1; }
	}

/*#collection .theater{
	position: absolute;
    top: 3.9%;
    right: 0%;
    width: 82.34575%;
    z-index: 100;
	max-width: 1054px;
}
#collection .curtain{
	position: absolute;
    top: 5.9%;
    left: 13%;
    width: 23.515625%;
    z-index: 100;
}


#connect .connect01{
	position: absolute;
    top: 28.9%;
    left: 31%;
    width: 39.765625%;
    z-index: 100;
}
#connect .connect02{
	position: absolute;
    top: 35%;
    left: 30.3%;
    width: 13.28125%;
    z-index: 100;
}
#connect .connect03{
	position: absolute;
    top: 48.5%;
    left: 29.7%;
    width: 11.93%;
    z-index: 100;
}
#connect .connect04{
	position: absolute;
    top: 49%;
    left: 43.3%;
    width: 10.99%;
    z-index: 100;
}
#connect .connect05{
	position: absolute;
    top: 40.9%;
    left: 18.4%;
    width: 9.67%;
    z-index: 100;
}
#connect .connect06{
	position: absolute;
    top: 45%;
    left: 7.3%;
    width: 10.211%;
    z-index: 100;
}
#connect .connect07{
	position: absolute;
    top: 52%;
    left: 8.3%;
    width: 22.838%;
    z-index: 100;
}
#connect .connect08{
	position: absolute;
    top: 47.2%;
    left: 59%;
    width: 12.9389%;
    z-index: 100;
}
#connect .connect09{
	position: absolute;
    top: 44.8%;
    left: 74%;
    width: 10.92%;
    z-index: 100;
}
#connect .connect_txt{
	position: absolute;
    top: 47%;
    left: 31.4%;
    width: 9.198%;
    z-index: 100;
}



#who .who01{
	position: absolute;
    top: 36.3%;
    left: 1.3%;
    width: 6.392%;
    z-index: 100;
}
#who .who02{
	position: absolute;
    top: 22.8%;
    left: 1.4%;
    width: 22.448%;
    z-index: 100;
}
#who .who03{
	position: absolute;
    top: 6.7%;
    left: 1.8%;
    width: 9.977%;
    z-index: 100;
}

#map .map01{
	position: absolute;
    top: 60.2%;
    right: 0;
    width: 38.828125%;
    z-index: 100;
}
#map .map01 .map-pin{
	position: absolute;
    top: 20.2%;
    right: 0;
    width: 33.125%;
    z-index: 100;
}


#map .map02{
	position: absolute;
    top: 40.8%;
    left: 0;
    width: 5.768%;
    z-index: 100;
}



#art .art_gallery{
	position: absolute;
    bottom: 0;
    left: 0;
    width: 27.34375%;
    z-index: 100;
}

#material .tree{
	position: absolute;
    bottom: 0;
    right: 0;
    width: 22.8125%;
    z-index: 100;
}
#material .duck{
	position: absolute;
    bottom: 3%;
    right: 21%;
    width: 10.390625%;
    z-index: 100;
}

#exit .exit01{
	position: absolute;
    top: 35%;
    right: 0%;
    width: 7.639%;
    z-index: 100;
}
#exit .exit02{
	position: absolute;
    top: 33.4%;
    right: 1%;
    width: 4.599%;
    z-index: 100;
}



#gif .eye{
	position: absolute;
    top: 13.35%;
    right: 26.8%;
    width: 3.976%;
    z-index: 100;
}
#gif .leopard{
	position: absolute;
    top: 6.2%;
    right: 0;
    width: 32.5%;
    z-index: 100;
}




#top-back{
	position: absolute;
    top: 80%;
    left: 34.7%;
    width: 31.015625%;
    z-index: 100;
}*/



/*---clock---*/
/*body{
	display:inline-block;
}

body.night::after{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	
    background-color: gray;
    opacity: 0.5;
    display:block
}*/


/*.back-img{
	display:inline-block;
}

.back-img.night::after{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: gray;
    opacity: 0.5;
    display:block
}
*/

body {
    background-color: gray;
}

.back-img.night{
	opacity: 0.5;
}


@media (max-width: 768px) {
	#about{
		/*background-image: url("../img/top/back.png");
		background-size: cover;*/
		/*content: url("../img/top/back.png");
		width: 100%;*/
		position: relative;
		z-index: 0;
		max-width: 100%;
		width: 100%;
		margin: -9% auto 0;
	}

	.back-img{
		width: 100%;
		margin: 0 auto;
		display: inline-block;
		max-width: 1853px;
		position: relative;
		top: 0;
		left: 0;
	}

	.contents{
		width: 100%;
		margin: 0 auto;
		max-width: 1280px;
		overflow: visible;
	}

	#collection .collection02-gif{
		position: absolute;
		top: 23.2%;
		right: -2%;
		width: 95%;
		z-index: 50;
	}

	#collection .theater{
		position: absolute;
		top: 17.5%;
		right: 0;
		width: 100%;
		z-index: 100;
	}
	/*#collection .curtain-back{
		position: absolute;
		top: 5.9%;
		left: 33.6%;
		width: 65.734%;
		z-index: 100;
	}*/
	.curtain-back-img{
		position: absolute;
		top: 7.9%;
		left: 33.8%;
		width: 58.7%;
		z-index: 10;
	}

	#collection .curtain-back{
		position: absolute;
		top: 6.2%;
		left: 33.7%;
		width: 61.6%;
		z-index: 100;
	}
	#collection .slider-posi{
		position: absolute;
		top: 7.9%;
		left: 33.8%;
		width: 58.7%;
		z-index: 50;
	}


	#connect .connect02{
		position: absolute;
		top: 36.9%;
		left: 59.5%;
		width: 37.334%;
		z-index: 100;
	}

	#connect .connect03 p:first-child{
		position: absolute;
		top: 62%;
		left: 11.5%;
		width: 42.4%;
		z-index: 100;
	}
	#connect .connect03 p:nth-child(2){
		position: absolute;
		top: 65.1%;
		left: 39.4%;
		width: 14.3%;
		z-index: 100;
	}

	#connect .connect04{
		position: absolute;
		top: 63.2%;
    	left: 60.8%;
		width: 38.667%;
		z-index: 200;
	}
	#connect .connect05{
		position: absolute;
		top: 54.3%;
		left: 21%;
		width: 38%;
		z-index: 100;
	}
	#connect .connect08{
		position: absolute;
		top: 40.6%;
		left: 0;
		width: 44.667%;
		z-index: 100;
	}

	/*#connect .connect09{
		position: absolute;
		top: 41.8%;
		left: 72%;
		width: 10.92%;
		z-index: 100;
	}*/
	#connect .connect09{
		position: absolute;
		top: 47.9%;
		left: 25%;
		width: 75.067%;
		z-index: 100;
	}

	#connect .connect_txt{
		position: absolute;
		top: 53.2%;
    	left: 27%;
		width: 30.134%;
		z-index: 100;
	}


	#character .door p{
		position: absolute;
		top: 32.6%;
		left: auto;
		right: -6%;
		width: 78.595%;
		z-index: 200;
	}

	#who .who01{
		position: absolute;
		top: 38.4%;
		left: 0;
		width: 11.392%;
		z-index: 100;
	}
	#who .who02 .who02-about{
		position: absolute;
		top: 31.9%;
		left: 4.2%;
		width: 24.8%;
		z-index: 100;
	}
	#who .who02 .who02-about-human{
		position: absolute;
		top: 31%;
    	left: 1.7%;
		width: 49.157%;
		z-index: 100;
	}
	#who .who02 .who02-whoiscm{
		position: absolute;
		top: 30.95%;
		left: 1.4%;
		width: 25.157%;
		z-index: 100;
	}

	#who .who03{
		position: absolute;
		top: 6.9%;
		left: 6.0%;
		width: 21.5%;
		z-index: 100;
	}

	#map .map01 p:first-child{
		position: absolute;
		top: 74.9%;
		right: 0%;
		width: 90.934%;
		z-index: 100;
	}
	#map .map01 p:nth-child(2){
		position: absolute;
		top: 76.8%;
		right: 15.5%;
		width: 23.892%;
		z-index: 200;
	}


	#map .map02 p:first-child{
		position: absolute;
		top: 53.5%;
		left: 0;
		width: 12.267%;
		z-index: 100;
	}
	#map .map02 p:nth-child(2){
		position: absolute;
		top: 55%;
		left: -1%;
		width: 11.079%;
		z-index: 100;
	}


	/*#art .art_gallery{
		position: absolute;
		bottom: 4.8%;
		left: -15%;
		width: 60%;
		z-index: 100;
	}*/
	#art .art_garage{
		position: absolute;
		bottom: 6.8%;
		left: 0;
		width: 42.8%;
		z-index: 100;
	}
	#art .art_light{
		position: absolute;
		bottom: 3.4%;
		left: -45.8%;
		width: 97.467%;
		z-index: 100;
	}
	#art .art_roof{
		position: absolute;
		bottom: 12.22%;
		left: 0;
		width: 41.334%;
		z-index: 100;
	}

	#material .tree{
		position: absolute;
		bottom: 10.2%;
		right: 0%;
		width: 34%;
		z-index: 100;
	}
	#material .duck{
		position: absolute;
		bottom: 5%;
		right: -3%;
		width: 15%;
		z-index: 100;
	}
	#material .gramophone{
		position: absolute;
		top: 27.4%;
		right: 80.7%;
		width: 16.934%;
		z-index: 100;
	}
	#material .bridge .bridge_human{
		position: absolute;
		top: 50.2%;
		right: 78.1%;
		width: 18.134%;
		z-index: 100;
	}
	#material .bridge .bridge_butterfly{
		position: absolute;
		top: 49.5%;
		right: 85.1%;
		width: 8%;
		z-index: 100;
	}
	
	#exit .exit01{
		position: absolute;
		top: 55.5%;
		right: 5.6%;
		width: 7.9%;
		z-index: 100;
	}
	#exit .exit01-sp{
		position: absolute;
		top: 55.5%;
		right: 5.6%;
		width: 7.9%;
		z-index: 1000;
	}

	#exit .exit02{
		position: absolute;
		top: 53.85%;
		right: 4.2%;
		width: 9.9%;
		z-index: 100;
	}
	#exit .rump{
		position: absolute;
		top: 54.94%;
		right: 20.5%;
		width: 10.8%;
		z-index: 100;
	}


	#gif .eye{
		position: absolute;
		top: 22.35%;
		right: 43%;
		width: 9%;
		z-index: 100;
	}
	
	/*//レオパルドがまとめられたコード*/
	#gif .leopard p:first-child{
		position: absolute;
		top: 18.7%;
		right: -8%;
		width: 82%;
		z-index: 100;
	}
	
	/*　//レオパルドが細分化されたコード
	#gif .leopard p:first-child{
		position: absolute;
		top: 18.6%;
		right: 0;
		width: 79.6%;
		z-index: 100;
	}
	#gif .leopard p:nth-child(2){
		position: absolute;
		top: 19.1%;
		right: 35%;
		width: 14.798%;
		z-index: 100;
	}
	#gif .leopard p:nth-child(3){
		position: absolute;
		top: 22.3%;
		right: -2.5%;
		width: 18%;
		z-index: 100;
	}*/
	#gif .fishing{
		position: absolute;
		top: 72.1%;
		right: 6.2%;
		width: 33.2%;
		z-index: 100;
	}
	#gif .stairs-down{
		position: absolute;
		top: 56.3%;
		right: -35.2%;
		width: 68.814%;
		z-index: 110;
	}
	#gif .chair-human{
		position: absolute;
		top: 81.1%;
		left: 14%;
		right: auto;
		width: 29.298%;
		z-index: 110;
	}
	#gif .foam{
		position: absolute;
		top: 73.2%;
		left: 7.5%;
		width: 9.5%;
		z-index: 110;
	}


	#top-back .back_movingwalk{
		position: absolute;
		bottom: 2%;
		left: auto;
		right: 0;
		width: 45.6%;
		z-index: 100;
	}
	#top-back .movingwalkroad{
		position: absolute;
		bottom: 2.1%;
		left: auto;
		right: 1.7%;
		width: 34.485%;
		z-index: 100;
	}
	#top-back .movingwalk_person{
		position: absolute;
		bottom: -1.9%;
		left: auto;
		right: -4%;
		width: 51.267%;
		z-index: 100;
		overflow: hidden;
	}
	
	#contact .statue{
		position: absolute;
		bottom: 2%;
		left: 40%;
		width: 21.3%;
		z-index: 100;
	}

	#sns .sns_box{
		position: absolute;
		bottom: 8.5%;
		left: 58.2%;
		width: 38.4%;
		z-index: 100;
	}
	#sns .sns_twitter{
		position: absolute;
		bottom: 11.6%;
		left: 65.5%;
		width: 5%;
		z-index: 100;
	}
	#sns .sns_instagram{
		position: absolute;
		bottom: 12.25%;
		left: 72%;
		width: 5%;
		z-index: 100;
	}
	#sns .sns_youtube{
		position: absolute;
		bottom: 11.25%;
		left: 67%;
		width: 5.2%;
		z-index: 100;
	}
	#sns .sns_facebook{
		position: absolute;
		bottom: 11%;
		left: 73.5%;
		width: 5%;
		z-index: 100;
	}
	
}

@media (max-width: 768px) and (min-width: 600px) {
	#about{
		margin-top: -12% !important;
	}
	
}



/*---night ver---*/

.noon.night{
	background-color: #274174;
	overflow: hidden;
}

.noon .back-img{
	display: block;
}
.noon .back-img-night{
	display: none;
}

.noon.night .back-img{
	display: none;
}
.noon.night .back-img-night{
	display: block;
}
.back-img-night{
	/*width: 132.767%;*/
	/*width: 146.7142%;*/
	width: 144%;
	margin: 0 auto;
	display: inline-block;
	max-width: 1853px;
	position: relative;
	top: 20px;
	left: -27%;
}

.noon #gif .leopard,
.noon #gif .fishing,
.noon #gif .stairs-down,
.noon #gif .chair-human,
.noon #gif .foam{
	display: block;
}
.noon.night #gif .leopard,
.noon.night #gif .fishing,
.noon.night #gif .stairs-down,
.noon.night #gif .chair-human,
.noon.night #gif .foam{
	display: none;
}

.noon #material .bridge{
	display: block;
}
.noon.night #material .bridge{
	display: none;
}

.noon #top-back .back_movingwalk,
/*.noon #top-back .movingwalkroad,*/
.noon #top-back .movingwalk_person{
	display: block;
}
.noon.night #top-back .back_movingwalk,
/*.noon.night #top-back .movingwalkroad,*/
.noon.night #top-back .movingwalk_person{
	display: none;
}


.noon #top-back .back_movingwalk_night{
	display: none;
}
.noon.night #top-back .back_movingwalk_night{
	display: block;
	position: absolute;
    bottom: 0;
    left: 31.1%;
    width: 37.015625%;
    z-index: 100;
}

.noon.night #gif .eye{
	position: absolute;
    top: 12.6%;
    right: 28.1%;
    width: 3.7%;
    z-index: 100;
}

.noon .connect_txt{
	display: block;
}
.noon.night .connect_txt{
	display: none;
}
.noon .connect_txt_night{
	display: none;
}
.noon.night .connect_txt_night{
	display: block;
	position: absolute;
    top: 44.8%;
    left: 30%;
    width: 9%;
    z-index: 100;
}

.noon .tree{
	display: block;
}
.noon.night .tree{
	display: none;
}

.noon .tree_night{
	display: none;
}
.noon.night .tree_night{
	display: block;
	position: absolute;
    bottom: 0;
    right: -15%;
    width: 35.5%;
    z-index: 100;
}

.noon.night #character .door p{
    position: absolute;
    top: 31%;
    left: 58.6%;
    width: 26.7%;
    z-index: 100;
}

.noon.night #exit .exit01 {
    position: absolute;
    top: 35.2%;
    right: 2.4%;
    width: 4.2%;
    z-index: 100;
}
.noon.night #exit .exit02 {
    position: absolute;
    top: 32.2%;
    right: 2.3%;
    width: 4.599%;
    z-index: 100;
}

.noon.night #sns .sns_box {
    bottom: 10.6%;
}
.noon.night #sns .sns_twitter {
    bottom: 19%;
}
.noon.night #sns .sns_instagram {
    bottom: 20.5%;
}
.noon.night #sns .sns_youtube {
    bottom: 18%;
}
.noon.night #sns .sns_facebook {
    bottom: 17.2%;
}

.noon .curtain-back{
	display: block;
}
.noon.night .curtain-back{
	display: none;
}
.noon .curtain-back-night{
	display: none;
}
.noon.night .curtain-back-night{
	display: block;
    position: absolute;
    top: 6.4%;
    left: 11.26%;
    width: 23.1%;
    z-index: 200;
}

.noon.night .curtain-back-img{
	position: absolute;
    top: 9.4%;
    left: 12%;
    width: 22.2%;
    z-index: 10;
}
@media (max-width: 768px) {
	.noon.night .curtain-back-img{
		position: absolute;
		top: 7.9%;
		left: 33.8%;
		width: 58.7%;
		z-index: 10;
	}
}
.noon.night .slider-posi {
    position: absolute;
    top: 9.4%;
    left: 12%;
    width: 22.2%;
    z-index: 50;
}

.noon #exit .rump {
	display: block;
}
.noon.night #exit .rump {
	display: none;
}

.noon #sns .sns_box {
	display: block;
}
.noon.night #sns .sns_box {
	display: none;
}

.noon #sns .sns_box_night {
	display: none;
}
.noon.night #sns .sns_box_night {
	display: block;
	position: absolute;
    bottom: 10.2%;
    left: 56.2%;
    width: 19%;
    z-index: 100;
}

.noon #material .duck {
	display: block;
}
.noon.night #material .duck {
	display: none;
}

.noon #material .duck_night {
	display: none;
}
.noon.night #material .duck_night {
	display: block;
	position: absolute;
    bottom: 6%;
    right: 21%;
    width: 10.390625%;
    z-index: 100;
}

.noon #gif .eye{
	display: block;
}
.noon.night #gif .eye{
	display: none;
}
.noon #gif .eye_night{
	display: none;
}
.noon.night #gif .eye_night{
	display: block;
	position: absolute;
    top: 12.45%;
    right: 27.9%;
    width: 4%;
    z-index: 100;
}


.noon #who .who02-about-human{
	display: block;
}
.noon.night #who .who02-about-human{
	display: none;
}
.noon #who .who02-about-human-night{
	display: none;
}
.noon.night #who .who02-about-human-night{
	display: block;
	position: absolute;
    top: 21.1%;
    left: 2%;
    width: 20.157%;
    z-index: 100;
}






@media (min-width: 1100px) and (max-width: 1200px){
	.noon.night .curtain-back-night {
		top: 6.52%;
	}
}
@media (min-width: 1000px) and (max-width: 1099px){
	.noon.night .curtain-back-night {
		top: 6.6%;
	}
}
@media (min-width: 900px) and (max-width: 999px){
	.noon.night .curtain-back-night {
		top: 6.7%;
	}
}
@media (min-width: 830px) and (max-width: 899px){
	.noon.night .curtain-back-night {
		top: 6.85%;
	}
}
@media (min-width: 769px) and (max-width: 829px){
	.noon.night .curtain-back-night {
		top: 6.96%;
	}
}



@media (max-width: 768px) {
	#about{
		position: relative;
		z-index: 0;
		max-width: 100%;
		width: 100%;
		margin: -9% auto 0;
	}

	.back-img-night{
		width: 100%;
		margin: 0 auto;
		display: inline-block;
		max-width: 1853px;
		position: relative;
		top: 0;
		left: 0;
	}
	.noon.night #character .door p{
		position: absolute;
		top: 32.8%;
		left: auto;
		right: -6%;
		width: 76.595%;
		z-index: 200;
	}
	.noon.night #gif .eye{
		position: absolute;
		top: 22.35%;
		right: 43%;
		width: 9%;
		z-index: 100;
	}
	.noon.night #exit .exit01{
		position: absolute;
		top: 55.5%;
		right: 5.6%;
		width: 7.9%;
		z-index: 100;
	}
	.noon.night #exit .exit01-sp{
		position: absolute;
		top: 55.5%;
		right: 5.6%;
		width: 7.9%;
		z-index: 1000;
	}

	.noon.night #exit .exit02{
		position: absolute;
		top: 53.85%;
		right: 4.2%;
		width: 9.9%;
		z-index: 100;
	}
	
	.noon.night #connect .connect_txt_night{
		position: absolute;
		top: 53.2%;
    	left: 27%;
		width: 30.134%;
		z-index: 100;
	}
	.noon.night #material .tree_night{
		position: absolute;
		bottom: 10.2%;
		right: 0%;
		width: 34%;
		z-index: 100;
	}

	
	.noon.night #sns .sns_box_night{
		position: absolute;
		bottom: 8.25%;
		left: 58.2%;
		width: 38.4%;
		z-index: 100;
	}
	.noon.night #sns .sns_twitter{
		position: absolute;
		bottom: 11.6%;
		left: 65%;
		width: 4.2%;
		z-index: 100;
	}
	.noon.night #sns .sns_instagram{
		position: absolute;
		bottom: 12.25%;
		left: 72.5%;
		width: 4%;
		z-index: 100;
	}
	.noon.night #sns .sns_youtube{
		position: absolute;
		bottom: 11.25%;
		left: 67%;
		width: 4%;
		z-index: 100;
	}
	.noon.night #sns .sns_facebook{
		position: absolute;
		bottom: 11%;
		left: 73.5%;
		width: 4%;
		z-index: 100;
	}
	.noon.night #top-back .back_movingwalk_night{
		position: absolute;
		bottom: 2%;
		left: auto;
		right: 0;
		width: 45.6%;
		z-index: 100;
	}
	.noon.night #material .duck_night{
		position: absolute;
		bottom: 5%;
		right: -3%;
		width: 15%;
		z-index: 100;
	}
	.noon.night #collection .curtain-back-night{
		position: absolute;
		top: 6.2%;
		left: 33.7%;
		width: 61.6%;
		z-index: 100;
	}
	.noon.night #who .who02-about-human-night{
		position: absolute;
		top: 31%;
    	left: 1.7%;
		width: 49.157%;
		z-index: 100;
	}
	.noon.night #gif .eye_night {
		position: absolute;
		top: 22.35%;
		right: 43%;
		width: 9%;
		z-index: 100;
	}

}

.exit01-bonus{
	background-image: url("../img/top/bonus.gif");
	background-size: cover;
	position: fixed;
	top: 0;
	left: 150%;
	transform: translateX(-50%);
	width: 100%;
	height: 100vh;
	opacity: 0;
	z-index: 10000;
}	
.exit01-bonus.active{
	animation-name: bonus;
	animation-duration: 0;
	animation-duration: 6s;
	animation-fill-mode: forwards;
	opacity:1;
}	
@keyframes bonus{
	0%{	left: 150%;	}
	25%{ left: 50%;	}
	75%{ left: 50%;	}
	100%{ left: -50%;	}
}

@media (max-width: 768px) {
	.exit01-bonus-sp{
		background-image: url("../img/top/sp/bonus_sp.gif");
		background-size: cover;
		position: fixed;
		top: 0;
		left: 150%;
		transform: translateX(-50%);
		width: 100%;
		height: 100vh;
		opacity: 0;
		z-index: 10000;
	}	
	.exit01-bonus-sp.active{
		animation-name: bonus-sp;
		animation-duration: 0;
		animation-duration: 6s;
		animation-fill-mode: forwards;
		opacity:1;
	}	
}
@keyframes bonus-sp{
	0%{	left: 150%;	}
	22%{ left: 50%;	}
	78%{ left: 50%;	}
	100%{ left: -50%;	}
}	


/*leopard-night アニメーション*/

.noon .leopard-night{
	display: none;
}

.noon.night .leopard-night{
	display: block;
	content: url("../img/top/night/leopard_night01.png");
	width: 170px;
	height: auto;
	position: absolute;
	top: 36.3%;
    left: 47.5%;
	animation: move 18s steps(1) 1;
	animation-delay: 2s;
	animation-fill-mode: forwards;
	/*transform: rotate(-10deg);*/
	z-index: 1000;
}

@keyframes move{
    0%{
		top: 36.3%;
    	left: 47.5%;
    }
    5%{
		top: 37.7%;
    	left: 51.5%;
		transform: rotate(0);
    }
    10%{
		top: 38.6%;
    	left: 56.5%;
		transform: rotate(-10deg);
    }
    15%{
		top: 37%;
    	left: 64%;
		transform: rotate(-30deg);
    }
    20%{
		top: 35%;
    	left: 70%;
		transform: rotate(-27deg);
    }
    25%{
		top: 34.5%;
    	left: 71%;
		transform: rotate(-20deg);
    }
    30%{
		top: 36.5%;
		left: 78.5%;
		transform: rotate(-5deg);
    }
    35%{
		top: 42%;
    	left: 81.5%;
		transform: rotate(28deg);
    }
    40%{
		top: 50%;
    	left: 84.5%;
		transform: rotate(28deg);
	}
    45%{
		top: 51%;
    	left: 85.5%;
		transform: rotate(4deg);
    }
    50%{
		top: 53%;
    	left: 73.5%;
		transform: rotate(4deg) scale(-1, 1);
    }
    55%{
		top: 56.5%;
    	left: 65.5%;
		transform: rotate(5deg) scale(-1, 1);
    }
    60%{
		top: 60%;
    	left: 58.5%;
		transform: rotate(5deg) scale(-1, 1);
    }
    65%{
		top: 64%;
    	left: 50.5%;
		transform: rotate(5deg) scale(-1, 1);
    }
    70%{
		top: 66%;
    	left: 50.5%;
		transform: rotate(5deg) scale(1, 1);
	}
    75%{
		top: 68%;
    	left: 52.5%;
		transform: rotate(5deg) scale(1, 1);
    }
    80%{
		top: 71.55%;
    	left: 57%;
		transform: rotate(0) scale(1, 1);
    }
    85%{
		content: url("../img/top/night/leopard_night02.png");
		top: 70%;
    	left: 61.5%;
		transform: rotate(0) scale(1, 1);
    }
    100%{
		content: url("../img/top/night/leopard_night02.png");
		top: 70%;
    	left: 61.5%;
		transform: rotate(0) scale(1, 1);
    }
}


@media (max-width: 768px) {

	.noon.night .leopard-night{
		display: block;
		content: url("../img/top/night/leopard_night01.png");
		width: 100px;
		height: auto;
		position: absolute;
		top: 35.6%;
    	left: 31.5%;
		animation: move-sp 18s steps(1) 1;
		animation-delay: 2s;
		animation-fill-mode: forwards;
		/*transform: rotate(-10deg);*/
		z-index: 1000;
	}

}
	@keyframes move-sp{
		0%{
			top: 35.6%;
    		left: 31.5%;
			transform: rotate(0);
		}
		5%{
			top: 35%;
    		left: 49.5%;
			transform: rotate(-15deg);
		}
		10%{
			top: 33.9%;
    		left: 72.5%;
			transform: rotate(-25deg);
		}
		15%{
			top: 33.4%;
    		left: 87.5%;
			transform: rotate(-25deg) scale(1, 1);
		}
		20%{
			top: 44.5%;
			left: 87.5%;
			transform: rotate(0) scale(-1, 1);
		}
		25%{
			top: 45.5%;
    		left: 70.5%;
			transform: rotate(0) scale(-1, 1);
		}
		30%{
			top: 47%;
    		left: 45.5%;
			transform: rotate(0) scale(-1, 1);
		}
		35%{
			top: 48%;
    		left: 28.5%;
			transform: rotate(0) scale(-1, 1);
		}
		40%{
			top: 48.5%;
    		left: 8.5%;
			transform: rotate(0) scale(-1, 1);
		}
		45%{
			top: 50.5%;
    		left: -8.5%;
			transform: rotate(5deg) scale(-1, 1);
		}
		50%{
			top: 60%;
			left: 68.5%;
			transform: rotate(17deg) scale(1, 1);
		}
		55%{
			top: 62.4%;
    		left: 81.5%;
			transform: rotate(17deg) scale(1, 1);
		}
		60%{
			top: 74.8%;
    		left: 81.5%;
			transform: rotate(17deg) scale(-1, 1);
		}
		65%{
			top: 73.4%;
    		left: 61.5%;
			transform: rotate(17deg) scale(-1, 1);
		}
		70%{
			top: 73.4%;
			left: 35.5%;
			transform: rotate(-5deg) scale(-1, 1);
		}
		75%{
			top: 75.4%;
    		left: 14.5%;
			transform: rotate(-5deg) scale(-1, 1);
		}
		80%{
			top: 77.4%;
    		left: -6.5%;
			transform: rotate(-5deg) scale(-1, 1);
		}
		85%{
			top: 81%;
    		left: -6.5%;
			transform: rotate(0) scale(1, 1);
		}
		90%{
			top: 82.5%;
    		left: 9.5%;
			transform: rotate(0) scale(1, 1);
		}
		95%{
			content: url("../img/top/night/leopard_night02.png");
			top: 82%;
    		left: 15%;
			transform: rotate(0) scale(1, 1);
		}
		100%{
			content: url("../img/top/night/leopard_night02.png");
			top: 82%;
    		left: 15%;
			transform: rotate(0) scale(1, 1);
		}

}



	
@media (max-width: 768px) {
	#top-footer {
		 margin-top: -16% !important; 
	}
}