@charset "UTF-8";

/* ----------main---------- */
main {
    background-color: var(--mainColor-white);
    overflow: auto;
    position: relative;
    z-index: -20;
}

.section--order {
    padding-bottom: 215px;
}

@media screen and (min-width:913px) {
    .section--order {
        margin-bottom: min(280px,19.44vw);
        padding-bottom: 120px;
    }
}

/* orderFlow */
.order__flow {
    padding: 60px 11.2% 0;
    margin-top: 39px;
}

.order__topic {
    font-size: 1.4rem;
    line-height: 1.5;
    padding: 5px 0 5px 40px;
    position: relative;
}

.order__topic--flow {
    animation: fadeIn 1s;
    animation-delay: 0.5s;
    opacity: 0;
    transform: translateY(10px);
    animation-fill-mode: forwards;
}

.order__topic::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(../images/icon_flower-blackA.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.orderFlow__list {
    counter-reset: listnum;
    margin: 0 auto;
    animation: fadeIn 1s;
    animation-delay: 1.5s;
    opacity: 0;
    transform: translateY(10px);
    animation-fill-mode: forwards;
}

.orderFlow__item {
    margin-top: 42px;
}

.orderFlow__name::before {
    display: block;
    width: 100px;
    height: 100px;
    counter-increment: listnum;
    content: counter(listnum);
    font-family: jost;
    font-size: 2rem;
    font-weight: 500;
    line-height: 100px;
    text-align: center;
    background-image: url(../images/icon_flower-blackB.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto 20px;
}

.orderFlow__name {
    font-size: 1.4rem;
    line-height: 1;
    text-align: center;
}

.orderFlow__txt {
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    margin-top: 20px;
}

.btn__contact {
    display: block;
    font-family: "neue-kabel";
    font-size: 1.6rem;
    font-weight: 600;
    text-align: end;
    line-height: 1;
    width: 95px;
    margin: 20px 0 0 auto;
    padding: 7px 45px 7px 0;
    position: relative;
}

.btn__faq {
    display: block;
    font-size: 1.2rem;
    line-height: 1;
    text-align: end;
    width: 117px;
    margin: 20px 0 0 auto;
    padding: 9px 45px 9px 0;
    position: relative;
}

.btn__contact::after,.btn__faq::after {
    content: '';
    display: block;
    background-image: url(../images/icon_arrowA.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    right: 0;
}

.btn__contact:hover,.btn__faq:hover {
    transform: translateX(5px);
    transition: 0.7s;
}

.btn__contact:hover::after,.btn__faq:hover::after {
    background-image: url(../images/icon_arrowB.png);
    transition: 0.7s;
}

/* orderFlow pc */
@media screen and (min-width:913px) {
    .order__flow {
        padding: 120px 11.11% 0;
        margin-top: 13px;
    }
    
    .order__topic {
        font-size: 2.2rem;
        padding: 9px 0 9px 70px;
    }
    
    .order__topic::before {
        width: 50px;
        height: 50px;
    }

    .orderFlow__list {
        margin-top: 60px;
        display: flex;
        flex-wrap: wrap;
        gap: 60px;
        justify-content: center;
    }

    .orderFlow__item {
        margin-top: 0;
        width: 300px;
    }

    .orderFlow__name::before {
        width: 150px;
        height: 150px;
        font-size: 3.6rem;
        line-height: 150px;
        margin: 0 auto 30px;
    }

    .orderFlow__name {
        font-size: 2rem;
    }

    .orderFlow__txt {
        font-size: 1.4rem;
    }

    .btn__contact {
        font-size: 1.8rem;
        width: 105px;
        margin-top: 30px;
        padding: 6px 45px 6px 0;
    }

    .btn__faq {
        font-size: 1.4rem;
        width: 129px;
        margin-top: 60px;
        padding: 8px 45px 8px 0;
    }
}
/* orderFlow pc */
/* orderFlow */

/* price */
.order__price {
    margin-top: 42px;
    padding: 0 11.2%;
}

.detail__category {
    margin: 42px 0 0 8.8vw;
    font-size: 1.2rem;
    line-height: 1;
}

.detail__category .subFont__number {
    font-size: 1.8rem;
    margin: 0 2px;
}

.detail__price {
    text-align: center;
    font-size: 3.2rem;
    line-height: 1;
    margin-top: 15px;
}

.detail__price .subFont__sansSerif {
    font-size: 1.8rem;
    font-weight: 700;
}

.mainFont {
    font-family: "yu-gothic-pr6n";
    font-size: 1.8rem;
}

.mainFont--small {
    font-size: 1rem;
    margin: 0 2px;
}

.detail__txt {
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: center;
    margin-top: 15px;
}

/* price pc */
@media screen and (min-width:913px) {
    .order__price {
        margin-top: 60px;
    }

    .order__detail {
        display: flex;
        align-items: center;
        margin-top: 60px;
    }

    .detail__category {
        margin: 29px 2.08vw 3px 17.36vw;
        font-size: min(2rem,1.38vw);
        transform: translateY(-3px);
    }
    
    .detail__category .subFont__number {
        font-size: min(3.2rem,2.22vw);
        margin: 0 0.41vw 0 0.69vw;
    }

    .detail__price {
        display: flex;
        align-items: center;
        font-size: min(6.4rem,4.44vw);
        margin: 0 0.27vw 0 0;
    }

    .detail__price .subFont__sansSerif {
        font-size: min(3.2rem,2.22vw);
        margin: 27px 0 5px;
    }

    .mainFont {
        font-size: min(3.2rem,2.22vw);
        margin: 16px 4.93vw 16px 0;
    }

    .mainFont--small {
        font-size: min(2rem,1.38vw);
        margin: 34px 0.48vw 10px 0;
    }

    .detail__txt {
        font-size: min(1.4rem,0.97vw);
        margin: 16px 0 6px;
    }

    .fadeIn.animated {
        animation-delay: 0.7s;
    }
}
/* price pc */
/* price */
/* ----------main---------- */