body{
margin:0;
padding:0;
outline : none;
width:100%;
height:100%;
}

a img{
border:0;
}

#top-logo,#i2-1{
	position: absolute;
	width:60%;
	height: auto;
	max-width: 700px;
}

.texts{
	display: none;
}

#all_wrap{
opacity: 0;

}
#p1,#p2,#p2-2,#p3,#p4,#p5,#p6,#p7,#p8{

}

div.youtube-thumb{
	width:50%;
	position: absolute;
	top:25%;
right:3%;
}

div.youtube-thumb a{
		overflow: hidden;
		display: block;

}

div.youtube-thumb img{
	width:100%;
	height: auto;
	display: block;
}

div.contents-wrap{
	position: relative;
	width:100%;
	height: 100%;
	max-width: 1680px;
	min-width: 980px;
	margin: 0 auto;
}

.scale img {
    -moz-transition: -moz-transform 0.2s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    -o-transition: -o-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;
    transition: transform 0.2s linear;
}
.scale img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

#loader{
	width:4%;
	position: fixed;
	top:47.5%;
	left:47.5%;
}

.pointer{
	cursor: pointer;
}



/*----------------------------navbutton----------------------------*/
div#navbutton{
	position: fixed;
	bottom:0;
	right:0;
	z-index: 999999;
	width:10%;
	padding:2.5%;
		max-width:90px;
		opacity: 0;

}
div#navbutton img{
	display: block;
filter: invert(12%);
	margin:20px 0 0;
	width:100%;
	background-:none;
	
	transition: background-color 0.2s linear;
	border-radius: 100px;
	cursor: pointer;
}

div#navbutton img:hover{
	background-color: rgba(240,240,240,0.5);
}


#btt{
	display: block;
	position: absolute;
	right:20px;
	top:20px;
	width:10%;
	cursor: pointer;
	opacity: 0;
	z-index: 999999;
}


/*----------------------------1ページめ----------------------------*/
#p1{
	background-image: url("../img/bg-l/1.jpg");
	background-size:cover;
	z-index: 998;
	position: relative;
	width:100%;
	height: 100%;
	background-position: center 0;

}

#p1-bg{
	position: absolute;
	width:100%;
	height: 100%;
	background-image: url("../img/bg-l/1-bg.jpg");
	background-size:cover;
	background-position: center 0;
}

#p1-bg-2{ 
	position: absolute;
	z-index: 999997;
	width:100%;
	height:100%;
background-color: rgba(0,0,0,0.1);
}

#logo{
	position: absolute;
}
/*----------------------------2ページめ----------------------------*/
#p2{
	background-image: url("../img/bg-l/2.jpg");
	background-size:cover;
	width:100%;
	height:100%;
	background-attachment:fixed;
	z-index: 0;
	overflow: hidden;
	position: relative;
}

#p2-2{
	background-image: url("../img/p2-illust.svg");
	background-size:contain;
	background-repeat: repeat-y;
	background-position: center 400px;
	overflow: hidden;
	width:100%;
	height:100%;

}

.canimate_preloader,.canimate_loadMessage{
	display: none;
}

.canimation1{
	position: absolute;
	z-index: 999999;
}

#p2-bg{ 
	position: absolute;
	width:100%;
	height:100%;
	background: rgba(113,206,239,0.33);
	background: -moz-linear-gradient(top, rgba(113,206,239,0.2) 0%, rgba(113,206,239,0.2) 0%, rgba(183,222,237,0.2) 0%, rgba(33,180,226,0.2) 0%, rgba(183,235,218,0.2) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(113,206,239,0.2)), color-stop(0%, rgba(113,206,239,0.33)), color-stop(0%, rgba(183,222,237,0.2)), color-stop(0%, rgba(33,180,226,0.33)), color-stop(100%, rgba(183,235,218,0.45)));
	background: -webkit-linear-gradient(top, rgba(113,206,239,0.2) 0%, rgba(113,206,239,0.2) 0%, rgba(183,222,237,0.2) 0%, rgba(33,180,226,0.2) 0%, rgba(183,235,218,0.2) 100%);
	background: -o-linear-gradient(top, rgba(113,206,239,0.2) 0%, rgba(113,206,239,0.22) 0%, rgba(183,222,237,0.2) 0%, rgba(33,180,226,0.2) 0%, rgba(183,235,218,0.2) 100%);
	background: -ms-linear-gradient(top, rgba(113,206,239,0.2) 0%, rgba(113,206,239,0.22) 0%, rgba(183,222,237,0.2) 0%, rgba(33,180,226,0.2) 0%, rgba(183,235,218,0.2) 100%);
	background: linear-gradient(to bottom, rgba(113,206,239,0.2) 0%, rgba(113,206,239,0.2) 0%, rgba(183,222,237,0.2) 0%, rgba(33,180,226,0.2) 0%, rgba(183,235,218,0.2) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71ceef', endColorstr='#b7ebda', GradientType=0 );
}



