@charset "utf-8";


/**
 * ================================================================================
 * table of Contents:
 *
 * Top Page Settings
 * Jimny Page Settings
 * Wrangler Page Settings
 * D5 Page Settings
 * Rav4 Page Settings
 * Xtrail Page Settings
 * ================================================================================
 */







/**
 * ================================================================================
 * Top Page Settings
 * ================================================================================
 */

.asobiTop {
  background-color: #EFE0C1;
  background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/top/zz_special_navi_asobi_top_bg01.png");
  }


/**
 * Main Visual
 * -------------------------------
 */
  
.asobiTop .topMv {
  margin-bottom: calc(100vw * (70 / 1700));
  position: relative;
  }

  /* -- .topMvTtl -- */
  .asobiTop .topMv .topMvTtl {
    width: calc(100vw * (466 / 1700));
    height: calc(100vw * (340 / 1700));
    margin-top: calc(100vw * (340 / 1700) / -2);
    margin-left: calc(100vw * (466 / 1700) / -2);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    }

  /* -- .topMvBg -- */
  .asobiTop .topMv .topMvBg  {
    position: relative;
    z-index: 1;
    }


/**
 * Lead
 * -------------------------------
 */
  
.asobiTop .topLead {
  background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/top/zz_special_navi_asobi_top_lead-bg.png");
  background-repeat: no-repeat;
  background-position: 50% calc(100vw * (23 / 1700));
  background-size: calc(100vw * (540 / 1700)) auto;
  padding-bottom: calc(100vw * (45 / 1700));
  }

  /* -- .topLeadInner -- */
  .asobiTop .topLead .topLeadInner {
    margin-bottom: calc(100vw * (40 / 1700));
    text-align: center;
    }

    .asobiTop .topLead .topLeadInner > dt {
      display: block;
      margin-bottom: 50px;
      }

      .asobiTop .topLead .topLeadInner > dt > span { display: block; }
      .asobiTop .topLead .topLeadInner > dt > span:nth-of-type(1) { margin-bottom: calc(100vw * (25 / 1700)); }

        .asobiTop .topLead .topLeadInner > dt > span:nth-of-type(1) img { width: calc(100vw * (256 / 1700)); }
        .asobiTop .topLead .topLeadInner > dt > span:nth-of-type(2) img { width: calc(100vw * (327 / 1700)); }

    .asobiTop .topLead .topLeadInner > dd {}

      .asobiTop .topLead .topLeadInner > dd > p {
        font-size: calc(100vw * (25 / 1700));
        line-height: 2;
        }

        .asobiTop .topLead .topLeadInner > dd > p > span {
          display: block;
          font-weight: bold;
          }

  /* -- .topLeadScroll -- */
  .asobiTop .topLead .topLeadScroll { text-align: center; }

    .asobiTop .topLead .topLeadScroll > span { display: block; }
    .asobiTop .topLead .topLeadScroll > span:nth-of-type(1) { margin-bottom: calc(100vw * (25 / 1700)); }

      .asobiTop .topLead .topLeadScroll > span:nth-of-type(1) img { width: calc(100vw * (65 / 1700)); }
      .asobiTop .topLead .topLeadScroll > span:nth-of-type(2) img { width: calc(100vw * (31 / 1700)); }


/**
 * Lineup
 * -------------------------------
 */
  
