/* カスタマイズ用CSS */

/*ヘッダーここから*/

/* =====================================================
   CLOVIA HEADER
===================================================== */


/* HEADER */

/* =================================
   CLOVIA SEARCH RESET
================================= */


.clv-search{
    width:300px;
}


.clv-search .ec-headerSearch{
    width:100%;
}


.clv-search form.searchform{
    display:block !important;
    width:100% !important;
}



/* カテゴリ非表示 */

.clv-search .ec-headerSearch__category{
    display:none !important;
}



/* 検索枠 */

.clv-search .ec-headerSearch__keyword{

    width:100% !important;

}



.clv-search .ec-input{

    position:relative !important;

    width:100% !important;

}



/* input */

.clv-search input.search-name{

    box-sizing:border-box !important;

    width:100% !important;

    height:18px !important;

    padding:0 40px 2px 5px !important;

    border:none !important;

    border-bottom:1px solid #111 !important;

    border-radius:0 !important;

    background:transparent !important;

    font-size:12px !important;

    letter-spacing:.15em !important;

}





/* placeholder */

.clv-search input.search-name::placeholder{

    color:#999 !important;

}





/* focus */

.clv-search input.search-name:focus{

    outline:none !important;

}





/* 検索ボタン */

.clv-search .ec-headerSearch__keywordBtn{

    position:absolute !important;

    right:5px !important;

    top:50% !important;

    transform:translateY(-50%) !important;

    margin:0 !important;

    padding:0 !important;

    background:none !important;

    border:0 !important;

}



.clv-search .ec-headerSearch__keywordBtn img{

    width:14px !important;

    height:14px !important;

}

.clv-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:99;

    background:rgba(255,255,255,.95);

    transition:.3s ease;

}


.clv-header.is-scroll{

    background:#111;

}



/* HEADER INNER */

.clv-header-inner{

    max-width:1920px;

    height:70px;

    margin:0 auto;

    padding:5px 25px 0;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



/* =====================================================
   LOGO
===================================================== */


.clv-logo img{

    height:45px;

    width:auto;

    display:block;

}




/* =====================================================
   CATEGORY + SEARCH
===================================================== */


.clv-search-area{

    display:flex;

    align-items:center;

    gap:40px;

}



/* CATEGORY */

.clv-category-nav{

    display:flex;

    align-items:center;

    gap:25px;

}



.clv-category-nav a{

    color:#111;

    text-decoration:none;

    font-size:12px;

    letter-spacing:.18em;

    position:relative;

}



.clv-category-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-7px;

    width:0;

    height:1px;

    background:#111;

    transition:.3s ease;

}



.clv-category-nav a:hover::after{

    width:100%;

}





/* =====================================================
   SEARCH
===================================================== */


.clv-search{

    width:300px;

}



.clv-search form{

    display:flex;

    align-items:center;

}



.clv-search .ec-headerSearch__category{

    display:none;

}



.clv-search .ec-headerSearch__keyword{

    width:100%;

}



.clv-search .ec-input{

    position:relative;

}



.clv-search input.search-name{

    width:100%;

    height:38px;

    padding:0 40px 0 5px;

    border:0;

    border-bottom:1px solid #111;

    background:transparent;

    font-size:12px;

    letter-spacing:.15em;

}



.clv-search input.search-name::placeholder{

    color:#999;

}



.clv-search input.search-name:focus{

    outline:none;

}





/* SEARCH ICON */

.clv-search .ec-headerSearch__keywordBtn{

    position:absolute;

    right:5px;

    top:50%;

    transform:translateY(-50%);

    padding:0;

    border:0;

    background:none;

}



.clv-search .ec-headerSearch__keywordBtn img{

    width:14px;

}





/* =====================================================
   RIGHT MENU
===================================================== */


.clv-actions{

    display:flex;

    align-items:center;

    gap:35px;

}



.clv-action{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:5px;

    color:#111;

    text-decoration:none;

    font-size:10px;

    letter-spacing:.15em;

}



.clv-action i{

    font-size:18px;

}





/* =====================================================
   SP HAMBURGER
===================================================== */


.clv-sp-menu{

    display:none;

}





/* =====================================================
   SCROLL COLOR CHANGE
===================================================== */


.clv-header.is-scroll .clv-category-nav a,

.clv-header.is-scroll .clv-action{

    color:#fff;

}



.clv-header.is-scroll .clv-search input.search-name{

    border-color:#fff;

    color:#fff;

}



.clv-header.is-scroll .clv-search input::placeholder{

    color:#ccc;

}




/* =====================================================
   MOBILE
===================================================== */


@media(max-width:768px){


    .clv-header-inner{

        height:70px;

        padding:0 20px;

        position:relative;

        justify-content:center;

    }
    
    .ec-blockTopBtn {
        display: none!important;
    }



    /* LOGO CENTER */

    .clv-logo{

        position:absolute;

        left:50%;

        transform:translateX(-50%);

    }



    .clv-logo img{

        height:35px;

    }



    /* SEARCH OFF */

    .clv-search-area{

        display:none;

    }



    /* PC MENU OFF */

    .clv-actions{

        display:none;

    }



    /* HAMBURGER */

    .clv-sp-menu{

        display:block;

        position:absolute;

        right:20px;

    }



}

/*ヘッダーここまで*/




.logoarea {
    width: 180px;
    display: block;
    margin-right: 35px;
}

@media only screen and (min-width: 768px) {
    
    
    
    .ec-layoutRole__header {
        background-color: #fff;
        z-index: 999;
        width: 100%;
        position: fixed;
    }
    
    .ec-headerNaviRole {
    padding-bottom: 0px;
    width: 100%;
    max-width: 1920px;
    }
    
}


@media screen and (max-width:768px) { 
 
.logoarea {
    display: none;
}
   
}

@media screen and (min-width:768px) { 
.ec-headerRole {
    display: none;
}

}




/* 新着商品(女性)*/
.newin-section{
    width: 100%;
    max-width:1900px;
    margin:80px auto;
    display:flex;
    gap:40px;
    position:relative;
}



/* 左画像 */

.newin-image{
    width:40%;
    position:relative;
}


.newin-image img{
    width:100%;
    display:block;
}



/* 画像下の文字 */

.newin-copy{
    position:absolute;
    left:0;
    bottom:0;

    width:100%;
    padding:90px 30px 30px;

    background:
    linear-gradient(
        to top,
        rgba(255,255,255,0.95),
        rgba(255,255,255,0)
    );
}


.newin-copy h2{

    margin:0 0 12px;

    font-size:36px;
    font-weight:500;
    letter-spacing:3px;

}


.newin-copy p{

    margin:0;

    font-size:14px;
    line-height:1.8;

}




/* 商品 */

.newin-products{

    width:70%;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:0px 15px;

}



.newin-item{

    display:block;

    text-decoration:none;

    color:#111;

}



.newin-thumb img{

    width:100%;

    aspect-ratio:1 / 1;

    object-fit:cover;

}



.newin-name{

    margin-top:12px;

    font-size:14px;

}



.newin-price{

    margin-top:5px;

    font-size:14px;

}





/* VIEW MORE */

.newin-more{

    position:absolute;

    right:15px;

    bottom:-45px;

    padding:12px 40px;

    border:1px solid #111;

    color:#111;

    text-decoration:none;

    font-size:12px;

    letter-spacing:1px;

    overflow:hidden;

    z-index:1;

    transition:color .3s ease;

}



/* 黒背景 */

.newin-more::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:#111;

    transform:translateX(-100%);

    transition:transform .3s ease;

    z-index:-1;

}



/* hover時 */

.newin-more:hover{

    color:#fff;

}



.newin-more:hover::before{

    transform:translateX(0);

}




@media(max-width:768px){


    .newin-section{

        display:block;

        padding:0 20px;

    }



    .newin-image{

        width:100%;

        margin-bottom:40px;

    }



    .newin-products{

        width:100%;

        grid-template-columns:repeat(2,1fr);

        gap:25px 15px;

    }



    .newin-copy{

        padding:80px 20px 20px;

    }



    .newin-copy h2{

        font-size:28px;

    }



    .newin-more{

        position:static;

        display:block;

        width:max-content;

        margin:40px auto 0;

    }


}


/* 新着商品(女性) ここまで*/








/*スマホ下部メニューここから*/

.mobile-bottom-nav{
    display:none;
}


@media(max-width:768px){

    .mobile-bottom-nav{

        position:fixed;

        bottom:0;
        left:0;

        width:100%;

        height:66px;

        background:rgba(255,255,255,.96);

        border-top:1px solid #e8e8e8;

        display:flex;

        z-index:9999;

    }


    .mobile-bottom-item{

        flex:1;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        text-decoration:none;

        color:#111;

        font-size:9px;

        letter-spacing:1px;

    }


    .mobile-bottom-item svg{

        width:21px;

        height:21px;

        margin-bottom:5px;

        fill:none;

        stroke:#111;

        stroke-width:1.5;

        stroke-linecap:round;

        stroke-linejoin:round;

    }


    .live-icon{

        width:22px;

        height:22px;

        border-radius:50%;

        background:#111;

        display:flex;

        justify-content:center;

        align-items:center;

        margin-bottom:5px;

    }


    .live-icon span{

        width:7px;

        height:7px;

        background:#fff;

        border-radius:50%;

    }


    body{

        padding-bottom:75px;

    }

}

/*スマホ下部メニューここまで*/




/*フッターここから*/

/* =================================
   CLOVIA FOOTER
================================= */

.ec-layoutRole__footer{

    background:#fff !important;

    margin-top:100px;

    padding:0;

}



/* ===============================
   NEWS
================================ */

.ec-newsRole{

    max-width:1200px;

    margin:0 auto;

    padding:80px 20px;

}



.ec-secHeading{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin-bottom:40px;

}



.ec-secHeading__en{

    font-family:serif;

    font-size:28px;

    letter-spacing:.2em;

    color:#111;

}



.ec-secHeading__line{

    width:40px;

    height:1px;

    background:#111;

}



