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

#skip{
	bottom: 30px;
	right: 50px;
	z-index: 105;
	cursor: pointer
}
#first{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 101;
	background-image: url("../img/top_bg.jpg");
}
#first .fi_1,#first .fi_1_2{
	width: 65%;
	height : auto;
	opacity: 0;
	top: 100px;
	bottom: 100px;
	-webkit-transform: skewX(20deg);
	-ms-transform: skewX(20deg);
	transform: skewX(20deg);
}
#first .fi_1{
	left: -15%;
}
#first .fi_1_2{
	right: -15%;
}
#first .cross{
	height: 50px;
	line-height: 50px;
	right: 0;
	left: 6px;
	top: 0;
	bottom: 0;
	margin: auto;
	opacity: 0;
	transition: 2s
}
#first .fi_2,#first .fi_3{
	width: 100vw;
	height: auto;
	opacity: 0;
	top: 100px;
	bottom: 100px;
}
.fi_1 {
	-webkit-animation: example1 1s ease 1.5s 1 forwards;
	animation: example1 1s ease 1.5s 1 forwards;
}
.fi_1_2 {
	-webkit-animation: example1 1s ease 4s 1 forwards;
	animation: example1 1s ease 4s 1 forwards;
}
.fi_2 {
	-webkit-animation: example 1s ease 7s 1 forwards;
	animation: example 1s ease 7s 1 forwards;
}
.fi_3 {
	-webkit-animation: example 1s ease 10s 1 forwards;
	animation: example 1s ease 10s 1 forwards;
}
@-webkit-keyframes example1 {
	0%{
		-webkit-transform: scale(0.9,0.9) skewX(-15deg);
		-ms-transform: scale(0.9,0.9) skewX(-15deg);
		transform: scale(0.9,0.9) skewX(-15deg);
		opacity: 0
	}
	100% {
		-webkit-transform: scale(1,1) skewX(-15deg);
		-ms-transform: scale(1,1) skewX(-15deg);
		transform: scale(1,1) skewX(-15deg);
		opacity: 1
	}
}
@keyframes example1 {
	0%{
		-webkit-transform: scale(0.9,0.9) skewX(-15deg);
		-ms-transform: scale(0.9,0.9) skewX(-15deg);
		transform: scale(0.9,0.9) skewX(-15deg);
		opacity: 0
	}
	100% {
		-webkit-transform: scale(1,1) skewX(-15deg);
		-ms-transform: scale(1,1) skewX(-15deg);
		transform: scale(1,1) skewX(-15deg);
		opacity: 1
	}
}
@-webkit-keyframes example {
	0%{
		-webkit-transform: translateY(40px);
		-ms-transform: translateY(40px);
		transform: translateY(40px);
		opacity: 0
	}
	100% {
		-webkit-transform: translateY(0px);
		-ms-transform: translateY(0px);
		transform: translateY(0px);
		opacity: 1
	}
}
@keyframes example {
	0%{
		-webkit-transform: translateY(40px);
		-ms-transform: translateY(40px);
		transform: translateY(40px);
		opacity: 0
	}
	100% {
		-webkit-transform: translateY(0px);
		-ms-transform: translateY(0px);
		transform: translateY(0px);
		opacity: 1
	}
}
#first .fi_1::before, #first .fi_1_2::before{
	display: block;
	height: 100%;
	top: 0;
	position: absolute;
	content: "";
	right: -15%;
	bottom: 0;
	left: -15%;
	margin: auto;
	background-position: center;
	background-size: cover;
	-webkit-transform: skewX(15deg);
	-ms-transform: skewX(15deg);
	transform: skewX(15deg);
}
#first .fi_1 .fi_txt, #first .fi_1_2 .fi_txt{
	-webkit-transform: skewX(15deg);
	-ms-transform: skewX(15deg);
	transform: skewX(15deg);
}
#first .fi_1::before{
	background-image: url("../img/main7.jpg");
}
#first .fi_1_2::before{
	background-image: url("../img/main6.jpg")
}
#first .fi_2{
	background-image: url("../img/main5.jpg")
}
#first .fi_3{
	background-image: url("../img/main4.jpg")
}
#first .fi_1_2 .fi_box,#first .fi_2 .fi_box{
	right: 10%;
	top: 50%;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
	opacity: 0;
}
#first .fi_1 .fi_box,#first .fi_3 .fi_box{
	left: 10%;
	top: 50%;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
	opacity: 0;
}
#first .fi_1_2 .fi_box{
	right: 28%;
}
#first .fi_1 .fi_box{
	left: 28%;
}
#first .slash{
	-webkit-animation: slash 1s ease 0.5s 1 forwards;
	animation: slash 1s ease 0.5s 1 forwards;
	display: block;
	width: 3px;
	height: 0;
	top: 0;
	right: 0;
	left: 25vh;
	margin: auto;
	background: -webkit-linear-gradient(transparent, #fff, transparent);
	background: linear-gradient(transparent, #fff, transparent);
	-webkit-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
	transform: rotate(15deg);
	-webkit-transform-origin: top right;
	-ms-transform-origin: top right;
	transform-origin: top right;
}
#first .fi_1 .fi_box{
	-webkit-animation: box 1s ease 2s 1 forwards;
	animation: box 1s ease 2s 1 forwards;
}
#first .cross{
	-webkit-animation: box1 1s ease 3s 1 forwards;
	animation: box1 1s ease 3s 1 forwards;
}
#first .fi_1_2 .fi_box{
	-webkit-animation: box 1s ease 4.5s 1 forwards;
	animation: box 1s ease 4.5s 1 forwards;
}
#first .fi_2 .fi_box{
	-webkit-animation: box 1s ease 8s 1 forwards;
	animation: box 1s ease 8s 1 forwards;
}
#first .fi_3 .fi_box{
	-webkit-animation: box 1s ease 11s 1 forwards;
	animation: box 1s ease 11s 1 forwards;
}
@-webkit-keyframes slash {
	0%{
		height: 0;
		opacity: 1;
	}
	50%{
		height: 100vh;
		opacity: 1;
	}
	100% {
		height: 100vh;
		opacity: 0;
	}
}
@keyframes slash {
	0%{
		height: 0;
		opacity: 1;
	}
	50%{
		height: 100vh;
		opacity: 1;
	}
	100% {
		height: 100vh;
		opacity: 0;
	}
}
@-webkit-keyframes box1 {
	0%{
		opacity: 0
	}
	30%{
		opacity: 1
	}
	70%{
		opacity: 1
	}
	100% {
		opacity: 0
	}
}
@keyframes box1 {
	0%{
		opacity: 0
	}
	30%{
		opacity: 1
	}
	70%{
		opacity: 1
	}
	100% {
		opacity: 0
	}
}
@-webkit-keyframes box {
	0%{
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
@keyframes box {
	0%{
		opacity: 0
	}
	100% {
		opacity: 1
	}
}

/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){

#first span{
	right: 130%;
	left: -30%;
}
@-webkit-keyframes slider {
	0%{
		left: -30%;
		right: 130%
	}
	50%{
		left: -30%;
		right: -30%;
	}
	100% {
		right: -30%;
		left: 130%
	}
}
@keyframes slider {
	0%{
		left: -30%;
		right: 130%
	}
	50%{
		left: -30%;
		right: -30%;
	}
	100% {
		right: -30%;
		left: 130%
	}
}
#first .fi_1,#first .fi_1_2,#first .fi_2,#first .fi_3{
	top: 300px;
	bottom: 300px
}
}

/*ここからスマホ用（750px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){

#first span{
	right: 150%;
	left: -50%;
}
@-webkit-keyframes slider {
	0%{
		left: -50%;
		right: 150%
	}
	50%{
		left: -50%;
		right: -50%;
	}
	100% {
		right: -50%;
		left: 150%
	}
}
@keyframes slider {
	0%{
		left: -50%;
		right: 150%
	}
	50%{
		left: -50%;
		right: -50%;
	}
	100% {
		right: -50%;
		left: 150%
	}
}
#first .fi_1,#first .fi_1_2,#first .fi_2,#first .fi_3{
	top: 200px;
	bottom: 200px
}
}