@charset "UTF-8";
/* CSS Document */

*{margin: 0;padding: 0;list-style: none;font-family: 'Roboto', sans-serif;}
*{transition: all 0.5s ease;}

:root {
--mdns-bg: #E0DDD5;
--mdns-bg2: #E0DDD5;
--mdns-text: #000;

--mdns-sideMenuBg: #BCBDB7;
--mdns-sideMenuText: #000;

--mdns-bottomBannerBg: #BCBDB7;
--mdns-bottomBannerText: #000;

--mdns-dark70: #706E6B;
--mdns-lightEF: #EFEDE7;

--mdns-redFF: #FF6C05;
--mdns-whiteF5: #F5F5F5;

--mdns-blue: #2F4A8A;
--mdns-red: #993333;

--mdns-redA1: #A13A23;
}

body{background: var(--mdns-bg);font-weight: 400;color: var(--mdns-text);margin-bottom: 50px;}
body.light{background: var(--mdns-bg2);}
a{color:var(--mdns-text);}
label a{text-decoration: none;}
button {cursor: pointer;}
a.btn {cursor: pointer;background: var(--mdns-bg);color: var(--mdns-text);text-decoration: none;display: block;text-align: center;margin: 0px auto;padding: 13px 0;font-size: 15px;line-height: 18px;width: 100%;max-width: 80%; border: 1px solid var(--mdns-text);}
body.light a.btn {background: var(--mdns-bg2);}
.control-label{margin: 0px;}
.error-summary, .alert-error, .help-block-error{color: var(--mdns-redFF) !important;}
input[type="submit"], input[type="button"]{-webkit-appearance: none;}
.btn_blue{color: var(--mdns-text); font-size: 15px; text-decoration: none; display: block; text-align: center;margin:3px auto 58px;padding: 16px 0;border-top: solid 1px;border-bottom: solid 1px;}
.pagination{font-size: 13px; color:var(--mdns-text);}
.pagination li, .pagination li span {display: inline;}
.pagination li {margin: 0 5px;}
.pagination li a{text-decoration: none;}
.toast-message {font-family: unset;font-size: 1rem;color: black;}
#at15s {transition: none;}
.list-view .summary {display: block;}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#page-main, #page-home, #page-login, #page-payment{width: 414px;position: absolute;top: 0;left: 0;}

#header, #header h1, #header .btn_menu, #header .btn_bag, #header .lang-group, #header_clone {transition: none;}

#header, #header_clone{height: 94px;}
#header {position: relative;}
#header_clone {display: none;}
#header.fixheader ~ #header_clone{display: block}

#header.fixheader{position: fixed !important; top: 0; width: 100%; height: 66px; z-index: 1000; background: var(--mdns-bg);border-bottom: 1px solid var(--mdns-bg)}
body.light #header.fixheader {background: var(--mdns-bg2);border-bottom-color: var(--mdns-bg2);}
#header .btn_menu{background: url("/img/ico_menu_2025.svg") no-repeat; background-size: 34px 20px; position: absolute; top: 24px; left: 21px; width: 34px; height: 20px; display: block}
#header .btn_home{background: url("/img/btn_home.svg") no-repeat; background-size: 34px 20px; position: absolute; top: 24px; left: 21px; width: 0px; height: 0px; display: block}
#header .btn_bag{background: url("/img/ico_bag_2023SS.svg") no-repeat; background-size: 16px 20px; position: absolute; top: 22px; right: 20px; width: 16px; height: 20px; display: block;}
#header .btn_bag.items:before{content: "";background:#E8790C; width: 9px;height: 9px;display: block;position: absolute;top: -3px;right: -3px;border-radius: 6px}
#header .lang-group {position: absolute;top: 22px;right: 42px;display: block;}
#header .lang-group .selectdiv select {padding: 0px 6px;width: 50px;font-size: 14px;background: var(--mdns-bg);color:var(--mdns-text);border: 0;}
body.light #header .lang-group .selectdiv select {background: var(--mdns-bg2);}
#header .lang-group .selectdiv:after {left: unset; right: 10px;}

select.lang{ border:none; padding:0; margin:0; font-size:11px;top: 0px;position: absolute;right: 40px;font-size: 0.7rem;}

.ui-filter h2{margin-left: 21px;}
#header h1{text-indent: -9999px; background: url("/img/btn_home.svg") no-repeat; background-size: contain; background-position: center; width: 88px;height: 14px; display: block; cursor: pointer;position: absolute;top: 27px;left: 50%;transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%);}
/* #header h1.Madness,  */
h2.Madness, 
.logo.Madness{background: url("/img/logo_madness_2025.svg") no-repeat; width: 78px; height: 52px;top: 22px;}
.ui-filter h2.Madness{width: 65px;height: 43px;background-size: contain;}
/* #header h1.Madgirl,  */
h2.Madgirl{background: url("/img/logo-madness_2025.svg") no-repeat; width: 78px; height: 52px;top: 22px;}
/* #header h1.Mad-supply, #header h1.Living,  */
h2.Mad-supply, h2.Living{background: url("/img/logo_madsupply_2025.svg") no-repeat; width: 106px; height: 15px; top: 26px;}
.ui-filter h2.Mad-supply, .ui-filter h2.Living {width: 85px;height: 12px;background-size: contain;}
/* #header h1.Madmonster,  */
h2.Madmonster{background: url("/img/logo-madness_2025.svg") no-repeat; width: 78px; height: 52px;top: 22px;}
/* #header h1.Madrider,  */
h2.Madrider{background: url("/img/logo_madrider_2025.svg") no-repeat; width: 109px; height: 24px; top: 23px;}
/* #header h1.JapanCollection,  */
h2.JapanCollection{background: url("/img/logo_japancollection_2025.svg") no-repeat; width: 111px; height: 34px; top: 23px;}
.ui-filter h2.JapanCollection{width: 79px;height: 24px;background-size: contain;}
/* #header h1.PRM,  */
h2.PRM{background: url("/img/logo_prm_2025.svg") no-repeat; width: 53px; height: 50px; top: 22px;}
h2{font-weight: bold; margin: 0 20px}