.ec-secHeading__ja{

    font-size:11px;

    letter-spacing:.2em;

    color:#888;

}



/* NEWS LIST */

.ec-newsRole__news{

    max-width:700px;

    margin:auto;

}



.ec-newsRole__newsItem{

    border-bottom:1px solid #eee;

    padding:20px 0;

}



.ec-newsRole__newsHeading{

    cursor:pointer;

}



.ec-newsRole__newsColumn{

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.ec-newsRole__newsDate{

    font-size:11px;

    color:#999;

    letter-spacing:.1em;

}



.ec-newsRole__newsTitle{

    font-size:13px;

    letter-spacing:.15em;

}



.ec-newsRole__newsClose{

    display:none;

}


.ec-newsRole__newsDescription{

    font-size:12px;

    color:#777;

    line-height:2;

    padding-top:15px;

}





/* ===============================
   FOOTER NAV
================================ */


.ec-footerRole{

    border-top:1px solid #eee;

    background:#fff;

}



.ec-footerRole__inner{

    max-width:1200px;

    margin:auto;

    padding:70px 20px;

}



.ec-footerNavi{

    display:flex;

    justify-content:center;

    gap:45px;

    list-style:none;

    padding:0;

    margin:0 0 60px;

}



.ec-footerNavi__link a{

    color:#111;

    text-decoration:none;

    font-size:11px;

    letter-spacing:.2em;

    transition:.3s;

}



.ec-footerNavi__link a:hover{

    opacity:.5;

}





/* LOGO */

.ec-footerTitle{

    text-align:center;

}



.ec-footerTitle__logo a{

    color:#111;

    text-decoration:none;

    font-family:serif;

    font-size:26px;

    letter-spacing:.25em;

}



.ec-footerTitle__copyright{

    margin-top:20px;

    font-size:10px;

    color:#999;

    letter-spacing:.15em;

}





/* ===============================
   MOBILE
================================ */


@media(max-width:768px){


.ec-newsRole{

    padding:50px 20px;

}



.ec-secHeading__en{

    font-size:22px;

}



.ec-footerRole__inner{

    padding:30px 80px;

}



.ec-footerNavi{

    display:block;

    text-align:center;

}



.ec-footerNavi__link{

    margin-bottom:15px;

}



.ec-footerTitle__logo a{

    font-size:22px;

}


}


/* =================================
   CLOVIA FOOTER COLOR FIX
================================= */

.ec-footerRole,
.ec-footerRole *{

    color:#111 !important;

}


.ec-footerNavi__link a{

    color:#111 !important;

}


.ec-footerTitle__logo a{

    color:#111 !important;

}


.ec-footerTitle__copyright{

    color:#888 !important;

}


.ec-secHeading__en{

    color:#111 !important;

}


.ec-secHeading__ja{

    color:#777 !important;

}


.ec-newsRole__newsDate{

    color:#999 !important;

}


.ec-newsRole__newsTitle{

    color:#111 !important;

}


.ec-newsRole__newsDescription{

    color:#666 !important;

}

@media(max-width:768px){

    .ec-footerTitle__logo img{

        width:180px !important;

        max-width:80% !important;

        height:auto !important;

    }

}

/*フッターここまで*/




/*スマホスライダーここから*/

/* ==========================================
   CLOVIA MOBILE DRAWER
========================================== */

.clv-spmenu{
    display:flex;
    flex-direction:column;
    height:100%;
    background:#fff;
    padding:30px 28px calc(110px + env(safe-area-inset-bottom));
}

/* ===========================
   HEADER
=========================== */

.clv-spmenu__header{
    position:relative;
    text-align:center;
    padding-bottom:35px;
    margin-bottom:35px;
    border-bottom:1px solid #eee;
}

.clv-spmenu__logo img{
    width:180px;
    max-width:70%;
    height:auto;
}

.clv-spmenu__close{
    position:absolute;
    top:0;
    right:0;
    width:40px;
    height:40px;
    border:none;
    background:none;
    cursor:pointer;
    font-size:24px;
    color:#111;
    transition:.3s;
}

.clv-spmenu__close:hover{
    transform:rotate(90deg);
}

/* ===========================
   NAV
=========================== */

.clv-spmenu__nav{
    display:flex;
    flex-direction:column;
}

.clv-spmenu__nav a{

    display:flex;
    align-items:center;
    justify-content:space-between;

    height:64px;

    color:#111;
    text-decoration:none;

    border-bottom:1px solid #f3f3f3;

    font-size:14px;

    letter-spacing:.18em;

    transition:.3s;
}

.clv-spmenu__nav a span{

    width:28px;

    color:#aaa;

    font-size:11px;

    letter-spacing:.15em;

}

/* → */

.clv-spmenu__nav a::after{

    content:"→";

    color:#999;

    transition:.3s;

}

/* hover */

.clv-spmenu__nav a:hover{

    padding-left:10px;

    background:#fafafa;

}

.clv-spmenu__nav a:hover::after{

    transform:translateX(6px);

}

/* ===========================
   BORDER
=========================== */

.clv-spmenu__border{

    height:1px;

    background:#eee;

    margin:30px 0;

}

/* ===========================
   FOOTER
=========================== */

.clv-spmenu__footer{

    margin-top:auto;

    padding-top:40px;

    border-top:1px solid #eee;

}

.clv-spmenu__footer a{

    display:inline-block;

    color:#111;

    text-decoration:none;

    letter-spacing:.18em;

    font-size:12px;

    margin-bottom:18px;

    transition:.3s;

}

.clv-spmenu__footer a:hover{

    opacity:.5;

}

.clv-spmenu__footer small{

    display:block;

    color:#999;

    font-size:10px;

    letter-spacing:.15em;

}



/* ===========================
   スクロール
=========================== */

.clv-spmenu{

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

}

/*スマホスライダーここまで*/




/* =========================
 CLOVIA ログイン
========================= */


.clv-login-wrap{

    min-height:80vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}



.clv-login-box{

    width:100%;

    max-width:420px;

    text-align:center;

}



.clv-login-logo img{

    width:160px;

    margin-bottom:50px;

}




.clv-login-box h1{

    font-size:18px;

    letter-spacing:.4em;

    font-weight:400;

    margin-bottom:40px;

}





.clv-input input{

    width:100%;

    height:54px;

    border:1px solid #ddd;

    border-radius:0;

    padding:0 18px;

    font-size:14px;

    margin-bottom:15px;

    box-sizing:border-box;

}



.clv-input input:focus{

    outline:none;

    border-color:#000;

}




.clv-login-btn{


    width:100%;

    height:54px;

    background:#000;

    color:#fff;

    border:none;

    font-size:13px;

    letter-spacing:.3em;

    cursor:pointer;

    margin-top:20px;


}



.clv-login-btn:hover{

    opacity:.8;

}




.clv-login-links{


    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:30px;


}



.clv-login-links a{


    font-size:12px;

    color:#777;

    text-decoration:none;


}



.clv-login-links a:hover{

    color:#000;

}


/* =================================
   CLOVIA REGISTER PAGE
================================= */


.registration_page{

    background:#fafafa;

}



/* wrapper */

.clv-register{

    max-width:900px;

    margin:0 auto;

    padding:60px 20px;

}



/* header */

.clv-register__header{

    text-align:center;
    margin-top: 70px;
    margin-bottom:50px;

}



.clv-register__header h1{

    font-size:28px;

    font-weight:500;

    letter-spacing:.25em;

    margin:0;

}



.clv-register__header p{

    margin-top:15px;

    font-size:11px;

    letter-spacing:.5em;

    color:#999;

}






/* form */

.clv-register__form{


    background:#fff;

    padding:60px;

    border-radius:24px;

    box-shadow:

    0px 0px 15px 15px rgba(0,0,0,.05);


}






/* field */

.clv-field{


    padding:25px 0;

    border-bottom:1px solid #eee;


}



.clv-field > label{


    display:block;

    font-size:13px;

    letter-spacing:.15em;

    margin-bottom:12px;

    color:#222;


}







/* input */

.clv-register input,
.clv-register select{


    width:100%;

    height:48px;

    border:1px solid #ddd;

    border-radius:8px;

    padding:0 15px;

    font-size:14px;

    background:#fff;

    transition:.3s;


}



.clv-register input:focus,
.clv-register select:focus{


    outline:none;

    border-color:#000;


}






/* 姓名・カナ */

.clv-input-group{


    display:flex;

    gap:12px;


}



.clv-input-group input{


    flex:1;


}







/* 住所 */

.clv-field select{


    margin-bottom:12px;


}






/* 生年月日 */

.clv-birth{


    display:flex;

    gap:10px;

}



.clv-birth select{


    flex:1;


}








/* ==========================
 RADIO
========================== */


.clv-radio{


    display:flex;

    align-items:center;


}



.clv-radio input[type="radio"]{


    appearance:none;

    -webkit-appearance:none;


    width:18px;

    height:18px;


    border-radius:50%;


    border:1px solid #aaa;


    margin-right:8px;


    position:relative;


    padding:0;


}



.clv-radio input[type="radio"]:checked{


    border-color:#000;


}



.clv-radio input[type="radio"]:checked::after{


    content:"";


    position:absolute;


    width:8px;

    height:8px;


    background:#000;


    border-radius:50%;


    top:50%;

    left:50%;


    transform:translate(-50%,-50%);


}



.clv-radio label{


    margin-right:20px;

    font-size:14px;


}








/* footer */

.clv-register__footer{


    margin-top:45px;

    text-align:center;


}






/* 利用規約 */

.clv-policy{


    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;


    font-size:13px;

    margin-bottom:35px;


}



.clv-policy input{


    width:16px;

    height:16px;

}





/* submit */

.clv-register__footer button{


    width:100%;

    height:56px;


    background:#000;

    color:#fff;


    border:none;


    border-radius:30px;


    font-size:14px;

    letter-spacing:.2em;


    cursor:pointer;


    transition:.3s;


}



.clv-register__footer button:hover{


    opacity:.75;


}






/* back */

.clv-register__footer a{


    display:block;


    margin-top:25px;


    color:#777;


    font-size:13px;


}







/* ==========================
 MOBILE
========================== */


@media(max-width:768px){


.clv-register{


    padding:30px 15px;


}



.clv-register__form{


    padding:30px 20px;

    border-radius:15px;


}



.clv-register__header h1{


    font-size:22px;


}



.clv-input-group{


    display:block;


}



.clv-input-group input:first-child{


    margin-bottom:10px;


}



.clv-birth{


    gap:5px;


}



}


/* radioだけ通常サイズへ戻す */

.clv-register input[type="radio"]{


    width:18px !important;

    height:18px !important;

    padding:0;

    margin:0 8px 0 0;


}




/* radio wrapper */

.clv-custom-field > div{


    display:flex;

    align-items:center;

    gap:20px;


}



.clv-custom-field label{


    display:inline-flex;

    align-items:center;

    width:auto;


}




.clv-custom-field input[type="checkbox"]{


    width:18px !important;

    height:18px !important;


}





/* メルマガ */

#entry_mailmaga_flg{


    display:flex;

    align-items:center;

    gap:25px;


}


