/*!
 * TEMP： Shiro8AccordionCategory3
 * ECCUBE：v3.x
 * CSS Information： category_block
 */

/* ---------------------------------------------------------
** #category_block / Place：header side drawer
----------------------------------------------------------- */
/* 階層ごとの実装class

** 子カテゴリ  …ul.child-1
** 孫カテゴリ  …ul.child-2
** ひ孫カテゴリ…ul.child-3
*/
/* commmon
----------------------------------------------------*/
.side{
    font-family: "Roboto", "游ゴシック", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Arial", "メイリオ", "Meiryo", sans-serif;
}
#category_block {
    border-left: none;
    border-right: none ;

    padding:0;
    clear:both;
    position:relative;
    margin-bottom:15px;

    /*box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);*/
    /*!*border-bottom: solid 3px #627295;*!*/
    /*border-radius: 3px;*/
    /*font-weight: bold;*/
    /*text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);*/

}
#category_block .category-nav a {/*ここは第一階層*/
    color:#5a5a5a;

    text-align: left;

    display: inline-block;
    /*padding: 1em 1em;*/
    text-decoration: none;
    /*background: #668ad8;!*ボタン色*!*/
    /*color: #4868ad;!*ボタン色より暗く*!*/
    font-weight: bold;
    font-size:12px;
    font-size:1.2rem;
    /*-webkit-font-smoothing:antialiased;*/
    /*-moz-osx-font-smoothing:grayscale;*/
    position:relative;
}
.category-nav a:link,
.category-nav a:visited,
.category-nav a:active {
    color:#333;
    text-decoration:none;
}
.category-nav a:hover {
    /*color:#666;*/
    /*background:rgba(204, 204, 204, 0.2);*/
    background-image: -webkit-radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), -webkit-radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
    background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%);
    background-blend-mode: screen;
}
/*今いるカテゴリ*/
.category-nav li.open a.now:link,
.category-nav li.open a.now:visited,
.category-nav li.open a.now:active {
    color:#DC3000!important;
}
.category-nav li.open a.now:hover {
    color:#F60!important;
}
.front_page .category-nav li.open a.now:link,
.front_page .category-nav li.open a.now:visited,
.front_page .category-nav li.open a.now:active {
    color:#333!important;
    font-weight:500;
}
/* in header
----------------------------------------------------*/
/* ※カテゴリをヘッダー置きの場合は、本体(テンプレート)のCSS。 */


/* in side
----------------------------------------------------*/
.side #category_block {
    position:relative;
    margin:0 0 15px;
    padding:0;
    clear:both;
}
.side ul.category-nav {
    padding:0;
    margin:0;
    text-align:left;
    background:#FFF;
    border-bottom:#CCC dotted 0.5px;
    /*border-left:#CCC solid 1px;*/
    /*border-right:#CCC solid 1px;*/
}
.side ul:after,.side ul:before{
    margin:0;
    padding:0;
}
.side ul.category-nav li{
    margin:0;
    padding:0;
    height:auto;
    display:block;
    position:relative;
}
.side .category-nav li a {
    color:inherit;
    height:auto;
    line-height:1.0;
    white-space:normal;
    display:block;
    position:relative;
    padding:12px 35px 12px 10px;
}
/*親*/
.side .category-nav > li > a{
    width:100%;
    font-size:12px;
    font-size:1.2rem;
    font-weight:bold;
    /*min-height:45px;*/
    display:block;
    border-top:0.5px dotted #CCC;
}
.side .category-nav > li > a.has-child.active{
    border-top:0.5px dotted #CCC;
}
/*子以下*/
.side .category-nav ul li > a{
    width:100%;
    font-size:12px;
    font-size:1.1rem !important;
    font-weight:normal;
    padding:12px 35px 12px 10px;
    border-top:0.5px dotted rgba(0, 0, 0, 0.18);
    border-bottom:0;

    /*border-bottom:0.5px dotted rgba(0, 0, 0, 0.18);*/
}

/*.side .category-nav ul li > a{*/
    /*border-bottom:0.5px dotted rgba(0, 0, 0, 0.18);*/
/*}*/

/*ここがちゃんと効いている*/
/*.side .category-nav ul.child-1 li:last-child{*/
    /*border-bottom:0.5px dotted rgba(0, 0, 0, 0.18);*/
/*}*/

