@charset "utf-8";
@media screen and (max-width : 768px){

    br { display: none;}
    br.sp {display: block;}

    img { width: 100%;}


    .section {
        margin-bottom: 50px;
    }
    .section.gray {
        padding: 50px 0;
        background: #f0f0f0;
    }

/* メインビジュアル */
    #main_visual {
        margin: 0 auto 20px;
    }

    #main_visual .img_slider div {
        margin-bottom: 0;
    }

    #main_visual .img_slider img {
        font-size: 0;
        line-height: 0;
    }

    #main_visual .img_slider .slider_cont {
        padding: 20px 0 70px;
        background-color: transparent;
    }

    #main_visual .img_slider .slider_cont .copy {
        width: 100%;
        margin: 0px auto;
        font-size: 18px;
        line-height: 25px;
        text-align: center;
        position: absolute;
        top: 24px;
    }

    #main_visual .img_slider .slider_cont .logo {
        margin: 0 auto 10px;
    }

    #main_visual .img_slider .slider_cont .img {
        width: 130%;
        margin: 50px auto 0;
        position: relative;
    }

    #main_visual .img_slider .img img {
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
    }

    #main_visual .img_slider .slider_inner {
        padding: 0;
    }

    #main_visual .img_slider .slider_inner .img img.on {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    #main_visual .img_slider .slider_inner.on .img img.on {
        opacity: 1;
    }

    #main_visual .img_slider .slider_inner.on .img img.off {
        opacity: 0;
    }

    #main_visual .img_slider .slider_cont .switch_title {
        width: 37%;
        height: 70px;
        padding: 8px 0 8px 15px;
        font-size: 13px;
        line-height: 22px;
        color: #444;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #fff;
        box-sizing: border-box;
    }

    #main_visual .img_slider .slider_cont .equip_switch {
        width: 64%;
        height: 70px;
        padding: 8px 15px 32px 0;
        position: absolute;
        overflow: hidden;
        bottom: 0;
        right: 0;
        box-sizing: border-box;
        background-color: #fff;
    }

    #main_visual .img_slider .slider_cont .equip_switch li {
        width: calc(50% - 4px);
        width: -webkit-calc(50% - 4px);
        height: 22px;
        margin-right: 8px;
        font-size: 14px;
        line-height: 22px;
        float: left;
        background-color: #ddd;
        text-align: center;
        cursor: pointer;
        box-sizing: border-box;
        vertical-align: middle;
        position: relative;
    }

    #main_visual .img_slider .slider_cont .equip_switch li:last-child {
        margin-right: 0;
    }

    #main_visual .img_slider .slider_cont .equip_switch li span {
        position: relative;
        display: block;
    }

    #main_visual .img_slider .slider_cont .equip_switch li span::after {
        content: "";
        width: 100%;
        border-bottom: 4px solid transparent;
        position: absolute;
        bottom: -9px;
        left: 0;
        display: inline-block;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
    }

/* 装着 */
    #main_visual .slider_inner.on .slider_cont .equip_switch li.on {
        background-color: #444;
        color: #fff;
    }

    #main_visual .slider_inner.on .slider_cont .equip_switch li.on span::after {
        border-bottom-color: #444;
    }

    #main_visual .slider_inner.on .slider_cont .equip_switch li.off {
        color: #444;
    }

    #main_visual .slider_inner.on .slider_cont .equip_switch li.off span::after {
        bottom: -4px;
    }


/* 非装着 */
    #main_visual .slider_inner.off .slider_cont .equip_switch li.on {
        color: #444;
    }

    #main_visual .slider_inner.off .slider_cont .equip_switch li.off {
        background-color: #444;
        color: #fff;
    }

    #main_visual .slider_inner.off .slider_cont .equip_switch li.off span::after {
        border-bottom-color: #444;
    }

    #main_visual .slider_inner.off .slider_cont .equip_switch li.on span::after {
        bottom: -4px;
    }



    /* --* STEPWGN *-- */
    #main_visual .standard {
        color: #444;
        background-image: url(../img/bg_main_visual.jpg);
        background-size: contain;
        background-repeat: repeat-x;
    }

    /* --* STEPWGN SPADA *-- */
    #main_visual .spada {
        color: #444;
        background-image: url(../img/bg_main_visual.jpg);
        background-size: contain;
        background-repeat: repeat-x;
    }

    /* section */
    .section h3 {
        margin: 0 25px 30px;
        font-size: 23px;
        text-align: center;
    }
    .section h3 span {
        width: 160px;
        padding: 0 0 10px;
        border-bottom: 3px solid #444;
        display: inline-block;
        white-space: nowrap;
    }

    .block {
        margin: 0 0 38px;
    }

    .block .block_copy {
        font-size: 23px;
        line-height: 32px;
        margin: 0 20px 20px;
        text-align: center;
    }

    .link {
        margin: 0 20px 20px;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }

    .link a {
        color: #0064a1;
    }

    .link a:after{
        content: '';
        width: 20px;
        height: 20px;
        display: inline-block;
        background-image:url(../common/img/parts_ico_btn_detail_arrow.png);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 20px 20px;
        position: relative;
        top: 4px;
        right: -5px;
    }

    .section .link.frame a {
        padding: 12px 24px 12px 18px;
        border: 1px solid #0064a1;
        border-radius: 2px;
        background: none;
    }


    /* インフォメーション */
    #section_info {
        border-top: 1px solid #dbdbdb;
        border-bottom: 1px solid #dbdbdb;
        padding: 20px 0;
        margin: 0 20px 50px;
    }
    #section_info li {
        font-size: 12px;
        line-height: 18px;
        color: #f00;
    }

    /* ピックアップ */
    #section_styling .img_slider .slider_inner,
    #section_convenience .img_slider .slider_inner,
    #section_special .img_slider .slider_inner {
        padding: 0;
    }

    .slick-slide .switch_pc {
        display: none;
    }

    /* アイテム */
    #section_items {
        margin-bottom: 0;
    }

    .item_list {
        margin: 0 15px;
    }

    .item_list li {
        margin: 0 0 15px;
        background-color: #fff;
    }

    #section_items .item_list li a {
        color: #444;
    }

    .item_list li .box {
        padding: 15px;
    }

    .item_list li .box h4 {
        margin: 0 0 15px;
        font-size: 18px;
        line-height: 24px;
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
    }

    .item_list li .box .copy {
        margin: 0 0 15px;
        font-size: 16px;
        line-height: 24px;
    }

    .item_list li .box > *:last-child {
        margin-bottom: 0;
    }

    .item_list li .link span {
        color: #0064a1;
    }

    .item_list li .link span:after{
        content: '';
        width: 20px;
        height: 20px;
        display: inline-block;
        background-image:url(../common/img/parts_ico_btn_detail_arrow.png);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 20px 20px;
        position: relative;
        top: 4px;
        right: -5px;
    }

    #section_items .bnr_img{
		margin: 30px 15px 0;
	}
}