@charset "UTF-8";
/* .feature-point各ポイントのカラー設定 */
/* *** variables model *** */
/* radius */
/* *** common variables *** */
/* break point */
/* hover style */
/* color */
/* One-Tone */
/* Two-Tone */
/* *** mixins *** */
/* break point */
/* hover */
/* --- 10px = 1rem --- */
/* .feature-point各ポイントのカラー設定 */
.theme01 {
  --feature-point-theme-ttlThemeColor: #00568c;
  --feature-point-theme-txtThemeColor: #00548c;
  --feature-point-theme-bgColor: #d9dfe5;
  --feature-point-theme-bgimgPC: url("/bev/features/images/bg_comfort_pc.webp");
  --feature-point-theme-bgimgSP: url("/bev/features/images/bg_comfort_sp.webp");
}

.theme02 {
  --feature-point-theme-ttlThemeColor: #008162;
  --feature-point-theme-txtThemeColor: #008162;
  --feature-point-theme-bgColor: #ceebe3;
  --feature-point-theme-bgimgPC: url("/bev/features/images/bg_driving_pc.webp");
  --feature-point-theme-bgimgSP: url("/bev/features/images/bg_driving_sp.webp");
}

.theme03 {
  --feature-point-theme-ttlThemeColor: #4852bf;
  --feature-point-theme-txtThemeColor: #4852bf;
  --feature-point-theme-bgColor: #d7d8ea;
  --feature-point-theme-bgimgPC: url("/bev/features/images/bg_range_pc.webp");
  --feature-point-theme-bgimgSP: url("/bev/features/images/bg_range_sp.webp");
}

.theme04 {
  --feature-point-theme-ttlThemeColor: #00a3cc;
  --feature-point-theme-txtThemeColor: #00b1de;
  --feature-point-theme-bgColor: #d9eff1;
  --feature-point-theme-bgimgPC: url("/bev/features/images/bg_safety_pc.webp");
  --feature-point-theme-bgimgSP: url("/bev/features/images/bg_safety_sp.webp");
}

