@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: 6%;
    width: 19.5%;
}
.wrap_title {
    text-align: center;
}
.wrap_title .title_main {
    line-height: 1.25;
}
.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%;
}
/*車種ブロックの区切り罫（参考サイトに準拠：1px #d5d5d5 / 上下40px）*/
.car_summary + .car_summary {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #d5d5d5;
}
.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_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;
  }
}

/*---------- 車種名は画面幅に比例（540px以上はデザイン値） ----------*/
.car_model {
    font-size: 5.4vw;
}
@media (min-width: 540px) {
  .car_model {
    font-size: 29px;
  }
}

/*---------- Black Package のキャッチは1行に収まるよう画面幅に比例（540px以上は固定） ----------*/
.bp_catch {
    font-size: 5.2vw;
    letter-spacing: 0.02em;
}
@media (min-width: 540px) {
  .bp_catch {
    font-size: 28px;
  }
}

/*---------- SPデザイン（750px幅）準拠：ヒーローコピー ----------*/
/*「BMW 3シリーズ／SELL OUT FAIR」の2行。59 / 750 = 7.87vw、行送り 68.6 / 59*/
.wrap_hero .hero_copy {
    font-size: 7.87vw;
    line-height: 1.16;
    left: 7.1%;/* 53 / 750 */
    top: 9.8%;/*文字の上端がデザイン（FV 750×972）と同じ位置*/
    letter-spacing: 0.02em;
}

/*---------- SPデザイン準拠：見出し ----------*/
/*コンテンツ幅（90%）に比例し、最大幅550pxに達する611px以上は固定*/
.wrap_title .title_sub {
    font-size: 4.67vw;/* 35 / 750 */
}
.wrap_title .title_main {
    font-size: 12.67vw;/* 95 / 750 */
    line-height: 1.2;
}
.wrap_title .title_main .title_main_sub {
    font-size: 5.2vw;/* 39 / 750 */
}
@media (min-width: 611px) {
  .wrap_title .title_sub {
    font-size: 28.5px;
  }
  .wrap_title .title_main {
    font-size: 77.4px;
  }
  .wrap_title .title_main .title_main_sub {
    font-size: 31.8px;
  }
}

/*---------- SPデザイン準拠：バリューローン ----------*/
/*ラベル幅 253 / 700、金額の下に「お支払い回数（60回）」を1行で
  高さはデザイン（130 / 750）より少し低く、金額もそれに合わせて小さく*/
.loan_box,
.sec04 .loan_box {
    min-height: 15vw;/* 375pxで56px */
}
.loan_box .loan_label,
.sec04 .loan_box .loan_label {
    width: 36%;
    padding: 0.4em 0;
    font-size: 3.83vw;/* 29.8 / 750 × 0.9 / 0.933 */
}
.loan_box .loan_label .loan_label_note {
    font-size: 0.55em;/* 16.4 / 29.8 */
    margin-top: 0.2em;
}
.loan_box .loan_body,
.sec04 .loan_box .loan_body {
    width: 64%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0.35em 0 0.35em 6.2vw;/* 48 / 750 */
}
.loan_box .loan_value,
.sec04 .loan_box .loan_value {
    width: auto;
    font-size: 7.2vw;/* 375pxで27px */
    line-height: 1;
    text-align: left;
}
.loan_box .loan_value .tsukizuki,
.loan_box .loan_value .unit {
    font-size: 0.54em;/* 35 / 64.8 */
}
.loan_box .loan_value .kome {
    font-size: 0.31em;
}
.loan_box .loan_count,
.sec04 .loan_box .loan_count {
    width: auto;
    padding-left: 0.2em;
    margin-top: 0.35em;
    font-size: 2.2vw;/* 17 / 750 × 0.9 / 0.933 */
    font-weight: 400;
    letter-spacing: 0;
}
.loan_box .loan_count br {
    display: none;
}
@media (min-width: 611px) {
  .loan_box,
  .sec04 .loan_box {
    min-height: 92px;
  }
  .loan_box .loan_label,
  .sec04 .loan_box .loan_label {
    font-size: 23.4px;
  }
  .loan_box .loan_body,
  .sec04 .loan_box .loan_body {
    padding-left: 38px;
  }
  .loan_box .loan_value,
  .sec04 .loan_box .loan_value {
    font-size: 44px;
  }
  .loan_box .loan_count,
  .sec04 .loan_box .loan_count {
    font-size: 13.4px;
  }
}

/*---------- 見出しの上下の余白（少し広め） ----------*/
/*従来の上余白（layout.css の可変値）＋ 4vw、下にも 4vw*/
.fv_area .wrap_title {
    padding-top: calc(20px + 4vw);
    padding-bottom: 4vw;
}
@media (min-width: 360px) {
  .fv_area .wrap_title {
    padding-top: calc(20px + ((1vw - 3.6px)*2.712) + 4vw);
  }
}
@media (min-width: 611px) {
  .fv_area .wrap_title {
    padding-top: calc(20px + ((6.11px - 3.6px)*2.712) + 24.4px);
    padding-bottom: 24.4px;
  }
}

/*========== パターンB：写真の注記をFV画像の右下に配置（SPのみ） ==========*/
/*画像の高さ＝ 972 / 750 × 画面幅 ＝ 129.6vw。注記の下端をロゴの下端（画像下から6%）にそろえる*/
.fv_area {
    position: relative;
}
.hero_note {
    position: absolute;
    right: 3.5%;/* 26 / 750 */
    top: calc(129.6vw - 7.78vw);/* 画像下端から 6%（129.6vw × 0.06） */
    transform: translateY(-100%);
    width: auto;
    max-width: none;
    margin: 0;
    font-size: 2.67vw;/* 375pxで10px */
    line-height: 1.5;
    letter-spacing: 0;
    text-align: right;
    color: #262626;/*背景が明るいコンクリート面のため黒（コントラスト比 7.4）*/
}
@media (max-width: 337px) {
  .hero_note {
    font-size: 9px;
  }
}
@media (min-width: 487px) {
  .hero_note {
    font-size: 13px;
  }
}
/*「BMW M340i xDrive ツーリング／［オプション装着車］写真は欧州仕様です。／日本仕様と一部異なります。」の3行*/
.hero_note .nowrap {
    white-space: nowrap;
}
.hero_note .nowrap:nth-of-type(1)::before,
.hero_note .nowrap:nth-of-type(3)::before {
    content: "\A";
    white-space: pre;
}