/** Demo CSS **/
@charset "utf-8";
:root{
    --container-width:1500px;
    --color-theme1:#213857;;
    --color-theme1x:#ddd;
}
@keyframes apeal01{
    0%{
        left:0;
        top:0;
        opacity:0;
    }
    25%{
        opacity:0.5;
    }
    50%{transform:rotate(0deg);}
    55%{transform:rotate(-10deg);}
    60%{transform:rotate(7deg);}
    65%{transform:rotate(-3deg);}
    70%{transform:rotate(3deg);}
    100%{
        left:0;
        top:0;
        opacity:1;
    }
}
body{
    font-size:14px;
    background-color:#f5f5f5;
    font-family: "Zen Kaku Gothic New", serif;
}
div#wrapper{
    margin:0 auto;
}
header#header{
    background-color:#fff;
}
header#header > div.contents-wrapper{
}
header#header div.sc.newslist{
    background-color:#c00;
    div.entry-text{
        max-width:var(--container-width);
        margin:0 auto;
        color:#fff;
        a{
            color:inherit;
        }
    }
}
header#header div#global-header{
    max-width:var(--container-width);
    margin:0 auto;
    padding:1rem;
    a{
        text-decoration:none;
        color:inherit;
    }
    display:flex;
    div#main-logo{
        width:300px;
        text-align:center;
        div.symbol{
            font-size:32px;
            font-family: "Sawarabi Mincho", serif;
        }
        div.sub{
            display:flex;
            flex-wrap:wrap;
            justify-content:center;
            div{
                font-size:0.85rem;
                padding:0.1em 0.25em;
                border-radius:0.25rem;
                color:#888;
            }
            div.c1{
                background-color:#f93;
                color:#fff;
            }
        }
    }
    div.contents{
        display:flex;
        width:100%;
        ul.badge{
            display:flex;
            margin:0 4em;
            width:600px;
            li{
                border-right:2px solid #ddd;
                flex:1;
                display:flex;
                justify-content:center;
                align-items:center;
                text-align:center;
                img{
                    display:block;
                    height:3em;
                    text-align:center;
                    margin:0 auto 0.5rem;
                    filter:brightness(0.6);
                }
                strong{
                    color:red;
                }
            }
        }
        div.control{
            margin-left:auto;
            text-align:right;
            div.greeting{
                span.verify-progress{
                    font-size:0.8em;
                    display:inline-block;
                    background-color:#344a88;
                    color:gold;
                    padding:0.2em 0.5em;
                    border-radius:3px;
                    box-shadow:1px 2px 4px rgba(0,0,0,0.15);
                }
                span.badge{
                    font-size:0.8em;
                    display:inline-block;
                    background-color:#344a88;
                    color:gold;
                    padding:0.2em 0.5em;
                    border-radius:3px;
                    box-shadow:1px 2px 4px rgba(0,0,0,0.15);
                }
                span.badge:before{
                    content:"👑";
                    position:relative;
                    top:-2px;
                }
                span.unregistered{
                    position:relative;
                    display:inline-block;
                    width:12em;
                    height:1em;
                    a{
                        display:inline-block;
                        background-color:#069ad0;
                        padding:0 0.5rem;
                        border-radius:4px;
                        color:#fff;
                        position:absolute;
                        top:0;
                        left:0;
                        animation-name:apeal01;
                        animation-delay:7s;
                        animation-duration:2s;
                        animation-iteration-count:1;
                    }
                }
            }
            div.gh-menu {
                ul{
                    display:flex;
                    justify-content:right;
                    li{
                        padding:0.25rem 0rem;
                        margin-left:1em;
                    }
                }
                ul.main li{
                    font-size:1.5rem;
                }
            }
        }
    }
}
nav#nav{
    background:linear-gradient(#e5e5e5,#eee,#e0e0e0);
    border-top:1px solid #ddd;
    border-bottom:1px solid #ccc;
    box-shadow:0 0 4px rgba(0,0,0,0.1);
    div.contents-wrapper{
        max-width:var(--container-width);
    }
    ul#nav-category{
        display:flex;
        position:relative;
        > li{
            flex:1;
            padding:1rem;
            text-align:center;
            font-size:1.2rem;
            position:relative;
        }
        ul.sub-category{
            display:none;
            position:absolute;
            top:3em;
            left:0;
            z-index:100;
            background-color:rgba(0,0,30,0.8);
            border-radius:4px;
            color:#222;
            box-shadow:1px 2px 6px rgba(0,0,0,0.2);
            a{
                color:inherit;
            }
            li{
                width:30em;
                padding:0.5rem;
                a{
                    text-decoration:none;
                    display:flex;
                    align-items:center;
                    background-color:#fff;
                    padding:0.5em 1em;
                    border-radius:0.25em;
                }
                img{
                    max-width:10rem;
                    display:block;
                    text-align:center;
                }
                span.text{
                    text-align:left;
                    span.desc{
                        font-size:1rem;
                        display:block;
                    }
                }
                span.count{
                    display:inline-block;
                    background-color:#fff;
                    border-radius:50%;
                    width:1.5rem;
                    height:1.5rem;
                    margin-left:1rem;
                    color:#000;
                    line-height:1.5rem;
                    font-family:Arial;
                }
            }
        }
        > li:hover ul.sub-category{
            display:block;
        }
        > li:last-child:hover ul.sub-category{
            left:auto;
            right:0;
        }
    }
}
div#outer{
    max-width:var(--container-width);
    background-color:#fff;
}
body.itemlist div#outer{
    display:flex;
    aside#site_aside1{
        flex:1;
        padding:1rem;
    }
    div#mid{
        flex:4;
    }
}
div.breadcrumbs{
    padding:1rem 0;
}
div.dummy-contents{
    background-color:var(--color-theme1);
    color:var(--color-theme1x);
    text-align:center;
    display:flex;
    align-items:center;
    > p{
        width:100%;
        padding:2em;
        display:block;
        border:2px solid var(--color-theme1x);
        margin:0.25rem;
        span.sub{
            display:block;
            font-size:0.8em;
        }
    }
}
article#container{
    div.dummy-contents{
        font-size:4em;
    }
    div.dummy-contents.top-main1{
        background-color:var(--color-theme1);
        background-image:url(./img/dummy/dummy-contents1.png);
        background-size:80%;
        background-blend-mode:overlay;
    }
}
footer#footer{
    background-color:#213857;
    color:#fff;
    a{
        color:inherit;
    }
    padding:2rem;
}
div#global-footer{
    ul.footer-contents{
        display:flex;
        > li{
            flex:1;
            margin:1rem;
            padding:4rem;
        }
    }
    div.dummy-contents{
        font-size:2rem;
    }
}
div.sc.item-search-filter{
    background-color:#f5f5f5;
    padding:1rem;
    line-height:2em;
    span.badge:after{
        content:"件";
    }
}
div.item-custom-fields{
    padding:4rem;
    > div.wrapper{
        display:flex;
        div.cf{
            flex:1;
            margin:1rem;
            div.cf-files{
                justify-content:center;
                div.file-link{
                    background-color:var(--color-theme1);
                    padding:1rem;
                    border-radius:0.25rem;
                    a{
                        color:#fff;
                        font-weight:bold;
                        text-decoration:none;
                    }
                }
            }
        }
    }
}
a.activate-item-search:before{
   content:"";
   background-image:url("./img/icon/zoom.png");
   background-blend-mode:difference;
   background-repeat:no-repeat;
   background-size:contain;
   width:1em;
   height:1em;
   display:inline-block;
    vertical-align:middle;
    margin-right:0.25em;
}
div.itemSearchPanel{
    display:none;
    position:fixed;
    z-index:100;
    width:80%;
    overflow-y:scroll;
    top:5%;
    bottom:5%;
    left:10%;
    right:0;
    background-color:rgba(0,0,0,0.7);
    padding:2em;
    div.toggler{
        position:absolute;
        top:1rem;
        right:1rem;;
    }
    div.input-submit{
        text-align:center;
        font-size:1.5rem;
        input{
            font-size:inherit;;
            padding:0.5rem 1rem;
            border-radius:1.5rem;
            border-style:none;
        }
        button{
            font-size:inherit;
            padding:0.5rem 2rem;
            margin-left:1rem;
            background-color:#0c0;
            border-style:none;
            border-radius:0.2rem;
            color:#fff;
        }
    }
    div.isc-panel-heading{
        padding:1rem 0;
        font-size:2em;
        text-align:center;
    }
    ul{
        display:flex;
        flex-wrap:wrap;
        li{
            white-space:nowrap;
        }
    }
    div.criteria-group{
        div.isc{
            display:flex;
            div.isc-heading{
                font-size:1.1em;
                padding:1rem;
                width:12em;
            }
            div.isc-body{
                padding:1rem 0em;
                div.itempropkey{
                    padding:1rem;
                }
            }
        }
        div.criteria span.badge{
            display:inline-block;
            background-color:#0c0;
            width:1.5em;
            height:1.5em;
            text-align:center;
            border-radius:50%;
            vertical-align:middle;
            font-size:0.8em;
            color:#fff;
        }
        ul.itempropvals li.itempropval{
            div.criteria{
            }
            div.criteria div.value-note{
                display:inline-block;
                div.color-tip div{
                    height:1em;
                    width:1em;
                }
                div{
                    display:inline-block;
                }
                span.value-label{
                    display:inline-block;
                }
            }
        }
    }
    div.criteria{
        margin:0 1em 1em 0;
        font-size:1.1em;
    }
    div.criteria.on{
        color:#0a0;
        border:1px solid #0a0;
    } 
}
body.top div.sc{
   
    div.panel-heading{
      
        div.description{
            font-size:1.2rem;
            color:#666;
        }
    }
}
body.top div.sc.newslist{
    a{
        color:#039;
        text-shadow:0 0 2px rgba(0,32,127, 0.4);
    }
    div.news-entries div.news-entry{
        border-top:none;
        max-width:1200px;
        margin:0 auto;
        font-size:14px;
        border-top: 1px solid #ccc;
        div.body{
            color:#666;
        }
    }
}
div.sc-display{
    ul.item-display{
        li.item div.thumbnail{
            display:flex;
            flex-direction:column-reverse;
            margin:0 2rem;
            width:200px;
        }
        a{
            color:inherit;
        }
    }
}
div.pdf-viewer{
    background:linear-gradient(#444,#222);
    padding:2em;
    text-align:center;
    color:#ccc;
    font-size:1.2rem;
    button{
        background-color:#444;
        border:1px solid #ccc;
        color:#ccc;
    }
    canvas{
        margin:1em auto;
    }
}
div#item-product-container{
    padding:2rem;
    div#item-contents-image{
        padding:1rem;
    }
    div#item-contents-purchase{
        padding:1rem;
        h1{
            font-size:3rem;
        }
    }
    table.item-purchase-table{
        a{
            color:inherit;
        }
        td.price{
            text-align:center;
            span.price{
                font-size:1.5rem;
            }
            div.stock-message{
                text-align:center;
            }
        }
    }
}
div.category-item-list ul.item-list{
    li.item-list-each{
        justify-content:left;
        div.item-thumbnail-img-wrapper{
            margin:1em;
        }
        div.item-dtl{
            width:auto;
            margin:1em;
        }
    }
}
table.item-detail.item-spec-spec{
    margin:2rem 0;
    th,td{
        text-align:left;
        padding:0.5rem 1rem;
    }
}
div.text-contents.pc-note{
    background-color:#d6d9de;
    color:#213857;
    padding:1em;
    max-width:400px;
    margin-left:auto;
    border-radius:0.25rem;
}
body#news div.news{
    padding:2em;
    div.wl{
        p{
            line-height:2em;
            font-size:1.2rem;
        }
        ol{
            list-style-type:decimal;
            padding:1em 2em;
            font-size:1.2rem;
            line-height:2em;
            li{
                margin-left:1em;;
                list-style-type:auto;
                margin-bottom:1em;
            }
        }
    }
}
div.form{
    div.form-body{
        padding:4em 1em;
        max-width:1000px;
        margin:0 auto;
        div.input-divider{
            margin-bottom:2em;
            div.input-divider-heading{
                font-size:2rem;
                color:var(--color-theme1);
            }
            div.input-divider-body{
                background-color:#f5f5f5;
                padding:1em;
                border-radius:0.5em;
            }
        }
        div.formrow{
            display:block;
            padding:1em;
            div.input-label{
                font-size:1.5rem;
                font-weight:bold;
                padding:0;
            }
            div.input-control{
                padding:0.25em 0;
                font-size:1.25rem;
                display:block;
                div.input-group{
                    label{
                        display:block;
                    }
                }
                div.input-note{
                    color:#0a0;
                    font-size:1rem;
                    padding:0;
                }
            }
        }
        div.formrow-submit button{
            font-size:2rem;
        }
    }
}
/****** Override *******/
div.item-thumbnail-img img{
  box-shadow:none;
}