.bev-contents .four-feature-area .feature-point {
  position: relative;
}
.bev-contents .four-feature-area .feature-point::before {
  content: "";
  background-color: var(--feature-point-theme-bgColor);
  position: absolute;
  inset: 0;
  z-index: -2;
}
.bev-contents .four-feature-area .feature-point::after {
  content: "";
  background-color: var(--white);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-point::after {
    aspect-ratio: 1920/205;
    background-image: var(--feature-point-theme-bgimgPC);
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .feature-point::after {
    aspect-ratio: 768/267;
    background-image: var(--feature-point-theme-bgimgSP);
  }
}
.bev-contents .four-feature-area .txt-theme {
  color: var(--feature-point-theme-txtThemeColor);
}
.bev-contents .four-feature-area .ttl-theme {
  background-color: var(--feature-point-theme-ttlThemeColor);
}

/* 画像パス */
.bev-contents {
  /* メインビジュアル */
  /* 開発者インタビュー */
  /* 4つの特徴 */
}
.bev-contents .main-visual {
  position: relative;
}
.bev-contents .main-visual .logo {
  position: absolute;
}
@media (min-width: 769px) {
  .bev-contents .main-visual .logo {
    top: 10%;
    left: 14%;
    width: min(21%, 300px);
  }
}
@media (max-width: 768px) {
  .bev-contents .main-visual .logo {
    top: 17.45%;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
  }
}
.bev-contents .developer-area {
  color: var(--white);
  background-image: url(/bev/common_bev/images/bg_basic.webp);
}
@media (min-width: 769px) {
  .bev-contents .developer-area {
    padding-block: 1.6rem 5.6rem;
  }
}
@media (max-width: 768px) {
  .bev-contents .developer-area {
    padding-block: 1.6rem 4.2rem;
  }
}
.bev-contents .developer-area h2.logottl {
  margin-inline: auto;
}
@media (min-width: 769px) {
  .bev-contents .developer-area h2.logottl {
    max-width: 460px;
  }
}
@media (max-width: 768px) {
  .bev-contents .developer-area h2.logottl {
    max-width: 345px;
  }
}
.bev-contents .developer-area .ttl-sub {
  display: flex;
  justify-content: center;
}
@media (min-width: 769px) {
  .bev-contents .developer-area .ttl-sub {
    gap: 64px;
  }
}
@media (max-width: 768px) {
  .bev-contents .developer-area .ttl-sub {
    gap: 48px;
  }
}
.bev-contents .developer-area .ttl-sub .wrap {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .bev-contents .developer-area .ttl-sub .wrap {
    flex-direction: column;
    text-align: center;
  }
}
@media (min-width: 769px) {
  .bev-contents .developer-area .ttl-sub .pos {
    padding-inline-end: 1em;
    font-size: clamp(1.4rem, -0.948rem + 3.05vw, 1.8rem);
  }
}
@media (max-width: 768px) {
  .bev-contents .developer-area .ttl-sub .pos {
    font-size: 1.4rem;
  }
}
@media (min-width: 769px) {
  .bev-contents .developer-area .ttl-sub .name {
    font-size: clamp(2.6rem, 0.252rem + 3.05vw, 3rem);
  }
}
@media (max-width: 768px) {
  .bev-contents .developer-area .ttl-sub .name {
    font-size: 2rem;
  }
}
.bev-contents .developer-area .ttl-sub .icn-x {
  position: relative;
}
.bev-contents .developer-area .ttl-sub .icn-x::before, .bev-contents .developer-area .ttl-sub .icn-x::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 1px;
  background: currentColor;
}
@media (min-width: 769px) {
  .bev-contents .developer-area .ttl-sub .icn-x::before, .bev-contents .developer-area .ttl-sub .icn-x::after {
    right: -42px;
  }
}
@media (max-width: 768px) {
  .bev-contents .developer-area .ttl-sub .icn-x::before, .bev-contents .developer-area .ttl-sub .icn-x::after {
    right: -34px;
  }
}
.bev-contents .developer-area .ttl-sub .icn-x::before {
  transform: translateY(-50%) rotate(45deg);
}
.bev-contents .developer-area .ttl-sub .icn-x::after {
  transform: translateY(-50%) rotate(-45deg);
}
.bev-contents .developer-area .bc_modal_movie {
  border-radius: 10px;
  overflow: hidden;
  z-index: 0;
}
.bev-contents .developer-area .bc_modal_movie::before {
  content: "";
  background-color: var(--white);
  position: absolute;
  inset: 0;
  z-index: -1;
}
@media (min-width: 769px) {
  .bev-contents .developer-area figcaption {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .anchor-btns {
    flex-wrap: wrap;
  }
}
.bev-contents .four-feature-area .anchor-btns li {
  aspect-ratio: 240/164;
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .anchor-btns li {
    flex-basis: min(100%, 240px);
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .anchor-btns li {
    flex-basis: calc(50% - 8px);
  }
}
.bev-contents .four-feature-area .anchor-btns .anchor-link {
  padding: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--white);
}
.bev-contents .four-feature-area .anchor-btns .anchor-link::after {
  top: auto;
  right: 1.6rem;
  bottom: 1.6rem;
  background-image: url(/assets/images/icn_anchor_white.svg);
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .anchor-btns .anchor-link:hover {
    opacity: 0.7;
  }
}
.bev-contents .four-feature-area .anchor-btns .anchor-link.bg-comfortable {
  background: url(/bev/features/images/btn-features01.webp) top/cover no-repeat;
}
.bev-contents .four-feature-area .anchor-btns .anchor-link.bg-driving {
  background: url(/bev/features/images/btn-features02.webp) top/cover no-repeat;
}
.bev-contents .four-feature-area .anchor-btns .anchor-link.bg-range {
  background: url(/bev/features/images/btn-features03.webp) top/cover no-repeat;
}
.bev-contents .four-feature-area .anchor-btns .anchor-link.bg-safety {
  background: url(/bev/features/images/btn-features04.webp) top/cover no-repeat;
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-point {
    padding-block: 3.2rem 6.4rem;
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .feature-point {
    padding-block: 22.66% 3.2rem;
  }
}
.bev-contents .four-feature-area .feature-point .acc-wrap.nml-acc-wrap {
  border-color: var(--black);
}
.bev-contents .four-feature-area .feature-promote {
  display: flex;
  align-items: center;
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-promote {
    flex-direction: row-reverse;
    gap: 4rem;
    margin-inline-start: calc(50% - 50vw);
    width: calc(100vw - 40px);
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .feature-promote {
    flex-direction: column;
    gap: 1rem;
  }
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-promote .ttl-area {
    flex: 1;
  }
}
.bev-contents .four-feature-area .feature-promote .ttl-area .h3ttl {
  width: min(52%, 220px);
  margin-block-end: 1rem;
  border-radius: 5px;
  color: var(--white);
  font-style: italic;
  text-align: center;
  line-height: 1;
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-promote .ttl-area .h3ttl {
    padding: 1.4rem;
    font-size: clamp(2.2rem, 0.011rem + 2.85vw, 3rem);
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .feature-promote .ttl-area .h3ttl {
    padding: 1rem;
    font-size: 2rem;
    margin-inline: auto;
  }
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-promote .ttl-area p {
    font-size: clamp(2.2rem, 0.011rem + 2.85vw, 3rem);
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .feature-promote .ttl-area p {
    margin-block-end: 0.8rem;
    font-size: 2.4rem;
    line-height: 1.3;
    text-align: center;
  }
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-promote .img-area {
    flex-basis: 54%;
  }
  .bev-contents .four-feature-area .feature-promote .img-area img {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .feature-promote .img-area {
    margin-inline: calc(50% - 50vw);
  }
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-contents > li {
    margin-block-start: 3rem;
    padding-block-start: 3rem;
    border-block-start: 1px solid #808080;
    display: flex;
    align-items: center;
    gap: 4rem;
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .feature-contents > li {
    margin-block-start: 3.2rem;
  }
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-contents .copy {
    margin-block-end: 1.8rem;
    font-size: clamp(1.6rem, -0.589rem + 2.85vw, 2.4rem);
    line-height: 1.4;
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .feature-contents .copy {
    margin-block-end: 1rem;
    font-size: 1.8rem;
  }
}
.bev-contents .four-feature-area .feature-contents .caption {
  font-size: 1.4rem;
  font-weight: var(--fwMd);
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-contents .caption {
    margin-block-start: 0.8rem;
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .feature-contents .caption {
    margin-block: 1.4rem 1.6rem;
  }
}
.bev-contents .four-feature-area .feature-contents .sub-title {
  font-size: 1.8rem;
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-contents .sub-title {
    margin-block-end: 1.6rem;
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .feature-contents .sub-title {
    margin-block: 1.4rem 1.6rem;
  }
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-contents .txt-img-area {
    flex-basis: 52%;
  }
}
.bev-contents .four-feature-area .feature-contents .txt-img-area img {
  border-radius: 10px;
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-contents .txt-desc-area {
    flex: 1;
    margin-block-end: 3rem;
  }
}
.bev-contents .four-feature-area .feature-contents ol.ls-description li {
  display: flex;
  align-items: center;
  margin-block-end: 1rem;
  background: var(--white);
  border-radius: 10px;
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-contents ol.ls-description li {
    gap: 2rem;
    padding: 1.6rem 2rem;
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .feature-contents ol.ls-description li {
    gap: 1rem;
    padding: 1.6rem;
  }
}
@media (min-width: 769px) {
  .bev-contents .four-feature-area .feature-contents ol.ls-description li .icn-point {
    flex-basis: 10%;
  }
}
@media (max-width: 768px) {
  .bev-contents .four-feature-area .feature-contents ol.ls-description li .icn-point {
    flex-basis: min(8.46%, 32px);
  }
}
.bev-contents .four-feature-area .feature-contents ol.ls-description li p {
  font-size: 1.4rem;
  flex: 1;
}
@media (max-width: 768px) {
  .bev-contents .design-area {
    margin-block-start: 16%;
  }
}
.bev-contents .design-banner {
  display: flex;
  border: solid 1px;
  border-radius: 10px;
  position: relative;
}
@media (min-width: 769px) {
  .bev-contents .design-banner {
    padding: 3%;
    gap: 4rem;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .bev-contents .design-banner {
    padding: 2rem 1.6rem;
    flex-direction: column;
  }
}
.bev-contents .design-banner::before {
  content: "";
  aspect-ratio: 1/1;
  background: url(/bev/features/images/icn-look.webp) top/contain no-repeat;
  position: absolute;
}
@media (min-width: 769px) {
  .bev-contents .design-banner::before {
    width: min(8.74%, 90px);
    top: -24px;
    left: -24px;
  }
}
@media (max-width: 768px) {
  .bev-contents .design-banner::before {
    width: min(17%, 120px);
    top: -6%;
    left: -10px;
  }
}
@media (min-width: 769px) {
  .bev-contents .design-banner .img-wrap {
    flex-basis: 54%;
  }
}
@media (max-width: 768px) {
  .bev-contents .design-banner .img-wrap {
    order: 2;
  }
}
@media (min-width: 769px) {
  .bev-contents .design-banner .txt-wrap {
    flex: 1;
  }
}
@media (max-width: 768px) {
  .bev-contents .design-banner .txt-wrap {
    display: contents;
  }
}
@media (min-width: 769px) {
  .bev-contents .design-banner .h2ttl {
    font-size: clamp(2rem, 0.905rem + 1.42vw, 2.4rem);
    margin-block-end: 1rem;
  }
}
@media (max-width: 768px) {
  .bev-contents .design-banner .h2ttl {
    font-size: 1.8rem;
    margin-block-end: 1rem;
    text-align: center;
    order: 1;
  }
}
@media (min-width: 769px) {
  .bev-contents .design-banner p {
    font-size: clamp(1.2rem, 0.653rem + 0.71vw, 1.4rem);
  }
}
@media (max-width: 768px) {
  .bev-contents .design-banner p {
    font-size: 1.4rem;
    margin-block-start: 1.6rem;
    order: 3;
  }
}/*# sourceMappingURL=style.css.map */