@charset "UTF-8";
/* *** common variables *** */
/* break point 
---------------------------------------------- */
/* hover style
---------------------------------------------- */
/* color
---------------------------------------------- */
/* *** ①One-Tone *** */
/* *** ②Two-Tone *** */
/* *** mixins *** */
/* break point */
/* hover */
/* -----------------------------------------------
  ① clamp関数
----------------------------------------------- */
/* --- 10px = 1rem --- */
/* -----------------------------------------------
  ② Y軸減少計算
----------------------------------------------- */
/* --- 画面を縮小させた際にコンテンツのY軸距離を広げる関数 --- */
/* -------------------------------------
  共通
------------------------------------- */
/* 改行防止 */
.no-break {
  display: inline-block;
}

/* 戻るボタン */
.txt-link-wrap.back-page-ver {
  justify-content: flex-start;
}
.txt-link-wrap.back-page-ver .arrow-link {
  padding-inline: 24px 0;
}
.txt-link-wrap.back-page-ver .arrow-link::after {
  right: auto;
  left: 0;
  transform: translateY(-50%) rotate(180deg);
}

/* -------------------------------------
  レイアウト
------------------------------------- */
/* サービスの流れ */
.service-flow-wrap {
  --item-space: 40px;
}
@media (min-width: 769px) and (max-width: 909px) {
  .service-flow-wrap {
    padding-inline-end: var(--item-space);
  }
}
.service-flow-wrap .flow-list {
  display: grid;
  gap: var(--item-space);
}
@media (min-width: 769px) {
  .service-flow-wrap .flow-list {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}
@media (max-width: 768px) {
  .service-flow-wrap .flow-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
.service-flow-wrap .flow-list .item {
  border: 1px solid var(--silver);
  border-radius: 8px;
  padding: 24px;
  display: inherit;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
}
.service-flow-wrap .flow-list .item:not(:last-of-type) {
  position: relative;
}
.service-flow-wrap .flow-list .item:not(:last-of-type)::after {
  content: "";
  width: 20px;
  height: 38px;
  background: url(/dealerservice/forowner/carlife/heritageservice/assets/images/icn_arrow_d.svg) top/contain no-repeat;
  position: absolute;
}
@media (min-width: 769px) {
  .service-flow-wrap .flow-list .item:not(:last-of-type)::after {
    top: 50%;
    transform: translateY(-50%);
    right: -32px;
  }
}
@media (max-width: 768px) {
  .service-flow-wrap .flow-list .item:not(:last-of-type)::after {
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    bottom: -40px;
  }
}
.service-flow-wrap .flow-ttl {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 2rem;
}/*# sourceMappingURL=style.css.map */