#entry_mailmaga_flg label{


    font-size:14px;

    margin:0;


}






/* ==========================
 マイページここから
========================== */
/* =================================
   CLOVIA MYPAGE
================================= */

.clv-mypage{

    max-width:1100px;

    margin:80px auto;

    padding:0 30px;

    color:#111;

}



/* タイトル */

.clv-page-title{

    text-align:center;
    margin-top: 100px;
    margin-bottom:60px;

}


.clv-page-title h1{

    font-size:32px;

    letter-spacing:.35em;

    font-weight:500;

    margin:0;

}


.clv-page-title p{

    margin-top:15px;

    font-size:13px;

    letter-spacing:.25em;

    color:#777;

}





/* =================================
   マイページナビ
================================= */


.clv-mypage .ec-navlistRole{

    margin-bottom:60px;

}


.clv-mypage .ec-navlistRole__navlist{

    display:flex;

    justify-content:center;

    gap:10px;

    padding:0;

    list-style:none;

    border:none;

    flex-wrap:wrap;

}



.clv-mypage .ec-navlistRole__item{

    margin:0;

}



.clv-mypage .ec-navlistRole__item a{


    display:block;

    padding:12px 25px;

    border:1px solid #ddd;

    border-radius:30px;

    color:#111;

    font-size:13px;

    text-decoration:none;

    transition:.3s;

}



.clv-mypage .ec-navlistRole__item a:hover{

    background:#111;

    color:#fff;

}



.clv-mypage .ec-navlistRole__item.active a{

    background:#111;

    color:#fff;

    border-color:#111;

}





/* =================================
   注文履歴
================================= */


.clv-order-history{

    width:100%;

}


.clv-cart-page {
    width: 1300px;
    max-width: 90%;
    margin: 0 auto;
    
}


.clv-order-count{

    text-align:right;

    font-size:13px;

    color:#777;

    margin-bottom:30px;

}





/* カード */

.clv-order-card{

    border-top:1px solid #111;

    border-bottom:1px solid #ddd;

    margin-bottom:50px;

    padding-bottom:40px;

}





/* ヘッダー */

.clv-order-header{

    display:flex;

    align-items:center;

    gap:40px;

    padding:25px 0;

}



.clv-order-header div{

    display:flex;

    flex-direction:column;

    gap:8px;

}



.clv-order-header span{

    font-size:10px;

    letter-spacing:.2em;

    color:#999;

}


.clv-order-header strong{

    font-size:14px;

    font-weight:500;

}




/* 詳細ボタン */

.clv-detail-btn{


    margin-left:auto;


    padding:12px 30px;


    border:1px solid #111;


    color:#111;


    text-decoration:none;


    font-size:12px;


    letter-spacing:.1em;


    transition:.3s;


}



.clv-detail-btn:hover{

    background:#111;

    color:#fff;

}





/* 商品一覧 */


.clv-order-products{


    display:flex;

    flex-direction:column;

    gap:25px;


}



.clv-order-product{


    display:flex;

    gap:25px;

    align-items:center;


}



.clv-order-image{


    width:120px;

    height:150px;

    background:#f7f7f7;

    overflow:hidden;


}



.clv-order-image img{


    width:100%;

    height:100%;

    object-fit:cover;


}



.clv-order-info h3{


    font-size:15px;

    font-weight:500;

    margin:0 0 15px;


}



.clv-order-info p{


    color:#777;

    font-size:13px;

    margin-bottom:15px;


}



.clv-order-info strong{


    font-size:14px;

    font-weight:500;


}





/* 空状態 */


.clv-empty{


    text-align:center;

    padding:100px 0;

    color:#777;

}





/* ページャー */

.clv-pagination{


    margin-top:50px;

    text-align:center;


}




/* =================================
   SP
================================= */


@media(max-width:768px){


.clv-mypage{

    margin:50px auto;

    padding:0 20px;

}



.clv-page-title h1{

    font-size:25px;

}



.clv-mypage .ec-navlistRole__navlist{

    gap:8px;

}



.clv-mypage .ec-navlistRole__item a{

    padding:10px 15px;

    font-size:12px;

}



.clv-order-header{


    flex-direction:column;

    align-items:flex-start;

    gap:20px;


}



.clv-detail-btn{


    margin-left:0;

    width:100%;

    text-align:center;


}



.clv-order-product{


    align-items:flex-start;


}



.clv-order-image{


    width:90px;

    height:110px;


}



.clv-order-info h3{


    font-size:14px;


}

}


.ec-navlistRole .ec-navlistRole__item {
    border: none!important;
}



/* =================================
 CLOVIA CART PAGE
================================= */


/* ページタイトル */

.cart_page .ec-pageHeader{

    margin-bottom:60px;

}


.cart_page .ec-pageHeader h1{

    font-size:28px;

    font-weight:400;

    letter-spacing:.2em;

    text-align:center;

}



/* =================================
 STEP
================================= */


.clv-progress-wrap{

    max-width:900px;

    margin:0 auto 70px;

}



.clv-progress{

    display:flex;

    list-style:none;

    padding:0;

    margin:0;

}



.clv-progress__item{

    flex:1;

    text-align:center;

    position:relative;

}



.clv-progress__item:not(:last-child)::after{

    content:"";

    position:absolute;

    top:17px;

    left:50%;

    width:100%;

    height:1px;

    background:#ddd;

}



.clv-progress-number{


    width:34px;

    height:34px;


    margin:0 auto 15px;


    border-radius:50%;


    border:1px solid #ccc;


    background:#fff;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:13px;


    position:relative;

    z-index:2;


}



.clv-progress-label{

    font-size:12px;

    letter-spacing:.15em;

    color:#888;

}



.clv-progress__item.is-active .clv-progress-number{

    background:#111;

    border-color:#111;

    color:#fff;

}



.clv-progress__item.is-active .clv-progress-label{

    color:#111;

}





/* =================================
 CART SUMMARY
================================= */


.clv-cart-summary{


    display:flex;

    justify-content:flex-end;

    align-items:center;


    gap:50px;


    padding:35px 40px;


    background:#fafafa;


    margin-bottom:50px;


}



.clv-cart-summary p{


    margin:0;


    font-size:13px;


    letter-spacing:.2em;


    color:#777;


}



.clv-cart-summary strong{


    font-size:38px;


    font-weight:400;


    letter-spacing:.05em;


}





/* =================================
 CART LIST
================================= */


.clv-cart{


    max-width:1000px;

    margin:0 auto;


}



.clv-cart-item{


    display:flex;


    align-items:center;


    gap:35px;


    padding:35px 0;


    border-bottom:1px solid #eee;


}




.clv-cart-item img{


    width:130px;

    height:160px;


    object-fit:cover;


}



.clv-cart-item__info{


    flex:1;


}



.clv-cart-item__name{


    font-size:15px;

    letter-spacing:.12em;

    margin-bottom:15px;


}



.clv-cart-item__option{


    font-size:12px;

    color:#777;

    line-height:2;


}



.clv-cart-item__price{


    font-size:16px;


}




/* =================================
 QUANTITY
================================= */


.clv-cart-quantity{


    display:flex;

    align-items:center;

    gap:15px;


}



.clv-cart-quantity button{


    width:30px;

    height:30px;


    border-radius:50%;


    border:1px solid #ddd;


    background:#fff;


}





/* =================================
 ACTION
================================= */


.clv-cart-actions{


    text-align:right;


    margin-top:60px;


}



.clv-cart-total{


    font-size:18px;

    margin-bottom:30px;


}



.clv-cart-total strong{


    font-size:32px;

    font-weight:400;


}




.clv-cart-btn{


    display:inline-flex;


    align-items:center;

    justify-content:center;


    width:320px;

    height:60px;


    background:#111;


    color:#fff;


    text-decoration:none;


    letter-spacing:.2em;


}



.clv-cart-btn:hover{


    opacity:.8;


}



/* 戻るボタン */


.clv-cart-back{


    display:block;

    margin-top:25px;


    color:#555;


    font-size:13px;


}




/* =================================
 MOBILE
================================= */


@media(max-width:768px){



.clv-progress-wrap{

    margin-bottom:40px;

}



.clv-progress-label{

    font-size:10px;

}



.clv-progress-number{


    width:28px;

    height:28px;


}




.clv-cart-summary{


    padding:25px 15px;


    justify-content:space-between;


}



.clv-cart-summary strong{


    font-size:24px;


}



.clv-cart-item{


    gap:15px;

}



.clv-cart-item img{


    width:90px;

    height:120px;


}



.clv-cart-actions{


    text-align:center;


}



.clv-cart-btn{


    width:100%;


}



}


/* ===============================
 CART ACTIONS
=============================== */

.clv-cart-actions{

    max-width:520px;

    margin:40px auto 80px;

    display:flex;

    flex-direction:column;

    gap:16px;

    text-align:center;

}



