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

/*可変余白
padding/margin: calc(X + ((1vw – Y)*Z));
X 最小値 ／ Z ＝（最大値 － 最小値）÷ 8.85
    360px-1245px の間で可変、1245px以上で最大値
*/

/*---------- sec01 ----------*/
/*サイズ24違い リード下の余白*/
.sec01 {
    padding-bottom: 27px;
}
@media (min-width: 360px) {
  .sec01 {
    padding-bottom: calc(27px + ((1vw - 3.6px)*3.616));
  }
}
@media (min-width: 1245px) {
  .sec01 {
    padding-bottom: 59px;
  }
}
.hero_note {
    margin-top: 0.5em;
}
/*サイズ24違い ヒーロー下タイトルまでの余白*/
.wrap_title {
    padding-top: 20px;
}
@media (min-width: 360px) {
  .wrap_title {
    padding-top: calc(20px + ((1vw - 3.6px)*2.712));
  }
}
@media (min-width: 1245px) {
  .wrap_title {
    padding-top: 44px;
  }
}
.wrap_title .title_main {
    margin-top: 0.25em;
}
.wrap_title .lead {
    margin-top: 0.75em;
}

/*---------- sec02 ----------*/
/*サイズ33違い ボックス内の上下パディング*/
.support_box {
    padding-top: 24px;
    padding-bottom: 24px;
}
@media (min-width: 360px) {
  .support_box {
    padding-top: calc(24px + ((1vw - 3.6px)*3.729));
    padding-bottom: calc(24px + ((1vw - 3.6px)*3.729));
  }
}
@media (min-width: 1245px) {
  .support_box {
    padding-top: 57px;
    padding-bottom: 57px;
  }
}
/*サイズ20違い 左右パディング*/
.support_box {
    padding-left: 28px;
    padding-right: 28px;
}
@media (min-width: 360px) {
  .support_box {
    padding-left: calc(28px + ((1vw - 3.6px)*2.260));
    padding-right: calc(28px + ((1vw - 3.6px)*2.260));
  }
}
@media (min-width: 1245px) {
  .support_box {
    padding-left: 48px;
    padding-right: 48px;
  }
}
/*サイズ20違い 金額ボックス下の注釈*/
.support_note {
    margin-top: 15px;
}
@media (min-width: 360px) {
  .support_note {
    margin-top: calc(15px + ((1vw - 3.6px)*1.921));
  }
}
@media (min-width: 1245px) {
  .support_note {
    margin-top: 32px;
  }
}
/*サイズ35違い xDriveブロック上の余白*/
.support_xdrive {
    margin-top: 25px;
}
@media (min-width: 360px) {
  .support_xdrive {
    margin-top: calc(25px + ((1vw - 3.6px)*3.390));
  }
}
@media (min-width: 1245px) {
  .support_xdrive {
    margin-top: 55px;
  }
}
.support_xdrive .txt_all_17px {
    margin-top: 1.1em;
}

/*---------- sec03 ----------*/
/*サイズ74違い セクション上の余白*/
.sec03 {
    padding-top: 49px;
}
@media (min-width: 360px) {
  .sec03 {
    padding-top: calc(49px + ((1vw - 3.6px)*7.458));
  }
}
@media (min-width: 1245px) {
  .sec03 {
    padding-top: 115px;
  }
}
/*サイズ29違い キャッチ下の余白*/
.sec03 .category {
    margin-top: 20px;
}
@media (min-width: 360px) {
  .sec03 .category {
    margin-top: calc(20px + ((1vw - 3.6px)*2.486));
  }
}
@media (min-width: 1245px) {
  .sec03 .category {
    margin-top: 42px;
  }
}
.car_summary h3 {
    margin-top: 1.02em;
}
.car_summary .txt_all_17px {
    margin-top: 0.5em;
}
.car_summary .car_model {
    margin-top: 1.58em;
}
.car_summary .car_price {
    margin-top: 0.15em;
}
.car_summary .loan_box {
    margin-top: 1.03em;
}
.car_summary .note_all_15px {
    margin-top: 1.05em;
}

