@charset "utf-8";
/* CSS Document */

/*トップページ*/
body {
    /*position: relative;
    overflow: hidden;
    visibility: hidden;*/
}
/*#is-animationWrapper{
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
	z-index: 1;
}*/
#is-animationWrapper *{
	box-sizing: border-box;
}
#is-animationWrapper{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 10;
}
.parker img{
	max-width: 100%;
	height: auto;
}
.scene__wrap{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
}
.skyBg,
.groundBg{
	position: absolute;
	width: 100%;
}
.skyBg{
	top: 0;
}
.groundBg{
	bottom: 0;
}
.scene__01{
	background: rgb(113, 199, 238);
}
.scene__01 .skyBg,
.scene__01 .groundBg{
	background: none;;
}
.skyBg{
	background: #b9e6fb;
}
.skyBg:before,
.skyBg:after{
	content: " ";
	display: block;
	height: 100%;
	width: 100%;
	top: 0;
	position: absolute;
}
.skyBg:after{
	background: url(../images/top/top_bg_town.png) no-repeat center bottom;
}
.skyBg:before{
	background: url(../images/top/top_bg_town_line.png) repeat-x center bottom;
}
.groundBg{
	background: #ffeb3f;
}
.scene__boxInner{
	position: relative;
	height: inherit;
}
.scene__box{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.scene__box img{
	display: block;
}
#sclBtn_wrap{
	display: none;
}
.footer__staffImg{
	background: #71c7ee;
}


/* ====▼ 769px以上 ▼==== */
@media screen and (min-width:769px) {
	.scene__wrap .parker{
		background-size: contain !important;
		width: 10%;
		margin-bottom: 2.3%;
	}
	.scene__01 .parker{
		background-size: contain !important;
		width: 10%;
		margin-bottom: 8.3%;
	}
	.scene__wrap .parker.walk{
		background: url(../images/top/top_parker.gif) no-repeat center;
	}
	.scene__wrap .parker.walk img{
		opacity: 0;
	}
	.scene__01 .parker{
		opacity: 0;
	}
	.targetTxt01{
		width: 89.16%;
	}
	.scene__wrap{
		min-height: 540px;
	}
	.scene__box{
		padding-top: 56px;
	}
	.footer__staffImg_allStaff{
		padding: 0 10px;
		text-align: center;
	}
	.footer__staffImg_allStaff img{
		max-width: 960px;
	}
	.l-footer__wrap{
		position: fixed;
		width: 100%;
		z-index: 1;
	}
  #sclimg{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 5%;
		z-index: 20;
		text-align: center;
		color: #3261b3;
		font-weight: bold;
	}
  #sclimg img{
		display: inline-block;
		transform: rotate(90deg);
		width: 10px;
	}
}

