/**
* 裏ページで利用するCSS
*
*/

/*追記分*/

h1.cateh2 {
    font-size: 2.6rem;
    font-weight: bold;
    text-align: center;
}

.catep {
    text-align: right;
    padding-right: 8%;
}


/*------------------------------------------------------------------------------
>>> TABLE OF CONTENTS:
--------------------------------------------------------------------------------
1.0.0.0 INITIALIZE STYLE
        1.0.1.0 FORM BASE DESIGN
        1.0.2.0 ENTRY ZONE DESIGN
        1.0.3.0 BUTTON DESIGN
    1.1.0.0 HEADER
    1.2.0.0 FOOTER
    1.3.0.0 MAIN
2.0.0.0 WIDTH 667px or OVER
    2.1.0.0 HEADER
    2.2.0.0 FOOTER
    2.3.0.0 MAIN
3.0.0.0 WIDTH 960px or OVER
    3.1.0.0 HEADER
    3.2.0.0 FOOTER
    3.3.0.0 MAIN
4.0.0.0 WIDTH 1280px or OVER
    3.1.0.0 HEADER
    3.2.0.0 FOOTER
    3.3.0.0 MAIN
------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------
// 1.0.0.0 INITIALIZE STYLE
------------------------------------------------------------------------------*/
:root{
    font-size:2.6666666vw;

    /* --surface:#f6f6f6;
    --text:#464545;
    --gray:#ddd; */

    /* NEW VIRSION */
    --back       : #fff;
    /*--surface    : #f9e6df;*/
    --surface    : #f3f3f3;
    /*--accent     : #a27386;*/
    --accent     : #54313f;
    --sub_accent : #d9c1ca;
    --gray       : #e8dddc;
    --black      : #3a2e31;
    --text       : #8a6c73;
    --sub_text   : #cfbfbe;
    --error      : #b63636;
    --star       : #f9bf3b;
    --cart       : #f5b21e;
}

*{
    margin:0;
    padding:0;
    outline:0;
    line-height:1;
    font-size:1.4rem;
    /*font-weight:300;*/
    font-weight: 400;
    /*color:var(--text);*/
    color: #555;
    list-style-type:none;
    text-decoration:none;
    box-sizing:border-box;
    user-select:none;
    -webkit-margin-before:0;
    -webkit-margin-after:0;
    -webkit-margin-start:0;
    -webkit-margin-end:0;
    -webkit-padding-start:0;
}

body{
    position:relative;
    width:100%;
    font-family:'Noto Sans JP', sans-serif;
    color:var(--text);
    background:var(--back);
    -webkit-tap-highlight-color:transparent;
    -webkit-text-size-adjust:100%;

    &.stop{
        overflow:hidden;
    }

    &::-webkit-scrollbar{
        display:none;
    }
}

a{
    display:block;
    /*color:var(--accent);*/
    /*color: #6d4354;*/
    color: #3f1b28;
}

img{
    display:block;
    width:100%;
}

/* SNACKBAR ANIMATION --------------------------------------------------------*/
@keyframes snackup{
    0%{
        transform:translateY(-100vh);
    }
    10%{
        transform:translateY(0);
    }
    90%{
        transform:translateY(0);
    }
    100%{
        transform:translateY(-100vh);
    }
}

/* BELL ANIMATION ------------------------------------------------------------*/
@keyframes ringring{
    0%{
        transform:rotate(0deg);
    }
    25%{
        transform:rotate(-15deg);
    }
    50%{
        transform:rotate(0deg);
    }
    75%{
        transform:rotate(15deg);
    }
    100%{
        transform:rotate(0deg);
    }
}


/*--------------------------------------1.0.1.0 -------------FORM BASE DESIGN */
input,
textarea,
select,
button,
input[type="range"]::-webkit-slider-thumb{
    display:block;
    background:none;
    border:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    appearance:none;
    resize:none;
}

/* AUTO FILL -----------------------------------------------------------------*/
input:-webkit-autofill{
    -webkit-box-shadow:0 0 0 1000px var(--back) inset;
    -webkit-text-fill-color: var(--text);
}

/* FORM ERROR ----------------------------------------------------------------*/
.error-form:not(.radio-form){
    border:2px solid var(--error);

    &:not(.select-form) p,
    &.select-form p:nth-of-type(2){
        color:var(--error);
        background:linear-gradient(0deg,var(--back) 38%,transparent 38%) !important;
    }

    &::after{
        content:'error';
        position:absolute;
        top:50%;
        right:1.6rem;
        font-family:'Material Symbols Outlined';
        font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0;
        font-size:2.4rem;
        color:var(--error);
        transform:translateY(-50%);
    }

    &.text-form:focus-within::after,
    &.select-form.active::after{
        content:none;
    }

    &:has(.view)::after,
    &:has(.view-off)::after{
        right:4.4rem;
    }

    &:focus{
        border:2px solid var(--accent);
    }
}

.error{
    margin-top:.8rem;
    font-size:1.2rem;
    color:var(--error);

    &:empty{
        display:none;
    }
}

/* TEXT FORM -----------------------------------------------------------------*/
input[type='text'],
input[type='password'],
input[type='email'],
input[type='tel'],
input[type='search']{
    padding:1.6rem;
    width:100%;
    border-radius:.8rem;
}

.form-title span{
    display:inline-block;
    margin-left:.8rem;
    padding:.4rem;
    font-size:1.2rem;
    color:var(--text);
    background:var(--gray);
    border-radius:.4rem;
}

.text-form{
    display:block;
    position:relative;
    margin-top:1.6rem;
    width:100%;
    border:1px solid var(--gray);
    border-radius:.8rem;
    background:var(--back);

    &:valid{
        border:1px sold var(--accent);
    }

    p{
        position:absolute;
        display:flex;
        margin-top:0;
        top:1.6rem;
        left:1.6rem;
        padding:0 .4rem;
        line-height:1;
        background:linear-gradient(0deg,var(--back) 20%,transparent 20%);    
        text-shadow:2px 2px 0 var(--back), -2px -2px 0 var(--back),-2px 2px 0 var(--back), 2px -2px 0 var(--back),0px 2px 0 var(--back),  0 -2px 0 var(--back),-2px 0 0 var(--back), 2px 0 0 var(--back);
        transition:top .1s ease-in-out,left .1s ease-in-out,font-size .1s ease-in-out,background .1s ease-in-out;
        align-items:center;

        /* 用途不明 */
        span{
            display:inline-block;
            margin-left:.8rem;
            padding:.4rem;
            font-size:1.2rem;
            color:var(--text);
            background:var(--gray);
            border-radius:.4rem;
        }
    }

    /* TEXT FORM FOCUS -------------------------------------------------------*/
    &:focus-within p,
    input:autofill+p,
    input:not(:placeholder-shown)+p{
        top:-.8rem;
        left:.8rem;
        font-size:1rem;
    }

    &:focus-within{
        border:2px solid var(--accent) !important;
        
        p{
            font-weight:bold;
            color:var(--accent);
            background:linear-gradient(0deg,var(--back) 38%,transparent 38%) !important;

            /* 用途不明 */
            span{
                margin-left:.4rem;
                font-size:1rem;
                font-weight:bold;
                color:var(--back);
                background:var(--accent);
            }
        }
    }

    /* PASSWORD VIEW ---------------------------------------------------------*/
    .view,
    .view-off{
        position:absolute;
        top:50%;
        right:1.6rem;
        width:2.4rem;
        height:2.4rem;
        transform:translateY(-50%);
        cursor:pointer;

        &::before{
            font-family:'Material Symbols Outlined';
            font-size:2.4rem;
        }
    }

    .view::before{
        content:'visibility';
    }

    .view-off::before{
        content:'visibility_off';
    }
}

