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

/* 基本アニメーション設定 */
/*-------------------------------------------*/

 /*----- フェードイン -----*/
    .inviewfadeIn {opacity: 0;transition: .8s; }
    
    .fadeIn {opacity: 1.0;}
	
	
	
    /*----- 上へスライド -----*/
    .inviewUp {
        transform: translate(0, 40px);
        transition: .8s;
    }
    
    .Up {
        transform: translate(0, 0);
        transition-delay:0.2s;
    }

	/*----- 左からスライドフェードイン -----*/
    .inviewLeft,.slideLR .wrap {
		opacity: 0;
        transform: translate(-1000px, 0);
        transition: .8s;
    }
    
    .LeftIn,.slideLR .LRIn01 {
		opacity: 1.0;
        transform: translate(0, 0);
    }
	/*----- 右からスライドフェードイン -----*/
    .inviewRight,.home #banners .wrap {
		opacity: 0;
        transform: translate(1000px, 0);
        transition: .8s;
    }
    
    .RightIn {
		opacity: 1.0;
        transform: translate(0, 0);
    }
	.home #banners .LRIn02 {
		transition-delay:0.5s;
		opacity: 1.0;
        transform: translate(0, 0);
    }
	/*----- 上からスライドフェードイン -----*/
	.trigger {position:absolute;top:50%;width: 50%;height:50%;z-index:-1;}
	
	
    .inviewDown {
		opacity: 0;
        transform: translate(0, -500px);
        transition: .8s;
    }
    
    .inviewDown.DownIn{
		opacity: 1.0;
        transform: translate(0, 0);
    }
	
	/*----- 下からスライドフェードイン -----*/
	
	
    .inviewsUp,.inviewsUp02 {
		opacity: 0;
        transform: translate(0, 50px);
        transition: .8s;
    }
	.inviewsUp .img img,
	.inviewsUp .img .in-img{transform: scale(1.2);transition: 0.8s!important;}

    
    .UpIn {
		opacity: 1.0;
        transform: translate(0, 0);
        
    }
	.UpIn .img img,
	.UpIn .img .in-img{transform: scale(1.0);}
	
	/*----- ねじれてフェードイン -----*/
	.spiral .wrap{
		opacity: 0;
		transform: rotateY(90deg);
		transform-origin: 50% 0;
		transition: .8s;}
		
	.spiral .spiralIn{
		opacity: 1.0;
		transform: rotateY(0);}
	
	
    /*----- ズームイン -----*/
    .inviewzoomIn {
        transform: scale(0, 0);
        transition: .8s;
    }
    
    .zoomIn {
        transform: scale(1, 1);
        animation-name: ZOOM;
        animation: ZOOM 0.5s ease 0s 1 forwards;
    } 

    @keyframes ZOOM {
	80% {opacity: 1;transform: scale(1.05, 1.05);}
	100% {opacity: 1;transform: scale(1, 1);}
	}
    
    /*----- フェードインしながら上へスライド -----*/
    .inviewfadeInUp {
        opacity: 0;
        transform: translate(0, 60px);
        transition: .8s;
    }
    
    .fadeInUp {
        opacity: 1.0;
        transform: translate(0, 0);
    }
/*TOPページ　アニメーション*/
.fuffu-trigger{position: absolute;height: 10%;top:45%;z-index: -2;width: 20px;}
.animafuffu{opacity: 0;transition: .5s;}
/*.animafuffu.fuffu{opacity: 1;}*/
.animafuffu.fuffu:nth-child(1) {animation: fuffu 0.5s ease 0s 1 forwards;}
.animafuffu.fuffu:nth-child(2) {animation: fuffu 0.5s ease 0.3s 1 forwards;}
.animafuffu.fuffu:nth-child(3) {animation: fuffu 0.5s ease 0.6s 1 forwards;}

.fuffu-trigger02{position: absolute;height: 60%;top:20%;z-index: -2;}
.animafuffu02{opacity: 0;transition: .5s;}
/*.animafuffu.fuffu{opacity: 1;}*/
.animafuffu02.fuffu:nth-child(1){animation: fuffu 0.5s ease 0s 1 forwards;}
.animafuffu02.fuffu:nth-child(2) {animation: fuffu 0.5s ease 0.3s 1 forwards;}
.animafuffu02.fuffu:nth-child(3){animation: fuffu 0.5s ease 0.6s 1 forwards;}

@keyframes fuffu {
0% {opacity: 0;}
100% {opacity: 1;}
}


.animaPOKO > article {
		opacity: 0;
        transform: translate(0, 30px);
        -webkit-transform: translate(0, 30px);
        transition: .3s;
    }
    
	.animaPOKO.POKO > article:nth-child(1) {animation: POKO 0.5s ease 0s 1 forwards;}
	.animaPOKO.POKO > article:nth-child(2) {animation: POKO 0.5s ease 0.1s 1 forwards;}
	.animaPOKO.POKO > article:nth-child(3) {animation: POKO 0.5s ease 0.2s 1 forwards;}
	.animaPOKO.POKO > article:nth-child(4) {animation: POKO 0.5s ease 0.3s 1 forwards;}
	.animaPOKO.POKO > article:nth-child(5) {animation: POKO 0.5s ease 0.4s 1 forwards;}
	.animaPOKO.POKO > article:nth-child(6) {animation: POKO 0.5s ease 0.5s 1 forwards;}
	.animaPOKO.POKO > article:nth-child(7) {animation: POKO 0.5s ease 0.6s 1 forwards;}
	.animaPOKO.POKO > article:nth-child(8) {animation: POKO 0.5s ease 0.7s 1 forwards;}
	
	@keyframes POKO {
	100% {
	opacity: 1;transform: translate(0, 0);-webkit-transform: translate(0, 0);
	}
	}


section#ques-box .trigger{height: 20%!important;top:40%!important;}

.animasussu > div{transition: 0.5s;}
.animasussu > div.list01{left:-50vw;}
.animasussu > div.list02{left: -50vw;}
.animasussu > div.list03{left:-50vw;}

.animasussu.sussu > div.list01 {animation: SUSU 0.8s ease 0s 1 forwards;}
.animasussu.sussu > div.list02 {animation: SUSU 0.8s ease 0.1s 1 forwards;}
.animasussu.sussu > div.list03 {animation: SUSU 0.8s ease 0.2s 1 forwards;}

@keyframes SUSU {
	100% {
	left:0;
	}
}

section.contentsBox02:after {content: "";width: 100%;height: 100%;background: #F2F2F2;position: absolute;right: 0;top: 0;transition: 0.6s;}
section.contentsBox02.anima:after{width: 0;}


/*top用アニメーション*/

.m-text02 span.shade{position: relative;overflow: hidden;display: inline-block;}
.m-text02 span.shade > span{display: inline-block;position: relative;top:200px;transition: 0.8s;}
/*
h2.titles01 span.shade{position: relative;overflow: hidden;display: block;}
h2.titles01 span.shade > span{display: inline-block;position: relative;top:100px;transition: 0.8s;}

h2.titles01.UpIn span.shade > span,
.UpIn h2.titles01 span.shade > span,
.UpIn .m-text02 span.shade > span{animation: nyoki 0.8s ease 0.5s 1 forwards;}
*/
.m-text02 span.shade > span{animation: nyoki 0.8s ease 0.5s 1 forwards;}
@keyframes nyoki {
	0% {top:200px;}
	100% {top:0;}
}