@charset "UTF-8";
/* *** variables model *** */
/* color */
/* *** common variables *** */
/* break point */
/* hover style */
/* color */
/* One-Tone */
/* Two-Tone */
/* *** mixins *** */
/* break point */
/* hover */
/* --- 10px = 1rem --- */
@media (min-width: 769px) {
  .cmn-mv-section.cardetail-mv {
    background-image: url(/impreza/top/images/img_top_mv_pc.webp);
  }
}
@media (max-width: 768px) {
  .cmn-mv-section.cardetail-mv {
    background-image: url(/impreza/top/images/img_top_mv_sp.webp);
  }
}

/* KV下　スライダー */
@media (min-width: 769px) {
  .kv_banner_slider {
    overflow: hidden;
  }
}
.kv_banner_slider .banner-list .item .anchor-banner {
  display: flex;
}

/* 自動車安全性能評価 */
.jncap_contents_title {
  gap: var(--size16);
}
@media (max-width: 768px) {
  .jncap_contents_title {
    flex-direction: column;
    align-items: center;
  }
}
@media (min-width: 769px) {
  .jncap_contents_title .img {
    max-width: 132px;
    max-height: 132px;
    position: relative;
    top: -1.5rem;
  }
}
@media (max-width: 768px) {
  .jncap_contents_title .img {
    max-width: 120px;
    max-height: 120px;
  }
}