.asobiTop .topLineup { margin-bottom: calc(100vw * (60 / 1700)); }

  /* -- .topLineupLists -- */
  .asobiTop .topLineup .topLineupLists {
    margin-top: -55px;
    list-style: none;
    }

    .asobiTop .topLineup .topLineupLists > li {
      margin-top: calc(100vw * (55 / 1700));
      position: relative;
      }
    .asobiTop .topLineup .topLineupLists > li:nth-child(odd) { margin-left: calc(100vw * (110 / 1700)); }
    .asobiTop .topLineup .topLineupLists > li:nth-child(even) { margin-right: calc(100vw * (110 / 1700)); }

      .asobiTop .topLineup .topLineupLists > li.topLineupListsComingsoon:before,
      .asobiTop .topLineup .topLineupLists > li.topLineupListsComingsoon:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        }
      .asobiTop .topLineup .topLineupLists > li.topLineupListsComingsoon:before {
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 2;
        }
      .asobiTop .topLineup .topLineupLists > li.topLineupListsComingsoon:after {
        background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/common/zz_special_navi_asobi_common_comingsoon.png");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: calc(100vw * (285 / 1700)) auto;
        z-index: 3;
        }

      .asobiTop .topLineup .topLineupLists > li > a {
        display: block;
        position: relative;
        z-index: 1;
        }

        .asobiTop .topLineup .topLineupLists > li > a > dl { position: relative; }

        .asobiTop .topLineup .topLineupLists > li > a > dl > dt {
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: 100% auto;
          width: 100%;
          height: calc(100vw * (600 / 1700));
          position: relative;
          z-index: 1;
          text-indent: 100%;
          white-space: nowrap;
          overflow: hidden;
          }
        .asobiTop .topLineup .topLineupLists > li:nth-of-type(1) > a > dl > dt { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/top/zz_special_navi_asobi_top_lineuplists01-img-pc.jpg"); }
        .asobiTop .topLineup .topLineupLists > li:nth-of-type(2) > a > dl > dt { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/top/zz_special_navi_asobi_top_lineuplists02-img-pc.jpg"); }
        .asobiTop .topLineup .topLineupLists > li:nth-of-type(3) > a > dl > dt { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/top/zz_special_navi_asobi_top_lineuplists03-img-pc.jpg"); }
        .asobiTop .topLineup .topLineupLists > li:nth-of-type(4) > a > dl > dt { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/top/zz_special_navi_asobi_top_lineuplists04-img-pc.jpg"); }
        .asobiTop .topLineup .topLineupLists > li:nth-of-type(5) > a > dl > dt { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/top/zz_special_navi_asobi_top_lineuplists05-img-pc.jpg"); }


        .asobiTop .topLineup .topLineupLists > li > a > dl > dd {
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: 2;
          }

          .asobiTop .topLineup .topLineupLists > li > a > dl > dd img { width: 100%; }

        .asobiTop .topLineup .topLineupLists > li > a > dl > dd .topLineupListsTtl {
          width: calc(100vw * (411 / 1700));
          position: absolute;
          top: calc(100vw * (90 / 1700));
          }
        .asobiTop .topLineup .topLineupLists > li:nth-child(odd) > a > dl > dd .topLineupListsTtl { left: calc(100vw * (215 / 1700)); }
        .asobiTop .topLineup .topLineupLists > li:nth-child(even) > a > dl > dd .topLineupListsTtl { left: calc(100vw * (320 / 1700)); }

        .asobiTop .topLineup .topLineupLists > li > a > dl > dd .topLineupListsGo {
          width: calc(100vw * (125 / 1700));
          position: absolute;
          bottom: calc(100vw * (40 / 1700));
          }
        .asobiTop .topLineup .topLineupLists > li:nth-child(odd) > a > dl > dd .topLineupListsGo { right: calc(100vw * (165 / 1700)); }
        .asobiTop .topLineup .topLineupLists > li:nth-child(even) > a > dl > dd .topLineupListsGo { right: calc(100vw * (55 / 1700)); }


/**
 * Bottom
 * -------------------------------
 */
  
.asobiTop .topBottom {
  padding-bottom: calc(100vw * (60 / 1700));
  text-align: center;
  }

  .asobiTop .topBottom img { width: calc(100vw * (206 / 1700)); }






/**
 * ================================================================================
 * Jimny Page Settings
 * ================================================================================
 */

.asobiJimny .asobiInner {
  background-color: #EFE0C1;
  background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/jimny/zz_special_navi_asobi_jimny_bg01.png");
  }


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

.asobiJimny .mv {}

  .asobiJimny .mv:after {
    background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/jimny/zz_special_navi_asobi_jimny_mask01.png");
    height: calc(100vw * (12 / 1700));
    }


  /* -- .mvTtl -- */
  .asobiJimny .mv .mvTtl {}

    .asobiJimny .mv .mvTtl > span:nth-of-type(1) {
      width: calc(100vw * (606 / 1700));
      top: calc(100vw * (64 / 1700));
      left: calc(100vw * (223 / 1700));
      }

    .asobiJimny .mv .mvTtl > span:nth-of-type(2) {
      width: calc(100vw * (618 / 1700));
      bottom: calc(100vw * (78 / 1700));
      left: calc(100vw * (353 / 1700));
      }


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

.asobiJimny  .lead .leadInner > dt > span { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/jimny/zz_special_navi_asobi_jimny_lead-img-pc.jpg"); }

.asobiJimny .lead .leadInner > dd > h2 {
  width: calc(100vw * (455 / 1700));
  padding-right: calc(100vw * (35 / 1700));
  }


/**
 * Feature
 * -------------------------------
 */

.asobiJimny .feature {}

  /* -- .featureLists -- */
  .asobiJimny .feature .featureLists {}

    .asobiJimny .feature .featureLists > li > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/jimny/zz_special_navi_asobi_jimny_featurelists-img-bg.png");
      background-repeat: repeat;
      background-size: 5px auto;
      width: 100%;
      height: 100%;
      top: calc(100vw * (15 / 1700));
      }
    .asobiJimny .feature .featureLists > li.featureListsLeft > dl > dt .featureListsImg:before { left: calc(100vw * (15 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureListsRight > dl > dt .featureListsImg:before { right: calc(100vw * (15 / 1700)); }

    .asobiJimny .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (262 / 1700));
      margin: calc(100vw * (40 / 1700)) 0 0 calc(100vw * (35 / 1700));
      }

    .asobiJimny .feature .featureLists > li.featureLists02 > dl > dd .featureListsTxt { padding-right: calc(100vw * (10 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (242 / 1700));
      margin: calc(100vw * (35 / 1700)) calc(100vw * (15 / 1700)) 0 0;
      }

    .asobiJimny .feature .featureLists > li.featureLists03 > dl > dt { width: calc(100vw * (650 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (239 / 1700));
      margin: calc(100vw * (70 / 1700)) 0 0 calc(100vw * (100 / 1700));
      }

    .asobiJimny .feature .featureLists > li.featureLists04 > dl > dt { width: calc(100vw * (574 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists04 > dl > dd .featureListsTxt { padding-right: calc(100vw * (40 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (319 / 1700));
      margin: calc(100vw * (65 / 1700)) calc(100vw * (60 / 1700)) 0 0;
      }

    .asobiJimny .feature .featureLists > li.featureLists05 > dl > dt { width: calc(100vw * (650 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (303 / 1700));
      margin: calc(100vw * (60 / 1700)) 0 0 calc(100vw * (5 / 1700));
      }

    .asobiJimny .feature .featureLists > li.featureLists06 > dl > dd .featureListsImg > span {
      width: calc(100vw * (301 / 1700));
      margin: calc(100vw * (60 / 1700)) 0 0 0;
      }
    .asobiJimny .feature .featureLists > li.featureLists06 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (136 / 1700));
      position: absolute;
      right: calc(100vw * (335 / 1700));
      bottom: calc(100vw * (-20 / 1700));
      }

    .asobiJimny .feature .featureLists > li.featureLists07 > dl > dt { width: calc(100vw * (560 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists07 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (257 / 1700));
      margin: calc(100vw * (55 / 1700)) 0 0 calc(100vw * (165 / 1700));
      }

    .asobiJimny .feature .featureLists > li.featureLists08 > dl > dt { width: calc(100vw * (625 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists08 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (162 / 1700));
      margin: calc(100vw * (60 / 1700)) calc(100vw * (40 / 1700)) 0 0;
      }

  /* -- .featuresKv -- */
  .asobiJimny .feature .featureKv { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/jimny/zz_special_navi_asobi_jimny_bg02.png"); }

    .asobiJimny .feature .featureKv:before,
    .asobiJimny .feature .featureKv:after { height: calc(100vw * (12 / 1700)); }
    .asobiJimny .feature .featureKv:before { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/jimny/zz_special_navi_asobi_jimny_mask02.png"); }
    .asobiJimny .feature .featureKv:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/jimny/zz_special_navi_asobi_jimny_mask01.png"); }

      .asobiJimny .feature .featureKv > span:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/jimny/zz_special_navi_asobi_jimny_feature-kv-txt.png"); }

  /* -- .apps -- */
  .asobiJimny .feature .apps { padding-top: calc(100vw * (70 / 1700)); }

    .asobiJimny .apps > dd:nth-of-type(2) > p { color: #998675; }

  /* -- .models -- */
  .asobiJimny .feature .models { padding-top: calc(100vw * (130 / 1700)); }


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

.asobiJimny .bottom {}

  /* -- .bottomKv -- */
  .asobiJimny .bottom .bottomKv > span:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/jimny/zz_special_navi_asobi_jimny_bottom-kv-txt.png"); }

  /* -- .bottomPagetop -- */
  .asobiJimny .bottom .bottomPagetop { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/jimny/zz_special_navi_asobi_jimny_bg03.png"); }

    .asobiJimny .bottom .bottomPagetop > dl > dt img { width: calc(100vw * (340 / 1700)); }






/**
 * ================================================================================
 * Wrangler Page Settings
 * ================================================================================
 */

.asobiWrangler .asobiInner {
  background-color: #CDDFDE;
  background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_bg01.png");
  }


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

.asobiWrangler .mv {}

  .asobiWrangler .mv:after {
    background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_mask01.png");
    height: calc(100vw * (21 / 1700));
    }

  /* -- .mvTtl -- */
  .asobiWrangler .mv .mvTtl {}

    .asobiWrangler .mv .mvTtl > span:nth-of-type(1) {
      width: calc(100vw * (409 / 1700));
      top: calc(100vw * (124 / 1700));
      left: calc(100vw * (335 / 1700));
      }

    .asobiWrangler .mv .mvTtl > span:nth-of-type(2) {
      width: calc(100vw * (552 / 1700));
      bottom: calc(100vw * (78 / 1700));
      left: calc(100vw * (353 / 1700));
      }


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

.asobiWrangler .lead .leadInner > dt > span { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_lead-img-pc.jpg"); }

.asobiWrangler .lead .leadInner > dd > h2 { width: calc(100vw * (580 / 1700)); }

  .asobiWrangler .lead .leadInner > dd > h2 img { margin-left: calc(100vw * (35 / 1700)); }


/**
 * Feature
 * -------------------------------
 */

.asobiWrangler .feature {}

  /* -- .featureLists -- */
  .asobiWrangler .feature .featureLists {}

    .asobiWrangler .feature .featureLists > li > dl > dt .featureListsImg:before {
      background-size: 100% auto;
      width: calc(100vw * (520 / 1700));
      height: calc(100vw * (505 / 1700));
      }

    .asobiWrangler .feature .featureLists > li.featureLists01 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_featurelists01-img-bg.png");
      right: calc(100vw * (-145 / 1700));
      bottom: calc(100vw * (-100 / 1700));
      opacity: 0.8;
      }
    .asobiWrangler .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (277 / 1700));
      margin: calc(100vw * (60 / 1700)) 0 0 calc(100vw * (20 / 1700));
      }

    .asobiWrangler .feature .featureLists > li.featureLists02 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_featurelists02-img-bg.png");
      right: calc(100vw * (75 / 1700));
      bottom: calc(100vw * (-105 / 1700));
      }
    .asobiWrangler .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (242 / 1700));
      margin: calc(100vw * (47 / 1700)) calc(100vw * (58 / 1700)) 0 0;
      }

    .asobiWrangler .feature .featureLists > li.featureLists03 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_featurelists03-img-bg.png");
      right: calc(100vw * (-100 / 1700));
      bottom: calc(100vw * (-145 / 1700));
      opacity: 0.8;
      }
    .asobiWrangler .feature .featureLists > li.featureLists03 > dl > dt { width: calc(100vw * (606 / 1700)); }
    .asobiWrangler .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (262 / 1700));
      margin: calc(100vw * (44 / 1700)) 0 0 calc(100vw * (95 / 1700));
      }

    .asobiWrangler .feature .featureLists > li.featureLists04 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_featurelists04-img-bg.png");
      right: calc(100vw * (-140 / 1700));
      bottom: calc(100vw * (-185 / 1700));
      }
    .asobiWrangler .feature .featureLists > li.featureLists04 > dl > dt { width:calc(100vw * (650 / 1700)); }
    .asobiWrangler .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (245 / 1700));
      margin: calc(100vw * (40 / 1700)) 0 0 calc(100vw * (60 / 1700));
      }

    .asobiWrangler .feature .featureLists > li.featureLists05 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_featurelists05-img-bg.png");
      left: calc(100vw * (-200 / 1700));
      bottom: calc(100vw * (-225 / 1700));
      opacity: 0.8;
      }
    .asobiWrangler .feature .featureLists > li.featureLists05 > dl > dd .featureListsImg > span {
      width: calc(100vw * (301 / 1700));
      margin: calc(100vw * (60 / 1700)) 0 0 0;
      }
    .asobiWrangler .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (259 / 1700));
      position: absolute;
      right: calc(100vw * (340 / 1700));
      bottom: calc(100vw * (-65 / 1700));
      }

  /* -- .featuresKv -- */
  .asobiWrangler .feature .featureKv { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_bg02.png"); }

    .asobiWrangler .feature .featureKv:before,
    .asobiWrangler .feature .featureKv:after { height: calc(100vw * (21 / 1700)); }
    .asobiWrangler .feature .featureKv:before { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_mask02.png"); }
    .asobiWrangler .feature .featureKv:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_mask01.png"); }

      .asobiWrangler .feature .featureKv > span:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_feature-kv-txt.png"); }

  /* -- .models -- */
  .asobiWrangler .feature .models { padding-top: calc(100vw * (165 / 1700)); }


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

.asobiWrangler .bottom {}

  /* -- .bottomKv -- */
  .asobiWrangler .bottom .bottomKv > span:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_bottom-kv-txt.png"); }

  /* -- .bottomPagetop -- */
  .asobiWrangler .bottom .bottomPagetop { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_bg03.png"); }

    .asobiWrangler .bottom .bottomPagetop > dl > dt img { width: calc(100vw * (437 / 1700)); }






/**
 * ================================================================================
 * D5 Page Settings
 * ================================================================================
 */

.asobiD5 .asobiInner {
  background-color: #000;
  /* background-color: #101010;
  background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/d5/zz_special_navi_asobi_d5_bg01.png");*/
  color: #fff;
  }


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

.asobiD5 .mv {}

  .asobiD5 .mv:after {
    /*background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/d5/zz_special_navi_asobi_d5_mask01.png");
    height: calc(100vw * (48 / 1700));*/
    display: none;
    }

  /* -- .mvTtl -- */
  .asobiD5 .mv .mvTtl {}

    .asobiD5 .mv .mvTtl > span:nth-of-type(1) {
      width: calc(100vw * (371 / 1700));
      top: calc(100vw * (84 / 1700));
      left: calc(100vw * (389 / 1700));
      }

    .asobiD5 .mv .mvTtl > span:nth-of-type(2) {
      width: calc(100vw * (524 / 1700));
      bottom: calc(100vw * (75 / 1700));
      left: calc(100vw * (355 / 1700));
      }


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

.asobiD5 .lead .leadInner > dt > span { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/d5/zz_special_navi_asobi_d5_lead-img-pc.jpg"); }

  .asobiD5 .lead .leadInner > dt .comments02 { padding-left: calc(100vw * (208 / 1700)); }

.asobiD5 .lead .leadInner > dd > h2 { width: calc(100vw * (434 / 1700)); }


/**
 * Feature
 * -------------------------------
 */

.asobiD5 .feature {}

  /* -- .featureLists -- */
  .asobiD5 .feature .featureLists {}

    .asobiD5 .feature .featureLists > li:nth-child(odd):after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/common/zz_special_navi_asobi_common_sep01-wt.png"); }
    .asobiD5 .feature .featureLists > li:nth-child(even):after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/common/zz_special_navi_asobi_common_sep02-wt.png"); }

    .asobiD5 .feature .featureLists > li > dl > dt .featureListsImg:before {
      /* background-size: 100% auto;
      width: calc(100vw * (863 / 1700));
      height: calc(100vw * (773 / 1700)); */
      display: none;
      }

    .asobiD5 .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (204 / 1700));
      margin: calc(100vw * (50 / 1700)) 0 0 calc(100vw * (65 / 1700));
      }

    .asobiD5 .feature .featureLists > li.featureLists02 > dl > dt .btns,
    .asobiD5 .feature .featureLists > li.featureLists02 > dl > dt .comments { margin-top: calc(100vw * (30 / 1700)); }
    .asobiD5 .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (233 / 1700));
      margin: calc(100vw * (80 / 1700)) calc(100vw * (28 / 1700)) 0 0;
      }

    .asobiD5 .feature .featureLists > li.featureLists03 > dl > dt { width: calc(100vw * (595 / 1700)); }
    .asobiD5 .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (250 / 1700));
      margin: calc(100vw * (60 / 1700)) 0 0 calc(100vw * (53 / 1700));
      }

    .asobiD5 .feature .featureLists > li.featureLists04 > dl > dt { width: calc(100vw * (574 / 1700)); }
    .asobiD5 .feature .featureLists > li.featureLists04 > dl > dt .comments02 { margin-bottom: calc(100vw * (20 / 1700)); }
    .asobiD5 .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (381 / 1700));
      margin: calc(100vw * (78 / 1700)) calc(100vw * (2 / 1700)) 0 0;
      }

    .asobiD5 .feature .featureLists > li.featureLists05 > dl > dt { width: calc(100vw * (574 / 1700)); }
    .asobiD5 .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (235 / 1700));
      margin: calc(100vw * (78 / 1700)) calc(100vw * (2 / 1700)) 0 0;
      }

    .asobiD5 .feature .featureLists > li.featureLists06 > dl > dt { width: calc(100vw * (595 / 1700)); }
    .asobiD5 .feature .featureLists > li.featureLists06 > dl > dd .featureListsImg > span {
      width: calc(100vw * (301 / 1700));
      margin: calc(100vw * (60 / 1700)) 0 0 0;
      }
    .asobiD5 .feature .featureLists > li.featureLists06 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (249  / 1700));
      position: absolute;
      bottom: calc(100vw * (20 / 1700));
      right: calc(100vw * (350 / 1700));
      }

    

  /* -- .featuresKv -- */
  .asobiD5 .feature .featureKv {
    /* background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/d5/zz_special_navi_asobi_d5_bg02.png"); */
    padding: 0;
    margin: calc(100vw * (260 / 1700)) 0 calc(100vw * (200 / 1700)) 0;
    }

    .asobiD5 .feature .featureKv:before,
    .asobiD5 .feature .featureKv:after {
      /* height: calc(100vw * (48 / 1700)); */
      display: none;
      }

      .asobiD5 .feature .featureKv > span:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/d5/zz_special_navi_asobi_d5_feature-kv-txt.png"); }

  /* -- .models -- */
  .asobiD5 .feature .models { padding-top: calc(100vw * (140 / 1700)); }

    .asobiD5 .feature .models > dd > ul > li a { color: #fff; }


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

.asobiD5 .bottom {}

  /* -- .bottomKv -- */
  .asobiD5 .bottom .bottomKv > span:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/d5/zz_special_navi_asobi_d5_bottom-kv-txt-pc.png"); }

  /* -- .bottomPagetop -- */
  .asobiD5 .bottom .bottomPagetop { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/d5/zz_special_navi_asobi_d5_bg02.png"); }

    .asobiD5 .bottom .bottomPagetop > dl > dt img { width: calc(100vw * (388 / 1700)); }






/**
 * ================================================================================
 * Rav4 Page Settings
 * ================================================================================
 */

.asobiRav4 .asobiInner {
  background-color: #D7DEB7;
  background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_bg01.png");
  }


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

.asobiRav4 .mv {}

  .asobiRav4 .mv:after {
    background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_mask01.png");
    height: calc(100vw * (34 / 1700));
    }

  /* -- .mvTtl -- */
  .asobiRav4 .mv .mvTtl {}

    .asobiRav4 .mv .mvTtl > span:nth-of-type(1) {
      width: calc(100vw * (368 / 1700));
      top: calc(100vw * (70 / 1700));
      left: calc(100vw * (330 / 1700));
      }

    .asobiRav4 .mv .mvTtl > span:nth-of-type(2) {
      width: calc(100vw * (590 / 1700));
      bottom: calc(100vw * (112 / 1700));
      left: calc(100vw * (359 / 1700));
      }


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

.asobiRav4 .lead .leadInner > dt > span { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_lead-img-pc.jpg"); }

.asobiRav4 .lead .leadInner > dd > h2 { width: calc(100vw * (465 / 1700));}


/**
 * Feature
 * -------------------------------
 */

.asobiRav4 .feature {}

  /* -- .featureLists -- */
  .asobiRav4 .feature .featureLists {}

    .asobiRav4 .feature .featureLists > li > dl > dt .featureListsImg:before {
      background-size: 100% 100%;
      width: 100%;
      height: 103%;
      right: calc(100vw * (-20 / 1700));
      top: calc(100vw * (10 / 1700));
      }

    .asobiRav4 .feature .featureLists > li.featureLists01 > dl > dt .featureListsImg:before { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_featurelists01-img-bg.png"); }
    .asobiRav4 .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (290 / 1700));
      margin: calc(100vw * (40 / 1700)) 0 0 calc(100vw * (45 / 1700));
      }

    .asobiRav4 .feature .featureLists > li.featureLists02 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_featurelists02-img-bg.png");
      right: auto;
      left: calc(100vw * (-20 / 1700));
      }
    .asobiRav4 .feature .featureLists > li.featureLists02 > dl > dt .comments {
      position: absolute;
      bottom: calc(100vw * (13 / 1700));
      left: calc(100vw * (250 / 1700));
      }
    .asobiRav4 .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (201 / 1700));
      margin: calc(100vw * (35 / 1700)) calc(100vw * (10 / 1700)) 0 0;
      }

    .asobiRav4 .feature .featureLists > li.featureLists03 > dl > dt .featureListsImg:before { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_featurelists03-img-bg.png"); }
    .asobiRav4 .feature .featureLists > li.featureLists03 > dl > dt { width: calc(100vw * (630 / 1700)); }
    .asobiRav4 .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (204 / 1700));
      margin: calc(100vw * (40 / 1700)) 0 0 calc(100vw * (110 / 1700));
      }

    .asobiRav4 .feature .featureLists > li.featureLists04 > dl > dt .featureListsImg:before { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_featurelists04-img-bg.png"); }
    .asobiRav4 .feature .featureLists > li.featureLists04 > dl > dt { width: calc(100vw * (650 / 1700)); }
    .asobiRav4 .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (221 / 1700));
      margin: calc(100vw * (45 / 1700)) calc(100vw * (50 / 1700)) 0 0;
      }

    .asobiRav4 .feature .featureLists > li.featureLists05 > dl > dt { width: calc(100vw * (574 / 1700)); }
    .asobiRav4 .feature .featureLists > li.featureLists05 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_featurelists05-img-bg.png");
      right: auto;
      left: calc(100vw * (-20 / 1700));
      }
    .asobiRav4 .feature .featureLists > li.featureLists05 > dl > dd .icons {
      margin-bottom: calc(100vw * (35 / 1700));
      text-align: right;
      }
    .asobiRav4 .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (348 / 1700));
      margin: calc(100vw * (80 / 1700)) calc(100vw * (20 / 1700)) 0 0;
      }

    .asobiRav4 .feature .featureLists > li.featureLists06 > dl > dt { width: calc(100vw * (595 / 1700)); }
    .asobiRav4 .feature .featureLists > li.featureLists06 > dl > dt .featureListsImg:before { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_featurelists06-img-bg.png"); }
    .asobiRav4 .feature .featureLists > li.featureLists06 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (235 / 1700));
      margin: calc(100vw * (15 / 1700)) 0 0 calc(100vw * (155 / 1700));
      }

  /* -- .featuresKv -- */
  .asobiRav4 .feature .featureKv { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_bg02.png"); }

    .asobiRav4 .feature .featureKv:before,
    .asobiRav4 .feature .featureKv:after { height: calc(100vw * (34 / 1700)); }
    .asobiRav4 .feature .featureKv:before { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_mask02.png"); }
    .asobiRav4 .feature .featureKv:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_mask01.png"); }

    .asobiRav4 .feature .featureKv img { padding: calc(100vw * (40 / 1700)) 0; }

      .asobiRav4 .feature .featureKv > span:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_feature-kv-txt.png"); }

  /* -- .models -- */
  .asobiRav4 .feature .models { padding-top: calc(100vw * (170 / 1700)); }


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

.asobiRav4 .bottom {}

  /* -- .bottomKv -- */
  .asobiRav4 .bottom .bottomKv > span:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_bottom-kv-txt.png"); }

  /* -- .bottomPagetop -- */
  .asobiRav4 .bottom .bottomPagetop { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_bg03.png"); }

    .asobiRav4 .bottom .bottomPagetop > dl > dt img { width: calc(100vw * (392 / 1700)); }






/**
 * ================================================================================
 * Xtrail Page Settings
 * ================================================================================
 */

.asobiXtrail .asobiInner {
  background-color: #F9E3D9;
  background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_bg01.png");
  }


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

.asobiXtrail .mv {}

  .asobiXtrail .mv:after {
    background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_mask01.png");
    height: calc(100vw * (48 / 1700));
    }

  /* -- .mvTtl -- */
  .asobiXtrail .mv .mvTtl {}

    .asobiXtrail .mv .mvTtl > span:nth-of-type(1) {
      width: calc(100vw * (343 / 1700));
      top: calc(100vw * (70 / 1700));
      left: calc(100vw * (350 / 1700));
      }

    .asobiXtrail .mv .mvTtl > span:nth-of-type(2) {
      width: calc(100vw * (414 / 1700));
      bottom: calc(100vw * (78 / 1700));
      left: calc(100vw * (355 / 1700));
      }


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

.asobiXtrail .lead .leadInner > dt > span { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_lead-img-pc.jpg"); }

.asobiXtrail .lead .leadInner > dd > h2 { width: calc(100vw * (470 / 1700)); }


/**
 * Feature
 * -------------------------------
 */

.asobiXtrail .feature {}

  /* -- .featureLists -- */
  .asobiXtrail .feature .featureLists {}

    .asobiXtrail .feature .featureLists > li > dl > dt .featureListsImg:before {
      background-size: 100% auto;
      width: calc(100vw * (863 / 1700));
      height: calc(100vw * (773 / 1700));
      }

    .asobiXtrail .feature .featureLists > li.featureLists01 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_featurelists01-img-bg.png");
      top: calc(100vw * (40 / 1700));
      left: calc(100vw * (-95 / 1700));
      }
    .asobiXtrail .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (243 / 1700));
      margin: calc(100vw * (35 / 1700)) 0 0 calc(100vw * (45 / 1700));
      }

    .asobiXtrail .feature .featureLists > li.featureLists02 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_featurelists02-img-bg.png");
      top: calc(100vw * (75 / 1700));
      left: calc(100vw * (-110 / 1700));
      }
    .asobiXtrail .feature .featureLists > li.featureLists02 > dl > dt .comments { padding-top: 0; }
    .asobiXtrail .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (197 / 1700));
      margin: calc(100vw * (45 / 1700)) calc(100vw * (20 / 1700)) 0 0;
      }

    .asobiXtrail .feature .featureLists > li.featureLists03 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_featurelists03-img-bg.png");
      top: calc(100vw * (110 / 1700));
      left: calc(100vw * (-65 / 1700));
      }
    .asobiXtrail .feature .featureLists > li.featureLists03 > dl > dt { width: calc(100vw * (617 / 1700)); }
    .asobiXtrail .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (173 / 1700));
      margin: calc(100vw * (50 / 1700)) 0 0 calc(100vw * (200 / 1700));
      }

    .asobiXtrail .feature .featureLists > li.featureLists04 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_featurelists04-img-bg.png");
      left: calc(100vw * (-80 / 1700));
      bottom: calc(100vw * (-100 / 1700));
      }
    .asobiXtrail .feature .featureLists > li.featureLists04 > dl > dt { width: calc(100vw * (650 / 1700)); }
    .asobiXtrail .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (266 / 1700));
      margin: calc(100vw * (100 / 1700)) 0 0 calc(100vw * (30 / 1700));
      }

    .asobiXtrail .feature .featureLists > li.featureLists05 > dl > dt { width: calc(100vw * (574 / 1700)); }
    .asobiXtrail .feature .featureLists > li.featureLists05 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_featurelists05-img-bg.png");
      top: calc(100vw * (-40 / 1700));
      left: calc(100vw * (-65 / 1700));
      }
    .asobiXtrail .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (321 / 1700));
      margin: calc(100vw * (50 / 1700)) calc(100vw * (10 / 1700)) 0 0;
      }

    .asobiXtrail .feature .featureLists > li.featureLists06 > dl > dt { width: calc(100vw * (595 / 1700)); }
    .asobiXtrail .feature .featureLists > li.featureLists06 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_featurelists06-img-bg.png");
      left: calc(100vw * (-20 / 1700));
      bottom: calc(100vw * (-85 / 1700));
      }
    .asobiXtrail .feature .featureLists > li.featureLists06 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (249 / 1700));
      margin: calc(100vw * (20 / 1700)) 0 0 calc(100vw * (165 / 1700));
      }

  /* -- .featuresKv -- */
  .asobiXtrail .feature .featureKv {
    background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_bg02.png");
    margin-top: calc(100vw * (205 / 1700));
    }

    .asobiXtrail .feature .featureKv:before,
    .asobiXtrail .feature .featureKv:after { height: calc(100vw * (48 / 1700)); }
    .asobiXtrail .feature .featureKv:before { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_mask02.png"); }
    .asobiXtrail .feature .featureKv:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_mask01.png"); }

    .asobiXtrail .feature .featureKv img { padding: calc(100vw * (40 / 1700)) 0; }

      .asobiXtrail .feature .featureKv > span:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_feature-kv-txt.png"); }

  /* -- .models -- */
  .asobiXtrail .feature .models { padding-top: calc(100vw * (145 / 1700)); }


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

.asobiXtrail .bottom {}

  /* -- .bottomKv -- */
  .asobiXtrail .bottom .bottomKv > span:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_bottom-kv-txt.png"); }

  /* -- .bottomPagetop -- */
  .asobiXtrail .bottom .bottomPagetop { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_bg03.png"); }

    .asobiXtrail .bottom .bottomPagetop > dl > dt img { width: calc(100vw * (413 / 1700)); }








@media only screen and (min-width: 768px) and (max-width: 1279px) {
  
  
/**
 * ================================================================================
 * Top Page Settings
 * ================================================================================
 */

.asobiTop {}


/**
 * Loader
 * -------------------------------
 */
  
.asobiTop .loader {}


/**
 * Main Visual
 * -------------------------------
 */
  
.asobiTop .topMv { margin-bottom: calc(1280px * (70 / 1700)); }

  /* -- .topMvTtl -- */
  .asobiTop .topMv .topMvTtl {
    width: calc(1280px * (466 / 1700));
    height: calc(1280px * (340 / 1700));
    margin-top: calc(1280px * (340 / 1700) / -2);
    margin-left: calc(1280px * (466 / 1700) / -2);
    }

  /* -- .topMvBg -- */
  .asobiTop .topMv .topMvBg  {}


/**
 * Lead
 * -------------------------------
 */
  
.asobiTop .topLead {
  background-position: 50% calc(1280px * (23 / 1700));
  background-size: calc(1280px * (540 / 1700)) auto;
  padding-bottom: calc(1280px * (45 / 1700));
  }

  /* -- .topLeadInner -- */
  .asobiTop .topLead .topLeadInner { margin-bottom: calc(1280px * (40 / 1700)); }

    .asobiTop .topLead .topLeadInner > dt { margin-bottom: calc(1280px * (50 / 1700)); }

      .asobiTop .topLead .topLeadInner > dt > span:nth-of-type(1) { margin-bottom: calc(1280px * (25 / 1700)); }

        .asobiTop .topLead .topLeadInner > dt > span:nth-of-type(1) img { width: calc(1280px * (256 / 1700)); }
        .asobiTop .topLead .topLeadInner > dt > span:nth-of-type(2) img { width: calc(1280px * (327 / 1700)); }

    .asobiTop .topLead .topLeadInner > dd {}

      .asobiTop .topLead .topLeadInner > dd > p { font-size: calc(1280px * (25 / 1700)); }

  /* -- .topLeadScroll -- */
  .asobiTop .topLead .topLeadScroll {}

    .asobiTop .topLead .topLeadScroll > span:nth-of-type(1) { margin-bottom: calc(1280px * (25 / 1700)); }

      .asobiTop .topLead .topLeadScroll > span:nth-of-type(1) img { width: calc(1280px * (65 / 1700)); }
      .asobiTop .topLead .topLeadScroll > span:nth-of-type(2) img { width: calc(1280px * (31 / 1700)); }


/**
 * Lineup
 * -------------------------------
 */
  
.asobiTop .topLineup { margin-bottom: calc(1280px * (60 / 1700)); }

  /* -- .topLineupLists -- */
  .asobiTop .topLineup .topLineupLists { margin-top: calc(1280px * (-55 / 1700)); }

    .asobiTop .topLineup .topLineupLists > li { margin-top: calc(1280px * (55 / 1700)); }
    .asobiTop .topLineup .topLineupLists > li:nth-child(odd) { margin-left: calc(1280px * (110 / 1700)); }
    .asobiTop .topLineup .topLineupLists > li:nth-child(even) { margin-right: calc(1280px * (110 / 1700)); }
  
      .asobiTop .topLineup .topLineupLists > li.topLineupListsComingsoon:after { background-size: calc(1280px * (285 / 1700)) auto; }

      .asobiTop .topLineup .topLineupLists > li > a {}

        .asobiTop .topLineup .topLineupLists > li > a > dl {}

        .asobiTop .topLineup .topLineupLists > li > a > dl > dt { height: calc(1280px * (600 / 1700)); }

        .asobiTop .topLineup .topLineupLists > li > a > dl > dd .topLineupListsTtl {
          width: calc(1280px * (411 / 1700));
          top: calc(1280px * (90 / 1700));
          }
        .asobiTop .topLineup .topLineupLists > li:nth-child(odd) > a > dl > dd .topLineupListsTtl { left: calc(1280px * (215 / 1700)); }
        .asobiTop .topLineup .topLineupLists > li:nth-child(even) > a > dl > dd .topLineupListsTtl { left: calc(1280px * (320 / 1700)); }

        .asobiTop .topLineup .topLineupLists > li > a > dl > dd .topLineupListsGo {
          width: calc(1280px * (125 / 1700));
          bottom: calc(1280px * (40 / 1700));
          }
        .asobiTop .topLineup .topLineupLists > li:nth-child(odd) > a > dl > dd .topLineupListsGo { right: calc(1280px * (165 / 1700)); }
        .asobiTop .topLineup .topLineupLists > li:nth-child(even) > a > dl > dd .topLineupListsGo { right: calc(1280px * (55 / 1700)); }
      

/**
 * Bottom
 * -------------------------------
 */
  
.asobiTop .topBottom { padding-bottom: calc(1280px * (60 / 1700)); }

  .asobiTop .topBottom img { width: calc(1280px * (206 / 1700)); }





  
/**
 * ================================================================================
 * Jimny Page Settings
 * ================================================================================
 */

.asobiJimny {}


/**
 * Loader
 * -------------------------------
 */
  
.asobiJimny .loader {}


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

.asobiJimny .mv {}

  .asobiJimny .mv:after { height: calc(1280px * (12 / 1700)); }

  /* -- .mvTtl -- */
  .asobiJimny .mv .mvTtl {}

    .asobiJimny .mv .mvTtl > span:nth-of-type(1) {
      width: calc(1280px * (606 / 1700));
      top: calc(1280px * (64 / 1700));
      left: calc(1280px * (223 / 1700));
      }

    .asobiJimny .mv .mvTtl > span:nth-of-type(2) {
      width: calc(1280px * (618 / 1700));
      bottom: calc(1280px * (78 / 1700));
      left: calc(1280px * (353 / 1700));
      }


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

.asobiJimny .lead .leadInner > dd > h2 {
  width: calc(1280px * (455 / 1700));
  padding-right: calc(1280px * (35 / 1700));
  }


/**
 * Feature
 * -------------------------------
 */

.asobiJimny .feature {}

  /* -- .featureLists -- */
  .asobiJimny .feature .featureLists {}

    .asobiJimny .feature .featureLists > li > dl > dt .featureListsImg:before { top: calc(1280px * (15 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureListsLeft > dl > dt .featureListsImg:before { left: calc(1280px * (15 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureListsRight > dl > dt .featureListsImg:before { right: calc(1280px * (15 / 1700)); }

    .asobiJimny .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (262 / 1700));
      margin: calc(1280px * (40 / 1700)) 0 0 calc(1280px * (35 / 1700));
      }

    .asobiJimny .feature .featureLists > li.featureLists02 > dl > dd .featureListsTxt { padding-right: calc(1280px * (10 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (242 / 1700));
      margin: calc(1280px * (35 / 1700)) calc(1280px * (15 / 1700)) 0 0;
      }

    .asobiJimny .feature .featureLists > li.featureLists03 > dl > dt { width: calc(1280px * (650 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (239 / 1700));
      margin: calc(1280px * (70 / 1700)) 0 0 calc(1280px * (100 / 1700));
      }

    .asobiJimny .feature .featureLists > li.featureLists04 > dl > dt { width: calc(1280px * (574 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists04 > dl > dd .featureListsTxt { padding-right: calc(1280px * (40 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (319 / 1700));
      margin: calc(1280px * (65 / 1700)) calc(1280px * (60 / 1700)) 0 0;
      }

    .asobiJimny .feature .featureLists > li.featureLists05 > dl > dt { width: calc(1280px * (650 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (303 / 1700));
      margin: calc(1280px * (60 / 1700)) 0 0 calc(1280px * (5 / 1700));
      }

    .asobiJimny .feature .featureLists > li.featureLists06 > dl > dd .featureListsImg > span {
      width: calc(1280px * (301 / 1700));
      margin: calc(1280px * (60 / 1700)) 0 0 0;
      }
    .asobiJimny .feature .featureLists > li.featureLists06 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (136 / 1700));
      right: calc(1280px * (335 / 1700));
      bottom: calc(1280px * (-20 / 1700));
      }

    .asobiJimny .feature .featureLists > li.featureLists07 > dl > dt { width: calc(1280px * (560 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists07 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (257 / 1700));
      margin: calc(1280px * (55 / 1700)) 0 0 calc(1280px * (165 / 1700));
      }

    .asobiJimny .feature .featureLists > li.featureLists08 > dl > dt { width: calc(1280px * (625 / 1700)); }
    .asobiJimny .feature .featureLists > li.featureLists08 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (162 / 1700));
      margin: calc(1280px * (60 / 1700)) calc(1280px * (40 / 1700)) 0 0;
      }

  /* -- .featuresKv -- */
  .asobiJimny .feature .featureKv {}

    .asobiJimny .feature .featureKv:before,
    .asobiJimny .feature .featureKv:after { height: calc(1280px * (12 / 1700)); }

  /* -- .apps -- */
  .asobiJimny .feature .apps { padding-top: calc(1280px * (70 / 1700)); }

  /* -- .models -- */
  .asobiJimny .feature .models { padding-top: calc(1280px * (130 / 1700)); }


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

.asobiJimny .bottom {}

  /* -- .bottomPagetop -- */
  .asobiJimny .bottom .bottomPagetop {}

    .asobiJimny .bottom .bottomPagetop > dl > dt img { width: calc(1280px * (340 / 1700)); }






/**
 * ================================================================================
 * Wrangler Page Settings
 * ================================================================================
 */

.asobiWrangler {}


/**
 * Loader
 * -------------------------------
 */
  
.asobiWrangler .loader {}


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

.asobiWrangler .mv {}

  .asobiWrangler .mv:after { height: calc(1280px * (12 / 1700)); }

  /* -- .mvTtl -- */
  .asobiWrangler .mv .mvTtl {}

    .asobiWrangler .mv .mvTtl > span:nth-of-type(1) {
      width: calc(1280px * (409 / 1700));
      top: calc(1280px * (124 / 1700));
      left: calc(1280px * (335 / 1700));
      }

    .asobiWrangler .mv .mvTtl > span:nth-of-type(2) {
      width: calc(1280px * (552 / 1700));
      bottom: calc(1280px * (78 / 1700));
      left: calc(1280px * (353 / 1700));
      }


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

.asobiWrangler .lead .leadInner > dd > h2 { width: calc(1280px * (580 / 1700)); }

  .asobiWrangler .lead .leadInner > dd > h2 img { margin-left: calc(1280px * (35 / 1700)); }


/**
 * Feature
 * -------------------------------
 */

.asobiWrangler .feature {}

  /* -- .featureLists -- */
  .asobiWrangler .feature .featureLists {}

    .asobiWrangler .feature .featureLists > li > dl > dt .featureListsImg:before {
      width: calc(1280px * (520 / 1700));
      height: calc(1280px * (505 / 1700));
      }

    .asobiWrangler .feature .featureLists > li.featureLists01 > dl > dt .featureListsImg:before {
      right: calc(1280px * (-145 / 1700));
      bottom: calc(1280px * (-100 / 1700));
      }
    .asobiWrangler .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (277 / 1700));
      margin: calc(1280px * (60 / 1700)) 0 0 calc(1280px * (20 / 1700));
      }

    .asobiWrangler .feature .featureLists > li.featureLists02 > dl > dt .featureListsImg:before {
      right: calc(1280px * (75 / 1700));
      bottom: calc(1280px * (-105 / 1700));
      }
    .asobiWrangler .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (242 / 1700));
      margin: calc(1280px * (47 / 1700)) calc(1280px * (58 / 1700)) 0 0;
      }

    .asobiWrangler .feature .featureLists > li.featureLists03 > dl > dt .featureListsImg:before {
      right: calc(1280px * (-100 / 1700));
      bottom: calc(1280px * (-145 / 1700));
      }
    .asobiWrangler .feature .featureLists > li.featureLists03 > dl > dt { width: calc(1280px * (606 / 1700)); }
    .asobiWrangler .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (262 / 1700));
      margin: calc(1280px * (44 / 1700)) 0 0 calc(1280px * (95 / 1700));
      }

    .asobiWrangler .feature .featureLists > li.featureLists04 > dl > dt .featureListsImg:before {
      right: calc(1280px * (-140 / 1700));
      bottom: calc(1280px * (-185 / 1700));
      }
    .asobiWrangler .feature .featureLists > li.featureLists04 > dl > dt { width:calc(1280px * (650 / 1700)); }
    .asobiWrangler .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (245 / 1700));
      margin: calc(1280px * (40 / 1700)) 0 0 calc(1280px * (60 / 1700));
      }

    .asobiWrangler .feature .featureLists > li.featureLists05 > dl > dt .featureListsImg:before {
      left: calc(1280px * (-200 / 1700));
      bottom: calc(1280px * (-225 / 1700));
      }
    .asobiWrangler .feature .featureLists > li.featureLists05 > dl > dd .featureListsImg > span {
      width: calc(1280px * (301 / 1700));
      margin: calc(1280px * (60 / 1700)) 0 0 0;
      }
    .asobiWrangler .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (259 / 1700));
      right: calc(1280px * (340 / 1700));
      bottom: calc(1280px * (-65 / 1700));
      }

  /* -- .featuresKv -- */
  .asobiWrangler .feature .featureKv {}

    .asobiWrangler .feature .featureKv:before,
    .asobiWrangler .feature .featureKv:after { height: calc(1280px * (21 / 1700)); }

  /* -- .models -- */
  .asobiWrangler .feature .models { padding-top: calc(1280px * (165 / 1700)); }


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

.asobiWrangler .bottom {}

  /* -- .bottomPagetop -- */
  .asobiWrangler .bottom .bottomPagetop {}

    .asobiWrangler .bottom .bottomPagetop > dl > dt img { width: calc(1280px * (437 / 1700)); }






/**
 * ================================================================================
 * D5 Page Settings
 * ================================================================================
 */

.asobiD5 .asobiInner {}


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

.asobiD5 .mv {}

  .asobiD5 .mv:after { /* height: calc(1280px * (48 / 1700)); */ }

  /* -- .mvTtl -- */
  .asobiD5 .mv .mvTtl {}

    .asobiD5 .mv .mvTtl > span:nth-of-type(1) {
      width: calc(1280px * (371 / 1700));
      top: calc(1280px * (84 / 1700));
      left: calc(1280px * (389 / 1700));
      }

    .asobiD5 .mv .mvTtl > span:nth-of-type(2) {
      width: calc(1280px * (524 / 1700));
      bottom: calc(1280px * (75 / 1700));
      left: calc(1280px * (355 / 1700));
      }


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

.asobiD5 .lead .leadInner > dt > span {}

  .asobiD5 .lead .leadInner > dt .comments02 { padding-left: calc(1280px * (208 / 1700)); }

.asobiD5 .lead .leadInner > dd > h2 { width: calc(1280px * (434 / 1700)); }


/**
 * Feature
 * -------------------------------
 */

.asobiD5 .feature {}

  /* -- .featureLists -- */
  .asobiD5 .feature .featureLists {}

    .asobiD5 .feature .featureLists > li > dl > dt .featureListsImg:before {
      /* width: calc(1280px * (863 / 1700));
      height: calc(1280px * (773 / 1700)); */
      }

    .asobiD5 .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (204 / 1700));
      margin: calc(1280px * (50 / 1700)) 0 0 calc(1280px * (65 / 1700));
      }

    .asobiD5 .feature .featureLists > li.featureLists02 > dl > dt .btns,
    .asobiD5 .feature .featureLists > li.featureLists02 > dl > dt .comments { margin-top: calc(1280px * (30 / 1700)); }
    .asobiD5 .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (233 / 1700));
      margin: calc(1280px * (80 / 1700)) calc(1280px * (28 / 1700)) 0 0;
      }

    .asobiD5 .feature .featureLists > li.featureLists03 > dl > dt { width: calc(1280px * (595 / 1700)); }
    .asobiD5 .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (250 / 1700));
      margin: calc(1280px * (60 / 1700)) 0 0 calc(1280px * (53 / 1700));
      }

    .asobiD5 .feature .featureLists > li.featureLists04 > dl > dt { width: calc(1280px * (574 / 1700)); }
    .asobiD5 .feature .featureLists > li.featureLists04 > dl > dt .comments02 { margin-bottom: calc(1280px * (20 / 1700)); }
    .asobiD5 .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (381 / 1700));
      margin: calc(1280px * (78 / 1700)) calc(1280px * (2 / 1700)) 0 0;
      }

    .asobiD5 .feature .featureLists > li.featureLists05 > dl > dt { width: calc(1280px * (574 / 1700)); }
    .asobiD5 .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (235 / 1700));
      margin: calc(1280px * (78 / 1700)) calc(1280px * (2 / 1700)) 0 0;
      }

    .asobiD5 .feature .featureLists > li.featureLists06 > dl > dt { width: calc(1280px * (595 / 1700)); }
    .asobiD5 .feature .featureLists > li.featureLists06 > dl > dd .featureListsImg > span {
      width: calc(1280px * (301 / 1700));
      margin: calc(1280px * (60 / 1700)) 0 0 0;
      }
    .asobiD5 .feature .featureLists > li.featureLists06 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (249  / 1700));
      bottom: calc(1280px * (20 / 1700));
      right: calc(1280px * (350 / 1700));
      }

    

  /* -- .featuresKv -- */
  .asobiD5 .feature .featureKv {
    padding: 0;
    margin: calc(1280px * (260 / 1700)) 0 calc(1280px * (200 / 1700)) 0;
    }

    .asobiD5 .feature .featureKv:before,
    .asobiD5 .feature .featureKv:after { /* height: calc(1280px * (48 / 1700)); */ }

      .asobiD5 .feature .featureKv > span:after {}

  /* -- .models -- */
  .asobiD5 .feature .models { padding-top: calc(1280px * (140 / 1700)); }


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