.search-form{
    display:block;
    position:relative;
    width:100%;
    border:1px solid var(--gray);
    border-radius:.8rem;
    background:var(--back);
    overflow:hidden;

    &:valid{
        border:1px sold var(--accent);
    }

    form{
        width:100%;
    }

    input[type='search']{
        padding:.9rem 1.6rem .9rem 0;
    }

    p{
        position:absolute;
        display:flex;
        margin-top:0;
        top:.9rem;
        left:2.6rem;
        padding:0 .4rem;
        line-height:1;
        background:linear-gradient(0deg,var(--back) 20%,transparent 20%);    
        text-shadow:2px 2px 0 var(--back), -2px -2px 0 var(--back),-2px 2px 0 var(--back), 2px -2px 0 var(--back),0px 2px 0 var(--back),  0 -2px 0 var(--back),-2px 0 0 var(--back), 2px 0 0 var(--back);
        transition:top .1s ease-in-out,left .1s ease-in-out,font-size .1s ease-in-out,background .1s ease-in-out;
        align-items:center;
        white-space:nowrap;
    }

    /* TEXT FORM FOCUS -------------------------------------------------------*/
    &:focus-within p,
    input:autofill+p,
    form:has(input:not(:placeholder-shown))+p{
        top:-.8rem;
        left:.8rem;
        font-size:1rem;
    }

    &:focus-within{
        border:2px solid var(--accent) !important;
        overflow:visible;
        
        p{
            font-weight:bold;
            color:var(--accent);
            background:linear-gradient(0deg,var(--back) 38%,transparent 38%) !important;
        }
    }
}

input:not(:placeholder-shown)+p:not(.error) span{
    margin-left:.4rem;
    font-weight:bold;
    font-size:1rem;
}

/* SELECTED FORM -------------------------------------------------------------*/
.select-form{
    display:block;
    position:relative;
    margin-top:1.6rem;
    width:100%;
    border:1px solid var(--gray);
    border-radius:.8rem;
    background:var(--back);

    p{
        font-size:1.4rem;

        &:nth-of-type(1){
            padding:1.6rem;
            width:100%;
            height:4.8rem;
            border-radius:.8rem;
        }

        &:nth-of-type(2){
            display:flex;
            position:absolute;
            top:1.6rem;
            left:1.6rem;
            margin-top:0;
            padding:0 .4rem;
            line-height:1;
            background:linear-gradient(0deg,var(--back) 20%,transparent 20%);
            text-shadow:2px 2px 0 var(--back), -2px -2px 0 var(--back),-2px 2px 0 var(--back), 2px -2px 0 var(--back),0px 2px 0 var(--back),  0 -2px 0 var(--back),-2px 0 0 var(--back), 2px 0 0 var(--back);
            transition:top .1s ease-in-out, left .1s ease-in-out, font-size .1s ease-in-out, background .1s ease-in-out;
            align-items:center;
        }

        &:nth-of-type(1):not(:empty)+p:nth-of-type(2){
            top:-.8rem;
            left:.8rem;
            font-size:1rem;
            color:var(--text);
        }
    }

    ul{
        display:none;

        li{
            padding:.8rem;
            font-size:1.4rem;

            &.current{
                font-weight:400;
                color:var(--back);
                background:var(--accent);
            }
        }
    }

    &.active{
        border:2px solid var(--accent) !important;

        p:nth-of-type(1){
            padding:1.4rem 1.6rem;
            height:4.6rem;
        }

        p:nth-of-type(2){
            font-weight:bold;
            color:var(--accent) !important;
            background:linear-gradient(0deg,var(--back) 38%,transparent 38%) !important;
        }

        &.active ul{
            display:block;
            position:absolute;
            top:4.8rem;
            left:.8rem;
            width:calc(100% - 1.6rem);
            min-height:20.6rem;
            max-height:30rem;
            background:var(--back);
            box-shadow:0 1rem 1rem rgba(0,0,0,.3);
            overflow-y:auto;
            z-index:2;
        }

        &::after{
            color:var(--accent);
            transform:rotate(180deg);
        }
    }

    &::after{
        content:'arrow_drop_down';
        position:absolute;
        top:.6rem;
        right:.8rem;
        font-family:'Material Symbols Outlined';
        font-variation-settings:'FILL' 1, 'wght' 100, 'GRAD' 0;
        font-size:3.6rem;
        color:var(--gray);
    }

    &.error-form::after{
        right:2.4rem;
    }
}

/* TEXTAREA FORM -------------------------------------------------------------*/
.area-form{
    display:block;
    position:relative;
    margin-top:1.6rem;
    width:100%;
    border:1px solid var(--gray);
    border-radius:.8rem;

    textarea{
        padding:1.6rem;
        width:100%;
        height:6em;
        line-height:1.5;
        font-size:1.4rem;
        border-radius:.8rem;
        background:var(--back);
    }

    p{
        position:absolute;
        margin-top:0;
        top:1.6rem;
        left:1.6rem;
        padding:0 .4rem;
        line-height:1;
        font-size:1.4rem;
        background:linear-gradient(0deg,var(--back) 20%,transparent 20%);
        text-shadow:2px 2px 0 var(--back), -2px -2px 0 var(--back),-2px 2px 0 var(--back), 2px -2px 0 var(--back),0px 2px 0 var(--back),  0 -2px 0 var(--back),-2px 0 0 var(--back), 2px 0 0 var(--back);
        transition:top .1s ease-in-out,left .1s ease-in-out,font-size .1s ease-in-out,background .1s ease-in-out;
    }

    &:focus-within p,
    textarea:not(:placeholder-shown)+p{
        top:-.8rem;
        left:.8rem;
        font-size:1rem;
    }
    
    &:focus-within{
        border:2px solid var(--accent) !important;
        
        p{
            font-weight:bold;
            color:var(--accent);
            background:linear-gradient(0deg,var(--back) 38%,transparent 38%);
        }
    }
}

/* RADIO FORM ----------------------------------------------------------------*/
.radio-form{
    display:flex;
    margin-top:1.6rem;
    justify-content:space-between;
    flex-wrap:wrap;

    li{
        width:calc(50% - .8rem);

        &:nth-child(n+3){
            margin-top:1.6rem;
        }

        label{
            display:flex;
            padding:2rem 1.6rem;
            font-size:1.4rem;
            background:var(--gray);
            border-radius:.8rem;
            box-shadow: 0 0 0 2px var(--back);
            align-items:center;
            justify-content:center;
            cursor:pointer;
        }

        input:checked+label{
            padding:1.5rem 1.6rem;
            color:var(--back);
            background:var(--accent);

            &::after{
                content:'done';
                display:block;
                margin-left:.8rem;
                font-family:'Material Symbols Outlined';
                font-size:2.4rem;
            }
        }
    }

    &.error-form{
        border:none;

        label{
            background:var(--error);
            color:var(--back);
        }
    }
}

/* SWITCH FORM ---------------------------------------------------------------*/
.form-switch{
    display:flex;
    margin-top:1.6rem;
    /* width:calc(100vw - 9.6rem); */
    align-items:center;
    justify-content:space-between;

    p{
        margin-left:2.4rem;
        font-size:1.6rem;
        font-weight:400;
    }

    &:nth-child(3){
        /* margin:3.6rem 3.6rem 0;
        width:calc(100vw - 7.2rem); */
        p{
            margin-left:0;
            font-size:1.8rem;
        }
    }

    .switch{
        position:relative;
        display:flex;
        width:5.2rem;
        height:3.2rem;
        border:2px solid var(--accent);
        border-radius:2.4rem;
        align-items:center;

        &::before{
            content:'';
            display:flex;
            margin:0 .2rem;
            width:2.4rem;
            height:2.4rem;
            border-radius:50%;
            font-family:'Material Symbols Outlined';
            font-variation-settings:'wght' 400, 'GRAD' 0;
            font-size:1.6rem;
            background:var(--accent);
            align-items:center;
            justify-content:center;
            transition:.3s all ease-in-out;
        }

        &:has(input:checked){
            background:var(--accent);

            &::before{
                content:'check';
                color:var(--accent);
                background:var(--back);
                transform:translateX(calc(100% - .2rem));
            }
        }
    }
}


