@charset "UTF-8";
/* guide-order CSS ----------------- */
.sec-orderflow {
    container-type: inline-size;
    container-name: orderflow;
}

/* icon */
.i-order_payment{
    background-image: url(../../img/guide/icon-order_payment.svg);
}
.i-order_proofreading{
    background-image: url(../../img/guide/icon-order_proofreading.svg);
}
.i-order_delivery{
    background-image: url(../../img/guide/icon-order_delivery.svg);
}

/* flow-item */
.flow-item{
    gap: 30px;
    margin-bottom: 50px;
}

.flow-item .icon-box{
    align-self: flex-start;
    background-color: var(--color-main);
    padding: 10px;
    border-radius: 50%;
    position: relative;
}
.flow-item .icon-box .icon{
    display: block;
    width: 60px;
    height: 60px;
}
.flow-item .icon-box .icon.i-cart{
    width: 40px;
    height: 40px;
    margin: 10px;
}
.flow-item .icon-box::before{
    content: "";
    display: block;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background-color: var(--bg-card);
    width: 20px;
    height: 25px;
    position: absolute;
    top: 50%;
    left: calc(100% + 11px);
    transform: translateY(-50%);
}

.flow-item .inner-box{
    flex: 1;
    background-color: var(--bg-card);
    padding: 30px;
    border-radius: 5px;
    position: relative;
}
.flow-item .inner-box::before{
    content: "";
    display: block;
    width: 5px;
    height: calc(100% + 50px);
    background-color: var(--bg-card);
    position: absolute;
    top: 10px;
    left: -70px;
    transform: translateX(-50%);
    z-index: -1;
}
.flow-item:last-of-type .inner-box::before{
    display: none;
}

.flow-item .inner-box.date-confirm{
    color: var(--text-white);
    background-color: var(--color-sub2);
    padding: 10px 20px;
}
.flow-item .inner-box.date-confirm::before{
    left: 40px;
}

@container orderflow (max-width: 500px){
    .flow-item {
        gap: 20px;
        margin-bottom: 40px;
    }
    .flow-item .icon-box {
        padding: 5px;
    }
    .flow-item .icon-box::before {
        width: 15px;
        height: 25px;
        left: calc(100% + 6px);
    }
    .flow-item .icon-box .icon {
        display: block;
        width: 55px;
        height: 55px;
    }
    .flow-item .icon-box .icon.i-cart {
        width: 35px;
        height: 35px;
    }
    .flow-item .inner-box {
        padding: 25px 20px;
    }
    .flow-item .inner-box::before {
        left: -52.5px;
    }
    .flow-item .inner-box.date-confirm::before {
        left: 32.5px;
    }
}

@container orderflow (max-width: 400px){
    .flow-item {
        gap: 15px;
    }
    .flow-item .icon-box .icon {
        width: 45px;
        height: 45px;
    }
    .flow-item .icon-box .icon.i-cart {
        margin: 5px;
    }
    .flow-item .icon-box::before {
        width: 10px;
        height: 20px;
    }
    .flow-item .inner-box {
        padding: 15px;
    }
    .flow-item .inner-box::before {
        left: -42.5px;
    }
    .flow-item .inner-box.date-confirm::before {
        left: 27.5px;
    }
}


/* guide-order_past CSS ----------------- */
.sec-orderflow_past {
    container-type: inline-size;
    container-name: orderflow_past;
}

.guide-order_past .flow-item .inner-box::before {
    top: 35px;
    left: -40px;
}
.guide-order_past .flow-item .icon-box {
    margin-top: 30px;
}
.guide-order_past .past-img {
    max-width: 600px;
}
.guide-order_past .past-img-sp {
    max-width: 400px;
    border: 1px solid var(--color-border);
}

@container orderflow_past (max-width: 550px){
    .flow-item {
        gap: 15px;
        margin-bottom: 30px;
    }

    .guide-order_past .flow-item .icon-box {
        margin-top: 20px;
    }
    .flow-item .icon-box::before {
        width: 10px;
        height: 20px;
        left: calc(100% + 6px);
    }

    .flow-item .inner-box {
        padding: 20px 15px;
    }
    .flow-item .inner-box::before {
        height: calc(100% + 30px); 
    }
    .guide-order_past .flow-item .inner-box::before {
        left: -25px;
    }
}