@charset "UTF-8";

.pr_content {
	height: 596px;
}

.scene_00, .scene_01, .scene_02, .scene_03, .scene_04, .scene_05, .scene_06 {
	position: relative;
}

.scene_00 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: 150px;
	right: 72px;
}

.scene_00 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 210px;
	right: 70px;
}

.scene_00 .balloon_03 {
	position: absolute;
	z-index: 5;
	top: 270px;
	right: 145px;
}

.scene_01 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: 0;
	right: 20px;
}

.scene_01 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 0;
	right: 325px;
}

.scene_01 .balloon_03 {
	position: absolute;
	z-index: 5;
	top: 60px;
	right: 220px;
}

.scene_02 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: 0;
	right: 335px;
}

.scene_02 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 30px;
	right: 220px;
}

.scene_02 .balloon_03 {
	position: absolute;
	z-index: 5;
	top: 80px;
	right: 455px;
}

.scene_03 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: 0;
	right: 168px;
}

.scene_03 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 190px;
	right: 10px;
}

.scene_04 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: 0;
	right: -20px;
}

.scene_04 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 0;
	right: 320px;
}

.scene_04 .balloon_03 {
	position: absolute;
	z-index: 5;
	top: 30px;
	right: 215px;
}

.scene_05 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: -8px;
	right: -10px;
}

.scene_05 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 250px;
	right: 320px;
}

.scene_05 .balloon_03 {
	position: absolute;
	z-index: 5;
	top: 185px;
	right: 365px;
}

.scene_06 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: 193px;
	right: 188px;
}

.scene_06 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 135px;
	right: 190px;
}


/* アニメーション */

.bln_anime01{
	opacity: 0;
    filter: alpha(opacity=0);
}


.on .bln_anime01{
    opacity:1;
    filter: alpha(opacity=100);
}


/* delay*/

.on .bln_delay1000{
-moz-transition-delay:1s !important;
-webkit-transition-delay:1s !important;
-o-transition-delay:1s !important;
-ms-transition-delay:1s !important;
}

.on .bln_delay2000{
-moz-transition-delay:2s !important;
-webkit-transition-delay:2s !important;
-o-transition-delay:2s !important;
-ms-transition-delay:2s !important;
}

.on .bln_delay4000{
-moz-transition-delay:4s !important;
-webkit-transition-delay:4s !important;
-o-transition-delay:4s !important;
-ms-transition-delay:4s !important;
}

.on .bln_delay6000{
-moz-transition-delay:6s !important;
-webkit-transition-delay:6s !important;
-o-transition-delay:6s !important;
-ms-transition-delay:6s !important;
}

/* .speed */

.on .bln_speed0{
  -moz-transition-duration:0s !important;
  -webkit-transition-duration:0s !important;
  -o-transition-duration:0s !important;
  -ms-transition-duration:0s !important;
}

.on .bln_speed1000{
  -moz-transition-duration: 1s !important;
  -webkit-transition-duration: 1s !important;
  -o-transition-duration: 1s !important;
  -ms-transition-duration: 1s !important;
}

.on .bln_speed1500{
  -moz-transition-duration: 1.5s !important;
  -webkit-transition-duration: 1.5s !important;
  -o-transition-duration: 1.5s !important;
  -ms-transition-duration: 1.5s !important;
}


@media screen and (max-width:667px){


.main, .container > header {
	margin: 0 -30px;
    padding: 0 0 2em;
}

.bb-custom-wrapper {
	margin: 0 auto;
    /*width: 320px;*/
	width: 90%;
}

.bb-bookblock {
    /*width: 310px;*/
	width: 100%;
    /*height: 217px;*/
	height: 178px;
}

.bb-custom-wrapper .bb-bookblock:after {
    /*height: 217px;*/
	/*height: 178px;*/
	height: 175px;
    width: 155px;
	
}

.pr_content {
    height: 100%;
}

.scene_00 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: 65px;
	right: 31px;
	width: 87px;
}

.scene_00 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 92px;
	right: 31px;
	width: 89px;
}

.scene_00 .balloon_03 {
	position: absolute;
	z-index: 5;
	top: 118px;
	right: 63px;
	width: 25px;
}

.scene_01 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: 0;
	right: 9px;
	width: 62px;
}

.scene_01 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 0;
	right: 142px;
	width: 80px;
}

.scene_01 .balloon_03 {
	position: absolute;
	z-index: 5;
	top: 26px;
	right: 96px;
	width: 62px;
}

.scene_02 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: 0;
	right: 146px;
	width: 80px;
}

.scene_02 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 13px;
	right: 96px;
	width: 62px;
}

