@charset "utf-8";


/* scaleUp */

.target {
    transition-duration: .6s;
    transition-timing-function: ease;
    transition-property: transform, opacity;
    transition-delay: .2s;
    opacity: 0;
}

.target.scaleUp {
    transition-delay: 0s;
    transition-duration: .8s;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(0.8);
}

.target.action {
    opacity: 1;
}

.target.scaleUp.action {
    /**/transform: scale(1);
}

.target.scaleUp.action.feature.feature01{max-width:408px}
.target.scaleUp.action.feature.feature02{max-width:389px}
.target.scaleUp.action.feature.feature03{max-width:405px}
.target.scaleUp.action.feature.feature04{max-width:420px}
.target.scaleUp.action.feature.feature05{max-width:435px}
.target.scaleUp.action.feature.feature06{max-width:470px}

@media (max-width:960px) {
    .target.scaleUp.action.feature.feature01{max-width:280px}
    .target.scaleUp.action.feature.feature02{max-width:266px}
    .target.scaleUp.action.feature.feature03{max-width:277px}
    .target.scaleUp.action.feature.feature04{max-width:287px}
    .target.scaleUp.action.feature.feature05{max-width:297px}
    .target.scaleUp.action.feature.feature06{max-width:335px}
}
@media (max-width:576px) {
    .target.scaleUp.action.feature.feature01{max-width:calc(140 / 375 * 100vw);}
    .target.scaleUp.action.feature.feature02{max-width:calc(143 / 375 * 100vw);}
    .target.scaleUp.action.feature.feature03{max-width:calc(130 / 375 * 100vw);}
    .target.scaleUp.action.feature.feature04{max-width:calc(135 / 375 * 100vw)}
    .target.scaleUp.action.feature.feature05{max-width:calc(152 / 375 * 100vw)}
    .target.scaleUp.action.feature.feature06{max-width:calc(140 / 375 * 100vw)}
}



/* end scaleUp */



/* title animate */
.section-title .title00-1 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.1s;
}

.section-title.action .title00-1 {
    fill: rgb(38, 154, 202);
}

.section-title .title00-2 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.30000000000000004s;
}

.section-title.action .title00-2 {
    fill: rgb(38, 154, 202);
}

.section-title .title01-1 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.1s;
}

.section-title.action .title01-1 {
    fill: rgb(38, 154, 202);
}

.section-title .title01-2 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.30000000000000004s;
}

.section-title.action .title01-2 {
    fill: rgb(38, 154, 202);
}

.section-title .title01-3 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.5s;
}

.section-title.action .title01-3 {
    fill: rgb(38, 154, 202);
}

.section-title .title01-4 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.7000000000000001s;
}

.section-title.action .title01-4 {
    fill: rgb(38, 154, 202);
}

.section-title .title01-5 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.9s;
}

.section-title.action .title01-5 {
    fill: rgb(38, 154, 202);
}

.section-title .title02-1 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.1s;
}

.section-title.action .title02-1 {
    fill: rgb(38, 154, 202);
}

.section-title .title02-2 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.30000000000000004s;
}

.section-title.action .title02-2 {
    fill: rgb(38, 154, 202);
}

.section-title .title02-3 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.5s;
}

.section-title.action .title02-3 {
    fill: rgb(38, 154, 202);
}

.section-title .title02-4 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.7000000000000001s;
}

.section-title.action .title02-4 {
    fill: rgb(38, 154, 202);
}

.section-title .title02-5 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.9s;
}

.section-title.action .title02-5 {
    fill: rgb(38, 154, 202);
}

.section-title .title02-6 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.1s;
}

.section-title.action .title02-6 {
    fill: rgb(38, 154, 202);
}

.section-title .title02-7 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.3000000000000003s;
}

.section-title.action .title02-7 {
    fill: rgb(38, 154, 202);
}

.section-title .title02-8 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.5000000000000002s;
}

.section-title.action .title02-8 {
    fill: rgb(38, 154, 202);
}

.section-title .title02-9 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.7000000000000002s;
}

.section-title.action .title02-9 {
    fill: rgb(38, 154, 202);
}

.section-title .title02-10 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.9000000000000001s;
}