.jncap_contents {
  /* 最高得点 */
  /* JNCAP3つの評価項目 */
}
.jncap_contents .score_area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin-inline: auto;
  padding-block: 1.75rem;
  font-weight: bold;
  background: rgb(203, 174, 83);
  background: linear-gradient(90deg, rgb(203, 174, 83) 0%, rgb(145, 112, 12) 100%);
}
@media (min-width: 769px) {
  .jncap_contents .score_area {
    width: 50%;
    margin-block-end: 3rem;
  }
}
@media (max-width: 768px) {
  .jncap_contents .score_area {
    margin-block: 2.75rem 2.25rem;
    gap: 0.625rem;
    padding-inline: 0.625rem;
  }
}
.jncap_contents .score_area .text {
  background-color: #fff;
}
@media (min-width: 769px) {
  .jncap_contents .score_area .text {
    padding: 0.375rem 1.25rem;
    font-size: clamp(1.75rem, 0.917rem + 0.17vw, 2.5rem);
  }
}
@media (max-width: 768px) {
  .jncap_contents .score_area .text {
    padding: 0.25rem 1rem;
    font-size: clamp(1.25rem, 0.661rem + 0.45vw, 1.87rem);
  }
}
.jncap_contents .score_area .text span {
  background: rgb(203, 174, 83);
  background: linear-gradient(90deg, rgb(203, 174, 83) 0%, rgb(145, 112, 12) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.jncap_contents .score_area .score {
  color: #fff;
}
@media (min-width: 769px) {
  .jncap_contents .score_area .score {
    font-size: clamp(3.5rem, 2.167rem + 0.69vw, 6rem);
  }
}
@media (max-width: 768px) {
  .jncap_contents .score_area .score {
    font-size: clamp(3rem, 1.428rem + 2.23vw, 3.5rem);
  }
}
.jncap_contents .score_area .score .num_flip {
  display: inline-block;
  vertical-align: bottom;
}
@media (min-width: 769px) {
  .jncap_contents .score_area .score .small {
    font-size: clamp(2rem, 1.083rem + 0.35vw, 2.5rem);
  }
}
@media (max-width: 768px) {
  .jncap_contents .score_area .score .small {
    font-size: clamp(1.5rem, 0.821rem + 0.89vw, 2rem);
  }
}
@media (min-width: 769px) {
  .jncap_contents h3 {
    width: fit-content;
    margin: 0 auto 4rem;
    letter-spacing: 0.06em;
    line-height: 1;
    font-size: 4rem;
    position: relative;
  }
}
@media (max-width: 768px) {
  .jncap_contents h3 {
    margin-block: 0 1.5rem;
    letter-spacing: 0.06em;
    font-size: 2rem;
    text-align: center;
  }
}
@media (min-width: 769px) {
  .jncap_contents h3::before, .jncap_contents h3::after {
    content: "";
    width: 200px;
    border-top: solid 1px currentColor;
    position: absolute;
    top: 33px;
  }
}
@media (min-width: 769px) {
  .jncap_contents h3::before {
    left: -230px;
  }
}
@media (min-width: 769px) {
  .jncap_contents h3::after {
    right: -230px;
  }
}
.jncap_contents h3 .emphasis {
  color: #cbae53;
}
.jncap_contents h3 .num {
  font-style: italic;
  letter-spacing: 0.1em;
}
@media (min-width: 769px) {
  .jncap_contents h3 .num {
    font-size: 6rem;
  }
}
@media (max-width: 768px) {
  .jncap_contents h3 .num {
    font-size: 3rem;
  }
}
.jncap_contents .list {
  display: flex;
}
@media (min-width: 769px) {
  .jncap_contents .list {
    padding-inline: 1rem;
    gap: 2rem;
  }
}
@media (max-width: 768px) {
  .jncap_contents .list {
    flex-direction: column;
    gap: 4rem;
  }
}
@media (min-width: 769px) {
  .jncap_contents .list li {
    width: 100%;
  }
}
.jncap_contents .list li:nth-of-type(1) .title {
  background-color: #003c8a;
}
.jncap_contents .list li:nth-of-type(2) .title {
  background-color: #00659a;
}
.jncap_contents .list li:nth-of-type(3) .title {
  background-color: #002453;
}
.jncap_contents .list .img_wrap {
  position: relative;
}
@media (min-width: 769px) {
  .jncap_contents .list .img_wrap {
    margin-block-end: 5rem;
  }
}
@media (max-width: 768px) {
  .jncap_contents .list .img_wrap {
    margin-block-end: 4rem;
  }
}
.jncap_contents .list .img_wrap .title {
  color: var(--white);
  font-family: "Hiragino Kaku Gothic Std";
  font-weight: 600;
  text-align: center;
  line-height: 1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 769px) {
  .jncap_contents .list .img_wrap .title {
    width: 89.47%;
    padding: 1.5rem;
    font-size: 2.2rem;
    bottom: -3rem;
  }
}
@media (max-width: 768px) {
  .jncap_contents .list .img_wrap .title {
    width: 93.33%;
    padding: 1.6rem;
    font-size: 1.6rem;
    bottom: -2rem;
  }
}
.jncap_contents .list .score_img {
  width: 64%;
  margin-inline: auto;
  text-align: center;
}
@media (min-width: 769px) {
  .jncap_contents .list .score_img {
    margin-block-end: 2rem;
  }
}
@media (max-width: 768px) {
  .jncap_contents .list .score_img {
    margin-block-end: 2rem;
  }
}
.jncap_contents .list p:not(.title, .jncap_caption) {
  line-height: 1.5;
}
@media (min-width: 769px) {
  .jncap_contents .list p:not(.title, .jncap_caption) {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .jncap_contents .list p:not(.title, .jncap_caption) {
    font-size: 1.4rem;
  }
}
@media (min-width: 769px) {
  .jncap_contents .list .jncap_caption {
    margin-block-start: 1rem;
    font-size: 1.2rem;
  }
}
@media (max-width: 768px) {
  .jncap_contents .list .jncap_caption {
    margin-block-start: 1rem;
    font-size: 1rem;
  }
}

/* 工場出荷時期についての文字色 */
@media (max-width: 768px) {
  .cmn-mv-section.cardetail-mv .btn-wrap .arrow-link.ver-white {
    color: var(--black);
  }
  .cmn-mv-section.cardetail-mv .btn-wrap .arrow-link.ver-white:not([target=_blank])::after {
    background-image: url(/assets/images/icn_arrow.svg);
  }
}

/* 先行予約告知 */
.preorder-announce-wrap h2 {
  display: flex;
  align-items: center;
}
@media (min-width: 769px) {
  .preorder-announce-wrap h2 .new-mark {
    padding-right: 16px;
    font-size: 2.4rem;
  }
}
@media (max-width: 768px) {
  .preorder-announce-wrap h2 .new-mark {
    padding-right: 10px;
    font-size: 1.5rem;
  }
}
.preorder-announce-wrap h2 .model-logo {
  width: 100%;
  height: auto;
}
@media (min-width: 769px) {
  .preorder-announce-wrap h2 .model-logo {
    max-width: 340px;
  }
}
@media (max-width: 768px) {
  .preorder-announce-wrap h2 .model-logo {
    max-width: 340px;
  }
}
.preorder-announce-wrap .lineup-item-list .item-newgrade .contents {
  color: var(--white);
  background-color: #313131;
}
.preorder-announce-wrap .lineup-item-list .newgrade-name {
  color: #d80000;
}

@media (min-width: 769px) {
  #system3d {
    aspect-ratio: 2/1;
  }
}
@media (max-width: 768px) {
  #system3d {
    aspect-ratio: 30/42;
  }
}

/* SUBARUスタートアップキャンペーン */
.cp-section .h3ttl {
  color: #b49f6d;
  line-height: 1.25;
}
.cp-section .icn-navitada {
  margin-inline: auto;
}
@media (min-width: 769px) {
  .cp-section .icn-navitada {
    width: 28.67%;
  }
}
@media (max-width: 768px) {
  .cp-section .icn-navitada {
    width: 162px;
  }
}
.cp-section .cp-main {
  background-color: #b49f6d;
  position: relative;
}
@media (min-width: 769px) {
  .cp-section .cp-main {
    margin-block-end: 112px;
    padding: 32px 104px;
  }
}
@media (max-width: 768px) {
  .cp-section .cp-main {
    margin-block-end: 12%;
    padding: 52px 24px;
  }
}
.cp-section .cp-main .cp-box {
  position: absolute;
}
@media (min-width: 769px) {
  .cp-section .cp-main .cp-box {
    width: 20.97%;
    top: 74.77%;
    right: 4.6%;
  }
}
@media (max-width: 768px) {
  .cp-section .cp-main .cp-box {
    width: 24.63%;
    top: 83.9%;
    right: 10px;
  }
}
@media (min-width: 769px) {
  .cp-section .txt-wrap p {
    word-break: auto-phrase;
  }
}/*# sourceMappingURL=top.css.map */