@charset "UTF-8";

/*
===========================================================================
|           optionIndex
===========================================================================
*/

/*----------------------------------------------------------------------
/
/----------------------------------------------------------------------*/
#optionIndex{

}

#optionIndex div#parts h2 {
    background: #333 none repeat scroll 0 0;
    color: #fff;
    font-size: 110%;
    margin: 0 0 20px;
    padding: 5px 10px;
}
#optionIndex div#parts ul.partsList{

}
#optionIndex div#parts ul.partsList li{
    margin: 0 0 30px;
    overflow: hidden;
}
#optionIndex div#parts div.partsImg{
    background: #fff none repeat scroll 0 0;
    float: left;
    width: 25%;
    margin-right:1%;
}
#optionIndex div#parts div.partsImg img{
    width:100%;
}
#optionIndex div#parts div.partsDetail{
    overflow: hidden;
}
#optionIndex div#parts ul.partsList {
    box-sizing: border-box;
    float: right;
    padding: 0 0 2% 0;
    width: 72%;
}
#optionIndex div#parts ul.partsList ul.list {
    margin: 5px 0 5px 18px;
}
#optionIndex div#parts ul.partsList ul.list li{
    list-style-type: disc;
    padding:0;
    margin:0;
    overflow:visible;
}
#optionIndex div#parts ul.partsList ul.caution li{
    margin:0;
    overflow:visible;
}
#optionIndex div#parts div.supported{
    background-color:#efefef;
    padding:1% 2%;
    margin-bottom:2%;
    font-weight:bold;
    font-size:90%;
    line-height:120%;
    display:inline-block;
}


#optionIndex div#parts div.h2Area{
    position:relative;
}
#optionIndex div#parts h2{
}
#optionIndex div#parts ul.optionpoint{
    position:absolute;
    top:5px;
    right:4px;
    width:60%;
    overflow: hidden;
    display:table;
}
#optionIndex div#parts ul.optionpoint li{
    background-color:#1488c4;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    float:right;
    margin-right:2%;
    color:#fff;
    font-size:88%;
    padding:0 2%;
}
#optionIndex div#parts table.line th{
    vertical-align:middle;
    background-color:#efefef;
}
#optionIndex div#parts table.line th,#optionIndex div#parts table.line td{
    padding:2px 6px;
    font-size:90%;
}
#optionIndex div#parts h3{
    margin:0 0 1% ;
    font-size: 110%;
}
ul.caution{
    font-size: 90%;
}

ul.afterpartsList{
    overflow:visible;
}
ul.afterpartsList li{
    border:1px solid #ccc;
    width:30%;
    margin:0 0 1% 1%;
    padding:1%;
    text-align:left;
    float:left;
    font-size:90%;
}
ul.afterpartsList li h4{
    font-size:110%;
    line-height:125%;
    margin-bottom:2%;
}
ul.afterpartsList li img{
    display:block;
    width:100%;
}


.partsImg p {text-align: center;}

#sportsinterior .text-center { text-align: center; margin-bottom:.5em; }
#sportsinterior table img { width: 100%; vertical-align:bottom; }
#sportsinterior table tr.line_img td { padding: 0 !important; }
#sportsinterior table tr.line_a { background-color: #C7D5EF; }
#sportsinterior table tr.line_b { background-color: #CCE8D2; }


/*=====================================================
    device
=======================================================*/

/*
    TAB
*/
@media screen and (max-width: 991px) {

}


/*
    SPHONE
*/
@media screen and (max-width: 479px) {

    #optionIndex div#parts div.partsImg{
        float: none;
        width: 100%;
        margin-right:0%;
    }
    #optionIndex div#parts ul.partsList{
        padding: 1% 0 2% 0;
        float: none;
        width: 100%;
    }
    #optionIndex div#parts ul.optionpoint{
        position:relative;
        width:100%;
        overflow: hidden;
        display:block;
        padding-top:2.5em;
    }
    #optionIndex div#parts ul.optionpoint li{
        background-color:#1488c4;
        display:block;
        float:left;
        margin-right:2%;
        color:#fff;
        font-size:88%;
        padding:0 2%;
    }
    #optionIndex div#parts div.h2Area{
        margin-bottom:2%;
    }
    #optionIndex div#parts h2{
        margin-bottom:2%;
    }
    #optionIndex div#parts h3{
        margin:0 0 0.8% ;
        font-size:102%;
    }
    #optionIndex div#parts ul.optionpoint{
        position:absolute;
        top:8px;
        left:4px;
        width:100%;
        overflow: hidden;
        display:table;
        font-size:90%;
    }
    ul.afterpartsList li{
        width:100%;
        margin:0 0 1% 0;
        padding:1%;
        text-align:left;
        float:none;
    }
    ul.afterpartsList li h4{
        font-size:110%;
        margin-bottom:1%;
    }
    #optionIndex div#parts div.h2Area{

    }
    #optionIndex div#parts div.hasOptionpoint{
        height:4em;
    }
}