@charset "utf-8";
/*-- headerBox01 --*/

header#header .headerBox01{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 750px;
}

header#header nav #gNavi{
clear:both;
width:100%;
}

header#header nav #gNavi li{
    position: relative;
    display: inline-block;
    width: 17%;
    line-height: 67px;
    vertical-align: bottom;
    box-sizing: border-box;
}
header#header nav #gNavi li:last-child{
border-right: none;
}
header#header nav #gNavi li a{
    display:block;
    width:100%;
    color:#333;
    text-align:center;
    box-sizing:border-box;
    text-decoration:none;
    font-size: 16px;
}
header#header nav #gNavi li.gNavi_shop{
    width:28%!important;
    line-height: 30px;
    margin-bottom: 15px;
}
header#header nav #gNavi li.gNavi_shop a{
    background: #eb0000;
    color: #fff!important;
    padding: 5px;
    text-align: center;
    box-sizing: border-box;
    border-radius:20px;
}
header#header nav #gNavi li.gNavi_shop a img{
    position: relative;
    top: 3px;
    max-width: 22px;
    margin-right: 10px;
}
header#header nav #gNavi li a:hover{
    border-bottom: 5px solid #eb0000;
    color: #eb0000;
    position: relative;
    vertical-align: top;
    bottom: -5px;
}
header#header nav #gNavi li.gNavi_shop a:hover{
    border-bottom: none;
    margin-bottom: 5px;
}
header#header nav #gNavi li.active{
    border-bottom: 5px solid #eb0000;
    bottom: -5px;
}

header#header .headerBox02{
position: absolute;
top: 0;
right: 0;
width: 27%;
}

header#header .headerBox02 a.headerBtn01,
header#header .headerBox02 a.headerBtn02{
    width: 100%;
    max-width: 220px;
    display: block;
    height: 44px;
    line-height: 44px;
    margin-left: auto;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
}
header#header .headerBox02 a.headerBtn01{
    background: #E1E1E1 url(../images/ico_01.png) no-repeat 10% 5px;
    color: #333;
    padding-left: 3%;
}

header#header .headerBox02 a.headerBtn02{
    background: #383838 url(../images/ico_02.png) no-repeat 10% 5px;
    color: #fff;
    padding-left: 25px;
}

/*-- subNavi --*/
header#header nav #gNavi li span.subNavi{
    display:block;
    width:100%;
    text-align: center;
}

header#header nav #gNavi li span.subNavi,
header#header nav #gNavi li span.subNavi:after {
    display:block;
    content:"";
}
header#header nav #gNavi li span.subNavi:hover{
    cursor:pointer;
/*    border-bottom: 5px solid #eb0000;*/
    color: #eb0000;
    position: relative;
    vertical-align: top;
    bottom: 0;
}

/* メニューが開いた時 */
header#header nav #gNavi .open{

}
header#header nav #gNavi li ul{
display:none;
position: absolute;
z-index: 10;
width: 100%;
}
header#header nav #gNavi li ul{
    min-width:210px;
    width: 100%;
/*    margin-top: 5px;*/
    border-top: 5px solid #eb0000;
}
header#header nav #gNavi li li{
    width:100%;
    float:none;
    background: rgba(255,255,255,0.80);
/*    font-size: 12px;*/
    line-height: 40px;
/*    line-height: 2.4em;*/
    vertical-align: middle;
    display: block;
}
header#header nav #gNavi li li a{
    color: #333;
    font-size: 12px;
    padding: 0 0 0 20px;
    text-decoration: none;
    text-align:left;
}
header#header nav #gNavi li li a:hover{
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    background: rgba(25,25,25,0.10);
    color: #333;
    border-bottom: none;
    bottom: 0;
    position: relative;
}
/*
header#header nav #gNavi li .subtoggle{
    line-height: 40px;
}
*/
header#header nav #gNavi li li:before{
    content: "";
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 1px #eb0000;
    border-right: solid 1px #eb0000;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 5px;
    margin-top: -4px;
    margin-right: 5px;
}


#header{
/*
display:none;
*/
}


/*-- toggle --*/

#menu,
#menu li,
#toggle{ 
display: none; /* 非表示 */
}

@media screen and (max-width:1024px) {

header#header nav #gNavi{
display:none; /* PC用非表示 */
}

header#header{
    position: absolute;
    display: block!important;
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1.0!important;
    opacity: 1.0!important;
    position: fixed;
}
header #headerInner{
    height: 60px;
    border-bottom: 5px solid #dcdcdc;
}

header#header .headerBox01{
    width: 100%;
    top: 0px;
    position:static;
}

/*-- .headerBox02 --*/
.headerBox02{
    display:none;
}


/*-- #toggle --*/

#toggle{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: #eb0000;
    height: 60px;
}

