/* item ------------------ */
.item{
    position:relative;
}
.item .cart-btn{
    position:absolute;
    bottom:0.2em;
    right:0.2em;
}

.pc{ display: block;}
.sm{ display: none;}

/* category ------------------ */
h2.category{
    font-size:1.5em;
    padding:0 0 0 0.5em;
    margin:0 0 0.5em 0;
    border-left:5px solid #222;
}

.cate-box{
    padding:5%;
    margin-bottom: 80px;
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: flex-start;
    gap: 30px 3.2%;
}
    .cate-box li{
        width:22.5%;
        font-size:0.85em;
    }
    .cate-box li.nothumb {
        padding: 0;
        min-height: 125px;
        border: none;
    }
    .cate-box li a{
        color: #222;
        text-decoration: none;
        font-weight: bold;
        width: 100%;
        height: 100%;
        padding: 20px;
        display: flex;
        align-items: center;
        border: 2px solid #222;
        background-color: #f5f5f5;
        position: relative;
        transition: ease .2s;
    }
    .cate-box li a:hover{
        color: #FFF;
        border:2px solid #e50012;
        background: #e50012;
    }
    .cate-box li a:before{
        content:"";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        bottom:19px;
        right:15px;
        /*線の形状*/
        width:15px;
        height:2px;
        background:#222;
    }
    .cate-box li a::after{
        content: '';
        /*絶対配置で矢印の位置を決める*/
        position: absolute;
        bottom:15px;
        right: 15px;
        /*矢印の形状*/
        width: 10px;
        height: 10px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        transform: rotate(45deg);
    }
    /*hoverした際のアニメーション*/
    .cate-box li a:hover::before,.cate-box li a:hover::after{
        border-top: 2px solid #FFF;
        border-right: 2px solid #FFF;
        animation: arrow .5s;
    }
    @keyframes arrow {
      50% { right: 10px; }
      100% { right: 15px; }}


    .cate-box li a span{ margin: 0 auto; background: none; }

    .cate-box li .img{}

.categoryParent{
    /*max-width:200px;
    display: block;*/
    text-align:left;
    font-size: large;
}

.cate-box-categorysub{
    padding:2.5%;
    margin-bottom: 100px;
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: flex-start;
    gap: 30px 5.2%;
}
.cate-box-categorysub li{
    width:200px;
    font-size:0.85em;
}
.cate-box-categorysub li a{
    color: #222;
    font-size: 1.2em;
    font-weight: bold;
   /* padding: 10%;*/
    display: block;
}
.cate-box-categorysub li a:hover{ text-decoration: underline;}
.cate-box-categorysub li a:hover .newItem{ text-decoration: none;}
.cate-box-categorysub li .img img{
    max-width: 100%;
    display: inline-block;
    margin: 0 0 10px 0;
    line-height: 0;
    padding: 0;
    border: 1px solid #555;
}
.cate-box-categorysub li .newItem{
    color: #FFF;
    display: inline-block;
    font-weight: bold;
    background: #e50012;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 5px;
}

/*
    .cate-box li.cate-01 .img{border-left:5px solid #F08300;}
    .cate-box li.cate-02 .img{border-left:5px solid #45B035;}
    .cate-box li.cate-03 .img{border-left:5px solid #109DCD;}
    .cate-box li.cate-04 .img{border-left:5px solid #D80C1E;}
    .cate-box li.cate-05 .img{border-left:5px solid #171C61;}
    .cate-box li.cate-06 .img{border-left:5px solid #935C1B;}
    .cate-box li.cate-07 .img{border-left:5px solid #D01C74;}
    .cate-box li.cate-08 .img{border-left:5px solid #EEAA1E;}
    .cate-box li.cate-09 .img{border-left:5px solid #036EB8;}
    .cate-box li.cate-10 .img{border-left:5px solid #8E1C32;}
    .cate-box li.cate-11 .img{border-left:5px solid #238E3A;}
    .cate-box li.cate-12 .img{border-left:5px solid #EF857D;}
    .cate-box li.cate-13 .img{border-left:5px solid #26499D;}
    .cate-box li.cate-14 .img{border-left:5px solid #CA9E1D;}
    .cate-box li.cate-15 .img{border-left:5px solid #601986;}
    .cate-box li.cate-16 .img{border-left:5px solid #B81C2B;}
    .cate-box li.cate-17 .img{border-left:5px solid #109078;}
*/

.cate-box-sub{
    margin:0;
    padding:0;
}
    .cate-box-sub li{
        width:135px;
        font-size:0.85em;
        display:inline-block;
        vertical-align:top;
        margin-bottom:30px;
    }
    .cate-box-sub li .img{
        width:100px;
        height:100px;
        display:block;
        margin-bottom:10px;
        border:0px none #555;
    }

