@charset "utf-8";
/*===========================
article__header
===========================*/

.article__header {
    position: relative;
    padding: 280px 0 210px;
    overflow: hidden;
}

.page__title {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-left: 23.4%;
}

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

.pageTitle__jp {
    font-family: "Zen Kaku Gothic New";
    font-size: 2.8rem;
    font-weight: 400;
    line-height: normal;
}

.pageTitle__en {
    font-family: "DM Sans";
    font-size: 1.4rem;
    font-weight: 200;
    line-height: normal;
}

@media screen and (max-width: 767px) {
    .article__header {
        padding: 150px 0 100px;
    }

    .page__title {
        gap: 10px;
        margin-left: 13.3%;
    }

    .page__title::before {
        width: 300px;
        height: 295px;
        left: -100px;
        top: -24%;
        transform: translateY(-50%);
    }

    .pageTitle__jp {
        font-size: 2rem;
    }

    .pageTitle__en {
        font-size: 1rem;
    }
}

/*===========================
information
===========================*/

.information__title {
    margin: 140px auto;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.petal {
    width: 20px;
    height: auto;
}

.title__detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.title__jp {
    font-family: "Zen Kaku Gothic New";
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 2.4px;
}

.title__en {
    font-family: "DM Sans";
    font-size: 1rem;
    font-weight: 200;
    line-height: 150%;
    letter-spacing: 1.5px;
}

.information__list {
    margin: 100px auto 0;
    width: 82%;
    max-width: 1160px;
    display: flex;
    gap: 25px;
}

.information__detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px;
    align-items: center;
    min-height: 410px;
    gap: 30px;
    border-radius: 20px;
    background: #F8F8F8;
}

.information__detail:nth-child(1) {
    transition-delay: 0s;
}

.information__detail:nth-child(2) {
    transition-delay: 0.4s;
}

.information__detail:nth-child(3) {
    transition-delay: 0.8s;
}

.information__item {
    text-align: center;
    font-family: "Zen Kaku Gothic New";
    font-size: 2rem;
    font-weight: 400;
    line-height: normal;
}

.calender,
.cancel,
.wallet {
    width: 100px;
    height: auto;
}

.information__txt {
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 150%;
}

.bold {
    font-weight: 400;
}

.wave__twoPc {
    margin-top: 160px;
    width: 100%;
    height: auto;
}

.wave__twoSp {
    display: none;
}

@media screen and (max-width: 1024px) {
    .information__title {
        margin: 100px auto;
    }

    .calender,
    .cancel,
    .wallet {
        width: 80px;
    }
}

@media screen and (max-width: 767px) {
    .information__title {
        margin: 70px auto;
        gap: 15px;
    }

    .title__jp {
        font-size: 2rem;
        letter-spacing: 2px;
    }

    .title__en {
        font-size: 0.8rem;
        letter-spacing: 1.2px;
    }

    .information__list {
        margin: 65px auto 0;
        width: 80%;
        max-width: 400px;
        flex-direction: column;
        gap: 30px;
    }

    .information__detail {
        flex: none;
        min-height: 0;
        gap: 20px;
    }

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

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

    .information__item {
        font-size: 1.8rem;
    }

    .calender,
    .cancel,
    .wallet {
        width: 80px;
    }

    .information__txt {
        font-size: 1.4rem;
    }

    .wave__twoPc {
        display: none;
    }

    .wave__twoSp {
        display: block;
        margin-top: 120px;
        width: 100%;
        height: auto;
    }
}

/*===========================
flow
===========================*/

.section__flow {
    background-color: #F8E7DD;
    padding: 100px 0 0;
}

.flow__title {
    margin: 0 auto;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.flow__content {
    position: relative;
    margin-top: 140px;
}

.flow__content::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../images/moxibustion__flowPc.webp);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10;
}

.flow__list {
    margin-left: 35%;
    padding: 0 10% 700px 0;
    display: flex;
    flex-direction: column;
    gap: 80px;
    z-index: 100;
}

.flow__item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.flow__number {
    display: flex;
    width: 100px;
    height: 100px;
    padding: 24px 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 0.5px solid #FD7777;
    font-family: "DM Sans";
    font-size: 3.2rem;
    font-weight: 200;
    line-height: normal;
}

.item__detail {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.title__illust {
    display: flex;
    align-items: center;
    gap: 10px;
}

.item__title {
    font-family: "Zen Kaku Gothic New";
    font-size: 2rem;
    font-weight: 400;
    line-height: normal;
}

.karte {
    width: 38px;
    height: auto;
}

.item__txt {
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 300;
    line-height: normal;
}

.counseling {
    width: 35px;
    height: auto;
}

.clothes {
    width: 35px;
    height: auto;
}

.treatment {
    width: 34px;
    height: auto;
}

.littleWallet {
    width: 35px;
    height: auto;
}

@media screen and (max-width: 768px) {
    .section__flow {
        padding: 50px 0 0;
    }

    .flow__title {
        margin: 70px auto;
        gap: 15px;
    }

    .flow__content {
        margin-top: 55px;
    }

    .flow__content::before {
        content: "";
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url(../images/moxibustion__flowSp.webp);
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 10;
    }

    .flow__list {
        margin: 0 auto;
        padding: 0 0 400px;
        width: 80%;
        gap: 50px;
        position: relative;
        z-index: 100;
    }

    .flow__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .flow__number {
        width: 70px;
        height: 70px;
        padding: 24px 30px;
        font-size: 2.4rem;
    }

    .item__detail {
        gap: 10px;
    }

    .title__illust {
        gap: 5px;
    }

    .item__title {
        font-size: 1.8rem;
    }

    .karte {
        width: 30px;
    }

    .item__txt {
        font-size: 1.2rem;
        line-height: 150%;
    }

    .counseling {
        width: 30px;
    }

    .clothes {
        width: 30px;
    }

    .treatment {
        width: 29px;
    }

    .littleWallet {
        width: 30px;
    }
}

/*===========================
flow
===========================*/

.footer__content {
    margin-top: 300px;
}

@media screen and (max-width: 767px) {
    .footer__content {
        margin-top: 110px;
    }
}