#container > div > div.sc.category-list.category-list-category.category-list-single > div.list-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#container > div > div.sc.category-list.category-list-food-series.category-list-single > div.list-items {
   display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#container > div > div.sc.category-list.category-list-food-series.category-list-single > div.list-items > div > div.category-icon > a > img{
width: 152px;
}
#header > div > div.sc.newslist.newslist-news > div > div.panel-body{
margin-bottom: 0.1em;
}
.category_outerbox {
    width: 60%;
}
.category_listbox {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: 0;
}
.category_listbox a {
    border: 1px solid #bababa;
 }

.catarog-technology{
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   flex-wrap: wrap; 
   width: 400px;
}

    .itemSearchPanelTabs {
      display: flex;
      cursor: pointer;
    }

    .itemSearchPanelTab  {
      padding: 10px 20px;
      background: #eee;
      margin-right: 2px;
    }

    .itemSearchPanelTab.active {
      background: #ccc;
      font-weight: bold;
    }

    .itemSearchPanelTab-content {
      display: none;
      padding: 15px;
      border: 1px solid #ccc;
      margin-top: 5px;
    }

    .itemSearchPanelTab-content.active {
      display: block;
    }

#container > div > div.category_keywordsearch_box{
  display: flex; 
  gap: 16px;
  align-items: center;
}
.item-search-box{
        width: 250px;
}

/*** category ***/
#category-filter-include div.isc-itemprop div.isc-body {
  display: flex;
}
#category-filter-include div.isc-itemprop div.isc-body div.itemprop {
  flex-grow: 1;
}
#category-filter-include div.item-type-filter, #category-filter-include div.isc-price, #category-filter-include div.item-search-criteria-search-form input[name=Keywords]{
  display: none;
}
#category-filter-include div.isc.isc-subcategory div.isc-body ul {
  display: flex;
}
#category-filter-include div.isc.isc-subcategory div.isc-body ul li {
  flex-grow: 1;
}