@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;700;900&family=Roboto:wght@300&display=swap');


/**
 * Common Style
 * ================================================================================
 * Table of Contents:
 *
 * Base Settings
 * Layout Settings
 * Component Settings
 * Utility Settings
 * Content Settings
 * Colorbox Settings
 * ================================================================================
 */



/**
 * ================================================================================
 * Base Settings
 * ================================================================================
 */

#productsDmMazdasp {
  background-color: #363c46;
  display: block;
  position: relative;
  color: #999;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#productsDmMazdasp *,
#productsDmMazdasp *::before,
#productsDmMazdasp *::after {
  box-sizing: border-box;
}

.header {
  background-color: #FFF;
  position: relative;
  z-index: 500;
}

#headerNavArea {
  position: relative;
  z-index: 499;
}

.dirpath {
  margin-top: 0;
}

.footer {
  margin-top: 0 !important;
}

#productsDmMazdasp img {
  width: 100%;
}

#productsDmMazdasp strong {
  font-weight: bold;
}

#productsDmMazdasp a {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.2s ease-in;
  text-decoration: none;
}

#productsDmMazdasp a:hover {
  opacity: 0.6;
}

@media only screen and (max-width: 767px) {
  #productsDmMazdasp a:hover {
    opacity: 1;
  }
}



/**
 * ================================================================================
 * Layout Settings
 * ================================================================================
 */


/**
 * Wrapper
 * -------------------------------
 */

#productsDmMazdasp .l-wrapper {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

@media only screen and (max-width: 767px) {
  #productsDmMazdasp .l-wrapper {
    width: 100%;
    padding: 0 15px;
  }
}



/**
 * ================================================================================
 * Component Settings
 * ================================================================================
 */

/**
 * List / Comments / Caution / Caption
 * -------------------------------
 */

#productsDmMazdasp .c-lists,
#productsDmMazdasp .c-comments {
  list-style: none;
}

#productsDmMazdasp .c-lists > li,
#productsDmMazdasp .c-comments > li {
  padding-left: 1em;
  text-indent: -1em;
}


/**
 * Animation
 * -------------------------------
 */

.c-animate {
  display: block;
  transition-property: all;
  transition-timing-function: ease-out;
}
img.c-animate {
  display: inline-block;
}

