@charset "UTF-8";
/* CSS Document */

/*改行しない*/
.nowrap {
    white-space: nowrap;
}
/*両端揃え*/
.txt_justify{
    text-align: justify;
}
/*テキスト下揃え*/
.baseline {
    vertical-align: -0.17em;/*「30万円分」は字形がベースラインより下に出るため、見た目の下端を合わせる*/
}
/*中央揃え*/
.txt_center {
    text-align: center;
}

/*---------- sec01 メインビジュアル ----------*/
.wrap_hero {
    position: relative;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
.wrap_hero .hero_img img {
    width: 100%;
}
.wrap_hero .hero_copy {
    position: absolute;
    left: 6.11%;/* 88 / 1440 */
    top: 8.85%;/*  62 / 700 */
    margin: 0;
}
.wrap_hero .hero_copy .hero_copy_en {
    margin-left: 0.08em;
}
.wrap_hero .hero_logo img {
    width: 100%;
}
.wrap_hero .hero_logo {
    position: absolute;
    left: 5.83%;/*  84 / 1440 */
    top: 74.57%;/* 522 / 700 */
    width: 7.15%;/* 103 / 1440 */
    margin: 0;
}

/*見出しは語のまとまりで折り返す（折り返してもセンター揃えのまま）*/
.wrap_title .tw,
.wrap_title .title_main_sub {
    display: inline-block;
}

/*---------- sec02 ご購入サポート ----------*/
.support_box {
    background-color: #eeeeef;
}
.support_price {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
}
.support_price_item {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}
.support_price_item .support_label {
    background-color: #0066b3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.support_price_item .support_value {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.support_plus {
    display: flex;
    align-items: center;
    justify-content: center;
}
.support_note {
    text-align: left;
    line-height: 1.67;
}
.support_xdrive {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
}

/*「（60回）」だけ Regular*/
.loan_count .cnt_r {
    font-weight: 400;
}

/*---------- sec03 ラインアップ ----------*/
.car_photo {
    display: block;
    position: relative;
}
.car_photo img {
    width: 100%;
}
/*写真内の左上シリーズナンバー*/
.car_photo .series_num {
    position: absolute;
    left: 4.04%;/* 19 / 470 */
    top: 3.98%;/* 14 / 352 */
    margin: 0;
    color: #fff;
    font-weight: 400;
    line-height: 1;
}
/*写真内の注記*/
.car_photo .photo_note {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.55%;
    margin: 0;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

/*---------- バリューローン ----------*/
.loan_box {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    background-color: #eeeeef;
}
.loan_box .loan_label {
    background-color: #717071;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.loan_box .loan_body {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1;
}
.loan_box .loan_value {
    text-align: center;
    white-space: nowrap;
}

/*---------- sec04 Black Package ----------*/
/*メインカットの上端までは白、以降が黒背景*/
.sec04 .bp_body {
    background-color: #0e0000;
    color: #fff;
}
.bp_main {
    position: relative;
}
.bp_main img {
    width: 100%;
}
.bp_main .series_num {
    position: absolute;
    left: 2.35%;/* 24 / 1020 */
    top: 5.6%;/*  28 / 500 */
    margin: 0;
    color: #fff;
    font-weight: 400;
    line-height: 1;
}
/*BLACK PACKAGE はアウトライン化したSVGを使用*/
.bp_main .bp_wordmark {
    position: absolute;
    left: 2.68%;/*  27 / 1020（デザイン実測） */
    bottom: 4.8%;/* 24 / 500 */
    width: 94.35%;/* 962 / 1020（cap高57px・BMW Type Next Bold） */
    margin: 0;
    opacity: .45;
}
.bp_main .bp_wordmark img {
    width: 100%;
    margin: 0;
}
.sec04 .loan_box {
    background-color: #fff;
}
.sec04 .loan_box .loan_value,
.sec04 .loan_box .loan_count {
    color: #262626;
}
.sec04 .note_all_15px,
.sec04 .bp_photo_note {
    color: #fff;
}

/*Black Package の詳細写真キャプションは Regular（デザイン実測）*/
.bp_detail_item .bp_photo_note {
    font-weight: 400;
}

/*写真キャプション（本文注釈より一段小さく）*/
.hero_note,
.bp_photo_note {
    font-size: 12px;
    letter-spacing: 0.02em;
}

/*---------- sec05 注釈 ----------*/
.wrap_note {
    border-top: #e6e6e6 1px solid;
}

/*---------- sec06 ディーラー ----------*/
.sec06 {
    background-color: #f2f2f2;
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wrap_footer {
    background-color: #fff;
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid #000;
}
.dealer_shop_name {
    display: flex;
    align-items: center;
}
.dealer_shop_name .icon_m {
    width: 2.4em;
    margin-left: 1.35em;
    margin-right: 0;
}
.dealer_txt_all_16px table {
    border-collapse: collapse;
}
.dealer_txt_all_16px td {
    vertical-align: top;
}
.dealer_txt_all_16px td:first-child {
    padding-right: 0.5em;
    white-space: nowrap;
}

/*---------- ボタン ----------*/
.button_gray {
    display: inline-block;
    width: 100%;
    text-align: center;
    cursor: pointer;
    margin-top: auto;
    background-color: #4d4d4d;
    color: #fff;
    /*アニメーションの指定*/
    transition: all .2s;
}
.button_gray:hover,/*ボタンの色が変わる*/
.button_gray:active {
    background-color: #262626;
}

.button_line {
    display: inline-block;
    width: 100%;
    text-align: center;
    outline: #262626 1px solid;
    background-color: #fff;
}
.button_line:hover,/*ボタンの色が変わる*/
.button_line:active {
    outline: #262626 2px solid;
}

/*footer コピーライト*/
.footer_copyright {
	color: #262626;
	display: block;
	text-align: center;
	padding-top: 26px;
	padding-bottom: 30px;
}

/*page top リンク */
.top_link {
    display: block;
    text-align: right;
}
#page_top a{
    color: #262626;
    cursor: pointer;
    display: inline-block;
    position: relative;
    text-align: right;
    text-decoration: none;
    font-size: 1.6rem;
    line-height: 2.9rem;
    padding-right: 3em;
    /*アニメーションの指定*/
    transition: all .2s;
}
#page_top a::after {
    content: '';
    width: 0.8em;
    height: 0.8em;
    border: 0;
    border-top: solid 1px #262626;
    border-right: solid 1px #262626;
    position: absolute;
    top: 50%;
    right: 0.9em;
    margin-top: -0.2em;
    transform: rotate(315deg);
    transition: all .2s;
}
#page_top a:hover,
#page_top a:active {
    color: #666;
}
#page_top a:hover::after,
#page_top a:active::after{
    border-top: solid 1px #666;
    border-right: solid 1px #666;
}

