@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

      /*******************************
      mixin
      ******************************* */
      /*******************************
      reset
      ******************************* */

      html {
        width: 100%;
        /*font-size: 16px;*/
      }

      img {
        max-width: 100%;
      }

      h2 {
        margin: 0;
      }

      h3 {
        text-align: center;
        font-size: 1.3rem;
        font-weight: 500;
        margin: 20px;
        line-height: 1.5;
      }

      h4 {
        text-align: center;
        font-size: 1rem;
        font-weight: 500;
        margin: 20px;
        line-height: 1.5;
      }

      /*mv*/
      .mv {
        margin: 0 auto;
        width: 100%;
      }
      .pc {
        display:none;
      }

      .mv_pc {
        display:none;
      }

      /*mv*/
      /*btn_area*/
      .btn_area_inner {
        padding: 0 10% 0 10%;
        margin: 0 auto;
      }
      .member_btn {
        max-width: 100%;
        background-color: #bf0000;
        border-radius: 50px;
        color: #ffffff;
        padding: 20px 5px 20px 5px;
        font-size: 22px;
        text-align: center;
        font-weight: 700;
        box-shadow: 0px 1.25px 6px rgba(0,0,0,0.2);
      }
      .member_btn a {
        color: #fff;
        text-decoration: none;
      }
      .member_text {
        text-align: center;
        font-size:14px ;
        margin-top: 0.8rem;
      }
      /*btn_area*/
      /*merit*/
      .merit {
        margin: 0 auto;
        background-color:#FFF7C2 ;
        padding-bottom: 20px;
      }

      .merit_Con {
        width: 91.2%;
        max-width: 960px;
        margin: 0 auto;
      }
      .merit_sub_explain_main {
        max-width: 560px;
        margin: 20px auto;
        padding: 20px;
      }

      /*merit1*/
      .merit_Con_drive3x_top {
        background-color: #ffffff;
        margin-bottom: 0;
      }

      .merit_Con_drive3x_top_text_large {
        font-size: 1.25rem;
        line-height: 1.5;
        padding: 10px;
        margin-bottom: 0;
        font-weight: 600;
      }
      .merit_Con_drive3x_top_text_small {
        font-size: 14px;
        padding-left: 10px;
      }
      .merit_Con_drive3x_button {
        width: 100%;
        display: flex;
        position: relative;
        background-color: #002896;
        padding:10px ;
      }

      .merit_Con_drive3x_button_text {
        font-size: 1.2rem;
        margin: 0;
        color: #ffffff;
      }


      /*merit1_toggle*/
      .merit_Con_drive3x_under {
        background-color:#BBD7FF ;
      }

      .merit_Con_drive3x_under_inner {
        padding: 0px 20px;
        padding-bottom: 20px;
      }

      .merit_Con_drive3x_under_title {
        text-align: center;
        font-size: 1.5rem;
        padding: 20px;
        font-weight: 700;
        margin-bottom: 0;
      }
      .merit_Con_drive3x_under_app,
      .merit_Con_drive3x_under_registration,
      .merit_Con_drive3x_under_drive,
      .merit_Con_drive3x_under_get {
        background-color: #ffffff;
        padding: 10px;
        margin-bottom: 20px;
      }
      .merit_Con_drive3x_under_app_sub,
      .merit_Con_drive3x_under_registration_sub,
      .merit_Con_drive3x_under_drive_sub {
        margin: auto;
        width: 40%;
      }
      .merit_Con_drive3x_under_get_sub {
        width: 70%;
        margin: 0 auto;
      }

      .merit_Con_drive3x_under_app_title,
      .merit_Con_drive3x_under_registration_title,
      .merit_Con_drive3x_under_drive_title,
      .merit_Con_drive3x_under_get_title {
        font-size: 1.5rem;
        text-align: center;
        font-weight: 700;
        margin: 20px auto;
      }


      .merit_Con_drive3x_under_app_img {
        display: flex;
        width: 80%;
        margin: 0 auto;
      }
      .merit_Con_drive3x_under_app_imgcar {
        padding-right: 10%;
      }
  
      .merit_Con_drive3x_under_app_imgapp_ios {
        margin-bottom: 4%;
      }

      .merit_Con_drive3x_under_registration_title {
        margin-bottom: 5px;
      }

      .merit_Con_drive3x_under_registration_text {
        margin-bottom: 20px;
      }

      .merit_Con_drive3x_under_registration_small,
      .merit_Con_drive3x_under_get_text {
        text-align: center;
      }

      .merit_Con_drive3x_under_registration_img {
        width: 50%;
        margin: 0 auto;
        text-align: center;
      }
      .merit_Con_drive3x_under_drive_img,
      .merit_Con_drive3x_under_get_img {
        margin: 0 auto 10px ;
        width: 100%;
        padding: 5%;
      }
      .merit_Con_drive3x_under_get_small {
        font-size: 12px;
      }

      /*js*/
      .merit_Con_drive3x_button {
        list-style:none;
        display: inline-block;
        width: 100%;
        height: auto;
        background: #184892;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        padding:8px;
        border: 1px solid #184892;
      }

      .merit_Con_drive3x_button::-webkit-details-marker {
        display:none;
      }


      .merit_Con_drive3x_button span {
        position: relative;
        display: inline-block;
        width: 100%;
        font-size: 1.25rem;
      }

      .merit_Con_drive3x_button span::before,
      .merit_Con_drive3x_button span::after{
        content: "";
        width: 18px;
        height: 3px;
        position: absolute;
        background: #fff;
        top: 50%;
        right:0;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
      }

      .merit_Con_drive3x_button span::after{
        transform: translateY(-50%) rotate(90deg);
        -webkit-transform: translateY(-50%) rotate(90deg);
        -ms-transform: translateY(-50%) rotate(90deg);
        transition: all 0.2s ease-out;
      }

      .Toggle_area[open] .merit_Con_drive3x_button span::after {
        transform: translateY(-50%) rotate(180deg);
        -webkit-transform: translateY(-50%) rotate(180deg);
        -ms-transform: translateY(-50%) rotate(180deg);
        transition: all 0.2s ease-out;
      }
      /*js*/
      /*merit1_toggle*/
      /*merit1*/


       /*merit2-5*/
      .merit_other_title {
        text-align: center;
        margin: 40px auto 20px;
        max-width: 240px;
      }

      
      .button_area {
        background-color: #184892;
        position: relative;
      }

      .merit_Con_other_button {
        display: flex;
        padding: 10px;
        justify-content: center;
        font-size: 1.25rem;
        color: #ffffff;
      }
      .merit_Con_other_button a {
        color: #fff;
      }
      .icon {
          right: 25%;
          width: 10px;
          height: 10px;
          border-top: 2px solid #fff;
          border-right: 2px solid #fff;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          position: absolute;
          top: 40%;
      }

      .merit_Con_shop3x,
      .merit_Con_carservice,
      .merit_Con_hoken,
      .merit_Con_notification {
        max-width: 960px;
        background-color: #ffffff;
        margin-bottom:20px;
      }
      .merit_Con_notification_text_large {
        font-size: 1.5rem;
        line-height: 1.5;
        margin: 0px auto;
        padding-top: 10px;
        padding-bottom: 10px;
        /* width: 90%; */
        margin: 0 auto;
      }

      .merit_Con_drive3x_top_inner,
      .merit_Con_shop3x_inner,
      .merit_Con_carservice_inner,
      .merit_Con_hoken_inner,
      .merit_Con_notification_inner {
        padding: 10px;
      }

      .merit_Con_drive3x_top_text,
      .merit_Con_shop3x_text,
      .merit_Con_carservice_text,
      .merit_Con_hoken_text,
      .merit_Con_notification_text {
        font-size: 1rem;
        line-height: 1.5;
        margin: 0px auto;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 90%;
        margin: 0 auto;
      }
      /*merit2-5*/
      /*detail*/
      .detail_sub,
      .detail_Con_inner{
        padding: 4%;
        text-align: center;
        margin-bottom: 0.8rem;
      }

      .detail_Con_mycar {
        background-color:#FFFBE1 ;
        padding: 4%;
      }
      .detail_Con_non-mycar {
        background-color: #F1F1F1;
        padding: 4%;
      }
      /*detail*/
      /*othercam*/
      .othercam {
        text-align: center;
        margin:20px auto;
      }
      .othercam_bnr_area {
        padding: 4%;
        margin-bottom: 0.8rem;
      }
      .bnr_1 {
        max-width: 700px;
        margin: 0 auto;
      }
      /*othercam*/
      /*float*/
      #fixedbtn {
        width: 100%;
        position: fixed;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        transition: all .4s;
        background-color: rgba(0, 0, 0, 0.7);
       }
       .member_btn-float {
        margin: 10px auto;
        max-width: 80%;
        background-color: #bf0000;
        border-radius: 50px;
        color: #ffffff;
        padding: 20px 5px 20px 5px;
        font-size: 22px;
        text-align: center;
        font-weight: 700;
        box-shadow: 0px 1.25px 6px rgba(0, 0, 0, 0.2);
       }
       .member_btn-float a {
        color: #fff;
        text-decoration: none;
       }

      /*float*/


      /*pc*/
      @media screen and (min-width:599px) {
        /*mv*/
        .mv h1 {
          background: url(//carservice.r10s.jp/img/app/campaign/mycarthreetimes/pc/bg_pc.jpg)no-repeat;
          background-size: cover;
          background-position: center bottom;
        }
        .mv_sp{
          display:none;
        }
        .mv_pc {
          display: block;
          margin: 0 auto;
          text-align: center;
          max-width: 960px; 
        }
        /*mv*/
        /*common*/
        .sp{
          display:none;
        }
        .pc {
          display: block;
          margin: 0 auto;
          text-align: center;
        }
        h3 {
          font-size: 2rem;
        }
        h4 {
          font-size: 1.25rem;
        }
        /*common*/
        /*btn_area*/
        .btn_area {
          margin: 2% auto;
        }
        .member_btn {
          max-width: 560px;
          margin: 0 auto;
        }
        /*btn_area*/
        /*merit*/
        .merit_title {
          margin-bottom:2% ;
        }

        .merit_sub {
          margin-bottom:20px ;
        }
        .merit_sub_explain_main {
          max-width: 560px;
          margin: 20px auto;
          padding: 20px;
        }

        .merit_sub_explain_sub br{
          display:none;
        }
        
        /*merit1*/
        .merit_Con {
          margin-top: 2%;
          max-width: 680px;
        }
        .merit_Con_drive3x_title,
        .merit_Con_shop3x_title,
        .merit_Con_carservice_title,
        .merit_Con_hoken_title,
        .merit_Con_notification_title
         {
          max-width: 90%;
          margin: 0 auto;
        }
        .merit_Con_drive3x_top_text {
          max-width: 80%;
        }
        /*merit_toggle*/
        .merit_Con_drive3x_under_inner {
          padding-left: 10%;
          padding-right: 10%;
        }
        
        .merit_Con_drive3x_under_app_sub,
        .merit_Con_drive3x_under_registration_sub,
        .merit_Con_drive3x_under_drive_sub,
        .merit_Con_drive3x_under_get_sub {
          text-align: center;
        }
        .merit_Con_drive3x_under_app br,
        .merit_Con_drive3x_under_drive br,
        .merit_Con_drive3x_under_get br {
          display:none;
        }
        .merit_Con_drive3x_top_text {
          text-align: left;
        }
        .merit_Con_drive3x_top_text_large {
          font-size: 1.5rem;
        }
        .merit_Con_drive3x_top_text_small {
          font-size: 1.25rem;
        }
        .merit_Con_drive3x_button {
          padding-left: 10%;
          padding-right: 10%;
        }
        .merit_Con_drive3x_button span {
          font-size: 2rem;
        }
        .merit_Con_drive3x_under_app_imgapp {
          max-width: 50%;
        }
        .merit_Con_drive3x_under_app_imgapp img {
          width: 100%;
        }
        /*merit_toggle*/
        /*merit2-5*/
        .merit_other_title {
          max-width: 350px;
        }
        .merit_Con_shop3x,
        .merit_Con_carservice,
        .merit_Con_hoken,
        .merit_Con_notification {
        margin: 0 auto 40px;
        }
     
        .merit_other_inner {
          margin: 0 auto;
          max-width:960px ;
          padding: 0% 8%;
        }
        
        .merit_Con_drive3x_top_inner,
        .merit_Con_shop3x_inner,
        .merit_Con_carservice_inner,
        .merit_Con_hoken_inner,
        .merit_Con_notification_inner {
        padding: 5%;
        text-align: center;
        }

        .merit_other {
        max-width: 680px;
        margin: 4% auto;
        }

        .merit_other_inner {
        padding: 0;
        }

        .merit_Con_drive3x_under_app, 
        .merit_Con_drive3x_under_registration,
        .merit_Con_drive3x_under_drive, 
        .merit_Con_drive3x_under_get {
        padding: 30px;
        }
        .merit_Con_drive3x_under_app_sub, 
        .merit_Con_drive3x_under_registration_sub, 
        .merit_Con_drive3x_under_drive_sub {
        width: 20%;
        }
        .merit_Con_drive3x_under_get_sub {
        width: 50%;
        }

      .merit_Con_drive3x_text,
      .merit_Con_shop3x_text,
      .merit_Con_carservice_text,
      .merit_Con_hoken_text,
      .merit_Con_notification_text {
        text-align: left;
        font-size: 1.5rem;
        padding: 4% 5%;
      }
      .merit_Con_notification_text_large {
        text-align: left;
        font-size: 1.5rem;
        padding: 0% 0% 2% 0%;
      }
      /*merit2-5*/
      /*merit1-5*/
      .merit_Con_other_button span{
        font-size: 1.5rem;
      }
      .icon {
        width: 12px;
        height: 12px;
        top:36%;
      }
      .merit_Con_notification_text_small {
        font-size: 1.2rem;
        text-align: left;
      }
      /*detail*/ 
      .detail_Con_mycar_inner,
      .detail_Con_non-mycar_inner {
        max-width: 680px;
        margin: 0 auto;
      }
      /*detail*/
      /*float*/
      .member_btn-float {
        max-width: 560px;
      }
      }
      /*float*/
      /*ipad*/
      @media screen and (max-width:768px)and (min-width:599px) {
        h2 {
          font-size: 1rem;
        }
        .bnrArea_inner {
          width: 80%;
          margin: 40px auto;
        }
      }
      /*ipad*/
      /*sp_<350px*/
      @media screen and (max-width:350px) {
        .merit_Con_drive3x_button span {
          font-size: 1rem;
        }
        .merit_Con_other_button {
          font-size: 1rem;
        }
      
      
      }