/*右から左へ移動*/
.is-animated-right ,.is-animated-right2 ,.is-animated-right3{
    opacity: 0;
}
.is-animated-right.anim-active{
    animation: slideIn-right 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-right2.anim-active{
    animation: slideIn-right 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-right3.anim-active{
    animation: slideIn-right 2s 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn-right {
    0% {
        transform: translateX(30%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
    }
    40%,100% {
        opacity: 1;
    }
}
/*左から右へ移動*/
.is-animated-left ,.is-animated-left2 ,.is-animated-left3{
    opacity: 0;
}
.is-animated-left.anim-active{
    animation: slideIn-left 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-left2.anim-active{
    animation: slideIn-left 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-left3.anim-active{
    animation: slideIn-left 2s 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn-left {
    0% {
        transform: translateX(-30%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
    }
    40%,100% {
        opacity: 1;
    }
}
/*下から上へ移動*/
.is-animated-bottom, .is-animated-bottom2 ,.is-animated-bottom3{
    opacity: 0;
}
.is-animated-bottom.anim-active{
    animation: slideIn-bottom 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-bottom2.anim-active{
    animation: slideIn-bottom 2s 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.is-animated-bottom3.anim-active{
    animation: slideIn-bottom 1s 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn-bottom {
    20% {
        transform: translateY(20%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
    }
    40%,100% {
        opacity: 1;
    }
}
/*上から下へ移動*/
.is-animated-top, .is-animated-top2{
    opacity: 0;
}
.is-animated-top.anim-active{
    animation: slideIn-top 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn-top {
    0% {
        transform: translateY(-40%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
    }
    40%,100% {
        opacity: 1;
    }
}
.is-animated-top2.anim-active{
    animation: slideIn-top2 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn-top2 {
    0% {
        transform: translateY(-20%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
    }
    40%,100% {
        opacity: 1;
    }
}
/*フェードイン*/
.is-animated-fade, .is-animated-fade2 ,.is-animated-fade3{
    opacity: 0;
}
.is-animated-fade.anim-active{
    animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-fade2.anim-active{
    animation: fadeIn 2s 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-fade3.anim-active{
    animation: fadeIn 2s 0.3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/*ぽよん*/
.is-animated-poyon{
    opacity: 0;
}
.is-animated-poyon.anim-active{
    opacity: 0;
    animation: poyonIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon2{
    opacity: 0;
}
.is-animated-poyon2.anim-active{
    opacity: 0;
    animation: poyonIn 2s 0.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 0.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 0.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon3{
    opacity: 0;
}
.is-animated-poyon3.anim-active{
    opacity: 0;
    animation: poyonIn 2s 0.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 0.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 0.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon4{
    opacity: 0;
}
.is-animated-poyon4.anim-active{
    opacity: 0;
    animation: poyonIn 2s 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.is-animated-poyon5{
    opacity: 0;
}
.is-animated-poyon5.anim-active{
    opacity: 0;
    animation: poyonIn 2s 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -webkit-animation: poyonIn 2s 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    -moz-animation: poyonIn 2s 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes poyonIn{
    0%{opacity:0; transform:translate(0,0px);}
    15%{opacity:0.5; transform:translate(0,-20px);}
    25%{opacity:1; transform:translate(0,0px);}
    100%{opacity:1; transform:translate(0,0px);}
}
@-webkit-keyframes poyonIn{
    0%{opacity:0; -webkit-transform:translate(0,0px);}
    15%{opacity:0.5; -webkit-transform:translate(0,-20px);}
    25%{opacity:1; -webkit-transform:translate(0,0px);}
    100%{opacity:1; -webkit-transform:translate(0,0px);}
}
@-moz-keyframes poyonIn{
    0%{opacity:0; -moz-transform:translate(0,0px);}
    15%{opacity:0.5; -moz-transform:translate(0,-20px);}
    25%{opacity:1; -moz-transform:translate(0,0px);}
    100%{opacity:1; -moz-transform:translate(0,0px);}
}
/*背景不透明度*/
.is-animated-bg.anim-active {
    animation: backgroundIn 3s ease forwards;
}
@keyframes backgroundIn {
    20% {
        background-position: center 0%;
    }
    100% {
        background-position: center 100%;
    }
}
.is-animated-bg2.anim-active {
    animation: backgroundIn2 3s ease forwards;
}
@keyframes backgroundIn2 {
    0% {
        background-position: center 0%;
    }
    100% {
        background-position: center 100%;
    }
}
/*text*/
.is-animated-text.anim-active{
    animation: textRotate 1s 1s ease forwards;
}
@keyframes textRotate {
    0% {
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(10deg);
    }
}
/*--------------------------------------------
max-width 810
--------------------------------------------*/
@media (max-width: 810px) {
@keyframes textRotate {
    0% {
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(10deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
}


/*TOPページ*/
/*service_list*/
.service_list_content a{
    opacity: 0;
}
.service_list_content a:nth-child(1).anim-active,
.service_list_content a:nth-child(4).anim-active{
    animation: slideIn-left 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.service_list_content a:nth-child(2).anim-active,
.service_list_content a:nth-child(5).anim-active{
    animation: slideIn-left 2s 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.service_list_content a:nth-child(3).anim-active,
.service_list_content a:nth-child(6).anim-active{
    animation: slideIn-left 2s 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/*--------------------------------------------
max-width 1200
--------------------------------------------*/
@media (max-width: 1200px) {
.service_list_content a:nth-child(1).anim-active,
.service_list_content a:nth-child(3).anim-active,
.service_list_content a:nth-child(5).anim-active{
    animation: slideIn-left 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.service_list_content a:nth-child(2).anim-active,
.service_list_content a:nth-child(4).anim-active,
.service_list_content a:nth-child(6).anim-active{
    animation: slideIn-left 2s 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
}