@charset "utf-8";

/*---------------- 
   BASE 
------------------*/

.animation {
    opacity: 0;
}
.word,
.char {
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.mask_txt {
    position: relative;
    color: rgba(14,14,14,.25);
    contain: content;
    opacity: 1;
}
.mask_txt::after {
    content: attr(data-text);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-mask-image: linear-gradient(to right, #fff, #fff 95%, rgba(255, 255, 255, 0));
    mask-image: linear-gradient(to right, #fff, #fff 95%, rgba(255, 255, 255, 0));
    -webkit-mask-size: 110% 100%;
    mask-size: 110% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 1100% 0%;
    mask-position: 1100% 0%;
    transition-property: -webkit-mask-position;
    transition-property: mask-position;
    transition-property: mask-position, -webkit-mask-position;
    transition-duration: 1.4s;
    transition-timing-function: cubic-bezier(0.4, 0.1, 0.05, 1);
}
/*---------------- 
   Loading
------------------*/
.loader__txt {
    animation: loader__txt 1s ease-in-out 0s 1 forwards;
}
@keyframes loader__txt {
    0% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/*---------------- 
   Headeer_Navi
------------------*/
.is_fix .p-h-menu {
    animation: fadein 0.3s ease-in-out forwards;
}
@keyframes fadein {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}
.is_scroll .p-h-menu {
    animation: fadeout 0.3s ease-in-out forwards;
}
@keyframes fadeout {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
/*---------------- 
   MV
------------------*/
.p-mv__img.is-end {
    animation: p-mv__img 2s cubic-bezier(0.32, 0.94, 0.6, 1) 0s 1 forwards;
}

@keyframes p-mv__img {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.p-mv__ttl,.p-mv__subttl,.p-logo,.p-h-menu-trigger {
    opacity: 0;
}
.p-mv__ttl.is-end,
.p-mv__subttl.is-end,
.l-header.is-end .p-logo,
.l-header.is-end .p-h-menu-trigger {
    animation: fade_down 1s cubic-bezier(0.32, 0.94, 0.6, 1) 0s 1 both;
}

@keyframes fade_down {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

/*---------------- 
   MAIN SECTION
------------------*/


.p-s1-img:first-of-type.animated {
    animation: p-s1-img 1.5s cubic-bezier(.43,.195,.02,1) 0s 1 both;
}
.p-s1-img:nth-of-type(2).animated {
    animation: p-s1-img 1.5s cubic-bezier(.43,.195,.02,1) 0.3s 1 both;
}
.p-s1-img:nth-of-type(3).animated {
    animation: p-s1-img 1.5s cubic-bezier(.43,.195,.02,1) 0.6s 1 both;
}
@keyframes p-s1-img {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.p-tr-col__img.animated {
    animation: p-tr-col__img 1s cubic-bezier(.43,.195,.02,1) 0s 1 both;
}
@keyframes p-tr-col__img {
    0% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}
.p-tr-col__img.animated::before {
    animation: p-tr-col__img-before 1.3s cubic-bezier(.36, .07, .19, .97) both
}

@keyframes p-tr-col__img-before {
    0%,
    to {
        -webkit-transform: translate(0, 0) rotate(0deg);
        transform: translate(0, 0) rotate(0deg)
    }
    10% {
        -webkit-transform: translate(-1px, -2px) rotate(-1deg);
        transform: translate(-1px, -2px) rotate(-1deg)
    }
    20% {
        -webkit-transform: translate(-3px, 0) rotate(1deg);
        transform: translate(-3px, 0) rotate(1deg)
    }
    30% {
        -webkit-transform: translate(0, 2px) rotate(0deg);
        transform: translate(0, 2px) rotate(0deg)
    }
    40% {
        -webkit-transform: translate(1px, -1px) rotate(1deg);
        transform: translate(1px, -1px) rotate(1deg)
    }
    50% {
        -webkit-transform: translate(-1px, 2px) rotate(-1deg);
        transform: translate(-1px, 2px) rotate(-1deg)
    }
    60% {
        -webkit-transform: translate(-3px, 1px) rotate(0deg);
        transform: translate(-3px, 1px) rotate(0deg)
    }
    70% {
        -webkit-transform: translate(2px, 1px) rotate(-1deg);
        transform: translate(2px, 1px) rotate(-1deg)
    }
    80% {
        -webkit-transform: translate(-1px, -1px) rotate(1deg);
        transform: translate(-1px, -1px) rotate(1deg)
    }
    90% {
        -webkit-transform: translate(2px, 2px) rotate(0deg);
        transform: translate(2px, 2px) rotate(0deg)
    }
}
.p-tr-last__txt.animated,
.p-tr-last__img.animated,
.sv-ttl__img.animated,
.c-col__img.animated,
.p-point__wrap.animated,
.p-price-box__wrap.animated{
    animation: fadeInUp 1s cubic-bezier(.43,.195,.02,1) 0s 1 both;
}
@keyframes fadeInUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}
.p-ds-list:first-of-type.animated,
.p-flow div:first-of-type.animated{
    animation: fadeInUp 1s cubic-bezier(.43,.195,.02,1) 0s 1 both;
}
.p-ds-list:nth-of-type(2).animated,
.p-flow div:nth-of-type(2).animated{
    animation: fadeInUp 1s cubic-bezier(.43,.195,.02,1) 0.3s 1 both;
}
.p-ds-list:nth-of-type(3).animated,
.p-flow div:nth-of-type(3).animated{
    animation: fadeInUp 1s cubic-bezier(.43,.195,.02,1) 0.6s 1 both;
}

.c-s-ttl.animated .st1 {
    animation: colorOn 1.5s cubic-bezier(.43,.195,.02,1) 0s 1 both;
}
@keyframes colorOn {
    0% {
        fill:#FFFFFF;
    }
    100% {
        fill:#45C3B4;
    }
}
.c-s-ttl.animated .st2 {
    animation: borderOn 1.5s cubic-bezier(.43,.195,.02,1) 0s 1 both;
}
@keyframes borderOn {
    0% {
        stroke-width:2;
    }
    100% {
        stroke-width:0;
    }
}