@charset "utf-8";

.menu_block{
    font-family: 'Helvetica', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Lucida Grande', 'Verdana', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', sans-serif;
}


/*///////////// sub menu position //////////////////
-------------------------------------------------*/

/*//// default position ////*/
#design .submenu{
    left: -6px;
}
#driving .submenu{
    left: -38px;
}
#utility .submenu{
    left: -137px;
}
#total .submenu{
    left: -654px;
    width: 760px;
}


/*//// fixed position ////*/

.lineup_menu_area.fixed #safety .submenu{
    left: -132px;
}
/*
#grade .submenu{
left: 0;
}

#spec .submenu{
left: 0;
}
*/
.lineup_menu_area.fixed #total .submenu{
    left: -656px;
    width: 760px;
}

/*-------------------------------------------------
/////////// sub menu position end ////////////////*/




/*PC menu
-------------------------------------------------*/
.menu_region{
    padding: 10px 0 0;
    background: #eee;
}
.lineup_menu_area{
    width: 100%;
    height: 60px;
    margin: 0;
    z-index: 2;
    background: #fff;
    position: relative;
}

.lineup_menu_area .outbox{
    position: relative;
    width: 1000px;
    height: auto;
    margin: 0 auto;
}

.lineup_menu_area h1{
    width:287px;
    height: 60px;
    position: absolute;
    top: -82.5px;
    left: 50%;
    margin: 0 0 0 -143px !important;
    z-index: 300;
    cursor: pointer;
}

.lineup_menu_area h1 img{
    width: 287px;
    height :27px;
    margin-top: 15px;
}

.lineup_menu_area nav{
    position: relative;
    background: #fff;
    width: 100%;
    height:60px;
    margin: 0 auto 0;
    border: 0;
    top: auto;
    left: auto;
}


.lineup_menu_area nav .menu_block{
    width: 100%;
    height: 80px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 8;
    text-align: center;
}
.lineup_menu_area nav .menu_block:before{
    /* content: ""; */
    position: absolute;
    width: 1px;
    height: 30px;
    background-color: #ccc;
    /* left: 50%; */
    top: 25px;
}

.lineup_menu_area nav .mainmenu{
    display: inline-block;
    height: 40px;
    text-align: left;
}

.lineup_menu_area #special{
    width: 90px;
    /* margin-right: 300px; */
}
.lineup_menu_area #what{
    width: 99px;
}
.lineup_menu_area #presen{
    width: 90px;
}
.lineup_menu_area #concept{
    width: 100px;
}
.lineup_menu_area #gallery{
    width: 70px;
}

.top_arrow{
    position: absolute;
    top: -5px;
    left: 50%;
    margin: 0 0 0 -12px;
    display: none;
}

.mainmenu.last{
    margin: 0!important;
}

.mainmenu{
    position: relative;
    z-index: 100;
}

.lineup_menu_area a.menubtn{
    display: block;
    height:45px;
    cursor:pointer;
    padding: 15px 0 0;
}

.lineup_menu_area .mon::after{
    
    position: absolute;
    top: -5px;
    left: 50%;
    margin: 0 0 0 -12px;
    display: block;
}

.lineup_menu_area .main_btn{
    height: 30px;
    position: relative;
    overflow: hidden;
    margin:0;
}

.lineup_menu_area .mainmenu .main_btn img{
    position: absolute;
    width: 100%;
    height: auto;
}




/*////pulldown menu////*/
.lineup_menu_area .submenu {
    position: absolute;
    top: 80px;
    background: #fff;
    border :6px solid #eee;
    border-radius: 10px;
    z-index: 100;
    display: none;
    box-shadow: 0px 2px 2px 2px rgba(0,0,0,0.2);
}

.lineup_menu_area .posi1::after,
.lineup_menu_area .posi2::after,
.lineup_menu_area .posi3::after,
.lineup_menu_area .posi4::after,
.lineup_menu_area .posi5::after{
    content: url(img/arrow_top2.png);
    position: absolute;
    top: -15px;
    margin: 0;
}

.lineup_menu_area .posi1::after{
    left: 20px;
}

.lineup_menu_area .posi2::after{
    left: 90px;
}

.lineup_menu_area .posi3::after{
    left: 50%;
    margin: 0 0 0 -12px;
}

.lineup_menu_area .posi4::after{
    left: 320px;
}

.lineup_menu_area .posi5::after{
    right: 62px;
}