#toggle a {
    display: block;
    position: relative;
    width: 60px;
    height: 60px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#toggle a:after {
    content: "";
    background: url(../images/toggle_btn.png) no-repeat 0 0 /contain;
    width: 44px;
    height: 30px;
    display: inline-block;
    position: absolute;
    top: 15px;
    right: 7px;
}


/*-- #menu --*/

#menu{
    display:none; /* 非表示 */
    position: fixed;
    top: 70px;
    left: 0;
    bottom: 0;
    width: 100%;
/*    max-height: 450px;*/
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
/*    overflow: visible;*/
    z-index: 9999;
    background: rgba(255,255,255,0.95);
    padding-bottom: 35px;
    border-bottom: 1px solid #dadada;
}

#menu li{
    display:block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8%;
}
    .mt20{
        margin-top: 20px;
    }

#menu li.gNaviShop a{
    border-bottom: none;
    background: #eb0000;
    color: #fff!important;
    padding: 5px;
    text-align: center;
    border-radius:20px;
    margin-top: 20px;
    box-sizing: border-box;
}
#menu li.gNaviShop a img{
    position: relative;
    top: 3px;
    max-width: 22px;
    margin-right: 10px;
}



    
#menu li span,
#menu li span.subNavi{
    display:block;
    padding: 10px 2px 0 2px;
    font-weight: bold;
    font-size: 16px;
}

#menu li ul li{
    font-weight:bold;
    padding: 0 0 0 1.5em;
    position: relative;
}
#menu li ul li:before{
    content: "";
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 1px #eb0000;
    border-right: solid 1px #eb0000;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 5px;
    margin-top: -4px;
    margin-right: 5px;
}

#menu li ul li.subNavi02{
padding: 0 0 0 4em;
}

#menu li:first-child{
/*    border-top: 2px solid #DDDDDD;*/
}

#menu li a{
    position: relative;
    display: block;
    width: 100%;
    padding: 10px 0;
/*    border-bottom: 1px solid #909090;*/
    text-align: left;
    text-decoration: none;
    color: #000;
    box-sizing: border-box;
}

#menu li a:hover{
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

/*
#menu li a:after{
content: "";
position: absolute;
right: 5px;
top: 19px;
display: inline-block;
width: 6px;
height: 6px;
border-top: 2px solid #909090;
border-right: 2px solid #909090;
transform: rotate(45deg);
}
*/

#menu > li > a,
#menu > li > div > a{
font-weight: bold;
}

#menu .btnMenu {
margin-top: 16px;
}
#menu .btnMenu li{
margin-bottom: 2px;
padding: 8px 0;
text-align: center;
}
#menu .btnMenu li a{
border-bottom: none;
text-align: center;
font-weight: bold;
}

#menu .btnMenu li a:after{content: none;}
#menu .btnMenu .btnMenu01{background: #a70707;}
#menu .btnMenu .btnMenu01 a{color: #FFF;}
#menu .btnMenu .btnMenu02{background: #e4e4e4;}
#menu .btnMenu .btnMenu01 a{acolor: #333;}


/*-- subToggle --*/

#menu li a.close{background:#F5F5F5 url(../images/toggle_on.png) 95% 50% no-repeat;}  /* クリック前 */
#menu li a.open {background:#F5F5F5 url(../images/toggle_off.png) 95% 50% no-repeat; color:#EB6000;} /* クリック後 */

#menu li div{
position: relative;
}
#menu li div a::before{
content: "";
position: absolute;
top: 10px;
right: 6px;
display: block;
width: 17px;
height: 17px;
background: #CCCCCC;
}
#menu li div a::after{
content: "";
position: absolute;
top: 13px;
right: 10px;
display: block;
width: 6px;
height: 6px;
border-top: 2px solid #F5F5F5;
border-right: 2px solid #F5F5F5;
transform: rotate(135deg);
}

#menu li div a.open::before{
background: #EB6000;
}
#menu li div a.open::after{
top: 17px;
transform: rotate(-45deg);
}


/*-- subMenu --*/

#menu li ul#subMenu{
display:none;
border-top:1px solid #FFFFFF;
}

#menu li ul#subMenu li{
border:none;
}

#menu li ul#subMenu li a{
position: relative;
padding: 7px 56px;
background:#EAEAEA;
}

#menu li ul#subMenu li:not(:first-child) a{
border-top: 1px solid #FFFFFF;
}

#menu li ul#subMenu li a:hover{
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

#menu li ul#subMenu li a::before{
content: "";
position: absolute;
top: 15px;
right: 12px;
display: block;
width: 5px;
height: 5px;
border-top: 3px solid #CCCCCC;
border-right: 3px solid #CCCCCC;
transform: rotate(45deg);

}

#menu li ul#subMenu li img{
width:15px;
height:13px;
padding-left:10px;
}

}