.layout-banner {
    position: relative;
}

.layout-banner .decoration {
    position: absolute;
}

.section .nana-banner {
    position: relative;
    display: flex;
}

.section .comic .nana-banner {
    margin-left: 36.36%;
    margin-right: auto;
}

.section .animat .nana-banner {
    margin-left: auto;
    margin-right: 36.36%;
}

.section .novel .nana-banner {
    margin-left: 13.63%;
    margin-right: auto;
}

.section .comic .nana-banner .fix {
    transform: rotate(6deg);
}

.section .animat .nana-banner .fix {
    transform: rotate(-6deg);
}

.section .novel .nana-banner .fix {
    transform: rotate(-10deg);
}

.section .nana-banner .rotation {
    position: absolute;
    top: 0;
    z-index: -1;
    transform: rotate(-17deg);
}

.section .animat .nana-banner .rotation {
    transform: rotate(6deg);
}

.section.active .comic .rotation {
    animation: rotation1 .6s both .3s;
}

.section.active .animat .rotation {
    animation: rotation2 .6s both .3s;
}

.section.active .decoration {
    opacity: 0;
    animation: 0.2s fadeIn 0.9s both;
}

.layout.comic .decoration-1 {
    bottom: 24.13%;
    left: 2.18%;
    width: 19.27%;
    height: auto;
}

.layout.comic .decoration-2 {
    bottom: 2.8%;
    right: 0.36%;
    width: 17.45%;
    height: auto;
    animation-delay: 1s;
}

.layout.comic .decoration-3 {
    top: 3.33%;
    left: 5.45%;
    width: 12%;
    height: auto;
    animation-delay: 1.1s;
}

.layout.comic .decoration-4 {
    bottom: 2.66%;
    left: 15.45%;
    z-index: -2;
    width: 27.09%;
    height: auto;
    animation-delay: 1.2s;
}

.layout.comic .decoration-5 {
    top: 3.46%;
    right: 10%;
    z-index: -2;
    width: 21.63%;
    height: auto;
    animation-delay: 1.2s;
}

.layout.animat .decoration-1 {
    bottom: 6%;
    right: 5.45%;
    width: 20%;
    height: auto;
}

.layout.animat .decoration-2 {
    top: 1.41%;
    left: 2%;
    width: 12.18%;
    height: auto;
    animation-delay: 1s;
}

.layout.animat .decoration-3 {
    top: 5.33%;
    right: 3.63%;
    width: 20%;
    height: auto;
    animation-delay: 1.1s;
}

.layout.animat .decoration-4 {
    top: 24%;
    right: 0;
    z-index: -2;
    width: 45.45%;
    height: auto;
    animation-delay: 1.2s;
}

.layout.animat .decoration-5 {
    bottom: 23.33%;
    left: 0;
    z-index: -2;
    width: 23.63%;
    height: auto;
    animation-delay: 1.2s;
}

.layout.novel .decoration-1 {
    bottom: 13.33%;
    left: 7.27%;
    width: 20%;
    height: auto;
    animation-delay: 0.6s;
}

.layout.novel .decoration-2 {
    top: 13.46%;
    right: 5.63%;
    width: 15.81%;
    height: auto;
    animation-delay: 0.7s;
}

.layout.novel .decoration-3 {
    top: 48.66%;
    left: 0;
    width: 12%;
    height: auto;
    animation-delay: 0.8s;
}

.layout.novel .decoration-4 {
    top: 18.66%;
    left: 2.72%;
    z-index: -2;
    width: 30.76%;
    height: auto;
    animation-delay: 0.9s;
}

.layout.novel .decoration-5 {
    bottom: 4%;
    right: 0;
    z-index: -2;
    width: 47.27%;
    height: auto;
    animation-delay: 0.9s;
}

@keyframes rotation1 {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }

    100% {
        transform: rotate(-17deg);
        opacity: 1;
    }
}

@keyframes rotation2 {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }

    100% {
        transform: rotate(6deg);
        opacity: 1;
    }
}

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

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

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

    .layout.comic .decoration-1,
    .layout.comic .decoration-2,
    .layout.comic .decoration-3,
    .layout.animat .decoration-1,
    .layout.animat .decoration-2,
    .layout.animat .decoration-3,
    .layout.novel .decoration-1,
    .layout.novel .decoration-2,
    .layout.novel .decoration-3 {
        display: none;
    }

    .layout.comic .decoration-5,
    .layout.animat .decoration-5 {
        animation-delay: 1.3s;
    }

    .layout.novel .decoration-5 {
        animation-delay: 1s;
    }
}