.clv-btn-primary,
.clv-btn-secondary{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:58px;

    border-radius:999px;

    font-size:15px;

    letter-spacing:.12em;

    text-decoration:none;

    transition:.3s;

}



/* レジへ進む */

.clv-btn-primary{

    background:#000;

    color:#fff;

}



.clv-btn-primary:hover{

    opacity:.75;

}



/* 戻る */

.clv-btn-secondary{

    background:#fff;

    color:#000;

    border:1px solid #000;

}



.clv-btn-secondary:hover{

    background:#000;

    color:#fff;

}



/* スマホ */

@media(max-width:768px){


    .clv-cart-actions{

        margin:30px 20px 50px;

    }


    .clv-btn-primary,
    .clv-btn-secondary{

        height:52px;

        font-size:14px;

    }

}





/* =========================================================
   CLOVIA TOKYO - Checkout
   ========================================================= */

:root {
    --clv-black: #111111;
    --clv-dark: #222222;
    --clv-gray: #777777;
    --clv-light-gray: #f7f7f7;
    --clv-border: #e6e6e6;
    --clv-white: #ffffff;
}

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */

.clv-page,
.clv-checkout,
.clv-order {
    box-sizing: border-box;
}

.clv-page *,
.clv-checkout *,
.clv-order * {
    box-sizing: border-box;
}

.clv-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 70px 30px 0;
}

.clv-page-header {
    text-align: center;
}

.clv-page-header h1 {
    margin: 0;
    color: var(--clv-black);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: .12em;
}


/* =========================================================
   Progress
   ========================================================= */

.clv-progress-wrap {
    max-width: 900px;
    margin: 50px auto 70px;
    padding: 0 20px;
}

.clv-progress {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clv-progress::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: #dddddd;
    z-index: 0;
}

.clv-progress__item {
    position: relative;
    z-index: 1;
    width: 20%;
    text-align: center;
}

.clv-progress-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    margin: 0 auto 12px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    background: #fff;
    color: #999;
    font-size: 12px;
    letter-spacing: 0;
}

.clv-progress-label {
    color: #999;
    font-size: 11px;
    letter-spacing: .08em;
    white-space: nowrap;
}

.clv-progress__item.is-active .clv-progress-number {
    border-color: var(--clv-black);
    background: var(--clv-black);
    color: #fff;
}

.clv-progress__item.is-active .clv-progress-label {
    color: var(--clv-black);
    font-weight: 500;
}


/* =========================================================
   Checkout Layout
   ========================================================= */

.clv-order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 70px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px 100px;
}

.clv-order__detail {
    min-width: 0;
}

.clv-order__summary {
    min-width: 0;
}


/* =========================================================
   Section
   ========================================================= */

.clv-order-section {
    position: relative;
    margin-bottom: 45px;
    padding-bottom: 45px;
    border-bottom: 1px solid var(--clv-border);
}

.clv-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.clv-section-heading h2 {
    margin: 0;
    color: var(--clv-black);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: .08em;
}

.clv-section-action {
    position: absolute;
    top: 0;
    right: 0;
}

.clv-btn-small {
    min-width: 70px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid #222;
    background: #fff;
    color: #222;
    font-size: 11px;
    letter-spacing: .08em;
    cursor: pointer;
    transition: all .25s ease;
}

.clv-btn-small:hover {
    background: #111;
    color: #fff;
}


/* =========================================================
   Customer
   ========================================================= */

.clv-customer-info {
    color: #444;
    font-size: 13px;
    line-height: 2;
}

.clv-customer-info p {
    margin: 0 0 3px;
}

.clv-customer-info .customer-edit {
    margin-right: 3px;
}


/* =========================================================
   Form
   ========================================================= */

.clv-form-defs {
    margin-top: 10px;
}

.clv-form-defs dl {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 25px;
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid #eeeeee;
}

.clv-form-defs dt,
.clv-form-defs dd {
    margin: 0;
}

.clv-form-defs dt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-top: 11px;
}

.clv-label {
    color: #333;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
}

.clv-required {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 5px;
    background: #111;
    color: #fff;
    font-size: 9px;
    letter-spacing: .05em;
}

.clv-half-input {
    display: flex;
    gap: 10px;
}

.clv-half-input > * {
    flex: 1;
}


/* =========================================================
   Input / Select / Textarea
   ========================================================= */

.clv-order input[type="text"],
.clv-order input[type="email"],
.clv-order input[type="tel"],
.clv-order input[type="number"],
.clv-order input[type="password"],
.clv-order select,
.clv-order textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #dcdcdc;
    border-radius: 0;
    outline: none;
    background: #fff;
    color: #222;
    font-family: inherit;
    font-size: 13px;
    transition: border-color .2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.clv-order textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.8;
}

.clv-order input:focus,
.clv-order select:focus,
.clv-order textarea:focus {
    border-color: #111;
}

.clv-order input::placeholder,
.clv-order textarea::placeholder {
    color: #aaa;
}


/* Select arrow */

.clv-field select {
    background-image:
        linear-gradient(45deg, transparent 50%, #555 50%),
        linear-gradient(135deg, #555 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 20px,
        calc(100% - 13px) 20px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 40px;
}


/* =========================================================
   Delivery
   ========================================================= */

.clv-delivery-title {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eeeeee;
    color: #222;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .05em;
}

.clv-delivery-title .clv-section-action {
    top: -7px;
}

.clv-delivery-items {
    margin-bottom: 25px;
}

.clv-product-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.clv-product-list li {
    padding: 14px 0;
    border-bottom: 1px solid #eeeeee;
}

.clv-product {
    display: flex;
    gap: 18px;
}

.clv-product__image_shopping {
    flex: 0 0 80px;
    width: 80px;
    height: 100px;
    overflow: hidden;
    background: #f5f5f5;
}

.clv-product__image_shopping img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clv-product__content {
    flex: 1;
    min-width: 0;
    padding-top: 3px;
}

.clv-product__content p {
    margin: 0 0 7px;
    color: #555;
    font-size: 12px;
    line-height: 1.6;
}

.clv-product__content p:first-child {
    color: #222;
    font-size: 13px;
}

.clv-product__content p:last-child {
    margin-top: 12px;
    color: #333;
}

.clv-product__content p:last-child span {
    float: right;
    color: #111;
    font-weight: 500;
}

.clv-delivery-items > p {
    margin: 10px 0 0;
    color: #888;
    font-size: 11px;
}

.clv-delivery-address {
    margin-bottom: 25px;
    padding: 18px 20px;
    background: #f8f8f8;
    color: #555;
    font-size: 12px;
    line-height: 1.9;
}

.clv-delivery-address p {
    margin: 0;
}

.clv-delivery-actions {
    padding-top: 5px;
}

.clv-selects {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.clv-field label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-size: 11px;
    letter-spacing: .05em;
}

.clv-delivery-edit {
    margin-top: 20px;
}


/* =========================================================
   Payment
   ========================================================= */

.clv-payment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.clv-payment-list > div {
    position: relative;
}

.clv-payment-list input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.clv-payment-list label {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 13px 18px 13px 45px;
    border: 1px solid #dddddd;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    transition: all .2s ease;
}

.clv-payment-list label::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 15px;
    height: 15px;
    border: 1px solid #bbb;
    border-radius: 50%;
    transform: translateY(-50%);
}

.clv-payment-list input[type="radio"]:checked + label {
    border-color: #111;
}

.clv-payment-list input[type="radio"]:checked + label::before {
    border-color: #111;
}

.clv-payment-list input[type="radio"]:checked + label::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #111;
    transform: translateY(-50%);
}

.clv-payment-list img {
    max-width: 120px;
    max-height: 35px;
    margin-top: 10px;
    object-fit: contain;
}


/* =========================================================
   Point / Contact
   ========================================================= */

.clv-input {
    margin-top: 10px;
}

.clv-input p {
    margin: 0 0 12px;
    color: #666;
    font-size: 12px;
    line-height: 1.8;
}

.clv-input.error input,
.clv-input.error select,
.clv-input.error textarea {
    border-color: #c44;
}

.clv-input ul,
.clv-input .form-error {
    margin: 8px 0 0;
    padding: 0;
    color: #b33;
    font-size: 11px;
    list-style: none;
}


/* =========================================================
   Trade Law
   ========================================================= */

.clv-order-section .clv-input > * {
    color: #555;
    font-size: 12px;
    line-height: 1.9;
}

.clv-order-section .clv-input table {
    width: 100%;
    border-collapse: collapse;
}

.clv-order-section .clv-input th,
.clv-order-section .clv-input td {
    padding: 10px;
    border: 1px solid #ddd;
}


/* =========================================================
   Summary
   ========================================================= */

.clv-total {
    position: sticky;
    top: 30px;
    padding: 30px;
    border: 1px solid #e1e1e1;
    background: #fff;
}

.clv-total__row {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 10px 0;
    color: #555;
    font-size: 12px;
}

.clv-total__row dt,
.clv-total__row dd {
    margin: 0;
}

.clv-total__row--main {
    color: #111;
    font-size: 14px;
    font-weight: 500;
}

.clv-total__grand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 15px 0 0;
    padding: 20px 0;
    border-top: 1px solid #222;
    color: #111;
    font-size: 13px;
    font-weight: 500;
}

.clv-total__price {
    margin-left: auto;
    font-size: 24px;
    letter-spacing: .02em;
}

.clv-total__tax {
    margin-left: 5px;
    color: #888;
    font-size: 10px;
    font-weight: 400;
}

.clv-total__payment {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 20px;
    padding: 18px 0;
    border-top: 1px solid #eeeeee;
    color: #222;
    font-size: 12px;
}

.clv-total__payment .clv-total__price {
    font-size: 20px;
}

.clv-total__tax-rate {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 8px 0;
    color: #999;
    font-size: 10px;
}

.clv-total__tax-rate dt,
.clv-total__tax-rate dd {
    margin: 0;
}

.clv-total__points {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eeeeee;
}

