@media screen and (max-width: 767px){
    .promo-popup{
        width: calc(100% - 20px);
        top: 50%;
        padding: 8px;
    }
    .promo-popup .promo-popup-close{
        font-size: 12px;
        padding: 7px 10px;
    }
    .promo-dock{
        left: 8px;
        bottom: 10px;
        width: 96px;
        padding: 6px;
    }

    .to-top{
        right: 12px;
        bottom: 12px;
        font-size: 11px;
        padding: 10px 12px;
    }

    .site-footer .site-footer-inner{
        padding: 14px 10px 12px;
    }
    .site-footer .footer-links{
        gap: 6px 18px;
    }
    .site-footer .footer-links li + li::before{
        left: -12px;
    }
    .site-footer .footer-links a{
        font-size: 13px;
    }
    .site-footer .footer-copy{
        font-size: 12px;
    }

    .flow-area{
        margin-top: 20px;
    }
    .flow-area .flow-head{
        font-size: 18px;
        padding: 10px 12px;
    }
    .flow-area .flow-head-dot{
        width: 16px;
        border-width: 4px;
    }
    .flow-area .flow-head-link{
        font-size: 12px;
        padding: 7px 10px;
    }
    .flow-area .flow-lead{
        font-size: 15px;
        line-height: 1.7;
    }
    .flow-area .flow-steps{
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .flow-area .flow-step{
        padding: 52px 14px 14px;
    }
    .flow-area .flow-step:not(:last-child)::after{
        display: none;
    }
    .flow-area .flow-step-badge{
        width: 56px;
        left: -10px;
        top: -28px;
        font-size: 34px;
    }
    .flow-area .flow-step-badge span{
        font-size: 12px;
    }
    .flow-area .flow-step-title{
        margin: -52px -14px 10px;
        padding: 10px 8px 8px;
        font-size: 18px;
    }
    .flow-area .flow-step-text{
        font-size: 15px;
    }
    .payment-area{
        margin-top: 20px;
    }
    .payment-area .payment-head{
        font-size: 18px;
        padding: 10px 12px;
    }
    .payment-area .payment-head-dot{
        height: 16px;
    }
    .payment-area .payment-list{
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .payment-area .payment-item{
        border-radius: 16px;
        aspect-ratio: auto;
        min-height: 160px;
    }
    .payment-area .payment-item img{
        width: 64px;
        height: 64px;
    }
    .payment-area .payment-label{
        font-size: 20px;
    }
    .payment-area .payment-label span{
        font-size: 16px;
    }
    .payment-area .payment-note{
        font-size: 12px;
        line-height: 1.6;
    }
    .payment-area .payment-catch{
        font-size: 30px;
    }
    .payment-area .payment-invoice{
        font-size: 24px;
    }
    .payment-area .payment-logo img{
        width: 64px;
    }
    .delivery-area{
        margin-top: 18px;
        padding-top: 14px;
    }
    .delivery-area .delivery-title{
        font-size: 16px;
        margin-bottom: 10px;
    }
    .delivery-area .delivery-list li{
        font-size: 12px;
        padding: 0 12px 0 10px;
    }

    .recommend-area .recommend-head{
        font-size: 18px;
        padding: 10px 12px;
    }
    .recommend-area .recommend-head-dot{
        width: 16px;
        border-width: 4px;
    }
    .recommend-area .recommend-lead{
        font-size: 15px;
        line-height: 1.7;
    }
    .recommend-area .recommend-grid{
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .recommend-area .recommend-item{
        grid-template-columns: 92px 1fr;
        gap: 10px;
    }
    .recommend-area .recommend-icon-box{
        border-width: 3px;
        border-radius: 10px;
    }
    .recommend-area .recommend-icon-box svg{
        width: 50px;
        height: 50px;
    }
    .recommend-area .recommend-title{
        font-size: 20px;
        gap: 6px;
    }
    .recommend-area .recommend-title span{
        font-size: 12px;
        padding: 5px 10px;
    }
    .recommend-area .recommend-desc{
        font-size: 15px;
        line-height: 1.5;
        margin-top: 6px;
    }

    .sec-special-point .point-list{
        gap: 14px;
    }
    .sec-special-point .point-item{
        width: 128px;
        border-width: 4px;
        padding: 14px 10px;
    }
    .sec-special-point .point-icon{
        font-size: 20px;
    }
    .sec-special-point .point-name{
        font-size: 13px;
        margin-top: 8px;
    }
}

@media screen and (max-width: 767px){
    section.inner.two-column{
        display: block;
    }
    section.inner.two-column .clm-right{
        width: 100%;
        position: static;
        margin-top: 20px;
    }
}