.asobiD5 .bottom {}

  /* -- .bottomPagetop -- */
  .asobiD5 .bottom .bottomPagetop {}

    .asobiD5 .bottom .bottomPagetop > dl > dt img { width: calc(1280px * (388 / 1700)); }
  
  
  
  
  
  
/**
 * ================================================================================
 * Rav4 Page Settings
 * ================================================================================
 */

.asobiRav4 {}


/**
 * Loader
 * -------------------------------
 */
  
.asobiRav4 .loader {}


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

.asobiRav4 .mv {}

  .asobiRav4 .mv:after { height: calc(1280px * (34 / 1700)); }

  /* -- .mvTtl -- */
  .asobiRav4 .mv .mvTtl {}

    .asobiRav4 .mv .mvTtl > span:nth-of-type(1) {
      width: calc(1280px * (368 / 1700));
      top: calc(1280px * (70 / 1700));
      left: calc(1280px * (330 / 1700));
      }

    .asobiRav4 .mv .mvTtl > span:nth-of-type(2) {
      width: calc(1280px * (590 / 1700));
      bottom: calc(1280px * (112 / 1700));
      left: calc(1280px * (359 / 1700));
      }


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

.asobiRav4 .lead .leadInner > dd > h2 { width: calc(1280px * (465 / 1700)); }


