@charset "utf-8";
/* animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; */

.main .logo-section .logo{ opacity: 0; }
.main .logo-section.on .logo{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.main .everyday-section .inner{ opacity: 0; }
.main .everyday-section.on .inner{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.main .main-title-section .h2{ opacity: 0; }
.main .main-title-section.on h2{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.main .gallery-list > li{ opacity: 0; }
.main .on .gallery-list > li:nth-child(1) { animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .on .gallery-list > li:nth-child(2) { animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.main .on .gallery-list > li:nth-child(3) { animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }
.main .on .gallery-list > li:nth-child(4) { animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running; }
.main .on .gallery-list > li:nth-child(5) { animation: fadeIn 0.5s ease-in-out 0.4s 1 forwards running; }
.main .on .gallery-list > li:nth-child(6) { animation: fadeIn 0.5s ease-in-out 0.5s 1 forwards running; }


.main .store-section .inner{ opacity: 0; }
.main .store-section.on .inner{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.main .note-section .note-list > li{ opacity: 0; }
.main .note-section.on .note-list > li:nth-child(1){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .note-section.on .note-list > li:nth-child(2){ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.main .note-section.on .note-list > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }
.main .note-section.on .note-list > li:nth-child(4){ animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running; }
.main .note-section.on .note-list > li:nth-child(5){ animation: fadeIn 0.5s ease-in-out 0.4s 1 forwards running; }
.main .note-section.on .note-list > li:nth-child(6){ animation: fadeIn 0.5s ease-in-out 0.5s 1 forwards running; }
.main .note-section.on .note-list > li:nth-child(7){ animation: fadeIn 0.5s ease-in-out 0.6s 1 forwards running; }
.main .note-section.on .note-list > li:nth-child(8){ animation: fadeIn 0.5s ease-in-out 0.7s 1 forwards running; }

.sub1_1 .section1 .inner{ opacity: 0; }
.sub1_1 .section1.on .inner{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.sub1_1 .section2 .inner{ opacity: 0; }
.sub1_1 .section2.on .inner{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.sub1_1 .section3 .inner{ opacity: 0; }
.sub1_1 .section3.on .inner{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.sub .sub-banner .logo{ opacity: 0; animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.sub .sub-banner .bar{ opacity: 0; animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.sub .sub-banner h2{ opacity: 0; animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }



@keyframes fadeIn {
    0% {transform: translate3d(0px, 30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInDown {
    0% {transform: translate3d(0px, -30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInRight {
    0% { opacity: 0; transform: translate3d(30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translate3d(-30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}