@charset "UTF-8";
/* *** common variables *** */
/* break point 
---------------------------------------------- */
/* hover style
---------------------------------------------- */
/* color
---------------------------------------------- */
/* *** ①One-Tone *** */
/* *** ②Two-Tone *** */
/* *** mixins *** */
/* break point */
/* hover */
/* -----------------------------------------------
  ① clamp関数
----------------------------------------------- */
/* --- 10px = 1rem --- */
/* -----------------------------------------------
  ② Y軸減少計算
----------------------------------------------- */
/* --- 画面を縮小させた際にコンテンツのY軸距離を広げる関数 --- */
/* *** module adjust *** */
/* Header
----------------------------------------- */
.header {
  z-index: 1100;
}

/* Icon
----------------------------------------- */
/* 下層ページ内アンカーリンク */
.link-scroll-wrap {
  scrollbar-width: auto;
}
.link-scroll-wrap::-webkit-scrollbar {
  height: 2px;
  display: block;
  background-color: var(--greyK10);
}
.link-scroll-wrap::-webkit-scrollbar-thumb {
  background-color: var(--keyColor);
}

/* ご購入を検討中の方 外部リンクアイコン位置 */
.linkpanel-list.cv-linkpanel-list .item a.linkpanel {
  position: relative;
}
.linkpanel-list.cv-linkpanel-list .item a.linkpanel::after {
  margin-left: 0;
  position: absolute;
}
@media (min-width: 769px) {
  .linkpanel-list.cv-linkpanel-list .item a.linkpanel::after {
    top: 0.75em;
    right: 0.875em;
  }
}
@media (max-width: 768px) {
  .linkpanel-list.cv-linkpanel-list .item a.linkpanel::after {
    top: 12px;
    right: 16px;
  }
}

/* target="_blank" 且つ .arrow-link（＞）をつけたい場合
  アクセサリーページ ＞ シミュレーションする */
a[target=_blank].arrow-link.icn-none-blank {
  padding: 8px 24px 8px 0;
}
a[target=_blank].arrow-link.icn-none-blank::after {
  display: block;
  position: absolute;
  background: url(/assets/images/icn_arrow.svg) no-repeat center/contain;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Title
----------------------------------------- */
/* H1 heading */
.h1ttl a {
  display: block;
}

/* トップページ 特徴タイトル */
@media (min-width: 769px) {
  .h5ttl.feature-h5ttl {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .h5ttl.feature-h5ttl {
    font-size: 1.4rem;
  }
}

.h3ttl.feature-h3ttl {
  display: flex;
}
@media (max-width: 768px) {
  .h3ttl.feature-h3ttl {
    align-items: center;
  }
}
.h3ttl.feature-h3ttl .num {
  color: var(--keyColor);
}
@media (min-width: 769px) {
  .h3ttl.feature-h3ttl .num {
    margin-right: 24px;
  }
}
@media (max-width: 768px) {
  .h3ttl.feature-h3ttl .num {
    margin-right: 12px;
  }
}

@media (min-width: 769px) {
  .feature-txt {
    font-size: 20px;
  }
}

/* Layout
----------------------------------------- */
/* 下層ページ：イントロ パート 幅調整 */
@media (max-width: 768px) {
  .safety-bg-section.sp-full-width,
  .car-detail-itbox.sp-full-width {
    margin-left: -16px;
    margin-right: -16px;
  }
}

/* トップページ MV試乗予約ボタン */
@media (max-width: 768px) {
  .cmn-mv-section.cardetail-mv .btn-wrap {
    padding: 0 16px 10px;
    row-gap: 0;
  }
}

/* STI Sport MVエリア */
.sti-sport-mv {
  margin-top: var(--blockMg) !important;
}

/* おすすめグレード枠線 */
@media (max-width: 768px) {
  .grade-bd-box {
    border: 1px solid var(--silver);
    padding: 16px;
  }
}
@media (max-width: 768px) {
  .grade-bd-box .price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    line-height: 1.2;
  }
}

/* アクセサリーページ　.show-itemのdisplay:none;（謎）を上書き */
.show-more-than2-wrap .show-item {
  display: block;
}

.comparison-col2.product-cmn-box.jc-c > .col {
  width: auto;
}

/* Carousel
----------------------------------------- */
/* グレード カルーセル */
.grade-carousel-wrap .ttl-price-box {
  align-items: center;
}

/* スライダー：PC版 ドットだけのスタイル（SP版はassetsに有） */
@media (min-width: 769px) {
  .pc-slider-cmn {
    padding-bottom: 48px;
  }
  .pc-slider-cmn .splide__pagination {
    margin-top: 32px;
  }
}
/* Modal
----------------------------------------- */
.modal-overlay {
  z-index: 1101;
}

.modal-win {
  z-index: 1102;
}

.modal-win.win-large.img-modal-win-adjust {
  height: auto;
}

body.on-modal-open .modal-win.win-large {
  z-index: 1102;
}

/* *** common carlineup *** */
/* 2025.09.01「メーカー希望小売価格」を非表示対応
※アウトバックは以下で対応
/legacy-outback/common_legacy-outback/scss/sc_adjust.scss
----------------------------------------- */
.grade-bd-box p.mt-xs.grey-k60 + p.txt-b.mt-s:not(.txt-s) {
  display: none;
}

.special-eq-section-01 .ttl-price-box .txt-box > p.sp-txt-xs,
.special-eq-section-02 .ttl-price-box .txt-box > p.sp-txt-xs,
.special-eq-section-03 .ttl-price-box .txt-box > p.sp-txt-xs {
  display: none;
}
.special-eq-section-01 .ttl-price-box .txt-box > p.sp-txt-xs ~ p.sp-txt-xs,
.special-eq-section-02 .ttl-price-box .txt-box > p.sp-txt-xs ~ p.sp-txt-xs,
.special-eq-section-03 .ttl-price-box .txt-box > p.sp-txt-xs ~ p.sp-txt-xs {
  display: block;
}

.grade-nml-box p.mt-xs.grey-k60 + p.txt-b.mt-s:not(.txt-s) {
  display: none;
}

.modal-win-main > div.layout-c.mt-s + p.txt-b.mt-s {
  display: none;
}

#grade_compare ul.grade_block li p.tax.txt-xxs {
  display: none;
}

