@charset "UTF-8";

/* ------------------
main
-------------------*/

.main__topView {
    position: relative;
    width: 100VW;
    height: 100vh;
}

#main__slideshow {
    z-index: 5;
    width:  100vw; /* 画像の横幅に合わせて記述 */
    height: 85vh; /* 画像の高さに合わせて記述 */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    animation: fadeIn 2.5s ease-out forwards;
    mask-image: linear-gradient(to bottom, rgb(255, 255, 255) 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgb(255, 255, 255) 40%, transparent 100%); /* Safari用 */
}

#main__slideshow img {
    width:  100vw;
    height: 85vh;
    position: absolute;
    top: 50px;
    left:0;
    z-index: 8;
    opacity: 0;
    object-fit: cover;
    transform: scale(1.0);
    will-change: opacity;
}

#main__slideshow img.active {
    z-index: 10;
    opacity: 1.0;
    transition: transform 5.5s linear;
    transform: scale(1.1);
}

#main__slideshow img.last-active {
    z-index: 9;
    transform: scale(1.1);
}

.main__txtBox {
    display: flex;
    position: absolute;
    width: 100vw;
    height: 100px;
    flex-direction: column;
    left: 50vw;
    top: 80vh;
    opacity: 0;
    animation: fadeInUpTxtBox 1.5s ease-out forwards;
    animation-delay: calc(5.2s + var(--delay-offset));
    z-index: 10;
}

@keyframes fadeInUpTxtBox {
    from {
        opacity: 0;
        transform: translate(-50%, -77%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -80%);
    }
}

.main__txtBox-1,
.main__txtBox-2 {
    display: flex;
    width: 100%; /* 横幅いっぱいに広げることで、寄せが可能になる */
    justify-content: center;
    align-items: center;
    z-index: 15;
}

.main__txt-1,
.main__txt-2,
.main__txt-3,
.main__txt-4,
.main__txt-5,
.main__txt-6,
.main__txt-7,
.main__txt-8,
.main__txt-9,
.main__txt-10,
.main__txt-11,
.main__txt-12,
.main__txt-13,
.main__txt-14,
.main__txt-15,
.main__txt-16,
.main__txt-17 {
    flex-shrink: 1;
    font-family: "Noto Serif", "Noto Serif JP", serif;
    font-size: 2.5rem;
    font-weight: 200;
    letter-spacing: 0.15rem;
    line-height: 1.7;
    opacity: 0;
    z-index: 20;
    animation: fadeIn 1.5s ease-out forwards;
}

.main__txt-1 {
    animation-delay: calc(6.0s + var(--delay-offset));
}

.main__txt-2 {
    animation-delay: calc(6.15s + var(--delay-offset));
}

.main__txt-3 {
    animation-delay: calc(6.3s + var(--delay-offset));
}

.main__txt-4 {
    animation-delay: calc(6.45s + var(--delay-offset));
}

.main__txt-5 {
    animation-delay: calc(6.6s + var(--delay-offset));
}

.main__txt-6 {
    animation-delay: calc(6.75s + var(--delay-offset));
}

.main__txt-7 {
    animation-delay: calc(6.9s + var(--delay-offset));
}

.main__txt-8 {
    animation-delay: calc(7.05s + var(--delay-offset));
}

.main__txt-9 {
    animation-delay: calc(7.3s + var(--delay-offset));
}

.main__txt-10 {
    animation-delay: calc(7.6s + var(--delay-offset));
}

.main__txt-11 {
    animation-delay: calc(7.75s + var(--delay-offset));
}

.main__txt-12 {
    animation-delay: calc(7.9s + var(--delay-offset));
}

.main__txt-13 {
    animation-delay: calc(8.05s + var(--delay-offset));
}

.main__txt-14 {
    animation-delay: calc(8.2s + var(--delay-offset));
}

.main__txt-15 {
    animation-delay: calc(8.35s + var(--delay-offset));
}

.main__txt-16 {
    animation-delay: calc(8.5s + var(--delay-offset));
}

.main__txt-17 {
    animation-delay: calc(8.65s + var(--delay-offset));
}

.scroll {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    animation: fadeInUpFirstView 1.5s ease-out forwards;
    animation-delay: calc(9.5s + var(--delay-offset));
    animation-fill-mode: both;
}

.scroll__txt {
    font-size: 2rem;
    color: #B897BA;
}

.scroll__img {
    width: 30px;
    height: auto;
}