/*子*/
.side .category-nav ul.child-1 a{
    width:100%;
    min-height:40px;
    font-size:12px;
    font-size:1.2rem;
    font-weight:normal;
    /*border-bottom:0.5px dotted rgba(0, 0, 0, 0.18);*/
}
 /*ここが改変したところ*/
/*.side .category-nav ul.child-1 a.has-child:nth-last-child(1){*/
    /*border-bottom: 0.5px dotted #e38d13;*/
/*}*/
/*.side .category-nav ul.child-1 a.has-child:nth-last-child(1){*/
    /*border-bottom: 0.5px dotted #e38d13;*/
/*}*/


/*孫*/
.side .category-nav ul.child-2 a{
    padding-left:10px;
}


/*孫以下*/
.side .category-nav ul li li > a:before{
    content:"L";
    font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
    font-size:10px;
    color:#CCC;
    position:relative;
    top:-5px;
    left:7px;/*元は3px*/
    padding-right:8px;
}

/*これで子供以下になるか実験*/
.side .category-nav ul li a:before{
    content:"L";
    font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
    font-size:10px;
    color:#CCC;
    position:relative;
    top:-5px;
    left:0px;
    padding-right:8px;
}



/*ひ孫*/
.side .category-nav ul.child-3 a{
    width:100%;
    min-height:25px;
    font-size:12px;
    font-size:1.2rem;
    font-weight:normal;
    padding-left:15px;
}
.side .category-nav li a:hover:after{
    color:#09C;
}
/*.side #category_block ul.category-nav ul.child-1 li:first-child > a{*/
    /*border-top:1px solid #e1e1e1;!*元々は#CCC*!*/
/*}*/
/*.side #category_block ul.category-nav ul.child-1 li li:first-child > a{*/
    /*border-top:1px dotted #e1e1e1;!*元々は#CCC*!*/
/*}*/
/********* アコーディオンボタン ***********/
.side .category-nav > li a span{
    width:17px;
    height:100%;
    display:inline-block;
    position:absolute;
    right: 0;
    top:0;
    float:right;
    z-index:10;
    background:url(../img/common/ico_cat.png) 3px center no-repeat;
    background-size:5px;
}
.side .category-nav > li a.has-child span{
    width:30px;/*元々は35px*/
    height:100%;
    background:url(../img/common/plus.svg) 7px center no-repeat;
    background-size:20px;
}
/*!*曽田がボーダーラインを引くためだけに用意*!*/
/*.side .category-nav ul.child-1 a{*/
    /*border-bottom:#CCC dotted 1px;*/
/*}*/
.side .category-nav > li a.has-child.active span{
    width:30px;
    height:100%;
    /*background:url(../img/common/ico_open.png) 7px center no-repeat;*/
    background:url(../img/common/minus.svg) 7px center no-repeat;
    background-size:20px;
}
/* in drawer
----------------------------------------------------*/

#drawer ul.category-nav {
    padding:0;
    margin:0 8px 15px;
    text-align:left;
    background:#FFF;
    border-bottom:#CCC solid 1px;
    display:block;
    position:relative;
    overflow:hidden;
}
#drawer ul:after,#drawer ul:before{
    margin:0;
    padding:0;
}
#drawer .category-nav li a {
    color:inherit;
    height:auto;
    line-height:1.2;
    margin:0;
    padding:12px 35px 12px 10px;
    vertical-align:top;
    white-space:normal;
    display:block;
    position:relative;
}
/*親*/
#drawer .category-nav > li > a {
    min-height:30px;/*40*/
    display:block;
    font-weight:bold;
    border-top:1px solid #CCC;
    background:#F0F0F0;
}
/*子以下*/
#drawer .category-nav ul li > a{
    width:100%;
    min-height:35px;
    font-weight:bold;
    border-top:1px dotted #DDD;
    border-bottom:0;
    padding-left:10px;
}
/*子*/
#drawer .category-nav ul.child-1 a{
    width:100%;
    font-size:12px;
    font-size:1.2rem;
}
/*孫*/
#drawer .category-nav ul.child-2 a{
    font-size:12px;
    font-size:1.2rem;
    padding-left:15px;
}
/*ひ孫*/
#drawer .category-nav ul.child-3 a{
    width:100%;
    padding-left:25px;
}
/*ここがボーダーラインのところ*/
#drawer ul.category-nav ul.child-1 li:first-child > a{
    border-top:1px solid #CCC;
}
#drawer ul.category-nav ul.child-1 li li:first-child > a{
    border-top:1px dotted #CCC;
}