/*--------------------------------------1.0.2.0 ----------------BUTTON DESIGN */
.button-fill,
.button-border,
.button-text{
    display:flex;
    margin:2.4rem;
    padding:1.6rem;
    width:calc(100% - 4.8rem);
    font-size:1.6rem;
    /*color:var(--back);*/
    color: #54313f;
    /*background:var(--accent);*/
    background: #f2f2f2;
    border-radius:.8rem;
    align-items:center;
    justify-content:center;
    border: 1px solid #d1d1d1;
}
    
/* FILL TYPE ------------------------------------------------------------------*/
.button-fill:disabled{
    color:var(--sub_text);
    background:var(--gray);
}

/* BORDER TYPE ----------------------------------------------------------------*/
.button-border{
    color:var(--accent);
    background:var(--back);
    border:2px solid var(--accent);
}

/* TEXT TYPE ----------------------------------------------------------------*/
.button-text{
    color:var(--accent);
    background:none;
    
}


/*--------------------------------------1.1.0.0 -----------------------HEADER */
header{
    position:fixed;
    top:0;
    left:0;
    display:flex;
    padding: 15px 14px 12px;
    width:100%;
    background:#fffc;
    align-items:center;
    justify-content:space-between;
    transition:transform .3s ease-in-out;
    z-index:99;

    &.normal{
        position:absolute;
        top:-59px;
    }

    &.sticky{
        transform:translateY(-100%);
    }

    .logo{
        width:187px;
        width:150px;
        transform:scaleX(1);
        transform-origin:left center;
        transition:transform .3s ease-in-out;
    }

    /* MENU ICON -------------------------------------------------------------*/
    .menu{
        display:flex;
        
        li{
            position:relative;
            
            &>::before{
                display:block;
                font-family:'Material Symbols Outlined';
                font-variation-settings:'wght' 100, 'GRAD' 0;
                font-size:36px;
            }
            
            &#search{
                display:flex;
                align-items:center;

                .search-form{
                    margin-top:0;
                    width:0;
                    border:none;
                    transition:width .3s ease-in-out;

                    &:has(input:not(:placeholder-shown)){
                        overflow:hidden;
                    }

                    p{
                        opacity:0;
                        transition:opacity .5s ease-in-out,top .1s ease-in-out,left .1s ease-in-out,font-size .1s ease-in-out,background .1s ease-in-out;
                    }
                }

                span::before{
                content:'search';
                }
            }
            
            &#favor{
                a::before{
                content:'favorite';
                }
            }
            
            &#login{
                a::before{
                content:'person';
                }
            }
            
            &#user{
                a::before{
                content:'person';
                }
            }
            
            &#cart{
                a::before{
                content:'shopping_bag';
                }
            }

            /* BADGE ---------------------------------------------------------*/
            &#cart #cart_count,
            &#favor #wish_count,
            &#login #info_count{
                position:absolute;
                top:0;
                right:0;
                display:flex;
                width:14px;
                height:14px;
                font-size:10px;
                color:var(--back);
                background:var(--accent);
                border-radius:50%;
                align-items:center;
                justify-content:center;
            
                &:empty{
                    display:none;
                }
                
                &.ringring{
                    animation:ringRing .3s ease-in forwards;
                }
            }
        }
    }

    /* SUGGEST ---------------------------------------------------------------*/
    .suggest{
        display:none;
        width:100%;
    }

    /* SEARCH FORM -----------------------------------------------------------*/
    &.open{
        .logo{
            transform:scaleX(0);
        }

        .menu{
            li{
                &#search{
                    .search-form{
                        display:flex;
                        width:calc(100vw - 160px);
                        border:1px solid var(--gray);
                        align-items:center;

                        &:has(input:not(:placeholder-shown)){
                            overflow:visible;
                        }

                        p{
                            opacity:1;
                        }

                        &::before{
                            content:'search';
                            display:block;
                            margin-left:8px;
                            font-family:'Material Symbols Outlined';
                            font-variation-settings:'wght' 100, 'GRAD' 0;
                            font-size:24px;
                        }
                    }

                    span::before{
                        content:'cancel';
                        font-size:24px;
                        font-variation-settings:'FILL' 1, 'wght' 300, 'GRAD' 0;
                    }
                }
            }

            &:has(+.suggest:not(:empty)){
                li{
                    &#search{
                        .search-form{
                            border-radius:.8rem .8rem 0 0;
                        }
                    }
                }
            }
        }

        .suggest:not(:empty){
            display:block;
            position:absolute;
            top:44px;
            left:44px;
            width:calc(100vw - 160px);
            border:2px solid var(--accent);
            border-top:none;
            border-radius:0 0 .8rem .8rem;
            background:var(--back);

            li{
                display:flex;
                padding:.9rem 1.6rem .9rem .8rem;
                border-top:1px solid var(--gray);
                align-items:center;

                &:first-child{
                    /* border-top:none; */
                }
                
                &::before{
                    content:'query_stats';
                    display:block;
                    font-family:'Material Symbols Outlined';
                    font-variation-settings:'wght' 100, 'GRAD' 0;
                    font-size:24px;
                }

                &.item::before{
                    content:'pageview';
                }

                &.word::before{
                    content:'search';
                }
            }
        }
    }
}


/*--------------------------------------1.2.0.0 -----------------------FOOTER */
footer{
    padding:24px 10px;
    padding-left: 40px;
    /*background:var(--surface);*/
    /* background:var(--first); */
    /*background: #fbebe5;*/
    /*background: #a27386;*/
    background: #54313f;

    /* FOOTER NAVIGATION -----------------------------------------------------*/
    .footer-nav{
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        margin-top: 3rem;
        
        li{
            margin-bottom:16px;
            width:calc(50% - 8px);
            
            a{
                /*font-size:1rem;*/
                font-size: 1.4rem;
                color: #fff;
            }
        }
    }

    /* SNS NAVIGATION --------------------------------------------------------*/
    .sns-nav{
        display:flex;
        margin-top: 20px;
        justify-content:center;
        
        li{
            /*margin:8px;*/
            /*width:18px;*/
            /*width: 30px;*/
            margin:24px;
            width:35px;
        }
    }
    
    /* COPYRIGHT -------------------------------------------------------------*/
    small{
        display:block;
        margin-top:16px;
        font-size:.9rem;
        text-align:center;
        color: #fff;
    }
}