.clv-total__points .clv-total__row {
    font-size: 11px;
}

.clv-bold {
    color: #111;
    font-weight: 500;
}


/* =========================================================
   Buttons
   ========================================================= */

.clv-total__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 25px;
}

.clv-btn-primary,
.clv-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    border: 1px solid #111;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: .12em;
    text-decoration: none;
    cursor: pointer;
    transition: all .25s ease;
}

.clv-btn-primary {
    background: #111;
    color: #fff;
}

.clv-btn-primary:hover {
    background: #333;
    border-color: #333;
}

.clv-btn-secondary {
    background: #fff;
    color: #111;
}

.clv-btn-secondary:hover {
    background: #f5f5f5;
}


/* =========================================================
   ZIP
   ========================================================= */

.clv-zip-input {
    position: relative;
}

.clv-zip-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}

.clv-zip-help a {
    color: #777;
    font-size: 10px;
    text-decoration: underline;
}

.clv-zip-help__icon {
    display: flex;
}

.clv-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #777;
}

.clv-icon img {
    width: 10px;
    height: 10px;
}


/* =========================================================
   Edit Actions
   ========================================================= */

.clv-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}


/* =========================================================
   Alert
   ========================================================= */

.clv-checkout > .clv-progress-wrap + * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.clv-checkout .alert {
    margin: 0 30px 30px;
    padding: 14px 18px;
    border: 1px solid #e1e1e1;
    background: #fafafa;
    color: #555;
    font-size: 12px;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px) {

    .clv-order {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .clv-order__summary {
        order: -1;
    }

    .clv-total {
        position: static;
    }

    .clv-total__actions {
        flex-direction: row;
    }

    .clv-total__actions > * {
        flex: 1;
    }
}


@media (max-width: 700px) {

    .clv-page {
        padding: 45px 20px 0;
    }

    .clv-page-header h1 {
        font-size: 23px;
    }

    .clv-progress-wrap {
        margin: 35px auto 50px;
        padding: 0 5px;
        overflow: hidden;
    }

    .clv-progress-label {
        font-size: 9px;
        letter-spacing: 0;
    }

    .clv-progress-number {
        width: 30px;
        height: 30px;
        margin-bottom: 9px;
        font-size: 10px;
    }

    .clv-progress::before {
        top: 15px;
        left: 8%;
        right: 8%;
    }

    .clv-order {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 20px 60px;
    }

    .clv-order__summary {
        order: 2;
    }

    .clv-order__detail {
        order: 1;
    }

    .clv-total {
        padding: 22px;
    }

    .clv-order-section {
        margin-bottom: 35px;
        padding-bottom: 35px;
    }

    .clv-section-heading h2 {
        font-size: 17px;
    }

    .clv-form-defs dl {
        display: block;
        padding: 15px 0;
    }

    .clv-form-defs dt {
        padding-top: 0;
        margin-bottom: 9px;
    }

    .clv-selects {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .clv-product__image_shopping {
        flex-basis: 65px;
        width: 65px;
        height: 82px;
    }

    .clv-product__content p {
        font-size: 11px;
    }

    .clv-product__content p:first-child {
        font-size: 12px;
    }

    .clv-product__content p:last-child span {
        display: block;
        float: none;
        margin-top: 4px;
    }

    .clv-total__actions {
        flex-direction: column;
    }
}


@media (max-width: 480px) {

    .clv-page {
        padding-left: 15px;
        padding-right: 15px;
    }

    .clv-order {
        padding-left: 15px;
        padding-right: 15px;
    }

    .clv-progress-label {
        font-size: 8px;
    }

    .clv-progress__item {
        width: 20%;
    }

    .clv-section-action {
        position: static;
        margin-left: auto;
    }

    .clv-section-heading {
        gap: 15px;
    }

    .clv-half-input {
        gap: 6px;
    }

    .clv-total {
        padding: 20px 16px;
    }

    .clv-total__price {
        font-size: 21px;
    }
}



/* =========================================================
   CLOVIA TOKYO
   Order Confirmation
   ========================================================= */


/* ---------------------------------------------------------
   Progress - Complete
   --------------------------------------------------------- */

.clv-progress__item.is-complete .clv-progress-number {
    border-color: #111;
    background: #111;
    color: #fff;
}

.clv-progress__item.is-complete .clv-progress-label {
    color: #555;
}


/* ---------------------------------------------------------
   Confirmation Information
   --------------------------------------------------------- */

.clv-confirm-info {
    padding: 5px 0;
    color: #444;
    font-size: 13px;
    line-height: 2;
}

.clv-confirm-info p {
    margin: 0 0 4px;
}

.clv-confirm-info p:first-child {
    color: #111;
    font-weight: 500;
}


/* ---------------------------------------------------------
   Delivery
   --------------------------------------------------------- */

.clv-confirm-delivery {
    margin-top: 5px;
}

.clv-confirm-delivery + .clv-confirm-delivery {
    margin-top: 45px;
}

.clv-confirm-delivery .clv-delivery-title {
    margin-bottom: 15px;
}


/* ---------------------------------------------------------
   Product
   --------------------------------------------------------- */

.clv-confirm-delivery .clv-product-list {
    border-top: 1px solid #eeeeee;
}

.clv-confirm-delivery .clv-product-list li {
    padding: 16px 0;
}

.clv-confirm-delivery .clv-product {
    align-items: flex-start;
}

.clv-confirm-delivery .clv-product__image_shopping {
    flex: 0 0 85px;
    width: 85px;
    height: 105px;
}

.clv-confirm-delivery .clv-product__content {
    padding-top: 2px;
}

.clv-confirm-delivery .clv-product__content p {
    margin-bottom: 5px;
}

.clv-product-price {
    margin-top: 12px !important;
}

.clv-product-price span {
    float: right;
    color: #111;
    font-weight: 500;
}

.clv-tax-note {
    margin: 8px 0 0;
    color: #888;
    font-size: 10px;
}


/* ---------------------------------------------------------
   Delivery Address
   --------------------------------------------------------- */

.clv-confirm-delivery .clv-delivery-address {
    margin-top: 20px;
    margin-bottom: 20px;
}


/* ---------------------------------------------------------
   Delivery Details
   --------------------------------------------------------- */

.clv-confirm-shipping {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

.clv-confirm-shipping__item {
    min-height: 70px;
    padding: 14px 18px;
    border-right: 1px solid #eeeeee;
}

.clv-confirm-shipping__item:last-child {
    border-right: none;
}

.clv-confirm-shipping__item > span {
    display: block;
    color: #333;
    font-size: 12px;
    line-height: 1.7;
}

.clv-confirm-label {
    margin-bottom: 4px;
    color: #999 !important;
    font-size: 10px !important;
    letter-spacing: .05em;
}

.clv-confirm-shipping small {
    color: #888;
    font-size: 10px;
}


/* ---------------------------------------------------------
   Payment
   --------------------------------------------------------- */

.clv-confirm-payment {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 18px;
    border: 1px solid #e5e5e5;
    background: #fafafa;
    color: #333;
    font-size: 13px;
}

.clv-confirm-payment small {
    margin-left: 6px;
    color: #888;
    font-size: 11px;
}


/* ---------------------------------------------------------
   Message
   --------------------------------------------------------- */

.clv-confirm-message {
    min-height: 80px;
    padding: 18px 20px;
    border: 1px solid #e5e5e5;
    color: #555;
    font-size: 12px;
    line-height: 1.9;
}

.clv-empty {
    color: #aaa;
}


/* ---------------------------------------------------------
   Trade Law
   --------------------------------------------------------- */

.clv-confirm-law {
    padding: 20px;
    border: 1px solid #e5e5e5;
    background: #fafafa;
    color: #555;
    font-size: 11px;
    line-height: 1.9;
}

.clv-confirm-law p {
    margin-top: 0;
}

.clv-confirm-law table {
    width: 100%;
    border-collapse: collapse;
}

.clv-confirm-law th,
.clv-confirm-law td {
    padding: 9px 10px;
    border: 1px solid #ddd;
}


/* ---------------------------------------------------------
   Summary
   --------------------------------------------------------- */

.clv-total__title {
    margin: -30px -30px 20px;
    padding: 18px 30px;
    border-bottom: 1px solid #eeeeee;
    color: #111;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
}


/* ---------------------------------------------------------
   Order Button
   --------------------------------------------------------- */

.clv-btn-primary {
    min-height: 58px;
    font-size: 13px;
    letter-spacing: .15em;
}

.clv-btn-primary::after {
    content: "→";
    margin-left: 12px;
    font-size: 14px;
    transition: transform .2s ease;
}

.clv-btn-primary:hover::after {
    transform: translateX(4px);
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .clv-confirm-shipping {
        grid-template-columns: 1fr;
    }

    .clv-confirm-shipping__item {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #eeeeee;
    }

    .clv-confirm-shipping__item:last-child {
        border-bottom: none;
    }

}


@media (max-width: 700px) {

    .clv-confirm-info {
        font-size: 12px;
    }

    .clv-confirm-delivery .clv-product__image_shopping {
        flex-basis: 70px;
        width: 70px;
        height: 88px;
    }

    .clv-confirm-delivery .clv-product__content p {
        font-size: 11px;
    }

    .clv-product-price span {
        display: block;
        float: none;
        margin-top: 4px;
    }

    .clv-confirm-payment {
        min-height: 50px;
        padding: 0 15px;
    }

    .clv-confirm-message {
        padding: 15px;
    }

    .clv-confirm-law {
        padding: 15px;
    }

}


@media (max-width: 480px) {

    .clv-confirm-delivery .clv-product__image_shopping {
        flex-basis: 62px;
        width: 62px;
        height: 78px;
    }

    .clv-confirm-shipping__item {
        padding: 13px 15px;
    }

    .clv-total__title {
        margin: -20px -16px 20px;
        padding: 16px;
    }

}




/* ---------------------------------------------------------
Complete Progress
--------------------------------------------------------- */

.clv-complete-page {
padding-bottom: 0;
}

.clv-progress__item.is-complete .clv-progress-number {
border-color: #111;
background: #111;
color: #fff;
}

.clv-progress__item.is-complete .clv-progress-label {
color: #555;
}

.clv-progress__item.is-active .clv-progress-number {
border-color: #111;
background: #111;
color: #fff;
}

.clv-progress__item.is-active .clv-progress-label {
color: #111;
}

/* ---------------------------------------------------------
Complete Container
--------------------------------------------------------- */

.clv-complete {
max-width: 760px;
margin: 0 auto;
padding: 0 30px 120px;
}

.clv-complete__inner {
padding: 70px 50px 65px;
border-top: 1px solid #111;
border-bottom: 1px solid #e5e5e5;
text-align: center;
}

/* ---------------------------------------------------------
Check Mark
--------------------------------------------------------- */

.clv-complete__mark {
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin: 0 auto 30px;
border: 1px solid #111;
border-radius: 50%;
}

.clv-complete__mark span {
color: #111;
font-size: 22px;
font-weight: 300;
}

/* ---------------------------------------------------------
Heading
--------------------------------------------------------- */

.clv-complete__eyebrow {
margin: 0 0 13px;
color: #999;
font-size: 9px;
font-weight: 500;
letter-spacing: .25em;
}

.clv-complete__heading h2 {
margin: 0;
color: #111;
font-size: 23px;
font-weight: 500;
letter-spacing: .08em;
}

/* ---------------------------------------------------------
Message
--------------------------------------------------------- */

.clv-complete__message {
max-width: 570px;
margin: 35px auto 0;
color: #666;
font-size: 12px;
line-height: 2;
}

.clv-complete__message p {
margin: 0;
}

/* ---------------------------------------------------------
Order Number
--------------------------------------------------------- */

.clv-complete__order-number {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 30px;
padding: 15px 25px;
border: 1px solid #e2e2e2;
background: #fafafa;
}

.clv-complete__order-number span {
color: #999;
font-size: 10px;
letter-spacing: .05em;
}

.clv-complete__order-number strong {
color: #111;
font-size: 14px;
font-weight: 500;
letter-spacing: .05em;
}

/* ---------------------------------------------------------
Custom Complete Message
--------------------------------------------------------- */

.clv-complete__custom-message {
margin-top: 30px;
padding: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
color: #555;
font-size: 12px;
line-height: 1.9;
}

.clv-complete__custom-message p {
margin-top: 0;
}

.clv-complete__custom-message p {
margin-bottom: 0;
}

/* ---------------------------------------------------------
Action
--------------------------------------------------------- */

.clv-complete__actions {
max-width: 330px;
margin: 40px auto 0;
}

.clv-complete__actions .clv-btn-primary {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 55px;
border: 1px solid #111;
background: #111;
color: #fff;
font-size: 12px;
letter-spacing: .13em;
text-decoration: none;
transition: background .25s ease;
}

.clv-complete__actions .clv-btn-primary {
background: #333;
}

.clv-complete__actions {
    width: 100%;
    max-width: 520px;
    display: block;
    margin: 20px auto 0;
}

/* ---------------------------------------------------------
Arrow
--------------------------------------------------------- */

.clv-complete__actions .clv-btn-primary::after {
content: "→";
margin-left: 12px;
transition: transform .2s ease;
}

.clv-complete__actions .clv-btn-primary:hover::after {
transform: translateX(4px);
}

/* ---------------------------------------------------------
Mobile
--------------------------------------------------------- */

@media (max-width: 700px) {

.clv-complete {
    padding: 0 20px 80px;
}

.clv-complete__inner {
    padding: 55px 25px 50px;
}

.clv-complete__heading h2 {
    font-size: 19px;
    letter-spacing: .05em;
}

.clv-complete__message {
    margin-top: 28px;
    font-size: 11px;
    line-height: 1.9;
}

.clv-complete__order-number {
    gap: 12px;
    padding: 13px 17px;
}

}

@media (max-width: 480px) {

.clv-complete {
    padding-left: 15px;
    padding-right: 15px;
}

.clv-complete__inner {
    padding: 45px 18px 40px;
}

.clv-complete__mark {
    width: 52px;
    height: 52px;
    margin-bottom: 25px;
}

.clv-complete__mark span {
    font-size: 19px;
}

.clv-complete__eyebrow {
    font-size: 8px;
    letter-spacing: .2em;
}

.clv-complete__heading h2 {
    font-size: 17px;
}

.clv-complete__order-number {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.clv-complete__actions {
    margin-top: 30px;
}

}



/* =========================================================
CLOVIA TOKYO
My Page / Favorites
========================================================= */


/* ---------------------------------------------------------
Favorite Header
--------------------------------------------------------- */

.clv-favorite__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding-bottom: 22px;
border-bottom: 1px solid #111;
}

.clv-favorite__eyebrow {
margin: 0 0 8px;
color: #999;
font-size: 9px;
font-weight: 500;
letter-spacing: .25em;
}

.clv-favorite__header h2 {
margin: 0;
color: #111;
font-size: 20px;
font-weight: 500;
letter-spacing: .06em;
}

.clv-favorite__count {
margin: 0;
color: #888;
font-size: 11px;
}

/* ---------------------------------------------------------
Product Grid
--------------------------------------------------------- */

.clv-favorite__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 50px 25px;
margin: 35px 0 0;
padding: 0;
list-style: none;
}

/* ---------------------------------------------------------
Product
--------------------------------------------------------- */

.clv-favorite__item {
position: relative;
min-width: 0;
}

.clv-favorite__image {
display: block;
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4;
background: #f6f6f6;
}

.clv-favorite__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .45s ease;
}

.clv-favorite__image:hover img {
transform: scale(1.025);
}

/* ---------------------------------------------------------
Remove Button
--------------------------------------------------------- */

.clv-favorite__remove {
display: flex;
position: absolute;
z-index: 2;
top: 12px;
right: 12px;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid rgba(255,255,255,.7);
border-radius: 50%;
background: rgba(0,0,0,.35);
backdrop-filter: blur(5px);
}

.clv-favorite__remove span {
position: absolute;
width: 11px;
height: 1px;
background: #fff;
}

.clv-favorite__remove span:first-child {
transform: rotate(45deg);
}

.clv-favorite__remove span:last-child {
transform: rotate(-45deg);
}

/* ---------------------------------------------------------
Product Info
--------------------------------------------------------- */

.clv-favorite__info {
padding-top: 15px;
}

.clv-favorite__name {
display: block;
color: #222;
font-size: 12px;
line-height: 1.6;
text-decoration: none;
}

.clv-favorite__name:hover {
text-decoration: underline;
text-underline-offset: 3px;
}

.clv-favorite__price {
margin: 8px 0 0;
color: #111;
font-size: 12px;
font-weight: 500;
}

/* ---------------------------------------------------------
Pager
--------------------------------------------------------- */

.clv-favorite__pager {
display: flex;
justify-content: center;
margin-top: 70px;
}

/* ---------------------------------------------------------
Empty
--------------------------------------------------------- */

.clv-favorite__empty {
padding: 100px 20px;
border-top: 1px solid #111;
border-bottom: 1px solid #e5e5e5;
text-align: center;
}

.clv-favorite__empty-icon {
margin-bottom: 25px;
color: #111;
font-family: serif;
font-size: 34px;
font-weight: 300;
}

.clv-favorite__empty .clv-favorite__eyebrow {
margin-bottom: 12px;
}

.clv-favorite__empty h2 {
margin: 0;
color: #222;
font-size: 16px;
font-weight: 400;
letter-spacing: .04em;
}

.clv-favorite__empty-text {
margin: 20px 0 30px;
color: #888;
font-size: 11px;
line-height: 2;
}

.clv-favorite__empty .clv-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 50px;
padding: 0 25px;
background: #111;
color: #fff;
font-size: 11px;
letter-spacing: .12em;
text-decoration: none;
}