#page-home .content, #page-home .ui-filter {position: relative;margin-bottom: 13px;}
#page-home .content {margin-bottom: 80px;}
.search{position: absolute;right:20px;top: 0px}
.btn_search{ background: url( "/img/ico_search.svg") center center no-repeat; width: 20px; height: 20px;display: block;float: right}
.btn_filter{font-size: 14px; margin:0 0 0 20px; float: right}
.ui-filter h2{color: var(--mdns-text); font-size: 20px;font-weight: 700;line-height: 23px;padding: 0;}
.ui-filter h2 a{display: none;}
.ui-filter a{text-decoration: none;color:var(--mdns-text)}
.ui-filter a.select{ text-decoration: none;color:var(--mdns-text); font-weight: bold;}
.ui-filter ul{margin: 20px; transition: unset;}
/* .ui-filter ul li {margin-bottom: 10px;} */
.ui-filter ul li a{font-size: 15px;line-height: 26px;}
.ui-filter ul .indent{margin: unset; padding-left: 0.75em;}
.hidetag{display: none}
.sort.select{color: var(--mdns-text)}

#item-list{ display: flex; flex-flow: row wrap; justify-content:space-evenly;font-weight: 300; font-size: 10px; line-height: 10px; color: var(--mdns-text);}
#item-list li { display:block; position:relative; width: 170px; padding: 16px 0 41px 0; margin: 0px;border-top: 1px solid var(--mdns-text);font-size: 9px;}
#item-list li.hide { display: none;}
#item-list li:before {content: attr(data-label);color:var(--mdns-text);font-size: 8px;font-weight: 400; position: absolute; top: 2px;}
#item-list li:after {content: attr(data-status); color:var(--mdns-redFF);display: block; margin-top: 6px;}

#item-list li i{font-style: normal; display: none;}
#item-list li i:before{content: "*";}
#item-list li i.model:before, #item-list li i.size:before{content: "" !important;}

#item-list li img, #item-list li div.bg{width: 100%; height: auto}
#item-list li p:before {content: attr(data-name); display: block}
#item-list li p[data-price]:before {margin-top: 12px;}
#item-list li p:after {margin-top: 6px; content: attr(data-price); display: block}
#item-list li p[data-discounted]:after {text-decoration: line-through;}
#item-list li p[data-discountedprice]:after {content: attr(data-discountedprice);color: var(--mdns-redFF);}