/*--------------------------------------1.3.0.0 -------------------------MAIN */
main{
    margin-top:67px;
    min-height:calc(100vh - 244px);
    /*background:linear-gradient(180deg, var(--back) 30%, var(--surface));*/
    /*background:linear-gradient(180deg, var(--back) 30%, #fff3ef);*/
    background-color: #fff;
    overflow:hidden;
    /* animation:blur .5s linear forwards; */
    /* background:#ddd */
    padding-bottom: 4rem;

    /*----------------------------------1.3.1.0 ------------ENTRY ZONE DESIGN */
    .zone-name,
    .zone-email,
    .zone-pass,
    .zone-address,
    .zone-tel,
    .zone-birth,
    .zone-sex,
    .zone-payment,
    .zone-delivery,
    .zone-point,
    .zone-item,
    .zone-login,
    .zone-subject,
    .zone-body,
    .zone-magazine{
        position:relative;
        margin-top:3.6rem;

        /* ENTRY TITLE -----------------------------------------------------------*/
        .form-title{
            display:flex;
            font-weight:400;
            align-items:center;

            span{
                font-size:1.2rem;

                &.edit{
                    margin-left:auto;
                    color:var(--back);
                    background:var(--accent);
                }
            }

            /* GROUPING ICON -----------------------------------------------------*/
            &::before{
                display:block;
                margin-right:.8rem;
                font-family:'Material Symbols Outlined';
                font-variation-settings:'FILL' 1;
                font-size:2.4rem;
            }

            &.name::before{
                content:'person';
            }

            &.email::before{
                content:'mail';
            }

            &.password::before{
                content:'password';
            }

            &.address::before{
                content:'home_work';
            }

            &.tel::before{
                content:'phone_enabled';
            }

            &.birth::before{
                content:'celebration';
            }

            &.sex::before{
                content:'transgender';
            }

            &.payment::before{
                content:'payments';
            }

            &.delivery::before{
                content:'local_shipping';
            }

            &.notifi::before{
                content:'description';
            }            

            &.have-point{
                &::before{
                    content:'savings';
                }

                span{
                    margin-left:auto;
                }

                #reset{
                    color:var(--back);
                    background:var(--accent);
                }
            }

            &.item::before{
                content:'local_mall';
            }

            &.subject::before{
                content:'list';
            }

            &.body::before{
                content:'description';
            }

            &.magazine::before{
                content:'newspaper';
            }
        }

        .data-list{
            margin-left:3.2rem;

            .text-form.hidden{
                display:none;
            }
        }

        &:empty{
            display:none;
        }

        p[class^='d-']{
            margin:.8rem 0 0 3.2rem;
            font-size:1.6rem;

            ruby{
                margin-right:.8rem;
                font-size:1.6rem;

                rt{
                    font-size:1.1rem;
                }
            }

            &.d-address{
                line-height:1.3;
            }
        }
    }

    /* NAME ZONE -------------------------------------------------------------*/
    .zone-name{
        .form-group{
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;

            label{
                width:calc(50% - .4rem);
            }
        }
    }

    /* ADDRESS ZONE ----------------------------------------------------------*/
    .zone-address{
        .form-group{
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;

            label{
                width:100%;

                &:nth-child(-n+2){
                    width:calc(50% - .8rem);
                }
            }
        }
    }

    /* BIRTHDAY ZONE ---------------------------------------------------------*/
    .zone-birth{
        .form-title{
            i{
                display:block;
                position:absolute;
                top:.3rem;
                right:0;
                padding:.2rem .8rem;
                font-size:1.2rem;
                font-style:normal;
                color:var(--accent);
                border:1px solid var(--accent);
                border-radius:1rem;
            }
        }

        .form-group{
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;

            label{
                width:calc((100% - 1.6rem) / 3);
            }
        }
    }

    /* DELIVERY ZONE ---------------------------------------------------------*/
    .zone-delivery{
        h3{
            display:flex;
            margin-top:1.6rem;
            padding-bottom:.8rem;
            border-bottom:1px solid var(--sub_text);
            align-items:center;

            &:nth-of-type(2){
                margin-top:2.4rem;
            }

            &:before{
                content:'calendar_clock';
                display:block;
                margin-right:.8rem;
                font-family:'Material Symbols Outlined';
                font-variation-settings:'FILL' 1;
                font-size:2.4rem;
            }

            &:nth-of-type(2){
                &:before{
                    content:'description';
                }
            }
        }

        p{
            margin-left:0;
        }
    }

    /* PAYMENT ZONE ----------------------------------------------------------*/
    .zone-payment{
        .detail{
            display:flex;
            margin-top:1.6rem;
            padding:.8rem;
            border:1px solid var(--gray);
            background:var(--back);

            span:first-child{
                display:block;
                margin-right:.8rem;
                padding:.8rem;
                font-size:1.2rem;
                background:var(--gray);
                border-radius:.4rem;
            }

            span:last-child{
                display:flex;
                line-height:1.5;
                /* padding-top:.8rem; */
                flex:1;
                flex-wrap:wrap;

                b{
                    display:block;
                    padding-bottom:.8rem;
                    width:100%;
                }

                img{
                    margin:.4rem .4rem 0 0;
                    width:2.4rem;
                    height:calc(2.4rem * .6222);

                    &:last-child{
                        margin-right:0;
                    }
                }
            }
        }
    }

    /* ITEM ZONE -------------------------------------------------------------*/
    .zone-item{
        .data-list{
            li{
                display:flex;
                margin-top:.8rem;
                padding-bottom:.8rem;
                border-bottom:1px solid var(--gray);

                .thumb{
                    width:calc(((100vw - 8rem) * .4) - 1.6rem);
                    height:calc(((100vw - 8rem) * .4) - 1.6rem);
                    background:var(--gray);

                    img{
                        width:100%;
                        height:100%;
                        object-fit:contain;
                    }
                }

                .description{
                    margin-left:1.6rem;
                    flex:1;

                    p{
                        &.lt-item-name{
                            font-size:1.2rem;

                            span{
                                font-size:1rem;
                            }
                        }

                        &.lt-item-price{
                            font-size:1.2rem;
                            text-align:right;

                            span:nth-of-type(1){
                                font-size:1rem;
                            }

                            span:nth-of-type(n+2){
                                font-size:.8rem;
                            }
                        }
                        
                        &.item-name{
                            font-size:1.2rem;

                            span{
                                font-size:1rem;
                            }
                        }

                        &.item-price{
                            font-size:1.2rem;
                            text-align:right;

                            span:nth-of-type(1){
                                font-size:1rem;
                            }

                            span:nth-of-type(n+2){
                                font-size:.8rem;
                            }
                        }

                        &.item-total,
                        &.item-point{
                            display:flex;
                            margin-top:.8rem;
                            align-items:center;

                            b:first-child{
                                margin-right:.6rem;
                                padding:.4rem;
                                font-size:1rem;
                                border-radius:.4rem;
                                background:var(--gray);
                            }

                            b:last-child{
                                font-size:1.6rem;
                            }

                            span:first-of-type{
                                font-size:1.4rem;
                            }

                            span:last-of-type{
                                font-size:1.2rem;
                            }
                        }

                        &.lt-item-price,
                        &.item-price,
                        &.item-point{
                            margin-top:1.7rem;
                        }
                    }
                }
            }
        }
    }
    
    #agree-check{
        .rules{
            display:flex;
            margin:3.6rem auto .8rem;
            align-items:center;
            justify-content:center;

            li{
                padding:1.6rem;
                font-weight:400;
                text-align:right;

                &:nth-child(2){
                    padding:1.6rem 0;
                    width:auto;
                }

                &:nth-child(3){
                    text-align:left;
                }
            }
        }

        .form-group{
            label{
                display:flex;
                margin:0 auto;
                font-size:1.6rem;
                align-items:center;
                justify-content:center;
        
                &.error-form{
                    border:none;
                }
        
                &:before{
                    content:'check_box_outline_blank';
                    margin-right:.8rem;
                    font-family:'Material Symbols Outlined';
                    font-size:2.4rem;
                    color:var(--sub_text);
                }
            }

            input:checked+label{
                font-weight:400;
                color:var(--accent);
        
                &:before{
                    content:'check_box';
                    color:var(--accent);
                }
            }
        }

        .error{
            margin:.8rem auto 3.6rem;
            text-align:center;
        }
    }

    /*----------------------------------1.3.2.0 ---------------------SNACKBAR */
    .snackbar{
        display:flex;
        position:fixed;
        top:6rem;
        left:3.2rem;
        padding:1.6rem;
        width:calc(100% - 6.4rem);
        border-radius:8px;
        background:var(--black);
        box-shadow:0 0 1rem rgba(0, 0, 0, .3);
        align-items:center;
        justify-content:flex-start;
        z-index:100;

        span{
            margin-top:-.4rem;

            b{
                display:block;
                margin-top:.8rem;
                line-height:1.5;
                font-weight:400;
                color:#ff0;

                &:first-child{
                    margin-top:0;
                }
            }
        }

        &:has(span:empty){
            display:none;
        }

        &::before{
            content:'notifications_active';
            display:block;
            margin-right:.8rem;
            font-family:'Material Symbols Outlined';
            font-size:1.8rem;
            color:var(--back);
            transform-origin:50% 20%;
            animation:ringring .2s ease-in-out infinite;
        }
    }

    .snackact{
        animation:snackup 3s ease-in-out forwards;
    }

    .list-card{
        display: flex;
        flex-wrap: wrap;
        /*justify-content: center;*/
        li{
            position:relative;
            margin:0.9rem;
            border-radius:.8rem;
            box-shadow:0 0 .1rem rgba(0,0,0,.3);
            overflow:hidden;
            width:45%;
            padding:40px 0 15px;

            .lt-item-thumb{
                width:100%;
                height:100%;
                background:var(--gray);
                position: relative;
                left: 50%;
                transform: translateX(-50%);
    
                img{
                    width:100%;
                    height:auto;
                    aspect-ratio:1;
                    object-fit:fill;
                }
            }
            .item-thumb{
                width:100%;
                height:100%;
                background:var(--gray);
                position: relative;
                left: 50%;
                transform: translateX(-50%);
    
                img{
                    width:100%;
                    height:auto;
                    aspect-ratio:1;
                    object-fit:fill;
                }
            }

            .lt-item-descript{
                position:absolute;
                top:0;
                left:0;
                padding:.3rem .6rem;
                background:#5e9cb76b;
                width: 100%;
                color:#fff;
    
                .lt-item-name{
                    font-size:1.4rem;
                    color:var(--back);
                }
    
                .lt-item-price{
                    margin-top:.6rem;
                    font-size:1.2rem;
                    color:var(--back);
                    text-align:right;
    
                    span{
                        font-size:1rem;
                        color:var(--back);
                    }
                }
            }
            .item-descript{
                position:absolute;
                top:0;
                left:0;
                padding:.3rem .6rem;
                background:#5e9cb76b;
                width: 100%;
                color:#fff;
    
                .item-name{
                    font-size:1.4rem;
                    color:var(--back);
                }
    
                .item-price{
                    margin-top:.6rem;
                    font-size:1.2rem;
                    color:var(--back);
                    text-align:right;
    
                    span{
                        font-size:1rem;
                        color:var(--back);
                    }
                }
            }
            .lt-more{
                position:absolute;
                bottom:5px;
                right:5px;
                display:flex;
                color:var(--back);
                padding:.3rem .3rem .3rem .8rem;
                background:var(--accent);
                background:#88d2bdb5;
                align-items:center;
    
                &::after{
                    content:'arrow_forward_ios';
                    font-family:'Material Symbols Outlined';
                    font-size:1.6rem;
                    font-variation-settings:'wght' 100, 'GRAD' 0;     
                }
            }

            .more{
                position:absolute;
                bottom:5px;
                right:5px;
                display:flex;
                color:var(--back);
                padding:.3rem .3rem .3rem .8rem;
                background:var(--accent);
                background:#88d2bdb5;
                align-items:center;
    
                &::after{
                    content:'arrow_forward_ios';
                    font-family:'Material Symbols Outlined';
                    font-size:1.6rem;
                    font-variation-settings:'wght' 100, 'GRAD' 0;     
                }
            }

            .wish{}

            a{}
        }
    }
}

