@charset "UTF-8";
/* CSS Document */
/* タブレット（768px〜1023px）：PCレイアウトを踏襲し、幅の狭い環境向けに再指定 */

/*表示、非表示指定*/
.tb_area,
.pc_tb_area {
  display:block;
}
.sp_area,
.sp_tb_area,
.pc_area {
  display:none;
}

/*---------- 共通の段組み ----------*/
.wrap_title,
.sec02,
.sec03,
.sec05,
.sec04 .bp_inner,
.wrap_dealer,
.hero_note {
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}
.hero_note {
    max-width: 1250px;
    text-align: right;
}
@media all and (max-width: 1245px) {
    .wrap_title,
    .sec02,
    .sec03,
    .sec05,
    .sec04 .bp_inner,
    .wrap_dealer {
        width: 82%;
    }
    .hero_note {
        width: 87%;
    }
}

/*---------- sec01 ----------*/
.wrap_title {
    text-align: center;
}

/*---------- sec02 ご購入サポート ----------*/
.support_price_item_01 {
    width: 38.96%;/* 360 / 924 */
}
.support_price_item_01 .support_label {
    width: 44.44%;/* 160 / 360 */
}
.support_price_item_01 .support_value {
    width: 55.56%;/* 200 / 360 */
}
.support_plus {
    width: 11.26%;/* 104 / 924 */
}
.support_price_item_02 {
    width: 49.78%;/* 460 / 924 */
}
.support_price_item_02 .support_label {
    width: 34.78%;/* 160 / 460 */
}
.support_price_item_02 .support_value {
    width: 65.22%;/* 300 / 460 */
}
.support_price_item .support_value {
    padding-top: 0.35em;
    padding-bottom: 0.35em;
}
.support_xdrive_txt {
    width: 53.46%;/* 494 / 924 */
}
.support_xdrive_photo {
    width: 42.21%;/* 390 / 924 */
}

/*---------- sec03 ラインアップ ----------*/
.category {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
}
.car_summary {
    width: 46.08%;/* 470 / 1020 */
    display: flex;
    flex-direction: column;
}
.car_photo .series_num {
    font-size: 56px;
}
@media (min-width: 360px) {
  .car_photo .series_num {
    font-size: calc(26px + ((1vw - 3.6px)*3.390));
  }
}
@media (min-width: 1245px) {
  .car_photo .series_num {
    font-size: 56px;
  }
}
.car_photo .photo_note {
    font-size: 9px;
}
@media (min-width: 900px) {
  .car_photo .photo_note {
    font-size: calc(9px + ((1vw - 9px)*0.290));
  }
}
@media (min-width: 1245px) {
  .car_photo .photo_note {
    font-size: 10px;
  }
}

/*---------- バリューローン ----------*/
.loan_box .loan_label {
    width: 36.17%;/* 170 / 470 */
    padding-top: 0.45em;
    padding-bottom: 0.45em;
}
.loan_box .loan_body {
    width: 63.83%;/* 300 / 470 */
}
.loan_box .loan_value {
    width: 62%;/* 190 / 300 */
}
.loan_box .loan_count {
    width: 38%;/* 110 / 300 */
}