/*---------- sec04 ----------*/
/*サイズ65違い セクション上の余白*/
.sec04 {
    padding-top: 48px;
}
@media (min-width: 360px) {
  .sec04 {
    padding-top: calc(48px + ((1vw - 3.6px)*7.119));
  }
}
@media (min-width: 1245px) {
  .sec04 {
    padding-top: 111px;
  }
}
/*可変 黒背景セクション下の余白*/
.sec04 .bp_body {
    padding-bottom: 57px;
}
@media (min-width: 360px) {
  .sec04 .bp_body {
    padding-bottom: calc(57px + ((1vw - 3.6px)*8.249));
  }
}
@media (min-width: 1245px) {
  .sec04 .bp_body {
    padding-bottom: 130px;
  }
}
/*先頭の子要素の margin-top が .bp_body の外に相殺されて
  黒背景が途切れるため、写真直下の余白は padding で確保する*/
.sec04 .bp_body {
    padding-top: 0.55em;
}
.bp_inner > .bp_photo_note {
    margin-top: 0;
}
.bp_photo_note {
    margin-top: 0.6em;
}
.bp_detail {
    margin-top: 0.8em;
}
/*サイズ68違い 詳細写真からキャッチまでの余白*/
.bp_catch {
    margin-top: 54px;
}
@media (min-width: 360px) {
  .bp_catch {
    margin-top: calc(54px + ((1vw - 3.6px)*7.571));
  }
}
@media (min-width: 1245px) {
  .bp_catch {
    margin-top: 121px;
  }
}
.sec04 .bp_lead {
    margin-top: 1.1em;
}
/*サイズ53違い リードから車種名までの余白*/
.sec04 .bp_price_box {
    margin-top: 45px;
}
@media (min-width: 360px) {
  .sec04 .bp_price_box {
    margin-top: calc(45px + ((1vw - 3.6px)*6.328));
  }
}
@media (min-width: 1245px) {
  .sec04 .bp_price_box {
    margin-top: 101px;
  }
}
.sec04 .car_price {
    margin-top: 0.26em;
}
.sec04 .loan_box {
    margin-top: 1.72em;
}
.sec04 .bp_price_box .note_all_15px {
    margin-top: 1.7em;
}

/*---------- sec05 注釈 ----------*/
/*サイズ36違い*/
.sec05 {
    padding-top: 28px;
}
@media (min-width: 360px) {
  .sec05 {
    padding-top: calc(28px + ((1vw - 3.6px)*4.068));
  }
}
@media (min-width: 1245px) {
  .sec05 {
    padding-top: 64px;
  }
}
/*サイズ70違い*/
.sec05 {
    padding-bottom: 43px;
}
@media (min-width: 360px) {
  .sec05 {
    padding-bottom: calc(43px + ((1vw - 3.6px)*5.763));
  }
}
@media (min-width: 1245px) {
  .sec05 {
    padding-bottom: 94px;
  }
}
.wrap_note {
    padding-top: 1.7em;
}
.wrap_note .note_all_15px + .note_all_15px {
    margin-top: 1.3em;
}

/*---------- sec06 ディーラー ----------*/
/*サイズ36違い*/
.sec06 {
    padding-top: 30px;
}
@media (min-width: 360px) {
  .sec06 {
    padding-top: calc(30px + ((1vw - 3.6px)*4.068));
  }
}
@media (min-width: 1245px) {
  .sec06 {
    padding-top: 66px;
  }
}
.wrap_dealer_name {
    margin-top: 0;
}
.wrap_dealer_name .dealer_name_box {
    margin-top: 0;
    line-height: 1.4;
}
/*サイズ48違い ディーラー名の上の余白（2件目以降）*/
.dealer_shop_box + .wrap_dealer_name {
    margin-top: 22px;
}
@media (min-width: 360px) {
  .dealer_shop_box + .wrap_dealer_name {
    margin-top: calc(22px + ((1vw - 3.6px)*5.424));
  }
}
@media (min-width: 1245px) {
  .dealer_shop_box + .wrap_dealer_name {
    margin-top: 70px;
  }
}
/*サイズ37違い 店舗ブロックの間隔*/
.dealer_shop_box {
    margin-top: 28px;
}
@media (min-width: 360px) {
  .dealer_shop_box {
    margin-top: calc(28px + ((1vw - 3.6px)*4.181));
  }
}
@media (min-width: 1245px) {
  .dealer_shop_box {
    margin-top: 65px;
  }
}
.wrap_dealer_name + .dealer_shop_box {
    margin-top: 15px;
}
/*サイズ86違い 最終店舗からトップに戻るまでの余白*/
.top_link {
    margin-top: 68px;
}
@media (min-width: 360px) {
  .top_link {
    margin-top: calc(68px + ((1vw - 3.6px)*10.395));
  }
}
@media (min-width: 1245px) {
  .top_link {
    margin-top: 160px;
  }
}
.sec06 .top_link {
    padding-bottom: 12px;
}