/**
 * Feature
 * -------------------------------
 */

.asobiRav4 .feature {}

  /* -- .featureLists -- */
  .asobiRav4 .feature .featureLists {}

    .asobiRav4 .feature .featureLists > li > dl > dt .featureListsImg:before {
      right: calc(1280px * (-20 / 1700));
      top: calc(1280px * (10 / 1700));
      }

    .asobiRav4 .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (290 / 1700));
      margin: calc(1280px * (40 / 1700)) 0 0 calc(1280px * (45 / 1700));
      }

    .asobiRav4 .feature .featureLists > li.featureLists02 > dl > dt .featureListsImg:before { left: calc(1280px * (-20 / 1700)); }
    .asobiRav4 .feature .featureLists > li.featureLists02 > dl > dt .comments {
      bottom: calc(1280px * (13 / 1700));
      left: calc(1280px * (250 / 1700));
      }
    .asobiRav4 .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (201 / 1700));
      margin: calc(1280px * (35 / 1700)) calc(1280px * (10 / 1700)) 0 0;
      }

    .asobiRav4 .feature .featureLists > li.featureLists03 > dl > dt { width: calc(1280px * (630 / 1700)); }
    .asobiRav4 .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (204 / 1700));
      margin: calc(1280px * (40 / 1700)) 0 0 calc(1280px * (110 / 1700));
      }

    .asobiRav4 .feature .featureLists > li.featureLists04 > dl > dt { width: calc(1280px * (650 / 1700)); }
    .asobiRav4 .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (221 / 1700));
      margin: calc(1280px * (45 / 1700)) calc(1280px * (50 / 1700)) 0 0;
      }

    .asobiRav4 .feature .featureLists > li.featureLists05 > dl > dt { width: calc(1280px * (574 / 1700)); }
    .asobiRav4 .feature .featureLists > li.featureLists05 > dl > dt .featureListsImg:before { left: calc(1280px * (-20 / 1700)); }
    .asobiRav4 .feature .featureLists > li.featureLists05 > dl > dd .icons { margin-bottom: calc(1280px * (35 / 1700)); }
    .asobiRav4 .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (348 / 1700));
      margin: calc(1280px * (80 / 1700)) calc(1280px * (20 / 1700)) 0 0;
      }

    .asobiRav4 .feature .featureLists > li.featureLists06 > dl > dt { width: calc(1280px * (595 / 1700)); }
    .asobiRav4 .feature .featureLists > li.featureLists06 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (235 / 1700));
      margin: calc(1280px * (15 / 1700)) 0 0 calc(1280px * (155 / 1700));
      }

  /* -- .featuresKv -- */
  .asobiRav4 .feature .featureKv {}

    .asobiRav4 .feature .featureKv:before,
    .asobiRav4 .feature .featureKv:after { height: calc(1280px * (34 / 1700)); }

    .asobiRav4 .feature .featureKv img { padding: calc(1280px * (40 / 1700)) 0; }

  /* -- .models -- */
  .asobiRav4 .feature .models { padding-top: calc(1280px * (170 / 1700)); }


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