/* ---------------------------------------------------------
Mobile
--------------------------------------------------------- */

@media (max-width: 900px) {

.clv-favorite__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 15px;
}


}

@media (max-width: 600px) {

.clv-favorite__header {
    padding-bottom: 18px;
}

.clv-favorite__header h2 {
    font-size: 17px;
}

.clv-favorite__list {
    gap: 35px 10px;
    margin-top: 25px;
}

.clv-favorite__info {
    padding-top: 10px;
}

.clv-favorite__name {
    font-size: 11px;
}

.clv-favorite__price {
    margin-top: 5px;
    font-size: 11px;
}

.clv-favorite__remove {
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
}

.clv-favorite__empty {
    padding: 70px 15px;
}

.clv-favorite__empty h2 {
    font-size: 14px;
}

}




/* =========================================================
CLOVIA TOKYO
会員情報編集
========================================================= */

.clv-account-edit {
width: 100%;
max-width: 820px;
margin: 0 auto;
padding: 0 20px 80px;
box-sizing: border-box;
}

/* ---------------------------------------------------------
Header
--------------------------------------------------------- */

.clv-account-edit__header {
padding: 10px 0 30px;
border-bottom: 1px solid #111;
}

.clv-account-edit__eyebrow {
margin: 0 0 10px;
color: #999;
font-size: 9px;
font-weight: 500;
letter-spacing: .28em;
line-height: 1;
}

.clv-account-edit__header h1 {
margin: 0;
color: #111;
font-size: 22px;
font-weight: 500;
letter-spacing: .08em;
line-height: 1.4;
}

.clv-account-edit__description {
margin: 12px 0 0;
color: #888;
font-size: 11px;
line-height: 1.8;
}

/* ---------------------------------------------------------
Form
--------------------------------------------------------- */

.clv-account-form {
margin-top: 0;
}

.clv-account-form__row {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 40px;
margin: 0;
padding: 28px 0;
border-bottom: 1px solid #ededed;
}

.clv-account-form__row dt {
margin: 0;
padding-top: 13px;
}

.clv-account-form__row dd {
min-width: 0;
margin: 0;
}