.section-title.action .title02-10 {
    fill: rgb(38, 154, 202);
}


.section-title .title03-1 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.1s;
}

.section-title.action .title03-1 {
    fill: rgb(38, 154, 202);
}

.section-title .title03-2 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.30000000000000004s;
}

.section-title.action .title03-2 {
    fill: rgb(38, 154, 202);
}

.section-title .title03-3 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.5s;
}

.section-title.action .title03-3 {
    fill: rgb(38, 154, 202);
}

.section-title .title03-4 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.7000000000000001s;
}

.section-title.action .title03-4 {
    fill: rgb(38, 154, 202);
}

.section-title .title03-5 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.9s;
}

.section-title.action .title03-5 {
    fill: rgb(38, 154, 202);
}

.section-title .title03-6 {
    fill: transparent;
    transition: fill 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.1s;
}

.section-title.action .title03-6 {
    fill: rgb(38, 154, 202);
}


/* その場で */
.fadeIn {
    opacity: 0;
}

.fadeIn.action {
    -webkit-animation-name: fadeInAnime;
    animation-name: fadeInAnime;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 下から */

.fadeUp {
    opacity: 0;
}

.fadeUp.action {
    -webkit-animation-name: fadeUpAnime;
    animation-name: fadeUpAnime;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* slideUp */
.slideUp {
    opacity: 0;
}

.slideUp.action {
    -webkit-animation: slideUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation: slideUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@-webkit-keyframes slideUp {
    0% {
        transform: translateY(80px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
    }

    40%,
    100% {
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(80px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
    }

    40%,
    100% {
        opacity: 1;
    }
}


/* slideDown */
.slideDown {
    opacity: 0;
}

.slideDown.action {
    -webkit-animation: slideDown 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation: slideDown 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@-webkit-keyframes slideDown {
    0% {
        transform: translateY(-200px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
    }

    40%,
    100% {
        opacity: 1;
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-200px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
    }

    40%,
    100% {
        opacity: 1;
    }
}


/* slideLeft */
.slideLeft {
    opacity: 0;
}

.slideLeft.action {
    -webkit-animation: slideLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation: slideLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@-webkit-keyframes slideLeft {
    0% {
        transform: translateX(80px) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translateX(0) scale(1);
    }

    40%,
    100% {
        opacity: 1;
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(80px) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translateX(0) scale(1);
    }

    40%,
    100% {
        opacity: 1;
    }
}


/* slideLeft */
@media (max-width:768px) {

    .slideLeft.mv-img {
        opacity: 0;
    }

    .slideLeft.mv-img.action {
        -webkit-animation: slideLeft-mv-img 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        animation: slideLeft-mv-img 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        -webkit-animation-delay: 1.8s;
        animation-delay: 1.8s;
        transition-delay: 1.8s;
    }
}

@-webkit-keyframes slideLeft-mv-img {
    0% {
        transform: translateY(80px) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
    }

    40%,
    100% {
        opacity: 1;
    }
}

@keyframes slideLeft-mv-img {
    0% {
        transform: translateY(80px) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
    }

    40%,
    100% {
        opacity: 1;
    }
}




/* 文字が滑らかに表示される */
.smooth {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    display: inline-block;
    transition: 0.8s cubic-bezier(0.37, 0, 0.63, 1) ease-in-out;
    transition-property: -webkit-clip-path;
    transition-property: clip-path;
    transition-property: clip-path, -webkit-clip-path;
    line-height: 1;
}

.smooth.action {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
}


.delay-3s.action {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    transition-delay: 0.3s;
}

.delay-5s.action {
    transition-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.delay-8s.action {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    transition-delay: 0.8s;
}

.delay1s.action {
    transition-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.delay1-5s.action {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    transition-delay: 1.5s;
}

.delay1-8s.action {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
    transition-delay: 1.8s;
}

.delay2s.action {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    transition-delay: 2s;
}

.delay2-5s.action {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
    transition-delay: 2.5s;
}

.delay3s.action {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    transition-delay: 3s;
}

.delay3-5s.action {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
    transition-delay: 3.5s;
}

.delay4s.action {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    transition-delay: 4s;
}

.delay4-5s.action {
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s;
    transition-delay: 4.5s;
}