/* -- .c-animateMoveX01 -- */
.c-animateMoveX01 {
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.6s;
  transform: translate(30px, 0);
}
.c-animateMoveX01.c-animated {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

/* -- .c-animateMoveX02 -- */
.c-animateMoveX02 {
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.6s;
  transform: translate(-30px, 0);
}
.c-animateMoveX02.c-animated {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

/* -- .c-animateMoveY01 -- */
.c-animateMoveY01 {
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.6s;
  transform: translate(0, 30px);
}
.c-animateMoveY01.c-animated {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

/* -- .c-animateMoveY02 -- */
.c-animateMoveY02 {
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.6s;
  transform: translate(0, -30px);
}
.c-animateMoveY02.c-animated {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

/* -- .c-animateScaleX01 -- */
.c-animateScaleX01 {
  visibility: hidden;
  transition-duration: 0.6s;
  transform: scale(0, 1);
  transform-origin: 50% 0;
}
.c-animateScaleX01.c-animated {
  visibility: visible;
  transform: scale(1, 1);
}

/* -- .c-animateScaleX02 -- */
.c-animateScaleX02 {
  visibility: hidden;
  transition-duration: 0.6s;
  transform: scale(0, 1);
  transform-origin: 0 0;
}
.c-animateScaleX02.c-animated {
  visibility: visible;
  transform: scale(1, 1);
}

/* -- .c-animateScaleY01 -- */
.c-animateScaleY01 {
  visibility: hidden;
  transition-duration: 0.6s;
  transform: scale(1, 0);
  transform-origin: 0 50%;
}
.c-animateScaleY01.c-animated {
  visibility: visible;
  transform: scale(1, 1);
}

/* -- .c-animateScaleY02 -- */
.c-animateScaleY02 {
  visibility: hidden;
  transition-duration: 0.6s;
  transform: scale(1, 0);
  transform-origin: 0 0;
}
.c-animateScaleY02.c-animated {
  visibility: visible;
  transform: scale(1, 1);
}

/* -- .c-animateBlur01 -- */
.c-animateBlur01 {
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.6s;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.c-animateBlur01.c-animated {
  opacity: 1;
  visibility: visible;
  -webkit-filter: blur(0);
  filter: blur(0);
}

/* -- .c-animateBlur02 -- */
.c-animateBlur02 {
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition-duration: 1s;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.c-animateBlur02.c-animated {
  opacity: 1;
  visibility: visible;
  -webkit-filter: blur(0);
  filter: blur(0);
}

@media only screen and (max-width: 767px) {
  /* -- .c-animateMoveX01 -- */
  .c-animateMoveX01 {
    transform: translate(15px, 0);
  }

  /* -- .c-animateMoveX02 -- */
  .c-animateMoveX02 {
    transform: translate(-15px, 0);
  }

  /* -- .c-animateMoveY01 -- */
  .c-animateMoveY01 {
    transform: translate(0, 15px);
  }

  /* -- .c-animateMoveY02 -- */
  .c-animateMoveY02 {
    transform: translate(0, -15px);
  }
}



/**
 * ================================================================================
 * Utility Settings
 * ================================================================================
 */

/**
 * Device
 * -------------------------------
 */

@media all and (min-width: 768px) {
  .u-isSP:not(.u-lg) {
    display: none;
  }
}
@media all and (max-width: 767px) {
  .u-isPC:not(.u-sm) {
    display: none;
  }
}


/**
 * Clearfix
 * -------------------------------
 */

.u-clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.u-clearfix::before {
  content: '';
  display: block;
  clear: both;
}

.u-clearfix {
  display: block;
}


/**
 * Text Align
 * -------------------------------
 */

.u-taLeft {
  text-align: left !important;
}

.u-taRight {
  text-align: right !important;
}

.u-taCenter {
  text-align: center !important;
}


/**
 * Overflow
 * -------------------------------
 */

@media only screen and (max-width: 767px) {
  .u-overflowXScrollSP {
    overflow-x: scroll;
  }
}



/**
 * ================================================================================
 * Content Settings
 * ================================================================================
 */

/**
 * Main Visual
 * -------------------------------
 */

#productsDmMazdasp .mv {
  position: relative;
  z-index: 2;
  line-height: 1;
}

#productsDmMazdasp .mv::before,
#productsDmMazdasp .mv::after {
  position: absolute;
  z-index: -1;
  width: 50%;
  height: 369px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  content: '';
}

#productsDmMazdasp .mv::before {
  left: 0;
  bottom: 65px;
  background-image: url('/files/cdb/ZZ/products/d-mirror/mazda_sp/2309/zz_products_d-mirror_mazda-sp_mv-mask01.png');
}

#productsDmMazdasp .mv::after {
  right: 0;
  bottom: -304px;
  background-image: url('/files/cdb/ZZ/products/d-mirror/mazda_sp/2309/zz_products_d-mirror_mazda-sp_mv-mask02.png');
}

/* -- .mvTtl -- */
#productsDmMazdasp .mvTtl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: calc(100vw * (602 / 1400) + 404px);
  overflow: hidden;
}

/* -- .mvAnchor -- */
#productsDmMazdasp .mvAnchor {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 934px;
  margin: 0 auto;
  padding-top: calc(100vw * (602 / 1400));
  padding-bottom: 0;
}

#productsDmMazdasp .mvAnchor::after {
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50vw);
  width: 100vw;
  height: 75px;
  background: linear-gradient(0deg, rgba(0,0,0,0) 10%, rgba(0,0,0,1) 90%);
  opacity: 0.6;
  content: '';
}

#productsDmMazdasp .mvAnchor > li {
  width: 33.3333%;
}

#productsDmMazdasp .mvAnchor > li > a {
  display: block;
  color: #999;
}

#productsDmMazdasp .mvAnchorInner {
  position: relative;
}

#productsDmMazdasp .mvAnchorInner > dt {
  display: block;
}

#productsDmMazdasp .mvAnchorInner > dd {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  font-size: 2.3rem;
  font-weight: 300;
  text-align: center;
  letter-spacing: 0.05em;
}

