/** -------------------------------
 * mainview
 */
#mainview {
  background-color: rgba();/*@edit #000 → rgba()*/
}
  #mainview > .wrap {
    position: relative;
    width: 100%;
  }
    #mainview .swiper-container {}
      #mainview .swiper-wrapper {}
        #mainview .swiper-slide {
          position: relative;
          padding-top: 106.666%;
        }
          #mainview .bg {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            padding-top: 93.333%;
            background-repeat: no-repeat;
            background-position: center top;
            background-size: cover;
          }
          #mainview .swiper-slide > .wrap {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
          }
            #mainview .inner {
              position: relative;
              width: 100%;
              height: 100%;
            }
              #mainview .inner .copy {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                display: block;
              }

/* item01 */
#mainview .item01 {
  overflow: hidden;
}
  #mainview .item01 .bg {
    background-image: url(../i_IMAGES/SP/pfa01.jpg);
    transition: 1.0s ease-in;
    -o-transition: 1.0s ease-in;
    -moz-transition: 1.0s ease-in;
    -webkit-transition: 1.0s ease-in;
    opacity: 0;
  }
  #mainview .item01.show .bg {
    opacity: 1;
  }
    #mainview .item01 .inner {

    }
      /* copy */
      #mainview .item01 .inner .copy {
        position: absolute;
        left: 0;
        top: 1.2%;
        display: block;
        width: 100%;
        transition: 1.0s ease-in 3.15s;
        -o-transition: 1.0s ease-in 3.15s;
        -moz-transition: 1.0s ease-in 3.15s;
        -webkit-transition: 1.0s ease-in 3.15s;
        opacity: 0;
      }
      #mainview .item01.show .inner .copy {
        opacity: 1;
      }
        #mainview .item01 .inner .copy span {
          display: block;
          padding-top: 93.333%;
          /*background-image: url(../i_IMAGES/SP/mainview01_copy01.png);*/
          background-repeat: no-repeat;
          background-size: contain;
        }

/* item02 */
#mainview .item02 {
  overflow: hidden;
}
  #mainview .item02 .bg {
    background-image: url(../i_IMAGES/SP/pfa02.jpg);
  }
    #mainview .item02 .inner {

    }
      /* copy */
      #mainview .item02 .inner .copy {
        /*transition: 1.0s ease-in;
        -o-transition: 1.0s ease-in;
        -moz-transition: 1.0s ease-in;
        -webkit-transition: 1.0s ease-in;
        opacity: 0;*/
      }
      #mainview .item02.show .inner .copy {
        opacity: 1;
      }
        #mainview .item02 .inner .copy span {
          display: block;
          padding-top: 93.333%;
          /*background-image: url(../i_IMAGES/SP/mainview02_copy01.png);*/
          background-repeat: no-repeat;
          background-size: contain;
        }
  #mainview .item02 .btn {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
  }
    #mainview .item02 .btn a {
      display: block;
      width: 100%;
      height: 13.333vw;
      background-color: #c3002f;
      color: #fff;
      text-align: center;
    }
      #mainview .item02 .btn a span {
        display: inline-block;
        height: 13.333vw;
        padding-right: 6vw;
        padding-top: 4.2vw;
        background-image: url(../i_IMAGES/swiper_next_white.png);
        background-repeat: no-repeat;
        background-position: right;
        background-size: auto 3.066vw;
        font-size: 3.2vw;
        white-space: nowrap;
      }

  /* aside */
  #mainview .aside {
    position: absolute; 
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
    #mainview .aside > .wrap {
      position: relative;
      width: 100%;
      height: 100%;
      transition: 1.0s ease-in;
      -o-transition: 1.0s ease-in;
      -moz-transition: 1.0s ease-in;
      -webkit-transition: 1.0s ease-in;
      opacity: 0;
    }
    #mainview .item01.show .aside > .wrap {
      opacity: 1;
    }
    #mainview .item02 .aside > .wrap {
      opacity: 1;
    }
      #mainview .aside .content {

      }
        #mainview .aside .price {
          position: absolute;
          /*right: 4%;*/
          left: 4%;
          bottom: -3%;/* -1% */
          z-index: 2;
          margin-bottom: 18%;
        }
          #mainview .aside .price dl {
            white-space: nowrap;
          }
            #mainview .aside .price dt {
              font-size: 9px;
              font-size: 2.4vw;
              color: #000;
              line-height: 1.1;
            }
            #mainview .aside .price dd {
              padding-top: 1.2%;
              font-size: 23px;
              font-size: 6.133vw;
              font-weight: bold;
              color: #000;
              line-height: 1.1;
            }
              #mainview .aside .price em {
                padding-left: 2%;
                font-size: 16px;
                font-size: 4.266vw;
                vertical-align: middle;
              }
        #mainview .aside .button {
          position: absolute;
          bottom: 0;
          z-index: 2;
          width: 50%;/* 試乗車・展示車検索クローズ：50%*/
          background-color: #000;
          border-top: 1px solid #555;
        }