/*#drawer ul.category-nav ul.child-1 li li:first-child > a{*/
    /*border-bottom:1px dotted #e38d13;*/
/*}*/

/********* アコーディオンボタン ***********/
#drawer .category-nav > li a span{
    width:15px;
    height:100%;
    display:inline-block;
    position:absolute;
    right:0;
    top:0;
    float:right;
    z-index:10;
    /*background:url(../img/common/ico_cat.png) 0 center no-repeat;*/
    background:url(../img/common/ico_cat.png) 3px center no-repeat;
    /*background-size:3px;*/
    background-size:8px;
}
#drawer .category-nav > li a.has-child span{
    /*width:35px;*/
    width:35px;
    height:100%;
    background:url(../img/common/plus.svg) 7px center no-repeat;
    background-size:20px;
}
#drawer .category-nav > li a.has-child.active span{
    width:35px;
    height:100%;
    background:url(../img/common/minus.svg) 7px center no-repeat;
    background-size:20px;
}

/*ここからドロワーのCSSの直し*/

/* in side
----------------------------------------------------*/
.drawer #category_block {
    position:relative;
    margin:0 0 15px;
    padding:0;
    clear:both;
}
.side ul.category-nav {
    padding:0;
    margin:0;
    text-align:left;
    background:#FFF;
    border-bottom:#CCC dotted 0.5px;
    /*border-left:#CCC solid 1px;*/
    /*border-right:#CCC solid 1px;*/
}
.drawer ul:after,.drawer ul:before{
    margin:0;
    padding:0;
}
.drawer ul.category-nav li{
    margin:0;
    padding:0;
    height:auto;
    display:block;
    position:relative;
}
.drawer .category-nav li a {
    color:inherit;
    height:auto;
    line-height:1.0;
    white-space:normal;
    display:block;
    position:relative;
    padding:12px 35px 12px 10px;
}
/*親*/
.drawer .category-nav > li > a{
    width:100%;
    font-size:12px;
    font-size:1.2rem;
    font-weight:bold;
    /*min-height:45px;*/
    display:block;
    border-top:0.5px dotted #CCC;
}
.drawer .category-nav > li > a.has-child.active{
    border-top:0.5px dotted #CCC;
}
/*子以下*/
.drawer .category-nav ul li > a{
    width:100%;
    font-size:12px;
    font-size:1.2rem;
    font-weight:bold;
    padding:12px 35px 12px 10px;
    border-top:0.5px dotted rgba(0, 0, 0, 0.18);
    border-bottom:0;

    /*border-bottom:0.5px dotted rgba(0, 0, 0, 0.18);*/
}

/*.side .category-nav ul li > a{*/
/*border-bottom:0.5px dotted rgba(0, 0, 0, 0.18);*/
/*}*/

/*ここがちゃんと効いている*/
/*.side .category-nav ul.child-1 li:last-child{*/
/*border-bottom:0.5px dotted rgba(0, 0, 0, 0.18);*/
/*}*/

/*子*/
.drawer .category-nav ul.child-1 a{
    width:100%;
    min-height:40px;
    font-size:12px;
    font-size:1.2rem;
    font-weight:normal;
    /*border-bottom:0.5px dotted rgba(0, 0, 0, 0.18);*/
}
/*ここが改変したところ*/
/*.side .category-nav ul.child-1 a.has-child:nth-last-child(1){*/
/*border-bottom: 0.5px dotted #e38d13;*/
/*}*/
/*.side .category-nav ul.child-1 a.has-child:nth-last-child(1){*/
/*border-bottom: 0.5px dotted #e38d13;*/
/*}*/


/*孫*/
.drawer .category-nav ul.child-2 a{
    padding-left:10px;
}


/*孫以下*/
.drawer .category-nav ul li li > a:before{
    content:"L";
    font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
    font-size:10px;
    color:#CCC;
    position:relative;
    top:-5px;
    left:7px;/*元は3px*/
    padding-right:8px;
}

/*これで子供以下になるか実験*/
.drawer .category-nav ul li a:before{
    content:"L";
    font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
    font-size:10px;
    color:#CCC;
    position:relative;
    top:-5px;
    left:0px;
    padding-right:8px;
}



/*ひ孫*/
.drawer .category-nav ul.child-3 a{
    width:100%;
    min-height:25px;
    font-size:12px;
    font-size:1.2rem;
    font-weight:normal;
    padding-left:15px;
}
.drawer .category-nav li a:hover:after {
    color: #09C;
}
/*ここまでがドロワーのCSSの直し*/