/*---------- 大きい文字はデザインどおり Light ----------*/
/*欧文 BMW Type Light ＋ 和文 Regular の組み合わせで、画の太さを揃える*/
.hero_copy,
.catch,
.car_photo .series_num,
.bp_main .series_num {
    font-family: "BMW Type Light", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "YuGothic", "meiryo", "Helvetica", "arial", sans-serif;
    font-weight: 400;
}

/*---------- 見出し「30万円分 オプション購入サポート」 ----------*/
/*1245px未満は「オプション購入／サポート」を2行にして「30万円分」の右に並べる（SP・1100pxデザイン）*/
/*inline-block のベースラインは最終行になるため、「サポート」と「30万円分」の下端（ベースライン）がそろう*/
.wrap_title .title_main {
    margin-top: 0.05em;
}
.wrap_title .title_main .title_main_sub {
    margin-left: 0;/*「30万円分」との間は半角スペース分*/
    line-height: 1.26;/* 行送り 49 / 39 */
    text-align: left;
    vertical-align: -0.17em;/*「30万円分」は字形がベースラインより下に出るため、見た目の下端を合わせる*/
}
/*PC（1245px以上）は1行（PCデザイン）*/
@media (min-width: 1245px) {
  .wrap_title .title_main {
    margin-top: 0.25em;
  }
  .wrap_title .title_main .title_main_sub {
    line-height: inherit;
    vertical-align: baseline;
  }
  .title_main .br_title {
    display: none;
  }
}
/*タブレット〜1100px：1100pxデザインの級数（35 / 95 / 39px）に画面幅で比例*/
@media (min-width: 768px) and (max-width: 1099px) {
  .wrap_title .title_sub {
    font-size: 3.18vw;/* 35 / 1100 */
  }
  .wrap_title .title_main {
    font-size: 8.64vw;/* 95 / 1100 */
  }
  .wrap_title .title_main .title_main_sub {
    font-size: 3.55vw;/* 39 / 1100 */
  }
}
/*1100〜1245px：1100pxデザイン（35 / 95 / 39px）から PC の級数へ近づける*/
@media (min-width: 1100px) and (max-width: 1244px) {
  .wrap_title .title_sub {
    font-size: calc(35px + ((100vw - 1100px) * 0.131));/* 19 / 145 */
  }
  .wrap_title .title_main {
    font-size: calc(95px + ((100vw - 1100px) * 0.0345));/* 5 / 145 */
  }
  .wrap_title .title_main .title_main_sub {
    font-size: calc(39px + ((100vw - 1100px) * 0.0138));/* 2 / 145 */
  }
}

/*リード文：タブレット〜1244pxでも2行目（スタッドレス〜3シリーズへ。）を1行に収める
  2行目は 37.3em、本文幅82% → 82 / 37.3 ≒ 2.18vw（1100pxで24px＝デザイン値）*/
@media (min-width: 768px) and (max-width: 1244px) {
  .wrap_title .lead {
    font-size: 2.18vw;
  }
}
@media (min-width: 1193px) and (max-width: 1244px) {
  .wrap_title .lead {
    font-size: 26px;
  }
}

/*---------- 「月々」と金額の間隔 ----------*/
.loan_value .tsukizuki,
.support_value .tsukizuki {
    margin-right: 0.42em;
}