.scene_02 .balloon_03 {
	position: absolute;
	z-index: 5;
	top: 35px;
	right: 199px;
	width: 28px;
}

.scene_03 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: 0;
	right: 73px;
	width: 145px;
}

.scene_03 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 83px;
	right: 4px;
	width: 141px;
}

.scene_04 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: 0;
	right: -9px;
	width: 63px;
}

.scene_04 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 0;
	right: 140px;
	width: 110px;
}

.scene_04 .balloon_03 {
	position: absolute;
	z-index: 5;
	top: 13px;
	right: 92px;
	width: 63px;
}

.scene_05 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: -3px;
	right: -4px;
	width: 164px;
}

.scene_05 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 109px;
	right: 140px;
	width: 112px;
}

.scene_05 .balloon_03 {
	position: absolute;
	z-index: 5;
	top: 81px;
	right: 159px;
	width: 98px;
}

.scene_06 .balloon_01 {
	position: absolute;
	z-index: 5;
	top: 84px;
	right: 82px;
	width: 148px;
}

.scene_06 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 59px;
	right: 83px;
	width: 169px;
}
}





.scene_00 .balloon_01 {
	position: absolute;
	z-index: 5;
/*	top: 150px;
	right: 72px;*/
	height: 38%;
	top: 30%;
	bottom: 24%;
	margin: auto;
	width: 32%;
	right: 8%;
	left: 60%;
}

.scene_00 .balloon_02 {
	position: absolute;
	z-index: 5;
	top: 210px;
	right: 70px;
}

.scene_00 .balloon_03 {
	position: absolute;
	z-index: 5;
	top: 270px;
	right: 145px;
}

.scene_01 .balloon_01 {
	position: absolute;
	z-index: 5;
	/*top: 20px;
	left: 130px;*/
	width: 21%;
	height: 19%;
	top: 4%;
	bottom: 77%;
	left: 13%;
	right: 66%;
}

.scene_01 .balloon_02 {
	position: absolute;
	z-index: 5;
	/*bottom: 20px;
	right: 70px;*/
	width: 32%;
	height: 14%;
	bottom: 4%;
	top: 82%;
	right: 7%;
	left: 61%;
}

.scene_01 .balloon_03 {
	position: absolute;
	z-index: 5;
	/*top: 20px;
	right: 120px;*/
	width: 9%;
	height: 23%;
	top: 4%;
	bottom: 73%;
	left: 79%;
	right: 12%;
}
.scene_01 .balloon_04 {
    position: absolute;
    z-index: 5;
    /*top: 60px;
    right: 180px;*/
	width: 10%;
	height: 20%;
	right: 18%;
	left: 72%;
	top: 12%;
	bottom: 68%;
}
.scene_02 .balloon_01 {
	position: absolute;
	z-index: 5;
	/*bottom: 0;
    left: 210px;*/
	width: 18%;
	height: 53%;
	top: 47%;
	bottom: 0;
	left: 22%;
	right: 60%;
}

.scene_02 .balloon_02 {
	position: absolute;
	z-index: 5;
	/*top: 50px;
    left: 390px;*/
	width: 16%;
	height: 49%;
	top: 10%;
	bottom: 41%;
	left: 39%;
	right: 45%;
}

.scene_02 .balloon_03 {
	position: absolute;
	z-index: 4;
	/*top: 20px;
	left: 300px;*/
	width: 14%;
	height: 25%;
	top: 4%;
	bottom: 71%;
	left: 30%;
	right: 56%;
}

.scene_02 .balloon_04 {
	position: absolute;
	z-index: 4;
	/*bottom: 180px;
    left: 40px;*/
	width: 19%;
	height: 23%;
	bottom: 36%;
	top: 41%;
	left: 4%;
	right: 77%;
}

.scene_02 .balloon_05 {
	position: absolute;
	z-index: 4;
	/*top: 114px;
    left: 30px;*/
	width: 27%;
	height: 14%;
	top: 23%;
	bottom: 63%;
	left: 3%;
	right: 70%;
}

.scene_03 .balloon_01 {
	position: absolute;
	z-index: 5;
	/*top: 30px;
    left: 98px;*/
	width: 33%;
	left: 10%;
	right: 57%;
	height: 87%;
	top: 6%;
	bottom: 7%;
}

.scene_03 .balloon_02 {
	position: absolute;
	z-index: 5;
	/*top: 330px;
    right: 130px;*/
	width: 28%;
	height: 18%;
	top: 67%;
	bottom: 15%;
	right: 13%;
	left: 59%;
}
.scene_03 .balloon_03 {
	position: absolute;
	z-index: 5;
	/*top: 32px;
	right: 332px;*/
	width: 20%;
	height: 30%;
	top: 6%;
	bottom: 64%;
	right: 34%;
	left: 46%;
}