/* @keyframes blur{
      0%{filter:blur(30px);}
    100%{filter:blur(0px);}
} */


/*------------------------------------------------------------------------------
// 2.0.0.0 WIDTH 667px or OVER
------------------------------------------------------------------------------*/
@media screen and (min-width:667px){
/* @media screen and (min-width:768px){ */
    :root{
        font-size:1.302083333vw;
    }

    /* FORM ERROR ------------------------------------------------------------*/
    .error-form:not(.radio-form){
        &:not(.select-form) p,
        &.select-form p:nth-of-type(2){
            background:linear-gradient(0deg,var(--back) 48%,transparent 48%) !important;
        }

        &::after{
            right:1.8rem;
            font-size:2.8rem;
        }

        &:has(.view)::after,
        &:has(.view-off)::after{
            right:4.8rem;
        }
    }

    .error{
        margin-top:1.2rem;
        font-size:1.4rem;
    }

    /* TEXT FORM -------------------------------------------------------------*/
    input[type='text'],
    input[type='password'],
    input[type='email'],
    input[type='tel']{
        padding:1.8rem;
        font-size:1.6rem;
    }

    .text-form{
        margin-top:2.4rem;

        p{
            top:1.8rem;
            left:1.8rem;
            padding:0 .6rem;
            font-size:1.6rem;
            background:linear-gradient(0deg,var(--back) 39%,transparent 39%);

            /* 用途不明 */
            span{
                display:inline-block;
                margin-left:.8rem;
                padding:.4rem;
                font-size:1.2rem;
                color:var(--text);
                background:var(--gray);
                border-radius:.4rem;
            }
        }

        /* TEXT FORM FOCUS -------------------------------------------------------*/
        &:focus-within p,
        input:autofill+p,
        input:not(:placeholder-shown)+p{
            font-size:1.2rem;
        }

        &:focus-within{
            p{
                background:linear-gradient(0deg,var(--back) 48%,transparent 48%) !important;

                /* 用途不明 */
                span{
                    margin-left:.4rem;
                    font-size:1rem;
                    font-weight:bold;
                    color:var(--back);
                    background:var(--accent);
                }
            }
        }

        /*----------------------------------1.0.1.0 ----------------PASSWORD VIEW */
        .view,
        .view-off{
            position:absolute;
            top:50%;
            right:1.6rem;
            width:2.4rem;
            height:2.4rem;
            transform:translateY(-50%);
            cursor:pointer;
    
            &::before{
                font-family:'Material Symbols Outlined';
                font-size:2.4rem;
            }
        }

        .view::before{
            content:'visibility';
        }

        .view-off::before{
            content:'visibility_off';
        }
    }

    .search-form{

    }

    input:not(:placeholder-shown)+p:not(.error) span{
        margin-left:.4rem;
        font-weight:bold;
        font-size:1rem;
    }

    /* SELECTED FORM ---------------------------------------------------------*/
    .select-form{
        margin-top:2.4rem;

        p{
            font-size:1.6rem;

            &:nth-of-type(1){
                padding:1.8rem;
                height:5.45rem;
            }

            &:nth-of-type(2){
                top:1.8rem;
                left:1.8rem;
                padding:0 .6rem;
            }

            &:nth-of-type(1):not(:empty)+p:nth-of-type(2){
                top:-.8rem;
                left:.8rem;
                font-size:1.2rem;
                background:linear-gradient(0deg,var(--back) 39%,transparent 39%);
            }
        }

        ul{
            li{
                padding:.9rem;
                font-size:1.6rem;
            }
        }

        &.active{
            p:nth-of-type(1){
                padding:1.4rem 1.8rem;
                height:5.2rem;
            }

            &.active ul{
                top:5.4rem;
                left:.9rem;
                width:calc(100% - 1.8rem);
                min-height:25.6rem;
                max-height:34rem;
            }
        }

        &::after{
            top:.725rem;
            right:1rem;
            font-size:4rem;
        }

        &.error-form::after{
            right:2.4rem;
        }
    }

    /* TEXTAREA FORM ---------------------------------------------------------*/
    .area-form{
        margin-top:2.4rem;

        textarea{
            padding:1.8rem;
            font-size:1.6rem;
        }

        p{
            top:1.8rem;
            left:1.8rem;
            padding:0 .6rem;
            font-size:1.6rem;
            background:linear-gradient(0deg,var(--back) 39%,transparent 39%);
        }

        &:focus-within p,
        textarea:not(:placeholder-shown)+p{
            top:-.8rem;
            left:.8rem;
            font-size:1.2rem;
        }
    
        &:focus-within{
            p{
                background:linear-gradient(0deg,var(--back) 48%,transparent 48%);
            }
        }
    }

    /* RADIO FORM ------------------------------------------------------------*/
    .radio-form{
        margin-top:2.4rem;

        li{
            label{
                padding:2.25rem 1.8rem;
                font-size:1.4rem;
            }

            input:checked+label{
                padding:1.75rem 1.8rem;

                &::after{
                    margin-left:.8rem;
                    font-size:2.4rem;
                }
            }
        }
    }


    /*----------------------------------2.0.2.0 ----------------BUTTON DESIGN */
    .button-fill,
    .button-border{
        margin:3.6rem auto;
        padding:1.8rem;
        width:calc(100vw - 36rem);
        font-size:1.8rem;
    }


    /*----------------------------------2.1.0.0 -----------------------HEADER */
    header{
        padding:24px;

        &.normal{
            top:-94px;
        }

        .logo{
            width:200px;
        }

        .menu{
            &#search{
                display:flex;
                align-items:center;
        
                .search-form{
                    margin-top:0;
                    width:0;
                    border:none;
                    transform-origin:right center;
                    /* transform:scaleX(0); */
                    transition:all .3s ease-in-out;
                    /* overflow:hidden; */
        
                    &:has(input:not(:placeholder-shown)){
                        overflow:hidden;
                    }
        
                    p{
                        opacity:0;
                        transition:opacity .5s ease-in-out,top .1s ease-in-out,left .1s ease-in-out,font-size .1s ease-in-out,background .1s ease-in-out;
                    }
                }
        
                span::before{
                content:'search';
                }
            }
        }

        /* SEARCH FORM -------------------------------------------------------*/
        &.open{
            .logo{
                transform:none;
            }

            .menu{
                li{
                    &#search{
                        .search-form{
                            width:calc(100vw - 392px);
                        }
                    }
                }
            }

            .suggest:not(:empty){
                top:62px;
                left:260px;
                width:calc(100vw - 392px);
            }
        }
    }


    /*----------------------------------2.2.0.0 -----------------------FOOTER */
    footer{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;

        /* FOOTER NAVIGATION -------------------------------------------------*/
        .footer-nav{
            width:50%;

            li a{
                font-size:14px;
            }
        }

        /* SNS NAVIGATION ----------------------------------------------------*/
        .sns-nav{
            width:50%;
        }

        /* COPYRIGHT ---------------------------------------------------------*/
        small{
            width:100%;
            font-size:10px;
        }
    }


    /*----------------------------------2.3.0.0 -------------------------MAIN */
    main{
        margin-top:100px;
        min-height:calc(100vh - 242px);

        /*------------------------------2.3.1.0 ------------ENTRY ZONE DESIGN */
        .zone-name,
        .zone-email,
        .zone-pass,
        .zone-address,
        .zone-tel,
        .zone-birth,
        .zone-sex,
        .zone-payment,
        .zone-delivery,
        .zone-point,
        .zone-item,
        .zone-subject,
        .zone-body,
        .zone-magazine{
            display:flex;
            margin-top:4.8rem;
            align-items:flex-start;

            .form-title{
                width:24rem;
                font-size:1.6rem;

                span{
                    font-size:1.4rem;

                    &.edit{
                        position:absolute;
                        top:0;
                        right:0;
                        margin:0;
                    }
                }

                /* GROUPING ICON -------------------------------------------------*/
                &::before{
                    font-size:2.6rem;
                }

                &.have-point{
                    span,
                    #reset{
                        position:absolute;
                        bottom:-2.2rem;
                        right:0;
                    }
                }
            }

            .data-list{
                flex:1;

                .form-group{
                    label:first-child{
                        margin-top:0;
                    }
                }
            }

            p[class^='d-']{
                font-size:1.8rem;

                ruby{
                    margin-right:.8rem;
                    font-size:1.8rem;

                    rt{
                        font-size:1.3rem;
                    }
                }

                &.d-address{
                    line-height:1.4;
                }

                &.data-list{
                    margin-top:0;
                }
            }
        }

        /* NAME ZONE ---------------------------------------------------------*/
        .zone-name{
            .form-group{
                label{
                    width:calc(50% - .8rem);

                    &:nth-child(-n+2){
                        margin-top:0;
                    }
                }
            }
        }

        /* PASSWARD ZONE -----------------------------------------------------*/

        /* ADDRESS ZONE ------------------------------------------------------*/
        .zone-address{
            .form-group{
                label{
                    margin-top:1.6rem;

                    &:nth-child(-n+2){
                        margin-top:0;
                    }
                }
            }
        }

        /* BIRTHDAY ZONE -----------------------------------------------------*/
        .zone-birth{
            .form-title{
                i{
                    top:-2.6rem;
                    padding:.2rem .8rem;
                    font-size:1.2rem;
                    border-radius:1rem;
                }
            }

            .form-group{
                display:flex;
                flex-wrap:wrap;
                justify-content:space-between;

                label{
                    margin-top:0;
                    width:calc((100% - 1.6rem) / 3);
                    width:calc((100% - 2.4rem) / 3);
                }
            }
        }

        /* SEX ZONE ----------------------------------------------------------*/
        .zone-sex{
            .data-list{
                margin-top:0;
            }
        }

        /* DELIVERY ZONE -----------------------------------------------------*/
        .zone-delivery{
            h3{
                margin-top:0;
                padding-bottom:.8rem;
                font-size:1.575rem;

                &:nth-of-type(2){
                    margin-top:2.4rem;
                }

                &:before{
                    font-size:2.6rem;
                }
            }

            p{
                margin-left:0;
            }
        }

        /* PAYMENT ZONE ------------------------------------------------------*/
        .zone-payment{
            .radio-form{
                margin-top:0;
            }

            .detail{
                display:flex;
                margin-top:1.6rem;
                padding:.8rem;
                border:1px solid var(--gray);
                background:var(--back);

                span:first-child{
                    display:block;
                    margin-right:.8rem;
                    padding:.8rem;
                    font-size:1.2rem;
                    background:var(--gray);
                    border-radius:.4rem;
                }

                span:last-child{
                    padding-top:.8rem;
                    flex:1;

                    img{
                        width:3.6rem;
                        height:calc(3.6rem * .6222);
                    }
                }
            }
        }

        /* POINT ZONE --------------------------------------------------------*/
        .zone-point{
            .radio-form{
                margin-top:0;
            }

            .text-form{
                margin-top:1.6rem;
            }
        }

        /* ITEM ZONE ---------------------------------------------------------*/
        .zone-item{
            .data-list{
                li{
                    margin-top:.9rem;
                    padding-bottom:.9rem;

                    .thumb{
                        width:12.9rem;
                        height:12.9rem;
                    }

                    .description{
                        margin-left:2.025rem;

                        p{
                            &.lt-item-name{
                                font-size:1.35rem;

                                span{
                                    font-size:1.125rem;
                                }
                            }
                            &.item-name{
                                font-size:1.35rem;

                                span{
                                    font-size:1.125rem;
                                }
                            }
                            &.lt-item-price{
                                font-size:1.35rem;

                                span:nth-of-type(1){
                                    font-size:1.125rem;
                                }

                                span:nth-of-type(n+2){
                                    font-size:.9rem;
                                }
                            }
                            &.item-price{
                                font-size:1.35rem;

                                span:nth-of-type(1){
                                    font-size:1.125rem;
                                }

                                span:nth-of-type(n+2){
                                    font-size:.9rem;
                                }
                            }

                            &.item-total,
                            &.item-point{
                                margin-top:.9rem;

                                b:first-child{
                                    margin-right:.675rem;
                                    padding:.45rem;
                                    font-size:1.125rem;
                                    border-radius:.45rem;
                                }

                                b:last-child{
                                    font-size:1.8rem;
                                }

                                span:first-of-type{
                                    font-size:1.575rem;
                                }

                                span:last-of-type{
                                    font-size:1.35rem;
                                }
                            }

                            &.lt-item-price,
                            &.item-price,
                            &.item-point{
                                margin-top:2.6rem;
                            }
                        }
                    }
                }
            }
        }
    
        /* MAGAZINE ZONE -----------------------------------------------------*/
        .zone-magazine{
            .data-list{
                margin-top:0;
                justify-content:end;

                p{
                    margin:0 2.4rem 0 0;
                }
            }
        }
        /* BODY ZONE ---------------------------------------------------------*/
        .zone-body{
            .content{
                .form-group:nth-of-type(2){
                    .text-form{
                        margin-top:2.4rem;
                    }
                }
            }
        }

        #agree-check{
            width:100%;

            .rules{
                margin:4.8rem auto 1rem;

                li{
                    padding:1.8rem;
                    font-size:1.6rem;

                    a{
                        font-size:1.6rem;
                    }

                    &:nth-child(2){
                        padding:1.8rem 0;
                    }
                }
            }

            .form-group{
                label{
                    font-size:1.8rem;

                    &:before{
                        margin-right:.8rem;
                        font-size:2.6rem;
                    }
                }
            }

            .error{
                margin:.8rem auto 3.6rem;
                text-align:center;
            }
        }

        /* CARD TYPE LIST ----------------------------------------------------*/
        .list-card{
            display:flex;
            margin:0 6.4rem;
            flex-wrap:wrap;

            li{
                margin:1.6rem 1.6rem 0 0;
                width:calc(((100vw - 12.8rem) / 2) - .8rem);
                box-shadow:0 0 .5rem rgba(0,0,0,.3);

                &:nth-child(2n+2){
                    margin-right:0;
                }

                .lt-item-thumb{
                    width:calc(((100vw - 12.8rem) / 2) - .8rem);
                    height:calc(((100vw - 12.8rem) / 2) - .8rem);
                }
                .item-thumb{
                    width:calc(((100vw - 12.8rem) / 2) - .8rem);
                    height:calc(((100vw - 12.8rem) / 2) - .8rem);
                }
            }
        }
    }
}


