@charset "utf-8";

/* ロード アニメーション
--------------------------------------------------------------- */

@keyframes pageFadeIn {
    to {
        opacity: 1;
    }
}

@keyframes mvLogoIn {
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.main-visual__heading {
    /* 各要素のアニメーション 2.4s */
    --mv-item-duration: 2.4s;
    /* 次の要素は1.2s後に開始 = 1.2s被せる */
    --mv-item-interval: 0.45s;
    /* 合計時間: (1.2s * 2) + 2.4s = 4.8s */

    --mv-item-easing: cubic-bezier(0.16, 1, 0.65, 0.95);
}

.main-visual__logo,
.main-visual__catchphrase,
.main-visual__address {
    opacity: 0;
    animation: mvLogoIn var(--mv-item-duration) var(--mv-item-easing) forwards;
}

.main-visual__logo {
    animation-delay: calc(var(--mv-item-interval) * 0);
}

.main-visual__catchphrase {
    animation-delay: calc(var(--mv-item-interval) * 1);
}

.main-visual__address {
    animation-delay: calc(var(--mv-item-interval) * 2);
}


/* PC */
@media screen and (min-width:1024px) {
    body {
        opacity: 0;
        animation: pageFadeIn 2s ease forwards;
    }

    .main-visual__logo,
    .main-visual__catchphrase,
    .main-visual__address {
        transform: translateX(-50px);
    }
}

/* SP */
@media screen and (max-width:1023px) {

    .main-visual__logo,
    .main-visual__catchphrase,
    .main-visual__address {
        transform: translateY(8.2vw);
    }
}