@charset "UTF-8";
/* CSS Document */
/* モバイル（〜767px） */

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

/*---------- 共通の段組み ----------*/
.wrap_title,
.sec02,
.sec03,
.sec05,
.sec04 .bp_inner,
.wrap_dealer,
.hero_note {
    width: 90%;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}
.hero_note {
    text-align: right;
}

/*---------- sec01 ----------*/
.wrap_hero {
    max-width: 100%;
}
.wrap_hero .hero_copy {
    left: 6.5%;
    top: 5.5%;
    letter-spacing: 0.02em;
}
.wrap_hero .hero_copy .hero_copy_en {
    display: block;
    margin-left: 0;
}
.wrap_hero .hero_logo {
    left: 6.5%;
    top: auto;
    bottom: 5%;
    width: 21%;
}
.wrap_title {
    text-align: center;
}
.wrap_title .title_main {
    line-height: 1.25;
}
.title_main .title_main_sub {
    display: block;
}
.lead {
    text-align: left;
}

/*---------- sec02 ご購入サポート ----------*/
.support_price {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.support_price_item {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}
.support_price_item .support_label {
    width: 42%;
    padding: 0.7em 0;
}
.support_price_item .support_value {
    width: 58%;
    padding: 0.35em 0;
}
.support_plus {
    width: 100%;
    padding: 0.35em 0;
}
.support_note {
    text-align: left;
}
.support_note p + p {
    margin-top: 0.3em;
}
.support_xdrive {
    display: flex;
    flex-direction: column;
}
.support_xdrive_txt,
.support_xdrive_photo {
    width: 100%;
}
.support_xdrive_photo {
    margin-top: 1.2em;
}
.support_headline br {
    display: none;
}

/*---------- sec03 ラインアップ ----------*/
.category {
    display: flex;
    flex-direction: column;
}
.car_summary {
    width: 100%;
}
.car_summary + .car_summary {
    margin-top: 3em;
}
.car_photo .series_num {
    font-size: 26px;
}
@media (min-width: 360px) {
  .car_photo .series_num {
    font-size: calc(26px + ((1vw - 3.6px)*3.390));
  }
}
/*モバイルは写真内に収まらないため写真の下に配置*/
.car_photo .photo_note {
    position: static;
    margin-top: 0.4em;
    color: #262626;
    text-align: left;
    font-size: 11px;
    letter-spacing: 0;
}

/*---------- バリューローン ----------*/
.loan_box .loan_label {
    width: 38%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.loan_box .loan_body {
    width: 62%;
}
.loan_box .loan_value {
    width: 62%;
}
.loan_box .loan_count {
    width: 38%;
    padding-left: 0.6em;
}

/*---------- sec04 Black Package ----------*/
.sec04 .bp_head {
    background-image: linear-gradient(to bottom, #fff 0, #fff 30%, #0e0000 30%, #0e0000 100%);
}
.sec04 .bp_main {
    width: 90%;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}
.bp_main .series_num {
    font-size: 40px;
}
@media (min-width: 360px) {
  .bp_main .series_num {
    font-size: calc(40px + ((1vw - 3.6px)*2.260));
  }
}
.bp_main .bp_wordmark {
    font-size: 26px;
    letter-spacing: 0.22em;
}
@media (min-width: 360px) {
  .bp_main .bp_wordmark {
    font-size: calc(26px + ((1vw - 3.6px)*1.356));
  }
}
.bp_photo_note {
    text-align: right;
}
.bp_detail {
    display: flex;
    flex-direction: column;
}
.bp_detail_item {
    width: 100%;
}
.bp_detail_item + .bp_detail_item {
    margin-top: 1.2em;
}
.bp_detail_item .bp_photo_note {
    text-align: left;
}
.bp_lead {
    text-align: justify;
}
.bp_lead br {
    display: none;
}
.sec04 .bp_price_box {
    width: 100%;
}
.sec04 .loan_box .loan_label {
    width: 38%;
}
.sec04 .loan_box .loan_body {
    width: 62%;
}
/*モバイルでは Black Package のローン表記もカードと同じ大きさに*/
.sec04 .loan_label {
    font-size: 14px;
}
.sec04 .loan_value {
    font-size: 21px;
}
.sec04 .loan_count {
    font-size: 11px;
}

/*---------- sec06 ディーラー ----------*/
.sec06 {
    max-width: 100%;
    margin: auto;
}
.dealer_shop_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 3em;
}
.dealer_photo,
.dealer_btn_box {
    width: 100%;
}
.dealer_photo img {
    width: 100%;
}
.dealer_explan {
    width: 100%;
    margin-bottom: 1em;
}
.dealer_shop_name {
    margin-bottom: 0.5em;
}
.dealer_name_sub {
    display: block;
    margin-left: 0;
}
.dealer_shop_box + .wrap_dealer_name {
    margin-top: 3em;
}
.dealer_btn_box {
    display: block;
}
.dealer_btn {
    width: 100%;
    margin-top: 10px;
}

 /*順番がえ*/
.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
}

/*---------- フッター ----------*/
.wrap_footer {
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.footer_copyright {
    padding-top: 18px;
    padding-bottom: 40px;
}

/*---------- モバイルでは長い nowrap の折り返しを許可 ----------*/
.lead .nowrap,
.bp_lead .nowrap,
.bp_catch .nowrap,
.support_note .nowrap,
.hero_note .nowrap,
.car_photo .photo_note .nowrap,
.bp_photo_note .nowrap {
    white-space: normal;
}

/*---------- 狭い画面では店舗情報の表が収まるよう一段小さく ----------*/
.dealer_txt_all_16px {
    font-size: 14px;
}
@media (min-width: 320px) {
  .dealer_txt_all_16px {
    font-size: calc(14px + ((1vw - 3.2px)*1.250));
  }
}
@media (min-width: 480px) {
  .dealer_txt_all_16px {
    font-size: 16px;
  }
}