.sti-sport-mv .mv-info-wrap .left-wrap p.txt-b {
  padding-inline-end: 1em;
}
.sti-sport-mv .mv-info-wrap .left-wrap p.txt-b span.sp-txt-xs:first-of-type {
  display: none;
}
.sti-sport-mv .mv-info-wrap .left-wrap p.txt-b span.sp-txt-xs:first-of-type + br.sp-only {
  display: none;
}

/* Font
----------------------------------------- */
.lp-modal-box .ttl-col2 .price .num {
  font-family: "Hiragino Sans", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

/* Link
----------------------------------------- */
/* ankerタグの非活性化 */
a.deactivate-anker {
  pointer-events: none;
}

/* Text
----------------------------------------- */
/* 下層ページ　キャプション、インキャプション */
.txt-img-wrap .img-wrap {
  position: relative;
}
.txt-img-wrap .img-wrap .img-out-caption {
  margin-top: 0.5rem;
  font-size: 1.2rem;
}
.txt-img-wrap .img-wrap .img-in-caption {
  display: block;
  padding: 3px 8px;
  width: 100%;
  font-size: 1.2rem;
  color: var(--white);
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
}

/* キャプション　装飾 */
.target_area {
  display: inline-block;
  margin-right: 0.7rem;
  width: 2.5rem;
  height: 1.2rem;
  position: relative;
  bottom: -1px;
}
.target_area.orange {
  background: #ff8100;
}

/* デザインページ　キャプション */
.img-wrap-design {
  position: relative;
}
.img-wrap-design .img-out-caption {
  margin-top: 0.5rem;
  font-size: 1.2rem;
}
.img-wrap-design .img-in-caption {
  display: block;
  padding: 3px 8px;
  width: 100%;
  font-size: 1.2rem;
  color: var(--white);
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
}

/* Caution
----------------------------------------- */
/* 注記エリア */
.caution_block {
  margin-top: var(--size16);
  color: var(--greyK60);
  border: solid 1px #efbe2d;
  padding: 10px;
  font-size: 1.2rem;
}
.caution_block img {
  position: relative;
  top: -3px;
}

/* Icon
----------------------------------------- */
/* ⚠︎ 警告アイコン */
.note-list .mark {
  display: flex;
}
.note-list .mark img.icn-alert {
  padding-right: 0.25rem;
  height: 1.25rem;
  width: auto;
  position: relative;
  top: 0.35rem;
}
.note-list img.icn-ftr_alert {
  padding-right: 0.2rem;
  height: 1.5rem;
  width: auto;
  position: relative;
  top: 0;
}

/* 燃費優良車 基準 */
.comparison-sub-ttl.icn-economy-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 570px) {
  .comparison-sub-ttl.icn-economy-wrap {
    padding-inline-start: 134px;
  }
}
@media screen and (max-width: 569px) {
  .comparison-sub-ttl.icn-economy-wrap {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  .comparison-sub-ttl.icn-economy-wrap {
    row-gap: 1.6rem;
  }
}
@media (min-width: 769px) {
  .comparison-sub-ttl.icn-economy-wrap .icn-economy {
    flex-basis: 120px;
  }
}
@media (max-width: 768px) {
  .comparison-sub-ttl.icn-economy-wrap .icn-economy {
    width: 120px;
  }
}

.h5ttl .icn-economy {
  width: 120px;
  margin-inline-start: 2rem;
  vertical-align: middle;
  display: inline-block;
}

/* 燃費優良車 基準＞電通コンポーネントレイアウト崩れ修正 */
@media (min-width: 769px) {
  .comparison-col2 {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 42px;
  }
}
@media (min-width: 769px) {
  .comparison-col2 > .col {
    flex-basis: calc(50% - 20px);
    width: initial;
  }
}

/* 特設サイトへの遷移の場合は矢印を右向き */
.anchor-specialsite .bnr-txt::after {
  transform: rotate(-90deg);
}

/* Tooltip */
.icn-tooltip {
  width: 1em;
  height: 1em;
  font-size: inherit;
  line-height: inherit;
}
.icn-tooltip::after {
  content: "";
  width: 100%;
  height: 100%;
  background: url(/common_carlineup/images/icon/icn_tooltip.svg) center/contain no-repeat;
  display: inline-block;
  vertical-align: text-top;
  transition: var(--transition);
}
.icn-tooltip:hover::after {
  opacity: 0.7;
}

button.icn-tooltip,
a.icn-tooltip {
  margin-inline-start: 0.2em;
}

/* Menu
----------------------------------------- */
/* 追従ローカルメニュー */
@media (min-width: 769px) {
  .feature-tab-wrap .tab-wrap.cmn-tab-wrap {
    --menuH: 64px;
  }
}
@media (max-width: 768px) {
  .feature-tab-wrap .tab-wrap.cmn-tab-wrap {
    --menuH: 65px;
  }
}

@media (min-width: 769px) {
  .grade-tab-wrap .tab-wrap.cmn-tab-wrap {
    --menuH: 64px;
  }
}
@media (max-width: 768px) {
  .grade-tab-wrap .tab-wrap.cmn-tab-wrap {
    --menuH: 48px;
  }
}

.tab-wrap.cmn-tab-wrap:not(.js-tab-wrap) {
  padding-block-end: var(--menuH);
  position: relative;
}
.tab-wrap.cmn-tab-wrap:not(.js-tab-wrap) > .tab-wrap.fixed-menu:not(.is-fixed) {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}
.tab-wrap.cmn-tab-wrap:not(.js-tab-wrap) > .tab-wrap.fixed-menu.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding-block: var(--size8);
  border-bottom: solid 1px var(--silver);
}

