@charset "UTF-8";
/* =================================================== *

  base

* =================================================== */
body {
  text-transform: none !important;
}

img {
  width: 100%;
  height: auto;
}

p {
  line-height: 2.2;
}
@media (max-width: 767px) {
  p {
    line-height: 1.8;
  }
}
p + p {
  margin-top: 1.5em;
}

.js-sr-img {
  overflow: hidden;
}

/*------------------
  display
------------------*/
._sp {
  display: none;
}

._tb {
  display: none;
}

._tb-sp {
  display: none;
}

@media (max-width: 992px) {
  ._pc {
    display: none;
  }
  ._tb {
    display: block;
  }
  ._tb-sp {
    display: block;
  }
}
@media (max-width: 767px) {
  ._pc-tb {
    display: none;
  }
  ._tb {
    display: none;
  }
  ._sp {
    display: block;
  }
}
/*------------------
  inner
------------------*/
.l-container {
  max-width: 1200px;
  width: 90%;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .l-container {
    width: calc(100% - 40px);
  }
}

.l-container-wide {
  max-width: 1100px;
  width: 80%;
  margin-inline: auto;
}
@media (max-width: 992px) {
  .l-container-wide {
    width: 90%;
  }
}
@media (max-width: 767px) {
  .l-container-wide {
    width: 100%;
  }
}

.l-container-1300 {
  max-width: 1300px;
  margin-inline: auto;
  width: 80%;
}
@media (max-width: 992px) {
  .l-container-1300 {
    width: 90%;
  }
}
@media (max-width: 767px) {
  .l-container-1300 {
    width: calc(100% - 20px);
  }
}

.inner1920 {
  max-width: 1920px;
  margin-inline: auto;
}

.inner900 {
  max-width: 900px;
  margin-inline: auto;
}

.inner800 {
  max-width: 800px;
  margin-inline: auto;
}

/*------------------
  wraper
------------------*/
.l-wrapper {
  padding: clamp(70px, 9.1264667536vw, 150px) 0;
}

.l-wrapper-top {
  padding-top: clamp(70px, 9.1264667536vw, 150px);
}

.l-wrapper-bottom {
  padding-bottom: clamp(70px, 9.1264667536vw, 150px);
}

.l-wrapper-100 {
  padding: clamp(50px, 6.518904824vw, 100px) 0;
}

.l-wrapper-top-100 {
  padding-top: clamp(50px, 6.518904824vw, 100px);
}

.l-wrapper-bottom-100 {
  padding-bottom: clamp(50px, 6.518904824vw, 100px);
}

.l-wrapper-70 {
  padding: clamp(50px, 6.518904824vw, 70px) 0;
}

.l-wrapper-top-70 {
  padding-top: clamp(50px, 6.518904824vw, 70px);
}

.l-wrapper-bottom-70 {
  padding-bottom: clamp(50px, 6.518904824vw, 70px);
}

.l-wrapper-50 {
  padding: clamp(30px, 3.9113428944vw, 50px) 0;
}

.l-wrapper-top-50 {
  padding-top: clamp(30px, 3.9113428944vw, 50px);
}

.l-wrapper-bottom-50 {
  padding-bottom: clamp(30px, 3.9113428944vw, 50px);
}

.l-wrapper-30 {
  padding: clamp(15px, 1.9556714472vw, 30px) 0;
}

.l-wrapper-top-30 {
  padding-top: clamp(15px, 1.9556714472vw, 30px);
}

.l-wrapper-bottom-30 {
  padding-bottom: clamp(15px, 1.9556714472vw, 30px);
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

img.autowidth {
  max-width: 100%;
  width: auto;
}

/*------------------
  text
------------------*/
.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

a.underline {
  color: #F0A030;
  text-decoration: underline;
}

/*------------------
  button
------------------*/
.p-btn1 {
  text-align: center;
}
.p-btn1 a {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 10px 20px;
  border-radius: 100vh;
}

/* =================================================== *

  header

 * =================================================== */
/* -----------------------
header
----------------------- */
/* =================================================== *

  footer

* =================================================== */
/* =================================================== *

  top

* =================================================== */
/* =================================================== *

  cars

* =================================================== */
/*------------------
  wrap
------------------*/
.cars-wrap__flex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  margin-bottom: 60px;
}
@media (max-width: 992px) {
  .cars-wrap__flex {
    grid-template-columns: repeat(1, 1fr);
  }
}
.cars-wrap__flex * {
  min-height: 0;
  min-width: 0;
}

