/*===========================
  reset Css
===========================*/
html{-webkit-text-size-adjust:100%;box-sizing:border-box;-moz-tab-size:4;tab-size:4;word-break:normal}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}hr{color:inherit;height:0;overflow:visible}details,main{display:block}summary{display:list-item}small{font-size:80%}[hidden]{display:none}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}a{background-color:transparent}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}pre{font-size:1em}b,strong{font-weight:bolder}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}iframe{border-style:none}input{border-radius:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}button,select{text-transform:none}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,input,select,textarea{background-color:transparent;}a:focus,button:focus,input:focus,select:focus,textarea:focus{outline-width:0}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;color:inherit;font:inherit}[disabled]{cursor:default}img{border-style:none}progress{vertical-align:baseline}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true]{cursor:default}
ul,ol{ list-style:none; }

/*===========================
  base.css
===========================*/
:root{
    --main-color:#49AEA1;
    --second-color:#E9F2EB;
    --gray-color:#F5F5F5;
    --font-color:#464646;
    --line-color:#D9D9D9;
    --font-gray-color:#878787;
    --link-color:#49AEA1;
    --red-color:#F89395;
    --en-font:"Marcellus", "Noto Sans JP", sans-serif;
    --en-font2:"Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
    --en-font3:"Playwrite US Trad", "Noto Sans JP", sans-serif;
    --num-font:"Inter", "Noto Sans JP", sans-serif;
}

body{
    width:100%;
    font:14px "Noto Sans JP", sans-serif;
    -webkit-font-smoothing:antialiased;
    font-weight:400;
    color:var(--font-color);
    overflow-x:hidden;
}
body.drawerOpen{ overflow:hidden; }

a{ text-decoration:none; color:var(--font-color); }
img{ width:100%; height:auto; vertical-align:bottom; }
p{ line-height:1.6; }
div,p,span,a,ul,li,dl,dt,dd{ box-sizing:border-box; }

@media screen and (min-width:768px){
    .spOnly{ display:none; }
}
@media screen and (max-width:767px){
    .pcOnly{ display:none; }
}

/*=================================
  common
===================================*/
#container{ width:100%; min-height:100vh; display:flex; flex-direction:column; }
.inner{ max-width:980px; margin:0 auto; padding:0 30px; box-sizing:content-box; }
#container > main{ flex:1; }
@media screen and (max-width:767px){
    .inner{ padding:0 0; }
}

