@charset "UTF-8";
:root {
  --gray-color:#5F5F5F;
  --gray-sub-color:#F0F0F0;
  --gray-main-color:#9B9B9B;
  --blrack-color:#151515;
  --white-color:#FFFFFF;
  --main-color:#334149;
}

.main {
  width: 100%;
  height: auto;
}

.main-wrap {
  width: inherit;
  height: inherit;
}

.main-wrap__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  width: inherit;
  height: 90px;
}

.main-wrap__logos--img {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}

.main-wrap-outer {
  position: relative;
  width: inherit;
  background-color: var(--main-color);
  overflow: hidden;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.main-wrap-outer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.5);
}

.main-wrap-outer__slider {
  margin: 80px 0;
  height: 300px;
}

.main-wrap-outer__slider-contents {
  margin: 0 60px;
  max-width: 900px;
  width: 100%;
  height: inherit;
}

.main-wrap-outer__slider-contents-link {
  display: flex;
  justify-content: center;
  width: inherit;
  height: inherit;
  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

.main-wrap-outer__slider-contents-link-detail {
  width: 330px;
  height: auto;
  background-color: var(--white-color);
}

.main-wrap-outer__slider-contents-link-detail-inner {
  margin: 30px 30px 0 30px;
  display: flex;
  justify-content: space-between;
}

.main-wrap-outer__slider-contents-link-detail-inner--date {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.main-wrap-outer__slider-contents-link-detail-inner--date-ym {
  font-size: 14px;
  color: var(--blrack-color);
}

.main-wrap-outer__slider-contents-link-detail-inner--date-day {
  margin-top: 4px;
  font-weight: bold;
  font-size: 40px;
  color: var(--blrack-color);
}

.main-wrap-outer__slider-contents-link-detail-inner--title {
  margin: 30px 30px 0 30px;
  font-size: 18px;
  font-weight: bold;
  color: var(--blrack-color);
  line-height: 1.8;
}

.main-wrap-outer__slider-contents-link-thumbnail {
  width: auto;
  height: 300px;
}
.main-wrap-outer__slider-contents-link-thumbnail img {
  width: inherit;
  height: inherit;
}

/*
* 新着コンテンツ
*/
.new {
  width: 100%;
}

.new-outer {
  margin: 50px auto 0 auto;
  max-width: 900px;
  width: 100%;
}

.new-outer--title {
  position: relative;
  padding: 4px;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 12px;
  color: var(--white-color);
  background-color: var(--main-color);
}
.new-outer--title::after {
  position: absolute;
  top: 30px;
  left: 0;
  display: block;
  width: -moz-max-content;
  width: max-content;
  content: "New Contents";
  font-size: 30px;
  font-weight: 800;
  padding: 0;
  color: var(--blrack-color);
  background-color: var(--white-color);
}

.new-outer-inner {
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
}

.new-outer-inner__contents {
  display: block;
  width: 280px;
  height: auto;
  overflow: hidden;
}

.new-outer-inner__contents--img {
  width: inherit;
  height: auto;
}
.new-outer-inner__contents--img img {
  width: inherit;
  height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.new-outer-inner__contents-detail__category {
  display: block;
  margin: 10px 0;
  padding: 4px 12px;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border: 1px solid var(--gray-color);
  border-radius: 10px;
  font-size: 11px;
  color: var(--gray-color);
}

.new-outer-inner__contents-detail__title {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--blrack-color);
}

.new-outer-inner__contents-detail__time {
  margin-top: 8px;
  font-size: 11px;
  color: var(--gray-color);
}

/*
* 販売
*/
.sale {
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
}

.sale-outer {
  margin: 50px auto 0 auto;
  max-width: 900px;
  width: 100%;
}

.sale-outer--title {
  position: relative;
  padding: 4px;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 12px;
  color: var(--white-color);
  background-color: var(--main-color);
}
.sale-outer--title::after {
  position: absolute;
  top: 30px;
  left: 0;
  display: block;
  width: -moz-max-content;
  width: max-content;
  content: "Sale Marketing";
  font-size: 30px;
  font-weight: 800;
  padding: 0;
  color: var(--blrack-color);
  background-color: var(--white-color);
}

.sale-outer-inner {
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

.sale-outer-inner__contents {
  width: auto;
}
.sale-outer-inner__contents-main {
  display: block;
  max-width: 620px;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.sale-outer-inner__contents-main--img {
  width: 100%;
}
.sale-outer-inner__contents-main--img img {
  width: 100%;
  height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.sale-outer-inner__contents-main-detail {
  margin-top: 10px;
}

.sale-outer-inner__contents-main-detail--title {
  font-size: 20px;
  /* font-weight: normal; */
  color: var(--blrack-color);
  line-height: 1.6;
}

.sale-outer-inner__contents-main-detail--time {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--gray-color);
}

.sale-outer-inner__contents-sub {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 230px;
  height: auto;
  overflow: hidden;
}

.sale-outer-inner__contents-sub--img {
  width: inherit;
  height: auto;
}
.sale-outer-inner__contents-sub--img img {
  width: inherit;
  height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.sale-outer-inner__contents-sub-detail--title {
  font-size: 14px;
  color: var(--blrack-color);
  line-height: 1.6;
}

.sale-outer-inner__contents-sub-detail--time {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--gray-color);
}

.sale-outer-inner__contents-sub:last-child {
  margin-top: 10px;
}

/*
* Download
*/
.list {
  width: 100%;
}

.list-outer {
  margin: 100px auto 0 auto;
  max-width: 900px;
  width: 100%;
}

.list-outer--title {
  position: relative;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 26px;
  color: var(--blrack-color);
}
.list-outer--title::after {
  margin: 0 auto;
  padding-bottom: 2px;
  display: block;
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  width: -moz-max-content;
  width: max-content;
  content: "Download";
  font-size: 11px;
  font-weight: bold;
  color: var(--blrack-color);
  border-bottom: 1px solid;
}

.list-outer-inner {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.list-outer-inner__contents {
  display: block;
  width: 290px;
  height: 350px;
  overflow: hidden;
  border: solid 1px #9B9B9B;
  border-radius: 10px;
}

.list-outer-inner__contents--img {
  width: inherit;
  height: 160px;
}
.list-outer-inner__contents--img img {
  width: inherit;
  height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.list-outer-inner__contents-detail {
  margin: 10px;
}

.list-outer-inner__contents-detail__list {
  font-size: 14px;
  color: #791321;
  font-weight: bold;
}

.list-outer-inner__contents-detail__title {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--blrack-color);
}

.list-outer-inner__contents-detail__txt {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-color);
}

.list-outer--button {
  display: block;
  margin: 40px auto 0 auto;
  padding: 24px 100px;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  font-weight: bold;
  color: #791321;
  border: 3px solid #791321;
  border-radius: 36px;
}
.list-outer--button:hover {
  color: var(--white-color);
  background-color: #791321;
  transition-duration: 0.5s;
}

/*
* repair
*/
.repair {
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
}

.repair-outer {
  margin: 50px auto 0 auto;
  max-width: 900px;
  width: 100%;
}

.repair-outer--title {
  position: relative;
  padding: 4px;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 12px;
  color: var(--white-color);
  background-color: var(--main-color);
}
.repair-outer--title::after {
  position: absolute;
  top: 30px;
  left: 0;
  display: block;
  width: -moz-max-content;
  width: max-content;
  content: "Repair Marketing";
  font-size: 30px;
  font-weight: 800;
  padding: 0;
  color: var(--blrack-color);
  background-color: var(--white-color);
}

.repair-outer-inner {
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

.repair-outer-inner__contents {
  width: auto;
}
.repair-outer-inner__contents-main {
  display: block;
  max-width: 620px;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.repair-outer-inner__contents-main--img {
  width: 100%;
}
.repair-outer-inner__contents-main--img img {
  width: 100%;
  height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.repair-outer-inner__contents-main-detail {
  margin-top: 10px;
}

.repair-outer-inner__contents-main-detail--title {
  font-size: 20px;
  /* font-weight: normal; */
  color: var(--blrack-color);
  line-height: 1.6;
}

.repair-outer-inner__contents-main-detail--time {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--gray-color);
}

.repair-outer-inner__contents-sub {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 230px;
  height: auto;
  overflow: hidden;
}

.repair-outer-inner__contents-sub--img {
  width: inherit;
  height: auto;
}
.repair-outer-inner__contents-sub--img img {
  width: inherit;
  height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.repair-outer-inner__contents-sub-detail--title {
  font-size: 14px;
  color: var(--blrack-color);
  line-height: 1.6;
}

.repair-outer-inner__contents-sub-detail--time {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--gray-color);
}

.repair-outer-inner__contents-sub:last-child {
  margin-top: 10px;
}

/*
* レスポンシブ
*/
@media screen and (max-width: 900px) {
  .main-wrap-outer__slider {
    height: 180px;
  }
  .main-wrap-outer__slider-contents {
    margin: 0 20px;
    max-width: 600px;
  }
  .main-wrap-outer__slider-contents-link-detail {
    margin: 0 auto;
    width: calc(100% - 20px);
  }
  .main-wrap-outer__slider-contents-link-detail-inner, .main-wrap-outer__slider-contents-link-detail-inner--title {
    margin: 20px 20px 0 20px;
  }
  .main-wrap-outer__slider-contents-link-thumbnail {
    margin: 0 auto;
    width: calc(100% - 20px);
    height: auto;
    height: -webkit-fill-available;
  }
  /*
  * 新着コンテンツ
  */
  .new-outer {
    width: calc(100% - 20px);
  }
  .new-outer-inner {
    justify-content: center;
  }
  .new-outer-inner__contents {
    width: 230px;
  }
  /*
  * 販売マーケティング
  */
  .sale-outer, .list-outer {
    width: calc(100% - 20px);
  }
  /*
  * ダウンロード
  */
  .list-outer-inner {
    justify-content: center;
  }
  .list-outer-inner__contents {
    width: 30%;
  }
  .list-outer-inner__contents--img {
    width: -webkit-fill-available;
    height: auto;
  }
  /*
  * 車検・鈑金マーケティング
  */
  .repair-outer {
    width: calc(100% - 20px);
  }
}
@media screen and (max-width: 620px) {
  .main-wrap-outer__slider {
    margin: 40px 0;
    height: -moz-fit-content;
    height: fit-content;
  }
  .main-wrap-outer__slider-contents {
    max-width: 420px;
  }
  .main-wrap-outer__slider-contents-link {
    flex-direction: column-reverse;
  }
  .main-wrap-outer__slider-contents-link-thumbnail {
    width: calc(100% - 20px);
    height: auto;
  }
  .main-wrap-outer__slider-contents-link-thumbnail img {
    width: 100%;
    height: auto;
  }
  .main-wrap-outer__slider-contents-link-detail-inner--title {
    margin: 20px 20px 20px 20px;
  }
  /*
  * 新着コンテンツ
  */
  .new-outer-inner__contents {
    width: 210px;
  }
  /*
  * 販売マーケティング
  */
  .sale-outer-inner {
    flex-direction: column;
  }
  .sale-outer-inner__contents:last-child {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 10px;
  }
  .sale-outer-inner__contents-sub {
    width: 100%;
  }
  .sale-outer-inner__contents-sub:last-child {
    margin-top: unset;
  }
  /*
  * ダウンロード
  */
  .list-outer-inner {
    gap: 20px;
  }
  .list-outer--title {
    font-size: 21px;
  }
  .list-outer-inner__contents {
    width: 100%;
    height: auto;
  }
  .list-outer--button {
    padding: 20px 50px;
    font-size: 14px;
  }
  /*
  * 車検・鈑金マーケティング
  */
  .repair-outer-inner {
    flex-direction: column;
  }
  .repair-outer-inner__contents:last-child {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 10px;
  }
  .repair-outer-inner__contents-sub {
    width: 100%;
  }
  .repair-outer-inner__contents-sub:last-child {
    margin-top: unset;
  }
}
@media screen and (max-width: 480px) {
  .main-wrap-outer__slider-contents {
    max-width: 300px;
  }
  /*
  * 新着コンテンツ
  */
  .new-outer-inner__contents {
    width: 100%;
  }
}/*# sourceMappingURL=front.css.map */