.asobiRav4 .bottom {}

  /* -- .bottomPagetop -- */
  .asobiRav4 .bottom .bottomPagetop { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_bg03.png"); }

    .asobiRav4 .bottom .bottomPagetop > dl > dt img { width: calc(1280px * (392 / 1700)); }
  
  
  
  
  
  
/**
 * ================================================================================
 * Xtrail Page Settings
 * ================================================================================
 */

.asobiXtrail {}


/**
 * Loader
 * -------------------------------
 */
  
.asobiXtrail .loader {}


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

.asobiXtrail .mv {}

  .asobiXtrail .mv:after { height: calc(1280px * (48 / 1700)); }

  /* -- .mvTtl -- */
  .asobiXtrail .mv .mvTtl {}

    .asobiXtrail .mv .mvTtl > span:nth-of-type(1) {
      width: calc(1280px * (343 / 1700));
      top: calc(1280px * (70 / 1700));
      left: calc(1280px * (350 / 1700));
      }

    .asobiXtrail .mv .mvTtl > span:nth-of-type(2) {
      width: calc(1280px * (414 / 1700));
      bottom: calc(1280px * (78 / 1700));
      left: calc(1280px * (355 / 1700));
      }


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

.asobiXtrail .lead .leadInner > dd > h2 { width: calc(1280px * (470 / 1700)); }


/**
 * Feature
 * -------------------------------
 */

.asobiXtrail .feature {}

  /* -- .featureLists -- */
  .asobiXtrail .feature .featureLists {}

    .asobiXtrail .feature .featureLists > li > dl > dt .featureListsImg:before {
      width: calc(1280px * (863 / 1700));
      height: calc(1280px * (773 / 1700));
      }

    .asobiXtrail .feature .featureLists > li.featureLists01 > dl > dt .featureListsImg:before {
      top: calc(1280px * (40 / 1700));
      left: calc(1280px * (-95 / 1700));
      }
    .asobiXtrail .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (243 / 1700));
      margin: calc(1280px * (35 / 1700)) 0 0 calc(1280px * (45 / 1700));
      }

    .asobiXtrail .feature .featureLists > li.featureLists02 > dl > dt .featureListsImg:before {
      top: calc(1280px * (75 / 1700));
      left: calc(1280px * (-110 / 1700));
      }
    .asobiXtrail .feature .featureLists > li.featureLists02 > dl > dt .comments { padding-top: 0; }
    .asobiXtrail .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (197 / 1700));
      margin: calc(1280px * (45 / 1700)) calc(1280px * (20 / 1700)) 0 0;
      }

    .asobiXtrail .feature .featureLists > li.featureLists03 > dl > dt .featureListsImg:before {
      top: calc(1280px * (110 / 1700));
      left: calc(1280px * (-65 / 1700));
      }
    .asobiXtrail .feature .featureLists > li.featureLists03 > dl > dt { width: calc(1280px * (617 / 1700)); }
    .asobiXtrail .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (173 / 1700));
      margin: calc(1280px * (50 / 1700)) 0 0 calc(1280px * (200 / 1700));
      }

    .asobiXtrail .feature .featureLists > li.featureLists04 > dl > dt .featureListsImg:before {
      left: calc(1280px * (-80 / 1700));
      bottom: calc(1280px * (-100 / 1700));
      }
    .asobiXtrail .feature .featureLists > li.featureLists04 > dl > dt { width: calc(1280px * (650 / 1700)); }
    .asobiXtrail .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (266 / 1700));
      margin: calc(1280px * (100 / 1700)) 0 0 calc(1280px * (30 / 1700));
      }

    .asobiXtrail .feature .featureLists > li.featureLists05 > dl > dt { width: calc(1280px * (574 / 1700)); }
    .asobiXtrail .feature .featureLists > li.featureLists05 > dl > dt .featureListsImg:before {
      top: calc(1280px * (-40 / 1700));
      left: calc(1280px * (-65 / 1700));
      }
    .asobiXtrail .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (321 / 1700));
      margin: calc(1280px * (50 / 1700)) calc(1280px * (10 / 1700)) 0 0;
      }

    .asobiXtrail .feature .featureLists > li.featureLists06 > dl > dt { width: calc(1280px * (595 / 1700)); }
    .asobiXtrail .feature .featureLists > li.featureLists06 > dl > dt .featureListsImg:before {
      left: calc(1280px * (-20 / 1700));
      bottom: calc(1280px * (-85 / 1700));
      }
    .asobiXtrail .feature .featureLists > li.featureLists06 > dl > dd .featureListsIllust > span {
      width: calc(1280px * (249 / 1700));
      margin: calc(1280px * (20 / 1700)) 0 0 calc(1280px * (165 / 1700));
      }

  /* -- .featuresKv -- */
  .asobiXtrail .feature .featureKv { margin-top: calc(1280px * (205 / 1700)); }

    .asobiXtrail .feature .featureKv:before,
    .asobiXtrail .feature .featureKv:after { height: calc(1280px * (48 / 1700)); }

    .asobiXtrail .feature .featureKv img { padding: calc(1280px * (40 / 1700)) 0; }

  /* -- .models -- */
  .asobiXtrail .feature .models { padding-top: calc(1280px * (145 / 1700)); }


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