/*----------------------------3ページめ----------------------------*/
#p3{
	background-image: url("../img/bg-l/3.jpg");
	background-size:cover;
	position: relative;
	z-index: 998;
	width:100%;
	height: 100%;
}

div.p3-wrap{
	position: absolute;
	text-align: center;
	width:4%;
	opacity: 0;
	max-width: 90px;

}

div.p3-wrap img{
	display: block;
	width: 100%
}

#firefly{
	height:100%;
	position: absolute;
	width:100%;
	top:-50%;
	opacity: 0;
	
}
.jqueryFireFly{
/* border-radius */
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;

/* box-shadow */
box-shadow:rgba(95, 201, 141, 0.79) 0px 0px 22px 2px;
-webkit-box-shadow:rgba(95, 201, 141, 0.79) 0px 0px 22px 2px;
-moz-box-shadow:rgba(95, 201, 141, 0.79) 0px 0px 22px 2px;
}
/*----------------------------4ページめ以降共通設定----------------------------*/

#p4-1,#p5-1,#p6-1,#p7-1{
	display: block;
	width:100%;
	left:3%;
	border-top:10px solid #fff;
	border-bottom:10px solid #fff;
	padding:25px 0px;
	max-width:600px;
}

#p4-2,#p5-2,#p6-2,#p7-2{
	padding:5%;
	margin:5% 0;
	width:100%;
	box-sizing:border-box;
	max-width:600px;
}

.leftWrap{
	position: absolute;
	left:5%;
	width:35%;

}

#p4 .leftWrap{
	width:33%!important;
}



/*----------------------------4ページめ----------------------------*/

#p4{
	background-image: url("../img/bg-l/4.jpg");
	background-size:cover;
	background-position: top center;
	background-repeat: no-repeat;
	position: absolute;
	overflow: hidden;
	width:100%;
	height: 100%;
}


#p4-bg{
	background-color: rgba(0,0,0,0.2);

	position: absolute;
	width:100%;
	height:100%;
/*background: rgba(151,247,239,0.3);
background: -moz-linear-gradient(top, rgba(151,247,239,0.3) 0%, rgba(231,56,39,0.3) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(151,247,239,0.3)), color-stop(100%, rgba(231,56,39,0.3)));
background: -webkit-linear-gradient(top, rgba(151,247,239,0.3) 0%, rgba(231,56,39,0.3) 100%);
*/
}

#p4-1{

	left:8%;
}

#p4-2{

	background-color:rgba(238,145,120, 0.8);
	padding:8%;
}

#p4y{
	right:-50%;
}


#p4-3{

	width:80%;
	margin:0 auto;
	padding:20px 0;
opacity: 0;
	bottom:3%;
}

img.play{
	position: absolute;
	display: block;
	top:0;
	width:10%!important;
	height: auto;
	z-index: 999;
}

#p4 .play{
	opacity: 0;
}


/*----------------------------5ページめ----------------------------*/

#p5{
	background-image: url("../img/bg-l/i5-0-b.jpg");
	background-size:cover;
	background-position: top right;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: relative;
	overflow: hidden;
	z-index: 999;
	background-color: #fff;
	width:100%;
	height: 100%;
}

#p5-bg{
	position: absolute;
	width:100%;
	height: 100%;
	background-color: rgba(0,0,0,0.2);
}

#p5-1{
	top:4%;

}

#p5-2{
	background-color: rgba(131, 194, 100, 0.9);
	
}

#slides{
	position: absolute;
	background-size: cover;
	width:45%;
	right: 5%;
	background-image: url("../img/bg-l/i5-x.png");
	background-repeat:repeat-y;
}

#p5slide{
	position: absolute;
	right:3%;
	width:43%;
}




/*---------------------追加1ページ目----------------------------*/

#px1{
	background-image:url("../img/bg-l/px1.jpg");
	background-size:cover;
	position: relative;
	background-position: right center;
}

#px1-1{
	position: absolute;
	left:5%;
	width:32%;
}

#px1-bg{
	
	position: absolute;
	width: 100%;
	height: 100%;
}

#px1-2{
	position: absolute;

	
	right:4%;
	width:43%;

}

#px1-2-wrap{
	padding:3% 2%;
	
}


#px1-3{
	clear: both;
	width:40%;
	display: block;
	margin:0 auto 0;
	padding-top:1.5%;
	position: relative;
		opacity: 0;
	z-index: 999999;
}

