@charset "utf-8";

/* =================================================================
上書きCSS
================================================================= */

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

    /*------------------------------------------------------------------------------------------
*
*
    Responsive / SP
*
*
------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------
*
    #main_visual
*
------------------------------------------------------------ */
    #main_visual_inner .pic_visual {
        /*margin: 120px 0 0;*/
		margin: 160px 0 0 0; /*←　ua change*/
        text-align: right;
        padding-bottom: 14vw;
    }

    #main_visual_inner .pic_visual img {
        width: 80%;
        margin: 30px 0 0;
        height: auto;
        position: relative;
        left: -10vw;
    }

    .section .detail {
        padding: 0 15px;
        text-align: left;
        z-index: 1;
    }

    #main_visual .main_copy .copy br {
        display: block !important;
    }


/* ------------------------------------------------------------
*
    #section_type
*
------------------------------------------------------------ */
    #section_type {
        margin: 0 0 50px 0;
        padding: 0 15px;
    }

    #section_type .caution {
        margin: 20px 0 10px 0;
        text-align: left;
        line-height: 1.5em;
        color: #da4058;
        font-size: 12px;
    }

    /* ------------------------------------------------------------
*
    #section_allnew
*
------------------------------------------------------------ */
    #section_allnew {
        position: relative;
    }

    #section_allnew img {
        vertical-align: bottom;
    }

    #section_allnew .section_inner {
        position: absolute;
        top: 45%;
        left: 0;
        right: 0;
        width: 50%;
        -webkit-transform: translate(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    #section_allnew .logo_wrap {
        text-align: center;
    }

    #section_allnew .all_new_logo {
        margin: 0 0 20px;
    }

    #section_allnew .all_new_logo img {
        max-width: 30%;
    }

    #section_allnew .new_copy {
        padding: 0 15px;
    }

    #section_allnew .new_copy img {
        max-width: 60%;
    }

    #section_allnew .detail {
        margin-top: 10px;
        text-align: center;
    }

/* ------------------------------------------------------------
*
    #section_styling
*
------------------------------------------------------------ */

    #section_styling {
        position: relative;
        margin: 0 0 50px;
        padding: 0;
        text-align: left;
    }

    #section_styling .detail {
        margin: 0 0 30px 0;
    }

    #section_styling .styling {
        margin: 0;
        padding: 0;
    }

    #section_styling .styling_img {
        position: relative;
        top: 0;
        padding-bottom: 25%;
    }

    #section_styling .styling img {
        width: 100%;
        height: auto;
    }

    #section_styling .styling p {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        opacity: 0;
    }

    #section_styling .styling .styling_pic {
        top: 0;
    }

    #section_styling .styling .bg_d {
        opacity: 1;
        position: relative !important;
    }


/* ------------------------------------------------------------
*
    #section_interior
*
------------------------------------------------------------ */

    #section_interior {
        position: relative;
        margin: 0 0 100px;
        padding: 0;
        text-align: left;
    }

    #section_interior .detail {
        margin: 0 0 30px;
    }

    #section_interior .interior {
        margin: 0;
    }

    #section_interior .interior_img {
        position: relative;
        top: 0;
        padding: 0 0 20%;
    }

    #section_interior .interior img {
        width: 100%;
        height: auto;
    }

    #section_interior .interior p {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        opacity: 0;
    }

    #section_interior .interior .bg_d {
        opacity: 1;
        position: relative !important;
    }

    #section_interior .interior .seat {
        background-image: url(../image/pic_interior_seat.png);
        top: 0;
    }

    #section_interior .interior .meter {
        background-image: url(../image/pic_interior_meter.png);
    }

    #section_interior .interior .steering {
        background-image: url(../image/pic_interior_steering.png);
    }

    #section_interior .interior .dash {
        background-image: url(../image/pic_interior_dash.png);
        bottom: 0;
    }

    #section_interior .interior .interior_pic {
        top: 0;
    }

    #section_interior .pic_notes {
        padding: 0 15px;
        font-size: 11px;
        text-align: right;
    }


/* ------------------------------------------------------------
*
    #section_safety
*
------------------------------------------------------------ */

    #section_safety {
        margin: 0 0 100px;
        padding: 0;
        background-color: #FFFFFF;
    }

    #section_safety .section_inner {
        padding: 0;
    }

    #section_safety .detail {
        margin: 0 0 30px;
    }

    #section_safety h3 {
        position: relative;
        padding: 0 15px 0;
        opacity: 1;
    }

    #section_safety .safety_copy {
        padding: 0 15px;
    }

    #section_safety .safety_copy .asv_sp,
    #section_safety .safety_copy .fivestar_sp {
        margin-bottom: 25px;
        padding-top: 25px;
        width: 22%;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        opacity: 0;
    }

    #section_safety .safety_copy .fivestar_sp {
        width: 24%;
        padding-top: 0;
    }

    #section_safety .safety_copy .asv_sp img {
        width: 80%
    }

    #section_safety .safety_copy .fivestar_sp img {
        width: 80%;
    }

    #section_safety .pic_citybrake_sp,
    #section_safety .pic_star_sp {
        padding-bottom: 20px;
        width: 70%;
        display: inline-block;
        vertical-align: top;
        opacity: 0;
    }

    #section_safety .pic_star_sp {
        width: 60%;
    }

    #section_safety .pic_citybrake_sp img,
    #section_safety .pic_star_sp img {
        width: 100%;
    }

    #section_safety .pic_cap {
        position: relative;
        bottom: 20px;
        width: 91%;
        height: 100%;
        font-size: 12px;
        text-align: right;
        display: block;
    }

    #section_safety .safety_notes_sp {
        padding-top: 20px;
        font-size: 18px;
        text-align: center;
        line-height: 1.4em;
        opacity: 0;
        clear: both;
    }


/* ------------------------------------------------------------
*
    #section_comfort
*
------------------------------------------------------------ */

    #section_comfort {
        margin: 0 0 100px;
    }

    #section_comfort .comfortable {
        position: relative;
        top: 0;
        margin: 20px 0 0;
    }

    #section_comfort .comfortable p {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    #section_comfort .comfortable .bg_d img {
        width: 100%;
    }

    #section_comfort .comfortable .bg_d {
        position: relative !important;
        padding: 0 0 40%;
        top: 0;
    }

    #section_comfort .comfortable .degree_sp,
    #section_comfort .comfortable .uvir_sp {
        left: 15px;
        width: 30%;
        z-index: 1;
    }

    #section_comfort .comfortable .degree_sp img {
        width: 100%;
        height: auto;
    }

    #section_comfort .comfortable .uvir_sp {
        top: 35%;
    }

    #section_comfort .comfortable .uvir_sp img {
        width: 100%;
        height: auto;
    }

    #section_comfort .comfortable .comfort_pic_sp {
        right: 0;
        width: 70%;
    }

    #section_comfort .comfortable .comfort_pic_sp img {
        position: absolute;
        bottom: 17%;
        width: 100%;
    }

    .pic_cap {
        position: absolute;
        top: 82%;
        width: 86%;
        height: 100%;
        font-size: 12px;
        text-align: right;
        display: block;
    }


/* ------------------------------
    #section_caution
------------------------------ */

    #section_caution {
        margin-top: -20px;
        padding: 0;
        margin-bottom: 0;
    }


}

@media screen and (max-width : 480px) {
    #section_allnew .section_inner {
        top: 44%;

    }

}