@charset "UTF-8";



/*===============================================================

    sidenav

===============================================================*/
.sidenav_wrp {
    position:fixed;
    top:1000px;
    right:-187px;
    width:210px;
    z-index:3;
}
.sidenav {
    position:relative;
    top:0;
    right:0;
    width:210px;
}
.sidenav .tab {
    width:25px;
    height:30px;
    position:absolute;
    top:0;
    left:0;
    background-color:#000;
    background:rgba(0,0,0,0.6);
    border-radius:5px 0 0 5px;
    white-space:nowrap;
    text-indent:100%;
    overflow:hidden;

    box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 5px 3px inset;
    -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 5px 3px inset;
    -moz-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 5px 3px inset;
}
.sidenav .tab a {
    width:25px;
    height:30px;
    display:block;
    background:url(../img/btn_sidenav_open.png) no-repeat 0 0;
}
.active .sidenav .tab a {
    display:block;
    background:url(../img/btn_sidenav_close.png) no-repeat 0 0;
}

/* タブレット以下 */
@media screen and (max-width: 1080px) {
.sidenav_wrp{
    display:none;
}
}    /* for tablet max-width: 940px */

/* SP向けレイアウトの指定：～736px */
@media only screen and (max-width: 736px) {

}    /* for SP max-width: 736px */

/*===============================================================

    .sidenav .body

===============================================================*/
.sidenav .body {
    width:185px;
    position:absolute;
    top:0;
    left:25px;
    background-color:#000;
    background:rgba(0,0,0,0.6);
    border-radius:0 0 0 5px;

    box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
    -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
    -moz-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
    margin:0;
}

/*===============================================================

    sidenav left

===============================================================*/
.sidenav_wrp_left {
    position:fixed;
    top:1000px;
    left:-187px;
    width:210px;
    z-index:3;
}
.sidenav_left {
    position:relative;
    top:0;
    left:0;
    width:210px;
}
.sidenav_left .tab {
    width:25px;
    height:30px;
    position:absolute;
    top:0;
    right:0;
    background-color:#000;
    background:rgba(0,0,0,0.6);
    border-radius:0 5px 5px 0;
    white-space:nowrap;
    text-indent:100%;
    overflow:hidden;

    box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 5px 3px inset;
    -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 5px 3px inset;
    -moz-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 5px 3px inset;
}
.sidenav_left .tab a {
    width:25px;
    height:30px;
    display:block;
    background:url(../img/btn_sidenavleft_open.png) no-repeat 0 0;
}
.active .sidenav_left .tab a {
    display:block;
    background:url(../img/btn_sidenav_close.png) no-repeat 0 0;
}

/* タブレット以下 */
@media screen and (max-width: 1080px) {
.sidenav_wrp_left{
    display:none;
}
}    /* for tablet max-width: 940px */

/* SP向けレイアウトの指定：～736px */
@media only screen and (max-width: 736px) {

}    /* for SP max-width: 736px */

/*===============================================================

    .sidenav .body

===============================================================*/
.sidenav_left .body {
    width:185px;
    position:absolute;
    top:0;
    left:0;
    background-color:#000;
    background:rgba(0,0,0,0.6);
    border-radius:0 0 5px 0;

    box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
    -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
    -moz-box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 3px 3px;
    margin:0;
}