.new-wrap {
    * {
        box-sizing: border-box;
    }
    button {
        appearance: none;
    }


    .header-fixed {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:100;
        .banner {
            position:relative;
            a {
                display:block;
            }
        }

        .btn-header-top {
            border:0;
            padding:0;
            margin:0;
            background-color: #f3f3f3;
            width:37px;
            position:fixed;
            z-index: 100;
            top:0;
            right:10px;
            border-radius:0 0 4px 4px;
        }
    }

    .header-tab {
        background-color: #fff;
        padding:10px;
        display:flex;
        width:100%;
        gap:10px;
        button {
            appearance: none;
            border:1px solid #665B94;
            border-radius: 4px;
            background-color: #fff;
            font-size:14px;
            padding:0 10px;
            flex:1 1 auto;
            box-sizing: border-box;
            color:#665B94;
            height:24px;
            letter-spacing:-0.03em;
            
            &.on {
                color:#fff;
                background-color: #665B94;
            }
        }
    }

    .header-top {
        display:flex;
        width:100%;
        justify-content: space-between;
        padding:15px 10px 15px;
        .right-area {
            display:flex;
            flex-shrink:0;
            gap:15px;
        }
        .left-area {
            display:flex;
            flex-shrink:0;
            gap:20px;
        }
        button {
            appearance: none;
            color:#0D2432;
        }
        .btn-hd {
            border:0;
            background-color: transparent;
            position:relative;
            padding:0;
            flex-shrink: 0;
            display:inline-block;
            img {
                height: 21px;
                width: auto;
            }

            em {
                display:inline-block;
                width: 18px;
                height: 18px;
                line-height: 18px;
                font-style: normal;
                background-color: #ff0001;
                color:#fff;
                text-align:center;
                font-weight:600;
                font-size:12px;
                border-radius: 50%;
                position:absolute;
                top:-6px;
                right:-8px;
                font-family: 'Cafe24Ohsquare', sans-serif;
            }
        }

        .btn-hd.btn-back {
            img {
                width:auto;
                height:21px;
            }
        }


        .btn-hd.btn-pickup-order {
            display:inline-block;
            position:relative;
            div {
                display:flex;
                overflow:hidden;
                min-width: 19px;
            }
            img {
                flex-shrink: 0;
                position:relative;
                width:19px;
                z-index: 10;
            }
            span {
                overflow: hidden;
                height:21px;
                line-height:19px;
                font-size:12px;
                letter-spacing:-0.05em;
                margin-left:-8px;
                display:inline-block;
                white-space: nowrap;
                border:1px solid #0D2432;
                border-radius:0 4px 4px 0;
                background-color: #fff;
                box-sizing:border-box;
                max-width:0;
                transition:all 1.2s;
                transition-delay: 0.2s;
                color:#0D2432;
                font-family: 'Cafe24Ohsquare', sans-serif;
            }
            em {
                right:-9px;
                transition:opacity 0.3s;
                transition-delay: 0.4s;
                opacity:0;
            }
            &.type-ani {
                span {
                    padding:0 8px;
                    max-width:200px;
                }
                em {
                    opacity:1;
                }
            }
        }

        .btn-hd.btn-cart {
            display:inline-block;
            position:relative;
            div {
                display:flex;
                overflow:hidden;
                min-width: 21px;
            }
            img {
                flex-shrink: 0;
                position:relative;
                width:21px;
                z-index: 10;
            }
            div > span {
                overflow: hidden;
                height:21px;
                line-height:19px;
                font-size:13px;
                letter-spacing:-0.05em;
                margin-left:-11px;
                display:inline-block;
                white-space: nowrap;
                border:1px solid #0D2432;
                border-radius:0 4px 4px 0;
                background-color: #fff;
                box-sizing:border-box;
                max-width:0;
                transition:all 1.2s;
                transition-delay: 0.2s;
                color:#0D2432;
                font-family: 'Cafe24Ohsquare', sans-serif;
            }
            em {
                right:-7px;
                transition:opacity 0.3s;
                transition-delay: 0.4s;
                opacity:0;
            }
            &.type-ani {
                div > span {
                    padding:0 12px 0 15px;
                    max-width:200px;
                }
                em {
                    opacity:1;
                }
            }
        }
    }

    .header-top-dim {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:199;
        /* background-color:rgba(0, 0, 0, 0.3); */
        display:none;
        opacity:0;
        transition:all 0.5s;
        &.dim-show {
            opacity:1;
        }
    }

    .header-top {
        position:fixed;
        overflow:hidden;
        top:0;
        left: 10px;
        right: 10px;
        z-index: 200;
        width:auto;
        background: #fff;
        border-radius:0 0 8px 8px;
        transition: all 0.5s;
        &.hide {
            transform: translateY(-80px);
        }
    }
}

.shop-list {
    li {
        border-bottom:8px solid transparent;
    } 
    .shop-item {
        > a {
            display:block;
        }
        .shop-info {
            padding:10px 0px;
            display:flex;
            align-items: center;
            gap:10px;
            dt {
                width:50px;
                height:50px;
                img {
                    flex-shrink: 0;
                    width:100%;
                    height:100%;
                    border-radius: 50%;
                    border:1px solid #D9D9D9;
                }
            }
            dd {
                flex:1;
                > div {
                    display:flex;
                    justify-content: space-between;
                    align-items: center;
                    p {
                        flex:1;
                        font-size:15px;
                        color:#333;
                        font-weight:bold;
                    }
                    button {
                        display:inline-flex;
                        gap:3px;
                        align-items: center;
                        flex-shrink: 0;
                        border:0;
                        padding:0;
                        background-color: transparent;
                    }
                    &.txt1 {
                        button {
                            color:#8e8e8e;
                            font-size:12px;
                        }
                        button::before {
                            content:'';
                            display:inline-block;
                            width:12px;
                            height:12px;
                            background: url(/app/common/img/section/time_icon.png) no-repeat top left/contain;
                        }
                    }
                    &.txt2 {
                        margin-top:5px;
                        p {
                            font-size:13px;
                            font-weight:normal;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            width: 100px;
                        }
                        button {
                            font-size:14px;
                        }
                        button::before {
                            content:'';
                            display:inline-block;
                            width:12px;
                            height:18px;
                            background: url(/app/common/img/section/position.png) no-repeat top left/contain;
                        }
                    }
                }
            }
        }
    }
}