@charset "utf-8";

.fade-in {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 1.5s ease, transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/*===========================
article header
===========================*/

.article__header {
    background-image: url(../images/page-backPC.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-size: 100%; */
    margin-top: -118px;
    padding: 18% 0;
    position: relative;
    z-index: -100;
}

.page__title {
    top: 50%;
    left: 15.8%;
    font-size: 4rem;
    font-weight: 500;
    line-height: 150%;
    position: absolute;
    z-index: 10;
}

.page__title::before {
    content: '';
    display: inline-block;
    width: 117px;
    height: 107px;
    background-image: url(../images/decorationPC.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: -45px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}

@media screen and (max-width: 1024px) {
    .page__title {
        font-size: 3rem;
    }

    .page__title::before {
        width: 80px;
        height: 77px;
        left: -32px;
    }
}

/* .article header sp */
@media screen and (max-width: 767px) {
    .article__header {
        background-image: url(../images/page-backSP.webp);
        background-size: cover;
        margin-top: -62px;
        padding: 32% 0;
    }

    .page__title {
        top: 50%;
        left: 12%;
        font-size: 2rem;
    }

    .page__title::before {
        width: 50px;
        height: 45.7px;
        background-image: url(../images/decorationSP.webp);
        background-size: contain;
        background-position: center;
        left: -18px;
    }
}

/*===========================
aboutModern
===========================*/

.section__aboutModern {
    margin-top: 70px;
    background-image: url(../images/modern-herobackPC.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-size: 100%; */
}


.main__copyContent {
    margin: 0 auto;
    width: auto;
    max-width: 600px;
}

.main__copy,
.main__copySecond {
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 150%;
}

.main__copy {
    padding-top: 52px;
}

.main__copySecond {
    margin-top: 15px;
    text-align: right;
}

.pink {
    color: var(--primary-pink);
}

.main__txt {
    margin: 52px auto 0;
    width: fit-content;
    padding-bottom: 60px;
    text-align: center;
    font-family: "BIZ UDPGothic";
    font-size: 1.8rem;
    line-height: 250%;
}

.bold {
    font-weight: 700;
}

/* .aboutModern sp */
@media screen and (max-width: 767px) {
    .section__aboutModern {
        margin-top: 20px;
        background-image: url(../images/modern-herobackSP.webp);
        /* background-size: 100%; */
    }

    .main__copyContent {
        padding: 0 10%;
        max-width: 500px;
    }

    .main__copy,
    .main__copySecond {
        font-size: 2rem;
    }

    .main__copy {
        padding-top: 40px;
    }

    .main__copySecond {
        margin-top: 15px;
    }

    .main__txt {
        margin: 38px auto 0;
        padding-bottom: 40px;
        font-size: 1.6rem;
        line-height: 180%;
    }
}

/*===========================
appealPoint
===========================*/

.appeal__title {
    margin: 0 auto;
    width: fit-content;
    padding-top: 145px;
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 150%;
    position: relative;
}

.appeal__title::before {
    content: '';
    display: inline-block;
    width: 513px;
    height: 171px;
    background-image: url(../images/modern-txtback.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: -130px;
    top: 33%;
    /* transform: translateY(-50%); */
}

.appeal__content {
    padding-top: 75px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* align-items: center; */
    /* width: fit-content; */
    max-width: 1160px;
    width: 100%;
    gap: 20px;
}

.appeal__detail {
    display: block;
    width: 362px;
    max-width: 100%;
    height: auto;
}

/* 1つ目の画像：時差なし（すぐ動き出す） */
.appeal__detail:nth-child(1) {
    transition-delay: 0s;
}

    /* 2つ目の画像：0.3秒遅れて動き出す */
.appeal__detail:nth-child(2) {
    transition-delay: 0.5s;
}

    /* 3つ目の画像：0.6秒遅れて動き出す */
.appeal__detail:nth-child(3) {
    transition-delay: 1s;
}

/* .appealPoint sp */
@media screen and (max-width: 767px) {
    .appeal__title {
        padding-top: 70px;
        font-size: 1.8rem;
    }

    .appeal__title::before {
        width: 300px;
        height: 42px;
        left: -68px;
        top: 53%;
        /* transform: translateY(-50%); */
    }

    .appeal__content {
        padding-top: 20px;
        display: block;
        width: fit-content;
    }

    .appeal__detail {
        margin-top: 10px;
        width: 300px;
        transition-delay: 0s !important;
    }

    .appeal__detail:nth-child(2) {
        transition-delay: 0s;
    }

    .appeal__detail:nth-child(3) {
        transition-delay: 0s;
    }
}

/*===========================
invitation
===========================*/

.section__invitation {
    margin-top: 70px;
    position: relative;
    z-index: 0;
}

.section__invitation::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(../images/modern-backPC.webp);
    background-position: center;
    background-size: 100% 800px;
    background-repeat: no-repeat;
    z-index: -10;
}

.invitation__txt {
    margin: 0 auto;
    width: fit-content;
    /* justify-content: center; */
    text-align: center;
    padding: 300px 450px;
    font-size: 1.8rem;
    line-height: 300%;
    background-image: url(../images/circle-invitationPC.webp);
    background-size: 600px 570px;
    background-position: center 45%;
    background-repeat: no-repeat;
    position: relative;
}

.invitation__txt::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url(../images/invitation-img01.webp),
        url(../images/invitation-img02.webp),
        url(../images/invitation-img03.webp),
        url(../images/invitation-img04.webp),
        url(../images/invitation-img05.webp),
        url(../images/invitation-img06.webp);
    background-position:
        15% 10%,
        8% 57%,
        20% 90%,
        75% 8%,
        95% 45%,
        80% 93%;
    background-repeat: no-repeat;
    background-size:
        350px 242px,
        300px 208px,
        250px 173px,
        250px 173px,
        350px 242px,
        300px 208px;
    z-index: -1;
}

.tbBr {
    display: none;
}

@media screen and (max-width: 1249px) {
    .invitation__txt {
        font-size: 1.6rem;
        line-height: 200%;
        background-image: url(../images/circle-invitationPC.webp);
        background-size: 550px 510px;
        background-position: center 45%;
    }

    .tbBr {
        display: block;
    }
}

@media screen and (max-width: 1094px) {
    .invitation__txt {
        padding: 300px 350px;
    }

    .invitation__txt::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            url(../images/invitation-img01.webp),
            url(../images/invitation-img02.webp),
            url(../images/invitation-img03.webp),
            url(../images/invitation-img04.webp),
            url(../images/invitation-img05.webp),
            url(../images/invitation-img06.webp);
        background-position:
            15% 10%,
            8% 57%,
            20% 90%,
            75% 8%,
            95% 45%,
            80% 93%;
        background-repeat: no-repeat;
        background-size:
            320px 221px,
            270px 187px,
            220px 152px,
            220px 152px,
            320px 221px,
            270px 187px;
        z-index: -1;
    }
}

/* .invitation sp */
@media screen and (max-width: 892px) {
    .tbBr {
        display: none;
    }

    .section__invitation {
        margin: 30px 0 50px;
    }

    .section__invitation::before {
        background-image: url(../images/modern-backSP.webp);
        background-size: 100% 556px;
    }

    .invitation__txt {
        padding: 205px 50px;
        font-size: 1.4rem;
        line-height: 250%;
        background-image: url(../images/circle-invitationSP.webp);
        background-size: 400px 355px;
        background-position: center 45%;
    }

    .invitation__txt::before {
        background-image:
            url(../images/invitation-img01.webp),
            url(../images/invitation-img02.webp),
            url(../images/invitation-img04.webp),
            url(../images/invitation-img05.webp);
        background-position:
            5% 8%,
            5% 92%,
            95% 10%,
            95% 90%;
        background-size:
            46% auto,
            46% auto,
            46% auto,
            46% auto;
    }
}

@media screen and (max-width: 365px) {
    .invitation__txt {
        padding: 205px 25px;
        background-size: 400px 350px;
    }
}