/*sp---------------------------------------*/
@charset "utf-8";

@media screen and (min-width: 0px) and (max-width: 766px) {
    .for_pc {
        display: none !important;
    }

    html {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    p {
        margin: 0;
    }

  
/*section_kv*/
    .section_kv{
        width: 100%;
        background-color: #000;
    }
    
    .main-content-inner {
        width: 100%;
    }

    .wrap_innner {
        /* width: 90%; */
        margin: auto;
        position: relative;
    }

    #eracer img {width: 100%;}

    /*common heading*******************************/
    #eracer .heading {
        text-align: left;
        font-size: 7vw;
        margin-bottom: 5vw;
        width: 90%;
        margin: auto;
        margin-bottom: 7vw;
    }

    #eracer .heading p {
        margin: 0 0 3vw 0;
        display: inline-block;
        font-weight: bold;
        padding: 0 2vw 0 1vw;
        white-space: nowrap;
        position: relative;
        left: -1px;
    }

    #eracer .heading p:last-child {
        margin: 0 0 0 0;

    }

    #eracer .eracer_txt {
        font-size: 3.7vw;
        line-height: 2em;
        width: 90%;
        margin: auto;
        line-height: 1.5em;
    }



    #eracer .bg_blue {
        color: var(--color_eracer_white);
    }

    #eracer .bg_white,
    #eracer .bg_gray {
        color: var(--color_eracer_black);
    }

    #eracer .bg_white .heading,
    #eracer .bg_gray .heading {
        border-left: 1vw solid var(--color_eracer_blue);
    }

    #eracer .bg_white .heading p,
    #eracer .bg_gray .heading p {
        background-color: var(--color_eracer_blue);
        color: var(--color_eracer_white);
    }

    #eracer .bg_blue .heading {
        border-left: 2px solid var(--color_eracer_white);
    }

    #eracer .bg_blue .heading p {
        background-color: var(--color_eracer_white);
        color: var(--color_eracer_blue);
    }






    /*section_kv-----------------*/

    #eracer .section_kv {
        width: 100%;
        background-color: #061724;
    }

    #eracer .section_kv img[src*="kv.png"] {
        width: 100%;
        /* max-width: 1350px; */
    }

    /*section_growup--------------*/
    #eracer .section_growup {
        padding: 5vw 0 10vw 0;
    }

    #eracer .section_growup .grouup_wrap {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }

    .section_growup .heading_wrap {
        width: 100%;
        margin-bottom: 7vw;
    }

    .section_growup .btn_movie_modal_wrap {
        width: 100%;
    }

    .section_growup .btn_movie_modal_wrap img[src*="movie_modal"] {
        width: 90%!important;
        margin: 0 5%;
    }

    /*section_result--------------*/
    .section_result {
        padding: 5vw 0 14vw 0;
    }

    #eracer .section_result .eracer_txt_heading {
        font-size: 4.5vw;
        font-weight: bold;
        margin-bottom: 15px;
    }

    #eracer .section_result .result_wrap {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }

    #eracer .section_result .heading_wrap {
    }

    #eracer .section_result .images_wrap {
        display: flex;
        justify-content: space-between;
        /* margin-left: 50px; */
        margin-top: 5vw;
        flex-direction: column;
    }



    #eracer .section_result .images_wrap img[src*="experient_image_01.png"] {
        width: 80%;
        margin: auto;
        margin-bottom: 5vw;
    }

    #eracer .section_result .images_wrap img[src*="experient_image_02.png"] {
        width: 80%;
        margin: auto;
    }

    #eracer .section_result .result_table_wrap {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 5vw;
        flex-direction: column-reverse;
    }


    #eracer .section_result .result_table_item {
        width: 90%;
        position: relative;
        margin: auto;
        margin-top: 8vw;
    }

    #eracer .section_result .result_table_item img {}

    #eracer .section_result .result_table_txt {
        width: 100%;
        margin-top: 9vw;
    }



    /*section_potential------------*/
    #eracer .section_potential {
        padding: 50px 0;
        position: relative;
        width: 100%;
    }
     #eracer .potentioal_txt {
        font-size: 3.7vw;
        line-height: 1.7em;
        width: 90%;
        margin: auto;
    }

    #eracer .potential_wrap {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin: auto;
        flex-direction: column;
    }


    #eracer .section_potential .heading_wrap {
        width: 100%;
        position: relative;
    }

    #eracer .section_potential .images_wrap {
    }


    #eracer .section_potential .blue_line {
        position: absolute;
        width: calc(50% - 20px);
        top: 269px;
        left: 0px;
        height: 310px;
        background-color: var(--color_eracer_blue);
    }

    #eracer .section_potential img[src*="sainou.png"] {
        /* position: absolute; */
        width: 100%;
        /* top: 80px; */
        /* right: 0px; */
        /* height: 360px; */
        /* width: 200px background-color: var(--color_eracer_blue); */
    }

    /*section_way--------------*/
    #eracer .section_way {
        padding: 50px 0;
    }

    #eracer .section_way .way_message {
        font-size: 20px;
        color: var(--color_eracer_blue);
        font-weight: bold;
        line-height: 1.5em;
        margin-bottom: 5vw;
    }

    #eracer .section_way .way_message_data {
        font-size: 3.7vw;
        color: #000;
        width: 100%;
        margin-top: 3vw;
        line-height: 1.5em;
    }

    #eracer .way_wrap {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 5vw;
        flex-direction: column;
    }

    #eracer .way_wrap:last-child {
        margin-top: 5vw;
        width: 90%;
        margin: auto;
    }

    #eracer .way_content {
        text-align: right;
        width: 90%;
        margin: auto;
        /* margin-top: 30px; */
    }



    /*section_voice----------------*/


    #eracer .section_voice {}

    #eracer .voice_hading {
        background-color: var(--color_eracer_blue);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        width: 90vw;
        font-size: 4.5vw;
        padding: 5px;
        margin: 0 5vw;
        font-weight: bold;
        margin-bottom: 5vw;
        letter-spacing: 0.3em;
    }

    #eracer .rogo_wrap {
        display: flex;
        flex-wrap: wrap;
    }

    #eracer .rogo_wrap .rogo_item {
        width: 50%;
        height: 30vw;
        background-color: red;
    }

    #eracer .section_voice_1 {
        padding: 50px 0 100px 0;
        position: relative;
    }


    #eracer .section_voice_1 .voice_wrap {
        /* width: 486px; */
        width: 90%;
        margin: 5vw auto 0 auto;
        font-size: 3.8vw;
        line-height: 2em;
}



    #eracer .section_voice_1 .profile_heading_wrap {
        width: 90%;
        position: relative;
        margin: 5vw 0 0 0;
    }

    #eracer .section_voice_1 .profile_heading_wrap::after {
        content: "";
        position: absolute;
        height: 4px;
        width: 70%;
        background-color: var(--color_eracer_blue);
        top: 0;
        bottom: 0;
        margin: auto;
        margin-right: 0%;
    }

    #eracer .section_voice_1 .profile_heading {
        font-size: 5vw;
        font-weight: bold;
        background-color: var(--color_eracer_gray);
        display: inline-block;
        padding-right: 2em;
    }



    /*-------------------------------------------*/



    #eracer .section_voice_2 {
        padding: 50px 0;
        position: relative;
    }
    #eracer .section_voice_2 .segment{
        height: 8px;
        width: 20vw;
        background-color: var(--color_eracer_blue);
        position: absolute;
        top: -4px;
        left: 0;
        right: 0;
        margin: auto;
        display: block;
    }


 

    #eracer .section_voice_2 .e_driver_name {
        position: absolute;
        right: calc(50% - 320px);
        top: 530px;
        font-size: 55px;
        transform: rotate(90deg);
        color: #E53C00;
        line-height: 1.3em;
    }


    #eracer .section_voice_2 .voice_wrap {
        width: 90%;
        margin: 5vw auto 0 auto;
    }