/* MV
----------------------------------------- */
/* トップページ SVGロゴ色変更 → 白 */
.icn img.logo-white {
  filter: invert(100%) sepia(3%) saturate(364%) hue-rotate(84deg) brightness(118%) contrast(100%) drop-shadow(3px 3px 6px var(--black));
}
@media (max-width: 768px) {
  .icn img.sp-logo-white {
    filter: invert(100%) sepia(3%) saturate(364%) hue-rotate(84deg) brightness(118%) contrast(100%) drop-shadow(3px 3px 6px var(--black));
  }
}
@media (min-width: 769px) {
  .icn img.pc-logo-white {
    filter: invert(100%) sepia(3%) saturate(364%) hue-rotate(84deg) brightness(118%) contrast(100%) drop-shadow(3px 3px 6px var(--black));
  }
}

/* トップページ メインビジュアル キャッチコピー文字色の変更 → 白 */
.catchcopy-white {
  color: var(--white);
  text-shadow: 3px 3px 6px var(--black);
}
@media (max-width: 768px) {
  .catchcopy-white-sp {
    color: var(--white);
  }
}
@media (min-width: 769px) {
  .catchcopy-white-pc {
    color: var(--white);
  }
}

/* Carousel
----------------------------------------- */
/* Splide動画スライダー用ラッパー */
.cmn-carousel-wrap.mov-carousel-wrap {
  /* Splide縦型動画スライダーレイアウト */
  /* 縦型動画スライダー('動画タイトル付き')の場合 */
}
@media (min-width: 769px) {
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-mov-slider,
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider {
    padding-bottom: 96px;
  }
}
@media (max-width: 768px) {
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-mov-slider,
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider {
    padding-bottom: 62px;
  }
}
@media (max-width: 768px) {
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-mov-slider .splide__arrows,
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider .splide__arrows {
    visibility: visible;
  }
}
@media (max-width: 768px) {
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-mov-slider .cmn-carousel-prev,
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-mov-slider .cmn-carousel-next,
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider .cmn-carousel-prev,
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider .cmn-carousel-next {
    bottom: -8px;
  }
}
@media (max-width: 768px) {
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-mov-slider .cmn-carousel-prev,
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider .cmn-carousel-prev {
    left: 0;
  }
}
@media (max-width: 768px) {
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-mov-slider .cmn-carousel-next,
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider .cmn-carousel-next {
    left: 44px;
  }
}
@media (max-width: 768px) {
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-mov-slider .cmn-carousel-pagination,
  .cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider .cmn-carousel-pagination {
    max-width: 72%;
    right: 0;
    left: auto;
    transform: initial;
  }
}
.cmn-carousel-wrap.mov-carousel-wrap .js-vertical-mov-slider .bc_modal_movie::after,
.cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider .bc_modal_movie::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(/common_carlineup/images/bc_mov/btn_play.webp) center/contain no-repeat;
  width: min(60%, 160px);
  aspect-ratio: 1/1;
}
.cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider .bc-player-default_default.vjs-fluid.vertical {
  padding-top: initial;
  aspect-ratio: 9/16;
  margin-inline: auto;
  height: auto;
}
.cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider .splide__slide .video-js .vjs-big-play-button {
  background: none;
  position: initial;
  width: 100%;
  height: 100%;
}
.cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider .splide__slide .video-js .vjs-big-play-button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: url(/common_carlineup/images/bc_mov/btn_play.webp) 50% 50% no-repeat;
  width: 100%;
}
.cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider .splide__slide .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  content: none;
}
.cmn-carousel-wrap.mov-carousel-wrap .js-vertical-not-modal-mov-slider .splide__slide .video-js.vjs-paused .vjs-big-play-button {
  display: block;
}
@media (min-width: 769px) {
  .cmn-carousel-wrap.mov-carousel-wrap.cmn-img-slider-wrap.ver-with-btm .js-vertical-mov-slider .splide__slide.is-active .vjs-fluid,
  .cmn-carousel-wrap.mov-carousel-wrap.cmn-img-slider-wrap.ver-with-btm .js-vertical-not-modal-mov-slider .splide__slide.is-active .vjs-fluid {
    position: relative;
  }
  .cmn-carousel-wrap.mov-carousel-wrap.cmn-img-slider-wrap.ver-with-btm .js-vertical-mov-slider .splide__slide.is-active .vjs-fluid::before,
  .cmn-carousel-wrap.mov-carousel-wrap.cmn-img-slider-wrap.ver-with-btm .js-vertical-not-modal-mov-slider .splide__slide.is-active .vjs-fluid::before {
    content: "";
    width: 100%;
    height: 100%;
    border: solid 6px var(--keyColor);
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
}

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

/* Movie
----------------------------------------- */
/* 動画アスペクト比1/1 */
video-js.square {
  padding-top: 100% !important;
}

/* 縦型動画アスペクト比9/16 */
/* Modal
----------------------------------------- */
/* 動画モーダル */
.bc-movie-modal {
  display: none;
  justify-content: center;
  align-items: center;
}
.bc-movie-modal .vjs-tech {
  visibility: visible;
}
.bc-movie-modal .bc-movie-modal-body {
  width: 100%;
}
@media (max-width: 768px) {
  .bc-movie-modal .bc-player-default_default.vjs-fluid.vertical {
    padding-top: initial;
    aspect-ratio: 9/16;
    max-width: 400px;
    margin-inline: auto;
    height: auto;
  }
}

button.bc_modal_movie.btn-nml::after {
  background: none;
}

/* 2025.09.18 movie_playlist_bc.cssのcss打ち消し（フォレスターアクセサリー「動画を見る」） */
video.vjs-tech {
  visibility: visible;
}

/* モーダルサイズ調整（Tooltip等で使えます） */
.modal-win.win-size-adjust {
  height: auto;
}

/* win-size-adjustクラス切り替え時のカクツキ防止用（一時的に非表示） */
.modal-win.is-calculating {
  opacity: 0;
  transition: none;
}

/* Layout
----------------------------------------- */
/* おすすめグレード */
.grade-bd-box .ttl-price-box .ttl-box {
  min-width: 42px;
}

/* KV下ボタンエリア */
.mv-bottom-section .btn-wrap {
  display: flex;
}
@media (min-width: 769px) {
  .mv-bottom-section .btn-wrap {
    column-gap: 24px;
    padding: var(--size24) 40px;
    margin-top: 0;
    align-items: baseline;
    justify-content: flex-end;
  }
}
@media (max-width: 768px) {
  .mv-bottom-section .btn-wrap {
    padding: 0 16px 10px;
    row-gap: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
}
.mv-bottom-section .btn-wrap .arrow-link {
  font-size: 1.6rem;
  padding-top: 8px;
  padding-bottom: 8px;
}
@media (max-width: 768px) {
  .mv-bottom-section .btn-wrap .arrow-link {
    font-size: 1.1rem;
    order: 2;
  }
}
.mv-bottom-section .btn-wrap .btn-nml {
  margin: 0;
}
@media (max-width: 768px) {
  .mv-bottom-section .btn-wrap .btn-nml {
    order: 1;
  }
}

/* 先行予約告知 */
.preorder-announce-wrap {
  border: solid 2px var(--black);
}
@media (min-width: 769px) {
  .preorder-announce-wrap {
    padding-inline: 3.2rem;
  }
}
@media (max-width: 768px) {
  .preorder-announce-wrap {
    padding-inline: 1.6rem;
  }
}
@media (min-width: 769px) {
  .preorder-announce-wrap .h2ttl {
    padding-block: 3.2rem;
  }
}
@media (max-width: 768px) {
  .preorder-announce-wrap .h2ttl {
    padding-block: 2rem;
    display: flex;
    flex-direction: column;
  }
}
@media (min-width: 769px) {
  .preorder-announce-wrap .h2ttl .pc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .preorder-announce-wrap .h2ttl .pc-row {
    display: contents;
  }
}
.preorder-announce-wrap .h2ttl .pc-row h2 {
  line-height: 0;
}
.preorder-announce-wrap .h2ttl .pc-row .tag {
  width: fit-content;
  height: fit-content;
  color: var(--white);
  background-color: var(--keyColor);
  border-radius: 50px;
  line-height: 1;
}
@media (min-width: 769px) {
  .preorder-announce-wrap .h2ttl .pc-row .tag {
    padding: 1rem 2rem;
  }
}
@media (max-width: 768px) {
  .preorder-announce-wrap .h2ttl .pc-row .tag {
    margin-block-start: var(--size16);
    padding: 0.8rem 1.2rem;
    order: 10;
  }
}
@media (min-width: 769px) {
  .preorder-announce-wrap .h2ttl .sub {
    margin-block-start: 0.8rem;
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .preorder-announce-wrap .h2ttl .sub {
    font-size: 1.6rem;
  }
}
.preorder-announce-wrap .lineup-item-list {
  border-top: solid 1px currentColor;
  border-bottom: solid 1px currentColor;
  display: flex;
}
@media (min-width: 769px) {
  .preorder-announce-wrap .lineup-item-list {
    margin-inline-start: -3.2rem;
    margin-inline-end: -3.2rem;
  }
}
@media (max-width: 768px) {
  .preorder-announce-wrap .lineup-item-list {
    margin-inline-start: -1.6rem;
    margin-inline-end: -1.6rem;
    flex-direction: column;
  }
}
.preorder-announce-wrap .lineup-item-list > li {
  display: flex;
  flex-direction: column;
}
@media (min-width: 769px) {
  .preorder-announce-wrap .lineup-item-list > li.item-newcolor {
    flex-basis: 43.36%;
    border-right: solid 1px currentColor;
  }
}
@media (max-width: 768px) {
  .preorder-announce-wrap .lineup-item-list > li.item-newcolor {
    border-bottom: solid 1px currentColor;
  }
}
@media (min-width: 769px) {
  .preorder-announce-wrap .lineup-item-list > li.item-newcolor .contents {
    padding-block: 1rem;
  }
}
@media (min-width: 769px) {
  .preorder-announce-wrap .lineup-item-list > li.item-newgrade {
    flex: 1;
  }
}
@media (min-width: 769px) {
  .preorder-announce-wrap .lineup-item-list > li.item-newgrade .contents {
    padding: 2.4rem;
  }
}
.preorder-announce-wrap .lineup-item-list .ttl {
  border-bottom: solid 1px currentColor;
  text-align: center;
  line-height: 1;
}
@media (min-width: 769px) {
  .preorder-announce-wrap .lineup-item-list .ttl {
    padding: 1.6rem;
    font-size: 2.4rem;
  }
}
@media (max-width: 768px) {
  .preorder-announce-wrap .lineup-item-list .ttl {
    padding: 1rem;
    font-size: 1.8rem;
  }
}
.preorder-announce-wrap .lineup-item-list .contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}
@media (min-width: 769px) {
  .preorder-announce-wrap .lineup-item-list .contents {
    flex: 1;
  }
}
@media (max-width: 768px) {
  .preorder-announce-wrap .lineup-item-list .contents {
    padding: 1.6rem;
  }
}
.preorder-announce-wrap .lineup-item-list .newcolor-list:not(.card-2) .img-wrap {
  max-width: 280px;
}
.preorder-announce-wrap .lineup-item-list .newcolor-list.card-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  row-gap: 1rem;
}
.preorder-announce-wrap .lineup-item-list .color-name {
  text-align: center;
}
@media (min-width: 769px) {
  .preorder-announce-wrap .lineup-item-list .color-name {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .preorder-announce-wrap .lineup-item-list .color-name {
    font-size: 1.2rem;
  }
}
.preorder-announce-wrap .lineup-item-list .newgrade-name {
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", "Yu Mincho", "MS PMincho", "serif";
  text-align: center;
}
@media (min-width: 769px) {
  .preorder-announce-wrap .lineup-item-list .newgrade-name {
    font-size: 3.6rem;
  }
}
@media (max-width: 768px) {
  .preorder-announce-wrap .lineup-item-list .newgrade-name {
    font-size: 2.4rem;
  }
}
.preorder-announce-wrap .btn-wrap {
  margin-block: 3rem;
}

/* アコーディオン
----------------------------------------- */
summary {
  display: block;
  list-style: none;
}

/* *** bodycolors *** */
.color-crystalWhitePerl {
  background: linear-gradient(180deg, #FFF 0%, #E8ECE9 100%);
}

.color-ceramicWhite {
  background: linear-gradient(180deg, #FFF 0%, #ecedf0 100%);
}

.color-iceSilverMetallic {
  background: linear-gradient(180deg, #E2E7EA 0%, #A0ABB4 100%);
}

.color-magnetiteGrayMetallic {
  background: linear-gradient(180deg, #71706D 0%, #39332E 100%);
}

.color-asteroidGrayPerl {
  background: linear-gradient(180deg, #626e81 0%, #4f5a6b 100%);
}

.color-crystalBlackSilica {
  background: linear-gradient(180deg, #3D3939 0%, #302A28 100%);
}

.color-pureRed {
  background: linear-gradient(180deg, #FF002F 0%, #DA0000 100%);
}

.color-ignitionRed {
  background: linear-gradient(180deg, #ca1926 0%, #b2141f 100%);
}

.color-sunBlazePerl {
  background: linear-gradient(180deg, #b74e2f 0%, #9b4227 100%);
}

.color-sapphireBluePerl {
  background: linear-gradient(180deg, #003F81 0%, #002747 100%);
}

.color-oasisBlue {
  background: linear-gradient(180deg, #009FD2 0%, #007AB3 100%);
}

.color-dayBreakBluePerl {
  background: linear-gradient(180deg, #25325d 0%, #161d37 100%);
}

.color-offshoreBlueMetallic {
  background: linear-gradient(180deg, #6f767b 0%, #52585d 100%);
}

.color-wrBluePerl {
  background: linear-gradient(180deg, #0055af 0%, #034a96 100%);
}

.color-black {
  background: linear-gradient(180deg, #1f1e1d 0%, #050505 100%);
}

.color-platinumWhitePearlMica {
  background: linear-gradient(180deg, #eeeeee 0%, #cdcdcd 100%);
}

.color-darkBlueMica {
  background: linear-gradient(180deg, #162f88 0%, #102265 100%);
}

.color-emotionalRed2 {
  background: linear-gradient(180deg, #dd3d3b 0%, #ba3230 100%);
}

.color-preciousMetal {
  background: linear-gradient(180deg, #9f9f9f 0%, #737272 100%);
}

.color-harborMistGrayPearl {
  background: linear-gradient(180deg, #8396ba 0%, #657592 100%);
}

.color-harborMistGrayPearl_black {
  background: linear-gradient(90deg, #8396ba 50%, #1f1e1d 50%);
}

.color-galaxyPurplePearl {
  background: linear-gradient(180deg, rgb(63, 45, 89) 0%, rgb(22, 5, 46) 100%);
}

.color-shiningWhitePearl {
  background: linear-gradient(180deg, #eef3f4 0%, #c7cccd 100%);
}

.color-blackMicaMetallic {
  background: linear-gradient(180deg, #191919 0%, #000000 100%);
}

.color-smoothGrayMicaMetallic {
  background: linear-gradient(180deg, #9f9f9f 0%, #868686 100%);
}

.color-FireQuartzRedMetallic {
  background: linear-gradient(180deg, #d51927 0%, #b91521 100%);
}

.color-laserBlueCrystalShine {
  background: linear-gradient(180deg, #105e7c 0%, #0c4960 100%);
}

.color-naturalBeigeMicaMetallic {
  background: linear-gradient(180deg, #c9b991 0%, #ad9f7c 100%);
}

.color-pearlWhite3 {
  background: linear-gradient(180deg, #f6f6f6 0%, #d8d7d7 100%);
}

.color-brightSilverMetallic {
  background: linear-gradient(180deg, #b6bbbe 0%, #9a9fa2 100%);
}

.color-plumBrownCrystalMica {
  background: linear-gradient(180deg, #7c2b27 0%, #5a1f1c 100%);
}

.color-turquoiseBlueMicaMetallic {
  background: linear-gradient(180deg, #3584d6 0%, #2c72b9 100%);
}

.color-platinumWhitePearlMica_black {
  background: linear-gradient(90deg, #eeeeee 50%, #1f1e1d 50%);
}

.color-darkBlueMica_black {
  background: linear-gradient(90deg, #162f88 50%, #1f1e1d 50%);
}

.color-emotionalRed2_black {
  background: linear-gradient(90deg, #dd3d3b 50%, #1f1e1d 50%);
}

.color-preciousMetal_black {
  background: linear-gradient(90deg, #9f9f9f 50%, #1f1e1d 50%);
}

.color-black_laserBlueCrystalShine {
  background: linear-gradient(90deg, #191919 50%, #105e7c 50%);
}

.color-black_FireQuartzRedMetallic {
  background: linear-gradient(90deg, #191919 50%, #d51927 50%);
}

.color-black_pearlWhite3 {
  background: linear-gradient(90deg, #191919 50%, #f6f6f6 50%);
}

.color-black_turquoiseBlueMicaMetallic {
  background: linear-gradient(90deg, #191919 50%, #3584d6 50%);
}

.color-blackMicaMetallic_shiningWhitePearl {
  background: linear-gradient(90deg, #191919 50%, #eef3f4 50%);
}

.color-blackMicaMetallic_smoothGrayMicaMetallic {
  background: linear-gradient(90deg, #191919 50%, #9f9f9f 50%);
}

.color-chromeGrayMetallic {
  background: linear-gradient(180deg, #515964 0%, #373e47 100%);
}

.color-coolVioletCrystalShine {
  background: linear-gradient(180deg, #4a3d73 0%, #362a5b 100%);
}

.color-lakeBlueMetallic {
  background: linear-gradient(180deg, #819297 0%, #5c7076 100%);
}

.color-forestKhakiMetallic {
  background: linear-gradient(180deg, #676f51 0%, #4c533a 100%);
}

.color-sandBeigeMetallic {
  background: linear-gradient(180deg, #c9b991 0%, #b4a47c 100%);
}

.color-blackMicaMetallic_lakeBlueMetallic {
  background: linear-gradient(90deg, #191919 50%, #819297 50%);
}

.color-blackMicaMetallic_forestKhakiMetallic {
  background: linear-gradient(90deg, #191919 50%, #676f51 50%);
}

.color-blackMicaMetallic_sandbeigeMetallic {
  background: linear-gradient(90deg, #191919 50%, #c9b991 50%);
}

.color-blackMicaMetallic_FireQuartzRedMetallic {
  background: linear-gradient(90deg, #191919 50%, #d51927 50%);
}

.color-white_sandBeigeMetallic {
  background: linear-gradient(90deg, #ffffff 50%, #c9b991 50%);
  border: 1px solid #c9b991;
}

.color-lemonSquashCrystalMetallic {
  background: linear-gradient(180deg, #f8ee00 50%, #cfc600 100%);
}

.color-splashBlueMetallic {
  background: linear-gradient(180deg, #3584d6 50%, #2b6db1 100%);
}

.color-white3 {
  background: linear-gradient(180deg, #ffffff 0%, #d3d3d3 100%);
}

.color-skyBlueMetallic {
  background: linear-gradient(180deg, #7fbed0 50%, #6a9eae 100%);
}

.color-offbeatKhakiMetallic {
  background: linear-gradient(180deg, #8e7b55 50%, #746544 100%);
}

.color-tonicoOrangeMetallic {
  background: linear-gradient(180deg, #ff6633 50%, #d35f39 100%);
}

.color-riverRockPerl {
  background: linear-gradient(180deg, #afb1b3 0%, #8f9192 100%);
}

.color-autumnGreenMetallic {
  background: linear-gradient(180deg, #728258 0%, #556141 100%);
}

.color-crimsonRedPerl {
  background: linear-gradient(180deg, #a51c23 0%, #86161c 100%);
}

.color-brilliantBronzeMetallic {
  background: linear-gradient(180deg, #877060 0%, #665448 100%);
}

.color-cashmereGoldOpal {
  background: linear-gradient(180deg, #a59167 0%, #887855 100%);
}

.color-magnetiteGrayMetallic_crystalBlackSilica {
  background: linear-gradient(90deg, #71706D 50%, #3D3939 50%);
}

.color-brilliantBronzeMetallic_crystalBlackSilica {
  background: linear-gradient(90deg, #877060 50%, #3D3939 50%);
}

.color-autumnGreenMetallic_crystalBlackSilica {
  background: linear-gradient(90deg, #728258 50%, #3D3939 50%);
}

.color-riverRockPerl_crystalBlackSilica {
  background: linear-gradient(90deg, #afb1b3 50%, #3D3939 50%);
}

.color-graceBrownCrystalMica {
  background: linear-gradient(180deg, #642522 0%, #491b19 100%);
}

.color-brightSilverMetallic_skyBlueMetallic {
  background: linear-gradient(90deg, #b6bbbe 50%, #7fbed0 50%);
}

.color-smoothGreyMicaMetallic_graceBrownCrystalMica {
  background: linear-gradient(90deg, #9f9f9f 50%, #642522 50%);
}

.color-citronYellowPerl {
  background: linear-gradient(180deg, #cbd254 50%, #c3c950 100%);
}

.color-sandDunewPerl {
  background: linear-gradient(180deg, #e4d8b8 50%, #e4d8b8 100%);
}

.color-sunriseYellow {
  background: linear-gradient(180deg, #ffdd00 0%, #9b8200 100%);
}

/* *** animations common *** *//*# sourceMappingURL=style.css.map */