.asobiXtrail .bottom {}

  /* -- .bottomPagetop -- */
  .asobiXtrail .bottom .bottomPagetop {}

    .asobiXtrail .bottom .bottomPagetop > dl > dt img { width: calc(1280px * (413 / 1700)); }

  
}








@media only screen and (min-width: 0px) and (max-width: 767px) {
  
  
/**
 * ================================================================================
 * Top Page Settings
 * ================================================================================
 */

.asobiTop {}


/**
 * Loader
 * -------------------------------
 */
  
.asobiTop .loader {}


/**
 * Main Visual
 * -------------------------------
 */
  
.asobiTop .topMv {
  margin-bottom: calc(100vw * (70 / 640) * 0.8);
  padding-bottom: calc(100vw * (250 / 640));
  }

  /* -- .topMvTtl -- */
  .asobiTop .topMv .topMvTtl {
    width: calc(100vw * (466 / 640) * 0.8);
    height: calc(100vw * (340 / 640) * 0.8);
    margin-top: 0;
    margin-left: calc(100vw * (466 / 640) / -2 * 0.8);
    top: auto;
    bottom: 0;
    }

  /* -- .topMvBg -- */
  .asobiTop .topMv .topMvBg  {}


/**
 * Lead
 * -------------------------------
 */
  
.asobiTop .topLead {
  background-position: 50% calc(100vw * (23 / 640) * 1.1);
  background-size: calc(100vw * (540 / 640)) auto;
  padding-bottom: calc(100vw * (45 / 640) * 0.8);
  }

  /* -- .topLeadInner -- */
  .asobiTop .topLead .topLeadInner { margin-bottom: calc(100vw * (40 / 640) * 0.8); }

    .asobiTop .topLead .topLeadInner > dt { margin-bottom: calc(100vw * (50 / 640) * 0.8); }

      .asobiTop .topLead .topLeadInner > dt > span:nth-of-type(1) { margin-bottom: calc(100vw * (25 / 640) * 0.8); }

        .asobiTop .topLead .topLeadInner > dt > span:nth-of-type(1) img { width: calc(100vw * (256 / 640) * 0.8); }
        .asobiTop .topLead .topLeadInner > dt > span:nth-of-type(2) img { width: calc(100vw * (327 / 640) * 0.8); }

    .asobiTop .topLead .topLeadInner > dd {}

      .asobiTop .topLead .topLeadInner > dd > p { font-size: calc(100vw * (25 / 640) * 0.9); }

  /* -- .topLeadScroll -- */
  .asobiTop .topLead .topLeadScroll {}

    .asobiTop .topLead .topLeadScroll > span:nth-of-type(1) { margin-bottom: calc(100vw * (25 / 640) * 0.8); }

      .asobiTop .topLead .topLeadScroll > span:nth-of-type(1) img { width: calc(100vw * (65 / 640) * 0.9); }
      .asobiTop .topLead .topLeadScroll > span:nth-of-type(2) img { width: calc(100vw * (31 / 640) * 0.9); }


/**
 * Lineup
 * -------------------------------
 */
  
.asobiTop .topLineup { margin-bottom: calc(100vw * (60 / 640) * 0.8); }

  /* -- .topLineupLists -- */
  .asobiTop .topLineup .topLineupLists { margin-top: calc(100vw * (-20 / 640)); }

    .asobiTop .topLineup .topLineupLists > li { margin-top: calc(100vw * (20 / 640)); }
    .asobiTop .topLineup .topLineupLists > li:nth-child(odd) { margin-left: 15px; }
    .asobiTop .topLineup .topLineupLists > li:nth-child(even) { margin-right: 15px; }
  
      .asobiTop .topLineup .topLineupLists > li.topLineupListsComingsoon:after { background-size: calc(100vw * (285 / 640) * 0.8) auto; }

      .asobiTop .topLineup .topLineupLists > li > a {}

        .asobiTop .topLineup .topLineupLists > li > a > dl {}

        .asobiTop .topLineup .topLineupLists > li > a > dl > dt { height: calc(100vw * (300 / 640)); }
        .asobiTop .topLineup .topLineupLists > li:nth-of-type(1) > a > dl > dt { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/top/zz_special_navi_asobi_top_lineuplists01-img-sp.jpg"); }
        .asobiTop .topLineup .topLineupLists > li:nth-of-type(2) > a > dl > dt { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/top/zz_special_navi_asobi_top_lineuplists02-img-sp.jpg"); }
        .asobiTop .topLineup .topLineupLists > li:nth-of-type(3) > a > dl > dt { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/top/zz_special_navi_asobi_top_lineuplists03-img-sp.jpg"); }
        .asobiTop .topLineup .topLineupLists > li:nth-of-type(4) > a > dl > dt { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/top/zz_special_navi_asobi_top_lineuplists04-img-sp.jpg"); }
        .asobiTop .topLineup .topLineupLists > li:nth-of-type(5) > a > dl > dt { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/top/zz_special_navi_asobi_top_lineuplists05-img-sp.jpg"); }

        .asobiTop .topLineup .topLineupLists > li > a > dl > dd .topLineupListsTtl {
          width: calc(100vw * (411 / 640) * 0.56);
          top: calc(100vw * (40 / 640));
          }
        .asobiTop .topLineup .topLineupLists > li:nth-child(odd) > a > dl > dd .topLineupListsTtl,
        .asobiTop .topLineup .topLineupLists > li:nth-child(even) > a > dl > dd .topLineupListsTtl { left: calc(100vw * (30 / 640)); }

        .asobiTop .topLineup .topLineupLists > li > a > dl > dd .topLineupListsGo {
          width: calc(100vw * (125 / 640) * 0.7);
          bottom: calc(100vw * (15 / 640));
          }
        .asobiTop .topLineup .topLineupLists > li:nth-child(odd) > a > dl > dd .topLineupListsGo,
        .asobiTop .topLineup .topLineupLists > li:nth-child(even) > a > dl > dd .topLineupListsGo { right: calc(100vw * (20 / 640)); }
      

/**
 * Bottom
 * -------------------------------
 */
  
.asobiTop .topBottom { padding-bottom: calc(100vw * (60 / 640) * 0.8); }

  .asobiTop .topBottom img { width: calc(100vw * (206 / 640) * 0.8); }
  
  
  
  
  

/**
 * ================================================================================
 * Jimny Page Settings
 * ================================================================================
 */

.asobiJimny {}


/**
 * Loader
 * -------------------------------
 */
  
.asobiJimny .loader {}


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

.asobiJimny .mv {}

  .asobiJimny .mv:after { height: calc(100vw * (10 / 640)); }

  /* -- .mvTtl -- */
  .asobiJimny .mv .mvTtl {}

    .asobiJimny .mv .mvTtl > span:nth-of-type(1) {
      width: calc(100vw * (606 / 640) * 0.75);
      top: calc(100vw * (15 / 640));
      left: calc(100vw * (2 / 640));
      }

    .asobiJimny .mv .mvTtl > span:nth-of-type(2) {
      width: calc(100vw * (618 / 640) * 0.85);
      bottom: calc(100vw * (50 / 640));
      left: calc(100vw * (35 / 640));
      }
      

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

.asobiJimny  .lead .leadInner > dt > span { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/jimny/zz_special_navi_asobi_jimny_lead-img-sp.jpg"); }

.asobiJimny .lead .leadInner > dd > h2 {
  width: calc(100vw * (455 / 640) * 0.85);
  padding-right: 0; 
  }


/**
 * Feature
 * -------------------------------
 */

.asobiJimny .feature {}

  /* -- .featureLists -- */
  .asobiJimny .feature .featureLists {}

    .asobiJimny .feature .featureLists > li > dl > dt .featureListsImg:before {
      background-size: 3px auto;
      width: 100%;
      height: 100%;
      top: calc(100vw * (10 / 640));
      }
    .asobiJimny .feature .featureLists > li.featureListsLeft > dl > dt .featureListsImg:before,
    .asobiJimny .feature .featureLists > li.featureListsRight > dl > dt .featureListsImg:before { left: calc(100vw * (10 / 640)); }

    .asobiJimny .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (262 * 2 / 640) * 0.53);
      top: 0;
      left: 50%;
      }

    .asobiJimny .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (242 * 2 / 640) * 0.55);
      top: calc(100vw * (10 / 640));
      left: 50%;
      }

    .asobiJimny .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (239 * 2 / 640) * 0.55);
      top: calc(100vw * (120 / 640));
      left: 50%;
      }

    .asobiJimny .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (319 * 2 / 640) * 0.55);
      top: calc(100vw * (130 / 640));
      left: 45%;
      }

    .asobiJimny .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (303 * 2 / 640) * 0.55);
      top: calc(100vw * (-50 / 640));
      left: 55%;
      }

    .asobiJimny .feature .featureLists > li.featureLists06 > dl > dd .featureListsImg > span {
      width: 100%;
      margin: calc(100vw * (30 / 640)) 0 0 0;
      }
    .asobiJimny .feature .featureLists > li.featureLists06 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (136 * 2 / 640) * 0.55);
      right: auto;
      bottom: auto;
      top: 0;
      left: 70%;
      }

    .asobiJimny .feature .featureLists > li.featureLists07 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (257 * 2 / 640) * 0.55);
      top: calc(100vw * (140 / 640));
      left: 55%;
      }

    .asobiJimny .feature .featureLists > li.featureLists08 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (162 * 2 / 640) * 0.55);
      top: 0;
      left: 70%;
      }

  /* -- .featuresKv -- */
  .asobiJimny .feature .featureKv {}
  
    .asobiJimny .feature .featureKv:before,
    .asobiJimny .feature .featureKv:after { height: calc(100vw * (10 / 640)); }

  /* -- .apps -- */
  .asobiJimny .feature .apps { padding-top: calc(100vw * (60 / 640)); }

  /* -- .models -- */
  .asobiJimny .feature .models { padding-top: calc(100vw * (80 / 640)); }


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