/*        #mainview .item02 .aside .button {
          width: 100%;
        }*/
        #mainview .aside .button.carSearch {
          left: 0;
        }
        #mainview .aside .button.quotation {
          right: 0;
          border-left: 1px solid #555;
        }
          #mainview .aside .button.carSearch a {
            display: table;
            width: 100%;
            height: 13.333vw;
            background-color: #c3002f;
            background-repeat: no-repeat;
            background-position: 1.4vw;
            background-size: auto 10vw;
          }
          #mainview .aside .button.quotation a {
            display: table;
            width: 100%;
            height: 13.333vw;
            background-color: #000;
            background-repeat: no-repeat;
            background-position: 1.4vw;
            /*background-position: 25.4vw;*/
            /* 試乗車・展示車検索クローズ：1.4vw*/
            background-size: auto 10vw;
          }
          #mainview .aside .button.carSearch a { background-image: url(../i_IMAGES/icon_carSearch02.png); }
          #mainview .aside .button.quotation a { background-image: url(../i_IMAGES/icon_quotation.png); }
            #mainview .aside .button span {
              display: table-cell;
              font-size: 13px;
              font-size: 3.466vw;
              color: #fff;
              line-height: 1.1;
              vertical-align: middle;
              text-align: center;/* 試乗車・展示車検索クローズ */
            }
          #mainview .aside .button.carSearch span {
              padding-left: 8.4vw;
          }

/* swiper ctrl */
#mainview .swiper-button-prev {
  display: none;
}
#mainview .swiper-button-next {
  display: none;
}
#mainview .swiper-pagination {
  clear: both;
  left: 0;
  bottom: 0;
  width: 100%;
  margin-bottom: -17.6vw;
  padding-right: 2.666vw;
  text-align: center;
}
#mainview .swiper-pagination.none {
  display: none;
}
  #mainview .swiper-pagination-bullet {
    position: relative;
    width: 24vw;
    height: 13.5vw;
    margin-left: 2.4vw;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    opacity: 1;
  }
  #mainview .swiper-pagination-bullet:nth-child(2) {
    background-image: url(../i_IMAGES/pfa_thumb01.jpg);
  }
  #mainview .swiper-pagination-bullet:nth-child(1) {
    background-image: url(../i_IMAGES/pfa_thumb02.jpg);
  }
  #mainview .swiper-pagination-bullet-active {

  }
  #mainview .swiper-pagination-bullet-active:after {
    content: '';
    position: absolute;
    left: -0.8vw;
    top: -0.8vw;
    right: -0.8vw;
    bottom: -0.8vw;
    display: block;
    background-color: rgba(255,255,255,0.3);
    border: 1px solid #c3002c;
  }





/** -------------------------------
 * section | information
 */