.scene_04 .balloon_01 {
	position: absolute;
	z-index: 5;
	/*bottom: 40px;
    left: 110px;*/
	width: 44%;
	height: 64%;
	bottom: 8%;
	top: 28%;
	left: 11%;
	right: 45%;	
}

.scene_04 .balloon_02 {
	position: absolute;
	z-index: 5;
	/*top: 40px;
    right: 100px;*/
	width: 35%;
	height: 38%;
	top: 9%;
	bottom: 53%;
	right: 10%;
	left: 55%;
}

.scene_04 .balloon_03 {
	position: absolute;
	z-index: 5;
	top: 30px;
	right: 215px;
}

.scene_05 .balloon_01 {
	position: absolute;
	z-index: 5;
	/*bottom: 30px;
    right: 30px;*/
	width: 44%;
    height: 64%;
	bottom: 6%;
	top:30%;
	right: 3%;
	left: 53%;
}

.scene_05 .balloon_02 {
	position: absolute;
	z-index: 5;
	/*top: 10px;
    right: 200px;*/
	width: 32%;
	height: 41%;
	top: 2%;
	bottom: 57%;
	right: 29%;
	left: 39%;
}

.scene_05 .balloon_03 {
	position: absolute;
	z-index: 5;
	/*bottom: 40px;
    left: 100px;*/
	width: 29%;
	height: 16%;
	bottom: 8%;
	top:76%;
	left: 10%;
	right: 61%;	
}

.scene_06 .balloon_01 {
	position: absolute;
	z-index: 5;
	/*bottom: 120px;
    right: 268px;*/
	width: 47%;
	height: 69%;
	bottom: 24%;
	top: 7%;
	right: 27%;
	left: 26%;
}

.scene_06 .balloon_02 {
	position: absolute;
	z-index: 5;
	/*top: 10px;
    right: 60px;*/
	width: 24%;
	height: 37%;
	top: 2%;
	bottom: 61%;
	right: 6%;
	left: 70%;
}

.scene_06 .balloon_03 {
	position: absolute;
	z-index: 5;
	/*bottom: 40px;
    left: 210px;*/
	width: 54%;
	height: 13%;
	bottom: 8%;
	top: 79%;
	left: 21%;
	right: 25%;
}



@media screen and (max-width:667px){
.scene_01 .balloon_01 {
    width: 39%;
	height: 32%;
	top: 5%;
	bottom: 63%;
	left: 7%;
	right: 54%;
}	
.scene_01 .balloon_02 {
	width: 46%;
	height: 22%;
	bottom: 33%;
	top: 45%;
	right: 4%;
	left: 50%;
}
.scene_02 .balloon_05 {
    width: 41%;
    height: 22%;
    top: 70%;
    bottom: 8%;
    left: 5%;
    right: 54%;
}
.scene_02 .balloon_01 {
    width: 24%;
    height: 59%;
    top: 41%;
    bottom: 0;
    left: 46%;
    right: 30%;
}	
.scene_02 .balloon_02 {
    width: 30%;
    height: 73%;
    top: 27%;
    bottom: 0;
    left: 65%;
    right: 5%;
}	
.scene_02 .balloon_03 {
    width: 20%;
    height: 36%;
    top: 4%;
    bottom: 71%;
    left: 60%;
    right: 20%;
}	
.scene_02 .balloon_04 {
    width: 23%;
    height: 32%;
    bottom: 50%;
    top: 18%;
    left: 38%;
    right: 16%;
}	
.scene_03 .balloon_02 {
    width: 44%;
	height: 30%;
	top: 55%;
	bottom: 15%;
	right: 9%;
	left: 49%;
}	
.scene_03 .balloon_03 {
    width: 33%;
    height: 45%;
    top: 6%;
    bottom: 49%;
    right: 25%;
	left: 42%;
}
.scene_04 .balloon_02 {
    width: 45%;
	height: 48%;
	top: 9%;
	bottom: 43%;
	right: 4%;
	left: 51%;
}	
.scene_05 .balloon_03 {
    width: 41%;
	height: 25%;
	bottom: 8%;
	top: 67%;
	left: 8%;
	right: 56%;
}	
.scene_05 .balloon_02 {
    width: 35%;
    height: 43%;
    top: 2%;
    bottom: 55%;
    right: 26%;
    left: 39%;
}	
.scene_06 .balloon_02 {
    width: 32%;
    height: 43%;
    top: 2%;
    bottom: 57%;
    right: 6%;
    left: 65%;
}
.bb-item.on {
	display: block ;
}	
}