#productsDmMazdasp .mvAnchorNew {
  display: inline-block;
  margin-right: 10px;
  color: #e83b18;
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {
  /* -- .mvTtl -- */
  #productsDmMazdasp .mvTtl {
    height: calc(1280px * (602 / 1400) + 404px);
  }

  /* -- .mvAnchor -- */
  #productsDmMazdasp .mvAnchor {
    padding-top: calc(1280px * (602 / 1400));
  }
}
@media only screen and (max-width: 767px) {
  #productsDmMazdasp .mv::before,
  #productsDmMazdasp .mv::after {
    height: calc(369px * 0.6);
  }

  #productsDmMazdasp .mv::before {
    bottom: calc(65px * 0.6);
  }

  #productsDmMazdasp .mv::after {
    bottom: calc(-304px * 0.6);
  }

  /* -- .mvTtl -- */
  #productsDmMazdasp .mvTtl {
    height: calc((100vw * (602 / 750) * 0.6) + (404px * 0.6));
  }

  /* -- .mvAnchor -- */
  #productsDmMazdasp .mvAnchor {
    width: 100%;
    padding-top: calc(100vw * (602 / 750) * 0.6);
    padding-left: 15px;
    padding-right: 15px;
  }

  #productsDmMazdasp .mvAnchor::after {
    bottom: calc(-150px * 0.5);
    height: calc(75px * 0.5);
  }

  #productsDmMazdasp .mvAnchor > li {
    width: 33.3333%;
  }

  #productsDmMazdasp .mvAnchorInner > dd {
    bottom: 0;
    font-size: 1.4rem;
  }

  #productsDmMazdasp .mvAnchorRoadster > dd {
    font-size: 1.1rem;
    bottom: -5px;
  }

  #productsDmMazdasp .mvAnchorNew {
    margin-right: 5px;
  }
}


/**
 * Lead
 * -------------------------------
 */

#productsDmMazdasp .lead {
  position: relative;
  z-index: 1;
  margin-top: -65px;
  padding-top: calc(100vw * (550 / 1400));
  padding-bottom: 220px;
  background-color: #191c23;
  background-image: url('/files/cdb/ZZ/products/d-mirror/mazda_sp/2509/zz_products_d-mirror_mazda-sp_lead-bg.jpg');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
}

#productsDmMazdasp .lead::before,
#productsDmMazdasp .lead::after {
  position: absolute;
  content: '';
}

#productsDmMazdasp .lead::before {
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 738px;
  background-image: url('/files/cdb/ZZ/products/d-mirror/mazda_sp/2309/zz_products_d-mirror_mazda-sp_lead-mask.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
}

#productsDmMazdasp .lead::after {
  bottom: 60px;
  left: 50%;
  transform: translateX(-50vw);
  width: 100vw;
  height: 75px;
  background: linear-gradient(0deg, rgba(0,0,0,0) 10%, rgba(0,0,0,1) 90%);
  opacity: 0.6;
  content: '';
}

/* -- .leadTtl -- */
#productsDmMazdasp .leadTtl {
  margin-bottom: calc(100vw * (330 / 1400));
  color: #999;
  font-size: 3.0rem;
  font-weight: 300;
  text-align: center;
  letter-spacing: 0.2em;
  line-height: 1.4;
}

/* -- .leadChart -- */
#productsDmMazdasp .leadChart {
  color: #b3b3b3;
}

#productsDmMazdasp .leadChart > dt {
  display: block;
  margin-bottom: 10px;
  font-size: 2.0rem;
  font-weight: 200;
}

#productsDmMazdasp .leadChartTable {
  width: 100%;
  table-layout: fixed;
}

#productsDmMazdasp .leadChartTable th,
#productsDmMazdasp .leadChartTable td {
  border: 1px solid #b3b3b3;
  font-size: 1.7rem;
  font-weight: 300;
  text-align: center;
  vertical-align: middle;
}

#productsDmMazdasp .leadChartTable th {
  padding: 15px 0;
  background-color: rgba(255, 255, 255, 0.1);
  letter-spacing: -0.05em;
}

#productsDmMazdasp .leadChartTable td {
  height: 80px;
  padding: 0 25px;
}

#productsDmMazdasp .leadChartComments {
  margin-top: 20px;
  font-size: 1.6rem;
}

