@charset "UTF-8";
/* CSS Document switch scrollについてのcssはここにまとめた。*/
	
/*bf01のscroll switch*/	
	.box5 {
		height: 10em;
		position: relative;
		margin-bottom:30em;
	}
	.box5:before {
		content: "";
		text-align:center;
		display: block;
		position: absolute;
		height:87px;
		width:141px;
		left: 40%;
		top : 45%;
		transition:0.5s;
		background-image:url(../img/index/bf01.png);
		background-repeat:no-repeat;
		opacity:1;
	}
	
	.on.box5:before {
		background-image:url(../img/index/bf01.png);
		-webkit-transform: scale(1.6) rotate(-1.1turn);
		-ms-transform: scale(1.6) rotate(-1.1turn);
		-o-transform: scale(1.6) rotate(-1.1turn);
		transform: scale(1.6) rotate(-1.1turn);
		opacity:1;
		top:-20%;
	}
	
/*bf02のscroll switch*/	
	.box6 {
		height: 10em;
		position: relative;
		margin-bottom:40em;
}
	.box6:before {
		content: "";
		text-align:center;
		display: block;
		position: absolute;
		height:223px;
		width:182px;
		left: 0%;
		top :90%;
		transition:0.9s;
		background-image:url(../img/index/bf02b.png);
		background-repeat:no-repeat;
		opacity:0.1;
	}
	
	.on.box6:before {
		background-image:url(../img/index/bf02b.png);
		-webkit-transform: scale(1.7) rotate(0.1turn);
		-ms-transform: scale(1.7) rotate(0.11turn);
		-o-transform: scale(1.7) rotate(0.1turn);
		transform: scale(1.7) rotate(0.1turn);
		opacity:1;
		top:-100%;
	}
	
/*bf03のscroll switch*/	
	.box7 {
		height: 10em;
		position: relative;
}
	.box7:before {
		content: "";
		text-align:center;
		display: block;
		position: absolute;
		height:123px;
		width:182px;
		left: 0%;
		top : 45%;
		transition:0.8s;
		background-image:url(../img/index/bf03.png);
		background-repeat:no-repeat;
		opacity:1;
	}
	.on.box7:before {
		background-image:url(../img/index/bf03.png);
		-webkit-transform: scale(0.5) rotate(1.1turn);
		-ms-transform: scale(0.5) rotate(1.1turn);
		-o-transform: scale(0.5) rotate(1.1turn);
		transform: scale(0.5) rotate(1.1turn);
		opacity:1;
		top:5%;
	}
	
/*bf04のscroll switch*/	
	.box8 {
		height: 10em;
		position: relative;
		margin-bottom:40em;
	}
	.box8:before {
		content: "";
		text-align:center;
		display: block;
		position: absolute;
		height:223px;
		width:182px;
		left: 0%;
		top :90%;
		transition:3s;
		background-image:url(../img/index/bf04.png);
		background-repeat:no-repeat;
		opacity:1;
	}
	.on.box8:before {
		background-image:url(../img/index/bf04.png);
		-webkit-transform: scale(1.8) rotate(-0.1turn);
		-ms-transform: scale(1.8) rotate(-0.1turn);
		-o-transform: scale(1.8) rotate(-0.1turn);
		transform: scale(1.8) rotate(-0.1turn);
		opacity:1;
		top:-400%;
	}
	
/*bf05のscroll switch*/	
	.box9 {
		height: 10em;
		position: relative;
		margin-bottom:30em;
	}
	.box9:before {
		content: "";
		text-align:center;
		display: block;
		position: absolute;
		height:87px;
		width:141px;
		left: 40%;
		top : 45%;
		transition:0.5s;
		background-image:url(../img/index/bf01.png);
		background-repeat:no-repeat;
		opacity:1;
	}
	.on.box9:before {
		background-image:url(../img/index/bf01.png);
		-webkit-transform: scale(2) rotate(0.6turn);
		-ms-transform: scale(2) rotate(0.6turn);
		-o-transform: scale(2) rotate(0.6turn);
		transform: scale(0.6) rotate(1.2turn);
		opacity:1;
		top:-80%;
	}