@charset "utf-8";

/*
******************************************************************
* style.css
* @gimmick
******************************************************************
*/
.btn__next a:before {content: url(../img/btn_01--hover.png);}

/*
******************************************************************
* .sec01
******************************************************************/
.sec01 {
	position: relative;
	top: -600px;
	left: 50%;
	width: 1113px;
	height: 1035px;
	margin: 0 0 -540px -556px;
}



/*
******************************************************************
* .sec02
******************************************************************/
.sec02 {
	position: relative;
	left: 50%;
	width: 1112px;
	height: 1350px;
	margin: 0 0 100px -556px;
}
.sec02 > a {
	display: block;
	position: absolute;
	text-decoration: none;
	line-height: 1;
}
.sec02 > a > * {display: block;}
.sec02 .sec02__img {
	-webkit-transform-origin: right bottom;
	-moz-transform-origin: right bottom;
	-ms-transform-origin: right bottom;
	-o-transform-origin: right bottom;
	transform-origin: right bottom;
}
.sec02 .sec02__btn {position: absolute;}
.sec02 .sec02__btn:before {
	content: "";
	display: block;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 102px;
	height: 102px;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	opacity: 0;
}

/* - hover */
.sec02 > a:hover .sec02__img {
	-webkit-animation: fukidashi 0.75s ease-in-out 1;
	animation: fukidashi 0.75s ease-in-out 1;
}
.sec02 > a:hover .sec02__btn:before {opacity: 1;}

.sec02 .sec02__gimmick01 {top: 233px; left: 693px;}
.sec02 .sec02__gimmick01 .sec02__btn {top: 161px; left: -75px;}
.sec02 .sec02__gimmick02 {top: 475px; left: 348px;}
.sec02 .sec02__gimmick02 .sec02__btn {top: 129px; left: -68px;}
.sec02 .sec02__gimmick03 {top: 750px; left: 156px;}
.sec02 .sec02__gimmick03 .sec02__btn {top: -4px; left: -95px;}
.sec02 .sec02__gimmick04 {top: 1026px; left: 77px;}
.sec02 .sec02__gimmick04 .sec02__btn {top: -92px; left: 22px;}
.sec02 .sec02__gimmick05 {top: 1077px; left: 297px;}
.sec02 .sec02__gimmick05 .sec02__btn {top: -95px; left: 38px;}
.sec02 .sec02__gimmick06 {top: 1167px; left: 556px;}
.sec02 .sec02__gimmick06 .sec02__btn {top: -101px; left: 5px;}
.sec02 .sec02__gimmick07 {top: 1025px; left: 773px;}
.sec02 .sec02__gimmick07 .sec02__btn {top: -68px; left: -82px;}
.sec02 .sec02__gimmick08 {top: 599px; left: 631px;}
.sec02 .sec02__gimmick08 .sec02__btn {top: 152px; left: 151px;}
.sec02 .sec02__gimmick09 {top: 315px; left: 63px;}
.sec02 .sec02__gimmick09 .sec02__btn {top: 135px; left: 187px;}


@keyframes fukidashi {
	0% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	5% {
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}
	30% {
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		-o-transform: scale(1.05);
		transform: scale(1.05);
	}
	50% {
		-webkit-transform: scale(1.08);
		-ms-transform: scale(1.08);
		-o-transform: scale(1.08);
		transform: scale(1.08);
	}
	75% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}

@-webkit-keyframes fukidashi {
	0% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	5% {
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}
	30% {
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		-o-transform: scale(1.05);
		transform: scale(1.05);
	}
	50% {
		-webkit-transform: scale(1.08);
		-ms-transform: scale(1.08);
		-o-transform: scale(1.08);
		transform: scale(1.08);
	}
	75% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}



/*
******************************************************************
* .sec03
******************************************************************/
.sec03 {
	position: relative;
	left: 50%;
	width: 1097px;
	height: 1120px;
	margin: 0 0 150px -545px;
}