#productsDmMazdasp .leadChartComments > li {
  font-weight: 300;
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {
  #productsDmMazdasp .lead {
    padding-top: calc(1280px * (550 / 1400));
  }
  
  #productsDmMazdasp .leadTtl {
    margin-bottom: calc(1280px * (330 / 1400));
  }
}
@media only screen and (max-width: 767px) {
  #productsDmMazdasp .lead {
    margin-top: calc(-65px * 0.6);
    padding-top: calc(100vw * (570 / 750) * 0.95);
    padding-bottom: 90px;
    background-position: 50% calc(100vw * (95 / 750));
    background-size: 150% auto;
  }

  #productsDmMazdasp .lead::before {
    height: calc(738px * 0.6);
  }
  
  #productsDmMazdasp .lead::after {
    bottom: calc(60px * 0.3);
    height: calc(75px * 0.5);
  }

  /* -- .leadTtl -- */
  #productsDmMazdasp .leadTtl {
    margin-bottom: calc(100vw * (330 / 750) * 0.78);
    font-size: 1.5rem;
    line-height: 1.2;
  }

  /* -- .leadChart -- */
  #productsDmMazdasp .leadChart > dt {
    margin-bottom: 5px;
    font-size: 1.3rem;
  }

  #productsDmMazdasp .leadChartTable {
    width: 250%;
  }

  #productsDmMazdasp .leadChartTable th,
  #productsDmMazdasp .leadChartTable td {
    font-size: 1.1rem;
  }

  #productsDmMazdasp .leadChartTable th {
    padding: 5px 0;
  }

  #productsDmMazdasp .leadChartTable td {
    height: 45px;
    padding: 0 10px;
  }

  #productsDmMazdasp .leadChartComments {
    margin-top: 10px;
    font-size: 1.0rem;
  }
}
  

/**
 * Lineup
 * -------------------------------
 */

#productsDmMazdasp .lineup {
  position: relative;
  z-index: 2;
  margin-top: -10px;
  padding-bottom: calc(100vw * (110 / 1400));
}

/* -- .lineupTtl -- */
#productsDmMazdasp .lineupTtl {
  padding-bottom: 15px;
  margin-bottom: 108px;
  text-align: center;
}

#productsDmMazdasp .lineupTtlMain {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 6.1rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.05em;
}

#productsDmMazdasp .lineupTtlBar {
  display: inline-block;
  width: 161px;
  height: 2px;
  background-color: #999;
}

/* -- .lineupList -- */
#productsDmMazdasp .lineupList > li {
  position: relative;
  z-index: 1;
  margin-top: calc(100vw * (345 / 1400));
}

#productsDmMazdasp .lineupList > li:nth-of-type(1) {
  margin-top: 0;
}

#productsDmMazdasp .lineupList > li::before {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50% 0;
  content: '';
}

#productsDmMazdasp .lineupList > li:nth-of-type(1):before,
#productsDmMazdasp .lineupList > li:nth-of-type(5):before {
  top: 23px;
  height: 1780px;
  background-image: url('/files/cdb/ZZ/products/d-mirror/mazda_sp/2309/zz_products_d-mirror_mazda-sp_lineup01-bg.png');
}

#productsDmMazdasp .lineupList > li:nth-of-type(3):before,
#productsDmMazdasp .lineupList > li:nth-of-type(7):before {
  top: -69px;
  height: 1755px;
  background-image: url('/files/cdb/ZZ/products/d-mirror/mazda_sp/2309/zz_products_d-mirror_mazda-sp_lineup04-bg.png');
}

/* .lineupListInner */
#productsDmMazdasp .lineupList > li:nth-child(even) .lineupListInner {
  text-align: left;
}

#productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListInner {
  text-align: right;
}

#productsDmMazdasp .lineupList > li.lineup09 .lineupListInner {
  text-align: right !important;
}

/* .lineupListTtl */
#productsDmMazdasp .lineupListTtl {
  display: inline-flex;
  align-items: center;
  position: absolute;
  top: -55px;
  z-index: 2;
  min-width: 330px;
  height: 100px;
  padding-left: 30px;
  background-color: #0065ff;
  color: #b3b3b3;
  font-family: 'Roboto', sans-serif;
  font-size: 4.0rem;
  letter-spacing: 0.05em;
}

#productsDmMazdasp .lineupList > li:nth-child(even) .lineupListTtl {
  left: 0;
  justify-content: flex-start;
}

#productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListTtl {
  right: 0;
  justify-content: flex-end;
}

#productsDmMazdasp .lineupList > li.lineup09 .lineupListTtl {
  right: 0 !important;
  justify-content: flex-end !important;
}