.section#information {
  margin-top: 26%;
}
  .section#information > .wrap {}
    .section#information .content {
      margin-top: 0.333vw;
    }
      .section#information .content > .wrap {

      }
        .section#information .swiper-container {

        }
          .section#information .swiper-wrapper {

          }
            .section#information .swiper-slide {
              padding: 0.666vw 0;
            }
              .section#information .swiper-slide a {
                display: block;
                width: 80vw;
                margin: 0 auto;
                border: 1px solid #ccc;
                border-radius: 0 0 0.8vw 0.8vw;
                -moz-border-radius: 0 0 0.8vw 0.8vw;
                -webkit-border-radius: 0 0 0.8vw 0.8vw;
                box-shadow: 0 0 1.333vw rgba(0,0,0,0.2);
                -moz-box-shadow: 0 0 1.333vw rgba(0,0,0,0.2);
                -webkit-box-shadow: 0 0 1.333vw rgba(0,0,0,0.2);
              }
                .section#information .swiper-slide a > .wrap {
                  position: relative;
                  display: block;
                  min-height: 52vw;
                  padding-bottom: 10vw;
                }
                  .section#information .swiper-slide .image {
                    display: block;
                  }
                  .section#information .swiper-slide .image.pc {
                    display: none;
                  }
                  .section#information .swiper-slide .description {
                    display: block;
                    padding: 0 4vw;
                    padding-top: 3vw;
                    font-size: 12px;
                    font-size: 3.2vw;
                    color: #000;
                    line-height: 1.5;
                  }
                  .section#information .swiper-slide .button {
                    position: absolute;
                    right: 4vw;
                    bottom: 2vw;            }
                    .section#information .swiper-slide .button em {
                      position: relative;
                      display: table;
                      width: 24vw;
                      height: 8vw;
                      background-color: #eee;
                      float: right;
                    }
                    .section#information .swiper-slide .button em:after {
                      content: '';
                      position: absolute;
                      right: 3.3vw;
                      top: 50%;
                      width: 1.6vw;
                      height: 2.4vw;
                      margin-top: -1.2vw;
                      background-image: url(../i_IMAGES/arrow_red.png);
                      background-repeat: no-repeat;
                      background-position: right;
                      background-size: auto 2.4vw;
                    }
                      .section#information .swiper-slide .button em i {
                        display: table-cell;
                        padding-left: 3.3vw;
                        font-size: 12px;
                        font-size: 3.2vw;
                        font-style: normal;
                        color: #000;
                        line-height: 1.1;
                        vertical-align: middle;
                      }
        .section#information .swiper-button-prev {
          display: none;
        }
        .section#information .swiper-button-next {
          display: none;
        }
        .section#information .swiper-pagination {
          display: none;
        }





/** -------------------------------
 * section | gradeRanking
 */
.section#gradeRanking {
  /*display: none;*/
}
  .section#gradeRanking > .wrap {}
    .section#gradeRanking .content {
      margin-top: 0.333vw;
    }
      .section#gradeRanking .content > .wrap {

      }
        .section#gradeRanking .swiper-container {

        }
          .section#gradeRanking .swiper-wrapper {

          }
            .section#gradeRanking .swiper-slide {
              width: 100%;
              /*margin-top: 4vw;*/
            }
              .section#gradeRanking .content .item {
                position: relative;
                display: block;
                width: 80vw;
                margin: 0 auto;
                padding-top: 30%;
                color: #000;
              }
                .section#gradeRanking .content .item .image {
                  position: absolute;
                  left: 0;
                  top: 6.933vw;
                  right: 0;
                  display: block;
                  height: 24vw;
                  background-repeat: no-repeat;
                  background-position: left top;
                  background-size: contain;
                }
                .section#gradeRanking .content .item01 .image { background-image: url(../i_IMAGES/SP/gradeRanking_img01.jpg); }
                .section#gradeRanking .content .item02 .image { background-image: url(../i_IMAGES/SP/gradeRanking_img02.jpg); }
                .section#gradeRanking .content .item03 .image { background-image: url(../i_IMAGES/SP/gradeRanking_img03.jpg); }
                .section#gradeRanking .content .item .num {
                  position: absolute;
                  left: 0;
                  top: 0;
                  display: table;
                  width: 6.933vw;
                  height: 6.933vw;
                  background-color: #fff;
                  border: 1px solid #b4b4b4;
                }
                  .section#gradeRanking .content .item .num em {
                    display: table-cell;
                    font-size: 16px;
                    font-size: 4.266vw;
                    font-style: normal;
                    font-weight: bold;
                    color: #666;
                    line-height: 1.1;
                    text-align: center;
                    vertical-align: middle;
                  }
                .section#gradeRanking .content .item dl {
                  position: absolute;
                  left: 50%;
                  top: 6%;
                }
                  .section#gradeRanking .content .item dt {
                    font-size: 12px;
                    font-size: 3.2vw;
                    font-weight: bold;
                    line-height: 1.5;
                  }
                  .section#gradeRanking .content .item dd {
                    margin-top: 4%;
                    font-size: 13px;
                    font-size: 3.466vw;
                    line-height: 1.5;
                  }
                    .section#gradeRanking .content .item dd b {
                      font-weight: bold;
                    }
              .section#gradeRanking .content .simulation {
                position: relative;
                display: block;
                width: 40.667%;
                margin-left: 50%;
                margin-top: 2.7%;
                padding-right: 3%;
                background-color: #c3002c;
                color: #fff;
              }
                .section#gradeRanking .content .simulation span {
                  display: block;
                  padding: 6% 8%;
                  background-image: url(../i_IMAGES/arrow_white.png);
                  background-repeat: no-repeat;
                  background-position: right;
                  background-size: auto 2.4vw;
                  font-size: 10px;
                  font-size: 2.666vw;
                }