/*------------------------------------------------------------------------------
// 3.0.0.0 WIDTH 960px or OVER
------------------------------------------------------------------------------*/
@media screen and (min-width:960px){
    :root{
        font-size:10px;
    }

    /* FORM ERROR ------------------------------------------------------------*/
    .error-form:not(.radio-form){
        &:not(.select-form) p,
        &.select-form p:nth-of-type(2){
            background:linear-gradient(0deg,var(--back) 59%,transparent 59%) !important;
        }

        &::after{
            right:1.8rem;
            font-size:3.5rem;
        }

        &:has(.view)::after,
        &:has(.view-off)::after{
            right:4.8rem;
        }
    }

    .error{
        margin-top:1.5rem;
        font-size:1.75rem;
    }


    /* TEXT FORM -------------------------------------------------------------*/
    input[type='text'],
    input[type='password'],
    input[type='email'],
    input[type='tel']{
        padding:2.25rem;
        font-size:2rem;
    }

    .text-form{
        margin-top:3rem;

        p{
            top:2.25rem;
            left:2.25rem;
            padding:0 .75rem;
            font-size:2rem;
            background:linear-gradient(0deg,var(--back) 53%,transparent 53%);

            /* 用途不明 */
            span{
                display:inline-block;
                margin-left:.8rem;
                padding:.4rem;
                font-size:1.2rem;
                color:var(--text);
                background:var(--gray);
                border-radius:.4rem;
            }
        }

        /* TEXT FORM FOCUS -------------------------------------------------------*/
        &:focus-within p,
        input:autofill+p,
        input:not(:placeholder-shown)+p{
            font-size:1.5rem;
        }

        &:focus-within{
            p{
                background:linear-gradient(0deg,var(--back) 59%,transparent 59%) !important;

                /* 用途不明 */
                span{
                    margin-left:.4rem;
                    font-size:1rem;
                    font-weight:bold;
                    color:var(--back);
                    background:var(--accent);
                }
            }
        }

        /* PASSWORD VIEW ---------------------------------------------------------*/
        .view,
        .view-off{
            right:1.6rem;
            width:2.4rem;
            height:2.4rem;
    
            &::before{
                font-size:2.4rem;
            }
        }

        .view::before{
            content:'visibility';
        }

        .view-off::before{
            content:'visibility_off';
        }
    }


    input:not(:placeholder-shown)+p:not(.error) span{
        margin-left:.4rem;
        font-weight:bold;
        font-size:1rem;
    }

    /* SELECTED FORM ---------------------------------------------------------*/
    .select-form{
        margin-top:2.4rem;

        p{
            font-size:2rem;

            &:nth-of-type(1){
                padding:2.25rem;
                height:6.75rem;
            }

            &:nth-of-type(2){
                top:2.25rem;
                left:2.25rem;
                padding:0 .75rem;
            }

            &:nth-of-type(1):not(:empty)+p:nth-of-type(2){
                top:-.8rem;
                left:.8rem;
                font-size:1.5rem;
                background:linear-gradient(0deg,var(--back) 53%,transparent 53%);
            }
        }

        ul{
            li{
                padding:.9rem;
                font-size:1.6rem;
            }
        }

        &.active{
            p:nth-of-type(1){
                padding:1.4rem 1.8rem;
                height:5.2rem;
            }

            &.active ul{
                top:5.4rem;
                left:.9rem;
                width:calc(100% - 1.8rem);
                min-height:25.6rem;
                max-height:34rem;
            }
        }

        &::after{
            top:.725rem;
            right:1rem;
            font-size:4rem;
        }

        &.error-form::after{
            right:2.4rem;
        }
    }

    /* TEXTAREA FORM ---------------------------------------------------------*/
    .area-form{
        margin-top:3rem;

        textarea{
            padding:2.25rem;
            font-size:2rem;
        }

        p{
            top:1.8rem;
            left:1.8rem;
            padding:0 .75rem;
            font-size:2rem;
            background:linear-gradient(0deg,var(--back) 37%,transparent 37%);
        }

        &:focus-within p,
        textarea:not(:placeholder-shown)+p{
            top:-.8rem;
            left:.8rem;
            font-size:1.2rem;
        }
    
        &:focus-within{
            p{
                background:linear-gradient(0deg,var(--back) 46%,transparent 46%);
            }
        }
    }

    /* RADIO FORM ------------------------------------------------------------*/
    .radio-form{
        margin-top:2.4rem;

        li{
            margin-top:2rem;

            label{
                padding:2.8rem 2.25rem;
                font-size:2rem;
            }

            input:checked+label{
                padding:2.2rem 2.25rem;

                &::after{
                    margin-left:1rem;
                    font-size:3rem;
                }
            }
        }
    }

    /*----------------------------------3.0.2.0 ----------------BUTTON DESIGN */
    .button-fill,
    .button-border{
        margin:4.5rem auto;
        padding:2.25rem;
        width:50.9rem;
        font-size:2rem;
        border-radius:1.6rem;
    }


    /*----------------------------------3.1.0.0 -----------------------HEADER */
    header{
        /* SEARCH FORM -------------------------------------------------------*/
        &.open{
            .menu{
                li{
                    &#search{
                        .search-form{
                            width:50rem;
                        }
                    }
                }
            }

            .suggest:not(:empty){
                top:64px;
                left:auto;
                right:132px;
                width:50rem;
            }
        }
    }

    /*----------------------------------3.2.0.0 -----------------------FOOTER */

    /* FOOTER NAVIGATION -----------------------------------------------------*/
    footer .footer-nav{
        width:48rem;
    }

    footer .footer-nav li a{
        font-size:1.4rem;
    }

    /* SNS NAVIGATION --------------------------------------------------------*/
    footer .sns-nav{
        width:48rem;
    }

    footer .sns-nav li{
        width:4.8rem;
    }


    /*----------------------------------3.3.0.0 -------------------------MAIN */
    main{
        /*------------------------------3.3.1.0 ------------ENTRY ZONE DESIGN */
        .zone-name,
        .zone-email,
        .zone-pass,
        .zone-address,
        .zone-tel,
        .zone-birth,
        .zone-sex,
        .zone-payment,
        .zone-delivery,
        .zone-point,
        .zone-item,
        .zone-subject,
        .zone-body,
        .zone-magazine{
            margin-top:6rem;

            .form-title{
                width:30rem;
                font-size:2rem;

                span{
                    font-size:1.75rem;
                }

                /* GROUPING ICON -------------------------------------------------*/
                &::before{
                    margin-right:1rem;
                    font-size:3.25rem;
                }

                &.have-point{
                    #reset{
                        bottom:-2.55rem;
                    }
                }
            }

            .data-list{
                margin-left:4rem;
            }

            p[class^='d-']{
                margin:1rem 0 0 4rem;
                font-size:2.25rem;

                ruby{
                    margin-right:1rem;
                    font-size:2.25rem;

                    rt{
                        font-size:1.6rem;
                    }
                }

                &.d-address{
                    line-height:1.4;
                }

                &.data-list{
                    margin-top:0;
                }
            }
        }

        /* NAME ZONE ---------------------------------------------------------*/
        .zone-name{
            .form-group{
                label{
                    width:calc(50% - .8rem);
                }
            }
        }

        /* PASSWARD ZONE -----------------------------------------------------*/

        /* ADDRESS ZONE ------------------------------------------------------*/
        .zone-address{
            .form-group{
                label{
                    margin-top:1.6rem;

                    &:nth-child(-n+2){
                        margin-top:0;
                    }
                }
            }
        }

        /* BIRTHDAY ZONE -----------------------------------------------------*/
        .zone-birth{
            .form-title{
                i{
                    top:-3.25rem;
                    padding:.25rem 1rem;
                    font-size:1.5rem;
                    border-radius:1rem;
                }
            }

            .form-group{
                label{
                    width:calc((100% - 1.6rem) / 3);
                }
            }
        }

        /* PAYMENT ZONE ------------------------------------------------------*/
        .zone-payment{
            .detail{
                margin-top:2rem;
                padding:1rem;

                span:first-child{
                    margin-right:1rem;
                    padding:1rem;
                    font-size:1.5rem;
                    border-radius:.4rem;
                }

                span:last-child{
                    padding-top:1rem;
                    font-size:1.75rem;

                    img{
                        width:4.6rem;
                        height:calc(4.6rem * .6222);
                    }
                }
            }
        }

        /* DELIVERY ZONE -----------------------------------------------------*/
        .zone-delivery{
            h3{
                padding-bottom:1rem;
                font-size:2rem;

                &:nth-of-type(2){
                    margin-top:3rem;
                }

                &:before{
                    margin-right:1rem;
                    font-size:3.25rem;
                }
            }

            p{
                margin-left:0;
            }
        }

        /* POINT ZONE --------------------------------------------------------*/
        .zone-point{
            .radio-form,
            li{
                margin-top:0;
            }
        }

        /* ITEM ZONE ---------------------------------------------------------*/
        .zone-item{
            .data-list{
                li{
                    margin-top:1.125rem;
                    padding-bottom:1.125rem;

                    .thumb{
                        width:16.1rem;
                        height:16.1rem;
                    }

                    .description{
                        margin-left:2.5rem;

                        p{
                            &.lt-item-name{
                                font-size:1.7rem;

                                span{
                                    font-size:1.4rem;
                                }
                            }
                            &.item-name{
                                font-size:1.7rem;

                                span{
                                    font-size:1.4rem;
                                }
                            }

                            &.lt-item-price{
                                font-size:1.7rem;

                                span:nth-of-type(1){
                                    font-size:1.4rem;
                                }

                                span:nth-of-type(n+2){
                                    font-size:1.1rem;
                                }
                            }
                            &.item-price{
                                font-size:1.7rem;

                                span:nth-of-type(1){
                                    font-size:1.4rem;
                                }

                                span:nth-of-type(n+2){
                                    font-size:1.1rem;
                                }
                            }

                            &.item-total,
                            &.item-point{
                                margin-top:1.1rem;

                                b:first-child{
                                    margin-right:.85rem;
                                    padding:.6rem;
                                    font-size:1.4rem;
                                    border-radius:.6rem;
                                }

                                b:last-child{
                                    font-size:2.25rem;
                                }

                                span:first-of-type{
                                    font-size:2rem;
                                }

                                span:last-of-type{
                                    font-size:1.7rem;
                                }
                            }

                            &.lt-item-price,
                            &.item-price,
                            &.item-point{
                                margin-top:3.2rem;
                            }
                        }
                    }
                }
            }
        }
    
        /* MAGAZINE ZONE -----------------------------------------------------*/
        .zone-magazine{
            .data-list{
                p{
                    font-size:2rem;
                }
            }
        }

        /* AGREE CHECK -------------------------------------------------------*/
        #agree-check{
            .rules{
                margin:6rem auto 1.25rem;

                li{
                    padding:2.25rem;
                    font-size:2rem;

                    a{
                        font-size:2rem;
                    }

                    &:nth-child(2){
                        padding:2.25rem 0;
                    }
                }
            }

            .form-group{
                label{
                    font-size:2.25rem;

                    &:before{
                        margin-right:1rem;
                        font-size:3.25rem;
                    }
                }
            }

            .error{
                margin:.8rem auto 3.6rem;
                text-align:center;
            }
        }

        /* CARD TYPE LIST ----------------------------------------------------*/
        .list-card{
            margin:0 auto;
            width:93.75vw;
    
            li{
                margin:2.34375vw 2.34375vw 0 0;
                width:21.6796875vw;
                background:var(--back);
                padding: 0;
    
                a{
                    display:flex;
                    flex-wrap:wrap;
                }
    
                &:nth-child(2n+2){
                    margin-right:2.2666666%;
                    margin-right:2.34375vw;
                }
    
                &:nth-child(4n+4){
                    margin-right:0;
                }
    
                .lt-item-thumb{
                    width:21.6796875vw;
                    height:21.6796875vw;
                }
    
                .item-thumb{
                    width:21.6796875vw;
                    height:21.6796875vw;
                }

                .lt-item-descript{
                    position:static;
                    width:100%;
                    background:none;
                    color:#555;
    
                    .lt-item-name{
                        color:var(--text);
                    }
    
                    .lt-item-price{
                        color:var(--text);
    
                        span{
                            color:var(--text);
                        }
                    }
                }
                .item-descript{
                    position:static;
                    width:100%;
                    background:none;
                    color:#555;
    
                    .item-name{
                        color:var(--text);
                    }
    
                    .item-price{
                        color:var(--text);
    
                        span{
                            color:var(--text);
                        }
                    }
                }
    
                .lt-more{
                    position:static;
                    display:none;
                }
                .more{
                    position:static;
                    display:none;
                }
            }
        }
    }
}

/*------------------------------------------------------------------------------
// 4.0.0.0 WIDTH 1280px or OVER
------------------------------------------------------------------------------*/
@media screen and (min-width:1024px){
    /*----------------------------------3.3.0.0 -------------------------MAIN */
    main{
        /* CARD TYPE LIST ----------------------------------------------------*/
        .list-card{
            width:96rem;
    
            li{
                margin:2.4rem 2.4rem 0 0;
                width:22.2rem;
    
                &:nth-child(2n+2){
                    margin-right:2.4rem;
                }
    
                &:nth-child(4n+4){
                    margin-right:0;
                }
    
                .lt-item-thumb{
                    width:22.2rem;
                    height:22.2rem;
                }
                .item-thumb{
                    width:22.2rem;
                    height:22.2rem;
                }
            }
        }
    }
}