/* ---------------------------------------------------------
Label
--------------------------------------------------------- */

.clv-account-form__label {
color: #222;
font-size: 11px;
font-weight: 500;
letter-spacing: .05em;
line-height: 1.5;
}

.clv-account-form__required {
display: inline-block;
margin-left: 7px;
padding: 3px 5px;
background: #111;
color: #fff;
font-size: 7px;
font-weight: 400;
letter-spacing: .08em;
line-height: 1;
vertical-align: 2px;
}

/* ---------------------------------------------------------
Input
--------------------------------------------------------- */

.clv-account-form__input {
margin-bottom: 10px;
}

.clv-account-form__input:last-child {
margin-bottom: 0;
}

.clv-account-form input[type="text"],
.clv-account-form input[type="email"],
.clv-account-form input[type="password"],
.clv-account-form input[type="tel"],
.clv-account-form input[type="number"],
.clv-account-form select,
.clv-account-form textarea {
display: block;
width: 100%;
min-height: 46px;
padding: 0 14px;
box-sizing: border-box;

border: 1px solid #ddd;
border-radius: 0;

background: #fff;
color: #222;

font-family: inherit;
font-size: 12px;
line-height: 1.5;

outline: none;
appearance: none;

transition:
    border-color .2s ease,
    background-color .2s ease;

}

.clv-account-form input:focus,
.clv-account-form select:focus,
.clv-account-form textarea:focus {
border-color: #111;
background-color: #fff;
}

.clv-account-form input::placeholder,
.clv-account-form textarea::placeholder {
color: #bbb;
}

/* ---------------------------------------------------------
Name
--------------------------------------------------------- */

.clv-account-form__name {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

/* ---------------------------------------------------------
Postal
--------------------------------------------------------- */

.clv-account-form__postal {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 12px;
}

.clv-account-form__postal-input {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}

.clv-account-form__postal-input > span {
flex: 0 0 auto;
margin-right: 8px;
color: #555;
font-size: 12px;
}

.clv-account-form__postal-input input {
flex: 1;
min-width: 0;
}

.clv-account-form__postal > a {
flex: 0 0 auto;
color: #555;
font-size: 10px;
line-height: 1.5;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
white-space: nowrap;
transition: color .2s ease;
}

.clv-account-form__postal > a:hover {
color: #111;
}

/* ---------------------------------------------------------
Select
--------------------------------------------------------- */

.clv-account-form__select {
position: relative;
}

.clv-account-form__select select {
padding-right: 40px;
}

.clv-account-form__select::after {
content: "";
position: absolute;
top: 50%;
right: 16px;

width: 7px;
height: 7px;

border-right: 1px solid #555;
border-bottom: 1px solid #555;

transform: translateY(-65%) rotate(45deg);
pointer-events: none;

}

/* 住所の都道府県select */
.clv-account-form__input select {
padding-right: 40px;
}

/* ---------------------------------------------------------
Birth
--------------------------------------------------------- */

.clv-account-form__birth {
display: flex;
align-items: center;
gap: 8px;
}

.clv-account-form__birth select {
width: auto;
min-width: 95px;
}

.clv-account-form__birth select:nth-of-type(2),
.clv-account-form__birth select:nth-of-type(3) {
min-width: 75px;
}

.clv-account-form__birth span {
color: #999;
font-size: 11px;
}

/* ---------------------------------------------------------
Radio
--------------------------------------------------------- */

.clv-account-form__radio {
display: flex;
align-items: center;
min-height: 46px;
}

.clv-account-form__radio input {
width: auto;
min-height: auto;
margin-right: 7px;
appearance: auto;
}

.clv-account-form__radio label {
margin-right: 25px;
color: #444;
font-size: 12px;
}

/* ---------------------------------------------------------
Password note
--------------------------------------------------------- */

.clv-account-form__note {
margin: 0 0 10px;
color: #999;
font-size: 10px;
line-height: 1.7;
}

/* ---------------------------------------------------------
Error
--------------------------------------------------------- */

.clv-account-form .error {
color: #b00020;
}

.clv-account-form ul {
margin: 6px 0 0;
padding: 0;
list-style: none;
}

.clv-account-form ul li {
color: #b00020;
font-size: 10px;
line-height: 1.6;
}

/* ---------------------------------------------------------
Action
--------------------------------------------------------- */

.clv-account-form__actions {
display: flex;
justify-content: center;
padding: 45px 0 20px;
}

.clv-account-form__actions .clv-btn-primary {
position: relative;

display: flex;
align-items: center;
justify-content: center;

width: 300px;
min-height: 54px;

padding: 0 20px;

border: 1px solid #111;
border-radius: 0;

background: #111;
color: #fff;

font-family: inherit;
font-size: 11px;
font-weight: 500;
letter-spacing: .16em;

cursor: pointer;

transition:
    background-color .25s ease,
    border-color .25s ease;

}

.clv-account-form__actions .clv-btn-primary::after {
content: "→";
margin-left: 16px;
font-size: 14px;
font-weight: 300;
transition: transform .25s ease;
}

.clv-account-form__actions .clv-btn-primary:hover {
background: #333;
border-color: #333;
}

.clv-account-form__actions .clv-btn-primary:hover::after {
transform: translateX(5px);
}

/* ---------------------------------------------------------
Auto Render fields
--------------------------------------------------------- */

.clv-account-form__row .form-control {
width: 100%;
}

/* ---------------------------------------------------------
Mobile
--------------------------------------------------------- */

@media screen and (max-width: 700px) {

.clv-account-edit {
    max-width: none;
    padding: 0 15px 60px;
}


/* Header */

.clv-account-edit__header {
    padding: 5px 0 22px;
}

.clv-account-edit__eyebrow {
    margin-bottom: 8px;
    font-size: 8px;
}

.clv-account-edit__header h1 {
    font-size: 19px;
}

.clv-account-edit__description {
    margin-top: 10px;
    font-size: 10px;
}


/* Form */

.clv-account-form__row {
    display: block;
    padding: 21px 0;
}

.clv-account-form__row dt {
    margin-bottom: 11px;
    padding-top: 0;
}


/* Name */

.clv-account-form__name {
    gap: 7px;
}


/* Postal */

.clv-account-form__postal {
    display: block;
    margin-bottom: 10px;
}

.clv-account-form__postal-input {
    width: 100%;
}

.clv-account-form__postal > a {
    display: inline-block;
    margin-top: 8px;
    margin-left: 22px;
}


/* Birth */

.clv-account-form__birth {
    gap: 5px;
}

.clv-account-form__birth select {
    flex: 1;
    min-width: 0;
}

.clv-account-form__birth select:nth-of-type(2),
.clv-account-form__birth select:nth-of-type(3) {
    min-width: 0;
}


/* Radio */

.clv-account-form__radio {
    min-height: 42px;
}


/* Button */

.clv-account-form__actions {
    padding-top: 35px;
}

.clv-account-form__actions .clv-btn-primary {
    width: 100%;
    min-height: 52px;
}

}



/* =========================================================
CLOVIA TOKYO
マイページ / お届け先一覧
========================================================= */

/* ページ全体 */
.ec-addressRole,
.ec-addressList {
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}

/* ---------------------------------------------------------
新規お届け先ボタン
--------------------------------------------------------- */

.ec-addressRole {
margin-top: 10px;
margin-bottom: 35px;
}

.ec-addressRole__actions {
display: flex;
justify-content: flex-end;
}

.ec-addressRole__actions .ec-inlineBtn {
display: inline-flex;
align-items: center;
justify-content: center;


min-width: 220px;
height: 48px;
padding: 0 22px;

box-sizing: border-box;

border: 1px solid #111;
border-radius: 0;

background: #111;
color: #fff;

font-size: 11px;
font-weight: 500;
letter-spacing: .12em;
text-decoration: none;

transition:
    background-color .25s ease,
    border-color .25s ease;


}

.ec-addressRole__actions .ec-inlineBtn::after {
content: "＋";
margin-left: 14px;
font-size: 14px;
font-weight: 300;
}

.ec-addressRole__actions .ec-inlineBtn:hover {
background: #333;
border-color: #333;
}

/* ---------------------------------------------------------
上限エラー
--------------------------------------------------------- */

.ec-addressRole__actions .ec-errorMessage {
display: block;
width: 100%;
padding: 15px 18px;

box-sizing: border-box;

border: 1px solid #e5e5e5;

color: #888;
font-size: 11px;
line-height: 1.8;

}

/* ---------------------------------------------------------
お届け先一覧
--------------------------------------------------------- */

.ec-addressList {
border-top: 1px solid #111;
}

.ec-addressList__item {
position: relative;

display: grid;
grid-template-columns: minmax(0, 1fr) 110px;
gap: 30px;

min-height: 125px;
padding: 28px 45px 28px 5px;

box-sizing: border-box;

border-bottom: 1px solid #e8e8e8;

}

/* ---------------------------------------------------------
住所情報
--------------------------------------------------------- */

.ec-addressList__address {
align-self: center;


color: #333;
font-size: 12px;
line-height: 2;
letter-spacing: .02em;

}

.ec-addressList__address > div:first-child {
margin-bottom: 3px;

color: #111;
font-size: 13px;
font-weight: 500;

}

.ec-addressList__address > div:nth-child(2) {
color: #555;
}

.ec-addressList__address > div:last-child {
color: #777;
font-size: 11px;
}

/* ---------------------------------------------------------
変更ボタン
--------------------------------------------------------- */

.ec-addressList__action {
display: flex;
align-items: center;
justify-content: flex-end;
}

.ec-addressList__action .ec-inlineBtn {
display: inline-flex;
align-items: center;
justify-content: center;

width: 100%;
height: 40px;

box-sizing: border-box;

border: 1px solid #ccc;
border-radius: 0;

background: #fff;
color: #222;

font-size: 10px;
letter-spacing: .12em;
text-decoration: none;

transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;

}

.ec-addressList__action .ec-inlineBtn:hover {
border-color: #111;
background: #111;
color: #fff;
}

/* ---------------------------------------------------------
削除ボタン
--------------------------------------------------------- */

.ec-addressList__remove {
position: absolute;
top: 50%;
right: 5px;

display: flex;
align-items: center;
justify-content: center;

width: 22px;
height: 22px;

transform: translateY(-50%);

text-decoration: none;
opacity: .45;

transition: opacity .2s ease;

}

.ec-addressList__remove:hover {
opacity: 1;
}

.ec-addressList__remove .ec-icon {
width: 12px;
height: 12px;
}

.ec-addressList__remove .ec-icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}