#productsDmMazdasp .lineupListTtl::before,
#productsDmMazdasp .lineupListTtl::after {
  position: absolute;
  top: 0;
  height: 100%;
  content: '';
}

#productsDmMazdasp .lineupListTtl::before {
  width: 100vw;
  background-color: #0065ff;
}

#productsDmMazdasp .lineupListTtl::after {
  width: 54px;
}

#productsDmMazdasp .lineupList > li:nth-child(even) .lineupListTtl::before {
  left: -100vw;
}

#productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListTtl::before {
  right: -100vw;
}

#productsDmMazdasp .lineupList > li.lineup09 .lineupListTtl::before {
  right: -100vw !important;
}

#productsDmMazdasp .lineupList > li:nth-child(even) .lineupListTtl::after {
  right: -54px;
  background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #0065ff 50.5%) no-repeat top left/100% 100%;
}

#productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListTtl::after {
  left: -54px;
  background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #0065ff 50.5%) no-repeat top left/100% 100%;
}

#productsDmMazdasp .lineupList > li.lineup09 .lineupListTtl::after {
  left: -54px !important;
  background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #0065ff 50.5%) no-repeat top left/100% 100% !important;
}

/* .lineupListBody */
#productsDmMazdasp .lineupListBody {
  display: inline-flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  width: 745px;
  min-height: 546px;
  padding-top: 90px;
  padding-bottom: 90px;
  background-color: #c8c8c8;
  color: #4d4d4d;
  text-align: left;
}

#productsDmMazdasp .lineupList > li:nth-child(even) .lineupListBody {
  justify-content: flex-start;
}

#productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListBody {
  justify-content: flex-end;
}

#productsDmMazdasp .lineupList > li.lineup09 .lineupListBody {
  justify-content: flex-end !important;
}

#productsDmMazdasp .lineupListBody::before,
#productsDmMazdasp .lineupListBody::after {
  position: absolute;
  top: 0;
  height: 100%;
  content: '';
}

#productsDmMazdasp .lineupListBody::before {
  width: 100vw;
  background-color: #c8c8c8;
}

#productsDmMazdasp .lineupListBody::after {
  width: 160px;
}

#productsDmMazdasp .lineupList > li:nth-child(even) .lineupListBody::before {
  left: -100vw;
}

#productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListBody::before {
  right: -100vw;
}

#productsDmMazdasp .lineupList > li.lineup09 .lineupListBody::before {
  right: -100vw !important;
}

#productsDmMazdasp .lineupList > li:nth-child(even) .lineupListBody::after {
  right: -160px;
  background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #c8c8c8 50.5%) no-repeat top left/100% 100%;
}

#productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListBody::after {
  left: -160px;
  background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #c8c8c8 50.5%) no-repeat top left/100% 100%;
}

#productsDmMazdasp .lineupList > li.lineup09 .lineupListBody::after {
  left: -160px !important;
  background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #c8c8c8 50.5%) no-repeat top left/100% 100% !important;
}

/* .lineupListLead */
#productsDmMazdasp .lineupListLead {
  font-size: 2.4rem;
  font-weight: 500;
}

/* .lineupListDlist */
#productsDmMazdasp .lineupListDlist {
  margin-top: 30px;
}

#productsDmMazdasp .lineupListDlist > dt {
  display: block;
  margin-bottom: 10px;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

#productsDmMazdasp .lineupListDlist > dd {
  font-size: 1.7rem;
  letter-spacing: 0.05em;
}

/* .lineupListComments */
#productsDmMazdasp .lineupListComments {
  margin-top: 30px;
}

#productsDmMazdasp .lineupListComments > li {
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}

/* .lineupListSlider */
#productsDmMazdasp .lineupListSlider {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: calc(100vw * (884 / 1400));
  margin-top: calc(100vw * (150 / 1400));
}

#productsDmMazdasp .lineupList > li:nth-child(even) .lineupListSlider {
  right: 0;
}

#productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListSlider {
  left: 0;
}

#productsDmMazdasp .lineupList > li.lineup09 .lineupListSlider {
  left: 0 !important;
}

.lineupListSliderMain {
  position: relative;
  z-index: 1;
}

.lineupListSliderNav {
  display: flex;
  align-items: flex-start;
  position: absolute;
  top: calc(100vw * (415 / 1400));
  z-index: 2;
  margin-left: calc(100vw * (-8 / 1400));
}