.px1-2i{
	width:45%;
	display: block;
	float: left;
	margin:2%;
	box-sizing:border-box;
	opacity: 0;
	z-index: 999999;
	position: relative;
}

#mekuri{
	position: absolute;
	width:100%;
	height: 100%;
	top:0;
	z-index: 888;
	left:0;
}
/*---------------------追加2ページ目----------------------------*/

#px2{
	background-image:url("../img/bg-l/px2.jpg");
	background-size:cover;
	position: relative;
	background-position: right center;
}

#px2-bg{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.4);
}

#px2-1{
	width:30%;
	position: absolute;
	left:8%;
}

.px2-2x{
	opacity: 0;x
}

#px2-r{
position: absolute;
right:8%;
width:45%;
}

#px2-r img{
	width: 100%;
	padding:10px 0;
}

#waku1{
	position: absolute;
	top:0;

}

/*---------------------追加3ページ目----------------------------*/
#px3{
	background-image: url("../img/bg-l/px3.jpg");
	background-size:cover;
	background-position: top right;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: relative;
	overflow: hidden;
	z-index: 999;
	background-color: #fff;
	width:100%;
	height: 100%;
}

#px3-bg{
	position: absolute;
	width:100%;
	height: 100%;
	background-color: rgba(0,0,0,0.2);
}

#px3-1{
	top:4%;

}

#slides{
	position: absolute;
	background-size: cover;
	width:45%;
	right: 5%;
	background-image: url("../img/bg-l/px3-x.png");
	background-repeat:repeat-y;
}

#px3slide{
	position: absolute;
	right:3%;
	width:43%;
}



/*---------------------6ページめ----------------------------*/


#p6{
	background-image: url("../img/bg-l/6.jpg");
	background-size:cover;
	background-position: top right;
	background-repeat: no-repeat;
	position: relative;
	background-attachment: fixed;
	overflow: hidden;
	width:100%;
	height: 100%;
}

#p6-bg{
	position: absolute;
	width:100%;
	height: 100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+0,000000+100&0+0,0.45+50 */
background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.45) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 50%,rgba(0,0,0,0.45) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 50%,rgba(0,0,0,0.45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#73000000',GradientType=1 ); /* IE6-9 */

}

#p6-1{

}

#p6-2{
	background-color:rgba(220,200,123, 0.9);
}

#p6ym{
	opacity: 0;
	margin:0 auto;
	height:100%;


}

#px6gif{
	position: absolute;
	top:0;
}



.p6play{
opacity: 0;
}

/*----------------------------7ページめ----------------------------*/



#p7{
	background-image: url("../img/bg-l/7.jpg");
	background-size:cover;
	background-position: top right;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
	width:100%;
	height: 100%;
}

#p7-bg{
		background-color:rgba(120,192,238, 0.2);
	position: absolute;
	width:100%;
	height: 100%;
}

#p7-1{


}


#p7-2{
	background-color:rgba(120,192,238, 0.8);
	padding:4%;

}



#i7-2{
	/*background-image: url("../img/bg-l/i7-2.png");*/
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	position: absolute;
	width:60%;
	height: 100%;
	right: 0;
	top:120px;
}

#i7-3{
	/*background-image: url("../img/bg-l/i7-3.png");*/
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	position: absolute;
	width:57%;
	height: 100%;
	right: 0;
	top:240px;
}

.p7anime{
	position: absolute;
	right:3%;
	width:55%;
}

#p7pop{
	width: 100%;
}
/*----------------------------8ページめ----------------------------*/

#p8{
	background-color: #fff;
	background-size:cover;
	background-position: top right;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
	border:20px solid #238EBD;
	box-sizing:border-box;
	width:100%;
	height: 100%;
}

#i8-logo{
	position: absolute;
	width:8%;
	left:46%;
	top:-20%;
}

#i8-1{
	position: absolute;
	width:50%;
	left:25%;
	padding:0 5%;
	box-sizing:border-box;
	top:40%;
}

#i8-2{
	position: absolute;
	width:10%;
	left:38%;
	top:60%;
}

#i8-3{
	position: absolute;
	width:10%;
	left:52%;
	top:60%;
}

#i8-4{
	position: absolute;
	width:10%;
	left:45%;
	bottom:10%;
}

/*----------------------------loader----------------------------*/



.loader{
	position: fixed;
	width:100%;
  height: 100%;
  text-align: center;

  margin: 0 auto 1em;
  display: inline-block;
  vertical-align: top;
}

svg#loader-1{
	enable-background: new 0 0 50 50;
position: absolute;
top: 48%;

}



/*
  Set the color of the icon
*/
svg path,
svg rect{
  fill: #FF6700;
}