/*------------------
  data
------------------*/
.cars-data {
  text-align: right;
}

/*------------------
  title
------------------*/
.cars-ttl {
  background: #A90042;
  color: #fff;
  padding: 10px 20px 8px;
  border-radius: 100vh;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  line-height: 1;
}
.cars-ttl__grade {
  font-size: 80%;
  line-height: 1.4;
}

/*------------------
  info
------------------*/
.cars-info {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .cars-info {
    display: block;
    margin-bottom: 20px;
  }
}
.cars-info * {
  min-height: 0;
  min-width: 0;
}
.cars-info > .left {
  flex-basis: 60%;
}
.cars-info > .right {
  flex-basis: 38%;
}

/*------------------
  img
------------------*/
.slider-main img {
  aspect-ratio: 4/3;
  object-fit: cover;
}
@media (max-width: 767px) {
  .slider-main {
    margin-bottom: 10px;
  }
}

.thumb-nav {
  visibility: hidden;
  /* display:none禁止 */
  height: 0;
}

.thumb-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.thumb-grid img {
  aspect-ratio: 4/3;
  object-fit: cover;
  margin-bottom: 5%;
}

.thumb-grid > div {
  width: 24%;
  cursor: pointer;
}

.thumb-grid > div:nth-child(n+9) {
  display: none;
}

.cars-img__count {
  text-align: right;
  color: #A90042;
  font-size: 80%;
}

/*------------------
 price
------------------*/
.cars-price {
  flex-basis: 48%;
}
.cars-price__ttl {
  font-size: 80%;
  line-height: 1.4;
}
.cars-price__num1 {
  color: #A90042;
  font-size: clamp(20px, 2.0161290323vw, 50px);
  line-height: 1.4;
}
@media (max-width: 992px) {
  .cars-price__num1 {
    font-size: clamp(50px, 6.518904824vw, 70px);
  }
}
.cars-price__num1 .price-small {
  font-size: 80%;
}
.cars-price__num1 .price-unit {
  color: #000;
  font-size: 40%;
  margin-left: 5px;
}
.cars-price__num2 {
  font-size: clamp(18px, 1.814516129vw, 24px);
  line-height: 1.4;
}
@media (max-width: 992px) {
  .cars-price__num2 {
    font-size: clamp(24px, 3.1290743155vw, 40px);
  }
}
.cars-price__num2 .price-small {
  font-size: 80%;
}
.cars-price__num2 .price-unit {
  font-size: 40%;
  margin-left: 5px;
}
.cars-price__total {
  border-bottom: solid 1px #000;
  margin-bottom: 20px;
}
.cars-price__flex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 10px;
}
.cars-price__flex > div:first-child {
  border-right: solid 1px #000;
  padding-right: 10px;
}
.cars-price__flex > div:last-child {
  padding-left: 10px;
}

/*------------------
 content
------------------*/
.cars-content {
  margin-bottom: 20px;
}
.cars-content p {
  line-height: 1.4;
}

/*------------------
  table
------------------*/
.cars-table table {
  width: 100%;
}
.cars-table table th {
  width: 25%;
  background: #A90042;
  color: #fff;
  padding: 10px;
  border: solid 1px #000;
}
@media (max-width: 767px) {
  .cars-table table th {
    width: 100%;
    display: block;
    border: none;
  }
}
.cars-table table td {
  width: 25%;
  border: solid 1px #000;
  padding: 10px;
}
@media (max-width: 767px) {
  .cars-table table td {
    width: 100%;
    display: block;
    border: none;
  }
}

/*------------------
  search
------------------*/
.search-sec {
  padding: 30px 0;
}

.search-select hr {
  padding-top: 10px;
  margin: 10px 0;
}

.searchform input {
  border: solid 1px #ccc;
  padding: 5px;
}
.searchform button {
  background: #000;
  color: #fff;
  padding: 5px;
}
.searchform select {
  border: solid 1px #ccc;
  padding: 5px;
}