.lineup_menu_area .sub li{
    display: inline-block;
    margin: 0;
    width: 374px;
}
.lineup_menu_area .sub li a{ text-decoration: none !important;}

.lineup_menu_area .sub li span {
    display: table-cell;
    vertical-align: middle;
    padding: 20px 20px 20px 0;
}

.lineup_menu_area .sub li .stxt {
    width: 140px;
    margin: 0;
    font-size: 12px;
    padding: 10px 10px 10px 20px;
    color: #333;
    line-height: 1.4em;
    font-weight: bold;
    letter-spacing: -0.1em;
}

.lineup_menu_area .sub li .stxt strong{
    font-size: 14px;
    display: block;
    margin: 0 0 15px;
    line-height: 1.4em;
}

.lineup_menu_area .sub li .ptxt{
    padding: 0;
    display: block;
}

.lineup_menu_area .sub hr{
    display: block;
    width: 330px;
    height: 1px;
    background: #eee;
    margin: 0 auto;
    border: none;
}

.spsite_ttl{
    margin: 20px auto 0;
}

.lineup_menu_area .sub .spbnr {
    padding: 0;
    margin: 0 0 5px 33px;
    vertical-align: inherit !important;
}




/*fixed position
------------------------------------*/

.lineup_menu_area.fixed{
    position: fixed!important;
    top: -80px;
    width: 100%;
    height : 40px;
    border-top: 5px solid #eee;
    border-bottom: 1px solid #ccc;
}
.lineup_menu_area.fixed .outbox{
    width: 1000px!important;
    height: 40px!important;
    position: relative;
}
.lineup_menu_area.fixed h1 img{ margin-top: 7px; }

.lineup_menu_area.fixed nav{
    width: 815px!important;
    height: 40px!important;
    margin: 0!important;
    left: 200px;
}

.lineup_menu_area.fixed .menu_block{
    
}
.lineup_menu_area.fixed nav .menu_block{ text-align: left; }
.lineup_menu_area.fixed .menu_block:before{ display: none; }

.lineup_menu_area.fixed .menu_block .mainmenu{
    margin: 0 0 0 0!important;
}
.lineup_menu_area.fixed .menu_block .last{
    margin: 0!important;
}

.lineup_menu_area.fixed .main_btn{
    height: 25px;
    margin: 0;
}
.lineup_menu_area.fixed #top{
    left: 30px;
}
.lineup_menu_area.fixed #why{
    left: 10px;
}

.lineup_menu_area.fixed  .main_btn img{
    width: 80%!important;
    height: auto;
}

.lineup_menu_area.fixed a.menubtn{
    height: 35px;
    padding: 8px 0 0;
}
.lineup_menu_area.fixed .submenu{
    top: 40px;
}

.lineup_menu_area.fixed h1{
    width: 180px!important;
    height: 30px!important;
    position: absolute;
    top: 3px!important;
    left: 10px!important;
    margin : 0!important;
    z-index: 10000!important;
}

.lineup_menu_area.fixed h1 img{
    width: 100%!important;
    height: auto!important;
}


/*------------------------------------------------------
breadcrumb
------------------------------------------------------*/
.breadcrumb{
    width: 1000px;
    margin: 10px auto 0;
}
.breadcrumb ol li{
    list-style-type: none;
    display: inline-block;
    text-indent: 5px;
    font-size: 10px;
}

.breadcrumb ol li:after{
    content:">";
    margin: 0 0 0 10px;
}

.breadcrumb ol li.last:after{
    content:"";
    margin: 0;
}

.breadcrumb ol li a:link,
.breadcrumb ol li a:visited,
.breadcrumb ol li a:active{
    text-decoration: underline;
    color:#333;
}
.breadcrumb ol li a:hover{
    text-decoration: none;
    color: #333;
}

.trac_menu { display: none !important; }


@media screen and (min-width:1200px) {
    .lineup_menu_area .outbox{
        width: 1000px;
    }	

    .lineup_menu_area nav .mainmenu{
        margin :0 60px 0 0;
    }
    .lineup_menu_area nav .mainmenu:last-child{
        margin :0 0 0 0;
    }
}

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

    .lineup_menu_area .outbox{
        width: 1000px;
    }	

    .lineup_menu_area nav .mainmenu{
        margin :0 40px 0 0;
    }
    .lineup_menu_area nav .mainmenu:last-child{
        margin :0 0 0 0;
    }


}