/*          .section#gradeRanking .swiper-button-prev,
          .section#gradeRanking .swiper-button-next,
          .section#gradeRanking .swiper-pagination {
            display: none;
          }*/
          .section#gradeRanking .swiper-button-prev {
            left: 2.4vw;
            top: 13vw;
            width: 3.2vw;
            height: 4.666vw;
            margin-top: 0;
            background-image: url(../i_IMAGES/swiper_prev_red.png);
            background-size: contain;
          }
          .section#gradeRanking .swiper-button-prev.swiper-button-disabled {
            background-image: url(../i_IMAGES/swiper_prev_gray.png);
            opacity: 0.25;
          }
          .section#gradeRanking .swiper-button-next {
            right: 2.4vw;
            top: 13vw;
            width: 3.2vw;
            height: 4.666vw;
            margin-top: 0;
            background-image: url(../i_IMAGES/swiper_next_red.png);
            background-size: contain;
          }
          .section#gradeRanking .swiper-button-next.swiper-button-disabled {
            background-image: url(../i_IMAGES/swiper_next_gray.png);
            opacity: 0.25;
          }
    .section#gradeRanking .link {
      clear: both;
      margin-top: 10%;
    }
      .section#gradeRanking .link ul {
        display: table;
        margin: 0 auto;
      }
        .section#gradeRanking .link li {
          display: table-cell;
          padding: 0 5.3vw;
        }
        .section#gradeRanking .link li:first-child {
            /* border-right: 1px solid #c1c1c1;　試乗車・展示車検索クローズ */
        }
          .section#gradeRanking .link a {
            display: block;
            padding: 0.5vw 0;
          }
            .section#gradeRanking .link span {
              display: block;
              padding-right: 4.8vw;
              background-image: url(../i_IMAGES/arrow_red.png);
              background-repeat: no-repeat;
              background-position: right;
              background-size: auto 3.066vw;
              font-size: 13px;
              font-size: 3.466vw;
              color: #333;
              line-height: 1.1;
              white-space: nowrap;
            }




/** -------------------------------
 * nim
 */
#nim {
  clear: both;
  position: relative;
  margin-top: 20%/*@edit 15% → 20%*/;
  padding: 0 4%;
}
  #nim > .wrap {
    /*transition: 0.75s ease-out;
    -o-transition: 0.75s ease-out;
    -moz-transition: 0.75s ease-out;
    -webkit-transition: 0.75s ease-out;
    opacity: 0;*/
  }
  #nim .eos {
    font-size: 3.733vw;
    padding: 3.667% 0;
  }
  #nim.show > .wrap {
    opacity: 1;
  }
    #nim .logo {
      padding-top: 70.9%;/*56.5216%*/
      background-image: url(../i_IMAGES/SP/nim.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }





/** -------------------------------
 * usp
 */
.usp {
  clear: both;
  margin-top: 16vw;
  /*padding-top: 12.8vw;*/
}
  .usp > .wrap {
    display: block;
  }
    /* header */
    .usp .header {
      position: relative;
      padding: 0 4%;
    }
      .usp .header dl {

      }
        .usp .header dt {
          display: block;
          height: 5.733vw;
          background-repeat: none;
          background-size: contain;
          background-position: left;
        }
        .usp .header dd {
          display: block;
          height: 18.133vw;
          background-repeat: none;
          background-size: contain;
          background-position: left;
        }
          .usp .header span {
            display: none;
          }
    /* content */
    .usp .content {
      margin-top: 0.8vw;
    }
      .usp .content > .wrap {
        padding: 0 8vw;
      }
    /* footer */
    .usp .footer {
      margin-top: 13vw;
    }
      .usp .footer .button {
        position: relative;
        display: table;
        width: 92vw;
        height: 11.2vw;
        margin: 0 auto;
        background-color: #c3002f;
      }
      .usp .footer .button:after {
        content: '';
        position: absolute;
        right: 4vw;
        top: 50%;
        display: block;
        width: 4vw;
        height: 3.2vw;
        margin-top: -1.6vw;
        background-image: url(../i_IMAGES/swiper_next_white.png);
        background-repeat: no-repeat;
        background-position: right;
        background-size: auto 3.2vw;
      }
        .usp .footer .button span {
          display: table-cell;
          padding-left: 5vw;
          text-align: left;
          vertical-align: middle;
        }
          .usp .footer .button i {
            display: inline-block;
            font-size: 4vw;
            font-style: normal;
            color: #fff;
          }





/** -------------------------------
 * swiper
 */
.usp .swiper {}
  .usp .swiper > .wrap {
    position: relative;
  }
    .usp .swiper .swiper-container {}
      .usp .swiper .swiper-wrapper {}
        .usp .swiper .swiper-slide {
          position: relative;
          padding-top: 90%;
        }
          .usp .swiper .swiper-slide a {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            display: block;
            background-repeat: no-repeat;
            background-size: contain;
          }
  /* swiper ctrl */
  .usp .swiper .swiper-button-prev {
    left: 0;
    display: block;
    width: 8vw;
    height: 8vw;
    margin-top: -4vw;
    background-image: url(../i_IMAGES/swiper_prev_red.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 3.2vw auto;
  }
  .usp .swiper .swiper-button-prev.swiper-button-disabled {
    background-image: url(../i_IMAGES/swiper_prev_gray.png);
  }
  .usp .swiper .swiper-button-next {
    right: 0;
    display: block;
    width: 8vw;
    height: 8vw;
    margin-top: -4vw;
    background-image: url(../i_IMAGES/swiper_next_red.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 3.2vw auto;
  }
  .usp .swiper .swiper-button-next.swiper-button-disabled {
    background-image: url(../i_IMAGES/swiper_next_gray.png);
  }
  .usp .swiper .swiper-pagination {
    clear: both;
    left: 0;
    bottom: 0;
    width: 100%;
    margin-bottom: -8vw;
    padding-right: 3.466vw;
    text-align: center;
  }
  .usp .swiper .swiper-pagination.none {
    display: none;
  }
    .usp .swiper .swiper-pagination-bullet {
      position: relative;
      width: 3.2vw;
      height: 3.2vw;
      margin-left: 3.466vw;
      background-color: #cccccc;
      border-radius: 50%;
      opacity: 1;
    }
    .usp .swiper .swiper-pagination-bullet-active {
      background-color: #c3002f;
    }





/** -------------------------------
 * exterior
 */
/* header */
#exterior .header dt {
  width: 28.4vw;
  background-image: url(../i_IMAGES/SP/exterior_label.png);
}
#exterior .header dd {
  background-image: url(../i_IMAGES/SP/exterior_title.png);
}
/* content */
#exterior .swiper-slide.item01 a {
  background-image: url(../i_IMAGES/SP/usp01-1.jpg);
}
#exterior .swiper-slide.item02 a {
  background-image: url(../i_IMAGES/SP/usp01-2.jpg);
}