h2.cate-01{border-left:5px solid #F08300;}
h2.cate-02{border-left:5px solid #45B035;}
h2.cate-03{border-left:5px solid #109DCD;}
h2.cate-04{border-left:5px solid #D80C1E;}
h2.cate-05{border-left:5px solid #171C61;}
h2.cate-06{border-left:5px solid #935C1B;}
h2.cate-07{border-left:5px solid #D01C74;}
h2.cate-08{border-left:5px solid #EEAA1E;}
h2.cate-09{border-left:5px solid #036EB8;}
h2.cate-10{border-left:5px solid #8E1C32;}
h2.cate-11{border-left:5px solid #238E3A;}
h2.cate-12{border-left:5px solid #EF857D;}
h2.cate-13{border-left:5px solid #26499D;}
h2.cate-14{border-left:5px solid #CA9E1D;}
h2.cate-15{border-left:5px solid #601986;}
h2.cate-16{border-left:5px solid #B81C2B;}
h2.cate-17{border-left:5px solid #109078;}


/* cart ------------------ */
h2.cart{
    font-size:1.5em;
    margin:0.5em 0 0.5em 0;
    vertical-align:middle;
}
    h2.cart img{
        margin:-0.4em 0.1em 0 0;
        vertical-align:middle;
    }
	h2.cart i.material-icons { margin-right:8px; color:#000; vertical-align:middle;}


h3.cart{
    position: relative;
    /*display: inline-block;*/
    padding: 0;
    margin:1.0em 0 1.0em 0;
}

.list-area{
    padding:0;
    overflow-y: auto;
    height: 90% !important;
}

/*.cart_list{ display: none;}*/

/* search & result ------------------ */

h2.search{
    font-size:1.5em;
    padding:0 0 0 0.5em;
    margin:0 0 0.5em 0;
    border-left:5px solid #222;
}

.search-area,.search-result-area{
    padding:1.0em 0;
}
    .search-area table{
        width:100%;
        border-collapse:collapse;
        border-top:none;
        border-right:none;
        margin:0 auto;
        
    }

    .search-area th{
            width:25%;
            font-weight:bold;
            padding:1.0em 1.0em 1.0em 0;
            background:none;
            color:#222;
            border-left:none;
            text-align:right;
            vertical-align:middle;
            border-bottom:none;
            box-sizing: border-box;
        }
        .search-area td{
            width:75%;
            padding:1.0em;
            border-left:none;
            border-bottom:none;
            text-align:left;
            vertical-align:middle;
            box-sizing: border-box;
        }
        .search-area td span+span{ margin-left: 40px;}
            .search-area td input{
                width:100%;
                box-sizing:border-box;
            }
            .search-area td select {
                /*margin-left: 40px;*/
                padding:5px 10px;
                width: 100%;
                min-width:170px;
                border:1px solid #888;
                border-radius: 3px;
                position: relative;
            }


    .search-result-area .scroll-box{
        width:100%;
        height:100px;
        border:1px solid #555;
        margin:0 auto;
        overflow:hidden;
        overflow-y:visible;
        height: 100px;
    }

    .search-result-area table{
        width:100%;
        border-collapse:collapse;
        border-top:none;
        border-right:1px solid #555;
        margin:0 auto;
        height: 100px;
        border-left: 1px solid #555;
        margin-left: 1px;
    }
        .search-result-area th{
            width:15%;
            font-weight:bold;
            padding:0.5em;
            background:none;
            color:#222;
            border-left:none;
            border-right:1px solid #555;
            border-bottom:1px solid #555;
            text-align:center;
            vertical-align:middle;
            box-sizing: border-box;

        }
        .search-result-area th.last{
            width: 55%;
            padding: 0;
            border-bottom:none;
            border-right:none;

        }

         /* .search-result-area th table{ border-right: none!important;} */
        .search-result-area th:last-child th:nth-child(1){ width: 30%; border-bottom: none;}
        .search-result-area th:last-child th:nth-child(2){
            width: 70%;
            border-bottom: none;
            padding:0.5em 1.0em;
            text-align: left!important;
            border-right: none!important;
}


        .search-result-area td{
            width:15%;
            padding:1.0em;
            border-left:none;
            border-right:1px solid #555;
            border-top:1px solid #555;
            border-bottom:none;
            text-align:center;
            vertical-align:middle;
        }
       .search-result-area td.se_t{
           width: 55%;
          padding:0;
        }

        .search-result-area td p,
        .searchSmartPhoneLastCol li{ padding: 0.25em 0 0.25em 90px; margin: 0; position: relative;text-align: left; }

        .search-result-area td p span,
        .searchSmartPhoneLastCol li span {
            display:inline-block;
            position: absolute;
            top: 0.5em;
            left: 0;
            padding: 2px 0px;
            width: 80px;
            font-size: 12px;
            color: #fff;
            text-align: center;
            background: #222;
        }

/* .search-result-area td table{ border-right: none!important;}  */

.search-result-area td td{ border-top: none!important;  }
.search-result-area td td:nth-child(1){ width: 30%; border-right: none!important; }
.search-result-area td td:nth-child(2){ width: 70%; border-left: 1px solid #555; text-align: left!important; border-right: none;}

/* chrome opera */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {

    
    .search-result-area th table{ border-right: 1px solid #FFF!important;}
    .search-result-area td table{ border-right: 1px solid #FFF!important;}
    
    }


/********** btn *************/
.btn-area { text-align:center; padding:0.0em;}
.btn-area .btn { margin:5px 0; display:inline-block;}
.btn-area .btn a {
	margin:2px 4px;
	padding:8px 16px;
	border-radius:3px;
	vertical-align:middle;
}

.btn-area .btn a { background-color:#e50012!important; color: #fff!important; border-color:#e50012 !important;}
.btn-area .btn a:hover,
.btn-area .btn a:active,
.btn-area .btn a:focus { background-color: #222 !important; border-color:#222 !important; text-decoration: none; }
.btn-area .btn i.material-icons { margin-right:0.4em; color:#FFF !important;}
.btn-area .btn a:active i.material-icons,
.btn-area .btn a:focus i.material-icons { background-color: #222 !important; border-color:#222 !important; }

button.btn {margin:0 4px; padding:8px 16px; background-color:#e50012!important; color: #fff!important; border:1px solid #e50012!important; box-shadow: none !important;}
button.btn:hover,
button.btn:active,
button.btn:focus { background-color: #222 !important; border-color:#222 !important; }

.cart-btn .btn a { margin: 0; padding:10px 20px; }
button.btn-primary {
    width: 40px;
    text-align: center;
    margin: 0 4px;
    padding:8px;
    border-radius:3px;
    line-height: 1.0;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 5px;
}

.cloce_btn { position: absolute; top:15px; right:20px;}
.cloce_btn a { 
	display: block;
    padding:8px 16px;
    border-radius:3px;
    vertical-align:middle;
    background:#eee;
}

.closebtn {
    padding:8px 16px;
    border-radius:3px;
    vertical-align:middle;
    background:#eee;
    color: #000 !important;
    float: right;
    margin: 8px;
}


.delete_all_btn { position: absolute; top:15px; right:65px;}
.delete_all_btn a { 
	display: block;
    padding:8px 16px;
    border-radius:3px;
    vertical-align:middle;
    background:#e50012;
    margin-right: 20px;
    color: #fff;
}
.delete_all_btn a:hover {
    color: white;
    text-decoration: none;
    background-color: #555;
}


/*.btn-area .btn a.green{
            border:1px solid #e50012;
            background:#e50012;
            color:#FFF;
        }*/

        /*.btn-area .btn a.orange{
            border:1px solid #FFF;
            background:#F7931E;
            color:#FFF;
        }
        .btn-area .btn a.white{
            border:1px solid #F7931E;
            background:#FFF;
            color:#222;
        }*/
        .btn-area .btn a.search{
            border:1px solid #e50012;
            background:#e50012;
            color:#FFF;
            letter-spacing:0.5em;
        }
		.btn-area .btn a.search img{
                margin-top:-0.4em;
                margin-right:0.7em;
         }
        .btn-area .btn a.return{
            border:1px solid #e50012;
            background:#e50012;
            color:#FFF;
            letter-spacing:0.5em;
        }
        .btn-area .btn a.return img{
                margin-top:-0.4em;
                margin-right:0.7em;
         }


/*********** other ***********/
.attention{color:#e50012;}
.red{color:#e50012;font-weight:bold;}











/* 768px -------------------------*/
@media screen and (max-width: 1024px) {
    
    .search-box{
        margin-left:30px;
        margin-right:30px;
    }
    .button-area .more{
        width:80%;
        padding-top:12px;
        line-height:1.3em;
    }
    .button-area .more .caption{
        display:block;
        letter-spacing:0.2em;
    }
    .button-area .more .icon{
        padding-left:15px;
        padding-right:20px;
    }
    .results-box .box{
        width:47.5%;
        padding:15px 10px;
        margin:0 5% 5% 0;
        background:#FFF;
    }
    .results-box .box:nth-child(3n){
        margin:0 5% 5% 0;
    }
    .results-box .box:nth-child(2n){
        margin:0 0 5% 0;
    }
    .list-area{
    padding:0 0.7em;
	}
}