@charset "utf-8";
/*----------------------------------------------------------------
グローバルナビ
-----------------------------------------------------------------*/
nav{
    width:100%;
    padding:0;
    margin:0;
    text-align:center;
    background-image:url(../img/navi_bottomline.jpg);
    background-repeat:repeat-x;
    background-position:bottom;
    font-size:36px;
    display:block;

}
nav ul#gNavi{
    /*width:100%;*/
    width:1000px;
    height:48px;
    box-sizing:border-box;
    margin:0 auto;
    /*padding:37px 0 5px;*/
}
nav li{
    /*width:14%;*/
    height:48px;
    box-sizing:border-box;
    padding-top:4px;
    line-height:1;
    margin:0 1%;
    font-family: 'Play', sans-serif;
    display:inline-block;
    *display: inline;   /*IE用のハック*/
    zoom: 1;            /*IE用の hasLayout を true にするための記述*/
    vertical-align:top;
    position:relative;
}

.navSmallTxt{
    font-size:29px;
}

nav li .naviNew{
/*    bottom:-2px;
    left:-5px;
*/  
    top:-2px;
    left:20px;  
    position:absolute;
    font-size:14px;
    font-weight:bold;
    color:#ed4c72;
    font-family: 'Play', sans-serif;
    font-weight:700;
}

nav li.selected,nav li.selected:hover{
    background-image:url(../img/navi_select.png);
    background-repeat:no-repeat;
    background-position:left center;
    
}
nav li.selected a,nav li.selected a:hover{
    color:#fff;
}

nav li:hover{

}
nav li a{
    width:100%;
    padding-left:20px;
    display:block;
    box-sizing:border-box;
    color:#1574d2;
}
nav li a .navSmallTxt{
    color:#000;
}

nav li:hover{
    background-image:url(../img/navi_hover.png);
    background-repeat:no-repeat;
    background-position:left center;
}

nav li a:hover{
    text-decoration:none;
    color:#1574d2;
}


nav li.non a{
    cursor:default;
    color:#000;
    cursor:default;

}

nav li.non:hover{
    cursor:default;
    background-image:none;
}

nav li.non{
}


/*スマホボタン///////////////////////*/
#smpBtArea{

    display:none;
}

/*----------------------------------------------------------------
max-width: 786px
-----------------------------------------------------------------*/

@media (max-width: 786px) {
    nav li{
        margin:3px 1%;
        display:block;
        color:#fff;
        display:inline-block;
        *display: inline;   /*IE用のハック*/
        zoom: 1;            /*IE用の hasLayout を true にするための記述*/
        vertical-align:top;
    
    }
    
    
    nav ul#gNavi{
        width:100%;
        height:auto;
        padding:5px 0;
        text-align:left;
    }


}

/*----------------------------------------------------------------
max-width: 480px
-----------------------------------------------------------------*/


@media (max-width: 480px) {
    nav{
        position:relative;
        top:0;
        background-image:none;
        border-bottom:3px solid #111;
    }

    nav li{
        height:36px;

        width:50%;
        margin:10px 0;
        box-sizing:border-box;
        display:inline-block;
        *display: inline;   /*IE用のハック*/
        zoom: 1;            /*IE用の hasLayout を true にするための記述*/
        vertical-align:top;
        font-size:30px;
        
        
        
        
    }
    nav li a{
    padding-left:12px;
    }
    .navSmalltxt{
        font-size:22px;
    }
    nav li.selected,nav li.selected:hover{
        background-size:auto 100%;        
    }
    nav li:hover{
        background-size:auto;
    }
    nav ul#gNavi{
        display:none;
        padding:0 1%;
    }
    
/*スマホボタン///////////////////////*/
    #smpBtArea{
        position:relative;
        display:block;
        width:100%;
        /*background:#fff;*/
        
        margin-bottom:5px;
        font-family: 'Play', sans-serif;
        font-size:14px;
        
    }
    #smpBtArea a{
        display:block;
        position:relative;
        padding:12px 0 10px;
        color:#111;
        text-align:center;
        text-decoration:none;
        
    }
    
    #smpBt {
        position:absolute;
        width:25px;
        height:3px;
        top:20px;
        left:20px;
        transform:translate(-50%,-50%);
        -webkit-transform:translate(-50%,-50%);
        transition:linear .5s;
        -webkit-transition:all linear .5s;
        background:#111;
        cursor: pointer;
        
    }
    #smpBt::after {
        content:' ';
        position:absolute;
        width:25px;
        height:3px;
        top:300%;
        left:0;
        background:#111;
        cursor: pointer;
    }
    #smpBt::before {
        content:' ';
        position:absolute;
        width:25px;
        height:3px;
        top:-300%;
        left:0;
        background:#111;
        cursor: pointer;
    }
    #smpBt.action {
        position:absolute;
        width:25px;
        height:3px;
        transform:translate(-50%,-50%) rotate(45deg);
        -webkit-transform:translate(-50%,-50%) rotate(45deg);
        transition:linear .5s;
        -webkit-transition:all linear .5s;
        background:none;
        cursor: pointer;
    }
    #smpBt.action::after {
        content:' ';
        position:absolute;
        width:25px;
        height:3px;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%) rotate(90deg);
        -webkit-transform:translate(-50%,-50%) rotate(90deg);
        transition:linear .5s;
        -webkit-transition:all linear .5s;
        background:#111;
        cursor: pointer;
    }
    #smpBt.action::before {
        content:' ';
        position:absolute;
        width:25px;
        height:3px;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%) rotate(180deg);
        -webkit-transform:translate(-50%,-50%) rotate(180deg);
        transition:linear .5s;
        -webkit-transition:all linear .5s;
        background:#111;
        cursor: pointer;
    }
    
}