@charset "utf-8";

/*====================
body
====================*/
body {
    background-image: url(../images/bg-image-sp.png);
    background-repeat: repeat;
    animation: slide 16s linear infinite;
}

@keyframes slide {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100px 200px;
    }
}

@media screen and (min-width: 769px) {
    body {
        background-image: url(../images/bg-image.png);
        animation: slide 60s linear infinite;
    }
    
    @keyframes slide {
        100% {
            background-position: -100vw 100vh;
        }
    }
}

/*====================
mainVisual
====================*/
.mainVisual {
    margin-top: 32px;
    text-align: center;
    position: relative;
    z-index: 1;
    position: relative;
}

.mainVisual::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    background-image: url(../images/flower-pnk.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 40px;
    right: 16%;
}

.mainVisual::after {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    background-image: url(../images/flower-red.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 190px;
    left: 10.6%
}

.about {
    color: var(--primary-pink, #E79C9C);
    text-align: center;
    font-family: Chewy;
    font-size: 4rem;
    line-height: 1.3;
}

.about__img {
    margin-top: 24px;
    width: 200px;
    height: auto;
}

/* article__header pc */
@media screen and (min-width: 769px) {
    .mainVisual {
        margin-top: 40px;
    }

    .mainVisual::before {
        width: 96px;
        height: 96px;
        top: 108px;
        right: 36.875%;
    }

    .mainVisual::after {
        width: 96px;
        height: 96px;
        top: 258px;
        left: 36.875%;
    }

    .about {
        font-size: 7.2rem;
    }

    .about__img {
        width: 300px;
    }

} /* pc 769px */

/*====================
fadeIn
====================*/
.fadeIn {
    transform: translate(0, 50px);
    opacity: 0;
    transition: 0.8s;
}

.fadeIn.animated {
    transform: translate(0, 0);
    opacity: 1;
}

/*====================
about
====================*/
.about__container {
    margin-top: -48px;
}

.about__wrapper {
    background-color: var(--primary-lightpink, #FBEEEE);
}

.profile__wrapper {
    padding: 24px 10.6% 0;
    text-align: center;
}

.profile__img {
    width: 215px;
    height: auto;
}

.profile__heading {
    margin-top: 24px;
    color: var(--primary-darkpink, #D85E5E);
    font-family: Delius;
    font-size: 2rem;
    line-height: 1.5;
}

.profile__subname {
    color: var(--primary-darkpink, #D85E5E);
    font-size: 1.6rem;
    line-height: 1.5;
}

.profile__txt {
    margin-top: 16px;
    text-align: left;
    color: var(---primary-black, #333333);
    font-size: 1.4rem;
    line-height: 2.4;
}

/* about pc */
@media screen and (min-width: 769px) {
    .about__container {
        text-align: center;
        margin-top: -80px;
    }

    .about__wrapper {
        margin: 0 auto;
        max-width: 1200px;
    }

    .profile__wrapper {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 160px;
        display: flex;
        gap: 40px;
    }

    .profileImg {
        width: 50%;
    }

    .profile__img {
        width: 100%;
        height: auto;
    }

    .profile__content {
        width: 50%;
    }

    .profile__heading {
        margin-top: 0;
        text-align: left;
        font-size: 3rem;
    }

    .profile__subname {
        text-align: left;
        font-size: 2.4rem;
    }

    .profile__txt {
        font-size: 1.8rem;
        line-height: 2.4;
    }
}/* pc 769px */

/*====================
biography
====================*/
.biography__container {
    padding: 80px 10.6% 0;
    background-color: var(--primary-lightpink, #FBEEEE);
}

.biography__heading {
    color: var(--primary-darkpink, #D85E5E);
    text-align: center;
    font-family: Delius;
    font-size: 2rem;
    line-height: 1.5;
}

.biography__list {
    margin-top: 40px;
}

.biography__date {
    font-size: 1.6rem;
    font-weight: 500;
}

.biography__txt {
    margin-top: 8px;
    font-size: 1.6rem;
}

.about__dot {
    margin: 9px 0 16px;
    text-align: center;
}

/* biography pc */
@media screen and (min-width: 769px) {
    .biography__container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 120px 160px 0;
    }

    .biography__heading {
        font-size: 3rem;
    }

    .biography__item {
        display: flex;
        gap: 24px;
    }

    .biography__date {
        width: 15%;
        font-size: 1.8rem;
    }

    .biography__txt {
        margin-top: 0;
        width: 85%;
        font-size: 1.8rem;
    }

    .about__dot {
        margin: 17px 0 24px;
    }
} /* pc 769px */

/*====================
information
====================*/
.information__container {
    padding: 80px 5.3%;
    background-color: var(--primary-lightpink, #FBEEEE);
}

.information__heading {
    margin-bottom: 40px;
    color: var(--primary-darkpink, #D85E5E);
    text-align: center;
    font-family: Delius;
    font-size: 2rem;
    line-height: 1.5;
}

.information__item {
    margin-top: 16px;
    padding: 20px 5.3%;
    background-color: var(--primary-lightbeige, #FDFDFB);
}

.information__date {
    font-size: 1.6rem;
}

.information__title {
    margin-top: 8px;
    font-size: 1.6rem;
    font-weight: 500;
}

.information__txt {
    margin-top: 24px;
    font-size: 1.4rem;
}

.information__img {
    margin-top: 16px;
}

/* information pc */
@media screen and (min-width: 769px) {
    .information__container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 120px 160px 120px;
    }

    .information__heading {
        font-size: 3rem;
    }

    .information__item {
        display: flex;
        justify-content: space-between;
        margin-top: 24px;
        padding: 40px;
        gap: 40px;
    }

    .information__content {
        width: 50%;
    }

    .information__date {
        font-size: 1.8rem;
    }

    .information__title {
        font-size: 2.4rem;
    }

    .information__txt {
        font-size: 1.8rem;
    }

    .informationImg {
        width: 50%;
    }

    .information__img {
        width: 100%;
        height: auto;
    }

    .information__img:first-of-type {
        margin-top: 0;
    }
} /* pc 769px */