.sidemenu{width: 414px; height: 100%;background: var(--mdns-sideMenuBg);position:fixed;z-index: 1;top: 0;left: 0; z-index: 1001; overflow-y: auto; overflow-x: hidden; font-size: 16px; line-height: 18px; color: var(--mdns-sideMenuText);}
.sidemenu.close{left: -414px}
.sidemenu::-webkit-scrollbar {background-color:#fff;width:16px}
.sidemenu::-webkit-scrollbar-track {background-color:#fff}
.sidemenu::-webkit-scrollbar-thumb {background-color:#ccc;border-radius:16px;border:7px solid #fff}
.sidemenu::-webkit-scrollbar-button {display:none}

.sidemenu .profile{position: absolute;left: 40px; top:19px; z-index: 190;font-size: 17px;font-weight: 300;}
.sidemenu .btn-group{position: absolute;right: 34px;top: 19px; display: flex;flex-direction: row; justify-content: flex-end; z-index: 191;font-size: 17px;font-weight: 300;}  
.sidemenu .selectdiv select{background: none; width: 80px; font-size: 1em}
.sidemenu .selectdiv:after{top: -5px} 

.sidemenu .btn_back{font-size: 13px;}
.sidemenu .hide{left:-100%; overflow: hidden;}
.sidemenu a{color: var(--mdns-sideMenuText);text-decoration: none;}
.sidemenu .menu_main{ font-size: 18px; line-height: 30px;}
.sidemenu ul{margin: 113px 20px 40px 40px; display: block}
.sidemenu li{font-size: 17px; font-weight: 300; line-height: 28px;margin-bottom: 15px;}

.sidemenu_lv2{z-index: 102;}
.sidemenu_lv2{position: absolute;background: var(--mdns-sideMenuBg);width: 100%; height: 100%;display: block; left: 0; top:0px; z-index: 1;}
.sidemenu_lv2 ul li:nth-child(1):after{content: "";background: none}

.sidemenu_lv3{z-index: 103;}
.sidemenu_lv3{position: absolute;background: var(--mdns-sideMenuBg);width: 100%; height: 100%;display: block; left: 0; top: 0px; z-index: 103;}
.sidemenu_lv3 ul li:nth-child(1):after{content: "";background: none}
.sidemenu .logo {position: absolute;bottom: 0px;margin: 20px 20px 46px 34px;}


.banner {width: 414px;height: 40px;margin: 0 auto; position: fixed; z-index: 111; bottom: 0;  color: var(--mdns-bottomBannerText);text-align: center;line-height: 40px;background: var(--mdns-bottomBannerBg); overflow: hidden;}
.bannerx,.banner1,.banner2,.banner3,.banner4,.banner5 {z-index: 111; background: var(--mdns-bottomBannerBg); position: absolute;width: 100%;height: 100%; font-size: 14px; line-height: 40px; top: 0%;}
.banner1 {background: var(--mdns-text);animation:fade 12s infinite;-webkit-animation:fade 12s infinite;} 
.banner2 {background: var(--mdns-text);animation:fade2 12s infinite;-webkit-animation:fade2 12s infinite;}
.banner3 {background: var(--mdns-text);animation:fade3 12s infinite;-webkit-animation:fade3 12s infinite;}

.banner.static .banner1 {-webkit-animation: unset;}
.banner.static .banner2 {-webkit-animation: unset;}
.banner.static .banner3 {-webkit-animation: unset;}
.banner a {text-decoration: none; color: var(--mdns-bottomBannerText)}

.banner .inactive {z-index: -1; top:100%;}
.banner .nextactive {z-index: 2;}

.vtext {
    position: absolute;
    bottom: 0;
    left: 34px;
    transform: translateX(-100%) rotate(90deg);
    transform-origin: right bottom;
    font-style: italic;
    font-size: 12px;
}

 /*item*/
.hidemobile{display: none}
.hidedesktop{display: block}

#page-item{width: 414px;position: relative}
#page-item #item-list li {display: block; position: relative; border: none; width: 15%; margin: 0 5%;}
#item-list li.empty {padding: 0 !important;border: none !important;}

#page-item .info{margin: 0 20px;padding: 0 0 20px 0; color: var(--mdns-text); font-size: 12px;line-height: 15px;}
#page-item .item img{width: 100%; height: auto;display: block;}
#page-item a.btn_detail_close {width: 24px; height: 24px; position: fixed; top:100px; right:20px; color: var(--mdns-text); font-size: 24px;}
#header.fixheader ~ a.btn_detail_close {top:20px;}
#page-item .info h3{font-weight: 300; font-size: 12px; line-height: 12px; color: var(--mdns-text);margin-bottom: 10px;}
#page-item .info p, #page-item #description-content table{color: var(--mdns-text); font-size: 12px; line-height: 18px;font-weight: 300;}
#page-item .info p.price {font-size: 12px;font-weight: 300;margin-bottom: 4px;}
#page-item .info p.price.discounted{text-decoration: line-through;}
#page-item .info p.discounted-price{color: var(--mdns-redFF);}
#page-item .info p.login-info{margin-top: 32px; font-style: italic; font-size: 10px; line-height: 12px;}
#page-item #description-content table{width: 100%;}
#page-item #description-content table td{vertical-align: top;}
.item-button{margin: 33px 0}
.item-button a,.item-button select{width: 100%;height: 48px; display:block; margin: 0 0 10px 0} 
.item-button a{background:var(--mdns-bg);line-height: 48px;color: var(--mdns-text);border: 1px solid var(--mdns-text);text-align: center;text-decoration: none}
body.light .item-button a{background: var(--mdns-bg2);}
.gallery .tag{height: 33px;margin:0 21px;border-top: 1px solid var(--mdns-text);font-size: 10px;line-height: 12px;}
.gallery .large{width: 372px;height: 372px;margin: 0 21px 14px;}
.gallery .large .blueimp-gallery > .prev, .gallery .large .blueimp-gallery > .next{
    top: 24px;
    width: 11px;
    height: 21px;
    margin-top: 0;
    border: none;
    background: none;
}
.gallery .large .blueimp-gallery > .prev {left: 24px;}
.gallery .large .blueimp-gallery > .next {right: 24px;}
.gallery .thumb{height: 620px;overflow-y: scroll;position: relative;}
.gallery .thumb::-webkit-scrollbar {background-color:var(--mdns-bg);width:12px}
.gallery .thumb::-webkit-scrollbar-track {background-color:var(--mdns-bg)}
body.light .gallery .thumb::-webkit-scrollbar,
body.light .gallery .thumb::-webkit-scrollbar-track
    {background-color:var(--mdns-bg2)}
.gallery .thumb::-webkit-scrollbar-thumb {background-color:var(--mdns-text);border-radius:2px;border:5px solid var(--mdns-bg)}
body.light .gallery .thumb::-webkit-scrollbar-thumb {border-color: var(--mdns-bg2);}
.gallery .thumb::-webkit-scrollbar-button {display:none}
.gallery .swiperWrapper {position: relative;margin-top: 19px;}
.gallery .swiper {width: 548px !important;overflow: hidden;margin: 0 auto;}
.gallery .swiper .swiper-wrapper {z-index: 0 !important;}
.gallery .swiper .swiper-slide {transition: none;}
.gallery .swiper .style_item img {width: 88px;}
.gallery .swiper-button {z-index: 0 !important;background-size: 8px;background-repeat: no-repeat;background-position: center; width: 36px;}
.gallery .swiper-button-prev {background-image: url(/img/ico_thumbnail_prev.svg);left: 20px;}
.gallery .swiper-button-next {background-image: url(/img/ico_thumbnail_next.svg);right: 20px;}
.blueimp-gallery {background: var(--mdns-bg);}
body.light .blueimp-gallery {background: var(--mdns-bg2);}

.selectdiv{position: relative}
.selectdiv:not([disabled="disabled"]):after {
    content: '';
    background: url("/img/ico_arrow_black_2025.svg") no-repeat center center;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 5px;
    position: absolute;
    pointer-events: none;
}
#page-cart .selectdiv:not([disabled="disabled"]):after {top:unset;bottom:50%;}
select::-ms-expand {display: none;}
.selectdiv select {
    -webkit-appearance: none;-moz-appearance: none;appearance: none;
    border: 1px solid var(--mdns-text);color: var(--mdns-text);background: var(--mdns-bg); 
    font-size: 14px; padding: 0 20px 0 30px;width: 100%;border-radius: 0;-webkit-appearance: none
}
body.light .selectdiv select {background: var(--mdns-bg2);}
    
    
.tab-wrap {position: relative; font-weight: normal;display: flex; margin: 0 0 67px 0;border-bottom: none}
.tab-wrap table{width: 100%;  border-collapse: collapse; border-color: #ebebeb}
.tab-wrap td{font-size: 13px;padding: 2px;}

.tab-wrap input[type="radio"][name="tabs"] {
    position: absolute;z-index: -1;opacity: 0;}
.tab-wrap input[type="radio"][name="tabs"]:checked + .tab-label-content label {
    color:  var(--mdns-text);
    text-decoration: underline;
}
.tab-wrap input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
    display: block;
}
.tab-wrap input[type="radio"][name="tabs"]:nth-of-type(1):checked ~ .slide {
    left: calc((100% / 3) * 0);
}
.tab-wrap input[type="radio"][name="tabs"]:nth-of-type(2):checked ~ .slide {
    left: calc((100% / 3) * 1);
}
.tab-wrap input[type="radio"][name="tabs"]:nth-of-type(3):checked ~ .slide {
    left: calc((100% / 3) * 2);
}
.tab-wrap input[type="radio"][name="tabs"]:nth-of-type(4):checked ~ .slide {
    left: calc((100% / 3) * 3);
}
.tab-wrap input[type="radio"][name="tabs"]:first-of-type:checked ~ .slide {
    left: 0;
}

.tab-wrap label {cursor: pointer; color: var(--mdns-text);box-sizing: border-box;display: inline-flex; align-items: center;justify-content: center;text-align: center;height: 34px;transition: color 0.2s ease; width: 100%; font-size: 14px; line-height: 16px; font-weight: 500;}

/* tab underline */
.tab-wrap .slide {width: calc(100% / 3);height: 0px;position: absolute;left: 0; top: calc(100% - 4px);transition: left 0.3s ease-out;background: var(--mdns-text)}

.tab-wrap .tab-label-content { width: 100%;}
.tab-wrap .tab-label-content .tab-content { width: 100%; position: absolute;top: 62px; left: 0; display: none;color: var(--mdns-text);}
.tab-wrap .tab-label-content .tab-content:after{content: "";position: relative}
.tab-wrap .tab-label-content .tab-content p strong{font-weight: normal !important;}

.div_swiper{ width: 100%; overflow-x: scroll}
.div_swiper #item-list{ flex-flow: row}

.half.mreverse {display: flex; flex-direction: column-reverse;}


input,span,label,textarea {display: block;border: none; border-radius: 0}
textarea:focus,input:focus {outline: 0;}

#page-login input.question, 
#page-item input.question,
#page-cart input.question,
#page-payment input.question 
    {font-size: 1em;font-weight: 300; margin: 0;padding: 3em 0 0 0;border: none;width: 100%;background: rgba(0, 0, 0, 0);overflow-x: hidden;}
#page-login input.question + label, 
#page-item input.question + label,
#page-cart input.question + label,
#page-payment input.question + label
    {display: block;position: relative;white-space: nowrap;padding: 0;margin: 0;width: 100%;border-top: 1px solid var(--mdns-text);height: 0px;font-size: 14px;line-height: 16px;}
#page-login input.question:focus + label, 
#page-item input.question:focus + label,
#page-cart input.question:focus + label,
#page-payment input.question:focus + label
    {width: 100%;border-color: inherit;}
#page-login input.question:focus + label > span, 
#page-item input.question:focus + label > span, 
#page-cart input.question:focus + label > span,
#page-payment input.question:focus + label > span
    {color: inherit;}
#page-login input.question:valid + label, 
#page-item input.question:valid + label,
#page-cart input.question:valid + label,
#page-payment input.question:valid + label
    {border-color:inherit}
#page-login input.question:invalid,
#page-item input.question:invalid,
#page-cart input.question:invalid,
#page-payment input.question:invalid
    {box-shadow: none;}
#page-login input.question + label > span,
#page-item input.question + label > span,
#page-cart input.question + label > span,
#page-payment input.question + label > span
    {position: absolute;font-size: 13px;font-weight: 500;top: -25px; left: 0px;z-index: -1;}
#page-login input.question:focus + label > span,
#page-login input.question.valued + label > span,
#page-item input.question:focus + label > span,
#page-item input.question.valued + label > span,
#page-cart input.question:focus + label > span,
#page-cart input.question.valued + label > span,
#page-payment input.question:focus + label > span,
#page-payment input.question.valued + label > span
    {top: -44px;font-size: 12px;}
/* #page-login input[type="submit"] {opacity: 1;cursor: pointer; background:var(--mdns-text); color: #fff; text-decoration: none; display: block; text-align: center;margin:20px 0;padding: 20px 0; width: 100%; font-size: 1em;} */
/* #page-login input[type="submit"]:hover { background: var(--mdns-text);} */
/* #page-login input[type="submit"]:active { background: var(--mdns-text);} */

#page-login .hint, #page-payment .hint{color: inherit;font-size: 12px;font-weight: 300;}
#page-login .membership div,
#page-payment .membership div,
#page-item .inputdiv
    {margin: 10px 0;}
/* #page-login .membership {padding: 20px 0 150px 0 !important;} */
#page-login .membership div.block,
#page-login .membership .list-view,
#page-payment .membership div.block,
#page-payment .membership .list-view,
#page-item .inputdiv
    {display: block; flex-direction: unset; margin: 0.5em 0;}
#page-login .membership .list-view .summary,
#page-payment .membership .list-view .summary
    {color:var(--mdns-text);}
#page-login .membership div.list-table,
#page-payment .membership div.list-table
    {width:100%;}
#page-login .list-table ul.align-height li,
#page-payment .list-table ul.align-height li
    {display: flex; flex-direction: row; justify-content: space-between; font-size: 13px}
#page-login .list-table ul.align-height li span,
#page-payment .list-table ul.align-height li span
    {width:100%;}
#page-login .list-table ul.align-height li span:nth-child(1),
#page-payment .list-table ul.align-height li span:nth-child(1)
    {color: var(--mdns-text)}
#page-login .list-table ul.align-height li span:nth-child(2),
#page-payment .list-table ul.align-height li span:nth-child(2)
    {color: var(--mdns-text)}
#page-login .membership div.block p,
#page-payment .membership div.block p
    {display: unset;margin: unset;flex-direction: unset;}
#page-login .membership div.error-summary,
#page-payment .membership div.error-summary
    {display: block; flex-direction: unset; margin: 0 0 10px 0;}
#page-login .membership div.error-summary p,
#page-payment .membership div.error-summary p
    {display: unset; flex-direction: unset; margin: unset;}
#page-login .membership form select.question,
#page-payment .membership form select.question
    {height: 44px;}
#page-login .membership input[type="submit"],
#page-payment .membership input[type="submit"]
    {margin-top: 33px;}
#page-login .help-block,
#page-payment .help-block
    {font-size: 13px; line-height: 16px; font-weight: 300;}


@-webkit-keyframes appear {100% {opacity: 1;}}
@keyframes appear {100% {opacity: 1;}}

.membership{ display: block; margin: 0 21px; padding: 0 0 200px 0; font-size: 14px;}
.btn_facebook{background:var(--mdns-text); color: #fff; text-decoration: none; display: block; text-align: center;margin:50px auto;padding: 20px 0}
.membership .form_btn, .membership input[type="submit"]{cursor: pointer;background: var(--mdns-bg);color: var(--mdns-text);text-decoration: none;display: block;text-align: center;margin: 0px auto;padding: 13px 0;font-size: 15px;line-height: 18px;width: 100%;border: 1px solid var(--mdns-text);}
body.light .membership .form_btn, body.light .membership input[type="submit"]{background: var(--mdns-bg2);}
.membership .btn_log_facebook {margin-bottom: 50px;}
.membership .btn_more{font-size: 12px;text-decoration: none; color:inherit;text-align: center;}

.popscreen{width: 100%;height: 100%;display: none; text-align: center; position: fixed;left: 0;top: 0; z-index: 999999; cursor: pointer; overflow: auto;}
#page-item .item .popscreen img{ text-align: center; max-width:90%; max-height: 90%; width: auto; height: auto; border: 1px solid #ebebeb; margin: 20px;}
.popscreen:after{content: ""; width: 100%; height: 100%; display: block; z-index: -1; background:rgba(255,255,255,0.7);position: fixed;top: 0;left: 0}
.popscreen.view{display: block}
.popscreen img{ margin: 20px; max-width: 80%; max-height: 90%; width: auto; height: auto;}
.btn_view{color:var(--mdns-text); display: block; margin: 10px 0}

/*aboutus*/
#page-about{width: 414px;position: relative}
#page-about .content {padding: 0 21px;}
#page-about .about-img{margin: 0 20px 33px 20px; overflow: hidden;}
#page-about .shop-img{height: 240px;}
#page-about .about-img img{width: 100%;position: relative;}
#page-about .bg-blue{margin: 0 21px;padding: 0 0 200px 0;font-size: 14px;line-height: 17px;font-weight: 300;text-align: justify;}
#page-about .bg-blue h2{margin: 0 0 3px 0; padding: 0; font-weight: 500;font-size: 16px;line-height: 20px;}
#page-about .bg-blue p{margin: 0 0 16px 0; font-size: 12px; line-height: 15px;font-weight: 300;}

#page-about .bg-blue.scroll {overflow-y: auto;}
/* #page-about .bg-blue.scroll::-webkit-scrollbar {background-color:var(--mdns-sideMenuBg);width:16px} */
/* #page-about .bg-blue.scroll::-webkit-scrollbar-track {background-color:var(--mdns-sideMenuBg)} */
/* #page-about .bg-blue.scroll::-webkit-scrollbar-thumb {background-color:var(--mdns-sideMenuBg);border-radius:16px;border:7px solid var(--mdns-sideMenuBg)} */
/* #page-about .bg-blue.scroll::-webkit-scrollbar-button {display:none} */
#page-about .bg-blue.scroll table {text-align: left;}

#page-about p.blue{margin: 0 0 10px 0; font-weight: bold;}
#page-about .bg-blue a {color: var(--mdns-text);}
#page-about .bg-blue .blue a {font-weight: bold; color: var(--mdns-text);}
#page-about .bg-blue .payment_method img {max-height: 40px;}

#page-about div.block{display: block; flex-direction: unset;}
#page-about div.block p {display: unset;margin: unset;flex-direction: unset;}
/* #page-about div.block>label>span{color: var(--mdns-whiteF5) !important;} */
#page-about div.block-textinput{margin-top: 20px;}
#page-about div.block-textarea{margin-top: 26px;}
#page-about div.reCaptcha{margin-top: 46px;}

#page-about input.question{background-color: var(--mdns-bg); margin: 0;padding: 1.5em 0 0 0;border: none;width: 100%;overflow-x: hidden;}
#page-about input.question + label{display: block;position: relative;white-space: nowrap;padding: 0;margin: 0;width: 100%;border-top: 1px solid var(--mdns-text);height: 0px;}
#page-about input.question:focus + label{width: 100%;border-color:var(--mdns-text);}
/* #page-about input.question:focus + label > span{color:var(--mdns-whiteF5)} */
#page-about input.question:focus + label > span,
#page-about input.question.valued + label > span{top: -4em;font-size: .8em;}
#page-about input.question:valid + label {border-color:var(--mdns-text)}
#page-about input.question:invalid{box-shadow: none;}
#page-about div.block-textinput label > span, #page-about div.block-textarea label > span{font-size: 14px;font-weight: 500;}
#page-about input.question + label > span{position: absolute;top: -2em; left: 0px;z-index:1;}
#page-about input[type="submit"] {opacity: 1;cursor: pointer; background:var(--mdns-sideMenuBg); color: var(--mdns-sideMenuText); text-decoration: none; display: block; text-align: center;margin:13px 0;padding: 16px 0; font-size: 12px; width: 100%}
#page-about textarea {background: var(--mdns-bg); border: solid var(--mdns-text) 1px;}
#page-about .control-label {margin: 0 0 5px 0;}
#page-about .help-block {color: var(--mdns-text);}
#page-about .bg-blue .selectdiv{position: relative}
#page-about .bg-blue .selectdiv:after {
    content: '';
    background: url("/img/ico_arrow_black_2025.svg") no-repeat center center;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 5px;
    position: absolute;
    pointer-events: none;
}
#page-about .bg-blue .selectdiv select {
    background: var(--mdns-sideMenuBg);
    font-size: 12px;
    height: 34px;
    border: 0;
}


/*footer*/
#footer{margin: 57px 21px 20px 21px;}
#footer .footer-item{margin: 14px 0 0 0;}
#footer .nav-toggle {background: var(--mdns-bg);color: var(--mdns-text);border: var(--mdns-text) solid 1px;}
body.light #footer .nav-toggle {background: var(--mdns-bg2);}
#footer .nav-toggle:hover { cursor: pointer;}
#footer .nav-toggle:before { content:"+ "}
#footer .nav-toggle.active:before { content:"- "}
#footer .nav-toggle, #footer h2 {font-size: 13px; font-weight: 500; padding: 11px 16px 12px 16px;margin: 0 0 10px 0;}
#footer h2 {border:none; padding: 4px 0px 0px 0px; color: var(--mdns-text);}
#footer .row-items ul, 
#footer .row-items li {margin: 0;padding: 0;}
#footer .row-items a {text-decoration: none;display: block; padding-bottom: 5px; margin: 0; font-size: 12px; font-weight: 300; color: var(--mdns-text);}
#footer .nav-items {display: none; transition: none;}
#footer .paymentitem{display: inline-flex; padding: 0;}
#footer .paymentitem li{margin: 0px 10px 10px 0px;}
#footer .payment_1{background: url("/img/ico_payment1_blk.svg") no-repeat; width: 23px; height: 19px; display: block}
#footer .payment_2{background: url("/img/ico_payment2_blk.svg") no-repeat; width: 23px; height: 19px; display: block}
#footer .payment_3{background: url("/img/ico_payment3_blk.svg") no-repeat; width: 23px; height: 19px; display: block}
#footer .payment_4{background: url("/img/ico_payment4_blk.svg") no-repeat; width: 18px; height: 19px; display: block}
#footer .payment_5{background: url("/img/ico_payment5_blk.svg") no-repeat; width: 28px; height: 17px; display: block}
#footer .payment_7{background: url("/img/ico_payment2507_blk.svg") no-repeat; background-size: contain; width: 20px; height: 19px; display: block}
#footer .payment_8{background: url("/img/ico_payment2508_blk.svg") no-repeat; background-size: contain; width: 14px; height: 19px; display: block}
#footer .payment_9{background: url("/img/ico_payment2509_blk.svg") no-repeat; background-size: contain; width: 19px; height: 19px; display: block}

#copyright {font-size: 12px; font-weight: 300; border: none; margin: 20px 20px 60px;}

/*cart*/
#page-cart{width: 414px;position: relative}
#page-cart .content {min-height: 640px; font-size: 14px; line-height: 17px;}
#page-cart #item-list{margin: 0 20px;}
#page-cart #item-list li{width: 100%; border-color: var(--mdns-bg)}
body.light #page-cart #item-list li{width: 100%; border-color: var(--mdns-bg2)}
#page-cart #item-list li .btn_remove{background: url("/img/img_close.svg") no-repeat; width: 18px; height: 18px; display: block; position: absolute;top:10px; right: 10px; cursor: pointer}
#page-cart #item-list li img{width: 35%; float: left}
#page-cart #item-list li .item-button{margin: 30px 0 0 0;}
#page-cart #item-list li .selectdiv,
#page-cart #item-list li .inputdiv
    {width: 50%; float: right; margin: 0 10% 0 0 }
/* #page-cart #item-list li .selectdiv:not([disabled="disabled"]):after{ content: '';
background: url("/img/ico_arrow_grey.svg") no-repeat center center;right: 10px;top: 0;height: 26px;width: 26px;position: absolute;pointer-events: none;} */
#page-cart #item-list li .selectdiv select{ 
    height: 30px;
    /* padding:0 12px; background: var(--mdns-bg); color: var(--mdns-text);-webkit-box-shadow: 0 0 3px 3px rgba(0,0,0,.1);box-shadow: 0 0 3px 3px rgba(0,0,0,.1); */
}
#page-cart #item-list li p:before{position: absolute;top: 0px; left: 40%; width: 50%}
#page-cart #item-list li p:after{position: absolute;top: 125px; left: 40%; width: 60%}

#page-cart .coupon {border-top:1px solid var(--mdns-text); }
#page-cart .coupon ul{margin: 20px;}
#page-cart .coupon input{display: inline-block; height: 30px; width: 50%; background: var(--mdns-bg2); border-bottom: solid 1px var(--mdns-text);}
#page-cart .coupon strong{float: right;}
#page-cart .coupon button{background:var(--mdns-bg2);line-height: 30px;color: var(--mdns-text); text-align: center;text-decoration: none; display: block; padding: 0 20px; border: 1px solid var(--mdns-text);}

#page-cart .cart_summary{border-top:1px solid var(--mdns-text);}
#page-cart .cart_summary ul{margin: 20px}
#page-cart .cart_summary strong{float: right; color: var(--mdns-text)}
#page-cart .cart_summary a{background:var(--mdns-bg2);color: var(--mdns-text);border: 1px solid var(--mdns-text); text-align: center;text-decoration: none; display: block; margin: 20px; padding: 20px 0;}
#page-cart form div.reCaptcha {margin: 20px auto; text-align: center; text-align: -webkit-center;}
#page-cart .cart_summary.tnc {font-size: 0.9em; padding: 0 20px;}
#page-cart .cart_summary.tnc p {margin-top: 1.5em;}
#page-cart .cart_summary.tnc ul {margin: 0px; margin-left: 20px;}
#page-cart .cart_summary.tnc li {list-style: disc;}

#page-cart .error-summary{margin: 0 auto;}
#page-cart .error-summary .alert-error{margin: 30px auto;max-width: 90%;text-align: center;}

.membership h2{margin: 0; border: 0;font-size: 16px;font-weight: 500;}
.membership div{display: flex; flex-direction: row; margin: 10px; line-height: 16px}
.membership div p{display: flex; flex-direction: row; margin: 10px; line-height: 18px;color: inherit}

.membership div input{ margin: 10px 10px 10px 0;padding: 10px; height: 2em}
.membership div input[type=checkbox]{ height: 1.1em;margin-top: unset;}
.membership div img{ height: 45px; margin:0 20px}
div.confirm_info {margin: 20px 0; }
.confirm_info ul{margin: 0; position: relative; width: 100%; display: table;}
.confirm_info li{font-size: 1em;line-height: 1.5em; display: table-row;}
.confirm_info li strong{ font-weight: 100; color: var(--mdns-text); width: 38%; display: table-cell;}
.confirm_info li font{ display: table-cell;}
.membership .payment_ico_grp { justify-content: space-evenly; width: 250px; flex-wrap: wrap;}
.membership div.payment_ico img{ max-height: 32px;margin: 0 10px}

.logo_light{background: url("/img/logo_madness_lite2.svg") no-repeat;width: 96px;height: 64px;display: block;background-size:contain; text-indent: -9999px;}

.btn_top{width: 42px; height: 42px; display: none; background: var(--mdns-text);position: fixed;bottom: 50px; right: 20px; border-radius: 100px;z-index: 1;-webkit-box-shadow: 0 3px 5px 5px rgba(0,0,0,.1);box-shadow: 0 3px 5px 5px rgba(0,0,0,.1);}
.btn_top:before{content: ""; background: url("/img/ico_top.svg") no-repeat center; width: 42px; height: 30px;position: absolute; top: 10px; display: block; }
        

.membership div.btn_group{ margin: 20px 0 10px 0; display: flex; justify-content: space-between;}
.membership div.btn_group a{font-size: 14px; color: var(--mdns-text); text-decoration: none;padding: 10px;}
.membership div.btn_group a.current{text-decoration: underline;}

div.list-table{ display: flex; flex-direction: row; justify-content: space-between; font-size: 10px;margin:20px 0}
div.list-table ul{  width: 100%; border-bottom: 1px solid var(--mdns-text); font-size: 13px;font-weight: 300;line-height: 17px; padding: 0 0 10px}
div.list-table ul:nth-child(1){color: var(--mdns-text);}
div.list-table ul:nth-child(2){color: inherit;}

@media screen and (min-width: 1200px) {
    h2{font-size: 16px; padding: 5px 0 10px 0; margin: 0 25%;}
    a.btn {max-width: 100%;}
    #page-main, #page-home{width: 100%;position: relative}
    #page-login, #page-payment{width: 100%;position: relative}
    #page-home .content{position: relative;min-height: 1000px}
    #page-main #item-list li div.bg > img:hover,
    #page-home #item-list li div.bg > img:hover
        {opacity: 0}

    .sidemenu {width: 336px;}
    .sidemenu ul{margin: 113px 20px 40px 91px;}
    .sidemenu.close{left: -25%}
    .sidemenu_lv2.hide, .sidemenu_lv3.hide{left: -100%;}

    #header, #header_clone{height: 86px;}
    #header h1 {display: none;}
    #header h1, #header h1.Madness {width: 329px; height: 68px; top: 43px;}
    #header h1.Madgirl {width: 329px; height: 68px; top: 43px;}
    #header h1.Madmonster {width: 216px;height: 86px; top: 34px;}
    #header h1.Mad-supply, #header h1.Living {width: 303px;height: 50px; top: 52px;}
    #header h1.Madrider {width: 280px;height: 68px; top: 43px;}
    

    #header.fixheader h1, #header.fixheader h1.Madness {height: 42px;top: 12px;}
    #header.fixheader h1.Madgirl {height: 42px;top: 12px;}
    #header.fixheader h1.Madmonster {height: 44px;top: 11px;}
    #header.fixheader h1.Living {height: 32px;top: 17px;}
    #header.fixheader h1.Madrider {height: 42px;top: 12px;}

    #header .btn_menu{background-size: 37px 22px; top: 19px; left: 40px; width: 37px; height: 22px;}
    #header .btn_home{background-size: 88px 14px; top: 23px; left: 102px; width: 88px; height: 14px;}
    #header .btn_bag{right: 3%; background-size: 16px 20px; top: 33px; right: 40px; width: 16px; height: 20px;}
    #header .lang-group{right: 5%; top: 34px;right: 62px;}
    .search{position: relative;right:0;top: 0; margin: 0 15px}
    .btn_search{float: none}
    .ui-filter div.tag{display: block; margin: 0 25%;}
    .ui-filter{
        position: absolute !important;
        left: 0px;
        top: 0;
        width: 16.67%;
    }
    .ui-filter .ui-filter-hcenter{top: 33px;position: absolute;left: 33%;
        /* transform: translateX(-50%);-webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); */
    }
    .ui-filter h2, .ui-filter .search, .ui-filter div.tag{margin: 0 !important;}
    .ui-filter h2{margin-bottom: 60px !important;}
    .ui-filter h2.Madness{width: 102px;height: 68px;}
    .ui-filter h2.JapanCollection{width: 102px;height: 31px;}
    .ui-filter h2.Living{width: 110px;height: 16px;}
    .ui-filter h2.Madrider{width: 141px;height: 31px;}
    .ui-filter ul{margin: 10px 0 20px 0;}
    .banner{width: 100%}
    .btn_filter{display: none}
    #item-list{
        margin-left: 336px;
        padding-right: 40px;
    }
    #item-list li{width: 24%;margin:0 0.5%;padding: 33px 0 75px 0;font-size: 10px;line-height: 13px;}
    #item-list li:before{font-size: 10px;line-height: 12px;}
    #item-list li p:before {width:100%}
    /* #item-list.slide{ margin:0 0 0 336px;} */
    /* #item-list.slide li{width: 20.88%;margin:0 2.06% 0} */
    #item-list li p[data-price]:before {margin-top: 10px;}
    #item-list li p:after, #item-list li:after {margin-top: 16px;}
    
    /*item*/
    .hidemobile{display: block}
    .hidedesktop{display: none !important}
    #page-item{width: 100%;position: relative}
    #page-item .item{width: 1133px;margin: 0 auto}
    #page-item a.btn_detail_close{right: 3%;}
    #page-item #item-list {width: 100%;margin: 0;}
    .gallery{display: flex;flex-direction: row}
    .gallery .thumb{width: 100px;}
    .gallery .large{width: 670px; height: 670px; margin:0;}
    .tab-wrap{width: 374px}
    #page-item .info{width: 374px; margin: 42px 0 0 89px;}
    #page-item .info h3{font-weight: 500;font-size: 18px;line-height: 22px;margin-bottom: 23px;}
    #page-item .info p.price{font-size: 14px;font-weight: 500;margin-bottom: 8px;}
    
    /*half-layouts*/
    .half {position: relative;margin: 0 40px;}
    .half.mreverse {flex-direction: column;}
    .half .left {position: relative;width: 50%;}
    .half .left .logo {position: absolute;top: 0px;left: 11%;}
    .half .right {position: absolute;top: 0;right: 0;width: 50%;}
    .half .right .bg {margin-bottom: 60px;}
    .half .bg img {object-fit: contain;width: 100%;}

    /*login*/
    #page-login #header, #page-payment #header {width: 100%; position: relative;}
    #page-login #header h1, #page-payment #header h1{width: 254px; height: 50px;top: 42px;}
    /* #page-login #header .btn_bag, #page-payment #header .btn_bag {right: 6%;} */
    #page-login #header .lang-group, #page-payment #header .lang-group {right: 6%;}
    #page-login #header.fixheader h1, #page-payment #header.fixheader h1 {height: 32px;top: 17px;}
    #page-login .membership, #page-payment .membership {margin: 0px 80px 200px 25%;padding: 52px 0;min-height: 220px;}
    /* #page-login .membership, #page-payment .membership{width: 40%; margin: 0 5%} */
    #page-login .membership .form_btn, #page-login .membership input[type="submit"],
    #page-payment .membership .form_btn, #page-payment .membership input[type="submit"]
        {padding: 15px 0;}
    .bg_login{ width: 50%; height: 100%; display: block;position:fixed; z-index: -1; right: 0; top: 0; background: url(/img/bg_login_2023SS.jpg); background-position: center; background-size: cover;}

    /*aboutus*/
    #page-about{width: 100%; min-height: 1000px; position: relative}
    #page-about .content{margin-bottom: 100px; display: flex; flex-direction: row-reverse; max-height: 480px; }
    #page-about .content:has(.long) {max-height: unset;}
    #page-about .about-img{width: 100%; height: auto;}
    #page-about .bg-blue{margin: 0px 80px 200px 25%;padding: 52px 0;}
    #page-about .bg-blue.long {position: relative;}
    /* #page-about .bg-blue p {line-height: 20px;} */
    #page-about .bg-blue.scroll {overflow-y: scroll;max-height: 600px;}

    /*footer*/
    #footer{display: flex;flex-direction: row; justify-content: flex-start; margin: 57px 0px 20px 36px;}
    #footer.slide{width: 75%; margin:0 0 0 25%}
    #footer .footer-item{margin: 0px 53px 0px 0px;max-width: 160px;}
    #footer .nav-toggle, #footer h2{background: none; color:var(--mdns-text);padding: 0;border: none;}
    #footer .nav-toggle:hover { cursor: text;}
    #footer .nav-toggle:before { content:""}
    #footer .nav-toggle.active:before { content:""}
    #footer .row-items{display:block}
    /* #footer .row-items a{padding: 0 10px 5px} */
    #footer .paymentitem{padding: 0;flex-wrap: wrap;}
    #footer .paymentitem li{margin: 0 10px 10px 0;}
    #footer .paymentitem li:last-child{margin: 0;}
    #copyright {margin: 20px 30px 60px 36px;}
    
    /*cart*/
    #page-cart{width: 100%}  
    #page-cart #item-list,
    #page-cart .cart_summary, #page-cart .error-summary, #page-cart .coupon{width: 800px; margin: 0 auto}
    #page-cart #item-list li p:before{top: 25px}
    #page-cart #item-list li img{width: 25%; margin: 0 0 0 6%}

}

@media screen and (min-width: 1600px) {
    #page-about .content{max-width: 1565px; margin-left: auto; margin-right: auto; max-height: 610px;}
    #page-about .content:has(.long){max-height: unset;}
}


 @keyframes fade
{
    0%   {opacity:1}
    33% { opacity: 0}
    66% { opacity: 0}
    100% { opacity: 1}
}
@keyframes fade2
{
    0%   {opacity:0}
    33% { opacity: 1}
    66% { opacity: 0 }
    100% { opacity: 0}
}
@keyframes fade3
{
    0%   {opacity:0}
    33% { opacity: 0}
    66% { opacity: 1}
    100% { opacity: 0}
}