/* ====▼ 768px以下 ▼==== */
@media screen and (max-width:768px) {
    #top {
      background: #71c7ee;
    }
    #top .menu__in {
      height: auto;
      overflow-y: auto;
  }
    .iphone #top .l-footer {
      margin-top: 25px;
    }
    .android #top .l-footer {
      margin-top: 30px;
    }
	#sclimg{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 10px;
		z-index: 20;
		text-align: center;
		color: #3261b3;
		font-weight: bold;
	}
	#sclimg img{
		display: inline-block;
		transform: rotate(90deg);
		width: 10px;
	}
	#skrollr-bodyWrap{
		overflow: hidden;
		height: 80vh;
	}
	#skrollr-body {
		height:100%;
		overflow:visible;
		position:relative;
   /* padding-top: 5430px;*/
    z-index: 100;
	}
	.scene__box img{
		max-width: 100%;
		height: auto;
		position: absolute;
		z-index: 2;
	}
	.scene__wrap .parker{
		background-size: contain !important;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 10;
	}
	.scene__wrap .parker img{
		position: static;
	}
	.scene__01 .parker{
		
	}
	.scene__06 .parker,
	.scene__07 .parker{
	}
	.l-footer{
		position: fixed;
		width: 100%;
		z-index: 1;
	}
	
	.scene__02 .targetCar,
	.scene__05 .targetCar,
	.scene__06 .targetCar{
		/*width: 33.22%;*/
		right: 0;
		bottom: 0;
		margin-bottom: 1.5625%;
		z-index: 3;
	}
	.scene__02 .targetTrain01,
	.scene__05 .targetTrain02,
	.scene__06 .targetTrain02{
		left: 0;
		bottom: 0;
		margin-bottom: 34.864%;
		margin-left: -14.8125%;
		/*width: 41.53%;*/
	}
	.scene__02 .targetRail01,
	.scene__05 .targetRail02,
	.scene__06 .targetRail02{
		left: 0;
		bottom: 0;
		margin-bottom: 13.416%;
		margin-left: -31.22%;
		/*width: 79.15%;*/
	}
	.scene__03{
	}
	.scene__03 .targetTown01,
	.scene__05 .targetTown02,
	.scene__06 .targetTown02{
		right: 0;
		bottom: 0;
		margin-bottom: 3.9%;
		margin-right: -15%;
	}
	.scene__04{}
	.scene__04 .targetSatellite,
	.scene__05 .targetSatellite,
	.scene__06 .targetSatellite{
		bottom: 0;
		left: 0;
		margin-left: 5%;
		margin-bottom: 62.08%;
	}
	.scene__04 .targetCloud,
	.scene__05 .targetCloud,
	.scene__06 .targetCloud{
		bottom: 0;
		left: 0;
		margin-left: -5%;
		margin-bottom: 49.0625%;
	}
	.scene__04 .targetMountain,
	.scene__05 .targetMountain,
	.scene__06 .targetMountain{
		bottom: 0;
		left: 0;
		margin-left: -21.718%;
		margin-bottom: 14.32%;
	}
	.scene__05{}
	.scene__06{}
	.scene__06 .targetStaff,
	.scene__07 .targetStaff{
		bottom: 0;
		z-index: 5;
		transform: scale(1.4);
		margin-bottom: -62.08%;
	}
	.scene__07{
		background: #71c7ee;
	}
}
/* ====▼ 768px以下  481以上▼==== */
@media screen and (max-width:768px) and (min-width:481px) {
	.scene__wrap .parker{
		width: 76px;
	}
	.scene__box{
		width: 384px;
		height: 512px;
	}
	.targetCar{
		width: 204px;
	}
	.targetTrain01,
	.targetTrain02{
		width: 255px;
	}
	.targetRail01,
	.targetRail02{
		width: 486px;
	}
	.targetSatellite{
		width: 70px;
	}
	.targetCloud{
		width: 144px;
	}
	.targetMountain{
		width: 496px;
	}
	.targetStaff{
		
	}
}

/* ====▼ 480px以下 ▼==== */
@media screen and (max-width:480px) {
  .skrollr-mobile body {
   height:100% !important;
  }
	.scene__wrap .parker{
		/*width: 60px;*/
		width: 19.36%;
	}
	.scene__box{
		width: 256px;
		height: 340px;/*さらには下げる必要あり*/
	}
	.targetCar{
		/*width: 163px;*/
    width: 37.67%;
	}
	.targetTrain01,
	.targetTrain02{
		/*width: 204px;*/
		width: 45.95%;
	}
  .scene__02 .targetTrain01, .scene__05 .targetTrain02, .scene__06 .targetTrain02 {
    margin-bottom: 27.864%;
    margin-left: -11%;
  }
	.targetRail01,
	.targetRail02{
		/*width: 486px;*/
		width: 70.422%;
	}
	.targetSatellite{
		/*width: 56px;*/
		width: 14.084%;
	}
	.targetCloud{
		/*width: 114px;*/
		width: 31.69%;
	}
  .scene__03 .targetTown01, .scene__05 .targetTown02, .scene__06 .targetTown02 {
    width: 61.44%;
    margin-right: -11%;
  }
	.scene__04 .targetMountain, .scene__05 .targetMountain, .scene__06 .targetMountain{
		/*width: 396px;*/
		width: 109%;
    margin-left: -11%;
    margin-bottom: 13.32%;
	}
	.targetStaff{
		width: 85%;
    margin: auto;
    left: 0;
    right: 0;
	}
  .sp .l-footer {
    background: #71c7ee;
  }
  .sp .footer__copy {
    background: #223340;
  }
}