/* ---------------------------------------------------------
お届け先がない場合
--------------------------------------------------------- */

.ec-mypageRole .ec-para-normal {
color: #888;
font-size: 11px;
line-height: 1.8;
}

/* ---------------------------------------------------------
Mobile
--------------------------------------------------------- */

@media screen and (max-width: 700px) {

.ec-addressRole,
.ec-addressList {
    width: 100%;
}


/* 新規追加 */

.ec-addressRole {
    margin-top: 5px;
    margin-bottom: 25px;
}

.ec-addressRole__actions {
    justify-content: stretch;
}

.ec-addressRole__actions .ec-inlineBtn {
    width: 100%;
    min-width: 0;
    height: 48px;
}


/* リスト */

.ec-addressList {
    border-top: 1px solid #111;
}

.ec-addressList__item {
    display: block;

    min-height: 0;

    padding: 23px 35px 23px 0;
}


/* 住所 */

.ec-addressList__address {
    font-size: 11px;
    line-height: 1.9;
}

.ec-addressList__address > div:first-child {
    margin-bottom: 4px;
    font-size: 12px;
}

.ec-addressList__address > div:last-child {
    font-size: 10px;
}


/* 変更 */

.ec-addressList__action {
    display: block;
    margin-top: 15px;
}

.ec-addressList__action .ec-inlineBtn {
    width: 110px;
    height: 36px;
    font-size: 9px;
}


/* 削除 */

.ec-addressList__remove {
    top: 23px;
    right: 3px;

    width: 20px;
    height: 20px;

    transform: none;
}


}









/* =========================================================
   CLOVIA TOKYO
   My Page / Delivery Address
   ========================================================= */
.ec-navlistRole {
    margin-top: 140px;
    
}

.clv-mypage {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* ---------------------------------------------------------
   Delivery
   --------------------------------------------------------- */

.clv-delivery {
    width: 100%;
    padding: 70px 0 120px;
}

.clv-delivery__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e8e8e8;
}

.clv-delivery__count {
    margin: 0;
    color: #555;
    font-size: 13px;
    letter-spacing: .04em;
}

/* ---------------------------------------------------------
   Address list
   --------------------------------------------------------- */

.clv-delivery-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #ddd;
}

.clv-delivery-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 180px;
    padding: 35px 10px 35px 5px;
    border-bottom: 1px solid #ddd;
}

.clv-delivery-card__content {
    flex: 1;
    min-width: 0;
}

.clv-delivery-card__name {
    margin: 0 0 18px;
    color: #111;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .04em;
}

.clv-delivery-card__name span {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 400;
}

.clv-delivery-card__address {
    margin: 0 0 7px;
    color: #444;
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: .03em;
}

.clv-delivery-card__label {
    margin-right: 4px;
}

.clv-delivery-card__phone {
    margin: 12px 0 0;
    color: #555;
    font-size: 13px;
    letter-spacing: .04em;
}

/* ---------------------------------------------------------
   Actions
   --------------------------------------------------------- */

.clv-delivery-card__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.clv-btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 42px;
    padding: 0 22px;
    border: 1px solid #111;
    background: #111;
    color: #fff !important;
    font-size: 12px;
    letter-spacing: .08em;
    text-decoration: none !important;
    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.clv-btn-small:hover {
    border-color: #333;
    background: #333;
    color: #fff !important;
}

.clv-delivery-card__delete {
    color: #777;
    font-size: 11px;
    letter-spacing: .06em;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color .2s ease;
}

.clv-delivery-card__delete:hover {
    color: #111;
}

/* ---------------------------------------------------------
   Add address button
   --------------------------------------------------------- */

.clv-delivery__header .clv-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 48px;
    padding: 0 28px;
    background: #111;
    color: #fff !important;
    font-size: 12px;
    letter-spacing: .1em;
    text-decoration: none !important;
    transition: background .25s ease;
}

.clv-delivery__header .clv-btn-primary:hover {
    background: #333;
}

/* ---------------------------------------------------------
   Limit error
   --------------------------------------------------------- */

.clv-delivery__error {
    margin: 0;
    color: #b00020;
    font-size: 12px;
    line-height: 1.8;
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media screen and (max-width: 767px) {

    .clv-mypage {
        width: calc(100% - 30px);
    }

    .clv-delivery {
        padding: 45px 0 80px;
    }

    .clv-delivery__header {
        display: block;
        margin-bottom: 25px;
        padding-bottom: 20px;
    }

    .clv-delivery__count {
        margin-bottom: 20px;
    }

    .clv-delivery__header .clv-btn-primary {
        width: 100%;
        min-width: 0;
    }

    .clv-delivery-card {
        display: block;
        min-height: 0;
        padding: 28px 0;
    }

    .clv-delivery-card__name {
        margin-bottom: 15px;
        font-size: 15px;
    }

    .clv-delivery-card__address {
        font-size: 12px;
    }

    .clv-delivery-card__phone {
        font-size: 12px;
    }

    .clv-delivery-card__actions {
        justify-content: flex-start;
        margin-top: 22px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }

    .clv-btn-small {
        min-width: 90px;
        height: 40px;
    }

}









/* =========================================================
   CLOVIA TOKYO
   Delivery Page - EC-CUBE default override
   ========================================================= */

/* EC-CUBE標準のページ幅・余白をリセット */
body.mypage .ec-layoutRole__main,
body.mypage .ec-mypageRole {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* CLOVIA側のページコンテナ */
body.mypage .clv-mypage {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* 標準の見出し余白が残る場合 */
body.mypage .ec-pageHeader {
    margin: 0;
    padding: 0;
    border: 0;
}

/* 標準のお届け先レイアウトを完全に無効化 */
body.mypage .ec-addressRole,
body.mypage .ec-addressList,
body.mypage .ec-addressList__item,
body.mypage .ec-addressList__address,
body.mypage .ec-addressList__action {
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------
   CLOVIA Delivery
   --------------------------------------------------------- */

.clv-delivery {
    width: 100%;
    padding: 70px 0 120px;
}

.clv-delivery__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e8e8e8;
}

.clv-delivery__count {
    margin: 0;
    padding: 0;
    color: #555;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: .04em;
}

.clv-delivery-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px solid #ddd;
}

.clv-delivery-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    min-height: 180px;
    margin: 0;
    padding: 35px 5px;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}

.clv-delivery-card__content {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.clv-delivery-card__name {
    margin: 0 0 18px;
    padding: 0;
    color: #111;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .04em;
}

.clv-delivery-card__name span {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 400;
}

.clv-delivery-card__address {
    margin: 0 0 7px;
    padding: 0;
    color: #444;
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: .03em;
}

.clv-delivery-card__phone {
    margin: 12px 0 0;
    padding: 0;
    color: #555;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: .04em;
}

/* ボタン */
.clv-delivery-card__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.clv-delivery-card__actions .clv-btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    min-width: 100px;
    height: 42px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid #111;
    background: #111;
    color: #fff !important;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .08em;
    text-decoration: none !important;
    box-sizing: border-box;
}

.clv-delivery-card__delete {
    margin: 0;
    padding: 0;
    color: #777;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .06em;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 新規追加ボタン */
.clv-delivery__header .clv-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 220px;
    height: 48px;
    margin: 0;
    padding: 0 28px;
    border: 0;
    background: #111;
    color: #fff !important;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .1em;
    text-decoration: none !important;
    box-sizing: border-box;
}

/* 上限エラー */
.clv-delivery__error {
    margin: 0;
    padding: 0;
    color: #b00020;
    font-size: 12px;
    line-height: 1.8;
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media screen and (max-width: 767px) {

    body.mypage .clv-mypage {
        width: calc(100% - 30px);
    }

    .clv-delivery {
        padding: 45px 0 80px;
    }

    .clv-delivery__header {
        display: block;
        margin-bottom: 25px;
        padding-bottom: 20px;
    }

    .clv-delivery__count {
        margin-bottom: 20px;
    }

    .clv-delivery__header .clv-btn-primary {
        width: 100%;
        min-width: 0;
    }

    .clv-delivery-card {
        display: block;
        min-height: 0;
        padding: 28px 0;
    }

    .clv-delivery-card__actions {
        justify-content: flex-start;
        margin-top: 22px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }

}




/* =========================================
   Gender Switch
========================================= */
.clv-gender-switch {
    position: relative;
    display: flex;
    align-items: center;
    width: 280px;
    height: 36px;
    margin: 80px auto -40px;
    padding: 4px;
    background: #f1f1f1;
    border-radius: 999px;
    box-sizing: border-box;
}

.clv-gender-switch button {
    position: relative;
    z-index: 2;
    flex: 1;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #777;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    cursor: pointer;
    transition: color .3s ease;
}

.clv-gender-switch button.is-active {
    color: #fff;
}

.clv-gender-switch::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: 28px;
    background: #111;
    border-radius: 999px;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

/* MENS選択時 */
.clv-gender-switch.is-mens::before {
    transform: translateX(100%);
}

/* hover */
.clv-gender-switch button:hover {
    color: #111;
}

.clv-gender-switch button.is-active:hover {
    color: #fff;
}

/* スマホ */
@media screen and (max-width: 767px) {

    .clv-gender-switch {
        width: 240px;
        height: 30px;
        margin: 80px auto -60px;
    }

    .clv-gender-switch button {
        height: 30px;
        font-size: 11px;
    }

    .clv-gender-switch::before {
        height: 26px;
        top: 2px;
    }

}