@media screen and (min-width: 960px) {
    #main__slideshow {
        height: 90vh;
        mask-image: linear-gradient(to bottom, rgb(255, 255, 255) 20%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, rgb(255, 255, 255) 20%, transparent 100%); /* Safari用 */
    }
    #main__slideshow img {
        height: 90vh;
        top: 100px;
    }
    .main__txtBox {
        height: 200px;
        flex-direction: row-reverse;
        left: -30vw;
        top: 50vh;
    }
    .main__txtBox-1,
    .main__txtBox-2 {
        display: block;
        width: 70px; /* 横幅いっぱいに広げることで、寄せが可能になる */
        justify-content: center;
        align-items: center;
        z-index: 15;
    }
    .main__txt-1,
    .main__txt-2,
    .main__txt-3,
    .main__txt-4,
    .main__txt-5,
    .main__txt-6,
    .main__txt-7,
    .main__txt-8,
    .main__txt-9,
    .main__txt-10,
    .main__txt-11,
    .main__txt-12,
    .main__txt-13,
    .main__txt-14,
    .main__txt-15,
    .main__txt-16,
    .main__txt-17 {
        font-size: 4rem;
        letter-spacing: 0.15rem;
        line-height: 1.2;
    }
} /* pc */


.welcome {
    text-align: center;
    color: #B897BA;
    margin-top: -70px;
}

.greeting {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    border-radius: 30px;
    margin: 60px auto 0;
    padding: 30px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.news {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.family-recruitment,
.pet-hotel,
.web-shop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 70px;
}

.family-recruitment__imgBox,
.pet-hotel__imgBox,
.web-shop__imgBox {
    width: 90vw;
    height: 200px;
    border-radius: 0 30px 30px 0;
    overflow: hidden;
}

.family-recruitment__img,
.pet-hotel__img,
.web-shop__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    position: relative;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    transition: transform 2.0s ease-out; /* ズームを少しゆっくりに */
    transform: scale(1.0);
}

.family-recruitment__img {
    width: 150%;
    left: -20%;
}

.fadeIn-left.is-visible .family-recruitment__img,
.fadeIn-left.is-visible .pet-hotel__img,
.fadeIn-left.is-visible .web-shop__img {
    opacity: 1;
    transform: scale(1.1);
}

.family-recruitment__txtBox,
.pet-hotel__txtBox,
.web-shop__txtBox {
    display: flex;
    flex-direction: column;
    width: 100vw;
    justify-content: center;
    align-items: center;
    object-fit: cover;
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url("../images/background.PNG");
    background-size: 200%;
    background-repeat: repeat;
    border-radius: 30px 0 0 30px;
    margin-top: -15px;
    padding: 40px calc(10% + 50px) 50px 30px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.greeting__title,
.family-recruitment__title,
.pet-hotel__title,
.web-shop__title,
.faq__title {
    text-align: center;
}

.greeting__txt,
.family-recruitment__txt,
.pet-hotel__txt,
.web-shop__txt,
.faq__txt {
    margin-top: 30px;
}

.family-recruitment .btn,
.pet-hotel .btn,
.web-shop .btn {
    background-color: #FFF;
    border: #B897BA solid 1px;
    color: #B897BA;
}


.faq {
    width: 100%;
    max-width: 500px;
    background-color: #B897BA;
    border-radius: 30px;
    margin: 70px auto 0;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.faq__title {
    color: #FFF;
}

.faq .decorationLine {
    background-color: #FFF;
    margin: 20px auto 0;
}

.faq__question-txt span {
    color: #FFF;
}

.faq__btn {
    background-color: #FFF;
    color: #B897BA;
    border-radius: 50px;
}

#trade-law {
    text-align: center;
    margin: 70px 0 0;
}

.trade-law__title {
    margin-top: 20px;
}

.trade-law__txt {
    display: inline-block;
    text-align: left;
    margin-top: 20px;
}

@media screen and (min-width: 768px) {
    .greeting {
        margin: 90px auto 0;
        padding: 50px;
    }
    .news,
    .family-recruitment,
    .pet-hotel,
    .web-shop {
        width: 100%;
        max-width: 80vw;
        margin: 90px auto 0;
    }
    .family-recruitment__imgBox,
    .pet-hotel__imgBox,
    .web-shop__imgBox {
        width: 55vw;
        height: auto;
        max-height: 300px;
    }
    .family-recruitment__img,
    .pet-hotel__img,
    .web-shop__img {
        height: auto;
        max-height: 400px;
    }
    .family-recruitment__img {
        width: 150%;
    }
    .family-recruitment__txtBox,
    .pet-hotel__txtBox,
    .web-shop__txtBox {
        width: 55vw;
        object-fit: cover;
        margin-top: -250px;
        padding: 30px 10% 30px;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    }
    .faq {
        width: 100%;
        max-width: 500px;
        background-color: #B897BA;
        margin: 90px auto 0;
        padding: 30px;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    }
    .trade-law {
        margin-top: 90px;
    }
}