/*---------- sec04 Black Package ----------*/
.sec04 .bp_head {
    background-image: linear-gradient(to bottom, #fff 0, #fff 37.4%, #0e0000 37.4%, #0e0000 100%);
}
.sec04 .bp_main {
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}
@media all and (max-width: 1245px) {
    .sec04 .bp_main {
        width: 82%;
    }
}
.bp_main .series_num {
    font-size: 115px;
}
@media (min-width: 360px) {
  .bp_main .series_num {
    font-size: calc(48px + ((1vw - 3.6px)*7.571));
  }
}
@media (min-width: 1245px) {
  .bp_main .series_num {
    font-size: 115px;
  }
}
.bp_main .bp_wordmark {
    font-size: 77px;
}
@media (min-width: 360px) {
  .bp_main .bp_wordmark {
    font-size: calc(32px + ((1vw - 3.6px)*5.085));
  }
}
@media (min-width: 1245px) {
  .bp_main .bp_wordmark {
    font-size: 77px;
  }
}
.bp_photo_note {
    text-align: right;
}
.bp_detail {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.bp_detail_item {
    width: 50%;/* 510 / 1020 */
}
.bp_detail_item img {
    width: 100%;
}
.bp_detail_item + .bp_detail_item {
    margin-left: 1px;
}
.bp_detail_item .bp_photo_note {
    text-align: left;
}
.sec04 .bp_price_box {
    width: 76.47%;/* 780 / 1020 */
    margin-left: auto;
    margin-right: auto;
}
.sec04 .loan_box .loan_label {
    width: 35.9%;/* 280 / 780 */
    padding-top: 0.55em;
    padding-bottom: 0.55em;
}
.sec04 .loan_box .loan_body {
    width: 64.1%;/* 500 / 780 */
}
.sec04 .loan_box .loan_value {
    width: 62%;
}
.sec04 .loan_box .loan_count {
    width: 38%;
}

/*---------- sec06 ディーラー ----------*/
.dealer_shop_box {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
}
.dealer_photo {
    width: 34.80%;/* 355 / 1020 */
}
.dealer_photo img {
    width: 100%;
}
.dealer_explan {
    flex: 1;
    padding-left: 2.84%;/* 29 / 1020 */
    padding-right: 0.8em;
}
.dealer_btn_box {
    width: 29.41%;/* 300 / 1020 */
}
.dealer_btn + .dealer_btn {
    margin-top: 27px;
}
.dealer_shop_name {
    margin-bottom: 0.55em;
}


/*---------- タブレット用の再指定 ----------*/
@media all and (max-width: 1023px) {
    .wrap_title,
    .sec02,
    .sec03,
    .sec05,
    .sec04 .bp_inner,
    .sec04 .bp_main,
    .wrap_dealer {
        width: 90%;
    }
    .hero_note {
        width: 92%;
    }
}

/*---------- バリューローンの金額はカラム幅に合わせて再調整 ----------*/
.loan_box .loan_value {
    font-size: calc(22px + ((1vw - 7.68px)*2.516));
}
@media (min-width: 1245px) {
  .loan_box .loan_value {
    font-size: 34px; 
  }
}
/*Black Package は一回り大きく*/
.sec04 .loan_box .loan_value {
    font-size: calc(26px + ((1vw - 7.68px)*3.145));
}
@media (min-width: 1245px) {
  .sec04 .loan_box .loan_value {
    font-size: 41px; 
  }
}
.loan_box .loan_count {
    letter-spacing: 0;
}

/*---------- タブレットでは写真内に収まらないため写真の下に配置 ----------*/
.car_photo .photo_note {
    position: static;
    margin-top: 0.4em;
    color: #262626;
    text-align: left;
    font-size: 11px;
    letter-spacing: 0;
}

/*コンテンツ幅が1020pxのときは写真とボタンをデザイン幅で固定
  （それ未満では3カラムが収まらないため、各列を比率どおり縮める）*/
@media (min-width: 1245px) {
  .dealer_photo,
  .dealer_btn_box {
    flex-shrink: 0;
  }
}

/*---------- バリューローンの列比率（コンテンツ幅1020pxのときのデザイン実測値） ----------*/
@media (min-width: 1245px) {
  .loan_box .loan_value {
    width: 69.7%;/* 209 / 300 */
  }
  .loan_box .loan_count {
    width: 30.3%;/*  91 / 300 */
  }
  .sec04 .loan_box .loan_value {
    width: 75%;/* 375 / 500 */
  }
  .sec04 .loan_box .loan_count {
    width: 25%;/* 125 / 500 */
  }
}

/*---------- 店舗情報は900px以下で縦並び（過去LP踏襲） ----------*/
@media all and (max-width: 900px) {
    .dealer_shop_box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
    }
    .dealer_photo,
    .dealer_btn_box {
        width: 100%;
    }
    .dealer_explan {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 1em;
    }
    .dealer_btn_box {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
    }
    .dealer_btn {
        width: 48.5%;
    }
    .dealer_btn + .dealer_btn {
        margin-top: 0;
    }
     /*順番がえ*/
    .shop_child_00 {
        -webkit-box-ordinal-group:0;
        -ms-flex-order:0;
        -webkit-order:0;
        order: 0
    }
    .shop_child_01 {
        -webkit-box-ordinal-group:1;
        -ms-flex-order:1;
        -webkit-order:1;
        order: 1
    }
    .shop_child_02 {
        -webkit-box-ordinal-group:2;
        -ms-flex-order:2;
        -webkit-order:2;
        order: 2
    }
}