.asobiJimny .bottom {}

  /* -- .bottomPagetop -- */
  .asobiJimny .bottom .bottomPagetop {}

    .asobiJimny .bottom .bottomPagetop > dl > dt img { width: calc(100vw * (340 * 2 / 640) * 0.4); }






/**
 * ================================================================================
 * Wrangler Page Settings
 * ================================================================================
 */

.asobiWrangler {}


/**
 * Loader
 * -------------------------------
 */
  
.asobiWrangler .loader {}


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

.asobiWrangler .mv {}

  .asobiWrangler .mv:after { height: calc(100vw * (10 / 640)); }

  /* -- .mvTtl -- */
  .asobiWrangler .mv .mvTtl {}

    .asobiWrangler .mv .mvTtl > span:nth-of-type(1) {
      width: calc(100vw * (409 / 640) * 0.8);
      top: calc(100vw * (20 / 640));
      left: calc(100vw * (20 / 640));
      }

    .asobiWrangler .mv .mvTtl > span:nth-of-type(2) {
      width: calc(100vw * (552 / 640) * 0.85);
      bottom: calc(100vw * (50 / 640));
      left: calc(100vw * (35 / 640));
      }


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

.asobiWrangler .lead .leadInner > dt > span { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_lead-img-sp.jpg"); }

.asobiWrangler .lead .leadInner > dd > h2 { width: calc(100vw * (580 / 640) * 0.85); }

  .asobiWrangler .lead .leadInner > dd > h2 img { margin-left: 0; }


/**
 * Feature
 * -------------------------------
 */

.asobiWrangler .feature {}

  /* -- .featureLists -- */
  .asobiWrangler .feature .featureLists {}

    .asobiWrangler .feature .featureLists > li > dl > dt .featureListsImg:before {
      background-size: 100% auto;
      width: calc(100vw * (520 / 640) * 0.85);
      height: calc(100vw * (505 / 640) * 0.85);
      }

    .asobiWrangler .feature .featureLists > li.featureLists01 > dl > dt .featureListsImg:before {
      right: calc(100vw * (-145 / 640) * 0.85);
      bottom: calc(100vw * (-100 / 640) * 0.85);
      }
    .asobiWrangler .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (277 * 2 / 640) * 0.54);
      top: calc(100vw * (30 / 640));
      left: 52%;
      }

    .asobiWrangler .feature .featureLists > li.featureLists02 > dl > dt .featureListsImg:before {
      right: calc(100vw * (75 / 640) * 0.85);
      bottom: calc(100vw * (-105 / 640) * 0.85);
      }
    .asobiWrangler .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (242 * 2 / 640) * 0.55);
      top: calc(100vw * (120 / 640));
      left: 55%;
      }

    .asobiWrangler .feature .featureLists > li.featureLists03 > dl > dt .featureListsImg:before {
      right: calc(100vw * (-100 / 640) * 0.85);
      bottom: calc(100vw * (-145 / 640) * 0.85);
      }
    .asobiWrangler .feature .featureLists > li.featureLists03 > dl > dt { width: 606px; }
    .asobiWrangler .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (262 * 2 / 640) * 0.55);
      top: calc(100vw * (100 / 640));
      left: 57%;
      }

    .asobiWrangler .feature .featureLists > li.featureLists04 > dl > dt .featureListsImg:before {
      right: calc(100vw * (-140 / 640) * 0.85);
      bottom: calc(100vw * (-185 / 640) * 0.85);
      }
    .asobiWrangler .feature .featureLists > li.featureLists04 > dl > dt { width: 650px; }
    .asobiWrangler .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (245 * 2 / 640) * 0.55);
      top: calc(100vw * (-45 / 640));
      left: 58%;
      }

    .asobiWrangler .feature .featureLists > li.featureLists05 > dl > dt .featureListsImg:before {
      left: calc(100vw * (-200 / 640) * 0.85);
      bottom: calc(100vw * (-225 / 640) * 0.85);
      }
    .asobiWrangler .feature .featureLists > li.featureLists05 > dl > dd .featureListsImg > span {
      width: 100%;
      margin: calc(100vw * (30 / 640)) 0 0 0;
      }
    .asobiWrangler .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (259 * 2 /640) * 0.55);
      right: auto;
      bottom: auto;
      top: calc(100vw * (60 / 640));
      left: 54%;
      }

  /* -- .featuresKv -- */
  .asobiWrangler .feature .featureKv {}

    .asobiWrangler .feature .featureKv:before,
    .asobiWrangler .feature .featureKv:after { height: calc(100vw * (10 / 640)); }

  /* -- .models -- */
  .asobiWrangler .feature .models { padding-top: calc(100vw * (80 / 640)); }


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

.asobiWrangler .bottom {}

  /* -- .bottomPagetop -- */
  .asobiWrangler .bottom .bottomPagetop { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/wrangler/zz_special_navi_asobi_wrangler_bg03.png"); }

    .asobiWrangler .bottom .bottomPagetop > dl > dt img { width: calc(100vw * (437 * 2 / 640) * 0.4); }
  
  
  
  
  
  
/**
 * ================================================================================
 * D5 Page Settings
 * ================================================================================
 */

.asobiD5 .asobiInner {}


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

.asobiD5 .mv {}

  .asobiD5 .mv:after { /* height: calc(100vw * (48 / 640)); */ }

  /* -- .mvTtl -- */
  .asobiD5 .mv .mvTtl {}

    .asobiD5 .mv .mvTtl > span:nth-of-type(1) {
      width: calc(100vw * (371 / 640) * 0.8);
      top: calc(100vw * (20 / 640));
      left: calc(100vw * (20 / 640));
      }

    .asobiD5 .mv .mvTtl > span:nth-of-type(2) {
      width: calc(100vw * (524 / 640) * 0.85);
      bottom: calc(100vw * (20 / 640));
      left: calc(100vw * (35 / 640));
      }


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

.asobiD5 .lead .leadInner > dt > span { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/d5/zz_special_navi_asobi_d5_lead-img-sp.jpg"); }

  .asobiD5 .lead .leadInner > dt .comments02 { padding: 0 15px; }

.asobiD5 .lead .leadInner > dd > h2 { width: calc(100vw * (434 / 640) * 0.85); }


/**
 * Feature
 * -------------------------------
 */

.asobiD5 .feature {}

  /* -- .featureLists -- */
  .asobiD5 .feature .featureLists {}

    .asobiD5 .feature .featureLists > li > dl > dt .featureListsImg:before {
      /* width: calc(100vw * (863 / 640));
      height: calc(100vw * (773 / 640)); */
      }

    .asobiD5 .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (204 * 2 / 640) * 0.55);
      top: 0;
      left: 55%;
      }

    .asobiD5 .feature .featureLists > li.featureLists02 > dl > dt .btns,
    .asobiD5 .feature .featureLists > li.featureLists02 > dl > dt .comments { margin-top: calc(100vw * (30 / 640)); }
    .asobiD5 .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (233 * 2 / 640) * 0.55);
      top: calc(100vw * (160 / 640));
      left: 55%;
      }

    .asobiD5 .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (250 * 2 / 640) * 0.55);
      top: calc(100vw * (150 / 640));
      left: 57%;
      }

    .asobiD5 .feature .featureLists > li.featureLists04 > dl > dt .comments02 { margin-bottom: calc(100vw * (20 / 640)); }
    .asobiD5 .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (381 * 2 / 640) * 0.55);
      top: calc(100vw * (160 / 640));
      left: 32%;
      }

    .asobiD5 .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (235 * 2 / 640) * 0.55);
      top: calc(100vw * (120 / 640));
      left: 55%;
      }

    .asobiD5 .feature .featureLists > li.featureLists06 > dl > dd .featureListsImg > span {
      width: 100%;
      margin: calc(100vw * (30 / 640)) 0 0 0;
      }
    .asobiD5 .feature .featureLists > li.featureLists06 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (249 * 2  / 640) * 0.55);
      right: auto;
      bottom: auto;
      top: calc(100vw * (80 / 640));
      left: 53%;
      }

    

  /* -- .featuresKv -- */
  .asobiD5 .feature .featureKv {}

  /* -- .models -- */
  .asobiD5 .feature .models { padding-top: calc(100vw * (80 / 640)); }


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