/** -------------------------------
 * technology
 */
/* header */
#technology .header dt {
  width: 33.8vw;/*28.4vw*/
  background-image: url(../i_IMAGES/SP/technology_label.png);
}
#technology .header dd {
  background-image: url(../i_IMAGES/SP/technology_title.png);
}
/* content */
#technology .swiper-slide.item01 a {
  background-image: url(../i_IMAGES/SP/usp02-1.jpg);
}
#technology .swiper-slide.item02 a {
  background-image: url(../i_IMAGES/SP/usp02-2.jpg);
}
#technology .swiper-slide.item03 a {
  background-image: url(../i_IMAGES/SP/usp02-3.jpg);
}
#technology .swiper-slide.item04 a {
  background-image: url(../i_IMAGES/SP/usp02-4.jpg);
}


/** -------------------------------
 * driving
 */
/* header */
#driving .header dt {
  width: 32vw;
  background-image: url(../i_IMAGES/SP/driving_label.png);
}
#driving .header dd {
  background-image: url(../i_IMAGES/SP/driving_title.png);
}
/* content */
#driving .swiper-slide.item01 a {
  background-image: url(../i_IMAGES/SP/usp03-1.jpg);
}
#driving .swiper-slide.item02 a {
  background-image: url(../i_IMAGES/SP/usp03-2.jpg);
}


/** -------------------------------
 * interior
 */
/* header */
#interior .header dt {
  width: 22.6vw;
  background-image: url(../i_IMAGES/SP/interior_label.png);
}
#interior .header dd {
  background-image: url(../i_IMAGES/SP/interior_title.png);
}
/* content */
#interior .swiper-slide.item01 a {
  background-image: url(../i_IMAGES/SP/usp04-1.jpg);
}
#interior .swiper-slide.item02 a {
  background-image: url(../i_IMAGES/SP/usp04-2.jpg);
}
#interior .swiper-slide.item03 a {
  background-image: url(../i_IMAGES/SP/usp04-3.jpg);
}





/** -------------------------------
 * animation
 */
@-webkit-keyframes fadeImage {
  0% {opacity: 0;}
  40% {opacity: 0;}
  50% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}
@-moz-keyframes fadeImage {
  0% {opacity: 0;}
  40% {opacity: 0;}
  50% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}


@keyframes fadeImage {
  0% {opacity: 0;}
  40% {opacity: 0;}
  50% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

@-webkit-keyframes blinkImage {
  0% {opacity: 0;}
  30% {opacity: 1;}
  70% {opacity: 1;}
  100% {opacity: 0;}
}
@-moz-keyframes blinkImage {
  0% {opacity: 0;}
  30% {opacity: 1;}
  70% {opacity: 1;}
  100% {opacity: 0;}
}


@keyframes blinkImage {
  0% {opacity: 0;}
  30% {opacity: 1;}
  70% {opacity: 1;}
  100% {opacity: 0;}
}


/* @group #SAPOCAR_S */

#SAPOCAR_S {
	margin-left: 4%;
	margin-right: 4%;
}

#SAPOCAR_S .inner {
	border-top: 1px solid #e0e0e0;
	padding-top: calc(30/375 * 100vw);
	box-sizing: border-box;
	display: block;
}

#SAPOCAR_S .icon {
	width: 75%;
  margin: 0 auto;
}

#SAPOCAR_S .icon img {
	width: 100%;
}

#SAPOCAR_S .description {
	width: 100%;
	font-size: 14px;
	font-size: 3.733vw;
	word-break: break-all;
    margin-top: 2em;
}

#SAPOCAR_S .note {
	width: 100%;
	margin-top: 2em;
	font-size: 12px;
	font-size: 3.2vw;
	word-break: break-all;
}

#SAPOCAR_S .description::after,
#SAPOCAR_S .inner::after {
	display: block;
	clear: both;
	content: "";
}