/*  siteHeader
===================================*/
.header{ min-height:60px; }
.siteHeader{ width:100%; min-height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:#F1F1F1 1px solid; background:#fff; position:relative; }
.siteHeader .hbBtn{ width:32px; height:32px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px 0; background:none; border:none; cursor:pointer; }
.siteHeader .hbBtn span{ width:20px; height:1px; display:block; background:var(--font-color); transition:all 0.3s; }
.siteHeader .hbBtn.open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.siteHeader .hbBtn.open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }
.siteHeader .siteLogo{ width:100px; text-align:center; position:absolute; left:50%; transform:translateX(-50%); }
.siteHeader .siteLogo img{ width:80px; }
.siteHeader .siteLogo span{ display:block; font-family:var(--en-font2); font-size:9px; font-weight:600; letter-spacing:0.3em; }
.siteHeader .headerAction{ display:flex; align-items:center; gap:0 30px; }
.siteHeader .searchBoxCon{ display:flex; align-items:center; background:var(--gray-color); border-radius:5px; overflow:hidden; }
.siteHeader .searchBox input{ width:155px; height:37px; padding:5px 10px; background:transparent; border:none; font-size:13px; }
.siteHeader .searchBox button{ width:36px; height:32px; display:flex; align-items:center; justify-content:center; background:none; border:none; }
.siteHeader .searchBox button img{ width:16px; }
.siteHeader .icoAccount img{ width:20px; }
.siteHeader .icoCart{ position:relative; }
.siteHeader .icoCart img{ width:28px; }
.siteHeader .icoCart .cartCount{ width:20px; height:20px; display:flex; align-items:center; justify-content:center; background:var(--main-color); border-radius:50%; font-size:10px; font-family:var(--num-font); color:#fff; line-height:1; position:absolute; top:-6px; right:12px; }
@media screen and (min-width:768px){
    .siteHeader .icoSearch{ display:none; }
}
@media screen and (max-width:767px){
    .header{ min-height:76px; }
    .siteHeader{ min-height:76px; }
    .siteHeader .icoSearch{ width:40px; height:40px; display:flex; justify-content:center; align-items:center; position:absolute; top:50%; left:50px; transform:translateY(-50%); }
    .siteHeader .icoSearch img{ width:20px; }
    .siteHeader .siteLogo{ width:100px; }
    
    .siteHeader .searchBox{ width:100%; height:calc(100vh - 76px); background:rgba(0,0,0,0.6); position:absolute; top:76px; left:0; z-index:10; }
    .siteHeader .searchBoxCon{ display:flex; padding:30px; background:#fff; border-radius:0; position:relative; }
    .siteHeader .searchBox input{ font-size:16px; }
    .siteHeader.searchOpen .searchBoxCon::after{ width:calc(100% - 60px); height:1px; content:""; background:var(--line-color); position:absolute; left:30px; bottom:30px; }
    .siteHeader.searchOpen .searchBox input{ width:100%; }
    .siteHeader .searchBox button img{ width:20px; }
    
    .siteHeader .searchBox{ opacity:0; visibility:hidden; transition:all .3s; }
    .siteHeader.searchOpen .searchBox{ opacity:1; visibility:visible; }
}

/*  drawerMenu
===================================*/
.drawerMenu{ width:240px; height:calc(100vh - 60px); background:#fff; overflow-y:auto; position:fixed; top:60px; left:0; z-index:300; transform:translateX(-100%); transition:transform 0.3s ease; }
.drawerMenu.open{ transform:translateX(0); }
.drawerBanner{ padding:20px; text-align:center; background:var(--main-color); color:#fff; }
.drawerBanner .bannerTxt{ font-size:14px; }
.drawerBanner .bannerTimer{ font-size:14px; }
.drawerBanner .bannerTimer strong{ font-size:18px; font-family:var(--num-font); font-weight:500; letter-spacing:0.05em; }
.drawerBanner .bannerTimer span{ font-size:30px; font-weight:300; }
.drawerInner{ padding:24px; }
.drawerBtnWrap{ display:flex; gap:0 10px; margin:0 0 24px; }
.drawerBtnLogin{ display:block; flex:1; padding:12px 10px; text-align:center; background:var(--gray-color); border-radius:50px; font-size:13px; color:var(--font-color); }
.drawerBtnRegister{ display:block; flex:1; padding:11px 10px 12px; text-align:center; background:var(--font-color); border-radius:50px; font-size:13px; color:#fff; }
.drawerCategoryList{ margin:0 0 24px; padding:0 0 24px; border-bottom:var(--border-color) 1px solid; }
.drawerCategoryList li a,
.drawerNavList li a{ display:block; padding:10px 0; color:var(--font-color); }
@media screen and (min-width:768px){
    .drawerBtnLogin,
    .drawerBtnRegister,
    .drawerCategoryList li a,
    .drawerNavList li a{ transition:opacity 0.2s; }
    .drawerBtnLogin:hover,
    .drawerBtnRegister:hover,
    .drawerCategoryList li a:hover,
    .drawerNavList li a:hover{ opacity:0.6; }
}
@media screen and (max-width:767px){
    .drawerMenu{ height:calc(100vh - 76px); top:76px; }
}

/*  drawerOverlay
===================================*/
.drawerOverlay{ width:100%; height:calc(100vh - 60px); background:rgba(0,0,0,0.5); position:fixed; top:60px; left:0; z-index:250; opacity:0; visibility:hidden; transition:all 0.3s; }
.drawerOverlay.open{ opacity:1; visibility:visible; }
@media screen and (max-width:767px){
    .drawerOverlay{ height:calc(100vh - 76px); top:76px; }
}

/*  gNav
===================================*/
.gNav{ display:none; }

/*  siteFooter
===================================*/
.siteFooter{ margin:160px 0 0; padding:60px 0 40px; background:#3C3C3C; color:#fff; }
.siteFooter .instagramLink a{ display:inline-flex; align-items:center; gap:0 8px; font-size:12px; font-family:var(--num-font); letter-spacing:.08em; color:#fff; }
.siteFooter .instagramLink a img{ width:20px; }
.siteFooter .footerNav ul{ display:flex; flex-wrap:wrap; gap:10px 40px; margin:40px 0 0; }
.siteFooter .footerNav ul li a{ color:#fff; }
.siteFooter .copy{ margin:40px 0 0; font-size:12px; color:#DDDDDD; }

.siteFooter.simple{ padding:40px 0 60px }
.siteFooter.simple .copy{ margin:0; text-align:center; }

@media screen and (min-width:768px){
    .siteFooter .footerNav ul li a{ transition:opacity 0.2s; }
    .siteFooter .footerNav ul li a:hover{ opacity:0.7; }
}
@media screen and (max-width:767px){
    .siteFooter .inner{ padding:0 30px; }
    .siteFooter .footerNav ul{ gap:20px 0; margin:30px 0 0; }
    .siteFooter .footerNav ul li{ width:100%; }
    .siteFooter .copy{ margin:30px 0 0; }
}

/*=================================
  parts
===================================*/
/*  title
===================================*/
.heading1{ margin:60px 0 40px; text-align:center; font-size:22px; font-weight:400; line-height:1.2; }
.heading1.mgT1{ margin-top:95px; }
.heading2{ margin:60px 0 30px; font-size:18px; font-weight:400; line-height:1.2; }
.heading3{ margin:60px 0 40px; font-size:20px; font-weight:400; line-height:1.2; }

.topTitle{ display:block; margin:0 0 30px; text-align:center; font-size:28px; font-family:var(--en-font); font-weight:400; }

@media screen and (max-width:767px){
    .topTitle{ margin:0 0 20px; }
    
    .heading1{ margin:45px 0 30px; font-size:20px; }
    .heading1.mgT1{ margin-top:45px; }
    .heading2{ margin:60px 20px 30px; }
    .heading3{ margin:40px 0; text-align:center; }
}

/*  txt
===================================*/
.price{ font-size:16px; font-family:var(--num-font); }

.cmTxt1{ margin:60px 0 0; text-align:center; font-size:16px; line-height:1.4; }
.cmTxt2{ margin:30px 0 0; text-align:center; line-height:1.4; }

.taRight{ text-align:right; }

@media screen and (max-width:767px){
    .cmTxt2{ padding:0 20px; }
}

/*  link
===================================*/
.cmLink1{ display:block; margin:20px 0 0; text-align:center; color:var(--link-color); }

/*  btn
===================================*/
.moreBtn{ text-align:center; margin:40px 0 0; }
.moreBtn a{ display:inline-block; padding:15px 90px 15px 40px; background:url("../img/arrow_gray_right2.svg") no-repeat right 40px center / 40px auto; border:#464646 1px solid; border-radius:50px; font-family:var(--en-font); color:var(--font-color); }

.shopBtn{ display:inline-block; padding:13px 20px; background:#fff; border-radius:50px; font-size:13px; font-family:var(--num-font); font-weight:400; letter-spacing:.06em; color:#333; line-height:1; }

.wishBtn{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#fff; border:none; border-radius:50%; position:absolute; right:15px; bottom:15px; }
.wishBtn img{ width:19px; margin:3px 0 0; }

.cartBtn,
.submitBtn{ width:100%; height:52px; display:flex; align-items:center; justify-content:center; padding:0 0 2px; background:var(--font-color); border:none; border-radius:50px; font-size:16px; font-weight:400; color:#fff; cursor:pointer; }

.backBtn{ width:100px; height:50px; display:flex; align-items:center; justify-content:center; background:#fff; border:var(--line-color) 1px solid; border-radius:50px; font-size:14px; color:var(--font-color); }

.sizeS{ max-width:200px; }

.greenBtn{ display:inline-block; padding:9px 10px 10px; border:var(--main-color) 1px solid; border-radius:4px; font-size:14px; color:var(--main-color); line-height:1; }

@media screen and (min-width:768px){
    .moreBtn a{ transition:all 0.2s; }
    .moreBtn a:hover{ background:url("../img/arrow_gray_right2_hover.svg") no-repeat right 30px center / 40px auto #464646; color:#fff; }
    
    .shopBtn{ transition:all 0.2s; }
    .shopBtn:hover{ background:var(--gray-color); }
    
    .cartBtn,
    .submitBtn,
    .backBtn,
    .greenBtn{ transition:opacity 0.2s; }
    .cartBtn:hover,
    .submitBtn:hover,
    .backBtn:hover,
    .greenBtn:hover{ opacity:0.8; }
}

/*  form
===================================*/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea{ width:100%; padding:13px 16px; background:#fff; border:var(--line-color) 1px solid; border-radius:0; box-sizing:border-box; font-size:16px; }
textarea{ height:10em; }
select{ width:100%; padding:16px 40px 16px 16px; appearance:none; background:#ffffff; background:url("../img/pulldown.svg") no-repeat right 13px center / 10px auto #fff; border:var(--line-color) 1px solid; border-radius:0; box-sizing:border-box; font-size:16px; color:var(--font-color); }
input[type="radio"],
input[type="checkbox"]{ width:15px; height:15px; margin:0 2px 0 0; border:var(--line-color) 1px solid; accent-color:#019f8b; inline-size:1.2rem; block-size:15px; vertical-align:-2px !important; }
input:focus,
button:focus,
textarea:focus,
select:focus{ outline:none; }

.qtyControl{ display:flex; align-items:center; border:var(--line-color) 1px solid; overflow:hidden; }
button.qtyMinus,
button.qtyPlus{ width:35px; height:50px; display:flex; align-items:center; justify-content:center; background:none; border:none; font-size:18px; color:var(--font-color); cursor:pointer; }
input.qtyInput{ width:40px; height:50px; padding:0; text-align:center; border:none; font-size:15px; -moz-appearance:textfield; font-size:18px; font-family:var(--num-font); }
input.qtyInput::-webkit-outer-spin-button,
input.qtyInput::-webkit-inner-spin-button{ -webkit-appearance:none; }

::placeholder{ color:#C9C9C9; }

.alertBox{ padding:10px; background:#FFEEEE; line-height:1.4; color:#EA6063; }

@media screen and (max-width:767px){
    input[type="radio"],
    input[type="checkbox"]{ vertical-align:0 !important; }
}

/*  pageTop
===================================*/
.pageTop{ width:65px; height:65px; display:flex; align-items:center; justify-content:center; padding:10px 0 0; text-align:center; background:url("../img/arrow_gray_top.svg") no-repeat center 18px / 10px auto var(--gray-color); border-radius:50%; font-size:12px; font-family:var(--en-font); color:var(--font-color); position:fixed; right:20px; bottom:20px; z-index:100; }
.pageTop{ opacity:0; visibility:hidden; transition:opacity 0.3s, visibility 0.3s; }
.pageTop.show{ opacity:1; visibility:visible; }
@media screen and (min-width:768px){
    .pageTop{ transition:opacity 0.2s; }
    .pageTop:hover{ opacity:0.7; }
}
@media screen and (max-width:767px){
    .pageTop{ width:52px; height:52px; right:12px; bottom:92px; }
}

/*  noticeBanner
===================================*/
.noticeBanner{ width:100%; padding:10px 20px; background:var(--font-color); text-align:center; font-size:13px; color:#fff; line-height:1.6; }
.noticeBanner a{ color:#fff; text-decoration:underline; }
@media screen and (min-width:768px){
    .noticeBanner a{ transition:opacity 0.2s; }
    .noticeBanner a:hover{ opacity:0.7; }
}

/*=================================
  module
===================================*/
/*  pankuzu
===================================*/
.pankuzu{ padding:25px 0 0; }
.pankuzu ul{ display:flex; flex-wrap:wrap; font-size:12px; color:var(--font-gray-color); }
.pankuzu ul li::after{ content:"/"; margin:0 5px; }
.pankuzu ul li:last-child::after{ display:none; }
.pankuzu ul li a{ color:var(--font-gray-color); }
@media screen and (max-width:767px){
    .pankuzu{ padding:20px 0; }
    .pankuzu ul{ flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; padding:0 20px; }
    .pankuzu ul::-webkit-scrollbar{ display:none; }
}

/*  topKvArea
===================================*/
.topKvArea{ width:100%; position:relative; }
.topKvArea .kvImg{ width:100%; }
.topKvArea .kvImg img{ width:100%; height:449px; object-fit:cover; }
.topKvArea .kvTxt{ position:absolute; }
.topKvArea .kvTxt p{ font-size:48px; font-family:var(--en-font); font-weight:400; line-height:1.2; color:#fff; }
@media screen and (min-width:768px){
    .topKvArea .kvTxt{ right:8%; bottom:12%; }
    .topKvArea .kvTxt p{ font-size:52px; }
}
@media screen and (max-width:767px){
    .topKvArea .kvImg img{ height:calc(100vh - 76px); }
    .topKvArea .kvTxt{ left:9%; bottom:120px; }
    .topKvArea .kvTxt p{ font-size:48px; }
}

/*  topNewArrival
===================================*/
.topNewArrival{ padding:60px 0 0; }

/*  carousel
===================================*/
.carouselWrap{ max-width:1400px; margin:0 auto; position:relative; }
.carouselList{ display:flex; gap:0 20px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.carouselList::-webkit-scrollbar{ display:none; }
.carouselList li{ flex:0 0 calc(25% - 15px); scroll-snap-align:start; position:relative; }
.carouselList li a{ display:block; position:relative; }
.carouselList li figure img{ width:100%; aspect-ratio:320 / 452; object-fit:cover; border-radius:5px; }
.carouselList .cardTxt{ padding:0 20px 20px; position:absolute; left:0; bottom:0; }
.carouselList .itemName{ margin:0 0 10px; font-size:18px; font-weight:400; color:#fff; }
.carouselPrev,
.carouselNext{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; background:url("../img/arrow_gray_left.svg") no-repeat center center / 6px auto #fff; border:none; box-shadow:0px 0px 10px 0px rgba(0,0,0,0.1); border-radius:50%; position:absolute; top:50%; z-index:5; transform:translateY(-50%); }
.carouselPrev{ left:10px; }
.carouselNext{ background-image:url("../img/arrow_gray_right.svg"); right:10px; }
@media screen and (min-width:768px){
    .carouselList a{ transition:opacity 0.2s; }
    .carouselList a:hover{ opacity:0.8; }
    .carouselPrev,
    .carouselNext{ transition:opacity 0.2s; cursor:pointer; }
    .carouselPrev:hover,
    .carouselNext:hover{ opacity:0.7; }
}
@media screen and (max-width:767px){
    .carouselList{ gap:0; }
    .carouselList li{ flex:0; padding:0 0 0 10px; }
    .carouselList li:first-child{ padding-left:20px; }
    .carouselList li figure img{ width:auto; height:426px; }
    .carouselPrev,
    .carouselNext{ display:none; }
}

/*  topRecommend
===================================*/
.topRecommend{ padding:80px 0; }
@media screen and (max-width:767px){
    .topRecommend{ padding:60px 0; }
}

/*  itemList
===================================*/
.itemList{ display:flex; flex-wrap:wrap; gap:40px 2px; }
.itemList li{ width:calc((100% - 8px) / 5); position:relative; }
.itemList li a{ display:block; }
.itemList li .imgArea{ position:relative; }
.itemList li figure img{ width:100%; aspect-ratio:1 / 1; object-fit:cover; }
.itemList li .txtArea{ padding:10px 10px 0; }
.itemList li .itemName{ font-weight:400; line-height:1.5; color:var(--font-color); }
.itemList li .itemPrice{ margin:6px 0 0; font-family:var(--num-font); font-weight:400; }
.itemList li .itemPrice .priceLabel{ margin:0 4px 0 0; font-size:12px; color:var(--font-gray-color); }
.itemList li .soldOut{ display:inline-block; margin:6px 0 0; padding:5px 10px; background:#D9D9D9; font-size:12px; font-family:var(--num-font); color:#fff; line-height:1; }
.itemList li .btn{ height:52px; }
.itemList li .cartBtn{ max-width:134px; height:42px; margin:20px auto 0; padding:15px 0; font-size:12px; position:absolute; left:0; right:0; bottom:0px; }
@media screen and (min-width:768px){
    .itemList li a{ transition:opacity 0.2s; }
    .itemList li a:hover{ opacity:0.8; }
}
@media screen and (max-width:767px){
    .itemList{ gap:24px 2px; }
    .itemList li{ width:calc((100% - 2px) / 2); }
    .itemList li .txtArea{ padding:8px 8px 0; }
}

/*  funList
===================================*/
ul.funList{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:0 40px; margin:0 0 30px; }
ul.funList li.sort select{ padding:0 30px 0 0; border:none; font-size:14px; }
@media screen and (max-width:767px){
    ul.funList{ justify-content:center; }
}

/*  paging
===================================*/
.paging{ padding:40px 0; text-align:center; font-family:var(--num-font); }
.paging .pagingCon{ display:inline-block; padding:0 50px; position:relative; }
.paging .preBtn,
.paging .nextBtn{ width:30px; height:30px; position:absolute; }
.paging .preBtn{ left:0; }
.paging .nextBtn{ right:0; }
.paging .preBtn a,
.paging .nextBtn a{ width:30px; height:30px; display:flex;align-items:center; justify-content:center; border-radius:50%; }
.paging .preBtn img,
.paging .nextBtn img{ width:6px; }
.paging ul{ display:flex; align-items:center; justify-content:center; gap:0 20px; }
.paging ul li{ width:30px; height:30px; }
.paging ul li a,
.paging ul li span{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.paging ul li.on span{ background:var(--font-color); color:#fff; }
@media screen and (min-width:768px){
    .paging ul li a,
    .paging .preBtn a,
    .paging .nextBtn a{ transition:all 0.2s; }
    .paging ul li a:hover,
    .paging .preBtn a:hover,
    .paging .nextBtn a:hover{ background:var(--font-color); color:#fff; }
}

/*  itemDetailArea
===================================*/
.itemDetailArea{ padding:25px 0 0; }
.itemDetailWrap{ display:flex; justify-content:space-between; }
.itemGallery{ width:45%; }
.itemInfo{ width:49%; }
@media screen and (max-width:767px){
    .itemDetailArea{ padding:0; }
    .itemDetailWrap{ flex-direction:column; gap:20px 0; }
    .itemGallery{ width:100%; }
    .itemInfo{ width:auto; margin:0 20px; }
}

/*  itemGallery
===================================*/
.itemGallery .mainImg{ width:100%; apsect-ratio:1 / 1; display:flex; align-items:center; justify-content:center; }
.itemGallery .mainImg img{ width:100%; aspect-ratio:1 / 1; object-fit:cover; }
.itemGallery .thumbList{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 0; }
.itemGallery .thumbList li{ width:calc((100% - 60px) / 7); }
.itemGallery .thumbList li a{ display:block; border:transparent 1px solid; }
.itemGallery .thumbList li.on a{ border-color:var(--font-color); }
.itemGallery .thumbList li img{ max-width:100%; max-height:100%; }
@media screen and (max-width:767px){
    .itemGallery .thumbList{ flex-wrap:nowrap; overflow-x:auto; gap:0 8px; padding:0 20px; }
    .itemGallery .thumbList::-webkit-scrollbar{ display:none; }
    .itemGallery .thumbList li{ flex:0 0 60px; }
}

/*  itemInfo
===================================*/
.itemInfo .itemInfoHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:0 10px; }
.itemInfo .itemInfoHead .itemTitle{ font-size:22px; font-weight:400; line-height:1.4; }
.itemInfo .itemInfoHead .wishBtn{ width:36px; height:36px; border-radius:50%; flex-shrink:0; position:static; }
.itemInfo .itemInfoHead .wishBtn img{ width:22px; }
.itemInfo .itemPoint{ margin:20px 0 0; padding:20px; background:var(--gray-color); }
.itemInfo .itemPoint .pointLabel{ margin:0 0 5px; font-family:var(--en-font3); font-weight:400; position:relative; }
.itemInfo .itemPoint .pointLabel::after{ width:100px; height:1px; content:""; background:#A2A2A2; position:absolute; top:50%; left:50px; }
.itemInfo .itemVariant{ margin:20px 0 0; }
.itemInfo .itemVariant dt{ margin:0 0 10px; }
.itemInfo .itemVariant dd{ margin:0 0 20px; }
.itemInfo .itemVariant dd:last-of-type{ margin-bottom:0; }
.itemInfo ul.colorList{ display:flex; flex-wrap:wrap; gap:10px; }
.itemInfo ul.colorList li{ width:calc((100% - 60px) / 7); }
.itemInfo ul.colorList li button{ width:100%; border:transparent 1px solid; overflow:hidden; }
.itemInfo ul.colorList li.on button{ border-color:var(--font-color); }
.itemInfo ul.colorList li button img{ width:100%; aspect-ratio:1 / 1; object-fit:cover; }
.itemInfo ul.sizeList{ display:flex; flex-wrap:wrap; gap:8px 8px; }
.itemInfo ul.sizeList li button{ padding:18px 20px; border:var(--line-color) 1px solid; color:var(--font-color); line-height:1; }
.itemInfo ul.sizeList li.on button{ border-color:var(--font-color); }
.itemInfo .colorList li.disabled button{ position:relative; }
.itemInfo .colorList li.disabled button::after{ width:100%; height:100%; content:""; background:linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--line-color) calc(50% - 0.5px), var(--line-color) calc(50% + 0.5px), transparent calc(50% + 0.5px)); position:absolute; top:0; left:0; }
.itemInfo .sizeList li.disabled button{ background:linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--line-color) calc(50% - 0.5px), var(--line-color) calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
.itemInfo .stockStatus{ margin:10px 0 0; }
.itemInfo .itemPriceArea{ margin:20px 0 0; }
.itemInfo .itemSpecialPrice{ font-size:26px; font-family:var(--num-font); font-weight:500; }
.itemInfo .itemSpecialPrice .priceLabel{ margin:0 10px 0 0; font-size:16px; }
.itemInfo .itemNormalPrice{ margin:4px 0 0; font-size:16px; font-family:var(--num-font); font-weight:400; }
.itemInfo .itemNormalPrice .priceLabel{ margin:0 10px 0 0; font-size:14px; }
.itemInfo .itemShipping{ margin:20px 0 0; font-size:13px; color:var(--font-gray-color); line-height:1.8; }
.itemInfo .itemCartArea{ display:flex; align-items:center; gap:0 20px; margin:40px 0 0; }
.itemInfo .cartBtn{ flex:1; height:50px; font-size:14px; }
@media screen and (min-width:768px){
    .itemInfo .sizeList li button{ transition:all 0.2s; }
    .itemInfo .sizeList li:not(.on) button:hover{ background:var(--gray-color); }
}
@media screen and (max-width:767px){
    .itemInfo .itemInfoHead .itemTitle{ font-size:18px; }
    .itemInfo ul.colorList li{ width:calc((100% - 40px) / 5); }
    .itemInfo .itemCartArea{ position:fixed; bottom:0; left:0; right:0; padding:12px 16px; background:#fff; border-top:var(--line-color) 1px solid; z-index:50; }
}

/*  itemTabArea
===================================*/
.itemTabArea{ margin:40px 0 0; border-bottom:var(--line-color) 1px solid; }
.itemTabArea .itemTab{ display:flex; }
.itemTabArea .itemTab li{ flex:1; }
.itemTabArea .itemTab li button{ width:100%; padding:14px 0; text-align:center; background:none; border:none; border-bottom:transparent 1px solid; font-size:14px; color:var(--font-gray-color); cursor:pointer; }
.itemTabArea .itemTab li.on button{ border-bottom-color:var(--font-color); font-weight:500; color:var(--font-color); }
@media screen and (min-width:768px){
    .itemTabArea .itemTab li button{ transition:color 0.2s; }
    .itemTabArea .itemTab li:not(.on) button:hover{ color:var(--font-color); }
}
@media screen and (max-width:767px){
    .itemTabArea{ margin:40px 20px 0; }
}

/*  itemDescArea
===================================*/
.itemDescArea{ padding:40px 0 0; }
.itemDescArea .itemDescCon{ max-width:580px; margin:0 auto; }
.itemDescArea .itemDescNote{ margin:10px 0 0; font-size:13px; color:var(--font-gray-color); line-height:1.8; }
.itemDescArea .camBanner{ margin:40px 0 0; }
.itemDescArea .camBanner a{ max-width:400px; display:block; margin:0 auto; }
.itemDescCon{ opacity:1; visibility:visible; transition:opacity 0.3s; }
.itemDescCon.hide{ opacity:0; visibility:hidden; height:0; overflow:hidden; }
@media screen and (min-width:768px){
    .itemDescArea a{ opacity:1; transition:all .3s; }
    .itemDescArea a:hover{ opacity:0.8; }
}
@media screen and (max-width:767px){
    .itemDescArea{ padding:30px 20px 0; }
}

/*  articleArea
===================================*/
.articleFrame{ max-width:680px; margin:40px auto 0; }
.articleTitle{ margin:0 0 30px; font-size:24px; font-weight:normal; line-height:1.6; }
.eyecatchImg{ margin:30px 0; text-align:center; }
.eyecatchImg img{ max-width:100%; width:auto; }

.articleArea h2{ margin:40px 0 0; font-size:20px; font-weight:400; }
.articleArea h2:first-child{ margin-top:0; }
.articleArea img{ max-width:100%; width:auto; display:block; margin:20px auto 0; }
.articleArea figcaption{ margin:10px 0 0; color:var(--font-gray-color); }
.articleArea > div,
.articleArea > p,
.articleArea > ul,
.articleArea > dl{ margin:20px 0 0; line-height:2; }

.articleArea table{ width:100%; margin:20px 0 40px; border-collapse:collapse; }
.articleArea table th,
.articleArea table td{ padding:15px 15px; border-bottom:var(--line-color) 1px solid; font-weight:400; text-align:center; }
.articleArea table tbody th{ text-align:left; font-weight:700; }
.articleArea table .gray{ background:var(--gray-color); border-bottom:none; }

.articleArea dl{ display:flex; flex-wrap:wrap; margin:0 0 40px; }
.articleArea dl dt{ width:100px; padding:15px 0; border-top:var(--line-color) 1px solid; font-weight:700; }
.articleArea dl dd{ width:calc(100% - 100px); padding:15px 0 15px 10px; border-top:var(--line-color) 1px solid; font-size:14px; line-height:1.8; }
.articleArea dl dt:last-of-type,
.articleArea dl dd:last-of-type{ border-bottom:var(--line-color) 1px solid; }

.articleArea ul{ margin:20px 0 0; padding:0 0 0 1.3em; text-indent:-1.3em; }
.articleArea ul li{ margin:0 0 3px; }
.articleArea ul li::before{ content:"・"; margin:0 5px 0 0; }

@media screen and (max-width:767px){
    .articleFrame{ margin:20px auto 0; padding:0 20px; }
    .articleTitle{ font-size:20px; font-weight:normal; }
    
    .articleArea h2{ font-size:18px; }
        
    .articleArea table th,
    .articleArea table td{ padding:15px 5px; }
}

/*  relatedProducts
===================================*/
.relatedProducts{ padding:120px 0 80px; }
.relatedProducts .topTitle{ margin:0 0 8px; }
.relatedSubTxt{ margin:0 0 30px; text-align:center; font-size:13px; color:var(--font-gray-color); }
@media screen and (max-width:767px){
    .relatedProducts{ padding:60px 0 0; }
    .relatedProducts .inner{ padding:0; }
}

/*  cartArea
===================================*/
.cartArea{ margin:60px 0 0; }
.cartArea .cartShippingNote{ margin:0 0 20px; padding:10px 15px; background:var(--gray-color); font-size:13px; border-radius:4px; }
.cartArea .cartTotal{ display:flex; align-items:center; justify-content:flex-end; gap:0 16px; padding:20px 0; }
.cartArea .cartTotalLabel{ font-size:13px; color:var(--font-gray-color); }
.cartArea .cartTotalPrice{ font-size:22px; font-weight:500; }
.cartArea .cartBtnWrap{ margin:20px 0 0; }
.cartArea .cartContinueBtn{ display:block; margin:20px 0 0; text-align:center; color:var(--link-color); }
.cartArea dl.sumList{ display:flex; align-items:center; justify-content:flex-end; gap:0 10px; margin:20px 0 0; }
.cartArea dl.sumList dt{ color:var(--font-gray-color); }
.cartArea dl.sumList dd{ font-size:24px; font-family:var(--num-font); }

@media screen and (min-width:768px){
    .cartArea{ display:flex; align-items:flex-start; gap:0 60px; }
    .cartArea .cartMain{ flex:1; }
    .cartArea .cartSide{ width:300px; padding:40px 20px; border:var(--line-color) 1px solid; position:sticky; top:20px; }
    .cartArea .cartBtnWrap{ margin:0; }
    .cartArea .cartItemAction a{ transition:opacity 0.2s; }
    .cartArea .cartItemAction a:hover{ opacity:0.6; }
}
@media screen and (max-width:767px){
    .cartArea{ margin:20px 20px 0; }
}

/*  cartList
===================================*/
ul.cartList{ border-top:var(--line-color) 1px solid; }
ul.cartList li{ display:flex; gap:0 10px; padding:15px 0; border-bottom:var(--line-color) 1px solid; }
ul.cartList li figure{ flex:0 0 90px; height:90px; }
ul.cartList li figure img{ width:90px; height:90px; object-fit:cover; }
ul.cartList li .txtArea{ flex:1; }
ul.cartList li .tit{ font-size:16px; line-height:1.4; }
ul.cartList li .option{ margin:5px 0 0; font-size:13px; }
ul.cartList li .action{ display:flex; gap:0 16px; margin:15px 0 0; line-height:1.4; }
ul.cartList li .action a{ font-size:13px; color:var(--font-gray-color); text-decoration:underline; }
ul.cartList li .cartItemBottom{ display:flex; align-items:center; justify-content:flex-end; gap:0 10px; margin:15px 0 0; }
ul.cartList li .price{ font-size:16px; }
ul.cartList li .qtyControl{ width:90px; }
ul.cartList li input.qtyInput{ height:40px; font-size:14px; }
ul.cartList li button.qtyMinus,
ul.cartList li button.qtyPlus{ height:40px; font-size:14px; }

/*  loginPage
===================================*/
.loginPage{ margin-bottom:-160px; padding:0 0 160px; background:var(--second-color); }

/*--- loginArea ---*/
.loginArea{ max-width:780px; margin:0 auto -160px; padding:60px 0 160px; }
.loginBox{ padding:40px 60px; background:#fff; border-radius:5px; }
.loginBox .tit{ margin:0 0 30px; text-align:center; font-size:20px; font-weight:400; }
.loginBox .loginWrap{ display:flex; }
.loginBox .loginForm{ flex:1; padding:0 30px 0 0; border-right:#F1F1F1 1px solid; }
.loginBox .loginForm dl dt{ margin:0 0 10px; font-size:14px; }
.loginBox .loginForm dl dd{ margin:0 0 20px; }
.loginBox .forgotLink{ margin:20px 0 0; text-align:right; }
.loginBox .forgotLink a{ font-size:13px; color:var(--main-color); }
.loginBox .loginSns{ width:280px; padding:59px 0 0 30px; }
.loginBox .loginSns .tit{ margin:0 0 20px; text-align:center; font-size:14px; }
.loginBox ul.snsList li{ margin:0 0 12px; }
.loginBox ul.snsList li a{ width:100%; height:52px; display:flex; align-items:center; justify-content:center; gap:0 10px; background:#fff; border:var(--line-color) 1px solid; border-radius:50px; font-size:16px; }
.loginBox .snsList li a img{ width:20px; }
.loginBox .snsList li:nth-child(3) a img{ width:16px; }
.guestBox{ margin:30px 0 0; padding:40px; text-align:center; background:#fff; border-radius:5px; }
.guestBox .tit{ margin:0 0 20px; }
.guestBox .submitBtn{ max-width:270px; margin:0 auto; }

@media screen and (min-width:768px){
    .submitBtn{ transition:opacity 0.2s; }
    .submitBtn:hover{ opacity:0.8; }
    .snsList li a{ transition:opacity 0.2s; }
    .snsList li a:hover{ opacity:0.7; }
    .forgotLink a{ transition:opacity 0.2s; }
    .forgotLink a:hover{ opacity:0.7; }
}
@media screen and (max-width:767px){
    .loginArea{ padding:20px 16px 160px; }
    .loginBox{ padding:30px 20px; }
    .loginBox .loginWrap{ flex-direction:column; gap:30px 0; }
    .loginBox .loginForm{ padding:0; border:none; }
    .loginBox .loginSns{ width:100%; padding:30px 0 0; border-top:var(--line-color) 1px solid; }
    .loginBox .loginSns .tit{ text-align:center; font-size:18px; }
    .guestBox{ margin:20px 0 0; padding:30px 20px; }
    .guestBox .tit{ font-size:18px; }
}

/*  checkoutPage
===================================*/
/*--- checkoutStep ---*/
.checkoutStep{ padding:60px 0 0; }
.checkoutStep ol{ display:flex; align-items:center; justify-content:center; gap:0 60px; }
.checkoutStep ol li{ padding:20px 0 0; color:var(--font-gray-color); position:relative; }
.checkoutStep ol li::before{ width:6px; height:6px; content:""; display:block; margin:0 auto 8px; background:var(--line-color); border-radius:50%; position:absolute; top:3px; left:0; right:0; z-index:2; }
.checkoutStep ol li.fin{ color:var(--main-color); }
.checkoutStep ol li.fin::before,
.checkoutStep ol li.fin::after{ background:var(--main-color); }
.checkoutStep ol li.on{ color:var(--main-color); }
.checkoutStep ol li.on::before{ width:12px; height:12px; background:var(--main-color); top:0; }
.checkoutStep ol li::after{ width:calc(100% + 65px); height:1px; content:""; background:var(--line-color); position:absolute; top:6px; left:10px; z-index:1; }
.checkoutStep ol li:last-child::after{ display:none; }

/*--- checkoutArea ---*/
.checkoutArea{ max-width:680px; margin:0 auto; padding:50px 0 80px; }
.requireNote{ margin:0 0 30px; }
.requireLabel{ display:inline-block; padding:3px 4px 4px; background:var(--red-color); border-radius:2px; font-size:12px; color:#fff; line-height:1; vertical-align:2px; margin:0 4px 0 0; }
.checkoutBlock{ margin:0 0 60px; }
.blockTit{ margin:0 0 20px; padding:0 0 12px; font-size:20px; font-weight:700; }
dl.formList{ display:flex; flex-wrap:wrap; }
dl.formList > dt{ width:210px; padding:15px 0 8px 0; }
dl.formList dt .requireLabel{ margin:0 0 0 5px; }
dl.formList dt.pdTNone{ padding-top:0; }
dl.formList > dd{ width:calc(100% - 210px); margin:0 0 30px; }
dl.formList > dd:last-of-type{ margin-bottom:0; }
dl.formList2 dt{ margin:0 0 10px; }
dl.formList2 dd{ margin:0 0 20px; }
dl.formList2 dd:last-child{ margin-bottom:0; }
.formCol2{ display:flex; gap:0 10px; }
.formCol2 .formGroup{ display:flex; flex-wrap:wrap; align-items:center; gap:0 15px; }
.formCol2 .formGroup label{ width:30px; display:block; }
.formCol2 .formGroup input{ width:calc(100% - 45px); }
.formInline{ display:flex; align-items:center; gap:0 10px; }
.formInline select{ width:auto; }
.inputShort{ width:200px !important; }
.selectShort{ width:auto !important; }
.zipInput[type = "text"]{ width:200px; }
.zipBtn{ height:37px; padding:5px 10px; background:#fff; border:var(--main-color) 1px solid; border-radius:3px; font-size:13px; color:var(--main-color); cursor:pointer; white-space:nowrap; }
.errorTxt{ margin:10px 0 0; color:#EA6063; }
.noteTxt{ margin:10px 0 0; font-size:13px; }
.noteTxt a{ text-decoration:underline; }
#email[readonly]{ background:var(--gray-color); }
.inputError{ border-color:#EA6063; }
.checkLabel{ display:flex; align-items:center; gap:0 8px; font-size:14px; cursor:pointer; }
.registerForm{ margin:20px 0 0; padding:20px; background:var(--gray-color); }
.radioLabel{ display:flex; align-items:center; gap:0 8px; font-size:14px; cursor:pointer; }

/*--- payList ---*/
ul.payList li{ margin:20px 0 0; }
ul.payList li .radioLabel{ font-size:16px; }
ul.payList li .radioLabel input[type = radio]{ margin-top:1px; }
.creditForm{ padding:0 20px; background:var(--gray-color); }
.creditForm dl.formList dd{ margin:0 0 20px; }
.creditForm{ max-height:0; opacity:0; visibility:hidden; transition:all 0.3s ease, opacity 0.3s ease; }
.creditForm.open{ max-height:650px; opacity:1; visibility:visible; margin-top:20px; padding-top:20px; padding-bottom:35px; }


/*--- deliveryList ---*/
ul.deliveryList > li{ margin:0 0 30px; }
.deliveryDate{ margin:0 0 10px; font-size:16px; }
.deliveryChangeBtn{ display:inline-block; margin:0 0 16px; padding:10px; background:#fff; border:var(--main-color) 1px solid; border-radius:4px; color:var(--main-color); line-height:1; }
ul.deliveryItems{ border-bottom:var(--line-color) 1px solid;  }
ul.deliveryItems li{ display:flex; gap:0 10px; padding:15px 0; border-top:var(--line-color) 1px solid; }
ul.deliveryItems li figure{ flex:0 0 60px; height:60px; }
ul.deliveryItems li figure img{ width:60px; height:60px; object-fit:cover; }
ul.deliveryItems li .txtArea{ flex:1; }
ul.deliveryItems li .tit{ font-size:16px; line-height:1.4; }
ul.deliveryItems li .option{ margin:5px 0 0; font-size:13px; }
ul.deliveryItems li .price{ margin:15px 0 0; font-size:16px; text-align:right; }
ul.deliveryItems li .price span{ margin:0 10px 0 0; font-size:14px; }

/*--- checkoutBtnWrap ---*/
.checkoutBtnWrap{ display:flex; justify-content:center; gap:0 10px; margin:40px 0 0; }
.checkoutBtnWrap .submitBtn{ width:calc(100% - 110px); max-width:300px; }

@media screen and (min-width:768px){
    .zipBtn,
    .deliveryChangeBtn,
    .checkoutBtnWrap .submitBtn{ transition:opacity 0.2s; }
    .zipBtn:hover,
    .deliveryChangeBtn:hover,
    .checkoutBtnWrap .submitBtn:hover{ opacity:0.7; }
}
@media screen and (max-width:767px){
    .checkoutStep{ padding:30px 0 0; }
    
    dl.formList > dt{ width:100%; padding:0 0 10px; }
    dl.formList > dd{ width:100%; }
    
    .checkoutStep ol{ gap:0 20px; }
    .checkoutStep ol li::after{ width:calc(100% + 25px); }
    .checkoutArea{ padding:20px 16px 60px; }
}

/*  checkoutConfirmArea
===================================*/
.checkoutConfirmArea{ display:flex; align-items:flex-start; gap:0 100px; padding:50px 0 80px; }
.checkoutConfirmMain{ flex:1; }
.checkoutConfirmSide{ width:300px; max-height:100vh; padding:20px; border:var(--line-color) 1px solid; overflow:auto; position:sticky; top:20px; }
.checkoutConfirmSide .alertBox{ margin:0 0 40px; } 
.blockTitWrap{ display:flex; align-items:center; justify-content:space-between; margin:0 0 20px; }
.blockTitWrap .blockTit{ margin:0; padding:0; border:none; }
.changeBtn{ padding:10px; background:#fff; border:var(--main-color) 1px solid; border-radius:4px; color:var(--main-color); }
ul.confirmTxt{ font-size:16px; }
ul.confirmTxt li{ margin:0 0 10px; }
dl.confirmDl{ display:flex; flex-wrap:wrap; }
dl.confirmDl dt{ width:120px; color:var(--font-gray-color); }
dl.confirmDl dd{ width:calc(100% - 120px); margin:0 0 10px; font-size:16px; }
.deliveryMethod{ margin:5px 0 10px; font-size:13px; color:var(--font-gray-color); }
.checkoutConfirmArea dl.sumList{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px 0; margin:10px 0 0; text-align:right; }
.checkoutConfirmArea dl.sumList dt{ width:calc(100% - 100px); color:var(--font-gray-color); }
.checkoutConfirmArea dl.sumList dd{ width:100px; font-size:16px; font-family:var(--num-font); }
.totalArea{ display:flex; align-items:center; justify-content:flex-end; margin:15px 0 0; padding:15px 0 0; text-align:right; border-top:var(--line-color) 1px solid; }
.totalLabel{ width:calc(100% - 100px); color:var(--font-gray-color); }
.totalPrice{ width:100px; font-size:24px; font-weight:500; font-family:var(--num-font); }
.keigenNote{ margin:20px 0 0; text-align:right; }
.agreeNote{ margin:30px 0 0; text-align:center; line-height:1.4; }
.agreeNote a{ color:var(--link-color); text-decoration:underline; }
.checkoutConfirmSide .checkoutBtnWrap{ margin:40px 0 0; }
@media screen and (min-width:768px){
    .changeBtn{ transition:opacity 0.2s; }
    .changeBtn:hover{ opacity:0.7; }
}
@media screen and (max-width:767px){
    .checkoutConfirmArea{ flex-direction:column-reverse; gap:0; padding:20px 16px 60px; }
    .checkoutConfirmSide{ width:100%; margin:0 0 40px; padding:0; border:none; position:static; }
    .checkoutConfirmSide .checkoutBtnWrap{ display:none; }
    .checkoutConfirmMain .checkoutBtnWrap{ display:flex; margin:30px 0 0; }
}

/*  completeArea
===================================*/
.completeArea{ max-width:640px; margin:0 auto; padding:70px 0 0; }
.completeArea .title{ margin:0 0 20px; text-align:center; font-size:18px; font-weight:400; }
.completeArea .txt1{ margin:20px 0 0; text-align:center; line-height:1.4; }
.completeArea .cmLink1{ margin:40px 0 0; }
ul.orderList{ margin:40px 0 0; }
ul.orderList > li{ padding:20px 0; border-top:var(--line-color) 1px solid; }
ul.orderList > li:last-child{ border-bottom:var(--line-color) 1px solid; }
.orderNo{ font-size:16px; }
ul.orderImgList{ display:flex; flex-wrap:wrap; gap:8px; margin:15px 0 0; }
ul.orderImgList li figure{ width:60px; height:60px; }
ul.orderImgList li figure img{ width:60px; height:60px; object-fit:cover; }
.completeBtnWrap{ max-width:300px; margin:40px auto 0; }

@media screen and (max-width:767px){
    .completeArea{ padding:50px 20px 0; }
    .completeArea .txt1{ text-align:left; }
}

/*  mypagePage
===================================*/
/*--- mypageNav ---*/
ul.mypageNav{ max-width:680px; display:flex; flex-wrap:wrap; margin:40px auto 0; gap:0 20px; }
ul.mypageNav li{ width:calc((100% - 40px) / 3); border-bottom:var(--line-color) 1px solid; }
ul.mypageNav li:nth-child(-n+3){ border-top:var(--line-color) 1px solid; }
ul.mypageNav li a{ display:flex; align-items:center; justify-content:space-between; padding:20px 20px 20px 10px; background:url("../img/arrow_gray_right.svg") no-repeat right 10px center / 6px auto; font-size:16px; }
@media screen and (min-width:768px){
    ul.mypageNav li a{ transition:opacity 0.2s; }
    ul.mypageNav li a:hover{ opacity:0.6; }
}
@media screen and (max-width:767px){
    ul.mypageNav{ margin:0 20px; }
    ul.mypageNav li{ width:100%; }
    ul.mypageNav li:nth-child(-n+3){ border-top:none; }
    ul.mypageNav li:first-child{ border-top:var(--line-color) 1px solid; }
    ul.mypageNav li a{ padding:20px 30px 20px 20px; background-position:right 20px center; }
}

/*  mypagePage
===================================*/
/*--- mypageWrap ---*/
.mypageWrap{ display:flex; align-items:flex-start; gap:0 60px; }
.mypageSide{ width:240px; flex-shrink:0; }
.mypageMain{ flex:1; }

/*--- mypageSide nav ---*/
.mypageSide ul.mypageNav{ margin-top:60px; }
.mypageSide ul.mypageNav{ border-top:var(--line-color) 1px solid; }
.mypageSide ul.mypageNav li{ width:100%; }
.mypageSide ul.mypageNav li:nth-child(-n+3){ border-top:none; }
.mypageSide ul.mypageNav li a{ padding:15px 20px 15px 10px; font-size:14px; }

/*--- orderHistoryList ---*/
ul.orderHistoryList{ margin:20px 0 0; }
ul.orderHistoryList > li{ margin:0 0 40px; border:var(--line-color) 1px solid; border-radius:4px; overflow:hidden; }
.orderHistoryHead{ padding:20px; background:var(--gray-color); border-bottom:var(--line-color) 1px solid; }
.orderHistoryHead .orderStatus{ font-size:16px; font-weight:700; }
.orderHistoryHead dl{ display:flex; flex-wrap:wrap; gap:5px 10px; margin:5px 0 0; }
.orderHistoryHead dl dt{ width:60px; color:var(--font-gray-color); }
.orderHistoryHead dl dd{ flex:calc(100% - 70px); }
ul.orderHistoryItems{ margin:0 20px; }
ul.orderHistoryItems li{ display:flex; gap:0 10px; padding:15px 0; border-bottom:var(--line-color) 1px solid; }
ul.orderHistoryItems li figure{ flex:0 0 60px; height:60px; }
ul.orderHistoryItems li figure img{ width:60px; height:60px; object-fit:cover; }
ul.orderHistoryItems li .txtArea{ flex:1; }
ul.orderHistoryItems li .tit{ line-height:1.4; }
ul.orderHistoryItems li .option{ margin:4px 0 0; font-size:13px; }
ul.orderHistoryItems li .price{ margin:6px 0 0; font-size:16px; text-align:right; }
ul.orderHistoryItems li .price span{ margin:0 10px 0 0; font-size:13px; }
ul.orderHistoryItems li .greenBtn{ margin:10px 0 0; }
.orderHistoryFoot{ gap:0 20px; padding:15px 20px 20px; }
.orderHistoryFoot .orderTotal{ text-align:right; font-size:24px; font-family:var(--num-font); }
.orderHistoryFoot .orderTotal span{ margin:0 20px 0 0; font-size:14px; color:var(--font-gray-color); }
.orderHistoryFoot .submitBtn{ width:200px; margin:30px auto 0; }

@media screen and (max-width:767px){
    ul.orderHistoryList{ margin:0 20px; }
    .orderHistoryFoot .submitBtn{ width:100%; }
    .orderHistoryFoot{ flex-direction:column; gap:12px 0; align-items:flex-end; }
}

/*  orderDetailWrap
===================================*/
.orderDetailWrap{ margin:20px 0 0; }
.orderDetailWrap .orderHistoryHead{ border-bottom:none; }
.orderDetailWrap ul.orderHistoryItems{ margin:0; }
dl.orderDetailInfo{ display:flex; flex-wrap:wrap; padding:20px; border-bottom:var(--line-color) 1px solid; }
dl.orderDetailInfo dt{ width:120px; padding:8px 0; color:var(--font-gray-color); flex-shrink:0; }
dl.orderDetailInfo dd{ width:calc(100% - 120px); padding:8px 0; font-size:14px; line-height:1.6; }
dl.orderSumList{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 0; padding:15px 0 0; text-align:right; }
dl.orderSumList dt{ width:calc(100% - 100px); color:var(--font-gray-color); }
dl.orderSumList dd{ width:100px; font-size:16px; font-family:var(--num-font); }
.orderTotalArea{ display:flex; align-items:center; justify-content:flex-end; gap:0 20px; padding:15px 0 0; text-align:right; border-top:var(--line-color) 1px solid; margin:16px 0 0; }
.orderTotalArea .totalLabel{ color:var(--font-gray-color); }
.orderTotalArea .totalPrice{ font-size:24px; font-weight:400; font-family:var(--num-font); }
.orderDetailBtnWrap{ display:flex; justify-content:center; margin:40px 0 0; }
@media screen and (max-width:767px){
    .orderDetailWrap ul.orderHistoryItems{ margin:0 20px; }
    dl.orderDetailInfo{ margin:0 20px; padding:20px 0; }
    dl.orderSumList{ margin:0 20px; }
    .orderTotalArea{ margin:15px 20px; }
    .orderDetailBtnWrap{ margin:40px 20px 0; }
    .orderDetailBtnWrap .backBtn{ width:100%; }
}

/*  wishList
===================================*/
ul.wishList li{ width:calc((100% - 6px) / 4); }
@media screen and (max-width:767px){
    ul.wishList li{ width:calc((100% - 2px) / 2); }
}

/*  mypageFormArea
===================================*/
.mypageFormArea .checkoutBtnWrap .submitBtn{ max-width:200px; }

@media screen and (max-width:767px){
    .mypageFormArea{ margin:0 20px; }
    .mypageFormArea .checkoutBtnWrap .submitBtn{ max-width:300px; }
}

/*  mypageTxtArea
===================================*/
.mypageTxtArea{ margin:20px 0 0; line-height:2; }
.mypageTxtArea p{ margin:20px 0 0; }
.mypageTxtArea p:first-child{ margin-top:0; }
@media screen and (max-width:767px){
    .mypageTxtArea{ padding:0 20px; }
}

/*  cardInfoList
===================================*/
dl.cardInfoList{ display:flex; flex-wrap:wrap; margin:20px 0 0; border-top:var(--line-color) 1px solid; }
dl.cardInfoList dt{ width:120px; padding:16px 0; border-bottom:var(--line-color) 1px solid; font-size:14px; color:var(--font-gray-color); }
dl.cardInfoList dd{ width:calc(100% - 120px); padding:16px 0; border-bottom:var(--line-color) 1px solid; font-size:14px; font-family:var(--num-font); letter-spacing:0.01em; vertical-align middle; }
@media screen and (max-width:767px){
    dl.cardInfoList dt{ width:100px; }
    dl.cardInfoList dd{ width:calc(100% - 100px); }
}

/*  withdrawNoteList
===================================*/
ul.withdrawNoteList{ margin:20px 0; }
ul.withdrawNoteList li{ padding:0 0 0 1em; text-indent:-1em; line-height:1.4; }
ul.withdrawNoteList li::before{ content:"・"; }

/*  simpleFormArea
===================================*/
.simpleFormArea{ max-width:420px; margin:0 auto; padding:20px 0 0; }
.simpleFormTxt{ margin:0 0 30px; line-height:1.8; }
.simpleFormList dt{ margin:0 0 10px; font-size:14px; }
.simpleFormList dt .requireLabel{ margin:0 0 0 10px; }
.simpleFormList dd{ margin:0 0 20px; }
.simpleFormBtnWrap{ display:flex; justify-content:center; margin:40px 0 0; gap:0 10px; }
.simpleFormBtnWrap button,
.simpleFormBtnWrap a{ max-width:200px; }

@media screen and (max-width:767px){
    .simpleFormArea{ padding:20px 20px 0; }
    .simpleFormBtnWrap button,
    .simpleFormBtnWrap a{ max-width:400px; }
}

/*  registerArea
===================================*/
.registerArea{ max-width:680px; margin:0 auto; padding:20px 0 0; }
.registerArea .requireNote{ margin:0 0 30px; line-height:1.8; }
.formNote{ margin:15px 0; }
@media screen and (max-width:767px){
    .registerArea{ padding:20px 20px 0; }
}

/*  registerConfirm
===================================*/
.registerConfirmTxt{ margin:0 0 30px; line-height:1.4; }
dl.registerConfirmList{ display:flex; flex-wrap:wrap; border-top:var(--line-color) 1px solid; }
dl.registerConfirmList dt{ width:130px; padding:20px 0; border-bottom:var(--line-color) 1px solid; color:var(--font-gray-color); }
dl.registerConfirmList dd{ width:calc(100% - 130px); padding:20px 0 20px 20px; border-bottom:var(--line-color) 1px solid; font-size:16px; line-height:1.4; }
@media screen and (max-width:767px){
    dl.registerConfirmList dt{ width:100px; }
    dl.registerConfirmList dd{ width:calc(100% - 100px); }
}

/*  termArea ul・ol
===================================*/
.termArea{ max-width:680px; margin:40px auto 0; }
.termArea h2{ margin:30px 0 0; font-size:18px; font-weight:700; }
.termArea > p{ margin:20px 0 0; }
.termArea ul{ margin:20px 0 0; padding:0 0 0 1.3em; text-indent:-1.3em; }
.termArea ol{ margin:20px 0 0; padding:0 0 0 1.5em; }
.termArea ul li{ margin:0 0 3px; }
.termArea ul li::before{ content:"・"; margin:0 5px 0 0; }
.termArea ol li{ list-style:decimal; margin:0 0 5px; }
.termArea.tokusho dl{ display:flex; flex-wrap:wrap; border-top:var(--line-color) 1px solid; }
.termArea.tokusho dl dt{ width:150px; padding:15px 0; border-bottom:var(--line-color) 1px solid; font-weight:700; }
.termArea.tokusho dl dd{ width:calc(100% - 150px); padding:15px 0 15px 10px; border-bottom:var(--line-color) 1px solid; line-height:1.2; }
@media screen and (max-width:767px){
    .termArea{ padding:0 20px; }
    
    .termArea.tokusho dl dt{ width:100%; padding:15px 0 10px; border-bottom:none; }
    .termArea.tokusho dl dd{ width:100%; margin-left:0; padding:0 0 15px; }
}

/*  loading
===================================*/
.loading{ display:flex; gap:6px; align-items:center; justify-content:center; padding:40px 0; }
.loading span{ width:8px; height:8px; border-radius:50%; background:var(--main-color); animation:loadingBounce 1s ease-in-out infinite; }
.loading span:nth-child(2){ animation-delay:0.15s; }
.loading span:nth-child(3){ animation-delay:0.3s; }

.loadingModal .loading span{ background:#93d7ce; }

@keyframes loadingBounce{
    0%,80%,100%{ transform:scale(0.6); opacity:0.4; }
    40%{ transform:scale(1); opacity:1; }
}

/*  modal
===================================*/
.modalWrap{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); position:fixed; top:0; left:0; z-index:400; opacity:0; visibility:hidden; transition:all 0.3s; }
.modalWrap.open{ opacity:1; visibility:visible; }
.modalInner{ width:90%; max-width:400px; padding:20px 20px 40px; background:#fff; border-radius:4px; position:relative; transform:translateY(-20px); transition:all 0.3s; }
.modalWrap.open .modalInner{ transform:translateY(0); }
.modalClose{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:none; border:none; font-size:24px; color:var(--font-gray-color); position:absolute; top:10px; right:10px; cursor:pointer; }

/*--- deliveryModal ---*/
.deliveryModal dl{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 0; padding:40px 0 0; }
.deliveryModal dl dt{ width:100px; }
.deliveryModal dl dd{ width:calc(100% - 100px); }
.deliveryModal .submitBtn{ max-width:260px; margin:40px auto 0; }