.asobiD5 .bottom {}
  
  /* -- .bottomKv -- */
  .asobiD5 .bottom .bottomKv > span:after { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/d5/zz_special_navi_asobi_d5_bottom-kv-txt-sp.png"); }

  /* -- .bottomPagetop -- */
  .asobiD5 .bottom .bottomPagetop {}

    .asobiD5 .bottom .bottomPagetop > dl > dt img { width: calc(100vw * (388 * 2 / 640) * 0.4); }






/**
 * ================================================================================
 * Rav4 Page Settings
 * ================================================================================
 */

.asobiRav4 {}


/**
 * Loader
 * -------------------------------
 */
  
.asobiRav4 .loader {}


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

.asobiRav4 .mv {}

  .asobiRav4 .mv:after { height: calc(100vw * (25 / 640)); }

  /* -- .mvTtl -- */
  .asobiRav4 .mv .mvTtl {}

    .asobiRav4 .mv .mvTtl > span:nth-of-type(1) {
      width: calc(100vw * (368 / 640) * 0.75);
      top: calc(100vw * (20 / 640));
      left: calc(100vw * (20 / 640));
      }

    .asobiRav4 .mv .mvTtl > span:nth-of-type(2) {
      width: calc(100vw * (590 / 640) * 0.85);
      bottom: calc(100vw * (65 / 640));
      left: calc(100vw * (35 / 640));
      }


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

.asobiRav4 .lead .leadInner > dt > span { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_lead-img-sp.jpg"); }

.asobiRav4 .lead .leadInner > dd > h2 { width: calc(100vw * (465 / 640) * 0.85);}


/**
 * Feature
 * -------------------------------
 */

.asobiRav4 .feature {}

  /* -- .featureLists -- */
  .asobiRav4 .feature .featureLists {}

    .asobiRav4 .feature .featureLists > li > dl > dt .featureListsImg:before {
      height: 100%;
      right: calc(100vw * (-15 / 640));
      top: calc(100vw * (15 / 640));
      }

    .asobiRav4 .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (290 * 2 / 640) * 0.53);
      top: calc(100vw * (-40 / 640));
      left: 47%;
      }

    .asobiRav4 .feature .featureLists > li.featureLists02 > dl > dt .featureListsImg:before {
      background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_featurelists02-img-bg.png");
      right: auto;
      left: calc(100vw * (-20 / 640));
      }
    .asobiRav4 .feature .featureLists > li.featureLists02 > dl > dt .comments { position: static; }
    .asobiRav4 .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (201 * 2 / 640) * 0.55);
      top: calc(100vw * (100 / 640));
      left: 63%;
      }

    .asobiRav4 .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (204 * 2 / 640) * 0.55);
      top: calc(100vw * (80 / 640));
      left: 60%;
      }

    .asobiRav4 .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (221 * 2 / 640) * 0.53);
      top: calc(100vw * (-10 / 640));
      left: 53%;
      }
  
    .asobiRav4 .feature .featureLists > li.featureLists05 > dl > dt .featureListsImg:before {
      right: auto;
      left: calc(100vw * (-20 / 640));
      }
    .asobiRav4 .feature .featureLists > li.featureLists05 > dl > dd .icons {
      margin-bottom: calc(100vw * (35 / 640));
      text-align: left;
      }
    .asobiRav4 .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (348 * 2 / 640) * 0.52);
      top: calc(100vw * (-20 / 640));
      left: 50%;
      }

    .asobiRav4 .feature .featureLists > li.featureLists06 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (235 * 2 / 640) * 0.55);
      top: calc(100vw * (130 / 640));
      left: 52%;
      }

  /* -- .featuresKv -- */
  .asobiRav4 .feature .featureKv {}

    .asobiRav4 .feature .featureKv:before,
    .asobiRav4 .feature .featureKv:after { height: calc(100vw * (25 / 640)); }

    .asobiRav4 .feature .featureKv img { padding: calc(100vw * (10 / 640)) 0; }

  /* -- .models -- */
  .asobiRav4 .feature .models { padding-top: calc(100vw * (80 / 640)); }


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

.asobiRav4 .bottom {}

  /* -- .bottomPagetop -- */
  .asobiRav4 .bottom .bottomPagetop { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/rav4/zz_special_navi_asobi_rav4_bg03.png"); }

    .asobiRav4 .bottom .bottomPagetop > dl > dt img { width: calc(100vw * (392 * 2 / 640) * 0.4); }
  
  
  
  
  
  
/**
 * ================================================================================
 * Xtrail Page Settings
 * ================================================================================
 */

.asobiXtrail {}


/**
 * Loader
 * -------------------------------
 */
  
.asobiXtrail .loader {}


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

.asobiXtrail .mv {}

  .asobiXtrail .mv:after {
    height: calc(100vw * (48 / 640));
    }

  /* -- .mvTtl -- */
  .asobiXtrail .mv .mvTtl {}

    .asobiXtrail .mv .mvTtl > span:nth-of-type(1) {
      width: calc(100vw * (343 / 640) * 0.8);
      top: calc(100vw * (20 / 640));
      left: calc(100vw * (20 / 640));
      }

    .asobiXtrail .mv .mvTtl > span:nth-of-type(2) {
      width: calc(100vw * (414 / 640) * 0.95);
      bottom: calc(100vw * (40 / 640));
      left: calc(100vw * (30 / 640));
      }


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

.asobiXtrail .lead .leadInner > dt > span { background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_lead-img-sp.jpg"); }

.asobiXtrail .lead .leadInner > dd > h2 { width: calc(100vw * (470 / 640) * 0.85); }


/**
 * Feature
 * -------------------------------
 */

.asobiXtrail .feature {}

  /* -- .featureLists -- */
  .asobiXtrail .feature .featureLists {}

    .asobiXtrail .feature .featureLists > li > dl > dt .featureListsImg:before {
      width: calc(100vw * (863 / 640) * 0.8);
      height: calc(100vw * (773 / 640) * 0.8);
      }

    .asobiXtrail .feature .featureLists > li.featureLists01 > dl > dt .featureListsImg:before {
      top: calc(100vw * (25 / 640));
      left: calc(100vw * (-95 / 640) * 0.85);
      }
    .asobiXtrail .feature .featureLists > li.featureLists01 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (243 * 2 / 640) * 0.55);
      top: calc(100vw * (-30 / 640));
      left: 55%;
      }

    .asobiXtrail .feature .featureLists > li.featureLists02 > dl > dt .featureListsImg:before {
      top: calc(100vw * (45 / 640));
      left: calc(100vw * (-110 / 640) * 0.85);
      }
    .asobiXtrail .feature .featureLists > li.featureLists02 > dl > dt .comments { padding-top: 0; }
    .asobiXtrail .feature .featureLists > li.featureLists02 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (197 * 2 / 640) * 0.55);
      top: calc(100vw * (60 / 640));
      left: 63%;
      }

    .asobiXtrail .feature .featureLists > li.featureLists03 > dl > dt .featureListsImg:before {
      top: calc(100vw * (120 / 640));
      left: calc(100vw * (-65 / 640) * 0.85);
      }
    .asobiXtrail .feature .featureLists > li.featureLists03 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (173 * 2 / 640) * 0.55);
      top: calc(100vw * (100 / 640));
      left: 68%;
      }

    .asobiXtrail .feature .featureLists > li.featureLists04 > dl > dt .featureListsImg:before {
      left: calc(100vw * (-40 / 640));
      bottom: calc(100vw * (-100 / 640) * 0.85);
      }
    .asobiXtrail .feature .featureLists > li.featureLists04 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (266 * 2 / 640) * 0.55);
      top: calc(100vw * (-40 / 640));
      left: 54%;
      }

    .asobiXtrail .feature .featureLists > li.featureLists05 > dl > dt .featureListsImg:before {
      width: calc(100vw * (863 / 640) * 0.88);
      height: calc(100vw * (773 / 640) * 0.88);
      top: calc(100vw * (-20 / 640));
      left: calc(100vw * (-65 / 640) * 0.85);
      }
    .asobiXtrail .feature .featureLists > li.featureLists05 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (321 * 2 / 640) * 0.55);
      top: calc(100vw * (175 / 640));
      left: 44%;
      }

    .asobiXtrail .feature .featureLists > li.featureLists06 > dl > dt .featureListsImg:before {
      width: calc(100vw * (863 / 640) * 0.85);
      height: calc(100vw * (773 / 640) * 0.85);
      left: calc(100vw * (-20 / 640));
      bottom: calc(100vw * (-85 / 640) * 0.85);
      }
    .asobiXtrail .feature .featureLists > li.featureLists06 > dl > dd .featureListsIllust > span {
      width: calc(100vw * (249 * 2 / 640) * 0.55);
      top: calc(100vw * (160 / 640));
      left: 51%;
      }

  /* -- .featuresKv -- */
  .asobiXtrail .feature .featureKv {
    background-image: url("../../../../../files/cdb/ZZ/special/navi/asobi/xtrail/zz_special_navi_asobi_xtrail_bg02.png");
    margin-top: calc(100vw * (190 / 640));
    }

    .asobiXtrail .feature .featureKv:before,
    .asobiXtrail .feature .featureKv:after { height: calc(100vw * (48 / 640)); }

    .asobiXtrail .feature .featureKv img { padding: calc(100vw * (10 / 640)) 0; }
  
      .asobiXtrail .feature .featureKv > span:after { background-position: calc(100vw * (-60 / 640)) calc(100vw * (50 / 640)); }

  /* -- .models -- */
  .asobiXtrail .feature .models { padding-top: calc(100vw * (120 / 640)); }


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

.asobiXtrail .bottom {}

  /* -- .bottomPagetop -- */
  .asobiXtrail .bottom .bottomPagetop {}

    .asobiXtrail .bottom .bottomPagetop > dl > dt img { width: calc(100vw * (413 * 2 / 640) * 0.4); }


}