@charset "utf-8";

@media print, screen and (min-width : 769px){
    .link {
        margin: 0 auto 20px;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }

    .link a {
        padding-right: 26px;
        color: #0064a1;
        display: inline-block;
    }

    .link a:after{
        content: '';
        width: 20px;
        height: 20px;
        display: inline-block;
        background-image: url(/ACCESS/auto-archive/freed/2024/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;
    }

    .img_slider .slick-dots {
        bottom: 0px !important;
    }

    #main_visual .img_slider .slick-dots {
        bottom: -2px !important;
    }

/* メインビジュアル */
    #main_visual {
        width: 100%;
        min-width: 980px;
        margin: 0 auto 80px;
    }

    #main_visual .img_slider {
        width: 100%;
    }

    #main_visual .img_slider .slider_cont {
        width: 980px;
        height: 385px;
        margin: 0 auto;
        position: relative;
        box-sizing: border-box;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    #main_visual .img_slider .slider_cont .copy {
        margin: -3px 0 30px 50px;
        font-size: 24px;
        line-height: 30px;
    }

    #main_visual .img_slider .slider_cont .logo {
        margin: 0 0 30px 50px;
    }

    #main_visual .img_slider .slider_cont .switch_title {
        font-size: 14px;
        margin: 0 0 5px 50px;
    }

    #main_visual .img_slider .slider_cont .equip_switch {
        position: relative;
        margin-left: 50px;
        border: 1px solid transparent;
        display: inline-block;
    }
    #main_visual .img_slider .slider_cont .equip_switch.w_border {
        border-color: #fff;
    }
    #main_visual .img_slider .slider_cont .equip_switch li {
        width: 80px;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        float: left;
        background-color: #ddd;
        text-align: center;
        cursor: pointer;
    }

    #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: -13px;
        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 {
        background-color: #ddd;
        color: #444;
    }

    #main_visual .slider_inner.on .slider_cont .equip_switch li.off:hover {
        background-color: #c9c9c9;
    }

    #main_visual .slider_inner.on .slider_cont .equip_switch li.off span::after {
        bottom: -7px;
    }

    /* 非装着 */
    #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 {
        background-color: #ddd;
        color: #444;
    }
    #main_visual .slider_inner.off .slider_cont .equip_switch li.on:hover {
        background-color: #c9c9c9;
    }
    #main_visual .slider_inner.off .slider_cont .equip_switch li.on span::after {
        bottom: -7px;
    }


    #main_visual .slider_inner.off .slider_cont .equip_switch.w_border li.off span::after,
    #main_visual .slider_inner.on .slider_cont .equip_switch.w_border li.on span::after {
    border-bottom-color: #444;
}
    #main_visual .img_slider .slider_cont .img {
        position: absolute;
        top: 0;
        right: 0;
    }


    #main_visual .img_slider .slider_cont .img img {
        width: 913px;
        margin-right: -220px;
        // height: 384px;
        transition: opacity .2s ease;
    }

    #main_visual .img_slider .slider_cont .img img.off {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    #main_visual .img_slider .slider_inner.off .slider_cont .img img.off {
        opacity: 1;
    }

    #main_visual .img_slider .slider_inner.off .slider_cont .img img.on {
        opacity: 0;
    }

    /* --* 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 {
        margin: 0 auto 70px;
    }

    .section.gray {
        padding-top: 70px;
        padding-bottom: 70px;
        background-color: #f0f0f0;
    }

    .section h3 {
        margin: 0 auto 70px;
        font-size: 38px;
        font-weight: normal;
        text-align: center;
    }

    .section h3 span {
        width: 270px;
        padding: 0 0 14px;
        border-bottom: 4px solid #444;
        display: inline-block;
    }

    .section .link.section_end {
        margin-top: -20px;
        margin-bottom: 80px;
    }

    .section .link.frame a {
        padding: 12px 24px;
        border: 1px solid #0064a1;
        border-radius: 2px;
        background: none;
    }

    .section .link.frame a span {
        color: #0064a1;
        display: inline-block;
    }

    .section .link.frame a::after {
        right: -7px;
    }

    /* .block */
    .block {
        margin: 0 auto 80px;
    }

    .block .block_inner {
        width: 880px;
        margin: 0 auto;
    }

    .block .block_inner.wide {
        width: 980px;
    }

    .block .block_copy {
        margin-bottom: 30px;
        font-size: 38px;
        line-height: 54px;
        text-align: center;
    }

    .modal_mov_open a::after {
        height: 495px;
    }

    /* インフォメーション */
    #section_info {
        width: 880px;
        border-top: 1px solid #dbdbdb;
        border-bottom: 1px solid #dbdbdb;
        padding: 20px 0;
    }
    #section_info li {
        font-size: 12px;
        line-height: 18px;
        color: #f00;
    }

    /* ピックアップ */
    #section_styling .img_wrap,
    #section_convenience .img_wrap,
    #section_special .img_wrap {
        position: relative;
        max-width: 1440px;
        margin: auto;
        /* left: -280px; */
    }

    .slick-slide .switch_sp {
        display: none;
    }

    #section_styling .img_slider .slider_inner,
    #section_convenience .img_slider .slider_inner,
    #section_special .img_slider .slider_inner {
        position: relative;
    }

    #section_styling .img_slider .slider_inner .car,
    #section_convenience .img_slider .slider_inner .car,
    #section_special .img_slider .slider_inner .car {
        width: 36%;
        top: 25.97%;
        left: 47.78%;
    }

    .img_wrap img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* アイテム */
    #section_items {
        margin-bottom: 0;
    }

    #section_items .item_list {
        width: 880px;
        margin: 0 auto 50px;
    }

    #section_items .item_list li {
        margin: 0 auto 20px;
        background-color: #fff;
    }

    #section_items .item_list li a {
        color: #444;
    }

    #section_items .item_list .img {
        line-height: 0;
        font-size: 0;
        position: relative;
        overflow: hidden;
    }

    #section_items .item_list .img img {
        width: 384px;
        height: auto;
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }

    #section_items .item_list li:hover .img img {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    #section_items .item_list .box {
        width: 496px;
        padding-left: 40px;
        box-sizing: border-box;
    }

    #section_items .item_list h4 {
        margin-bottom: 10px;
        font-size: 26px;
        line-height: 38px;
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
    }

    #section_items .item_list .copy {
        margin-bottom: 35px;
        font-size: 18px;
        line-height: 24px;
    }

    #section_items .item_list .link {
        color: #0064a1;
        text-align: left;
    }

    #section_items .item_list .link span {
        padding-right: 26px;
        background: url(/ACCESS/auto-archive/freed/2024/common/img/parts_ico_btn_detail_arrow.png) right center no-repeat;
        background-size: 20px auto;
        display: inline-block;
    }

    #section_items .bnr_img{
        text-align: center;
        padding-top: 60px;
    }
}