.section_voice_2 .voice_wrap {
    font-size: 3.8vw;
    line-height: 2em;
}

    .section_voice_2 .voice_wrap .voice_driver_wrap {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 44px;
    }

    #eracer .section_voice_2 .profile_heading_wrap {
        width: 100%;
        position: relative;
        margin: 5vw 0 2vw 0;
    }

    #eracer .section_voice_2 .profile_heading_wrap::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 4px;
        width: calc(100% - 135px);
        background-color: var(--color_eracer_blue);
        top: 0;
        bottom: 0;
        margin: auto;
        box-sizing: border-box;
    }

    #eracer .section_voice_2 .profile_heading {
        font-size: 5vw;
        font-weight: bold;
        background-color: var(--color_eracer_white);
        display: inline-block;
        padding-right: 2em;
    }




    /*-------------------------------------------*/

    #eracer .section_voice_3 {
        padding: 10vw 0 24vw 0px;
        position: relative;
    }
        .section_voice_3 .segment{
        height: 8px;
        width: 20vw;
        background-color: var(--color_eracer_blue);
        position: absolute;
        top: -4px;
        left: 0;
        right: 0;
        margin: auto;
        display: block;
    }

    #eracer .section_voice_3 .voice_wrap {
        width: 90%;
        margin: 5vw auto 0 auto;
    }

    #eracer .section_voice_3 .voice_wrap {
        font-size: 3.8vw;
        line-height: 2em;
    }

   #eracer  .section_voice_3 .voice_wrap .voice_driver_wrap {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 44px;
    }

    #eracer .section_voice_3 .profile_heading_wrap {
        width: 90%;
        position: relative;
        margin: 5vw  0 2vw 0;
    }

    #eracer .section_voice_3 .profile_heading_wrap::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 4px;
        width: 70%;
        background-color: var(--color_eracer_blue);
        top: 0;
        bottom: 0;
        margin: auto;
    }

    #eracer .section_voice_3 .profile_heading {
        font-size: 5vw;
        font-weight: bold;
        background-color: var(--color_eracer_gray);
        display: inline-block;
        padding-right: 2em;
    }
    
    /*---------------------------------*/
    #eracer .section_company{
        position: relative;
        padding: 16vw 0;
    }
    #eracer .company_hading {
    background-color: var(--color_eracer_blue);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    width: 90vw;
    font-size: 4.5vw;
    padding: 1vw;
    margin: auto 5vw;
    margin-bottom: 8vw;
    font-weight: bold;
    letter-spacing: 0.3em;
}

    #eracer .company_wrap {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    
    #eracer .company_logo{
        width: 45%;
        padding: 3%;
        box-sizing: border-box;
        text-align: center;
    }
    #eracer .company_logo:last-child{
    margin:0 auto 0 3%;
}
    }
    .company_logo img{
        width: 80%;
    }
    
    /* modal mov *****************************************/
    #eracer img.close {
        position: absolute;
        top: 90px;
        right: 0;
        width: 10%!important;
        max-width: 70px;
        z-index: 10000;
    }

    #eracer #adMovBoxWrap {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 12;
        overflow: auto;
        height: 100%;
        width: 100%;
        padding: 10px;
        align-items: center;
    }

    #eracer #adMovBoxInner {
        text-align: right;
        overflow: hidden;
        z-index: 1;
        height: 53vw;
        width: 95vw;
        max-width: 1200px;
        max-height: 720px;
        margin: auto;
    }



    #eracer #adMovBoxWrap iframe {
        width: 100%;
        height: 100%;
    }

    #eracer #floatMovBg {
        text-align: center;
        background: rgba(0, 0, 0, .8);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        cursor: pointer;
        z-index: 1;
    }

    #eracer #closefloat {
        cursor: default;
    } 



    /*for_sp---------------------------*/
}