@charset "utf-8";


[fade] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.scroll-in {
    opacity: 1;
    transform: translateY(0);
}


/* ==============================


kv


=================================*/


.kv-logo {
    transform: translate(0, clamp(-300px, -11.96vw, -100px));
    transition: transform 1s ease;
    transition-delay: 2s;
}

.kv-logo.scroll-in {
    transform: translate(0, 0px);
}

/* --- ttl -------------------------------- */

.kv-ttl {
    opacity: 0;
    transform: scale(0);
    animation-fill-mode: forwards;
    animation-delay: 2s;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-name: bounceIn;
    animation-duration: 0.8s;
}

.scroll-in .kv-ttl {
    opacity: 1;
    animation-play-state: running;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    40% {
        opacity: 1;
        transform: scale(1.3);
    }

    60% {
        transform: scale(0.9);
    }

    80% {
        transform: scale(1.05);
    }

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

/* --- bg -------------------------------- */


.kv-img::after {
    opacity: 1;
    transition: opacity 1s ease-in-out;
    transition-delay: 1s;
}

.scroll-in .kv-img::after {
    opacity: 0;
}


.kv-bg img {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
    transition: opacity 1s ease-in-out, transform 1.4s ease;
    transform-origin: center;
    transition-delay: 1s;
}

.scroll-in .kv-bg img {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
}

/* --- dog -------------------------------- */


.kv-img-ctr div {
    opacity: 0;
    transition: opacity 0.6s ease-in-out, transform 1.4s ease;
}


.kv-img-ctr div.dog-01 {
    transition-delay: 0s;
    transform: translate(-70px, 0);
}

.kv-img-ctr div.dog-02 {
    transition-delay: 0.1s;
    transform: translate(60px, -60px);
}

.kv-img-ctr div.dog-03 {
    transition-delay: 0.3s;
    transform: translate(-50px, 40px);
}

.kv-img-ctr div.dog-05 {
    transition-delay: 0.4s;
    transform: translate(50px, 140px);
}

.kv-img-ctr div.dog-04 {
    transition-delay: 0.6s;
    transform: translate(0px, 60px);
}

.scroll-in .kv-img-ctr div {
    opacity: 1;
    transform: translate(0, 0) !important;
}



/* --- dog 回転-------------------------------- */
@keyframes jitter-rotate {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(5deg);
    }

    40% {
        transform: rotate(-4deg);
    }

    60% {
        transform: rotate(3deg);
    }

    80% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.jitter {
    animation: jitter-rotate 7s steps(1, end) infinite;
    display: inline-block;
}


/* ==============================


odoroki


=================================*/


.odoroki {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1;
}

.odoroki.odo-r {
    left: inherit;
    right: 0;
}

.odoroki span {
    content: "";
    display: inline-block;
    width: clamp(0px, 6.1vw, 84px);
    height: clamp(0px, 6.4vw, 89px);
    background: url(../img/cmn__odoroki-l-b.png) no-repeat center center/contain;
}

.odoroki.odo-r span {
    background: url(../img/cmn__odoroki-r-b.png) no-repeat center center/contain;
}

.odoroki.odo-m span {
    background: url(../img/cmn__odoroki-l-m.png) no-repeat center center/contain;
}

.odoroki.odo-m.odo-r span {
    background: url(../img/cmn__odoroki-r-m.png) no-repeat center center/contain;
}


@media screen and (max-width: 767px) {
    .odoroki span {
        width: clamp(0px, 13.3vw, 50px);
        height: clamp(0px, 16vw, 60px);
    }

}

/* --- potion -------------------------------- */

h3 .odoroki {
    top: clamp(-30px, -2.2vw, 0px);
}

.sec03-prd__ttl .odoroki {
    top: inherit;
    bottom: clamp(0px, 5.8vw, 80px);
    left: clamp(-100px, -7.2vw, 0px);
    transform: rotate(-50deg) scale(0.8);
}

.sec03-prd__slide .odoroki {
    top: clamp(0px, 12.3vw, 170px);
    right: clamp(-100px, -7.2vw, 0px);
    transform: rotate(50deg);
}

.sec03-present__img div .odoroki {
    top: clamp(-20px, -1.4vw, 0px);
    right: clamp(-20px, -1.4vw, 0px);
    transform: rotate(0deg) scale(0.9);
}

.sec04-poster__img .odoroki.odo-l {
    top: clamp(-60px, -4.3vw, 0px);
    left: clamp(-80px, -5.8vw, 0px);
    transform: rotate(0deg) scale(0.9);
}

.sec04-poster__img .odoroki.odo-r {
    top: inherit;
    right: clamp(-100px, -7.2vw, 0px);
    bottom: clamp(-80px, -5.8vw, 0px);
    transform: rotate(90deg) scale(0.9);
}

@media screen and (max-width: 767px) {

    h3 .odoroki {
        top: clamp(-20px, -8vw, 0px);
        left: clamp(-15px, -4vw, 0px);
    }

    h3 .odoroki.odo-r {
        right: clamp(-15px, -4vw, 0px);
    }

    .sec03-prd__ttl .odoroki {
        bottom: clamp(-5px, -1.3vw, 0px);
        left: clamp(-60px, -16vw, 0px);
        transform: rotate(-50deg) scale(0.6);
    }

    .sec03-prd__slide .odoroki {
        top: clamp(0px, 53.3vw, 200px);
        right: clamp(-40px, -10.7vw, 0px);
        transform: rotate(50deg) scale(0.6);
    }

    .sec03-present__img div .odoroki {
        top: clamp(-5px, -1.3vw, 0px);
        right: clamp(-25px, -6.7vw, 0px);
        transform: rotate(0deg) scale(0.9);
    }

    .sec04-poster__img .odoroki.odo-l {
        top: clamp(-60px, -16vw, 0px);
        left: clamp(-10px, -2.7vw, 0px);
        transform: rotate(30deg) scale(0.8);
    }

    .sec04-poster__img .odoroki.odo-r {
        right: clamp(-10px, -2.7vw, 0px);
        bottom: clamp(-60px, -16vw, 0px);
        transform: rotate(110deg) scale(0.8);
    }

}


/* --- move -------------------------------- */

.odoroki span {
    transform: scale(0);
    transition: transform .4s ease-in-out;
    transform-origin: bottom right;
    transition-delay: 0.5;
}

.odoroki.odo-r span {
    transform-origin: bottom left;
}

.scroll-in.odoroki span {
    transform: scale(1);
}



/* ==============================


看板


=================================*/

.sec02__prd-txt {
    opacity: 1;
    transform: translateY(-580px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    transition-delay: 1s;
}

.sec02__prd-txt.scroll-in {
    transform: translateY(0px);
}

@media screen and (max-width: 767px) {
    .sec02__prd-txt {
        transform: translateY(clamp(-270px, -72vw, 0px));
        transition-delay: 1s;
    }

}

/* ==============================


吹き出し


=================================*/

.one .sec03-prd__slide::before {
    transform: rotate(-50deg) scale(0);
    opacity: 0;
    transform-origin: bottom right;
    transition: transform .6s ease-in-out, opacity .6s ease-in-out;
    transition-delay: 1s;
}

.one .sec03-prd__slide.scroll-in::before {
    transform: rotate(0deg) scale(1);
    opacity: 1;
}

/* ==============================


sec03 present お札


=================================*/
.sec03-present__img div:nth-of-type(2)::before {
    transform: rotate(-60deg) scale(0.6);
    opacity: 0;
    transform-origin: bottom right;
    transition: transform .8s ease-in-out, opacity .8s ease-in-out;
    transition-delay: 0.6s;
}

.sec03-present__img div.scroll-in:nth-of-type(2)::before {
    transform: rotate(0deg) scale(1);
    opacity: 1;
}

/* ==============================


sec04 吹き出し


=================================*/

.sec04-poster__txt div {
    transform: rotate(-40deg) scale(0);
    opacity: 0;
    transform-origin: bottom right;
    transition: transform .8s ease-in-out, opacity .8s ease-in-out;
    transition-delay: 0.3s;
}

.sec04-poster__txt div.scroll-in {
    transform: rotate(0deg) scale(1);
    opacity: 1;
}


.sec04-poster__img::before {
    transform: translateX(-100px) scale(1);
    transform-origin: bottom left;
    transition: transform .8s ease-in-out;
    transition-delay: 0.5s;
}

.sec04-poster__img.scroll-in::before {
    transform: translateX(0px) scale(1);
}


@media screen and (max-width: 767px) {

    .sec04-poster__img::before {
        transform: rotate(-100deg) scale(0);
        transform-origin: bottom right;
        transition: transform .8s ease-in-out, opacity .8s ease-in-out;
        transition-delay: 0.3s;
    }

    .sec04-poster__img.scroll-in::before {
        transform: rotate(0deg) scale(1);
    }

}

/* ==============================


sec05 お札


=================================*/

.sec05-camp__ttl::before {
    transform: rotate(-60deg) scale(0.6);
    opacity: 0;
    transform-origin: bottom right;
    transition: transform .8s ease-in-out, opacity .8s ease-in-out;
    transition-delay: 0.3s;
}

.sec05-camp__ttl.scroll-in::before {
    transform: rotate(0deg) scale(1);
    opacity: 1;
}

/* ==============================


sec03 fuki sp


=================================*/
.one.sec03-prd::before {
    opacity: 0;
    transform: scale(0.3) rotate(50deg);
    transition: transform .8s ease-in-out, opacity .8s ease-in-out;
    transform-origin: bottom left;
    transition-delay: 0.5s;
}

.scroll-in>.one.sec03-prd::before {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ==============================


sec03 背景群


=================================*/
.dsec03-nami-1,
.dsec03-nami-2,
.dsec03-nami-3 {
    transform: translateX(-300px);
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.dsec03-nami-2 {
    transform: translateX(300px);
}

.dsec03-nami-1.scroll-in,
.dsec03-nami-2.scroll-in,
.dsec03-nami-3.scroll-in {
    transform: translateX(0px);
}

/* --- dog -------------------------------- */

.dsec03-dog-1 {
    transform: translateX(150px);
}


.dsec03-dog-2 {
    transform: translateX(-150px);
}

.dsec03-dog-3 {
    transform: translateY(150px);
}


.dsec03-dog-1.scroll-in,
.dsec03-dog-2.scroll-in,
.dsec03-dog-3.scroll-in {
    transform: translate(0px, 0px);
}