#productsDmMazdasp .lineupList > li:nth-child(even) .lineupListSliderNav {
  left: calc(100vw * (185 / 1400));
}

#productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListSliderNav {
  left: calc(100vw * (100 / 1400));
}

#productsDmMazdasp .lineupList > li.lineup09 .lineupListSliderNav {
  left: calc(100vw * (100 / 1400)) !important;
}

.lineupListSliderNavItem {
  position: relative;
  width: calc(100vw * (144 / 1400));
  margin-left: calc(100vw * (8 / 1400));
  border: 1px solid #7092a3;
  border-radius: calc(100vw * (6 / 1400));
  overflow: hidden;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s all ease-out;
}

.lineupListSliderNavItem.slick-current::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #7092a3;
  opacity: 0.65;
  content: '';
}

.lineupListSliderNavItem:hover {
  opacity: 0.6;
}

.lineupListSliderNavItem.slick-current:hover {
  opacity: 1;
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {
  #productsDmMazdasp .lineup {
    padding-bottom: calc(1280px * (110 / 1400));
  }
  
  /* -- .lineupList -- */
  #productsDmMazdasp .lineupList > li {
    margin-top: calc(1280px * (345 / 1400));
  }

  /* .lineupListSlider */
  #productsDmMazdasp .lineupListSlider {
    width: calc(1280px * (884 / 1400));
    margin-top: calc(1280px * (150 / 1400));
  }

  .lineupListSliderNav {
    top: calc(1280px * (415 / 1400));
    margin-left: calc(1280px * (-8 / 1400));
  }

  #productsDmMazdasp .lineupList > li:nth-child(even) .lineupListSliderNav {
    left: calc(1280px * (185 / 1400));
  }

  #productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListSliderNav {
    left: calc(1280px * (100 / 1400));
  }
  
  #productsDmMazdasp .lineupList > li.lineup09 .lineupListSliderNav {
    left: calc(1280px * (100 / 1400)) !important;
  }

  .lineupListSliderNavItem {
    width: calc(1280px * (144 / 1400));
    margin-left: calc(1280px * (8 / 1400));
    border-radius: calc(1280px * (6 / 1400));
  }
}
@media only screen and (max-width: 767px) {
  #productsDmMazdasp .lineup {
    margin-top: -5px;
    padding-bottom: calc(100vw * (110 / 750) * 4.0);
  }

  /* -- .lineupTtl -- */
  #productsDmMazdasp .lineupTtl {
    padding-bottom: 10px;
    margin-bottom: 40px;
  }

  #productsDmMazdasp .lineupTtlMain {
    font-size: 2.8rem;
  }

  #productsDmMazdasp .lineupTtlBar {
    width: 80px;
    height: 2px;
  }

  /* -- .lineupList -- */
  #productsDmMazdasp .lineupList > li {
    margin-top: calc(100vw * (345 / 750) * 1.6);
  }

  #productsDmMazdasp .lineupList > li:nth-of-type(1):before,
  #productsDmMazdasp .lineupList > li:nth-of-type(5):before {
    top: 10px;
    height: calc(1780px * 0.5);
  }
  
  #productsDmMazdasp .lineupList > li:nth-of-type(3):before,
  #productsDmMazdasp .lineupList > li:nth-of-type(7):before {
    top: -30px;
    height: calc(1755px * 0.5);
  }

  /* .lineupListTtl */
  #productsDmMazdasp .lineupListTtl {
    top: -25px;
    min-width: 50%;
    height: 50px;
    padding-left: 15px;
    font-size: 1.9rem;
  }
  
  #productsDmMazdasp .lineupList > li:nth-child(even) .lineupListTtl {
    padding-left: 15px;
  }
  
  #productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListTtl {
    padding-right: 15px;
  }
  
  #productsDmMazdasp .lineupList > li.lineup09 .lineupListTtl {
    padding-right: 15px !important;
  }

  #productsDmMazdasp .lineupListTtl::before {
    display: none;
  }

  #productsDmMazdasp .lineupListTtl::after {
    width: 20px;
  }

  #productsDmMazdasp .lineupList > li:nth-child(even) .lineupListTtl::after {
    right: -20px;
  }

  #productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListTtl::after {
    left: -20px;
  }
  
  #productsDmMazdasp .lineupList > li.lineup09 .lineupListTtl::after {
    left: -20px !important;
  }

  /* .lineupListBody */
  #productsDmMazdasp .lineupListBody {
    width: 90%;
    min-height: auto;
    padding-top: 40px;
    padding-bottom: 50px;
  }
  
  #productsDmMazdasp .lineupList > li:nth-child(even) .lineupListBody {
    padding-right: 15px;
  }
  
  #productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListBody {
    padding-left: 15px;
  }
  
  #productsDmMazdasp .lineupList > li.lineup09 .lineupListBody{
    padding-left: 15px !important;
  }

  #productsDmMazdasp .lineupListBody::before {
    width: 15px;
  }
  
  #productsDmMazdasp .lineupList > li:nth-child(even) .lineupListBody::before {
    left: -15px;
  }

  #productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListBody::before {
    right: -15px;
  }
  
  #productsDmMazdasp .lineupList > li.lineup09 .lineupListBody::before {
    right: -15px !important;
  }

  #productsDmMazdasp .lineupListBody::after {
    width: 40px;
  }

  #productsDmMazdasp .lineupList > li:nth-child(even) .lineupListBody::after {
    right: -40px;
  }

  #productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListBody::after {
    left: -40px;
  }
  
  #productsDmMazdasp .lineupList > li.lineup09 .lineupListBody::after {
    left: -40px !important;
  }
  
  /* .lineupListLead */
  #productsDmMazdasp .lineupListLead {
    font-size: 1.3rem;
  }

  /* .lineupListDlist */
  #productsDmMazdasp .lineupListDlist {
    margin-top: 15px;
  }

  #productsDmMazdasp .lineupListDlist > dt {
    margin-bottom: 5px;
    font-size: 1.2rem;
    letter-spacing: normal;
  }

  #productsDmMazdasp .lineupListDlist > dd {
    font-size: 1.1rem;
    letter-spacing: normal;
  }

  /* .lineupListComments */
  #productsDmMazdasp .lineupListComments {
    margin-top: 15px;
  }

  #productsDmMazdasp .lineupListComments > li {
    font-size: 1.0rem;
    letter-spacing: normal;
  }

  /* .lineupListSlider */
  #productsDmMazdasp .lineupListSlider {
    position: absolute;
    top: 100%;
    transform: translateY(0);
    z-index: 3;
    width: 110%;
    margin-top: -40px;
  }

  .lineupListSliderNav {
    top: calc(100vw * (415 / 750) * 0.9);
    margin-left: -5px;
  }

  #productsDmMazdasp .lineupList > li:nth-child(even) .lineupListSliderNav {
    left: calc(100vw * (185 / 750));
  }

  #productsDmMazdasp .lineupList > li:nth-child(odd) .lineupListSliderNav {
    left: calc(100vw * (100 / 750) * 0.7);
  }
  
  #productsDmMazdasp .lineupList > li.lineup09 .lineupListSliderNav {
    left: calc(100vw * (100 / 750) * 0.7) !important;
  }

  .lineupListSliderNavItem {
    width: calc(100vw * (144 / 750) * 0.95);
    margin-left: 5px;
    border-radius: 4px;
  }

  .lineupListSliderNavItem:hover {
    opacity: 1;
  }
}


/**
 * Bottom
 * -------------------------------
 */

#productsDmMazdasp .bottom {
  position: relative;
  z-index: 1;
  padding-top: 170px;
  padding-bottom: 170px;
}

#productsDmMazdasp .bottom::before {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 1503px;
  background-image: url('/files/cdb/ZZ/products/d-mirror/mazda_sp/2309/zz_products_d-mirror_mazda-sp_lbottom-bg.png');
  background-repeat: no-repeat;
  background-position: 50% bottom;
  background-size: 100% 100%;
  content: '';
}

/* -- .bottomTtl -- */
#productsDmMazdasp .bottomTtl {
  text-align: center;
}

#productsDmMazdasp .bottomTtl img {
  width: 404px;
}

@media only screen and (max-width: 767px) {
  #productsDmMazdasp .bottom {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  #productsDmMazdasp .bottom::before {
    height: calc(1503px * 0.5);
  }

  /* -- .bottomTtl -- */
  #productsDmMazdasp .bottomTtl img {
    width: 70%;
  }
}